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

《网站(页)设计技术》实验指导书.doc》由会员分享，可在线阅读，更多相关《网站(页)设计技术》实验指导书.doc（20页珍藏版）》请在三一办公上搜索。

1、 网站（页）设计技术 实 验 指 导 书曾霞霞 编 写适用专业： 计算机科学与技术闽江学院 计算机科学 系2010年 7月前 言网站（页）设计技术是计算机应用、软件工程等专业的一门专业选修课，是一门实用性极强，计算机机网络应用和网站建设、使用与维护的技术性课程。本课程主要培养学生掌握制作网页、建立网站的能力，为将来建设电子商务网站、WEB信息系统打下基础 。本课程以目前最流行的网页设计软件作为技术支持，由浅入深系统地介绍了网页的构思、规划、制作和网站建设的全过程，帮助初学者在最短的时间快速掌握HTML语言及常用网页设计工具的使用，并能亲手设计出自己喜爱的网站。本指导书开设六个实验，五个验证性实

2、验主要让学生掌握网页的原理、HTML的结构、Dreamweaver等流行工具的使用，通过几个网页实例的开发与设计，使学生熟练掌握网页设计的步骤，选择使用合理的方法来设计功能丰富的网页；“小型网站设计”综合性实验主要让学生体验网站规划、设计、发布与维护的全过程，理解网页制作的方法和网站的工作模式，详细掌握HTML语言和Dreamweaver开发工具的应用，培养学生掌握网站开发的综合应用能力。目 录 1、实验一HTML语言的认识与使用42、实验二使用HTML语言制作网页73、实验三Dreamweaver 8入门与应用.104、实验四Dreamweaver 8强化训练.135、实验五Dreamwea

3、ver结合Photoshop制作网站166、实验六小型网站设计18实验一 HTML语言的认识与使用实验学时：2实验类型：验证实验要求：必修一、实验目的1、熟悉HTML的基本结构；2、学会创建HTML文档；3、熟练掌握HTML基本标志，包括文本、表格、图像、超级链接等标志。二、实验内容1、使用记事本编写HTML代码，制作第一份网页。程序代码见【实验例程】。2、编写HTML列表标记实现如图1-1所示网页的设计： 图1-13、HTML标记综合应用。三、实验原理、方法和手段编写并调试程序以达到预定效果。通过调试理解HTML结构，掌握HTML设计网页的方法。四、实验组织运行要求根据本实验的特点、要求和具

4、体条件，采用以学生自主训练为主的开放模式组织教学。重点：掌握HTML标志的功能并设计网页难点：实验程序的问题描述、实现方法、程序流程。五、实验条件安装了Windows 系列操作系统的计算机，并配有如下应用软件：记事本Internet Explorer六、实验步骤1、使用记事本编写HTML代码，制作第一份网页。步骤一：打开记事本创建文件(文件名E1.txt)。步骤二：把如下代码写入E1.txt文件：标题格式标记示例这是一行普通文字一级标题欢迎光临有下划线步骤三：把E1.txt文件另存为E1.html.步骤四：使用Internet Explorer浏览E1.html.步骤五：抓图记录实现的效果2编

5、写HTML代码实现如图1-1所示网页的设计：步骤一：遵循题1的步骤创建HTML文档（文件名E2.html）。步骤二：使用标记制作有序列表，起始序列为3。步骤三：使用标记制作无序列表。（把实现的代码写入实验报告）3HTML标记综合应用实例设计,如图1-2所示。图1-2创建HTML文档（文件名E3.html）并按如下步骤设计。步骤一：制作一行两列表格，边框值border=3。步骤二：添加文字“唐诗、七言乐府”字体为隶书、字号值5、加粗。 添加文字金缕衣，字体为华文新魏、字号值4。以及增加其他诗句。步骤三：添加图片。并给图片做超级链接，链接地址为E2.html。步骤四：制作左右滚动文字“唐诗欣赏（滚

6、动字幕制作）”。步骤五：插入水平线。（把实现的代码写入实验报告）4、回答思考题并撰写实验报告七、思考题1、 常用的列表标记有哪些？2、 什么是文字滚动标记，该标记的属性有哪些？八、实验报告1、实验预习在实验前每位同学都需要对本次实验进行认真的预习，并写好预习报告，在预习报告中要写出实验目的、要求，需要用到的仪器设备、物品资料以及简要的实验步骤，形成一个操作提纲。对实验中的注意事项及可能出现的现象等做到心中有数，但这些不要求写在预习报告中。设计性实验要求进入实验室前写出实验方案，并经指导教师审阅后实施。2、实验记录学生开始实验时，应该将记录本放在近旁，将实验中所做的每一步操作、观察到的现象和所测

