网页制作基础教程内容Word文档下载推荐.docx

网页制作基础教程内容Word文档下载推荐.docx

《网页制作基础教程内容Word文档下载推荐.docx》由会员分享，可在线阅读，更多相关《网页制作基础教程内容Word文档下载推荐.docx（35页珍藏版）》请在冰豆网上搜索。

在快捷菜单中列出了当前状态下最可能要进行的操作命令。

1．“插入”面板组

“插入”面板组上包括7个子面板，依次为“常用”、“布局”、“表单”、“文本”、“HTML”、“应用程序”和“Flash元素”。

单击面板组名称右端的下拉按钮，打开下拉列表，如图1-4所示，在下拉列表中选择子面板名称，即可打开相应的面板。

单击下拉列表中的“收藏夹”，可在其中添加网页制作时的一些常用对象。

单击下拉列表中的“显示为制表符”，“插入”面板组则以标签的形式显示，如图1-5所示。

图1-4“插入”栏中的选项

图1-5“插入”栏以标签显示

2．文档工具栏

在文档工具栏中设有按钮，使用这些按钮可以在文档的不同视图间快速切换，这些视图包括“代码”视图、“设计”视图、同时显示“代码”视图和“设计”视图的拆分视图，如图1-6所示。

“文档”工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。

图1-6文档工具栏

文档工具栏中主要的工具按钮功能如下。

没有浏览器/检查错误按钮

—单击该按钮可以在下拉菜单中实现检查浏览器支持、查找错误及设置目标浏览器的版本等功能。

验证标记按钮

—可以验证当前文档或选中的标签。

文件管理按钮

—单击该按钮可以在下拉菜单中实现对文件只读属性的编辑、本地站点和服务器端文件的上传和下载、网页文件的自动检查及方便团队工作时的设计备注等菜单命令。

在浏览器里预览/调试按钮

—单击该按钮可以在下拉菜单中实现网页预览（可按F12键代替），纠正JavaScript的错误及选择浏览器等。

刷新设计视图按钮

—用于刷新本地和远程站点的目录列表。

视图选项按钮

—单击该按钮可以在下拉菜单中实现一些人性化的功能，如表格边框、层边框等可视化助理的显示，文件头、网格、标尺的显示等。

可视化助理按钮

—可以使用不同的可视化助理来设计页面。

3．“属性”检查器

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

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

例如，如果选择页面上的一个图像，则“属性”检查器将改为显示该图像的属性，如图1-7所示。

图1-7图像“属性”检查器

在默认情况下，“属性”检查器位于工作区的底部，但是如果需要的话，可以将它停靠在工作区的顶部。

单击“属性”字样或左端的下拉按钮，“属性”面板可折叠起来，再次单击面板即可展开。

4．文档编辑窗口

网页文档编辑窗口是Dreamweaver8.0的主工作区，在这里可以进行网页的设计制作。

（1）文档编辑窗口的缩放

网页文档编辑窗口的大小可以通过鼠标拖曳编辑区右边框来调整，或单击编辑区右边框线上的按钮，完成最大化或还原网页编辑区的操作，如图1-8所示。

图1-8最大化文档窗口按钮

（2）文档编辑窗口的标题栏

当文档窗口有一个标题栏时，标题栏显示页面标题，并在括号中显示文件的路径和文件名。

如果做了更改但尚未保存，Dreamweaver将在文件名后显示一个“*”号。

如果文档窗口处于最大化状态时，没有标题栏，在这种情况下，页面标题及文件的路径和文件名显示在主工作区窗口的标题栏中。

此外，当文档窗口处于最大化状态时，出现在文档窗口区域顶部的选项卡显示所有打开文档的文件名。

若要切换到某个文档，可以单击相应的选项卡。

（3）缩放工具和手形工具

此为Dreamweaver8.0新增的辅助工具，可以更好地控制设计。

使用放大工具可以有帮助于更容易地对齐图像、选择较小的对象及查看较小的文本。

使用手形工具，可以在“设计”视图下拖曳页面以便查看，如图1-9所示。

图1-9缩放工具和手形工具

（4）标尺和辅助线

选择“查看”｜“标尺”｜“显示”命令，可在文档编辑窗口显示标尺，从而方便设计时的定位。

