最大的网站策划、网站运营、网络营销人才免费学习、培训、认证、展示、交流、工作平台,服务国家经济建设与民族伟大复兴!
发新话题
打印

谁哪有完整的dreamweaver 8.0 教程,重谢

Dreamweaver 8.0基础教程第四章:-制作多媒体页面

通过前面三课的学习,相信你已经能制作出一个简单的网页了,很有成就感吧^_^
  
  不过,一个优秀的网站应该不仅仅是由文字和图片组成的,而是动态的、多媒体。为了增强网页的表现力,丰富文档的显示效果,我们可以向其Flash动画、Java小程序、音频播放插件等多媒体内容。
  
  一、插入Flash动画
  
  1、插入Flash
  
  为了合理的安排这一课的页面元素,在插入Flash动画之前,让我们先来复习一下表格布局吧^_^
  
  打开03.html,设置页面属性,在弹出的“页面属性”对话框中,“外观”项设置字体为“宋体”,字号为16px,文本颜色为#F282A8,背景图像为img/008.JPG,上边距为50px、下、左、右的边距都为0。“链接”项选择始终无下划线,链接颜色为#F282A8,已访问链接为#F5E458。
  
  现在我们开始布局~^_^~
  
  (1)插入一个1行1列的表格(表格1),表格的宽度为726px,边框粗细为0,单元格边距为0、单元格间距为1,背景颜色为#892321,将表格居中对齐。
  (2)插入一个3行2列的表格(表格2),表格的宽度为100%,边框粗细为0,单元格边距和单元格间距都为0,背景颜色#6DCFF6。设置第一行左边单元格的宽为173px,高为137px,设置第二行的高为238px,将第三行的两个单元格合并,高度为50px。在第一行左侧单元格插入图片img/102.gif,在右侧单元格插入图片img/101.jpg。在第三行将光标水平居中,输入文字“版权所有©闪客启航”
  (3)在表格2第二行左侧单元格插入一个6行一列的表格(表格3),表格宽度为95%,边框和单元格边距为0,单元格间距为5,将表格居中对齐。第一行高度为15,其余各行高度都为40。
  (4)在表格2右侧单元格插入一个1行2列的表格(表格4),表格宽度为550px。边框、单元格边距和间距都为0。
  
  好啦~我们完成了页面的布局,开始插入页面元素。
  
  将光标放置在表格4右侧单元格中,单击常用快捷栏中的媒体按钮,然后在弹出的列表中选择Flash。
  
   点击图片
来源:TNTBBS
  
  弹出“选择文件”对话框,选择swf文件夹中的huaduo.swf文件。单击“确定”按钮后,插入的Flash动画并不会在文档窗口中显示内容,而是以一个带有字母F的灰色框来表示。
  
  在文档窗口单击这个Flash文件,就可以在属性面板中设置它的属性了。
  
   点击图片
来源:TNTBBS
  
  勾选“循环”复选框时影片将连续播放,否则影片在播放一次后自动停止。
  通过勾选“自动播放”复选框后,可以设定Flash文件是否在页面加载时就播放。
  在“品质”下拉列表中可以选择Flash影片的画质,以最佳状态显示,就选择“高品质”。
  “对齐”下拉列表用来设置Flash动画的对齐方式,为了使页面的背景在Flash下能够衬托出来,我们可以使Flash的背景变为透明。单击属性面板中的“参数”按钮,打开“参数”对话框,设置参数为wmode,值为transparent。
  
   点击图片
来源:TNTBBS
  
  这样在任何背景下,Flash动画都能实现透明背景的显示。
  
  2、插入Flash文本
  
  我们将光标放置在表格3第二行的单元格中,用Flash文本制作导航栏目。单击常用快捷栏的媒体按钮,在列表中选择Flash文本,弹出“插入Flash文本”对话框,字体随意,大小22px,颜色设置为#F5E458,转滚颜色为#54C994,文本为“图片素材”,背景颜色#6DCFF6,选择自己需要的路径链接。同样方法我们分别在表格3的第3、4、5、6行制作“代码素材”、“Flash动漫”、“精美壁纸”和“音频视频”等栏目。
  
  3、插入Flash按钮
  
  我们在将光标放置于插入Flash按钮的位置,单击常用快捷栏的媒体按钮,在列表中选择Flash按钮,弹出“插入Flash按钮”对话框。
  
   点击图片
