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

《沈阳大学网页设计实验指导书.doc》由会员分享，可在线阅读，更多相关《沈阳大学网页设计实验指导书.doc（10页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、网页设计 实 验 指 导 书 刘伟杰 编沈阳大学信息工程学院 目 录实验一：基本网页开发工具的使用方法1实验二：XHTML基础4实验三：网页样式表CSS6实验四：表单设计7实验五： VBScript脚本语言实验六：网页图形处理工具实验七： Dreamweaver 的使用实验八： Flash的使用实验九： ASP动态网站开发技术实验十：综合网站设计课程编号： 课程类别：专业选修适用层次：本科 适用专业：电子、电信、通信工程课程总学时：48 适用学期:第7学期 实验学时： 24 开设实验项目数：10撰写人： 刘伟杰 审核人：刘天惠 教学院长：范立南实验一：基本网页开发工具的使用方法一、实验目的与要

2、求1 了解Internet和WWW的功能。2 掌握IE浏览器的使用。3 初步认识常用的网页制作软件及工具。二、实验类型验证型三、实验原理及说明1浏览器的种类很多，常用的是微软公司的IE 浏览器。图1是IE浏览器的空白页窗口，由标题栏、菜单栏、工具栏、地址栏、浏览器窗口和状态栏组成。 图1. IE浏览器的空白页窗口2 常用的网页制作工具及软件。如：记事本、FrontPage、Dreamweaver等。四、实验仪器序 号名 称主要用途PC软件类内容设计五、实验内容和步骤1使用IE浏览器（1）连接网络，确保本机与Internet连通。（2）启动IE浏览器。（3）在IE浏览器的地址栏中输入想要浏览的网

3、站或网页的网址。（4）使用收藏夹。（5）设置本机IE浏览器的“主页”。2使用记事本编辑一个网页（1）打开记事本。（2）在记事本中输入以下代码第一个HTML文档这是我的第一个网页！（3）将文件保存起来，文件名为sy1-1.htm.（4）双击该文件图标就可运行该问文件。3 FrontPage的应用（1）FrontPage的安装FrontPage为Office家族中的一员。如果购买了Office 2003企业版或者专业版，在安装时只须选择安装FrontPage 2003就行了。 （2）熟悉 FrontPage应用 启动FrontPage 后，可以看到菜单栏、工具栏和视图栏等。制作第一个网页点击工具栏

4、的“新建”按钮，建立了一个空白网页。以下内容均可在你设计的网页中呈现。在代码视图中再次输入文件sy1-1.htm.的代码，可通过预览查看结果。简单编辑网页在空白网页的设计视图中输入“这是我的第一个网页”，然后利用工具栏的工具进行简单排版（字体大小、颜色、字体等。象Word排版一样）保存网页点击工具栏“保存”按钮，然后在弹出的保存的对话框输入文件名：p1.htm,点击“保存”完成网页保存。浏览网页找到刚保存的网页p1.htm，然后双击此文件即可在IE浏览器中浏览到网页。（3）WEB站点的建立 站点在FrontPage中指所创建的一个主页和它相关联的网页、图形、文档、多媒体、和其它文件并且保存在站

5、点服务器或其它计算机的硬盘中。一个站点也包含支持FrontPage特定功能的文件并允许站点在FrontPage中被打开、复制、编辑，和管理。一个在FrontPage中的站点名称对应到站点服务器的文件夹名称，并被长度、字符限制、和站点的大小写敏感性所支配著。新建站点在菜单栏里选择“新建站点” 进入的对话框。FrontPage 2000自带有一些网站的模板，一般不使用这些模板，而在左边的模板选择窗里选“空站点”，然后在右边的“选项-指定新站点的位置”中敲入你想保存这个网站的文件夹地址。一般第一次使用FrontPage 2000的时候它自动就生成了一个新站点，保存的“我的文档”的“My Webs”文

6、件夹中，也可以重新建立一个文件夹作为网站的存放点。在创建新站点的同时，进入文件夹视图，打开文件夹列表会发现多了2个新文件夹，一个叫“images”的文件夹是用来保存本网站中的图片文件的，在制作网页之前先把要用到的图片都保存到这里；还有一个叫“_private”的文件夹，这是系统用来做缓存的文件夹，不要认为它是垃圾就把它删了，这是有用的，不要删去。 打开站点通过FrontPage 2000的菜单栏里面的“文件打开站点”来打开其它站点。（4）WEB站点管理操作访问和分析数据以便更好地管理站点效力和性能，准确控制 HTML 代码的外观和工作方式3网页制作软件Macromedia Stdio 8.0的

