网页制作基础教程(Dreamweaver_8[1].0)-样章

第1章网页设计基础

Dreamweaver 8.0是Macromedia 公司推出的目前最新版本的网页设计软件，站点管理和页面设计是它的两大核心功能，它采用多种先进的技术，易学、易用。只要掌握初步的知识，再加上自己的创意，即可制作出独树一帜的网页。

本章重点介绍在Dreamweaver 8.0中如何创建站点并进行站点管理，从而为下一步开发网站做好准备，同时，通过本章的学习使读者熟悉Dreamweaver 8.0界面及运行环境。

1.1 初识Dreamweaver

8.0

在使用Dreamweaver开发网站之前，首先需要熟悉一下Dreamweaver的启动及设计环境。俗话说“工欲善其事，必先利其器”，通过本节可以使大家了解Dreamweaver 8.0这个神奇网页制作软件的“庐山真面目”，会使后面的学习变得更加轻松，上手更加迅速。

1.1.1 Dreamweaver 8.0的启动

步骤

①单击任务栏“开始”按钮，选择“程序”命令。

②将光标向右移动，选择Macromedia文件夹。

③将光标再向右移动，单击Macromedia Dreamweaver 8.0图标，Dreamweaver 8.0就被启动了。Dreamweaver 8.0根据设计人员和编码人员的需求自带了2种配置，此外也还可以构建自定义工作区。首次启动Dreamweaver 8.0时，系统会弹出一个“工作区设置”界面，可以从中选择一种工作区布局，如图1-1所示。“设计器”工作区适合于一般的用户，“编码器”工作区指的是代码编辑界面，适合于具有较高水平网页编程技术的用户。在这里可以选择“设计器”工作区。

如果在操作过程中想改变工作区，可单击“窗口”｜“工作区布局”命令，从中选择相应的工作区，如图1-2所示。

1.1.2 Dreamweaver 8.0的工作环境

启动Dreamweaver 8.0，双击打开任意一个网页文件，此时Dreamweaver 8.0工作界面如图1-3所示。可以看出Dreamweaver 8.0窗口是一个标准的Windows窗口，它也有标题栏、菜单栏和快捷菜单。

图1-1 “工作区设置”界面 图1-2 改变工作区

图1-3 Dreamweaver 8.0工作界面

将鼠标指针移到窗口、面板或其他地方，单击鼠标右键，弹出一个快捷菜单。在快捷菜单中列出了当前状态下最可能要进行的操作命令。

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．文档编辑窗口

网页文档编辑窗口是Dreamweaver 8.0的主工作区，在这里可以进行网页的设计制作。（1）文档编辑窗口的缩放

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

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

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

当文档窗口有一个标题栏时，标题栏显示页面标题，并在括号中显示文件的路径和文件名。如果做了更改但尚未保存，Dreamweaver将在文件名后显示一个“*”号。如果文档窗口处于最大化状态时，没有标题栏，在这种情况下，页面标题及文件的路径和文件名显示在主工作区窗口的标题栏中。

此外，当文档窗口处于最大化状态时，出现在文档窗口区域顶部的选项卡显示所有打开文档的文件名。若要切换到某个文档，可以单击相应的选项卡。

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

此为Dreamweaver 8.0新增的辅助工具，可以更好地控制设计。使用放大工具可以有帮助于更容易地对齐图像、选择较小的对象及查看较小的文本。使用手形工具，可以在“设计”视图下拖曳页面以便查看，如图1-9所示。

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

（4）标尺和辅助线

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

辅助线是从标尺拖动到文档上的线条，它们有助于更加准确地放置和对齐对象。使用辅助线还可以测量页面元素的大小，或者模拟Web浏览器的重叠部分（可见区域），如图1-10所示。

图1-10 辅助线

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

①从相应的标尺拖动。

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

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

