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

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、简单介绍其它网页编辑工具（如 F

3、rantPage2000、Flash 动画制作） 。三、实验硬件、软件条件：1、硬件配置：PC 机（1G 以上硬盘、配光驱）局域网（最好能连接 Internet）2、软件配置：Windows 2000 操作系统Macromedia Dreamweaver CS4FrantPage2000Macromedia Flash。 四、实验项目及其学时分配表序次 实验项目 实验课时1 实验一：简单网页制作 62 实验二：高级网页制作 63 实验三：动态网页制作 4合计 16五、实验教学内容及指导实验项目一 简单网页制作（一）实验目的与要求实验目的：认识 Dreamweaver CS4,掌握 Dreamw

4、eaver 的基本操作，创建站点和简单网页文档，规划网页布局，插入网页基本元素，为下一步制作高级与动态网页打基础。实验要求：应用 Dreamweaver CS4 制作 5 个简单网页，含有简单表格、图片及文本内容。(二)、实验内容（1）熟悉 Macromedia DreamweaverCS4 的界面和设计环境（2）使用框架（3）网页文本操作（4）插入图片（5）建立超链接（6）表格的使用（三）实验步骤（1）熟悉 Macromedia Dreamweaver CS4 的界面和设计环境在 Windows 中，Dreamweaver CS4 提供了两种可供选择的工作区布局：集成布局和浮动布局。在 Wi

5、ndows 中首次启动 Dreamweaver CS4 时，会出现一个对话框让用户选择一种工作区布局。以后可以使用“参数选择”对话框切换到一种不同的工作区布局。集成 Dreamweaver CS4 工作区中，全部窗口和面板都被集成到一个更大的应用程序窗口中。通过下面的步骤进一步熟悉其菜单、工具栏、面版。（2）使用框架框架提供将一个浏览器窗口划分为多个区域、每个区域都可以显示不同 HTML 文档的方法。使用框架的最常见的情况就是，一个框架显示包含导航控件的文档，而另一个框架显示含有内容的文档。在 Dreamweaver 中有两种创建框架集的方法：既可以自己设计框架集，也可以从若干预定义的框架集中

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

7、的“格式”弹出菜单可设置文本块的默认格式样式（“段落” 、 “已编排格式 ”、 “标题 1”、 “标题 2”等等） 。 更改所选文本的字体、大小、颜色和对齐方式，请使用“文本”菜单或属性检查器。若要应用文本格式（如粗体、斜体、代码、下划线等） ，请使用“文本”“样式”子菜单。 可以组合几个标准的 HTML 标签，构成单个样式（称为 HTML 样式） 。例如，可以使用标签和属性组合来手动应用 HTML 格式，并将该格式保存为 HTML 样式；该样式存储在“HTML 样式 ”面板中。当下次想使用该 HTML 标签组合设置文本格式时，只需从“HTML 样式”面板中选择已保存的样式。 （4）插入图片

8、在“文档”窗口中，将插入点放置在您要显示图像的地方，然后执行以下操作之一：o 在“插入”栏的“ 常用”类别中，单击“图像”图标。o 在“插入”栏的“ 常用”类别中，将“图像”图标拖入“ 文档”窗口中（或者，如果您正处理代码，则拖入“代码”视图窗口中） 。 o 选择“插入”“图像”。 o 将图像从“资源” 面板（“ 窗口 ”“资源”）拖到“文档” 窗口中的所需位置；然后跳到第 3 步。o 将图像从“站点” 面板拖到“ 文档”窗口中的所需位置；然后跳到第 3 步。o 将图像从桌面拖到“文档”窗口中的所需位置；然后跳到第 3 步。 在出现的对话框中执行下列操作之一：o 选择“文件系统” 以选择一个图

9、形文件。o 选择“数据源” 以选择一个动态图像源文件。o 浏览以选择您要插入的图像或内容源文件。（5）建立超链接 创建本地链接（指同一站点中文档之间的链接）,可以使用以下方式之一： o 使用站点地图查看、创建、更改或删除链接。o 在“文档”窗口中，选择文本或页面元素，然后使用“ 修改 ”“建立链接”选择要链接到的文件。o 使用属性检查器，方法是选择文档中的文本或页面元素，然后使用属性检查器文件夹图标，或者使用“点到文件”图标，来选择要链接到的文件，或者键入该文件的路径。o 在“文档”窗口中，选择文本或页面元素，从上下文菜单中选择“建立链接”，然后选择要链接到的文件。 创建外部链接（到其他站点上

