南京工程学院经济与管理学院 信息管理与信息系统专业
《网页设计与制作》
实
验
指
导
书
信息管理教研室
二0一三年二月
《网页设计与制作》实验指导书
一、适用专业：
课程编号：  1101309128
课程名称：  网页设计与制作
英文名称：  Design and Manufacture of Web Page
课程类型：  专业选修课
总 学 时：  32      讲课学时：16      实验学时：16
学  分：  2
适用对象：  网页代码中的单标签信息管理与信息系统专业
先修课程：  计算机基础、程序设计
二、实验教学目的和要求：
建立Web网站是企业发布新产品信息、技术信息、商务信息的主要形式，是企业电子商务的开端。《网页设计与制作》是信息管理与信息系统专业学生的必修课程。本课程主要介绍HTML语言和网页编辑工具Macromedia Dreamweaver CS4的操作使用。让学生通过上机实践，掌握网页的设计和制作的基本技能，了解网站建设的一般过程。针对电子商务专业的学生，《网页设计与制作》课程的实验教学目标是：
1、使学生掌握HTML语言的语法和应用。
2、使学生掌握网页编辑工具Macromedia Dreamweaver CS4的操作使用，并使用该工具建立静态和动态网页。
3、通过综合实例，介绍从网站的规划、设计、制作、上传到维护的全过程。使学生掌握基本技能和一些高级技巧。
4、使学生了解网站管理常识和日常维护。
5、简单介绍其它网页编辑工具（如FrantPage2000、Flash动画制作）。
三、实验硬件、软件条件：
1、硬件配置：PC机（1G以上硬盘、配光驱）
            局域网（最好能连接Internet）
2、软件配置：Windows 2000操作系统
Macromedia Dreamweaver CS4
FrantPage2000
Macromedia  Flash。
四、实验项目及其学时分配表
                       
序次
实验项目
实验课时
1
实验一：简单网页制作
6
2
实验二：高级网页制作
6
3
实验三：动态网页制作
4
合计
16
五、实验教学内容及指导
实验项目一  简单网页制作
（一）实验目的与要求
实验目的：认识Dreamweaver CS4,掌握Dreamweaver的基本操作，创建站点和简单网页文档，规划网页布局，插入网页基本元素，为下一步制作高级与动态网页打基础。
实验要求：应用Dreamweaver CS4制作5个简单网页，含有简单表格、图片及文本内容。
(二)、实验内容
（1）熟悉Macromedia DreamweaverCS4的界面和设计环境
（2）使用框架
（3）网页文本操作
（4）插入图片
（5）建立超链接
（6）表格的使用
（三）实验步骤
（1）熟悉Macromedia Dreamweaver CS4的界面和设计环境
在 Windows 中，Dreamweaver  CS4提供了两种可供选择的工作区布局：集成布局和浮动布局。在 Windows 中首次启动 Dreamweaver CS4时，会出现一个对话框让用户选择一种工作区布局。以后可以使用“参数选择”对话框切换到一种不同的工作区布局。
集成 Dreamweaver CS4工作区中，全部窗口和面板都被集成到一个更大的应用程序窗口中。
  通过下面的步骤进一步熟悉其菜单、工具栏、面版。
