打开&Dreamweaver&CS5&中颜色图标
- Dreamweaver CS5_设计学院_Ps123
&|&&|&&|&&|&&|&&|&&|&&|&&|&&|&&|&&|&
&>>&&>>&&>>&&>>&&>>&正文
打开&Dreamweaver&CS5&中颜色图标
作者：佚名&&&&教程来源：&&&&点击数：&&&&更新时间：&&& 
上一篇教程： 下一篇教程：
&&PHOTOSHP学院更新
Powered by：Www.Ps123.Net〖粤ICP备号〗All Rights Reserved,dreamweaver里怎么改变表格中“列表/菜单”域的下拉标志？css怎么写？_百度知道
dreamweaver里怎么改变表格中“列表/菜单”域的下拉标志？css怎么写？
p>dreamweaver里怎么改变表格中“列表/菜单”域的下拉标志.com/zhidao/pic//zhidao/wh%3D450%2C600/sign=ca8aa46bdda25a5df5af0/cf3d7ca2a11e1eff71fbe096a63a940.baidu.jpg" esrc="http.jpg" target="_blank" title="点击查看大图" class="ikqb_img_alink"><img class="ikqb_img" src="http.hiphotos.hiphotos://b://b.com/zhidao/wh%3D600%2C800/sign=2a36bf4e33d12f2ece50aa/cf3d7ca2a11e1eff71fbe096a63a940.baidu.baidu？<a href="http.hiphotos://b？css怎么写
提问者采纳
<，而IE只运行应用在连接上;li>.htc文件的唯一作用就是给IE增加了任意元素的悬停功能:left，挺详细的;ul>，在这里设置使消除不同浏览器间的不同效果）*/a href=&}ul#nav2 li li:hover {background-li&
&&CSS应用&li&a&的子结点*/&li&a href=& a href=":0&a>:&DW网页制作&FLASH动画&&&&<，list-font-&FLASH教程&
&&/<:hover ul{a&li&a href="，只需要将width重新跳回auto让浏览器自己自己调整就可以即可;博客&width:3&li&li&CSS教程<.htc);&li&网页特效&&/
&文章<:0;&<:/a href=&/*去除所以的缩进(不同浏览器对列表的内外边距默认设置不一样;&高级编程&a>，不懂再问哈~~）BODY部分&ul&/&&&&li>。*/不可以是列表的子结点;}//&&a&交流&text-*注意;a&&&* CSS驱动的横向下拉菜单 */}ul#nav2 li li a {
/&&>，只有当鼠标经过使才可见*//li&&&li&li&&li&ul id=&a href=& text-
&//DOM教程&ul>:}ul#nav2}ul#nav2 {li&/:#f4f4f4;&&/*IE中display:#000。对于其他的浏览器;>。（给了注释的;a&a&XML教程&&&a href=&li&/a href=&//:160li&//FLASHAS编程&a&body {&&
&a href=&&&*设置下拉菜单不可见;&/:&&/<:0//&li>，就可以得到想要的行为;全部&/li&ul&/&&/，我是直接用CSS编写的;&}/li li a {*CSS中允许将悬停样式用在所有元素中;/a&/&
&/>，给你源代码吧; /&li&>:1px solid #c5c6c4;&a href=&ul&li&/:/
&/>:#777;}/:0;&a&a href=&&/&li&li&li&ul#nav2 li a{li>，使形成横向的一级菜单*/li&<，但可以是列表项&ul&li>:12*列表项水平浮动;a&ul&
&li&nav2&li>:url(<其实觉得用DW做挺麻烦的;a href=&/&ul#nav2&<:1px solid #&li>，但如果给连接设置一个明确的宽度;&li>:&
&a&*使所有列表项宽度统一;a>。*/a href=&}/&*对下拉菜单中的项进行修饰*/a href=&ul#nav2 li {XML应用<：列表&ul&ul#nav2 li ul { /li>，160-3*2-1*2=152px*/:block不足以使连接a的可单击区域填充整个列表项，但是;
&&color:152//<:&a href=":/CSS部分/a&&&/
感觉你这个和我问的不一样
提问者评价
虽然问题还是没有解决，但是还是谢谢你
来自团队：
其他类似问题
为您推荐：
dreamweaver的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁Dreamweaver&CS5板书
第一课：网页设计基础
一 、网站的概述
1、& 网页与网站
浏览网页时在浏览器中看到的一个个页面就是网页，而多个相关的网页的集合就构成了一个网站。
&& 举例： (搜狐网) (百度网) (优酷网)等等。
2、& 浏览网页的工具-浏览器
浏览器：用于打开显示网页的软件。最常见的是Windows系统自带的IE浏览器。
还有火狐Firefox、360安全浏览器、遨游、腾讯TT等等。
1）& 网址：用于定位某个网站某个页面的一串字符，通常是这种格式
2）& 主页：访问网站时，默认打开的第一个页面就是主页也叫首页。
3、& 认识网页的组成元素
二、初识Dreamweaver
1、制作网站的流程
规划网站类型及主题&搜集资料素材&使用软件进行网页制作&测试及发布
2、认识Dreamweaver
是当前最流行、最方便的网页设计和网站开发工具软件。
Dreamweaver：梦想编辑者。通过这个工具，实现编辑网页的梦。
Dream：梦想
weaver：织布者，织工
早期是Macromedia公司推出的“网页三剑客”之一。“网页三剑客”指的是Dreamweaver、Flash、Fireworks这三个软件，它们这三个集合起来，就像江湖中最厉害的剑客一样，成为了网站开发中的专用利器。它集和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别开发的可视化网页开发工具，前两年Macromedia公司被Adobe公司收购，DM
CS5是最新推出的版本。
【操作演示】启动Dreamweaver
实例：制作一个简单页面(两种方法对照)
三、Dreamweaver的用户界面
文档工具栏
文档编辑窗口
提高：工作窗口的设置、保存、恢复
【操作演示】关闭Dreamweaver
四、网页文件的基本操作
基本网页的文件类型为HTML文档，保存的文件扩展名为
创建网页文档（HTML文档）
文件→新建→新建文档→常规→类别→基本页
保存指定文件（编辑中的文件如果文件名后面带有“*”号，表示未保存）
文件→保存（或Ctrl+S)
文件→另存为
文件→保存全部
注意：1、网页文件要用英文或数字进行命名，莫用中文。
2、基本网页的扩展名为.html
打开已建的HTML文档
文件→打开
右击文件，选择Dreamweaver打开。
拖动到Dreamweaver
文件→关闭
还未保存的网页（*），关闭时会提示你是否保存。
其他操作：
1）多个编辑文件的切换选择
2）预览编辑中的网页 (快捷键F12)
五、设置网页外观属性
网页标题、页面默认字体、默认字体大小、背景颜色、背景图片、边距。
六、创建站点
1、什么是站点
Dreamweaver的站点是一种管理网站中所有相关联文件的工具。通过站点可以对网站的相关页面及各类素材进行统一管理，还可以以使用站点管理实现将文件上传到网页服务器，测试网站。
站点简单的说就是一个文件夹。在这个文件夹里包含了网站中所有用到的文件。我们通过这个文件夹（站点），对我们的网站进行管理，有次序，一目了然。
2、创建站点
《我的足球网》 站点根目录为 D：//jcwww
七、设置默认图像文件夹
八、管理站点
1、在“文件”面板中实现以下操作
选择编辑网页文件
创建文件或文件夹
剪切、粘贴、复制、删除、重命名文件或文件夹
&2、站点管理
第二课：制作网页的基本操作
一 、在网页中添加文本
1）& 添加普通文本
A、直接输入
（1）用鼠标单击网页编辑窗口中的空白区域，窗口中随即出现闪动的光标，标识输入文字的起始位置。
（2）选择适当的输入法输入文字
&B、复制和粘贴
&&C、从其他文件导入
2）& 添加空格
输入法切换到半角状态，按空格键只能输入一个空格。如果需要输入多个连续的空格可以通过以下几种方法来实现：
（1）菜单“插入记录”-&HTML-&特殊字符-&不换行空格
& （2）直接按“Ctrl+Shift+Space”组合键
（3）设置软件首选参数-允许连续空格
3）添加日期时间
在文档的最后一行插入形式如“Friday,
AM”所示的日期，且要求每次保存网页时自动更新日期。具体操作过程如下：
（1）切换到“常用”插入工具栏。
（2）按Enter键，添加一空行，将光标放置在空行与正文对齐的最左端。
（3）单击菜单【插入】→【日期】，或者单击“常用”插入栏的【日期】按钮，将弹出 “插入日期”对话框。
（4）在“插入日期”对话框中，“星期格式”下拉表框中选取“Thursday,”，“日期格式”选取“”，在“时间格式”下拉列表框选取“10:18PM”，选中“储存时自动更新”复选框，然后单击【确定】按钮，最后生成的日期效果为“Friday,
9:47 AM”的形式。
（5）保存插入的日期，且浏览网页。
4 ) 插入水平线
（1）将“插入”工具栏切换到“HTML”类型。
（2）将光标放置到标题最后一个字符的右边。
（3）单击HTML插入工具栏的“水平线”按钮，即可向网页中标题与正文之间插入一条水平线。
5）添加特殊字符
（1）通过菜单【插入】→【HTML】→【特殊字符】插入
先将光标放置到需要插入特殊字符的位置，然后展开菜单【插入】→【HTML】→【特殊字符】，在【特殊字符】的级联菜单中选择需要插入的特殊字符。
（2）通过“文本”插入工具栏插入
先在Dreamweaver cs5的“插入”工具栏中选择“文本”，显示“文本”插入工具栏。
将光标放置到需要插入特殊字符的位置，然后单击工具栏中的“文本”，单击所需插入的特殊字符即可插入到网页中。
二、编辑文本
1）网页中输入的文本可以像Word文档一样，进行编辑。
拖动鼠标选中一个或多个文字、一行或多行文本，也可以选中网页中的全部文本。
按BackSpace键或Delete键实现删除文本操作。
3. 实现复制、剪切、粘贴等操作。
& 4. 实现查找与替换操作。
& 5. 实现撤消或重做操作。
2）设置文本格式
字体(通用性问题)、大小、颜色、风格
CSS（Cascading Style
Sheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。
3）分段与换行
分段按Enter回车键（隔一行）、换行按Shift+Enter（不分段）
4）设置段落格式
a.对齐方式
b.列表编号
列表可以将文本段落用符号或序号标注起来，有两种类型：项目列表和编号列表。
设置项目列表的操作过程如下:
（1）选择要添加列表的若干文本段落
（2）单击属性检查器中的“项目列表”按钮或“编号列表”按钮
5) 使用Html段落样式
三、在网页中添加图片
1）网页中常用的图片格式
使用图片的原则：在保证画质的前提下尽可能使图片的数据量小一些，这样有利用户快速的浏览我们的网页。
特点：它的图片数据量小，可以带有动画信息，且可以透明背景显示，但最高只支持256种颜色。
用途：大量用于网站的图标Logo、广告条Banner及网页背景图像。但由于受到颜色的显示，不适合用于照片级的网页图像。
特点：可以高效地压缩图片的数据量。使图片文件变小的同时基本不丢失颜色画质。
用途：通常用于显示照片等颜色丰富的精美图像。
特点：是一种逐步流行的网络图像格式。既融合了GIF能做成透明背景的特点，又具有JPEG处理精美图像的优点。
用途：常用于制作网页效果图。
2）如何获取网页图像
&& 网上下载（我要素材网
www.51scw.net）、购买素材光盘、使用图像制作软件创作
3）插入图像
插入→图像
插入面板→常用→图像
直接将图像文件拖入编辑区
在插入图像前应先将网页文件已保存，从而使所插图像引用正确。
图像插入网页后，应确定图像文件已存入站点，否则在下次打开网页时，会出现看不到图像的情况。
技巧：图像的位置、替换文字
4）设置图像的基本属性
图像→设置的名称
宽、高→可缩小和放大图片的显示尺寸。
源文件→图片的路径和名称。
替代→图像的说明文字
边框→图片是否要加边框
四、图文混排
垂直边距和水平边距→图片四周突出的尺寸
对齐→在一行中图形和文本的对齐方式
五、编辑图像
对比度/亮度
重新采样：当图片的宽、高缩小后，重新生成更小的图片。
优化（为图片瘦身）
六、鼠标经过更换图片特效
1）概念：是指在页面中先显示一张图像，当鼠标移动到该图像上时，图像切换成另一张图像。
a 将光标放到要插入图像的地方。
b单击菜单“插入记录”----&“图像对象”--&“鼠标经过图像”，打开“插入鼠标经过图像对话框”。
&&&&&c设置完成，单击确定。
第三章、创建超级链接
一、了解超链接
1）什么是超链接
所谓的超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。
二、创建超链接
到网站内页面的超链接――内部链接（网站内部页面之间创建相互链接关系）
步骤1 选中页面中的文字或图像，在属性面板中单击“链接”文本框右侧的文件夹图标，以通过浏览选择一个文件
步骤2 从“目标”下拉菜单中，选择文档的打开位置。
_self：会在当前网页所在的窗口或框架中打开（默认方式）。
_blank& :每个链接会创建一下新的窗口。
_new：会在同一个刚创建的窗口中打开。
_parent：如果是嵌套的框架，则在父框架中打开。
_top：会在完整的浏览器窗口中打开。
到网站外页面的超链接――外部链接
选中文字或图像之后，直接在属性面板的“链接”文本框中输入外部的链接地址，如
步骤2& 然后在“目标”下拉菜单中设置这个链接的目标窗口。
n&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
内部链接 这种链接的目标点是同个网站中的其他网页（文档），称为内部链接
n&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
外部链接 这种链接的目标点是不同站点或本站点以外的网页（文档），称为外部链接。
注意：链接中使用完整的URL地址&&
http:// （是浏览网页网络协议） www.51zxw.net（域名）
链接颜色：指定应用于链接文字的颜色
已访问链接：指定链接被访问过的颜色
变换图像链接：指定当鼠标位于链接上时的颜色。
活动链接：指定但鼠标在链接上点击时的颜色。
到网页某一特定位置的超链接――锚点链接
锚点链接 这种链接的目标端点是网页中的命名锚点，利用这种链接，可以跳转到当前网页中的某一指定位置上，也可以跳转到其他网页中的某一指定位置上。
创建命名锚记，就是在网页中设置位置标记，并给该位置一个名称，以便引用。
属性面板的链接栏中直接输入&&
“ 锚点名”
1）& 如果链接的目标锚点标记在当前页面即输入
如果链接的目标锚点标记在其他网页，即要输入目标网页的地址和名称，然后再输入“ 锚点名”
其他一些链接。
A. 创建E-mail电子邮件链接
n&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&Email链接 单击这种链接，可以启动电子邮件程序（例如：Offiece办公软件中的Outlook）书写邮件，并发送到指定的地址。
步骤1选中文本和图像
步骤2插入栏｜常用｜电子邮件链接｜输入邮件地址
或在属性面板的链接栏中直接输入&&
“邮件地址”
创建下载链接：当被链接的文件是exe文件或zip、rar类型的文件时，浏览器无法直接打开，便会提示文件会被下载，这就是网上下载的方法。
C. 创建空链接：空链接用来激活页面中的对象或文本。当文本或对象被激活后，可以为之添加行为。
方法：选中要制作空链接的对象，在链接文本框中直接输入＃。
在一般站点首页的导航栏中的首页链接，就可以是一个空链接
三、图像热区链接
图像热区指在一幅图片上创建多个区域（热点），并可可以点击触发。当用户单击某个热点时，会发生某种链接或行为。
在图像属性面板中，使用热区工具（矩形、椭圆、多边形），在图像上划分热区。
为绘制的每一个热区设置不同的链接地址和替代文字。
四、创建图像导航条
使用鼠标经过变换图像的特效，创建图像导航条
五、创建跳转菜单
跳转菜单是网页中的弹出式菜单，可以创建任何文件类型的链接。
1、插入栏｜表单｜跳转菜单
2、在“插入跳转菜单”对话框中，单击＋号添加菜单项
3、在“选择时。转到URL”文本框中，输入该文件的路径。
六、脚本链接
通过连接触发脚本命令
添加到收藏夹：javascript:window.external.addFavorite('http://www.51zq.net','我的足球网')
2. 表示关闭窗口：javascript:window.close()
3. 表示弹出一个提示对话框：javascript:alert(‘hello！’)
4. 设置为默认主页：（需通过空链接#触发onClick事件）
onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('/');"
七、超链接的管理
1、链接路径
对链接路径的正确理解是确保链接有效的先决条件。链接的路径有3种表达方式
1）绝对路径：如果在链接中使用完整的URL（统一资源定位符）地址，这种链接路径就称作绝对路径。
& 一般用于链接外部网站或外部文件资源时，例如：
2）相对于文档路径：表述源端点与链接目标端点之间的相互位置。一般我们默认使用这种方式链接同站点的不同文件。用“.
. / ”上一层的文件夹
3）相对于站点根目录路径: 所有链接的路径都是从站点的根目录开始的。“ / ”表示根目录。
2、自动更新链接
当文件的位置被改动时，自动的更新该网页中的链接路径，同时也自动更新其他网页链接到这个网页的路径。
3、检查链接
第四章、了解HTML超文本标记
1、什么是HTML？
超文本标记语言，用于编写网页。HTML是一切网页实现的基础，在网络中浏览的网页都是一个个由HTML标记构成的文件。
一个HTML文件包含了很多HTML标记，用来告诉浏览器应该如何显示文本、图像以及网页的背景等等
2、HTML文件结构
&title&暑假结束了
开学了，第一天上课有点累呀！！以前我可是睡到中午才起床的！
HTML的文件结构相当简单，其主体结构主要由以下。
文件头信息
在浏览器中显示的HTML文件的正文
HTML文档通常分为文件头和正文两部分。文件头用以纪录与网页相关的重要信息，例如标题、关键字等等，通常文件头部分不会在浏览器中显示，而正文部分，则是网页的主体内容，将在浏览器中显示。
3、常见HTML标记
&br&&&&&&&&&&
回车换行标记
&/title&& 网页标题标记
&&&&&&&&&&
&&&&&&图像标记
&/a&&&&&&&
超链接标记
任何HTML标记都是由”&“和”&”号所括住，标记名不区分大小写，但建议用小写。
多数标记是成对出现。
少数标记单独出现。如&br&、&hr&等。
部分标记可以拥有属性。如颜色、大小等等 &body
bgcolor=“blue”&
5、认识文件头信息
设置头部信息&head&&/head&
网页头部信息的内容作为网页的一些辅助信息。并不会直接在网页中显示。
插入“刷新”，可以定时的刷新网页。
插入“关键字” ，有利于搜索引擎收集你的页面，关键字作为搜索的依据
插入“说明” 对网页进行说明描述，同样会得到搜索引擎的收集。
第五章 表格处理
1、表格的作用：
1）存放数据&& 2）布局页面
2、插入表格
1）& 单击网页中需要插入表格的地方
在菜单栏选择“插入记录”-&“表格”命令，或者单击“常用”工具栏里的“表格”按钮，或者运用组合键CTRL+ALT+T
3、设置表格大小
行数和列数：
表格宽度：表示表格在页面中宽度的大小。像素设置的是表哥宽度的实际值，
百分比设置的是表格与页面宽度的相对比值。
边框粗细：设置表格边框的粗细效果。
单元格边距：是指单元格中填充内容距离边框的距离大小。
单元格间距：是指相邻单元格之间的距离。
概念：单元格，指的是表格里的每一个格子，就叫做单元格。
理解表格边框、单元格边框、间距、填充（边距）
4、页眉与辅助功能
页眉：用于设置表格的行或列的标题
无：表示不设置表格的行或列的标题
左：表示一行归为一类，可以为每行在第一栏设置一个标题
顶部：表示一列归为一类，可以为每列在头一栏设置一个标题
两者：表示可以同时输入“左”端和“顶部”的标题
标题：设置表格的标题名称，默认会出现在表格的上方。
摘要：为表格的备注，不会在网页中显示。
二、表格的设置
1实例一 足球明星相册
标题“足球明星” 设置字体：黑体、大小：36像素、 颜色：#FFCC33、居中对齐
创建导航位置的表格1行5列、表格宽度700像素、边框为0、填充3、间距0、背景颜色为：#FF99CC、每个单元格必须一样宽，且里面的文字居中对齐。
设置网页背景颜色为：#009900，设置导航链接
创建图像展示表格3行4列。
单元格边距
单元格间距
表格背景颜色
第一行背景颜色
第二行背景颜色
第三行背景颜色
1）选定表格和单元格
表格包括行、列、单元格3个组成部分 。
A、选定整个表格
B、选定行或列
C、选定单元格
2）设置表格和单元格的属性
3）调整表格的尺寸
选定表格→鼠标拖动
设置属性值
调整行和列的宽度
2、实例二、制作课程表
步骤一：插入5行6列的表格，宽度为500像素，边框、填充、间距各为1；并调整表格录入文字如下图所示：
1）添加/删除行列
通过表格【属性】面板增加与删除表格的行和列
通过【修改】菜单完成增加与删除表格的行和列
2）单元格的合并和拆分
3）单元格的复制、粘贴、移动和清除
在网页编辑窗口中选中要复制的对象
复制－－按Ctrl+C，或【编辑】｜【复制】命令。
移动－－按Ctrl+X，或【编辑】｜【剪切】]命令。
粘贴－－按Ctrl+V，或【编辑】｜【粘贴】命令。
拖动－－按住Ctrl＋拖，则完成复制操作。直接拖曳可完成对象的操作。
清除－－按Delete，或【编辑】｜【清除】命令。
步骤二：在步骤一的基础上，设置表格属性，如下图所示效果：
表格属性参数：
表格背景颜色
表格边框颜色
步骤三：设置单元格属性，完成课程表。如下图所示：
要求：1）所有单元格居中对齐，字体大小为12px
2）第一列和第二行字体加粗
3）第二行背景颜色设置为：#B6C9D7；填写科目的单元格设置背景颜色：#E9F1F8
4）最上一行字体：隶书 36px 红色；设置行高70像素；背景图片：bg.gif
5）左上角单元格，插入图片logo.gif，设置图片宽和高为60,并设置图片在单元格的顶部对齐。
6）最下一行设置行高20像素；背景颜色：#B6C9D7，边框颜色：#FF0000
3、表格的html标记
表格的标签：
&table width="200" border="1"&
&td&&&/td&
&td&&&/td&
&td&&&/td&
&td&&&/td&
&/table&&&
&/tr&&&&&&&&
&/td&&&&&&&&
单元格标记
&&&&&&&&&&&&
三、表格嵌套
1．概念：就是在表格的单元格中再插入表格，形成嵌套的结构。或者就是说在已有的表格中再创建表格。
A：光标定位到需要插入嵌套表格的单元格里
B： 按照插入表格的方式，插入新的表格
实例一：下载页面
要求：1、背景图片为bg.gif
2.& 单元格颜色 #33B3F0和 #C8EAFB
实例二 个人简历
四、应用表格布局页面
1）、类型：
网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型。
D左右框架型
2、页面的构成
1）网页尺寸
&& 根据屏幕分辨率的大小设计网页的宽度。
&& 一般如果屏幕分辨率为800*600
那么设计网页的尺寸为780*428，如果屏幕分辨率为，那么设计页面尺寸为980*600
2）页头（页眉）
通常放置logo（网站标志）和banner（广告条）
放置版权信息、联系电话、网站介绍、备案信息等等。
实例：国字型 网页制作
第6章 框架
一、什么是框架？
一个框架就是一个区域，可以单独打开一个HTML文档。
多个框架就把浏览器窗口分成不同的区域，每个区域显示不同的HTML文档。
多个框架就组成一个框架集。
这是一个左右结构的框架。事实上这样的一个结构是由三个网页文件组成的。首先外部的框架集是一个文件，图中我们用index.htm命名。框架中左边命名为L，指向的是一个网页A.htm。右边命名为R，指向的是一个网页B.htm。
&frameset cols="80,*" &
& &frame src="a.html" name="L"
& &frame src="b.html" name="R"
&/frameset&
&noframes&&body&&/body&&/noframes&
二、框架的基本操作
1、建立框架
两种方法：
1、单击菜单“新建”-&“文件”，打开“新建文档”对话框，做如下选择，点击“确定”。
2、打开要插入框架的页面。单击“布局”插入栏中的“框架”按钮 右侧的按钮 ，在弹出的菜单中选择需要的框架类型。
新建页-示例的页-框架集
例子：新建一个左右结构的框架页面
2、保存框架和框架集
1）．保存框架：鼠标置于要保存的框架，选择“文件/保存框架”命令
2）．保存框架集：选择要保存的框架集，选择“文件/保存框架页”或者“文件/框架集另存为”命令。
3）．保存全部：这时是保存整个框架结构，保存的时候虚线笼罩的就是你现在保存的框架。
3、编辑框架页
1. 选择框架页，并进行编辑。保存框架
三、实例：网页书
1、框架的作用
1．做网页的布局，将网页分成不同的部分
2．简化网页的编写：网页之间相同的内容只需要编写一次
3．加快网页的浏览：每次网页只更新那个变化的框架内容
2、设置框架和框架集的属性
选中框架集：鼠标单击框架的边框，虚线显示的部分就是选中的框架集
设置框架集属性：
边框宽度，&& 边框颜色
&& 行：值，单位（像素，百分比，相对）
选中框架：框架面板中单击要设置的框架或者按住【alt】键，在框架窗口内单击
设置框架属性：
&&&&框架名称，源文件，边框，滚动，不能调整大小
边框颜色，边界宽度，边界高度。
3、设置框架中的链接
四、自定义框架集
如果框架集不满足我们的需要时，我们需要自己建立框架。看例子：
1．拖动编辑窗口的边框：鼠标置于编辑窗口的边框，变成&&&&&
2．拖动窗口中的框架边框：按住【Alt】键，鼠标变成&&&&&
注意：当指向拖动一小段边框时，先选中当前框架，再拖动。
2、框架的删除
方法：拖动不需要的边框和别的边框合并，或者拖到编辑窗口外。
五、网页中的网页 Iframe
IFRAME 元素也就是文档中的文档，或者好像浮动的框架(FRAME)。
&iframe name="a" width="120" height="160"
src="tx1.html" frameborder="0"
scrolling="no"&&/iframe&
Name 框架的名字
Src 链接的源文件
Frameborder& 框架的边框设置
Scrolling&&&
滚动条设置
第七章 插入多媒体元素
一、什么是多媒体元素？
多媒体：Multimedia
是指文本、图像、声音、动画、视频（Video）等媒体元素的统称
二、有哪些多媒体元素
1、Flash多媒体元素
三、插入Flash多媒体元素
1& Flash动画
插入的Flash动画文件，扩展名为“.swf”
2& 插入Flash按钮
1．概念：实际上是用Flash动画，效果是按钮的效果，可以直接使用Dreamweaver本身自带的Flash按钮，也可以自己做。实际是扩展名为“.swf”的文件。
2．插入方法：同插入Flash动画的方法类似。选择菜单“插入记录”&“媒体”&“Flash按钮”
3& 插入Flash文本
1．概念：Dreamweaver可以帮你指定的文本制作为动画效果，生成动画文件。
2．插入方法：选择菜单“插入记录”&“媒体”&“Flash文本”
插入图像查看器（制作Flash相册）
1．概念：图像查看器，类似电子相册，最后保存为扩展名为“.swf”的Flash文件。
2．插入方法：
选择菜单“插入记录”&“媒体”&“图像查看器”，系统会自动弹出“保存Flash元素”对话框，如下所示：
b& 键入文件名，单击保存。这时就插入了Flash元素
c& 在属性面板可以对它做简单的设置。
设置“Flash元素”的参数，为Flash相册指定调用的图片、设置相册外观。点击菜单“窗口”→“标签检查器”，现在我们可以Dreamweaver右栏中看到一个“Flash元素”面板。一些常用的参数：
imageurls，设置要显示的图片
imageLinks，设置点击每张图片后访问的网址。
showControls，定义是否显示Flash相册的播放控制按钮。
slideAutoPlay，定义Flash相册是否自动播放。
transitionsType：定义Flash相册过渡效果的类型，默认为随机效果：Random。
slidedelay：图片播放的间隔时间
title、titleColor、titleFont、titleSize：
添加自定义的相册标题、颜色、字体、大小等值。
frameShow、frameThickness、frameColor：用于定义Flash相册是否有边框及边框宽度、颜色值。
5& 插入Flash Paper
1．概念：office文档转换成的Flash文件，所以叫做“Flash Paper”，Paper就是文档的意思。
2．插入方法：选择菜单“插入记录”&“媒体”&“Flash Paper”
插入Flash视频（.flv）
& 1．概念：Flash视频是一种体积小，下载快的视频格式文件。
& 2．插入方法：选择菜单“插入记录”&“媒体”&“Flash 视频”
在影片播放期间控制抗失真。设置越高，影片的观看效果就越好；但这要求处理器速度更快，以使影片在屏幕上正确显示。“低品质”设置意味着更看重显示速度而非外观，而“高品质”设置意味着更看重外观而非显示速度。“自动低品质”意味着首先看重显示速度，但如有可能则改善外观。“自动高品质”意味着首先看重这两种品质，但根据需要可能会因为显示速度而影响外观。
全部显示：使在指定区域中可以看到整个 SWF文件，同时保持 SWF文件的纵横比并避免扭曲；背景颜色的边框可以出现在
SWF文件的两侧。
无边框：近似于全部显示，只是 SWF文件的某些部分可能会被裁剪掉。
严格匹配：整个 SWF文件将填充指定区域，但不保持SWF文件的纵横比并且可能会出现扭曲。
3.视频的类型
累进式下载视频---将Flash视频(FLV)文件下载到站点访问者的硬盘上，然后播放。但是，与传统的“下载并播放”视频传送方法不同，累进式下载允许在下载完成之前就开始播放视频文件。
流视频----- 对 Flash视频内容进行流式处理，并在一段可确保流畅播放的很短的缓冲时间后在
Web页面上播放该内容。
四、插入音频
1．& 现有有的声音文件：
a& MIDI 格式
以 MIDI 格式存储的音频的格式是 .mid 或 .midi。
b& RealAudio 格式
以 RealAudio 格式存储的音频，其扩展名是 .rm 或 .ram。
c& AU 格式
以 AU 格式存储的音频，其扩展名是 .au。
d& WMA 格式
以 WMA 格式存储的音频，其扩展名是 .wma。
e& SND 格式
以 SND 格式存储的音频，其扩展名是 .snd。
f& WAVE 格式
以 WAVE 格式存储的音频，其扩展名是 .wav。
g& MP3 格式 (MPEG)
以 MP3 格式存储的音频，其后缀是 .mp3, 或 .mpga（针对 MPG Audio）。
使用哪种格式？
经常使用的格式： MP3格式，RealAudio 格式，wma格式 ，mid格式
2．& 插入方法：
1）& 直接插入Html标记
&bgsound src="11.mp3" autostart=true
2）插件嵌入到网页中
概念：将声音直接集成到页面中，但访问者具有所选声音文件的适当插件后，声音才可以播放。
作用：可以用作背景音乐，可以在页面上控制播放器外观，声音的开始点和结束点，声音的音量等。
在“设计”视图中，将插入点放置在您要嵌入文件的地方，然后执行以下操作之一：
a：在“插入”栏的“常用”类别中，单击“媒体”按钮，然后从弹出菜单中选择“插件”图标。
b：选择“插入记录 ”&“媒体”&“插件”。
在属性检查器中，单击“链接”文本框旁的文件夹图标以浏览音频文件，或者在“链接”文本框中键入文件的路
通过在适当的文本框中输入值或者通过在“文档”窗口中调整插件占位符的大小，输入宽度和高度。
这些值确定音频控件在浏览器中以多大的大小显示。
第8课：AP DIV元素
一、创建AP DIV元素
什么是Ap Div？
AP元素（绝对定位元素）, 是一种HTML网页元素，一般称为
“层”。即网页内容的容器，包含文本，图像或其他任何可以在HTML文档正文中放入的内容。且可以精确定位在网页中的任何地方。
1、作为容器，可以放置其他网页元素。
2、灵活定位。
在 CS5中，系统使用DIV
标记和CSS技术来实现AP层对象的效果，所以也称绝对定位的DIV标记。
二、编辑AP DIV元素
1、调整层的大小
2、层的层次关系
3、层的首选设置
4、层的对齐
实例：课程预览
三、层的可见性设置
AP面板的使用（选择、命名、隐藏、次序）
层的可见性
简单的层特效
实例：点击控制图片的显示
四、层的溢出与裁切
1．溢出可见性
2．裁切显示
五、层的嵌套
嵌套的含义：嵌套并不表示一个在另外一个里面显示，而是指一个AP元素的代码在另一个AP元素代码的内部。嵌套的AP&&
元素会随着父AP元素的移动而移动，继承父AP元素的可见性。
1、 AP层对象元素的嵌套方法：
1）.将光标置于AP元素内。
2）.工具栏中，插入-布局-拖动“绘制AP Div”到AP元素内。
2、 标尺、辅助线的使用
六、AP DIV与表格的转换
1、不重叠性
2、网格的使用
3、表格与AP DIV的转换
第九课：行 为
一、晃动的图片
1）什么是行为？
可以说是Dreamweaver中最具特色的功能之一，它提供了很多实用的动作，每个动作可以完成特定的任务，为网页添加不少特殊效果。
2）实例制作：晃动的图片
技巧：添加行为的时候一般遵循3个步骤：
选择对象。
添加动作。
调整事件。
对象是指接受事件的主体
事件是触发动态效果的原因，它可以被附加在各种页面元素上，也可以被附加到HTML标记中。常用的事件：鼠标的移动或者点击时，键盘的输入和控制等等。
动作其实是一段网页上的JavaScript代码，这些代码在特定事件被激发时执行，从而实现访问者与Web页进行交互，以多种方式更改页面或执行某些任务。
行为是动作和触发该动作的事件的结合体
注意使用动作的对象必须要有个ID
二、弹窗实例
1行为面板的使用
打开行为面板（快捷方式：Shift+F4）
认识行为面板
显示设置事件&
显示所有事件&
添加行为& &
移动事件顺序&
命令控制菜单&
2实例： 弹出信息
刚刚的实例，对象是：网页正文部分；事件是：onload 页面打开；动作是弹出信息框。
常见事件： OnMouseOver 鼠标经过
&&&&&&&&&&&&&&&&&&&&
OnMouseout& 鼠标离开
&&&&&&&&&&&&&&&&&&&&
OnLoad&&&&&&
&&&&&&&&&&&&&&&&&&&&
OnUnload&&&&
&& 3 实例：弹出网页窗口
三、设置文本行为
1 ) 状态栏文字
2）设置文本域文字（注意使用动作的对象必须要有个ID）
事件解读：
&&&&&&&&&&&&&&&&&&&&&&
onFocus 事件在对象获得焦点时发生
onBlur 事件会在对象失去焦点时发生
onClick 事件会发生在点击时
onDblclick 事件会发生在双击时
onmouseDown 事件会在鼠标按键被按下时发生
onmouseUp 事件会在鼠标按键被松开时发生
onmouseOver 事件会在鼠标指针移动到指定的对象上时发生
onmouseOut 事件会在鼠标指针离开到指定的对象上时发生
onmouseMove 事件会在鼠标指针移动时发生
onkeyDown 事件会在用户按下一个键盘按键时发生
onkeyPress 事件会在键盘按键被按下并释放一个键时发生
onkeyUp键盘按键被松开时发生
四、交换图片实例
该行为可以实现图片的转换，常用来做广告条或产品展示。
五、拖动AP元素
实例：拼图游戏
背景层参数
height: 220
width: 220
background-color: #F9EEF2;
border: 1px solid #009900;
height:110
六、修改属性行为
一种比较灵活的行为，可以通过事件来触发某个对象属性值的变化。
注意：每个被修改属性的对象必须设置唯一的ID。
七、动态菜单实例
八、效果行为的应用
九、特效脚本代码的使用
实例1：跑马灯文字效果
实例2：鼠标特效的使用
实例3：图片展播
1）样式1代码
var widths=282; //图片宽
var heights=164;//高
var counts=4;//图片数量
img1=new Image ();img1.src='sx/1.jpg'; //图片的位置
img2=new Image ();img2.src='sx/2.jpg';
img3=new Image ();img3.src='sx/3.jpg';
img4=new Image ();img4.src='sx/4.jpg';
url1=new Image ();url1.src='http://www.51zxw.net';//图片链接地址
url2=new Image ();url2.src='http://www.51zxw.net';
url3=new Image ();url3.src='http://www.51zxw.net';
url4=new Image ();url4.src='http://www.51zxw.net';
var key=0;
function change_img()
{if(key==0){key=1;}
else if(document.all)
{document.getElementByIdx_x_x("pic").filters[0].Apply();document.getElementByIdx_x_x("pic").filters[0].Play(duration=2);}
eval_r('document.getElementByIdx_x_x("pic").src=img'+nn+'.src');
eval_r('document.getElementByIdx_x_x("url").href=url'+nn+'.src');
i=1;i&=i++){document.getElementByIdx_x_x("xxjdjj"+i).className='axx';}
document.getElementByIdx_x_x("xxjdjj"+nn).className='bxx';
nn++;if(nn&counts){nn=1;}
tt=setTimeout('change_img()',4000);} //图片过渡时间长度
changeimg(n){nn=n;window.clearInterval(tt);change_img();}
document.write('&style&');
document.write('.axx{padding:1px 7border-left:#cccccc 1px
document.write('a.axx:link,a.axx:visited{text-decoration:color:#line-height:12font:9px
sans-background-color:#666;}');
document.write('a.axx:active,a.axx:hover{text-decoration:color:#line-height:12font:9px
sans-background-color:#999;}');
document.write('.bxx{padding:1px 7border-left:#cccccc 1px
document.write('a.bxx:link,a.bxx:visited{text-decoration:color:#line-height:12font:9px
sans-background-color:#D34600;}');
document.write('a.bxx:active,a.bxx:hover{text-decoration:color:#line-height:12font:9px
sans-background-color:#D34600;}');
document.write('&/style&');
document.write('&div
style="width:'+widths+'height:'+heights+'overflow:text-overflow:"&');
document.write('&div&&a
id="url"&&img id="pic"
style="border:0filter:progid:dximagetransform.microsoft.wipe(gradientsize=1.0,wipestyle=4,
motion=forward)" width='+widths+' height='+heights+'
/&&/a&&/div&');
document.write('&div
style="filter:alpha(style=1,opacity=10,finishOpacity=80);background:
#888888;width:100%-2text-align:top:-12position:margin:1height:12padding:0margin:0border:0"&');
i=1;i&counts+1;i++){document.write('&a
href="javascript:changeimg('+i+');" id="xxjdjj'+i+'" class="axx"
target="_self"&'+i+'&/a&');}
document.write('&/div&&/div&');
change_img();
2）& 样式2代码
以下代码放入&head&&/head&之间
&style type="text/css"&
* { margin:0; padding:0; word-break:break- }
body { background:#FFF; color:#333; font:12px/1.6em Helvetica,
Arial, sans- }
h1, h2, h3, h4, h5, h6 { font-size:1 }
a { color:#0287CA; text-decoration: }
&a:hover { text-decoration: }
ul, li { list-style: }
fieldset, img { border: }
legend { display: }
em, strong, cite, th { font-style: font-weight:
input, textarea, select, button { font:12px Helvetica, Arial,
table { border-collapse: }
html { overflow:-moz-scrollbars- }
#ifocus { width:525 height:245 margin:20 border:1px
solid #DEDEDE; background:#F8F8F8; }
&#ifocus_pic { display:
position: float: width:410 height:225
overflow: margin:10px 0 0 10 }
& #ifocus_piclist { position: }
& #ifocus_piclist li { width:410
height:225 overflow: }
& #ifocus_piclist img { width:410
height:225 }
&#ifocus_btn { display: float:
width:91 margin:9px 9px 0 0; }
& #ifocus_btn li { width:91 height:57
cursor: opacity:0.5; -moz-opacity:0.5;
filter:alpha(opacity=50); }
& #ifocus_btn img { width:75 height:45
margin:7px 0 0 11 }
& #ifocus_btn .current { background:
url(http://zzjs.net/by yourself) no- opacity:1;
-moz-opacity:1; filter:alpha(opacity=100); }
&#ifocus_opdiv { position: left:0;
bottom:0; width:410 height:35 background:#000; opacity:0.5;
-moz-opacity:0.5; filter:alpha(opacity=50); }
&#ifocus_tx { position: left:8
bottom:8 color:#FFF; }
& #ifocus_tx .normal { display: }
type="text/javascript"&
function $(id) { return document.getElementByIdx_x_x(id); }
function addLoadEvent(func){
&var oldonload = window.
&if (typeof window.onload != 'function') {
& window.onload =
& window.onload = function(){
&& oldonload();
&& func();
function moveElement(elementID,final_x,final_y,interval) {
& if (!document.getElementByIdx_x_x) return
& if (!document.getElementByIdx_x_x(elementID))
& var elem =
document.getElementByIdx_x_x(elementID);
& if (elem.movement) {
clearTimeout(elem.movement);
& if (!elem.style.left) {
elem.style.left = "0px";
& if (!elem.style.top) {
elem.style.top = "0px";
& var xpos = parseInt(elem.style.left);
& var ypos = parseInt(elem.style.top);
& if (xpos == final_x
&& ypos == final_y) {
& if (xpos & final_x) {
&&& var dist
= Math.ceil((final_x - xpos)/10);
&&& xpos =
& if (xpos & final_x) {
&&& var dist
= Math.ceil((xpos - final_x)/10);
&&& xpos =
& if (ypos & final_y) {
&&& var dist
= Math.ceil((final_y - ypos)/10);
&&& ypos =
& if (ypos & final_y) {
&&& var dist
= Math.ceil((ypos - final_y)/10);
&&& ypos =
& elem.style.left = xpos + "px";
& elem.style.top = ypos + "px";
& var repeat =
"moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
& elem.movement =
setTimeout(repeat,interval);
function classNormal(iFocusBtnID,iFocusTxID){
&var iFocusBtns=
$(iFocusBtnID).getElementsByTagName_r('li');
&var iFocusTxs =
$(iFocusTxID).getElementsByTagName_r('li');
&for(var i=0;
i&iFocusBtns. i++) {
& iFocusBtns[i].className='normal';
& iFocusTxs[i].className='normal';
function classCurrent(iFocusBtnID,iFocusTxID,n){
&var iFocusBtns=
$(iFocusBtnID).getElementsByTagName_r('li');
&var iFocusTxs =
$(iFocusTxID).getElementsByTagName_r('li');
&iFocusBtns[n].className='current';
&iFocusTxs[n].className='current';
function iFocusChange() {
&if(!$('ifocus'))
&$('ifocus').onmouseover = function(){atuokey =
&$('ifocus').onmouseout = function(){atuokey =
&var iFocusBtns =
$('ifocus_btn').getElementsByTagName_r('li');
&var listLength = iFocusBtns.
&iFocusBtns[0].onmouseover = function() {
& moveElement('ifocus_piclist',0,0,5);
& classNormal('ifocus_btn','ifocus_tx');
& classCurrent('ifocus_btn','ifocus_tx',0);
&if (listLength&=2) {
& iFocusBtns[1].onmouseover = function() {
moveElement('ifocus_piclist',0,-225,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',1);
&if (listLength&=3) {
& iFocusBtns[2].onmouseover = function() {
moveElement('ifocus_piclist',0,-450,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',2);
&if (listLength&=4) {
& iFocusBtns[3].onmouseover = function() {
&moveElement('ifocus_piclist',0,-675,5);
classNormal('ifocus_btn','ifocus_tx');
classCurrent('ifocus_btn','ifocus_tx',3);
setInterval('autoiFocus()',5000);
var atuokey =
function autoiFocus() {
&if(!$('ifocus'))
&if(atuokey)
&var focusBtnList =
$('ifocus_btn').getElementsByTagName_r('li');
&var listLength = focusBtnList.
&for(var i=0; i&listL i++)
& if (focusBtnList[i].className == 'current')
var currentNum =
(currentNum==0&&listLength!=1
& moveElement('ifocus_piclist',0,-225,5);
& classNormal('ifocus_btn','ifocus_tx');
& classCurrent('ifocus_btn','ifocus_tx',1);
(currentNum==1&&listLength!=2
& moveElement('ifocus_piclist',0,-450,5);
& classNormal('ifocus_btn','ifocus_tx');
& classCurrent('ifocus_btn','ifocus_tx',2);
(currentNum==2&&listLength!=3
& moveElement('ifocus_piclist',0,-675,5);
& classNormal('ifocus_btn','ifocus_tx');
& classCurrent('ifocus_btn','ifocus_tx',3);
&if (currentNum==3 ){
& moveElement('ifocus_piclist',0,0,5);
& classNormal('ifocus_btn','ifocus_tx');
& classCurrent('ifocus_btn','ifocus_tx',0);
(currentNum==1&&listLength==2
& moveElement('ifocus_piclist',0,0,5);
& classNormal('ifocus_btn','ifocus_tx');
& classCurrent('ifocus_btn','ifocus_tx',0);
(currentNum==2&&listLength==3
& moveElement('ifocus_piclist',0,0,5);
& classNormal('ifocus_btn','ifocus_tx');
& classCurrent('ifocus_btn','ifocus_tx',0);
addLoadEvent(iFocusChange);
以下代码为：复制到需要展示的位置
&div id="ifocus"&
id="ifocus_pic"&
& &div id="ifocus_piclist"
style="left:0; top:0;"&
href="#"&&img src="cimg/11.jpg"
alt="zzjs net"& onload="return imgzoom(this,600);"
onclick="javascript:window.open(this.src);"
style="cursor:"/&&/a&&/li&
href="#"&&img src="cimg/22.jpg"
alt="zzjs net"& onload="return imgzoom(this,600);"
onclick="javascript:window.open(this.src);"
style="cursor:"/&&/a&&/li&
href="#"&&img src="cimg/33.jpg"
alt="zzjs net"& onload="return imgzoom(this,600);"
onclick="javascript:window.open(this.src);"
style="cursor:"/&&/a&&/li&
href="#"&&img src="cimg/00.jpg"
alt="zzjs net"& onload="return imgzoom(this,600);"
onclick="javascript:window.open(this.src);"
style="cursor:"/&&/a&&/li&
id="ifocus_opdiv"&&/div&
id="ifocus_tx"&
class="current"&视频教学：www.51zxw.net&/li&
class="normal"&专注于网页特效及广告代码。&/li&
class="normal"&找js特效，来这里就对啦，做最帅最酷的js特效网站。&/li&
class="normal"&站长，网页设计师，看了都会喜欢的网站，收藏起来吧。&/li&
id="ifocus_btn"&
class="current"&&a
href="&#ZC_BLOG_HOST#&?cat=12"
target="_blank"&&img
src="cimg/11.jpg" alt="" onload="return imgzoom(this,600);"
onclick="javascript:window.open(this.src);"
style="cursor:"/&&/a&&/li&
class="normal"&&a
href="&#ZC_BLOG_HOST#&?cat=10"
target="_blank"&&img
src="cimg/22.jpg" alt="" onload="return imgzoom(this,600);"
onclick="javascript:window.open(this.src);"
style="cursor:"/&&/a&&/li&
class="normal"&&a
href="&#ZC_BLOG_HOST#&?cat=5"
target="_blank"&&img
src="cimg/33.jpg" alt="" onload="return imgzoom(this,600);"
onclick="javascript:window.open(this.src);"
style="cursor:"/&&/a&&/li&
class="normal"&&a
href="http://www.zzjs.net"
target="_blank"&&img
src="cimg/00.jpg" alt="" onload="return imgzoom(this,600);"
onclick="javascript:window.open(this.src);"
style="cursor:"/&&/a&&/li&
第十章 CSS样式表的应用
如果说目前在Web设计和开发技术领域，什么是非常“火”的新技术，CSS/DIV页面的布局无疑是其中之一
1．CSS的概念
CSS（Cascading Style
Sheet），中文译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
对于一个网页设计者来说，HTML语言一定不会感到陌生，因为它是所有网页制作的基础。但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。本课从CSS的基本概念出发，介绍CSS语言的特点，以及如何在网页中引入CSS，并对CSS进行初步的体验。（其实我们在前面的课程中已经接触到）
作用：例子演示。
从CSS对标记的控制入手，讲解CSS的初步知识以及编辑方法。希望大家能够掌握下一面几个方面的内容：
标记的概念&&
传统HTML的缺点
type="text/css"&
body,td,th {
font-size: 12
color: #FF0000;
& 特点：1） 灵活控制网页中的每个元素的样式
2） 把内容和格式处理相分离，提高工作效率
注：CSS是1996年由W3C审核通过，并且推荐使用的。简单的说CSS的引入就是为了使得HTML能够更好的适应页面的美工设计。它以HTML为基础，提供了丰富的格式化功能，如字体、颜色、背景、整体排版等等，并且网页设计者可以针对各种可视化浏览器设置不同的样式风格，包括显示器、打印机、打字机、投影仪、PDA等等。CSS的引入随即引发了网页设计的一个又一个新高潮，使用CSS设计的优秀页面层出不穷。
2.如何编辑CSS样式
1) 属性面板快捷操作
2）使用CSS样式面板
A．管理CSS规则按钮（添加按钮、链接按钮、修改按钮、删除按钮）
B．显示规则列表（显示全部元素的样式、显示当前编辑元素的样式）
C．显示所选规制属性
D．查看CSS属性视图按钮（分类、按字母排列、显示设置）
3）手工输入代码
3.CSS选择器
选择器（selector）是CSS中很重要的概念，所有HTML语言中的标记都是通过不同的CSS选择器进行控制的。用户只需要通过选择器对不同的HTML标签进行控制，并赋予各种样式声明，即可实现各种效果。希望大家能够掌握以下几个方面的内容：
标记选择器& （对标记起作用）
类别选择器 ID选择器
同一个Id选择器不能同时出现在两个标记中的，原因是id不但用于CSS同时也是javascript语法的一个目标设置。所以相同的id名称会造成混乱。
4.小试牛刀-css美化页面
1） 设置网页属性设置（字体12像素、黑色；背景图片bg.gif；边距均为0）
2） 创建表格边框样式 .line& （颜色#CC66FF）
3)& 设置底部文字的样式 .white （字体白色）
4） 美化输入文本框样式 .input
5．选择器的复合声明
在利用CSS选择器控制HTML标记时，除了每个选择器的属性可以一次声明多个，选择器本身也可以同时声明多个，并且任何形式的选择器包括标记选择器、class类别选择器、ID选择器等都是合法的。
6． CSS的嵌套与继承
1）选择器的嵌套
2继承，简单的说就是将各个HTML标记看作一个个容器，其中被包含的小容器会继承所包含它的大容器的风格样式。我们在这里从页面各个标记的父子关系出发，讲解CSS的继承。
7. 应用CSS到网页中
在对CSS有了大致的了解后，便希望使用CSS对页面进行全方位的控制。我们在这里主要介绍如何使用CSS控制页面，以及其控制页面的各种方法，包括行内样式、内嵌式、链接式、导入式等。并最后探讨各种方式的优先级问题。希望大家能够掌握以下几个方面的内容：
内嵌式&&&&
（写在head头部信息中）
行内样式&&
（写到html标记里面）
链接式&&&&
（适合多个页面使用）
各种方式的优先级问题
行内样式》内嵌式& 》链接式
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。
