网页制作技术精讲课件

《网页制作技术精讲课件》由会员分享，可在线阅读，更多相关《网页制作技术精讲课件（256页珍藏版）》请在装配图网上搜索。

1、,,,,,单击此处编辑母版文本样式,,第二级,,第三级,,第四级,,第五级,,点击此处结束放映,单击此处编辑母版标题样式,,第,1,章,,网页设计基础,,1.1 网页中的常见元素,,1.2 常用网页制作工具,,1.3 常用的网页美化工具,,1.4 建立网站的基本流程,,1.5 网 页 艺 术 设 计,1.1 网页中的常见元素,1.1.1,文本,,文本是最重要的信息载体与交流工具，是网页发布信息所用的主要形式。,,1．标题,,2．字号,,3．字型,1.1.2,图形,,这里的图形概念是广义的，它可以是普通的绘制图形，可以是各种图像，还可以是动画。,,1．菜单按钮,,2．背景图形,,3．

2、动画,1.1.3,超链接,,超链接是从一个网页指向另一个目的端的链接，这个目的端通常是另一个网页，也可以是一幅图片、一个电子邮件地址、一个文件、一个程序或者相同网页的不同位置。,,超链接是网页中一种非常重要的功能，是网页中最重要、最根本的元素之一。,1.1.4,表格,,表格用来控制网页中信息的布局方式。,,1.1.5 表单,,网页区别于其他媒体的一个重要标志就是它的交互功能。,,通常网页的交互功能都是利用表单来实现的。,1.1.6,声音和视频,,声音是多媒体网页的一个重要组成部分。,,网页的声音文件格式很多，常用的有,MIDI、WAV、MP3,和,AIF,等。,1.2 常用网页制作工具,1

3、.2.1,超文本标识语言,,超文本标识语言（,Hypertext Markup,Language，HTML,）,是一种专门用于,Web,页制作的编程语言，它能够对网页内容、页面的格式以及超链接进行描述，形成,HTML,文档。,1.2.2,Dreamweaver,,,Dreamweaver,是,Macromedia,公司推出的一款大众化的网页制作软件，它具有可视化编辑界面，用户不必编写复杂的,HTML,源代码就可以生成跨平台、跨浏览器的网页，不仅适合于专业网页编辑人员的需要，同时也容易被业余网页制作人员所掌握。,,,Dreamweaver,支持动态,HTML,技术，并采用了,Roundtrip

4、HTML,技术，从而奠定了在网页高级设计功能方面的领先地位。,1.2.3,FrontPage,,FrontPage,是,Microsoft,公司推出的网页制作工具。,1.3 常用的网页美化工具,1.3.1,Fireworks,,Fireworks,是由,Macromedia,公司开发的基于,RGB,颜色模式的图形处理工具，它的出现使,Web,作图发生了革命性的变化。,,Fireworks,具有如下的优点。,,（1）,Fireworks,可以用较少的步骤生成占用空间很小、质量很高的,JPEG,和,GIF,图像 。,,（2）利用,Fireworks,修改图像非常方便。,,（3）,Firework

5、s,无需借助其他工具就可以完成将一个图像转化为网页元素的全过程。,,（4）,Fireworks,具有文件导出功能。,,1.3.2,Flash,,Flash,是,Macromedia,公司开发的用于矢量图形编辑和动画创作的专业软件，它是一种交互式动画设计工具，用它可以将音乐、声效、动画以及富有新意的界面融合在一起，以制作出高品质的网页动态效果。,Flash,的优点可以归纳为以下几点。,,（1）,Flash,创建的图像体积小、质量高。,,（2）,Flash,采用的是插件工作方式。,,（3）,Flash,采用“流式”动画播放技术。,,（4）,Flash,支持多种不同格式文件的导入。,1.3.3,Ph

6、otoshop,,Photoshop,是,Adobe,公司开发的图形处理软件，它是目前公认的,PC,上最好的通用平面美术设计软件，它功能完善、性能稳定和使用方便，所以在几乎所有的广告、出版和软件公司，,Photoshop,都是首选的平面制作工具。,1.4 建立网站的基本流程,图1-2所示的是一个网站的完整制作流程。,,图1-2 网站的制作流程,,1.4.1 确定主题,,网站的主题也就是网站的题材，是网站设计首先遇到的问题。,,网站的定位要小，内容要精。,,网站的题材最好选自己擅长或者喜爱的内容。,,网站名称，是网站设计的一部分，而且是一个关键的要素，和现实生活中一样，网站名称是否正气、响

7、亮、易记，这对网站的形象和宣传推广也有很大影响。,1.4.2,搜集资料,,1.4.3,网站的整体规划,,进行网站的整体规划也就是组织网站的内容并设计其结构。,,1.4.4,网页设计与制作,,1．静态网页的设计与制作,,2．为网页添加动态效果,1.4.5,测试与发布网页,,当网页设计人员制作完所有网站页面之后，需要对所设计的网页进行审查和测试，测试内容包括功能性测试和完整性测试两个方面。,所谓功能性测试就是要保证网页的可用性，达到最初的组织设计目标，实现所规定的功能，读者可以方便快速地寻找到所需的内容。,,网页的完整性测试就是保证页面内容显示正确，链接准确，无差错无遗漏。,1.4.6,网站的宣传

8、与推广,,1.4.7 网站的反馈与评价,,1.4.8,网站的更新与维护,,网站要注意经常维护更新内容，保持内容的新鲜 。,1.5 网 页 艺 术 设 计,1.5.1 网页版式设计,,1．版式设计原则,,（1）统一,,（2）平衡,,（3）连贯和呼应,,（4）分割,,（5）对比,,（6）和谐,2．版式设计技巧,,3．常见的网页布局,,（1）表格布局,,（2）框架布局,,（3）层布局,,（4）自由式布局,1.5.2,网页色彩设计,,1．网页色彩定义,,在网页中是以,RGB,方式来表示颜色的 。,,2．在网页中合理运用色彩,第 2 章,创建和管理站点,,2.1 规划站点结构,,2.2 利用,

