网页设计与制作 - 万水书苑-出版资源网

用  Dreamweaver  创建网页之前，应该首先创建本地站点，只有在本地站点范围内编辑网 页，才能确保网页之间的正确链接。当本地站点通过测试且无误后，再上传到 Web 服务器上。 站点可以看作一系列文档的组合，这些文档之间通过各种链接关联起来，并拥有相似的 属性。 建立本地站点就是在本地计算机硬盘上建立一个文件夹并用这个文件夹作为站点的根目 录，然后将网页及其他相关的文件存放在该文件夹中。在  Dreamweaver  创建本地站点之前， 首先需要规划站点。  2.1.1  规划站点 站点中通常包含各种不同类型的文件。在建立一个站点时，首先要在本地磁盘上创建一 个站点文件夹（例如，D:\myweb）。为了便于管理网站中所包含的文件，需要将它们都放在站 点文件夹内。 规划站点主要包括规划站点的栏目结构和资源结构。在站点根目录下可以建立多个不同 的子文件夹，分别存放相关栏目中的 HTML 文件，如果是较为简单的网站，也可以将所有的  HTML 文件都存放在站点根目录下。在站点中通常还包括一些非 HTML 文件，如图像文件、 声音文件等，它们是作为资源文件存在的，可以将其分门别类地存放在不同的子文件夹中，例 如  image、audio  等文件夹。这样，当要在网页中插入某一个资源文件时，能很快地在相应的 文件夹中找到。 规划站点时需要注意：站点文件夹下（包括站点文件夹）的所有子文件夹或文件在命名 时需要遵循以下原则：见名识意；采用英文字母或数字命名，不要用汉字。  2.1.2  创建站点 （1）启动 Dreamweaver CS5.5 程序，单击菜单“站点”中的“管理站点”命令，弹出“管 理站点”对话框，如图 2­1 所示。如果以前定义过站点，则其名称会在列表框中列出。 （2）单击“新建”按钮，弹出“站点设置对象”对话框，如图 2­2 所示，在“站点名称” 文本框中输入要命名的站点名称，如 myweb,  在“本地站点文件夹”文本框中输入已建好的本 地站点文件夹的正确路径名称。

图 2­1  “管理站点”对话框 图 2­2  “站点设置对象 myweb”对话框 （3）站点的名称和存储的文件夹设置好之后，可以对站点的“服务器”类别进行设置，用 户指定远程服务器和测试服务器。如果仅在 Dreamweaver 站点中工作，可以跳过这一项的设置， 如果需要连接到远程服务器，可以单击页面左下角的加号，添加新服务器，如图 2­3 所示。 单击“+”按钮对服务器进行设置。设置分为“基本”和“高级”两个部分。 “基本”设 置主要是对服务器的名称、连接方法等进行设置。一般地，服务器默认的连接方法为  FTP  连 接。其他的连接方法还有 SFTP、本地/网络、WebDAV 和 RDS，如图 2­4 所示。如果需要进一 步设置，可以展开“更多选项”栏进行设置。

图 2­3  添加远程服务器

图 2­4  服务器的基本设置

“高级”设置是对远程服务器和测试服务器的服务器模型进行设置，如图 2­5 所示。

（4）设置“版本控制”选项，用户可以设置使用  Subversion  获取和存回文件，如图  2­6  所示。 图 2­6  版本控制 （5）单击“高级设置”选项卡，包含“本地信息”“遮盖”“设计备注”“文件视图列” “Contribute” “模板”和“Spry”选项。 “本地信息”选项包括选择默认图像文件夹、设置链 接相对的对象、设置 Web 站点的 URL、区分大小写的链接检查和缓存的启用与否。其余的几 个选项可以根据用户的需求进行设置选定。如图 2­7 所示。 图 2­7  “高级设置”选项卡 （6）单击图 2­7 中的“保存”按钮，返回“管理站点”对话框。此时新建的站点出现在 对话框中，如图 2­8 所示。 （7）单击图 2­8 中的“完成”按钮，新建的站点出现在“文件”面板上，如图 2­9 所示。

图 2­8  “管理站点”对话框 图 2­9  “文件”面板

2.2 管理本地站点

