网页制作课件

第6章网页喇作

6.1网页制作概述

6.2网页制作软件简介

6.3Web站点设计与管理

6.4网站制作实例

本章小结

练习题

第6章网页刷作

6.1网页制作概述

6.1.1Web介绍

Web是WorldWideWeb的简称（又称为万维网、WWW或者

3W）,它是由遍及全球的信息资源组成的系统，这些信息资源所

包含的内容不仅仅是文本，还包括图像（静态的或者动态的）、表

格、音频与视频等。用户可以根据关键字来搜索和显示数据（信

息），而这些数据中又包含了与其他数据的链接路径。当用户阅

读某些信息时，将会注意到某些词、短语或图片动画对象被用

一种特殊的方式加了标签，单击它们，Web会根据其所链接的地

址跳转到另一个页面。

第6章网页刷作

Web上具有相似性质、共同内容的一组信息资源就是一个

站点。构成一个站点的基本元素是各种各样的文件以及存放

这些文件的文件夹。这些文件大致可分为三类：第一类用来

描述资源结构、位置，引导浏览者访问该站点，通常以

“htm”、“html”为扩展名，称为网页文件(WebPages)；第二

类是网页文件所链接到的图像、表格、音频与视频等资源文

件；如果这个站点包括交互性内容，则还可能有第三类文件，

即Web数据库和程序文件。

第6章网页刷作

6.1.2网站规划

建立一个网站，会涉及到很多方面，为了能使整个过程有

条不紊，首先必须进行网站的规划设计，也就是到底想要做个

什么样的网站，它都包含什么样的内容，需要划分成多少个栏

目，它要告诉来访者什么信息等，这些都是在制作一个网站前

要考虑的内容。

在建立网站之前，首先要明确自己的建站目标，也就是说

想让网站达到什么目的，希望给本网站的访问者提供些什么样

的信息。作为企业网站更应该考虑如何通过Internet更好地展示

企业的产品，让客户了解产品，从而达到让客户订购产品的目

的。-一

第6章网页刷作4

网站规划设计包含的内容如下：

1.建设网站的目的及功能定位

(1)为什么要建立网站，是为了宣传产品，进行电子商务,

还是建立个人主页。

(2)根据需要确定网站的功能：产品宣传型、网上营销型、

客户服务型、电子商务型等。

⑶根据网站功能，确定网站应达到的目的和作用。

第6章网页刷作4

2.网站技术解决方案

(1)确定采用自建服务器还是租用虚拟主机。

(2)选择操作系统，确定用UNIX、Linux还是Window

2000/NTo分析投入成本、功能、开发、稳定性和安全性等。

(3)网站安全性措施，防黑客、防病毒方案。

(4)相关程序开发，如网页程序ASP、JSP、CGL数据库

程序等。

第6章网页刷作4

3.网站内容规划

(1)根据网站的目的和功能规划网站内容，一般企业网站

应包括：公司简介、产品介绍、服务内容、价格信息、联系方

式、网上订单等基本内容。

(2)电子商务类网站要提供会员注册、详细的商品服务信

息、信息搜索查询、订单确认、付款、个人信息保密措施、相

关帮助等。

第6章网页刷作4

(3)如果网站栏目比较多，则考虑采用网站编程专人负责

相关内容。注意：网站内容是网站吸引浏览者最重要的因素,

无内容或不实用的信息不会吸引匆匆浏览的访客。可事先对

人们希望阅读的信息进行调查，并在网站发布后调查人们对

网站内容的满意度，以及时调整网站内容。

第6章网页刷作4

4.网页设计

(1)网页美术设计一般要与企业整体形象一致，要注意网

页色彩、图片的应用及版面规划，保持网页的整体一致性。

(2)在新技术的采用上要考虑主要目标访问群体的分布地

域、年龄阶层、网络速度、阅读习惯等。

(3)制定网页改版计划，如半年到一年时间进行较大规模

改版等。

第6章网页刷作

5.网站维护

(1)服务器及相关软、硬件的维护，对可能出现的问题进

行评估，制定响应时间。

(2)数据库维护，有效地利用数据是网站维护的重要内容,

因此数据库的维护要受到重视。

(3)内容的更新、调整等。

(4)制定相关网站维护的规定，将网站维护制度化、规范

化。

第6章网页刷作4

6.2网页制作软件简介

6.2.1概述

