网页设计第二章_第1页
网页设计第二章_第2页
网页设计第二章_第3页
网页设计第二章_第4页
网页设计第二章_第5页
已阅读5页，还剩125页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

《网页设计与制作教程》第二章第二章Dreamweaver基础

Dreamweaver是由Macromedia公司推出的一款在网页制作方面大众化的软件，它具有可视化编辑界面，用户不必编写复杂的HTML源代码就可以生成跨平台、跨浏览器的网页。本章先初步介绍网络的基础知识，然后详细介绍网页及其制作的有关概念和网站建设的入门知识。本章介绍一下DreamweaverCS3软件的工作界面、新功能和基本应用，使读者初步掌握DreamweaverCS3的基本功能，为后面制作更复杂的网页打下基础。

2.1Dreamweaver基本操作

工作环境

菜单

工具栏

工具箱

面板等

2.1.1Dreamweaver的工作环境1.安装Dreamweaver2.Dreamweaver的工作区选择工作区工作区布局组成工作区布局说明

菜单栏

插入栏文档工具栏

工作区布局说明工作区域窗口设计代码代码和设计状态栏工作区布局说明“属性”面板页面属性工作区布局说明

面板组

“文件”面板“编码”工具栏工作区布局说明“样式呈现”工具栏

“CSS样式”面板自定义工作环境

显示/隐藏面板和工具栏

自定义工具栏自由组合面板调整文档窗口大小切换视图

代码视图

设计视图

拆分视图

2.1.2Dreamweaver的简单操作

Dreamweaver主窗口2.1.2Dreamweaver的简单操作

Dreamweaver文件类型创建新网页创建空白页新建文档”对话框

2.1.3Dreamweaver的视图模式

代码视图

创建空白页“空白页”类别

创建新网页

创建空模板

创建基于现有模板的页面创建基于Dreamweaver示例文件的页面

创建其它类型的页面

设置默认文档类型和编码

设置新HTML文档的默认文件扩展名

打开并编辑现有文档

2.1.3Dreamweaver的视图模式

代码视图设计视图

拆分视图

2.1.4网页中添加内容与超级链接

网页中添加内容插入标题文字设置背景颜色插入一幅画使用插入菜单插入一幅画

使用插入栏

使用面板组“资源”面板

网页中添加内容输入欢迎文字

保存页面

预览网页

超级链接

页面之间的超级连接在网页中选中要做超级链接的文字或者图片在属性面板中选中黄色“浏览文件”文件夹图标单击后，在弹出的对话框里选中相应的网页文件就完成了

页面之间的超级连接按F12预览网页。在浏览器里光标移到超级链接的地方就会变成手型。

提示：也可以手工在属性面板中链接输入框中输入地址。给图片加上超级链接的方法和文字完全相同。

2.1.5网页设计结果测试

具体测试工作确保页面在目标浏览器中能够如预期的那样工作在不同的浏览器和平台上预览页面检查站点是否有断开的链接，并修复断开链接监测页面的文件大小以及下载这些页面所占用的时间运行一些站点报告来测试并解决整个站点的问题验证代码，以定位标签或语法错误在站点发布后，对其进行更新和维护使用讨论论坛运行报告以测试站点

选择“站点”菜单项→“报告”命令

运行报告以测试站点报告将出现在“结果”面板组的“站点报告”面板中

若要仅为站点运行辅助功能报告，可以选择“文件”→“检查页”→“检查辅助功能”。运行报告以测试站点从“报告在”弹出菜单中选择要报告的内容，并设置要运行的任意一种报告类型（工作流程或HTML）如果选择了工作流程报告，则单击“报告设置”。否则，跳过这一步。确定取出者

设计备注

保存最近修改的情况信息

使用和保存报告

使用报告

:运行报告可参阅前面的步骤。在“站点报告”面板中，执行以下任一操作来查看报告：单击要按其排序的列标题以对结果进行排序；可以按文件名、行号或说明进行排序，还可以运行若干不同的报告并让不同的报告保持打开状态；

保存报告

:单击“保存报告”保存该报告。在保存报告时，可以将其导入到现有模板文件中。然后将该文件导入到数据库或电子表格中并进行打印，或者使用该文件在Web站点上显示报告。2.2网页中添加文本