9、Dreamweaver,MX,创建站点,,2.3 利用,FrontPage 2003,创建站点,在制作网页之前首先要创建站点。建立一个本地站点就是在本地计算机上建立一个文件夹，将所有与网站相关的文件都放在该文件夹中，以便进行网页的制作与管理。,2.1 规 划 站 点 结 构,1．按照文件的类型进行规划,,2．按照网页主题进行规划,2.2 利用,Dreamweaver,MX,创建站点,2.2.1,Dreamweaver,MX,简介,,1,．,Dreamweaver,MX,的界面,,（,1,）菜单栏,,（,2,）工具栏,,（,3,）插入面板,,（,4,）浮动面板,,（5）文档窗口,,（6）属性

10、面板,图2-2,Dreamweaver,MX,的操作界面,,2．,Dreamweaver,的视图,,（1）代码视图与设计视图,,（2）文档窗口,,（3）插入面板,2.2.2,定义站点,,1．站点管理器,,2．创建站点,,（1）通过站点定义向导创建站点,,（2）直接定义站点,,2.2.3,站点的基本操作,,1．打开站点,,2．复制站点,,3．编辑站点,,4．删除站点,2.2.4,网页文件的基本操作,,1．新建网页,,2．文件的打开,,（1）直接打开文件,,（2）在框架中打开文件,,3．保存网页文件,,4．预览网页,2.3 利用,FrontPage 2003,创建站点,2.3.1,FrontPag

11、e 2003,简介,,1．,FrontPage 2003,的特色,,2．,FrontPage 2003,的新增功能,,3．,FrontPage 2003,工作界面,图2-25,FrontPage 2003,主窗口,,（1）标题栏,,（2）菜单栏,,（3）常用工具栏,,（4）格式工具栏,,（5）窗口栏,2.3.2,创建站点,,1．创建新站点,,2．导入一个已存在的站点,,3．将文件夹转换为站点,2.3.3,管理站点,,1．打开站点,,2．重命名站点,第 3 章,网页文本的编辑与控制,,3.1 利用,Dreamweaver,MX,编辑网页文本,,3.2,HTML,概 述,,3.3 利用,HT

12、ML,处理网页文本,3.1 利用,Dreamweaver,MX,编辑网页文本,3.1.1,在网页中添加和处理文本,,1．输入文字,,（1）换行,,（2）输入空格,,（3）插入特殊的字符,,（4）加入注释文字,,（5）插入水平线,,（6）插入日期和时间,2．编辑文本,,（1）设置标题文字,,（2）添加和删除中文字体,,（3）设置字体的颜色,,（4）添加项目符号和项目编号,3.1.2,在网页中添加图像,,3.2,HTML,概 述,3.2.1,什么是,HTML,,,HTML（Hypertext,Markup Language，,超文本标识语言）是一种专门用于,Web,页制作的编程语言，用来描述超

13、文本各个部分的内容，告诉浏览器如何显示文本，怎样生成与别的文本或图像的链接点。,3.2.2,标记符及其属性,,1．标记符,,2．属性,3.2.3,HTML,文件的基本结构,,<,HTML>,,,,,,,文本标题,,,,,,,,,文本内容,,,,,（1）,HTML,标记符,,（2）,HEAD,标记符,,（3）TITLE,标记符,,（4）,BODY,标记符,3.2.4,创建和测试,Web,页,,1．创建,Web,页,,2．测试,Web,页,,3．发布,Web,页,3.3 利用,HTML,处理网页文本,3.3.1,标题处理,,标题文字标记符的格式为：,,<,Hn,

14、align=",对齐方式" > 标题文字 ,,3.3.2,段落处理,,1．注释标记符,,HTML,的注释标记符的格式为：,,,,注释并不局限于一行，长度不受限制。结束标记符不必与开始标记符在同一行。注释的内容不在浏览器中显示。,2．强制换行标记符,,强制换行标记符的格式为：,,文字<,BR>,3．换段标记符,,（1）强制换段标记符,,强制换段标记符的格式为：,,文字<,P>,,（2）设置段落标记符,,设置段落标记符的格式为：,,<,P align=",对齐方式"> 文字 ,,4．显示预排格式标记符,,显示预排格式标记符的格式为：,,<,PRE>,预先排好的格式

15、E>,,5．分区显示标记符,,分区显示标记符的格式为：,,<,DIV align=",对齐方式"> 文本或图像 ,,6．水平线,,水平线标记符的格式为：,,<,HR align=",对齐方式",size=",横线粗细",width=",横线长度",color=",横线颜色",noshade,>,3.3.3,文本格式处理,,1．文字设置,,（1）,size,属性,,size,属性是字号属性，用于控制文字的大小，它的取值既可以是绝对值，也可以是相对值。,,（2）,face,属性,,face,属性是字体标记符，用来指定字体样式。,（3）,color,属性,,FONT,标记符的,col

16、or,属性可用来控制文字的颜色，属性值可以是颜色名称或十六进制值。,2．文本格式处理,,（1）<,BLOCKQUOTE>,,（2）<,DL>,,3．设置页面属性,,（1）设置页面背景颜色,,在<,BODY>,标记符中使用,bgcolor,属性可以为网页设置背景颜色。,（2）设置页面背景图像,,选择特定图案作为页面的背景，使用,BODY,标记符的,background,属性即可。,HTML,语句为：,,<,BODY background=",网页背景图案的地址">,,（3）设置文字和超链接的颜色,,设置正文和超链接颜色时，可以使用,BODY,标记符的,text、link、vlink,和,alin

17、k,属性。,第 4 章,才利用表格设计和制作网页,4.1 表格网页实例,,4.2 利用,Dreamweaver,MX,编辑网页表格,,4.3 利用,HTML,编辑网页表格,,4.4 表格的应用技巧,在网页的设计制作中，表格（,Table）,是一个重要的网页元素，主要用来在页面上布局数据和图像，使页面中的信息布局合理、简洁。另外，在网页设计制作中，表格还有一个重要作用，就是对网页进行排版。,4.1 表格网页实例,表格化的页面在不同平台、不同分辨率的浏览器里都能显示出原有的布局和对齐。图4-1所示的是“天使部落”网页利用表格进行布局的页面效果。,图4-1 “天使部落”主页,,4.2 利

