computer文化基础第五版-网页制作.ppt

《computer文化基础第五版-网页制作.ppt》由会员分享，可在线阅读，更多相关《computer文化基础第五版-网页制作.ppt（94页珍藏版）》请在三一文库上搜索。

1、网 页 制 作,DREAMWEAVERMX 2004,内容提要,基本网页编辑 图形的插入和图形格式 创建超链接（超链接、书签、热点） 网页的布局（表格和框架） 创建和使用表单,网页与网站 网页和网站制作的基本步骤 网站创建的基本方法 认识Dreamweaver MX 2004 管理和组织网页 网页编辑,内容提要（续）,制作导航栏 层、时间轴、行为及其应用 样式表 动态 gif 图像的制作 网页特效制作,PhotoImpact,Ulead GIF Animator,网页与主页,网页 ( Web Page ),主页 ( Home Page ),浏览器与Web服务器之间 是以页为单位来传送信息。,h

2、ttp:/ 之间通过超链接相互组织成为反映 某个主题的网站。,提高下载速度 超文本地址引用方便 Web页没有固定的长度,网页的制作工具,可利用任何一种文字处理软件编辑Web文档（推荐：记事本）Web文档以纯文本格式存放，取名为*.html或*.htm。 其中插入的HTML语言只有用浏览器才能被解释翻译，最终在浏览器窗口中呈现为图文并茂的网页。,NOTEPAD,超文本标记语言HTML,HyperText Markup Language,直接使用HTML编写网页, 简单的HTML例子 欢迎光临无名的主页 这就是我 我常去的网站， Yahoo! ,HTML在浏览器中被解释, 简单的HTML例子 欢迎

3、光临无名的主页 这就是我 我常去的网站， Yahoo! ,一个HTML文件总是由文件头（HEAD）和文件体（BODY）两部分组成。标记和用来说明本文件是一个HTML文件。,“所见即所得”的网页编辑工具,FrontPage易学易用，适合于网页设计的初学者； Dreamweaver强调的是更强大的网页控制、设计能力及创意的完全发挥，适合专业的制作人员使用。,“所见即所得”的网页编辑,设计：“页面视图”，所见 即所得的编辑环境； 代码： “源代码视图”，直 接通过修改HTML标记命 令编辑网页； 拆分：代码视图和设计视图同时显示。,选择主题,规划网页（结构与链接关系）,组织素材,选择视觉外观,设计有

4、效的页面布局,制作具体网页,发布网站信息,网站制作步骤,网站基本结构,网站是由网页组成的，网页之间是由超链接来连接的，其连接方式有三种：线性网站、树状网站、非线性网站,线性网站：一页连接一页,树状网站：分层排列,非线性网站：上述两种网站的结合,网页制作步骤,可利用任何一种文字处理软件编辑Web文档（推荐：记事本） Web文档以纯文本格式存放，取名为*.html或*.htm。 其中插入的HTML语言只有用浏览器才能被解释翻译 在浏览器中使用文件菜单打开命令，可在本地机浏览 Web文档，完成编辑后，可利用FTP将文件及其所用到的媒体素材文件传送到某台公共Web服务器 人人均可在浏览器中URL处，键

5、入具体命令，实现异地浏览该Web文档 一旦对该Web文档内容进行更新，须更新它所在Web服务器上的相关文档,网页的基本分类,以网页的角度来看,一个网站中的众多网页 主要可以分成下列两层:,个人主页,兴趣爱好,个人相册,个人收藏,导航层,内容层,网站创建的基本方法,将本地机中的某个文件夹定义为Dreamweaver站点，利用Dreamweaver管理这些网页,网站创建步骤举例（1）,在本地磁盘上新建站点文件夹，如d:openlab,执行 “站点|管理站点”命令，弹出“管理站点”对话框,执行“新建|站点”命令,网站创建步骤举例（2）,设置站点名称：开放实验室,不使用服务器技术,设置开发过程中,使用

6、文件的方式和文件的存储位置,设置无远端服务器连接,网站创建步骤举例（3）,在文件面板上新建网页文件和图片素材文件夹,网站创建步骤举例（4）,切换到“站点地图”视图,创建的站点结构,网站创建步骤举例（5）,双击某个网页文件名,进入具体网页的编辑,认识Dreamweaver界面,视图按钮,插入各种对象,网页编辑窗口,网页间切换标签,文件面板,标签选择器,属性面板,基本网页编辑,既可以在站点中创建新网页，也可以创建独立的网页。Dreamweaver 内置的各类模板可以帮助我们创建不同类型的网页。,设计视图中进行文本的录入和word类似，也可以在网页中插入任何一种基于文本的文件，包括 .htm 文件、

