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

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

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

3、ash动画制作）。三、实验硬件、软件条件：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 中有两种创建框架集的方法：既可以自己设计框架集，也可以从若干预定义的框架集中选择。创建预定义的框架集并在某一框架中显示现有文档，执行以下操作： 将插入点放置

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

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

8、，单击“图像”图标。o 在“插入”栏的“常用”类别中，将“图像”图标拖入“文档”窗口中（或者，如果您正处理代码，则拖入“代码”视图窗口中）。 o 选择“插入”“图像”。 o 将图像从“资源”面板（“窗口”“资源”）拖到“文档”窗口中的所需位置；然后跳到第 3 步。o 将图像从“站点”面板拖到“文档”窗口中的所需位置；然后跳到第 3 步。o 将图像从桌面拖到“文档”窗口中的所需位置；然后跳到第 3 步。 在出现的对话框中执行下列操作之一：o 选择“文件系统”以选择一个图形文件。o 选择“数据源”以选择一个动态图像源文件。o 浏览以选择您要插入的图像或内容源文件。（5）建立超链接 创建本地链接（指

9、同一站点中文档之间的链接）,可以使用以下方式之一： o 使用站点地图查看、创建、更改或删除链接。o 在“文档”窗口中，选择文本或页面元素，然后使用“修改”“建立链接”选择要链接到的文件。o 使用属性检查器，方法是选择文档中的文本或页面元素，然后使用属性检查器文件夹图标，或者使用“点到文件”图标，来选择要链接到的文件，或者键入该文件的路径。o 在“文档”窗口中，选择文本或页面元素，从上下文菜单中选择“建立链接”，然后选择要链接到的文件。 创建外部链接（到其他站点上文档的链接）：在属性检查器中键入绝对路径（包括适当的协议）。创建外部链接时，一定要输入完整的路径(包括 http:/)。 链接到文档中

10、的特定位置 ：首先，创建命名锚记，然后创建到命名锚记的链接。(注： 锚记名称区分大小写)（6）表格的使用在“文档”窗口，将插入点放到文档中，然后执行下列操作之一：o 选择“插入”“表格”。o 在插入栏的“常用”类别中，单击“表格”图标。在出现的“插入表格”对话框中，设置下列选项： o 在“行数”文本框中，键入 行数。o 在“列数”文本框中，键入 列数。o 在“宽度”文本框中键入 宽度并在“宽度”文本框右边的弹出式菜单中选择单位。实验项目二 高级网页制作（一）实验目的要求实验目的： （1）用Dreamweaver构建静态HTML页面，掌握表单及表格的使用、掌握制作CSS，并能在网页中导入CSS，

11、使用CSS样式美化网页，了解最基本的JAVASCRIPT代码及函数在网页代码中的引用。（2）了解基本的firework mx及flash mx的制作。（3）重点关注对表单的非空检测，掌握代码及使用。（4）插入动画与多媒体，使用超链接、层、行为、交互式表单、模板和库项目。实验要求：应用Dreamweaver CS4制作5个高级网页，应包含CSS样式、动画、超链接、层、行为、交互式表单、模板等内容。(二)、实验内容（1）插入表单及表单结构，对单选框、复选框、文本域，密码域、下拉菜单、命令按钮进行熟悉。（2）了解表单中的name及value的属性，使用提供的代码进行表单的非空检测。（3）了解css，

12、在dreamweaver中设计css，并且导入进网页进行格式编辑。（4）打开firework及flash这两个软件，尝试做基本的gif及flash动画。（5）插入媒体（声音和flash文档），使用标签加入miid声音和mp3声音，插入 Flash 文档（6）使用行为和动画，熟练使用交换图像的行为，熟练使用检查表单的行为，熟练使用弹出菜单的行为，制作层动画，包括显示-隐藏层的动画和时间轴动画。(三)、实验步骤（1）继续熟悉表格的使用。了解页面规划前，使用表格进行区域分隔的方法，表格的基本属性。（2）插入表单及表单结构，对单选框、复选框、文本域，密码域、下拉菜单、命令按钮进行熟悉。（3）了解表单中

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

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

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

