计算机应用基础FrontPage网页制作课件

单击以编辑,母版标题样式,单击以编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,*,计算机应用基础,南通职业大学 张丽萍,FrontPage,1,超文本语言,HTML,概述,HTML,(,H,yper,T,ext,M,arkup,L,anguage),超文本标记语言,一种制作,Web,网页的标准语言。,标题部分,内容部分,HTML,结构,1,2,HTML,格式,规定的项目,我的第一个主页,welcome to my homepage,2,3,网页制作软件,Web Server,FrontPage,Photoshop,Dream Weaver,Flash,Paint Shop Pro,3,4,FrontPage,网页制作,表格,可以使网页中的图片、文字资料之间的位置相对固定，在版面设计中正确使用表格，可以轻松地设计出专业效果的网页。,网页表单,是一种输入界面，通过网页表单用户可以把商品订单传送给,Web,服务器。采用框架可以在一个窗口中显示多个网页，建立特殊网页的转换效果，呈现出多样化的网页内容。,4,5,FrontPage2000,简介,FrontPage2000,是由,Microsoft,公司推出的新一代,Web,网页制作工具，能够方便、快捷地在自己的服务器上创建和发布网页。借助,FrontPage2000,可以创建、设计和管理自己的,Web,。,可以像使用字处理软件写信那样轻松地制作,Web,页面。,有了,FrontPage2000,，,主页制作人员完全可以不用那些枯燥乏味的,HTML,标记语言，只需像在,Word,里写文章一样输入文字、插入图形、制作表格、编辑超链接等，就能完成主页的制作。,几乎所有的编辑工作都是以“所见即所得”的方式进行，这样，制作者可以将主要精力放在页面的内容、布局及美化等方面，而不必在具体的实现上耗费大量的时间和精力。,FrontPage,的界面和,Word,、,Excel,及,PowerPoint,等软件非常相似，易学易用。即使对,HTML,语言一无所知，使用,FrontPage,也能制作出具有专业水准的主页。,尤其值得一提的是，可视化主页制作只是,FrontPage,的部分功能，,FrontPage,与其他主页制作工具的不同之处在于，它还是一个智能化的,Web,站点管理工具，帮助,Web,管理人员以可视化的方式创建、组织、更新和维护网站。此外，,FrontPage,还自带一个,Web,服务器，使用户在没有安装,Web,服务器的计算机上也能通过浏览器测试刚才完成的网页，就像在,Web,上浏览一样。,5,6,FrontPage2000,特点,1,直观形象的站点管理,用户可以利用,FrontPage 2000,的图形界面设计和智能化管理，在直观形象的方式下创建站点的主页结构、组织站点的文件、输入输出主页或文件、测试修复超链接，将制作好的站点发布到,WWW,服务器上。,2,精心组织的图形界面,FrontPage,提供的视图方式有：网页、文件夹、报表、导航和任务，每一种视图方式都为用户提供了,Web,站点的不同信息。,3,强大的模板和向导功能,FrontPage,带有大量的模板和向导，使用它们可以通过一步步的选择和确认，便能完成网页主体结构的创作。,6,7,FrontPage2000,特点,4,智能化管理,FrontPage,具有相当多的智能化特色。例如，当用户拖动一个新页面到导航视图中，或是从导航视图中删去一个页面，网站中所有相关页面的导航条都会自动更新；当用户改变了一个文件的文件名，或是将此文件移到另外一个文件夹时，,FrontPage,会自动修改网站中所有指向该文件的超链接；当站点制作完成，要发布到,WWW,服务器或,Internet,时，,FrontPage,只发布自上次发布以来被更新的文件，并自动验证网页和文件的地址。此外，在多用户环境中，,FrontPage,还可以自动检测由其他用户所做的修改，以解决不同制作人员之间的冲突。,5,强大灵活的主页制作功能,FrontPage,提供了一个“所见即所得”的主页制作工具,FrontPage Editor,在制作网页的同时，还生成对应的,HTML,代码。,FrontPage Editor,还支持几乎所有的高级页面特征，如帧、表格、,CGI,、,Java Applet,、,JavaScript,、,ActiveX,控件、动态,HTML,以及,Internet Explorer,的频道定义格式等。此外，,FrontPage Editor,还提供了一系列,FrontPage,组件，用以实现表单域处理、网站索引、搜索、计数器、导航条等复杂功能。,7,8,FrontPage,界面,FrontPage,编辑区,视图模式,网页查看方式,默认文件名,普通方式,HTML,方式,预览方式,用于编辑网页，产生由,HTML,标志语言产生的网页文件。,提供了直接用,HTML,标志语言编写网页的途径。,用于查看所设计的网页在浏览器内的效果,标题栏、菜单栏、工具栏、文件夹列表,8,9,1,、,FrontPage,视图,网页视图,文件夹视图,报表视图,导航视图,超链接视图,任务视图,编辑网页，默认文件名为,new_page_#.htm,，,其中,#,是个数字。,用于组织,Web,站点中的文件和文件夹。,报告站点中的文件和超链接的状态。,显示站点的导航结构。,显示站点中每一页的超链接。,显示站点中要完成的任务。,9,10,2,、网页的基本操作,创建新网页,打开网页,保存网页,打印网页,关闭网页,建立空白的网页工具栏上的“新建”按钮,使用模板执行“文件,|,新建,|,网页”命令,文件格式,网页文件（,*,.,htm,）,模板文件（,*,.tem,）,Active Server Pages,文件（,*,.asp,）,超文本模板文件（,*,.,htt,）,超文本样式文件（,*,.,css,）,网页保存的方法与,Office,系列其他软件基本相同,模板：一组预先设计好的页面,10,11,主题可以应用到某一网页中，也可以应用到整个站点中。,执行“格式,|,主题”命令,文本编辑与,Word,基本相同,项目符号：可使用当前主题中的图片,横幅位于网页顶端，是一条可以自己选定的横幅标志。,网页的主题、横幅、文本的编辑及格式化,11,12,FrontPage,特殊对象,通过“插入”菜单,（,1,）符号,（,2,）水平线,（,3,）注释,（,4,）时间戳,12,13,3,、网页上的多媒体,允许插入的图形文件格式：,JPEG,、,GIF,、,BMP,、,TIFF,、,TGA,、,RAS,、,EPS,等,GIF,较少的颜色种类,JPEG,全彩色图片,动态GIF文件,图形处理：插入,|,图片,|,来自文件,网页中应用音乐：文件,|,属性,动画及视频：插入,|,图片,|,视频,13,14,GIF,图片、,JPEG,图片,格式,“,GIF”,是,Graphics Interchange Format,的简称，是由,CompuServe,公司制定的图片格式，其目的是作为网络上图片文件交换的标准，属于一种,256,色，使用采用一种无损压缩方式压缩的图片文件格式，这意味着在压缩过程中，原始的图像数据并没有任何减少，图像质量不会有任何损害。,GIF,图片格式经过两次重大变革，最近的变革就是,GIF89a,，,GIF89a,允许将多个图片保存在同一个,GIF,文件里，而且能以默认播放的顺序显示这些图片，用来创造动画的效果，经常用作,Web,网页的广告。,“,JPEG”,是其制定组织,Joint Photographic Experts Group,的简称，这是一种能够压缩真彩色图片的文件格式，其压缩的方法属于一种失真的处理方式。,14,15,PNG,图片格式,“,PNG”,是,Portable Graphics Network,的简称，在,1996,年才由,W3C(World Wide Web Consortium),所制定的,Web,标准图片格式，这是一种完全开放的图片格式，但其尺寸要比上述两种稍大，而且目前并没有普遍应用于网页设计。,目前网页设计使用的图片文件，,GIF,和,JEPG,格式是两大主流，至于到底要选择何种格式，倒并非真正的重点，只需依所需品质和色彩数选择即可，为何使用这张图片才是网页设计首要考虑的关键。对于,Word 2000,而言，只需选择其中之一即可，但重要的是,Word 2000,保存成网页时有下列注意事项：,在网页中插入的图片，如果插入的为,JPEG,格式的图片，保存时仍将它存成,JPEG,格式；如果插入的为其他格式图片（例如,TIFF,或,BMP,），,此时,Word 2000,将图片转存成,GIF,格式。,Word 2000,默认使用的是,GIF,格式，在,Web,选项的图片选项卡可以设置输出成,PNG,的格式。,15,16,4,、图像属性设置,还原,热点,凹凸,黑白,透明,裁剪,亮度,旋转,分层,超链接,插入文字,插入图片,16,17,5,、超链接的使用,网页内部某一位置,电子邮件,本地机上其他网页,建立新网页,页面内部的超链接,页面间的超链接,电子邮件的超链接,当前网站上的网页,书签的使用,17,18,6,、用表格进行版面设计,网页中可以采用表格显示系统信息，,表格也可用作版面配置工具，提供更好的信息表达方式，,将文字或图片资料以分类方式进行系统化处理，设计出具有专业效果的网页。,18,19,表格的结构,标题,边框,单元格,单元格间距,单元格边框,19,20,表格处理,表,格,|,插入,|,表格,20,21,单元格属性处理,21,22,单页面向导,22,23,利用表格构造网页,23,24,动态网页制作,滚动字幕,选择,【,插入,】【,组件,】【,字幕,】,网站记数器,【,插入,】【,组件,】【,站点计数器,】,动态广告,选择,【,插入,】【,组件,】【,横幅广告管理器属性,】,DHTML,的使用,网页过渡,24,25,7,、制作框架页面,前几节，我们制作的,Web,页面都是一个窗口显示一个页面，这一类页面简单、直观制作方便；,当要求在一个窗口内容纳大量信息时，比如一个大型商务网站的首页，这种页面就很难胜任了。,这时，我们就必须运用框架技术来解决问题。,25,26,在网页中使用框架,创建框架网页,带有,3,个框架结构的页面,文件,|,新建,|,网页,|,框架网页,26,27,保存框架网页,总,框架,上,框架,左,框架,右,框架,含有,n,个框架网页将产生,n,+1,个文件,27,28,8,、,表单,表单为人机交互提供了一种有序的结构,建立表单的步骤,执行“插入,|,表单,|,对应的某类表单”命令,确定是否要删除随表单对象一起出现的按钮和虚线框,双击表单对象，打开该表单的属性对话框，设置属性值,28,29,在网页中添加表单,在网站上发布信息的同时也能收集信息。表单在网页浏览中是相当重要的，因为您所访问的许多站点，要求在浏览的过程中，在客户登记表中进行注册，或输入本人或公司的信息。这些工作都可以利用表单的交互功能来实现。,在,FrontPage 2000,中容纳了更加丰富的表单工具，能轻松地使用表单控件如文本框、单选按钮、复选框和下拉式菜单等工具创建表单,。,29,30,表单的基本概念,表单元素：,组成表单的最小单位，包括单行文本框、滚动文本框、复选框、单选按钮、下拉菜单、普通按钮、图片按钮以及标签。表单元素是表单必不可缺的组成部分。,表单：,表单在编辑页面时表现为用破拆线的框围起来的一个区域。表单由各种表单元素组成，同时也可以包含其他页面元素。在一个页面中可以有一个表单，也可以有多个表单。,表单名称：,表单名称可以作为区分不同表单的标志。,表单元素名称：,用于确定该表单元素的惟一标志。在同一个表单中，表单元素名称是不能相同的。处理表单结果时根据名称区别来自不同表单元素的信息。,值：,访问者在表单元素中提交的信息。根据不同的表单元素类型，值可以是访问者输入的内容或是访问者对