7、.asp 文件、.rtf 文件和 .txt 文件，以及任何 Microsoft Office 文档。,新建、打开、保存网页,添加文本和插入素材文件,基本网页编辑,在 Dreamweaver 中，可以在属性面板上设置文本格式，如更改字体、大小、样式、颜色等.,Dreamweaver的插入菜单可以插入换行符、水平线、特殊字符和注释等多种类型的特殊元素.,设置文本格式,插入特殊网页元素,基本网页编辑,使用项目符号和编号,使用“页面属性”对话框设置网页标题、背景色或背景图片、文本颜色、超链接颜色和样式等。,认识图形格式,GIF JPEG PNG （图形交换格式）（联合图像专家组）（可移植网络图形） 可

8、用颜色数 16777216 16777216 4294967296 每幅图像的颜色 256 16777216 256-4294967296 压缩 无损 有损 无损 透明 单色 否 Alpha通道 半透明 否 否 Alpha通道 动画 是 否 否,GIF格式图像举例,GIF（Graphics Interchange Format）是作为一个跨平台图形标准而开发的、与硬件无关的8位彩色图形格式，也是在因特网上使用最早、应用最广泛的图像格式，包含87A和89A两种格式。,2cm2cm 2K,4cm3.6cm 8K,5cm14cm 47K 256色的调色板 导致色滩出现， 色彩层次感差。,JPEG格式

9、图像举例,JPEG格式（简称JPG）是一种流行的图像文件压缩格式，通常，JPEG可将图像文件的长度缩短成原来的50%到2%不等。在保证对图像质量的前提下，获得较高的压缩比。摄影图像通常采用JPEG格式存储和显示，大多数数字相机拍摄的图像都经过了JPEG压缩处理。,高压缩比 15cm20cm 43K,低压缩比 8cm6cm 116K,图形的插入和简单编辑,图形的插入：执行“插入|图像” 菜单命令 直接拖拽来改变图片的大小 大图像不能通过减小该图像尺寸以达到减少 其文件大小和下载时间的目的。 使用属性面板设置图片属性,HTML并不能包含图像，它只是包含图像文件的名称 和相应的格式代码。 ,重新取样

10、图片,网页中图片不能正常显示问题,原因1：图片没有保存到网站中 原因2：图片保存到网站中，但保存的路径不正确。,网页中的图像、动画等素材都有自己固定的存放位置，网页只是通过路径使用HTML语言来调用它们，然后把它们显示在网页中。网页中的路径有相对路径和绝对路径，在应该使用相对路径的地方使用了绝对路径，或相对路径的引用不正确都会导致浏览器无法在指定的位置打开指定的文件，使素材不能正常显示。,绝对路径与相对路径(1),绝对路径：文件在硬盘上的真正路径,D:/myweb/wuming.html D:/myweb/images/wm.gif,如果在wuming.html网页中 插入wm.gif图片，使

11、用绝对,路径，那么在本地电脑中将一切正常，因为在D:/myweb/images路径下的确存在wm.gif这个图片。但你将它们拿到另一台机器上或传到网站服务器上后，就会出错，因为要到当前的机器的D:/myweb/images路径下找wm.gif文件。,绝对路径与相对路径(2),相对路径：当前网页相对目标文件的位置 / 根目录 / 上一级 / 上两级,例1：D:/myweb/wuming.html D:/myweb/images/wm.gif,相对路径：,例2：D:/myweb/web/index.htm D:/myweb/img/wm.gif,相对路径：,绝对路径与相对路径(3),例3:D:/m

12、yweb/web/zhang/index.htm D:/myweb/img/images/wm.gif,把绝对路径转化为相对路径的时候，两个文件绝对路径中相同的部分忽略,只考虑他们不同之处。,相对路径：,为了避免在制作网页时出现路径错误，我们可以使用Frontpage或dreamweaver的站点管理功能来管理站点。站点中的网页保存时将把图片保存到站点中并自动把绝对路径转化为相对路径，并且当你在站点中移动文件的时候，与这些文件关联的连接路径都会自动更改。,建立超链接,超链接的实现方法：将某个文本串或某幅图像和其他 网页的地址（URL）联系在一起。 单击此处可获得某某信息。,创建超链接：,其他W

