通过Dreamweaver.CS3学习HTML+DIV+CSS教学PPT第22章 DIV+CSS
合集下载
Dreamweaver-cs-基础与实例教程第2章PPT课件
•14
2.3.3 重新编辑和删除CSS样式
首先在CSS样式面板中选择一种不需要的样式，然后单 击“编辑样式”按钮，就可以重新编辑CSS样式了；如 果单击“删除CSS规则”按钮，就可以删除“CSS 样式” 面板中的所选样式，并从应用该规则的所有元素中删 除格式。
•15
2.3.4 应用CSS样式
定义了CSS样式后，可以将这些CSS样式应用于网页中 的文本、图像、Flash等对象。具体的方法如下。
•21
3.外观(Layout)设置 （1）滚动文字对齐方式align 基本语法： <marquee align="对齐方式">滚动文字</marquee> 对方方式=top、middle、bottom，对齐上沿、中间、下
沿。 （2）滚动背景颜色属性bgcolor 在滚动文字的后面，可以添加背景颜色。 基本语法： <marquee bgcolor="color_value">滚动文字</marquee>
•7
2.2 制作一个简单的网页
在认识了Dreamweaver之后，接下来我们将利用文字和 图片，完成“数学与计算机”系网站主页的内容，学 习在Dreamweaver中输入并设置文字格式的基本操作， 完成效果如图所示。
•8
2.3 CSS样式
2.3.1 创建CSS样式 2.3.2 将外部样式表导入到当前文档 2.3.3 重新编辑和删除CSS样式 2.3.4 应用CSS样式
•19
（2）滚动方式属性behavior 通过这个属性能够设定不同方式的滚动文字效果。如滚
动的循环往复、交替滚动、单次滚动等。 基本语法： <marquee behavior="value">滚动文字</marquee> （3）滚动循环属性loop 通过这个属性能够让文字滚动循环进行。 基本语法： <marquee loop="次数">滚动文字</marquee>
2.3.3 重新编辑和删除CSS样式
首先在CSS样式面板中选择一种不需要的样式，然后单 击“编辑样式”按钮，就可以重新编辑CSS样式了；如 果单击“删除CSS规则”按钮，就可以删除“CSS 样式” 面板中的所选样式，并从应用该规则的所有元素中删 除格式。
•15
2.3.4 应用CSS样式
定义了CSS样式后，可以将这些CSS样式应用于网页中 的文本、图像、Flash等对象。具体的方法如下。
•21
3.外观(Layout)设置 （1）滚动文字对齐方式align 基本语法： <marquee align="对齐方式">滚动文字</marquee> 对方方式=top、middle、bottom，对齐上沿、中间、下
沿。 （2）滚动背景颜色属性bgcolor 在滚动文字的后面，可以添加背景颜色。 基本语法： <marquee bgcolor="color_value">滚动文字</marquee>
•7
2.2 制作一个简单的网页
在认识了Dreamweaver之后，接下来我们将利用文字和 图片，完成“数学与计算机”系网站主页的内容，学 习在Dreamweaver中输入并设置文字格式的基本操作， 完成效果如图所示。
•8
2.3 CSS样式
2.3.1 创建CSS样式 2.3.2 将外部样式表导入到当前文档 2.3.3 重新编辑和删除CSS样式 2.3.4 应用CSS样式
•19
（2）滚动方式属性behavior 通过这个属性能够设定不同方式的滚动文字效果。如滚
动的循环往复、交替滚动、单次滚动等。 基本语法： <marquee behavior="value">滚动文字</marquee> （3）滚动循环属性loop 通过这个属性能够让文字滚动循环进行。 基本语法： <marquee loop="次数">滚动文字</marquee>
Dreamweaver网页制作实训教程(CS3版)教学课件
Fireworks：主要用于制作网页图像、网站标志、GIF 动画、图像按钮与导航栏等。 Flash：主要用于制作矢量动画，如广告条、网站片 头动画、动画短片、MTV等。 Photoshop：Adobe公司出品的一个优秀而强大的图形 图像处理软件，起初它的应用领域主要是平面设计而 不是网页设计，但是它所具有的强大功能完全涵盖了 网页设计的需要（除了多媒体）。
1.3.4 测试和发布网站
有了空间和域名后，就可以测试并发布网站了， 网站测试一般包括服务器稳定和安全测试、程序 和数据库测试、网页兼容性测试等。
1.3.5 网站推广
1. 注册到搜索引擎 2. 交换广告条 3. 宣传 4. 网络广告 5. 报纸、杂志
第2章 Dreamweaver CS3入门
初识Dreamweaver CS3 网站创建与管理 页面总体设置
2.2.3 “文件”面板的应用
利用“文件”面板，可以高效地管理站 点。实际操作中，在定义站点后，我们 通常是利用该面板来创建、重命名或打 开站点中的网页文档或文件夹。
在定义了多个站点 后，可利用该下拉 列表选择要进行操 作的站点
2.3 页面总体设置
2.3是检索网页的整个内容，而是只检索 网页中的关键字和说明文本，如果想要自己的 网页能够被搜索引擎检索到，则最好把关键字 设定为人们经常使用的词语。
选择目标 文件所在 文件夹
单击选 择文件
单击“打 开”按钮
5．预览文档
如要预览文档，可在打开文档后单击“文档” 工具栏中的“在浏览器中预览/调试”按钮 ， 在弹出的菜单中选择“预览在IExplore”菜单 项（或直接按【F12】键），在浏览器中打开 文档。
2.2 网站创建与管理
2.2.1 确定站点目录结构
1.3.4 测试和发布网站
有了空间和域名后，就可以测试并发布网站了， 网站测试一般包括服务器稳定和安全测试、程序 和数据库测试、网页兼容性测试等。
1.3.5 网站推广
1. 注册到搜索引擎 2. 交换广告条 3. 宣传 4. 网络广告 5. 报纸、杂志
第2章 Dreamweaver CS3入门
初识Dreamweaver CS3 网站创建与管理 页面总体设置
2.2.3 “文件”面板的应用
利用“文件”面板，可以高效地管理站 点。实际操作中，在定义站点后，我们 通常是利用该面板来创建、重命名或打 开站点中的网页文档或文件夹。
在定义了多个站点 后，可利用该下拉 列表选择要进行操 作的站点
2.3 页面总体设置
2.3是检索网页的整个内容，而是只检索 网页中的关键字和说明文本，如果想要自己的 网页能够被搜索引擎检索到，则最好把关键字 设定为人们经常使用的词语。
选择目标 文件所在 文件夹
单击选 择文件
单击“打 开”按钮
5．预览文档
如要预览文档，可在打开文档后单击“文档” 工具栏中的“在浏览器中预览/调试”按钮 ， 在弹出的菜单中选择“预览在IExplore”菜单 项（或直接按【F12】键），在浏览器中打开 文档。
2.2 网站创建与管理
2.2.1 确定站点目录结构
Dreamweaver CS3网页设计培训教程电子教案02
Dreamweaver CS3网页设计培训教程
2. IIS的安装 的安装
通常情况下，要作为 通常情况下，要作为Web服务器的计算机中都 服务器的计算机中都 需要安装Windows 2000或Windows 2003操作 需要安装 或 操作 系统，对于一般的网页制作和测试用Web服务 系统，对于一般的网页制作和测试用 服务 器或小型企事业作为Intranet的Web服务器 服务器， 器或小型企事业作为Intranet的Web服务器，安 操作系统即可。 装Windows XP操作系统即可。下面，以在 操作系统即可 下面， Windows XP操作系统中安装 为例进行讲解 操作系统中安装IIS为例进行讲解 操作系统中安装 在安装IIS之前 需要准备好Windows XP的 之前， 。在安装 之前，需要准备好 的 安装光盘或将Windows XP的安装程序复制到 安装光盘或将 的安装程序复制到 计算机中。 中安装IIS的具体操 计算机中。在Windows XP中安装 的具体操 中安装 作步骤请教师参照软件及书中内容进行讲解。 作步骤请教师参照软件及书中内容进行讲解。
2.1 IIS的安装与简单配置 的安装与简单配置
2.1.1 知识讲解 2.1.2 典型案例 典型案例——局域网 局域网Web服务器的 局域网 服务器的 创建
Dreamweaver CS3网页设计培训教程
2.1.1 知识讲解
IIS是Internet Information Services（互 是 （ 联网信息服务）的缩写， 联网信息服务）的缩写，是Microsoft公 公 司的一种集成了多种Internet服务（如 服务（ 司的一种集成了多种 服务 WWW服务和 服务和FTP服务等）的软件。下面 服务等）的软件。 服务和 服务等 的相关知识进行介绍。 就IIS的相关知识进行介绍。 的相关知识进行介绍
《HTML与CSS》PPT课件
网络编程
第2章 HTML技术介绍 第3章 CSS技术基础
1
主题
• 章节内容 • 本章小结 • 课后习题
2
章节内容
• 2.0 引言 • 2.1 HTML网页文档结构 • 2.2 常用HTML标签 • 2.3 CSS（Cascading Style Sheet）
3
2.0 引言
• HTML是制作网页的基础，在现实中的各种网页都 是建立在HTML基础之上的。通过HTML，可以实 现对页面元素的显示处理。本章简单介绍HTML网 页文档的基本知识，整体结构，常用的HTML标签 和超链接。
结果入数据 返回给服务器
接收数据导向 指定网页
送出结果网页 至浏览器
处理数据的 指定网页
24
JSP借由标签 <FORM>所构成的 表单区块中，取得
用户在其中特定字
段输入的数据內 容。
客户端浏览器
表单 1 表单 2
送出 JSP网页
xxx.jsp
用户在HTML 表单中输入信息
定的比例大小 。
19
表格中数据的对齐方式
表格中数据的对齐方式分为水平对齐与垂直对齐两种。 若这两个属性用在<tr>标签中，则可设置整行的对齐方式，
若用在<td>标签中，则是设置个别单元格中数据的对齐方 式。
属性
可设定的 属性值
说明
align
left、center、 right
靠左、置中、靠右对齐，默认为靠左对齐
类型
主窗体 元素
HTML元素
描述
<HTML>、 </HTML>
超文本的开始和结束
<HEAD>、 超文本头部信息的开始和结束 </HEAD>
第2章 HTML技术介绍 第3章 CSS技术基础
1
主题
• 章节内容 • 本章小结 • 课后习题
2
章节内容
• 2.0 引言 • 2.1 HTML网页文档结构 • 2.2 常用HTML标签 • 2.3 CSS（Cascading Style Sheet）
3
2.0 引言
• HTML是制作网页的基础，在现实中的各种网页都 是建立在HTML基础之上的。通过HTML，可以实 现对页面元素的显示处理。本章简单介绍HTML网 页文档的基本知识，整体结构，常用的HTML标签 和超链接。
结果入数据 返回给服务器
接收数据导向 指定网页
送出结果网页 至浏览器
处理数据的 指定网页
24
JSP借由标签 <FORM>所构成的 表单区块中，取得
用户在其中特定字
段输入的数据內 容。
客户端浏览器
表单 1 表单 2
送出 JSP网页
xxx.jsp
用户在HTML 表单中输入信息
定的比例大小 。
19
表格中数据的对齐方式
表格中数据的对齐方式分为水平对齐与垂直对齐两种。 若这两个属性用在<tr>标签中，则可设置整行的对齐方式，
若用在<td>标签中，则是设置个别单元格中数据的对齐方 式。
属性
可设定的 属性值
说明
align
left、center、 right
靠左、置中、靠右对齐，默认为靠左对齐
类型
主窗体 元素
HTML元素
描述
<HTML>、 </HTML>
超文本的开始和结束
<HEAD>、 超文本头部信息的开始和结束 </HEAD>
电子课件-《Dreamweaver 网页设计与制作(第二版)》-A06- 项目二 创建度假村网站——Dreamweaver CS3 入门
2. 最好不要使用汉字命名文件和文件夹。 3. 文件名中不要使用大写英文字母。
任务 2 创建“fuligong”站点——新建和管理站点
4. 运算符号不能用在文件名的开头。 5. 比较长的文件名可以使用下划线“_”隔开多个单词或关键 字。 6. 在大型网站中，分支页面的文件应存放在单独的文件夹中。 7. 在动态网站中，用来存放数据库的文件夹一般命名为“data” 或者“database”。
任务 3 为首页设置头信息和页面属性——页面总体设置
“编辑字体列表”对话框
任务 3 为首页设置头信息和页面属性——页面总体设置
设置链接样式
任务 3 为首页设置头信息和页面属性——页面总体设置
设置网页标题和编码
五、“属性”面板
“属性”面板用于对网页中元素属性进行设置，“属性”面板中的属性项 动态关联至鼠标选定的网页元素。如图所示，分别展示的是网页中文本的属 性面板和图像元素的属性面板。
“属性”面板（文本属性）
“属性”面板（图像属性）
任务 1 面板基本操作——初识 Dreamweaver CS3
六、“结果”面板
任务 2 创建“fuligong”站点——新建和管理站点
二、在 Dreamweaver 中定义站点
为便于管理和编辑站点，在创建网页之前，首先要在 Dreamweaver 中定 义站点。定义站点可以将本地磁盘中的站点文件夹同 Dreamweaver 建立一定 的关联，可以使用 Dreamweaver 上传或下载站点内容。
◆掌握设置网页头信息的方法 ◆熟悉页面属性的设置方法
任务 3 为首页设置头信息和页面属性——页面总体设置
一、设置头信息
头信息包括网页关检索网页的所有内容，而是只检索网页的关键字。 如果想要自己的网页能够被搜索引擎检索到，最好把关键字设置为人们经常 使用的词语。
任务 2 创建“fuligong”站点——新建和管理站点
4. 运算符号不能用在文件名的开头。 5. 比较长的文件名可以使用下划线“_”隔开多个单词或关键 字。 6. 在大型网站中，分支页面的文件应存放在单独的文件夹中。 7. 在动态网站中，用来存放数据库的文件夹一般命名为“data” 或者“database”。
任务 3 为首页设置头信息和页面属性——页面总体设置
“编辑字体列表”对话框
任务 3 为首页设置头信息和页面属性——页面总体设置
设置链接样式
任务 3 为首页设置头信息和页面属性——页面总体设置
设置网页标题和编码
五、“属性”面板
“属性”面板用于对网页中元素属性进行设置，“属性”面板中的属性项 动态关联至鼠标选定的网页元素。如图所示，分别展示的是网页中文本的属 性面板和图像元素的属性面板。
“属性”面板（文本属性）
“属性”面板（图像属性）
任务 1 面板基本操作——初识 Dreamweaver CS3
六、“结果”面板
任务 2 创建“fuligong”站点——新建和管理站点
二、在 Dreamweaver 中定义站点
为便于管理和编辑站点，在创建网页之前，首先要在 Dreamweaver 中定 义站点。定义站点可以将本地磁盘中的站点文件夹同 Dreamweaver 建立一定 的关联，可以使用 Dreamweaver 上传或下载站点内容。
◆掌握设置网页头信息的方法 ◆熟悉页面属性的设置方法
任务 3 为首页设置头信息和页面属性——页面总体设置
一、设置头信息
头信息包括网页关检索网页的所有内容，而是只检索网页的关键字。 如果想要自己的网页能够被搜索引擎检索到，最好把关键字设置为人们经常 使用的词语。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
建网站 http//
22.4.2 自定义布局
有时,从模板创建的布局页面并不能完全符合要求.那 么,用户可以在Dreamweaver中灵活地创建自定义布局. 过程同样也是非常简单的.具体步骤如下:
建网站 http//
22.5 专家总结
建网站 http//
22.2.4 行为(Behavior)
行为是对内容的交互及操作效果.例如,使用 JavaScript可以使内容动起来,可以判断一些表单提交, 进行相应的一些操作. 所有HTML和XHTML页面都由结构,表现和行为三方面 内容组成.抽象一点理解,内容是基础层,然后是附加 上的结构层和表现层,最后再对这三个层做点"行为",
内容就是页面实际要传达的真正信息,包含数据,文档 或图片等.注意这里强调的"真正",是指纯粹的数据 信息本身,不包含任何辅助信息,如导航菜单或装饰性 图片等,下面一段文本是页面要表现的信息,如图22.1 所示.
建网站 http//
22.2.2 结构(Structure)
建网站 http//
22.3 DIV+CSS页面规划
从前一节的内容可知,DIV+CSS的页面布局不仅仅是设 计方式的转变,而且是设计思想的转变.虽然在设计中 使用的元素依然没有改变,在旧的表格布局中,也会使 用到DIV和CSS,但它们却没有被用于页面布局.这一转 变为网页设计带来了许多便利,在前面已经介绍过.那 么究竟如何使用DIV+CSS进行页面布局,使用DIV+CSS需 要掌握哪些知识点,就是本节要介绍的内容.
建网站 http//
22.4 DIV+CSS在Dreamweaver中实现
Dreamweaver CS3是全面地支持DIV+CSS,并且符合Web 标准的网页设计.在Dreamweaver中可以实现可视化CSS 布局,这使得网页设计更为简单,效率更高.为了方便 初学者进行设计,Dreamweaver还提供了许多现成的模 板,可以直接在网页中应用.当然,对于熟练的用户可 以采用自定义方式进行布局.
建网站 http//
22.3.1 盒模型
盒模型是进行和实现DIV+CSS布局的基础,关系到网页 元素的排列和定位.盒模型由内容,边框,内填充和外 边距组成,如图所示.
建网站 http//
22.3.2 定位
了解盒模型之后,如何才能把这些盒模型妥当地排列在 网页中,这时需要用到定位技术.在此之前,介绍两个 基本概念.在CSS的布局中,网页元素可分为两类: 一类是块级框元素,如<DIV>标签和<P>标签等.它们在 网页中以块的形式出现.除非特殊情况,它们之后总会 有换行,即它们会占据一行的位置. 另一类是行内框元素,如<span>标签等.它们之后不会 有换行,则多个此类标签共居一行.
建网站 http//
第22章 DIV+CSS
从本章的标题来看,可能会让人费解.DIV是前面学习 过的层标签,CSS是层叠样式表的缩写,它们之间会有 什么关系,为什么可以联系到一起?了解Web标准的读 者肯定会知道其中的缘由.到目前为止,大多数网站的 布局是采用表格进行定位的,但这种方式会逐渐淡出设 计舞台,取而代之的是符合Web标准的DIV+CSS布局方式. 那么,Web标准是什么,如何进行DIV+CSS布局,就是本 章所要介绍的内容.
建网站 http//
22.2.6 Web标准推荐的方法
对于内容,结构和表现相分离,最早是在软件开发架构 理论中提出来的.用过QQ的人都知道,QQ面板的皮肤变 更但内容却保持不变,仅是外观在变化.还有,Winamp 的skin也是这种原理的典型体现.其实大多数的设计师 已经在实践中都接触过. 动态信息发布系统实际上就是基于这个原理制作的.
建网站 http//
22.2.5 传统的HTML方法
传统的HTML标签中,既有控制结构的标签(如<title> 标签和<p>标签),又有控制表现的标签(如<font>标 签和<b>标签),还有本意用于结构后来被滥用于控制 表现的标签(如<h1>标签和<table>标签).整个结构 标签与表现标签混合在一起. 1.如何改版 2.数据的利用
建网站 http//
22.3.4 实现布局规划
了解以上的几个基本概念后,可以实现简单的布局.在 此就介绍二栏结构布局实现的方法. 首先绘制大概的结构示意图,如图所示,从而方便在布 局实现的过程中理清各部分的关系.从示意图可看出, 此布局主要是处理导航栏与主体内容之间的关系,以及 布局元素居中的问题.导航栏与主体内容并列在同一水 平位置,所以需要把它们包含在一个元素中,以便进行 居中.在此使用DIV+CSS进行布局,
22.3.2 定位
4.浮动定位 浮动定位可以进行左右移动,直到定位元素的边框碰到父级元素或同级元 素的边框,才会停止移动.它也是在CSS布局中常用的定位方式.浮动定 位也会脱离普通流,从而普通流中的元素对浮动定位视而不见,将其当作 不存在.如果需要把元素设置成浮动定位,只需把float设置为left或right即 可.
建网站 http//
22.1.3 行为标准
行为标准主要包括DOM和ECMAScript两部分. 1.DOM DOM是Document Object Model(文档对象模型)的缩写. 根据W3C DOM规范,DOM是一种与浏览器,平台和语言的 接口,可以访问页面其他的标准组件.2.ECMAScript ECMAScript是ECMA(European Computer Manufacturers Association)制定的标准脚本语言 (JavaScript).目前推荐遵循ECMAScript 262.
建网站 http//
22.1 Web标准
Web标准不是某一个标准,而是一系列标准的集合.网 页主要由3部分组成:结构(Structure),表现 (Presentation)和行为(Behavior).对应的标准也 分为3个方面:结构化标准语言,主要包括XHTML和XML; 表现标准主要包括CSS;行为标准主要包括对象模型 (如W3C DOM)和ECMAScript等.这些标准大部分由W3C 起草和发布,也有一些是其他标准组织制订的标准,如 ECMA(European Computer Manufacturers Association)的ECMAScript标准.从如下的几个方面 进行简单介绍.
可以看到上面的文本信息本身已经完整,但是混乱一团, 难以阅读和理解,必须将其格式化一下.把其分成标题, 作者,章,节,段落和列表等,如图22.2所示.
建网站 http//
22.2.3 表现(Presentation)
虽然定义了结构,但是内容还是原来的样式没有改变,例如标题字 体没有变大,正文的颜色也没有变化,没有背景,没有修饰等.所 有这些用来改变内容外观的东西,称之为"表现".下面是对上面 文本用表现处理过后的效果,如图所示.
建网站 http//
22.3.4 实现布局规划
DIV层之间关系如图所示.
建网站 http//
22.3.5 美化布局
在传统布局也就是表格布局里可以使用大量的图片进行 页面的美化.在DIV+CSS布局中,同样可以使用图片来 进行页面的美化.不同的是,在DIV+CSS中使用背景图 片的方式,这使得美化工作变得更为简单,在此用一实 例来介绍背景图片的美化过程,如图所示.
建网站 http//
22.3.3 清除
清除属性clear可以清除元素的浮动效果.该属性共有三个属性值:left, right和none.当设置为left时,元素的左边不允许出现浮动定位元素, 如果出现浮动定位元素,则自动换行进行下降;当设置为right时,元素 的右边不允许出现浮动定位元素;当设置为none时,元素的两边不允许出 现浮动定位元素. 该属性的设置可以为布局带来便利.它会为浮动元素留出空间.当元素内 存在浮动定位时,浮动元素会脱离普通流,从而不会占用父级元素的空间, 如图所示.
建网站 http//
22.4.1 使用模板布局
Dreamweaver CS3中提供了多达32种模板,几乎涵盖了所有的布局模型. 模板主要分为1列布局,2列布局和3列布局.每种模型里又分为固定列布 局,液态列布局和弹性布局.这些模板可以在设计的过程中稍加改动,从 而满足用户的需要来使用.下面将介绍如何使用模板,具体步骤如下:
本章介绍了Web标准,以及其所带来的优点.需要重视 的是Web标准中结构与表现及行为分离的设计概念,如 此才能真正地为设计带来许多便利.采用Web标准来设 计网页,简化了设计过程,并且使网页的结构更为清晰, 可读性增强;同时还能创建出漂亮的页面效果.作为网 页设计工具的Dreamweaver,全方位地提供了支持,让 设计工作变得更轻松有效.
建网站 http//
22.1.1 结构化标准语言
现在常用的结构化标准语言主要包括XML和XHTML两种. 1.XML XML是The Extensible Markup Language(可扩展标识 语言)的简写. 2.XHTML XHTML是The Extensible HyperText Markup Language (可扩展超文本标识语言)的缩写.
建网站 http//
ቤተ መጻሕፍቲ ባይዱ
22.3.2 定位
3.绝对定位 绝对定位是相对于其上一级元素来进行的.它会脱离普通流,即普通流中 的元素会把它当作不存在.所以绝对定位的改变会影响到普通流中的元素 的位置.其示意图如图所示.
建网站 http//
建网站 http//
22.3.2 定位
1.普通流定位 普通流定位是根据元素在XHTML中原本的位置进行确定. 块级框元素按从上至下的垂直方式进行定位,而行内框 元素按从左至右的水平方式进行定位.在没有指明定位 方式的情况下,默认为普通流方式. 2.相对定位 相对定位方式是元素在原来的位置进行偏移