《网页制作》实验指导书-经济管理学院.doc

经济管理学院 《网页制作》 实验指导书 2012年3月前 言 一、实验总学时数 实验学时数：16 实验名称及学时分配表： 序号 实 验 名 称 学时数 实验类型 1 网页设计基础 1 验证 2 页面编辑语言XHTML 5 设计 3 网页图像处理工具Fireworks 3 设计 4 可视化网页设计工具Dreamweaver 7 设计 二、实验的目的 上机实验是《》课程的重要教学环节通过实验教学环节，对学生进行实践技能和的训练巩固在课堂上所学书本知识加深对的基本概念、基本原理和方法的理解掌握的基本并。同时，通过实教学活动，拓宽学生的知识领域，锻炼学生的实践技能，培养科学严谨、求真务实的工作作风。实验内容 实验一 网页设计基础 一、实验目的和要求 1．熟悉Internet与Web的基础知识 2．熟悉网页设计的常用工具 3．掌握网页的基本概念及组成元素 4．掌握网页开发的步骤及网页制作的基本流程 5．掌握网站的主题和风格的确定方法 6．掌握网页构图的方法与页面色彩的运用 二、实验原理与内容 1．熟悉Internet的常用功能 2．认识网页 3．常用的网页设计工具 4．网页设计的基本步骤 5．网页布局的实现方法 6．网站的类型 7．网页构图 8．页面中色彩的运用 三、实验步骤 1．熟悉Internet的常用功能 （1）浏览万维网 （2）收发电子邮件 （3）搜索信息 （4）使用BBS服务 （5）访问电子商务网站 2．认识网页 （1）浏览网页 （2）保存网页 （3）保存网页图片 （4）保存网页背景 （5）查阅网页的源代码 （6）将网页图片作为桌面墙纸 （7）将网页添加到收藏夹 （8）熟悉网页中媒体元素 3．熟悉常用的网页设计工具 （1）用XHTML语言直接编制网页的编辑软件，如记事本 （2）可视化网页制作工具，如Dreamweaver （3）素材处理工具，如Fireworks 4．网页设计的基本步骤 （1）选定主题 （2）收集资料 （3）构思 （4）总体设计 （5）工具选择 （6）制作 （7）修改 （8）测试 （9）上传 （10）维护 5．网页布局的实现方法 （1）框架布局 （2）表格布局 （3）层布局 6．熟悉网站的类型 （1）搜索引擎式门户网站，如百度、谷歌等网站 （2）综合性门户网站，如雅虎、新浪等网站 （3）电子商务网站，如亚马逊、当当等网站 （4）内容型网站，如文学站、新闻站等网站 （5）展示型网站，如从个人网站 （6）互动游戏网站，如中国互动游戏中心等网站 7．网页构图 （1）页面的重心平衡 （2）页面的布局设计 ①国字型，如维基百科网站 ②标题正文型 ③框架型 ④艺术型 ⑤Flash型 ⑥自由型 8．页面中色彩的运用 （1）色彩的基础知识——颜色的三属性，三原色模式 （2）色彩的搭配——色彩的冷暖性，色彩的内涵，色彩的搭配原则 四、思考题（可写可不写） 1．设计制作网页首先要做哪些准备工作？ 2．如何收集、积累素材？ 实验二 页面编辑语言XHTML 一、实验目的和要求 1．掌握使用文本编辑软件（Windows记事本）编辑XHTML文件制作网页的方法 2．掌握XHTML的基本语法 3．掌握XHTML中标记的编辑方法及属性设置方法 二、实验原理与内容 1．基本结构标记 2．文本标记 3．页面风格标记 4．超链接标记 5．音乐、图像和影视标记 6．图像的超链接标记 7．表格标记 8．表单标记 9．框架标记 三、实验步骤 以下内容均在Windows记事本中进行操作，首先先打开Windows记事本，再作下面的内容。 1．基本结构标记 创建一个网页包含下面的基本结构标记，内容自拟。 （1）html标记 标记格式：html…/html HTML标记是用于标记一个页面的开始和结束。 （2）head标记 标记格式：head…./head 用于标记一个页面的头部，它所标记的内容是不在页面中显示的，包含在其中的内容主要是一些设置、说明方面的内容。在HTML文档的头部除了标题标记title外，还可以有一些标记符，如meta、link等，这些元素不是必须的。 （3）body标记 标记格式：body…./body 是包含Web页面的具体内容的定界标记，每一个Web页面都必须有此标记，用于标记一个页面输出显示的开始和结束。 2．文本标记 创建一个网页包含下面（1）～（7）的标记，网页内容自拟。 （1）段落标记p 标记格式：p align=“#”…/p 用于标示一个自然段。浏览器会在段落的开始之前和结束之后各加一空白行。其中”#”是对齐属性，取值为left、center、right、justify。 （2）分行标记br和禁行标记nobr 标记格式：br/ nobr…/n