13、eb服务器上的网页文件 本地机器中网页文件 同一个网页文件中（书签）,图像地图,图像地图是另一种形式的超链接，允许将不同的URL指定给一幅图像的不同部分，使访问者根据不同的图像区域跳转到不同的位置，这些区域称做“热点”，每一个热点与一个超链接相对应。 如下图汽车生产商的站点可以用新车的图像地图：当站点访问者单击“车子”时，就会显示详细说明车子的网页。,网页布局（表格）,网页布局（表格）,表格布局举例补充,利用单元格的合并与拆分 ，创建不规则的表格。,单元格的不同填充色、边框线颜色分割区域。,设置单元格属性，单元格内对象的排版方式。,设置表格属性，整个表格的排版方式。,表格单位的设置,像素是绝对

14、单位，不随浏览器窗口尺寸变化而变化。 %是相对单位，随着浏览器窗口尺寸变化而变化。,绝对单位范围 0-显示器分辩率值,相对单位范围 0%-100%,表格有两种度量单位：像素和%,表格布局补充,要用表格来布局网页，首先应决定表格在水平方向和垂直方向上所需的单元格数量，然后为需要跨越多行或多列的对象合并单元格。 大多数网页布局采用了带有不可见边框的表格。,框架布局,框架是一种将浏览器窗口划分为功能独立的多个区域的常用方法。框架集定义每个框架的大小、位置、名称和初始网页，普通网页提供每个框架的内容。一个框架的超链接可以更改显示在另一个框架中的网页。,认识框架集网页,框架集是一种特殊的网页，该网页定义

15、了整体的框架布局，但不提供实际内容。, VIVABAND 此网页使用了框架，但您的浏览器不支持框架。 ,vivaband.htm,框架网页的创建（1）,“文件|新建”命令,框架网页的创建（2）,分别为不同的框架设定初始网页文件,banner 页头.html,Contents 菜单.htm,Main 柠檬寝室.html,框架网页的创建（3）,在框架面板上选择具体的框架或框架集，在属性面板上设置框架或框架集属性。,框架网页的保存,需要分别保存每一个框架对应的网页文件，并要保存“框架集”文件本身。,执行“文件|保存全部”命令,保存所有的框架和框架集,以虚框突出显示的框架就是当前需要保存的框架。,框架

16、之间的超链接,网页背景音乐处理,尽量使用mid格式的音乐文件，避免产生慢速网页。,Dreamweaver本身没有提供设置背景音乐的命令，需要在代码视图中之间直接输入代码。,网页背景音乐处理,设置开启新窗口的超链接,如何让主页音乐贯穿整个网站？,利用框架使网页背景音乐连贯,1. 把index.htm重命名为index-content.htm 2. 新建一个 “上方固定”框架网页 3. 下框架设置初始网页为index-conten.htm,利用框架使网页背景音乐连贯,4. 取消index-content网页的背景音乐设置 5. 保存框架集网页为index.htm,上框架网页为index-top.h

17、tm 6. 在index-top.htm网页中设置背景音乐,7. 设置上框架属性: 框架高度为1像素, 不显示边框。,创建和使用表单,表单能够向网页中添加文本框、 单选按钮、复选框、按钮等用 户界面控件。 每个网页可以包含一个或多个表单，每个表单占据网页中的一个特定区域。 表单中必须有一个元素作为 “提交”按钮。,单击“提交”按钮后，浏览器将数据传送给服务器，站点服务器需要某种程序读取这些数据并进行处理。程序可能将数据保存在文件或数据库中，也可能作为电子邮件发出等等。,应用图像作网页背景,选择适于作背景的图像文件,选择平铺效果具有整体感的图像作背景,使用导航条,交互式按钮 普通状态 鼠标经过状

18、态 鼠标按钮状态,在Dreamweaver中，所有网页中使用的图像文件 都必须保存在一个已经定义好的本地站点中。,执行“插入|图像对象|导航条”命令,创建交互式按钮,PhotoImpact,导出交互式按钮图像,设计各种网页部件,图标 横幅 按钮 按钮栏 Rollover按钮 分隔条,层的使用,网页中的元素，如文本、图像，都可以放置到层中，层不仅具有表格的平面布局网页对象的功能，而且可以使网页中的对象在空间垂直方向（Z轴）上互相重叠，再配合时间线（Timeline）的应用可以做出很多效果，使网页动感十足，还可以配合行为（Behaviors），使得网页在某种事件发生时显示隐藏的指定层等。,用鼠标拖

