网页制作流程

1、网页设计计基础教学目的的： 本章将带带领用户户认识DDreaamweeaveer MMX，了了解其新新增功能能。在开开始学习习该软件件之前，了解一一下Drreammweaaverr MXX的工作作界面的的一些简简单设置置。通过过本章的的学习，用户能能熟悉DDreaamweeaveer MMX的工工作界面面，并能能自行设设置具有有独特的的个性化化的工作作环境。理解DDW站点点的作用用，并掌掌握建立立站点的的方法及及站点维维护的方方法。教学重点点： 1、认识识Dreeamwweavver MX。 2、新增增功能。 3、Drreammweaaverr MXX主窗口口。 4、自定定义工作作环境。 5、

2、利用用Dreeamwweavver建建立站点点的方法法教学难点点：1、认识识Dreeamwweavver MX。 2、新增增功能。 3、自定定义工作作环境。教学内容容与教学过程程：一、 介介绍网页页制作这这门课程程1学习习这门课课程的目目的： 让学生生掌握HHTMLL语言、以及利利用相关关网页制制作工具具制作网网页的基基本方法法与技能能。学生生通过这这门课程程的学习习，能够够具备综综合运用用专业软软件进行行小型网网站开发发和静态态网页页页面设计计的能力力，同时时积累一一定的实实践经验验，为今今后从事事相应的的网站设设计制作作工作打打下良好好基础。2这门门课程的的教学内内容： 在制作作软件上上：

3、以网网页制作作软件DDreaamWeeaveer MMX为主主干进行行网页制制作教学学，同时时选择了了Flaash MX版版本来制制作网页页中的动动画素材材，选择择了图形形图像工工具Phhotooshoop 77.0版版本软件件来处理理和制作作网页中中的图片片。 教教学内容容安排上上按照学学生学习习网页的的渐进规规律划以以及学校校制订的的计划主主要学习习第1、2、33、5、6、99章，主主要包括括网页制制作的基基础知识识、Drreammweaaverr MXX软件的的使用，初学者者利用现现有的素素材设计计制作出出一个简简单的网网页；利利用Phhotooshoop7和和 Fllashh MXX软

4、件来来美化网网页，以以及网页页布局和和用色方方面的美美术知识识，如何何设计网网页的版版面和结结构，还还要能对对供给的的素材按按照网站站的特点点进行适适当的美美化处理理；还能能掌握中中小型网网站的建建立方法法。 3这门门课程的的教学和和学习方方法： 教学上上以一个个个案例例为基础础，采用用项目教教学的方方法，由由浅入深深的介绍绍网页制制作的各各个知识识点；教教学中以以学生会会操作为为目的，重视学学生动手手能力和和自学能能力的培培养 同同学们学学习时除除了要掌掌握相应应的操作作技能以以外，更更要重视视操作技技能的使使用，要要努力完完成每章章教学案案例的制制作以及及课后素素材案例例。在不不断的练练习

5、过程程中熟悉悉和升华华所学的的操作技技能。同同时，要要学会学学习，即即要学会会与老师师或同学学之间技技术心得得的交流流，要学学会能自自主的依依靠其他他资源（网络、报纸杂杂志等）来扩展展所学的的知识体体系。课前思考考：1、Drreammweaaverr软件是是干什么么用的？2、试试用一下下Dreeamwweavver，你觉得得这个软软件在界界面上更更象Woord还还是Phhotooshoop，为为什么？3、试用用一下DDreaamweeaveer，按按默认格格式保存存，文件件的扩展展名是什什么？4、双击击网页文文件，会会自动打打开Drreammweaaverr软件吗吗？这点点上与WWordd软件

6、相相同吗？1.1 Dreeamwweavver的的基本概概念1、了解解Dreeamwweavver与与IE有有什么区区别？ Drreammweaaverr是制作作网页的的工具，用它可可以生成成.httm或.htmml文件件，而IIE是浏浏览网页页的工具具，用IIE只能能看网页页，而不不能改网网页，修修改网页页还是需需要网页页制作工工具。2、做网网页只能能使用DDreaamweeaveer一种种工具吗吗？ 常用用的网页页制作软软件有DDreaamweeaveer和FFronntPaage。Dreeamwweavver由由美国MMacrromeediaa公司开开发，虽虽然初学学者感到到比较难难学，

7、但但它的功功能更强强大，生生成的网网页代码码质量好好，是当当今最流流行的网网页制作作工具，适合专专业网页页设计人人员使用用，近年年来它还还获得过过不少大大奖呢。Froontppagee是微软软公司开开发的OOffiice办办公软件件中的一一部分，比较容容易上手手，但功功能不太太强大，我们只只在需要要时（如如向网页页中加入入微软格格式的视视频），才会使使用FrronttPagge。3、Drreammweaaverr最新版版是多少少？ Drreammweaaverr从2.0、33.0、4.00、MXX到现在在最新的的MX220044版，平平均每过过一年就就出一个个新版。可见计计算机是是多么的的富有

8、活活力。今今年常用用的是MMX版，建议大大家在家家里的电电脑上也也将这个个版本，以便与与学校的的相同。对于软软件，我我并不认认为版本本越新越越好，它它们的基基本功能能还是相相同的，一般版版本越高高，对计计算机的的要求也也越高，如果计计算机配配置不高高，初学学时还是是找个低低版本比比较好，当然所所装的软软件必须须与书本本上的相相同，这这也是学学习其它它软件的的基本要要求。4、Drreammweaaverr与Fiirewworkk、Fllashh有何关关系？ 它们们都是MMacrromeediaa公司的的软件，Dreeamwweavver是是网页制制作工具具，Fiirewworkk是图形形处理工工