18、用,Dreamweaver,MX,编辑网页表格,4.2.1 创建表格,,表格主要由以下3个基本元素组成。,,,,行（,Row）：,表格在水平方向上的组成元素。,,,列（,Column）：,表格在竖直方向上的组成元素。,,,,单元格（,Cell）：,表格中的最小的独立存放数据的区域。,,另外，还有以下几个概念需要掌握。,,边框（,Border）：,单元格四周的界线标志。,,表格间距（,Cellspace,）：,定义内部表格线的宽度。,,表格间隙（,Cellpad,）：,相邻的单元格之间的间隙。,在,Dreamweaver,MX,中，创建表格有以下4种方式。,,,,执行主菜单中的“插入”

19、→“表格”命令。,,,,按组合键,Ctrl+Alt+T,。,,,,单击插入面板上“常用”选项卡中的“插入表格”按钮。,,,,单击插入面板上“表格”选项卡中的“插入表格”按钮。,使用上述4种方式中任意一种方法都将打开如图4-2所示的“插入表格”对话框。,,图4-2 “插入表格”对话框,对话框中各选项含义如下。,,行数：初次指定表格的总行数。,,列数：初次指定表格的总列数。,,单元格填充：指定单元格的大小，以像素为单位。,,单元格间距：指定单元格之间的距离，以像素为单位。,宽度：指定表格的宽度，以百分比或像素为单位（百分比用于根据浏览器窗口的大小来自动调整表格的宽度）。,,边框：指定表格边界

20、的宽度，以像素为单位（如果在浏览器窗口中不显示表格的边框，则定义为0）。,4.2.2,表格的编辑,,1．修改表格,,（1）调整表格的大小,,图4-4 利用“属性”面板调整表格的大小,,（2）调整行高、列宽,,（3）合并单元格,,（4）拆分单元格,,（5）表格的嵌套,,（6）表格的复制,,（7）删除表格,,（8）增加或减少行、列跨度,2．在表格中输入文字和图像,,向表格中输入的内容主要是文字和图片两种形式。,,（1）在表格中输入文字,,（2）在表格中插入图像,4.2.3 设置表格属性,,1．表格整体属性设置,,图4-11 表格“属性”面板,,2．行、列和单元格属性设置,,图4-12 表格

21、的行、列和单元格“属性”面板,,4.2.4,表格的排序,,在表格的应用中，常要对表格中的一组数据进行排序。在,Dreamweaver,MX,中可以实现按数字的排序和按字母的排序 。,4.2.5,表格的格式化,,,Dreamweaver,MX,为表格提供了17种表格格式模板，可以从中选择一种方案快速应用到用户设计的表格中。,图4-14 “格式化表格”对话框,,4.3 利用,HTML,编辑网页表格,4.3.1,利用,HTML,制作示例网页表格,,利用,HTML,同样可以制作网页表格。对于初学者直接使用,HTML,代码编制网页表格是件很困难的事情，但是，可以通过,Dreamweaver,MX,提供

22、的“文档”面板来查看已经设计好的网页表格的,HTML,代码，以帮助用户学习和掌握,HTML,代码的编写规则及方法。,4.3.2,表格的基本构成,,通常在,HTML,中创建一个普通的表格应包括以下标记符。,,（1）,TABLE,,（2）,TITLE,,（3）,CAPTION,,（4）,TR,,（5）,TD,和,TH,,（6）,META,4.3.3,表格的编辑及属性设置,,1．合并单元格,,2．边框与分隔线,,3．表格的对齐,,4．控制表格和单元格的大小,,5．设置表格和单元格的背景,,6．控制单元格空白,4.4 表格的应用技巧,4.4.1,利用表格制作水平线与垂直线,,在对网页布局排版时，有时

23、候会需要一条细线作为分隔线，用一些线型的图像可以完成这项功能，但既费事又占据存储空间。其实，这个小问题用表格就能很好的实现，只需对表格属性、单元格属性及其源代码稍作修改即可。,4.4.2,利用表格进行页面布局,,,Dreamweaver,MX,为此提供了一种新的网页排版视图——布局视图（,Layout View），,在这种视图模式下，用户可以通过绘制布局表格和布局单元格，从而可以像在一张白纸上用笔来规划网页的布局，并可在布局单元格中插入文本和图像，通过移动布局表格和布局单元格的位置来精确地定位网页上的文本和图像。,1．切换视图,,2．绘制布局表格,,3．编辑和设置布局表格,第 5 章,网 页

24、图 像 处 理,5.1 利用,Dreamweaver,MX,处理网页图像,,5.2 利用,HTML,编辑图像,在网页设计中插入丰富多彩的图像画面，可以起到点缀美化页面的效果，增加网站的吸引力。但如果使用得不恰当，过多、过大的图像不仅影响页面的主题思想，而且会影响网页的浏览及下载速度。因此，如何在网页中灵活、恰当地利用好图像，尤其是对插入图像的有效处理是十分重要的。,5.1 利用,Dreamweaver,MX,处理网页图像,一幅图像和一个个漂亮的按钮、标记，不但使网页更加美观、形象和生动，而且使网页中的内容更加丰富多彩。可见图像在网页中的作用是非常明显的。作为一名网页设计者，掌握好网页图像

25、的运用是非常重要的。,,5.1.1,网页中的图像格式,,我们在浏览网页时经常看到的是位图和矢量图。所谓的位图和矢量图是计算机描述/显示图像和图形的两种不同方式。位图是排列成网格的一个个点构成的，这些点称为像素点，当以恰当的分辨率显示时，它们便拼合在一起显现为一幅完整的图像；而矢量图则是用线条和填充色等数学信息来描述图像的。,在网页中常用的位图格式有,GIF、JPEG、PNG，,矢量图格式主要为,SWF。,由于受到网络带宽的制约，在网页上使用的图像都是经压缩处理过的图像格式，它们都有各自的特点。,,5.1.2,选择图像处理软件,,前面所介绍的几种图形图像格式的原始文件并不是都可以直接用在网页中，

