网页制作教程指导.doc

第一章 网页设计基础教学目的： 本章将带领用户认识Dreamweaver MX，了解其新增功能。在开始学习该软件之前，了解一下Dreamweaver MX的工作界面的一些简单设置。通过本章的学习，用户能熟悉Dreamweaver MX的工作界面，并能自行设置具有独特的个性化的工作环境。理解DW站点的作用，并掌握建立站点的方法及站点维护的方法。教学重点： 1、认识Dreamweaver MX。 2、新增功能。 3、Dreamweaver MX主窗口。 4、自定义工作环境。 5、利用Dreamweaver建立站点的方法教学难点：1、认识Dreamweaver MX。 2、新增功能。 3、自定义工作环境。教学方法：讲演法教学课时：2课时教学内容与教学过程：一、 介绍网页制作这门课程1学习这门课程的目的： 让学生掌握HTML语言、以及利用相关网页制作工具制作网页的基本方法与技能。学生通过这门课程的学习，能够具备综合运用专业软件进行小型网站开发和静态网页页面设计的能力，同时积累一定的实践经验，为今后从事相应的网站设计制作工作打下良好基础。2这门课程的教学内容： 在制作软件上：以网页制作软件DreamWeaver MX为主干进行网页制作教学，同时选择了Flash MX版本来制作网页中的动画素材，选择了图形图像工具Photoshop 7.0版本软件来处理和制作网页中的图片。 教学内容安排上按照学生学习网页的渐进规律划以及学校制订的计划主要学习第1、2、3、5、6、9章，主要包括网页制作的基础知识、Dreamweaver MX软件的使用，初学者利用现有的素材设计制作出一个简单的网页；利用Photoshop7和 Flash MX软件来美化网页，以及网页布局和用色方面的美术知识，如何设计网页的版面和结构，还要能对供给的素材按照网站的特点进行适当的美化处理；还能掌握中小型网站的建立方法。 3这门课程的教学和学习方法： 教学上以一个个案例为基础，采用项目教学的方法，由浅入深的介绍网页制作的各个知识点；教学中以学生会操作为目的，重视学生动手能力和自学能力的培养 同学们学习时除了要掌握相应的操作技能以外，更要重视操作技能的使用，要努力完成每章教学案例的制作以及课后素材案例。在不断的练习过程中熟悉和升华所学的操作技能。同时，要学会学习，即要学会与老师或同学之间技术心得的交流，要学会能自主的依靠其他资源（网络、报纸杂志等）来扩展所学的知识体系。课前思考：1、Dreamweaver软件是干什么用的？2、试用一下Dreamweaver，你觉得这个软件在界面上更象Word还是Photoshop，为什么？3、试用一下Dreamweaver，按默认格式保存，文件的扩展名是什么？4、双击网页文件，会自动打开Dreamweaver软件吗？这点上与Word软件相同吗？1.1 Dreamweaver的基本概念1、了解Dreamweaver与IE有什么区别？ Dreamweaver是制作网页的工具，用它可以生成.htm或.html文件，而IE是浏览网页的工具，用IE只能看网页，而不能改网页，修改网页还是需要网页制作工具。2、做网页只能使用Dreamweaver一种工具吗？ 常用的网页制作软件有Dreamweaver和FrontPage。Dreamweaver由美国Macromedia公司开发，虽然初学者感到比较难学，但它的功能更强大，生成的网页代码质量好，是当今最流行的网页制作工具，适合专业网页设计人员使用，近年来它还获得过不少大奖呢。Frontpage是微软公司开发的Office办公软件中的一部分，比较容易上手，但功能不太强大，我们只在需要时（如向网页中加入微软格式的视频），才会使用FrontPage。3、Dreamweaver最新版是多少？ Dreamweaver从2.0、3.0、4.0、MX到现在最新的MX2004版，平均每过一年就出一个新版。可见计算机是多么的富有活力。今年常用的是MX版，建议大家在家里的电脑上也将这个版本，以便与学校的相同。对于软件，我并不认为版本越新越好，它们的基本功能还是相同的，一般版本越高，对计算机的要求也越高，如果计算机配置不高，初学时还是找个低版本比较好，当然所装的软件必须与书本上的相同，这也是学习其它软件的基本要求。4、Dreamweaver与Firework、Flash有何关系？ 它们都是Macromedia公司的软件，Dreamweaver是网页制作工具，Firework是图形处理工具，与photoshop相似，一般用于网页图形的制作，Flash是动画制作工具，在制作好的网页时，一般先用Firework和Flash先制作好网页中要用到的图形和动画素材，再用Dreamweaver把这些素材做成一张网页，只会Dreamweaver，不会图形处理和动画制作，是做不出好的网页的。有人把这三个软件称作网页设计“三剑客”。1.2认识DreamWeaver1.DreamWeaver的作用和特色2.DreamWeaver功能界面的分解3.DreamWeaver工作流程4. DreamWeaver 的版本、安装、打开、保存等操作演示：练习制作第一张网页作业一在主窗口中输入以下文字，并按以下格式排版，最后把文件以“学号姓名.htm”为名保存在桌面上。注意难点：设置字体、水平线、二个全角空格、回车会自动空一行，Shift+回车就不会空行了。1.3 创建本地站点引入：为什么要建站点？在正式开始制作网页之前，最好先定义一个新网站，这是因为：更好地利用站点窗口对站点文件进行管理。 尽可能的减少一些错误的出现，如路径出错，链接出错（特别是新手），当熟练掌握了DREAMWEAVER的使用后，并且只需制作单个网页时候可以省去这一步； 还值得说的是，新手做网页，就只知道做网页，不懂得条理性、结构性，一个文件放这里，另一个文件放那里，或者所有文件都放在同一文件夹内，这样显得很乱。 所以，行家的做法是：（1先建立一个文件夹用于存放网站的所有文件，再在文件内建立几个文件夹，将文件分类，如图片文件放在image文件夹内，HTML文件放在HTML文件夹内（2）当然，如果站点比较大，文件比较多，可以先按栏目分类，在栏目里再分类。（3）还有文件的命名也是非常重要的，新手通常不注意这些，随便乱起些名字，这样过些时候自己也搞不懂是什么了（特别是文件比较多的时候），我们要做到一看文件的名字就知道是什么内容的文件。（4）行家的做法是：用英文或者拼音给文件命名（推荐英文），不要使用中文的名字（因为有的机器对中文支持不太好，有可能出现链接的错误，你自己以为正确的东西在别人看来有可能是错的）。1、什么是站点？站点是存放一组网页的一个存储地方，一般是一个磁盘目录，在该目录中存放该网站的所有网页及有关的图片、FLASH动画、CSS样式文件等。建立站点时，我们一般在自已的电脑上建一个文件夹，然后把制作的所有网页及图片放在此文件夹中，最后把这个目录上传到WEB服务器上，以供英特网上的所有用户浏览。问：网页？网站答：不等问：网页？主页答：不等主页通常主页命名为index.htm,index.html,default.htm,default.html2、站点的典型文件结构站点的典型文件结构3、如何建立一个空站点准备工作建文件夹在硬盘上某一个位置建一个总的文件夹My web pic music flash movie 例：在D盘上建立自己帐号为名的文件夹，把这个文件夹定义为站点，站点名的“我的个人网站”操作步骤：第一步：在D盘上建立文件夹第二步：在DW软件中，选择菜单“站点-新建站点”，可以按向导一步一步操作，但我建议大家直接选“高级”卡片第三步：在“本地信息”中，填入“站点名称”，把“本地根文件夹”指定为该目录4、如何把一个已有目录定义为一个站点例：首先单击下载网站，把网站包下载到D盘，并解压缩，在D盘上会自动生成一个文件夹，按上面所讲的步骤，把该目录定义为一个站点，站点名为“祖国腾飞”5、使用站点管理器定义完站点后，就可以使用站点管理器来管理站点了。显示站点面板：单击菜单“窗口-站点”。我们可以在站点管理器中通过右击“新建文件夹”、“新建文件”、“文件重命名”、“删除文件”，也可以通过拖动，把文件移动到其它文件夹。第二章 网页的基本操作教学目的：使学生了解编辑HTML文档的各种具体操作，包括如何为页面添加文字，图片。教学重点：1、编辑文本的各种方法2、在网页中插入图片的方法教学难点：1、编辑文本的各种方法2、在网页中插入图片的方法教学方法：讲演法教学课时：4课时教学过程：2.1文本操作及修饰一、特殊字符的输入1、输入 等特殊英文字符单击“插入”工具栏上的“字符”面板。2、输入等中文符号采用输入法中的软键盘3、输入空格（推荐使用全角空格）单击“插入”菜单-“特殊符号”-“不换行空格”按“Ctrl+Shift+Space”组合键单击“插入”工具栏上的“字符”面板上的“不换行空格”按钮。把中文输入法切换到全角模式，输入全角空格4、插入日期和时间。单击“插入”工具栏上的“常用”面板上的“日期”按钮。练习一：输入以下内容，以“1.htm”保存在桌面上。特殊符号： 中文符号：现在时间：2006-02-22二、列表的制作列表分为无序列表（项目列表）和有序列表（编号列表）；各个列表项之间没有顺序级别之分时选无序列表，否则选有序列表 。制作方法：第一步：先输入各个项目，每个项目成为一段（一个项目输入完成后，要按回车键，不能使用SHIFT回车）第二步：选中要转换为项目列表的所有段落第三步：单击属性面板上的项目列表或编号列表按钮第四步：如果要实现多级(嵌套)的项目列表，可单击“属性”面板上的“缩进”命令练习二： 电脑专业 o 网络技术 1. 网络1班 2. 网络2班 o 信息技术 1. 信息1班 2. 信息2班 o 电脑维护 美术专业 工艺绘画 广告设计 操作提示：第一步：输入“电脑专业”等11行，每行按回车，不能用SHIFT+回车第二步：全部选中，单击“属性”面板中的无序列表按钮第三步：选中“网络技术电脑维护”7个段落，选“属性”面板中的缩进按钮第四步：同样方法让“网络1班”等班级缩进第五步：选中“网络1班、网络2班”，单击“属性”面板中的有序列表按钮，使其变为有序列表有时设置好项目符号后，再打进去的字也变成项目符号了，解决这个问题的方法是，在设置项目符号前，先把后面的字输入几字，再去设置项目符号。选做练习： 飘雨的季节 困惑的心情 羞涩的蓓蕾 年轻的你我 蓝色的小屋 i. 飘雨的季节 ii. 困惑的心情 iii. 羞涩的蓓蕾 iv. 年轻的你我 v. 蓝色的小屋 a. 飘雨的季节 b. 困惑的心情 c. 羞涩的蓓蕾 d. 年轻的你我 e. 蓝色的小屋 5. 飘雨的季节 6. 困惑的心情 7. 羞涩的蓓蕾 8. 年轻的你我 9. 蓝色的小屋 三、样式的使用(一)样式的作用：避免重复操作，提高操作效率；统一网页的风格(二)HTML样式HTML样式与Word中的格式刷功能相似。如果网页中多个地方需要设置“红色、黑体、5字号”等三个属性，如果一个一个去设置效率不高，我们可以先定义一个“HTML样式”为包含“红色、黑体、5字号”等三个属性，以后到需要设置这三个属性的地方应用一下这个HTML样式即可，所以使用“HTML样式”可以提高工作效率。1、建立HTML样式第一步：在窗口菜单中打开“HTML样式”面板（属于设计面板组）第二步：单击面板下方的“新建样式”按钮（1）输入名称（2）指定应用范围（3）指定应用时的效果（4）设置属性2、应用HTML样式选中文字，单击“HTML样式”面板中定义的样式即可3、清除HTML样式选中先设置HTML样式的文字，单击面板上的“清除所选样式”或“清除段落样式”4、修改HTML样式双击相应的样式名5、删除HTML样式选择要删除的样式，单击“HTML样式”面板中的删除按钮练习三：。定义一个HTML样式，名称为“red-hei-5”，属性为“红色、黑体、5字号”，任意输入一段文字，把这个HTML样式，多次应用到网页中。(三)CSS样式（层叠样式表）CSS是干什么用的？你还记得在网页中最大字号是多少吗？对了是7号，再大就不行了，用CSS样式，你可以让一个字占满一个屏幕(如果你喜欢这样做)。用CSS样式还能设置文字的上标、下标、下划线、文字背景等。CSS的功能可强大了!不会CSS，等于没学过网页制作。HTML样式与CSS样式的区别？同样都是样式，但功能有很大的不同，HTML样式的功能只是把原来网页设置的几个属性合并为一个名称，起到方便设置的目的，但并不能增加其它功能，而CSS样式只对原网页设置的扩充，许多原来不能设的属性通过CSS样式可以设了。1、建立CSS样式第一步：打开CSS样式面板第二步：单击面板下方的“新建CSS样式”按钮（1）指定CSS样式的名称(最好字母开头)，（2）“类型”选“创建自定义样式”(其它二种以后介绍)，（3）“定义在”选“仅对该文档”，单击“确定”（4）设置CSS样式（CSS样式功能非常多，首先要求掌握的是“类型”和“背景”二张卡片的内容。）2、应用CSS样式选中文字，然后在面板上单击相应的样式名3、清除CSS样式选中先设置CSS样式的文字，单击面板上的“无CSS样式”4、修改CSS样式5、删除CSS样式2.2 在网页中插入图象一、网页图像的常用格式1、GIF：支持256色，可以做成逐帧动画，可以设置透明背景，一般用于网页中的小图标，如 2、JPG：支持百万级真彩，一般用于网页中的照片，如3、PNG：有GIF、JPG的所有优点，是网页图片发展的方向，但图片文件大小稍大。如DW中也能插入FLASH动画、声音文件、影视文件等，这些内容不属本章内容，但插入这些文件的方法与插入图像相似，有兴趣的同学请自行摸索。DW只支持以上三种格式的图片，其它如BMP格式是也可以在IE浏览器中被显示，但在DW中无法显示，由于BMP文件体积很大，在网页中一般不推荐。小知识：图像有分辨率这个技术指标，由于网页图片一般用于在屏幕上显示，而显示屏的分辨率为每英寸72象素，所以放到网页去的图片分辨率不用很高。如果用数码像机拍照片，选用最低的640X480分辨率即可，千万不用把高分辨率的数码照片直接做到网页中，那些会影响打开网页的速度，而且浪费存储空间。补充知识：如何保存网页中的图片在IE浏览器中右击该图片，选“图片另存为”即可。二、在网页中插入图片1、插入图片前先把网页保存一下，以免图片丢失2、图片要放在网页的同一个目录或子目录下3、把光标定位在需要插入图片的位置，选插入面板上的“图像”按钮4、网页、图片文件名只能是英文或数字不能用中文三、图象与文字的位置关系在WORD排版中，图像的位置可以任意拖动，而在DW中不行。网页中的图片只有独立、左对齐、右对齐三种状态，不能自由摆放图片的位置。练习一：制作如下网页，完成后以“1.htm”保存。对齐图像:使用图像属性检查器设置图像相对于同一段落或行中其他元素的对齐方式。可以将图像与同一行中的文本、另一个图像、插件或其他元素对齐。您还可以使用对齐按钮（左对齐、右对齐、居中对齐）设置图像的水平对齐方式。“默认值”通常指定基线对齐。（根据站点访问者的浏览器的不同，默认值也会有所不同。）“基线和底部”将文本（或同一段落中的其他元素）的基线与选定对象的底部对齐。“顶端”将图像的顶端与当前行中最高项（图像或文本）的顶端对齐。“中间”将图像的中部与当前行的基线对齐。“文本上方”将图像的顶端与文本行中最高字符的顶端对齐。“绝对中间”将图像的中部与当前行中文本的中部对齐。“绝对底部”将图像的底部与文本行（这包括字母下部，例如在字母 g 中）的底部对齐。“左对齐”将所选图像放置在左边，文本在图像的右侧换行。如果左对齐文本在行上处于对象之前，它通常强制左对齐对象换到一个新行。“右对齐”将图像放置在右边，文本在对象的左侧换行。如果右对齐文本在行上处于对象之前，它通常强制右对齐对象换到一个新行。小技巧：图像必须插入到文字的最前面，这样图像才能和文字上部对齐，如果图像插入到下部则不能实现这种效果。考考你：当你把鼠标移到右边的小图上，会显示一行文字“Hi,你好”，看到了第三章 建立网页链接教学内容：Dreamweaver 8提供多种创建超链接的方法，可创建到文挡、图像、多媒体文件或可下载软件的链接，可以创建到文档内任意位置的任何文本或图像的链接等。教学重点：内部链接的创建方法。外部链接的创建方法。锚点链接的创建方法。E-mail链接的创建方法。教学难点：锚点链接的创建方法。教学方法：讲演法教学课时：4课时教学内 容与助学过程：3.1 编织网站链接足球新闻3.1.1 案例综述 本例以编织网站中的各种超链接为主要目的，介绍创建超链接种种方法和技巧3.1.2 案例分析为实现网页的跳转，将创建：n 到网站内页面的超链接内部链接；n 到网站外页面的超链接外部链接；n 电子邮件形式的超链接E-mail链接；n 到网页某一特定位置的超链接锚点链接；n 以及其他一些链接。3.1.3 实现步骤一、准备网页内容步骤1选中站点；步骤2将素材文件夹中的相关文档复制到站点文件夹下。二、创建超链接1、创建内部链接网站内部页面之间创建相互链接关系步骤1选中页面中的文字或图像，在属性面板中单击“链接”文本框右侧的文件夹图标，以通过浏览选择一个文件步骤2从“目标”下拉菜单中，选择文档的打开位置。n_blank :新打开的空窗口n_parent：如果是嵌套的框架，则在父框架中打开。n_self：会在当前网页所在的窗口或框架中打开。n_top：会在完整的浏览器窗口中打开。2、创建外部链接创建链接到绝对地址的外部链接（1） 选中文字或图像之后，直接在属性面板的“链接”文本框中输入外部的链接地址，如（2） 然后在“目标”下拉菜单中设置这个链接的目标窗口。3、创建Email链接当浏览者单击电子邮件链接时，可即时打开浏览器默认的电子邮件程序处理程序。方法：（1） 选中文本和图像（2） 插入栏常用电子邮件链接输入邮件地址（3） 或在属性面板的链接栏中直接输入mailto:邮件地址4、锚点链接是指同一个页面中的不同位置链接。分为两步：（1） 创建命名锚记，就是在文档中设置位置标记，并给该位置一个名称，以便引用。（2） 创建到命名锚记的链接5、创建其他类型的链接（1）创建下载链接n 当被链接的文件是exe文件或zip文件等浏览器不支持的类型时，这些文件会被下载，这就是网上下载的方法。n 链接到下载文件的方法，和链接到网页的方法完全一样。（2）、创建空链接n 空链接用来激活页面中的对象或文本。当文本或对象被激活后，可以为之添加行为。方法：选中要制作空链接的对象，在链接文本框中直接输入。n 在一般站点首页的导航栏中的首页链接，就可以是一个空链接6、创建跳转菜单跳转菜单是文档中的弹出式菜单，可以创建到可在浏览器中打开的任何文件类型的链接。方法：（1） 插入栏表单跳转菜单（2） 在“插入跳转菜单”对话框中，单击号添加菜单项（3） 在“选择时。转到URL”文本框中，输入该文件的路径。7、创建图像地图图像地图指已被分为多个区域（热点）的图像。当用户单击某个热点时，会发生某种操作。方法：（1） 选中图像（2） 在图像属性面板中，使用热区工具（矩形、椭圆、多边形），在图像上划分热区。（3） 为绘制的每一个热区设置不同的链接地址和替代文字。3.2 超链接概述3.2.1 超链接的类型n 内部链接这种链接的目标端点是本站中的其他文档。利用这种链接，可以跳转到本站点其他的页面上。n 外部链接这种链接的目标端点是本站点之外的站点或文档。利用这种链接，可以跳转到其他的网站上。3.2.1 超链接的类型n Email链接单击这种链接，可以启动电子邮件程序书写邮件，并发送到指定的地址。n 锚点链接这种链接的目标端点是文档中的命名锚记，利用这种链接，可以跳转到当前文档中的某一指定位置上，也可以跳转到其他文档中的某一指定位置上。3.2.2 链接路径（1）绝对路径：如果在链接中使用完整的URL地址，这种链接路径就称作绝对路径。路径同链接的源端点无关。（2）相对路径：相对路径可以表述源端点同目标端点之间的相互位置，它同源端点的位置密切相关。（3）基于目录的路径：所有的路径都是从站点的根目录开始的，它同源端点的位置无关。通常用一个斜线“/”表示根目录。3.2.3创建超链接（1） 在文档窗口中选中想作为链接的文本或图片（2） 在属性面板链接一项的空白处填入链接的路径，或者单击图标，在弹出的【选择文件】对话框中，选定要链接的文档及采用哪种方式表达路径。（3） 链接的对象可以是多样的，如图片文件，电子表格，或者某个网站。 3.2.4 插入导航条导航条中按钮图像的状态根据浏览者的鼠标动作而改变。方法： 1、将光标放到要插入导航条的位置； 2、选择插入|图像对象|导航条命令 ； 3、或选择插入|常用|图像|导航条命令。3.3 实战演练每周星运第四章 表格处理教学内容：本章介绍了表格的基本操作及应用表格进行版式设计的方法和步骤，较详细地介绍了在标准、扩展、布局三种视图下表格的应用，从而使网页布局能够得心应手。教学重点：表格的基本操作应用表格布局（标准视图下）布局表格在表格及单元格中输入各种网页元素的方法表格格式化等操作方法。教学难点：三种布局模式的应用。教学方法：讲演法教学课时：4课时教学内 容与助学过程：4.1 创建网站相册初识表格4.1.1 案例综述使用Dreamweaver 8中提供的【创建网站相册】命令，自动生成足球明星页photo.htm。从中使读者初步认识表格的基本操作方法及其作用。4.1.2 案例分析使用【创建网站相册】命令创建的Photo.htm页是采用表格布局，将图片的缩略图排列在网页中的。n 表格的修改和美化n 表格的插入n 添加或删除行列n 拆分合并单元格等基本操作4.1.3 实现步骤一、创建网站像册方法：1、将需制作相册的图片放在源图像文件夹中，同时建立一个空目标文件夹，用来存放系统生成的图片和文件。2、执行 “命令|创建网站相册”命令3、在【创建网站相册】对话框中输入相应的参数，即可。二、网站相册的修改方法： 选择“页面属性”，可以进行文字、背景、颜色，以及表格的一些修改。三、相册表格的美化 选择“命令|格式化表格”命令。4.2 表格的基本操作4.2.1 插入表格【插入】【表格】命令，或单击【插入】栏中的【常用】类型中的【插入表格】按钮4.2.2选定表格和单元格表格包括行、列、单元格3个组成部分 。1、选定整个表格2、选定行或列3、选定单元格4.2.3调整表格的大小1、选定表格鼠标拖动 。2、调整行和列的宽度鼠标放在一列的上面，出现向下的箭头时，单击，就可以选中一列。在属性面板中可以设置所选列的宽和高。4.2.4 设置表格和单元格的属性1. 设置表格属性2. 设置单元格属性4.2.5 添加/删除行列1. 通过表格【属性】面板增加与删除表格的行和列2. 通过【修改】菜单完成增加与删除表格的行和列4.2.6单元格的合并和拆分1、合并单元格按Ctrl，点单元格，选中表格，在属性面板中点“合并所选单元格，使用跨度”。2、拆分单元格在单元格中单击，选中单元格。点击属性面板中的“拆分单元格为行或列”，设置拆分方式。4.2.7单元格的复制、粘贴、移动和清除在设计网页时，可以一次复制、粘贴、移动和清除一个或多个单元格。操作方法如下：1. 在网页编辑窗口中选中要复制的对象 2. 复制按Ctrl+C，或【编辑】【复制】命令。 3. 移动按Ctrl+X，或【编辑】【剪切】命令。 4. 粘贴按Ctrl+V，或【编辑】【粘贴】命令。 5. 拖动按住Ctrl拖，则完成复制操作。直接拖曳可完成对象的操作。 6. 清除按Delete，或【编辑】【清除】命令。 4.2.8 表格的嵌套 嵌套表是在表格中的一个表格。在一个单元格中，插入一个表格，就是嵌套表。 将光标插入当前表格的某个单元格中，然后可选择【插入】【表格】命令，或单击【插入】栏的【常用】类型中的【插入表格】按钮4.3 网页的页面布局4.3.1 网页布局类型n “国”字型n 拐角型n 标题正文型n 左右框架型n 上下框架型n 综合框架型n 封面型n Flash型n 变化型4.3.2 关于第一屏 一般来讲，在800600的屏幕显示模式(这也是最常用的)下，在IE安装后默认的状态(即工具栏地址栏等没有改变)下，IE窗口内能看到的部分为778px435px.4.3.3 有关导航栏的位置 一般来讲，导航栏要在“第一屏”能显示出来，但是有时第一屏可能会小于上面所说的435px，基于这点考虑，那种横向放置的导航栏要优于纵向的导航栏考虑4.3.4 什么样的布局是最好的n 如果内容非常多，就要考虑用“国字型”或拐角型；n 如果内容不算太多而一些说明性的东西比较多，则可以考虑标题正文型；n 那几种框架结构的一个共同特点就是浏览方便，速度快，但结构变化不灵活；n 而如果是一个企业网站想展示一下企业形象或个人主页想展示个人风采，封面性是首选；n Flash型更灵活一些，好的Flash大大丰富了网页，但是它不能表达过多的文字信息。4.4 使用表格的其他视图Dreamweaver 8提供了标准视图、扩展视图、布局视图3种视图模式。通常使用的是标准视图，可通过插入栏的“布局”类别，切换到布局视图或扩展视图。4.4.1 扩展视图扩展视图的主要作用是临时向文档中的所有表格添加单元格的边距和间距，并且增加表格的边框，这样可以使编辑操作更加容易 。4.4.2 布局视图在“布局视图”方式下利用表格进行网页排版设计更为直观方便。通过鼠标自由拖拽就可绘制任意的表格布局，且可自由移动。4.4.3 创建布局表格和布局单元格1、绘制布局表格2、绘制布局单元格3、移动布局表格和布局单元格 4.4.4设置布局表格和单元格属性1、设置布局表格属性2、设置布局单元格的属性4.5应用表格布局页面布局案例4.5.1 案例综述本例使用表格进行页面布局，从中使读者掌握以下知识要点1 表格在用于页面布局时的属性设置。2 表格的嵌套。3 表格细线的制作。第五章 层的应用教学内容：本章介绍了关于层的创建、设置及相关使用技巧，并通过具体的实例让读者真正掌握层的运用。了解层在布局中的优势和劣势，理解利用层的属性可制作多种动态效果。教学重点：层的创建、选择、编辑、保存等操作方法层的属性设置在层中输入各种网页元素的方法层及嵌套层、层的叠放次序、层的可见性等内容。教学难点：嵌套层的创建方法层的相关属性的设置教学方法：讲演法教学课时：4课时教学内容与助学过程：5.1 制作层布局页面“环游世界”5.1.1 实例综述通过本例的学习，读者可充分体会使用层布局页面的随意性。5.1.2 实例分析不论文字还是图片都是采用层来进行定位的，因此在例中我们逐步介绍n 如何在页面插入层n 如何通过控制层的Z轴参数来设置层之间的重叠关系n 如何精确定位层等操作方法。5.1.3实现步骤插入层在层中添加内容精确定位层，控制大小设置层之间的叠放次序。5.2 层的基本操作5.2.1 创建层方法：1、插入法 插入布局对象层2、拖放法 拖层图标到编辑区3、绘制法 单击层图标后，到编辑区拖动鼠标绘制。5.2.2 激活和选中层方法：1. 单击层的激活标志，或层内任何地方 2. 将光标置于该层内，然后单击标签。 3. 单击层边界。 4. 在层面板中单击层。（shift可选择多个层）。 5.2.3 删除层方法：n 当选中一个层后，按Delete键或单击【剪切】按钮，可删除该层。n 也可在层面板中删除该层5.2.4调整、移动和对齐层1、调整层的大小方法：1) 选中需要调整的层，此时在层的边框四周出现8个黑色活动块，用鼠标拖曳某个活动块，即可调整层的大小。2) 选中需要调整的层，在层的【属性】面板的【宽】和【高】，两个文本框中，输入层的宽度和高度和高度尺寸，可精确调整该层的尺寸。2、移动层前提：n “防止重叠”未被勾选。方法：n 选定层，出现层激活标志，用鼠标左键拖该标志。n 选定层，用键盘方向键移动层。3、 对齐层n 选定多个层，对齐的标准是最后一个选择的层，该层控制点的实心点，而其他为空心点。n 修改对齐对齐下缘。5.3 层的属性设置5.3.1 设置层的属性1. 层编号：层的名称。 2. 左和上：距页面或父层的左上角相对位置 3. 宽和高：层的宽度和高度。 4. Z轴：层的重叠顺序。 5. 可见性：层的初始显示状况（可见或隐藏） 6. 背景图像、背景颜色： 7. 溢出：确定当层中内容超出设定大小时要采取的行动。 8. 剪辑：定义层的可见区域，并用于将该范围外的内容裁剪掉。 5.3.2 层面板的使用选择【窗口】【其他】【层】命令，或按F2键，可打开【层】面板 。1. 选定某个层 2. 更改层名 3. 显示、隐藏层 4. 改变层的叠放次序 5. 创建和取消嵌套层 6. 禁止层重叠 5.4 层与表格互换5.4.1 将层转换为表格操作步骤如下:（1） 选中要转换为层的表格。（2） 选择“修改”|“转换表格到层”命令，系统将打开“转换表格为层”对话框（3） 选中合适的布局工具复选框后，单击【确定】按钮，表格就可按要求转换为层。 5.4.2 表格转换为层n 问题：不是所有的浏览器都支持层。n 解决方法：使用层创建网页布局，然后将层转换为表格。（1） 打开要将层转换为表格的页面。（2） 选择【修改】【转换】【层到表格】命令，系统将打开【转换层为表格】对话框.（3） 选择好对话框中的选项后，单击【确定】按钮，层布局的页面就可转换成表格布局的页面5.5 实战演练冷酷青春第六章 框架教学内容：本章主要讲了框架的使用，包括创建框架、命名框架、设置框架以及保存框架等操作。在使用框架的过程中一定要明白框架的基本结构。框架在网页的设计中可用来制作电子图书。使用框架的一个难点框架集和框架之间的关系，通常在一个框架中所有的框架都是通过一个框架集文档来调用各个框架的。另一个难点就是框架属性的设置。这些都需要在实际的操作过程中不断地去思考和摸索才能够熟练掌握。教学重点： 创建框架网页框架网页的选择设置框架和框架集的属性编辑框架创建框架间页面的超链接教学难点： 设置框架和框架集的属性创建框架间页面的超链接教学方法：讲演法教学课时：4课时教学内 容与助学过程：6.1 应用框架制作电子书6.1.1 案例综述本例将制作一个HTML在线教程的页面，页面分三个区域，在顶部放置标题栏，左侧框架放置导航栏（即目录），单击链接，在右侧框架中打开链接内容 一个框架横放在顶部：Web站点的徽标和标题 一个较窄的框架位于左侧：导航条 一个大框架占据页面的其余部分：主要内容 框架：是指浏览器窗口中的一个区域。 框架集：定义了一组框架的布局和属性，包括框架的数目、框架的大小和位置以及在每个框架中初始显示页面的URL。6.1.2 案例分析n 理解框架集、框架的概念。n 创建框架集n 制作框架、链接页面n 创建超链接n 保存框架集6.1.3 实现步骤1. 创建框架集 。2. 制作框架页3. 创建导航栏超链接4. 保存框架集6.2 框架的基本操作插入预定义的框架集自行创建 创建框架集的方法：6.2.1 创建框架和框架集1. 选择预定义的框架集 创建包含当前文档的框架集1) 打开一个文档2) 插入栏|布局|框架3) 框架集图标的蓝色区域表示当前文档创建新的空预定义框架集4) 文件|新建5) “新建文档”对话框|框架集6) 选择一个所需框架集2. 设计自己的框架集 创建框架集1) 新建一个空白HTML文档2) 修改|框架集|拆分左(右、上、下要)框架3) 在光标停留在某个框架中，可继续拆分注：利用“查看|可视化助理|框架边框”使边框可见删除框架集1) 选择要删除框架的边框2) 将边框拖到上一级框架的边框上调整框架大小3) 拖动边框6.2.2 选择框架和框架集1) 选择框架n 在“文档”窗口中：按Alt+单击框架内部n 在“框架”面板中：单击某个框架区域2） 选择框架集n 在“文档”窗口中：单击内部框架边框n 在“框架”面板中：单击某一内部框架边框6.2.3 框架和框架集属性设置1. 设置框架的属性 n 框架名称：是链接的Target属性或脚本在引用该框架时所用的名称。n 源文件：指定在框架中显示的源文件n 滚动：指定在框架中是否显示滚动条。n 不能调整大小：让访问者无法通过拖动框架边框在浏览器中调整框架大小n 边框：在浏览器中查看框架时显示或隐藏当前框架的边框。n 边框颜色：为所有框架的边框设置边框颜色。n 边距宽度：以像素为单位设置左边距和右边距的宽度n 边距高度：以像素为单位设置上边距和下边距的高度2. 设置框架集的属性n 边框：确定在浏览器中查看文档时在框架周围是否应显示边框。n 边框宽度：指定框架集中所有边框的宽度n 边框颜色：设置边框的颜色n 行列选定范围：单位有“像素”、“百分比”、“相对”6.2.4 保存框架和框架集文档1保存框架集文档操作步骤：1) 选择框架集2) 采取下面的方法之一：n 选择【文件】|【保存框架】命令，保存框架集.n 选择【文件】|【框架集另存为】命令，将框架集另存为新文件。2保存框架文档操作步骤：（1）光标放在目标框架内 。（2） 采取下面的方法之一：n 选择【文件】|【保存框架】命令，保存框架.n 选择【文件】|【框架另存为】命令，将框架另存为新文件。n 如果选择【文件】【保存全部】命令，将保存与当前框架关联的所有文档。6.2.5 框架中的链接在一个框架中使用链接以打开另一个框架中的文档，必须设置链接目标。设置目标框架的基本操作方法如下：1. 在“设计”视图中，选择文本或对象。2. 在属性检查器的“链接”字段中，选择要链接到的文件3. 在属性检查器的“目标”弹出式菜单中，选择链接的文档应在其中显示的框架。注意：n 链接到站点外的某一页面时，正确的做法是在属性检查器的“目标”下拉列表中选择“top”或“blank”两个选项。6.2.6 编辑无框架内容为不支持框架的浏览器提供显示内容的操作方法：1. 选择“修改”|框架集|编辑无框架内容。2. Dreamweaver 8将清除“设计”视图中的内容，并且在“设计”视图顶部显示“无框架内容”字样3. 在“文档”窗口中，像处理普通文档一样输入或插入内容。如输入文字“你目前使用的浏览器不支持框架显示，请升级更高的版本”。4. 再次选择选择“修改”|框架集|编辑无框架内容命令，以返回到框架集文档的普通视图。6.3 实战演练我的家园 第七章 插入多媒体元素教学内容：声音、动画、交互控件等等，在本章中详细介绍了如何使用Flash动画、Flash文本、Flash按钮、Flash元素，Flash动画的创建，另外还介绍了 Applet小程序、Activex控件和插件的使用，它可以创建动画，并实现与用户的交互。以及第三方插件的安装和使用，使读者了解如何扩展Dreamweaver 8的功能。教学重点： 如何插入Flash动画、Flash按钮、Flash元素如何应用Applet小程序丰富网页。Activex控件和插件的应用教学难点：应用Applet小程序第三方插件的安装和使用教学方法：讲演法教学课时：6课时教学内容与助学过程：7.1 网页的动感效果设计7.1.1 案例综述本章案例主要是通过在网页中插入Flash动画和Applet插件等多媒体元素来美化网页，使网页看上去更加生动。7.1.2 案例分析本页面的制作分五个步骤进行：n 页面基本制作n Banner条的制作n 导航条的制作n 正文区的制作；n 扩展功能。7.1.3 实现步骤1. 页面基本制作创建站点创建主页文件设置标题2. Banner条的制作（透明背景的Flash)设置图片背景插入Flash设置背景透明参数3. 导航条的制作插入Flash按钮4正文区的制作用CSS样式格式化页面插入Flash文本插入图像查看器插入Java Applet小程序插入背景音乐5. 扩展功能扩展命令 扩展对象 扩展行为7.2 插入Flash对象Flash动画的优点：文件小，网上传输快。在Dreamweaver 8中可以插入多种Flash对象包括：Flash动画、Flash按钮、Flash文本、Flash视频、Flash元素（图像查看器）、Flash文档等。7.2.1 插入Flash动画插入Flash动画的操作步骤：1. 将插入点置于要插入Flash影片的位置。2. 选择【插入】|【媒体】|【Flash】命令，或【常用/媒体】插入栏中Flash按钮。3. 在弹出的对话框中选择一个swf文件。4. 插入的Flash动画显示为一个灰色的方框，里面有Flash标志。5. 单击【属性】面板上的【播放】按钮，可预览动画。设置Flash影片属性：1. 【Flash】:影片的名称。2. 【宽】和【高】：以像素为单位指定影片的宽度和高度。3. 【文件】：指定指向Flash或Shockwave文件的路径。4. 【源文件】指定指向Flash源文档(fla)的路径。5.