开启左侧

Dreamweaver4教程全接触

[复制链接]
发表于 2012-2-5 01:49:17 | 显示全部楼层 |阅读模式
Dreamweaver4教程-全接触

09121019413cb0d491614d1b54.gif


适用对象:没有网页制作经验的朋友; Dreamweaver 初级用户。

教学方式:通过实例,辅以详细的操作指示。

一.第一个网页
试一试,制作网页就是如此简单!

  ● 制作第一个网页

二.Dreamweaver 基础

“千里之行,始于足下”,本章是起步教程。

  ● 操作界面
  ● 文档创建
  ● 页面设置
  ● 文本
  ● 图片与超链接

三.Dreamweaver 进阶

本章教你如何严格控制网页元素,让它们在你的手下“服服贴贴”。

  ● 表格
  ● 框架
  ● 图层
  ● 版面(Layout)规划

四.Dreamweaver 高级教程

本章教你制作动态网页技术,让你的网页又玄又酷!

  ● 翻滚图
  ● Dreamweaver中的行为(Behavior)
  ● 等时线制作技术

五.网站建设技术

做一个快速高效的网站设计者!

  ● 模板
  ● 网站建设过程
  ● 主页上传
平度网:www.pingdu.co 平度论坛:bbs.pingdu.co
 楼主| 发表于 2012-2-5 01:49:22 | 显示全部楼层
制作第一个网页

网页制作难吗?说难真地很难,网站定位,实用性与美观,普及性与特殊性之间的矛盾,永远困扰着每一位资深级网页设计者;但说它简单又真地很简单,图片,文字,等等,如果你懂得如何操作 Word ,几乎就能制作自己的网页了。
下面我们来制作一个如图一的网页。在本节教程内,大家不需要记住任何东西,只是跟着我们走就行了,主要目的是体会一下网页制作的"简单" 。

09120920365d42e65f3d6300f3.gif
图一一.打开程序:
双击桌面上的 Dreamweaver 图标,或者在"开始"菜单中选择"程序\Macromedia Dreamweaver 4\Dreamweaver 4",打开程序。操作过程如图 二:

0912092036e39a86485340323d.gif
图二程序打开后的操作界面如 图三:

091209203682ac7968af391cf7.gif
图三图三中有很多浮动面板,现在我们先不管它们的作用与具体使用方法,为了避免影响工作,我们通过点击面板右上角的 "X" 号将所有浮动面板都关掉,最后只保留文档编辑窗口, 如图四:

0912092036b45fc207391932f1.gif
图四
提示:要打开哪些浮动面板,可以通过 Windows 下的相应命令实现。

二.创建网站:
程序打开了,但现在我们还不能直接进行网页制作,首先得解决网页文件的存放位置问题,也就是把这个网页文件放在硬盘上的哪个文件夹(站点)之中。

提示:如果没有进定位,网页制作完成后的效果预览就看不到,更重要的是,它可以解决由于误操作带来的麻烦。所以,随时保存文件是个不错的好习惯。保存的快捷键是:Ctrl+S

1.在操作菜单上找到 Site/New Site ,在 Site Name 中输入任意的字符(注意不要用中文),代表站点的名字,这里我们输入 School ;在 Local Root(根目录) 栏决定将刚才那个站点即文件夹放在什么地方 。如图五:


09120920366ba5a7132018169a.gif
图五2.点击 Local Root 栏旁边的文件夹标志,然后在弹出的操作面板中创建一个叫 Homepage 的文件夹,在这个文件夹中将放置所有网页用到的资料。点击图五中圈出的文件夹图标,并给新建的文件夹命名为 Homepage (当然,你也可以为文件夹取其他名字)。 结果如图六:

09120920366ba5a7132018169a.gif
图六网站创建完毕,最 后结果如图七:
0912092036279a08d7d4e88885.gif

图七3.图七是站点管理窗口,现在我们也不用管它,点击右上角的 "X" 关掉本窗口。然后将本网页文件保存到本站点中(File/Save),起名为 Firstpage,程序会自动为网页文件添加 .htm 的扩展名,表示此文件是一个网页,而不是其他类型的文件。

提示:以后要在同一个网站(即文件夹)中建立新网页,不再需要创建新站点,大家可以直接进入网页制作过程。