19、动的方法画出一个任意尺寸大小的层。,绘制层按钮,层的编辑,激活图层：单击图层中任一位置，图层只有被激活后 才可以插入对象。,选取图层：单击图层边框或单击文档窗口状态栏左侧 层标记图标 ，或单击图层图标 。 选中的图层四周出现8个黑色的小方块。,层的编辑,移动层 ：选中层时，可用鼠标拖动层的边框移动图层的位置，或者在“层”属性面板中精确设置图层的新位置（左和上的值）。,改变图层尺寸 ：选中图层时，可用鼠标拖动图层四周的小方块调整图层的尺寸，或者在“层”属性面板中精确设置图层的宽高尺寸（宽和高的值）。,时间轴,时间轴是一条贯穿时间的轴线,时间轴动画是把动画对象放置在不同的层中,通过改变层的位置、大

20、小、可见性和叠放顺序等属性来创建动画,执行“窗口|时间轴”命令，调出时间轴面板,制作时间轴动画,1.插入一个层 2.在层中插入对象 3. 使用“窗口|时间轴”命令打开时间轴面板 4.将层拖到时间轴的第1帧上 5.选中第1帧,将图层拖到动画开始位置 6.选中第15帧,将图层拖到动画结束位置 7.选中自动播放复选框,步骤:,行为,行为是在网页中进行的一系列动作,通过这些动作实现用 户与页面的交互,使用Dreamweaver内置的行为(实质是 JavaScript代码), 用户不需编写代码,就可以实现交互和 控制功能. 行为由事件和动作组成,事件是动作被触发的条件,动作 是用于完成特定任务预先编好的

21、JavaScript代码.,使用行为,步骤: 1.执行“窗口|行为”命令,打开行为面板 2.选中要添加行为的对象, 单击加号按钮 3.在弹出的动作菜单中选择某个动作 4.根据所选的动作,在参数窗口中设置参数 5.在事件菜单中为动作选择触发事件,动作菜单,利用图层实现下拉菜单（1）,图层默认为隐藏状态,步骤一： 分别为各个菜单项 创建对应的下拉菜 单图层。,利用图层实现下拉菜单（2）,指定行为动作： 当鼠标指向菜单项时， 隐藏的指定图层将被 显示，当鼠标移开菜单 项时，显示的指定图层 重被隐藏。 同理应用于下拉菜单图层,步骤二： 分别为各个菜单项 和下拉菜单图层指 定行为动作。,让图层中的对象沿

22、路径动起来,“修改|时间轴|录制层路径”命令,让图层中的内容动起来（1）,嵌套图层的创建： 创建图层，如layer7 选中该图层，按住 Alt键的同时，在其中创建其嵌套图层。,利用“剪辑”选项设置layer7图层的可见区域,让图层中的内容动起来（2）,选中图层Layer8，执行“修改|时间轴|录制层路径”命令，制作该图层从图层Layer7底部移动到图层Layer7顶部的运 动效果滚动看板。,调整多个图层的叠放顺序,选中图层Layer7，直接用鼠标将其拖拽到相应层次。,CSS样式,CSS（Cascading Style Sheet ）层叠式样式表，是国际组织W3C制定的扩展HTML功能的标准，C

23、SS样式广泛适用于文本、图形等网页元素的格式化工作，方便网页的制作和维护，还能产生半透明图像等特殊效果。,“窗口|CSS样式”命令,CSS样式,嵌入式样式表:对某个具体的网页定义的样式,它的表现形式是直接将样式插入到网页的HTML代码中，定义的样式自动应用到网页中。,外部样式表：将CSS样式保存为单独的一个文件(.css)，网页中可以创建对某个现成样式表的链接，而且多个网页可以使用同一个样式表的样式.,局部应用样式表：也是对某个具体的网页定义的样式,定义的样式显示在样式表面板中,可以选择某段文本或图像使用所定义的样式。,去除超链接的下划线,选择新建CSS样式命令,嵌入式样式表,直接将样式插入到

24、网页的HTML代码中,定义文字样式,局部应用样式表,选择“导出”命令，导出为外部样式表，在其它的网页中可应用此样式表的样式,动画原理与制作,动画的形成是由连续显示数张图片所造的视觉效果，其原理与卡通影片是一样的，我们可以设定每张图片所停滞时间，从而造成不同的动画显示速度。 当要制作一张动画时，可使用有支持GIF格式的绘图软件来制作图像(或扫描进来的影像)，将这些构成动画的连续数张图像分别储存成不同档名的GIF文档，然後再使用动画制作软件，如GIF Construction Set或Ulead GIF Animator动画制作软件来整合这些图像，针对每张图像设定相关的属性(如显示的停滞时间)，以

