华工《网页设计》总复习.pptx

期末复习,1,一、网页制作基本概念和HTML语言,1.网页组成元素 文本 图像和动画 声音和视频 超级链接 表格 表单 导航栏,2,2.网页的分类与区别 网页都是由一些文本文件组成的，用一种叫“ HTML ”（超文本标记语言）的语言编写的。这些文本文件的扩展名为“ htm” 或“ html” 网页一般分两类：静态网页和动态网页。 二者的区别不是指网页是否有动感效果；而是在于网页是否有应用程序解释和后台数据库支持。 使用了应用程序服务器和后台数据库的网页称为动态网页；反之称为静态网页,3,3.网站 网站是由许多相关网页有机结合而构成的一个信息服务中心。 网站通过超链接与其他各页面相连的页面，称为主页，主页是整个网站的目录、索引。 网页具体地说是单个文件，而网站则是由许多的网页文件集合而成，即使只有一个网页也能被称为网站。 通常一个网站都有一个被称做主页(HomePage)的特殊页面，也称首页。,4,网站的目录结构： (1)图像文件要建立单独的保存目录。这样便于修改和更新图像文件，避免和其他文件发生冲突。一般在根目录下建立一个images目录来保存首页中的图像。 (2)不要将所有的文件都放在根目录下。要尽量减少根目录下的文件，便于管理和不影响传输速度。,5,(3)建立适当子目录。便于文件分类管理，同栏目的内容要放在同一个子目录下，必要是在子目录下再建子目录，注意一般不超过三层。 不使用中文目录。 不要使用过长的目录名。 尽量使用意义明确的目录。,6,(4)目录和文件命名。具体命名规范，可以根据网站的内容来定，一般情况下要求看到文件名就知道其内容，比如首页文件名为index.*或者default.*,同类的文件名可用相同字母前缀的文件来命名，图片、多媒体文件分别放到相应的目录，图片目录用image,多媒体目录用media,声音用sound,插图目录用pic等。,7,4.超链接 链接通常可以分为以下几种： (1)外部链接（绝对链接）： 不同网站页面之间的链接； (2)本地链接（相对链接）： 本地网站内部页面之间的链接； (3)锚点链接（也称书签）： 同一页面或不同页面指定位置的链接； (4)电子邮件链接： 指向一个电子邮件地址的链接。,8,根据链接对象的不同还有： 下载链接，该链接指向某一特定的文件，单击它可下载该文件。例如：我的视频 热区链接，通过设置热区来实现在一幅图像中创建多个链接区域。 文本超链接和图像超链接是使用最多的两种超链接。,9,5.绝对路径和相对路径: (1)绝对路径为文件提供完全的路径，包括适用的协议，比如http、ftp等。创建对当前站点以外的链接时必须使用绝对路径。例如： ftp:/202.136.254.1,10,(2)相对路径适合网站内部的链接，即使在同一网站不同的目录下。使用方法： 如果链接到同一目录下，则只需要输入要链接文档的名称，如back.gif。 要链接到下一级目录中的文件，只需先输入目录名，然后加“/”，再输入文件名，如：images/back.gif。 如链接到上一级目录中的文件，则先输入“./”，再输入目录名、文件名，如：./images/back.gif。,11,6.HTML标记语言 (1)HTML的基本结构 文件头部分 文件体部分 ,12,(2)HTML的基本语法，标记符号的表示方式 双边标记：也叫成对标记，需要两个标记组合才能完成所需功能。 如及、及等。 单边标记：只要一个标记就能完成所需表示的功能。 如、。 HTML 标记不区分大小写，混合写也是可以的。,13,(3) 常用的HTML标记的意义与用法 页面标签：是对网页的整体参数进行设置的标签，必须掌握的是 文档标签 ：标示网页文档开头和结尾。 文件头标签：标题名等网页信息。 文件体标签：定义网页显示的内容和格式。 标题标签：定义在网页标题栏显示的标题。,14,的常见参数设置实例: ,设置背景颜色为蓝色。 body background=image/bg.jpg，设置image目录下的bg.jpg图片为背景 （注意：当上面两个属性同时设置时，背景图起作用）,15,格式标签：用来设置网页上文本和段落的排版格式，这些标签必须放在之间。常用的有： 换行标签：放在一行的末尾，可使后面的文字换到下一行而不会留下空行。 段落标签：放在一段文字末尾，定义一个新的段落。,16,文本标签，用来定义网页上字符的样式。常用的有： 标题字体标签.：设定标题文字的大小，取1最大，取6最小。 字体标签：可设置网页文字的字体、字号和颜色。 参数设置实例： 华工,17,图形图像标签： 直线标签：在网页中插入一条分隔线。 图像插入标签：将一幅图像加入到网页中。 参数设置实例： 插入一条宽6象素，红色，长度为浏览器宽度80的水平线 参数设置实例： 插入图片tu1.jpg，宽高均为100象素，靠右对齐。,18,链接标签 ：在网页上建立超链接。 设置实例： 太阳系 页面加入背景音乐标签 设置实例： 页面添加背景音乐sound目录下的bouree.mid，播放一次。,19,表格标签： 表格标签：在网页中创建一个表格。 标题标签：给表格加上标题。 表头标签 ：表格的第一行，文字按粗体居中显示。,20,行标签：用来创建表格中的每一行。只能放在之间使用。在此标签对中加入文本将是无效的。 列标签：用来创建表格中一行中的每一个单元格，此标签对不能直接放在之间，必须放在标签对之间才有效。表格中的所有的文本和其他信息只有放在标签对中才有效。,21,表格标签应用综合实例： 公共管理学院 行政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=_top,23,二、网页制作工具和软件,1 . 网页制作工具 所见即所得的工具：Dreamweaver 和 FrontPage 是目前最流行的两种所见即所得的网页编辑工具。 与用 Word 排版差不多，你不用去学 HTML 语言，只要把自己需要的文字和图像摆到网页中，软件会自动生成相应的 HTML 代码。 代码编辑工具：各种文本编辑器，记事本、Word等。,24,2 . 网页上常用的图形格式 在网页上常用到的图形格式只包括以下3种：PNG、GIF 和JPEG。 PNG是Fireworks的本身文件格式。 GIF格式主要应用于卡通画、素描作品、插图、带有大块纯色区域的图形、透明图形和简单动画等。 JPEG格式的图像主要应用于连续色调的作品、数字化照片和扫描图像等。,25,位图和矢量图 位图：由排列成若干行、列的光点组成的像素点阵。 优点：视觉效果好，生动逼真，适合于表现层次和色彩比较丰富、包含大量细节的图像。 缺点：清晰度与分辨率有关，放大后会出现锯齿、变模糊,26,矢量图：是指使用绘图指令描述的由直线、曲线等图元组成的图像。一般分为二维图形和三维图形两大类。 优点：图形质量与分辨率无关，占用存储空间很小，放大与缩小不会失真，适于表示由有规律的线条组成的图像 缺点：图形越复杂显示时间越长，难以表示人物、景色照片一类的彩色图像。,27,3.关于Dreamweaver 8 用Dreamweaver 8制作网页，可以用表格、层和框架或者用Fireworks8作图切片的方式进行网页布局。 用Dreamweaver 8提供了进行网页编辑的设几种工作模式，就是设计模式、拆分模式和代码模式。 Dreamweaver 8网页编辑中用于在浏览器中测试网页的快捷方式。,28,Dreamweaver 8中的行为。行为(behavior)是事件(Event)和动作(Action)的组合，为对象添加行为需要进行动作和事件的设置。常用的几种鼠标事件：,29,Dreamweaver 8中的层的特性。层是网页中用来放置文本、图像、动画、视频和表单等网页元素的载体。它的几种主要功能：可以重叠、自由移动、定位网页元素、可以和时间轴配合实现动画效果、可以显示和隐藏层、可以转换为表格。 Dreamweaver8中为图像设置替代文字、插入日期等操作。,30,Dreamweaver8可以在网页中插入导航条，该导航条是一组超链接，添加导航条可以使浏览者可以快速容易地转向站点的主要网页，有效地防止浏览者在浏览网页时迷失方向。 Dreamweaver8中利用框架技术设计网页，由框架集和框架两部分组成，把页面划分成独立的若干个区域，每个区域相当于一个独立的页面。 在Dreamweaver 8中建立一个网站所需的基本步骤。,31,利用CSS样式表可自动格式化网页文档，可为部分文件、整个文件或整个网站定义样式。可将定义好的CSS样式直接插入网页文档中，也可定义在网页文档之外的CSS样式表文件中。当一个定义好的CSS样式被修改好，使用这个CSS样式的网页文档的格式也将被自动更新。,32,模板和库的应用，它们各自文件名的后缀分别是.dwt和.lbi。 Dreamweaver 8的表单：表单实现浏览者和服务器之间信息的交互传送。表单中可以插入的对象有文本框、单选按钮、复选框、列表框、图像域和隐藏域等。文本框的三种形式：单行文本框、多行文本框和密码的功能。,33,4.关于Flash 8 Flash 8是一种网页动画制作软件，它的源文件的扩展名是.fla，生成的影片的格式是.swf。 Flash 8中的元件的概念：元件指一种比较特殊的、可以在Flash动画中重复使用的对象。元件可以提高编辑动画的效率，使创建复杂的交互效果时变得更加容易。元件可以是图形，也可以是动画。 每个Flash动画文件都有用于存放动画元素的库，用来存放元件、位图、声音以及视频文件等。,34,Flash8中引导层的作用是确定被引导层中对象运动的轨迹。 Flash8中遮罩层可以用来屏蔽下面被遮罩层的内容，透过遮罩对象上镂出的缺口显示被遮罩层中相应部分的内容。,35,元件的种类：图形元件、按钮元件、影片剪辑元件。 Flash 8中的按钮的状态，按钮具有4个状态：“弹起”、“指针经过”、“按下”和“点击”。 “弹起”是正常状态， “指针经过”是鼠标移过的时候显示的画面， “按下”是鼠标按下时显示的状态， “点击”是用来确定按钮的作用范围的。,36,Flash 8中逐帧动画的概念：逐帧动画就是对每一帧的内容逐个进行编辑，然后按一定的时间顺序进行播放而形成的动画。 Flash 8的渐变动画有：运动渐变动画和形状渐变动画 运动渐变动画：在一个关键帧上放置一个元件，然后在另一个关键帧改变这个元件的大小、颜色、位置、透明度等，Flash根据二者之间的帧创建的动画。,37,形状渐变动画：在一个关键帧中绘制一个形状，然后在另一个关键帧中改变该形状或者绘制另外一个形状，Flash根据两者之间的值或形状来创建动物成为形状补间动画 如果使用图形元件、按钮、文字，则必须先“分离”才能创建变形动画。,38,Flash动画制作中时间轴和关键帧的概念和作用。时间轴窗口是Flash进行动画创作和编辑的主要工具，它是由帧、图层和播放指针组成。时间轴显示的是动画中各帧的排列顺序，同时也包括了各层的前后顺序。用它可以查看每一帧的情况，调整动画播放的速度，安排帧的内容，改变帧与帧之间的关系，从而实现不同效果的动画。关键帧是包含内容的帧，它可以编制图形或元件等，当时间帧在播放动画渐变时，只要播放经过关键帧时，关键帧的内容一定会显示。关键帧后的普通帧将继续播放该关键帧的内容。,39,5.关于Fireworks 8 Fireworks 8是一个网页图形编辑软件，使用Fireworks不仅可以方便地将图做的又小又漂亮，将图像优化导出成.GIF和.JPEG文件，还可以将制作的动画作为GIF动画文件或Flash SWF文件导出。 关于蒙版的应用、概念和种类。,40,Fireworks8中切片与文件优化 切片：顾名思义就是将一幅大图像分割成一些小的图像切片，在网页中可以将这些小的图像切片放入一个表格，将表格单元格之间的间距设为0，从而将这些小的图像切片没有缝隙地重新组合起来，还原成一幅完整的图像。,41,切片可以分别优化，每一个切片上都可以采用不同的优化方式，即使用最适合的文件格式和压缩设置来分别优化每个独立切片。 通过切片把图形分割为若干个部分，在浏览的时候可以同时并行下载，这样就可以节约访问者等待的时间。 可以使用切片来创建相应各种交互动作。 每个切片可以建立自己的超链接，通过切片可以轻松地更新网页中经常更改的部分，做到局部更新。,42,如何将Fireworks的图片应用到网页上？ 使用Fireworks 8的切片功能，将图像分割成多个较小的部分，并将每部分导出成单独的文件。 在导出时，选择【导出】“HTML和图像”，导出多个图像文件和一个包含表格代码的HTML文件。 启动在Dreamweaver 8，在编辑窗口中插入由Fireworks 8导出时生成的HTML文件。 将该Fireworks 8保存的HTML文件插入到网页中，可以得到和原来图片位置、链接位置都不变的一个嵌在表格中图片网页。,43,44,考题相关,45,考试时间：6月28日下午3：005：00,考试地点：自查,请带齐有关考试物品：学生证等,座位表请到服务器查看,考试要求：闭卷考试,大作业提交截至时间：6月25日(过时将关闭服务器),46,