9、具，与与phootosshopp相似，一般用用于网页页图形的的制作，Flaash是是动画制制作工具具，在制制作好的的网页时时，一般般先用FFireeworrk和FFlassh先制制作好网网页中要要用到的的图形和和动画素素材，再再用Drreammweaaverr把这些些素材做做成一张张网页，只会DDreaamweeaveer，不不会图形形处理和和动画制制作，是是做不出出好的网网页的。有人把把这三个个软件称称作网页页设计“三剑客客”。1.2认认识DrreammWeaaverr1.DrreammWeaaverr的作用用和特色色2.DrreammWeaaverr功能界界面的分分解3.DrreammWe

10、aaverr工作流流程4. DDreaamWeeaveer 的的版本、安装、打开、保存等等操作演演示：练练习制作作第一张张网页作业业一在主窗窗口中输输入以下下文字，并按以以下格式式排版，最后把把文件以以“学号姓姓名.hhtm”为名保保存在桌桌面上。注意难难点：设设置字体体、水平平线、二二个全角角空格、回车会会自动空空一行，Shiift+回车就就不会空空行了。1.3 创建本本地站点点引入：为什么么要建站站点？在在正式开开始制作作网页之之前，最最好先定定义一个个新网站站，这是是因为：更好地利利用站点点窗口对对站点文文件进行行管理。 尽可能的的减少一一些错误误的出现现，如路路径出错错，链接接出错（特

11、别是是新手），当熟熟练掌握握了DRREAMMWEAAVERR的使用用后，并并且只需需制作单单个网页页时候可可以省去去这一步步； 还值得说说的是，新手做做网页，就只知知道做网网页，不不懂得条条理性、结构性性，一个个文件放放这里，另一个个文件放放那里，或者所所有文件件都放在在同一文文件夹内内，这样样显得很很乱。 所以，行行家的做做法是：（1先建建立一个个文件夹夹用于存存放网站站的所有有文件，再在文文件内建建立几个个文件夹夹，将文文件分类类，如图图片文件件放在iimagge文件件夹内，HTMML文件件放在HHTMLL文件夹夹内（2）当当然，如如果站点点比较大大，文件件比较多多，可以以先按栏栏目分类类

12、，在栏栏目里再再分类。（3）还还有文件件的命名名也是非非常重要要的，新新手通常常不注意意这些，随便乱乱起些名名字，这这样过些些时候自自己也搞搞不懂是是什么了了（特别别是文件件比较多多的时候候），我我们要做做到一看看文件的的名字就就知道是是什么内内容的文文件。（4）行行家的做做法是：用英文文或者拼拼音给文文件命名名（推荐荐英文），不要要使用中中文的名名字（因因为有的的机器对对中文支支持不太太好，有有可能出出现链接接的错误误，你自自己以为为正确的的东西在在别人看看来有可可能是错错的）。1、什什么是站站点？站站点是存存放一组组网页的的一个存存储地方方，一般般是一个个磁盘目目录，在在该目录录中存放放该

13、网站站的所有有网页及及有关的的图片、FLAASH动动画、CCSS样样式文件件等。建建立站点点时，我我们一般般在自已已的电脑脑上建一一个文件件夹，然然后把制制作的所所有网页页及图片片放在此此文件夹夹中，最最后把这这个目录录上传到到WEBB服务器器上，以以供英特特网上的的所有用用户浏览览。问：网页？网站站答：不不等问：网页？主页页答：不不等主页页通常主主页命名名为inndexx.httm,iindeex.hhtmll,deefauult.htmm,deefauult.htmml2、站点的的典型文文件结构构站点的的典型文文件结构构3、如如何建立立一个空空站点准准备工作作建文文件夹在在硬盘上上某一个个

14、位置建建一个总总的文件件夹My wweb pic musiic flassh moviie 例：在DD盘上建建立自己己帐号为为名的文文件夹，把这个个文件夹夹定义为为站点，站点名名的“我的个个人网站站”操作步步骤：第一步：在D盘盘上建立立文件夹夹第二步：在DWW软件中中，选择择菜单“站点-新建站站点”，可以以按向导导一步一一步操作作，但我我建议大大家直接接选“高级”卡片第三步：在“本地信信息”中，填填入“站点名名称”，把“本地根根文件夹夹”指定为为该目录录4、如如何把一一个已有有目录定定义为一一个站点点例：首首先单击击下载网网站，把把网站包包下载到到D盘，并解压压缩，在在D盘上上会自动动生成一一

15、个文件件夹，按按上面所所讲的步步骤，把把该目录录定义为为一个站站点，站站点名为为“祖国腾腾飞”5、使使用站点点管理器器定义完完站点后后，就可可以使用用站点管管理器来来管理站站点了。显示站站点面板板：单击击菜单“窗口-站点”。我们们可以在在站点管管理器中中通过右右击“新建文文件夹”、“新建文文件”、“文件重重命名”、“删除文文件”，也可可以通过过拖动，把文件件移动到到其它文文件夹。第二章 网网页的基基本操作作教学目的的：使学生了了解编辑辑HTMML文档档的各种种具体操操作，包包括如何何为页面面添加文文字，图图片。教学重点点：1、编辑辑文本的的各种方方法2、在网网页中插插入图片片的方法法教学难点点

16、：1、编辑辑文本的的各种方方法2、在网网页中插插入图片片的方法法教学方法法：讲演演法教学课时时：4课课时教学过程程：2.1文文本操作作及修饰饰一、特殊殊字符的的输入1、输入入 等特特殊英文文字符单击击“插入入”工具具栏上的的“字符符”面板板。2、输入入等中中文符号号采采用输入入法中的的软键盘盘3、输入入空格（推荐使使用全角角空格）单单击“插插入”菜菜单-“特殊符符号”-“不换换行空格格”按“CCtrll+Shhiftt+Sppacee”组合合键单击“插入”工具栏栏上的“字符”面板上上的“不不换行空空格”按按钮。把中中文输入入法切换换到全角角模式，输入全全角空格格4、插入入日期和和时间。单单击“

