1、模块六 网页布局,主讲老师：*,Dreamweaver CS3网页制作任务实训教程,学习目标,掌握表格、布局表格和布局单元格的创建与编辑方法掌握CSS、AP Div以及CSS+Div的使用与设置操作熟悉并掌握框架集以及框架的创建和编辑操作熟悉模板的创建、编辑以及更新等操作,任务一 使用表格布局“产品展示”页面,任务目标在“product.html”网页中利用表格、布局表格和布局单元格等工具制作出产品展示的页面效果，完成后的最终效果如图所示。,制作的“产品展示”网页效果,任务一 使用表格布局“产品展示”页面,操作思路（1）在提供的“product.html”网页中绘制与设置布局表格和布局单元格。
2、（2）通过创建与编辑表格制作“产品分类”栏目。（3）通过创建、编辑与排序表格制作“热门产品”栏目。（4）通过创建与编辑嵌套表格制作“产品展示”栏目。,制作“产品展示”网页的操作思路,操作一 绘制布局表格和布局单元格,（1）打开光盘中提供的“product.html”网页素材，单击插入栏中的“布局”选项卡，如图所示。（2）选择【查看】【表格模式】【布局模式】菜单命令，或按“Alt+F6”键切换到布局视图模式，如图所示。,切换选项卡,切换视图模式,操作一 绘制布局表格和布局单元格,（3）此时“布局”选项卡中的“布局表格”按钮 和“布局单元格”按钮 将被激活，单击“布局表格”按钮 ，如图所示。（4）
3、将鼠标指针移至工作区，按住鼠标左键不放并拖动鼠标绘制布局表格，如图所示。,单击按钮,绘制布局表格,操作一 绘制布局表格和布局单元格,（5）释放鼠标完成布局表格的绘制，如图所示。（6）保持布局表格的选中状态，在属性检查器中将其宽度和高度分别设置为“800”和“709”，如图所示。,绘制的布局表格,精确调整布局表格尺寸,操作一 绘制布局表格和布局单元格,（7）单击“布局”选项卡中的“布局单元格”按钮 ，如图所示。（8）拖动鼠标绘制宽为“800”、高为“50”的布局单元格，如图所示。,单击按钮,绘制布局单元格,操作一 绘制布局表格和布局单元格,（9）释放鼠标完成布局单元格的绘制，如图所示。（10）用
4、相同方法在已绘制的布局单元格下方再绘制一个宽为“800”、高为“30”的布局单元格，然后将鼠标指针移至绘制的布局单元格边框上，当边框变为红色时拖动鼠标调整单元格位置，如图所示。,绘制的布局单元格,移动布局单元格位置,操作一 绘制布局表格和布局单元格,（11）继续利用“布局单元格”按钮 在布局表格中绘制其他布局单元格，并调整各单元格的大小，具体可参见光盘提供的效果文件“product.html”，然后单击工作区上方的“退出”超级链接退出布局模式，如图所示。,绘制布局单元格,操作一 绘制布局表格和布局单元格,（12）将鼠标指针移至表格边框上，当边框颜色变为红色时单击鼠标选中整个表格，如图所示。（1
5、3）在属性检查器中将对齐方式设置为“居中对齐”，如图所示。,选中表格,设置表格对齐方式,操作一 绘制布局表格和布局单元格,（14）在表格最上方的单元格中输入“产品展示”文本，并在属性检查器中将文本格式设置为“字体-黑体、大小-30、加粗”，水平和垂直方向的对齐方式均为“居中对齐”，如图所示。（15）在下一行单元格中输入导航文本，并按照本书前面介绍的创建超级链接方法为各文本创建超级链接和电子邮件超级链接（具体的链接对象可参考效果文件），如图所示。,输入并设置标题,输入并链接导航文本,操作一 绘制布局表格和布局单元格,（16）在最后一行单元格中输入版权信息，并将文本大小设置为“14”，水平和垂直方
6、向的对齐方式为“居中对齐”，如图所示。,输入并设置版权信息,操作二 制作“产品分类”栏目,（1）将文本插入点定位到导航文本下方左侧的单元格中，单击“布局”选项卡中的“表格”按钮 ，打开“表格”对话框，设置行数为“12”、列数为“1”、表格宽度为“158”、并选择“页眉”栏中的“顶部”选项，然后单击“确定”按钮，如图所示。（2）利用键盘上的方向键或单击鼠标控制文本插入点，在创建的表格中依次输入如图所示的文本。,创建表格,输入表格内容,操作二 制作“产品分类”栏目,（3）在“办公桌”文本左侧按住鼠标左键不放并向下拖动鼠标，选中鼠标经过的所有单元格，如图所示。（4）利用属性检查器将所选单元格的文本大
7、小设置为“14”，单元格高度设置为“20”，如图所示。,选择单元格,设置单元格格式,操作二 制作“产品分类”栏目,（5）选择“产品分类”文本，将其大小设置为“14”，并将单元格高度设置为“25”，如图所示。（6）单击所选表格上方的下拉按钮，在弹出的菜单中选择“选择表格”命令，如图所示。,设置单元格格式,选择表格,操作二 制作“产品分类”栏目,（7）在属性检查器的“边框”文本框中输入“1”，并将边框颜色设置为“#0099FF”，如图所示。,设置表格边框粗细和颜色,操作三 制作“热门产品”栏目,（1）按照相同的方法在“产品分类”栏目下方的单元格中插入“14行2列”的表格，然后输入具体的文本内容，并
8、调整文本大小和单元格高度，如图所示。,创建表格并输入内容,操作三 制作“热门产品”栏目,（2）将鼠标指针移至表格边框上，当边框颜色变为红色时单击鼠标选中整个表格，如图所示。（3）利用属性检查器将表格边框的粗细设置为“1”，颜色设置为“#0099FF”，如图所示。,选择表格,设置表格边框,操作三 制作“热门产品”栏目,（4）选择【命令】【排序表格】菜单命令，如图所示。（5）打开“排序表格”对话框，在“排序按”下拉列表框中选择“列2”选项，在“顺序”下拉列表框中选择“按数字顺序”选项，在右侧的下拉列表框中选择“降序”选项，然后单击“确定”按钮，如图所示。,选择命令,设置排序方式,操作三 制作“热门
9、产品”栏目,（6）此时所选表格中的数据将按照设置进行排序，如图所示。,表格排序的效果,操作四 制作“产品展示”栏目,（1）按“Alt+F6”键重新进入布局模式，单击“布局表格”按钮 ，在“产品分类”栏目右侧的布局单元格中重新绘制相同大小的布局嵌套表格，如图所示。（2）退出布局模式，在嵌套的布局表格中创建3行3列的表格，并通过拖动表格下方和右侧的控制点适当调整表格大小，如图所示。,绘制嵌套的布局表格,创建并调整表格大小,操作四 制作“产品展示”栏目,（3）在新创建表格的第1个单元格中单击鼠标定位文本插入点，单击“布局”选项卡中的“表格”按钮 ，打开“表格”对话框，设置行数为“2”、列数为“1”、
10、表格宽度为“190”、并选择“页眉”栏中的“顶部”选项，然后单击“确定”按钮，如图所示。（4）在所选单元格中插入2行1列的嵌套表格，接着在嵌套表格的第1个单元格中插入光盘提供的“001.jpg”图像，然后适当调整图像大小，如图所示。,创建嵌套表格,在嵌套表格的单元格中插入图像,操作四 制作“产品展示”栏目,（5）确认图像大小后，拖动父级单元格边框重新调整嵌套表格所在的单元格大小，如图所示。（6）在嵌套表格的第2个单元格中输入产品名称文本，并将其大小设置为“14”，如图所示。,调整父级单元格大小,输入并设置文本,操作四 制作“产品展示”栏目,（7）按照相同方法在其他单元格中嵌套表格并插入或输入相
11、应的图像和文本，如图所示。（8）保存制作的网页后，按“F12”键预览效果，如图所示。,创建其他嵌套表格,预览效果,学习与探究,利用表格布局时常常用到的操作方法:选择行：将鼠标指针移至表格中目标行的行首，当其变为 形状时，单击鼠标可选择该行。选择列：将鼠标指针移至表格中目标列的顶部，当其变为 形状时，单击鼠标可选择该列。插入行或列：在需要插入行或列的单元格中定位文本插入点，选择【修改】【表格】菜单命令，在弹出的子菜单中选择相应的命令即可实现插入行或列的操作。另外，按“Ctrl+M”键可插入行；按“Ctrl+Shift+A”键可插入列。删除行或列：选择需要删除的行或列，直接按“Delete”键。另
12、外，按“Ctrl+Shift+M”键可删除行，按“Ctrl+Shift+-”键可删除列。合并单元格：选择需合并的单元格后，选择【修改】【表格】【合并单元格】菜单命令。另外也可通过按“Ctrl+Alt+M”键快速合并单元格。拆分单元格：选择需拆分的单元格后，选择【修改】【表格】【拆分单元格】菜单命令。另外也可通过按“Ctrl+Alt+S”键快速合并单元格。,任务二 用CSS+Div布局“鲜花之旅”网页,任务目标在“index.html”网页中利用AP Div、CSS以及CSS+Div等网页布局工具制作如图所示的“鲜花之旅”网页。,“鲜花之旅”网页的最终效,任务二 用CSS+Div布局“鲜花之旅”
13、网页,操作思路（1）在提供的“index.html”网页中绘制多个AP Div进行网页布局，并适当调整AP Div的大小与位置。（2）创建CSS外部样式表并设置样式表中的各种样式属性。（3）创建CSS+Div标签并设置样式，然后通过对已有的CSS+Div标签进行复制和修改等操作制作其他CSS+Div标签。,制作“鲜花之旅”网页的操作思路,操作一 利用AP Div布局网页,（1）打开光盘提供的“index.html”网页素材，在插入栏的“布局”选项卡中单击“AP Div”按钮 ，如图所示。（2）拖动鼠标绘制适当大小的AP Div标签，如图所示。,单击按钮,绘制AP Div标签,操作一 利用AP
14、Div布局网页,（3）将鼠标指针移至AP Div边框上，单击鼠标选择该对象，如图所示。（4）在属性检查器中将所选对象的宽度设置为“600px”，高度设置为“160px”，如图所示。,选择对象,精确调整对象大小,操作一 利用AP Div布局网页,（5）用相同方法再绘制1个宽度为“600px”，高度为“85px”的AP Div标签，并放置在前面绘制的AP Div下方，如图所示。（6）接着再绘制3个宽度为“160px”，高度为“70px”的AP Div标签，并按如图所示的位置排列。,绘制AP Div标签,绘制AP Div标签,操作一 利用AP Div布局网页,（7）在最上面的AP Div标签中单击鼠
15、标定位文本插入点，单击插入栏的“常用”选项卡中的“图像”按钮，如图所示。（8）打开“选择图像源文件”对话框，在其中选择光盘提供的“pic”图像文件，单击“确定”按钮，如图所示。,定位插入点,选择图像,操作一 利用AP Div布局网页,（9）在打开的对话框中直接单击“确定”按钮，如图所示。（10）此时将在文本插入点所在的AP Div标签中插入所选图像文件，如图所示。,设置图像辅助信息,插入的图像,操作二 创建CSS样式表,（1）将文本插入点定位到第2个AP Div标签中，然后在其中单击鼠标右键，在弹出的快捷菜单中选择【CSS样式】【新建】菜单命令，如图所示。（2）打开“新建CSS规则”对话框，在
16、“选择器类型”栏中选中“高级”单选项。在“定义在”栏中选中“（新建样式表文件）”单选项，单击“确定”按钮，如图所示。,新建CSS样式,设置定义方式,操作二 创建CSS样式表,（3）打开“保存样式表文件为”对话框，在其中设置新建的CSS样式表文件的保存路径和名称，完成后单击“保存”按钮，如图所示。,保存CSS样式表文件,操作二 创建CSS样式表,（4）打开定义CSS规则的对话框，在左侧的“分类”列表框中选择“类型”选项，在右侧设置字体为“方正卡通简体”、大小为“24像素”、粗细为“粗体”、颜色为“#FFFFFF”，如图所示。（5）在“分类”列表框中选择“区块”选项，在右侧设置文字缩进为“50像素
17、”，如图所示。,设置CSS类型,设置CSS区块,操作二 创建CSS样式表,（6）在“分类”列表框中选择“方框”选项，在右侧设置所有填充为“10像素”，单击“确定”按钮，如图所示。（7）此时在第2个AP Div标签中输入文本后，文本将自动应用新建的CSS中定义的各种样式，如图所示。输入完成后选择文本“开始鲜花之旅”。,设置CSS方框,输入并选择文本,操作二 创建CSS样式表,（8）在属性检查器的“链接”文本框中输入“#”，为所选文本创建空链接，如图所示。,创建空链接,操作二 创建CSS样式表,（9）按“Ctrl+J”键打开“页面属性”对话框，选择“分类”列表框中的“链接”选项，在右侧设置链接颜色
18、为“#996699”，单击“确定”按钮，如图所示。（10）此时创建的文本超级链接格式将发生相应变化，如图所示。,设置链接颜色,应用设置,操作三 创建CSS+Div标签,（1）将文本插入点定位在第3行左侧的AP Div标签中，单击插入栏的“布局”选项卡中的“Div”按钮 ，如图所示。（2）打开“插入Div标签”对话框，在“ID”下拉列表框中输入“left”，单击“新建CSS样式”按钮，如图所示。,单击按钮,设置Div标签名称,操作三 创建CSS+Div标签,（3）打开“新建CSS规则”对话框，在“定义在”栏中选中“仅对该文档”单选项，单击“确定”按钮，如图所示。,设置定义规则,操作三 创建CSS
19、+Div标签,（4）在打开对话框的左侧的“分类”列表框中选择“类型”选项，在右侧设置字体为“方正卡通简体”、大小为“45像素”、粗细为“特粗”、颜色为“#FFCC00”，如图所示。（5）在“分类”列表框中选择“区块”选项，在右侧设置字母间距为“5像素”，垂直对齐方式为“中线对齐”，文本对齐方式为“居中”，如图所示。,设置CSS类型,设置CSS区块,操作三 创建CSS+Div标签,（6）在“分类”列表框中选择“边框”选项，在右侧设置所有样式为“槽状”，所有颜色为“#FFCC00”，单击“确定”按钮，如图所示。（7）返回“插入Div标签”对话框，单击“确定”按钮，如图所示。,设置CSS边框,确认插
20、入,操作三 创建CSS+Div标签,（8）此时文本插入点所在的AP Div中将出现如图所示的带有设置格式的文本。,插入的Div标签,操作三 创建CSS+Div标签,（9）输入文本“鲜花”，完成第1个CSS+Div标签的创建和设置，如图所示。（10）将文本插入点定位到第3行中间的AP Div标签中，在Dreamweaver窗口右侧的“CSS样式”面板中找到“#left”选项（若没有则按“Shift+F11”键打开），在其上单击鼠标右键，在弹出的快捷菜单中选择“复制”命令，如图所示。,插入的CSS+Div标签,复制CSS+Div标签,操作三 创建CSS+Div标签,（11）打开“复制CSS规则”对
21、话框，在“选择器”下拉列表框中将名称更改为“#mid”，单击“确定”按钮，如图所示。（12）在“CSS样式”面板中找到复制的“#mid”选项，在其上单击鼠标右键，在弹出的快捷菜单中选择“编辑”命令，如图所示。,修改CSS选择器名称,编辑CSS规则,操作三 创建CSS+Div标签,（13）打开定义CSS规则的对话框，在左侧的“分类”列表框中选择“类型”选项，在右侧将颜色修改为“#0066CC”，如图所示。,修改文本颜色规则,操作三 创建CSS+Div标签,（14）在“分类”列表框中选择“边框”选项，在右侧将所有颜色修改为“#0066CC”，单击“确定”按钮，如图所示。（15）将文本插入点定位在A
22、P Div标签中，单击“布局”选项卡中的“Div”按钮 ，打开“插入Div标签”对话框，在“ID”下拉列表框中选择“mid”选项，单击“确定”按钮，如图所示。,修改边框颜色规则,选择CSS样式,操作三 创建CSS+Div标签,（16）此时在文本插入点所在的AP Div标签中将出现如图所示的文本。（17）直接输入“花篮”，完成第2个CSS+Div标签的创建，如图所示。,创建的CSS+Div标签,输入文本,操作三 创建CSS+Div标签,（18）将文本插入点定位到第3行右侧的AP Div标签中，在“CSS样式”面板的“#mid”选项上单击鼠标右键，在弹出的快捷菜单中选择“复制”命令，如图所示。,复
23、制CSS样式,操作三 创建CSS+Div标签,（19）打开“复制CSS规则”对话框，在“选择器”下拉列表框中将名称更改为“#right”，单击“确定”按钮，如图所示。（20）在“CSS样式”面板中的“#right”选项上单击鼠标右键，在弹出的快捷菜单中选择“编辑”命令，如图所示。,修改CSS选择器名称,编辑CSS规则,操作三 创建CSS+Div标签,（21）在打开的对话框的在左侧的“分类”列表框中选择“类型”选项，在右侧将颜色修改为“#009900”，如图所示。（22）在“分类”列表框中选择“边框”选项，在右侧将所有颜色修改为“#009900”，单击“确定”按钮，如图所示。,修改文本颜色规则,
24、修改边框颜色规则,操作三 创建CSS+Div标签,（23）将文本插入点定位在AP Div标签中，单击“布局”选项卡中的“Div”按钮 ，打开“插入Div标签”对话框，在“ID”下拉列表框中选择“right”选项，单击“确定”按钮，如图所示。,选择CSS样式,操作三 创建CSS+Div标签,（24）在文本插入点所在的AP Div标签中直接输入“绿植”，完成第3个CSS+Div标签的创建，如图所示。（25）保存创建的网页，按“F12”键即可预览效果。,预览效果,任务三 用框架布局“电影之家”网页,任务目标为新建的网页创建框架集，并对框架集和框架网页等进行各种设置，制作如图所示的“电影之家”网页。,
25、“电影之家”网页的最终效果,任务三 用框架布局“电影之家”网页,操作思路（1）新建框架集网页并保存。（2）利用“框架”面板选择各框架网页并添加相应的内容。（3）添加框架，并利用浮动框架制作外部链接。,制作“电影之家”网页的操作思路,操作一 创建并保存框架集,（1）启动Dreamweaver CS3，选择【文件】【新建】菜单命令，打开“新建文档”对话框，选择左侧列表框中的“示例中的页”选项，在“示例文件夹”列表框中选择“框架集”选项，在右侧的“示例页”列表框中选择“上方固定，左侧嵌套”选项，单击“创建”按钮，如图所示。,创建框架集,操作一 创建并保存框架集,（2）此时将在Dreamweaver中
26、创建选择的框架集，并打开“框架标签辅助功能属性”对话框，在其中可定义框架网页的名称，这里直接单击“确定”按钮，如图所示。,命名框架网页,操作一 创建并保存框架集,（3）将鼠标指针移至创建的框架集的某个框架边框上，当其变为双向箭头时单击鼠标，如图所示。（4）此时将选择整个框架集，并在属性检查器中对其边框粗细、颜色和宽度等属性进行设置，如图所示。,单击鼠标,设置框架集,操作一 创建并保存框架集,（5）按住“Alt”键不放的同时单击某个框架网页内部可选择该框架，并在属性检查器中对该框架网页的源文件、滚动方式、边框粗细、颜色、边界宽度和高度等属性进行设置，如图所示。（6）选择整个框架集，然后选择【文件
27、】【框架集另存为】菜单命令，如图所示。,选择某个框架网页,保存框架集,操作一 创建并保存框架集,（7）打开“另存为”对话框，在其中设置框架集的保存位置和名称后，单击“保存”按钮即可保存框架集，如图所示。,设置框架集保存位置和名称,操作二 制作框架网页,（1）选择【窗口】【框架】菜单命令，如图所示。（2）此时将在Dreamweaver窗口右侧打开“框架”面板，其中将显示创建的框架集结构，如图所示。单击该面板中的某个框架网页即可在工作区中选择对应的框架，单击面板中框架集的边框即可选择整个框架集。,选择命令,打开“框架”面板,操作二 制作框架网页,（3）在“框架”面板中单击上方的框架网页将其选择，然
28、后在属性检查器中单击“源文件”文本框右侧的“浏览文件”按钮 ，如图所示。（4）打开“选择HTML文件”对话框，在其中选择提供的“top”网页文件，单击“确定”按钮，如图所示。,选择框架网页,选择网页文件,操作二 制作框架网页,（5）此时所选的网页内容将出现在顶部的框架中，如图所示。,显示的框架网页内容,操作二 制作框架网页,（6）选择网页中的文本“电影之家”，如图所示。（7）将其文本颜色设置为“#003399”，如图所示。按“Ctrl+S”键保存设置，此时引用的源网页文件内容也将同时修改。,选择文本,设置框架网页内容,操作二 制作框架网页,（8）在“框架”面板中选择左侧的框架网页，单击属性检查
29、器中的“源文件”文本框右侧的“浏览文件”按钮 ，如图所示。（9）打开“选择HTML文件”对话框，在其中选择提供的“left”网页文件，单击“确定”按钮，如图所示。,选择框架,选择网页文件,操作二 制作框架网页,（10）此时左侧的框架中将显示引用的网页内容，但由于框架宽度不够的原因，并没有将内容完全显示，如图所示。（11）将鼠标指针移至左侧框架边框上，当其变为双向箭头时按住鼠标左键不放向右拖动，如图所示。,显示的网页内容,调整框架宽度,操作二 制作框架网页,（12）释放鼠标增大框架宽度，此时其中的网页内容将完全显示出来，如图所示。（13）选择右侧的框架，用相同方法为其引用提供的“main”网页文
30、件，如图所示。,调整后的网页内容,引用的网页文件,操作二 制作框架网页,（14）选择右侧的框架，在属性检查器中将“滚动”下拉列表框中的选项设置为“自动”，并选中“不能调整大小”复选框，如图所示。,设置框架网页的滚动方式并禁止调整大小,操作三 使用浮动框架,（1）选择右侧的框架，然后单击插入栏的“布局”选项卡中的“框架”按钮 右侧的下拉按钮，在弹出的下拉列表中选择“顶部框架”选项，如图所示。（2）打开“新建标签辅助功能属性”对话框，默认其中的设置，直接单击“确定”按钮，如图所示。,添加框架,设置框架名称,操作三 使用浮动框架,（3）将文本插入点定位在添加的框架中，单击插入栏的“布局”选项卡中的“
31、IFRAME”按钮（浮动框架） ，此时Dreamweaver将变为拆分显示模式，如图所示。（4）选择【窗口】【标签检查器】菜单命令，如图所示。,拆分显示模式,选择命令,操作三 使用浮动框架,（5）此时将打开“标签”面板，在其中的“属性”选项卡中单击“刷新”按钮，如图所示。,刷新属性,操作三 使用浮动框架,（6）此时添加的框架中将出现创建的浮动框架对象，如图所示。（7）选择浮动框架，在“标签”面板的“属性”选项卡中单击“align”选项右侧的空白文本框，并单击出现的下拉按钮，在弹出的下拉列表中选择“left”选项，设置其对齐方式为“左对齐”，如图所示。,插入的浮动框架,设置对齐方式,操作三 使用
32、浮动框架,（8）在“标签”面板的“属性”选项卡中单击“scrolling”选项右侧的空白文本框，并单击出现的下拉按钮，在弹出的下拉列表中选择“auto”选项，设置其滚动方式为“自动”，如图所示。（9）用相同方法在“标签”面板的“属性”选项卡中将“width”（宽度）设置为“700”，如图所示。,设置滚动方式,设置浮动框架宽度,操作三 使用浮动框架,（10）在“标签”面板的“属性”选项卡的“scr”选项右侧的文本框中输入“http:/”，设置其链接对象地址，如图所示。,设置链接地址,操作三 使用浮动框架,（11）将文本插入点定位在浮动框架所在的框架网页中，将其页面背景颜色设置为“#000000”
33、，如图所示。（12）按“Ctrl+S”键，打开“另存为”对话框，将该框架网页以“elinks”为名进行保存，如图所示。,设置背景颜色,保存框架网页,操作三 使用浮动框架,（13）将鼠标指针移至框架集边框上，单击鼠标选择整个框架集，按“Ctrl+S”键保存，如图所示。最后按“F12”键预览设置效果即可。,保存框架集,任务四 用模板布局“校园新闻”网页,任务目标创建网页模板，并进行设置和保存，然后新建网页文件，并利用保存的网页模板快速制作网页内容，最后对网页模板和网页文件进行更新操作。通过网页模板制作的网页文件最终效果如图所示。,“校园新闻”网页的最终效果,任务四 用模板布局“校园新闻”网页,操作
34、思路（1）创建、编辑并保存网页模板。（2）新建网页文件，套用保存的网页模板并进行编辑。（3）更新网页模板和网页文件。,制作“校园新闻”网页的操作思路,操作一 创建并编辑网页模板,（1）启动Dreamweaver CS3，选择【文件】【新建】菜单命令，打开“新建文档”对话框，在左侧的列表框中选择“空白页”选项，在“页面类型”列表框中选择“HTML模板”选项，在右侧的“布局”列表框中选择“”选项，单击“创建”按钮，如图所示。,新建模板文档,操作一 创建并编辑网页模板,（2）单击插入栏的“常用”选项卡（或“布局”选项卡）中的“表格”按钮 ，打开“表格”对话框，设置行数为“5”，列数为“1”，表格宽度
35、为“800像素”，其余参数保持默认，单击“确定”按钮，如图所示。（3）单击插入的表格下方的下拉按钮，在弹出的下拉菜单中选择“选择表格”命令，如图所示。,创建表格,选择命令,操作一 创建并编辑网页模板,（4）在属性检查器中将对齐方式设置为“居中对齐”，边框粗细设置为“1”，边框颜色设置为“#666666”，如图所示。（5）在第1行单元格中输入“校园新闻”，并在每个文本左侧插入1个不换行空格，然后将文本格式设置为“字体-方正琥珀简体、大小-36、颜色-#CC6600”，并将单元格高度设置为“60”，效果如图所示。,设置表格属性,设置文本和单元格格式,操作一 创建并编辑网页模板,（6）将文本插入点定
36、位到第2行单元格中，单击插入栏的“常用”选项卡中的“图像”按钮，在打开的对话框中选择提供的“banner”图像文件，单击“确定”按钮，并在打开的提示对话框中单击“确定”按钮，效果如图所示。,选择图像,操作一 创建并编辑网页模板,（7）在打开的“图像标签辅助功能属性”对话框中单击“确定”按钮后即可插入选择的图像，如图所示。,插入图像,操作一 创建并编辑网页模板,（8）在第3行单元格中输入导航文本（各词语之间插入若干不换行空格），并设置文本格式为“大小-14、加粗、颜色-#E5800A、居中对齐”，单元格高度设置为“25”，效果如图所示。,输入并设置导航文本,操作一 创建并编辑网页模板,（9）在最
37、后一行输入版权文本，并按导航文本的格式进行相同设置，效果如图所示。,输入并设置版权文本,操作一 创建并编辑网页模板,（10）在第4行单元格中单击鼠标右键，在弹出的快捷菜单中选择【表格】【拆分单元格】菜单命令，如图所示。（11）打开“拆分单元格”对话框，选中“列”单选项，将“列数”数值框中的数字设置为“2”，单击“确定”按钮，如图所示。,选择命令,拆分单元格,操作一 创建并编辑网页模板,（12）将拆分出的单元格边框适当向左拖动，调整两个单元格的宽度，如图所示。（13）将文本插入点定位到第4行左侧的单元格中，选择【插入记录】【模板对象】【可编辑区域】菜单命令，如图所示。,调整单元格宽度,选择命令,
38、操作一 创建并编辑网页模板,（14）打开“新建可编辑区域”对话框，在“名称”文本框中输入“navigation”，单击“确定”按钮，如图所示。,命名可编辑区域,操作一 创建并编辑网页模板,（15）此时将在文本插入点所在的单元格中插入可编辑区域的标识，如图所示。（16）在右侧的单元格中单击鼠标右键，在弹出的快捷菜单中选择【模板】【新建可编辑区域】菜单命令，如图所示。,创建的可编辑区域,选择命令,操作一 创建并编辑网页模板,（17）打开“新建可编辑区域”对话框，在“名称”文本框中输入“main”，单击“确定”按钮，如图所示。（18）此时将在单元格中插入可编辑区域的标识，如图所示。,命名可编辑区域,
39、插入可编辑区域,操作一 创建并编辑网页模板,（19）选择【文件】【另存为模板】菜单命令，如图所示。,选择命令,操作一 创建并编辑网页模板,（20）打开“另存模板”对话框，在“站点”下拉列表框中选择此模板存放的站点，在“另存为”文本框中输入模板名称，完成后单击“保存”按钮，如图所示。,保存模板,操作二 通过网页模板制作“校园新闻”网页,（1）选择【文件】【新建】菜单命令，在打开的对话框中选择空白的网页文件，单击“创建”按钮，如图所示。（2）选择【修改】【模板】【应用模板到页】菜单命令，如图所示。,新建空白网页,应用模板,操作二 通过网页模板制作“校园新闻”网页,（3）打开“选择模板”对话框，在“
40、站点”下拉列表框中选择模板所在的站点，在“模板”列表框中选择需应用的模板选项，单击“选定”按钮，如图所示。,选择模板,操作二 通过网页模板制作“校园新闻”网页,（4）此时空白网页将应用所选的网页模板内容，且将鼠标指针移至非可编辑区域上时，鼠标指针将变为禁用状态，如图所示。（5）将“navigation”可编辑区域中的“navigation”文本删除，如图所示。,应用模板,删除文本,操作二 通过网页模板制作“校园新闻”网页,（6）单击插入栏的“常用”选项卡中的“表格”按钮 ，打开“表格”对话框，设置行数为“5”，列数为“1”，表格宽度为“220像素”，其余参数保持默认，单击“确定”按钮，如图所示
41、。（7）选择插入的表格，将其对齐方式设置为“居中对齐”，边框粗细设置为“1”，边框颜色设置为“#CCCCCC”，效果如图所示。,创建表格,设置表格边框,操作二 通过网页模板制作“校园新闻”网页,（8）在第1行单元格中输入“新闻速递”，并将文本格式设置为“字体-方正艺黑简体、大小-18”，并将单元格高度设置为“30”，效果如图所示。,输入并设置文本,操作二 通过网页模板制作“校园新闻”网页,（9）在其余单元格中输入如图所示的文本，并设置大小为“14”，然后将单元格高度设置为“30”。（10）用相同方法在“main”可编辑区域插入表格，然后输入并设置相应的内容，如图所示。,输入表格内容,创建并设置
42、表格,操作二 通过网页模板制作“校园新闻”网页,（11）保存设置并预览效果，如图所示。,预览网页效果,操作三 更新“校园新闻”网页,（1）切换到网页模板中，修改版权文本，如图所示。,修改模板中的版权文本,操作三 更新“校园新闻”网页,（2）切换到网页文件中，选择【修改】【模板】【更新页面】菜单命令，如图所示。（3）打开“更新页面”对话框，在“查看”下拉列表框中选择更新范围和站点，选中“模板”复选框，单击“开始”按钮，如图所示。,选择命令,选择更新范围,操作三 更新“校园新闻”网页,（4）此时应用了该模板的网页将自动完成更新操作，如图所示，单击“关闭”按钮关闭对话框，并保存修改后的网页即可。,完
43、成更新,实训一 用表格布局“汽车展厅”网页,实训目标创建“汽车展厅”网页，其中将涉及到布局表格、布局单元格的绘制、表格的创建与编辑、嵌套表格的创建与编辑以及表格的边框等属性设置，制作的效果如图所示。,“汽车展厅”网页效果,实训一 用表格布局“汽车展厅”网页,实训分析（1）创建空白网页并将背景颜色设置为“#99CC99”。（2）按“Alt+F6”键进入布局模式，绘制一个“800600”的布局表格，并在其中绘制3个布局单元格，大小依次为“80060”、“80030”和“800488”，各布局单元格之间适当空出一定距离。（3）退出布局模式，在上两个布局单元格区域中输入标题和导航文本，并设置相应的格式
44、（具体格式参见提供的效果文件）。（4）在下面的布局单元格区域中插入3行3列的表格，并拖动表格下方和右侧的边框，将表格大小调整到与布局单元格区域的大小刚好合适，然后设置表格边框颜色。（5）重新进入布局模式，在插入的表格中按其大小绘制9个布局单元格，然后退出布局模式。,实训一 用表格布局“汽车展厅”网页,（6）在创建的表格的第1个单元格中嵌套3行1列的表格，调整表格大小并设置边框颜色，然后依次在嵌套表格的单元格中插入图像并输入文本。（7）将嵌套的表格依次复制到其他父级表格的单元格中，并修改图像和文本，最后保存并预览效果即可。,制作“汽车展厅”网页的操作思路,实训二 用框架布局“天宇工作室”网页,实
45、训目标利用框架创建“天宇工作室”网页，制作的最终效果如图所示，其中将重点练习框架集的创建、编辑以及各种设置等操作。,“天宇工作室”网页最终效果,实训二 用框架布局“天宇工作室”网页,实训分析（1）创建“上方固定、左侧嵌套”的框架集。（2）通过“窗口”菜单下的“框架”命令调出“框架”面板，并在面板中选择“topFrame”框架，将源文件设置为光盘中提供的“top.html”网页。（3）用相同方法为其他框架引用提供的源文件。（4）适当修改引用后的框架集，最后保存并预览效果。,制作“天宇工作室”网页的操作思路,实训三 用CSS+Div标签制作“巧克力小店”网页,实训目标利用CSS+Div标签制作“巧
46、克力小店”网页，制作的最终效果如图所示，其中将重点练习Div标签的创建以及CSS样式的编辑等操作。,“巧克力小店”网页最终效果,实训三 用CSS+Div标签制作“巧克力小店”网页,实训分析（1）打开光盘提供的“index.html”网页，在下方的Div标签中再插入Div标签，并设置CSS格式（具体格式可参见效果文件）。（2）创建Div标签后删除预设的文本，并插入提供的“01.jpg、02.jpg、03.jpg”3张图片。（3）在当前Div标签右侧插入新的Div标签，并设置CSS格式。（4）创建Div标签后删除预设的文本，输入需要的内容并插入提供的“04.jpg、05.jpg、06.jpg”3张图片。（5）保存制作的网页并浏览效果。,制作“巧克力小店”网页的操作思路,