如今，上网冲浪已经成为一种时尚，构成了现代都市里

一道独特而又亮丽的风景线。当你在网上漫游之际，会不会

对那漂亮的网页羡慕不已呢？其实，你也可以制作自己的个

人网页。现在网页制作软件很多，我们介绍两种比较常用的

网页制作软件。

第6章网页刷作4

6.2.2FrontPage2000

1.功能简介

FrontPage2000首次以Office套装软件的形式出现，它是

Microsoft公司在Office2000中新增的Web站点创建和网页制

作软件。所有的Office套装软件都具有完全相似的窗口界面，

功能大致相同的菜单命令、工具按钮，很容易让人产生亲近感,

用户在使用Word、Excel等方面的经验和技巧都可以运用到

FrontPage2000中。

第6章网页刷作

Frontpage2000能自动地生成全部的HTML代码，使用

Frontpage2000,不需要学习HTML语言就可以创建一些简单

的网页。利用菜单可以执行Frontpage2000提供的各种编辑命

令，在编辑区内，网页制作者可以不用了解HTML是如何编制

的，所见即所得地设计和规划网页。

第6章网页刷作

2.界面介绍

Frontpage2000的使用界面与Office2000其他软件相似，主

要由菜单栏、工具栏、编辑窗口、状态栏、视图栏等几部分组

成，如图6-1所示。

第6章网页刷作

K^ikrosohFrontpage

文件（D9微。3ER»施人⑴格式（磔TJKD康标A）电罂⑻畲口处却权出菜单栏

□Q囱国◎ae><?•里口口―中国.

（无'•，*「？、•鲁遇•B/u隼春老i三沼*夕，•A•.②工具栏

第6章网页刷作

(1)菜单栏。菜单栏位于标题栏的下面，由“文件”、

“编辑”、“查看”、“插入”、“格式”、“工具”、“表

格”、“框架”、“窗口”和“帮助”等10个菜单组成。

(2)工具栏。工具栏以工具按钮的形式为用户提供了主要

的编辑和管理功能，如图6-1所示。用户可调整在屏幕上显示

的工具栏的种类和工具栏出现的位置。Frontpage2000提供了

常用、格式、DHTML效果、报表、表格、导航、定位、图片、

样式和自定义等10个工具栏。

第6章网页刷作Mk4

(3)编辑窗口。编辑窗口是用户使用得最多的部分，它是

管理网站和制作网页的主要场所。当使用管理功能时，编辑窗

口显示各种任务下的文件或站点信息。在制作网页时，它有普

通、HTML和预览3种显示方式。普通显示方式最常用。

HTML显示方式是在需要直接编辑或查看网页文件的HTML代

码时才使用的，如果会编写HTML语言程序，就可以在HTML

显示方式下直接编辑HTML原始代码对其进行修改。预览方式

可以随时观看所编辑网页的显示效果。

第6章网页刷作4

(4)状态栏。状态栏位于FrontPage2000窗口界面的底部。

它对每个菜单命令或工具栏按钮能完成的任务进行简单的描述。

(5)视图栏。在视图栏中可以选择网页或网站的显示模式。

第6章网页刷作4

6.2.3DreamweaverMX

1.功能简介

MacromediaDreamweaverMX是一种专业的HTML编辑器,

用于对Web站点、Web页和Web应用程序进行设计、编码和开

发。无论您是喜欢直接编写HTML代码的驾驭感还是偏爱在可

视化编辑环境中工作，Dreamweaver都会为您提供帮助良多的

工具，丰富您的Web创作体验。

第6章网页刷作4

利用Dreamweaver中的可视化编辑功能，用户可以快速地

创建页面而无需编写任何代码。但是，如果您更喜欢用手工直

接编码，则一样没有问题，Dreamweaver还包括许多与编码相

关的工具和功能。并且，借助Dreamweaver,您还可以使用服

务器语言（例如ASP、ASP.NET、ColdFusion标记语言（CFML）、

JSP和PHP）生成支持动态数据库的Web应用程序。

第6章网页刷作

2.界面介绍

安装好DreamweaverMX中文版（或者汉化版）后，运行，选

择DreamweaverMX工作区，将看到如图6-2所示的画面。

第6章网页刷作