来源:TNTBBS
  
  “样式”用来选择按钮的外观,“按钮文本”用来输入按钮上的文字,“字体”和“大小”用于设置按钮上文字的字体和大小,字号变大,按钮并不会跟着改变。
  
  “链接”用于输入按钮的链接,可以是外部链接,也可以是内部链接。“目标”用来设置打开的链接窗口。
  
  如果需要修改Flash按钮对象,可以先选中它,然后在属性面板中单击“编辑”按钮,会自动弹出刚才的“插入Flash按钮”对话框,更改它的设置就可以了。
  
  4、插入FlashPaper
  
  我们还可以在网页中插入 Macromedia FlashPaper 文档。在浏览器中打开包含 FlashPaper 文档的页面时,浏览者能够浏览 FlashPaper 文档中的所有页面,而无需加载新的 Web 页。也可以搜索、打印和缩放该文档。
  
  在“文档”窗口中,将光标放放在页面上想要显示 FlashPaper 文档的位置,然后选择“插入”>“媒体”>“FlashPaper”。
  
  在“插入 FlashPaper”对话框中,浏览到一个 FlashPaper 文档并将其选定。
  
  如果需要,通过输入宽度和高度(以像素为单位)指定 FlashPaper 对象在网页上的尺寸。 FlashPaper 将缩放文档以适合宽度。
  
  单击“确定”在页面中插入文档。 由于 FlashPaper 文档是 Flash 对象,因此页面上将出现一个 Flash 占位符。
  
  如果需要,在属性检查器中设置其他属性。
  
  5、插入Flash视频
  
  请参见玉树老师的教程(在上面的FlashPaper文档中)。
二、插入声音
  
  声音能极好的烘托网页页面的氛围,网页中常见的声音格式有WAV、MP3、MIDI、AIF、RA、或Real Audio格式。
  
  1、添加背景音乐
  
  在页面中可以嵌入背景音乐。这种音乐多以MP3,MIDI文件为主,在DW中,添加背景音乐有两种方法,一种是通过手写代码实现,还有一种是通过行为实现。
  
  在HTML语言中,通过< BGSOUNG>这个标记可以嵌入多种格式的音乐文件,具体步骤是
  
  我们将01.mid音乐文件存放在med文件夹里。
  
  打开03.html网页,我们为这个页面添加背景音乐
  
  切换到DW的“拆分”视图,讲光标定位到< /body>之前的位置,在光标的位置写下下面这段代码:< bgsound src=med/01.mid>,如下图所示。
  
   点击图片
来源:TNTBBS
  
  按下F12键,在浏览器中查看效果,我们可以听见背景音乐声。
  
  如果希望循环播放音乐,将刚才的源代码修改为以下代码即可: < bgsound src="med/01.mid" loop="true">
  
  2、嵌入音乐
  
  嵌入音频可以将声音直接插入页面中,但只有浏览者在浏览网页时具有所选声音文件的适当插件后,声音才可以播放。如果希望在页面显示浏览器的外观,可以使用这种方法。
  
  打开02.html网页,将光标放置于我们想要显示播放器的位置。
  单击快捷栏上的“媒体”按钮,从下拉列表中选择“插件”。
  弹出“选择文件”对话框,在对话框中02.war音频文件。
  
   点击图片
来源:TNTBBS
  
  单击确定按钮后,插入的插件在文档窗口中以下图所示图标来显示。
  
   点击图片
来源:TNTBBS
  
  选中该图标,在属性面板中可以对播放器的属性进行设置:
  
   点击图片
来源:TNTBBS
  
  要实现循环播放音乐的效果,单击属性面板中的“参数”按钮,然后单击“+”按钮,在“参数”列中输入loop,并在“值”列中输入true后,单击“确定”按钮。
  
   点击图片
来源:TNTBBS
  
  要实现自动播放,可以继续编辑参数,在参数对话框的“参数”列中输入autostart,并在值中输入true,单击“确定”按钮。
  
   点击图片
来源:TNTBBS
  
  按下F12键,打开浏览器预览,这个页面实现了嵌入音乐的效果,在浏览器里显示了播放插件。
三、创建链接关系
  
  链接是一个网站的灵魂,一个网站是由多个页面组成的,而这些页面之间依据链接确定相互之间的导航关系。
  
  超级链接是指站点内不同网页之间、站点与Web之间的链接关系,它可以使站点内的网页成为有机的整体,还能够使不同站点之间建立联系。超级链接由两部分组成:链接载体和链接目标。
  
  许多页面元素可以作为链接载体,如:文本、图像、图像热区、动画等。而链接目标可以是任意网络资源,如:页面、图像、声音、程序、其他网站、Email甚至是页面中的某个位置 -- 锚点。
  
  链接的类型
  
  如果按链接目标分类,可以将超级链接分为以下几种类型:
  
  * 内部链接:同一网站文档之间的链接。
  * 外部链接:不同网站文档之间的链接。
  * 锚点链接:同一网页或不同网页中指定位置的链接。
  * E-mail链接:发送电子邮件的链接。
  
  1、关于链接路径
  
  绝对路径,为文件提供完全的路径,包括适用的协议,例如http、ftp,rtsp等。 http://www.163.com ftp://202.136.254.1/
  
  相对路径,相对路径最适合网站的内部链接。如果链接到同一目录下,则只需要输入要链接文件的名称。要链接到下一级目录中的文件,只需要输入目录名。然后输入“/“,再输入文件名。如链接到上一级目录中的文件,则先输入”../“再输入目录名,文件名。
  
  根路径:是指从站点根文件夹到被链接文档经由的路径,以前斜杠开头,例如, /fy/maodian.html就是站点根文件夹下的fy子文件夹中的一个文件(maodian.html )的根路径。
  
  2、创建外部链接
  
  不论是文字还是图像,都可以创建链接到绝对地址的外部链接。创建链接的方法可以直接输入地址也可以使用超级链接对话框。
  
  (1)直接输入地址
  
  打开02.html页面,输入并选中文字“闪客启航网页技术区”。
  
  在属性面板中,“链接”用来设置图像或文字的超链接,“目标”用来设置打开方式。
  
  我们在“链接”文本框直接输入外部绝对地址http://bbs.flasher123.com/index.asp?boardid=4,在“目标”项的下拉列表中选择_blank(在一个新的未命名的浏览器窗口中打开链接)。如下图所示。
  
   点击图片