17、插插入”工工具栏上上的“常常用”面面板上的的“日期期”按钮钮。练习一：输入以以下内容容，以“1.hhtm”保存在在桌面上上。特殊符号号： &; 中文符号号：现在时间间：20006-02-22二、列表表的制作作列表表分为无无序列表表（项目目列表）和有序序列表（编号列列表）；各各个列表表项之间间没有顺顺序级别别之分时时选无序序列表，否则选选有序列列表 。制作作方法：第一一步：先先输入各各个项目目，每个个项目成成为一段段（一个个项目输输入完成成后，要要按回车车键，不不能使用用SHIIFT回车）第二二步：选选中要转转换为项项目列表表的所有有段落第三三步：单单击属性性面板上上的项目目列表或或编号列列表按

18、钮钮第四四步：如如果要实实现多级级(嵌套套)的项项目列表表，可单单击“属属性”面面板上的的“缩进进”命令令练习二：电脑专业业 网络技术术 网络1班班 网络2班班 信息技术术 信息1班班 信息2班班 电脑维护护 美术专业业 工艺绘画画 广告设计计 操作作提示：第第一步：输入“电脑专专业”等等11行行，每行行按回车车，不能能用SHHIFTT+回车车第第二步：全部选选中，单单击“属属性”面面板中的的无序列列表按钮钮第第三步：选中“网络技技术电脑维维护”77个段落落，选“属性”面板中中的缩进进按钮第四四步：同同样方法法让“网网络1班班”等班班级缩进进第第五步：选中“网络11班、网网络2班班”，单单击“

19、属属性”面面板中的的有序列列表按钮钮，使其其变为有有序列表表有时设置置好项目目符号后后，再打打进去的的字也变变成项目目符号了了，解决决这个问问题的方方法是，在设置置项目符符号前，先把后后面的字字输入几几字，再再去设置置项目符符号。选做练习习：飘雨的季季节 困惑的心心情 羞涩的蓓蓓蕾 年轻的你你我 蓝色的小小屋 飘雨的季季节 困惑的心心情 羞涩的蓓蓓蕾 年轻的你你我 蓝色的小小屋 飘雨的季季节 困惑的心心情 羞涩的蓓蓓蕾 年轻的你你我 蓝色的小小屋 飘雨的季季节 困惑的心心情 羞涩的蓓蓓蕾 年轻的你你我 蓝色的小小屋 三、样式式的使用用(一)样样式的作作用：避免免重复操操作，提提高操作作效率；统

20、一网网页的风风格(二)HHTMLL样式HTTML样样式与WWordd中的格格式刷功功能相似似。如果果网页中中多个地地方需要要设置“红色、黑体、5字号号”等三三个属性性，如果果一个一一个去设设置效率率不高，我们可可以先定定义一个个“HTTML样样式”为为包含“红色、黑体、5字号号”等三三个属性性，以后后到需要要设置这这三个属属性的地地方应用用一下这这个HTTML样样式即可可，所以以使用“HTMML样式式”可以以提高工工作效率率。1、建立立HTMML样式式第一一步：在在窗口菜菜单中打打开“HHTMLL样式”面板（属于设设计面板板组）第二二步：单单击面板板下方的的“新建建样式”按钮（11）输入入名称

21、（22）指定定应用范范围（33）指定定应用时时的效果果（44）设置置属性2、应用用HTMML样式式选中中文字，单击“HTMML样式式”面板板中定义义的样式式即可3、清除除HTMML样式式选中中先设置置HTMML样式式的文字字，单击击面板上上的“清清除所选选样式”或“清清除段落落样式”4、修改改HTMML样式式双击击相应的的样式名名5、删除除HTMML样式式选择择要删除除的样式式，单击击“HTTML样样式”面面板中的的删除按按钮练习三：。定义义一个HHTMLL样式，名称为为“reed-hhei-5”，属性为为“红色色、黑体体、5字字号”，任意输输入一段段文字，把这个个HTMML样式式，多次次应用

22、到到网页中中。(三)CCSS样样式（层层叠样式式表）CSSS是干什什么用的的？你还记记得在网网页中最最大字号号是多少少吗？对对了是77号，再再大就不不行了，用CSSS样式式，你可可以让一一个字占占满一个个屏幕(如果你你喜欢这这样做)。用CCSS样样式还能能设置文文字的上上标、下下标、下下划线、文字背背景等。CSSS的功能能可强大大了!不不会CSSS，等等于没学学过网页页制作。HTMML样式式与CSSS样式式的区别别？同样都都是样式式，但功功能有很很大的不不同，HHTMLL样式的的功能只只是把原原来网页页设置的的几个属属性合并并为一个个名称，起到方方便设置置的目的的，但并并不能增增加其它它功能，

23、而CSSS样式式只对原原网页设设置的扩扩充，许许多原来来不能设设的属性性通过CCSS样样式可以以设了。1、建立立CSSS样式第一一步：打打开CSSS样式式面板第二二步：单单击面板板下方的的“新建建CSSS样式”按钮（11）指定定CSSS样式的的名称(最好字字母开头头)，（22）“类类型”选选“创建建自定义义样式”(其它它二种以以后介绍绍)，（33）“定定义在”选“仅仅对该文文档”，单击“确定”（44）设置置CSSS样式（CSSS样式功功能非常常多，首首先要求求掌握的的是“类类型”和和“背景景”二张张卡片的的内容。）2、应用用CSSS样式选中文文字，然然后在面面板上单单击相应应的样式式名3、清除