16、具有以下选项： 动作 (+) 是一个弹出式菜单，其中包含可以附加到当前所选元素的多个动作。删除 (-) 从行为列表中删除所选的事件和动作。 上下箭头按钮将特定事件的所选动作在行为列表中向上或向下移动。给定事件的动作是以特定的顺序执行的。可以为特定的事件更改动作的顺序 - 例如，可以更改“onLoad 事件的多个动作的发生顺序，但是所有 onLoad 动作在行为列表中都靠在一起。事件是一个弹出式菜单，其中包含可以触发该动作的所有事件。只有在选择了行为列表中的某个事件时才显示此菜单。根据所选对象的不同，显示的事件也有所不同。如果未显示预期的事件，则检查是否选择了正确的页元素或标签。 显示事件（“事

17、件”菜单中的子菜单）指定当前行为应该在其中起作用的浏览器。此菜单中的选择确定哪些事件显示在“事件”弹出式菜单中。附加行为步骤如下： 在页上选择一个元素，例如一个图像或一个链接。 选择“窗口”“行为”打开“行为”面板。 单击加号 (+) 按钮并从“动作”弹出式菜单中选择一个动作。 为该动作输入参数，然后单击“确定”。 触发该动作的默认事件显示在“事件”栏中。如果这不是所需的触发事件，则从“事件”弹出式菜单中选择另一个事件。 按照要求依次制作，图片的交换、表单检测、使用弹出式菜单这三中行为操作，具体步骤。 制作层动画 选择表格中的对应位置，制作显示-隐藏层的操作。使用时间轴制作层动画步骤如下： 将

18、层移至它在动画开始时应处于的位置。 选择“窗口”“其他”“时间轴”。 选择您要制作动画的层。 选择“修改”“时间轴”“在时间轴上添加对象”，或者简单地将选定层拖至“时间轴”面板中，时间轴的第一个通道中出现一个条。该条中出现层的名称。 单击位于条末端的关键帧标记。 在页面上将层移至它在动画结束时应处于的位置。 如果要让层沿曲线移动，请选择其动画条，然后按住 Ctrl 键并单击 (Windows) 动画条中部的一个帧，添加一个关键帧，或者单击动画条中部的一个帧并从上下文菜单中选择“添加关键帧”。重复此步骤，定义其他关键帧。 按住“播放”按钮，预览页面上的动画。 重复此过程，在时间轴上添加其他层和图

19、像并创建更为复杂的动画。实验项目三 动态网页制作（一）实验目的要求实验目的：学习搭建服务器平台，掌握在Macromedia Dreamweaver CS4中使用数据库、ASP对象、服务器行为制作动态网页，测试和发布站点。实验要求：制作5个动态网页（包含数据库），并搭建服务器平台，测试和发布站点。(二)、实验内容（1）创建站点，创建页并保存新页，发布站点：预览和设置远程站点，然后发布。（2）设置 Web 应用程序（3）了解 ASP 数据库连接（4）创建 DSN 连接和ADO连接（5）编辑或删除数据库连接(三)、实验步骤1.站点的创建与发布在 Dreamweaver 中，站点 是下列任意一项的简称

20、： Web 站点：一组位于服务器上的页，使用 Web 浏览器访问该站点的访问者可以对其进行浏览。 远程站点：服务器上组成 Web 站点的文件，这是从创作者的角度而不是访问者的角度来看的。 本地站点：与远程站点上的文件对应的本地磁盘上的文件。您在本地磁盘上编辑文件，然后将它们上传到远程站点。 Dreamweaver站点定义：本地站点的一组定义特性，以及有关本地站点和远程站点对应方式的信息。创建 Web 站点要先进行规划：决定要创建多少页、每页上显示什么内容以及页是如何互相连接起来的。（1）创建站点。选择“站点”“新建站点”，即会出现“站点定义”对话框。选择“基本” 选项卡，根据“站点定义向导”的