来源:TNTBBS
  
  (2)使用超级链接对话框
  
  打开03.html页面,选中文字“闪客启航”。
  单击常用快捷栏中的“超级链接”按钮。
  
   点击图片
来源:TNTBBS
  
  弹出“超级链接”对话框,我们进行以下各项的设置:
  
  “文本”文本框用来设置超级链接显示的文本。
  “链接”用来设置超链接连接到的路径。
  “目标”下拉列表框用来设置超链接的打开方式,有四个选项。
  “标题”文本框用来设置超链接的标题。
  
  设置好后,单击“确定”按钮,向网页中插入超链接。
  龙腾教程网 http://www.longtengwang.com
  3、创建内部链接
  
  在文档窗口选中文字,单击属性面板“链接”后的 点击图片
来源:TNTBBS按钮,弹出“选择文件”对话框,选择要链接到的网页文件,即可链接到这个网页。
  
  我们也可以拖动“链接”后的 点击图片
来源:TNTBBS按钮到站点面板上的相应网页文件,则链接将指向这个网页文件。
  
  此外,我们还可以直接将相对地址输入到“链接”文本框里来链接一个页面。
  
  4、创建E-mail链接
  
  单击常用快捷栏中的“电子邮件链接”按钮,弹出“电子邮件链接”对话框,在对话框的文本框那输入要链接的文本,然后在E-mail文本框内输入邮箱地址即可。
  
  5、创建锚点链接
  
  所谓锚点链接,是指在同一个页面中的不同位置的链接。
  
  打开一个页面较长的网页,将光标放置于要插入锚点的地方,单击常用快捷栏的“命名锚记”按钮,插入锚点。再选中需要链接锚点的文字,再属性面板中拖动链接后的 点击图片
来源:TNTBBS到锚点上即可。
  
  6、制作图像映射
  
  打开03.html文件,选中102。gif图片,在属性面板中,有不同形状的图像热区按钮,选择一个热区按钮单击。
  
  然后在图像上需要创建热区的位置拖动鼠标,即可创建热区。此时,选中的部分被称着图像热点。
  选中这个图像热点,在属性面板上可以给这个图像热点设置超链接即可。
  
  现在,请发挥你的想象力,巧妙运用各种页面元素来丰富你的网页,把它装扮的更加生动和精彩!
本帖最近评分记录
  • chouqiu 积分 +30 回帖认真,不过我刚才替这位朋友找到了视频 ... 2008-3-16 16:28
引用:
原帖由 huoguo121 于 2008-3-16 15:41 发表  点击图片
来源:TNTBBS
谁哪有完整的dreamweaver 8.0 教程,请和我联系,Q  455098890  e-mail jialb@zzia.edu.cn
重谢
重谢?是什么?给我200诺币吧?


  本套Dreamweaver 8.0 入门基础视频教程由薛欣老师精心录制,中国教程网视频教程制作组合成美化并制作成网络优化版本,授权网页教学网发布。
  教程特点: 1.名师主讲,内容丰富。 2.文件体积小,网络传输速度快,易于观看。 3.具有交互功能,用户可以下载到需要的资源。4、声音和画质都有了很大的提高,给读者更好的学习体验。通过本教程可以让您深入浅出的学会Dreamweaver 8.0。
