网页设计总复习2ppt课件.ppt

《网页设计总复习2ppt课件.ppt》由会员分享，可在线阅读，更多相关《网页设计总复习2ppt课件.ppt（46页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、网页设计总复习2ppt课件 Still waters run deep.流静水深流静水深,人静心深人静心深 Where there is life,there is hope。有生命必有希望。有生命必有希望一、网页制作基本概念和一、网页制作基本概念和HTML语言语言1.网页组成元素网页组成元素文本图像和动画声音和视频超级链接表格表单导航栏22.网页的分类与区别网页的分类与区别网页都是由一些文本文件组成的，用一种叫“HTML”（超文本标记语言）的语言编写的。这些文本文件的扩展名为“htm”或“html”网页一般分两类：静态网页和动态网页。二者的区别不是指网页是否有动感效果；而是在于网页是否有应用

2、程序解释和后台数据库支持。使用了应用程序服务器和后台数据库的网页称为动态网页；反之称为静态网页33.网站网站网站是由许多相关网页有机结合而构成的一个信息服务中心。网站通过超链接与其他各页面相连的页面，称为主页，主页是整个网站的目录、索引。网页具体地说是单个文件，而网站则是由许多的网页文件集合而成，即使只有一个网页也能被称为网站。通常一个网站都有一个被称做主页(HomePage)的特殊页面，也称首页。4网站的目录结构：网站的目录结构：(1)图像文件要建立单独的保存目录。这样便于修改和更新图像文件，避免和其他文件发生冲突。一般在根目录下建立一个images目录来保存首页中的图像。(2)不要将所有的

3、文件都放在根目录下。要尽量减少根目录下的文件，便于管理和不影响传输速度。5(3)建立适当子目录。便于文件分类管理，同栏目的内容要放在同一个子目录下，必要是在子目录下再建子目录，注意一般不超过三层。不使用中文目录。不要使用过长的目录名。尽量使用意义明确的目录。6(4)目录和文件命名。具体命名规范，可以根据网站的内容来定，一般情况下要求看到文件名就知道其内容，比如首页文件名为index.*或者default.*,同类的文件名可用相同字母前缀的文件来命名，图片、多媒体文件分别放到相应的目录，图片目录用image,多媒体目录用media,声音用sound,插图目录用pic等。74.超链接超链接链接通常

4、可以分为以下几种：(1)外部链接（绝对链接）：不同网站页面之间的链接；(2)本地链接（相对链接）：本地网站内部页面之间的链接；(3)锚点链接（也称书签）：同一页面或不同页面指定位置的链接；(4)电子邮件链接：指向一个电子邮件地址的链接。8根据链接对象的不同还有：根据链接对象的不同还有：下载链接，该链接指向某一特定的文件，单击它可下载该文件。例如：我的视频热区链接，通过设置热区来实现在一幅图像中创建多个链接区域。文本超链接和图像超链接是使用最多的两种超链接。95.绝对路径和相对路径绝对路径和相对路径:(1)绝对路径为文件提供完全的路径，包括适用的协议，比如http、ftp等。创建对当前站点以外的

5、链接时必须使用绝对路径。例如：http:/ ftp:/202.136.254.110(2)相对路径适合网站内部的链接，即使在同一网站不同的目录下。使用方法：如果链接到同一目录下，则只需要输入要链接文档的名称，如back.gif。要链接到下一级目录中的文件，只需先输入目录名，然后加“/”，再输入文件名，如：images/back.gif。如链接到上一级目录中的文件，则先输入“./”，再输入目录名、文件名，如：./images/back.gif。116.HTML标记语言标记语言(1)HTML的基本结构 文件头部分 文件体部分 12(2)HTML(2)HTML的基本语法，标记符号的表示方式的基本语法

6、，标记符号的表示方式双边标记：也叫成对标记，需要两个标记组合才能完成所需功能。如及、及等。单边标记：只要一个标记就能完成所需表示的功能。如、。HTML 标记不区分大小写，混合写也是可以的。13(3)(3)常用的常用的HTML标记的意义与用法标记的意义与用法页面标签：是对网页的整体参数进行设置的标签，必须掌握的是文档标签：标示网页文档开头和结尾。文件头标签：标题名等网页信息。文件体标签：定义网页显示的内容和格式。标题标签：定义在网页标题栏显示的标题。14的常见参数设置实例:,设置背景颜色为蓝色。body background=image/bg.jpg，设置image目录下的bg.jpg图片为背景

