《网页设计》实验指导书刘伟杰编沈阳大学信息工程学院目录实验一：基本网页开发工具的使用方法........................... 错误!未定义书签。
实验二：XHTML基础.. (4)实验三：网页样式表CSS (6)实验四：表单设计 (7)实验五： VBScript脚本语言.................................................... 实验六：网页图形处理工具...................................................... 实验七： Dreamweaver 的使用................................................... 实验八： Flash的使用......................................................... 实验九： ASP动态网站开发技术................................................. 实验十：综合网站设计..........................................................课程编号：课程类别：专业选修适用层次：本科适用专业：电子、电信、通信工程课程总学时：48 适用学期:第7学期实验学时： 24 开设实验项目数：10撰写人：刘伟杰审核人：刘天惠教学院长：范立南实验一：基本网页开发工具的使用方法一、实验目的与要求1 了解Internet和WWW的功能。
2 掌握IE浏览器的使用。
3 初步认识常用的网页制作软件及工具。
二、实验类型验证型三、实验原理及说明1．浏览器的种类很多，常用的是微软公司的IE 浏览器。
图1是IE浏览器的空白页窗口，由标题栏、菜单栏、工具栏、地址栏、浏览器窗口和状态栏组成。
图1. IE浏览器的空白页窗口2 常用的网页制作工具及软件。
如：记事本、FrontPage、Dreamweaver等。
四、实验仪器序号名称主要用途PC软件类内容设计五、实验内容和步骤1．使用IE浏览器（1）连接网络，确保本机与Internet连通。
（2）启动IE浏览器。
（3）在IE浏览器的地址栏中输入想要浏览的网站或网页的网址。
（4）使用收藏夹。
（5）设置本机IE浏览器的“主页”。
2．使用记事本编辑一个网页（1）打开记事本。
（2）在记事本中输入以下代码<html><head><title>第一个HTML文档</title></head><body>这是我的第一个网页！</body></html>（3）将文件保存起来，文件名为.（4）双击该文件图标就可运行该问文件。
3． FrontPage的应用（1）FrontPage的安装FrontPage为Office家族中的一员。
如果购买了Office 2003企业版或者专业版，在安装时只须选择安装FrontPage 2003就行了。
（2）熟悉 FrontPage应用启动FrontPage 后，可以看到菜单栏、工具栏和视图栏等。
①制作第一个网页点击工具栏的“新建”按钮，建立了一个空白网页。
以下内容均可在你设计的网页中呈现。
在代码视图中再次输入文件.的代码，可通过预览查看结果。
②简单编辑网页在空白网页的设计视图中输入“这是我的第一个网页”，然后利用工具栏的工具进行简单排版（字体大小、颜色、字体等。
象Word排版一样）③保存网页点击工具栏“保存”按钮，然后在弹出的保存的对话框输入文件名：,点击“保存”完成网页保存。
④浏览网页找到刚保存的网页，然后双击此文件即可在IE浏览器中浏览到网页。
（3）WEB站点的建立站点在FrontPage中指所创建的一个主页和它相关联的网页、图形、文档、多媒体、和其它文件并且保存在站点服务器或其它计算机的硬盘中。
一个站点也包含支持FrontPage特定功能的文件并允许站点在FrontPage中被打开、复制、编辑，和管理。
一个在FrontPage中的站点名称对应到站点服务器的文件夹名称，并被长度、字符限制、和站点的大小写敏感性所支配著。
①新建站点在菜单栏里选择“新建→站点”进入的对话框。
FrontPage 2000自带有一些网站的模板，一般不使用这些模板，而在左边的模板选择窗里选“空站点”，然后在右边的“选项--指定新站点的位置”中敲入你想保存这个网站的文件夹地址。
一般第一次使用FrontPage 2000的时候它自动就生成了一个新站点，保存的“我的文档”的“My Webs”文件夹中，也可以重新建立一个文件夹作为网站的存放点。
在创建新站点的同时，进入文件夹视图，打开文件夹列表会发现多了2个新文件夹，一个叫“images”的文件夹是用来保存本网站中的图片文件的，在制作网页之前先把要用到的图片都保存到这里；还有一个叫“_private”的文件夹，这是系统用来做缓存的文件夹，不要认为它是垃圾就把它删了，这是有用的，不要删去。
②打开站点通过FrontPage 2000的菜单栏里面的“文件→打开站点”来打开其它站点。
（4）WEB站点管理操作访问和分析数据以便更好地管理站点效力和性能，准确控制 HTML 代码的外观和工作方式3．网页制作软件Macromedia Stdio 的使用下载网页制作软件Macromedia Stdio ，熟悉Dreamweaver、 Fireworks、 Flash 的操作界面。
六、实验数据处理与分析用Dreamweaver作为编辑工具，再次输入网页文件，了解编辑、调试、运行网页文件的方法。
七、注意事项八、预习与思考题1．如何进行IE浏览器本机“主页”设置2．IE浏览器是如何呈现网页内容的实验二：XHTML基础一、实验目的与要求掌握HTML的基本结构，掌握HTML中的段落标记，文字标记，超链接，图像，表格等的使用方法。
二、实验类型验证型三、实验原理及说明HTML的基本结构；HTML中的段落标记，文字标记，超链接，图像，表格等的使用方法五、实验内容和步骤1.文本标记的使用（1）完成网页文件 sy2-1 .htm的编辑，观察页面效果<html><head><title>文本标记的应用</title></head><body>登鹳雀楼<br>白日依山尽，<br>黄河入海流。
<br>欲穷千里目，<br>更上一层楼。
浣溪沙一曲新词酒一杯，去年天气旧亭台，夕阳西下几时回。
<P ALIGN=CENTER>无可奈何花落去，似曾相识燕归来。
小园香径几徘徊。
</P>看，努力了，就有收获吧！</body> </html>（2）将“登鹳雀楼”设置成一级标题，左对齐。
（3）将登鹳雀楼诗句内容设置成蓝色、楷体、5号字，（4）在诗句后加一条红色、5像素粗的水平线。
（5）将词牌名“浣溪沙”设置成一级标题，居中对齐。
（6）将词的内容设置成黑体、红色、5号字。
（7）在词的后加一条紫色、10像素粗的水平线。
（8）为网页文件加上一个背景图片。
2．pre标记的使用。
<html ><head> <title>pre</title></head><body><h2>Pre-formated Text</h2><pre >NorthWest EastSouth</pre> </body></html>3. 超链接、表格标记的使用（1）设计网页文件,使其页面效果如图2所示。
其中第一行文字为滚动字幕,最后一行文字要添加超链接。
图2. 的页面效果图4．按自己的想法设计出简单的网页。
页面中要包含有序列表、无序列表、图片等内容。
六、实验数据处理与分析通过对代码的分析，写出结论；在报告中写出设计的内容和过程，遇到问题的解决方法。
七、注意事项辅助学习（英文）站点：可以使用。
八、预习与思考题1．图像标记如何实现图文混排2．列表标记的type属性和start属性有何作用3．超链接中链接地址有哪几种形式实验三：网页样式表CSS一、实验目的与要求掌握利用CSS设计网页格式的方法。
二、实验类型验证型三、实验原理及说明CSS设计网页格式的方法。
四、实验仪器五、实验内容和步骤1．将CSS设置为外部样式表文件。
在html文件中进行引用样式规则为：段落p分成3部分，每一部分应用不同的样式表。
请把下面代码补全，编写完整的HTML 文件。
CSS可设置为外部或内部样式表文件。
：{ color: green }{ color: purple }{ color: gray }pb { color: red } /* <p>之内加粗显示的文字以红色显示 */p { font-size: 10pt }b { font-size: em } /* 所有包含在<p>中<b>的文字尺寸为15pt，即10pt 的倍 */编写HTML文件代码，用两种方式应用样式表文件.2．将CSS设置为内部样式，在html文件中应用，写出文件代码。
六、实验数据处理与分析在报告中写出设计过程。
七、注意事项参见指导教师给出的电子文档资料。
辅助学习（英文）站点：可以使用。
八、预习与思考题1 CSS样式表有几种类型如何应用CSS样式实验四：表单设计一、实验目的与要求掌握利用表单设计网页的方法。
二、实验类型验证型三、实验原理及说明表单设计网页格式的方法。
四、实验仪器五、实验内容和步骤1编写框架文件，页面效果如图3所示。
图3 框架页面效果图（2）将“框架与表单的应用”设置成滚动字幕，当鼠标移到该字模时，字幕停止滚动，鼠标移出则字幕恢复滚动。
（3）左侧的3行文字添加超链接。
（4）右侧显示的是一个注册表单。
写出能实现以上功能的完整的网页文件。
六、实验数据处理与分析在报告中写出设计过程。
七、注意事项辅助学习（英文）站点：可以使用。
八、预习与思考题1．框架名为_blank,_self,_top,_parent时，分别表示什么意义2．表单有何作用。