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

实验三 使用表格布局页面浏览器显示效果图：一、 实验目的：利用表格布局页面，加强对表格布局页面的练习，设置单元格属性使网页更加规范美观。二、实验内容以及步骤：第1步：打开Dreamweaver ，新建一个空白的HTML。第2步：设置背景。在页面属性的外观（CSS）中设置背景颜色。第3步：创建表格。网页布局。根据题目要求对表格单元格合并和拆分。第4步：网页顶部设计。输入文字，对其进行相应的CSS样式处理，以及插入LOGO图片。第5步：网页左边内容设计。显示页面位置“瑞丽模特档案”以及图片第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样式 新建 输入选择器名称 根据题目要求设置字体的大小，颜色，类型等等。实验八 使用AP Div布局网页一、实验目的：掌握层与AP 的使用。二、实验内容及步骤：1、利用AP制作网页第1步：图片文字资料准备第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应用。