网页设计布局工具综合应用

《网页设计布局工具综合应用》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、实验二网页设计布局工具综合应用一、实验目的1、掌握网页设计布局工具表格、框架和层。2、熟悉设置超链接。3、熟练设置内嵌CSS和外部CSS。二、实验内容（一）、使用表格布局工具完成“乐山美食”网页的制作，效果如图。图1“乐山美食”效果图操作提示：1、在站点中新建网页文件food.html，并把所需素材放入images文件夹中。使用body标签选择器，设置文本类型为“宋体”，大小为12像素。2、页眉部分（如图2）制作请参考教材P47-48。图2页眉效果图3、主体内容部分由部分构成：美食导航（图3）和美食介绍（图4）图3美食导航图4美食介绍1、美食导航制作步骤（1）、插

2、入2行2列表格，宽度为1000像素，边框、填充和间距都设为0。第1行第1列进行行合并，效果如图5所示。图5美食导航基本结构（2）、在第1行第1列输入“乐山美食”文字，水平居中显示。在第2行第2列插入一个1行12列的表格，宽度为100%，分别输入美食名称，如图6所示。图6插入内容后效果（3）、使用CSS进行美化。l步骤1：新建名为title_text（同学们也可自己定义类名）的类名选择器，对“乐山美食”文字及所在单元格进行风格设置：背景色为#FC6，文字色为#060；字体大小为18像素，类型为“华文楷体”，加粗，文字间隔为5像素；单元格边框为实线，细边框，边框色为#

3、3e6508。l步骤2：鼠标点击“乐山美食”所在单元格，光标放入此，再右击鼠标，在弹出的菜单中选择类名title_text，如图7所示。图7应用类名操作l步骤3：设置类名left_border选择器，风格属性为：左边框为实线，1像素，边框色为#FC6。选中美食名称所在的所有单元格，就用此类名选择器。得到橙色间隔线，如图8所示。图8间隔线设置效果图1、美食介绍制作步骤（1）、插入一个13行2列的表格，宽度为1000像素，左列的宽度为220像素，奇数行行高为155像素。（2）、分别在第1、3、5、7、9、11、13行依次放置图片和文本。如图9所示，在第1行第1列插入烧

4、烤图片shaokao.png，图片水平和垂直方向居中，且有1像素宽的边框线，在第2行第2列插入烧烤介绍文本（请从提供的文本中拷贝）。图9美食介绍初步效果图（3）对偶数行进行列合并（4）CSS风格设置l步骤1：设置类名为border_style选择器，对整个表格进行风格设置：边框类型为实线，宽度为1像素，边框色为#3e6508。（这里不能用标签选择器，否则页面上所有的表格都将应用此风格）。l步骤2：对美食介绍文字信息作设置，得到如图10所示效果。所有的“美食名称”为橙色，字体18像素。段落首行有缩进，设置行间距。（请同学们根据效果图进行设置）图10文本风格设置l步骤

5、3：对偶数行进行风格设置。设置类名tr_2选择器，背景色为#99C25A，高度为20像素，并应用。得到如图11所示效果。图11偶数行CSS设置效果1、页脚设置请参考教材P55-56。（二）、使用超链接将网页进行相互链接1、内部超链接：对目前已制作好的页面进行超链接设置。2、外部超链接：在首页的友情链接版块完成外部超链接设置。3、锚记超链接：对“乐山美食”页面进行锚记超链接设置。4、内部超链接和锚记超链接的综合使用：首页的美食版块实现此功能。（三）、使用框架布局工具完成“旅游路线”网页的制作，如图12所示。图12“旅游路线”效果图操作提示：1、请参考教材P72-78

6、制作过程。2、在站点内建立名为travelroute的文件夹，将框架建立中涉及到的网页文件都保存于此文件中。3、左框架加载的“路线”导航信息如图13所示，与课堂上的讲授实例效果类似，但列表标识和内容有所变化。图13旅游路线导航效果图4、右框架加载的“乐山峨眉轻松二日游”部分内容如图14所示，各位同学对这部分内容和风格可作灵活处理。图14右框架加载效果图1、当点击“旅游路线”导航信息时，对应的网页内容都将出现在右框架中，请正确设置超链接及目标窗口。（四）、使用Div+CSS布局完成如图15所示的“旅游酒店”网页（文件名为hotel.html）。图15“旅游酒店”效果

7、图操作提示：1、搭建页面基本结构，分别插入4个DIV标签层，如图16所示。图16页面基本结构navi层是在header之后，main层在navi层之后，请注意插入位置。2、对基本结构进行CSS风格处理（1）#header层l宽度为1000像素，高度为90像素。居中设置，边距上下为0像素，左右自动（auto），如图17所示。图17“方框”风格设置（2）#navi层l宽度为自动，高度为30像素（3）#main层l宽度为1000像素，高度为350像素，水平居中设置。（4）#footer层l宽度为1000像素，高度为100像素，水平居中设置。最终效果如图18所示。图18C

8、SS处理后