实验62 网页中的CSS样式表格布局表单.docx
- 文档编号:12892914
- 上传时间:2023-06-09
- 格式:DOCX
- 页数:13
- 大小:2.36MB
实验62 网页中的CSS样式表格布局表单.docx
《实验62 网页中的CSS样式表格布局表单.docx》由会员分享,可在线阅读,更多相关《实验62 网页中的CSS样式表格布局表单.docx(13页珍藏版)》请在冰点文库上搜索。
实验62网页中的CSS样式表格布局表单
实验6.2网页中的CSS样式、表格布局、表单
一、实验目的
掌握
1.网页中CSS样式的编辑方法
2.表格网页布局
3.网页中的基本表单元素
二、实验要求
1.掌握网页中CSS样式的编辑方法
2.掌握使用表格进行网页布局的基本方法
3.掌握基本的表单元素
三、实验内容和步骤
(1).【任务】掌握CSS样式的设置
CSS的主要功能是通过对HTML选择器进行设置,来实现对网页中的字体、字号、颜色、背景、图像及其他元素的控制,使网页能够完全按照设计者的要求来显示。
将实验6.2文件夹中的“resource”文件夹拷贝到某个盘的根目录下,如D:
\。
Step1.在Dreamweaver中建立站点
以实“D:
\resource\exercise1”文件夹为站点的根目录,在Dreamweaver中建立站点。
Step2.在Dreamweaver中打开初始网页文件
在Dreamweaver中打开站点中的index.html网页文件。
网页文件中,包含有基本的标题1、标题2、段落等元素。
预览页面。
图1index.html网页文件
Step3.设置网页标题
设置网页标题为“冰雪奇缘”。
Step4.网页主体内容的布局设置
网页主体内容位于id为“container”的div元素中。
通过设置这一元素的宽度和外边距margin属性,可以使得这一元素在网页中水平居中。
同时,设置这一元素的背景颜色为白色。
在“CSS样式”面板中创建选择器类型为ID(仅用于一个HTML元素),选择器名称为“#container”的CSS样式,如图2所示。
图2CSS样式面板
在打开的“#container的CSS规则定义”对话框中,设置“背景”中的“background-color”为白色#FFF,如图3所示。
图3设置背景
接着在“方框”类别中,设置这一元素的宽度Width为980像素,设置外边距Margin的上、下为0,左、右为auto,这样浏览器在显示这一网页时,会把这一元素显示在网页的中央。
图4设置宽度和水平居中
Step5.保存网页文件并预览,查看目前完成的效果。
Step6.插入图像
在Dreamweaver的设计视图中,在第一段“冰雪奇缘”后,通过“插入”菜单或面板中的“图像”功能,插入站点“images”文件夹下的“top.jpg”文件。
也可以通过拖拽“文件”面板中的图像到设计视图的方式来完成。
预览网页。
图5插入图像
Step7.设置网页的背景图像
网页的背景图像通过设置body元素的CSS样式来完成。
在属性面板中单击“页面属性”按钮,在打开的“页面属性”对话框中,选择“外观(CSS)”设置背景图像(background-image)为站点“images”文件夹下的“bg.jpg”文件。
图6网页的背景图像
完成后效果如图7所示。
图7设置网页背景后的效果
Step8.设置标题1元素的CSS样式
通过CSS改变标题1元素在浏览器中的默认样式。
在“CSS样式”面板中创建h1的样式,在打开的“h1的CSS规则定义”对话框,设置字体系列为“微软雅黑”、“黑体”、“宋体”,字体大小为24px,通过“区块”类别中的“Text-align”为“center”设置标题1元素水平居中。
Step9.设置段落元素的CSS样式
按照同样的方式,通过“CSS样式”面板创建段落p样式,设置段落元素的CSS样式,使得段落元素的文字大小为14像素、首行缩进2个字符。
完成后,网页效果如图8所示。
图8网页整体效果
(2).【任务】掌握表格布局
表格除了可以整齐、有序地格式化数据之外,还可以用来布局网页,即精确定位网页元素,如文本、图片,视频等的位置。
通过对表格布局的掌握,完成如图9所示的网页。
图9表格布局的网页
Step1.在Dreamweaver中建立站点
以“D:
\resource\exercise2”文件夹为站点的根目录,在Dreamweaver中建立站点。
Step2.在站点中新建一个html文件,并保存为index.html。
Step3.设置网页标题为“国家大剧院”。
Step4.使用【插入】菜单“表格”命令,在index.html文件中创建一个4行1列的表格,表格宽度设为800px,表格边框粗细设置为0,单元格边距和单元格间距均为零。
设置表格水平居中对齐。
Step5.在第二行的单元格中插入一个1行6列的表格,表格宽度为100%,表格边框粗细设置为0,单元格边距和单元格间距均为零。
Step6.把第3行的单元格拆分为左右2列,同时把右侧的单元格拆分为3行。
Step7.右侧拆分后的单元格再进行拆分,结果如图10所示。
图10表格布局结构
Step7.在第一行的单元格中添加图像文件“images\logo.jpg”。
在第二行添加导航文本信息:
“首页、新闻动态、艺术交流、演出购票、参观游览、会员俱乐部”。
参考图9在相应的单元格添加上文本和其他图像文件。
Step8.选中第二行单元格中的表格,把它命名为“nav”
图11命名表格
Step9.通过CSS样式面板创建选择器类型为“ID”,选择器名称为“#nav”的样式。
设置“#nav”的样式为:
文本颜色设置为白色(#FFF),背景颜色为蓝色(#003366),水平居中。
Step10.第三行的“新闻快讯”所在单元格,标题“新闻快讯”设置为标题1格式,其他设为无序列表(项目符号使用默认圆点),单元格背景色设置为灰色(#CCCCCC),单元格内容垂直方向“顶端对齐”。
Step11.“特别推荐”单元格文本设置为标题2元素,白色,单元格背景色设置为深灰色(#666666),单元格内容水平方向居中对齐。
Step12.最后一行的单元格的文本居中,文本颜色为白色,设置单元格背景色为深蓝色(#003366)。
Step13.设置右下角的6张图像文件的大小都为160*180像素大小。
Step14.调整整个页面的表格,使页面更整齐,预览网页。
(3).【任务】掌握基本的表单网页
通过表单工具栏中的表单,文本,密码,文本区域,复选框,复选框组,单选按钮,单选按钮组,选择,按钮等表单元素,完成一个电影会员注册网页,网页预览效果如图11所示:
图11电影会员注册表单网页
Step1以“D:
\resource\exercise3”文件夹为站点的根目录,在Dreamweaver中建立站点。
在站点中新建一个html文件,并保存为“reg.html”。
Step2设置网页标题为“电影会员注册”。
Step3单击【插入工具栏】表单标签中的“表单”按钮,在网页中添加一个表单。
在页面编辑区域显示一个红色的虚线矩形区域。
Step4把光标放置在表单区域中,添加表单元素。
为了使表单网页整齐,需要借助表格布局表单元素。
在页面中创建一个11行2列,宽度为800像素,边框粗细为0像素的表格,并设置表格居中对齐。
合并第一行和最后一行的单元格,并设置其背景色为灰色,单元格内容水平居中对齐,并参照预览效果图添加相应文本。
Step5添加“用户名”所在行的文本元素。
把光标放置在需要添加元素的单元格,使用菜单【插入】【表单】【文本】,或者单击【插入工具栏】表单标签中的“文本”按钮。
删除Dreamweaver自动添加的英文标签。
设置“用户名”的长度为“45”个字符,初始值为“请输入邮箱”。
Step6添加“密码”和“确认密码”所在行的密码元素。
把光标放置在需要添加元素的单元格,使用菜单【插入】【表单】【密码】,或者单击【插入工具栏】表单标签中的“密码”按钮。
删除Dreamweaver自动添加的英文标签。
设置它们的长度都为“40”个字符。
Step7添加照片所在行的“文件”控件。
把光标放置在“照片”所在行的右侧单元格,单击【插入工具栏】表单标签中的“文件”按钮,删除Dreamweaver自动添加的英文标签。
尝试在代码视图中,仿照用户名控件,设置其“size="45"”。
Step8添加“性别”所在行的单选按钮。
把光标放置在“性别”所在行的右侧单元格,单击【插入工具栏】表单标签中的“单选按钮组”,标签分别是:
男,女和保密。
点击“确定”后删除前两个单选项后的换行,从而使得三个单选按钮在同一行。
将“保密”设置为选中。
Step9添加“职业”所在行的下拉菜单。
把光标放置在“职业”所在行的右侧单元格,单击【插入工具栏】表单标签中的“选择”。
添加完成之后,其中的值是空的,在属性面板上单击“列表值”按钮。
在弹出的对话框中添加“请选择职业、在校学生、教师、工程师、律师、其他”6个列表值。
单击确定完成下拉菜单的创建。
删除Dreamweaver自动添加的英文标签。
Step10添加“喜欢的电影”所在行的复选框。
把光标放置在“喜欢的电影”所在行的第2个单元格,单击【插入工具栏】表单标签中的“复选框组”,添加4个复选项:
大陆、欧美、港台、其他。
点击“确定”后删除前三个复选项后的换行,从而使得四个复选框在同一行。
Step11添加“个人介绍”所在行的文本区域。
把光标放至在“个人介绍”所在行的第2个单元格,单击【插入工具栏】表单标签中的“文本区域”,添加完成之后选中“文本区域”,在属性面板设置文本区域的字符宽度为45,行数为5。
Step12添加“同意协议并提交”和“重置”按钮。
把光标放置在第10行第2个单元格,单击【插入工具栏】表单标签中的“提交按钮”,则在页面上添加了一个“提交”按钮,继续添加“重置按钮”。
选中“提交”按钮,在属性面板设置按钮的值“同意协议并提交”。
Step13.保存网页,按F12键预览网页。
可以调整表格行的高度以接近效果图显示效果。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 实验62 网页中的CSS样式表格布局表单 实验 62 网页 中的 CSS 样式 表格 布局 表单