实验三 使用表格布局页面

《实验三 使用表格布局页面》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、实验三使用表格布局页面浏览器显示效果图：一、实验目的：利用表格布局页面，加强对表格布局页面的练习，设置单元格属性使网页更加规范美观。二、实验内容以及步骤：第1步：打开Dreamweaver，新建一个空白的HTML。第2步：设置背景。在页面属性的外观（CSS）中设置背景颜色。第3步：创建表格。网页布局。根据题目要求对表格单元格合并和拆分。第4步：网页顶部设计。输入文字，对其进行相应的CSS样式处理，以及插入LOGO图片。第5步：网页左边内容设计。显示页面位置“瑞丽模特档案”以及图片

2、idth="296"height="384"/>第6步：网页中间内容设计。上边是用户名和密码以及登录按钮。中间是当前位置，下边是模特资料。输入文字，对其进行相应的CSS样式处理第7步：网页右边内容设计。单元格中插入图片，并在单元格垂直属性下设置“顶端”，以实现两个图片顶部对齐第8步：网页底部相关链接以及版权信息。实验六CSS样式的应用一、实验目的：1．了解CSS样式的分类2．掌握使用CSS标记，设置文字样式。二、实验内容及步骤：1、定义外部CSS样式文件步骤：第1步：新建CSS按照题目要求编写样式代码第2步：新建HTML输入文本第3步：引用外部样式

3、表，CSS样式中选择[附加样式表]，用Link引用创建好的CSS文件。2、给网页添加内部CSS样式步骤：第1步：新建HTML输入文本第2步：CSS样式新建输入选择器名称根据题目要求设置字体的大小，颜色，类型等等。实验八使用APDiv布局网页一、实验目的：掌握层与AP的使用。二、实验内容及步骤：1、利用AP制作网页第1步：图片文字资料准备第2步：新建HTML插入[布局对象]APDiv第3步：网页顶部设计。插入APDiv，设置背景颜色，Div宽度和高度。插入LOGO图片。顶部右边显示“主页”、“自然之旅”、“文化之旅”、“美食之旅”。分别使用四个Div

4、，已达到文字竖型排列的效果，并对文字进行相应的CSS样式处理。第6步：网页左边内容设计。插入一个Div，输入相关介绍“桂林山水”的资料内容。包括文字和图片。第7步：网页右边内容设计。插入一个Div，输入“中国著名的文化古迹”内容。并对文字进行相应的CSS样式处理。浏览器显示效果图：2、利用表格和AP制作网页步骤：第1步：图片文字资料准备第2步：新建HTML插入【布局对象】APDiv第3步：网页顶部设计。插入APDiv，设置宽度高度，插入图片。第4步：插入表格。1行8列，设置宽度和高度，背景颜色，输入“主页”、“水果蛋糕”“卡通蛋糕”“祝寿蛋糕”“婚

5、庆蛋糕”“合作加盟”“大客户合作”。并对文字进行相应的CSS样式处理。第5步：网页左边列表设计。插入APDiv，在Div中插入一个表格，输入文本，并对文字进行相应的CSS样式处理。第6步：网页右边内容设计。插入一个Div，在Div中插入一个表格，第一列和第三列插入蛋糕图片，第二、四列插入蛋糕价格。并对文字进行相应的CSS样式处理。第7步：网页底部相关链接以及版权信息。浏览器显示效果图：三、总结：CSS应用。这次网页设计实验内容主要是包括外部CSS样式的引用和内部CSS样式。要注意的是外部CSS样式文档的创建，需要在CSS下而不是HTML中设置字体，

6、然后在新建的HTML中对需要设置的字体引用这个文件。表格的应用。网页的布局中有表格的制作，所以表格的边框和线条影响到页面的美观。为了解决这个问题，需要把表格单元格的间距和边框的参数改为0。页面各个版块之间的协调性主要是通过单元格属性设置来改变。表格+APDiv应用。Div布局网页可以随意的调整位置和大小，相比单独使用表格布局页面要灵活，并且很方便。两者结合使用，更好的配合网页的协调。姓名：张瑶学号：1240920329