24、除CSSS样式选中先设设置CSSS样式式的文字字，单击击面板上上的“无无CSSS样式”4、修改改CSSS样式5、删除除CSSS样式2.2 在网页页中插入入图象一、网页页图像的的常用格格式1、GIFF：支持持2566色，可可以做成成逐帧动动画，可可以设置置透明背背景，一一般用于于网页中中的小图图标，如如 2、JPGG：支持持百万级级真彩，一般用用于网页页中的照照片，如如3、PNGG：有GGIF、JPGG的所有有优点，是网页页图片发发展的方方向，但但图片文文件大小小稍大。如DWW中也能能插入FFLASSH动画画、声音音文件、影视文文件等，这些内内容不属属本章内内容，但但插入这这些文件件的方法法与插

25、入入图像相相似，有有兴趣的的同学请请自行摸摸索。DWW只支持持以上三三种格式式的图片片，其它它如BMMP格式式是也可可以在IIE浏览览器中被被显示，但在DDW中无无法显示示，由于于BMPP文件体体积很大大，在网网页中一一般不推推荐。小知识：图像像有分辨辨率这个个技术指指标，由由于网页页图片一一般用于于在屏幕幕上显示示，而显显示屏的的分辨率率为每英英寸722象素，所以放放到网页页去的图图片分辨辨率不用用很高。如果用用数码像像机拍照照片，选选用最低低的6440X4480分分辨率即即可，千千万不用用把高分分辨率的的数码照照片直接接做到网网页中，那些会会影响打打开网页页的速度度，而且且浪费存存储空间间

26、。补充知识识：如何何保存网网页中的的图片在IIE浏览览器中右右击该图图片，选选“图片片另存为为”即可可。二、在网网页中插插入图片片1、插入入图片前前先把网网页保存存一下，以免图图片丢失失2、图片片要放在在网页的的同一个个目录或或子目录录下3、把光光标定位位在需要要插入图图片的位位置，选选插入面面板上的的“图像像”按钮钮4、网页页、图片片文件名名只能是是英文或或数字不不能用中中文三、图象象与文字字的位置置关系在WWORDD排版中中，图像像的位置置可以任任意拖动动，而在在DW中中不行。网页中中的图片片只有独独立、左左对齐、右对齐齐三种状状态，不不能自由由摆放图图片的位位置。练习一：制作如如下网页页

27、，完成成后以“1.hhtm”保存。对齐图像像:使用用图像属属性检查查器设置置图像相相对于同同一段落落或行中中其他元元素的对对齐方式式。可以以将图像像与同一一行中的的文本、另一个个图像、插件或或其他元元素对齐齐。您还还可以使使用对齐齐按钮（左对齐齐、右对对齐、居居中对齐齐）设置置图像的的水平对对齐方式式。“默认值值”通常常指定基基线对齐齐。（根根据站点点访问者者的浏览览器的不不同，默默认值也也会有所所不同。）“基线和和底部”将文本本（或同同一段落落中的其其他元素素）的基基线与选选定对象象的底部部对齐。“顶端”将图像像的顶端端与当前前行中最最高项（图像或或文本）的顶端端对齐。“中间”将图像像的中部

28、部与当前前行的基基线对齐齐。“文本上上方”将将图像的的顶端与与文本行行中最高高字符的的顶端对对齐。“绝对中中间”将将图像的的中部与与当前行行中文本本的中部部对齐。“绝对对底部”将图像像的底部部与文本本行（这这包括字字母下部部，例如如在字母母 g 中）的的底部对对齐。“左对齐齐”将所所选图像像放置在在左边，文本在在图像的的右侧换换行。如如果左对对齐文本本在行上上处于对对象之前前，它通通常强制制左对齐齐对象换换到一个个新行。“右对对齐”将将图像放放置在右右边，文文本在对对象的左左侧换行行。如果果右对齐齐文本在在行上处处于对象象之前，它通常常强制右右对齐对对象换到到一个新新行。小技巧：图像必必须插入

29、入到文字字的最前前面，这这样图像像才能和和文字上上部对齐齐，如果果图像插插入到下下部则不不能实现现这种效效果。考考你：当你把把鼠标移移到右边边的小图图上，会会显示一一行文字字“Hii,你好好”，看看到了第三章 建立网网页链接接教学内容容：Dreaamweeaveer 88提供多多种创建建超链接接的方法法，可创创建到文文挡、图图像、多多媒体文文件或可可下载软软件的链链接，可可以创建建到文档档内任意意位置的的任何文文本或图图像的链链接等。教学重点点：内部链接接的创建建方法。外部链接接的创建建方法。锚点链接接的创建建方法。E-maail链链接的创创建方法法。教学难点点：锚点链接接的创建建方法。教学方

30、法法：讲演演法教学课时时：4课课时教学内 容与助助学过程程：3.1 编织网网站链接接足球球新闻3.1.1 案案例综述述 本本例以编编织网站站中的各各种超链链接为主主要目的的，介绍绍创建超超链接种种种方法法和技巧巧3.1.2 案案例分析析为实现网网页的跳跳转，将将创建：n 到网网站内页页面的超超链接内部部链接；n 到网网站外页页面的超超链接外部部链接；n 电子子邮件形形式的超超链接E-maiil链接接；n 到网网页某一一特定位位置的超超链接锚点点链接；n 以及及其他一一些链接接。3.1.3 实实现步骤骤一、准备备网页内内容步骤1选中站站点；步骤2将素材材文件夹夹中的相相关文档档复制到到站点文文件