Dreamweaver允许通过以下方式向网页中添加文本：直接将文本键入页面，从其它文档复制和粘贴文本，或从其它应用程序拖放文本。还可以从其它文档类型导入文本或链接至其它文档类型，这些文档类型包括ASCII文本文件、RTF文件和MicrosoftOffice文档。2.2.1Dreamweaver中添加文本

从其它应用程序中复制文本切换到Dreamweaver，将插入点定位在“文档”窗口的“设计”视图中

选择“编辑”→“粘贴”或“编辑”→“选择性粘贴”。选择“编辑”→“选择性粘贴”后，可以选择若干粘贴格式设置选项

粘贴选项快捷键粘贴Ctrl+V(Windows)选择性粘贴Ctrl+Shift+V(Windows)注：当使用“粘贴”命令从其它应用程序粘贴文本时，可以将粘贴首选参数设置为默认选项。按Control+V将在“代码”视图中始终仅粘贴无格式设置的文本。2.2.2文本格式设置

使用文本属性检查器可以设置当前所选文本的格式。设置文本格式时，Dreamweaver将跟踪为每个文本元素指定格式设置属性，并使用命名约定为每个元素指定一个标签:Style1、Style2.如果为两个或更多文本元素指定相同的格式属性，Dreamweaver将使用相同的标题标记这些元素，减少了不必要的样式名称。Dreamweaver应用到一段给定文本正文的标签,稍后即可使用“样式”弹出式菜单进行应用

样式2.2.3文本相关常用html标记常用html标记基本结构及格式标记文件格式<html></html>‘文件的开头与结尾主题<title></title>‘放在文件的开头文头区段<head></head>‘描述文件的信息内文区段<body></body>‘放此文件的内容标题<h?></h>‘?=1~6，改变标题字的大小。标题对齐<halign=right,left,center></h>字加大<big></big>字变小<small></small>基本结构及格式标记

粗体字<b></b>斜体字<i></i>底线字<u></u>上标字<sup></sup>下标字<sub></sub>文字对中<center></center>基本字体大小<basefontsize>‘取值范围从1到7，默认值为3。改变字体大小<fontsize=?></font>(?=1~7)字体颜色<fontcolor=#rrggbb></font>‘RGB色码指定字型<fontface=?></font>‘?=宋体，楷体等。超链接

网址链接<ahref="URL"></a>设定锚点<aname="?"></a>‘?以容易记为原则链接到锚点<ahref="#?"></a>‘同一份文件<ahref="URL#?"></A>‘锚点不同文件显示图形<img

src="URL"></a>图形位置<img

src="URL"align=top,bottom,middle,left,right>‘分别为上、下、中、左、右的位置图形取代文字<img

src="URL"alt=?>‘无法显示图形时用图形尺寸<img

src="URL"width=?height=?>‘?以像素为单位连结图形边线<img

src="URL"border=?>‘?以像素为单位图形四周留白<img

src="URL"hspace=?vspace=?>‘?以像素为单位区段划分

段落<p></p>断行<br></br>横线<hr>横线厚度<hrsize=?>‘?以像素为单位横线长度<hrwidth=?>‘?以像素为单位横线长度<hrwidth=?%>‘?与页宽相比较实横线<hrnoshade>‘无立体效果背景颜色

背景图案<bodybackground=图形文件名>‘图形文件格式为gif和jpg背景颜色<bodybgcolor=#rrggbb>‘RGB色码背景文字颜色<bodytext=#rrggbb>‘RGB色码未链结点颜色<bodylink=#rrggbb>‘RGB色码已链结点颜色<bodyvlink=#rrggbb>‘RGB色码正在链结点颜色<bodyalink=#rrggbb‘RGB色码链接(Link)基本语法

