第三章Dreamweaver8概述
使用Dreamweaver进行网页设计的实用技巧
使用Dreamweaver进行网页设计的实用技巧第一章：简介Dreamweaver是一款非常流行的网页设计工具，广泛应用于网页开发行业。
它提供了丰富的功能和工具，使得网页设计变得更加高效和便捷。
本章将介绍Dreamweaver的基本功能和使用方法。
第二章：创建新网页Dreamweaver可以轻松地创建新的网页。
首先，点击“文件”菜单，然后选择“新建”。
在弹出的对话框中，选择网页的类型和所需的模板。
输入网页的名称和保存位置。
接下来，可以通过拖放方式添加文本、图像和其他元素。
第三章：编辑网页内容Dreamweaver提供了强大的编辑工具，可以轻松编辑网页的内容。
通过双击网页中的文本或图像，可以直接进行编辑。
还可以使用“视图”菜单中的“代码视图”查看和编辑HTML和CSS代码。
此外，Dreamweaver还提供了智能提示和自动完成功能，帮助用户更快速地编辑网页内容。
第四章：样式和布局设计Dreamweaver提供了丰富的样式和布局设计工具，帮助用户创建美观的网页。
可以使用“CSS样式”面板添加样式，并对文本、图像等元素进行格式化。
还可以使用网格系统和定位工具来设计网页布局。
通过拖放元素和调整属性，可以实现更具吸引力的页面设计。
第五章：导航设计一个好的导航设计可以提升用户体验，并使网站更易于导航。
Dreamweaver提供了多种导航设计工具，如导航栏、下拉菜单等。
可以使用这些工具轻松地创建导航栏，并将其链接到其他页面。
还可以设置导航栏的样式和交互效果，使得导航更加直观和易用。
第六章：响应式设计随着移动设备的普及，响应式设计已成为网页设计中的重要方面。
Dreamweaver提供了一些有用的工具和功能，用于创建响应式网页。
可以使用媒体查询和自适应布局来适应不同屏幕大小和分辨率。
此外，Dreamweaver还提供了移动设备模拟器，可以在不同设备上测试和预览网页的展示效果。
第七章：网页优化网页加载速度是用户体验和搜索引擎优化的关键因素。
Dreamweaver 8入门
– – 11第2章 Dreamweaver 8入门Dreamweaver8是美国Adobe 公司最新开发的优秀的网页制作工具，可以方便、快捷地制作出充满丰富动感的网页。
本章主要介绍Dreamweaver8的工作环境，网页制作的基本方法：包括文本、图像和动画的插入，超级链接的创建，表格、层和框架以及表单的使用等。
2.1 Dreamweaver 8的工作环境2.1.1 选择工作区布局安装完Dreamweaver 8后，第一次启动时，会弹出一个“工作区设置”的对话框，如图2-1所示，让用户选择一种工作区布局，包括“设计器”和“编码器”两个选项，它们分别面向设计者和代码编写者。
图2-1 “工作区设置”对话框本书是在设计者布局中进行介绍的，建议用户选择“设计器”选项进入，进入后会出现如图2-2所示的工作区布局。
图2.2 设计者工作区布局Dreamweaver 8入门– – 122.1.2 软件起始页的用法启动Dreamweaver 8之后，进入起始页，如图2-2所示，点击向右的箭头，可将右边的面板隐藏起来。
也可以点击向下的箭头，将属性面板隐藏起来。
起始页面分为左中右3栏，左侧一栏显示最近曾经打开过的文档；中栏是创建新的项目，可以创建Html 的文档，也可以创建一些动态文档，比如ASP VBScript 、JavaScript 、PHP 等，也可以直接创建站点；右侧是从范例创建，这里提供了Dreamweaver 8已经做好的基础范例，比如已经做好的框架集和一些入门页面等等。
当Dreamweaver 本身无法完成一些功能的时候，可以用Dreamweaver Exchange 从网上下载一些插件来实现。
左下角是Dreamweaver 8的一些学习资料，可以帮助大家更好的学习Dreamweaver 8这个软件。
如果计算机联网的话，右下角的信息是不断变化的，显示一些最新的信息。
如果不想使用这个起始页，而是手工打开一些文档的话，可以将起始页关闭。
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概述
HTML语言使用一些约定的标记，对 WWW上的各种信息进行标记，浏览器会 自动根据这些标记在屏幕上显示出相应的 内容，而标记符号不会在屏幕上显示出来。 自从1990年它首次用于网页制作后，几乎 所有的网页都是由HTML语言或以其他语 言镶嵌在HTML语言（如JavaScript语言 等）中的语言编写的。
如果需要链接的文件在网络上，则需 要网络链接。网络链接需要知道网址 （URL）。
（8）<A HREF="被链接的网页的文 件名"><IMG SRC="图像或动画的文 件名"></A>：用于在网页内插入图 像或动画链接。
用图像或动画链接就是在单击图像或 动画后，即可弹出与之链接的网页文件。 加入了链接的图像或动画会自动产生一个 外框，以示与一般的图像或动画的区别。
表1-1-2 相对路径名 HREF=“HTML1.htm”
相对路径名的写法及其含义 含 义
HTML1.htm是当前目录下的文件名
HREF=“HTML/HTML1.h HTML1.htm是当前目录中HTML目录下名字为 tm” HTML1.htm的文件 HREF=“HTML/HTML1/H HTML1.htm是当前目录中HTML/HTML1目录下名 TML1.htm” 字为HTML1.htm的文件 HTML1.htm是当前目录的上一级目录下名字为 HREF=“../HTML1.htm” HTML1.htm的文件 HREF=“../../HTML1. HTML1.htm是当前目录的上两级目录下名字为 htm” HTML1.htm的文件
链接也叫做超文本链接。在网页中加 入超文本链接，就是通过单击一部分文字、 图像或图像中的一个区域，即可弹出另一 个网页或本网页的另一部分内容。此处介 绍单击一个网页文件中的部分文字，即可 链接到另一个网页文件（即弹出另一个网 页）。
Dreamweaver8 ppt教程 第03章
3.4文档的基本操作
在Dreamweaver 8中提供很便捷的文档的打
开、关闭、保存操作，指定页面的标题、 背景图像、背景颜色以及网页文本和链接 的颜色。
3.4.1打开和关闭网页 3.4.2保存网页
3.4.3设置文档的页面属性
1.5实战演练
在本节将一些学习如何创建一个名称 为【乐乐网站】的网站，并在该站点中创 建一个名称为index.html的主页文档和用于 存放网页图片的images文件夹。最后将 index.html文档指定为该网站的首页面。
3.1认识站点 3.1.1了解站点的基本概念 3.1.2规划站点结构 3.2Dreamweaver 8站点的创建和管理 3.2.1创建本地站点 3.2.2打开现有站点 3.2.3编辑站点 3.2.4删除站点 3.2.5复制站点 3.2.6导出和导入站点 3.3操作站点文件 3.3.1创建文件夹 3.3.2创建文件 3.3.3文件的移动、复制和粘贴 3.3.4设置主页 3.3.5编辑站点文件 3.3.6刷新本地站点文件列表 3.4文档的基本操作 3.4.1打开和关闭网页 3.4.2保存网页 3.4.3设置文档的页面属性 3.5实战演练 3.5.1 范例1 创建【乐乐网站】站点 3.5.2 范例2 创建站点文件 3.6 思考与练习
3.5.1 范例1 创建【乐乐网站】站点 3.5.2 范例2 创建站点文件
3.6 思考与练习
1. 简答题 （1）简述站点的基本概念？ （2）如何规划站点结构？ （3）叙述一下定义站点的一般步骤是什么？ 2. 操作题 （1）做一份网站的计划书，计划书中说明网站的服 务群体、网站的主题并详细列出首页所包含的内 容。 （2）根据计划书画出网站的设计草图（至少包括二 级分支）。 （3）根据结构草图，在本地的计算机上创建一个虚 拟网站，包括所有的空白文档和文件夹。
第3章Dreamweaver8网页制作
3.1 Dreamweaver8简介 3.2 网页文本及媒体的应用 3.3 表格的应用 3.4 布局表格的应用 3.5 超级链接 3.6 框架的应用 3.7 CSS样式的应用 3.8 层和行为的应用 3.9 时间轴的应用 3.10 表单的应用 3.11 模板的应用
3.1
本节知识
认识Dreamweaver8
在需要添加特殊字符的位置单击鼠标，设置插入点。 选择插入栏的“文本”类别（如图所示），单击最右边的
下三角
按钮，在弹出的下拉菜单中选择“其他字符”命令，弹出如图所示的 对话框，可在其中选择要输入的对象。
3.2.2
文本的编辑操作
也可通过软键盘来输入“★、■、※、【】”等特殊字符符号。
3.2.2
选择“关闭”命令。
在Dreamweaver 8窗口中选择“文件”|“退出”菜单命令。 在当前窗口为Dreamweaver 8工作界面时，按“Alt+F4”键退出
Dreamweaver 8。
3.1.3 Dreamweaver 8工作界面介绍
知识要点
插入栏
文档工具栏 文档编辑区 网页标签 扩展按钮 浮动面板组 属性面板 标签选择器 水平标尺和垂直标尺
3.1.1
知识要点
系统要求
Dreamweaver8的认识
在安装Dreamweaver8之前请确保硬件和软件环境满足以下条件： ① Intel Pentium III 600MHz或更快的处理器和等效的处理器 ② Windows 2000、Windows XP或Windows Server 2003 ③ 至少128MB的可用内存（建议采用256MB内存或更大内存） ④ 能达到1024×768像素分辨率或更高分辨率的监视器
第三章 Dreamweaver8 网页设计PPT课件
1.属性面板
上一页
网页编辑窗口下面是“属性面板”, 用
来显示和调整页面对象的属性，根据鼠标
下一页
所选中对象的不同，“属性面板”界面会
最后页 有差异，用户可以分别对不同的对象进行
设置
退出
2.浮动控制面板组
本章内容
01.08.2020
14
3.1 Dreamweaver 8简介
3.1.8 网页文件的创建与保存
15．熟练运用Dreamweaver 8创建自己个人主页。
01.08.2020
3
本章内容
第一页
Dreamweaver 8简介
上一页
站点的建立与管理
下一页
页面设计
最后页
退出
01.08.2020
4
3.1 Dreamweaver 8简介
本章案例的小型个人网站是利用 第一页 Dreamweaver 8设计的，在设计前首先要
9．掌握如何在Dreamweaver 8中使用层；
10．掌握如何在Dreamweaver 8中使用框架；
最后页 11．了解如何在Dreamweaver 8中创建和使用样式表；
12．了解如何在Dreamweaver 8中使用模板与库；
13．掌握如何在Dreamweaver 8创建表单；
退出 14．了解如何在Dreamweaver 8中使用行为与时间轴；
3.1.6 状态栏
第一页
标签选择器：文档区下部有一个如下 上一页 图所示的区域，其中左半部分文字（如
“<body>”）表示当前光标所在区域的 下一页 HTML标记，单击可以选定这个HTML标记
包括的区域。
最后页
退出
01.08.2020
1-认识Dreamweaver 8
项目一 认识Dreamweaver 8 认识Dreamweaver
了解Dreamweaver 任务一 了解Dreamweaver 8 任务二 Dreamweaver 8的安装与启动 8的安装与启动 8的界面概述 任务三 Dreamweaver 8的界面概述
若干网页通过超级链接的形式组织在一起的一个逻辑上的整体， 若干网页通过超级链接的形式组织在一起的一个逻辑上的整体， 网页包含一网站中。 网页包含一网站中。 一个网站中的网页数 >=1 根据网页能否在服务器端运行，把网页分为静态和动态两种。 根据网页能否在服务器端运行，把网页分为静态和动态两种。
静态网页：纯粹用 语言编写的网页， 静态网页：纯粹用html语言编写的网页，不能在服务器端运行。 语言编写的网页 不能在服务器端运行。 其特点有： 其特点有： 1、每个网页都有一个固定的 ，且以 、每个网页都有一个固定的url，且以htm、html、shtml、xml等常见形 、 、 、 等常见形 式为后缀。 式为后缀。 2、发布在服务器上的静态网页是保存在服务器上的文件，每个网页都是 、发布在服务器上的静态网页是保存在服务器上的文件， 一个独立的文件。内容相对稳定，容易被搜索引擎检索。 一个独立的文件。内容相对稳定，容易被搜索引擎检索。 3、没有数据库支持，制作和维护需要的工作量较大。 、没有数据库支持，制作和维护需要的工作量较大。 4、交互性相对较差。 、交互性相对较差。 静态网页是网站建设的基础。 静态网页是网站建设的基础。 动态网页：即采用动态网站技术动态生成的网页，能在服务器端运行， 动态网页：即采用动态网站技术动态生成的网页，能在服务器端运行，其 特点有： 特点有： 1、以数据库为基础 、 2、可以实现的功能较多，如用户注册、登陆、在线调查、用户管理、订 、可以实现的功能较多，如用户注册、登陆、在线调查、用户管理、 单管理、站内搜索、歌曲下载、软件下载、即时更新新闻、 单管理、站内搜索、歌曲下载、软件下载、即时更新新闻、可以留言或书 写评论等。 写评论等。 3、不是独立存于服务器上的网页文件，只有当用户请求服务器时才返 、不是独立存于服务器上的网页文件， 回一个完整的网页。 回一个完整的网页。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
3.2 Dreamweaver8的界面元素介绍 Dreamweaver8的界面元素介绍
• 起始页对话框 • 窗口布局
起始页对话框
1
3 2
窗口布局
标题栏 菜单栏 插入工具栏 文档工具栏
文档窗口
面板组
属性面板
3.3
获取帮助 获取帮助
按F1键 F1键 选择“帮助”菜单 选择“帮助”
3.4
•
创建本地站点
要测试URL， 要测试URL，只有测试成功才能访问网页 URL
没有远程服务器
站点是存储所有的web站点网页文件和 是存储所有 站点网页文件 站点是存储所有的web站点网页文件和资源 文件的地方 的地方。 文件的地方。 使用Dreamweaver时，首先要建立站点 使用Dreamweaver时 首先要建立站点 Dreamweaver 要建立 站点需要有一个名字并指定站点根目录 站点需要有一个名字并指定站点根目录 需要有一个名字并指定站点
• •
站点名字任取，使用英文名。 站点名字任取，使用英文名。 任取 URL部分 如果在web服务器在本机上， 部分， web服务器在本机上 URL部分，如果在web服务器在本机上，可不设置
IIS默认网站的根目录为e:\inetpub\ IIS默认网站的根目录为e:\inetpub\wwwroot 默认网站
• •
在Dreamweaver中建立站点要考虑以下因素： Dreamweaver中建立站点要考虑以下因素： 要考虑以下因素
1. 站点中是否包含服务器端运行的网页 站点中是否包含服务器端运行的网页 是否包含 （如asp，jsp） asp，jsp） Dreamweaver与web服务器软件 服务器软件（ IIS） 2. Dreamweaver与web服务器软件（如IIS） 是否安装在同一台机器 是否安装在同一台机器 安装在同一
如果web服务器在本机上 可选择“ 如果web服务器在本机上，可选择“无” web服务器
站点中包含服务器端运行的网页 站点中包含服务器端运行的网页 包含
• • IIS中必须开启一个网站 IIS中必须开启一个网站 中必须开启 站点目录必须设置为已开启网站根目 站点目录必须设置为已开启网站根目 必须设置 其下的某一个目录。 录或其下的某一个目录。
第三章
3.1 3.2 3.3 3.4
Dreamweaver8概述 Dreamweaver8概述
网页中的基本元素 Dreamweaver8 Dreamweaver8的界面元素介绍 获取帮助 创建本地站点
退出
3.1 网页中的基本元素 网页中的基本元素
• • • • • • • 文本 图像（gif，jpeg，jpg，png格式） 图像（gif，jpeg，jpg，png格式） 格式 多媒体（wav，mp3，midi，rm，ra，avi，mov， 多媒体（wav，mp3，midi，rm，ra，avi，mov， mpeg） mpeg） 超级链接 表单 导航栏 其他常见元素 例子
设置： 设置：
1. 站点名称 2. 站点目录位置
• •
站点名字任取，使用英文名。 站点名字任取，使用英文名。 任取 URL部分 如果在web服务器在本机上， 部分， web服务器在本机上 URL部分，如果在web服务器在本机上，可不设置
站点根目录名称可以与站点名称不同 站点根目录名称可以与站点名称不 可以与站点名称
我们只考虑Dreamweaver和IIS安装在同一台机器 我们只考虑Dreamweaver和IIS安装在同一台机器 Dreamweaver
站点中没有包含服务器端运行的网页 站点中没有包含服务器端运行的网页 没有包含
• • 站点目录可以设置在任何位置 站点目录可以设置在任何位置 可以设置在任何 可以不需要web服务器 可以不需要web服务器 不需要web