网页设计基础.docx

网页设计基础.docx

《网页设计基础.docx》由会员分享，可在线阅读，更多相关《网页设计基础.docx（13页珍藏版）》请在冰豆网上搜索。

网页设计基础

第四章网页设计基础

[日期：

2007-11-02]

来源：

 作者：

[字体：

大中小]

第四章网页设计基础

本章讲述网页设计基本思想，并以设计一个个人网站为目标，介绍DreamweaverMX中进行页面布局、文本编辑、设置超级链接和图像编辑的实现方法。

通过本章的学习，要求同学们：

●      掌握文本编辑、设置超级链接和图像编辑的方法。

●      掌握使用表格和框架进行网页布局的基本方法。

●      了解网页设计的基本要求。

一、     本章要求了解的内容

网页设计的基本要求

4．1目标网站的内容

目标网站的目的是介绍自己的基本情况，反映自己的为人师表准则，同时为学生提供教学服务。

4．1．2目标网站的结构

基于目标网站的目的和准备提供的几个方面内容，可以将网站划分为个人情况、教学和科研三个栏目。

利用DreamweaverMX可以创建一个如图所示站点地图来表示目标站点的结构布局。

站点地图的创建：

先在“站点地图布局”的“主页”栏中选定主页文件；并作相应的设置；再在“站点”标签中选择“地图视图”；再先中“主页”图标，单右键选择链接文件。

图站点结构地图

4．2网页设计的基本要求

主页一般包括网站名称、广告条、主菜单、计数器和邮件列表等内容。

但在页面中加入这些部件，并不能称为真正的“网页”。

评价一个网站的好坏，除了要看其内容的多少、好坏，还要看网页的版面、布局，网页颜色的搭配及网页字体等。

4．2．1页面版面布局

版面是指浏览器显示的完整的一个页面。

常见的页面布局形式有：

T型布局、口型布局和POP布局。

●      T型布局

所谓T型布局，使指页面上部为横条（网站标志+广告条）、下方左半部为主菜单、右由半部分显示内容的布局。

因为看上去像英文字母“T”，所以称为T型布局。

如图（a）所示。

T型布局的优点是页面结构清晰，主次分明，强调秩序，能给人以稳重、可信赖的感觉，比较容易上手。

缺点是规矩呆板，如果细节和色彩搭配上不注意，容易让人乏味。

●      口型布局

口型布局的页面上下各有一个广告条，左侧是主菜单，右侧放置友情链接等内容，中间是主要内容，如图（b）所示。

口型布局的优点是充分利用版面，信息量大。

其缺点是页面拥挤，不够灵活。

●      POP布局

POP引自广告术语，是指页面布局象一张宣传海报，以一张精美图像作为页面的设计中心，在适当位置放置主菜单，如图（c）所示。

这种布局不讲究上下左右对称，但要平衡和有韵律，能达到强调、动感、高注目性的效果，常用于时尚类网站。

其优点是漂亮吸引人，缺点是速度慢。

（a）T型布局（b）口型布局（c）POP布局

图三种常见布局形式

4．2．2网页的色彩、文字和表格应用

●      网页的色彩

在搭配网页色彩时，要注意色彩的鲜明性、独特性、合适性和联想性。

●      网页的文字

在浏览器中，默认标准字体是中文宋体和英文TimesNewRoman字体。

如果想用特殊的字体来体现某种风格，可以用图像来代替。

●      网页中的表格

4．3网页布局

4．3．1使用布局视图

使用布局表格和布局单元格来进行页面布局。

绘制布局单元格和表格

在布局视图中，您可以在页上绘制布局单元格和布局表格。

当您不在布局表格中绘制布局单元格时，Dreamweaver会自动创建一个布局表格以容纳该单元格。

布局单元格不能存在于布局表格之外。

备注：

当Dreamweaver自动创建布局表格时，该表格最初显示为填满整个设计视图，即使您更改文档窗口的大小也是如此。

这种全窗默认布局表格使您可以在设计视图中的任意位置绘制布局单元格。

您可以将该表格设置为特定的大小，方法是单击表格边框然后拖动表格的调整大小控制点。

若要绘制布局单元格，请执行以下操作：

1．确保您正在布局视图中（请参见切换到和切换出布局视图），然后单击插入栏“布局”分类中的“绘制布局单元格”按钮。

（在Dreamweaver4样式的浮动工作区中，插入栏是垂直方向的，与布局相关的项显示在面板的底部，而不是一个单独的分类。

）鼠标指针变为加号（+）。

2．将鼠标指针放置在页上要开始绘制单元格的位置上，然后拖动指针以创建布局单元格。

若要创建多个单元格而不用每次都单击“绘制布局单元格”按钮，请按住Ctrl键（Windows）或Command键（Macintosh）并拖动指针来创建每个布局单元格。

