《网页设计与制作》实验指导书

《《网页设计与制作》实验指导书》由会员分享，可在线阅读，更多相关《《网页设计与制作》实验指导书（11页珍藏版）》请在金锄头文库上搜索。

1、南京工程学院经济与管理学院信息管理与信息系统专业网页设计与制作实验指导书信息管理教研室二0一三年二月网页设计与制作实验指导书一、适用专业：课程编号：1101309128课程名称：网页设计与制作英文名称：Design and Manufacture of Web Page课程类型：专业选修课总学时：32讲课学时：16实验学时：16学 分：2适用对象：信息管理与信息系统专业先修课程：计算机基础、程序设计二、实验教学目的和要求：建立Web网站是企业发布新产品信息、技术信息、商务信息的主要形式，是企业电子 商务的开端。网页设计与制作是信息管理与信息系统专业学生的必修课程。本课程主要 介绍HTML语言和

2、网页编辑工具Macromedia Dreamweaver CS4的操作使用。让学生通过上 机实践，掌握网页的设计和制作的基本技能，了解网站建设的一般过程。针对电子商务专业 的学生，网页设计与制作课程的实验教学目标是：1、使学生掌握HTML语言的语法和应用。2、使学生掌握网页编辑工具Macromedia Dreamweaver CS4的操作使用，并使用该工具 建立静态和动态网页。3、通过综合实例，介绍从网站的规划、设计、制作、上传到维护的全过程。使学生掌 握基本技能和一些咼级技巧。4、使学生了解网站管理常识和日常维护。5、简单介绍其它网页编辑工具（如FrantPage2000、Flash动画制作

3、）。三、实验硬件、软件条件：1、硬件配置：PC机（1G以上硬盘、配光驱）局域网（最好能连接Internet）2、软件配置：Windows 2000操作系统Macromedia Dreamweaver CS4FrantPage2000Macromedia Flash。四、实验项目及其学时分配表序次实验项目实验课时1实验一：简单网页制作62实验二：咼级网贝制作63实验三：动态网页制作4合计16五、实验教学内容及指导实验项目一简单网页制作（一）实验目的与要求实验目的：认识Dreamweaver CS4,掌握Dreamweaver的基本操作，创建站点和简单网页 文档，规划网页布局，插入网页基本元素，为

4、下一步制作高级与动态网页打基础。实验要求：应用Dreamweaver CS4制作5个简单网页，含有简单表格、图片及文本内容。（二）、实验内容（1）熟悉Macromedia DreamweaverCS4的界面和设计环境（2）使用框架（3）网页文本操作（4）插入图片（5）建立超链接（6）表格的使用（三）实验步骤（1）熟悉Macromedia Dreamweaver CS4的界面和设计环境在 Windows中，Dreamweaver CS4提供了两种可供选择的工作区布局：集成布局和 浮动布局。在 Windows中首次启动Dreamweaver CS4时，会出现一个对话框让用户选择 一种工作区布局。以

5、后可以使用“参数选择”对话框切换到一种不同的工作区布局。集成Dreamweaver CS4工作区中，全部窗口和面板都被集成到一个更大的应用程序窗 口中。（2）使用框架框架提供将一个浏览器窗口划分为多个区域、每个区域都可以显示不同HTML文档的 方法。使用框架的最常见的情况就是，一个框架显示包含导航控件的文档，而另一个框架显 示含有内容的文档。在Dreamweaver中有两种创建框架集的方法：既可以自己设计框架集，也可以从若干 预定义的框架集中选择。创建预定义的框架集并在某一框架中显示现有文档，执行以下操作：将插入点放置在文档中。执行下列操作之一：o在插入条的“框架”类别中，单击预定义框架集的图

6、标。o从“插入”“框架”子菜单中选择预定义的框架集。要创建新的空预定义框架集，执行以下操作： 选择“文件” “新建”。在“新建文档”对话框中，选择“框架集”类别。从“框架集”列表选择框架集。 单击“创建”。每一个框架和框架集都分别保存在不同的文件中。（3）网页文本操作Dreamweaver提供了多种向文档中添加文本和设置文本格式的方法。文本格式设置与 使用标准字处理程序类似。使用“文本”“段落格式”子菜单或属性检查器中的“格式”弹出菜单可设置文本块的 默认格式样式（“段落”、“已编排格式”、“标题1”、“标题2”等等）。更改所选文本的字体、大小、颜色和对齐方式，请使用“文本”菜单或属性检查器。

7、 若要应用文本格式（如粗体、斜体、代码、下划线等），请使用“文本”“样式”子菜 单。 可以组合几个标准的HTML标签，构成单个样式（称为HTML样式）。例如，可 以使用标签和属性组合来手动应用HTML格式，并将该格式保存为HTML样式； 该样式存储在“HTML样式”面板中。当下次想使用该HTML标签组合设置文本格 式时，只需从“HTML样式”面板中选择已保存的样式。（4）插入图片在“文档”窗口中，将插入点放置在您要显示图像的地方，然后执行以下操作之一：o在“插入”栏的“常用”类别中，单击“图像”图标。o在“插入”栏的“常用”类别中，将“图像”图标拖入“文档”窗口中（或者，如果 您正处理代码，则

8、拖入“代码”视图窗口中）。o 选择“插入” “图像”。o将图像从“资源”面板（“窗口”“资源”）拖到“文档”窗口中的所需位置；然后 跳到第3步。o将图像从“站点”面板拖到“文档”窗口中的所需位置；然后跳到第3步。o将图像从桌面拖到“文档”窗口中的所需位置；然后跳到第3步。在出现的对话框中执行下列操作之一：o选择“文件系统”以选择一个图形文件。o选择“数据源”以选择一个动态图像源文件。o浏览以选择您要插入的图像或内容源文件。（5）建立超链接创建本地链接（指同一站点中文档之间的链接），可以使用以下方式之一：o使用站点地图查看、创建、更改或删除链接。o在“文档”窗口中，选择文本或页面元素，然后使用“