在默认情况下，以像素值来记录辅助线与文档顶部或左侧的距离，并相对于标尺原点显示辅助线。若要以百分比形式记录辅助线，可在创建或移动辅助线时按住Shift键。若将光标放到辅助线上，可查看此辅助线的位置，按住Ctrl键时可查看辅助线两侧的宽度或高度。（5）编码工具栏（只用于“代码”视图）

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

图1-11 编码工具栏

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

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

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

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

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

打开的文档按钮—列出已打开的文档。选择了一个文档后，它将显示在“文档”窗口中。折叠整个标签按钮—折叠位于一组开始和结束标签之间的内容，例如位于

折叠所选按钮—折叠所选代码。

扩展全部按钮—可还原所有折叠的代码。

选择父标签按钮—可选择放置了插入点的那一行的内容及其两侧的开始和结束标签。如果反复单击此按钮且标签是对称的，则Dreamweaver最终将选择最外面的和标签。

选取当前代码的按钮—选择放置了插入点的那一行的内容及其两侧的圆括号、大括弧或方括号。如果反复单击此按钮且两侧的符号是对称的，则Dreamweaver最终将选择该文档最外面的大括弧、圆括号或方括号。

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

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

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

删除注释按钮—删除所选代码的注释标签。如果所选内容包含嵌套注释，则只会删除外部注释标签。

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

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

缩进代码按钮—将选定内容向右移动。

凸出代码按钮—将选定内容向左移动。

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

（6）代码折叠

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

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

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

①选择要折叠的代码。

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

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

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

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

5．面板组

面板组是组合在一个标题下面的相关面板的集合。面板组中选定的面板显示为一个选项卡。每个面板组都可以展开或折叠，并且可以和其他面板组停靠在一起或取消停靠。浮动面板是非常重要的网页处理辅助工具，它具有随着调整即可看到效果的特点。由于它可以方便地拆分、组合和移动，所以也把它叫做浮动面板。

Dreamweaver 8.0默认的面板组有以下4个。

（1）CSS面板组

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

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

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

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

（3）“标签”面板组

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

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

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

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

6．浮动面板组的操作

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

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

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

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

（2）移动浮动面板组

将鼠标指向浮动面板组左上角的标签，当鼠标指针变成4个方向箭头的图标时，便可移动浮动面板组。利用这种方法可将浮动面板组拖离浮动面板组停靠区，或将浮动面板组拖入浮动面板组停靠区。

（3）重新组合浮动面板

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

打开下拉式菜单，并在级联菜单中选择与当前浮动面板组合的浮

动面板组，可重新组合浮动面板，如图1-18所示。

1.2 创建本地站点—我的足

球网

1.2.1 案例综述 一般来说，用户所浏览的网页都存储在Internet 服务器上的。所谓Internet 服务器，就是用于提供Internet 服务的计算机，对于WWW 浏览服务来说，Internet 服务器主要用于存储用户所浏览的Web 站点和页面。

通常创建一个网站，总是先在本地计算机上进行开发和调试，待完成后再上传到Internet 服务器上。因此，在本地计算机上，应该首先创建一个本地站点，用以进行网站的开发和管理。本例将创建一个简单的站点，从中介绍本地站点的创建及站点中的文件管理。

1.2.2 案例分析

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

① 对站点进行规划。

② 素材准备。

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

④ 制作Web 页面。

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

⑥ 创建动态页。

⑦ 测试站点。

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

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

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

① 规划站点。

② 创建本地站点。

③ 管理站点中的文件。

④ 制作简单主页。

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

1.2.3 实现步骤

1．规划站点

在着手进行网站设计之前，做一些诸如栏目规划、文件管理的准备工作是非常重要的。 ① 在F 盘新建文件夹myfootball ，作为存放整个站点内容的文件夹，也是网站的根目录。 ② 网站名为“我的足球网”，包括3个栏目“我与足球”、“足球新闻”、“足球明星相片”，这3个栏目内容分别存放在网站根目录下的aboutme ，news ，photo 文件夹里。

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

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

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

2．新建站点

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

步骤