二.网页制作:
1.网页分析:
图一中,我们看到,本网页包含两个图片:
Welcome :网页文件的欢迎词,图片可在资料文件中 Image 文件夹内找到,它的名字为 Welcome.gif 。
Girl :网页正文图片,名为:girl.jpg 。
除了图片,还有一条横向分隔线,以及网页正文。

2.具体制作:
添加欢迎图片:Insert/Image(插入图片)命令,然后在下载的 Image 文件夹中找到 welcome.gif 图片,选择" Selec t ",如图八:


0912092036232cb3a6372009b5.gif
图八如果正在制作的网页文件没有储存,随后就会弹出如图九的窗口,提示我们文件由于没有保存,所以图片文件不能以相对地址进行保存。建议大家在网页制作开始时就先进行文件储存,否则每次插入图片时都需要进 行确认,挺费事的。

0912092036a19fd28ff2aee774.gif
图九插 入图片后效果如图十:

0912092036ebc5329245dddddb.gif
图十按回车键,然后为网页添加横向分隔条,点击菜单上 Insert/Horizontal Rule 命 令,最终效果如图十一:
平度网:www.pingdu.co 平度论坛:bbs.pingdu.co
 楼主| 发表于 2012-2-5 01:49:25 | 显示全部楼层
0912092036070bd0581542fa64.gif
图十一下面是我们的网页正文,它由图片与文字构成。
先插入图片:Insert/Image,然后找到 Girl.jpg 图片,打开,如图十二:

0912092036b19035ad2d48c2a8.gif
图十二接着输入文字:用鼠标在图片旁边点一下就可以直接输入文字了,跟在 Word 中的操作是一样的。但请注意,Dreamweaver 中的回车键相当于分段,行间空隙比较大;"Shift+回车键" 相当于分行,行间空隙比较小,所以这里的文字全部只是进行分 行,而不要分段。如

图十三
09120920368eecf085ddd50f17.gif
但你会发现,所有文字都跑到图片下面去了,我们的目的是把文字放在图片右边。这时就需要对图片(girl.jpg)属性进行设置。
请找到如图十四的面板,它叫作属性面板(Properties),是网页制作过程中经常要用到的。如果操作界面上没有此面板,可通过点击 Window/Properties 命令打开此面板。默认面板右下角有个下拉箭头 ,可以打开扩展属性,请点击:


0912092036d27971a6a5ea79a1.gif
图十四先选中女孩图片,再从属性面板的定位属性中选择 Left (居左)。如图十五:

09120920362b7d6313d81aeca5.gif
图十五完成后效果如图十六:

09120920405bb5d7f68530e38d.gif
图十六最后一步,是将抬头最为引人注目的欢迎图片居中。选中欢迎图片,再从如图十四的属性面板的定位属性( a lign )中选择居中。如图十七:

091209204044a3eac8c0739541.gif
图十七最终效果如图一,这样,我们就完成了自己的第一个网页。

三.总结:
前面我们讲了很多,是不是头都看晕了?呵呵,其实网页制作也是设计的一部分,既然是设计就离不开图象与文字,只不过网页的内容更多一些,设计工具与传统工具相比较为特殊而矣。在制作网页时不妨先在头脑中打个草稿,哪个地方放图片,哪个地方放文字,然后用我们刚才谈到的方法做就行了。
"不积篑步,无以致千里",上面我们做了第一个网页,虽然很简单,但大家可以体会到,网页制作并不是想像中的那么高不可攀,经过学习,我们是可以很快地掌握制作技术的。
基础永远是灵活运用的起点,为了制作出一流的网页,首先得将基础打牢。下面我们将进入具体的基础学习。
平度网:www.pingdu.co 平度论坛:bbs.pingdu.co
 楼主| 发表于 2012-2-5 01:49:29 | 显示全部楼层
操作界面



1.网页文档编辑窗口:

本窗口用于网页文件的编辑,其结果与在浏览器中的最终显示相近(即我们所说的"所见即所得"编制方式)。文档编辑窗口上下分别集合了操作菜单,按钮条,以及快速操作面板。如图一 :

