在基本的CSS Adobe Dreamweaver

html 和CSS的基础知识教程Adobe Dreamweaver

本教程的目的是介绍的概念中使用的CSS Adobe Dreamweaver和 html 网页设计师谁不熟悉的CSS在网页设计. 主张的CSS层叠样式表，是一个系统的设计，以增加您的网页和网页内容.

在阅读本的CSS教程你应该有一个基本的感觉如何使用CSS的Dreamweaver. 本指南中，我们将创建一个空白文件, 创建的CSS风格, 插入机管局股利网页, 插入图像, 然后创建一个快速导航菜单，并指定CSS属性的内容的网页. 该计划在本教程和截图是Adobe Dreamweaver CS3.

亚伯拉罕查芬 Creativecow.net, 坎布里亚, 美国加利福尼亚州 © 2007 Creativecow.net. 保留所有权利.

html 文件:
创建一个新的空白文档，然后将它保存到你的工作开始. 我倾向于永远保存文件之前，我做任何事情，这样我就可以快速保存时使用的快捷方式（ cntrl +一个S ）. 当您创建一个空白文件Dreamweaver您的网页已经在它的内容, 你就不能看到它的设计模式. 查看的内容您可以使用快捷键（ cntrl + 〜 ）之间进行切换设计模式和代码模式或去查看“菜单 代码或查看”菜单 设计.

你应该可以看到应该是这个样子:

这是您的框架内开始 html 文件，是建立了许多标签. 开始每个标记看起来像 这个 和完成每个标记看起来像“ /本”. 整个文件是由“ html “标记上面看起来” html xmlns = “ http://www.W3号.org / 1999/xhtml “ ”因为它有它xmlns修饰语. 结束标记是在最底层的文件“ / html “. 之间的开始和结束“ html “标记有两个主要的标签的 head 和 身体 标记. 的 head 标记是没有看到，但许多重要部件供应和改性剂什么 身体 标记元素的外观. 中的内容 身体 标记的内容，实际上是明显的，通过您的浏览器.

的CSS内容:
之前，我们插入任何内容让我们创建一个CSS样式. 迫切（改变+ F11组合键）切换的CSS样式的框架或进入修改菜单 “的CSS样式. 在右下角有一个小图标，看起来像 . 这将打开一个â € € œnew的CSS ruleâ对话方块. 开始让我们指定的CSS规则， 身体 标记和作的背景颜色从白色的，而不是赤裸裸的白色. 选择“标记”为“选择型”电台. 从“标签”下拉菜单中选择“机构”选择. 选择“此文件只”的“界定”电台和点击“确定”.

一旦你点击“确定” Dreamweaver添加代码到您的 html 文件准备修改 身体 标记使用CSS.

这也将带来了“的CSS规则定义为身体”对话视窗，让您确定您的选择“背景”的分类栏，并选择一个非常浅黄色的背景颜色选择器或 输入＃ ffffcc和新闻 “确定”.

按下“确定”执行Dreamweaver修改的CSS机构 选择 插入一个背景色 财产 和 价值 的＃ ffffcc.

还有许多其他特性，您可以分配给该机构的选择，也可以修改它使用的CSS样式框架:

股利标签:
返回到设计视图（ cntrl + 〜 ） ，并让我们插入一个DIV标记的去插入“菜单 布局对象” DIV标记, 这将带出的A € € œinsert股利塔加对话方块. （股利标记是最常用的标记进行不同内容的网页设计的CSS ;如图片, 文字, 或视频.)

第一场“插入DIV标记”对话方块是插入: 领域. 这是外地指定的DIV标记将插入 html 网页. 默认情况下，它规定为“在插入点”这意味着DIV标记将插入您的光标最后放置在网页. 您也可以选择“开始后的标记”或“年底前标记”把你的DIV标记在不同的位置.

下次您找到“级:“这是一个外地领域，直接关系到你的CSS规则. 的CSS类有一个选择，以期在前面的，如“.级“. 班用于指定一个财产或财产的许多项目中的一个网页. 我们没有任何类别界定尚未在本文件中，所以没有什么可以转让尚未. 在“编号:“外地也是空白，因为没有身份证界定我们的CSS. ID是用来分配财产或财产的一个项目在一个网页和CSS代码的井字号收到如“＃编号“. 因为我们既没有这些单击“新的CSS样式” ，我们将定义一个新规则.