链接一个页面 格式：<ahref="URL">...</a>例：<ahref="samp/link.html">这是一个链接的例子</a>点一下带下划线的文字!跳转到页面的另外一个地方格式：<ahref="#name">...</a><aname="name">...</a>例：<ahref="#jump-test">跳转到下一个"链接点"</a><P><aname="jump-test">下一个链接点</a>链接(Link)基本语法开一个新的(浏览器)窗口(TargetWindow)格式：<ahref="URL"target="Window_Name">...</a>例：<ahref="samp/window.html"target="window_name">‘开一个新窗口!</a>链接(Link)基本语法Formatting（格式排版）<p>Createsanewparagraph‘创建一个新的段落<palign=?>Alignsaparagraphtotheleft,right,orcenter.‘将段落按左、中、右对齐。<br>Insertsalinebreak（插入一个回车换行符）<blockquote></blockquote>Indentstextfrombothsides‘从两边缩进文本<dl></dl>Createsadefinitionlist‘创建一个定义列表<dt>Precedeseachdefinitionterm‘放在每个定义术语词之前Formatting<dd>Precedeseachdefinition‘放在每个定义之前<ol></ol>Createsanumberedlist‘创建一个标有数字的列表<li>Precedeseachlistitem,andaddsanumber.‘放在每个数字列表项之前，并加上一个数字。<ul></ul>Createsabulletedlist‘创建一个标有圆点的列表<li>Precedeseachlistitem,andaddsthebullet‘放在每个圆点列表项之前，并加上一个圆点。<divalign=?>AgenerictagusedtoformatlargeblocksofHTML,alsousedforstylesheets.‘一个用来排版大块HTML段落的标签，也用于格式化表。2.3网页中添加图像

了将网页做的赏心悦目，增加吸引力，Dreamweaver在网页中用图象加以点缀。将图像插入文档时，HTML源代码中会生成对该图像文件的引用。为了确保此引用的正确性，该图像文件必须位于当前站点中。如果图像文件不在当前站点中，Dreamweaver会询问是否要将此文件复制到当前站点中。还可以动态插入图像，动态图像指那些经常变化的图像。例如，广告横幅旋转系统需要在请求页面时从可用横幅列表中随机选择一个横幅，然后动态显示所选横幅的图像。2.3.1网页中添加各种图像（jpg，gif，png）图像素材的采集图像素材的采集则主要通过以下几种方式获得。最常用的是利用扫描仪或数码相机从外部采集图像数据；另外对于普通的照片、图象资料可以用扫描仪扫描到电脑里，再经过Photoshop等图象处理软件处理。插入图片在新建的空白网页上选中插入点点击菜单栏中的“插入记录”→“图像”，或者点击插入工具栏中常用项里的“插入图像”图标，然后会弹出“选择图像源文件”对话框插入图片

在“选择图像源文件”对话框中选择要插入的图片，选中图片后会在下面“文件名”处显示文件的名称，并在右侧出现图片预览、图像尺寸和图片容量

选好图片后点击确定，随后弹出一个对话框插入图片按确定后，随后弹出一个名为“图片标签辅助功能属性”对话框

插入图片这里有两个需要添加的内容，“替换文本”就是图片的alt属性，可以输入图片的名字或者简短介绍。详细说明是图片的longsec属性，一般使用不到，可以不填；

最后点击确定，一张图片就插入到网页中了。

给图片加上链接在输入框中直接输入图片路径和文件名，本地路径、网络路径都可以。点击边上的“指向文件”图标（小靶心图标）按住左键不放，这时会看到有一根线连着它，拖着它到软件右侧的“文件面板”处，选择要插入的图片，松开鼠标，这时图片就会正确显示在页面中。点击输入框边上的“文件夹图标”，会弹出一个文件选择框，这种方法和上面所讲的插入图片方法是一样的，只要选择要插入的图片就可以了。

2.3.2图像格式设置

GIF:GIF文件最多使用256种颜色，最适合显示色调不连续或具有大面积单一颜色的图像，例如导航条、按钮、图标、徽标或其它具有统一色彩和色调的图像。JPEG（联合图像专家组）：JPEG文件格式是用于摄影或连续色调图像的较好格式，这是因为JPEG文件可以包含数百万种颜色PNG（可移植网络图形）：文件格式是一种替代GIF格式的无专利权限制的格式，它包括对索引色、灰度、真彩色图像以及alpha通道透明度的支持。PNG是AdobeFireworks固有的文件格式2.3.3图像标记及其属性

图像标记将新建一个空白文档保存在与图片同一文件夹中。单击“文档”工具栏中的拆分视图按钮在代码视图中，在<body>与</body>之间插入一段代码：<img

src="002.jpg"width="100"height="139"alt="beautifulgirl">这时设计视图中会出现图片图像标记

在代码视图中，在图像标记<IMG>中插入hspace="50"vspace="50"，这时设计视图中的图片会向右和向下各移动50像素

