项目三页面布局设计

1、项目三项目三 页面布局设计页面布局设计第 2 页中小型网站建设与管理中小型网站建设与管理n 项目简介项目简介 本项目是设计并制作一个第八届北京体育电影周网站。本项目是设计并制作一个第八届北京体育电影周网站。 该网站利用表格进行整体布局，通过表格属性的设置控制页面内该网站利用表格进行整体布局，通过表格属性的设置控制页面内容的显示，同时还利用行、列以及单元格的操作及属性设置，使得页容的显示，同时还利用行、列以及单元格的操作及属性设置，使得页面更加整洁美观；该网站采用面更加整洁美观；该网站采用“上中下上中下”结构的布局形式，其中还涉结构的布局形式，其中还涉及表格的嵌套使用等。及表格的嵌套使用等。第

2、3 页中小型网站建设与管理中小型网站建设与管理n 项目目标项目目标本项目以设计一个北京体育电影周网站为例，要求结合网站布局本项目以设计一个北京体育电影周网站为例，要求结合网站布局设计的特点，学会并掌握创建表格的方法设计的特点，学会并掌握创建表格的方法,能够熟练编辑表格并设置能够熟练编辑表格并设置表格属性；掌握利用框架和框架集来布局网页；掌握并学会利用表格属性；掌握利用框架和框架集来布局网页；掌握并学会利用AP元素布局网页；学会利用元素布局网页；学会利用spry构件布局网页。构件布局网页。第 4 页中小型网站建设与管理中小型网站建设与管理n 工作任务工作任务结合北京体育电影周相关信息，设计一个北

3、京体育电影周网站结合北京体育电影周相关信息，设计一个北京体育电影周网站。该网站由首页、北京体育电影资讯、北京体育电影论坛组成，其中。该网站由首页、北京体育电影资讯、北京体育电影论坛组成，其中利用表格、框架、利用表格、框架、AP元素以及元素以及Spry构件分别对网页进行布局。构件分别对网页进行布局。 第 5 页中小型网站建设与管理中小型网站建设与管理模块一模块一 使用表格布局网页使用表格布局网页(一一)学习目标学习目标学会并掌握创建表格的方法，能够熟练编辑表格，设置表格属性学会并掌握创建表格的方法，能够熟练编辑表格，设置表格属性；对网页进行布局。；对网页进行布局。(二二) 任务分析任务分析、绘制

4、表格编辑网页布局；、绘制表格编辑网页布局； 、制作标题与版权说明；、制作标题与版权说明；、制作导航栏的；、制作导航栏的；、编辑网页表格内容；、编辑网页表格内容；第 6 页中小型网站建设与管理中小型网站建设与管理第 7 页中小型网站建设与管理中小型网站建设与管理任务一：建立站点并新建网页；任务一：建立站点并新建网页； （1）在）在C:Inetpub下建立站点目录下建立站点目录tyweb，并使用高级标签定义站点，并使用高级标签定义站点，站点名为，站点名为“tyweb”，如图，如图3.1.2所示。所示。（2）在起始页中的）在起始页中的“创建新项目创建新项目”中单击中单击“html”创建新网页。创建新

5、网页。（3）执行）执行“文件文件”“保存保存”菜单命令，将网页保存在站点根目录下菜单命令，将网页保存在站点根目录下，保存文件名为，保存文件名为index.html，如图，如图3.1.3所示。所示。第 8 页中小型网站建设与管理中小型网站建设与管理图图3.1.2 建立站点第一步建立站点第一步 第 9 页中小型网站建设与管理中小型网站建设与管理图图3.1.3建立站点第三步建立站点第三步 任务二任务二 绘制表格编辑网页布局绘制表格编辑网页布局（1）单击插入栏的下拉按钮，展开插入栏，单击）单击插入栏的下拉按钮，展开插入栏，单击“常用常用”选项，选项，打开常用工具栏。打开常用工具栏。（2）单击）单击“表

