网页制作综合实例.doc

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