Dreamweaver8入门基础
第一章 软件简介与设置
1.课程介绍与基础知识
2.软件起始页的用法
3.界面布局与切换
4.定制工具箱
5.代码拆分与设计模式
6.定制实用界面布局
7.标签选择器
8.选取手形和缩放工具
9.显示设置与速度统计
10.属性面板与设置
11.菜单命令快速上手
12.网页色彩搭配
13.HTML基础知识
14.企业识别系统与WWW
第二章 定义站点页面属性
1.制作网站三大原则
2.定义新站点
3.文件面板基础操作
4.创建新网页与网站地图
5.创建新的链接
6.地图模式下修改文件标题
7.自定义根查看链接关系
8.CSS的设置一,外观设置
9.CSS的设置二,链接设置
10.CSS的设置三,标题设置
11.CSS的设置四,跟踪图像
12.基础HTML页面设置
13.本小节HTML基础
14.名词解释,http和URL
第三章 文本与列表控制
1.文本与列表控制学习方案
2.网页标题修改的多种途径
3.征文标题文字格式的设置
4.文字大小颜色与对齐
5.常见问题,文本中输入空格
6.段落切换与强行换行
7.文本编辑基础
8.从外部导入文本内容
9.清理冗余代码
10.列表与排序
11.定义列表
12.插入排版水平线
第四章 链接的使用
1.链接的使用学习计划
2.定义页面链接样式
3.一般链接的常见形式
4.输入法建立第一个链接
5.指向法制作链接
6.快捷键拖动法创建链接
7.插入法建立链接
8.直接用代码建立链接
9.插入标签法建立链接
10.环绕标签法建立链接
11.链接的修改与Email链接
12.制作特殊的Email链接
13.制作下载类链接
14.锚链接的制作
15.网页色彩搭配和上课HTML基础知识

第五章 图像处理
1.图像处理学习计划与目标
2.用菜单插入及设置图片
3.用代码直接插入图片
4.代码状态下为图片添加链接
5.为图片添加提示文本
6.用标签检查器设置图片
7.用属性面板设置图片
8.编辑图像热区
9.调用外部程序编辑图像
10.优化与裁切图像
11.对图像重新取样
12.调整图像亮度和对比度
13.锐化图像
14.插入图像占位符
15.插入鼠标经过图像
16.添加导航条
17.本课HTML基础知识与名词解释

第六章 添加多媒体内容
1.添加多媒体内容学习方案
2.插入FLASH SWF文件
3.插入FLASH按钮
4.插入FLASH文本
5.插入FLASH PAPER
6.插入FLASHVIDEO
7.插入媒体插件
8.插入视频文件
9.插入FLASH元素
10.插入注释
11.插入时间
第七章 表格基础知识
1.表格基础学习计划与目标
2.在页面中插入表格
3.设置表格页眉及辅助功能
4.在表格中添加内容
5.如何导入和导出表格数据
6.导入Excel文件与导出表格
7.选择表格的常用方法
8.插入行或列
9.嵌套表格
10.表格属性设置
11.表格行,列和单元格属性设置