若要绘制布局表格，请执行以下操作：

1.    确保您正在布局视图中。

然后执行以下操作之一：

o       若要绘制一个布局表格，请单击插入栏“布局”分类中的“绘制布局表格”按钮。

鼠标指针变为加号（+）。

o       若要绘制多个布局表格而不必重复单击“绘制布局表格”按钮，请在单击“绘制布局表格”按钮时按住Ctrl键（Windows）或Command键（Macintosh）。

绘制完一个布局表格之后，您可以立即绘制另一个。

2.    将鼠标指针放置在页上，然后拖动指针以创建布局表格。

如果页上没有其他内容，则新表格自动定位在该页的左上角。

页上显示的表格外框为绿色。

（绿色是布局表格的默认外框颜色。

若要更改外框颜色，请参见设置布局视图参数。

）一个标有布局表格的标签出现在您所绘制的每个表格的顶部，用来帮助您选择表格以及将它和页上的其他元素进行区分。

提示：

您不能在现有内容旁边绘制布局表格。

如果您的页上已包含内容，则只能在现有内容的下方绘制新的布局表格。

如果您尝试在现有内容之下绘制布局表格但是出现禁止绘制鼠标指针，请重新调整文档窗口的大小以使现有内容底部和窗口底部之间产生更多的空白空间。

4．3．2         使用框架

框架提供将一个浏览器窗口划分为多个区域、每个区域都可以显示不同HTML文档的方法。

使用框架的最常见的情况就是，一个框架显示包含导航控件的文档，而另一个框架显示含有内容的文档。

例如，您的框架布局可能由3个框架组成：

一个较窄的框架位于侧面，其中包含导航条；一个框架横放在顶部，其中包含Web站点的徽标和标题；一个大框架占据了页面的其余部分，其中包含主要内容。

这些框架中的每一个都显示单独的HTML文档。

要确保框架集在浏览器中正确显示，请执行以下操作：

创建框架集并指定要在每个框架中显示的文档。

保存将要在框架中显示的每个文件。

请记住，每个框架都显示单独的HTML文档，每个文档都必须保存。

还要保存框架集文件。

为每个框架和框架集设置属性。

这包括命名每个框架、设置滚动和不滚动选项等。

要保存框架集文件，请执行以下操作：

在“框架”面板或“文档”窗口中选择框架集。

选择下列项之一：

要保存框架集文件，请选择“文件”>“保存框架集”。

要将框架集文件另存为新文件，请选择“文件”>“框架集另存为”。

如果以前没有保存过该框架集文件，则这两个命令是等效的。

要保存在框架中显示的文档，请执行以下操作：

在框架中单击，然后选择“文件”>“保存框架”或选择“文件”>“框架另存为”。

要保存与一组框架关联的所有文件，请执行以下操作：

选择“文件”>“保存所有框架”。

该命令将保存在框架集中打开的所有文档，包括框架集文件和所有带框架的文档。

如果该框架集文件未保存过，则在“设计”视图中框架集的周围将出现粗边框，并且出现一个对话框，您可从中选择文件名。

然后，对于尚未保存的每个框架，在框架的周围都将显示粗边框，并且出现一个对话框，您可从中选择文件名。

备注：

如果您使用“文件”>“在框架中打开”在框架中打开文档，则当您保存框架集时，您在框架中打开的文档将成为在该框架中显示的默认文档。

如果您不希望该文档成为默认文档，则不要保存框架集文件。

二、     本章要求熟练掌握的内容

4．4文本编辑

4．4．1输入文字

注意：

在网页设计中经常在两个环境的之间进行切换，即编辑环境和浏览环境。

可利在DreamweaverMX中进行网页的编辑，而查看（或称浏览、检查）是在浏览器中。

4．4．2编辑文本

1）             设置文字样式。

2）             设置文字的对齐方式。

3）             设置字体。

4）             设置文字颜色。

4．5设置超级链接

超级链接又简称为链接，通过它可以实现两个网页之间的跳转。

4．5．1文字链接

在页面上选中一段文字后，打开属性检查器，在链接栏内输入网址或网页文件名，这段文字就成为文字链接。

当文字链接被创建后，为了同其他正文文字区别，链接文字变为蓝色，并且被加上下划线。

蓝色是默认的链接文字颜色。

有三种创建链接的方法。

设置链接的target属性值，用于指定所链接的文档出现在当前窗口或框架以外的其他位置，其中包括许多选项，其意义如下：

●        _blank，在一个未命名的新浏览器窗口中载入所链接的文档。

●        _parent，在该链接所在框架的父框架或父窗口中载入所链接的文档。

如果包含链接的框架不是嵌套框架，则所链接的文档载入整个浏览器窗口。