辅助线是从标尺拖动到文档上的线条，它们有助于更加准确地放置和对齐对象。

使用辅助线还可以测量页面元素的大小，或者模拟Web浏览器的重叠部分（可见区域），如图1-10所示。

图1-10辅助线

若要创建水平辅助线或垂直辅助线，可以采用以下方法。

①从相应的标尺拖动。

②在“文档”窗口中定位辅助线，然后松开鼠标。

③可以通过再次拖动辅助线来重新定位辅助线。

在默认情况下，以像素值来记录辅助线与文档顶部或左侧的距离，并相对于标尺原点显示辅助线。

若要以百分比形式记录辅助线，可在创建或移动辅助线时按住Shift键。

若将光标放到辅助线上，可查看此辅助线的位置，按住Ctrl键时可查看辅助线两侧的宽度或高度。

（5）编码工具栏（只用于“代码”视图）

Dreamweaver8.0中新增加的编码工具栏在“代码”视图一侧的沟槽栏中，如图1-11所示，它提供了用于常见编码功能的按钮，可以迅速将代码添加到用户的页面中。

图1-11编码工具栏

若要迅速插入代码，请执行以下操作。

①选择“视图”｜“代码”命令，或在文档工具栏中单击“代码”按钮，切换到“代码”视图中。

②选定插入点在代码中的位置，或选择一个代码块。

③单击编码工具栏中的一个按钮，或从工具栏的弹出菜单中选择一个菜单项。

编码工具栏中各按钮的功能如下。

打开的文档按钮

—列出已打开的文档。

选择了一个文档后，它将显示在“文档”窗口中。

折叠整个标签按钮

—折叠位于一组开始和结束标签之间的内容，例如位于<

table>

和<

/table>

之间的内容。

折叠所选按钮

—折叠所选代码。

扩展全部按钮

—可还原所有折叠的代码。

选择父标签按钮

—可选择放置了插入点的那一行的内容及其两侧的开始和结束标签。

如果反复单击此按钮且标签是对称的，则Dreamweaver最终将选择最外面的<

html>

和<

/html>

标签。

选取当前代码的按钮

—选择放置了插入点的那一行的内容及其两侧的圆括号、大括弧或方括号。

如果反复单击此按钮且两侧的符号是对称的，则Dreamweaver最终将选择该文档最外面的大括弧、圆括号或方括号。

行号按钮

—可以在每个代码行的行首隐藏或显示行号。

高亮显示无效代码按钮

—将以黄色高亮显示无效的代码。

应用注释按钮

—可以在所选代码两侧添加注释标签或打开新的注释标签。

删除注释按钮

—删除所选代码的注释标签。

如果所选内容包含嵌套注释，则只会删除外部注释标签。

环绕标签按钮

—在所选代码两侧添加选自“快速标签编辑器”的标签。

最近的代码片断按钮

—可以从“代码片断”面板中插入最近使用过的代码片断。

缩进代码按钮

—将选定内容向右移动。

凸出代码按钮

—将选定内容向左移动。

格式化源代码按钮

—将先前指定的代码格式应用于所选代码，如果未选择代码块，则应用于整个页面。

（6）代码折叠

通过隐藏和展开代码块，可以重点显示想要查看的代码，如图1-12和图1-13所示。

图1-12代码折叠前图1-13代码折叠后

若要折叠代码，请执行以下操作。

①选择要折叠的代码。

②选择“编辑”｜“代码折叠”｜“折叠所选”，或单击所选代码旁边的折叠（+或）按钮。

若要折叠所选代码之外的代码，请执行以下操作。

①在“代码”视图中选择代码。

②选择“编辑”｜“代码折叠”｜“折叠外部所选”。

5．面板组

面板组是组合在一个标题下面的相关面板的集合。

面板组中选定的面板显示为一个选项卡。

每个面板组都可以展开或折叠，并且可以和其他面板组停靠在一起或取消停靠。

浮动面板是非常重要的网页处理辅助工具，它具有随着调整即可看到效果的特点。

由于它可以方便地拆分、组合和移动，所以也把它叫做浮动面板。

Dreamweaver8.0默认的面板组有以下4个。

（1）CSS面板组

CSS面板组包含“CSS样式”和“层”两个浮动面板，主要提供交互式网页设计和网页格式化的工具，如图1-14所示。