① 打开Dreamweaver 8.0，选择菜单栏中的“站点”｜“管

理站点”命令，在随后出现的“管理站点”窗口中，单击

“新建”｜“站点”命令，如图1-20所示。

② 出现“站点定义”向导，在文本框中为站点命名，这里

输入“myfootball ”，如图1-21所示，单击“下一步”按钮。

③ 在“站点定义”第2部分，选择默认选项“否，我不想

使用服务器技术”，如图1-22所示，单击“下一步”按钮。

图1-20 新建“站点”

图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所示。如果单击“否”按钮，则不复制，

只保持与源图像的链接关系，这样做的结果是在网站移动后，

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

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

⑦ 将光标移至表格的下一行，输入“本网站最后更新时间”，紧接着插入“日期”。方法是选择菜单栏上的“插入”｜“日期”命令，在出现的

“插入日期”对话框中设置好显示的日期与时间格

式，一定要选中“储存时自动更新”复选框，如图

1-40所示，单击“确定”按钮。

⑧ 选择“我的足球网”后，在如图1-41所示的“属

性”面板中进行设置，在“格式”下拉列表中选择“标题1”

，单击按钮，将网页标题居中。

图1-41 设置文本属性

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

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

图1-38 选择是否要复制图像 文件到站点根文件夹

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

⑩制作栏目链接。一个最简单的方法是选择“我与足球”后，用光标指向属性检查器上的

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

图1-43 拖动图标到me.htm文件

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

在文档编辑区域上方的标题栏，将默认标题“无标题文档”改为“我的足球网”，如图1-44所示。文件存盘后按F12键预览实际效果。

至此，一个简单的图文并茂的主页就制作完成了，至于其他几个链接页面的制作，读者可以自由发挥。为了方便用户浏览网站中的各个页面，别忘了在3个分页面中设置返回的超链接。

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

1.3 创建

网站

用Dreamweaver 8.0创建Web站点有多种方式，可以创建一个静态的网站，也可以创建一个动态的具有交互功能的网站。利用Dreamweaver 8.0用户可以在本地计算机的磁盘上构造出整个网站的框架，从整体上对站点进行全局把握。由于这时候没有与Internet连接，因此有充裕的时间完成站点的设计，进行完善的测试。当站点设计完毕，可以利用各种上载工具，例如FTP程序，将本地站点上传到Internet服务器上，形成远端站点。

1.3.1 站点的规划

在创建站点之前，应合理地规划站点的目标、结构、内容、导航机制及站点的整体风格等。合理规划不仅有利于避免设计的盲目性，而且有利于管理众多的站点文件。

1．确定站点目标

一个好的站点，应该具有明确的目标。目标可谓是站点设计的灵魂与向导，能够引导设计者成功地设计站点。站点的目标因主题而异，因此，在设计站点之前应该明确站点的目标，才能有条不紊地设计和管理好站点文件。

2．规划站点结构

俗话说，“良好的开端就是成功的一半”，认真地规划站点结构，能够避免日后出现文件管理混乱的局面。

在规划站点结构时应遵循以下两个原则。

（1）本地站点和远程站点采用相同的结构

将本地站点和远程站点设置成相同的结构，以便于站点的维护和管理。在本地站点结构设置修改完成后，利用Dreamweaver将本地站点上的文件及文件夹上传到远程服务器上。（2）用文件夹保存文档

应将站点文件分门别类，保存在站点根目录下的文件夹中，从而使文件的组织管理一目了然。

3．规划站点内容

站点的内容一定要丰富，纵然有漂亮的外表，没有充实的内容，也不能吸引广大浏览者。

可以将各种不同的内容划分为几个板块，例如，生活、旅游、健康、IT等，这样既可以方便网站设计者，又能够方便用户获取相关信息。

除了文本和图像等内容外，如果需要，还可以加入多媒体元素、层动画等内容，使得在丰富网站内容的同时，平添几分生趣。

