基础教程_Dreamweaver8
Dreamweaver8图文教程
D r e a m w e a v e r8图文教程-CAL-FENGHAI.-(YICAI)-Company One1Dreamweaver8图文教程一、Dreamweaver8 的操作环境在首次启动Dreamweaver8时会出现一个“工作区设置”对话框，在对话框左侧是Dreamweaver8的设计视图，右侧是Dreamweave 8的代码视图。
Dreamweaver8设计视图布局提供了一个将全部元素置于一个窗口中的集成布局。
我们选择面向设计者的设计视图布局。
在Dreamweave 8 中首先将显示一个起始页，可以勾选这个窗口下面的“不在显示此对话框”来隐藏它。
在这个页面中包括“打开最近项目”、“创建新项目”“从范例创建”3个方便实用的项目，建议大家保留。
新建或打开一个文档，进入Dreamweaver8的标准工作界面。
Dreamweaver8的标准工作界面包括：标题显示、菜单栏、插入面板组、文档工具栏、标准工具栏、文档窗口、状态栏、属性面板和浮动面板组。
1、标题显示栏启动Macromedia Dreamweave 8后，标题栏将显示文字Macromedia Dreamweave ，新建或打开一个文档后，在后面还会显示该文档所在的位置和文件名称。
2、菜单栏Dreamweave 8的菜单共有10个，即文件、编辑、视图、插入、修改、文本、命令、站点、窗口和帮助。
其中，编辑菜单里提供了对Dreamweaver菜单中[首选参数]的访问。
文件：用来管理文件。
例如新建，打开，保存，另存为，导入，输出打印等。
编辑：用来编辑文本。
例如剪切，复制，粘贴，查找，替换和参数设置等。
查看：用来切换视图模式以及显示、隐藏标尺、网格线等辅助视图功能。
插入：用来插入各种元素，例如图片、多媒体组件，表格、框架及超级链接等。
修改：具有对页面元素修改的功能，例如在表格中插入表格，拆分、合并单元格，对其对象等。
文本：用来对文本操作，例如设置文本格式等。
第1课 Dreamweaver 8基础
1.2 课堂教学
1.2.3 Dreamweaver 8的启动和主工作区 8的启动和主工作区 2.Dreamweaver 8的主工作区 8的主工作区 Dreamweaver 8的主工作区由插入工具栏,文档工具栏, 8的主工作区由插入工具栏 文档工具栏, 的主工作区由插入工具栏, 文档窗口,属性面板等部分组成. 文档窗口,属性面板等部分组成. (1) 插入工具栏 Dreamweaver 8的插入工具栏中默认显示的是"常用" 8的插入工具栏中默认显示的是 常用" 的插入工具栏中默认显示的是" 类的主要功能按钮.单击"常用"按钮会弹出一个下拉菜单, 类的主要功能按钮.单击"常用"按钮会弹出一个下拉菜单, 其中包含了插入工具栏中的其他功能菜单. 其中包含了插入工具栏中的其他功能菜单.用户选择不同的 分类,插入工具栏中包含的功能按钮也随之改变. 分类,插入工具栏中局 设计Web Web页面布局 当用户创建实体模型并设计页面的最终布局时, 当用户创建实体模型并设计页面的最终布局时, 8提供了很大的灵活性 提供了很大的灵活性. Dreamweaver 8提供了很大的灵活性.选择自己要使用的布局 方法,或综合使用Dreamweaver 8布局选项创建站点的外观 布局选项创建站点的外观. 方法,或综合使用Dreamweaver 8布局选项创建站点的外观. 利用Dreamweaver 8的层或CSS定位样式创建布局. 利用Dreamweaver 8的层或CSS定位样式创建布局. 的层或CSS定位样式创建布局 利用Dreamweaver 8的表格工具和布局模式,用户可以通过 利用Dreamweaver 8的表格工具和布局模式 的表格工具和布局模式, 拖动并重新安排页面结构来快速地设计Web Web页 拖动并重新安排页面结构来快速地设计Web页. 4.向页面添加内容 利用Dreamweaver 8,用户可以方便地在Web 利用Dreamweaver 8,用户可以方便地在Web页中添加多 Web页中添加多 种内容,包括文本,图像,颜色,影片以及其他形式的媒体. 种内容,包括文本,图像,颜色,影片以及其他形式的媒体.
《Dreamweaver-8基础与实例教程》省名师优质课赛课获奖课件市赛课一等奖课件
3.选中表格列
选中表格列旳措施与选中表格行旳措施类似，这里不再 赘述。
4.选中单元格
（1）在要选择旳单元格中按下鼠标左键，并拖，即可选中该单元格。
（1）表旳大小用width=“数值”和height=“数值”属 性阐明。前者为表宽，后者为表高，数值是为像素数 或占窗口旳百分比。
（2）定义表格旳粗细由border=“n”阐明，n取整数， 单位是像素（假如省略，则不带边框）。将border设 成不同旳值，可产生不同旳效果。
（3）表格间距用cellspacing="数值"表达，"数值"旳单 位是像素。
2.该对话框允许您指定表格旳排序方式，若要完毕“排序表格”对话框， 请执行下列操作：
排序按：能够拟定哪个列旳值将用于对表格旳行进行排序。 顺序：拟定是按字母还是按数字顺序以及是以升序（A 到 Z，小数字到大
数字）还是降序对列进行排序。 再按/顺序：拟定在不同列上第二种排序措施旳排序顺序。在“再按”弹
4.5 实例制作
4.5.1虚线表格 4.5.2几种特殊表格旳制作 4.5.3圆角表格 4.5.4利用表格排版制作页面
4.5.1虚线表格
在浏览Internet时，会发觉诸多网站排版所用旳表格 都是经过多种美工制作旳，非常漂亮，不但起到了网 页排版旳作用，而且在很大程度上美化了网页，使网 页看起来非常清爽、简洁。虚线表格就是其中一种。
其基本定义格式如下： <table>…</table> 定义表格； <tr>…</tr> 定义表行 <th>…</th> 定义表头 <td>…</td> 定义表项（单元格）
Dreamweaver 8 入门
Dreamweaver 8 入门一、基本概念1、网络是通过一定形式连接起来，可以互相通信的一组计算机；（1）因特网：由无数局域网和广域网共同组成的全球都使用TCP/IP通信协议的一个计算机系统；（IP、域名区分定位计算机）（2）万维网：World wide web是因特网上超文本系统，超文本文件通过一个称为“网页浏览器”的程序从服务器上（或服务器的网站上）获取网页并在电脑屏幕上显示出来；URL：在万维网上每个WEB页都有一个特定的地址称为统一资源定位器；二、Dreamweaver 8 的概述：一个非常优秀的网站设计和开发平台，使用可视化的环境编辑动态或静态网页；1、认识界面：1）启动：HTML静态网页2）工具栏：常用、布局……3）编辑窗口：设计窗口：提供所见即所得的编辑界面，接近网页显示实际效果；代码和设计窗口：（拆分）部分代码和设计视图；代码：以代码形式显示和编辑网页元素；4）标签选择器：选择对象、窗口尺寸……5）属性检查器：可显示对象的各种属性……6）面板组：提供某类功能的组合；三、标尺与网格：定位网页中元素的位置；查看——标尺—显示、网格四、设置网页属性：1）网页标题：用文字表示网页的性质；2）背景图像：颜色：外观、链接……五、添加文字：布局方式：自由布局，利用层；利用表格：可以将网页分不同区域，使网页中整齐有序，能具有统一风格和区域划分的形式，从而实现各元素的准确定位；六、创建表格：1）常用工具——插入表格插入——表格2）参数：行数、列数：七、作业：制作百度、自由布局；布局（二）一、服务器：是一个管理资源并为用户提供服务的计算机的软件；客户端：它是运行客户本地计算机中的程序，它必须是服务器相对应才能发挥它的作用。
网页：含有文字、图像文件等通过浏览器来阅读，网页合体称为网站，一个网站的开始页为首页.index.html网站：指因特网上，根据一定的规则，使用HTML等工具制作用于展示特定的内容的相关网页的集合；二、表格布局：布局表格：在布局模式下绘制网页的表格的范围；布局单元格：在布局模式下绘制所须的行或列的范围；三、框架网页制作：1）框架：可以把浏览器窗口分为几个子窗口，每个窗口都可以显示一个独立的文档；2）框架的组成：由两个主要部分构成：框架体和单个框架；3）框架集：查看——可视化助理——框架边框布局——框架4）框架显示的参数：_Blank：打开一个新的窗口，并链接在新窗口中_parent：框架的上一层窗口中显示_self：同一个框架内显示网页_top：清除框架，原窗口显示链接的网页；Mainframe：在主框架中显示网页；向网页中添加内容文字与图像一、网页的构成：1、站标：网站标志，作用：使人联想企业的形象；2、导航条：链接到网站内主要页面的超链接组合，引导浏览者轻松找到网页的各个页面；3、广告条：4、标题栏：网页内部各版块的标题栏，即内容的概括、内容分类清晰明了；5、按钮：被点击后，出现相应的操作；二、建站流程：1、网站需求分析：1）确定网站主要内容，性质、受众；2）规划网站的主要栏目；3）收集网页所用素材；2、设计和制作网站页面：设计：PS制作网页效果图；3、空间和域名申请：访问网站须上传到服务器，拥有专属的空间或域名；4、测试和发布网站：本地用IIS测试；用FTP或DW上传；5、网站的推广；三、创建文本：1）如何换段：敲回车；换行不换段：shift+敲回车；2）文本面板：（1）字体标签：添加字体：（2）设置缩进：（3）文本颜色：（4）字符样式：粗体、斜体……（5）对齐、列表……3）特殊符号的输入：空格、换行符；水平线；插入——HTML——四、插入图像的基本操作：1、在站点的image文件夹下：所有图像文件保存在一个文件内；2、图像格式：GIF无损压缩格式，支持256色，可设透明和动画；JPG JPEG 有损压缩格式；颜色真色彩；PNG 无损压缩格式，支持透明显示功能；3、插入图像占位符：作用：制作网页时，图像没有制作完成时，可插入一个图像占位符；操作：插入——图像占位符参数：尺寸、名称、颜色、替换文本：用鼠标指向对象时的说明文字；4、插入互动图像：作用：浏览网页时，当鼠标移至某一个图像时，图像会发生变化，移开鼠标时，图像恢复原状；操作：图像在Image文件夹下；大小一致；常用——鼠标经过图像；5、图像属性参数：名称、大小、源文件：图像所在目录及名称；热点工具：在图像之上建立一个区域，当鼠标点击时可以链接到目标网页；编辑：编辑图像，Fireworks进行操作，锐化、亮度……Css样式的应用一、网页服务器：1）它是负责提供网页计算机通过HTTP通信协议传给用户；2）它是提供网页服务的服务器；二、什么是Css样式：是指有关联的样式表，能够定义网页的文本、背景、边框等样式，作用：便于统一网站的风格，实际上含有多个文本属性和网页属性的集合；三、Css样式面板：shift+F111）附加样式表：可应用已保存的Css样式到当前文本；2）新建Css样式：3）编辑Css样式，修改已建立的Css样式；4）删除Css样式：5）套用Css样式：选择要应用样式的字——在列表中右击——套用；选择要应有样式的字——在属性栏中的样式选择——样式；四、新建Css样式：1）类型：类：应用文本范围或文本块的自定义；.开头命名；标签：重新定义特定的标签的外观；高级：为具体某个标签组合或有包含特定ID属性的标签定义格式；A:link：新打开网页进，链接所呈现的状态；A:hover：鼠标移上链接时显示的状态；A:visite：链接被访问过的所显示状态；A:activeL链接被激活时显示的状态；2）定义在：仅对该文档有效：对当前文档进行操作；五、应用：选择已定义的样式——套用：1）类型：字体、大小、样式、……2）背景：网页或网页元素的背景颜色；背景图像：重复……作业：在文档的背景上显示图片，此图片随窗口大小变化，并且始终居中；操作：标签：body；——背景：图片；重复：不重复；附件：固定；水平或垂直：居中；3）定义区块：可以标签和属性间的间距和对齐设置；4）边框：可以定义元素周围的边框设置；5）列表：项目符号大小和类型；6）定位：使用图层参数选择定义层的标签；7）扩展属性：设置过滤器和鼠标指针形状；光标：指针位于所控对象时改变指针的图像；过滤器：所控制对象应用特殊效果；向网页中添加其他内容1、使用Flash影片、按钮……使Flash背景透明的参数设置：Wmode值：transparent2、添加声音：1）关于音频的文件格式：Midi或mid ：乐器数字接口；wav ：品质高的声音；mp3：运动图像专家音频模式；2）操作：媒体——插件：如何音乐与打开网页不同步播放：插放声音参数：Loop trueAutostart true3、添加视频：不同方式或不同格式将视频添加网页上；4、行为的使用：1）行为：是DW预置的脚本语言，每个行为包括一个动作和一个事件，任何动作的都需要一个事件来激活。
Dreamweaver-8基础与实例教程省名师优质课赛课获奖课件市赛课一等奖课件
8.1.2 保存框架文件
保存框架旳全部文档旳详细操作环节如下。 1.选择“文件”菜单中旳“保存全部”命令，出现“保
存为”对话框，在整个框架集周围都出现粗边框，为 整个框架集命名。 2.单击“保存”按钮，粗边框切换到左边旳框架四面， 在“文件名”文本框中为其命名。按照此措施将全部 框架文件保存。
8.2 框架旳属性
8.4框架实例
8.4.1框架实例 8.4.2嵌入式框架实例
8.4.1框架实例
框架能够把页面提成相对独立旳几种部分，各个部分组 合在一起，就构成了这个页面。本节将经过一种制作 一种“精品课程”旳网站实例，来学习怎样在网页中 制作框架构造旳网页。
8.4.2嵌入式框架实例
嵌入式框架也称作iframe，嵌入式框架与框架网页类似， 它能够把一种网页旳框架和内容嵌入既有旳网页中。 下面来以“精品课程建设”网站为例向大家详细演示 一下嵌入式框架旳操作环节.
2.设置框架属性
在“属性”面板中，单击右下角旳“”展开箭头，查看 框架旳全部属性
8.2.2框架组属性
1.选择框架集：选择框架集时，单击框架边框即可，选 用旳全部框架边框呈虚线。
2.选择一种框架集后，属性面板如图
8.3为框架设置链接
要在一种框架中使用链接打开另一种框架中旳文档，必 须设置链接目旳，详细操作环节如下：
第8章 框架第8章 框架源自8.1 设置框架 8.2 框架旳属性 8.3 为框架设置链接 8.4 框架实例
8.1 设置框架
8.1.1 创建框架 8.1.2 保存框架文件
8.1.1 创建框架
在“插入”菜单中选择“HTML”选项，然后单击“框架” 子菜单中选择预定义旳框架集。
也能够经过“插入”工具栏插入菜单，在插入工具栏 “布局”类别中，单击“框架”按钮上旳下拉箭头， 然后选择预定义旳框架集。
Dreamweaver8中文实例教程
第1章网页设计基础1.1 认识网页1.2 网页设计的基本原则1.3 Dreamweaver 8简介1.4 Dreamweaver 8的参数设置【知识要点】→1．认识网页。
→2．网页设计的基本原则。
→3．Dreamweaver 8简介。
→4．Dreamweaver 8的参数设置。
【技能目标】→1．了解网页的基础知识。
→2．了解网页设计的基本原则。
→3．认识Dreamweaver 8的主界面。
→4．了解首选参数的设置。
1.1 认识网页1.1.1 什么是网页网页一般分为静态网页和动态网页。
静态网页是标准的HTML文件，扩展名为.html 或.htm。
动态网页在许多方面与静态网页是一致的。
根据采用Web应用技术的不同，动态网页文件的扩展名也不同。
在文件中使用ASP（Active Server Pages）技术时，扩展名是.asp，使用JSP（Java Server Pages）技术时，文件扩展名为.jsp 。
搜狐网页中国银行静态首页中国农业银行动态首页1.1.2 网页与网站的关系一个完整的网站是由多个网页构成的，这些网页是分别独立的，这些独立的网页通过超链接联系起来。
网站可以看做是许多网页的家，浏览者可以通过浏览器访问网站的地址后，读取这个网站内的网页。
网页是网站的基本信息单位，一个网站通常由众多的网页有机地组织起来，用来为网站用户提供各种各样的信息和服务，好比一栋大楼里的一个个房间。
1.1.3 常用的网页制作工具网页的设计制作一般分为三个阶段：一是设计，二是布局，三是动画的添加，复杂的还涉及脚本程序。
从设计角度来说，常用的应用软件有Photoshop、Fireworks等专业的图形图像设计软件。
1.1.4 网络基本术语1．域名2．HTTP协议3．FTP协议4．超级链接5．站点1.1.5 认识HTMLHTML全名是Hyper Text Markup Language，即超文本标记语言，是用来描述Internet服务器上超文本文件的语言。
第2章 Dreamweaver 8基础
• 2.1 页
学习天地” 【案例11】“Dreamweaver 8学习天地”网 案例11】 Dreamweaver 8学习天地 11
• 1．新建和打开网页文档 ． • （1）新建网页文档：单击“文件”→“新建”菜单命令，即可调出“新建文 新建”菜单命令，即可调出“ ）新建网页文档：单击“文件” 对话框。 档”对话框。 பைடு நூலகம் 从该对话框可以看出，利用它可以建立各种类型的文件。从“类别”列表框 从该对话框可以看出， 利用它可以建立各种类型的文件。 类别” 中选择“基本页”选项，然后选择“基本页”列表框中的“ 选项” 中选择“基本页”选项，然后选择“基本页”列表框中的“HTML选项” ， 选项 再单击【创建】按钮，即可新建一个空白的HTML网页文档。 网页文档。 再单击【创建】按钮，即可新建一个空白的 网页文档 • 另外，在“文档类型”下拉列表框中可以选择文件类型，单击【首选参数】 另外， 文档类型”下拉列表框中可以选择文件类型，单击【首选参数】 首选参数”对话框。 按钮可以调出 “首选参数”对话框。 • （2）打开网页文档：单击“文件”→“打开”菜单命令，调出“打开”对话 打开”菜单命令，调出“打开” ）打开网页文档：单击“文件” 在该对话框内选中要打开的HTML文档，单击【打开】按钮，即可将选 文档， 框。在该对话框内选中要打开的 文档 单击【打开】按钮， 定的HTML文档打开。 例如 ， 可打开前面编写的名字为 文档打开。 文档。 定的 文档打开 例如，可打开前面编写的名字为HTML1.HTML文档。 文档 • 另外，在“Macromedia Dreamweaver 8”对话框状态下，单击【打开】按钮， 另外， 对话框状态下， 对话框状态下 单击【打开】按钮， 也可以调出“打开”对话框。 也可以调出“打开”对话框。 • 2．保存和关闭文档 ． • （1）单击“文档”→“保存”菜单命令，可以原名字保存当前的文档。 保存”菜单命令，可以原名字保存当前的文档。 ）单击“文档” • （2）单击“文档”→“另存为”菜单命令，即可调出“另存为”对话框。利 另存为”菜单命令，即可调出“另存为”对话框。 ）单击“文档” 用该
第01章 Dreamweaver 8基础
第1章 Dreamweaver 8基础 章 基础
在过去,用户只有掌握了HTML(超文本标记语言)才能写出网页.如今,使用 Dreamweaver就可以快速地创建出具有精彩效果的动态网页.Dreamweaver是美国 Macromedia公司开发的集网页制作和网站管理于一身的网页制作软件.本章将主要 介绍有关网页的基础知识以及Dreamweaver 8的基本工作环境.
对齐方式 设置字体样式
创建项目 缩进量
中文版Dreamweaver 基础与上机实训 中文版Dreamweaver 8基础与上机实训
面板组
Dreamweaver 8中的面板被组织到面板组中.面板组中选定的面板 显示为一个选项卡.每个面板组都可以展开或折叠,并且可以和其他面 板组停靠在一起或取消停靠. 面板组还可以停靠到集成的应用程序窗口中,使用户能够很容易地 访问所需的面板,而不会使工作区变得混乱.
中文版Dreamweaver 基础与上机实训 中文版Dreamweaver 8基础与上机实训
1.2 Dreamweaver 8的工作环境
Dreamweaver 8的工作界面由文档窗口,工具栏,状态栏,上下文 菜单,"插入"工具栏和属性检查器等部分组成.启动Dreamweaver 8 后,其工作界面如图所示 .
网页的设计构思
在制作网页时,用户必须掌握网页的设计构思方法.这时需要认真 考虑网页的主题,网页的命名,网页标志,色彩搭配和字体等要素. 网页的主题 网页命名 网站标志 色彩搭配 字体
中文版Dreamweaver 基础与上机实训 中文版Dreamweaver 8基础与上机实训
网页的布局
在网页布局过程中,应该遵循的原则有:对称平衡,异常平衡,对 比,凝视和空白等.一般来说,网页的布局有下面几种常见的结构. π型结构布局 T型布局 "三"型布局 POP布局 Flash布局
第一章Dreamweaver8基本操作
课程体系及课程地位
讲解课程体系结构图，让学生熟悉本课程体系，说明本课程地位与 作用。 简单说明课程作用：在无html知识基础的前提下，能够使用DW8编 辑和制作网页。能够通过ATA的DW8证书考试的布局、表单的创建、设置图像、创建链接等等。
3.3 添加页面元素
页面元素
插入表格（高、宽、行、列），并设置表格（高、宽、 背景色），表格嵌套 插入图片 创建css样式（了解层叠样式表、掌握样式表的创建、编 辑和应用） 学生练习操作
布置作业
完成课本第一章，第1、2、4、5题的练习。
本门课程目标
学习和掌握DW8的常用功能 掌握DW8编辑和制作网页的流程和方法，能够使用DW8创建和 插入各种网页元素。
本章任务
熟悉Dreamweaver8的工作界面。 掌握Dreamweaver8的基本操作，包括创建站点、文档操作、添 加页面元素等
本门课程目标
学习和掌握DW8的常用功能 掌握DW8编辑和制作网页的流程和方法，能够使用DW8创建和 插入各种网页元素。
结合第一章第3题讲解dw8的基本操作65分钟31利用dw8创建站点15分钟创建并设置本地根文件夹定义站点学生练习操作33添加页面元素页面元素插入表格高宽行列并设置表格高宽背景色表格嵌套插入图片创建css样式了解层叠样式表掌握样式表的创建编辑和应用学生练习操作布置作业完成课本第一章第1245题的练习
第一章
演示和讲解DW8的工作界面，让学生对DW8的界面有初步的认 识，并熟悉DW8。 结合第一章第3题，讲解DW8的基本操作[65分钟] 3.1 利用DW8创建站点[15分钟] 创建并设置本地根文件夹 定义站点 学生练习操作
演示和讲解DW8的工作界面，让学生对DW8的界面有初步的认 识，并熟悉DW8。 结合第一章第3题，讲解DW8的基本操作[65分钟] 3.1 利用DW8创建站点[15分钟] 创建并设置本地根文件夹 定义站点 学生练习操作
第1章 Dreamweaver 8操作基础
第1章Dreamweaver 8操作基础Dreamweaver 8是专业级的网页编辑工具，利用它可以非常轻松地开发动态网页，用户只需了解基本的知识和操作技巧，就可以制作出比较复杂的动态页面。
本章重点介绍Dreamweaver 8的基本概念和操作方法，为后面的学习打下基础。
本章技术要点：* 了解Dreamweaver 8功能* 熟悉Dreamweaver 8页面* 掌握Dreamweaver 8基本操作1.1 Dreamweaver功能简介1. 操作方便快捷2. 能生成高效网页源代码3. 提供强大的动态网站功能4. 提供强大的扩展功能1.2 Dreamweaver 8操作环境1.2.1 标题栏1.2.2 菜单栏1.2.3 工具栏1.2.4 状态栏1.2.5 属性面板1.2.6 浮动面板1.3 Dreamweaver 8基本操作Dreamweaver 8支持目前流行的各种网页技术，使用它提供的工具和面板能轻松地设计各种网页。
1.3.1 输入文本和版式设计文本是网页的基本元素，在Dreamweaver 8文档编辑窗口的“设计”视图下可以自由输入文本也可以将其他窗口中的文本复制到文档编辑窗口中。
下面重点介绍特殊文本的输入方法。
1. 输入特殊字符2. 输入空格3. 输入日期目前，图像和多媒体在网页中的应用越来越多。
在网页中加入合适的图像和动画，能给浏览者留下深刻的印象。
插入图像和多媒体的方法基本相同，下面列出常用的两种方法。
* 选择“插入”|“图像对象”或者“插入”|“媒体”子菜单中选择相应的命令，即可插入所需要的对象。
* 在“插入”工具栏的“常用”选项中，单击“图像”按钮或者“媒体”按钮，在弹出的下拉菜单中选择相应的选项即可插入所需要的对象。
在插入的过程中，可能需要多个操作步骤，要求用户确定相关属性和指定对象源文件，因此在插入图像和多媒体之前应先制作好对象。
在Dreamweaver 8中，插入的图像包括4种对象。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
“插入”面板组上包括 7 个子面板，依次为“常用”、“布局”、“表单”、“文本”、“HTML”、“应用程序” 和“Flash 元素”。单击面板组名称右端的下拉按钮，打开下拉列表，如图 1-4 所示，在下拉列表中选择子 面板名称，即可打开相应的面板。 单击下拉列表中的“收藏夹”，可在其中添加网页制作时的一些常用对象。 单击下拉列表中的“显示为制表符”，“插入”面板组则以标签的形式显示，如图 1-5 所示。
图 1-16 “标签”面板组
图 1-17 “文件”面板组
这些面板组中的面板将在以后的章节中逐一介绍。 6．浮动面板组的操作
° 常用的浮动面板组的操作方法如下。 （1）展开和折叠浮动面板组 Dreamweaver 8.0 的每个浮动面板组都具有展开与折叠的功能，单击面板左上角的三角标记 即可展开与折 叠浮动面板。 （2）移动浮动面板组 将鼠标指向浮动面板组左上角的标签，当鼠标指针变成 4 个方向箭头的图标时，便可移动浮动面板组。利 用这种方法可将浮动面板组拖离浮动面板组停靠区，或将浮动面板组拖入浮动面板组停靠区。 （3）重新组合浮动面板
5
图像、选择较小的对象及查看较小的文本。使用手形工具，可以在“设计”视图下拖曳页面以便查看，如 图 1-9 所示。
图 1-9 缩放工具和手形工具
（4）标尺和辅助线 选择“查看”｜“标尺”｜“显示”命令，可在文档编辑窗口显示标尺，从而方便设计时的定位。 辅助线是从标尺拖动到文档上的线条，它们有助于更加准确地放置和对齐对象。使用辅助线还可以测量 页面元素的大小，或者模拟 Web 浏览器的重叠部分（可见区域），如图 1-10 所示。
面板组是组合在一个标题下面的相关面板的集合。面板组中选定的面板显示为一个选项卡。每个面板组都 可以展开或折叠，并且可以和其他面板组停靠在一起或取消停靠。浮动面板是非常重要的网页处理辅助工 具，它具有随着调整即可看到效果的特点。由于它可以方便地拆分、组合和移动，所以也把它叫做浮动面 板。 Dreamweaver 8.0 默认的面板组有以下 4 个。 （1）CSS 面板组 CSS 面板组包含“CSS 样式”和“层”两个浮动面板，主要提供交互式网页设计和网页格式化的工具，如 图 1-14 所示。 （2）“应用程序”面板组 “应用程序”面板组包含“数据库”、“绑定”、“服务器行为”、“组件”4 个浮动面板，主要提供动态网页 设计和数据库管理的工作，如图 1-15 所示。
1.1 初识 Dreamweaver 8.0
在使用 Dreamweaver 开发网站之前，首先需要熟悉一下 Dreamweaver 的启动及设计环境。俗话说“工欲善 其事，必先利其器”，通过本节可以使大家了解 Dreamweaver 8.0 这个神奇网页制作软件的“庐山真面目”， 会使后面的学习变得更加轻松，上手更加迅速。
1.1.1 Dreamweaver 8.0 的启动
步骤 ① 单击任务栏“开始”按钮，选择“程序”命令。 ② 将光标向右移动，选择 Macromedia 文件夹。 ③ 将光标再向右移动，单击 Macromedia Dreamweaver 8.0 图标，Dreamweaver 8.0 就被启动了。 Dreamweaver 8.0 根据设计人员和编码人员的需求自带了 2 种配置，此外也还可以构建自定义工作区。首次 启动 Dreamweaver 8.0 时，系统会弹出一个“工作区设置”界面，可以从中选择一种工作区布局，如图 1-1 所示。“设计器”工作区适合于一般的用户，“编码器”工作区指的是代码编辑界面，适合于具有较高水平 网页编程技术的用户。在这里可以选择“设计器”工作区。 如果在操作过程中想改变工作区，可单击“窗口”｜“工作区布局”命令，从中选择相应的工作区，如图 1-2 所示。
选中浮动面板组中某个选项，单击浮动面板组右上角的按钮 ，打开下拉式菜
9
单，并在级联菜单中选择与当前浮动面板组合的浮动面板组，可重新组合浮动 面板，如图 1-18 所示。
1.2 创建本地站点—我的足球网
1.2.1 案例综述
一般来说，用户所浏览的网页都存储在 Internet 服务器上的。所谓 Internet 服务器，就是用于提供 Internet 服务的计算机，对于 WWW 浏览服务来说，Internet 服务器主要用于存储用户所浏览的 Web 站点和页面。 通常创建一个网站，总是先在本地计算机上进行开发和调试，待完成后再上传到 Internet 服务器上。因此， 在本地计算机上，应该首先创建一个本地站点，用以进行网站的开发和管理。本例将创建一个简单的站点， 从中介绍本地站点的创建及站点中的文件管理。
3 图 1-4 “插入”栏中的选项
2．文档工具栏
图 1-5 “插入”栏以标签显示
在文档工具栏中设有按钮，使用这些按钮可以在文档的不同视图间快速切换，这些视图包括“代码”视图、 “设计”视图、同时显示“代码”视图和“设计”视图的拆分视图，如图 1-6 所示。“文档”工具栏中还包 含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。
2
ቤተ መጻሕፍቲ ባይዱ
图 1-1 “工作区设置”界面
标题栏 菜单栏
插入面板组
文档工具栏
标签状态栏
属性面板
图 1-2 改变工作区
面板组
文件面板 文档编辑窗口
图 1-3 Dreamweaver 8.0 工作界面
将鼠标指针移到窗口、面板或其他地方，单击鼠标右键，弹出一个快捷菜单。在快捷菜单中列出了当前状 态下最可能要进行的操作命令。
图 1-6 文档工具栏
文档工具栏中主要的工具按钮功能如下。 没有浏览器/检查错误按钮 —单击该按钮可以在下拉菜单中实现检查浏览器支持、查找错误及设置目 标浏览器的版本等功能。 验证标记按钮 —可以验证当前文档或选中的标签。 文件管理按钮 —单击该按钮可以在下拉菜单中实现对文件只读属性的编辑、本地站点和服务器端文件 的上传和下载、网页文件的自动检查及方便团队工作时的设计备注等菜单命令。 在浏览器里预览/调试按钮 —单击该按钮可以在下拉菜单中实现网页预览（可按 F12 键代替），纠正 JavaScript 的错误及选择浏览器等。 刷新设计视图按钮 —用于刷新本地和远程站点的目录列表。 视图选项按钮 —单击该按钮可以在下拉菜单中实现一些人性化的功能，如表格边框、层边框等可视化 助理的显示，文件头、网格、标尺的显示等。 可视化助理按钮 —可以使用不同的可视化助理来设计页面。
4．文档编辑窗口 网页文档编辑窗口是 Dreamweaver 8.0 的主工作区，在这里可以进行网页的设计制作。 （1）文档编辑窗口的缩放 网页文档编辑窗口的大小可以通过鼠标拖曳编辑区右边框来调整，或单击编辑区右边框线上的按钮，完成 最大化或还原网页编辑区的操作，如图 1-8 所示。
图 1-8 最大化文档窗口按钮
1
第 1 章 网页设计基础
Dreamweaver 8.0 是 Macromedia 公司推出的目前最新版本的网页设计软件，站点管理和页面设计是它的两 大核心功能，它采用多种先进的技术，易学、易用。只要掌握初步的知识，再加上自己的创意，即可制作 出独树一帜的网页。 本章重点介绍在 Dreamweaver 8.0 中如何创建站点并进行站点管理，从而为下一步开发网站做好准备，同 时，通过本章的学习使读者熟悉 Dreamweaver 8.0 界面及运行环境。
图 1-13 代码折叠后
若要折叠代码，请执行以下操作。 ① 选择要折叠的代码。 ② 选择“编辑”｜“代码折叠”｜“折叠所选”，或单击所选代码旁边的折叠（+或-）按钮。 若要折叠所选代码之外的代码，请执行以下操作。 ① 在“代码”视图中选择代码。 ② 选择“编辑”｜“代码折叠”｜“折叠外部所选”。
5．面板组
1.1.2 Dreamweaver 8.0 的工作环境
启动 Dreamweaver 8.0，双击打开任意一个网页文件，此时 Dreamweaver 8.0 工作界面如图 1-3 所示。可 以看出 Dreamweaver 8.0 窗口是一个标准的 Windows 窗口，它也有标题栏、菜单栏和快捷菜单。
3．“属性”检查器
“属性”检查器可以检查和编辑当前选定页面元素（如文本和插入的对象）的最常用属性。“属性”检查 器中的内容根据选定的元素会有所不同。例如，如果选择页面上的一个图像，则“属性”检查器将改为显
4
示该图像的属性，如图 1-7 所示。
图 1-7 图像“属性”检查器
在默认情况下，“属性”检查器位于工作区的底部，但是如果需要的话，可以将它停靠在工作区的顶部。 单击“属性”字样或左端的下拉按钮，“属性”面板可折叠起来，再次单击面板即可展开。
7
缩进代码按钮 —将选定内容向右移动。 凸出代码按钮 —将选定内容向左移动。 格式化源代码按钮 —将先前指定的代码格式应用于所选代码，如果未选择代码块，则应用于整个页面。 （6）代码折叠 通过隐藏和展开代码块，可以重点显示想要查看的代码，如图 1-12 和图 1-13 所示。
图 1-12 代码折叠前
8
图 1-14 CSS 面板组
图 1-15 “应用程序”面板组
（3）“标签”面板组 “标签”面板组包含“属性”和“行为”两个浮动面板，主要方便代码的调试，如图 1-16 所示。 （4）“文件”面板组 “文件”面板组包含“文件”、“资源”和“代码片断”3 个浮动面板，主要提供管理站点的各种资源，如 图 1-17 所示。
（2）文档编辑窗口的标题栏 当文档窗口有一个标题栏时，标题栏显示页面标题，并在括号中显示文件的路径和文件名。如果做了更改 但尚未保存，Dreamweaver 将在文件名后显示一个“*”号。如果文档窗口处于最大化状态时，没有标题栏， 在这种情况下，页面标题及文件的路径和文件名显示在主工作区窗口的标题栏中。 此外，当文档窗口处于最大化状态时，出现在文档窗口区域顶部的选项卡显示所有打开文档的文件名。若 要切换到某个文档，可以单击相应的选项卡。 （3）缩放工具和手形工具 此为 Dreamweaver 8.0 新增的辅助工具，可以更好地控制设计。使用放大工具可以有帮助于更容易地对齐