7、使用 下载网页制作软件Macromedia Stdio 8.0，熟悉Dreamweaver、 Fireworks、 Flash的操作界面。六、实验数据处理与分析用Dreamweaver作为编辑工具，再次输入网页文件sy1-1.htm，了解编辑、调试、运行网页文件的方法。七、注意事项八、预习与思考题1如何进行IE浏览器本机“主页”设置？2IE浏览器是如何呈现网页内容的？ 实验二：XHTML基础一、实验目的与要求掌握HTML的基本结构，掌握HTML中的段落标记，文字标记，超链接，图像，表格等的使用方法。二、实验类型验证型三、实验原理及说明HTML的基本结构；HTML中的段落标记，文字标记，超链接，

8、图像，表格等的使用方法四、实验仪器序 号名 称主要用途PC软件类内容设计五、实验内容和步骤1.文本标记的使用（1）完成网页文件 sy2-1 .htm的编辑，观察页面效果文本标记的应用登鹳雀楼白日依山尽，黄河入海流。欲穷千里目，更上一层楼。浣溪沙一曲新词酒一杯，去年天气旧亭台，夕阳西下几时回。无可奈何花落去，似曾相识燕归来。小园香径几徘徊。看，努力了，就有收获吧！ （2）将“登鹳雀楼”设置成一级标题，左对齐。（3）将登鹳雀楼诗句内容设置成蓝色、楷体、5号字，（4）在诗句后加一条红色、5像素粗的水平线。（5）将词牌名“浣溪沙”设置成一级标题，居中对齐。（6）将词的内容设置成黑体、红色、5号字。（7

9、）在词的后加一条紫色、10像素粗的水平线。（8）为网页文件加上一个背景图片。2pre标记的使用。 pre Pre-formated Text North West East South 3. 超链接、表格标记的使用（1）设计网页文件sy2-1.htm,使其页面效果如图2所示。其中第一行文字为滚动字幕,最后一行文字要添加超链接。 图2. sy2-1.htm的页面效果图4按自己的想法设计出简单的网页。页面中要包含有序列表、无序列表、图片等内容。六、实验数据处理与分析通过对代码的分析，写出结论；在报告中写出设计的内容和过程，遇到问题的解决方法。七、注意事项辅助学习（英文）站点：八、预习与思考题1图像

10、标记如何实现图文混排？2列表标记的type属性和start属性有何作用？3超链接中链接地址有哪几种形式？实验三：网页样式表CSS 一、实验目的与要求掌握利用CSS设计网页格式的方法。二、实验类型验证型三、实验原理及说明CSS设计网页格式的方法。四、实验仪器序 号名 称主要用途PC软件类内容设计五、实验内容和步骤1将CSS设置为外部样式表文件sy3.css。在html文件中进行引用样式规则为：段落p分成3部分，每一部分应用不同的样式表。请把下面代码补全，编写完整的HTML文件。CSS可设置为外部或内部样式表文件。sy3-1.css：p.first color: green p.second co

11、lor: purple p.third color: gray pb color: red /* 之内加粗显示的文字以红色显示 */p font-size: 10pt b font-size: 1.5 em /* 所有包含在中的文字尺寸为15pt，即10pt的1.5倍 */编写HTML文件sy3-1.htm代码，用两种方式应用样式表文件sy3.css.2将CSS设置为内部样式，在html文件中应用，写出文件代码。六、实验数据处理与分析在报告中写出设计过程。七、注意事项参见指导教师给出的电子文档资料。辅助学习（英文）站点：八、预习与思考题1 CSS样式表有几种类型？如何应用CSS样式？实验四：表

12、单设计一、实验目的与要求掌握利用表单设计网页的方法。二、实验类型验证型三、实验原理及说明表单设计网页格式的方法。四、实验仪器序 号名 称主要用途PC软件类内容设计五、实验内容和步骤1编写框架文件，页面效果如图3所示。 图3 框架页面效果图（2）将“框架与表单的应用”设置成滚动字幕，当鼠标移到该字模时，字幕停止滚动，鼠标移出则字幕恢复滚动。（3）左侧的3行文字添加超链接。（4）右侧显示的是一个注册表单。写出能实现以上功能的完整的网页文件。六、实验数据处理与分析在报告中写出设计过程。七、注意事项辅助学习（英文）站点：八、预习与思考题 1框架名为_blank,_self,_top,_parent时，分别表示什么意义？2表单有何作用？