根据用户的需要， 可以在 Dreamweaver CS5.5 中创建多个站点。 在创建完一个本地站点后， 通常还需要对站点和站点中的文件和文件夹进行管理， 包括站点的编辑、 复制和删除以及站点 中的文件和文件夹的新建、复制、删除或重命名等。  2.2.1  编辑站点  1．打开本地站点 若要对某个站点进行编辑或管理，首先需要打开该站点。在“文件”面板上方有两个下 拉列表框，如图 2­10 所示，左边的下拉列表框是站点名称系列，在其中选择一个站点名称， 即可打开本地站点。  2．编辑站点 单击菜单“站点”中的“管理站点”命令，在“管理站点”对话框中选择已创建的站点， 单击“编辑”按钮，可以对站点的相关属性进行修改。编辑完毕后，返回至“管理站点”对话 框，单击“完成”按钮，即可完成站点的编辑。如图 2­11 所示。 图 2­10  打开站点 图 2­11  编辑站点  2.2.2  复制站点 启动 Dreamweaver CS5.5 程序，在菜单栏中单击“站点”中的“管理站点”命令，在“管

理站点”对话框中单击“复制”按钮，就会在列表中出现复制站点，如图 2­12 所示。单击“完 成”按钮，即可完成对站点的复制。 图 2­12  复制站点  2.2.3  删除站点 如果不再需要利用 Dreamweaver 对某个本地站点进行操作，则可以将其从站点列表中删除。 启动 Dreamweaver CS5.5 程序，在菜单栏中单击“站点”中的“管理站点”命令，在“管 理站点”对话框中单击“删除”按钮，选择“是”按钮，即可将站点删除。如图 2­13 所示。 图 2­13  删除站点  2.2.4  创建文件夹和文件 启动 Dreamweaver CS5.5，打开创建好的站点，在窗口右边的“文件”面板中使用鼠标右 键单击，准备创建文件夹和文件，在弹出快捷菜单中选择“新建文件夹”选项，即可完成创建 文件夹的操作。如图 2­14 所示。 启动 Dreamweaver CS5.5，在“文件”面板中使用鼠标右键单击，在弹出快捷菜单中选择 “新建文件”选项，即可完成创建文件的操作。如图 2­15 所示。  2.2.5  文件夹和文件的复制、删除或重命名 启动 Dreamweaver CS5.5，在“文件”面板中，用鼠标右键单击需要编辑的对象，在弹出 的快捷菜单中选择“编辑”命令，在子菜单中选择“剪切”“拷贝”“删除”“复制”或“重命 名”命令即可。如图 2­16 所示。

图 2­14  创建文件夹 图 2­15  创建文件 图 2­16  文件夹和文件的复制、删除或重命名  2.2.6  编辑站点文件 要编辑站点文件，可以双击“文件”面板上的该文件图标，如果是 HTML 文档就会载入  Dreamweaver 的“文档”窗口，编辑后保存文档，本地站点文件就会得到更新。如果是其他类 型的文件，双击后会启动相应外部编辑器，然后可在其中进行编辑。

2.3 网页的基本操作

站点建立好之后，下面主要是针对网页进行操作。网页文件的基本操作包括：创建网页、 打开与关闭网页、保存网页、预览网页及网页的页面属性 设置等操作。  2.3.1  新建网页  Dreamweaver 提供了多种创建网页的方法， 下面分别进 行介绍。 （1）如果 Dreamweaver CS5.5 运行后显示起始页，则 在起始页中直接选择“新建 HTML 文档” 。如图 2­17 所示。 （2） 如果 Dreamweaver CS5.5 已运行后不显示起始页， 则在“文件”菜单选择“新建”命令，打开“新建文档” 对话框。在“页面类型”列表框中选择“HTML”选项，或 者直接选择“空白页”选项，然后单击“创建”按钮，即 创建了一个新的文档。如图 2­18 所示。 图 2­18  通过“文件”菜单新建 HTML 文档  2.3.2  保存网页 新建网页文档编辑完成后，需将其保存起来。保存网页的方法如下。 （1）新建一个文件后，选择菜单“文件”中的“保存”命令，将打开“另存为”对话框， 图 2­17  直接新建 HTML 文档

图 2­19  “另存为”对话框  2.3.3  打开与关闭网页 如果要编辑或查看一个已有的网页文件，需要打开此文档。打开文档有多种方法，分别 介绍如下。 （1）启动 Dreamweaver  CS5.5 程序，在起始页面中显示了最近编辑过的文件，单击目标 文件，即可打开，如图 2­20 所示。 图 2­20  直接单击打开文件

（2）选择“文件”菜单中的“打开”命令，出现“打开”对话框，如图 2­21 所示。在“查 找范围”下拉列表框中选定要打开文档所在的位置，在“文件名”文本框中输入要打开的文件 名或直接在上方的列表框中选中要打开的文件，单击“打开”按钮即可完成文档的打开。 图 2­21  从对话框打开文件 （3）在文档窗口中，也可以直接按 Ctrl+O 组合键，出现“打开”对话框。 （4）通过“文件”面板打开文档。在“文件”面板中找到相应的文档，双击即可打开。 如图 2­22 所示。 图 2­22  通过面板打开文件 （5）选择“文件”菜单中的“退出”命令，或者单击 Dreamweaver  CS5.5 窗口右上角的 “关闭”按钮，即可关闭网页，退出 Dreamweaver CS5.5 程序。  2.3.4  页面属性的设置 在正式开始制作网页前，需要对新建的页面进行一些必要的页面属性设置。在编辑窗口