这个时候选择“类”作为选择类型, 输入“ Cool级 ”作为, 选择“该文件只是”并按下“确定”. 让我们设置的背景颜色与本级酷蓝色选择“背景”下的类别和设置“背景颜色” ，以类似＃ 00ccff. 现在设置边框颜色为黑线薄点击“边界”的类别，然后选择坚实的风格从下拉和1像素的宽度和黑色（ ＃ 000000 ）作为颜色. 或者你可以更富有创造性，如果您选择. 现在让我们来设定一个小轧在我们的规则通过点击“盒子” ，在分类栏，键入“ 5 ”为“顶端: 填充“这将指派填充不仅顶端，但各方如果您离开”同一“的复选框. 按下“确定”和Dreamweaver将创建一个新的阶级统治中的CSS样式标记三个属性.

您的“插入DIV标记”对话方块，现在也有其阶级外地填入“ cooltag ” -按“确定”和Dreamweaver将编写代码到您的网页与地方持有的文字标记的新 div.

此线将得到我们的课堂，我们创建的股利分配给所有元素标记和标记内.

图像:
现在让我们来插入图片，并指派给它的阶级.
把你的光标移动以外的股利按一下它以外的任何地方内的网页. 从插入“菜单 转到图片（ cntrl +按ALT +一）. 选择任何形象您可能可以在您的计算机上，然后按下“确定”. 您可以跳过下一个对话方块的比赛“确定” ; Dreamweaver将图像到您的网页. 右击图片并选择从菜单中的CSS样式“ Cool级. 这将指派前定义类的形象;给它的背景颜色, 填充, 和边界，我们给予“.Cool级“. Adobe Dreamweaver应该插入代码与此类似:

权力的CSS:
是什么让强大的CSS是能够返回并进行修改后，您的风格和它的所有因素的影响您指定的方式为. 中的CSS样式内应该可以看到“所有规则”和你的风格“.Cool级“. 点击 .Cool级 ，然后选择的价值为背景色（ ＃ 00ccff ）. 使用颜色选择器选择不同的颜色, 如（ ＃ 66ffff ）. 现在，您已成功使用CSS中Dreamweaver. 唯一的代码，改变是在CSS和它同时适用于在 div 和 img.

建立一个快速导航菜单
现在的内容 div 标记，我们将打破它除了和使之成为一个导航列表.

把每个字自己的行，按输入您的光标inbetween每个单词. 强调所有的话，然后右击然后选择列表“无序列表. 你现在有一个项目符号的列表，但我们需要一些造型，以适用于它，所以我们需要建立一个法治.

单击添加按钮的CSS 从框架的CSS样式. 有很多方法可以转让的作风名单, 我们可以创建一个新的类别，要求它像“.List级 “和适用于每个 李 标记的决策 李 级=“李st级“ ，但这个例子中，我们将创建一个规则，所有 李 标签. 选择“高级”电台和输入“李”在选择外地. “李”代表名单. 选择“该文件只是”并按下“确定”.

让我们消除子弹, 使字体颜色和字体白色重量大胆. 同类别选择选择大胆从“重量”下拉，选择白色（ ＃ ffffff ）的颜色. 从列表里选择类没有从“类型”下拉菜单，然后按下“确定”. Adobe Dreamweaver创建的CSS代码中的影响“李“标签.

有一个正确的导航菜单中的项目应该改变你将鼠标放在他们. 做到这一点，我们需要添加一个行为. 去窗口“菜单 行为（转向+ F4键）. 查看所有活动通过点击“显示所有事件”按钮 . 确保您的光标在一个清单项目的行为，以便适用于清单项目，而不是别的. 在onmouseover外地输入 这个.类= ' Cool级 '. “这”指的是标签“礼”类告诉浏览器您要更改的类，以 Cool级. 在外地类型onmouseout 这个.类= '' （这两个'商标没有报价）. 这使得浏览器返回的类名的李标签回到没有当鼠标离开的元素. 您现在已经采用了行为中的1个项目的清单.

获得行为必须适用于所有的内容您必须重复前面的步骤你的光标在每个列表元素或代码复制并粘贴在代码视图. 最终的结果在代码视图看起来应该:

在我们结束这个教程我们应该设定的光标移动到手不言而喻的名单将像正常航行.
在选择范围内的CSS样式李. 底部的“属性的”礼“是”添加属性“链接，点击它并选择”光标“从下拉. 输入“指针”的价值，如果它不是在预置.

结论
按下F12 ，并检查您做什么. 它可能不会看起来太漂亮，但应该可以让您觉得在如何的CSS Dreamweaver与 html 以及它的在您的浏览器.

发挥各地和记住的乐趣!