HTML网页设计基础实验指导书.docx
- 文档编号:24524867
- 上传时间:2023-05-28
- 格式:DOCX
- 页数:13
- 大小:274.40KB
HTML网页设计基础实验指导书.docx
《HTML网页设计基础实验指导书.docx》由会员分享,可在线阅读,更多相关《HTML网页设计基础实验指导书.docx(13页珍藏版)》请在冰豆网上搜索。
HTML网页设计基础实验指导书
HTML网页设计基础实验指导书
序号
实验项目名称
学时
实验类型
选修类别
每组学生数
1
网页设计基础及HTML基本标签
2
验证性
必修
1
2
HTML文本格式的应用
2
验证性
必修
1
3
HTML链接的应用
4
验证性
必修
1
4
HTML表格和列表的应用
4
验证性
必修
1
5
HTML表单与框架的应用
4
验证性
必修
1
6
HTML和CSS综合应用
2
设计性
必修
1
7
个人主页设计
2
设计性
必修
1
实验一 网页设计基础及HTML基本标签
【实验目的】
1.掌握利用因特网进行信息游览、搜索,下载网页、图片、文字和文件;
2.对给定的网站,能指出网站的链接结构、目录结构、页面布局方式;
3.掌握HTML的基本标签
【实验环境】
Windowxp操作系统,机器联网。
【实验重点及难点】
熟练使用浏览器进行浏览、搜索、下载。
【实验内容】
1、根据网站制作的需要,从网上下载网页制作时需要的文字、小图片、动画及flash。
2、上网访问实际若干网站,了解各网站的风格(主题图形形象、导航是否清晰,整体色调的搭配是否协调,主题是否突出等)、页面布局方式;在网上找出下列版面布局的结构形式:
⑴“T”结构布局
⑵“口”型(“国”字型)布局
⑷对称对比布局
⑻海报型布局
3、利用搜索引擎,浏览因特网上较为著名的5个网站,记录这些网站的名称、网站地址和以及相应的网页文件格式(扩展名);
4、查看我院WWW网站主页的源代码,收藏到收藏夹中,将其设为主页,并指出该网站的链接结构、目录结构和页面布局方式。
5、构建HTML文档“我的第一个网页”:
(1)从开始菜单启动记事本;
(2)在记事本中,录入一个HTML文档;
(3)设置该文档在最终在浏览器中显示的标题为“我的第一个网页”;
(4)在页面添加可见的文本“我的第一个网页”;
(5)使用记事本的菜单“文件”→“保存”,在“另存为”对话框中,在“保存类型”下拉列表中选择“所有文件”,录入“文件名”myfirstpage.htm,单击“保存”按钮将该页面保存到实验文件夹。
实验二HTML文本格式的应用
【实验目的】
1.掌握使用
学习使用分段标记;
2.掌握使用标记设置文字的属性;
3.掌握在网页中插入背景图片;
4.掌握在网页中插入水平线,并设置水平线的属性;
5.掌握在网页中插入背景音乐。
【实验环境】
Windowsxp
【实验重点及难点】
掌握字体、水平线等常用标记。
【实验内容】
1、使用简单内联元素进行文字处理:
(1)从开始菜单启动记事本;
(2)在记事本中,录入HTML文档;
(3)设置该文档最终显示标题为“简单文字处理”;
(4)在文档的
和之间,插入适当元素使最终网页中显示以下内容:这是一段文本
这是一段文本
©Microsoft®Windows2007
A=a1+a2+a3
这是一段文本
这是一段文本
提示:
1、以上文字不涉及到文字字体、大小、颜色的设置,且并不居中显示。
2、对于特殊字符,要使用字符实体。
©©版权®®注册商标
(5)紧接着步骤(4)插入的元素插入适当元素,使得最终网页上可以显示字号为5、颜色为红色、字体为“华文彩云”的下列样式文字:
这是一段文本
(6)紧接着步骤(5)插入的元素插入适当元素,使得最终网页上显示下列样式的文字(隶书、4号、绿色):
这是一段文本
(7)如果以上的每条文本之间没有换行,则在它们之间分别插入一个换行;
(8)使用步骤1-(5)中的方法保存当前HTML文档为simpleinline.htm。
2、制作一个简单的网页sy2-1.htm,用记事本编辑,内容为个人简介信息。
要求:
●搜索关键字为“个人”“主页”“简介”,标题为我的个人简介。
●背景为#33ccff,文本颜色为黑色,文本需分段表示。
3、用记事本编辑网页sy2-2.htm,内容为李白的诗“静夜思”。
要求:
每行诗为一个段落,四行文字颜色不同,字体不同。
4、通过记事本编辑网页sy2-3.htm,实现如图页面。
5、通过记事本编辑网页sy2-4.htm,实现如下页面。
图片自选,插入背景音乐“浮云.mp3”。
6、通过记事本编辑网页sy2-5.htm,实现如下页面。
实验三HTML超链接的应用
【实验目的】
1.掌握给文字添加绝对超级链接,例如:
2.掌握使用图像映像链接
【实验环境】
Windowsxp
【实验重点及难点】
掌握使用超级链接HTML常用标记。
【实验内容】
1、制作一个网页sy3-1.htm,用记事本编辑。
要求:
●网页名称为:
超级链接练习
●以一张图片作为背景,并且设置图片固定。
合理设置文字的颜色,和超级链接的颜色。
●插入绝对链接至长春工业大学软件学院主页。
2、利用预格式化标签,输出如下图一段文字,在页面的顶部设置相对超级链接至页面底部,在页面的底部设置相对超级链接至顶部。
3、在下图上实现图像映像链接,要求点击各省对应区域弹出该省政府网站(各省政府网址:
www.省名简拼如吉林省政府网站:
)
实验四:
HTML表格和列表的应用
【实验目的】
1.掌握表格相关标记的使用
2.掌握3种列表的定义和属性设置
【实验环境】
Windowsxp
【实验重点及难点】
掌握表格和列表相关标记的使用
【实验内容】
1、使用表格标签,制作如下图所示的页面。
要求:
●表格内容水平居中对齐,垂直居中对齐,页面标题为音乐网站。
.
●设置超级链接颜色
●点击播放,即可播放对应的音乐,音乐在网上下载。
2、使用表格标签,制作如下图所示的页面
3、用记事本编辑网页sy3-4.htm.htm,实现如下页面。
要求:
网页的名称为“列表练习”;网页有一个背景音乐,音乐自选。
实验五HTML表单和框架的应用
【实验目的】
1.掌握表单相关标记的使用;
2.掌握3个页面的框架的定义和属性设置。
【实验环境】
Windowsxp。
【实验重点及难点】
掌握表单相关标记的使用,框架页面的定义。
【实验内容】
1、建立如下表单页面:
2、建立如下框架页面,相关图片建议试着自己制作,也可从网上下载。
实验六HTML和CSS综合应用
【实验目的】
1.掌握CSS的基本语法规则。
2.掌握CSS的常用选择符。
3.掌握在网页上应用CSS的方法。
4.理解CSS的常用属性及其各项值的含义。
【实验环境】
Windowsxp。
【实验重点及难点】
掌握CSS相关标记的使用。
【实验内容】
1.CSS属性定义的缩写方法。
2.利用CSS对字体属性的设置完成下图显示样式。
3.利用CSS对文本属性的设置完成下图显示样式。
4.利用CSS对边框属性的设置完成下图显示样式。
5.利用CSS对浮动属性的设置完成下图显示样式。
6.利用CSS对定位属性的设置完成下图显示样式。
实验七个人主页设计(综合实验)
【实验目的】
1.掌握HTML基本标记并能够综合应用
【实验环境】
Windowsxp
【实验内容及要求】
1、使用框架构建个人主页
2、网页内容要包括个人基本情况、兴趣爱好、联系方式等,通过建立导航栏实现页面导航
3、设置背景音乐及背景图片,音乐图片自选。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- HTML 网页 设计 基础 实验 指导书