沈阳大学网页设计实验指导书

《网页设计》

实验指导书

刘伟杰编

沈阳大学信息工程学院

目录

实验一：基本网页开发工具的使用方法........................... 错误!未定义书签。实验二：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）在记事本中输入以下代码

这是我的第一个网页！

（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作为编辑工具，再次输入网页文件，了解编辑、调试、运行网页文件的方法。

七、注意事项