页面布局设计

工作任务
结合北京体育电影周相关信息，设计一个北京体育电影周网站 。该网站由首页、北京体育电影资讯、北京体育电影论坛组成，其中 利用表格、框架、AP元素以及Spry构件分别对网页进行布局。
模块一 使用表格布局网页 (一) 学习目标
学会并掌握创建表格的方法，能够熟练编辑表格，设置表格属性 ；对网页进行布局。
图3.1.3 表格布局网页第二步
（3）选中表格第一行，单击“属性”面板上“合并单元格”按钮对 第一行的单元格进行合并，如图3.1.5所示，同理合并第三行单元格。
（4）设置表格行高，将光标放置在第一行，修改“属性”面板上“ 高”为“265”，如图3.1.6所示，同理设置第二行“高”为“500” ，第三行“高”为“70”；设置第二行左侧单元格的“宽”为 “200”，右侧单元格的“宽”设为“700”。
（4）在依次的下面三行单元格中输入该部分的新闻标题内容，并进行文 字的位置调整，直到合适为止，如图3.1.20所示。
（5）重复步骤（1）～（3），完成网页内容，如图3.1.21所示。
图3.1.18 设置表格属性 图3.1.19设置表格单元格属性
图3.1.20设置表格属性
图3.1.21 最终效果
模块二 建立框架网页 (一) 学习目标
掌握利用框架和框架集来布局网页。
(二) 任务分析
1、创建框架网页； 2、保存框架和框架集文档； 3、制作框架网页内容； 4、设置框架属性；
图3.2.1 框架布局网页效果图
任务一 ：创建框架网页 本任务中通过创建框架来对网页布局。 1、在Dreamweaver CS3起始页中选择“文件>新建”命令，打开“ 新建文档”对话框。 2、在“示例中的页”选项卡中的“示例文件夹”列表框中选择“框 架集”选项，在右侧的“示例页”列表框中选择“上方固定，左侧嵌 套”框架结构，如图3.2.2所示。 3、单击“创建”按钮，打开“框架标签辅助功能属性”对话框，在 “框架”下拉列表中选择“mainframe”框架，在“标题”文本框中 输入该框架的标题，通常保持默认设置，如图3.2.3所示。 4、单击“确定”按钮关闭对话框，完成框架网页的创建。
(二) 任务分析 １、绘制表格编辑网页布局； ２、制作标题与版权说明； ３、制作导航栏的； ４、编辑网页表格内容；
任务一：建立站点并新建网页； （1）在C:\Inetpub\下建立站点目录tyweb，并使用高级标签定义站点
，站点名为“tyweb”，如图3.1.2所示。 （2）在起始页中的“创建新项目”中单击“html”创建新网页。 （3）执行“文件”→“保存”菜单命令，将网页保存在站点根目录下，
水平线设置为宽600像素，居中对齐，取消阴影，并设置颜色 ５、输入制作日期及版权说明 ６、保存网页，预览效果如图3.1.9所示
图3.1.9 标题与版权效果
任务四 制作导航栏
（1）打开上述活动中制作的index.html网页，将光标定位在第二行左侧 单元格内，在属性面板中将垂直对齐方式设为“顶端”对齐（如图 3.1.10所示）；并插入2行1列宽100%的表格，在该嵌套表格的第一 行单元格中插入一行一列表格，如图3.1.11所示。
项目简介
本项目是设计并制作一个第八届北京体育电影周网站。
该网站利用表格进行整体布局，通过表格属性的设置控制页面内 容的显示，同时还利用行、列以及单元格的操作及属性设置，使得页 面更加整洁美观；该网站采用“上中下”结构的布局形式，其中还涉 及表格的嵌套使用等。
项目目标
本项目以设计一个北京体育电影周网站为例，要求结合网站布局 设计的特点，学会并掌握创建表格的方法,能够熟练编辑表格并设置 表格属性；掌握利用框架和框架集来布局网页；掌握并学会利用AP 元素布局网页；学会利用spry构件布局网页。
（5）选择表格，设置为对齐方式：选中<table>标签，在“属性”面 板上设置“对齐方式”为“居中”，如图3.1.7所示。
（6）在单元格内输入文字。 （7）保存网页，预览效果如图3.1.8所示。
图3.1.5合并单元格
图3.1.6 设置表格行高
图3.1.7设置表格对齐方式 图3.1.8表格布局效果
单元格内，在属性面板中将垂直对齐方式设为“顶端”对齐，插入 12行2列，宽80%的表格，如图3.1.17所示。在属性面板中将该表格 的对齐方式设置为“居中对齐”。
（2）将光标定位在第一个单元格中，拖动鼠标选中所有单元格，并在属 性面板中设置高度为35，如图3.1.18所示。
（3）将光标放置在第一个单元格，插入图片“images/fh.gif”，输入 文字标题Байду номын сангаас字，并设置其属性，如图3.1.19所示。
（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所示。
任务三 制作标题与版权说明 １、复制所有素材图片至站点目录的images下 ２、将鼠标定位在表格的第一行，执行“插入>图像”命令，在弹出的对
话框中选择images文件夹下的图片文件“top.gif” ３、选取插入的图片，在“属性”面板中设置居中对齐 ４、将鼠标定位在表格的第三行，插入水平线，并在“属性”面板中将
图3.1.13 创建嵌套表格
图3.1.14设置表格属性 图3.1.15 表格效果
（5）单击表格边框，选取表格。 （6）在属性面板中将“水平”设置为居中 对齐，垂直设置为“居中”。 （7）保存当前网页。
图3.1.16 表格效果
任务五 编辑网页表格内容 （1）打开上述活动中制作的index.htm网页，将光标定位在第二行右侧
保存文件名为index.html，如图3.1.3所示。
图3.1.2 建立站点第一步
图3.1.3建立站点第三步
任务二 绘制表格编辑网页布局
（1）单击插入栏的下拉按钮，展开插入栏，单击“常用”选项， 打开常用工具栏。
（2）单击“表格”按钮，创建表格。在弹出的“表格”对话框中， 设置参数如图3.1.4所示，单击“确定”按钮，关闭对话框。