此外，要注意使用合理的文件名称，尽量避免使用中文名称，因为大多数的软件平台总是基于英文的。有的Web服务器是区分大小写的，所以，一般都采用小写字母命名站点中的文件。

4．规划站点的导航机制

一个优秀的站点，应该具有明确的导航系统，避免使用户在页面上迷失方向，找不到自己想要浏览的内容。

在规划站点的导航机制时，应注意以下几个方面。

（1）返回首页链接

一般在站点的每个页面上都有首页的链接，方便用户回到开始的地方，寻找新的导航目标。同时，当用户在页面上迷失方向时，可以返回首页，重新开始。

（2）导航标题明确

导航标题文字或图像具有明确的导航指示作用，标题性文字一般是页面内容的概括，例如“今日要闻”，用户一看到该标题文字，就可知道链接的内容是当日重要的新闻，如果要查阅当日发生的重要事件，单击该链接即可。

相对于文字导航标题，图像标题更有其独到的一面。例如，做一个首页的链接，设计者往往是添加一个大家所熟悉的小狐狸图标，即搜狐网站的标志。这样，既可以起到明确的导航作用，同时又比单调的文本要丰富得多。此外，可以在图像上添加替代文本，这些文本可起到辅助的指示作用。

5．明确站点的风格

站点的风格应该能够自然地流露出站点的主题，因此，应紧紧围绕站点主题和内容设计出页面的形象和风格。例如，以诗词歌赋为主题的站点，最好能够体现出书香韵味。

在实际创作过程中，可以使用模板创建风格相同的页面，使用库调用页面内经常出现的元素，既可以提高设计的效率，又使得管理这些文件变得轻松。

1.3.2 定义本地站点

在Dreamweaver中，站点的管理放在面板中进行，单击“文件”面板右侧的“管理站点”链接，可以打开站点管理窗口。利用“管理站点”对话框可创建和管理站点。

1．“管理站点”对话框

选择“站点”｜“管理站点”命令，弹出“管理站点”对话框，该对话框的作用是创建新站点、编辑站点、复制站点、删除站点及导入或导出站点。

（1）创建新站点

Dreamweaver的“管理站点”对话框除了提供新建“站

点”功能，还提供了新建“FTP与RDS服务器”功能，

如图1-45所示。利用新建“FTP与RDS服务器”，可

以建立与远程计算机的联系，进行文件的远程编辑。

（2）编辑站点

对已经设置好的站点进行设置修改。

（3）复制站点

在“管理站点”对话框中可以建立一个站点的副本，副本将出现在站点列表窗口中。（4）删除站点

将不需要的所选站点从“管理站点”对话框中删除，执行删除命令时会提醒用户该操作无法撤销。

（5）导入和导出站点

可以将站点导出为XML文件，然后将其导入Dreamweaver。这样就可以在各计算机和产品版本之间移动站点，或与其他用户共享。

2．创建本地站点

单击“管理站点”对话框中的“新建”按钮，可以通过弹出如图1-46所示的对话框来创建本站点。此对话框提供了“基本”和“高级”两种创建本地站点的方式。

（1）通过“基本”选项卡创建

在如图1-46所示的对话框中，单击“基本”标签，出现“站点定义”向导，如图1-46所示，它将逐步引导完成设置过程。在“站点定义”向导中回答每一屏上出现的问题，然后单击“下一步”按钮继续进行设置，直至完成。

（2）通过“高级”选项卡创建

对于有经验的Dreamweaver用户，推荐使用“高级”选项卡来完成站点的创建。单击“站点定义”向导中的“高级”标签，出现“高级”设置选项卡，如图1-47所示。它可以根据需要分别设置本地、远程和测试服务器信息。

在本机上用Dreamweaver设计网站，如要快速开始，可以选择设置本地信息，而且开始使用Dreamweaver前至少应设置一个本地文件夹。至于其他远程和测试信息，可以以后再添加。下面重点介绍对“本地信息”设置的方法。