Drea*v«ar«rU-(Valitlai'l))

—X件9«»＜Z)互有色掂入也腼呼又本@命令IQM点＜5).口里的的0(1①强单栏jJSJxj

•・人生可士1黄1?产奇心QQ算工抵三式工神玛［：13向4G

。口因里剋出组名•太艮|一口玲回口②插入栏

©於庐)松勤克锡直文招

③文档工具栏

@文档胃口

a。蛇＞_____

格式0庆34酿转三］大小0雷Wf2BI^1sigl*1*1

m0」目惊中|Zin但且现®属性选择”

第6章网页刷作

(1)菜单栏。菜单栏由“文件”、“编辑”、“查看”、

“插入”、“修改”、“文本”、“命令”、“站点”、“窗

口”和“帮助”等10个菜单组成。

(2)插入栏。包含用于将各种类型的对象(如图像、表格

和层)插入到文档中的按钮。每个对象都是一段HTML代码，允

许在插入它时设置不同的属性。

(3)文档工具栏。包含按钮和弹出式菜单，它们提供各种

“文档”窗口视图(如“设计”视图和“代码”视图)、各种查

看选项和一些普通操作(如在浏览器中预览)。

第6章网页刷作

(4)文档窗口。显示当前创建和编辑的文档。

(5)属性检查器。用于查看和更改所选对象或文本的各种

属性。每种对象都具有不同的属性。

(6)面板组。是一组停靠在某个标题下面的相关面板的集

合。若要展开一个面板组，请单击组名称左侧的展开箭头；若

要取消停靠一个面板组，请拖动该组标题条左边缘的手柄。

第6章网页刷作

6.3Web站点设计与管理

6.3.1Web站点的创建

此处以DreamweaverMX为例来介绍。

在创建站点之前，首先在本地硬盘建立一个存放网站文件

的文件夹，例如“我的网站”，以此作为站点的根目录。

我们将使用“站点定义”对话框创建站点。一般可以以两

种视图中的任意一种来填写此对话框，即“基本”或“高级”

视图。“基本”视图指导用户一步一步地完成站点设置。如果

在没有指导的情况下编辑站点信息，则可以随时单击“高级”

选项卡“

第6章网页刷作4

下面介绍如何设置“基本”视图对话框中的选项，该对话

框也叫做“站点定义向导”。

(1)选择“站点”一“新建站点”命令，出现“站点定义”

对话框，站点名称可以是任何所需的名称。例如，可以将站点

命名为“我的网站”，如图6-3所示。

第6章网页刷作

基本

MacromediaDreamweaverMX2004中的站点是文件和文件夹的集合，它对应于服务器上

的Web站点.

您打尊为您的站点起出名至？______________________

嚷的网站I

示例：MySite

如果您希望使用FTP或RDS直接在服务器上工作，您应当转而似凄注耍魄

服务器连接■■服务器连接不允许您执行站点范南的噪作，比如链攘赛查藕司晤.

上一事回

图6-3“站点定义”对话对

'第6章网页刷作

(2)单击“下一步”按钮，出现向导的下一个屏幕，询问

是否要使用服务器技术。

(3)选择“否”选项指示目前该站点是一个静态站点，没

有动态页。

如果要设置站点来创建Web应用程序，则需要选择动态文

档类型，如MacromediaColdFusion、MicrosoftActive

ServerPage(ASP)>MicrosoftASP.NET>SunJavaServer

Page(JSP)或PHPHypertextPreprocessor(PHP)等。

第6章网页制作

(4)单击“下一步”按钮，出现向导的下一个屏幕，询问

如何使用文件。在站点开发过程中有多种使用文件的方式。

(5)“您将把文件存储在计算机上的什么位置？”文本框允

许在本地磁盘上指定一个文件夹，单击该文本框旁边的文件夹

图标，随即会出现“选择站点的本地根文件夹”对话框。在

“选择站点的本地根文件夹”对话框中，浏览到本地磁盘上存

放站点的文件夹，如图6-4所示。

第6章网页刷作

基本高如

站点定义

编党文件,第3加分测t式文件共享文件

图

在开发过程中，您打菖如何使用您的文件？6

e编辑我的计篁机上的本地副本，完成后再上传到服务器（推荐）邕）

c使用本地网络直接在服务器上进行编辑也）4—

站

您将把文件存储在计篁机上的什么位置？

点

:"DocumentsandS-ttiniDocumexdsj'

设

置

对

话

框