26、大多数情况下，需要对原始的图像素材进行必要的处理，例如，图像优化、添加特效等，然后再在网页中使用。这就需要一些图形图像处理软件的协助。,1．,Photoshop,,2．Fireworks,,3．Flash,5.1.3,在网页中使用图像时应该注意的几个问题,,1．网页的图像文件要小,,2．控制网页中图像的数量和质量,,3．在网页中恰到好处地添加动画,5.1.4,在网页中插入图像,,制作网页的时候，第一手得到的图像并不十分美观，有的是死板的矩形，有的与网页缺乏统一性，如果不做出判断，直接使用这些图像，有可能会给版面带来负面影响。因此，在使用图像之前，一定要有目的地选择图像，最好的方法是运用图像处理

27、软件美化一下图像，有关图像美化的内容请参见本书第13章。,1．插入图像,,图5-1 “选择图像源”对话框,,2．图像属性参数,,图5-5 图像属性面板,,3．改变图像的尺寸,,注意：,在网页文档中除非必要，否则不要大幅度地改变图像的尺寸，因为这样做容易使图像失真。,,4．调整图像在网页中的相对位置,,5．编辑图像,,6．更换图像,,7．实现“魔法图像”,5.1 5,设置网页背景,,设置及改变网页背景的状态可以通过两种方法来实现：一种是设置背景颜色，通常是在网页安全颜色范畴之内选择；另一种是设置背景图像，然而，不是所有的图像都可以用作背景的。,,1．设置网页背景颜色,图5-9 “页面属性”对话

28、框,,2．设置背景图像,,注意：,选择背景图像的原则，一定不要选择颜色深重的图像，否则网页文档的内容不易被衬托出来。,5.1.6,在,Dreamweaver,MX,中巧妙地处理图像,,1．给图像添加文字说明,图5-13 为图像添加文字说明,,2．制作低分辨率图像,,图5-15 添加低分辨率图像路径,,3．使用图像映射,,图5-17 图像热点属性面板,,4．设置跟踪图像,,,图5-18 跟踪图像设置面板,,5.2 利用,HTML,编辑图像,使用各种,Dreamweaver,MX,可视工具及其选项对图像实施插入和编辑。同样，还可以利用,HTML,设计代码来插入和编辑网页中的图像 。,5.

29、2.1,插入图像,,在,HTML,中，使用,IMG,标记符可以在网页中加入图像。它具有两个基本属性：,src,和,alt，,分别用于设置图像文件的位置的替换文本。,,5.2.2,编辑图像属性,,1．指定图像的宽和高,,2．图像边框,,3．设置图像周围的空白,,4．图像的对齐,第,6,章,,在网页中使用超链接,6.1 超 链 接 基 础,,6.2 利用,Dreamweaver,MX,创建超链接,,6.3 利用,Dreamweaver,MX,编辑超链接,,6.4 创 建 导 航 条,,6.5 管 理 超 链 接,超链接是,WWW,的魅力所在。为了把,Interne

30、t,上众多分散的网站和网页联系起来，构成一个有机的整体，就要在网页上加入链接。通过点击网页上的链接，才能真正实现网络无国界，我们才可以在信息海洋中尽情遨游。,6.1 超 链 接 基 础,6.1.1,超链接的种类,,超链接按源端点的链接划分，可分为超文本链接和非超文本链接两类。,,超链接按目标端点的链接划分，可分为外部链接、内部链接、电子邮件链接、局部链接、脚本链接等。,6.1.2,文档路径类型,,文档路径类型有绝对路径和相对路径两种。,,1．绝对路径,,绝对路径是包括服务器协议（在本例中为,HTTP）,的完全路径。,2．相对路径,,相对路径包括根相对路径（,Site Root）,和文

31、档相对路径（,Document）,两种。,,（1）根相对路径,,根相对路径（也称相对根目录）以“/”开头，路径是从当前站点的根目录开始计算。,,（2）文档相对路径,,文档相对路径的基本思想是省略当前文档和链接的文档都相同的绝对,URL,部分，而只提供不同的那部分路径。,6.2 利用,Dreamweaver,MX,创建超链接,6.2.1,创建文字超链接,,1．使用“浏览文件”图标,,2．使用“指向文件”图标,,3．使用“超级链接”对象,6.2.2,创建锚点超链接,,1．命名锚记,,2．链接到命名锚记,,6.2.3,创建电子邮件链接,,1．插入电子邮件链接,,2．使用属性面板创建电子邮件链接,,

32、6.2.4,创建空链接和脚本链接,,1．创建空链接,,2．创建脚本链接,,6.2.5 创建下载文件超链接,,6.2.6,图像地图,,1．创建图像地图,,2．修改图像地图,6.3 利用,Dreamweaver,MX,编辑超链接,6.3.1,设置链接颜色,,6.3.2,设置链接字体,,6.3.3,删除超链接,6.4 创 建 导 航 条,6.4.1,认识导航条,,1．导航条的作用,,2．导航条的4种状态,,（1）一般,图6-23 导航条的一般状态,,（2）滑过,,,,,,,（3）按下,,（4）按下时鼠标经过,图6-24 导航条的滑过状态,,6.4.2,插入导航条,,,6.4.3,修

33、改导航条,,6.5 管 理 超 链 接,6.5.1,设计一个清晰的超链接,,1．设计一个清晰的超链接,,2．首页上的超链接要“有去有回”,,3．给图像超链接做文字说明,6.5.2,利用站点地图管理超链接,,1．建立网页间的超链接,,2．移除网页间的超链接,,3．更新超链接,,4．检查超链接,6.6 利用,HTML,创建超链接,6.6.1,页面链接,,6.6.2,锚点链接,,6.6.3,电子邮件链接,第 7 章,网页表单的编辑,表单是用于实现网页浏览者与服务器之间信息交互的一种页面元素，被广泛地应用于各种信息的搜集和反馈。,,,7.1 认 识 表 单,,,7.2 利用,Dream