（2）使用框架
框架提供将一个浏览器窗口划分为多个区域、每个区域都可以显示不同 HTML 文档的方法。使用框架的最常见的情况就是，一个框架显示包含导航控件的文档，而另一个框架显示含有内容的文档。
在 Dreamweaver 中有两种创建框架集的方法：既可以自己设计框架集，也可以从若干预定义的框架集中选择。
创建预定义的框架集并在某一框架中显示现有文档，执行以下操作：
∙ 将插入点放置在文档中。
∙ 执行下列操作之一：
o 在插入条的“框架”类别中，单击预定义框架集的图标。
o 从“插入”>“框架”子菜单中选择预定义的框架集。
要创建新的空预定义框架集，执行以下操作：
∙ 选择“文件”>“新建”。
∙ 在“新建文档”对话框中，选择“框架集”类别。
∙ 从“框架集”列表选择框架集。
∙ 单击“创建”。
每一个框架和框架集都分别保存在不同的文件中。
（3）网页文本操作
Dreamweaver 提供了多种向文档中添加文本和设置文本格式的方法。文本格式设置与使用标准字处理程序类似。
∙ 使用“文本”>“段落格式”子菜单或属性检查器中的“格式”弹出菜单可设置文本块的默认格式样式（“段落”、“已编排格式”、“标题 1”、“标题 2”等等）。
∙ 更改所选文本的字体、大小、颜和对齐方式，请使用“文本”菜单或属性检查器。若要应用文本格式（如粗体、斜体、代码、下划线等），请使用“文本”>“样式”子菜单。
∙ 可以组合几个标准的 HTML 标签，构成单个样式（称为 HTML 样式）。例如，可以使用标签和属性组合来手动应用 HTML 格式，并将该格式保存为 HTML 样式；该样式存储在“HTML 样式”面板中。当下次想使用该 HTML 标签组合设置文本格式时，只需从“HTML 样式”面板中选择已保存的样式。
（4）插入图片
∙ 在“文档”窗口中，将插入点放置在您要显示图像的地方，然后执行以下操作之一：
o 在“插入”栏的“常用”类别中，单击“图像”图标。
o 在“插入”栏的“常用”类别中，将“图像”图标拖入“文档”窗口中（或者，如果您正处理代码，则拖入“代码”视图窗口中）。
o 选择“插入”>“图像”。
o 将图像从“资源”面板（“窗口”>“资源”）拖到“文档”窗口中的所需位置；然后跳到第 3 步。
o 将图像从“站点”面板拖到“文档”窗口中的所需位置；然后跳到第 3 步。
o 将图像从桌面拖到“文档”窗口中的所需位置；然后跳到第 3 步。
∙ 在出现的对话框中执行下列操作之一：
o 选择“文件系统”以选择一个图形文件。
o 选择“数据源”以选择一个动态图像源文件。
o 浏览以选择您要插入的图像或内容源文件。
（5）建立超链接
∙ 创建本地链接（指同一站点中文档之间的链接）,可以使用以下方式之一：
o 使用站点地图查看、创建、更改或删除链接。
o 在“文档”窗口中，选择文本或页面元素，然后使用“修改”>“建立链接”选择要链接到的文件。
o 使用属性检查器，方法是选择文档中的文本或页面元素，然后使用属性检查器文件夹图标，或者使用“点到文件”图标，来选择要链接到的文件，或者键入该文件的路径。
o 在“文档”窗口中，选择文本或页面元素，从上下文菜单中选择“建立链接”，然后选择要链接到的文件。
∙ 创建外部链接（到其他站点上文档的链接）：
在属性检查器中键入绝对路径（包括适当的协议）。创建外部链接时，一定要输入完整的路径(包括 )。
∙ 链接到文档中的特定位置 ：
首先，创建命名锚记，然后创建到命名锚记的链接。(注： 锚记名称区分大小写)
（6）表格的使用
在“文档”窗口，将插入点放到文档中，然后执行下列操作之一： 
o 选择“插入”>“表格”。
o 在插入栏的“常用”类别中，单击“表格”图标。
在出现的“插入表格”对话框中，设置下列选项：
o 在“行数”文本框中，键入 行数。
o 在“列数”文本框中，键入 列数。
o 在“宽度”文本框中键入 宽度并在“宽度”文本框右边的弹出式菜单中选择单位。
实验项目二  高级网页制作
（一）实验目的要求
实验目的：
（1）用Dreamweaver构建静态HTML页面，掌握表单及表格的使用、掌握制作CSS，并能在网页中导入CSS，使用CSS样式美化网页，了解最基本的JAVASCRIPT代码及函数在网页代码中的引用。
（2）了解基本的firework mx及flash mx的制作。
（3）重点关注对表单的非空检测，掌握代码及使用。
（4）插入动画与多媒体，使用超链接、层、行为、交互式表单、模板和库项目。
实验要求：应用Dreamweaver CS4制作5个高级网页，应包含CSS样式、动画、超链接、层、行为、交互式表单、模板等内容。
(二)、实验内容
（1）插入表单及表单结构，对单选框、复选框、文本域，密码域、下拉菜单、命令按钮进行熟悉。
（2）了解表单中的name及value的属性，使用提供的代码进行表单的非空检测。
（3）了解css，在dreamweaver中设计css，并且导入进网页进行格式编辑。
（4）打开firework及flash这两个软件，尝试做基本的gif及flash动画。
（5）插入媒体（声音和flas档），使用<bgsound id=bg1 src="1.mid">标签加入miid声音和mp3声音，插入 Flash 文档
（6）使用行为和动画，熟练使用交换图像的行为，熟练使用检查表单的行为，熟练使用弹出菜单的行为，制作层动画，包括显示-隐藏层的动画和时间轴动画。
(三)、实验步骤
（1）继续熟悉表格的使用。了解页面规划前，使用表格进行区域分隔的方法，表格的基本属性。
（2）插入表单及表单结构，对单选框、复选框、文本域，密码域、下拉菜单、命令按钮进行熟悉。
（3）了解表单中的name及value的属性，使用提供的代码进行表单的非空检测。写出对nickname文本框进行非空检测的基本javascript代码。
（4）dreamweaver中设计css，并且导入进网页，主要查看字体，颜，宽度，对齐方式。
（5）打开firework及flash这两个软件，熟悉软件界面，尝试做基本的gif及flash动画。
（6）插入媒体
Dreamweaver可以并入和编辑多媒体文件和对象，包括flash对象及声音对象。
插入和媒体对象：在文档窗口中，将插入点放置在您要插入对象的地方，然后执行以下操作之一：在插入栏中，选择“媒体”，然后单击您要插入的对象类型的按钮，或将其拖入文档窗
口中。从“插入”>“媒体”或“插入”>“交互式图像”子菜单中选择适当的对象。多数情况下，将显示一个对话框，从中选择源文件并为媒体对象指定某些参数。
    插入声音对象： 使用<bgsound id=bg1 src="mid/1.mid">标签加入mid和mp3对象。也可使用dw中自带的行为来加载和播放声音。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。