网站开发工具的使用与网页设计实验指导书

《网站开发工具的使用与网页制作》实验指导书
指导教师：蔡莉
百度。

Com 云南大学软件学院综合技能实 践
——《网站开发工具的使用与网页制作》实验指导 书 指导教师：蔡莉
（注意：请先简要阅读实验指导书的要求再开始做实验）
一、 实验目的
1． 2． 3． 4． 5． 认识网页 构成网页的基本要素 制作网页的基本工具 美化网页的基本工具 网页制作的基本步骤
二、 实验内容预习
一、 网页概述 网页其实是在这个世界的某一个地方某一台计算机上的一个文件， 通过互联 网，也就是 Internet 将两个不同的地址相连，把人们的信息传达到网络世界的各 个角落。

人们通过互联网，可以在世界的任何一个地方互相交流沟通。

早期的 Web 1.0 时代，大部分网页只有文字、图像信息可以浏览，这个时候 最典型的互联网标志就是门户网站，如网易、搜狐。

从 2001 年开始，人们认为 互联网开始进入 Web 2.0 时代，这时的网页可以包含动画、音频、视频，也可以 在网页中进行交流、上传文件，使用完全交互式的程序。

互联网开始更注重个人 化的网络服务，任何使用网络的人，都可以参与到网页的制作中。

静态网页的后缀通常为.html 或者.htm，例如：index.html 或者 sunny.htm。

动态网页的后缀可以为.asp，.aspx，.php，.jsp 等，例如：index.asp 或者 first.jsp 等。

二、 构成网页的基本要素 1、文字
第 1 页 共 15 页


《网站开发工具的使用与网页制作》实验指导书
指导教师：蔡莉
文字是网页发布信息所用的主要形式，由文字制作出的网页占用空间小，因 此，当用户浏览时，可以很快的展现在用户面前。

另外，文字性网页还可以利用 浏览器中“文件”菜单下的“另存为”功能将其下载，便于以后长期阅读，也可 对其进行编辑打印。

2、图形 这里的图形概念是广义的，它可以是普通的绘制图形，可以是各种图像，还 可以是动画。

网页上的图形格式一般使用 JPEG 和 GIF，这两种格式具有跨平台 的特性，可以在不同操作系统支持的浏览器上显示。

3、链接标志 链接是网页中一种非常重要的功能，是网页中最重要、最根本的元素之一。

通过链接可以从一个网页转到另一个网页，也可以从一个网站转到另一个网站。

链接的标志有文字和图形两种。

制作一些精美的图形作为链接按钮，使它和整个 网页融为一体。

4、交互功能 Internet 区别其他媒体的一个重要标志就是它的交互功能。

例如在商务网站 的页面上， 人们经过浏览， 选择了某一个产品， 就需要将自己的决定通过 Internet 告诉这个网站， 网站能够自动对该产品的数据库进行检索， 及时回应有还是没有， 数量、规格、价格等信息。

如果用户选择确定，那么网站能够返回确认信息。

像 这种交互功能其他媒体是无法比拟的。

通常网页的交互功能都是利用表单来实现的。

表单是网页中站点服务器处理 的一组数据输入域，当访问者单击按钮或图形来提交表单后，数据就会传送到服 务器上。

三、 网页制作工具 1．超文本标识语言（HTML） HTML（Hypertext Markup Language）是一种专门用于 Web 页制作的编程语 言，用来描述超文本各个部分的内容，告诉浏览器如何显示文本，怎样生成与别 的文本或图像的链接点。

HTML 文档由文本、 格式化代码和导向其他文档的超链 接组成。

2．FrontPage FrontPage 是由 Microsoft 公司推出的新一代 Web 网页制作工具。

FrontPage 使网页制作者能够更加方便、快捷地创建和发布网页，具有直观的网页制作和管 理方法，简化了大量工作。

第 2 页 共 15 页