第八章 表格进阶
1.内容提要与学习目标
2.代码模式插入表格、行、单元格
3.在单元格中输入内容
4.代码模式下增加行
5.为表格加边框
6.设置表格宽度和背景色
7.设置表格背景图
8.设置单元格边距
9.设置行颜色
10.设置对齐
11.设置标题行
12.代码合并单元格
13.合并列
14.辅助工具插入代码
15.优化表格
16.格式化表格
17.排序表格
18.标签检查器
19.表格精确设置
20.制作一像素表格
21.网页色彩搭配知识
22.本节HTML基础
第九章 布局模式与层
1.内容提要与学习目标
2.表格扩展模式
3.绘制布局表格
4.绘制布局单元格
5.绘制嵌套表格
6.移动缩放表格
7.插入行和列
8.表格属性与间隔图像
9.使用网格精确绘制
10.使用层布局
11.精确调整层
12.使用菜单创建层
13.层的嵌套
14.层属性
15.可视化剪辑层技巧
16.使用层面板
17.标尺与辅助线使用技法
18.网络使用技法
19.辅助线的精确设置
[url=" target=_blank][/url]
第十章 CSS样式
1.学习内容与目标
2.案例介绍
3.样式面板制作标题样式
4.对照法制作H2样式
5.设置段落样式
6.设置图片样式
7.扶植法制作图片样式
8.用代码创造CSS样式
9.属性面板创建、修改、切换CSS样式
10.CSS“全部”模式的使用
11.CSS“正在”模式的使用
12.附件加外部样式表
13.CSS样式类的使用
14.CSS样式标签的使用
15.CSS样式高级的使用
16.定义在单独的CSS文件
17.修改与删除CSS样式
18.本节名词解释
本帖最近评分记录
  • 風雲閣 积分 +30 回帖认真 2008-3-16 16:38

Dreamweaver 8.0教程第五章:-使用CSS美化页面

层叠样式表 (CSS) 是一系列格式设置规则,它们控制 Web 页面内容的外观。使用 CSS 设置页面格式时,内容与表现形式是相互分开的。页面内容(HTML 代码)位于自身的 HTML 文件中,而定义代码表现形式的 CSS 规则位于另一个文件(外部样式表)或 HTML 文档的另一部分(通常为 < head> 部分)中。使用 CSS 可以非常灵活并更好地控制页面的外观,从精确的布局定位到特定的字体和样式等。  
  
  术语“层叠”是指对同一个元素或 Web 页面应用多个样式的能力。例如,可以创建一个 CSS 规则来应用颜色,创建另一个规则来应用边距,然后将两者应用于一个页面中的同一文本。所定义的样式“层叠”到您的 Web 页面上的元素,并最终创建您想要的设计。  
  
  CSS样式表的创建,可以统一定制网页文字的大小、字体、颜色、边框、链接状态等效果。在Dreamweaver 8中CSS样式的设置方式有了很大的改进,更为方便、实用、快捷。  
  
  一、创建CSS样式  
  
  1、选中菜单“窗口”>“CSS样式”。打开CSS样式面板。  
  
  
  
  2、单击“CSS样式”面板右下角的“新建CSS规则”按钮,打开“新建CSS规则”对话框。  
  
  
  
  在“选择器类型”选项中,可以选择创建CSS样式的方法包括以下三种:  
  
  类:我们可以在文档窗口的任何区域或文本中应用类样式,如果将类样式应用于一整段文字,那么会在相应的标签中出现CLASS属性,该属性值即为类样式的名称。  
  
  标签(重新定义特定标签的外观):重新定义HTML标记的的默认格式。我们可以针对某一个标签来定义层叠样式表,也就是说定义的层叠样式表将只应用于选择的标签。例如,我们为< body>和< /body>标签定义了层叠样式表,那么所有包含在< body>和< /body>标签的内容将遵循定义的层叠样式表。  
  
  高级(ID、伪类选择器等):为特定的组合标签定义层叠样式表,使用ID作为属性,以保证文档具有唯一可用的值。高级样式是一种特殊类型的样式,常用的有4种:
  
  a:link 设定正常状态下链接文字的样式。  
  a:active 设定鼠标单击时链接的外观。  
  a:visited 设定访问过的链接的外观。  
  a:hover 设定鼠标放置在链接文字之上时,文字的外观。  
  
  3、为新建CSS样式输入或选择名称、标记或选择器,其中:  
  
  对于自定义样式,其名称必须以点(.)开始,如果没有输入该点,则DW回自动添加上。自定义样式名可以是字母与数字的组合,但.之后必须是字母。  
  对于重新定义HTML标记,可以在“标签”下拉列表中输入或选择重新定义的标记。  
  对于CSS选择器样式,可以在“选择器”下拉列表中输入或选择需要的选择器。  
  
  4、在“定义在”区域选择定义的样式位置,可以是“新建样式表文件”或“仅对该文档”。单击“确定”按钮,如果选择了“新建样式表文件”选项,回弹出“保存样式表文件为”对话框,给样式表命名,保存后,回弹出“CSS规则定义”对话框。如果选择了“仅对该文档”,则单击“确定”后,直接弹出“CSS规则定义”,在其中设置CSS样式。  
  
  
  
  5、“CSS规则定义”对话框中设置CSS规则定义。主要分为类型、背景、区块、方框、边框、列表、定位和扩展8项。每个选项都可以对所选标签做不同方面的定义,可以根据需要设定。定义完毕后,单击“确定”按钮,完成创建CSS样式。
二、使用CSS样式美化页面  
  
  在“CSS规则对话框”中,我们可以通过类型、背景、区块、方框、边框、列表、定位和扩展项的设置,来美化我们的页面,当然啦,我们在定义某个CSS样式的时候,不需要对每一个项都进行设置,需要什么效果,选择相应的项进行设置就可以了。  
  
  1、文本样式的设置  
  
  新建CSS样式, “选择器类型”为类,名称为 “style1”定义在“仅对该文档”。保存至站点根目录下的CSS文件夹内,弹出“CSS规则定义”对话框,默认显示的就是对文本进行设置的“类型”项。  
  
  字体:可以在下拉菜单种选择相应的字体。  
  大小:大小就是字号,可以直接填入数字,然后选择单位。  
  样式:设置文字的外观,包括正常、斜体、偏斜体。  
  行高:这项设置在网页制作种很常用。设置行高,可以选择“正常”,让计算机自动调整行高,也可以使用数值和单位结合的形式自行设置。需要注意的是,单位应该和文字的单位一致,行高的数值是包括字号数值在内的。例如,文字设置为12pt,如果要创建一倍行距,则行高应该为24pt。  
  变量:在英文种,大写字母的字号一般比较大,采用“变量”中的“小型大写字母”设置,可以缩小大写字母。  
  颜色:设置文字的色彩。  
  
  2、背景样式的设置  
  
  在HTML中,背景只能使用单一的色彩或利用图像水平垂直方向的平铺。使用CSS之后,有了更加灵活的设置。  
  
  在CSS规则定义”对话框左侧选择“背景”项,可以在右边区域设置CSS样式的背景格式。  
  
  背景颜色:选择固定色作为背景。  
  背景图像:直接填写背景图像的路径,或单击“浏览”按钮找到背景图像的位置。  
  重复:在使用图像作为背景的时,可以使用此项设置背景图像的重复方式,包括“不重复”、“重复”、“横向重复”、和“纵向重复“。  
  附件:选择图像做背景的时候,可以设置图像是否跟随网页一同滚动。  
  水平位置:设置水平方向的位置,可以“左对齐“右对齐”、“居中”。还可以设置数值与单位结合表示位置的方式,比较常用的是像素单位。  
  垂直位置:可以选择“顶部”、“底部”、“居中”。还可以设置数值和单位结合表示位置的方式。  
  
  3、区块样式设置  
  
  在CSS规则定义”对话框左侧选择“区块”项,可以在右边区域设置CSS样式的区块格式。  
  
  单词间距“英文单词之间的距离,一般选择默认设置。  
  字母间距:设置英文字母间距,使用正值为增加字母间距,使用负值为减小字母间距。  
  垂直对齐:设置对象的垂直对齐方式。  
  文本对齐:设置文本的水平对齐方式。  
  文字缩进:这是最重要的项目。中文文字的首行缩进就是由它来实现的。首先填入具体的数值,然后选择单位。文字的缩进和字号要保持统一。如字号为12px,像创建两个中文自的缩进效果,文字缩进就应该为18px。  
  空格:对源代码文字空格的控制。选择“正常”,忽略源代码文字之间的所有空格。选择“保留”,将保留源代码中所有的空格形式,包括由空格键、Tab键、Enter键创建的空格。  
  显示:制定是否以及如何显示元素。选择“无”则关闭它被制定给的元素的显示。在实际控制中很少使用。  
  
  4、方框样式的设置  
  
  在前面我们设置过图像的大小、设置图像水平和垂直方向上的空白区域、设置图像是否有文字环绕效果等。方框设置进一步完善、丰富了这些设置。  
  
  在CSS规则定义”对话框左侧选择“方框”项,可以在右边区域设置CSS样式的方框格式。  
  
  宽:通过数值和单位设置对象的宽度。  
  高:通过设置和单位设置对象的高度。  
  浮动:实际就是文字等对象的环绕效果。选择“右对齐”、对象居右。文字等内容从另外一侧环绕对象。选择“左对齐”。对象居左,文字等内容从另一侧环绕。“无”取消环绕效果。  
  清除:规定对象的一侧不许有层。可以通过选择“左对齐”、“右对齐”,选择不允许出现层的一侧。如果在清除层的一侧有层,对象将自动移到层的下面。“两者”是指左右都不允许出现层。“无”是不限制层的出现。  
  “填充”和“边界”:如果对象设置了边框,“填充”是指边框和其中内容之间的空白区域;“边界”是指边框外侧的空白区域。  
  
  5、边框样式设置  
  
  边框样式设置可以给对象添加边框,设置边框的颜色、粗细、样式。  
  
  在CSS规则定义”对话框左侧选择“边框”项,可以在右边区域设置CSS样式的边框格式。  
  
  样式设置边框的样式,如果选中“全部相同”复选框,则只需要设置“上”样式,其它方向的样式与“上”相同。  
  
  宽度:设置4个方向边框的宽度。可以选择相对值:细、中、粗。也可以设置边框的宽度值和单位。  
  颜色:设置边框对应的颜色,如果选中“全部相同”复选框,则其他方向的设置都与“上”相同。  
  
  6、列表样式设置  
  
  CSS中有关列表的设置丰富了列表的外观。在CSS规则定义”对话框左侧选择“列表”项,可以在右边区域设置CSS样式的列表格式。  
  
  类型:设置引导列表项目的符号类型。可以选择圆点、圆圈、方块、数字、小写罗马数字、大写罗马数字、小写字母、大写字母、无列表符号等。  
  项目符号图像:可以选择图像作为项目的引导符号,单击右侧的“浏览”按钮,找到图像文件即可。选择ul标签可以对整个列表应用设置,选中li标签可对单独的项目应用。  
  位置:决定列表项目缩进的程度。选择“外”,列表贴近左侧边框,选择“内”,列表缩进。这项设置效果不明显。  
  
  7、定位样式设置  
  
  “定位”项实际上是对层的设置,但是因为DW提供了可视化的层制作功能,所以此项设置在实际操作中几乎不会使用。  
  
  8、扩展样式的设置  
  
  CSS样式还可以实现一些扩展功能,这些功能集中在扩展面板上。这个面板主要包括3种效果:分页、光标和过滤器。在CSS规则定义”对话框左侧选择“扩展”项,可以在右边区域设置CSS样式的扩展格式。  
  
  分页:通过样式来为网页添加分页符号。允许用户指定在某元素前或后进行分页。分页的概念是打印网页种的内容时在某指定的位置停止,然后将接下来的内容继续打印在下一页纸上。  
  光标:通过样式改变鼠标形状,鼠标放置于被此项设置修饰的区域上的时,形状会发生改变。具体的形状包括:Hand(手)、crosshair(交叉十字)、text(文本选择符号)、wait(Windows的沙漏形状)、default(默认的鼠标形状)、help(带问号的鼠标)、e-resize(向东的箭头)、ne-resize(指向东北方的箭头)、n-resize(向北的箭头)、nw-resize(指向西北的箭头)、w-resize(向西的箭头)、sw-resize(向西南的箭头)、s-resize(向南的箭头)、se-resize(向东南的箭头)、auto(正常鼠标)。)  
  过滤器:使用CSS语言实现过滤器(滤镜)效果。单击“过滤器”下拉列表框旁的按钮,可以看见有多种滤镜效果可供选择。  
  
  滤镜效果 描述  
  Alpha设置透明效果  
  Blru 设置模糊效果  
  Chroma 把指定的颜色设置为透明  
  DropShadow 设置投射阴影  
  FlipH 水平反转  
  FlipV 垂直反转  
  Glow为对象的外边界增加光效  
  Grayscale降低图片的彩色度  
  Invert将色彩、饱和度以及亮度值完全反转建立底片效果  
  Light设置灯光投影效果  
  Mask设置遮罩效果,Color指定遮罩的颜色  
  Shadow设置阴影效果  
  Wave设置水平方向和垂直方向的波动效果  
  Xray 设置X光照效果