<上一步起）|忏一步®_>][取消11帮助।

第6章网页刷作■

(6)单击“下一步”按钮，询问如何连接到远程服务器

对话框，选择“无”。

(7)单击“下一步”按钮，显示设置概要，单击“完成”

完成站点创建。

'第6章网页刷作4

6.3.2Web站点的设计

1.页面布局

(1)表格的使用。使用Dreamweaver中的表格创建复杂的

页面布局。

表格是用于在HTML页上显示表格式数据以及对文本和图

形进行布局的强有力的工具。许多设计人员使用表格对Web页

进行布局。表格由一行或多行组成，每行又由一个或多个单元

格组成。虽然HTML代码中通常不明确指定列，但

Dreamweaver允许像操作行和单元格那样来操作列。

第6章网页刷作4

Dreamweaver提供两种方式来查看和操作表格：标准视图

和布局视图。在标准视图中，表格显示为行和列的网格，而布

局视图允许将表格用作基础结构的同时在网页上绘制、移动方

框以及调整方框的大小。

第6章网页刷作4

,插入表格

在“文档”窗口，将插入点放到文档中，然后执行下列操

作之一：

①选择“插入”一“表格”命令。

②在插入栏的“常用”类别中，单击“表格”图标（如图6-

5所示），出现“插入表格”对话框（如图6-6所示）。

第6章网页刷作

P逸I・侵田丽鬲^I赢雇药醒［碱布用娓体质性头1脚$［应髓事

0口白|剧团」也⑥•2艮I墓回司回_

图6-5“常用”栏

第6章网页刷作

■人表祷

行眼E・元格堪无f

建散用■元格1.距f

IMfrs|百分比二|

谡捱fi

图6-6“插入表格”对话框

第6章网页刷作4

③在“插入表格”对话框中，设置下列选项：

在“行数”文本框中键入3,在“列数”文本框中键入3,

在“宽度”文本框中键入500,然后在“宽度”文本框右边的

弹出式菜单中选择像素。

将宽度设置为500像素将创建一个固定宽度的表格。在

“边框”文本框中键入1,将表格和表格单元格周围的边框宽

度设置为1个像素。

第6章网页刷作寓

布尊击“扁定"法钮。Dreamweaver将该表格插入到

中，如图6-7所示。

^■acroaediaDreaaveaverIX-1表:格(Untitled-l®)J

d文件9编辑团查看也插入i工）修改现）文本①命令©站点⑤）窗口也）帮助®

常用饰局［立下诔格施架「表箪1模板摩荐1旅住闵做「脚本1应用程序।

'白⑸国臼国◎⑥・率齐毒囿昭阳国

到10寒1超标题「表格瓯号.|匚《?》此回

'第6章网页刷作

•设置背景色、背景图案

①选中整个表格，在属性面板的“背景颜色”文本框中

选择一种颜色，如#FFC384,背景颜色即应用到表格，如图6-8

所示C

图6-8设置表格背景颜色

第6章网页刷作

②在表格右下方的单元格中单击，然后在属性面板的

“背景”文本框中选择背景图案，如向日葵的图片，结果如图

6一。诉京

图6-9设置表格背景图案

第6章网页刷作4

(2)布局表格。为了简化使用表格进行布局的过程，

Dreamweaver提供了布局视图。在布局视图中，可以使用表格

作为基础结构来设计页面，避免了使用传统的方法创建基于表

格的设计时经常出现的一些问题。例如，在布局视图中可以在

页上方便地绘制布局单元格，然后将这些单元格移动到所需的

位置，还可以方便地创建固定宽度的布局和自动伸展为整个浏

览器窗口宽度的布局。

'第6章网页刷作

•进入布局视图

在插入栏的“布局”类别中，有“标准视图”和“布局视

图”两个按钮，它们是用来切换表格的两种视图模式。单击

“布局视图”按钮，即可将表格从正常视图切换到布局视图。

如果是第一次使用，会弹出提示用户进入表格的布局视图后应

用布局表格和布局单元格进行表格编辑的对话框，选中对话框

下方的复选框“不再显示此消息”，在以后的表格视图切换时

就不会再弹出该对话框了。单击“确定”按钮即可进入到表格

的布局视图，进行布局表格的编辑，如图6-10所示。

第6章网页刷作

京用布隔藁表格底架表.军模也亍好婢江疝较通丰应解序

标准视图I布局视图［回日

图6-10布局视图

第6章网页刷作

・设置布局表格

如果页面中原先没有表格，可以直接单击插入栏的“布局”

类别中的绘制布局表格按钮国，在页面中像绘制矩形一样按

住鼠标左键向右下拖动，最后释放左键即可在页面中显示布局

表格。用鼠标选中布局表格，移动鼠标可调整布局表格的尺寸。

同样也可以在相应的属性面板中进行调整，属性面板的参数设

置与正常视图的表格属性面板相似。

注意：在布局表格中不能插入文字、图像等对象。

第6章网页刷作4

单击“布局”类别中的绘制布局单元格按4二i,在所布

局的表格中按住鼠标左键向右下拖动产生一个矩形区域，释放

左键即可在布局表格中插入布局单元格。

用鼠标选中布局单元格，在布局单元格周围呈现8个控制点,

拖动这些控制点即可调整布局单元格尺寸，同样也可以在相应

的属性面板中进行调整，如图6-11所示。

第6章网页刷作

座3房黄喳3国鲍画国画耨国画就酝I

H:%I标准视图I布局视圉I□□

9幽।逗I卷.标题无标题文档阻❷.*'S比回

布局表格布1

6611?5*1n11421142▼

图6-11调整布局视图大小

国.

第6章网页刷作4

•恢复正常视图

完成整个页面的布局工作之后，便可在正常视图下进行页

面内容的编辑。单击“布局”类别中“标准视图”按钮，恢复

到标准视图状态。

注意：用布局方式所产生的表格边框通常设置为0,即无边

框。若要有表格边框线，则还要进一步在表格属性面板中设置。

第6章网页刷作4

2.页面基本设计

(1)设置页面属性。页面标题、背景图像和颜色、文本和链

接颜色以及边距是每个HTML文档的基本属性。页面标题标识

和命名文档。背景图像或背景颜色设置文档的总体外观。文本

和链接颜色帮助访问者区分常规文本和超级文本，并了解哪些

链接已被访问过，哪些没有。

第6章网页刷作4

•更改文档标题

HTML页面的标题帮助站点访问者在浏览时跟踪所查看的内

容，并在访问者的历史记录和书签列表中标识页面。如果不给

页面加标题，页面会在浏览器窗口、书签列表和历史记录列表

中显示为无标题文档。请注意，给文档起一个文件名（通过保

存）不同于给页面加标题。

第6章网页刷作4

①文档打开时，执行下列操作之一：

选择“修改”一“页面属性”命令。

选择“查看”一“工具栏”（如果还没有选中它）命令。

②在“标题”文本框中，输入页面标题，单击“确定”

按钮。

③在“页面属性”对话框中编辑标题，单击“确定”按钮。

第6章网页刷作4

标题出现在“文档”窗口的标题栏中（如果显示，也会出现

在工具栏中）。页面的文件名和保存文件的文件夹出现在标题栏

中标题旁边的括号中。星号表示文档包含尚未保存的更改，如

图6-12所示。

第6章网页刷作

更面尾性X

标题|迎评促建网确定I

背景图像（I）；r浏览您…|应用

取消I

背景®:□（

文本⑥匚』访问的随⑦n|[

链接⑪□（活动链接A）Qf

左边界g[o-边界宽度置）|―

顶部边界位）|o-边界高度理）r

文档编码①）：|简体中文（GB2312）2重新载入国）|

跟踪图像C）：|一^浏览|

图像透明度@1：2-，，■■,--，，，.I-1•100%

透明不透明

文件文件夹：D\工作,学校工作"迎评网'

站点文件夹D\工作'学校工作'迎评网:帮助出）

图6-12“页面属性”对话框

第6章网页刷作4

・设置背景图像或页面背景颜色

若要定义页面背景的图像或颜色，请使用“页面属性”

对话框。如果同时使用背景图像和背景颜色，则下载图像时

会出现颜色，然后图像覆盖颜色。如果背景图像包含任何透

明像素，则背景颜色透过背景图像显示出来。

第6章网页刷作

定义背景图像或颜色的具体步骤如下:

①选择“修改”一“页面属性”命令，或从“文档”窗口

的“设计”视图中单击鼠标右键，在下拉菜单中选择“页面属

性”命令。

②若要设置背景图像，请单击“浏览”按钮，然后浏览并

选择图像；或直接在“背景图像”对话框中输入背景图像的路

径。如果背景图像没有填满整个窗口，Dreamweaver会平铺（重

复）背景图像，就像浏览器所做的那样。若要防止背景图像平铺,

请使用CSS样式表禁用图像平铺。

③若要设置背景颜色，请单击“背景”颜色框并从颜色选

择器中诜择颜色°二一父一_=

第6章网页刷作

(2)设置文本格式。一般情况下网站中页面信息大部分都

是使用文本内容，因为使用文本能把信息表达得更准确和详细。

无论制作什么类型的网页，文本都是网页中不可缺少的内容，

文字的输入及文本的相关操作是制作网页的第一步。在网页中

设计丰富的字体、多种的段落格式以及赏心悦目的文本效果，

既能够充分体现网页设计者要表达的意图，又能激发网页浏览

者的阅读兴趣。

页面的文本编辑即文本的格式化操作类似于Word,其操作

非常简单。选取一段文字，此时的属性窗口显示如图6-13所示。

第6章网页刷作4

①格式：可以选择几种预设的文字格式。

②字体选择：选择文字的字体，这里可以选择的全是是

英文字体，如果想选择其他字体，就要选择最下面的一项一

—编辑字体列表（一般的文字编辑，默认字体就可以了），可以

加入/删除字体列表。

第6章网页刷作

图6-13文本属性面板

第6章网页刷作

注意：因为别人的系统上不一定装有与你相同的字体，所

以不要将一些特殊的字体加到列表中并使用。如果真有需要用

到这些字体，应当做成图片后再使用。

③大小：文字的大小，数字越大，文字也越大。

④文字颜色：在这里选择文字的颜色，如图6-14所示。

第6章网页刷作

图6・14文字色板

第6章网页刷作4

在该颜色面板中的所有颜色都是Web的安全色。当然也可

以单击颜色板上方的画板按钮，从弹出的Windows标准颜色拾

取框中进行颜色的设置。

注意：从弹出的Windows标准颜色拾取框中所选取的颜色

不一定在所有的浏览器中都能正确显示，因此建议只使用图6-

14颜色面板中的颜色。

第6章网页刷作4

⑤B\是把字体设置成粗体，z］是设置字体为斜体。

⑥茎国凰设置文字的置左、置中、置右。

⑦链接：此处用来填写要链接的网址或文件的路径，如:

选中文字,填上http:〃www.ccit.js.cn,则文字链接到常州

信息职业技术学院网站。

⑧生恒］设置文字段落标号，如图6-15所示。

⑨空空设置文本的凸出和缩进，如图6-16所示。

第6章网页刷作

^■acronediaDreaaveaTerU-[常州信息职业技术学院(Untitled-1*)]

③文件出）小辑⑥查看9插入工］修改（M）文本（T）_命令©站点⑤L窗口世［帮助（M）J

彘1箴幅翦蔗的藐询僦旃旃遹祠就演后三

低日迎|国归|国曲④•尽事|言臼曜||臼日

型圜fB|莪|标题;阖膈确E眯藕--脏②，।谿比现।

.常州信息职业技术学院

.常州信息职业技术学院

.常州信息职业技术学院

1.常州信息职业技术学院

2.常州信息职业技术学院

3.常州信息职业技术学院|

图6-15设置文字段落样式一

第6章网页刷作4

(3)使用超级链接。网页中超级链接无处不在，不管是文

字、图像还是动画都可以创建链接。通过链接就可以方便地从

一个网页跳转到另外一个网页。Dreamweaver可以极为方便地

实现网页之间的链接。

第6章网页刷作

^^■acroaediaDreasveaverIZ-[常州信息职业技术学院(Untitie(1-1•)]

编辑（£）_查看9插入Q）修改胆）文本建）命令©站点⑵窗口过）帮助国）

庭直僦德困与

A目初|国白囹曲④•芸家爱口晓||臼口

眼翻嚷|遨|标瓢：阁禧踊蹑樨院一—晚©▼|C聊{}Jd

.常州信息职业技术学院

。常州信息职业技术学院

.常州信息职业技术学院

1.常州信息职业技术学院

1.常州信息职业技术学院

1.常州信息职业技术学院|

图6-16设置文字段落样式二

第6章网页刷作4

・链接路径

通常将链接的路径分为绝对路径、根相对路径和文档相

对路径。

①绝对路径是包括服务器协议（在本例中为http协议）的

完全路径，比如“常州信息职业技术学院”的完全路径为：

http://www.ccit.js.cn,如果所要链接当前站点之外的文档,

就必须使用绝对路径。

②相对路径包括根相对路径和文档相对路径两种。

第6章网页刷作4

文档相对路径是以当前文档所在位置为起点到被链接文档

经由的路径。与绝对路径相比，省去了当前文档与被链接文档

的绝对URL中的相同部分，只留下不同的地方。

根相对路径的路径以“尸开头，路径是从当前站点的根目录开

始计算的。

第6章网页刷作4

・文字链接

首先用鼠标选定要做链接的文字，然后在属性面板中“链

接(L)”文本框中确定被链接对象的URL即可，如图6T3中⑦所

Zj\O

通常在站点内的链接，可以单击“链接”右边的按钮，弹

出选择链接文件对话框。如图6-17所示，选定需要链接的文件,

单击“确定”即可。

第6章网页刷作

去下页看看吧。

|UntitledT|index,him」「

Qody><p)<£out>i803x4381K/1杪

图6-17创建文字链接

第6章网页刷作

•图像链接

在Dreamweaver中，创建本地图像与文件之间的链接与创

建文本与文件之间的链接相似。

对整个图像进行链接比较简单，同前面操作相似。选定要

进行链接的图像之后，只需在对应的图像属性面板的“链接”

文本框中直接输入URL或单击右边的按」,选定所链接的

文件即可。

注意：某些图片在加上链接后，会出现一个蓝色的边框,

要将边框去掉，将边框(B)设为0即可。

第6章网页刷作

地图也）1—

、口oa

图6・18热区链接样式

第6章网页刷作

・热区链接

前面介绍的图片链接，一张图只能对应一个链接，能不能

一张图对应多个链接呢？答案是可以的。选取一张图片后，可

以在属性面板看到“地图(M)”选项，如图6-18所示。

其中：2创建矩形热区，篁创建圆形热区，区创建多

边形热区。单击凶，光标变成一个十字，此时可以在图片上

画出一个蓝色多边形的热区，如图6-19所示。此时对应的属性

面板如图6-20所示。

第6章网页刷作

■■i’・■・’（

.黑龙江

/舌板、

1.新^5

,■内装古、'延星"..MX'

J空垂」愁'

$I「理旗'「旗।

喉西，.洞南江苏

1-.—

\酮「画豆事

xY—・・・・'

、1重庆gas

_fj_______.../

4qr][^

‘例―磔）

一—一11…厂-

广西百薄

■-1■■

，海南1

第6章网页刷作

日热点阴W*

目标国）▼替代（D[

地图（M）U<P

图6-20热区属性面板

第6章网页刷作

同样地，在“链接(L)”文本框中输入链接地址(“产表示一

个空链接)，而“替代(iy框中的内容则为当鼠标指向热区时所

显示的文字，与图片的替代(T)相似。我们可以通过选择不同

的热区，并通过调整热区的控制点调整热区的大小。通过热区,

我们可以在图片的任何地方做一个链接，当然可以在一张图片

中画很多热点，做很多链接，分别链接到不同的页面。

第6章网页刷作4

•锚点链接

所谓锚点，它实际是一种标记，指示超级链接跳转的位置。

对于长幅的网页，可以在它的一些重要地方设置锚点，然后在

这些锚点之间建立超级链接，以帮助访问者快速浏览。

①在需要插入锚点的地方点一下鼠标，然后单击“常用”

面板上的命名锚记工具，如图6-21所示，键入锚点名称，如图

6-22所示。一个站点中的锚点名称只能是唯一的，否则会出现

错误。

第6章网页刷作

4日叵I国白国如④■§*序口躇固口

图6-21锚点链接

第6章网页刷作

图6-22创建锚点

第6章网页刷作4

②选择要创建链接的文本或图像，在属性检查器的“链

接”文本框中，键入一个数字符号#和锚点名称。例如：若要

链接到当前文档中的名为“top”的锚点，请键入枇op；若要链

接到同一文件夹内其他文档中的名为“top”的锚点，请键入

filename.htm#top0

注意：锚点名称区分大小写。

第6章网页刷作4

-E-mail链接

创建E-mail链接可用以下两种方法：

①选取需要创建链接的文本或者图像，点击常用面板中

的“电子邮件链接”工具，输入邮件地址，如图6-23所示。

第6章网页刷作

图6-23创建E-mail链接

第6章网页刷作

②选取需要创建链接的文本或者图像，在属性面板中的

链接栏输入mailto:邮件地址，如图6-22所示。

第6章网页刷作4

3.页面精彩设计

(1)图像的操作应用。为了充分表现网页的主题，增强

网页的美感，体现网站的风格和特色，在网页中常常使用图

像。

在Dreamweaver中可以方便地进行图像处理，如设置网页

背景图像、向网页中插入图像、制作翻转图像效果、利用图

像设置超链接等。

第6章网页刷作

・图像插入

插入图像的操作过程如下：

①首先在网页中确定要插入图像的位置。

②选择菜单命令“插入”一“图像”或用鼠标单击插入

栏“常用”类别中的插入幽饯钮，选择插入图像的画面,

如图6-24所示。

第6章网页刷作

选择图值蠢?lX|

从文件名称选择6文件系统

C数据源

查找范围（X）:11二/images3Tp图像预览

jxky_sxjd_03.jpgtgjxky_sxjd_12.jpg[grsxx_03.gif

jxky_sxjd_04.jpg^^kydtjl.gif$grsxx_04.gif

jxky_sxjd_05.jpg|QrsxxjO5gi£

jxky_sxjd_05Jpg.JPg$Zjnewgif^yrsxx_06gif

jxky_sxjd_06.jpg^qnewsJI.gifsxjd_01jpg

jxky_sxjd_07.jpg[$ZjnewsJl.jpg!Qszpx_01jpg

jxky_sxjd_08.jpg[Jnews_02.jpg起top_01gif

jxky_sxjd_09.jpg^yrsxx_01.giftop_02gif

jxky_sxjd_10.jpg中^rsxxJJl.jpgtop_03.gif

jxky_sxjd_ll.jpg|$Zjrsxx_02.giftop_04.gif

±1

778x185JPEG,125K/

相对于▼|top_test.asp

P预览图像

图6-24选择图像对话框

第6章网页刷作

③在列表中选择一个已经准备好的图像文件，单击“确认”

按钮，插入图像到网页中。

④如果被选定的图像没有位于本地站点目录中，则会弹出

征询对话框，希望用户作出决定是否将文件复制到本地站点中。

单击“是”按钮，则会继续弹出对话框，进一步确定保存选定

的图像文件；单击“否”按钮，则不将图像复制到本地站点。

通常情况下，应该选择“是"，将图像复制到站点目录中。

注意：为了避免出现征询对话框，在插入图像前先将图像

文件通过资源管理器复制到本地站点目录中，这样就可直接使

用本地站点中的图像文件。

第6章网页刷作

・修改图像属性

在网页中用鼠标点击所插入的图像，则会在该页面中显示

出图像属性面板，如图6-25所示。

▼屋性

宽世）后片渡文件0!7?mages7I嬴磅_j替代

高朝不②链接⑥多

叵褊福1［重设大小1

-

地垂直边距wxc目标®」2］边植⑥r@国匡圜⑨

产宜DI凶水平边距低品质源电厂Q,j对齐一”默认值1^3

△

图6-25图像属性面板

第6章网页刷作4

常用的属性如下：

①图片的缩略图及图片的大小。

②图片的长和宽，如果图片的长和宽跟原图的大小不一致,

则这里的数字会用粗体显示。点取一张图片，可以看到图片会

被套上一个框和三个点，三个点分别代表将图片向三个不同的

方向拉伸，从而达到放大和缩小的效果。在拉伸过程中，按住

Shift键，再拖动角上的点，可以使图片保持宽高比例拉伸。如

果要将图片恢复为原始大小，可以按属性面板右下角的“重置

大小”按钮。

第6章网页刷作

③源文件⑸是图片所在的位置；链接(L)是该图片对应

的超链接，由于没有做成链接，所以这里显示为空；后面的两

个按钮◎」，畲可以拉出一个箭头，直接将图片或链接指

向文件夹的某一个文件，a则是按照传统的方法打开文件夹

去寻找某一个文件，按照实际操作的经验，前者作用不大；目

标(R)是链接的打开方式。关于链接的建立与注意事项将在后

面介绍。

④替代(T),是图片的说明，假如在这里输入“学院简

介”，则在浏览的时候，将鼠标移到图片上，就可以看到这些

说明，如图6-26所示。

第6章网页刷作

学院简介

•♦…………