《网站开发工具的使用与网页制作》实验指导书
指导教师：蔡莉
FrontPage 界面与 Word、PowerPoint 等软件的界面极为相似，为使用者带来 了极大的方便，Microsoft 公司将 FrontPage 封装入 Office 之中，成为 Office 家族 的一员，使之功能更为强大。

3．Dreamweaver Dreamweaver 是由 Macromedia 公司推出的一款在网页制作方面大众化的软 件，它具有可视化编辑界面，用户不必编写复杂的 HTML 源代码就可以生成跨 平台、跨浏览器的网页，不仅适合于专业网页编辑人员的需要，同时也容易被业 余网友们所掌握。

另外，Dreamweaver 的网页动态效果与网页排版功能都比一般 的软件好用，即使是初学者也能制作出相当于专业水准的网页，所以 Dreamweaver 是网页设计者的首选工具。

四、 美化网页的基本工具 为了使制作的网页更为美观，用户在利用网页制作工具制作网页时，还需利 用网页美化工具对网页进行美化。

1．Photoshop Photoshop 是由 Adobe 公司开发的图形处理软件，它是目前公认的 PC 机上 最好的通用平面美术设计软件，它功能完善、性能稳定、使用方便，所以在几乎 所有的广告、出版、软件公司，Photoshop 都是首选的平面制作工具。

2．Fireworks Fireworks 是由 Macromedia 公司开发的图形处理工具，它的出现使 Web 作 图发生了革命性的变化。

因为 Fireworks 是第一套专门为制作网页图形而设计的 软件，同时也是专业的网页图形设计及制作的解决方案。

作为一款为网络设计而开发的图像处理软件，Fireworks 还能够自动切割图 像、生成光标动态感应的 JavaScript 程序等等，而且 Fireworks 具有强大的动画 功能和一个相当完美的网络图像生成器。

3．Flash Flash 是美国 Macromedia 公司开发的矢量图形编辑和动画创作的专业软件， 它是一种交互式动画设计工具，用它可以将音乐、声效、动画以及富有新意的界 面融合在一起，以制作出高品质的网页动态效果。

它主要应用于网页设计和多媒 体创作等领域，功能十分强大和独特，已成为交互式矢量动画的标准，在网上非 常流行。

Flash 广泛应用于网页动画制作、教学动画演示、网上购物、在线游戏 等的制作中。

五、 网页制作的基本步骤 1．整体规划
第 3 页 共 15 页


《网站开发工具的使用与网页制作》实验指导书
指导教师：蔡莉
进行网站的整体规划也就是组织网站的内容和设计其结构。

网页制作者在明 确网页制作的目的及要包括的内容之后，接下来就应该对网站进行规划，以确保 文件内容条理清楚、结构合理，这样不仅可以很好地体现设计者的意图，也将使 网站可维护性与可扩展性增强。

2．网页设计与制作 在开始制作网页之前，建议应用少量时间对自己要制作的主页进行总体设 计，例如希望主页是怎样的风格，应该放一些什么信息，其他网页如何设计，分 几层来处理等等。

通常在进行网页开发时，首先都进行静态网页的制作，然后再在其中加入脚 本程序、表单等。

静态网页仅仅用来被动地发布信息，而不具有任何交互功能的 网页，它是 Web 网页的重要组成部分。

3．测试网页 当网页设计人员制作完所有网站页面之后， 需要对所设计的网页进行审查和 测试，测试内容包括功能性测试和完整性测试两个方面。

所谓功能性测试就是要保证网页的可用性，达到最初的内容组织设计目标， 实现所规定的功能，读者可方便快速地寻找到所需的内容。

完整性测试就是保证 页面内容显示正确，链接准确，无差错无遗漏。

如果在测试过程中发现了错误，就要及时修改，在准确无误后，方可正式在 Internet 上发布。

在进行功能性测试和完整性测试后，有的还需要掌握整个站点 的结构以备日后的修改。