三、样式表的其他操作
  
  单击CSS样式面板右上方的扩展按钮,弹出下图所示的菜单。CSS的相关操作都是通过这个菜单上的项目来实现的。
  
  
  
  1、编辑CSS样式  
  
  选中需要编辑的样式类型,选择上图中的“编辑”项或直接单击“编辑样式”按钮,在弹出的“CSS规则定义”对话框中修改相应的设置。编辑完成后单击“确定”按钮,CSS样式就编辑完成了。  
  
  2、应用CSS自定义样式  
  
  鼠标右键单击在网页中被选中的元素,在弹出的快捷菜单中选择“CSS样式”,在其子菜单中选择需要的自定义样式。  
  
  3、附加样式表  
  
  选择“附加样式表”项,打开“链接外部样式表”对话框,可以链接外部的CSS样式文件。  
  “文件/URL”设置外部样式表文件的路径,可以单击浏览按钮,在浏览窗口中找到样式表文件。  
  “添加为”选择“链接”,这IE和Netscape两种浏览器都支持的导入方式。“导入”只有Netscape浏览器支持。
  
  
  
  设置完毕后单击“确定”按钮,CSS文件即被导入到当前页面。  
  
  四、CSS滤镜实例  
  
  1、制作模糊文字效果  
  
  1、新建05.html的文件插入一个1行1列的表格,边框和边距全部设置为0。然后在表格中输入要修饰的文字。  
  2、打开CSS样式面板,创建一个CSS样式,在弹出的“新建样式对话框”做如下设置。  
  3、设置完成后,单击“确定”按钮弹出“CSS样式定义”对话框,在类型设置区域中设置:大小:60,字体:黑体,粗细:粗,颜色:#FF9900。  
  4、要产生文字特效,最重要的是在扩展设置区域中进行特殊设置。  
  Blur滤镜产生像被风吹一样的模糊效果。打开滤镜选项的下拉菜单,对Blur滤镜进行设置:  
  Blur(Add=?, Direction=?, Strength=?)
  Add参数是一个布尔值,一般来说,当滤镜用于图片时取0,用于文字时取1。  
  “Direction=?”模糊方向,以45度为单位改变,“0”为垂直向上,“45”向右上,“90”水平向右,“135”向右下,以依次改变。这里我们设置Direction=90。  
  Strength代表模糊移动值,单位为像素。我们设置Strength=180。  
  设置完成后,点击“确定”。  
  5、在文档编辑区选中文字所在单元格,在属性面板设置文字的样式为.test。  
  保存文件,按F12预览效果。  
  
  在只有HTML的时代,只能实现简单的网页效果。有了CSS样式,网页排版发生了翻天覆地的变化,在Dreamweaver8里,使用CSS样式是如此的简单,而制作出来的效果可以如此的炫目。