091209204043143e03e65b13ab.gif
图一为了便于大家快速掌握,我们省却了菜单与按钮的抽象介绍,以后在实例制作中我们会结合例子进行讲解,让大家不需死记硬背就能灵活掌握这些抽象命令的运用。

2.对象面板:

本面板可以用 Window/Object 命令打开,其作用是在光标处插入对象。对象面板上方有个下拉箭头,点击后可以在多个对象面板中切换,它们分别是:字符(Character),常用(Common),表单(Form),框架(Frames),文件头(Head),隐藏(Invisible),特殊(Special)。这些面板提供了不同的对象以供使用,以后我们将在实例中进行讲解,此处大家只需了解一下就行了。如图二:

0912092040f9b5809588d7cc63.gif
图二菜单条上有个 Insert 命令,用它也可以实现插入对象的目 的。

3.属性面板:

本面板可以用 Window/Properties 命令打开。当选中对象(如文字,图片等),属性面板就会显示其相关属性,同时我们还利用该面板进行各种属性设置与修改。如第一章(制作第一个网页)中,图片居中,图片居左等属性 操作。


09121014155be92312f6931b86.gif
图三4.快速操作面板:

本面板可以用 Windows/Launcher 命令打开,作用在于快速打开其他功能面板。如 图四:


09120920406f13cf170703b4ac.gif
图四大家仔细看一下,你会发现它与文档窗口右下角的快速操作按钮几乎完全一样。因此,本面板常常不用打开,需要使用其他功能面板时只需直接点击文档窗口右下角的快速操作按钮就行了。

5.站点管理窗口:

本窗口可以用 Window/Site Files 命令打开,用于整个站点的管理。 如图五:

09120920406aed5b02c9b0708f.gif
图五6.源代码监控面板:

本面板可用 Window/Code Inspector 命令打开,用于随时监控网页文件的 HTML 源代码 。如图六:

091209204038494b8e9d6f4065.gif
图六提示:为什么要对源代码进行监控?其实,无论是微软的 Frontpage ,Adobe 的 Golive ,以及用起来非常方便趁手的 Dreamweaver ,虽然它们做到了"所见即所得",但要对网页进行精确的定位与控制,常常还得通过对网页的源代码进行手工修改才能达到美仑美焕的结果。因此,我们建议,当你在掌握了本教程后,最好能再学习 HTML 源代码知识,那样会让你的网页制作技术如虎添翼。

7.行为面板:

本面板可以用 Window/Behaviors 命令打开,用于创建网页交互或特 效。如图七:

0912092040a9464912818a7b15.gif
图七Dreamweaver 的行为面板其实是一系列 JavaScript 的特效集成,按照一定的触发事件,激活相应的特效结果。比如当鼠标点击按钮打开另外一幅图,当鼠标移上去弹出一个窗口,或者当页面打开就自动播放一段音乐,等等。

当然,最重要的是,我们不需要懂得一句 JavaScript 语言就可以完全掌握它的特效功能!

8.等时线面板:

本面板可以通过 Window/TimeLine 命令打开,用它可以直接在时间轴中创建 动画。如图八:

0912092040f59569f6797a096b.gif
图八除了上面谈到的各个面板, Dreamweaver 还有诸多其他面板,如图层(Layer),参考(Preference),集合(Assets),CSS ,模板(Templates),历史(History)等面板,关于它们的使用我们将在以后的实例制作过程中进行讲解。
平度网:www.pingdu.co 平度论坛:bbs.pingdu.co
 楼主| 发表于 2012-2-5 01:49:32 | 显示全部楼层
文档创建


一.创建本地网站:

网页是构成网站的主要元素,一个两个单独的网页,是没法组建成一个网站的。所谓的网站,它是一个网页,图片,脚本,多媒体,等等多种元素的集成。一般来说,一个网站的文件构成犹如本地电脑上的文件夹,其中根目录、子目录、子子目录等的关系,构成了网站的内部链接(也就是相对地址,这里的"相对",就是相对于根目录的意思)。

嗯,不说那么深奥,只要你知道网站的创建犹如本地电脑上的文件夹,文件夹中还可以创建新的文件夹与文件,所有网站用到的东西全部放在这个网站(总文件夹)中就行了。