34、weaver,MX,编辑表单,,,7.3 利用,HTML,编辑表单,,7.1 认 识 表 单,网页是一种平面传播工具，没有表单，面对华丽、生动的画面，浏览者只能照单全收而不能参与其中。使用表单可以收集来自用户的信息，它是网站管理者与浏览者之间沟通的桥梁。平时用户上网登录,E-mail,信箱，填写、提交各种个人资料等都应用了表单的各种功能。,表单有两个重要的组成部分：一是描述表单的,HTML,源代码；一是用于处理用户在表单域中输入的信息的服务器端应用程序或客户端脚本，如,CGI、ASP,等。,7.1.1 表单网页实例,图7-2 “表单”样例,,,7.1.2,表单对象,,表单,,文本字段,

35、,隐藏域,,复选框,,单选按钮,单选按钮组,,列表/菜单,,跳转菜单,,图像域,,文件字段,,按钮,,,7.2 利用,Dreamweaver,MX,编辑表单,,7.2.1,创建表单,,7.2.2 设置表单属性,7.2.3 插入表单对象,,1．文本框,,2．按钮,,3．复选框,,4．单选按钮,,5．列表/菜单属性,,6．文件域,,7．图像域,,8．隐藏域,7.2.4,验证表单的正确性,,7.3 利用,HTML,编辑表单,7.3.1,表单标记符,,,7.3.2,表单输入标记符,7.3.3,表单控件的定义,,1．文本框和口令框,,2．复选框与单选按钮,,3．按钮,,4．多行文本框,,5．选项

36、菜单,第 8 章,制 作 框 架 网 页,8.1 认 识 框 架 网 页,,8.2 创 建 框 架,,8.3 编 辑 框 架,,8.4 设置框架和框架集属性,,8.5 链 接 框 架 的 内 容,框架是在同一个浏览窗口中显示多个网页的技术，框架网页是一种特殊的网页。框架将窗口划分为不同的部分，各部分中都有各自的网页，总体构架出一个框架集。此外，通过为超链接指定目标框架，可以在框架之间建立起以内容为媒介的联系，因而实现页面导航的功能。,8.1 认 识 框 架 网 页,框架（,Frames）,技术由框架集（,Frameset）,和框架（,Frame）,两部分组成。,,框架网页是一种特殊

37、的,HTML,网页，它可以将浏览器窗口分成不同的区域，称为框架区域，每个区域都可以保存并显示一个不同的网页。,,8.2 创 建 框 架,,Dreamweaver,MX,创建框架集的方法有两种：一是可以自己设计，二是可以从几个预设的框架集中选择。,8.2.1,插入预设的框架集,,,,,提示：,在“框架”面板中，预设的框架集是由两种颜色组成的，其中浅蓝色的区域表示在创建框架后，原文档内容所在的位置。白色区域则表示新创建的框架文档所在的位置。,图8-2 “框架”面板,,8.2.2,设计和插入框架集,,“框架”面板上的预设框架集几乎包含了一般的框架格式，当然也可以自己设计框架格式，灵活运用框架集。,

38、8.3 编 辑 框 架,8.3.1,选定框架和框架集,,在对框架进行编辑操作之前必须先选择所需的框架，可以直接在网页文档视窗中选择框架，当然利用“框架”控制面板对框架进行操作比较方便。,1．利用框架控制面板选定框架和框架集,,,2．在文档视窗中选定框架和框架集,,,3．切换所选定框架和框架集,8.3.2,删除框架,,8.3.3,在框架中打开网页文档,,创建框架的目的是在框架中建立新的网页或打开已有的网页文档。,8.3.4,保存框架和框架集,,框架集文件和与之相关的框架文件必须先保存，才能在浏览器中预览整个框架网页内容。可以分别保存框架集页面或框架页面，也可以同时保存所有打开的框架文件和框架集

39、页面。,1．保存框架,,,图8-9 “保存为”对话框,,2．保存框架集,,8.4 设置框架和框架集属性,框架属性确定了框架集内各个框架的名称、源文件、边框的框架能否调整大小等。框架集属性确定框架的大小和框架之间的边框宽度和颜色等。在框架结构文档中，框架和框架集都有各自的属性设置面板，它们的属性应该分别进行设置。,8.4.1,框架的属性,,1．启动框架属性面板,,,,,,,,2．设置框架的属性,图8-10　“框架”控制面板和框架属性面板,,8.4.2,框架集的属性,,1．启动框架集属性面板,,,,,,,2．设置框架集的属性,,图8-11　“框架”控制面板和框架集属性面板,,8.4.3,设置或更

40、改框架的属性,,1．设置框架的大小,,2．设置框架和框架集的边框,,3．设置框架或框架集的边框颜色,,4．改变框架的背景色,8.5 链 接 框 架 的 内 容,利用框架结构，可以把导航条内容固定在页面的顶部、左边或右边。在浏览网页时，用户可以直接选择导航条上相应的内容，切换到所对应的页面，这都需要事先对各个框架建立超链接。,要想在框架内使用链接，必须为链接设置一个目标，该目标是指框架内链接要打开的网页内容。根据链接目标的不同，框架中的链接主要有两种：框架内的链接和关键字的链接。,,8.5.1,框架内的链接,,框架内的链接就是建立一个框架内不同,HTML,页面间内容的链接和跳转。,8.5.2,

41、关键字的链接,,关键字的链接是指在属性面板中的“目标”下拉列表框中列出的原有参数，用来确定所链接文件的显示位置，它不同于框架名称的参数（如,mainFrame,），,这些参数有4种，其含义如下。,,,,_,blank,,,,_,parent,,,,_,self,,,,_,top,第 9 章,利用图层技术制作网页,9.1 认 识 图 层,,9.2 图层的基本操作,,9.3 层 面 板 的 应 用,,9.4 图 层 与 表 格,,9.5 图 层 与 时 间 轴,层是一种,HTML,页面元素，可以将它放置在页面的任意位置。层可以包含文本、图像或其他可放在,HTML,文档正文