Dreamweaver 8.0教程第六章:-使用模板和库

在我们制作网站的过程中,为了统一风格,很多页面会用到相同的布局、图片和文字元素。为了避免大量的重复劳动,可以使用Dreamweaver8提供的模板功能,将具有相同版面结构的页面制作为模板,将相同的元素(如导航栏)制作为库项目,并存放在库中可以随时调用。
  
  一、创建模板
  
  模板的创建有三种方式。
  
  1、直接创建模板
  
  选择“窗口/资源”命令,打开“资源”面板,切换到模板子面板,如下图所示。
  
   点击图片
来源:TNTBBS
  
  单击模板面板上的“扩展”按钮,在弹出菜单中选择“新建模板”这是在浏览窗口出现一个未命名的模板文件,给模板命名。
  
   点击图片
来源:TNTBBS
  
  然后单击“编辑”按钮,打开模板进行编辑。
  编辑完成后,保存模板,完成模板建立。
  
  2、将普通网页另存为模板
  
  打开一个已经制作完成的网页,删除网页中不需要的部分,保留几个网页共同需要的区域。
  
  选择“文件/另存为模板”命令将网页另存为模板。
  
  在弹出的“另存模板”对话框中,“站点”下拉列表框用来设置模板保存的站点,课选择一个选项。“现存的模板”选框显示了当前站点的所有模板。“另存为”文本框用来设置模板的命名。单击“另存模板”对话框中的“保存”按钮,就把当前网页转换为了模板,同时将模板另存到选择的站点。
  
   点击图片