31、夹下下。二、创建建超链接接1、创建建内部链链接网站内内部页面面之间创创建相互互链接关关系步骤1选中页页面中的的文字或或图像，在属性性面板中中单击“链接”文本框框右侧的的文件夹夹图标，以通过过浏览选选择一个个文件步骤2从“目目标”下下拉菜单单中，选选择文档档的打开开位置。n_bllankk :新新打开的的空窗口口n_paarennt：如如果是嵌嵌套的框框架，则则在父框框架中打打开。n_seelf：会在当当前网页页所在的的窗口或或框架中中打开。n_toop：会会在完整整的浏览览器窗口口中打开开。2、创建建外部链链接创建链链接到绝绝对地址址的外部部链接（1） 选选中文字字或图像像之后，直接在在属性面

32、面板的“链接”文本框框中输入入外部的的链接地地址，如如htttp:/wwww.fffirre.nnet（2） 然然后在“目标”下拉菜菜单中设设置这个个链接的的目标窗窗口。3、创建建Emmaill链接当浏览览者单击击电子邮邮件链接接时，可可即时打打开浏览览器默认认的电子子邮件程程序处理理程序。方法：（1） 选选中文本本和图像像（2） 插插入栏常用电子邮邮件链接接输入入邮件地地址（3） 或或在属性性面板的的链接栏栏中直接接输入 HYPERLINK mailto: maillto:邮件地地址4、锚点点链接是指同同一个页页面中的的不同位位置链接接。分为两步步：（1） 创创建命名名锚记，就是在在文档中中

33、设置位位置标记记，并给给该位置置一个名名称，以以便引用用。（2） 创创建到命命名锚记记的链接接5、创建建其他类类型的链链接（1）创创建下载载链接n 当被被链接的的文件是是exee文件或或zipp文件等等浏览器器不支持持的类型型时，这这些文件件会被下下载，这这就是网网上下载载的方法法。n 链接接到下载载文件的的方法，和链接接到网页页的方法法完全一一样。（2）、创建空空链接n 空链链接用来来激活页页面中的的对象或或文本。当文本本或对象象被激活活后，可可以为之之添加行行为。方法：选选中要制制作空链链接的对对象，在在链接文文本框中中直接输输入。n 在一一般站点点首页的的导航栏栏中的首首页链接接，就可可

34、以是一一个空链链接6、创建建跳转菜菜单跳转菜单单是文档档中的弹弹出式菜菜单，可可以创建建到可在在浏览器器中打开开的任何何文件类类型的链链接。方法：（1） 插插入栏表单跳转菜菜单（2） 在在“插入入跳转菜菜单”对对话框中中，单击击号添添加菜单单项（3） 在在“选择择时。转转到URRL”文文本框中中，输入入该文件件的路径径。7、创建建图像地地图图像地图图指已被被分为多多个区域域（热点点）的图图像。当当用户单单击某个个热点时时，会发发生某种种操作。方法：（1） 选选中图像像（2） 在在图像属属性面板板中，使使用热区区工具（矩形、椭圆、多边形形），在在图像上上划分热热区。（3） 为为绘制的的每一个个热

35、区设设置不同同的链接接地址和和替代文文字。3.2 超链接接概述3.2.1 超超链接的的类型n 内部部链接这种链链接的目目标端点点是本站站中的其其他文档档。利用用这种链链接，可可以跳转转到本站站点其他他的页面面上。n 外部部链接这种链链接的目目标端点点是本站站点之外外的站点点或文档档。利用用这种链链接，可可以跳转转到其他他的网站站上。3.2.1 超超链接的的类型n Emmaill链接单击这这种链接接，可以以启动电电子邮件件程序书书写邮件件，并发发送到指指定的地地址。n 锚点点链接这种链链接的目目标端点点是文档档中的命命名锚记记，利用用这种链链接，可可以跳转转到当前前文档中中的某一一指定位位置上，

36、也可以以跳转到到其他文文档中的的某一指指定位置置上。3.2.2 链链接路径径（1）绝绝对路径径：如果果在链接接中使用用完整的的URLL地址，这种链链接路径径就称作作绝对路路径。路路径同链链接的源源端点无无关。（2）相相对路径径：相对对路径可可以表述述源端点点同目标标端点之之间的相相互位置置，它同同源端点点的位置置密切相相关。（3）基基于目录录的路径径：所有有的路径径都是从从站点的的根目录录开始的的，它同同源端点点的位置置无关。通常用用一个斜斜线“/”表示示根目录录。3.2.3创创建超链链接（1） 在在文档窗窗口中选选中想作作为链接接的文本本或图片片（2） 在在属性面面板链接接一项的的空白处处填

37、入链链接的路路径，或或者单击击图标，在弹出出的【选选择文件件】对话话框中，选定要要链接的的文档及及采用哪哪种方式式表达路路径。（3） 链链接的对对象可以以是多样样的，如如图片文文件，电电子表格格，或者者某个网网站。 3.2.4 插插入导航航条导航条中中按钮图图像的状状态根据据浏览者者的鼠标标动作而而改变。方法： 11、将光光标放到到要插入入导航条条的位置置； 22、选择择插入|图像对对象|导导航条命命令 ； 33、或选选择插入入|常用用|图像像|导航航条命令令。3.3 实战演演练每周周星运第四章 表格处处理教学内容容：本章介绍绍了表格格的基本本操作及及应用表表格进行行版式设设计的方方法和步步骤

38、，较较详细地地介绍了了在标准准、扩展展、布局局三种视视图下表表格的应应用，从从而使网网页布局局能够得得心应手手。教学重点点：表格的基基本操作作应用表格格布局（标准视视图下）布局表格格在表格及及单元格格中输入入各种网网页元素素的方法法表格格式式化等操操作方法法。教学难点点：三种种布局模模式的应应用。教学方法法：讲演演法教学课时时：4课课时教学内 容与助助学过程程：4.1 创创建网站站相册初初识表格格4.1.1 案案例综述述使使用Drreammweaaverr 8中中提供的的【创建建网站相相册】命命令，自自动生成成足球明明星页pphotto.hhtm。从中使使读者初初步认识识表格的的基本操操作方法

