《网站(网页)设计》实验指导书.doc

网站（网页）设计编撰闽江学院计算机实验教学中心印制16目 录实验一 html语言的认识与使用 1实验二 使用html语言制作网页 4实验三 dreamweaver 8入门与应用 7实验四 dreamweaver 8强化训练 10实验五 网站的发布与维护 11实验六 dreamweaver结合photoshop制作网站 12实验七 flash8制作网站 13实验八 动态服务器的网站制作 14实验一 html语言的认识与使用 实验目的（1）熟悉html的基本结构；（2）学会创建html文档；（3）熟练掌握html基本标志，包括文本、表格、图像、超级链接等标志；实验环境（1）1人1台计算机独立完成实验。（2）安装了windows 系列操作系统的计算机，并配有如下应用软件： 记事本 internet explorer实验内容 1使用记事本编写html代码，制作第一份网页。步骤一：打开记事本创建文件(文件名e1.txt)。步骤二：把如下代码写入e1.txt文件：标题格式标记示例这是一行普通文字一级标题欢迎光临有下划线步骤三：把e1.txt文件另存为e1.html.步骤四：使用internet explorer浏览e1.html.（把实现的页面效果写入实验报告）2编写html代码实现如图1-1所示网页的设计： 图1-1 步骤一：遵循题1的步骤创建html文档（文件名e2.html）。步骤二：使用标记制作有序列表，起始序列为3。步骤三：使用标记制作无序列表。（把实现的代码写入实验报告）3html综合实例设计 图1-2 综合实例创建html文档（文件名e3.html），完成图1-2的页面效果的设计。步骤一：制作一行两列表格，边框值border=3。步骤二：添加文字“唐诗、七言乐府”字体为隶书、字号值5、加粗。 添加文字金缕衣，字体为华文新魏、字号值4。以及增加其他诗句。步骤三：添加图片。并给图片做超级链接，链接地址为e2.html。步骤四：制作左右滚动文字“唐诗欣赏（滚动字幕制作）”。步骤五：插入水平线。（把实现的代码写入实验报告）思考题（1）常用的列表标记有哪些？（2）什么是文字滚动标记，该标记的属性有哪些？相关知识internet和www的知识，html相关知识。实验二 使用html语言制作网页 实验目的（1）熟悉html的基本结构；（2）熟练掌握html基本标志，包括文本、表格、图像、超级链接、表单等标志；（3）使用html制作内容丰富的网页。实验环境（1）1人1台计算机独立完成实验。（2）安装了windows 系列操作系统的计算机，并配有如下应用软件： 记事本 internet explorer实验内容1编写如图2-1所示的表格html代码。 图2-12编写html代码实现如图2-2所示网页的设计： 图2-2 步骤一：创建html文档（文件名e2.html）。步骤二：使用修改网页背景颜色。步骤三：使用表格标志创建如图所示七行一列表格。步骤四：添加相关文字与表单元素。（把实现的代码写入实验报告）3html综合实例设计 图2-3 综合实例步骤一：学习教材p95页例3-25中所应用的相关知识。步骤二：创建html文档（文件名e3.html），完成图2-3的页面效果的设计。回答如下问题：1） 插入图片使用什么标记，如何理解绝对路径和相对路径？2） 超级链接的属性有哪些，各是什么功能。 3）是什么标记，如何使用？ （把问题的答案写入实验报告）思考题（1）常用的多媒体标记有哪些？（2）什么是框架，框架的作用有哪些，与表格有什么区别？（3）什么是css？它的实现方式有哪些？相关知识internet和www的知识，html相关知识。实验三 dreamweaver 8入门与应用 实验目的（1）掌握使用dreamweaver8创建站点和网页；（2）学会使用超级链接，表格，框架；（3）熟练掌握简单网页的设计方法。实验环境（1）1人1台计算机独立完成实验。（2）安装了windows 系列操作系统的计算机，并配有如下应用软件： dreamweaver 8 internet explorer实验内容 1使用dreamweaver8工具创建站点和网页。步骤一：在实验文件目录下创建文件夹web-site，打开dreamweaver8创建站点(站点名web-site，对应本地根文件夹web-site)。步骤二：在站点内创建文件夹images，网页文件index.html。 效果如图3-1所示。图3-1 web-site站点（把操作的步骤写入实验报告）2使用表格布局网页，效果如图3-2所示： 图3-2 步骤一：打开3-2文件夹，浏览网页index.html。步骤二：修改web-site站点下的index.html文件，使其效果如图3-2所示。（把实现的步骤写入实验报告） 3使用框架设计网页，效果如图3-3所示： 图3-3 框架网页步骤一：打开3-3文件夹，浏览网页index-end.html。步骤二：使用框架设计如图所示的网页效果。（把实现的步骤写入实验报告）思考题（1）“鼠标经过图像”功能有什么作用，试着用它做一个例子。（2）什么是锚记？如何创建锚记链接？（3）dreamweaver 8中提供了几种可供插入的表单元素？举例说明。相关知识internet和www的知识，html相关知识，dreamweaver 8相关应用。实验四 dreamweaver 8强化训练 实验目的（1）掌握使用dreamweaver制作菜单；（2）学会使用表单，层，行为动作；（3）熟练掌握多功能网页的设计方法。实验环境（1）1人1台计算机独立完成实验。（2）安装了windows 系列操作系统的计算机，并配有如下应用软件： dreamweaver 8 internet explorer实验内容1使用层制作下拉菜单，及行为动作设计。步骤一：打开4-1文件夹，浏览网页，制作如图4-1所示效果。步骤二：增加行为动作，显示和隐藏层。 图4-1 下拉菜单（把操作的步骤写入实验报告）2使用表单制作网页，效果如图4-2所示： 图4-2 步骤一：打开4-2文件夹，浏览网页form.html。步骤二：制作类似的表单网页。（把实现的代码写入实验报告） 3网页实例设计“蝴蝶的天空” 图4-3 综合实例步骤一：学习教材p232页5.13中的相关知识。步骤二：创建html文档（文件名e3.html），完成图4-3的页面效果的设计。回答如下问题：1) 文字上下滚动如何实现？2）增加鼠标经过图片交换的功能，如何实现。（把问题的答案写入实验报告）思考题（1） 如何使用css来修饰页面？（2） 试着利用dreamweaver 8的行为功能为页面增加一些动态效果。（3） 什么是模板？试着使用模板来快速建立一些页面。相关知识internet和www的知识，html相关知识，dreamweaver 8相关应用。实验五 网站的发布与维护 实验目的（1）域名和网页空间的申请；（2）网站的测试；（3）网站发布及管理。实验环境（1）1人1台计算机独立完成实验。（2）安装了windows 系列操作系统的计算机，并配有如下应用软件： dreamweaver 8 internet explorer实验内容1域名和网页空间的申请。步骤一：去网站注册 步骤二： 申请域名及空间（把操作的步骤写入实验报告）2测试网站：步骤一：建立站点web-site，拷贝实验四-3（蝴蝶的天空）网页到该站点下步骤二：测试站点（把测试结果写入实验报告）3网站发布及管理步骤一：发布站点web-site。步骤二：在本地建立新html文档（文件名e3.html），更新空间内容。（把操作的步骤写入实验报告）思考题（1）网站的测试工作包括哪些？（2）ftp上传的方式有哪几种？ftp上传工具有哪些？实验六 dreamweaver结合photoshop制作网站 实验目的（1）掌握使用photoshop cs 2的切片工具的使用；（2）掌握dreamweaver 8编辑和修改网页。实验环境（1）1人1台计算机独立完成实验。（2）安装了windows 系列操作系统的计算机，并配有如下应用软件： photoshop cs 2 dreamweaver 8实验内容1使用photoshop“切片工具”处理图片（图6-1）。 图6-1（把操作的步骤写入实验报告）2用dreamweaver编辑html文件， 处理效果如图6-2所示。 图6-2打开参照目录下的index.html文件查看效果，并仿照实现。（把操作的步骤写入实验报告）相关知识photoshop cs 2相关知识，dreamweaver 8相关应用。实验七 flash8制作网站 实验目的（1）掌握使用flash制作动画；（2）掌握使用flash制作网站。实验环境（1）1人1台计算机独立完成实验。（2）安装了windows 系列操作系统的计算机，并配有如下应用软件： flash 8 dreamweaver 8实验内容1制作网站，效果如图所示。图7-1 步骤一：制作背景动画步骤二：制作按钮并置于场景1中步骤三：制作场景2中的遮罩动画步骤四：制作场景3中的组建动画步骤五：制作场景4中的音乐播放控制动画步骤六：为按钮添加场景交互代码打开参照目录下的html文件查看效果，并仿照实现。（把操作的步骤写入实验报告）相关知识flash 8相关知识，dreamweaver 8相关应用。实验八 动态服务器的网站制作 实验目的（1）掌握配置动态服务器iis；（2）熟悉asp内置对象的调用及其应用；（2）掌握使用asp技术设计在线聊天室。实验环境（1）1人1台计算机独立完成实验。（2）安装了windows 系列操作系统的计算机，并配有如下应用软件： iis dreamweaver 8实验内容1 制作动态服务器网站，效果如图8-1所示 图8-1 步骤一：制作简