提示:创建本地网站还有一个重要原因,虽然同一个网站的网页可以分散在硬盘上的各个地方,但在进行文件上传时就会出现很大的困难,特别是文件比较多的时候,因为你可能由于文件过于分散而少传了些东西,或者多传了些不需要的东西,总之,非常不方便。

Window/Site Files/New Site ,弹出的站点管理窗口如图一 :

0912092051f87fbd7eee48bf32.gif
图一Site Name:网站名称。

Local Root Folder:本地文件夹位置,也就是把这个网站放在什么地方。

HTTP Adress:HTTP 地址,用以检查 HTML 代码中绝对地址的正误。绝对地址,如 http://www.yahoo.com ,它不是相对于站点中的哪个文件的地址,因此称为绝对地址。本地址可以不填。

Refresh Local File List Automatic :自动刷新文件列表,建议勾选。

Enable Cash:Cash(缓存)的作用在于加速链接更新时的速度,建议勾选。

点按 OK 后弹出站点管理窗口,如图 二。

0912092051d05e9ed1a7ee1465.gif
图二由图二可以看到,站点管理窗口一共分为左右两个窗口,左边窗口是远程目录结构,由于还没有定制远程站点,所以目前是空的;右边窗口是本地目录结构,显示的是刚才建立的本地文件夹。

本地网站已经建好了,但它目前是空的。要建立网页文件,只需在右边窗口中单击鼠标右键,在弹出的菜单中选择 New File ,这时窗口中会新增加一个名为 Untitled.htm 的文件,只需把这个名字改为我们想要的名字,如 index.htm ,就创建了第一个网页文件。要打开这个文件,用鼠标双击它就行了。如 图三:

091209205178b407df51e95ddf.gif
图三提示:站点管理窗口中,右键弹出菜单还有 New Folder 选项,可以用来在站点中创建新文件夹。为什么要创建新文件夹?这是为了使站点管理更为规范。实际制作中,我们常常把站点中的所有图片放到一个文件夹中,并将其命名为 Image ,当然你也可以用诸如 Picture 等其他名称,反正你自己清楚哪个文件夹放置的是什么东西就行了。

通过上面创建新网页文件的办法,我们可以创建任意数目的文件。

提示:上面提到了 index.htm ,作为一个网页,它跟其他网页有所不同吗?其实, index.htm 常常是作为一个网站的"首页"存在的,而其他网页一般都是相对于这个首页的分页面。一个网站中,首页只有一个,分页面却可以是无数个。那么,"首页"的作用是什么呢?我们已经知道,在网络上要查看某个网页,就得在浏览器的地址输入栏中输入网页地址,如 http://www.yahoo.com ,但这个地址只指明了网站地址,并没有具体说明要访问主机上的哪个文件,在这种情况下,首页就成了默认的网页文件。也就是说,在地址输入栏中输入 http://www.yahoo.com 就等于输入了 http://www.yahoo.com/ 。

二.创建网页:

Dreamweaver 中有三种方式创建网页:创建新的空白网页;用模板创建网页;在已有网页基础上进行编辑修改。

1.创建新的空白网页:

在站点管理窗口中创建新网页:如上面提到的 New File 命令可以创建新网页。

在文档编辑窗口中创建新网页:在文档窗口中选择 File/New File 也可以创建新网页。 如图四:

09120920511631f3aa388dda17.gif
图四新创建的网页文件是空白的,没有任何内容,我们可以为它添加各种网页元素。

提示:这里的"空白"指的只是文档编辑窗口中没有内容,如果你打开 HTML 源代码窗口,你会发现它并不是真正"空白"的,还有许多源代码在里面,如图五。不过这些问题,我 们不用管。

091209205173fc862188e53877.gif
图五2.用模板创建网页:

模板创建技术,实现了内容与设计样式的分离,如果修改了模板,Dreamweaver 可以自动对所有用该模板创建的网页进行相应的变动,大大减少了网页设计者的工作量。模板创建技术,我们将在后面谈到,这里就不再累述。

3.编辑修改已存在的网页文件:
在文档编辑窗口中,用 File/Open 命令可以打开一个网页文件(无论它是用什么编辑工具编辑的,只要是网页文件,都可以进行编辑与修改!),修改后别忘了存盘哟。
平度网:www.pingdu.co 平度论坛:bbs.pingdu.co
发表于 2012-2-5 01:49:33 | 显示全部楼层
不错呵呵有机会向你学习
平度网:www.pingdu.co 平度论坛:bbs.pingdu.co
 楼主| 发表于 2012-2-5 01:49:36 | 显示全部楼层
