《网页制作综合实例.docx》由会员分享，可在线阅读，更多相关《网页制作综合实例.docx（9页珍藏版）》请在三一文库上搜索。
1、最新资料推荐网页制作综合实例16.1 制作前的准备工作首先在 E 盘上建立一个文件夹（如玫瑰信使），再在其下建立images 文件夹和css文件夹。将“ ch16/images”文件夹下的所有图像拷贝到“玫瑰信使/images”文件夹下。建立站点和规划目录结构、指定默认图像文件夹主页制作前的准备工作，有定义站点和设计网站结构的目录，还有就是要将网页设计制作中需要用到的所有图像素材整理好，最好是放在站点根目录中的一个文件夹中，如 images。这样便于设计制作时的选取使用，也不易造成素材的混乱。如下图：规划站点目录结构为站点中使用的图像文件指定一个默认图像文件夹，如下图：设置站点中的默认图像文件
2、夹在站点下建立一个主页文件index.html 。16.2 设置页面属性及样式16.2.1 页面属性设置1.在站点资源管理器的本地视窗中，选择并双击已经定义的首页面文件ch16index.asp。1最新资料推荐2在打开的index.asp 文件的文档窗口中，选择“修改”-“页面属性”菜单项，打开“页面属性”对话框。设置网页标题为： “家庭百科”设置背景图像为images/bj.gif将“左边界” 、“顶部边界” 、“边界宽度” 、“边界高度”项均设为5。3设置完成后，单击“确定”按钮，确定操作返回到index.asp 文档窗口。16.2.2 定义 CSS 样式文件定义 body 样式1. 在
3、index.htm 文档窗口中， 依次单击 “窗口” -“ CSS 样式”菜单项，打开“ CSS样式”面板。选择“新建CSS 样式”菜单命令。2.打开“新建CSS 样式”对话框， “类型”选择“重定义HTML 标签”，在“标签”框中选择或输入body，“定义在”选择“ （新建样式表文件） ”。3. 单击“确定”按钮，在弹出的“保存样式表文件为”对话框中，选择样式文件保存的路径（站点下的CSS 文件夹），输入样式文件名（这里存为css）。4.单击“保存”按钮，在出现的样式定义对话框中选择“类型”，在“字体”下拉列表框中选择“宋体”;在“大小”下拉列表中选择“9”，后面的单位下拉列表框中选择“点数
4、（ pt）”度量单位。5.单击“确定”按钮，便完成对body 标记的定义定义 td定义 td 的方法和定义body 一样，在“新建CSS 样式”对话框中将“类型”选择为“重定义 html 标签”；在“标签”框中选择或输入 td。在定义样式对话框中将字体设置为宋体 9 磅字。定义文档的链接颜色1. 单击“窗口” - “ CSS 样式”菜单项，打开“ CSS 样式”面板。2.单击“ CSS 样式”面板中的“新建样式”按钮，打开“新建CSS 样式”对话框。“类型”选择“使用CSS 选择器”；“选择器”框中选择或输入a:active（选中超链接状态）；“定义在”框中选择CSS，这样便可和前面定义的样式
5、存放在一起，供别的文档2最新资料推荐使用。3. 单击“确定” 按钮，在出现的对话框中， 将该超链接状态的颜色设置为 #334dcc。4.单击“确定”按钮，便完成了超链接状态的颜色设定。返回到“新建CSS 样式”对话框中，在“选择器”框中选择或输入a:hover（鼠标经过超链接状态）。5. 单击“确定”按钮，在出现的对话框中，将该鼠标经过超链接状态的颜色设置为 #ff0000 。6. 单击“确定”按钮返回到“新建CSS 样式”对话框，可以定义其他的样式。7. 按照相同的方法，完成下列超链接颜色的设置。a:link ：超链接的正常状态，没有任何动作的时候；颜色设置为：#cc6633a:visete
6、d：访问过的超链接状态；颜色设置为#334dcc。完成这些标签样式的定义，基本能满足一般网页的需要了。由于将这些标记保存为样式文件，所以可供多个文档共同使用。16.3 制作一个完整的个人主页完成页面设置后可进入网页具体制作阶段。在本页面的制作过程中用到聊表格、嵌套表格，多处用到对表格中单元格的合并、拆分等技巧性设置。布局页面每个区域所采用的表格，上下是孤立的，而左右保持了一定的嵌套关系。这样做的好处是：上下孤立有助于提高网页下载的速度；左右使用嵌套表格有助于对网页元素的定位和特殊页面效果的设计。16.3.1 页眉区制作该页眉区用一个1 行 3 列的表格来制作，在第一列单元格中插入该网站的标志，
7、第二列单元格中插入该网站的广告，第三列单元格中插入显示当前日期的程序代码。页眉区制作步骤如下：1. 将光标停留在 index.asp 文档窗口中，选择“插入” -“表格”命令。2.在弹出的“插入表格”对话框中，设置插入一个1 行 3 列，宽度为750 像素的表格，其余设置为0，单击“确定”按钮。3. 选中刚插入的表格，选择“窗口” -“属性”命令，打开“属性”面板，在“属性”面板中将表格的高度设置为 60，表格对齐方式为居中。4.设置单元格。将第一列单元格的宽度设置为139 像素；第二列单元格的宽度设置为4683最新资料推荐像素；第三列单元格的宽度设置为143 像素。单元格的对齐方式设置为水平
8、居中对齐，垂直中间。5.插入网站标志。将光标停留在第一列单元格中，选择“插入”“图像”菜单命令，在“选择图像源”对话框中，选择“images”文件夹内的logo.gif 标志图像，单击“确认”按钮插入网站标志。6. 在第二列单元格中，插入 images 文件夹内的 head.gif 网站广告图像。7. 完成“显示当前日期” 。该部分使用代码来完成。在“属性”面板中将第三列单元格的对齐方式设置为水平居中、垂直中间。在“代码”视图，将“显示日期”的代码插入单元格。16.3.2 导航区的制作导航区的制作从整体上可分为上下两部分，分别用表格来完成。上部导航的制作上部导航由 1 行 3 列的表格构成。其
9、中第一列用于设置“跑马灯”效果；第二列设为“设为首页”；第三列设置为“加入收藏夹具体步骤为：1. 选中页眉区的表格，按下键盘中的右方向键，使得光标置于页眉区表格的右边。2.在文档窗口的主菜单栏选择“插入” “表格”菜单命令，插入一个1 行 3 列的表格，填充 0，间距 0，边框粗细0，宽度 750 像素。3. 将插入表格的第 1，2，3 列的宽度依次设置为 450、 150、150 像素。各单元格的高度设置为 20 像素。单元格的对齐方式为水平左对齐，垂直居中；整个表格居中对齐。4. 切换到代码视图，在第一列单元格中插入“滚马灯”代码。5.在设计视图中，在第二、第三列单元格中分别插入image
10、s 文件夹下的home.gif 和 sc.gif图像。6. 在代码视图中，在第二列单元格“首页面图像”右边插入“设为首页”的代码；在第三列单元格“加入收藏”图像右边插入“加入收藏”的代码。下部导航的制作下部导航由1 行 3 列表格构成，但在第三列单元格中海包括一个嵌套表格。具体步骤是：1. 选中上部导航区表格，按键盘中右方向键，使得光标置于表格的右边。4最新资料推荐2.选择“插入” -“表格”命令，插入1 行 3 列的表格，表格宽度为750 像素，其余均为0.3.将表格高度设置为30 像素。 1 3 列单元格的宽度依次为：150 像素、 19 像素、 581 像素。第一列单元格的对齐方式为水平
11、居中、垂直靠下，并将该单元格的背景颜色设为#ea7609，最后输入“百科首页”文本，文本的颜色设置为白色。在第二列单元格中插入 images 文件夹下的jiao.gif 图像。在第三列单元格中插入1 行 7 列的表格，并作如下图的设置。4. 设置嵌套表格。选中所插入的嵌套表格，在“属性”面板中将表格的对齐方式设置为居中对齐，高度设置为22 像素，背景颜色设置为#ff9966 ，边框颜色为#ffffff 。5. 设置嵌套表格中的单元格。选中所有单元格，打开“属性”面板，将各单元格的高度设置为 18 像素；宽度设置为 80 像素，对齐方式为水平居中、垂直底部。6.输入嵌套表格中的各单元格对应导航文
12、本：“家庭理财” 、“家庭医生” 、“居室装饰” 、“追求娱乐”、“购物防伪” 、“留言板”、“浪漫一刻” ，并将文本的颜色设置为黑色。16.3.3 主内容一区的制作主内容一区从左到右共包含3 部分，分别是：“搜索引擎” 、“家庭理财” 、“动态公告” 。该区最外层是一个1 行 4 列的表格，通过在第1、 3 和 4 列单元格内嵌套表格完成。首先插入一个1 行 4 列的表格，步骤是：1. 选中下部导航栏表格，并按键盘中的右方向键，使得光标置于该表格的右边。2.插入 1 行 4 列的表格，表格宽度为750 像素，其余各项设置为0。将表格居中对齐，并将第 1， 2， 3， 4 列单元格的宽度分别设
13、置为172、 18、418 和 142，单位均为像素。各单元格的高度设置为130 像素。5最新资料推荐制作“搜索引擎”区1.在 1 行 4 列表格的第一列单元格插入一个4行 1 列的嵌套表格。2.设置嵌套表格，将嵌套表格的宽度设为172像素，高度均设置为130 像素。3.设置单元格。 在嵌套表格的第一行单元格内插入images/sohus.gif 图像；在第二、 四行单元格内插入 images/c.gif 图像，并将该单元格的背景颜色设置为#ff6633 ，高度设置为 1像素；最后将第三行单元格的背景图像设置为images/bj1.gif 图像。4. 插入搜索引擎表单。将光标停留在嵌套表格的第
14、三行单元格中，对齐方式设置为水平居中、垂直考上，切换到代码视图，插入“搜索引擎”代码制作“家庭理财”区要完成“家庭理财”区的制作，请执行下列操作：1、 在该区的第三列单元格内插入一个5 行 1 列的表格。 表格中各行单元格的高度均设置为26 像素，表格的宽度设置为98% ，并将该表格的其余项设置为0，表格的对齐方式设置为居中。2、 选中所有单元格，将各单元格的对齐方式设置为靠左对齐、垂直中间，并在第一行单元格中插入 images/lic.gif 图像，其他行单元格中输入对应的文本（参考已完成的最终页面）。制作“动感公告”区“动感公告”区的制作可以使用与“搜索引擎”表格相同的方法完成，其中第三行
15、单元格的背景图像修改为images/bj2.gif 图像，表格的宽度设置为142 像素。然后插入“本站简介”代码片段即可。具体操作如下：1、 将主内容一区表格的第四列单元格对齐方式设置为水平左对齐、垂直靠上，并将光标停留在此单元格内。2、 选择代码视图，将“本站简介”代码片段插入。3、 完成主内容一区的制作，预览看实际效果。16.3.4 主内容二区的制作主内容二区从左到右共包含4 部分，分别是“天天饮食” 、“家庭医生” 、“通信信箱” 、“本站导航”。该区最外层是一个2 行 4 列的表格，然后在第1、 3 和 4 列单元格内嵌套表格完成。首先插入一个2 行 4 列的表格，请执行以下操作步骤：
16、1、 选中“主内容一区”的表格，并按键盘中的右方向键，使得光标置于该表格的右边。2、 插入 2 行 4 列的表格，表格的宽度设置为750 像素，其余各项设置为0.将表格的对齐方6最新资料推荐式设置为居中对齐，并将第 1、2、3、4 列单元格的宽度分别设置为172、18、418 和 142，单位均为像素。然后对第2 行单元格的第3 列与第 4 列进行合并，对第一列单元格进行合并，对第二列单元格进行合并。“天天饮食”区的制作“天天饮食”区的制作步骤如下：1、 将主内容二区表格的第1 列单元格的对齐方式设置为水平左对齐、垂直靠上，并将光标停留在此单元格内。2、 在该单元格中插入一个4 行 1 列的嵌
17、套表格。3、 设置嵌套表格。将嵌套表格的宽度设置为172 像素，高度均设置为140 像素。4、 设置嵌套表格中的单元格。在嵌套表格的第1 行单元格内插入images/yins.gif 图像；在第 2、4 行单元格内插入images/c.gif 图像，并将该单元格的背景颜色设置为#ff6633 ，高度设置为1 像素。最后ijiang 第 3 行单元格的背景图像设置为images/bj1.gif 图像。5、 插入天天饮食内容。在“天天饮食”表格的第3 行单元格内插入一个4 行 1 列的表格，表格的宽度设置为100%，然后再对应的单元格内输入相应的文本。“家庭医生”区的制作1、 在主内容二区的第1
18、行的第 3 列单元格中插入一个7 行 1 列的表格。 其中表格的宽度设置为 100% ，高度设置为150 像素。2、 设置单元格。将各个单元格的对齐方式设置为：水平左对齐、垂直居中。3、 在第 1 行单元格中插入images/jtys.gif 图像，并在各单元格中输入相应的文本。“通信信箱”区的制作在主内容二区表格的第1 行的第 4 列中创建“通信信箱”区，该区的制作比较简单，可以使用与“动感公告”相同的方法。惟一的区别是在第1 行单元格中插入images/email.gif 图像，并输入相应的“通信信箱”文本。“本站”导航区的制作1、 将光标停留在主内容二区表格的第2 行第 3 列单元格中，
19、插入images/daohang.gif 图像，然后再插入一个6 行 2 列的表格，表格的高度设置为100% ，边框设置为1.2、 将 1、 3、 5、6 行单元格的高度设置为20 像素， 2、 4 行单元格的高度设置为30 像素，宽度均设置为50% 。3、 在对应的单元格内输入相应的文本（参照完成页面）16.3.5 版权区的制作7最新资料推荐版权区的制作相比起各个主内容区要简单得多，可用一个3 行 1 列的表格完成。步骤如下：1、 将光标停留在主内容二区的右边，插入一个3 行 1 列的表格，表格的宽度设置为750 像素，其余各项设置为0.2、 设置表格和单元格。表格对齐方式设置为水平居中对齐
20、、垂直中间；其中第1、2、3 行单元格的高度依次设置为30 像素、 20 像素、 30 像素。各单元格的对齐方式设置为水平居中对齐、垂直中间。3、 插入水平线。将光标停留在第2 行单元格中，在文档窗口的菜单栏中依次选择“插入”“水平线”菜单命令，插入水平线。4、 设置水平线。选中水平线，在“属性”面板中设置水平线，其中高度设置为1，宽度设置为 70%，对齐方式设置为居中对齐。5、 在表格的对应单元格中输入版权区所对应的内容（参照完成页面）。6、 完成。16.4 网页特效16.4.1 弹出“小人”网页特效具体操作步骤如下：1、 在文档窗口中打开代码视图。2、 在代码编辑窗口中的 和 之间，插入“
21、小人”的代码。注意，一般插入在 和 之间任何位置都可以，但是考虑到网页元素的完整性，不要在一个元素之间插入这段功能代码，一般插入在网页元素的最前面。16.4.2 实现网页中飘动的图层特效步骤如下：1、 打开页面。2、 切换到代码视图。3、 在代码编辑状态下，在 和 之间插入“飘动的图层”代码。4、 查看“飘动的图层” 功能代码， 在代码中查找关于图像的链接。具体方法可以用“查找”命令，搜索img 。5、 将该图像的链接制定为自己需要图像的链接即可。这里指定的是存放在images 文件夹下的 logo.gif 图像。可将图像链接替换成自己的图像。注意，如果使用的是绝对的图像路径，不需要用引号引起来。如src=http:/ 。8