（2）“应用程序”面板组

“应用程序”面板组包含“数据库”、“绑定”、“服务器行为”、“组件”4个浮动面板，主要提供动态网页设计和数据库管理的工作，如图1-15所示。

图1-14CSS面板组图1-15“应用程序”面板组

（3）“标签”面板组

“标签”面板组包含“属性”和“行为”两个浮动面板，主要方便代码的调试，如图1-16所示。

（4）“文件”面板组

“文件”面板组包含“文件”、“资源”和“代码片断”3个浮动面板，主要提供管理站点的各种资源，如图1-17所示。

图1-16“标签”面板组图1-17“文件”面板组

这些面板组中的面板将在以后的章节中逐一介绍。

6．浮动面板组的操作

常用的浮动面板组的操作方法如下。

（1）展开和折叠浮动面板组

Dreamweaver8.0的每个浮动面板组都具有展开与折叠的功能，单击面板左上角的三角标记

即可展开与折叠浮动面板。

（2）移动浮动面板组

将鼠标指向浮动面板组左上角的标签，当鼠标指针变成4个方向箭头的图标时，便可移动浮动面板组。

利用这种方法可将浮动面板组拖离浮动面板组停靠区，或将浮动面板组拖入浮动面板组停靠区。

图1-18重新组合浮动面板

（3）重新组合浮动面板

选中浮动面板组中某个选项，单击浮动面板组右上角的按钮

，打开下拉式菜单，并在级联菜单中选择与当前浮动面板组合的浮动面板组，可重新组合浮动面板，如图1-18所示。

1.2创建本地站点—我的足球网

1.2.1案例综述

一般来说，用户所浏览的网页都存储在Internet服务器上的。

所谓Internet服务器，就是用于提供Internet服务的计算机，对于WWW浏览服务来说，Internet服务器主要用于存储用户所浏览的Web站点和页面。

通常创建一个网站，总是先在本地计算机上进行开发和调试，待完成后再上传到Internet服务器上。

因此，在本地计算机上，应该首先创建一个本地站点，用以进行网站的开发和管理。

本例将创建一个简单的站点，从中介绍本地站点的创建及站点中的文件管理。

1.2.2案例分析

在建立自己的网站之前，一定要合理地规划站点，避免建站设计工作的盲目性，有利于提高工作质量和效率。

创建一个网站应遵循的流程如下。

①对站点进行规划。

②素材准备。

③管理站点（首先要创建一个站点）。

④制作Web页面。

⑤设置Web应用程序运行环境。

⑥创建动态页。

⑦测试站点。

⑧上传站点到远程服务器。

在制作网页之前，首先应该在本地计算机的磁盘上建立一个本地站点，以文件夹的形式存在，然后将设计的网页文件及所搜集的一些资料，例如图片、声音、文字等都存放在该文件夹下，以便控制站点结构和全面系统地管理站点中的每个文件。

利用Dreamweaver8.0的文件面板就可以完成本地及远程站点的编辑和管理等任务。

在本例中主要完成以下任务。

①规划站点。

②创建本地站点。

③管理站点中的文件。

④制作简单主页。

1.2.3实现步骤

1．规划站点

在着手进行网站设计之前，做一些诸如栏目规划、文件管理的准备工作是非常重要的。

①在F盘新建文件夹myfootball，作为存放整个站点内容的文件夹，也是网站的根目录。

②网站名为“我的足球网”，包括3个栏目“我与足球”、“足球新闻”、“足球明星相片”，这3个栏目内容分别存放在网站根目录下的aboutme，news，photo文件夹里。

③网站所有素材图像存放于根目录下的文件夹image中。

④案例效果设计如图1-19所示。

图1-19“我的足球网”案例效果

2．新建站点

为实现对网站更好的管理，通常都需要在Dreamweaver8.0中新建一个站点，这样可以利用Dreamweaver8.0强大的站点管理功能来管理自己的网站。

图1-20新建“站点”

①打开Dreamweaver8.0，选择菜单栏中的“站点”｜“管理站点”命令，在随后出现的“管理站点”窗口中，单击“新建”｜“站点”命令，如图1-20所示。

②出现“站点定义”向导，在文本框中为站点命名，这里输入“myfootball”，如图1-21所示，单击“下一步”按钮。

