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