10、文档的链接）：在属性检查器中键入绝对路径（包括适当的协议）。创建外部链接时，一定要输入完整的路径(包括 http:/)。 链接到文档中的特定位置 ：首先，创建命名锚记，然后创建到命名锚记的链接。(注： 锚记名称区分大小写)（6）表格的使用在“文档”窗口，将插入点放到文档中，然后执行下列操作之一： o 选择“插入 ”“表格”。o 在插入栏的“ 常用”类别中，单击“表格”图标。在出现的“插入表格” 对话框中，设置下列选项： o 在“ 行数”文本框中，键入 行数。o 在“ 列数”文本框中，键入 列数。o 在“ 宽度”文本框中键入 宽度并在“宽度”文本框右边的弹出式菜单中选择单位。实验项目二 高级网页

11、制作（一）实验目的要求实验目的： （1）用 Dreamweaver 构建静态 HTML 页面，掌握表单及表格的使用、掌握制作 CSS，并能在网页中导入 CSS，使用 CSS 样式美化网页，了解最基本的 JAVASCRIPT 代码及函数在网页代码中的引用。（2）了解基本的 firework mx 及 flash mx 的制作。（3）重点关注对表单的非空检测，掌握代码及使用。（4）插入动画与多媒体，使用超链接、层、行为、交互式表单、模板和库项目。实验要求：应用 Dreamweaver CS4 制作 5 个高级网页，应包含 CSS 样式、动画、超链接、层、行为、交互式表单、模板等内容。(二)、实验内

12、容（1）插入表单及表单结构，对单选框、复选框、文本域，密码域、下拉菜单、命令按钮进行熟悉。（2）了解表单中的 name 及 value 的属性，使用提供的代码进行表单的非空检测。（3）了解 css，在 dreamweaver 中设计 css，并且导入进网页进行格式编辑。（4）打开 firework 及 flash 这两个软件，尝试做基本的 gif 及 flash 动画。（5）插入媒体（声音和 flash 文档） ，使用标签加入 miid 声音和 mp3 声音，插入 Flash 文档（6）使用行为和动画，熟练使用交换图像的行为，熟练使用检查表单的行为，熟练使用弹出菜单的行为，制作层动画，包括显示

13、-隐藏层的动画和时间轴动画。(三)、实验步骤（1）继续熟悉表格的使用。了解页面规划前，使用表格进行区域分隔的方法，表格的基本属性。（2）插入表单及表单结构，对单选框、复选框、文本域，密码域、下拉菜单、命令按钮进行熟悉。（3）了解表单中的 name 及 value 的属性，使用提供的代码进行表单的非空检测。写出对nickname 文本框进行非空检测的基本 javascript 代码。（4）dreamweaver 中设计 css，并且导入进网页，主要查看字体，颜色，宽度，对齐方式。（5）打开 firework 及 flash 这两个软件，熟悉软件界面，尝试做基本的 gif 及 flash 动画。（

14、6）插入媒体Dreamweaver 可以并入和编辑多媒体文件和对象，包括 flash 对象及声音对象。 插入和媒体对象：在文档窗口中，将插入点放置在您要插入对象的地方，然后执行以下操作之一：在插入栏中，选择“媒体”，然后单击您要插入的对象类型的按钮，或将其拖入文档窗口中。从“ 插入”“媒体 ”或“插入”“交互式图像” 子菜单中选择适当的对象。多数情况下，将显示一个对话框，从中选择源文件并为媒体对象指定某些参数。插入声音对象： 使用标签加入 mid 和 mp3 对象。也可使用 dw 中自带的行为来加载和播放声音。（7）使用行为和动画 使用 JavaScript 行为行为代码是客户端 JavaSc

15、ript 代码；即它运行于浏览器中，而不是服务器上。事件是浏览器生成的消息，指示页的访问者执行了某种操作。例如，当访问者将鼠标指针移动到某个链接上时，浏览器为该链接生成一个 onMouseOver 事件； 动作是由预先编写的 JavaScript 代码组成的，这些代码执行特定的任务，例如打开浏览器窗口、显示或隐藏层、播放声音或停止 Shockwave 影片。 将行为附加到页元素之后，只要对该元素发生了指定的事件，浏览器就会调用与该事件关联的动作（JavaScript 代码）。（可以用来触发给定动作的事件随浏览器的不同而有所不同。）例如，如果将弹出消息动作附加到某个链接并指定它将由 onMous

16、eOver 事件触发，那么只要在浏览器中用鼠标指针指向该链接，就将在对话框中弹出消息。 单个事件可以触发多个不同的动作，可以指定这些动作发生的顺序。使用“行为”面板将行为附加到页元素（更具体地说是附加到标签）并修改以前所附加行为的参数。使用“窗口”“行为”,打开“行为”面板。“行为”面板具有以下选项：动作 (+) 是一个弹出式菜单，其中包含可以附加到当前所选元素的多个动作。删除 (-) 从行为列表中删除所选的事件和动作。 上下箭头按钮将特定事件的所选动作在行为列表中向上或向下移动。给定事件的动作是以特定的顺序执行的。可以为特定的事件更改动作的顺序 - 例如，可以更改“onLoad 事件的多个动