42、中的任何内容。,9.1 认 识 图 层,层是网页中用来放置文本、图像、动画、表单、插件等网页元素的载体。没有层的网页像一个平面，即由,x,轴和,y,轴组合成的二维空间，而层所确定的区域是在,z,轴上，它摆脱了二维平面的束缚，形成了一个三维空间结构，如图9-1所示。同时，层与层之间的关系也由,z,轴的坐标来决定。一般来说，默认后建立的层的,z,值大，先建立的层,z,值小，,z,值大的层可以覆盖,z,值小的层 。,图9-1 层在网页中的相对位置,,9.2 图层的基本操作,9.2.1,创建图层,,1．利用工具创建图层,,2．通过菜单创建图层,,3．拖动法创建图层,9.2.2 激活图层,,9.

43、2.3,选中图层,,1．选中一个图层,,2．选择多个图层,,9.2.4,调节图层大小,,1．调整单个图层的大小,,2,．调整多个图层的大小,,9.2.5,移动图层,,1．拖动层,,2．利用属性面板,,3．利用键盘,,9.2.6,对齐图层,,9.2.7,图层与网格的对齐,9.3 层 面 板 的 应 用,,9.3.1,层属性面板的应用,,9.3.2 层控制面板的应用,,1．改变图层的可见性,,2．图层的叠放次序,,3．创建嵌套图层,9.4 图 层 与 表 格,9.4.1,防止图层重叠,,方法一：在“层”控制面板中，请选择“防止重叠”选项。,,方法二：在“文档”窗口中，选择“修改”→“

44、排列顺序”→“防止重叠”命令。,9.4.2,把图层转换为表格,,,9.4.3 把表格转换为图层,9.5 图 层 与 时 间 轴,DHTML，,也就是动态,HTML，,是一种能够具有使用脚本语言来改变样式或位置能力的语言。时间轴在网页中所获得的效果就是利用动态,HTML,语言来实现的。通过,DHTML,来改变层的属性，或是通过时间轴各帧上的一系列图像来实现动态的效果。,,时间轴也叫时间线，顾名思义，它是一条贯穿时间的轴。通过在这条时间轴上不同的时间部位放置不同的内容，就可以实现网页元素的动态效果。,9.5.1,时间轴介绍,,1．时间轴面板,图9-29 时间轴面板,,“时间轴”弹出式菜单,,

45、“行为”通道,,动画条,,关键帧,,“动画”通道,2．播放选项,,图9-30 播放选项,,倒带,,后退,,播放,,播放速度,,自动播放,,循环,3．修改时间轴,,4．重命名时间轴,,5．,用时间轴更改图像和层的属性,,6．,使用多个时间轴,9.5.2,时间轴的应用,,1．,拷贝和粘贴动画,,2．将动画序列应用于另一对象,,3．,时间轴动画小技巧,9.5.3,创建时间轴动画,,1．创建动画的基本方法,,2．录制图层路径,第 10 章,在网页中使用,CSS,样式,10.1,CSS,样式的分类及应用方式,,10.2 使用,CSS,样式表面板,,10.3 新 建,CSS,样式,,10.4 设

46、置“,CSS,样式定义”对话框参数,,10.5 自定义,CSS,样式,,10.6 链接外部,CSS,样式,,10.7 编 辑,CSS,样 式,,10.8 复 制,CSS,样 式,,10.9 导 出,CSS,样 式,,10.10,CSS,样式转化为,HTML,标签,CSS,即,Cascading Style Sheets，,称为层叠样式表，又称级联样式表。,CSS,技术是一种格式化网页的标准方式，它通过设置,CSS,属性使网页元素获得各种不同的效果。它扩展了,HTML,的功能，使网页设计者能够以更有效的方式设计网页属性。,10.1,CSS,样式的分类及应用方式,10.1.1,CSS,样

47、式表概述,,,使用,CSS,定义的网页风格可以控制,HTML,语言标志的一些诸如字体、边框、颜色、背景等属性，也可以通过定义外部风格文件实现整个网站页面风格的统一。,CSS,不仅能定义文字格式，还可以为文字创造出丰富多彩的图形效果。使用文字加样式表来代替部分图形，以减少网页文件的字节数，提高网页的浏览速度，从而提高了网站的竞争力。,CSS,样式为一组样式，它的属性在,HTML,标签中依次出现，并不显示在浏览器中。,,使用,CSS,技术除了可以在单独网页中应用一致的格式以外，对于大网站的格式设置和维护更具有重要意义。将,CSS,样式定义到样式表文件中，然后在多个网页中同时应用该样式表中的样式，就

48、能确保多个网页具有一致的格式，并且能够随时更新（只要更改样式表文件就可以使所有网页自动更新），从而大大降低了网站的开发和维护工作量。,,10.1.2,CSS,样式的分类,,,Dreamweaver,MX,可以定义几种不同类型的,CSS,样式，并且可以使用不同的方法将其应用在网页文档中。通常有以下3种,CSS,样式。,（1）创建自定义样式,,（,Custom CSS styles）,,（2）重定义,HTML,标签,,（,HTML tag styles）,,（3）使用,CSS,选择器,,（,CSS selector styles）,10.1.3,CSS,样式的应用方式,,使用,CSS,的样式有以下

49、几种方式。,,（1）局部套用,,（2）内联式,,（3）外联式,10.1.4,CSS,样式的冲突,,在同一个文本中应用两种或两种以上的,CSS,样式，这些样式会相互冲突产生不可预料的效果。,10.2 使用,CSS,样式表面板,使用,CSS,样式设置面板可以创建和管理,CSS,样式。,,,图10-1,CSS,样式表面板,,10.3 新 建,CSS,样式,,在“新建,CSS,样式”对话框中可以进行下列各项的设置。,图10-5 “使用,CSS,选择器”选项对话框,,10.4 设置“,CSS,样式定义”对话框参数,通过设置“,CSS,样式定义”对话框，可以定义,CSS,样式表的格式化参数。,图

50、10-7 “,CSS,样式定义”对话框,,10.4.1,定义,CSS,样式的“类型”（,Type,）,属性,,选择“,CSS,样式定义”对话框中“分类”列表中的“类型”选项，可以对,CSS,样式的“类型”属性进行设置 。,10.4.2,定义,CSS,样式的“背景”（,Background,）,属性,,选择“,CSS,样式定义”对话框中“分类”列表中的“背景”选项，可以对,CSS,样式的“背景”属性进行设置 。,10.4.3,定义,CSS,样式的“区块”（,Block,）,属性,,选择“,CSS,样式定义”对话框中“分类”列表中的“区块”选项，可以对,CSS,样式的“区块”属性进行设置 。,1