图像标记

接着在图像标记<IMG>中插入border="4"，这时设计视图中的图片会出现4像素的边框

图像标记继续在图像标记<IMG>中插入align="right"，将border="4"与hspace="50"vspace="50"删除，这时在设计视图中，图片靠近右边

图像标记在图像标记<IMG>中更改width和height的数值，就会将图片放大。下面是将width和height的数值各增加100像素效果

图像属性图像属性检查器允许设置图像的属性。如果并未看到所有的图像属性，请单击位于右下角的展开箭头

图像属性设置

选择“窗口”→“属性”以查看所选图像的属性检查器在缩略图下面的文本框中，输入名称，以便在使用Dreamweaver行为（例如“交换图像”）或脚本撰写语言（例如JavaScript或VBScript）时可以引用该图像设置图像的任一选项宽和高源文件链接目标…2.3.4使用Dreamweaver制作网络相册

把事先准备好５副大小同样的相片用photoshop等图形制作工具加工一下，以增加相片的可欣赏性。

插入Flash元素

2.3.4使用Dreamweaver制作网络相册

Flash元素参数设置保存文件，完成操作。

2.4网页中添加多媒体

通常所说的“媒体”（Media）包括其中的两点含义。一是指信息的物理载体（即存储和传递信息的实体），如书本、挂图、磁盘、光盘、磁带以及相关的播放设备等；另一层含义是指信息的表现形式（或者说传播形式），如文字、声音、图像、动画等。多媒体计算机中所说的媒体，是指后者而言，即计算机不仅能处理文字、数值之类的信息，而且还能处理声音、图形、视频等各种不同形式的信息。2.4.1网页中添加视频媒体

视频素材的准备网页中添加视频媒体将插入点放在“文档”窗口中希望插入对象的位置完成“选择文件”或“插入Flash”对话框，然后单击“确定”设置辅助功能属性。选择相应的功能属性设置参数单击“确定”插入媒体对象2.4.2网页中添加音频媒体

音频文件格式

.midi或.mid（MusicalInstrumentDigitalInterface，乐器数字接口）此格式用于器乐。许多浏览器都支持MIDI文件，并且不需要插件。尽管MIDI文件的声音品质非常好，但也可能因访问者的声卡而异。很小的MIDI文件就可以提供较长时间的声音剪辑。MIDI文件不能进行录制，并且必须使用特殊的硬件和软件在计算机上合成。.wav（波形扩展）这些文件具有良好的声音品质，许多浏览器都支持此类格式文件并且不需要插件。可以从CD、磁带、麦克风等录制自己的WAV文件。但是，其较大的文件大小严格限制了可以在网页上使用的声音剪辑的长度。.aif（AudioInterchangeFileFormat，音频交换文件格式，或AIFF）AIFF格式与WAV格式类似，也具有较好的声音品质，大多数浏览器都可以播放它并且不需要插件；也可以从CD、磁带、麦克风等录制AIFF文件。但是，其较大的文件大小严格限制了可以在网页上使用的声音剪辑的长度。.mp3（MotionPictureExpertsGroupAudioLayer‑3，运动图像专家组音频第3层，或称为MPEG音频第3层）一种压缩格式，它可使声音文件明显缩小。其声音品质非常好：如果正确录制和压缩mp3文件，其音质甚至可以和CD相媲美。mp3技术可以对文件进行“流式处理”，以便访问者不必等待整个文件下载完成即可收听该文件。但是，其文件大小要大于RealAudio文件，因此通过典型的拨号（电话线）调制解调器连接下载整首歌曲可能仍要花较长的时间。若要播放mp3文件，访问者必须下载并安装辅助应用程序或插件，例如QuickTime、WindowsMediaPlayer或RealPlayer。.ra、.ram、.rpm或RealAudio此格式具有非常高的压缩度，文件大小要小于mp3。全部歌曲文件可以在合理的时间范围内下载。因为可以在普通的Web服务器上对这些文件进行“流式处理”，所以访问者在文件完全下载完之前就可听到声音。访问者必须下载并安装RealPlayer辅助应用程序或插件才可以播放这种文件。.qt、.qtm、.mov