●        _self，在链接所在的同一框架或窗口中载入所链接的文档。

此目标为默认值，因此通常不需要指定它。

●        _top，在整个浏览器窗口中载入所链接的文档，因而会删除所有框架。

4．5．2图像链接

为图像设置链接的方法和文字链接类似，应先选中图像，然后在属性检查器的链接栏内输入链接地址。

4．5．3电子邮件链接

电子邮件链接是一种特殊的链接，它的链接目标不是一个网页地址，而是一个电子邮件地址。

注意：

定义电子邮件链接地址中地址的组成是：

访问方式（mailto:

）+目标邮件地址

mailto:

tiejun@

4．6编辑图像

加入了图像的网页具有丰富的表现力，美观、精致的界面设计能够极大的吸引访问者的注意力，而且使用图像的网页与纯文字的网页相比，可以传递更多的信息。

4．6．1在网页中插入图像

DreamweaverMX支持添加3种格式的图像：

GIF、JPG和PNG。

在DreamweaverMX中可以改变图像大小，也可以为图像添加链接，以及改变图像的边框显示形式等。

在网页中增加图像与在其他软件中添加图像有很大的区别，图像文件并不是作为对象被置入到网页中，而是在图像文件与网页的HTML文件之间建立一个链接关系。

低品质源栏指定一个低品质的图像，由于品质低，下载速度快，可以在正式的图像下载之前给用户一个模糊的图像，使用户知道等待下载的图像是什么样的，一般一张图像的低品质图像是它自己的黑白效果。

注意：

不能向包含有其他表格或单元格的表格中插入图像，只能向单元格中插入图像对象。

在表格中插入的背景图像不能被选定和设置属性，如果图像的大小与表格大小不符时，就自动剪裁（表格小而图像大）或平铺图像（表格大而图像小）。

因此在设计布局表格和用图像作背景图时必须考虑。

4．6．2创建图像地图

图像地图是指被分为多个区域（或称“热点”）的图像，当用户单击某个热点时，会发生某种操作（例如，打开一个新文件）。

图象地图分为客户端图像地图和服务器段图像地图，由于客户端图像地图将超文本链接信息存储在HTML文档中，客户端图像地图比服务器端图像地图要快，更多使用的是客户端图像地图。

注意：

如果在一个页面中为多个图像定义图像地图，这些图像地图必须具有不同的名称。

4．7使用表格

表格由3部分组成：

行（Rows）、列（Columns）和单元格（Cells）。

单元格是表格中的最小的可独立存放数据的区域。

4．7．1插入表格

4．7．2改变表格的外观和结构

4．7．3改变单元格的属性

4．8使用层

4．8．1层的作用及属性

层是一个可以容纳页面元素的对象，在层中可以添加文字、图片、表格和其他对象，同样可以在层中为文字与图像创建超级链接。

一个页面允许有多个层存在。

层可以被隐藏，当需要时才让其显示出来。

此外，网页中移动图片的效果也是由层和时间轴一起来实现的。

使用层能够使网页更具有动态形式，使网页更加灵活多变，而用户却不需要编写JavaScript代码。

在使用层时要注意，只有InternetExplore4.0和Netscape4.0或以上版本的浏览器才支持层。

因此为了避免浏览者浏览网页时出现错误，有时可以使用DreamweaverMX中将层转换为表格的功能，将层转换为表格，保证正常显示网页。

DreamweaverMX中的层有如下特点：

●        为网页的排版提供了新途径。

在层上放置的对象，可以叠放在其他对象的上面，甚至层对象本身也可以重叠。

用户可运用层的这个特点随意安排版面的布局。

●        使用浏览器浏览时，层对象本身不显示出来。

在编辑环境下，层对象表现为一个矩形区域。

但是在浏览器中浏览时，只显示层中存放的对象。

这为网页版面的设计提供了便利。

●        支持动态网页的设计。

层对象在属性检查器中的主要参数。

●        层编号：

用于惟一标识每一个层以供网页中的程序使用。

层编号中不能含有特殊字符和连字符，例如图4-30中的layer1，这时在叶面上插入第一个层时的默认值。

●        左和上：

网页中层对象的位置，默认为以页面的左上角为基准。

●        宽和高：

层对象的宽度和高度。

●        Z轴：

若层对象在网页中出现重叠，Z轴数值大的层显示在数值小的层的上方。

●        显示：

设置层对象的可见性，其有四个选项：

default（默认）、inherit（继承）、visible（可见）和hidden（隐藏）。

●        背景图像：

设置层的背景图片。

●        背景颜色：

设置层的背景颜色。

●        标签：

设置层对象所使用的HTML标签,共有DIV和SPAN两种，默认情况下DreamweaverMX使用div标签创建层。

。