在如图1-47所示的“高级”选项卡中，选择“分类”列表中的“本地信息”，在右侧出现相关选项，设置本地文件夹。

设置本地文件夹的属性如下。

“站点名称”—输入站点的名称。

图1-46 “站点定义”向导中的“基本”选项卡图1-47 设置本地信息

“本地根文件夹”—指定放置站点文件的本地文件夹。

“自动刷新本地文件列表”—选择该复选框，则当站点文件发生变化时，自动更新文件列表。

“默认图像文件夹”—指定放置站点图像文件的目录。

“HTTP 地址”—指定站点的URL 地址。

“缓存”—选择“启用缓存”复选框，创建本地缓存，有利于提高站点的链接和站点管理任务的速度，而且可以有效地使用“资源”面板管理站点资源。

1.3.3 管理站点

在Dreamweaver 8.0中利用“文件”面板，可以对本地站点的文件或文件夹进行选择、移动、复制、删除等操作。 1．在站点中选择多个文件

在“文件”面板中可以用以下操作方法选择多个文件。

① 单击第一个文件，按住Shift 键，然后单击最后一

个要选择的文件，可选择一组连续的文件。

② 按住Ctrl 键，然后单击要选择的文件，可选择一

组不连续的文件。

2．在本地站点中剪切、粘贴、复制、删除、重

命名文件或文件夹

在“文件”面板中对文件的剪切、粘贴、复制、删除、

重命名操作可先选中要操作的文件或文件夹，单击鼠标

右键打开快捷菜单，从中选择相应的命令便可完成相应

的文件操作，如图1-48所示。

3．创建文件或文件夹 建立了本地站点后，就可以通过创建自己的网页文件和文件夹来扩充站点了。

步骤

① 在“文件”面板中单击鼠标右键，从弹出的快捷菜单中选

择“新建文件”，如图1-49所示。将名称改为相应的网页文件

名即可。

② 在“文件”面板中右击，从弹出的快捷菜单中选择“新建

文件夹”，给新创建的文件夹命名。

提示：在创建文件或文件夹时，单击鼠标右键的位置即为创建后的位置。例如，在站点根目录上单击鼠标右键新建文件，则此文件将存在于站点根目录。

可以使用相同的方法创建代表网站结构的其他文件夹，从而可以创建一个清晰的树状目录。

4．“文件”面板的使用

利用“文件”面板可对网站上的文件进行有效地管理。单击站点“文件”面板右边的扩展/

折叠按钮，可以展开站点“文件”管理面板，如图1-50所示，其中的站点文件、测试服务器和站点地图图标按钮只有在“文件”面板展开时才出现。下面介绍其主要功能。

图1-49 创建网页文件

图1-48 在“文件”面板中对文件操作

计算机基础公开课教案

计算机应用基础公开课教案 授课人：袁涛授课对象：机电工程系2011级学生 时间：2011年12月8日星期四上午一、二节 课题：excel中数据的基本处理 一、教学目标： （一）知识与技能 1、掌握一些常见函数的使用方法 2、会对一组数据排序、筛选 （二）过程与方法 1、锻炼学生恰当、自如地使用函数的能力； 2、培养学生收集、分析、处理数据的能力； 3、培养自主探索，合作交流能力。 （三）情感态度价值观 这课堂，通过情境的创设，使学生明确探究目标，给学生思维以方向，同时产生强烈的探究兴趣和欲望，给思维以动力。通过利用EXCEL工具软件制作出数据图表，提升学生对使用计算机软件的热情。 二、教学重点： 1、基本函数的使用方法 2、自动筛选和高级筛选 三、教学难点： 1、用公式进行计算 2、高级筛选