或QuickTime此格式是由AppleComputer开发的音频和视频格式。AppleMacintosh操作系统中包含了QuickTime，并且大多数使用音频、视频或动画的Macintosh应用程序都使用QuickTime。PC也可播放QuickTime格式的文件，但是需要特殊的QuickTime驱动程序。QuickTime支持大多数编码格式，如Cinepak、JPEG和MPEG。2.4.2网页中添加音频媒体声音素材的准备链接到音频文件嵌入声音文件实例：介绍如何实现在网页上随机播放背景音乐。1.打开Dreamweaver软件新建文件，并保存页面2.选择好“标签”页实现播放背景音乐3.点击“行为”面板中图标，选择级联菜单的“~建议不在使用”

实现播放背景音乐实现播放背景音乐

4.点击下“播放声音”选项，进入“播放声音”对话框

5.在“播放音乐”对话框中，通过“浏览”选择插入要播放的音乐文件后，再按“确定”认可。6.重复执行③、④、⑤的操作4次，这样就添加了4种音乐，使得程序可以随机在这四种音乐中挑选其中一首来播放7.保存文件，完成操作2.4.3网页中添加动画

动画素材的准备Flash动画在网页中应用广泛，是目前最流行的二维动画技术。用它制作的SWF动画文件，可以嵌入到HTML文件里，也可以单独成页插入Flash动画实例将光标放置在表格任意单元格中，单击常用快捷栏中的媒体按钮，然后在弹出的列表中选择Flash插入Flash动画实例

弹出“选择文件”对话框，选择swf文件夹中的main.swf文件

单击“确定”按钮后，插入的Flash动画并不会在文档窗口中显示内容，而是以一个带有字母F的灰色框来表示插入Flash动画实例

在文档窗口单击这个Flash文件，就可以在属性面板中设置它的属性了

为了使页面的背景在Flash下能够衬托出来，可以使Flash的背景变为透明。单击属性面板中的“参数”按钮，打开“参数”对话框，设置参数为wmode，值为transparent插入Flash动画实例

保存文件，完成操作

Dreamweaver设置Flash动画参数2.4.4媒体播放控制

使用行为控制媒体使用行为控制Shockwave或Flash的播放、停止、后退或转到Shockwave影片或FlashSWF文件中的某一帧使用行为播放声音,例如，只要用户将鼠标指针移到链接上，就可以播放声音效果使用行为检查插件.可以检查站点访问者是否安装了必需的插件，然后根据他们是否有正确的插件来将他们引导到不同的URL。2.4.4媒体播放控制

使用参数控制媒体对象输入参数的名称和值在“文档”窗口中选择可具有参数的对象右键单击该对象，然后从上下文菜单中选择“参数”单击加号(+)按钮并在相应的列中输入参数名和参数值删除参数选择一个参数并按减号(–)按钮重新安排参数顺序选择某个参数，然后使用向上箭头和向下箭头按钮2.4.5多媒体标记介绍

<BGSOUND>功能：是用以插入背景音乐，但只适用於IE。例：<BGSOUNDsrc="your.mid"autostart=trueloop=infinite>参数功能src="your.mid"用来设定midi档案及路径，可以是相对或绝对。autostart=true确定是否在音乐档传完之後，就自动播放音乐。是为true，否为false，false为默认值。loop=infinite确定是否自动反覆播放。LOOP=2表示重复两次，Infinite表示重复多次。2.4.5多媒体标记介绍

<EMBED>功能：是用以插入各种多媒体，格式可以是Midi、Wav、AIFF、AU等，Netscape及新版的IE都支援。例：<EMBEDsrc="your.mid"autostart="true"loop="true"hidden="true">参数功能src="your.mid"设定midi档案及路径，可以是相对或绝对。autostart=true确定是否在音乐档传完之後，就自动播放音乐。true是，false否(内定值)。loop="true"确定是否自动反覆播放。LOOP=2表示重复两次，true是，false否。HIDDEN="true"确定是否完全隐藏控制画面，true为是，no为否(内定)。STARTTIME="分:秒"设定歌曲开始播放的时间。如STARTTIME="00:30"表示从第30秒处开始播放。VOLUME="0-100"设定量的大小，数值是0到100之间。内定则为使用者系统本身之设定。WIDTH="整数"和HIGH="整数"设定控制画面的宽度和高度。(若HIDDEN="no")ALIGN="center"设定控制画面和旁边文字的对齐方式，其值可以是top、bottom、center、baseline、left、right、texttop、middle、absmiddle、absbottom。CONTROLS="smallconsole"设定控制画面的外貌。预设值是console。2.4.5多媒体标记介绍