51、0.4.4,定义,CSS,样式的“盒子”（,Box,）,属性,,选择“,CSS,样式定义”对话框中“分类”列表中的“盒子”选项，可以对,CSS,样式的“盒子”属性进行设置 。,10.4.5,定义,CSS,样式的“边框”（,Border,）,属性,,选择“,CSS,样式定义”对话框中“分类”列表中的“边框”选项，可以对,CSS,样式的“边框”属性进行设置 。,10.4.6 定义,CSS,样式的“列表”（,List）,属性,,选择“,CSS,样式定义”对话框中“分类”列表中的“列表”选项，可以对,CSS,样式的“列表”属性进行设置 。,10.4.7,定义,CSS,样式的“定位”（,Positio

52、ning,）,属性,,选择“,CSS,样式定义”对话框中“分类”列表中的“定位”选项，可以对,CSS,样式的“定位”属性进行设置 。,10.4.8,定义,CSS,样式的“扩展”（,Extensions,）,属性,,选择“,CSS,样式定义”对话框中“分类”列表中的“扩展”选项，可以对,CSS,样式的“扩展”属性进行设置 。,10.5 自定义,CSS,样式,自定义,CSS,样式是惟一可以应用在网页文档中所有文本上的,CSS,样式，在,CSS,样式面板中的“应用样式”视图下显示所有与网页文档关联的自定义样式。当然，如果文本中应用多个,CSS,样式，就会引起样式冲突，产生意想不到的后果。,10.5

53、.1,应用自定义,CSS,样式,,（1）先要选中网页文档中需应用,CSS,样式的文本。,,（2）将,CSS,样式应用在选中的文本中。,图10-16　文本“属性”面板的,CSS,模式,,10.5.2,删除已应用的自定义,CSS,样式,,对于不需要的自定义,CSS,样式，可以将应用在文本中的自定义,CSS,样式移除。具体操作方法如下。,,（1）选中应用了自定义,CSS,样式的文本。,,（2）将自定义的,CSS,样式删除。,10.6 链接外部,CSS,样式,链接外部,CSS,样式是应用,CSS,样式的主要方法之一，链接外部,CSS,样式后，在页面中并不出现,CSS,语法。,10.7 编 辑,CS

54、S,样 式,如果需要对已经创建的,CSS,样式进行编辑，应该先在,CSS,样式控制面板中选择需编辑的,CSS,样式，再执行下面的操作之一，都可以打开“,CSS,样式定义”对话框，对,CSS,样式中的相关属性进行编辑。,10.8 复 制,CSS,样 式,可以对原有的,CSS,样式进行复制操作，然后在复制的,CSS,样式基础上创建另一种新的,CSS,样式。,10.9 导 出,CSS,样 式,可以将自己认为满意的,CSS,样式导出为.,css,文件，应用在其他的页面中。,10.10,CSS,样式转化为,HTML,标签,尽管,CSS,样式表有很强大的功能和优点，但是,IE 3.0,以前版本的浏览器

55、不支持,CSS,样式，,IE 3.0,版本的浏览器也仅仅支持部分属性，只有将,CSS,样式转换为,HTML,标签，才可以在这些浏览器中正确显示页面。,第 11 章,在网页中加入多媒体,11.1 网页多媒体应用实例11.2 制作交互对象,,11.3 在网页中插入媒体对象,,11.4 在网页中插入声音,,Dreamweaver,MX,可以很方便、快捷地在网页中加入声音、动画等文件，可以合成、编辑这些多媒体文件和对象，例如,Java,小程序、,QuickTime、Flash,动画、,Shockwave,动画和,MP3,文件等，还可以在这些对象里附加一些设计记录，也可以插入,Flash,按钮

56、和文本对象等。,11.1 网页多媒体应用实例11.2 制作交互对象,,11.2.1,插入,Flash,按钮对象,,1．使用,Flash,按钮对象,,2．插入一个,Flash,按钮对象,,3．,修改,Flash,按钮对象,11.2.2,插入,Flash,文本对象,,,11.2.3,鼠标经过图像,,11.3 在网页中插入媒体对象,11.3.1,插入,Flash,电影,,1．插入,Flash,电影,,2．在文档窗口中预览,Flash,影片,,3．,设置,Flash,影片属性,11.3.2,插入,Shockwave,电影,,1,．,关于,Shockwave,电影,,2．插入,Shockwave

57、,电影,,3．设置,Shockwave,属性,11.3.3,插入,ActiveX,控件,,,1．插入,ActiveX,控件,,,2．设置,ActiveX,属性,11.3.4,插入,Java,程序,,（,Java Applet,）,,,1．插入,Java,小程序,,,2,．,设置,Java,小程序属性,11.4 在网页中插入声音,11.4.1,声音文件,,几种常见的音频文件格式。,,（1）.,midi,或 .,mid,,（2）.,wav,,（3）.,aif,,,（4）.,mp3,,（5）.,ra,， .ram， .rpm，,或,Real Audio,11.4.2,链接声音文件,,,1．链接到音

58、频文件,,,2．嵌入声音文件,第 12 章,利用模板和库设计网页,,12.1 利用模板创建网页,,12.2 利用模板更新网页,,12.3 利用库项目维护网页,12.1 利用模板创建网页,12.1.1,模板原理,,Dreamweaver,模板,是一种用来制作具有相同风格页面的“模子”，用户利用,模板,可以在短时间内设计大量风格相同或相近的页面。,12.1.2 创建模板,,在,Dreamweaver,MX,中，创建模板的方法有3种。,,1．将现有的文档保存为模板,,2．,通过“资源”面板创建新模板,,3．创建嵌套模板,12.1.3,定义可编辑区域,,1．定义可编辑区域,,定义可编辑区域有

