02-网页设计基础6.2.3--6.3

第6章网页设计基础DreamweaverCS46.2.3网页元素的添加与处理框架集表单基本网页元素：网页页面属性设置文本图像操作CSS样式动画、音视频网页页面属性设置6.2.3网页元素的添加与处理设置网页的标题、背景图像、背景颜色、文本颜色、链接颜色、页边距等，对外观进行整体上的控制，以保证页面属性的一致性。单击此按钮，打开“页面属性”对话框1.文本操作6.2.3网页元素的添加与处理在网页创作中，网页上的信息大多是通过文字来表达的。文字是最基本的元素之一，具有准确快捷地传递信息、存储空间小、易复制、易保存、易打印等优点，其优势很难被其他元素所取代。（1）输入文本和空格（2）文本换行（Enter与Shift+Enter）例2：打开wy1.html，将网页标题设置为“母亲河”，设置网页的超级链接颜色。6.2.3网页元素的添加与处理在网页中插入图像，可以使网页更加美观，它能装饰网页，表达企业或个人的情趣和风格。2.图像操作6.2.3网页元素的添加与处理插入鼠标经过图像6.2.3网页元素的添加与处理“鼠标经过图像”是指在浏览器中，当鼠标指针移动到图像上时，图像随即变成另外一幅图像，当鼠标指针移开时，又会恢复到第一幅图像。命令：“插入/图像对象/鼠标经过对象”例6：在wy1.html网页中插入“鼠标经过图像”，图像为huanghe1.jpg和huanghe2.jpg文件。6.2.3网页元素的添加与处理原始图像鼠标经过图像CSS（CascadingStyleSheet）称为“层叠样式表”，简称为“样式表”。CSS是一组格式设置规则，用于控制Web页面元素的外观布局。使用CSS可以灵活并更好地控制许多文本属性，包括特定字体、大小、粗体、斜体、下划线等。3.CSS样式6.2.3网页元素的添加与处理（1）CSS规则6.2.3网页元素的添加与处理CSS规则主要有选择器和声明两个部分组成，选择器是表示格式元素的术语，声明用于定义元素样式，如右侧所示的.a1是选择器，介于{}之间的内容就是声明。选择器声明（2）CSS定义6.2.3网页元素的添加与处理例7：建立如图6-2-47所示的CSS规则.a1，并应用到wy1.html的第二段文本上。步骤：单击文本“属性”面板上的按钮，“目标规则”中选择“新CSS规则”，单击出现“新建CSS规则”对话框。（1）插入Flash动画Flash动画以其文档容量小、效果丰富等特点深受网页制作者的钟爱。4.多媒体操作6.2.3网页元素的添加与处理例8：将Flash文件001.swf插入到新建的网页wy2.html中。插入Flash动画（“插入/媒体/SWF”菜单命令）6.2.3网页元素的添加与处理选择Flash文件（2）添加音频（“插入/媒体/插件”）6.2.3网页元素的添加与处理例9：将声音文件ex2.wav添加到网页wy2.html中。插入音频后，打开“窗口”菜单中的“标签编辑器”，可以对音频进行属性设置。打开标签编辑器音频属性设置（3）添加视频(“插入/媒体/FLV”）6.2.3网页元素的添加与处理例10：将视频文件Musicvedio.flv添加到网页wy2.html中。FLV视频标签FLV预览效果超链接是指页面对象之间的链接关系，只有通过超链接才可以实现在不同网页，乃至不同网站之间的跳转。超链接就是从一个网页指向一个目标的关系，目标可以是另一个网页，可以是同一网页的不同位置，还可以是一幅图像、一个文件等。6.2.4.网页中的超链接6.2.4网页中的超链接例11：在wy1.html中设置第一行中文本“黄河”的超级链接，链接文件为“huanghe.html”。插入链接对话框1.文本链接在“目标”下拉列表中可以选择超级链接的打开方式。6.2.4网页中的超链接_blank：在一个新的浏览器中打开。_parent：在父框架中打开。_self：在网页所在的窗口或框架中打开，此为默认选项。_top：在浏览器窗口打开。6.2.4网页中的超链接2.图像和图像热区链接（1）图像链接创建图像超级链接的方法与建立文本超级链接相似，即选择图像，然后进行超级链接设置。链接目标为新浏览器窗口超链接对象图像对象6.2.4网页中的超链接（1）图像热区链接除了指定一整张图像建立超级链接外，还可以利用图像热点工具，在图像上指定某个区域建立超级链接，方法是先绘制图像热点区域，再为该区域建立链接，从而实现在同一个图像上建立多个超级链接的目的。热点工具有：矩形热点工具、椭圆形热点工具和多边形热点工具。6.2.4网页中的超链接例12：将wy1.html网页中huanghe.jpg上的黄河区域建立超级链接，链接到“huanghe.html”文件，目标位置为“新窗口”。热区位置矩形热点工具椭圆形热点工具多边形热点工具6.2.4网页中的超链接3.锚记链接Dreamweaver提供了锚记链接功能，可创建跳转到页面的指定位置的链接。当建立一个锚记后，会在屏幕上显示锚记标记。执行菜单“编辑/首选参数”命令，在“不可见元素”中选取“命名锚记”复选框，“确定”后即可显示锚记。显示锚记6.2.4网页中的超链接例13：在wy1.html网页尾部添加“返回顶部”四个字，并建立超级链接，可跳转到网页的首部。步骤：定义锚记名“m1”尾部添加“返回顶部”文字选择文字，设置链接。注意：锚记前必须加上#号，即“#m1”。6.2.4网页中的超链接4.Email链接在对象的“属性”面板的“链接”框内输入“mailto:”并输入Email地址，如mailto:[e-mail]。5.外部链接在“属性”面板的“链接”框内直接输入外部链接地址，如。返回本节首页6.2.5网页的布局在网页制作中，网页布局的重要性是显而易见的，网页布局有很多方法，但最基本的方法是利用表格和利用框架进行网页布局。1.利用表格布局网页6.2.5网页的布局右图为利用表格进行网页布局的页面，表格为9行×5列，采用创建后合并单元格方式，表格无边框线。布局后的表格可以插入文字、图像、超级链接、Email链接和所有网页元素，且整齐美观。例14：新建一网页文件wy3-1.html，在网页中插入一个4行×3列表格，合并第一行单元格，并设置对齐方式居中。（1）表格的创建（“插入/表格”）6.2.5网页的布局插入表格对话框，确定行数、列数。表格宽度可以为绝对像素单位，或为浏览器宽度的百分比6.2.5网页的布局框架集由一组框架构成，框架集把浏览器窗口划分为若干个区域，每个区域定义为一个框架，在此框架中可以显示不同的网页，从而实现在同一页面中显示多个网页文档内容。3.框架的创建及使用6.2.5网页的布局（1）创建和保存框架例15：新建一框架集文件wy3.html，框架为“对齐上缘”，两个框架文件分别保存为wy3-1.html、和wy3-2.html。上框架wy3-1.html主框架wy3-2.html6.2.5网页的布局（2）设置超级链接例16：在wy3-1.html（即上框架）中设置文本的超级链接。选择“黄河游”文本，设置超级链接到wy1.html网页，目标为mainFrame。注意：框架中的超级链接，目标可以设置为某个框架（mainFrame、topFrame、leftFrame、rightFrame、bottomFrame等）。框架超链接目标6.2.6表单的使用表单是服务者与用户进行交互的通道。通过表单，用户可以在表单对象中输入或选择相关的信息，然后提交到站点服务器的数据库，而服务器脚本或应用程序即对这些信息进行处理，最后服务器回应请求，将信息发送回用户或客户端页面，从而达到人站交流的目的。6.2.6表单的使用“调查问卷”表单单行文本单选按钮复选框菜单/列表文件域命令按钮6.2.6表单的使用“表单ID”：用来设置表单的名称，当同一页面中有多个表单时，需要有不同名称来区分。“动作”：用来制定处理该表单的动态页或脚本的路径。例如需要通过Email发送，则可以输入mailto:[e-mail]“方法”：设置将表单数据发送到服务器的方法，其中POST表示用标准输入方式发送数据到服务器，GET表示把表单数据附加到请求URL后发送到服务器。“目标”：设置表单数据被处理后，反馈网页的打开方式。“编码类型”：设置发送数据的编码类型。（2）表单属性6.2.6表单的使用插入表单（表单域）后，可以在其中插入各种表单对象。2.表单对象（1）文本框例17：在wy4.html网页中插入表单域，插入文本域并设置属性。单行文本域属性设置密码设置可输入的最多字符数可显示的最多字符数6.3站点的发布与管理6.3.1站点的发布6.3.2站点的管理6.3.1站点的发布“站点的发布”是指利用Dreamweaver将本地站点的网站内容传输到远程站点这一过程。远程站点通常位于一台已经开启Web服务器的计算机上。1.远程站点的建立6.3.1站点的发布一般而言，远程站点和本地站点位于两台不同的计算机上。在建立远程站点之前必须先搞清楚三个问题：①远程站点位于哪一台计算机上②本地站点以什么通信方式访问远程站点③根据特定的通信方式，本地站点访问远程站点时需要设置哪些参数6.3.1站点的发布远程文件夹一般指Web服务器上存储文件的位置，这些文件可以用来向互联网用户发布。如果计划开发动态网页，Dreamweaver需要测试服务器的服务以便生成和显示动态内容。在测试服务器上存放站点内容的文件夹就是测试服务器文件夹。（1）远程文件夹和测试服务器文件夹6.3.1站点的发布DreamweaverCS4提供的在本地和远程文件夹之间传输文件时可以使用的访问方法：（2）远程文件夹的访问方法FTP：如果使用FTP能够连接到Web服务器，可使用此设置。本地/网络：如果远程文件夹位于网络文件夹或在本地计算机上时可使用此设置。RDS（远程开发服务）：对于这种访问方法，远程文件夹必须位于运行Adobe®ColdFusion®的计算机上。注意：上述不同的访问方法对应着不同的配置参数。只有正确配置参数才能确保本地站点与远程站点之间能正常传输文件。6.3.1站点的发布选择菜单“站点/管理站点”命令，进入“站点定义”对话框。在“站点定义”对话框中，输入相应内容并进行属性设置。（3）定义远程文件夹（以FTP方式访问）定义远程文件夹选择FTP方式选择远程信息主机名称6.3.1站点的发布远程文件夹一旦创建成功，就可以从本地站点向远程站点上传文件了。在Dreamweaver中，上传文件的操作主要通过“文件”面板来执行。2.远程站点的发布上传文件按钮6.3.2站点的管理随着站点的发布和站点内容的不断更新，新增、删除和重命名文件的现象将不断出现，这将导致文件内部链接的失效以及本地站点、远程站点内容的不一致。因此必须及时更新站点的内容。6.3.2站点的管理（1）在折叠的“文件”面板中切换站点视图3.站点视图切换站点视图下拉框6.3.2站点的管理（2）在展开的“文件”面板中查看站点远程站点本地站点