《《网站(页)设计技术》实验指导书》由会员分享，可在线阅读，更多相关《《网站(页)设计技术》实验指导书（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使用表格布局网页，效果如图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、什么是锚记？如何创建锚记