6、格表格”按钮，创建表格。在弹出的按钮，创建表格。在弹出的“表格表格”对话框中，对话框中，设置参数如图设置参数如图3.1.4所示，单击所示，单击“确定确定”按钮，关闭对话框。按钮，关闭对话框。第 10 页中小型网站建设与管理中小型网站建设与管理图图3.1.3 表格布局网页第二步表格布局网页第二步 第 11 页中小型网站建设与管理中小型网站建设与管理n （3）选中表格第一行，单击）选中表格第一行，单击“属性属性”面板上面板上“合并单元格合并单元格”按钮对按钮对第一行的单元格进行合并，如图第一行的单元格进行合并，如图3.1.5所示，同理合并第三行单元格所示，同理合并第三行单元格。n （4）设置表格行

7、高，将光标放置在第一行，修改）设置表格行高，将光标放置在第一行，修改“属性属性”面板上面板上“高高”为为“265”，如图，如图3.1.6所示，同理设置第二行所示，同理设置第二行“高高”为为“500”，第三行，第三行“高高”为为“70”；设置第二行左侧单元格的；设置第二行左侧单元格的“宽宽”为为“200”，右侧单元格的，右侧单元格的“宽宽”设为设为“700”。n （5）选择表格，设置为对齐方式：选中）选择表格，设置为对齐方式：选中标签，在标签，在“属性属性”面面板上设置板上设置“对齐方式对齐方式”为为“居中居中”，如图，如图3.1.7所示。所示。n （6）在单元格内输入文字。）在单元格内输入文字

8、。n （7）保存网页，预览效果如图）保存网页，预览效果如图3.1.8所示。所示。图图3.1.5合并单元格合并单元格 图图3.1.6 设置表格行高设置表格行高 第 12 页中小型网站建设与管理中小型网站建设与管理图图3.1.7设置表格对齐方式设置表格对齐方式 图图3.1.8表格布局效果表格布局效果 第 13 页中小型网站建设与管理中小型网站建设与管理n 任务三任务三 制作标题与版权说明制作标题与版权说明、复制所有素材图片至站点目录的、复制所有素材图片至站点目录的images下下、将鼠标定位在表格的第一行，执行、将鼠标定位在表格的第一行，执行“插入插入图像图像”命令，在弹出的命令，在弹出的对话框中

9、选择对话框中选择images文件夹下的图片文件文件夹下的图片文件“top.gif”、选取插入的图片，在、选取插入的图片，在“属性属性”面板中设置居中对齐面板中设置居中对齐、将鼠标定位在表格的第三行，插入水平线，并在、将鼠标定位在表格的第三行，插入水平线，并在“属性属性”面板中将面板中将水平线设置为宽水平线设置为宽600像素，居中对齐，取消阴影，并设置颜色像素，居中对齐，取消阴影，并设置颜色、输入制作日期及版权说明、输入制作日期及版权说明、保存网页，预览效果如图、保存网页，预览效果如图3.1.9所示所示 第 14 页中小型网站建设与管理中小型网站建设与管理图图3.1.9 标题与版权效果标题与版权

10、效果 第 15 页中小型网站建设与管理中小型网站建设与管理n 任务四任务四 制作导航栏制作导航栏（1）打开上述活动中制作的）打开上述活动中制作的index.html网页，将光标定位在第二行左网页，将光标定位在第二行左侧单元格内，在属性面板中将垂直对齐方式设为侧单元格内，在属性面板中将垂直对齐方式设为“顶端顶端”对齐（如图对齐（如图3.1.10所示）；并插入所示）；并插入2行行1列宽列宽100%的表格，在该嵌套表格的第一的表格，在该嵌套表格的第一行单元格中插入一行一列表格，如图行单元格中插入一行一列表格，如图3.1.11所示。所示。（2）让表格居中对齐，在其中输入如图）让表格居中对齐，在其中输入

11、如图3.1.12所示文字，并对文字进行所示文字，并对文字进行编辑。编辑。（3）在嵌套表格的第二行单元格内再插入）在嵌套表格的第二行单元格内再插入6行行1列的表格，如图列的表格，如图3.1.13所所示，修改表格属性，设置参数如图示，修改表格属性，设置参数如图3.1.14所示。所示。（4）在插入的表格中输入相应文字，效果如图）在插入的表格中输入相应文字，效果如图3.1.15所示，将所示，将“栏目导栏目导航航”字号设为字号设为18像素，并设为斜体，在该单元格设置背景颜色为像素，并设为斜体，在该单元格设置背景颜色为“#F5F5F5”；设置；设置“体育电影资讯体育电影资讯”、“体育电影论坛体育电影论坛”