CONTROLS预设值参数功能console一般正常的面板smallconsole较小的面板playbutton只显示播放按钮pausecutton只显示暂停按钮stopbutton只显示停止按钮volumelever只显示音量调整钮2.5超级链接应用

各种链接的功能导航链接：实现站点内文档的链接锚链接：使用锚链接到文档中的指定位置空链接：是一个无指向的链接创建JavaScript脚本链接创建电子邮件链接链接到站点中的文档或者其它站点给链接增加提示，给链接增加快捷键各种链接的实现方法

实例:创建导航链接用指向文件图标链接文档：选中图像，将“属性”检查器的“链接”域右边的“指向文件”图标拖动到站点窗口的文档中。这种方法方便快捷，推荐使用。示例中指向一个文件夹，如果发布到网上后，自动会打开这个文件夹下的默认首页文件index.htm

创建导航链接

使用属性检查器：选中示例中的图像，也可以是文字，点击属性面板中的“浏览文件”图标

选中一个文件。会出现一个文件相对于“文档”，“站点根目录的选择”创建导航链接文档相对路径是最适合用于本地链接的路径类型，适合绝大多数Web站点，推荐使用

根相对路径：如果在一个使用多台服务器的大型Web站点或一台服务器上有多个站点的情况下工作，可能需要使用这种类型的路径创建导航链接绝对路径：完整的URL，称作绝对路径

从打开文档的选取中创建链接：选中文字，按Shift键，拖动出现“指向文件”图标，把“指向文件”图标拖向目标文件，就会建立链接创建导航链接选择被链接文档要打开的位置：若要使被链接文档不出现在当前窗口或框架中，从属性面板的“目标”弹出式菜单选取一个选项

“目标”弹出式菜单选项

创建导航链接选项作用_blank在新的未命名的浏览器窗口中加载链接文档。_parent在父框架页或包含该链接的框架窗口中加载链接文档。如果包含链接的框架不是嵌套的，则链接文档将加载到整个浏览器窗口中。_self将链接文档加载到与链接相同的框架或窗口中，该目标是默认值，所以通常您不需要指定它。_top将在整个浏览器窗口中加载链接文件，同时移除所有框架。一个网站中，第一级链接或者导航链接选择_self，第二级链接和友情链接选择_blank。属性面板“目标”弹出式菜单选取项创建效果

使用锚链接选中文本

在目标文档中插入锚标记

命名

拖动“指向文件”图标到文本命名锚记效果

使用空链接

在文档窗口中，选中要设置链接的文本、图像或其他对象

在属性面板的链接框中，只输入一个“#”号

如果单击这种地址为一个“#”的链接，无论当前你处于文档的什么地方，都会自动跳转到文档的开头位置。很多人非常讨厌这种情况，因此出现很多插件可以用“###”来代替“#”，单击这样的链接的时候，会保持当前页面的浏览位置。

还可以在属性面板的链接框中输入javascript:;创建空链接

创建javascript脚本链接

在文档窗口中选取文本，图象或对象

在“属性”检查器的“链接”栏中键入javascript:，其后紧接JavaScript代码或函数调用。例如在链接栏中键入javascript:alert('哈哈你上当了')创建一个链接，点击链接后就会出现一个警告框

建电子邮件链接

选取需要创建链接的文本或者图像，点击常用面板中的“电子邮件链接”工具，输入邮件地址。选取需要创建链接的文本或者图像，在属性面板中的链接栏输入mailto:邮件地址

创建跳转菜单

首先将插入点放在要插入链接的位置

点击表单面板中的跳转工具。在插入跳转菜单对话框中，点添加项添加新链接创建跳转菜单在浏览器中发布

在属性面板中选择类型为“列表”高度为3创建跳转菜单在浏览器中发布

点击属性面板中的列表值，可以修改列表值给链接增加提示

给链接增加快捷键。首先将插入点放在要插入链接的位置。点击常用面板上的超级链接工

设置链接参数给链接增加提示标题是指当指向链接会出现提示