1.4.4 网页上传发布 网页设计好，必须把它发布到互连网上，否则网站形象仍然不能展现出去。

发布的服务器可以是远程，也可以是本地，但必须支持 ASP，因为动态程序是建 立在 ASP 基础上的。

六、 使用 Dreamweaver 创建网页和站点 1．Dreamweaver 的简介 Adobe Dreamweaver CS4 站点是 Web 站点中所有文件和资源的集合。

用户 可以用它在计算机上创建 Web 页，可将 Web 页上传到 Web 服务器，并可随 时在保存文件后传输更新的文件来对站点进行维护，还可以编辑和维护未使用 Dreamweaver 创建的 Web 站点。

2．Dreamweaver 的界面介绍 Dreamweaver CS 的窗口分为 7 个部分（如图 1 所示），分别是： A、 应用程序栏（菜单栏）：应用程序窗口顶部包含一个工作区切换器、几 个菜单 （仅限 Windows）以及其它应用程序控件。

第 4 页 共 15 页


《网站开发工具的使用与网页制作》实验指导书
指导教师：蔡莉
B、 文档工具栏：包含一些按钮，它们提供各种“文档”窗口视图 （如“设计” 视图和“代码”视图）的选项、各种查看选项和一些常用操作 （如在浏览 器中预览）。

C、 文档窗口：显示当前文档。

可以选择下列任一视图：设计视图、代码视 图、拆分视图等。

D、 工作区切换器：查看文档和对象属性。

工作区还将许多常用操作放置于 工具栏中，使用户可以快速更改文档。

E、 面板组：组织各种类型的面板。

F、 标签选择器：设置某个标签的 class 或 ID 属性。

G、 属性检查器： “属性” 检查器使您可以检查和编辑当前选定页面元素 （如 文本和插入的对象）的最常用属性。

“属性”检查器中的内容根据选定的 元素会有所不同。

例如，如果您选择页面上的一个图像，则“属性”检 查器将改为显示该图像的属性 （如图像的文件路径、 图像的宽度和高度、 图像周围的边框 （如果有），等等）。

H、 文件面板： 使用 “文件 ”面板可查看和管理 Dreamweaver 站点中的文件。

图 1 Dreamweaver 的窗口
3．创建站点 在 Dreamweaver 中，术语“站点”指属于某个 Web 站点的文档的本地或 远程存储位置。

若要定义 Dreamweaver 站点，只需设置一个本地文件夹。

若要
第 5 页 共 15 页


《网站开发工具的使用与网页制作》实验指导书
指导教师：蔡莉
向 Web 服务器传输文件或开发 Web 应用程序，还必须添加远程站点和测试服 务器信息。

（1）新建一个本地站点 步骤一：选择“站点”>“新建站点 ”； 步骤二：在“站点定义 ”对话框中，输入设置信息： 若要使用站点设置向导来设置站点，请单击“基本”选项卡，然后按照提示 进行操作，见图 2。

进行必要设置如：站点名称和站点的 HTTP 地址后，点击下 一步。

图 2 新建站点
步骤三：在“编辑文件，第 2 部分”窗口中选择“否，我不想使用服务器技 术”，然后点击下一步； 步骤四：在“编辑文件，第 3 部分”窗口中选择“编辑我的计算机上的本地 副本，完成后再上传到服务器（推荐）”，接着指定站点文件存放的位置，然后 点击下一步； 步骤五：在“共享文件”窗口中的下拉列表框中选择“无”，然后点击下一 步； 步骤六：在“总结”窗口中查看创建站点的基本信息，如果没有问题，选择 “完成”按钮，结束创建站点的工作。

第 6 页 共 15 页


《网站开发工具的使用与网页制作》实验指导书
指导教师：蔡莉
图 3 站点存储位置
4．Dreamweaver 的基本操作 （1）新建网页 新建站点完成后， Dreamweaver 会在 “文档” 窗口中显示一个名为 “untitled-1” 的网页，可以把它作为第一个页面来使用。