7、得的数据及相关条件如实地记录下来。实验记录中应有指导教师的签名。3、实验报告主要内容包括对实验数据、实验中的特殊现象、实验操作的成败、实验的关键点等内容进行整理、解释、分析总结，回答思考题，提出实验结论或提出自己的看法。九、实验例程实验二 使用HTML语言制作网页实验学时：2实验类型：验证实验要求：必修一、实验目的1、熟悉HTML的基本结构；2、熟练掌握HTML基本标志，包括文本、表格、图像、超级链接、表单等标志；3、使用HTML制作内容丰富的网页。二、实验内容1、使用HTML表格元素设计表格。2、使用HTML表单元素设计网页。3、HTML综合实例设计。三、实验原理、方法和手段编写并调试程序以

8、达到预定效果。通过调试理解HTML结构，掌握HTML设计网页的方法。四、实验组织运行要求根据本实验的特点、要求和具体条件，采用以学生自主训练为主的开放模式组织教学。重点：掌握HTML标志的功能并设计网页难点：实验程序的问题描述、实现方法、程序流程。五、实验条件安装了Windows 系列操作系统的计算机，并配有如下应用软件：记事本Internet Explorer六、实验步骤1编写如图2-1所示的表格的HTML代码。 图2-12使用HTML表单元素设计如图2-2所示的网页： 图2-2 步骤一：创建HTML文档（文件名E2.html）。步骤二：使用修改网页背景颜色。步骤三：使用表格标志创建如图所示

9、七行一列表格。步骤四：添加相关文字与表单元素。（把实现的代码写入实验报告）3HTML综合实例设计 图2-3 综合实例步骤一：学习教材P95页例3-25中所应用的相关知识。步骤二：创建HTML文档（文件名E3.html），完成图2-3的页面效果的设计。回答如下问题：1） 插入图片使用什么标记，如何理解绝对路径和相对路径？2） 超级链接的属性有哪些，各是什么功能。 3）是什么标记，如何使用？ （把问题的答案写入实验报告）七、思考题1、常用的多媒体标记有哪些？2、什么是框架，框架的作用有哪些，与表格有什么区别？3、什么是CSS？它的实现方式有哪些？八、实验报告1、实验预习在实验前每位同学都需要对本次

10、实验进行认真的预习，并写好预习报告，在预习报告中要写出实验目的、要求，需要用到的仪器设备、物品资料以及简要的实验步骤，形成一个操作提纲。对实验中的注意事项及可能出现的现象等做到心中有数，但这些不要求写在预习报告中。设计性实验要求进入实验室前写出实验方案，并经指导教师审阅后实施。2、实验记录学生开始实验时，应该将记录本放在近旁，将实验中所做的每一步操作、观察到的现象和所测得的数据及相关条件如实地记录下来。实验记录中应有指导教师的签名。3、实验报告主要内容包括对实验数据、实验中的特殊现象、实验操作的成败、实验的关键点等内容进行整理、解释、分析总结，回答思考题，提出实验结论或提出自己的看法。九、实验

11、例程.实验三 Dreamweaver 8入门与应用实验学时：2实验类型：验证实验要求：必修一、实验目的1、掌握使用Dreamweaver8创建站点和网页；2、学会使用超级链接，表格，框架；3、熟练掌握简单网页的设计方法。二、实验内容1、使用Dreamweaver8工具创建站点和网页。2、使用表格布局网页。3、使用框架设计网页。三、实验原理、方法和手段使用Dreamweaver工具实现多功能网页的设计。结合后台程序分析网页设计的原理，并学会修改程序来增加或修改网页上内容的显示，进而掌握网页制作的方法。四、实验组织运行要求根据本实验的特点、要求和具体条件，采用以学生自主训练为主的开放模式组织教学。

12、重点：使用Dreamweaver8工具创建站点和制作网页难点：实验程序的调试与运行。五、实验条件安装了Windows 系列操作系统的计算机，并配有如下应用软件：Dreamweaver 8 Internet Explorer六、实验步骤1、使用Dreamweaver8工具创建站点和网页。步骤一：在实验文件目录下创建文件夹web-site，打开Dreamweaver8创建站点(站点名web-site，对应本地根文件夹web-site)。步骤二：在站点内创建文件夹images，网页文件index.html。 效果如图3-1所示。图3-1 web-site站点（把操作的步骤写入实验报告）2使用表格布局