9、修改”“建立链接”选择 要链接到的文件。o使用属性检查器，方法是选择文档中的文本或页面元素，然后使用属性检查 器文件夹图标，或者使用“点到文件”图标，来选择要链接到的文件，或者键 入该文件的路径。o在“文档”窗口中，选择文本或页面元素，从上下文菜单中选择建立链接”， 然后选择要链接到的文件。创建外部链接（到其他站点上文档的链接）：在属性检查器中键入绝对路径（包括适当的协议）。创建外部链接时，一定要输 入完整的路径（包括htt p:/）。链接到文档中的特定位置：首先，创建命名锚记，然后创建到命名锚记的链接。（注：锚记名称区分大小写）（6）表格的使用在“文档”窗口，将插入点放到文档中，然后执行下列

10、操作之一：o选择“插入”“表格”。o在插入栏的“常用”类别中，单击表格”图标。在出现的“插入表格”对话框中，设置下列选项：o在“行数”文本框中，键入行数。o在“列数”文本框中，键入列数。o在“宽度”文本框中键入宽度并在“宽度”文本框右边的弹出式菜单中选择单位。实验项目二 高级网页制作(一) 实验目的要求实验目的：(1) 用Dreamweaver构建静态HTML页面，掌握表单及表格的使用、掌握制作CSS, 并能在网页中导入CSS，使用CSS样式美化网页，了解最基本的JAVASCRIPT代码及函数在 网页代码中的引用。(2) 了解基本的firework mx及flash mx的制作。(3) 重点关

11、注对表单的非空检测，掌握代码及使用。(4) 插入动画与多媒体，使用超链接、层、行为、交互式表单、模板和库项目。 实验要求：应用Dreamweaver CS4制作5个高级网页，应包含CSS样式、动画、超链接、层、 行为、交互式表单、模板等内容。(二) 、实验内容(1) 插入表单及表单结构，对单选框、复选框、文本域，密码域、下拉菜单、命令按钮进 行熟悉。(2) 了解表单中的name及value的属性，使用提供的代码进行表单的非空检测。(3) 了解css，在dreamweaver中设计css,并且导入进网页进行格式编辑。(4) 打开firework及flash这两个软件，尝试做基本的gif及flas

12、h动画。(5) 插入媒体(声音和flash文档)，使用vbgsound id=bgl src=l.mid标签加入miid声音 和mp3声音，插入Flash文档(6) 使用行为和动画，熟练使用交换图像的行为，熟练使用检查表单的行为，熟练使用弹 出菜单的行为，制作层动画，包括显示-隐藏层的动画和时间轴动画。(三) 、实验步骤(1) 继续熟悉表格的使用。了解页面规划前，使用表格进行区域分隔的方法，表格的基本 属性。(2) 插入表单及表单结构，对单选框、复选框、文本域，密码域、下拉菜单、命令按钮进 行熟悉。(3) 了解表单中的name及value的属性，使用提供的代码进行表单的非空检测。写出对 nic

13、kname文本框进行非空检测的基本javascript代码。(4) dreamweaver中设计css，并且导入进网页，主要查看字体，颜色，宽度，对齐方式。(5) 打开firework及flash这两个软件，熟悉软件界面，尝试做基本的gif及flash动画。(6) 插入媒体Dreamweaver可以并入和编辑多媒体文件和对象，包括flash对象及声音对象。插入和媒体对象：在文档窗口中，将插入点放置在您要插入对象的地方，然后执行以 下操作之一：在插入栏中，选择，媒体”，然后单击您要插入的对象类型的按钮，或将其拖入 文档窗口中。从“插入”“媒体”或“插入”“交互式图像”子菜单中选择适当的对象。多数

14、情况 下，将显示一个对话框，从中选择源文件并为媒体对象指定某些参数。插入声音对象： 使用vbgsound id=bg1 src=mid/1.mid标签加入mid和mp3对象。也 可使用dw中自带的行为来加载和播放声音。(7) 使用行为和动画使用JavaScript行为行为代码是客户端JavaScript代码；即它运行于浏览器中，而不是服务器上。事件是 浏览器生成的消息，指示页的访问者执行了某种操作。例如，当访问者将鼠标指针移动到某 个链接上时，浏览器为该链接生成一个onMouseOver事件；动作是由预先编写的 JavaScript代码组成的，这些代码执行特定的任务，例如打开浏览器窗口、显示或

15、隐藏层、 播放声音或停止Shockwave影片。将行为附加到页元素之后，只要对该元素发生了指定的事件，浏览器就会调用与该事件 关联的动作（JavaScript代码）。（可以用来触发给定动作的事件随浏览器的不同而有所 不同。）例如，如果将弹出消息动作附加到某个链接并指定它将由onMouseOver事件触发, 那么只要在浏览器中用鼠标指针指向该链接，就将在对话框中弹出消息。单个事件可以触发多个不同的动作，可以指定这些动作发生的顺序。使用“行为”面板将行为附加到页元素（更具体地说是附加到标签）并修改以前所附加 行为的参数。使用“窗口”“行为”，打开“行为”面板。“行为”面板具有以下选项：动作（+）是一个弹出式菜单，其中包含可以附加到当前所选元素的多个动作。删除（-）从行为列表中删除所选的事件和动作。上下箭头按钮将特定事件的所选动作在行为列表中向上或向下移动。给定事件的动作是 以特定的顺序执行的。可以为特定的事件更改动作的顺序-例如，可以更改“onLoad事件 的多个动作的发