实验三 使用表格布局页面.docVIP

实验 浏览器显示效果图： 实验目的： 利用表格布局页面，加强对表格布局页面的练习，设置单元格属性使网页更加规范美观。 二、实验内容以及步骤： 第1步：打开Dreamweaver ，新建一个空白的HTML。 第2步：设置背景。在页面属性的外观（CSS）中设置背景颜色。 第3步：创建表格。网页布局。根据题目要求对表格单元格合并和拆分。 第4步：网页顶部设计。输入文字，对其进行相应的CSS样式处理，以及插入LOGO图片。 第5步：网页左边内容设计。显示页面位置“瑞丽模特档案”以及图片img src=../网页素材/2015.05.07/2.JPG width=296 height=384 / 第6步：网页中间内容设计。上边是用户名和密码以及登录按钮。中间是当前位置，下边是模特资料。输入文字，对其进行相应的CSS样式处理 第7步：网页右边内容设计。单元格中插入图片，并在单元格垂直属性下设置“顶端”，以实现两个图片顶部对齐 第8步：网页底部相关链接以及版权信息。 实验六 CSS样式的应用 一、实验目的： 1．了解CSS样式的分类 2．掌握使用CSS标记，设置文字样式。 二、实验内容及步骤： 1、定义外部CSS样式文件 步骤： 第1步：新建 CSS 按照题目要求编写样式代码 第2步：新建 HTML 输入文本 第3步：引用外部样式表，CSS样式中选择 [附加样式表]，用Link引用创建好的CSS文件。 2、给网页添加内部CSS样式 步骤： 第1步：新建 HTML 输入文本 第2步：CSS样式 新建 输入选择器名称 根据题目要求设置字体的大小，颜色，类型等等。 实验第2步：新建 HTML 插入[布局对象] AP Div 第3步：网页顶部设计。插入AP Div，设置背景颜色，Div宽度和高度。插入LOGO图片。顶部右边显示“主页”、“自然之旅”、“文化之旅”、“美食之旅”。分别使用四个Div，已达到文字竖型排列的效果，并对文字进行相应的CSS样式处理。 第6步：网页左边内容设计。插入一个Div，输入相关介绍“桂林山水”的资料内容。包括文字和图片。 第7步：网页右边内容设计。插入一个Div，输入“中国著名的文化古迹”内容。并对文字进行相应的CSS样式处理。 浏览器显示效果图： 2、利用表格和AP制作网页 步骤： 第1步：图片文字资料准备 第2步：新建 HTML 插入【布局对象】 AP Div 第3步：网页顶部设计。插入AP Div，设置宽度高度，插入图片。 第4步：插入表格。1行8列，设置宽度和高度，背景颜色，输入“主页”、“水果蛋糕”“卡通蛋糕”“祝寿蛋糕”“婚庆蛋糕”“合作加盟”“大客户合作”。并对文字进行相应的CSS样式处理。 第5步：网页左边列表设计。插入AP Div，在Div中插入一个表格，输入文本，并对文字进行相应的CSS样式处理。 第6步：网页右边内容设计。插入一个Div，在Div中插入一个表格，第一列和第三列插入蛋糕图片，第二、四列插入蛋糕价格。并对文字进行相应的CSS样式处理。 第7步：网页底部相关链接以及版权信息。 浏览器显示效果图： 三、总结： CSS应用。这次网页设计实验内容主要是包括外部CSS样式的引用和内部CSS样式。要注意的是外部CSS样式文档的创建，需要在CSS下而不是HTML中设置字体，然后在新建的HTML中对需要设置的字体引用这个文件。 表格的应用。网页的布局中有表格的制作，所以表格的边框和线条影响到页面的美观。为了解决这个问题，需要把表格单元格的间距和边框的参数改为0 。页面各个版块之间的协调性主要是通过单元格属性设置来改变。 表格+AP Div应用。Div布局网页可以随意的调整位置和大小，相比单独使用表格布局页面要灵活，并且很方便。两者结合使用，更好的配合网页的协调。 姓名：张瑶 学号：1240920329