③在“站点定义”第2部分，选择默认选项“否，我不想使用服务器技术”，如图1-22所示，单击“下一步”按钮。

图1-21输入站点名称“myfootball”

图1-22选择“否，我不想使用服务器技术”

④在“站点定义”第3部分，“您将把文件存储在计算机上的什么位置”处的文本框内输入站点根目录路径，这里输入“D:

\DRW\myfootball\”，如图1-23所示，单击“下一步”按钮。

图1-23输入本地站点所在文件夹

提示：

在第③步中选择默认选项“否，我不想使用服务器技术”，是因为本案例要建立的站点是一个简单的本地站点，与服务器技术无关。

在第④步中，定义站点根目录路径为本地计算机根目录路径，仅在本地测试，同样与服务器无关。

⑤在“您如何连接到远程服务器”下拉列表处，选择“无”选项，如图1-24所示，单击“下一步”按钮。

⑥站点定义完成，出现“总结”窗口，显示出了刚才所定义站点的基本信息，最后一句提示“可以使用‘高级’选项卡对您的站点进行进一步配置”，单击该窗口上方“高级”标签，作进一步设置，如图1-25所示。

图1-24远程服务器选择“无”图1-25站点定义向导“总结”窗口

⑦在“高级”选项卡内，可以看到前面所设置的“站点名称”及“本地根文件夹”情况，这里需要进一步设置“默认图像文件夹”位置，此处设为“D:

\DRW\myfootball\image\”，如图1-26所示，单击“确定”按钮。

图1-26设置“默认图像文件夹”

设置“默认图像文件夹”的优点在于，当要插入一幅站点外的图像到网页上时，系统会提示是否需要复制，如果需要，则系统自动将图像复制到默认图像文件夹内。

如果不设此项，则默认图像文件夹为当前站点根目录。

⑧系统自动返回到“管理站点”窗口，新建站点myfootball已出现在列表框中，如图1-27所示，单击“完成”按钮，最后完成站点的创建。

⑨创建完成的站点会自动显示在“文件”面板中，如图1-28所示。

图1-27新建站点已出现在列表框中图1-28站点显示在“文件”面板中

3．在“文件”面板中管理文件

新创建好的站点显示在“文件”面板中，这时可以看到站点下除image文件夹外，并没有任何内容，现在就可以在这里按网站的规划创建其他文件了。

①在“文件”面板中的“站点-myfootball（D:

\DRW\myfootball\）”上单击鼠标右键，在弹出的快捷菜单中选择“新建文件”命令，如图1-29所示。

②系统将自动创建新文件untitled.htm，如图1-30所示。

图1-29新建文件图1-30创建新文件untitled.htm

③将默认文件名untitled.htm改为index.htm，该文件为网站的首页文件，也是本实例要重点编辑的网页。

此处将新建文件名改为index.htm，是在本站规划中，该文件是网站的首页文件，即访问网站的人最先看到的一个网页。

一般情况下，网站默认的首页文件名是index.htm，此外也可以是index.html，index.asp，default.htm等。

（注意区分大小写）

④在“文件”面板中的“站点myfootball（D:

\DRW\myfootball\）”上单击鼠标右键，在弹出的快捷菜单中选择“新建文件夹”命令。

⑤系统自动创建新文件夹untitled，图标

表示这是一个文件夹，如图1-31所示。

⑥将默认文件夹名untitled改为aboutme，如图1-32所示。

⑦用同样的方法创建另两个文件夹photo，news，用aboutme，photo，news文件夹存放事先设计的3个栏目内容。

⑧在3个文件夹aboutme，photo，news中分别再建3个网页文件me.htm，photo.htm，news.htm，作为首页文件的3个链接指向，如图1-33所示。

图1-31新建文件夹图1-32再建3个文件夹图1-33分别在各文件夹中创建网页文件

在3个文件夹aboutme，photo，news中分别再建3个网页文件me.htm，photo.htm，news.htm时，应在相应文件夹上单击鼠标右键，从而保证所建文件分别在3个文件夹内。

4．编辑首页文件

首页文件，有时也称主页文件，是来访者光临网站最先看到的页面。

双击“文件”面板上的index.htm文件，可以在编辑区域内打开此文件进行编辑。

下面重点介绍“我的足球网”首页文件的编辑方法。