59、两种方法。一种是选择已有的一部分页面内容将它指定为可编辑区域，另一种是在当前光标处插入一个空的可编辑区域。,2．删除可编辑区域,,如果已经将模板文件的一个区域定义为可编辑,区域,，而现在想要再次锁定它，使其为不可编辑,区域,，可执行“删除模板标记”操作。,,12.1.4,使用模板,,,1．创建基于模板新页面,,,2．将模板应用到现有文档,12.1.5,管理模板,,,1,．,重命名模板,,,2．删除模板,,,3．将文档与模板分离,12.2 利用模板更新网页,12.2.1,修改页面附着的模板,,,12.2.2 更新附着模板的页面,12.3 利用库项目维护网页,12.3.1,创建库项目,,1．

60、什么是库项目,,库是一种特殊的,Dreamweaver,文件，其中包含已创建的单,独的,网页,“资源”或资源拷贝的集合。,2．创建库项目,,可,以将文档,body,部分中的任意元素创建库项目，这些元素包括文本、表格、表单、,Java applets、,插件、,ActiveX,元素、导航条和图像。,12.3.2,在文档中插入库项目,,12.3.3,库项目的管理,,,1．编辑库项目,,2．重命名库项目,,3．删除库项目,,4．重新创建库项目,,5．将项目从源文件中分离,,12.3.4,更新网页,,1．更新当前网页,,2．更新整个站点或所有使用特定库项目的文档,第 13 章,美 化 网 页,1

61、3.1 利用,Fireworks MX,美化网页,,,13.2 利用,Flash MX,制作网页动画,设计并制作出赏心悦目的网页并非容易的事情，单独使用,Dreamweaver,MX,来设计是得不到满意效果的，还需要利用网页三剑客的另两位成员：,Fireworks MX,和,Flash MX,来对,Dreamweaver,MX,设计的网页作进一步的美化工作。,13.1 利用,Fireworks MX,美化网页,Fireworks MX,最主要的功能就是进行网页图像的制作和处理，如制作交互图像、图像映像等。,13.1.1,Fireworks MX,的基本操作,,,1．认识,Firework

62、s MX,的操作界面,,,（1）启动,Fireworks MX,,,（2）,Fireworks MX,窗口组成,,图13-1,Fireworks MX,窗口,,2．,Fireworks MX,的常用菜单及工具,,,（1）画面显示与调整,,,（2）对象选择方法,,13.1.2,利用,Fireworks MX,制作网页按钮,,1．制作网页导航条,,导航条实际上是一组互斥按钮，亦称导航按钮。制作的方法比较简单，只要创建一个按钮，对其进行必要的修饰完善操作，再将其进行复制得到多个按钮，最后分别修改其文字提示及链接即可。,2．制作网页个性化按钮,,由于,Fireworks MX,中提供的按钮样式毕竟有限

63、，现在我们不使用现成按钮样式库中的按钮，而是自己动手绘制一组按钮，并进行一些修饰与设置。,13.2 利用,Flash MX,制作网页动画,Flash,自从问世以来，就在网页动画制作领域掀起了一股热潮，“闪客”一族也应运而生。作为一个网页动画的标准专业制作工具，,Flash MX,可以用来创建网站动画徽标、网站导航条、长篇,Flash,动画，甚至完整的,Flash,站点。,,13.2.1,Flash,动画概述,,与传统动画类似，,Flash,动画也是由一系列连续的帧组成的，当以一定速率播放这些帧时，由于人眼的视觉暂留，看到的便是连续的动画。这种动画被称为“逐帧动画”。要创建逐帧动画，需要将每个

64、帧都定义为“关键帧”，然后给每个帧创建不同的图像。,,除了逐帧动画之外，,Flash MX,还可以创建“补间动画”，也就是常说的“渐变动画”。,1．,Flash MX,简介,,Flash MX,是美国,Macromedia,公司出品的矢量图形编辑和动画创作专业软件，被广泛应用于网页设计和多媒体创作等领域。,2．有关动画的一些基本概念,,（1）帧（,Frame）,,① 关键帧,,② 静止帧,,③ 中间过渡帧,（2）层（,Layer）,,,（3）场景（,Scene）,,,（4）影片（,Film）,3．认识,Flash MX,界面,,,（1）启动,Flash MX,,,（2）,Flash MX,窗口

65、的组成,图13-25,Flash MX,的窗口,,4．,Flash MX,中的一些基本操作,,（1）帧的操作,,动画是由时间线上一格一格的帧所组成的，时间线面板的标尺上有一个帧指针，它标示出当前帧所在的位置，在时间线面板的下边也会同时显示出帧的序号。,（2）层的操作,,Flash,作品可以由多个层共同组成，层与层之间既相互独立，又相互影响。每个层上都有各自独立的图形或动画，将这些包含内容的层按一定的顺序重叠在一起，即形成了由它们共同产生的综合的效果。在播放时，画面上呈现的就是这种综合的效果。,（3）场景的操作,,,① 新增场景,,,② 当前场景的切换,,,③ 场景的更名,,,④ 删除场景,13

66、.2.2,利用,Flash MX,制作网页动画,,1．,Flash,动画的类型,,Flash,动画分为两种类型：,,逐帧动画,,（,frame-by-frame animation）,,过渡动画,,（,tweend,animation）,2．,Flash,动画的制作,,,（1）创建过渡动画,,,（2）创建逐帧动画,,3．在网页中加入,Flash,动画,,如果要把,Flash,动画加载到网页上，作为网页元素供浏览者欣赏，首先要将其输出为动画播放格式的文件（*.,swf,），,然后在需要插入动画的位置直接插入,Flash,动画，或编制一段,HTML,引导程序，用以调用,Flash,动画播放插件，并播放指定位置的,Flash,动画播放文件。,另外，,Flash MX,还能够根据用户的不同需求，同时输出多种与该,Flash,动画有关的格式文件，如,GIF,或者是,JPEG,动画序列文件等。,,（1）前期工作,,网页中所插入的,Flash,动画是.,swf,格式，而不是默认的.,fla,格式，因此需要生成.,swf,格式的文件 。,图13-42 “导出,Flash Player”,对话框,,（2