12、和和“联系联系方式方式”的链接分别到的链接分别到files/tdzx.html、files/tdlt.html和和files/lxfs.html，单击，单击“修改修改”菜单栏下面的菜单栏下面的“页面属性页面属性”子菜单，子菜单，在弹出的对话框中进行在弹出的对话框中进行“链接链接”分类的设置，如图分类的设置，如图3.1.16所示。所示。第 16 页中小型网站建设与管理中小型网站建设与管理图图3.1.13 创建嵌套表格创建嵌套表格 图图3.1.14设置表格属性设置表格属性图图3.1.15 表格效果表格效果第 17 页中小型网站建设与管理中小型网站建设与管理（5）单击表格边框，选取表格。）单击表格边

13、框，选取表格。（6）在属性面板中将）在属性面板中将“水平水平”设置为居中设置为居中对齐，垂直设置为对齐，垂直设置为“居中居中”。（7）保存当前网页。）保存当前网页。图图3.1.16 表格效果表格效果第 18 页中小型网站建设与管理中小型网站建设与管理n 任务五任务五 编辑网页表格内容编辑网页表格内容（1）打开上述活动中制作的）打开上述活动中制作的index.htm网页，将光标定位在第二行右侧网页，将光标定位在第二行右侧单元格内，在属性面板中将垂直对齐方式设为单元格内，在属性面板中将垂直对齐方式设为“顶端顶端”对齐，插入对齐，插入12行行2列，宽列，宽80%的表格，如图的表格，如图3.1.17所

14、示。在属性面板中将该表格所示。在属性面板中将该表格的对齐方式设置为的对齐方式设置为“居中对齐居中对齐”。（2）将光标定位在第一个单元格中，拖动鼠标选中所有单元格，并在）将光标定位在第一个单元格中，拖动鼠标选中所有单元格，并在属性面板中设置高度为属性面板中设置高度为35，如图，如图3.1.18所示。所示。（3）将光标放置在第一个单元格，插入图片）将光标放置在第一个单元格，插入图片“images/fh.gif”，输入，输入文字标题文字，并设置其属性，如图文字标题文字，并设置其属性，如图3.1.19所示。所示。（4）在依次的下面三行单元格中输入该部分的新闻标题内容，并进行）在依次的下面三行单元格中输

15、入该部分的新闻标题内容，并进行文字的位置调整，直到合适为止，如图文字的位置调整，直到合适为止，如图3.1.20所示。所示。（5）重复步骤（）重复步骤（1）（）（3），完成网页内容，如图），完成网页内容，如图3.1.21所示。所示。第 19 页中小型网站建设与管理中小型网站建设与管理图图3.1.18 设置表格属性设置表格属性图图3.1.19设置表格单元格属性设置表格单元格属性图图3.1.20设置表格属性设置表格属性第 20 页中小型网站建设与管理中小型网站建设与管理图图3.1.21 最终效果最终效果第 21 页中小型网站建设与管理中小型网站建设与管理模块二模块二 建立框架网页建立框架网页 (一一

16、)学习目标学习目标掌握利用框架和框架集来布局网页。掌握利用框架和框架集来布局网页。 (二二) 任务分析任务分析1、创建框架网页；、创建框架网页； 2、保存框架和框架集文档；、保存框架和框架集文档；3、制作框架网页内容；、制作框架网页内容；4、设置框架属性；、设置框架属性；第 22 页中小型网站建设与管理中小型网站建设与管理图图3.2.1 框架布局网页效果图框架布局网页效果图 第 23 页中小型网站建设与管理中小型网站建设与管理任务一任务一 ：创建框架网页：创建框架网页 本任务中通过创建框架来对网页布局。本任务中通过创建框架来对网页布局。 1、在、在Dreamweaver CS3起始页中选择起始

