Web前端开发实验指导书
20XX年09月
目录
实验1 HTML基础与布局元素 (3)
实验2 表格与表单的应用 (6)
实验3 框架 (8)
实验4 CSS样式表基础 (12)
实验5 CSS样式布局 (16)
实验6 Dreamweaver制作网页 (19)
实验7 网站设计 (22)
实验8 JavaScript基础 (26)
实验9 JavaScript对象 (29)
实验10 DOM编程 (33)
网页计算器html代码实验11 JavaScript常用特效 (36)
实验1 HTML基础与布局元素一、实验目的
1．掌握使用HTML的基本结构创建网页
2．掌握使用行级和块级标签组织页面内容
3．掌握使用图像标签实现图文并茂的页面
二、实验内容
使用HTML基本元素设计基本网页
三、实验环境
（1）使用的操作系统及版本。
Windows XP Professional
（2）使用的编译系统及版本。
Dreamweaver CS6
四、实验步骤及说明
任务1基本块级元素
使用HTML编辑工具，编写HTML代码，实现如图所示的页面效果
任务2用于布局的块级元素
编写HTML代码，实现如图所示的页面效果
任务3行级元素
编写HTML代码，实现如图所示的页面效果。
任务4超链接
编写HTML代码，实现导航菜单的链接
●单击lj.html页面的“人物简介”，将跳转到ww.html的介绍页。
●单击lj.html页面的“王孟”，将跳转到设置锚点的ww.html页面相应位置。
●单击ww.html的返回链接可以返回到lj.html。
●单击“”，将自动打开本机的程序。
小结及思考题
扩展训练：实现如图所示的页面效果