25、完成一幅动画的制作，且在这些软件中就可以直接观看动画的显示。,动态Gif图片的制作（1）,Ulead GIF Animator,动态Gif图片的制作（2）,使用向导快速制作动画： 在启动ulead gifanimator 程序时，会显示一个启动向导来引导我们创建动画。,使用动画向导制作动画(1),步骤1:设置画布尺寸,步骤2:选择文件,步骤3:设置帧延迟时间,将一系列静态图片连接生成动画,使用动画向导制作动画(2),编辑模式下的显示,步骤5:输出gif动画: 执行“文件|另存为 |gif文件”命令,步骤4:在预览模式下观看动画效果,制作横幅文字(1),先创建一个空白的动画文档，然后在 “帧”菜

26、单中选择 “添加横幅文本”,在文本标签中设置字体、字号、颜色、阴影等效果,制作横幅文字(2),设置文字动画效果,设置帧画面的延迟时间,添加霓虹效果,最终效果,渐变动画（1）,渐变动画（2）,添加图像,改变画布大小,选定范围工具：魔术棒,自动创建,手动创建,用视频片段制作 GIF 动画,1. 创建一个新的空白动画。 2. 单击标准工具栏上的 “添加视频”按钮，打开 “添加视频文件”对话框。 3. 找到要用的影片文件并选中后，单击Duration按钮。 4. Duration对话框打开后，有两个属性需要定义:要使用的起始和结束的视频段, Mark in和Mark out。 通过预览窗口和视频控件，

27、决定起始帧和结束帧的帧号, 在Mark in和Mark out中分别输入. 5. 单击OK。Duration对话框关闭，返回到“添加视频文件”对话框。再单击OK，选择的帧就被加载到 GIF Animator 中了。,网页特效,所谓“特效”是指用某种编辑语言编写，或用特效软件编制的，实现某种网页特殊效果的一段编程代码。 JavaScript是一种扩展到HTML的脚本设计语言,它使网页开发者可以更有效地控制页面,并能对用户触发事件作出即时响应,诸如单击鼠标、表单操作等,而且这些都不需要客户机与服务器的交互通信,既为用户提供了更快速的操作,又减小了服务器端的负担。JavaScript不能脱离HTML

28、而独立存在,只有在支持JavaScript的浏览器中,它才能作为HTML页面的一部分起作用,但它增强了网页的表现力。,网页特效制作,许多网页的特殊效果都是用Javascript来装点的。不懂点编程知识人要想使用这些特效就有些困难了，因此国内共享软件作者便写了许多便于使用的Javascript模式程序，呼吸主页秀就属于这类软件。 呼吸主页秀包含了窗口、鼠标、文字、菜单等九类共350种特效。,为了便于用户的使用,既可以先对已生成的代码进行效果预览，也可以直接修改代码。修改完成后复制到剪切板上，就可以插入到目标页面中了。,网页中插入特效代码,使用DreamWeaver： 在编辑状态下按F10即弹出源

29、代码窗口，将特效代码粘贴进去即可。 使用FrontPage： 点击编辑窗口左下角的“HTML”选项卡即出现源代码窗口，将特效代码粘贴进去即可。 直接使用“记事本”等编辑器： 直接用这些编辑器打开网页文件，出现的就是源代码，将特效代码粘贴进去即可。,在什么地方插入代码?,一般来说，在网页源代码的与之间的任何地方插入代码都可以, (除非特别指明，例如要求插入到与之间）。 如何修改代码？ 插入代码之后，可以把代码中的文本文字替换成你自己的内容。 注意：为避免出错， 不改动文本文字之外的代码，否则程序可能会不能运行！,可动图片特效(1),1.图片保存在网页文件所在的文件夹下 2.生成代码后就可以把代码

30、复制到剪贴板中,可动图片特效(2),3.把代码粘贴到网页的源代码中 4.把要替换的图片复制到网页所在文件夹下,在代码中替换原图片名,简单的Javascript样例1,简单的Javascript样例1,嵌入的javascript以开头，以结束。 符号用于使脚本跳过没有脚本处理能力的浏览器。 today=new Date() 创建日期对象 document.write(“今天是) 输出“今天是” getDate()是Date对象的一种方法，其功能是获得当前的日期。,简单的Javascript样例2, function message() alert(“欢迎光临!“); ,简单的Javascript样例2,function 函数名(参数列表) 函数体 alert() 以对话框显示信息 Javascript的方法 onLoad 元素装载 javascript的事件,事件是浏览器响应用户操作的机制，如单击链接按钮时，便产生一个事件。浏览器总在等待事件发生，并在发生事件时，进行相应的处理。处理的过程称为事件处理，进行这种处理的代码称为事件处理器。,