17、作的发生顺序，但是所有 onLoad 动作在行为列表中都靠在一起。事件是一个弹出式菜单，其中包含可以触发该动作的所有事件。只有在选择了行为列表中的某个事件时才显示此菜单。根据所选对象的不同，显示的事件也有所不同。如果未显示预期的事件，则检查是否选择了正确的页元素或标签。 显示事件（“事件”菜单中的子菜单）指定当前行为应该在其中起作用的浏览器。此菜单中的选择确定哪些事件显示在“事件”弹出式菜单中。附加行为步骤如下： 在页上选择一个元素，例如一个图像或一个链接。 选择“窗口”“行为”打开“行为”面板。 单击加号 (+) 按钮并从“动作”弹出式菜单中选择一个动作。 为该动作输入参数，然后单击“确定”

18、。 触发该动作的默认事件显示在“事件”栏中。如果这不是所需的触发事件，则从“事件”弹出式菜单中选择另一个事件。 按照要求依次制作，图片的交换、表单检测、使用弹出式菜单这三中行为操作，具体步骤。 制作层动画选择表格中的对应位置，制作显示-隐藏层的操作。使用时间轴制作层动画步骤如下： 将层移至它在动画开始时应处于的位置。 选择“窗口”“其他”“时间轴”。 选择您要制作动画的层。 选择“修改”“时间轴”“在时间轴上添加对象”，或者简单地将选定层拖至 “时间轴”面板中，时间轴的第一个通道中出现一个条。该条中出现层的名称。 单击位于条末端的关键帧标记。 在页面上将层移至它在动画结束时应处于的位置。 如果

19、要让层沿曲线移动，请选择其动画条，然后按住 Ctrl 键并单击 (Windows) 动画条中部的一个帧，添加一个关键帧，或者单击动画条中部的一个帧并从上下文菜单中选择“添加关键帧” 。重复此步骤，定义其他关键帧。 按住“播放” 按钮，预览页面上的动画。 重复此过程，在时间轴上添加其他层和图像并创建更为复杂的动画。实验项目三 动态网页制作（一）实验目的要求实验目的：学习搭建服务器平台，掌握在 Macromedia Dreamweaver CS4 中使用数据库、ASP 对象、服务器行为制作动态网页，测试和发布站点。实验要求：制作 5 个动态网页（包含数据库） ，并搭建服务器平台，测试和发布站点。(

20、二)、实验内容（1）创建站点，创建页并保存新页，发布站点：预览和设置远程站点，然后发布。（2）设置 Web 应用程序（3）了解 ASP 数据库连接（4）创建 DSN 连接和 ADO 连接（5）编辑或删除数据库连接(三)、实验步骤1.站点的创建与发布在 Dreamweaver 中，站点 是下列任意一项的简称： Web 站点 ：一组位于服务器上的页，使用 Web 浏览器访问该站点的访问者可以对其进行浏览。 远程站点：服务器上组成 Web 站点的文件，这是从创作者的角度而不是访问者的角度来看的。 本地站点：与远程站点上的文件对应的本地磁盘上的文件。您在本地磁盘上编辑文件，然后将它们上传到远程站点。

21、Dreamweaver 站点定义：本地站点的一组定义特性，以及有关本地站点和远程站点对应方式的信息。创建 Web 站点要先进行规划：决定要创建多少页、每页上显示什么内容以及页是如何互相连接起来的。（1）创建站点。选择“站点”“新建站点”，即会出现“站点定义”对话框。选择“基本” 选项卡，根据“ 站点定义向导 ”的提示逐项定义，或者选择“ 高级”选项卡，分另定义“本地信息” 、 “远程信息” 、 “测试服务器”等项。（2）创建页并保存新页 选择“文件”“新建”。 即会出现“新建文档” 对话框，选择“ 页面设计”类别。选择该对话框右下角的“ 文档”单选按钮。 单击“创建” 。（3）发布站点：在浏览

22、器中预览和设置远程站点，然后发布，使用 IP 地址对其他同学的站点进行访问。2. 设置 Web 应用程序（1）设置 Web 服务器:运行 Web 应用程序，需要 Web 服务器。Web 服务器是根据 Web 浏览器的请求提供文件服务的软件。Web 服务器有时也叫做 HTTP 服务器。常见 Web 服务器包括 IIS、Netscape Enterprise Server、iPlanet Web Server 和 Apache HTTP Server。 （2）设置应 IIS 服务器: IIS 服务器是一种软件，用来帮助 Web 服务器处理特别标记的 Web 页。当请求这样一页时，Web 服务器先将

