网页设计实验指导书.doc

网页设计与制作

实验指导

目录

TOC\o1-3\h\z\u一、课程简介 3

二、实验教学的总体目标和要求 3

三、实验教学内容 4

实验一、熟悉HTML语言根本结构 4

实验二、HTML文本格式的应用 8

实验三、HTML超链接的应用 11

实验四、HTML表格和列表的应用 13

实验五、HTML表单和框架的应用 16

实验六、HTML和CSS综合应用 26

实验七、JavaScript脚本根本应用 30

实验八、JavaScript脚本综合应用 34

四、成绩评定标准与考核方法 47

五、推荐实验教材和参考书 47

附录：实验报告格式 48

一、课程简介

《网页设计与开发》是高等院校计算机及其相关专业的一门重要的根底课程，也是是一门实践性和技能性要求都很强的学科。其实验课程主要围绕网页根本元素、css和Javascript、页面布局和整站建设等理论内容的实践实训进行开展。其主要内容包括练习网页设计的根本概念和文档结构，完成相关工具的安装。练习网页元素在实际应用中的使用，包含文字与段落涉及的图文混排方式、列表涉及的导航制作、框架涉及的后台管理页面制作、表格布局局部页面等。练习div+css的页面布局。javascript在交互式网页开发中的根本应用。练习从需求分析到栏目设计最终进行布局和细节处理以及发布的整站建设过程。

二、实验教学的总体目标和要求

实验教学应充分考虑学生对理论知识的稳固和实践技能的提升要求，从培养学生面向商业化网页开发的角度出发，通过典型页面案例，讲述和示范逐步分解其中的技术实现，使学生能够对技术在具体设计中的灵活使用有深刻的感受。

通过本实验课程的学习，使学生掌握各种网页元素的使用。例如，表格、文本、图像、超级链接、层和表单等。熟悉一些网页布局方法。掌握网站的开发流程，如建站规划、页面制作、优化及发布等相关知识。课程完成后学生应能够理解网页设计的根本原那么，掌握网页根本制作方法和技巧，并自主设计开发各种网页、完成一定规模的网站开发。

三、实验教学内容

实验一、熟悉HTML语言根本结构

【实验目的】

学生通过该实验熟悉HTML语言的根本使用方法，进一步体会浏览器解释执行HTML的原理，为以后高级网络编程打下扎实的根底。

1．掌握利用因特网进行信息游览、搜索，下载网页、图片、文字和文件；

2．对给定的网站，能指出网站的风格〔链接结构、目录结构、页面布局方式〕；

3．了解HTML文档结构；

4．初步掌握根本标记的使用；掌握HTML的根本标签HTMLHEADBODYTITLEMTEA标记；

5．能够运用文本编辑器制作简单网页。

【实验环境】

微机+Windowxp操作系统+IE浏览器+记事本/Editplus编辑器

【实验重点及难点】

初步掌握根本标记的使用。

【实验内容】

1、根据网站制作的需要，从网上下载网页制作时需要的文字、小图片、动画及flash。

2、上网访问实际3个网站〔可以上校园网〕，记录这些网站的名称、网站地址，了解各网站的风格〔主题图形形象、导航是否清晰，整体色调的搭配是否协调，主题是否突出等〕、页面布局方式。

3、查看重庆邮电大学网站主页的源代码，收藏到收藏夹中，将其设为主页。

4、利用记事本编辑一个页面文件名为sy1-4.html，要求在标题栏中显示“这是我的第一个试验”，页面中显示假设干段文字，字体颜色为红色，页面背景为黄色，文字不可选择，不可复制。

参考实验步骤：

1．翻开记事本，单击[文件]菜单，选择[保存]命令，在翻开的保存对话框中，先选择要保存的文件夹，保证保存类型选择“所有文件”，在文件名中输入：sy1-4.html，注意必须输入扩展名。

2．按以下提示编写HTML代码，下面是参照代码:

主体结构如下：

html

head

title这里输入标题栏内容/title

/head

body设置主体属性

这里输入页面中的内容

/body

/html

说明：body的属性及事件：

①oncontextmenu事件：鼠标单击右键时，页面会弹出菜单，将激发该事件。但往往我们不希望用户通过弹出菜单进行相关的操作，很简单，屏蔽右键菜单的方法为：oncontextmenu=returnfalse

②onselectstart事件：显示在页面中的文字，用户可以通过按鼠标左键并拖来选中，此时该事件将被激发。如果不想让自己的文字被选中，可以用以下方法屏蔽该事件：onselectstart=returnfalse

③oncopy事件：用户按下CTRL+C键或执行菜单中的[复制]命令时，该事件将被激发，如果不想自己的页面内容被别人轻易复制，可以用以下方法屏蔽该事件：on