17、页中选择“文件文件新建新建”命令，打开命令，打开“新建文档新建文档”对话框。对话框。 2、在、在“示例中的页示例中的页”选项卡中的选项卡中的“示例文件夹示例文件夹”列表框中选择列表框中选择“框框架集架集”选项，在右侧的选项，在右侧的“示例页示例页”列表框中选择列表框中选择“上方固定，左侧嵌上方固定，左侧嵌套套”框架结构，如图框架结构，如图3.2.2所示。所示。 3、单击、单击“创建创建”按钮，打开按钮，打开“框架标签辅助功能属性框架标签辅助功能属性”对话框，在对话框，在“框架框架”下拉列表中选择下拉列表中选择“mainframe”框架，在框架，在“标题标题”文本框中文本框中输入该框架的标题，通

18、常保持默认设置，如图输入该框架的标题，通常保持默认设置，如图3.2.3所示。所示。 4、单击、单击“确定确定”按钮关闭对话框，完成框架网页的创建。按钮关闭对话框，完成框架网页的创建。 第 24 页中小型网站建设与管理中小型网站建设与管理图图3.2.2创建框架网页创建框架网页图图3.2.3设置框架标签属性设置框架标签属性第 25 页中小型网站建设与管理中小型网站建设与管理任务二任务二 ：保存框架和框架集文档：保存框架和框架集文档 1、选择、选择“文件文件保存全部保存全部”命令，打开命令，打开“另存为另存为”对话框。对话框。 2、在、在“另存为另存为”下拉列表中选择保存的路径，在下拉列表中选择保存

19、的路径，在“文件名文件名”文本框文本框中输入中输入“tdzx.html”，如图，如图3.2.4所示。所示。 3、单击、单击“保存保存”按钮完成框架集网页文档的保存，同时打开按钮完成框架集网页文档的保存，同时打开“另存另存为为”对话框进行框架网页文档对话框进行框架网页文档“main.html”的保存，如图的保存，如图3.2.5所示所示。 4、单击、单击“保存保存”按钮完成框架网页文档的保存，同时打开按钮完成框架网页文档的保存，同时打开“另存为另存为”对话框进行框架网页文档对话框进行框架网页文档“left.html”的保存的保存 5、同理，保存框架网页文档、同理，保存框架网页文档“top.html

20、”，即完成所有框架网页文档，即完成所有框架网页文档的保存。的保存。第 26 页中小型网站建设与管理中小型网站建设与管理图图3.2.4 保存框架（一）保存框架（一） 第 27 页中小型网站建设与管理中小型网站建设与管理图图3.2.5保存框架（二）保存框架（二）第 28 页中小型网站建设与管理中小型网站建设与管理任务三任务三 ：制作框架网页内容：制作框架网页内容 （1）在）在“top”框架中，插入图片框架中，插入图片“top.jpg”，居中对齐；并调整该框，居中对齐；并调整该框架的高度为架的高度为265px，设置，设置top.html的页面属性，如图的页面属性，如图3.2.6所示。所示。（2）在）

21、在“left”框架中，设置框架中，设置“页面属性页面属性”，修改，修改“页面字体页面字体”为为“黑黑体体”，“文本颜色文本颜色”为为“#000080”，“背景颜色背景颜色”为为“#AAB3FB”，如图，如图3.2.7所示。所示。（3）插入一个）插入一个4行行1列的表格，单元格高度设为列的表格，单元格高度设为35，并输入文字内容，并输入文字内容，设置文字水平设置文字水平“居中对齐居中对齐”，文字加粗、大小，文字加粗、大小16px，如图，如图3.2.8所示所示；分别对四行文字设置链接，；分别对四行文字设置链接，“返回首页返回首页”链接到链接到./index.html，目，目标为标为_top，“资讯

22、主页资讯主页”链接到链接到main.html，目标为，目标为mainframe，“体育资讯体育资讯”链接到链接到tyzx.html，目标为，目标为mainframe，“电影资讯电影资讯”链接到链接到dyzx.html，目标为，目标为mainframe。在该框架中进行页面属性的。在该框架中进行页面属性的链接分类设置，如图链接分类设置，如图3.2.9所示。所示。第 29 页中小型网站建设与管理中小型网站建设与管理（4）“main.html”框架网页内容的制作。框架网页内容的制作。在在other文件夹中找到对应的文字素材，并进行文字的编排，保存框文件夹中找到对应的文字素材，并进行文字的编排，保存框架