7、（注意：当上面两个属性同时设置时，背景图起作用）15格式标签：用来设置网页上文本和段落的排版格式，这些标签必须放在之间。常用的有：换行标签：放在一行的末尾，可使后面的文字换到下一行而不会留下空行。段落标签：放在一段文字末尾，定义一个新的段落。16文本标签，用来定义网页上字符的样式。常用的有：标题字体标签.：设定标题文字的大小，取1最大，取6最小。字体标签：可设置网页文字的字体、字号和颜色。参数设置实例：华工 17图形图像标签：直线标签：在网页中插入一条分隔线。图像插入标签：将一幅图像加入到网页中。参数设置实例：插入一条宽6象素，红色，长度为浏览器宽度80的水平线 参数设置实例：插入图片tu1.

8、jpg，宽高均为100象素，靠右对齐。18链接标签：在网页上建立超链接。设置实例：太阳系页面加入背景音乐标签设置实例：页面添加背景音乐sound目录下的bouree.mid，播放一次。19表格标签：表格标签：在网页中创建一个表格。标题标签：给表格加上标题。表头标签：表格的第一行，文字按粗体居中显示。20行标签：用来创建表格中的每一行。只能放在之间使用。在此标签对中加入文本将是无效的。列标签：用来创建表格中一行中的每一个单元格，此标签对不能直接放在之间，必须放在标签对之间才有效。表格中的所有的文本和其他信息只有放在标签对中才有效。21表格标签应用综合实例：表格标签应用综合实例：公共管理学院 行政

9、1班 行政2班 30人 40人 22(4)设定链接的目标窗口设定链接的目标窗口_parent 在上一级窗口中打开。例：a href=文件名.htm Target=_parent _blank 在新窗口中打开。例：a href=文件名.htm Target=_blank _self 在同一个窗口中打开。例：a href=文件名.htm Target=_self _top 忽略任何框架，在浏览器的整个窗口中打开。例：a href=文件名.htm Target=_top23二、网页制作工具和软件1.网页制作工具网页制作工具 所见即所得的工具：Dreamweaver 和 FrontPage 是目前最流

10、行的两种所见即所得的网页编辑工具。与用 Word 排版差不多，你不用去学 HTML 语言，只要把自己需要的文字和图像摆到网页中，软件会自动生成相应的 HTML 代码。代码编辑工具：各种文本编辑器，记事本、Word等。242.网页上常用的图形格式网页上常用的图形格式在网页上常用到的图形格式只包括以下3种：PNG、GIF 和JPEG。PNG是Fireworks的本身文件格式。GIF格式主要应用于卡通画、素描作品、插图、带有大块纯色区域的图形、透明图形和简单动画等。JPEG格式的图像主要应用于连续色调的作品、数字化照片和扫描图像等。25位图和矢量图位图：由排列成若干行、列的光点组成的像素点阵。优点：

11、视觉效果好，生动逼真，适合于表现层次和色彩比较丰富、包含大量细节的图像。缺点：清晰度与分辨率有关，放大后会出现锯齿、变模糊26矢量图：是指使用绘图指令描述的由直线、曲线等图元组成的图像。一般分为二维图形和三维图形两大类。优点：图形质量与分辨率无关，占用存储空间很小，放大与缩小不会失真，适于表示由有规律的线条组成的图像缺点：图形越复杂显示时间越长，难以表示人物、景色照片一类的彩色图像。273.关于关于Dreamweaver8用Dreamweaver 8制作网页，可以用表格、层和框架或者用Fireworks8作图切片的方式进行网页布局。用Dreamweaver 8提供了进行网页编辑的设几种工作模式

12、，就是设计模式、拆分模式和代码模式。Dreamweaver 8网页编辑中用于在浏览器中测试网页的快捷方式。28Dreamweaver 8中的行为。行为(behavior)是事件(Event)和动作(Action)的组合，为对象添加行为需要进行动作和事件的设置。常用的几种鼠标事件：29Dreamweaver 8中的层的特性。层是网页中用来放置文本、图像、动画、视频和表单等网页元素的载体。它的几种主要功能：可以重叠、自由移动、定位网页元素、可以和时间轴配合实现动画效果、可以显示和隐藏层、可以转换为表格。Dreamweaver8中为图像设置替代文字、插入日期等操作。30Dreamweaver8可以在

13、网页中插入导航条，该导航条是一组超链接，添加导航条可以使浏览者可以快速容易地转向站点的主要网页，有效地防止浏览者在浏览网页时迷失方向。Dreamweaver8中利用框架技术设计网页，由框架集和框架两部分组成，把页面划分成独立的若干个区域，每个区域相当于一个独立的页面。在Dreamweaver 8中建立一个网站所需的基本步骤。31利用CSS样式表可自动格式化网页文档，可为部分文件、整个文件或整个网站定义样式。可将定义好的CSS样式直接插入网页文档中，也可定义在网页文档之外的CSS样式表文件中。当一个定义好的CSS样式被修改好，使用这个CSS样式的网页文档的格式也将被自动更新。32模板和库的应用，