39、法及其作作用。4.1.2 案案例分析析使使用【创创建网站站相册】命令创创建的PPhotto.hhtm页页是采用用表格布布局，将将图片的的缩略图图排列在在网页中中的。n 表格格的修改改和美化化n 表格格的插入入n 添加加或删除除行列n 拆分分合并单单元格等等基本操操作4.1.3 实实现步骤骤一、创建建网站像像册方法：1、将需需制作相相册的图图片放在在源图像像文件夹夹中，同同时建立立一个空空目标文文件夹，用来存存放系统统生成的的图片和和文件。2、执行行 “命命令|创创建网站站相册”命令3、在【创建网网站相册册】对话话框中输输入相应应的参数数，即可可。二、网站站相册的的修改方法： 选选择“页页面属性

40、性”，可可以进行行文字、背景、颜色，以及表表格的一一些修改改。三、相册册表格的的美化 选择“命令|格式化化表格”命令。4.2 表表格的基基本操作作4.2.1 插插入表格格【插入】【表表格】命命令，或或单击【插入】栏中的的【常用用】类型型中的【插入表表格】按按钮4.2.2选选定表格格和单元元格表格包括括行、列列、单元元格3个个组成部部分 。1、选定定整个表表格2、选定定行或列列3、选定定单元格格4.2.3调调整表格格的大小小1、选定定表格鼠标拖拖动 。2、调整整行和列列的宽度度鼠标放在在一列的的上面，出现向向下的箭箭头时，单击，就可以以选中一一列。在在属性面面板中可可以设置置所选列列的宽和和高。

41、4.2.4 设设置表格格和单元元格的属属性1. 设置置表格属属性2. 设置置单元格格属性4.2.5 添添加/删删除行列列1. 通过过表格【属性】面板增增加与删删除表格格的行和和列2. 通过过【修改改】菜单单完成增增加与删删除表格格的行和和列4.2.6单单元格的的合并和和拆分1、合并并单元格格按按Ctrrl，点点单元格格，选中中表格，在属性性面板中中点“合合并所选选单元格格，使用用跨度”。2、拆分分单元格格在在单元格格中单击击，选中中单元格格。点击击属性面面板中的的“拆分分单元格格为行或或列”，设置拆拆分方式式。4.2.7单单元格的的复制、粘贴、移动和和清除在设计计网页时时，可以以一次复复制、粘

42、粘贴、移移动和清清除一个个或多个个单元格格。操作作方法如如下：在网页编编辑窗口口中选中中要复制制的对象象 复制按Cttrl+C，或或【编辑辑】【复制】命令。 移动按Cttrl+X，或或【编辑辑】【剪切】命令令。 粘贴按Cttrl+V，或或【编辑辑】【粘贴】命令。 拖动按住CCtrll拖，则完成成复制操操作。直直接拖曳曳可完成成对象的的操作。 清除按Deelette，或或【编辑辑】【清除】命令。 4.2.8 表表格的嵌嵌套 嵌套表表是在表表格中的的一个表表格。在在一个单单元格中中，插入入一个表表格，就就是嵌套套表。 将光标标插入当当前表格格的某个个单元格格中，然然后可选选择【插插入】【表格格】命

43、令令，或单单击【插插入】栏栏的【常常用】类类型中的的【插入入表格】按钮4.3 网网页的页页面布局局4.3.1 网网页布局局类型n “国国”字型型n 拐角角型n 标题题正文型型n 左右右框架型型n 上下下框架型型n 综合合框架型型n 封面面型n Fllashh型n 变化化型4.3.2 关关于第一一屏 一般般来讲，在80006600的的屏幕显显示模式式(这也也是最常常用的)下，在在IE安安装后默默认的状状态(即即工具栏栏地址栏栏等没有有改变)下，IIE窗口口内能看看到的部部分为7778ppx4435ppx.4.3.3 有有关导航航栏的位位置 一般般来讲，导航栏栏要在“第一屏屏”能显显示出来来，但是

44、是有时第第一屏可可能会小小于上面面所说的的4355px，基于这这点考虑虑，那种种横向放放置的导导航栏要要优于纵纵向的导导航栏考考虑4.3.4 什什么样的的布局是是最好的的n 如果果内容非非常多，就要考考虑用“国字型型”或拐拐角型；n 如果果内容不不算太多多而一些些说明性性的东西西比较多多，则可可以考虑虑标题正正文型；n 那几几种框架架结构的的一个共共同特点点就是浏浏览方便便，速度度快，但但结构变变化不灵灵活；n 而如如果是一一个企业业网站想想展示一一下企业业形象或或个人主主页想展展示个人人风采，封面性性是首选选；n Fllashh型更灵灵活一些些，好的的Flaash大大大丰富富了网页页，但是是

45、它不能能表达过过多的文文字信息息。4.4 使使用表格格的其他他视图Dreaamweeaveer 88提供了了标准视视图、扩扩展视图图、布局局视图33种视图图模式。通常使使用的是是标准视视图，可可通过插插入栏的的“布局局”类别别，切换换到布局局视图或或扩展视视图。4.4.1 扩扩展视图图扩扩展视图图的主要要作用是是临时向向文档中中的所有有表格添添加单元元格的边边距和间间距，并并且增加加表格的的边框，这样可可以使编编辑操作作更加容容易 。4.4.2 布布局视图图在在“布局局视图”方式下下利用表表格进行行网页排排版设计计更为直直观方便便。通过过鼠标自自由拖拽拽就可绘绘制任意意的表格格布局，且可自自由

