Web程序设计实验指导.docx
《Web程序设计实验指导.docx》由会员分享，可在线阅读，更多相关《Web程序设计实验指导.docx（55页珍藏版）》请在冰点文库上搜索。
Web程序设计实验指导
《Web程序设计（ASP.Net版）》
实验指导书
附一、实验报告填写方法
附1．1实验开发环境
1.硬件：
IntelP42.4G/256M/40GPC机一套；
2.软件：
WindowsXP+j2sdk1.5.0+JCreatorPro3.1.0+（MSAccess2000）
附1．2实验过程要求
1.在上课的同时，将每个实验预习的每个例题直接完成在实验指导书上；
2.在实验之前，将实验要求的程序写在草稿本上；
3.每次实验之前需要把实验指导书和写有程序的草稿纸带上，以备检查，否则不能进入实验室。
4.实验过程中，不能做与实验无关的事情（如：
打游戏、看其他书籍），否则本次实验成绩记0分，在遇到问题的时候举手提问，同学之间交流的声音不可太大。
附1．3实验报告内容填写
1.第1页：
填写
（1）实验目的、
（2）实验要求
2.第2页～第3页：
填写（3）实验程序源代码
3.第4页：
填写（4）实验运行结果、（5）实验总结
实验一：
HTML语言静态网页设计
如果说一个网站是一座大厦，那么构成网站的每个栏目就是构成大厦的房间，而构建每个房间的砖瓦就应是每一张网页了！
网页与一般文档类似，它们都要求字体清晰、格式正确、排列整齐、布局合理、图文并茂，这就需要对网页的内容进行修饰。
网页在排版上有较高的要求，排版的好坏是网页成败的关键因素之一。
而表格是实现页面排版的有效工具，通过使用表格可以很方便有效地控制页面各元素的位置。
与表格类似的框架则可以通过分割屏幕使得在一个屏幕上打开多个网页。
1．1实验目的
1）熟悉HTML语言开发环境和HTML语言的语法规则；
2）熟悉HTML语言的各元素的属性，文字、图片的颜色设置，网页的表格及对齐；
3）掌握CSS网页风格的定义及使用；
4）表单元素的设计。
5）能够设计普通的有一定特色的静态网页。
1．2实验知识点
1、什么HTML
HTML语言是超文本标记语言（HyperTextMarkupLanguage）的缩写，用来描述www上的超文本文件,当用户使用浏览器下载文件时，就把这些标识解释成它应有的含义，并按照一定的格式将其显示在屏幕上。
2、HTML文件的特点：
1）脚本语言，易学2）跨平台3）纯文本文件
3、HTML的总体结构
从结构上看，HTML文件由多种元素构成，用于组织文件的内容和指导文件的输出格式，一个HTML应具有下面的结构：
头元素
……
体元素
……
4、HTML文档结构特点：
1）HTML文件仅由一个html元素组成，其元素体分为头元素和体元素两部分。
2）绝大多数元素是成对出现的，有起始标记和结尾标记。
起始链接签（Starttag）<元素名称>
结尾链接签（Endtag）
3）每一个元素都有名称和可选择的属性，元素的名称和属性都在起始链接签内标明，属性出现的顺序是不重要的。
4）html的元素有四种表示方法。
（1）<元素名称>文本或超文本
（2）<元素名称属性名＝“属性值”…>文本或超文本
（3）<元素名称>
（4）<元素名称属性名＝“属性值”…>
5）html的元素的常用属性和值。
Height：
高度＝数值Width：
宽度＝数值
Color：
颜色＝RGBAlign/Valign：
对齐＝（left、center、right）
BGColor：
背景颜色Border：
边框粗细
6）Html文件的命名
*.html或.htm
5、常用结构元素介绍：
1）…
表示页面开始，开始用HTML标准进行解释文本；表示页面结束。
2）
…
包含页面的一般性说明信息，如标题、主题介绍、字符集、作者信息等，必须在
元素之前。
3）
…放于
元素内；提供页面的名称。
4）
放于
元素内，提供该文档的媒体信息。
如作者名、搜索引擎关键字等
元素的属性：
（name，content，http-equiv,url）
“keywords”“你的关键字”
“author”“作者署名”
“expires”“过期时间”
“content-type”“字符集”
5）
…
BODY是网页的主体，通过以下属性修饰网页：
（1）Link、Alink、Vlink：
未访问（正点击、已访问）链接文字颜色
（2）BGcolor、BackGround、BGProperties
（3）Text：
一般文本颜色
6）注释
--
注释内容。
。
。
。
-->
注释，可以进行单行、多行注释
6、文本字体控制元素
1）
BASEFONT用于元素设置文档的基础字体，用法如下：
Color：
文本的颜色
属性Face：
文本的字体（通常不用）
Size：
文本字体的大小（1～7号，由小到大）
2）…
FONT用于设置指定文本的字体，用法如下：
文本内容
属性：
Color，Face，Size。
其中：
size用于修改文本的字体的大小（1～7号，或与基础字体的对比值（＋1，－2））
3）…
H用于设置指定的标题，用法如下：
标题内容
其中：
#为1～6之间的数字，代表标题级数（从大到小）
属性：
align=（left,center,right）
7、文本格式控制元素
…：
使文本/图象居中
…：
以引用或参考的形式显示文本，一般以斜体显示
…
：
使用等宽字体和保留空格与换行符来创建格式化文本，使其间文本按照源文件中的格式显示
…
：
创建段落
：
在文本后设置一换行符
8、动态文本控制
：
显示一个滚动的选取框，其间文本可以实现动态滚动。
（主要用于滚动新闻、公告等）
用法如下：
…文本内容…
（1）BGColor：
滚动文本框的背景颜色
（2）height、width：
滚动文本框的大小（高、宽度）
（3）direction：
文本的滚动方向（left,right,up,down）
属（4）Loop：
循环次数，（＝Infinite：
无穷次）
（5）ScrollAmount、ScrollDelay：
每次滚动的距离和时延（毫秒）
性（6）Behavior：
运动形式（＝Scroll（滚动）,＝Slide（移动）,＝Alternate（来回运动））
（7）OnMouseOut=Start（）：
鼠标事件，离开则开始滚动
OnMouseOver=Stop（）：
鼠标事件，鼠标移入则停止滚动
9、插入图像
插入图像：
（1）Align：
图片对齐方式（top,middle,bottom,left,center,right）
属
（2）height、width：
图片的大小（高、宽度）
（3）Boder：
图片边界尺寸大小
性（4）Src：
图片所在路径（＝“路径/文件名”）
（5）UseMap：
具有热区，给出热区名称（UseMap＝“#name”）
10、插入背景音乐
背景音乐
属性
Src：
音乐所在路径（＝“路径/文件名”）
Loop：
播放循环次数，（＝Infinite：
无穷次）
支持文件：
mid、mp3。
11、插入多媒体
多媒体
（1）Src：
多媒体所在路径（＝“路径/文件名”）
属性
（2）Loop：
播放循环次数，（＝Infinite：
无穷次）
（3）控制画面：
Hidden=true/false：
是否隐藏画面
Width、height：
画面的大小（高、宽度）
Controls：
控制画面风格ConsoleSmallConsolePlayButtonPauseButtonstopButtonvolumeLever等
支持文件格式：
mid、mp3、wav、avi等（不支持rm）
12、列表
1）无序列表
无序列表的标识
无序列表又称项目符号列表，列表内容顺序任意，每一列表项前用一特定符号标识。
例：
2）有序列表
…
有序列表的标识
有序列表指在每一列表项前用连续的标号进行排列。
注意：
如果没有修改属性，Value将默认为前一项的Value＋1；Type将默认为1
13、超级链接
1）超级链接类型（分类）
（1）按照触发超级链接的对象分为
A、文本超级链接。
B、图象超级链接。
C、热区超级链接。
（2）按照超级链接的目标位置将链接分为
A、当前页。
B、新窗口。
C、目标框架页面。
D、书签（锚点）。
2）超级链接的标识
（1）一般超链标识符，用法如下：
…文字图像…（用于创建HTML文件的链接。
）
（i）href属性，其值为
A、链接文件所在路径（＝“路径/文件名”）
B、Email地址（＝“mailto:
Email地址”）
（ii）target属性，其值具有：
a）当前页面（＝“_top”）b）新窗口（＝“_black”）
c）父框架（＝“_parent”）d）当前框架（＝“_self”）
e）其他框架（＝“框架名”）
（2）创建书签标识符，分两步进行，用法如下：
A、在点击链接处（目录）设置书签，方法：
…标题文字…
B、为要被链接到的部分起名字（书签名），方法：
…内容文字…
（3）创建热区超级链接标识
A、首先，给定一张图片，并为他做一个热区并命名：
B、…热区超级链接，指明客户端的图象地图，和标志符一起使用。
注意：
可以有多个，必须放在之间。
“rect”“二顶点坐标”
C、“poly”“各顶点坐标”
target＝”页面位置”>
14、表格
通过使用表格可以很方便有效地控制页面各元素的位置。
表格所包含的基本部分：
表格标题：
指明表格的含义；
表格标签：
也称表头，指明表中记录项的含义；
表格数据：
表格的具体内容；
表格单元：
表格中每个独立区域，其中可以存放表格标签，也可以存放具体数据。
1）创建表格
…创建表格，可用于数据表或者控制你网页的布局。
（1）Align：
表格对齐方式（left,center,right）
属
（2）height、width：
表格的大小（高、宽度）
（3）Boder、BorderColor：
表格边框尺寸大小，颜色
性（4）Backgroud：
表格背景图片（＝“路径/文件名”）BGColor：
背景颜色
（5）Cellspacing、Cellpadding：
单元格之间/之内的间距
2）设置表格标题
…设置表格的标题。
（放于
之内）
属性：
（1）Align：
表格标题的水平对齐（L/C/R）
（2）VAlign：
设置的标题的垂直位置（T/B，表示处于表格之上/下）
3）设置表格的单元格
表格的每个单元格都由行和列构成。
（1）行标识：
…表示表中的一行的开始和结束。
（放于
之内,一个表格可以有很多行）
（1）Align：
该行的水平对齐方式（left,center,right）
属性：
（2）BGColor：
该行的背景颜色
（3）VAlign：
该行的垂直对齐方式（top,middle,bottom）
（2）列标识：
…表示表中的一个单元格。
（放于
…
之内，一行可以有多个列，从而构成多个单元格）
（1）Align、VAlign：
单元格对齐方式
（2）height、width：
单元格的大小（高、宽度）
属（3）BorderColor：
单元格边框的颜色
性（4）Backgroud：
单元格背景图片（＝“路径/文件名”）
BGColor：
背景颜色
（5）Colspan、Rowspan：
单元格所占的列/行的数目
（3）表格头标识：
…表示为表创建表头。
（相当于列标识
，一般放于第一个 | …
之内）,其属性也是于
元素相同的，只是文字呈粗体显示。 15、框架 框架通过分割窗口，能使一个屏幕上出现多个页面。 1）创建框架： …指明框架集合，确定垂直和水平分割的数目和大小，可以嵌套（放于元素之前）。 属性： （1）Cols、Rows： 框架的划分方式（列/行）（=“A，B”） （2）FrameSpacing： 框架之间的间距 2）设置框架内容 为已经划分好的框架设置内容。 （放在 |