13、网页，效果如图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中提供了几种可供插入的表单元素？举例说明。八、实验报告1、实验预习在实

14、验前每位同学都需要对本次实验进行认真的预习，并写好预习报告，在预习报告中要写出实验目的、要求，需要用到的仪器设备、物品资料以及简要的实验步骤，形成一个操作提纲。对实验中的注意事项及可能出现的现象等做到心中有数，但这些不要求写在预习报告中。设计性实验要求进入实验室前写出实验方案，并经指导教师审阅后实施。2、实验记录学生开始实验时，应该将记录本放在近旁，将实验中所做的每一步操作、观察到的现象和所测得的数据及相关条件如实地记录下来。实验记录中应有指导教师的签名。3、实验报告主要内容包括对实验数据、实验中的特殊现象、实验操作的成败、实验的关键点等内容进行整理、解释、分析总结，回答思考题，提出实验结论或

15、提出自己的看法。九、实验例程实验四 Dreamweaver 8强化训练实验学时：2实验类型：验证实验要求：必修一、实验目的1、掌握使用Dreamweaver制作菜单；2、学会使用表单，层，行为动作；3、熟练掌握多功能网页的设计方法。二、实验内容1、使用层制作下拉菜单，及行为动作设计。2、使用表单制作网页。3、网页实例设计“蝴蝶的天空”。三、实验原理、方法和手段 使用Dreamweaver工具实现多功能网页的设计。结合后台程序分析网页设计的原理，并学会修改程序来增加或修改网页上内容的显示，进而掌握网页制作的方法。四、实验组织运行要求根据本实验的特点、要求和具体条件，采用以学生自主训练为主的开放模

16、式组织教学。重点：学会使用表单，层，行为动作制作多功能的网页难点：实验程序调试与运行。 五、实验条件安装了Windows 系列操作系统的计算机，并配有如下应用软件：Dreamweaver 8 Internet Explorer六、实验步骤1使用层制作下拉菜单，及行为动作设计。步骤一：打开4-1文件夹，浏览网页，制作如图4-1所示效果。步骤二：增加行为动作，显示和隐藏层。 图4-1 下拉菜单（把操作的步骤写入实验报告）2使用表单制作网页，效果如图4-2所示： 图4-2 步骤一：打开4-2文件夹，浏览网页form.html。步骤二：制作类似的表单网页。（把实现的代码写入实验报告） 3网页实例设计“

17、蝴蝶的天空” 图4-3 综合实例步骤一：学习教材P232页5.13中的相关知识。步骤二：创建HTML文档（文件名E3.html），完成图4-3的页面效果的设计。回答如下问题：1) 文字上下滚动如何实现？2）增加鼠标经过图片交换的功能，如何实现。（把问题的答案写入实验报告）七、思考题1、如何使用CSS来修饰页面？2、试着利用Dreamweaver 8的行为功能为页面增加一些动态效果。3、什么是模板？试着使用模板来快速建立一些页面。八、实验报告1、实验预习在实验前每位同学都需要对本次实验进行认真的预习，并写好预习报告，在预习报告中要写出实验目的、要求，需要用到的仪器设备、物品资料以及简要的实验步骤

18、，形成一个操作提纲。对实验中的注意事项及可能出现的现象等做到心中有数，但这些不要求写在预习报告中。设计性实验要求进入实验室前写出实验方案，并经指导教师审阅后实施。2、实验记录学生开始实验时，应该将记录本放在近旁，将实验中所做的每一步操作、观察到的现象和所测得的数据及相关条件如实地记录下来。实验记录中应有指导教师的签名。3、实验报告主要内容包括对实验数据、实验中的特殊现象、实验操作的成败、实验的关键点等内容进行整理、解释、分析总结，回答思考题，提出实验结论或提出自己的看法。九、实验例程 实验五 Dreamweaver结合Photoshop制作网页实验学时：2实验类型：验证实验要求：必修一、实验目

19、的1、掌握使用Photoshop CS 2的切片工具的使用；2、掌握Dreamweaver 8编辑和修改网页。二、实验内容1、使用Photoshop“切片工具”处理图片，并导出生成HTML文件；2、用Dreamweaver编辑及修改HTML文件，制作完成完整网页。3、浏览网页并测试效果。三、实验原理、方法和手段使用Photoshop CS 的图片处理功能来优化网页制作中使用到的图片，使其更美观，并且可以引入动态动作的处理，如超级链接。多种工具的配合使用，也使网页制作常用的手段。四、实验组织运行要求根据本实验的特点、要求和具体条件，采用以学生自主训练为主的开放模式组织教学。重点：掌握Photos