来源:TNTBBS
  
  单击“保存”按钮,保存模板。系统将自动在根目录下创建Template文件夹,并将创建的模板文件保存在该文件夹中。
  
  在保存模板时,如果模板中没有定义任何可编辑区域,系统将显示警告信息。我们可以先单击“确定”,以后再定义可编辑区域。
  
  3、从文件菜单新建模板
  
  选择“文件/新建”命令,打开“新建文档”对话框,然后再类别中选择“模板页”,并选取相关的模板类型,直接单击“创建”按钮即可。”
  
   点击图片
来源:TNTBBS
二、定义可编辑区域
  
  模板创建好后,要在模板中建立可编辑区,只有在可编辑区里,我们才可以编辑网页内容。可以将网页上任意选中的区域设置为可编辑区域,但是最好是基于HTML代码的,这样在制作的时候更加清楚。
  
  在文档窗口中,选中需要设置为可编辑区域的部分,单击常用快捷栏的“模板”按钮,在弹出菜单中选择“可编辑区域”项。
  
   点击图片
来源:TNTBBS
  
  在弹出的“新建可编辑区域”对话框中给该区域命名,然后单击“确定”按钮。新添加的可编辑区域有蓝色标签,标签上是可编辑区域的名称。
  
  如果希望删除可编辑区域,可以将光标置于要删除的可编辑区域内,选择“修改/模板/删除模板标记”命令,光标所在区域的可编辑区即被删除。
  
  这样模板文件就创建好了。
  
  三、其他模板区域
  
  模板中除了可以插入最常用的“可编辑区域”外,还可以插入一些其他类型的区域,分别为“可选区域”、“重复区域”、“可编辑可选区域”和“重复表格”。
  
  1、可选区域
  
  可选区域是模板中的区域,用户可将其设置为在基于模板的文件中显示或隐藏。当要为在文件中显示的内容设置条件时,即可使用可选区域。
  
  2、重复区域
  
  重复区域时可以根据需要在基于模板的页面中负值任意次数的模板部分。重复区域通常用于表格,也可以为其他页面元素定义重复区域。
  
  3、可编辑可选区域
  
  是可选区域的一种,可以设置显示或隐藏所选区域,并且可以编辑该区域中的内容。
  四、使用库
  
  所谓库项目,实际上就是文档内容的任意组合,可以将文档中的任意内容存储为库项目,使它在其它地方被重复使用。
  天梯网的朋友们,给偶点加分鼓励啊!
  1、创建库
  
  在文档窗口中选择需要保存为库项目的内容。
  单击资源面板“库”分类中右下角的“新建库项目”按钮。
  一个新的项目出现在资源面板“库”分类的列表中,预览框中显示预览的效果,还可以给该项目键入新名称。这样,一个库项目就创建好了。
  
  2、插入库
  
  将光标方在网页中需要插入库文件的位置,在资源面板“库”分类中选择需要插入的库项目,直接拖动到光标所在位置即可。
  
  3、更改库
  
  如果修改了库文件,选择“文件/保存”命令,弹出“更新库项目”对话框,询问是否更新网站中使用了该库文件的网页。单击“更新”按钮,将更新网站中使用了该库文件的网页。
  
  五、创建基于模板的页面
  
  1、打开素材csslianxi.html文件,选择菜单栏的文件>另存为模板命令。
  2、在弹出的另存为模板对话框中,在“站点”文本框选择“xmweb”,在“另存为”给模板命名为mo1,点击确定。
  3、弹出是否更改链接的提示,选择“是”。此时,在站点内自动生成一个名为“Templates”的文件夹,名称为mo1.dwt的模板文件被保存在该文件夹中。
  4、鼠标在网页表格的最下一行空白处单击一下,选中状态栏的< table>标签,选择菜单栏的插入>模板对象>可编辑区域命令。
  5、弹出“可编辑区域”对话框,点击“确定”。这样我们就完成了模板的制作。
  6、新建06.html文件,选择菜单栏>窗口>资源命令,打开资源面板。
  7、点击资源面板的“模板”按钮,在资源面板我们就可以看见mo1.dwt文件,选中mo1.dwt,按住鼠标左键直接拖拽到06.html的文档窗口中。即可将该模板应用到06.html中。
发新话题
查看积分策略说明

快速回复主题

选项

[完成后可按 Ctrl+Enter 发布]  预览帖子  恢复数据  清空内容