21、提示逐项定义，或者选择“高级”选项卡，分另定义“本地信息”、“远程信息”、“测试服务器”等项。 （2）创建页并保存新页 选择“文件”“新建”。 即会出现“新建文档”对话框，选择“页面设计”类别。选择该对话框右下角的“文档”单选按钮。 单击“创建”。（3）发布站点：在浏览器中预览和设置远程站点，然后发布，使用IP地址对其他同学的站点进行访问。2. 设置 Web 应用程序（1）设置 Web 服务器:运行 Web 应用程序，需要 Web 服务器。Web 服务器是根据 Web 浏览器的请求提供文件服务的软件。Web 服务器有时也叫做 HTTP 服务器。常见 Web 服务器包括 IIS、Netscape

22、 Enterprise Server、iPlanet Web Server 和 Apache HTTP Server。 （2）设置应IIS服务器: IIS服务器是一种软件，用来帮助 Web 服务器处理特别标记的 Web 页。当请求这样一页时，Web 服务器先将该页发送到应用程序服务器进行处理，然后再将该页发送到浏览器。 常见的应用程序服务器包括 Macromedia ColdFusion MX、Macromedia JRun、Microsoft .NET 框架、PHP、IBM WebSphere 和 Jakarta Tomcat。Microsoft IIS 和 PWS Web 服务器还兼有 A

23、SP 应用程序服务器的功能。应用程序服务器通常安装在运行 Web 服务器的同一系统上。 （3）安装 ASP 应用程序服务器:开发 ASP 页，需要支持 Microsoft Active Server Pages 2.0 的应用程序服务器。常见的选择有： Microsoft IIS，它是 Windows NT Server、Windows 2000 和 Windows XP Professional 所附带的 Microsoft PWS，在 Windows 98 和 NT Workstation 中运行的 IIS 的精简版本 Sun Chili!Soft ASP，在 Windows、Linux、

24、Solaris 和其他平台上运行的版本。Windows 用户可以在其本地计算机上安装并运行 IIS 或 PWS。3.了解 ASP 数据库连接ASP 应用程序必须通过开放式数据库连接 (ODBC) 驱动程序（或对象链接）和嵌入式数据库 (OLE DB) 提供程序连接到数据库。该驱动程序或提供程序用作解释器，能够使 Web 应用程序与数据库进行通信。 下表显示了一些可以与 Microsoft Access、Microsoft SQL Server 和 Oracle 数据库一起使用的驱动程序： 数据库 数据库驱动程序 Microsoft Access Microsoft Access 驱动程序 (O

25、DBC) Microsoft SQL Server Microsoft SQL Server 驱动程序 (ODBC) Microsoft SQL Server 提供程序 (OLE DB) Oracle Microsoft Oracle 驱动程序 (ODBC) Oracle Provider for OLE DB 可以使用数据源名称 (DSN) 或连接字符串连接到数据库。 DSN 是单个词的标识符（如 Acme），它指向数据库并包含连接到该数据库所需的全部信息。您可以在 Windows 中定义 DSN。通过安装在 Windows 系统上的 ODBC 驱动程序进行连接，则可以使用 DSN。连接字符

26、串是手动编码的表达式，它标识数据库并列出连接到该数据库所需的信息。例如： Driver=SQL Server;Server=Socrates;Database=AcmeMktg;UID=wiley;PWD=roadrunner4. 创建 DSN 连接和ADO连接（1）使用本地 DSN 创建连接 :1. 在运行 Dreamweaver 的 Windows 计算机上定义一个 DSN。2. 在 Dreamweaver 中打开一个 ASP 页，然后打开“数据库”面板（“窗口”“数据库”）。Dreamweaver 显示为该站点定义的所有连接。3. 单击该面板上的加号 (+) 按钮，然后从弹出式菜单中选择“数据源名称 (DSN)”。出现“数据源名称 (DSN)”对