46、移动动。4.4.3 创创建布局局表格和和布局单单元格1、绘绘制布局局表格2、绘绘制布局局单元格格3、移移动布局局表格和和布局单单元格 4.4.4设设置布局局表格和和单元格格属性1、设设置布局局表格属属性2、设设置布局局单元格格的属性性4.5应用表表格布局局页面布布局案例例4.5.1 案案例综述述本例例使用表表格进行行页面布布局，从从中使读读者掌握握以下知知识要点点1 表表格在用用于页面面布局时时的属性性设置。2 表表格的嵌嵌套。3 表表格细线线的制作作。第五章 层的应应用教学内容容：本章介绍绍了关于于层的创创建、设设置及相相关使用用技巧，并通过过具体的的实例让让读者真真正掌握握层的运运用。了了

47、解层在在布局中中的优势势和劣势势，理解解利用层层的属性性可制作作多种动动态效果果。教学重点点：层的创建建、选择择、编辑辑、保存存等操作作方法层的属性性设置在层中输输入各种种网页元元素的方方法层及嵌套套层、层层的叠放放次序、层的可可见性等等内容。教学难点点：嵌套层的的创建方方法层的相关关属性的的设置教学方法法：讲演演法教学课时时：4课课时教学内容容与助学学过程：5.1 制作层层布局页页面“环环游世界界”5.1.1 实实例综述述通过过本例的的学习，读者可可充分体体会使用用层布局局页面的的随意性性。5.1.2 实实例分析析不论论文字还还是图片片都是采采用层来来进行定定位的，因此在在例中我我们逐步步介

48、绍n 如何何在页面面插入层层n 如何何通过控控制层的的Z轴参参数来设设置层之之间的重重叠关系系n 如何何精确定定位层等等操作方方法。5.1.3实实现步骤骤插入入层在在层中添添加内容容精确确定位层层，控制制大小设置层层之间的的叠放次次序。5.2 层层的基本本操作5.2.1 创创建层方法：1、插入入法 插入布局对对象层层2、拖放放法 拖层图图标到编编辑区3、绘制制法 单击层层图标后后，到编编辑区拖拖动鼠标标绘制。5.2.2 激激活和选选中层方法：单击层的的激活标标志，或或层内任任何地方方 将光标置置于该层层内，然然后单击击标标签。 单击层边边界。 在层面板板中单击击层。（shhiftt可选择择多个

49、层层）。 5.2.3 删删除层方法：n 当选选中一个个层后，按Deelette键或或单击【剪切】按钮，可删除除该层。n 也可可在层面面板中删删除该层层5.2.4调调整、移移动和对对齐层1、调整整层的大大小方法：1) 选中需需要调整整的层，此时在在层的边边框四周周出现88个黑色色活动块块，用鼠鼠标拖曳曳某个活活动块，即可调调整层的的大小。2) 选中需需要调整整的层，在层的的【属性性】面板板的【宽宽】和【高】，两个文文本框中中，输入入层的宽宽度和高高度和高高度尺寸寸，可精精确调整整该层的的尺寸。2、移动动层前提：n “防防止重叠叠”未被被勾选。方法：n 选定定层，出出现层激激活标志志，用鼠鼠标左键

50、键拖该标标志。n 选定定层，用用键盘方方向键移移动层。3、 对对齐层n 选定定多个层层，对齐齐的标准准是最后后一个选选择的层层，该层层控制点点的实心心点，而而其他为为空心点点。n 修改改对齐齐对齐齐下缘。5.3 层的属属性设置置5.3.1 设设置层的的属性层编号：层的名名称。 左和上：距页面面或父层层的左上上角相对对位置 宽和高：层的宽宽度和高高度。 Z轴：层层的重叠叠顺序。 可见性：层的初初始显示示状况（可见或或隐藏） 背景图像像、背景景颜色： 溢出：确确定当层层中内容容超出设设定大小小时要采采取的行行动。 剪辑：定定义层的的可见区区域，并并用于将将该范围围外的内内容裁剪剪掉。 5.3.2

51、层层面板的的使用选择【窗口】【其其他】【层】命令，或按FF2键，可打开开【层】面板 。选定某个个层 更改层名名 显示、隐隐藏层 改变层的的叠放次次序 创建和取取消嵌套套层 禁止层重重叠 5.4 层与表表格互换换5.4.1 将将层转换换为表格格操作步骤骤如下:（1） 选中中要转换换为层的的表格。（2） 选择择“修改改”|“转换表表格到层层”命令令，系统统将打开开“转换换表格为为层”对对话框（3） 选中中合适的的布局工工具复选选框后，单击【确定】按钮，表格就就可按要要求转换换为层。 5.4.2 表表格转换换为层n 问题题：不是是所有的的浏览器器都支持持层。n 解决决方法：使用层层创建网网页布局局，

52、然后后将层转转换为表表格。（1） 打开要要将层转转换为表表格的页页面。（2） 选择【修改】【转转换】【层到到表格】命令，系统将将打开【转换层层为表格格】对话话框.（3） 选择好好对话框框中的选选项后，单击【确定】按钮，层布局局的页面面就可转转换成表表格布局局的页面面5.5 实战战演练冷冷酷青春春第六章 框架教学内容容：本章主要要讲了框框架的使使用，包包括创建建框架、命名框框架、设设置框架架以及保保存框架架等操作作。在使使用框架架的过程程中一定定要明白白框架的的基本结结构。框框架在网网页的设设计中可可用来制制作电子子图书。使用框框架的一一个难点点框架集集和框架架之间的的关系，通常在在一个框框架中

53、所所有的框框架都是是通过一一个框架架集文档档来调用用各个框框架的。另一个个难点就就是框架架属性的的设置。这些都都需要在在实际的的操作过过程中不不断地去去思考和和摸索才才能够熟熟练掌握握。教学重点点： 创建框架架网页框架网页页的选择择设置框架架和框架架集的属属性编辑框架架创建框架架间页面面的超链链接教学难点点： 设置框架架和框架架集的属属性创建框架架间页面面的超链链接教学方法法：讲演演法教学课时时：4课课时教学内 容与助助学过程程：6.1 应用框框架制作作电子书书6.1.1 案案例综述述本例例将制作作一个HHTMLL在线教教程的页页面，页页面分三三个区域域，在顶顶部放置置标题栏栏，左侧侧框架放放