四、教学方法 讲授法、演示法、练习法 五、教学过程： （一）复习导入 前面我们学习了工作簿、工作标的基本操作和数据的格式化，然而在我们学习和工作中知道这些是远远不够的，那么我们接下来一些常见函数的使用和如何对一组数据进行简单的处理。 （二）实例引课 实例： 1、基本函数的使用 （1）讲述Sum函数的功能和使用方法，演示使用sum函数求和（附带讲述自动求和）； （2）讲述Average函数的功能和使用方，演示使用average函数求平均值； （3）讲述Max函数的功能和使用方法，演示使用max函数求最高分；（4）讲述Min函数的功能和使用方法，演示使用min函数求最低分。

2、如何用公式对数据进行相应的计算 3、数据的排序和筛选 （1）排序 功能：按要求对一组数据进行排序 操作步骤：选定将要排序的数据区域→数据菜单→选择关键字和排序方式 演示：对实例进行排序操作 （2）数据的筛选 功能：按要求把符合条件的数据筛选出来 自动筛选：选定所要筛选的数据→数据菜单→筛选→自动筛选→筛选项目→筛选条件 演示对实例进行自动筛选 高级筛选：数据菜单→筛选→高级筛选→筛选方式→列表区域（所要筛选的数据区域）→条件区域→筛选结果所放区域 演示对实例进行高级筛选 （三）学生练习 结合上节课和本节课的内容，按要求对下列数据进行处理

计算机基础公开课教案(完整资料).doc

此文档下载后即可编辑 计算机应用基础公开课教案 授课人：袁涛授课对象：机电工程系2011级学生 时间：2011年12月8日星期四上午一、二节 课题：excel中数据的基本处理 一、教学目标： （一）知识与技能 1、掌握一些常见函数的使用方法 2、会对一组数据排序、筛选 （二）过程与方法 1、锻炼学生恰当、自如地使用函数的能力； 2、培养学生收集、分析、处理数据的能力； 3、培养自主探索，合作交流能力。 （三）情感态度价值观 这课堂，通过情境的创设，使学生明确探究目标，给学生思维以方向，同时产生强烈的探究兴趣和欲望，给思维以动力。通过利用EXCEL工具软件制作出数据图表，提升学生对使用计算机软件的热情。 二、教学重点： 1、基本函数的使用方法 2、自动筛选和高级筛选 三、教学难点： 1、用公式进行计算 2、高级筛选 四、教学方法 讲授法、演示法、练习法 五、教学过程： （一）复习导入

前面我们学习了工作簿、工作标的基本操作和数据的格式化，然而在我们学习和工作中知道这些是远远不够的，那么我们接下来一些常见函数的使用和如何对一组数据进行简单的处理。（二）实例引课 实例： 1、基本函数的使用 （1）讲述Sum函数的功能和使用方法，演示使用sum函数求和（附带讲述自动求和）； （2）讲述Average函数的功能和使用方，演示使用average函数求平均值； （3）讲述Max函数的功能和使用方法，演示使用max函数求最

高分； （4）讲述Min函数的功能和使用方法，演示使用min函数求最低分。 2、如何用公式对数据进行相应的计算 3、数据的排序和筛选 （1）排序 功能：按要求对一组数据进行排序 操作步骤：选定将要排序的数据区域→数据菜单→选择关键字和排序方式 演示：对实例进行排序操作 （2）数据的筛选 功能：按要求把符合条件的数据筛选出来 自动筛选：选定所要筛选的数据→数据菜单→筛选→自动筛选→筛选项目→筛选条件 演示对实例进行自动筛选 高级筛选：数据菜单→筛选→高级筛选→筛选方式→列表区域（所要筛选的数据区域）→条件区域→筛选结果所放区域演示对实例进行高级筛选 （三）学生练习 结合上节课和本节课的内容，按要求对下列数据进行处理

计算机基础公开课教案

