南阳理工网页设计实验指导书Word文档下载推荐.docx
- 文档编号:1369292
- 上传时间:2023-04-30
- 格式:DOCX
- 页数:16
- 大小:668.90KB
南阳理工网页设计实验指导书Word文档下载推荐.docx
《南阳理工网页设计实验指导书Word文档下载推荐.docx》由会员分享,可在线阅读,更多相关《南阳理工网页设计实验指导书Word文档下载推荐.docx(16页珍藏版)》请在冰点文库上搜索。
实验步骤:
(1)建立一个本地站点
(2)在站点中建立一个网页文件index.htm并打开进行编辑。
(3)输入书中全部的文字内容。
(5)对文字进行排版。
(6)插入水平线,并设置水平线的颜色。
(8)插入图片
(9)插入日期和时间
(10)打开页面属性对话框
(11)设置网页的背景图像。
(12)制作其它网页并浏览各个网页的实际效果(内容自由发挥)。
实验要求:
1、实验前认真预习,熟练掌握有关概念和知识。
实验过程中记录发生的现象并分析原因。
实验完毕将所有文件打包交给老师,并保存设计结果供下一个实验使用。
2、所有实验环节均由每位学生独立完成,严禁抄袭他人实验结果,若发现有结果雷同者,按实验课考核办法处理。
3、将站点进行备份留下节课使用
4、将站点文件夹上传到教师机E:
\zuoye目录下
图1-1
1、超链接的基本定义及基各种超链接的创建和编辑操作
2、利用表格进行文本的整齐排列和自由的图文混排
3、在整个表格内使用背景图像和色彩。
1、利用上次实验的内容制作超级链接,包括文本、图像、热区以及锚点链接。
2、制作两个利用表格定位的网页
3、设置超链接将站点中的网页链接起来。
实验步骤与要求:
(3)最外层的表格宽度为700像素,嵌套的表格宽度为100%,整体上分为上下两个表格。
(4)上表格为2行1列的表格如图一所示。
图2-1布局表格一
(5)下表格为4行3列的表格如图二所示。
图2-2布局表格二
(6)将下表格的单元格进行合并,调整为如图三所示
图2-3布局表格三
(7)在下表格的左侧嵌套7行1列的表格,在下表格的右侧上边单元格内嵌套1行1列的表格,在右侧下边单元格嵌套2行4列的表格。
如图四所示。
图2-4布局表格四
(8)在左侧嵌套的表格最下面一个单元格嵌套5行2列表格并合并如图五所示。
图2-5布局表格五
(9)上表格的第二行和下表格右侧第二行制作水平线,将单元格的高度设为“2”;
下表第二列制作垂直线,宽度值勤为“2。
”
(10)向表格内添加图像和文字,将所有表格的边框值设置为“0”。
(11)浏览网页的实际效果。
(12)设计另一个网页,网页效果图如图2-6所示。
(13)用超链接将两者链接起来
(14)浏览网页的实际效果,并测试超链接的有效性。
图2-6
一、实验目的:
(1)框架网页的创建和编辑操作
(2)目标框架的设定
二、实验内容
本实验的内容主要是利用框架结构来建立网页,并设置目标框架。
1.建立一个本地站点,包括2-3个网页
2.用框架结构为网页布局,其中一个网页为下图,其他网页自由发挥.
3.设置网页间的超链接,并设置目标框架.
三、实验步骤与要求
实验前认真预习,熟练掌握有关框架网页的基础概念和知识。
(1)新建一个空白文档,创建一个“上方及左侧嵌套”,右侧下方框架为主框架(mainFrame)。
(2)保存框架及框架集
(3)在顶部框架中插入图像
(4)左侧框架中设置页面属性背景图像。
(5)在左侧框架中插入7行1列无边框架和背景表格。
(6)在表格中插入导航图像按钮。
(7)在右侧框架中插入文字、图像等网页元素。
(8)制作两个网页分别命名为dianyin.html和jingyue.html,保存在同一站点内。
(9)为左侧导航按钮制作超链接,设置链接目标为“mainFrame”。
(10)单击菜单栏“文件”|“保存全部”
(11)预览网页并检测超链接是否在指定框架内打开。
(1)熟悉表单的各元素
(2)创建表单网页实例
本实验的内容主要是熟练表单的基本操作,并制作表单网页。
2.其中一个网页为表单网如下图,其他网页为中含中表单项目自由发挥制作.
3.设置超链接将站点中的网页链接起来。
表单网页一
表单网页二
实验前认真预习,熟练掌握有关概念和知识。
实验完毕将所有文件打包交给老师。
(3)绘制布局表格
(4)在表格中插入相应的表单元素。
(5)对网页内容进行排版。
(6)浏览网页的实际效果。
(7)在站点中建立一个网页文件liuyan.htm并打开进行编辑。
(8)绘制布局表格
(9)在表格中插入相应的表单元素。
(10)对网页内容进行排版。
(11)浏览网页的实际效果。
1、掌握<
head>
<
/head>
的<
title>
标记和<
meta>
标记。
2、掌握使用<
body>
标记设置网页背景颜色和文颜色。
3、掌握使用<
font>
标记设置文字的属性
4、掌握在网页中插入背景图片
5、掌握在网页中插入水平线,并设置水平线的属性
6、掌握给各种对象添加超链接
7、掌握在网页中插入背景音乐
1、制作一个简单的网页5-1.htm,用记事本编辑,内容为“课程简介”信息,如图所示。
要求:
Ø
搜索关键字为“网页设计”、“网站建设”、“课程信息”,标题为“网页设计与网站建设课程网站”。
网页背景为“#660000”,文本颜色为“白色”,标题加粗,文本需分段表示。
在“课程简介”标题和正文中间插入一条水平线,其颜色设置为“#FFFF00”。
2、通过记事本编辑网页5-2.htm,添加背景图片“bg,jpg”,实现如图5-2所示的效果。
3、通过记事本编辑网页5-2.htm,在上面的基础上插入图片“”,并添加替换文本信息“李白”。
4、通过记事本编辑网页5-2.htm,插入背景音乐“x1.mid”。
5、通过记事本编辑网页5-2.htm,给“李白”图片添加超链接,链接到
图5-1
图5-2
一、实验目的
1.掌握在网页中应用CSS的方法。
2.掌握CSS基本语法。
3.熟悉CSS属性。
4.掌握使用CSS布局网页的方法。
二、实验内容
1.为“网达公司”网页添加CSS样式。
2.为“心灵之间”网页添加CSS样式。
3.使用CSS实现“webquest”网页布局。
4.使用CSS实现“固定宽度两栏”网页布局。
5.使用CSS实现“满屏三栏”网页布局。
三、操作步骤
(1)新建样式,重新定义body标签,将样式保存在外部文件style.css中。
body标签的样式定义为:
文字9pt,行高150%。
(2)新建样式,重新定义td标签。
td标签的样式定义为:
(3)新建样式,重新定义超链接样式。
(4)新建样式,自定义一个类,用于设置文字为白色。
复制style.css文件至“心灵之间”文件夹。
打开index.htm,并链接外部样式表文件style.css。
(1)查看webquest网页结构,分为container,header,content,footer几个部分。
(2)定义body样式。
(3)定义#container样式(宽度为760像素,居中)。
(4)定义#header样式。
(5)定义#content样式(宽度为700像素,居中)。
(6)定义#footer样式。
(7)定义其它样式。
(1)查看网页结构,分为outer,bodyblock,hdr,bar,l-col,cont,ftr
几个部分。
(3)定义#outer样式。
(4)定义#bodyblock样式。
(5)定义#hdr样式。
(6)定义#bar样式。
(7)定义#l-col样式。
(8)定义#cont样式。
(9)定义#ftr样式。
(10)定义其它样式。
(1)查看网页结构,分为hdr,lh-col,rh-col,c-col,ftr几个部分。
(3)定义#hdr样式。
(4)定义#lh-col样式。
(5)定义#rh-col样式。
(6)定义#c-col样式。
(7)定义#ftr样式。
(8)定义其它样式。
四、思考题
1.在网页上应用CSS的四种基本方法。
2.类选择符与ID选择符的区别。
3.使用伪类时的注意事项。
4.CSS盒模型中各参数的对网页布局的影响。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 南阳 理工 网页 设计 实验 指导书