也可以在“菜单栏”中选择“文件” ——“新建”——“html”页面选项来生成新的页面。

注意：以后的工作请在“设计”视图中完成。

可以在标题输入框中输入该网页的标题内容：例如 Welcome to my world!。

（2）设计网页内容 A. 插入文本 若要向 Dreamweaver 文档添加文本，您可以直接在“文档”窗口中键入文 本，也可以剪切并粘贴文本。

还可以从其它文档导入文本。

如果需要对文本进行 编辑，首先要选中需要编辑的文本，然后单击鼠标右键，系统弹出快捷菜单，可 以选择“段落格式”、“列表”、“对齐”等菜单选项进行排版，如图 4 所示。

完成插入文本后，将网页保存为“index.html”文件，“保存”操作见第（3）部 分。

本示例选中文本“Welcome to my world!”，将其颜色设置为“红色”，段 落格式为“标题 3”
第 7 页 共 15 页


《网站开发工具的使用与网页制作》实验指导书
指导教师：蔡莉
图 4..选中要编辑的文本
B. 插入图片 可以选择“插入”菜单中的“图像”选项来插入一张图片。

将图像插入 Dreamweaver 文档时，HTML 源代码中会生成对该图像文件的引用。

为了确保 此引用的正确性，该图像文件必须位于当前站点中。

如果图像文件不在当前站点 中， Dreamweaver 会询问您是否要将此文件复制到当前站点中。

图 5 显示了插入 图片后的页面。

第 8 页 共 15 页


《网站开发工具的使用与网页制作》实验指导书
指导教师：蔡莉
图 5 带有图片的网页
如果需要对图片进行修改，可以先选中图片，然后在“属性检查器”中对图 片的属性进行更改，例如：宽度、高等、边框等内容。

C. 插入表格 可以选择“插入”菜单中的“表格”选项来插入一张表格。

图 6 显示了表格 窗口。

在这里可以指定表格的行数、列数、宽度、边框粗细等内容。

图 6 插入表格的窗口
可以在表格的单元格中插入文本、图像、媒体等多种内容。

第 9 页 共 15 页


《网站开发工具的使用与网页制作》实验指导书
指导教师：蔡莉
图 7 网页中插入表格
图 7 显示了网页中插入了一个“1 行 2 列”的“居中”对齐的表格，左边放 文本，右边放图像，表格边框为 1。

D. 插入链接 创建链接之前，一定要清楚绝对路径、文档相对路径以及站点根目录相对路 径的工作方式。

在一个文档中可以创建几种类型的 链接： • 链接到其它文档或文件 （如图形、影片、PDF 或声音文件）的链接。

• 命名锚记链接，此类链接跳转至文档内的特定位置。

• 电子邮件链接，此类链接新建一个已填好收件人地址的空白电子邮件。

• 空链接和脚本链接，此类链接用于在对象上附加行为，或者创建执行 JavaScript 代码的链接。

注意：这里仅介绍第一种链接方式。

使用超链接命令添加链接 “超链接”命令可以创建到图像、对象或其它文档或文件的文本链接。

1 将插入点放在文档中希望出现链接的位置。

2 执行下列操作之一，显示“插入超链接”对话框： • 选择“插入”>“超级链接”。

• 在“插入 ”面板的“常用”类别中，单击“超链接”按钮。

3 输入链接的文本，然后在“链接”后面输入要链接到的文件的名称 （或 单击文件夹图标 以浏览到该文件）。

4 在“目标 ”弹出菜单中选择一个窗口 （应在该窗口中打开该文件）或键 入其名称。

第 10 页 共 15 页


当前文档中所有已命名框架的名称都显示在此弹出列表中。

如果指定的框架不存在，所链接的页面会在一个新窗口中打开，该窗口使用您所指定的名称。

也可选用下列保留目标名：
•_blank 将链接的文件加载到一个未命名的新浏览器窗口中。