计算机基础公开课教案 章节名称：第一章 Windows XP基础 教学目标 1、知识目标 1）了解操作系统的概念、基本功能及类型。 2）了解Windows XP桌面的组成元素和“开始”菜单。 2、技能目标 1）认识Windows XP的桌面及程序窗口。 2）掌握任务栏的使用方法。 3）掌握[开始]菜单属性的设置。 3、情感目标 激发学生学习Windows XP的热情。 教学重点 1、Windows XP桌面和程序窗口的组成。 2、Windows任务栏的基本操作。 教学难点 任务栏菜单属性的设置。 教学方法 1、教法： 直观演示、任务驱动 2、学法： 分组法、游戏法、实践操作 教学手段 采用课件演示、投影演示、多媒体电子教室同步演示。 素材准备 自制课件、拼图FLASH资源、课堂操作题。 教学过程 一、新课导入 对前两章内容的复习 计硬件系统 算 机 系系统软件 统软件系统 应用软件 问题：在软件系统中，最重要且最基本的是什么？ 什么是操作系统？它有什么作用？ 二、新课展开 1、引入操作系统、操作系统概念、操作系统作用（由学生分组讨论回答） 1）什么是操作系统

操作系统（Operating System，简称OS）是一管理电脑硬件与软件资源的程序，同时也是计算机系统的内核与基石。 这里所谓的“资源”当然不是指自然资源，而是指计算机系统内可利用的各种能力。比如计算机运行程序的能力，存储能力，打印机的打印能力等，可以说计算机系统各种资源能够相互协调，有效地进行工作，都依赖于操作系统的统一控制，因此，一台电脑只有安装了操作系统，才能进入最基本的工作状态。用户通过操作系统来操纵计算机，可以省去很多具体细节，从而获得良好的应用环境。 2）操作系统的基本功能 CPU管理、存储管理、设备管理、文件管理、用户接口 3）介绍操作系统的种类 2、观看Windows发展视频 教师问：同学们经常使用的操作系统有哪些？ 3 4 教师：讨论完作用，我们就来具体操作一下 教学说明: 任务1、3需未锁定任务栏。（可在学生尝试失败后再提出） 任务2 小结时要突出介绍“命令选项的特殊标记√”的作用。 任务4 小结时可讨论隐藏的作用或演示任务栏属性对话框中“分组相似任务栏按钮”的作用。

《计算机应用基础》公开课教案

《计算机应用基础》公开课教案 时间：20XX年3月12日上午第一节课 班级：高职二班 地点：网络中心 主讲教师：徐剑 教学课题：Excel工作表中的数据筛选 教学课型：新授课 教学目标： 1. 知识目标：掌握数据的筛选方法（自动筛选及高级筛选），并能应用于实际工作中 2. 能力目标：培养学生的观察能力和自主学习能力 教学重点：如何对数据进行筛选 教学难点：如何用高级筛选的方法对数据进行筛选 教学方法：演示法、实验法、任务驱动法 实验及教具：实例、多媒体 教学课时：第一学时（总共2学时） 教学过程： 通过完成四个具体任务，来达到对两种数据筛选方法的掌握。 一、展示任务，查看数据表（2分钟） 1、请找出计算机成绩表中的文秘专业考试成绩最高的女同学 2、请在计算机成绩表中找出财会专业或计算机专业姓李的同学 3、请在学生信息表（1）中找出家住水口的电子专业的同学信息，结果存放在以H2为左上角单元格的区域 4、请在学生信息表（2）中找出性别为男或年龄大于18岁的同学，在原有区域显示结果 1. 任务1：请找出计算机成绩表中的文秘专业考试成绩最高的女同学（4分钟） 操作步骤： 1. 单击数据区域任何一个单元格 单击“数据”菜单“筛选”命令的“自动筛选”项，数据表的每个字段名旁 边出现下拉按钮“▼”，单击“专业”字段的下拉按钮“▼”，在出现的下 拉列表中选择“文秘”，单击“性别”字段的下拉按钮“▼”，在出现的下 拉列表中选择“女” 很明显筛选后所显示的记录远远少于先前的记录数，可以直接在这些记录中 找到最高分的同学，也可以再进行一次排序，直接看到文秘专业最高分的女 同学 2. 学生操作，完成第一个任务，教师检查完成情况。（2分钟）