页面设置


现在我们开始学习具体的网页设计了,大家可得打起精神哟。

画一幅画,首先得决定用什么样的纸张,用多大的画纸;网页制作也是这样,首先我们要决定采用多大,哪种样式的网页。对页面属性的设置,可通过菜单命令 Modify/Page Properties 来完成。其设置面板如图一:


0912092040b8126a186d1bee82.gif
图一一.Title:页面标题

在进行网页编辑时,该标题会显示在 Dreamweaver 标题栏上;用浏览器进行查看时,该标题会显示在浏览器的标题栏上。如 yahoo 网站的标题( Title )取为 yahoo ,以跟别的网站进行区分。而且它对于搜索引擎的命中率有着很大的关系。

标题的更改,还可以通过 View 菜单下 Head Content 中的 Title 图标进行修改。(在弹出的属性面板中更改,如没有弹出属性面板,可通过 Window/Properties 命令打开属性面板。)如图 二:


0912092040b3fac14f99ca02ae.gif
图二二.Background Image:背景图片

为网页添加背景图片。

操作步骤:点击 Browse ,在弹出的窗口中找到需要的图片,最后点按 Apply 或 OK 就行了。如 图三:



09120920406a0ef64011ac957b.gif
图三三.色彩设置

Bcakground Color:背景色

Text Color:文字颜色
Visited Links:点击过的链接文字色彩
Links:链接文字色彩
Active Links:点击链接时的文字色彩
这几种色彩可以通过弹出的色板进行选择。

提示:链接的色彩,默认颜色规则是——链接文字为蓝色;点击时色彩变为红色;点击过的链接文字保持为红色。如果你想让自己的链接与众不同,可以通过页面属性设置面板进行改变。

四.页面大小与位置的设定:

Left:页面距屏幕左边界的距离
Top:页面距屏幕上边界的距离
Margin Width:边缘宽度
Margin Height:边缘宽度
它们的关系 如图四:


0912092040be27de61ca82b6a2.gif
图四小技巧:上述四项属性都为 0 时,网页可以与电脑屏幕完全融合,而不会出现网页边界的空白。

五.Document Encoding:文档编码通常采用的是简体中文即 GB2312 编码。
Tracing Image及其下的图片透明度滑块,都是用来进行草图定位的。关于它们的使用,我们将在后面进行讲解。

页面设置完成后,点按 OK 进入页面内容编辑。
平度网:www.pingdu.co 平度论坛:bbs.pingdu.co
 楼主| 发表于 2012-2-5 01:49:41 | 显示全部楼层
文本


Dreamweaver 的"所见即所得"功能,在进行文字与图片的插入时非常直观,它们在编辑器中的样式,基本上跟在浏览器中的最终效果是一致的,因此,我们说只要你会使用 Word ,就能很快掌握 Dreamweaver 的网页制作技术。

一.文本:

文本是网页中最基本的元素,既可以手工逐字逐句地输入,也可以把别的应用程序中文本直接粘贴到网页编辑窗口中。

提示:Dreamweaver 4.0 与以前版本相比,其对中文的支持略有不同。在 4.0 版中,直接从其他应用程序粘贴复制过来的文本的换行符也能被区别出来,也就是说继承了原来文本的排版格式,这个特点,是以前版本所不具备的;但 Dreamweaver 4.0 不支持中文五笔字型输入法,因此在进行中文输入时建议采用其他输入法,或者可以在其他应用程序(如写字板)先输入中文,再直接粘贴复制到 Dreamweaver 4.0 的编辑页面中;对源代码的支持,Dreamweaver 4.0 的感觉也不是很方便。

在网页中插入文本非常简单,但要对其进行精确的控制,就不是那么简单的了。 Dreamweaver 4.0 主要提供了两种方法对文本信息进行精确控制,一种是文本的属性标记,另外一种是层叠样式表(CSS)。

(一).文本属性标记:
1.分段与强制折行:

在 Dreamweaver 中,回车键的功能在于分段;按住 Shift 键同时按回车键,则代表强制折行。两者的区别在于,前者前后的内容属于不同的段落,因此行间距较大;后者同处于一段,只是另起一行,因此行间距比较小。如图一中,左图的文字强制折行,右图文字以回车键分段 :

091209204083c45ff60664d651.gif
图一2.文字属性设置:

对文本的属性设置,可以通过属性面板完成。(Window/Properties)

Format:设置文字大小,Paragraph 属性可以使选中文字独自成为一个段落,Heading 1 ——Heading 6 用来控制文本大小。在 HTML 源代码中,Heading 被简化为 H ,Heading 1 就写成 H 1 ,在这几种格式中, H 1 字体最大,H 6 字体最小。它们的区别如图 二:

09120920409eeaac282ae59f8f.gif
图二Size:也是设置字体大小,不过与 Format 不同的是,Heading 标记通常赋予标题,字体改变大小的同时变为粗体;如果只想改变文字大小,而不想让字体变为粗体,可以用 Size 属性。另外,Size 只对选中文本起作用,而 Format 对整段文字起作用。

它们的区别如 图三:

09120920409eeaac282ae59f8f.gif
图三Font:设置字体类型。下拉框中有多种字体可供选择, 如图四:

0912092040db79e872a7284bca.gif
图四提示:为什么下拉框中每一行选项都罗列了好几种字体呢?这种设置其实是非常有用的,因为我们做出来的网页是要拿给别人看的,但不同的计算机用户,其系统字体也可能不同,为了保证大家都能清楚明了地识别网页上的字体,因此有必要对字体进行多种类型的设置,当用户机器上没有第一种字体时,我们还提供了第二种字体;第二种字体通过不了,那还有第三种......如果都识别不了,那么它就使用浏览器的默认字体。