①首先为要编辑的网页设置背景色，单击编辑区域下方的

按钮，出现“页面属性”对话框。

②单击“背景颜色”旁的

按钮，选择绿色作为背景色，如图1-34所示，单击“确定”按钮。

③编辑的页面变成绿色的背景，在编辑区域内输入“我的足球网”几个字。

④在“我的足球网”几个字的下一行插入一个1行2列的表格，方法是选择“插入”｜“表格”命令，在“表格”对话框中将“行数”设为1，将“列数”设为2，单击“确定”按钮，如图1-35所示。

图1-34“页面属性”对话框图1-35插入表格

⑤在页面上出现一个1行2列的表格，将文本光标停留在第1列内，在菜单栏选择“插入”｜“图像”命令，这时会弹出“图像标签辅助功能属性”对话框，如图1-36所示，单击“确定”按钮，将素材库里的图像ch1\MAN.jpg插入进来，如图1-37所示。

图1-36“图像标签辅助功能属性”对话框

图1-37在表格第1列内插入图像

由于在创建站点时事先设置好的默认图像文件夹“D:

\DRW\myfootball\image\”，在插入站点外的图像时，系统会自动将图像文件复制到默认图像文件夹。

如果在创建站点时没有设置默认图像文件夹，则在插入站点外的图像时，系统会提示是否需要复制。

单击“是”按钮，则将文件复制到站点根目录下，如图1-38所示。

如果单击“否”按钮，则不复制，只保持与源图像的链接关系，这样做的结果是在网站移动后，会出现图像无法显示的情况。

图1-38选择是否要复制图像

文件到站点根文件夹

⑥在表格的第2列中，分3行依次输入“我与足球”、“足球新闻”、“足球明星相片”，并在下一行处插入另一张图像素材，如图1-39所示。

图1-39在表格第2列输入文字及图像

图1-40“插入日期”对话框

⑦将光标移至表格的下一行，输入“本网站最后更新时间”，紧接着插入“日期”。

方法是选择菜单栏上的“插入”｜“日期”命令，在出现的“插入日期”对话框中设置好显示的日期与时间格式，一定要选中“储存时自动更新”复选框，如图1-40所示，单击“确定”按钮。

⑧选择“我的足球网”后，在如图1-41所示的“属性”面板中进行设置，在“格式”下拉列表中选择“标题1”，单击按钮

，将网页标题居中。

图1-41设置文本属性

⑨选择“本网站最后更新时间”并插入日期，将其居中，如图1-42所示。

图1-42将最后一行文字居中

⑩制作栏目链接。

一个最简单的方法是选择“我与足球”后，用光标指向属性检查器上的

图标，并拖动鼠标到右边“文件”面板上的me.htm文件处，如图1-43所示。

图1-43拖动

图标到me.htm文件

用同样的方法制作文本“足球新闻”与“足球明星相片”的链接，其中“足球新闻”的链接指向文件是news.htm，“足球明星相片”的链接指向文件是photo.htm。

在文档编辑区域上方的标题栏，将默认标题“无标题文档”改为“我的足球网”，如图1-44所示。

文件存盘后按F12键预览实际效果。

至此，一个简单的图文并茂的主页就制作完成了，至于其他几个链接页面的制作，读者可以自由发挥。

为了方便用户浏览网站中的各个页面，别忘了在3个分页面中设置返回的超链接。

图1-44将页面标题“无标题文档”改为“我的足球网”

1.3创建网站

用Dreamweaver8.0创建Web站点有多种方式，可以创建一个静态的网站，也可以创建一个动态的具有交互功能的网站。

利用Dreamweaver8.0用户可以在本地计算机的磁盘上构造出整个网站的框架，从整体上对站点进行全局把握。

由于这时候没有与Internet连接，因此有充裕的时间完成站点的设计，进行完善的测试。

当站点设计完毕，可以利用各种上载工具，例如FTP程序，将本地站点上传到Internet服务器上，形成远端站点。

1.3.1站点的规划

在创建站点之前，应合理地规划站点的目标、结构、内容、导航机制及站点的整体风格等。

合理规划不仅有利于避免设计的盲目性，而且有利于管理众多的站点文件。

1．确定站点目标

一个好的站点，应该具有明确的目标。

目标可谓是站点设计的灵魂与向导，能够引导设计者成功地