23、该页发送到应用程序服务器进行处理，然后再将该页发送到浏览器。 常见的应用程序服务器包括 Macromedia ColdFusion MX、Macromedia JRun、Microsoft .NET 框架、PHP、IBM WebSphere 和 Jakarta Tomcat。Microsoft IIS 和 PWS Web 服务器还兼有 ASP 应用程序服务器的功能。应用程序服务器通常安装在运行 Web 服务器的同一系统上。 （3）安装 ASP 应用程序服务器:开发 ASP 页，需要支持 Microsoft Active Server Pages 2.0 的应用程序服务器。常见的选择有： Mic

24、rosoft IIS，它是 Windows NT Server、Windows 2000 和 Windows XP Professional 所附带的 Microsoft PWS，在 Windows 98 和 NT Workstation 中运行的 IIS 的精简版本 Sun Chili!Soft ASP，在 Windows、Linux、Solaris 和其他平台上运行的版本。Windows 用户可以在其本地计算机上安装并运行 IIS 或 PWS。3.了解 ASP 数据库连接ASP 应用程序必须通过开放式数据库连接 (ODBC) 驱动程序（或对象链接）和嵌入式数据库 (OLE DB) 提供程序

25、连接到数据库。该驱动程序或提供程序用作解释器，能够使 Web 应用程序与数据库进行通信。 下表显示了一些可以与 Microsoft Access、Microsoft SQL Server 和 Oracle 数据库一起使用的驱动程序： 数据库 数据库驱动程序 Microsoft Access Microsoft Access 驱动程序 (ODBC) Microsoft SQL Server Microsoft SQL Server 驱动程序 (ODBC) Microsoft SQL Server 提供程序 (OLE DB) Oracle Microsoft Oracle 驱动程序 (ODBC)

26、Oracle Provider for OLE DB 可以使用数据源名称 (DSN) 或连接字符串连接到数据库。 DSN 是单个词的标识符（如 Acme），它指向数据库并包含连接到该数据库所需的全部信息。您可以在 Windows 中定义 DSN。通过安装在 Windows 系统上的 ODBC 驱动程序进行连接，则可以使用 DSN。连接字符串是手动编码的表达式，它标识数据库并列出连接到该数据库所需的信息。例如：Driver=SQL Server;Server=Socrates;Database=AcmeMktg;UID=wiley;PWD=roadrunner4. 创建 DSN 连接和 ADO

27、连接（1）使用本地 DSN 创建连接 :1. 在运行 Dreamweaver 的 Windows 计算机上定义一个 DSN。2. 在 Dreamweaver 中打开一个 ASP 页，然后打开“数据库”面板（“窗口”“数据库”）。Dreamweaver 显示为该站点定义的所有连接。3. 单击该面板上的加号 (+) 按钮，然后从弹出式菜单中选择 “数据源名称 (DSN)”。出现“数据源名称 (DSN)”对话框。输入新连接的名称。 不要在该名称中使用任何空格或特殊字符。4. 选择该对话框底部的“使用本地 DSN”选项。5. 从“数据源名称 (DSN)”弹出式菜单中选择要使用的 DSN。6. 如果需要

28、，填写“用户名”和“ 密码”框。7. 单击“测试” 。Dreamweaver 尝试连接到数据库。如果连接失败，请复查该 DSN。如果连接仍然失败，请检查 Dreamweaver 用来处理动态页的文件夹的设置.8. 单击“确定” 。新连接出现在“ 数据库”面板上。（2）使用代码进行 ADO 连接。5.编辑或删除数据库连接创建数据库连接时，Dreamweaver 会将连接信息存储到站点本地根文件夹下“连接”子文件夹中的一个文件。首先在应用程序中为页定义了记录集，Dreamweaver 才能为 ASP 应用程序创建数据库连接。此时，Dreamweaver 会在文件中写入用来建立连接的代码，并且在页面

29、中插入 include 指令。在运行时，服务器会在文档中插入连接代码。 （1）更新连接： 1. 在 Dreamweaver 中打开一个 ASP 页，然后打开“数据库”面板（“窗口”“数据库”）。连接列表出现在该面板上。 2. 右击 (Windows) 或按住 Ctrl 并单击 (Macintosh) 该连接，然后从弹出式菜单中选择“编辑连接” ，出现曾用来创建连接的对话框。 3. 做出更改，然后单击“确定”。Dreamweaver 自动更新该 include（包含）文件，这将更新站点中使用此连接的所有页。 （3）删除连接： 1. 在 Dreamweaver 中打开一个 ASP 页，然后打开“数据库”面板（“窗口”“数据库”）。连接列表出现在该面板上。 2. 右击 (Windows) 或按住 Ctrl 并单击 (Macintosh) 该连接，然后从弹出式菜单中选择“删除连接” 。出现曾用来创建连接的对话框。 3. 确认您要删除该连接。备注： 若要避免在删除连接后出错，请在“绑定”面板中双击记录集的名称并选择新的连接，以更新每个使用旧连接的记录集。