23、网页，选中框架集后预览，其效果如图架网页，选中框架集后预览，其效果如图3.2.10所示。所示。（5） 利用相同的方法完成其他两个利用相同的方法完成其他两个“体育资讯体育资讯”和和“电影资讯电影资讯”的的页面，如图页面，如图3.2.11所示。所示。第 30 页中小型网站建设与管理中小型网站建设与管理图图3.2.6设置页面属性设置页面属性第 31 页中小型网站建设与管理中小型网站建设与管理图图3.2.8 创建表格创建表格图图3.2.9 left.html页面属性的链接设置页面属性的链接设置第 32 页中小型网站建设与管理中小型网站建设与管理图图3.2.10 框架网页效果图框架网页效果图第 33 页

24、中小型网站建设与管理中小型网站建设与管理任务四任务四 ：设置框架属性：设置框架属性 1、选择、选择“窗口窗口框架框架”命令，打开命令，打开“框架框架”面板，选中框架集，如图面板，选中框架集，如图3.2.12所示。所示。 2、在、在“属性属性”面板的面板的“行行”栏的栏的“值值”文本框中输入文本框中输入“265”，即顶，即顶部框架高度为部框架高度为“265”，如图，如图3.2.13所示。所示。 3、在、在“框架框架”面板中选择嵌套框架集，如图所示。面板中选择嵌套框架集，如图所示。 4、在、在“属性属性”面板的面板的“列列”栏的栏的“值值”文本框中输入文本框中输入“180”，如图，如图3.2.15

25、所示。所示。 5、设置框架集的网页标题。、设置框架集的网页标题。 （1）选择要设置框架集网页标题的框架集）选择要设置框架集网页标题的框架集“tdzx”。 （2）在文档工具栏的）在文档工具栏的“标题标题”文本框中输入网页标题文本框中输入网页标题“第八届北京第八届北京国际电影体育周国际电影体育周”，如图，如图3.2.16所示。所示。第 34 页中小型网站建设与管理中小型网站建设与管理图图3.2.12 框架面板框架面板图图3.2.13 设置框架属性设置框架属性图图3.2.14 设置框架属性设置框架属性图图3.2.16 设置框架集网页标题设置框架集网页标题第 35 页中小型网站建设与管理中小型网站建设

26、与管理模块三模块三 使用使用AP元素布局网页元素布局网页 (一一)学习目标学习目标掌握并学会利用掌握并学会利用AP元素布局网页，学会元素布局网页，学会spry构件的使用。构件的使用。 (二二) 任务分析任务分析1、为网页设置页面属性；、为网页设置页面属性； 2、创建、创建AP元素布局网页；元素布局网页；3、编辑网页内容；、编辑网页内容；4、利用、利用spry构件编辑网页内容构件编辑网页内容第 36 页中小型网站建设与管理中小型网站建设与管理图图3.3 .1 AP元素布局网页效果图元素布局网页效果图第 37 页中小型网站建设与管理中小型网站建设与管理任务一任务一 ：为网页设置页面属性：为网页设置

27、页面属性 1、在、在Dreamweaver CS3起始页中选择起始页中选择“文件文件新建新建”命令，打开命令，打开“新建文档新建文档”对话框。对话框。 2、在、在“空白页空白页”选项卡中的选项卡中的“页面类型页面类型”列表框中选择列表框中选择“HTML”选选项，在右侧的项，在右侧的“布局布局”列表框中选择列表框中选择“无无”，如图，如图3.3.2所示。所示。 3、单击、单击“创建创建”按钮，完成网页的创建，并保存该网页在按钮，完成网页的创建，并保存该网页在files文件文件夹中，命名为夹中，命名为tdlt.html。 4、在、在“属性属性”面板中设置单击面板中设置单击“页面属性页面属性”按钮，

28、如图按钮，如图3.3.3所示。所示。 5、在弹出的、在弹出的“页面属性页面属性”对话框中设置参数如图对话框中设置参数如图3.3.4所示。所示。第 38 页中小型网站建设与管理中小型网站建设与管理图图3.3.2创建网页创建网页第 39 页中小型网站建设与管理中小型网站建设与管理图图3.3.3设置页面属性设置页面属性图图3.3.4 设置页面属性设置页面属性第 40 页中小型网站建设与管理中小型网站建设与管理任务二任务二 ：创建：创建AP元素布局网页元素布局网页 1、选择、选择“布局布局”工具面板中的工具面板中的“绘制绘制AP DIV”，如图，如图3.3.5所示。所示。 2、鼠标呈、鼠标呈“+”字形

