第2章动态网页

第2章DreamweaverCS3基础内容导读本章主要讲述Dreamweaver在开发网页过程中的使用方法，在本章的结尾将以一个完整的例子来阐述Dreamweaver的综合使用。重点提示文本和版面的控制图像和多媒体的使用表格的应用超级链接页面布局使用表单使用框架使用CSS样式综合实例——梦回红楼之红楼人物网页制作22.1DreamweaverCS3DreamweaverCS3是为设计人员和开发人员而构建的，它提供一个选择：是在直观的可视布局界面中工作，还是在简化的编码环境中工作。AdobeDreamweaverCS3作为拥有的新功能拓展，包含了CSS工具、用于构建动态用户界面的Ajax组件，并可以与其他Adobe软件智能集成。具体包括：适合于Ajax的Spry框架、Spry数据、Spry构件、Spry效果、AdobePhotoshop和Fireworks集成、浏览器兼容性检查、CSSAdvisor网站、CSS布局、CSS管理、AdobeDeviceCentralCS3。32.1.1DreamweaverCS3的工作环境启动DreamweaverCS3后，新建网页文件，其界面如图2.1所示。42.1.1DreamweaverCS3的工作环境1．插入工具栏2．文档窗口3．属性面板52.1.1DreamweaverCS3的工作环境4．面板组(1) 默认面板组① 【CSS】面板组② 【应用程序】面板组③ 【标签】面板组④ 【文件】面板组(2) 面板组的常用操作方法① 展开或折叠一个面板组② 关闭面板组使之在屏幕上不可见③ 打开屏幕上不可见的面板组或面板④ 移动浮动面板组⑤ 更改面板组的大小62.1.2创建站点1．站点规划(1) 确定站点目标(2) 规划站点结构(3) 规划站点内容(4) 规划站点的导航机制(5) 明确站点风格2．定义本地站点(1) “管理站点”对话框简介① 创建新站点② 编辑站点③ 复制站点④ 删除站点⑤ 导入和导出站点(2) 创建本地站点① 通过“站点定义向导”创建② 通过“高级”设置来创建72.1.2创建站点3．管理站点(1) 在站点中选择多个文件(2) 在本地站点中剪切、粘贴、复制、删除、重命名文件或文件夹(3) 创建文件或文件夹4．网页文件的基本操作(1) 创建网页(2) 打开网页(3) 保存网页82.2文本和版面的控制作为DreamweaverCS3的第一个练习，我们先来学习一下文本和版面的控制。本节将要制作一个“八荣八耻准则”网页。可打开光盘中的2-1.html网页，其效果如图2.17所示。92.2.1版面控制1．页面设置选择“修改”→“页面属性”菜单命令，打开【页面属性】对话框，如图2.18所示。2．设置页面的头部信息HTML文件由两个主要部分组成：head部分和body部分。(1) 设置页面标题(2) 设置头部信息① 插入作者② 插入关键字③ 插入说明④ 插入刷新102.2.2网页的文本的输入和属性设置1．插入文本(1) 直接输入(2) 复制粘贴2．文本的格式化手工格式化方式是在文本的【属性】面板中完成文字的格式化操作。用HTML标记格式化方式是以系统提供的HTML标记来格式化文本。CSS样式是一种对网页文档内容进行精确格式化的方法，它可以使用许多HTML样式不能使用的属性。112.2.2网页的文本的输入和属性设置在文本的【属性】面板中各项的意义如下。(1) 格式(2) 样式(3) 字体(4) 大小(5) 链接(6) 目标(7) 其他按钮等122.2.3网页其他元素的设置1．插入水平线2．插入日期 3．插入特殊字符132.2.4创建“八荣八耻准则”网页创建网页的步骤如下。(1)利用DreamweaverCS3创建一个新的网页。(2)在文档编辑区输入或者拷贝内容，如图2.39所示。(3)设置页面的背景。选择“修改”→“页面属性”命令。系统弹出【页面属性】对话框，如图2.40所示。142.2.4创建“八荣八耻准则”网页(4) 设置标题的字体、颜色以及对齐方式。通过上面的制作，页面的效果如图2.42所示。(5) 设置除标题之外的所有文字，格式为“段落”，字体大小为“14”。(6) 设置项目列表。选中从“首先是法律层面”到“第三是信念层面”的段落，从属性面板中选择一种项目列表，即可完成如图2.45所示的效果。(7) 保存文件。选择“文件”→“另存为”命令，在弹出的“另存为”对话框中，浏览到站点本地根文件夹下。填入文件名，单击保存按钮并退出。152.3图像和多媒体的使用打开光盘中的2-2.html，“红楼梦人物介绍”，效果如图2.46所示。通过该网页可以看出，在网页中同时插入图像和文字时，可以设置不同的对齐方式，以达到不同的显示效果。 162.3.1网页图片的插入和属性设置1．网页图像格式(1)GIF是图像交换格式的简称。(2)JPEG是联合图像专家组的简称。(3)PNG是便携网络图像的简称。2．插入图像(1)将光标放到要插入图像的位置。(2)选择“插入记录”→“图像”菜单命令，或是单击“插入”面板上“常用”选项卡的“图像”按钮，如图2.47所示，从下拉列表中选择【图像】，弹出【选择图像源文件】对话框，如图2.48所示。172.3.1网页图片的插入和属性设置(3) 在磁盘上选择需要的文件，在该对话框的URL文本框中，会显示当前选中文件的URL地址。(4) 在【相对于】下拉列表框中，可以选择文件URL地址的类型，选择“文档”则使用相对地址；选择“站点根目录”则使用基于根目录的地址。(5) 选中【预览图像】复选框，则可以在对话框上预览图像。(6) 选中图像文件后，单击【确定】按钮，即可将图像插入到文档中。182.3.1网页图片的插入和属性设置3．设置图像的属性选定图像，窗口正下方会出现图像【属性】面板，如图2.49所示。4．插入鼠标经过图像所谓“鼠标经过图像”，是一种在浏览器中查看并使用鼠标指针经过它时发生变化的图像。将光标放到要插入“鼠标经过图像”的位置。选择“插入记录”→“图像对象”→“鼠标经过图像”菜单命令，或单击“插入”面板“常用”选项卡的“图像”按钮，从下拉列表中选择【鼠标经过图像】，如图2.51所示。192.3.2创建“红楼梦人物介绍”网页1．新建网页输入标题和内容，设置页面的背景颜色，将该网页设置为如图2.53所示的样式。2．插入图像将光标移至“传说女娲炼石补天之时”的前面，选择“插入”→“图像”菜单命令，出现如图2.54所示的【选择图像源文件】对话框。选择插入“renwu1.jpg”的图片，单击【确定】按钮即可。重复上面的操作将3张图片分别加入到网页中，效果如图2.55所示。202.3.2创建“红楼梦人物介绍”网页3．调整图像的大小为了精确调整图像的大小，可以选中图像，在属性面板中，设置图片的【宽】和【高】，如图2.56所示。4．设置图片的对齐方式单击选定renwu1.jpg图片，选择属性面板中的对齐方式，选择“左对齐”；选定renwu2.jpg图片，选择“右对齐”；选定renwu3.jpg，选择“左对齐”，如图2.57所示。212.3.2创建“红楼梦人物介绍”网页5．图像和文字的相对位置默认值：使用浏览器默认的对齐方式，不同的浏览器会稍有不同。基线：图像的下沿与文字的基线水平对齐。顶端：图像的顶端与当前行中最高对象(图像或文本)的顶端对齐。居中：图像的中线与文字的基线水平对齐。底部：图像的下沿与文字的基线水平对齐。文本上方：图像的顶端与文本行中最高字符的顶端对齐。绝对居中：图像的中线与文字的中线水平对齐。绝对底部：图像的下沿与文字的下沿水平对齐。文字的下沿是指文字的最下边，而【基线】不到文字的最下边。左对齐：图像在文字的左边缘，文字从右侧环绕图像。右对齐：图像在文字的右边缘，文字从左侧环绕图像。222.4表格的应用打开光盘中2-3.html，利用表格制作的“金陵十二钗判词”网页效果如图2.58所示。通过2-3.html网页可以看出，表格可以规范化网页的内容，本节主要介绍表格的基本操作，包括调整表格的大小、设置表格的属性、设置表格单元格的属性，最后介绍如何利用细线表格方法制作2-3.html网页。232.4.1网页的页面布局1．网页布局类型网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型2．第一屏所谓第一屏，是指我们到达一个网站在不拖动滚动条时能够看到的部分。3．导航栏的位置4．什么样的布局最好常见的分栏结构还有三分栏、四分栏，如图2.60所示就是一个三分栏的结构。242.4.2表格的基本操作1．插入表格在网页制作时要新建一个表格，可以选择“插入记录”→“表格”命令，或单击“插入”栏的“常用”类型中的“插入表格”按钮，也可用Ctrl+Alt+T快捷键，此时网页编辑窗口中会弹出【表格】对话框，如图2.61所示。252.4.2表格的基本操作2．选定表格和单元格(1) 选定整个表格(2) 选定行或列(3) 选定单元格3．设置表格和单元格的属性(1) 设置表格属性(2) 设置单元格属性262.4.2表格的基本操作4．添加/删除行和列(1)通过表格“属性”面板增加与删除表格的行和列(2)通过“修改”菜单增加与删除表格的行和列5．单元格的合并与拆分(1)单元格合并操作(2)单元格拆分操作6．单元格的复制、粘贴、移动和清除7．表格的嵌套272.4.3表格的其他视图1．扩展视图在【插入】栏的【布局】选项卡中可看到【标准】和【扩展】两种视图按钮(见图2.67)。如图2.68所示为网页切换到“扩展视图”后看到的效果，在这种视图下，表格所有的边框线都以较粗的线条显示，表格中的元素都适当居中，这非常有利于文本光标的定位操作。282.4.3表格的其他视图2．布局视图如图2.69所示为将网页切换到“布局视图”下的效果。292.4.3表格的其他视图3．创建布局表格和布局单元格(1) 绘制布局表格(2) 绘制布局单元格(3) 移动布局表格和布局单元格4．设置布局表格和单元格属性(1) 设置布局表格的属性(2) 设置布局单元格属性302.4.4创建“金陵十二钗判词”网页1．新建网页2．插入第一个表格插入表格后选中整个表格，在属性面板中设置对齐方式为“居中对齐”，填充、间距和边框均为0，具体设置如图2.73所示。3．插入第一个表格4．合并单元格5．输入文字6．设置单元格7．保存网页312.5超级链接Dreamweaver提供多种创建超链接的方法，可创建到文档、图像、多媒体文件或可下载软件的链接，可以创建到文档内任意位置的任何文本或图像的链接，包括标题、列表、表、绝对定位的元素和框架中的文本或图像。打开光盘中的2-4.html，带有超级链接的“金陵十二钗图谱”网页效果如图2.76所示。322.5.1超链接概述1．超级链接的类型内部链接外部链接Email链接锚点链接2．链接路径(1) 绝对路径(2) 相对路径(3) 基于目录的路径3．创建超级链接首先在文档窗口中选中想作为链接的文本或图片，然后在属性面板链接组合框的空白处填入链接的路径，或者在“属性”面板中单击“链接”文本框左侧的文件夹图标，在弹出的“选择文件”对话框中，选定要链接的文档及采用哪种方式表达路径。332.5.2创建“金陵十二钗图谱”网页1．新建网页2．插入标题表格3．插入主体表格4．图片超级链接5．文字超级链接6．创建锚点链接(1) 创建命名锚记(2) 创建到命名锚记的链接342.6页面布局打开光盘中的2-5.html，利用AP元素制作的“史湘云”网页效果如图2.82所示。35