20、hop CS 2的切片工具的使用 难点：网页制作中异常问题描处理。 五、实验条件安装了Windows 系列操作系统的计算机，并配有如下应用软件：Dreamweaver 8 Internet ExplorerPhotoshop CS2六、实验步骤1使用Photoshop“切片工具”处理图片（图5-1）。 图5-1（把操作的步骤写入实验报告）2用Dreamweaver编辑HTML文件， 处理效果如图5-2所示。 图5-2打开参照目录下的index.html文件查看效果，并仿照实现。（把操作的步骤写入实验报告）七、思考题1、Photoshop“切片工具”与Fireworks的切片工具进行比较。2、把

21、图片置为网页背景时如何解决大小不一致的问题。3、如何设置超级链接属性，使被链接对象在指定FRAME中显示。八、实验报告1、实验预习在实验前每位同学都需要对本次实验进行认真的预习，并写好预习报告，在预习报告中要写出实验目的、要求，需要用到的仪器设备、物品资料以及简要的实验步骤，形成一个操作提纲。对实验中的注意事项及可能出现的现象等做到心中有数，但这些不要求写在预习报告中。设计性实验要求进入实验室前写出实验方案，并经指导教师审阅后实施。2、实验记录学生开始实验时，应该将记录本放在近旁，将实验中所做的每一步操作、观察到的现象和所测得的数据及相关条件如实地记录下来。实验记录中应有指导教师的签名。3、实

22、验报告主要内容包括对实验数据、实验中的特殊现象、实验操作的成败、实验的关键点等内容进行整理、解释、分析总结，回答思考题，提出实验结论或提出自己的看法。九、实验例程 实验六 小型网站设计实验学时：2实验类型：验证实验要求：必修一、实验目的通过本次实验使学生能够：(1)掌握网页制作原则、方法及常用技术；(2)熟悉一种主流软件，如Frontpage 2003或Dreamweaver 8；(3)了解一种图像制作及动画软件使用，如Flash 8、Fireworks 8、 Fireworks 8或Photoshop CS2；(4)能独立完成完整的网站制作。二、实验内容 自选主题，制作一个内容丰富、界面友好

23、、功能完善的静态网站。从完整规划、素材收集，页面设计，网站整合、测试到网站发布与维护，实现网站设计的全程实践。三、实验原理、方法和手段使用静态网站开发技术开发完整网站，从需求分析开始、规划网站的功能、使用工具术进行网页制作和功能实现、最后发布并维护网站。体验电子商务网站开发的全过程，通过该网站的开发，理解网站的工作模式，并熟练掌握网页制作技术。四、实验组织运行要求根据本实验的特点、要求和具体条件，采用以学生自主训练为主的开放模式组织教学。重点：掌握网页制作原则、方法及常用技术开发一个网站的网站。 难点：网站结构的设计及功能网页的制作。 五、实验条件带有如下软件的PC机：操作系统：Windows

24、2000/XP设计软件：Flash 8、Fireworks 8、Fireworks 8或Photoshop CS2六、实验步骤1. 网站规划。根据实验大纲的要求，明确实验的目标，找出实现方法,按照需求分析、总体规划、详细设计这几个步骤进行，规划出网站的内容与结构。2. 网站设计：根据前期的规划使用相关工具，采用合适的网页制作技术，设计并完善网站。3. 测试并发布网站：测试每张网页，发布网站课外完成。4. 拟写实验报告。七、思考题1.网站首页布局中，采用的是什么结构，使用了那些工具，如何设计实现。2.根据栏目结构，给出网站的总体结构图。3.网站的图标及动画哪些是自己制作的，简单描述设计的步骤。4

25、.网页中动态效果有哪些，如何实现，给出主要的程序。八、实验报告1、实验预习在实验前每位同学都需要对本次实验进行认真的预习，并写好预习报告，在预习报告中要写出实验目的、要求，需要用到的仪器设备、物品资料以及简要的实验步骤，形成一个操作提纲。对实验中的注意事项及可能出现的现象等做到心中有数，但这些不要求写在预习报告中。设计性实验要求进入实验室前写出实验方案，并经指导教师审阅后实施。2、实验记录学生开始实验时，应该将记录本放在近旁，将实验中所做的每一步操作、观察到的现象和所测得的数据及相关条件如实地记录下来。实验记录中应有指导教师的签名。3、实验报告主要内容包括对实验数据、实验中的特殊现象、实验操作的成败、实验的关键点等内容进行整理、解释、分析总结，回答思考题，提出实验结论或提出自己的看法。九、实验例程