•_parent 将链接的文件加载到含有该链接的框架的父框架集或父窗口中。

如果包含链接的框架不是嵌套的，则链接文件加载
到整个浏览器窗口中。

•_self 将链接的文件加载到该链接所在的同一框架或窗口中。

此目标是默认的，所以通常不需要指定它。

•_top 将链接的文件加载到整个浏览器窗口中，因而会删除所有框架。

5 在“Tab 键索引”框中，输入Tab 顺序的编号。

6 在“标题”框中，输入链接的标题。

7 在“访问键”框中，输入可用来在浏览器中选择该链接的等效键盘键（一个字母）。

8 单击“确定”。

举例说明：如果要在index.html文件中插入一个超链接，链接文本为“旅游”，链接到的文件为“travel.htm”。

注意：在设置链接时，需要首先创建好travel.htm 文件。

图8显示了travel.htm的内容：
图8.. travel.html文件
接着打开index.html文件，在原有表格中增加一行用于存放超链接（先选中表格中的一行，然后右击快捷菜单，选择“表格”——“插入行”选项即可在当前行之前插入新的一行。

）。

先输入文本“旅游”，然后选中文本，点击右边“插入”面板中的“超级链接”，出现图9所示的窗口。

窗口中的文本为：旅游，链接为“travel.html”文件（注意：该文件与index.html文件处于相同路径），目
标为“_blank”。

设置完成后，点击“确定”按钮。

图10显示设置超链接之后的index.html，链接文本变为蓝色，而且下方出现下划线。

图10 “超级链接”窗口
图10..设置超链接的网页index.html
（3）保存网页
在“菜单栏”中选择“文件”——“保存”选择来存储这个新页面，此时，需要给页面命名，如index.html，另外还有选择保存位置。

缺省位置即为刚才创建站点时的位置，见图11。

图11 保存网页
（4）浏览网页
设计好网页后，可以直接在浏览器中查看该网页的效果，或者在Dreaweaver 窗口右边的“文件面板”中选中需要预览的网页，例如：index.html，然后点击鼠标右键，在弹出菜单中选择“在浏览器中预览”选项，并选择特点浏览器后即可看到网页的最终效果。

如果对效果不满意，可以返回Dreaweaver窗口继续完善网页。

三、 实验内容和步骤
1、到FTP上下载Dreamweaver CS4，并安装在本机上，如果本机上已经安装此软件或其他低版本的软件，则直接进入下一步。

2、运行Dreamweaver CS4，打开软件的主界面，创建自己的本地站点，站点的位置在D盘根目录自己的学号文件夹下，例如：D:\20051101。

3、在目录下面创建4个网页文件：主页index.html，旅游页面travel.html，主要描述一个旅游地点；心情往事页面story.html，内容自定，可以写一些让自己开心和不开心的内容；洋浦点滴页面yangpu.html，用于描述自己在洋浦学习的感受和收获，内容自定。

4个页面的关系如下：
Index.html页面效果如下：
页头（内容自定，可以用图片加文字的形式给自己的网页取一个好听的名字）导航栏（用于放置3个二级页面的文字链接如：旅游| 心情往事| 洋浦点滴）首页内容部分，插入一个如下的表格，用于描述自己的简历。

内容如下：
快乐的小学（）
时间：可随意插入一幅图片
所在学校：
最开心的事情：
青涩的初中
时间：可随意插入一幅图片
所在学校：
最开心的事情：
繁忙的高中
时间：可随意插入一幅图片
所在学校：
最开心的事情：
页尾（用文字写出自己的学号、姓名和邮件电子）
其他3个二级页面的内容自定，但要求：一、每个页面至少分为三个部分，页头、内容页和页尾。

内容页必须有文字和图片，而且内容必须与页面名称相吻合。

4、完成4个页面的设计后，在浏览器中打开它们，并将截图放在下方。