29、，在网页编辑窗口中的任意位置按下鼠标左键不放字形，在网页编辑窗口中的任意位置按下鼠标左键不放进行拖动即创建进行拖动即创建AP DIV。在绘制过程中，编辑窗口右下角将动态显示。在绘制过程中，编辑窗口右下角将动态显示正在绘制的正在绘制的AP DIV的大小，如图的大小，如图3.3.6所示，可以边绘制边查看其大小所示，可以边绘制边查看其大小，至合适大小后再释放鼠标。，至合适大小后再释放鼠标。 3、创建嵌套、创建嵌套AP DIV，将鼠标光标定位到所需的，将鼠标光标定位到所需的AP DIV（layer1）内，）内，选择选择“插入记录插入记录布局对象布局对象AP DIV”命令即可创建一个嵌套命令即可创建一个

30、嵌套AP DIV。 4、利用上述方法，创建如图、利用上述方法，创建如图3.3.7所示的嵌套所示的嵌套AP DIV，并修改其属性。，并修改其属性。小贴士：小贴士：AP 元素（绝对定位元素）是分配有绝对位置的元素（绝对定位元素）是分配有绝对位置的 HTML 页面元素，具体而言，页面元素，具体而言，就是就是 div 标签或其它任何标签。标签或其它任何标签。AP 元素可以包含文本、图像或其它任何可放元素可以包含文本、图像或其它任何可放置到置到 HTML 文档正文中的内容。文档正文中的内容。第 41 页中小型网站建设与管理中小型网站建设与管理图图3.3.5绘制绘制AP元素元素图图3.3.6 AP DIV

31、大小显示大小显示图图3.3.7网页布局网页布局第 42 页中小型网站建设与管理中小型网站建设与管理任务三任务三 ：编辑网页内容：编辑网页内容 （1）在）在“layer2”中，插入图片中，插入图片“top.jpg”。（2）在）在“layer3”中，添加中，添加“AP DIV”元素，并对网页进行布局，效果元素，并对网页进行布局，效果如图如图3.3.8所示。所示。（3）在）在“layer4”中，添加中，添加“AP DIV”元素，并对网页进行布局，效果元素，并对网页进行布局，效果如图如图3.3.9所示。所示。（4）利用相同的方法，在）利用相同的方法，在“layer5”、“layer6”中，添加中，添加

32、“AP DIV”元元素，并对网页进行布局，效果如图素，并对网页进行布局，效果如图3.3.10所示。所示。（5）在已经布局好的网页中，插入图片或文字，效果如图）在已经布局好的网页中，插入图片或文字，效果如图3.3.11所示。所示。第 43 页中小型网站建设与管理中小型网站建设与管理图图3.3.8 AP DIV元素的嵌套（一）元素的嵌套（一）图图3.3.9AP DIV元素的嵌套（二）元素的嵌套（二）第 44 页中小型网站建设与管理中小型网站建设与管理图图3.3.10 AP DIV元素的嵌套（三）元素的嵌套（三）图图3.3.11AP DIV布局效果图布局效果图第 45 页中小型网站建设与管理中小型网

33、站建设与管理任务四任务四 ：利用：利用spry构件编辑构件编辑“联系方式联系方式”页面内容页面内容 Spry框架是一个框架是一个JavaScript库，库，Web设计人员使用它可以构建能够向站点设计人员使用它可以构建能够向站点访问者提供更丰富体验的访问者提供更丰富体验的Web页。有了页。有了Spry，就可以使用，就可以使用HTML、CSS和极少和极少量的量的JavaScript将将 XML数据合并到数据合并到HTML文档中，创建构件（如折叠构件和菜文档中，创建构件（如折叠构件和菜单栏），向各种页面元素中添加不同种类的效果。在设计上，单栏），向各种页面元素中添加不同种类的效果。在设计上，Spry框架的标记框架的标记非常简单且便于那些具有非常简单且便于那些具有HTML、CSS和和JavaScript基础知识的用户使用。基础知识的用户使用。（1）打开）打开index.html文件，将该文件另存在文件，将该文件另存在files文件