访问键是指按键盘上的快捷键会选中链接。例如在实例中按Alt+D键会选中5D多媒体

2.5.1链接到各种对象文档位置和路径

绝对路径

文档相对路径

站点根目录相对路径

链接文件和文档

使用属性检查器链接到文档例:做一个完整的网站新建页面插入图片

给图片加上链接例:做一个完整的网站使用指向文件图标链接文档

在“文档”窗口的“设计”视图中选择文本或图像

创建链接

使用站点地图链接文档使用站点地图和指向文件图标链接文档在站点地图中链接文档

使用超链接命令添加链接链接到文档中的特定位置

创建命名锚记

链接到命名锚记

使用指向文件方法链接到命名锚记

例:做一个完整的网站创建电子邮件链接

创建空链接和脚本链接

在站点地图中管理链接

更改链接

删除链接

打开链接源

在整个站点范围内更改链接在Dreamweaver中测试链接

在不定义站点的情况下连接到FTP服务器

2.5.2图像热区设置

关于图像地图

图像地图指已被分为多个区域（称为热点）的图像；当用户单击某个热点时，会发生某种动作

插入客户端图像地图修改图像地图热点选择图像地图中的多个热点

移动热点

调整热点大小

图像热区设置举例

对下面的中国地图加一些链接后，鼠标移动到省份的热区，就会显示提示，如果有预先设置的网站，点击会进入对方的网站

图像热区设置举例图像热区设置首先插入图片。单击图片，用展开的属性面板上的绘图工具在画面上绘制热区

属性面板改换为热点面板如图：链接输入框：填入相应的链接。替代框：填入提示文字说明。目标框：不作选择则默认在新浏览器窗口打开图像热区设置举例保存页面，按F12预览，用鼠标在设置的热区检验效果超级链接属性面板中的目标选项目标”即目标区，也就是超级链接指向的页面出现在什么目标区域。默认的情况下域中总有四个选项

参数作用_blank单击链接以后，指向页面出现在新窗口中。_parent用指向页面替换他外面所在的框架结构。_self将连接页面显示在当前框架中。_top跳出所有框架，页面直接出现在浏览器中。2.5.3链接标记及其属性在设置存储Web站点文档的Dreamweaver站点和创建HTML页之后，需要创建文档到文档的连接

站点地图直观地说明文件是如何链接在一起的

链接的创建与管理有几种不同的方法

创建一些指向尚未建立的页面或文件的链接

创建所有的文件和页面，然后再添加相应的链接

管理链接的方法是创建占位符页面

2.5.4跳转菜单（可选）菜单选择提示（如菜单项的类别说明），或一些指导信息（例如“选择其中一项”）。必需）所链接的菜单项的列表：当用户选择某个选项时，链接的文档或文件打开

（可选）“转到”按钮

插入跳转菜单

打开一个文档，然后将插入点放在“文档”窗口中

选择“插入”>“表单”>“跳转菜单

完成“插入跳转菜单”对话框，然后单击“确定”。下面列出部分选项

加号和减号按钮

箭头按钮

文本

选择时，转到URL

打开URL

菜单之后插入前往按钮

更改URL后选择第一个项目

编辑跳转菜单项

如果属性检查器尚未打开，请打开属性检查器

在“文档”窗口的“设计”视图中，单击跳转菜单对象以选择它

在属性检查器中，单击“列表值”按钮

使用“列表值”对话框更改菜单项，再单击“确定”

2.5.5导航条导航条是由一个图像或一组图像组成，这些图像的显示内容随用户动作而变化。导航条通常为在站点上的页面和文件之间移动提供一条简捷的途径

导航条导航条元素有四种状态一般

滑过

按下

按下时鼠标经过

插入导航条

选择“插入”>“图像对象”>“导航条

完成“插入导航条”对话框，然后单击“确定”。下面列出部分选项

导航条加号和减号按钮元素名称

一般、经过、按下和按下时鼠标经过

替换文本

按下时，前往的URL

预先载入图像

页面载入时就显示鼠标按下图像

插入

使用表格

修改导航条 操作过程如下修改导航条在活动页面中选择导航条。选择“修改”>“导航条”。在“导航条元件”列表中，选择要编辑的项目。根据需要进行更改，然后单击“确定”

2.5.6查找断开的、外部的和孤立的链接检查当前文档中的链接

