任务二 绘制表格编辑网页布局 （1）单击插入栏的下拉按钮，展开插入栏，单击“常用”选项， 打开常用工具栏。 （2）单击“表格”按钮，创建表格。在弹出的“表格”对话框中， 设置参数如图3.1.4所示，单击“确定”按钮，关闭对话框。
第 9 页
《中小型网站建设与管理》
图3.1.3 表格布局网页第二步
第 10 页
（2）在文档工具栏的“标题”文本框中输入网页标题“第八届北京 国际电影体育周”，如图3.2.16所示。
第 33 页
《中小型网站建设与管理》
图3.2.12 框架面板
图3.2.13 设置框架属性
图3.2.14 设置框架属性
图3.2.16 设置框架集网页标题
第 34 页
《中小型网站建设与管理》
模块三 使用AP元素布局网页
（2）让表格居中对齐，在其中输入如图3.1.12所示文字，并对文字进行 编辑。 （3）在嵌套表格的第二行单元格内再插入6行1列的表格，如图3.1.13所 示，修改表格属性，设置参数如图3.1.14所示。 （4）在插入的表格中输入相应文字，效果如图3.1.15所示，将“栏目导 航”字号设为18像素，并设为斜体，在该单元格设置背景颜色为 “#F5F5F5”；设置“体育电影资讯”、“体育电影论坛”和“联系 方式”的链接分别到files/tdzx.html、files/tdlt.html和files/lxfs.html ，单击“修改”菜单栏下面的“页面属性”子菜单，在弹出的对话框 中进行“链接”分类的设置，如图3.1.16所示。 第 15 页
《中小型网站建设与管理》
图3.1.14设置表格属性
图3.1.13 创建嵌套表格
图3.1.15 表格效果
第 16 页
《中小型网站建设与管理》
（5）单击表格边框，选取表格。 （6）在属性面板中将“水平”设置为居中 对齐，垂直设置为“居中”。 （7）保存当前网页。
图3.1.16 表格效果
第 17 页
《中小型网站建设与管理》
第 18 页
《中小型网站建设与管理》
图3.1.18 设置表格属性
图3.1.19设置表格单元格属性
图3.1.20设置表格属性
第 19 页
《中小型网站建设与管理》
图3.1.21 最终效果
第 20 页
《中小型网站建设与管理》
模块二 建立框架网页
(一) 学习目标 掌握利用框架和框架集来布局网页。 (二 ) 任务分析
第 13 页
《中小型网站建设与管理》
图3.1.9 标题与版权效果
第 14 页
《中小型网站建设与管理》
任务四 制作导航栏
（1）打开上述活动中制作的index.html网页，将光标定位在第二行左侧 单元格内，在属性面板中将垂直对齐方式设为“顶端”对齐（如图 3.1.10所示）；并插入2行1列宽100%的表格，在该嵌套表格的第一 行单元格中插入一行一列表格，如图3.1.11所示。
(一) 学习目标 掌握并学会利用AP元素布局网页，学会spry构件的使用。 (二 ) 任务分析
1、为网页设置页面属性；
2、创建AP元素布局网页；
3、编辑网页内容； 4、利用spry构件编辑网页内容
第 35 页
《中小型网站建设与管理》
图3.3 .1 AP元素布局网页效果图
第 36 页
《中小型网站建设与管理》
1、创建框架网页；
2、保存框架和框架集文档；
3、制作框架网页内容； 4、设置框架属性；
第 21 页
《中小型网站建设与管理》
图3.2.1 框架布局网页效果图
第 22 页
《中小型网站建设与管理》
任务一 ：创建框架网页 本任务中通过创建框架来对网页布局。 1、在Dreamweaver CS3起始页中选择“文件>新建”命令，打开“ 新建文档”对话框。 2、在“示例中的页”选项卡中的“示例文件夹”列表框中选择“框 架集”选项，在右侧的“示例页”列表框中选择“上方固定，左侧嵌 套”框架结构，如图3.2.2所示。 3、单击“创建”按钮，打开“框架标签辅助功能属性”对话框，在 “框架”下拉列表中选择“mainframe”框架，在“标题”文本框中 输入该框架的标题，通常保持默认设置，如图3.2.3所示。 4、单击“确定”按钮关闭对话框，完成框架网页的创建。
图3.1.5合并单元格
图3.1.6 设置表格行高
第 11 页
《中小型网站建设与管理》
图3.1.7设置表格对齐方式
图3.1.8表格布局效果
第 12 页
《中小型网站建设与管理》
任务三 制作标题与版权说明
１、复制所有素材图片至站点目录的images下 ２、将鼠标定位在表格的第一行，执行“插入>图像”命令，在弹出的对 话框中选择images文件夹下的图片文件“top.gif” ３、选取插入的图片，在“属性”面板中设置居中对齐 ４、将鼠标定位在表格的第三行，插入水平线，并在“属性”面板中将 水平线设置为宽600像素，居中对齐，取消阴影，并设置颜色 ５、输入制作日期及版权说明 ６、保存网页，预览效果如图3.1.9所示
１、绘制表格编辑网页布局；
２、制作标题与版权说明； ３、制作导航栏的；
４、编辑网页表格内容；
第 5 页
《中小型网站建设与管理》
第 6 页
《中小型网站建设与管理》
任务一：建立站点并新建网页； （1）在C:\Inetpub\下建立站点目录tyweb，并使用高级标签定义站点 ，站点名为“tyweb”，如图3.1.2所示。
（2）在起始页中的“创建新项目”中单击“html”创建新网页。
（3）执行“文件”→“保存”菜单命令，将网页保存在站点根目录下， 保存文件名为iБайду номын сангаасdex.html，如图3.1.3所示。
第 7 页
《中小型网站建设与管理》
图3.1.2 建立站点第一步
第 8 页
《中小型网站建设与管理》
图3.1.3建立站点第三步
第 29 页
《中小型网站建设与管理》
图3.2.6设置页面属性
第 30 页
《中小型网站建设与管理》
图3.2.8 创建表格
图3.2.9 left.html页面属性的链接设置
第 31 页
《中小型网站建设与管理》
图3.2.10 框架网页效果图
第 32 页
《中小型网站建设与管理》
任务四 ：设置框架属性
第 25 页
《中小型网站建设与管理》
图3.2.4 保存框架（一）
第 26 页
《中小型网站建设与管理》
图3.2.5保存框架（二）
第 27 页
《中小型网站建设与管理》
任务三 ：制作框架网页内容
（1）在“top”框架中，插入图片“top.jpg”，居中对齐；并调整该框 架的高度为265px，设置top.html的页面属性，如图3.2.6所示。 （2）在“left”框架中，设置“页面属性”，修改“页面字体”为“黑 体”，“文本颜色”为“#000080”，“背景颜色”为 “#AAB3FB”，如图3.2.7所示。 （3）插入一个4行1列的表格，单元格高度设为35，并输入文字内容， 设置文字水平“居中对齐”，文字加粗、大小16px，如图3.2.8所示 ；分别对四行文字设置链接，“返回首页”链接到../index.html，目 标为_top，“资讯主页”链接到main.html，目标为mainframe，“ 体育资讯”链接到tyzx.html，目标为mainframe，“电影资讯”” 链接到dyzx.html，目标为mainframe。在该框架中进行页面属性的 链接分类设置，如图3.2.9所示。
项目三 页面布局设计
《中小型网站建设与管理》
项目简介 本项目是设计并制作一个第八届北京体育电影周网站。 该网站利用表格进行整体布局，通过表格属性的设置控制页面内 容的显示，同时还利用行、列以及单元格的操作及属性设置，使得页 面更加整洁美观；该网站采用“上中下”结构的布局形式，其中还涉 及表格的嵌套使用等。
1、选择“窗口>框架”命令，打开“框架”面板，选中框架集，如图 3.2.12所示。
2、在“属性”面板的“行”栏的“值”文本框中输入“265”，即顶 部框架高度为“265”，如图3.2.13所示。
3、在“框架”面板中选择嵌套框架集，如图所示。 4、在“属性”面板的“列”栏的“值”文本框中输入“180”，如图 3.2.15所示。 5、设置框架集的网页标题。 （1）选择要设置框架集网页标题的框架集“tdzx”。
第 2 页
《中小型网站建设与管理》
项目目标 本项目以设计一个北京体育电影周网站为例，要求结合网站布局 设计的特点，学会并掌握创建表格的方法,能够熟练编辑表格并设置 表格属性；掌握利用框架和框架集来布局网页；掌握并学会利用AP 元素布局网页；学会利用spry构件布局网页。
第 3 页
《中小型网站建设与管理》
任务一 ：为网页设置页面属性
1、在Dreamweaver CS3起始页中选择“文件>新建”命令，打开“ 新建文档”对话框。
2、在“空白页”选项卡中的“页面类型”列表框中选择“HTML”选 项，在右侧的“布局”列表框中选择“无”，如图3.3.2所示。
3、单击“创建”按钮，完成网页的创建，并保存该网页在files文件 夹中，命名为tdlt.html。 4、在“属性”面板中设置单击“页面属性”按钮，如图3.3.3所示。 5、在弹出的“页面属性”对话框中设置参数如图3.3.4所示。
第 28 页
《中小型网站建设与管理》
（4）“main.html”框架网页内容的制作。 在other文件夹中找到对应的文字素材，并进行文字的编排，保存框 架网页，选中框架集后预览，其效果如图3.2.10所示。 （5） 利用相同的方法完成其他两个“体育资讯”和“电影资讯”的 页面，如图3.2.11所示。