14、它们各自文件名的后缀分别是.dwt和.lbi。Dreamweaver 8的表单：表单实现浏览者和服务器之间信息的交互传送。表单中可以插入的对象有文本框、单选按钮、复选框、列表框、图像域和隐藏域等。文本框的三种形式：单行文本框、多行文本框和密码的功能。334.关于关于Flash8Flash 8是一种网页动画制作软件，它的源文件的扩展名是.fla，生成的影片的格式是.swf。Flash 8中的元件的概念：元件指一种比较特殊的、可以在Flash动画中重复使用的对象。元件可以提高编辑动画的效率，使创建复杂的交互效果时变得更加容易。元件可以是图形，也可以是动画。每个Flash动画文件都有用于存放动画元素

15、的库，用来存放元件、位图、声音以及视频文件等。34Flash8中引导层的作用是确定被引导层中对象运动的轨迹。Flash8中遮罩层可以用来屏蔽下面被遮罩层的内容，透过遮罩对象上镂出的缺口显示被遮罩层中相应部分的内容。35元件的种类：图形元件、按钮元件、影片剪辑元件。Flash 8中的按钮的状态，按钮具有4个状态：“弹起”、“指针经过”、“按下”和“点击”。“弹起”是正常状态，“指针经过”是鼠标移过的时候显示的画面，“按下”是鼠标按下时显示的状态，“点击”是用来确定按钮的作用范围的。36Flash 8中逐帧动画的概念：逐帧动画就是对每一帧的内容逐个进行编辑，然后按一定的时间顺序进行播放而形成的动画

16、。Flash 8的渐变动画有：运动渐变动画和形状渐变动画运动渐变动画：在一个关键帧上放置一个元件，然后在另一个关键帧改变这个元件的大小、颜色、位置、透明度等，Flash根据二者之间的帧创建的动画。37形状渐变动画：在一个关键帧中绘制一个形状，然后在另一个关键帧中改变该形状或者绘制另外一个形状，Flash根据两者之间的值或形状来创建动物成为形状补间动画如果使用图形元件、按钮、文字，则必须先“分离”才能创建变形动画。38Flash动画制作中时间轴和关键帧的概念和动画制作中时间轴和关键帧的概念和作用作用。时间轴窗口是Flash进行动画创作和编辑的主要工具，它是由帧、图层和播放指针组成。时间轴显示的是

17、动画中各帧的排列顺序，同时也包括了各层的前后顺序。用它可以查看每一帧的情况，调整动画播放的速度，安排帧的内容，改变帧与帧之间的关系，从而实现不同效果的动画。关键帧是包含内容的帧，它可以编制图形或元件等，当时间帧在播放动画渐变时，只要播放经过关键帧时，关键帧的内容一定会显示。关键帧后的普通帧将继续播放该关键帧的内容。395.关于关于Fireworks8Fireworks 8是一个网页图形编辑软件，使用Fireworks不仅可以方便地将图做的又小又漂亮，将图像优化导出成.GIF和.JPEG文件，还可以将制作的动画作为GIF动画文件或Flash SWF文件导出。关于蒙版的应用、概念和种类。40Fir

18、eworks8中切片与文件优化切片：顾名思义就是将一幅大图像分割成一些小的图像切片，在网页中可以将这些小的图像切片放入一个表格，将表格单元格之间的间距设为0，从而将这些小的图像切片没有缝隙地重新组合起来，还原成一幅完整的图像。41切片可以分别优化，每一个切片上都可以采用不同的优化方式，即使用最适合的文件格式和压缩设置来分别优化每个独立切片。通过切片把图形分割为若干个部分，在浏览的时候可以同时并行下载，这样就可以节约访问者等待的时间。可以使用切片来创建相应各种交互动作。每个切片可以建立自己的超链接，通过切片可以轻松地更新网页中经常更改的部分，做到局部更新。42如何将Fireworks的图片应用到

19、网页上？使用Fireworks 8的切片功能，将图像分割成多个较小的部分，并将每部分导出成单独的文件。在导出时，选择【导出】“HTML和图像”，导出多个图像文件和一个包含表格代码的HTML文件。启动在Dreamweaver 8，在编辑窗口中插入由Fireworks 8导出时生成的HTML文件。将该Fireworks 8保存的HTML文件插入到网页中，可以得到和原来图片位置、链接位置都不变的一个嵌在表格中图片网页。4344题型题型数量数量每题分数每题分数总分（总分（100分）分）判断题判断题10110单选题单选题30130多选题多选题5210填空题填空题12112问答题问答题7428实践题实践题2510考题相关考题相关45考试时间：考试时间：6月月28日下午日下午3：005：00考试地点：自查考试地点：自查请带齐有关考试物品：学生证等请带齐有关考试物品：学生证等座位表请到服务器查看座位表请到服务器查看考试要求：闭卷考试考试要求：闭卷考试大作业提交截至时间：大作业提交截至时间：6月月25日日(过时将关闭服务器过时将关闭服务器)46