图 2­23  “页面属性”对话框 “页面属性”对话框中的各选项含义如下： （1）外观（CSS） ：在该选项中可以设置页面的一些基本属性，并且将设置的页面相关属 性自动生成为 CSS 样式表写在页面头部，如图 2­23 所示。 在“页面字体”下拉列表中选择一种字体设置为页面字体，后面按钮分别设置字体加粗 和倾斜。 在“大小”下拉列表中选择页面的默认字号，还可以设置页面字体大小的单位，默认为 “像素（px） ” 。 在“背景颜色”文本框中设置页面的背景颜色。默认为白色，点击颜色选择图标可以选 择其他的颜色。例如“#FFFFFF” ，是以 16 进制形式显示的 RGB 色值。 在“背景图像”文本框中输入网页背景图像的路径，也可点击“浏览”按钮，为网页添 加背景图像。 在使用图像作为背景时，可以在“重复”下拉列表中选择背景图像的重复方式，包括 “no­repeat”“repeat”“repeat­x”“repeat­y” 。 左右边距和上下边距是用来设置网页边距，一般都设置为“0”以方便于网页的编辑。 （2）外观（HTML） ：该选项的设置与“外观（CSS） ”的设置基本相同，唯一的区别是 “外观（HTML） ”设置的页面属性将会自动在页面主体标签<body>中添加相应的属性设置代 码，而不会自动生成 CSS 样式。如图 2­24 所示。 （3）链接（CSS） ：在该选项中可以设置一些与页面的链接效果有关的设置，在设置完成 后，同样会将设置的页面相关属性自动生成为 CSS 样式表写在页面头部，如图 2­25 所示。 在“链接字体”下拉列表中选择页面超链接文本在默认状态下的字体。 在“大小”下拉列表中选择超链接文本的字体大小。 在“链接颜色”文本框中设置网页中文本超链接的颜色。 在“已访问链接”文本框中设置网页中访问过的超链接的颜色。 在“活动链接”文本框中设置网页中激活的超链接的颜色。

图 2­24  “外观（HTML） ”选项 在“变换图像链接”文本框中设置网页中当鼠标移动到超链接文字上时超链接的颜色。 在“下划线样式”下拉列表中选择网页中当鼠标移动到超链接文字上时采用何种下划线。 图 2­25  “链接（CSS）”选项 （4）标题（CSS） ：在该选项中可以设置标题字体等属性，如图 2­26 所示。 图 2­26  “标题（CSS）”选项

示在收藏夹中。 “编码”用来设置当前网页字体采用的编码种类。中国大陆地区一般默认编码 为简体中文 GB2312，如图 2­27 所示。 图 2­27  “标题/编码”选项 （6）跟踪图像：进行网页制作时插入用作参考的图像文件，如网页效果图等，如图 2­28  所示。 图 2­28  “跟踪图像”选项

本章小结

本章重点介绍了利用 Dreamweaver CS5.5 进行站点、页面等的创建和管理流程，为下一步 网页制作打下良好的基础。

习题 2

一、选择题  1．预览网页的快捷键是（ ） 。  A．F1  B．F5  C．F12  D．F8  2．在 Dreamweaver 中，使用（ ）组合键可以弹出“页面属性设置” 。  A．Ctrl+J  B．Ctrl+I  C．Alt+J  D．Alt+I 

3．在网页设计中可以插入图像，一般在网页中可以插入三种类型的图像，下列选项中 （ ）不属于插入到网页中的图像格式。 

A．JPEG  B．PNG  C．GIF  D．BMP 

4．下列软件中， （ ）主要用于网页制作。 

A．Dreamweaver  B．Fireworks  C．Photoshop  D．Flash  5．浏览网页属于 Internet 提供的（ ）服务。  A．Telnet  B．WWW  C．E­mail  D．FTP  二、思考题  1．创建本地站点的作用是什么？  2．如何创建和管理站点？  3．在已建的网站中，如何新建网页文件 index.htm？  4．如何为新建的网页创建标题？  5．为站点中文件或文件夹命名时需要注意什么？ 三、课外资源拓展  1．站长之家http://www.chinaz.com/  2．网易学院http://tech.163.com/school/