项目三页面布局设计

项目三页面布局设计第2页《中小型网站建设与管理》项目简介本项目是设计并制作一个第八届北京体育电影周网站。该网站利用表格进行整体布局，通过表格属性的设置控制页面内容的显示，同时还利用行、列以及单元格的操作及属性设置，使得页面更加整洁美观；该网站采用“上中下”结构的布局形式，其中还涉及表格的嵌套使用等。第3页《中小型网站建设与管理》项目目标本项目以设计一个北京体育电影周网站为例，要求结合网站布局设计的特点，学会并掌握创建表格的方法,能够熟练编辑表格并设置表格属性；掌握利用框架和框架集来布局网页；掌握并学会利用AP元素布局网页；学会利用spry构件布局网页。第4页《中小型网站建设与管理》工作任务结合北京体育电影周相关信息，设计一个北京体育电影周网站。该网站由首页、北京体育电影资讯、北京体育电影论坛组成，其中利用表格、框架、AP元素以及Spry构件分别对网页进行布局。第5页《中小型网站建设与管理》模块一使用表格布局网页(一)学习目标学会并掌握创建表格的方法，能够熟练编辑表格，设置表格属性；对网页进行布局。(二)任务分析１、绘制表格编辑网页布局；２、制作标题与版权说明；３、制作导航栏的；４、编辑网页表格内容；第6页《中小型网站建设与管理》第7页《中小型网站建设与管理》任务一：建立站点并新建网页；（1）在C:\Inetpub\下建立站点目录tyweb，并使用高级标签定义站点，站点名为“tyweb”，如图3.1.2所示。（2）在起始页中的“创建新项目”中单击“html”创建新网页。（3）执行“文件”→“保存”菜单命令，将网页保存在站点根目录下，保存文件名为index.html，如图3.1.3所示。第8页《中小型网站建设与管理》图3.1.2建立站点第一步第9页《中小型网站建设与管理》图3.1.3建立站点第三步任务二绘制表格编辑网页布局（1）单击插入栏的下拉按钮，展开插入栏，单击“常用”选项，打开常用工具栏。（2）单击“表格”按钮，创建表格。在弹出的“表格”对话框中，设置参数如图3.1.4所示，单击“确定”按钮，关闭对话框。第10页《中小型网站建设与管理》图3.1.3表格布局网页第二步第11页《中小型网站建设与管理》（3）选中表格第一行，单击“属性”面板上“合并单元格”按钮对第一行的单元格进行合并，如图3.1.5所示，同理合并第三行单元格。（4）设置表格行高，将光标放置在第一行，修改“属性”面板上“高”为“265”，如图3.1.6所示，同理设置第二行“高”为“500”，第三行“高”为“70”；设置第二行左侧单元格的“宽”为“200”，右侧单元格的“宽”设为“700”。（5）选择表格，设置为对齐方式：选中table标签，在“属性”面板上设置“对齐方式”为“居中”，如图3.1.7所示。（6）在单元格内输入文字。（7）保存网页，预览效果如图3.1.8所示。图3.1.5合并单元格图3.1.6设置表格行高第12页《中小型网站建设与管理》图3.1.7设置表格对齐方式图3.1.8表格布局效果第13页《中小型网站建设与管理》任务三制作标题与版权说明１、复制所有素材图片至站点目录的images下２、将鼠标定位在表格的第一行，执行“插入图像”命令，在弹出的对话框中选择images文件夹下的图片文件“top.gif”３、选取插入的图片，在“属性”面板中设置居中对齐４、将鼠标定位在表格的第三行，插入水平线，并在“属性”面板中将水平线设置为宽600像素，居中对齐，取消阴影，并设置颜色５、输入制作日期及版权说明６、保存网页，预览效果如图3.1.9所示第14页《中小型网站建设与管理》图3.1.9标题与版权效果第15页《中小型网站建设与管理》任务四制作导航栏（1）打开上述活动中制作的index.html网页，将光标定位在第二行左侧单元格内，在属性面板中将垂直对齐方式设为“顶端”对齐（如图3.1.10所示）；并插入2行1列宽100%的表格，在该嵌套表格的第一行单元格中插入一行一列表格，如图3.1.11所示。（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所示。第16页《中小型网站建设与管理》图3.1.13创建嵌套表格图3.1.14设置表格属性图3.1.15表格效果第17页《中小型网站建设与管理》（5）单击表格边框，选取表格。（6）在属性面板中将“水平”设置为居中对齐，垂直设置为“居中”。（7）保存当前网页。图3.1.16表格效果第18页《中小型网站建设与管理》任务五编辑网页表格内容（1）打开上述活动中制作的index.htm网页，将光标定位在第二行右侧单元格内，在属性面板中将垂直对齐方式设为“顶端”对齐，插入12行2列，宽80%的表格，如图3.1.17所示。在属性面板中将该表格的对齐方式设置为“居中对齐”。（2）将光标定位在第一个单元格中，拖动鼠标选中所有单元格，并在属性面板中设置高度为35，如图3.1.18所示。（3）将光标放置在第一个单元格，插入图片“images/fh.gif”，输入文字标题文字，并设置其属性，如图3.1.19所示。（4）在依次的下面三行单元格中输入该部分的新闻标题内容，并进行文字的位置调整，直到合适为止，如图3.1.20所示。（5）重复步骤（1）～（3），完成网页内容，如图3.1.21所示。第19页《中小型网站建设与管理》图3.1.18设置表格属性图3.1.19设置表格单元格属性图3.1.20设置表格属性第20页《中小型网站建设与管理》图3.1.21最终效果第21页《中小型网站建设与管理》模块二建立框架网页(一)学习目标掌握利用框架和框架集来布局网页。(二)任务分析1、创建框架网页；2、保存框架和框架集文档；3、制作框架网页内容；4、设置框架属性；第22页《中小型网站建设与管理》图3.2.1框架布局网页效果图第23页《中小型网站建设与管理》任务一：创建框架网页本任务中通过创建框架来对网页布局。1、在DreamweaverCS3起始页中选择“文件新建”命令，打开“新建文档”对话框。2、在“示例中的页”选项卡中的“示例文件夹”列表框中选择“框架集”选项，在右侧的“示例页”列表框中选择“上方固定，左侧嵌套”框架结构，如图3.2.2所示。3、单击“创建”按钮，打开“框架标签辅助功能属性”对话框，在“框架”下拉列表中选择“mainframe”框架，在“标题”文本框中输入该框架的标题，通常保持默认设置，如图3.2.3所示。4、单击“确定”按钮关闭对话框，完成框架网页的创建。第24页《中小型网站建设与管理》图3.2.2创建框架网页图3.2.3设置框架标签属性第25页《中小型网站建设与管理》任务二：保存框架和框架集文档1、选择“文件保存全部”命令，打开“另存为”对话框。2、在“另存为”下拉列表中选择保存的路径，在“文件名”文本框中输入“tdzx.html”，如图3.2.4所示。3、单击“保存”按钮完成框架集网页文档的保存，同时打开“另存为”对话框进行框架网页文档“main.html”的保存，如图3.2.5所示。4、单击“保存”按钮完成框架网页文档的保存，同时打开“另存为”对话框进行框架网页文档“left.html”的保存5、同理，保存框架网页文档“top.html”，即完成所有框架网页文档的保存。第26页《中小型网站建设与管理》图3.2.4保存框架（一）第27页《中小型网站建设与管理》图3.2.5保存框架（二）第28页《中小型网站建设与管理》任务三：制作框架网页内容（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所示。第29页《中小型网站建设与管理》（4）“main.html”框架网页内容的制作。在other文件夹中找到对应的文字素材，并进行文字的编排，保存框架网页，选中框架集后预览，其效果如图3.2.10所示。（5）利用相同的方法完成其他两个“体育资讯”和“电影资讯”的页面，如图3.2.11所示。第30页《中小型网站建设与管理》图3.2.6设置页面属性第31页《中小型网站建设与管理》图3.2.8创建表格图3.2.9left.html页面属性的链接设置第32页《中小型网站建设与管理》图3.2.10框架网页效果图第33页《中小型网站建设与管理》任务四：设置框架属性1、选择“窗口框架”命令，打开“框架”面板，选中框架集，如图3.2.12所示。2、在“属性”面板的“行”栏的“值”文本框中输入“265”，即顶部框架高度为“265”，如图3.2.13所示。3、在“框架”面板中选择嵌套框架集，如图所示。4、在“属性”面板的“列”栏的“值”文本框中输入“180”，如图3.2.15所示。5、设置框架集的网页标题。（1）选择要设置框架集网页标题的框架集“tdzx”。（2）在文档工具栏的“标题”文本框中输入网页标题“第八届北京国际电影体育周”，如图3.2.16所示。第34页《中小型网站建设与管理》图3.2.12框架面板图3.2.13设置框架属性图3.2.14设置框架属性图3.2.16设置框架集网页标题第35页《中小型网站建设与管理》模块三使用AP元素布局网页(一)学习目标掌握并学会利用AP元素布局网页，学会spry构件的使用。(二)任务分析1、为网页设置页面属性；2、创建AP元素布局网页；3、编辑网页内容；4、利用spry构件编辑网页内容第36页《中小型网站建设与管理》图3.3.1AP元素布局网页效果图第37页《中小型网站建设与管理》任务一：为网页设置页面属性1、在DreamweaverCS3起始页中选择“文件新建”命令，打开“新建文档”对话框。2、在“空白页”选项卡中的“页面类型”列表框中选择“HTML”选项，在右侧的“布局”列表框中选择“无”，如图3.3.2所示。3、单击“创建”按钮，完成网页的创建，并保存该网页在files文件夹中，命名为tdlt.html。4、在“属性”面板中设置单击“页面属性”按钮，如图3.3.3所示。5、在弹出的“页面属性”对话框中设置参数如图3.3.4所示。第38页《中小型网站建设与管理》图3.3.2创建网页第39页《中小型网站建设与管理》图3.3.3设置页面属性图3.3.4设置页面属性第40页《中小型网站建设与管理》任务二：创建AP元素布局网页1、选择“布局”工具面板中的“绘制APDIV”，如图3.3.5所示。2、鼠标呈“+”字形，在网页编辑窗口中的任意位置按下鼠标左键不放进行拖动即创建APDIV。在绘制过程中，编辑窗口右下角将动态显示正在绘制的APDIV的大小，如图3.3.6所示，可以边绘制边查看其大小，至合适大小后再释放鼠标。3、创建嵌套A