颜色:选中文字,然后在弹出的色板中进行颜色选择。也可以直接在颜色输入栏中输入颜色的十六进制代码,如常见的红色(#ff0000),绿色(#00ff00),蓝色(#0000ff) 。如图五:

0912092040f096e486e2473091.gif
图五加粗、倾斜:使文字变为粗体字、斜体 字。如图六:

09120920406f960306f246a618.gif
图六居左 091210183828f7b85fbe3a5b97.gif 、居中、居右:使整段文本居左、居中、居右排列。
注意:这里的整段,针对的是 Dreamweaver 的段落概念,也就是用回车键隔开的文本。如果是用 Shift+回车键分出的段落,无论其间空距有多大,由于逻辑上属于一段,这个居中或居左居右命令会同时作用于它的所有内容。

列表清单:分为无序列表与有序列表。所谓有序列表就是有数字顺序的清单列表,无序列表则是用专门的非数字列表符号作为各个项 目的区分。如图七:

0912092040bbd3a570f1079540.gif
图七(二).层叠样式表(CSS)

层叠样式表(Cascading Style Sheets)是 W3C 组织制定的一种网页规范,有利于对网页进一步进行精确控制。由于它的内容比较多,而且网上这方面的资料不少,因此我们在这里只是简单地谈一下它在 Dreamweaver 中的文本控制功能。

提示:前面我们讲到了很多 Dreamweaver 的文本控制功能,为何还要加以 CSS 的辅助?很简单,Dreamweaver 的文本控制功能不足,无论是字体大小,排列方式,还是行间距,等等,它所提供的选择并不多,为了让我们的网页更加美观,更加规范,有必要使用 CSS 。

1.样式表的创建:
Window/CSS Styles ,弹出的面板如图八:

09120920400cc0b7a4b8d6c392.gif
图八单击面板右上角向右的箭头,在弹出的菜单中选择"New Style",如图九:

0912092040d9b784099ee259c9.gif
图九选定后弹出如图十的窗口:
平度网:www.pingdu.co 平度论坛:bbs.pingdu.co
 楼主| 发表于 2012-2-5 01:49:45 | 显示全部楼层
0912092040faa57191099d853d.gif
图十Name:样式表的名字,注意名称前有个点号,其作用在于告诉浏览器这是一个样式类标记,而不是 HTML 标记符号。默认名称为 .unamed ,你也可以自己起一个名字(仅适用于自定义样式表)。

Type:样式表类型,共有三种,它们是:自定义样式表(Make Custom Style),重新定义 HTML 标记(Redefine HTML Tag),使用 CSS 选择器(Using CSS Selector)。

提示:自定义样式表就是自己创建一个新的样式出来;重新定义 HTML 标记,就是用样式表将 HTML 中默认的标记属性改成新属性,凡是网页中用到该已被修改的标记,都会继承新的属性,而原来的属性就不管用了;CSS 选择器主要提供了链接内容的样式修改。

Define:定义作用的范围,New Style Sheet File,即创建一个新的样式表文件;如果该网页已套用样式表文件,还可以在下拉框中找到文件,将新的样式应用到该文件中(也就是改变改文件中的相关设置);This Document Only,则该样式表仅作用于本网页。

这里我们是创建新的样式表,因此选择 Type 中自定义样式表选项,然后点按 O K ,弹出如图十一的面板:

091209204099af4ae497e2fe1b.gif
图十一在此面板上,可以对多种网页元素进行精确控制,如文字类型(Type),背景(Background),区域设置(Block),边界设置(Border),列表设置(List),等等。由于篇幅有限,仅在此列出一些比较常用的设置。

*Type:

Size:文字大小,从下拉框中进行选择。大家可以明显看出,这里提供了对文字大小的更多控制选项。另外,如果你对所有下拉选项都不满意,还可以通过输入数字, 自己定义文字大小。如图十二:

0912092040a66f1389d5ecf264.gif
图十二Line:行间高度,可以是默认的 Normal ,也可以自定义(选择 Value ,然后在 输入框中输入数字)。如图十三:

09120920408137eb6fd3e25710.gif
图十三Decoration:文本修饰属性,包括添加下划线(Underline),上划线(Overline),删除线(Line-through),闪烁(Blink),右边还可以进行颜色的选择。

提示:带"*"号的选项表示不能直接在 Dreamweaver 编辑器中显示,只能在浏览器中才能看到它的效果。

*List:

Type 中提 供了多种类型可供选择,如图十四:

09120920401461e44639de8a30.gif
图十四2.样式表的引用:
样式表的引用有多种方法,这里我们只列出一种最简单的方法以便于大家掌握。

假设我们已经建立了两个新的自定义样式表,名字分别为: .unamed 1 与 .unamed 2 ,如图十五:

0912092051d5a0dd53a57d99a5.gif
图十五.unamed 1 将字体大小 设为 36 ,斜型,红色,如图十六:

0912092051593e88778c1d4f0d.gif
图十六.unamed 2 将 字体大小设为 16 ,蓝色,如图十七:

09120920515e9aed0ace8371a7.gif
图十七在 Dreamweaver 的文档编辑窗口中输入"Welcome to My Homepage

This is my homepage, it's very poor,Now, because it's my first homepage。"字样。结果如图十八:

0912092051c01ccbc9a753e5ba.gif
图十八用鼠标将光标位置移动到第一行文字处,然后点选样式面板上的 .unamed 1 ,这时你将 看到样式表自动套用到文字上了!如图一十九:

0912092051e5ca076025736c04.gif
图一十九同理,光标位置移动到第二行,然后点选样式面板上的 .unamed 2 ,第二个样式表又套用上了!结果如图二十:
平度网:www.pingdu.co 平度论坛:bbs.pingdu.co
 楼主| 发表于 2012-2-5 01:49:47 | 显示全部楼层
09120920511052d89e8884cfc7.gif
图二十提示:Dreamweaver 4.0 在样式表的套用上较以前版本方便多了,既可以直接用于某个段落,也可以直接用于某行对象,而不需再如以前般要在选择下拉单中选择套用了。

Dreamweaver 中对样式表的套用有多种方式,如刚才这种方式我们称为"内嵌式样式表",除此之外,还有内联式样式,链接式样式表,等等。为了不让大家觉得太难,我们就省却了这些内容的介绍,当你在掌握了本教程后,可以再专门就 CSS 进行学习。
平度网:www.pingdu.co 平度论坛:bbs.pingdu.co
您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

 
QQ在线咨询
售前咨询热线
0532-88371356
售后服务微信
pingduwangzhan
快速回复 返回顶部 返回列表