●        溢出：

设置当前层对象中的内容超出层的定义尺寸时的处理方法。

有四种处理方式，visible：

自动调整层的大小以适应层中的内容；hidden：

保持层的定义尺寸，超出的内容将被隐藏；scroll：

强制为层设置滚动条；auto：

根据需要自动为层设置滚动条。

●        剪辑：

定义当层对象超出设定尺寸时的基本显示区域。

4．8．2              使用层对象

制作层动画

层是一种HTML页面元素，您可以将它定位在页面上的任意位置。

层可以包含文本、图像或其他任何可在HTML文档正文中放入的内容。

利用Dreamweaver，您可以在不进行任何JavaScript或HTML编码的情况下放置层和制作层动画。

您可以将层前后放置，隐藏某些层而显示其他层，以及在屏幕上移动层。

您可以在一个层中放置背景图像，然后在该层的前面放置第二个层，它包含带有透明背景的文本。

这样就可以制作层渐进和渐出的动画。

若要创建层，请执行以下操作之一：

若要绘制层，请单击插入栏上的“绘制层”按钮，然后在文档窗口的设计视图中通过拖动来绘制层。

若要在文档中的特定位置插入层的代码，请将插入点放入文档窗口，然后选择“插入”>“层”。

如果正在显示不可见元素，那么每当您在页面上放置一个层时，一个层代码标记就会出现在设计视图中。

如果层代码标记不可见，而您想要看到这些标记，请选择“查看”>“可视化助理”>“不可见元素”。

备注：

当启用“不可见元素”选项后，页面上的元素可能看起来出现了位置移动。

但是，不可见元素不会出现在浏览器中，因此当您在浏览器中查看页面时，所有可见元素都会在正确的位置上出现。

若要连续绘制多个层，请执行以下操作：

单击“插入”栏上的“绘制层”按钮。

通过按住Ctrl键并拖动（Windows）或通过按住Command键并拖动（Macintosh）来绘制各个层。

只要不松开Ctrl或Command键，就可以继续绘制新的层。

使用“层”面板可防止重叠，更改层的可见性，将层嵌套或层叠，以及选择一个或多个层。

嵌套层

嵌套层是其代码包含在另一个层中的层。

嵌套通常用于将层组织在一起。

嵌套层随其父层一起移动，并且可以设置为继承其父级的可见性。

若要创建嵌套层，请执行以下操作之一：

若要插入嵌套层，请将插入点放入现有层中并选择“插入”>“层”。

若要绘制嵌套层，请单击插入栏上的“绘制层”按钮，然后通过拖动在现有层中绘制一个层。

如果已经在层参数选择中禁用“嵌套”，请通过按住Alt键并拖动（Windows）或按住Option键并拖动（Macintosh）在现有层中绘制一个层。

提示：

在不同的浏览器中，嵌套层的外观可能会有所不同。

当创建嵌套层时，请在设计过程中频繁地检查它们在不同浏览器中的外观。

若要使用“层”面板将现有层嵌套在另一个层中，请执行以下操作：

1.选择“窗口”>“其他”>“层”，打开“层”面板。

2.在“层”面板中选择一个层，然后通过按住Ctrl键并拖动（Windows）或按住Command键并拖动（Macintosh）将层移动到“层”面板上的目标层。

当目标层的名称突出显示时，请松开鼠标按钮。

4．9设置网页属性

网页的属性包括：

网页标题、背景图像、背景颜色、文字颜色、链接文字颜色、页边距等。

第四章网页设计基础

习题解答

一、填空题

1． 常见的页面布局形式有：

（T型布局）、（口型布局）、（POP布局）。

2． 在代码编辑器中直接输入（ ）可代表一个空格。

二、选择题

1． 在浏览器中，默认中文字体是（B），英文字体是（C）。

A.楷体；B.宋体；C.TimesNewRoman；D.Arial。

2． 要创建一个指向当前目录下文件page.htm的链接，在属性检查器的链接栏中应该输入（C）。

A.     #page.htm；B.mailto:

page.htm；C.page.htm；D./page.htm。

3． 利用（A）可以在一个浏览器窗口中合成多个HTML文档。

A.     框架；B.表格；C.布局视图；D.层。

4． 要在页面上创建一个指向某电子邮件地址的链接，在属性检查器的链接栏中应该输入（B）。

A、#page.htm

B、mailto:

helen@

C、..page.htm

D、/page.htm

三、简答题

在布局视图中，在什么时候选择“绘制布局表格”，在什么时候选择“绘制布局单元格”？

在布局视图中，您可以在页上绘制布局单元格和布局表格。

当您不在布局表格中绘制布局单元格时，Dreamweaver会自动创建一个布局表格以容纳该单元格。

布局单元格不能存在于布局表格之外。