将此文件保存在本地Dreamweaver站点中的某个位置

选择“文件”>“检查页”>“链接”

在“链接检查器”面板中，从“显示”弹出菜单中选择“外部链接”以查看其它报告

若要保存此报告，请单击“链接检查器”面板中的“保存报告”按钮

检查本地站点某一部分中的链接在“文件”面板中，从“当前站点”弹出菜单中选择一个站点

在“本地”视图中，选择要检查的文件或文件夹

查找断开的、外部的和孤立的链接右键单击(Windows)或者按住Control单击(Macintosh)一个选定的文件，然后从上下文菜单中选择“检查链接”>“选定的文件/文件夹”

在“链接检查器”面板中，从“显示”弹出菜单中选择“外部链接”以查看其它报告

若要保存报告，请单击“链接检查器”面板中的“保存报告”按钮

检查整个站点中的链接“文件”面板中，从“当前站点”弹出菜单中选择一个站点

选择“站点”>“检查站点范围的链接

在“链接检查器”面板中，从“显示”弹出菜单中选择“外部链接”或“孤立的文件”，可查看其它报告

若要保存报告，请单击“链接检查器”面板中的“保存报告”按钮。

2.5.7修复断开的链接在链接检查器面板中修复链接运行链接检查报告

在“链接检查器”面板（在“结果”面板组中）中的“断开的链接”列（而不是“文件”列），选择该断开的链接

单击断开的链接旁的文件夹图标以浏览到正确文件

按Tab键或者Enter键（在Windows中）；或者按Return键（在Macintosh中）

在属性检查器中修复链接运行链接检查报告

在“链接检查器”面板中（在“结果”面板组中），双击“文件”列中的某个条目

若要在属性检查器中设置新路径和文件名，请单击文件夹图标以浏览到正确的文件，或者在突出显示的文本上直接键入

保存此文件

2.5.8将JavaScript脚本附加到链接上可为文档中的任何链接附加行为。在文档中插入链接元素时，有如下几种行为可供选择

设置状态栏文本

打开浏览器窗口

跳转菜单

设置导航条图像

2.6表单应用基础学习动态交互式网页的创建，首先学习动态交互式网页的基础——表单。表单是浏览者与网站之间实现交互的工具，几乎所有的网站都离不开。表单支持客户端-服务器关系中的客户端。当访问者在Web浏览器（客户端）中显示的表单中输入信息，然后单击提交按钮时，这些信息将被发送到服务器，服务器中的服务器端脚本或应用程序会对这些信息进行处理。服务器向用户（或客户端）返回所请求的信息或基于该表单内容执行某些操作，以此进行响应，从而实现用户与网站之间的交互。2.6.1创建表单对象创建表单域每一个表单都是由一个表单域和若干个表单元素组成的，所有的表单元素放到表单域中

设置表单属性

中插入的表单，打开表单的属性面板，在“属性”面板中进行设置表单的属性

2.6.2创建文本域单行文本域和密码文本域隐藏域多行文本域2.6.3创建复选框和单选按钮复选框

单选按钮和单选按钮组2.6.4建立列表和菜单下拉式菜单建立列表和菜单滚动式列表

2.6.5创建跳转菜单2.6.6创建文件域和图像域如果网页使用了较为丰富的色彩或稍微复杂的设计，再使用表单默认的按钮形式甚至会破坏整体的美感，这时可以使用插入图像按钮的功能，创建和网页整体效果相统一的图像提交按钮

创建文件域和图像域创建文件域创建图像域2.6.7常见表单元素使用表单元素属性选项

“表单元素属性”对话框用于设置页上表单元素的选项以允许用户更新数据库中的记录。根据计划创建表单元素的方式，选择“手动”或“来自数据库”

为该元素输入标签和值

在“选取值等于”框中，如果要在浏览器中打开页面时或在表单中显示记录时选择特定的元素，则输入一个等于该元素值的值。可以输入静态值，或者通过单击闪电图标，然后从数据源列表中选择一个动态值来指定动态值

2.6.8表单标记介绍表单标记<form>

action属性method属性enctype属性name属性表单标记<form> 表单在Web网页中用来给访问者填写信息，从而能采集和提交用户输入的信息，使网页具有交互的功能。inp

人人文库> 全部分类> 应用文书 > 事务文书

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论