54、置导航航栏（即即目录），单击击链接，在右侧侧框架中中打开链链接内容容 一个框框架横放放在顶部部：Weeb站点点的徽标标和标题题 一个较较窄的框框架位于于左侧：导航条条 一个大大框架占占据页面面的其余余部分：主要内内容 框架：是指浏浏览器窗窗口中的的一个区区域。 框架集集：定义义了一组组框架的的布局和和属性，包括框框架的数数目、框框架的大大小和位位置以及及在每个个框架中中初始显显示页面面的URRL。6.1.2 案案例分析析n 理解解框架集集、框架架的概念念。n 创建建框架集集n 制作作框架、链接页页面n 创建建超链接接n 保存存框架集集6.1.3 实实现步骤骤1. 创创建框架架集 。2. 制制作

55、框架架页3. 创创建导航航栏超链链接4. 保保存框架架集6.2 框架的的基本操操作插入预定定义的框框架集自行创建建 创建框架架集的方方法：6.2.1 创创建框架架和框架架集选择预定定义的框框架集 创建包含含当前文文档的框框架集1) 打开开一个文文档2) 插入入栏|布布局|框框架3) 框架架集图标标的蓝色色区域表表示当前前文档创建新的的空预定定义框架架集4) 文件件|新建建5) “新新建文档档”对话话框|框框架集6) 选择择一个所所需框架架集设计自己己的框架架集 创建框架架集1) 新建建一个空空白HTTML文文档2) 修改改|框架架集|拆拆分左(右、上上、下要要)框架架3) 在光光标停留留在某个

56、个框架中中，可继继续拆分分注：利用用“查看看|可视视化助理理|框架架边框”使边框框可见删除框架架集1) 选择择要删除除框架的的边框2) 将边边框拖到到上一级级框架的的边框上上调整框架架大小3) 拖动动边框6.2.2 选选择框架架和框架架集1) 选择择框架n 在“文档”窗口中中：按AAlt+单击框框架内部部n 在“框架”面板中中：单击击某个框框架区域域2） 选选择框架架集n 在“文档”窗口中中：单击击内部框框架边框框n 在“框架”面板中中：单击击某一内内部框架架边框6.2.3 框框架和框框架集属属性设置置设置框架架的属性性 n 框架架名称：是链接接的Taargeet属性性或脚本本在引用用该框架架

57、时所用用的名称称。n 源文文件：指指定在框框架中显显示的源源文件n 滚动动：指定定在框架架中是否否显示滚滚动条。n 不能能调整大大小：让让访问者者无法通通过拖动动框架边边框在浏浏览器中中调整框框架大小小n 边框框：在浏浏览器中中查看框框架时显显示或隐隐藏当前前框架的的边框。n 边框框颜色：为所有有框架的的边框设设置边框框颜色。n 边距距宽度：以像素素为单位位设置左左边距和和右边距距的宽度度n 边距距高度：以像素素为单位位设置上上边距和和下边距距的高度度2. 设设置框架架集的属属性n 边框框：确定定在浏览览器中查查看文档档时在框框架周围围是否应应显示边边框。n 边框框宽度：指定框框架集中中所有边

58、边框的宽宽度n 边框框颜色：设置边边框的颜颜色n 行列列选定范范围：单单位有“像素”、“百百分比”、“相相对”6.2.4 保保存框架架和框架架集文档档1保存存框架集集文档操作步骤骤：1) 选择择框架集集2) 采取取下面的的方法之之一：n 选择择【文件件】|【保存框框架】命命令，保保存框架架集.n 选择择【文件件】|【框架集集另存为为】命令令，将框框架集另另存为新新文件。2保存存框架文文档操作步骤骤：（1）光光标放在在目标框框架内 。（2） 采取下下面的方方法之一一：n 选择择【文件件】|【保存框框架】命命令，保保存框架架.n 选择择【文件件】|【框架另另存为】命令，将框架架另存为为新文件件。n

59、 如果果选择【文件】【保保存全部部】命令令，将保保存与当当前框架架关联的的所有文文档。6.2.5 框框架中的的链接在一个框框架中使使用链接接以打开开另一个个框架中中的文档档，必须须设置链链接目标标。设置目标标框架的的基本操操作方法法如下：1. 在在“设计计”视图图中，选选择文本本或对象象。2. 在在属性检检查器的的“链接接”字段段中，选选择要链链接到的的文件3. 在在属性检检查器的的“目标标”弹出出式菜单单中，选选择链接接的文档档应在其其中显示示的框架架。注意：n 链接接到站点点外的某某一页面面时，正正确的做做法是在在属性检检查器的的“目标标”下拉拉列表中中选择“topp”或“blaank”两

60、个选选项。6.2.6 编编辑无框框架内容容为不支持持框架的的浏览器器提供显显示内容容的操作作方法：1. 选选择“修修改”|框架集集|编辑辑无框架架内容。2. DDreaamweeaveer 88将清除除“设计计”视图图中的内内容，并并且在“设计”视图顶顶部显示示“无框框架内容容”字样样3. 在在“文档档”窗口口中，像像处理普普通文档档一样输输入或插插入内容容。如输输入文字字“你目目前使用用的浏览览器不支支持框架架显示，请升级级更高的的版本”。4. 再再次选择择选择“修改”|框架架集|编编辑无框框架内容容命令，以返回回到框架架集文档档的普通通视图。6.3 实战演演练我的的家园 第七章 插入多多媒