网页基本元素实现

DreamweaverCS4网页设计与制作第三章网页基本元素实现文本操作在网页插入图像设置超级链接页面的整体控制主要内容掌握网页基本元素的使用掌握页面的整体控制方法本章目标在网页创作中，网页上的信息大多是通过文字来表达的，文字是最基本的元素之一，它具有准确快捷地传递信息、存储空间小、易复制、易保存、易打印等优点，其优势很难被其他元素所取代。增加文字的易读性，让浏览者在短时间内阅读更多、理解更多信息，并达到视觉艺术及传达的功能是网页创作者追求的目标。3.1文本操作3.1.1输入文本图3-1建立“实例1.html”图3-2编辑区域的光标图3-3在页面输入一行文字通过按键盘上的空格键（SpaceBar）实现输入文本空格，这与很多文字处理软件是一样的。但是在DreamweaverCS4中输入空格的数量在字符输入的半角和全角状态是不一样的。

输入法切换到半角状态时，按空格键只能输入一个空格，而无法连续输入多个空格，即第一次按空格键会输入一个空格，第二次按空格键则不会在输入空格。如果需要输入连续的空格，可以通过下面两种方法实现。输入文本空格(1)直接按Ctrl+Shift+SpaceBar组合键。(2)点击菜单“编辑”-》“首选参数”，选择“常规”选项，选中“允许多个连续的空格”复选框，单击“确定”按钮。输入文本空格图3-4常规选项窗口实现文本换行图3-5文本空格与文本换行当输入多行文本时，就需要换行，可以通过Enter或Shift+Enter组合键来实现。大家来观察一下有什么区别？插入相关文本要素图3-6“文本”插入工具栏图3-7“插入其他字符”对话框“插入”->”文本”,单击”字符”按钮文本换行图3-8文本换行效果插入列表图

3-9项目列表图3-10“列表属性”对话框图3-11正方形的项目符号插入水平线图3-12“插入”工具栏的水平线按钮图3-13水平线“属性”面板插入日期图3-14“插入”工具栏的日期按钮图3-15“插入日期”对话框插入注释图3-16“插入”工具栏的注释按钮文本的格式化图3-17“文本”插入工具栏图3-18“格式”菜单3.2.1网页图像的基础知识

图像在网页中通常起到画龙点睛的作用，它能装饰网页，表达个人的情趣和风格。但在网页上加入的图片过多，就会影响浏览的速度，导致用户失去耐心而离开页面。网页常用的图像格式有JPEG（JointPhotographicExpertsGroup）、GIF（GraphicsInterchangeFormat）和PNG（PortableNetworkGraphic）三种。其中，JPEG和GIF两种格式的图片文件由于文件比较小，适合于网络上的传输，而且能够被大多数浏览器完全支持，所以是网页制作中最为常用的图像格式。

JPEG是特别为照片图像设计的文件格式。JPEG支持数百万种色彩。JPEG是质量有损的格式，其压缩技术十分先进，使用有损压缩的方式去除冗余的图像和彩色数据，在获取极高压缩率的同时能展现十分丰富生动的图像。图像数据被抛弃得很少，不会在质量上有非常明显的不同。特别适合在网上发布照片。3.2在网页插入图像下面是一些图像的素材网站：中国素材网/sucaishow/allpic.asp?id=167&id2=2，提供各种网页素材。高品质经典素材/html/mgif/243/，提供矢量、FLASH、GIF、LOGO等素材。映象中国：/，提供各种时事，创意图片素材精品屋：，提供设计素材、动画、矢量图片、特色图标。百万图库：/photo/photo.htm，提供FLASH动漫、各类型图片。中华贴图网：/，提供各种精美图片。LOGO：http://www.logotypes.ru/，提供各种logo。多媒体的搜索引擎：

/，主要提供网上图像的搜索，已收集了超过200万个图像，并且大多经过人工的筛选，因而搜索结果质量较高。图片下载：/en/，提供1000万图片下载。闪盟矢量图库：/home/read.php?qid=vector，提供各种矢量图。好的国外头像网站：/cgi-bin/gall...ect=GIF_Artistsgif动画库：/demo/index.htm3.2.2网页图像素材的搜集插入图像3.2.3图像操作图3-20“选择图像源文件”对话框图3-21“图像标签辅助功能属性”对话框3.2.3图像操作图3-22插入图像的页面设置图像属性图3-23图像“属性”面板1．插入“鼠标经过图像”3.2.4插入相关图像元素图3-25参数设置完成后的“插入鼠标经过图像”对话框2．插入导航条图3-27“插入导航条”对话框3．插入图像占位符

