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