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

《 网站（页）设计技术 》 ???????实 ?验 ?指 ?导 ?书?????? ? 曾霞霞 ??编 写 ??????????适用专业：???????????????????????????? ???????????????????????????????????????????????? ???????????闽江学院系 ???????2010年 ?7月前 ??言HTML语言及常用网页设计工具的使用，并能亲手设计出自己喜爱的网站。 本指导书开设六个实验，五个验证性实验主要让学生掌握网页的原理、HTML的结构、Dreamweaver等流行工具的使用，通过几个网页实例的开发与设计，使学生熟练掌握网页设计的步骤，选择使用合理的方法来设计功能丰富的网页；“小型网站设计”综合性实验主要让学生体验网站规划、设计、发布与维护的全过程，理解网页制作的方法和网站的工作模式，详细掌握HTML语言和Dreamweaver开发工具的应用，培养学生掌握网站开发的综合应用能力。  目 ???录 1、实验一HTML语言的认识与使用…………………………………………2、实验二…………………………………7 3、实验三………………………………..10 4、实验四………………………………….13 5、实验五Dreamweaver结合Photoshop制作网站……………………16 6、实验六小型网站设计………………………………………………18 实验一 实验学时：2 实验类型：验证 实验要求：必修 一、实验目的 1、熟悉HTML的基本结构； 2、学会创建HTML文档； 3、熟练掌握HTML基本标志，包括文本、表格、图像、超级链接等标志。 二、实验内容 1、使用记事本编写HTML代码，制作第一份网页。 程序代码见【实验例程】。 2、编写HTML列表标记实现如图1-1所示网页的设计： 3、HTML标记综合应用。 三、实验原理、方法和手段 编写并调试程序以达到预定效果。通过调试理解HTML结构，掌握HTML设计网页的方法。四、实验组织运行要求 根据本实验的特点、要求和具体条件，采用以学生自主训练为主的开放模式组织教学。 重点：掌握HTML标志的功能并设计网页 难点：实验程序的问题描述、实现方法、程序流程。 五、实验条件 六、实验步骤 1、使用记事本编写HTML代码，制作第一份网页。 步骤一：打开记事本创建文件(文件名E1.txt)。 步骤二：把如下代码写入E1.txt文件： HTML HEAD TITLE标题格式标记示例/TITLE /HEAD BODY center 这是一行普通文字P H1一级标题/H1 FONT face=宋体 color=#ee2233欢迎光临/FONTP U有下划线/U /center /BODY /HTML 步骤三：把E1.txt文件另存为E1.html. 步骤四：使用Internet Explorer浏览E1.html. 步骤五：抓图记录实现的效果 2．编写HTML代码实现如图1-1所示网页的设计： 步骤一：遵循题1的步骤创建HTML文档（文件名E2.html）。 步骤二：使用ol标记制作有序列表，起始序列为3。 步骤三：使用ul标记制作无序列表。 （把实现的代码写入实验报告） 3．HTML标记综合应用实例设计,如图1-2所示。 创建HTML文档（文件名E3.html）并按如下步骤设计。 步骤一：制作一行两列表格，边框值border=3。 步骤二：添加文字“唐诗、七言乐府”字体为隶书、字号值5、加粗。 添加文字《金缕衣》，字体为华文新魏、字号值4。以及增加其他诗句。 步骤三：添加图片。并给图片做超级链接，链接地址为E2.html。 步骤四：制作左右滚动文字“唐诗欣赏（滚动字幕制作）”。 步骤五：插入水平线。 （把实现的代码写入实验报告） 4、回答思考题并撰写实验报告 七、思考题 八、实验报告 1、实验预习???????在实验前每位同学都需要对本次实验进行认真的预习，并写好预习报告，在预习报告中要写出实验目的、要求，需要用到的仪器设备、物品资料以及简要的实验步骤，形成一个操作提纲。对实验中的注意事项及可能出现的现象等做到心中有数，但这些不要求写在预习报告中。????????设计性实验要求进入实验室前写出实验方案，并经指导教师审阅后实施。2、实验记录???????学生开始实验时，应该将记录本放在近旁，将实验中所做的每一步操作、观察到的现象和所测得的数据及相关条件如实地记录下来。???????实验记录中应有指导教师的签名。3、实验报告??????主要内容包括对实验数据、实验中的特殊现象、实验操作的成败、实验的关键点等内容进行整理、解释、分析总结，回答思考题，提出实验结论或提出自己的看法。 九、 实验二 使用HTML语言制作