图3-29“图像占位符”对话框超级链接（Hyperlink）是指页面对象之间的链接关系，它网页的灵魂，能合理、协调地把网站中的各个元素、页面通过超级链接构成了一个有机整体，使浏览者能快速地访问到想要访问的页面。超级链接就是从一个网页指向一个目标的连接关系，目标可以是另外一个网页，也可以是相同的网页中的不同的位置，还可以是一幅图片、一个文件或是一个应用程序。一个网站中通常包含有许多内容，这些内容不可能全部显示在一个网页上，这时就可以制作超级链接，通过超级链接可以方便的访问其他的网页。通常情况下，超级链接可以是文字、图像，通过这些文字或者图像即可链接到相关的内容上。在一个网站中，链接路径通常有三种路径方法：绝对路径、文档目录相对路径、根目录相对路径3.3设置超级链接绝对路径:是被链接文档的完整URL,包括使用的传输协议,例如。绝对路径包含的是精确地址,因此不用考虑源文件的位置.相对路径:是指以当前文档所在位置为起始点到被链接文档经由的路径,这种方式适合于创建本地链接.根目录相对路径:是指从站点的根文夹到文档的路径.一般用在大型WEB站点,或在使用承载多个站点的服务器,则可能使用这些路径.3.3设置超级链接3.3.2创建文本超级链接图3-30绘制APDiv和设置链接属性超链接的打开方式链接网页的打开的窗口或位置_blank在一个新的未命名的浏览器中打开链接的网页_parent如果是嵌套的框架，则在父框架或窗口中打开；如果不是嵌套的框架，则等同于_top，链接的网页在浏览器中打开_self在当前网页所在的窗口或框架中链接的网页，该选项是浏览器的默认值_top在浏览器窗口打开链接的网页创建图片超链接的步骤如下：

（1）选中所需建立超链接的图片，此时属性面板为图片的属性面板；

（2）在图片属性面板中，为图片“链接”添加链接，具体方法可参考为文本添加超链接的操作；

（3）按“F12”预览网页。图像连接不像文本链接那样，会发生许多提示，图像本身不会发生改变，只是在预览网页时，当鼠标指针经过带链接的图像时，指针的形状变为“手”的形状。点击图像就会打开所链接的文档。3.3.3创建图片超级链接图片上的超级链接也可以实现一张图片上实现多个局部区域指向不同的网页链接。比如一张中国地图的图片，单击了不同的省跳转到不同的网页。可点的区域就是热点。操作步骤：（1）首先选中图片，在“属性”面板上的绘图工具在画面上绘制热点。在“地图”文本框下的有三种热点工具

：矩形、圆形、多边形，根据热区选择合适的热点工具，进入热点绘制状态。（2）绘制热点。当鼠标指针变成“＋”字形状时，在需要设置热点的位置拖动形成一个热点。（3）在绘制好热点后，设置热点的“属性”面板中的“链接”属性，3.3.3创建图片超级链接1．建立文本电子邮件超链接

（1）在“文档”窗口的“设计”视图中，将插入点放在希望出现电子邮件链接的位置，或者选择要作为电子邮件链接出现的文本或图像。

（2）执行下列操作之一，插入该链接：•选择“插入”→“电子邮件链接”•在“插入”面板的“常用”类别中，单击“电子邮件链接”按钮。

（3）在“文本”框中，键入或编辑电子邮件的正文。

（4）在“E-mail”框中，键入电子邮件地址，然后单击“确定”。3.3.4创建电子邮件超链接2建立图片文本电子邮件超链接在图片的“链接”属性中，输入：“mailto：邮件地址3.3.4创建电子邮件超链接图3-35设置图片“6.jpeg”的链接属性创建空链接如下：

空链接是未指派的链接.用于向页面对上的对象或文本附加行为。在“文档”窗口的“设计”视图中选择文本、图像或对象。在属性面板中，在“链接”框中键入

javascript:;（javascript一词后依次接一个冒号和一个分号）。

脚本链接执行

JavaScript代码或调用

JavaScript函数。它非常有用，能够在不离开当前

Web页面的情况下为访问者提供有关某项的附加信息。脚本链接还可用于在访问者单击特定项时，执行计算、验证表单和完成其它处理任务3.3.5创建空链接和脚本链接如果想让网站提供文件下载的功能，就必须建立下载文件超链接。如果超级链接指向的不是一个网页文件，而是其他文件例如zip、exe文件等等，单击链接的时候就会下载文件。实现文件下载的功能很简单，只需在属性面板的“链接”框中加入下载的文件就可以了。

超级链接也可以直接指向地址而不是一个文件，那么单击链接直接跳转到相应的地址。3.3.6创建下载文件超链接3.3.7链接检查图3-36“链接检查器”选项卡典型的导航栏有：横向导航栏纵向导航栏浮动导航栏下拉菜单式导航栏

下拉菜单导航栏和浮动导航栏都是比较新颖的导航方式，可以使用行为、JavaScript脚本、Spry等技术实现，后面的章节将介绍。下拉菜单也可以使用Flash设计3.3.7导航栏简介3.4.1参数设置3.4页面的整体控制图3-40“首选参数”对话框“编辑”菜单-》“首选参数”图3-41设置“新建文档”的参数3.4.1参数设置3.4.2设置页面属性图3-43“页面属性”对话框“修改”菜单-》“页面属性”设置“外观(CSS)”图

3-44“页面属性”对话框的“外观

(CSS)”类别设置“外观(HTML)”图

3-45“页面属性”对话框的“外观

(HTML)”类别设置“链接（CSS）”图

3-46“页面属性”对话框的“链接（CSS）”类别设置“标题（CSS）”图

3-47“页面属性”对话框的“标题（CSS）”类别设置“标题/编码”图

3-48“页面属性”对话框的“标题/编码”类别设置“跟踪图像”图

3-49“页面属性”对话框的“跟踪图像”类别1显示“文件头内容”菜单3.4.3设置文件头内容图3-50“文件头内容”菜单“插入”菜单-》“HTML”-》“文件头内容”菜单2设置Meta属性图3-52“META”对话框Meta标签是记录当前页面的相关信息（如作者、版权信息或关键字）的head元素3设置关键字图3-53“关键字”对话框

4设置链接图3-55“链接”对话框1.配置窗口的大小3.4.4辅