用Dreamweaver建站如何设计CSS?_模板无忧
用Dreamweaver建站如何设计CSS?_Dreamweaver教程
用Dreamweaver建站如何设计CSS?,一般地讲，样式表（style sheet）就是控制网页内容外观的格式化的规则的集合。可以以三种不同的方式在你的页面中使用CSS： 代码式（Inline）：写入到代码中的一次性的样式。内嵌式（Embedded）：可控制一个页面中所有元素的样式表外联式（External）：可控制许多页面中的元素的样式表 事实上，许多站点都根据需要把这三种方式结合起来使用。 在使用CSS时一个需要重点考虑的事实是不同的浏览器以及同一浏览器的不同版本以不同的方式来解析CSS。除了网络浏览器的差异之外，你还要意识到还有很多其他的浏览器，比如听力浏览器，基于电视的浏览器以及Palm pilot和TTY（teletypewriter，远程打字机）一类的手持设备。 最佳习惯是指什么？ 大多数技术都有自己约定俗成的标准。CSS也不例外。虽然并非网络上存在的所有CSS都很规范，但按照现有标准来使用CSS却还是不无裨益的。一般来说，开发人员应尽可能将内容与报告分离开来。这样做的好处在于： 1：增加站点的寿命 不规范的样式表可能在当时觉得很方便，但新版本的浏览器出来以后，很可能就会出现兼容性问题。到时逐页修改站点就是一项非常费时的工作同时也使使用CSS失去了意义。 2：让你的站点对所有的用户以及浏览器都适用。 有些地方的政府已经立法要求网站必须让残障人士也同样可以浏览。为残障认识设计的浏览设备，比如听力浏览器，对CSS规范性要求极其严格。 3：让站点更新和维护更加轻松。 使用方式得当的话，CSS可让你在一个页面中的调整快速应用到所有页面中去。 你首先要做的选择是使用哪一种样式表。当涉及到最佳习惯时，对不同样式表的分析如下： Inline CSS；简单地说，你应该尽量避免使用。除了一些其他的缺点之外，使用Inline CSS意味着你并没有利用到CSS的真正优点，即你并没有将内容与格式分离开。DW使用Inline CSS主要是为了定位页面元素（这些元素在DW的用户界面中称为&层（layer）&），或者为了使用某个DHTML特效，它需要使用Inline 样式的Javascript来改变一个对象的属性。 Embedded CSS：它也不是最理想的，因为它只能对当前页面施加影响。在更新的过程中，如果某一个页面丢失，将会使站点的风格不一致；另外，当用户浏览你的站点时，每一页都要下载一次样式表信息。 External CSS：这是你的第一选择。External CSS可以让所有连接到它的页面保持一致的外观风格；提纲挈领，更改一次，轻松更新所有相关页面；让你的页面体积更小，浏览速度更快。其他的一些最佳习惯将在下文分析具体的CSS特性时提及。 在DW中创建CSS样式表 在DW中创建CSS样式表时（Text 》CSS Style 》New style sheet），在弹出的对话框中，你有两个选择：新样式表文档（New Style Sheet File） 和只用于当前页（This Document Only）。选中&New Style Sheet File &你就开始了创建External CSS的过程。这个选项要求你在真正的创建过程之前先命名样式表并为它选定一个保存位置；另外一个选项，This Document Only，则会直接把相关代码写入到页面的部分。 你也可以在&新样式（New style）&对话框中选择一个现存的样式表来编辑或添加新的定义。 应该连接到External CSS还是导入？ 创建外部样式表以后，你需要把它附加在每个页面上（或是模板）。要这样做，可以在CSS面板上淡季&附加样式表（Attach Style Sheet）&按纽，此时会弹出连接外部样式表 （Link External Style Sheet）对话框，在上面可以浏览到你的目标样式表的名字，找到以后，你可以选择连接（link） 或者导入（import ）此外部样式表。 连接是最常用的方式，选择&link&即可把样式表连接到页面。它会在你的页面中加入下面的标记： 所有支持CSS的浏览器都支持连接选项。如果你想一些比较旧的浏览器（比如Netscape 4.x）也能&看到&这个样式表的话，就要采用下面的方法。 如果你选择&导入&选项，所用的标记为： NetSscape4会完全忽略导入的CSS，而按照连接的CSS来解释页面。这样我们就可以放心使用CSS中的新功能，不必担心浏览器的兼容性问题了。 CSS属性检查器 在DW的属性检查器中可以轻易切换到CSS模式。缺省情况下，属性检查器会显示原始的HTML模式下字体标签。点击字体下拉菜单旁边的小&A&，你就可以看到目前可用的CSS样式表，而不是字体标签列表。同时，你也可以轻松切回到HTML模式。 现成的CSS样式表 DW中一个令人激动的CSS特性就是它包含了已制作好的CSS样式表。CSS的新用户可以先体验一下。选择File & New，在弹出的新文档对话框中选择选中CSS style sheets，在右边的方框中会出现所有可用的CSS列表。为了实践我们所说的最佳习惯，选择一个标记为&Accessible&的。 将文档保存在站点文件夹内，然后就可以用上述的方法来把CSS附加在你的文档中了。 设计时间样式表（Design Time style sheets） DW的这一特性可以让你在设计视图下工作时将样式表应用到页面，让你对站点的外观有一个更直观的认识。设计时间样式表将不会出现在站点内。从我们的最佳习惯的观点来讲，这一特性是非常有用的。如果你使用同时导入和连接两种方式（如上所述），附加设计时间样式表可以让你使用其中的任何一个来开发站点。当你想看在另一个样式表下页面外观如何时，你可以轻松更改为另一个样式表。 对于要将CSS应用于服务器端（比如ASP, PHP, or ColdFusion）或是要在客户端通过Javascript来存取的开发者来说，设计时间样式表同样有用。服务器端样式表也是处理客户端浏览器对CSS支持不好的又一种方式。但在以前版本的DW中，这种方式却不能让你在设计阶段查看CSS的实际效果。设计时间样式表让你实时查看样式表效果，所以你可在DW中以可视界面工作。另外一个好处就是当你上传站点文件时，你不必再检查整个站点寻找冗余的样式表了。 验证 无论你是自己创建样式表还是编辑现有的样式表，验证可以确保你不会误用不标准的标签或错误的代码。DW本身不包含CSS验证程序，你可以使用W3C站点提供的验证服务。 在DW内你可以验证HTML 或DHTML标签（ File & Check Page & Validate Markup (for HTML) 或 File & Check Page & Validate as XML for XHTML.）。在开发基于CSS的站点时，DW提供了很多辅助工具。有了MW MX的帮助，再加上对CSS良好的理解，你就可以开发出能经受时间考验的站点了。
&&&&&&&&&&&&&&
相关Dreamweaver教程：
网站制作教程搜索
Dreamweaver教程推荐
猜你也喜欢看这些您的位置：
DreamWeaver高级应用—模板与库
发布者: moke |
　　DreamWeaver4来了，颇有点狼来了的味道。“什么，4.0版本出来了？我3.0还没有熟悉呢！”的确，软件的更新换代速度越来越快了，新软件一波接一波——首先是flash5.0开始，然后有Photoshop6.0，再到最近的DreamWeaver4.0和Fireworks4.0，真有点吃不消的感觉。这次要说的并不是DreamWeaver4.0的新功能，相反的，要介绍的是DW里一直为人津津乐道，从2.0版本就开始有的功能——模板与库。　　DW2.0开始就与Frontpage98抗衡，当时就有了闪光点很亮的模板与库了，很可惜一直到后来的3.0版本与4.0版本都看不到对模板与库偶多少的改进，或许MACROMEDIA公司已经觉得它的功能够强了吧！但在实际应用中，使用模板与库还是有一定的技巧的。一、把什么定义成库？　　很多教程谈到库时，都建议把页脚的版权信息做成库，等到要修改版权时，只要修改库，就可以方便的更新所有的页面了。除了应用在页脚，库其实还可以应用在好多地方，如导航条。举例说，21cn主页的导航条，处于banner下的电脑、娱乐等栏目就可以作成库。还有栏目名称，如果要对一个大型网站增加一个栏目而有不改变整体风格，用库就很方便了。　　库还可以应用在很多地方，如图片，文字（通常是特定的名称），总之，在规划网站前好好想想哪里可以用得着库，这样以后维护起来就很方便了。二、为什么不能给库定义样式表CSS？　　这是刚刚接触库时经常碰到的问题。要解决这个问题首先要明白库是如何工作的。在一个使用了库的页面中,查看源代码（幸好DW4可以直接同时查看源代码和工作区），你会发现使用库的地方都被DW定义了标记；而在库的源代码钟，并不包含标签，而CSS恰恰室定义在于之间的。　　知道了问题所在，就很容易解决了。使用库时，在库的源代码钟同时添加CSS的代码，这样库也可以定义CSS了。三、从模板新建文件后，为什么不能连接CSS？　　定义一个CSS文件后，网站中的所有文件都连接这个文件，这时经常使用的技巧。但奇怪的时，使用模板新建的文件，竟然不能使用CSS。　　同样从源代码入手。通常创建模板时都会定义一个表或一幅图片喂可编辑区域。关键也时这里：DW对除了定义为可编辑区域外，其他一律不能编辑！也就时说，如果定义了表格为可编辑区域，那么只有 之间时可以更改的！这样问题的解决办法就和上一个问题差不多了：在模板里预先定义好CSS，然后输出CSS文件，（DW4里的新功能时可以直接创建.CSS文件）直接在模板里连接CSS文件，这样就可以了。　　其实在使用模板和库中碰到的问题，很都都可以通过源代码解决。这也说明了一个问题：即使所见即所得的编辑根据多么强大，许多问题仍然要通过源代码来解决。幸好的时DW4新添加了这样的功能：同时查看代码区和工作区，这样制作网页时就更得心应手了。当然DW4还有其他许多新功能，以后我们慢慢研究。
本文地址：
文章标题：
最新分享资源
0102030405060708创建 Dreamweaver 模板?七彩课堂
七彩课堂[网页设计dreamweaver教程系列]
创建 Dreamweaver 模板
　　您可以使用“新建文档”对话框来创建 Dreamweaver 模板。默认情况下，模板将保存在站点的 Templates 文件夹中。
选择“文件”&“新建”。
在“新建文档”对话框中，选择“空模板”类别。
从“模板类型”列选择要创建的页面类型。例如，选择 HTML 模板来创建一个纯 HTML 模板，选择 ColdFusion 来创建一个 ColdFusion 模板，等等。
如果希望新页面包含 CSS 布局，请从“布局”列中选择一个预设计的 CSS 布局；否则，选择“无”。基于您的选择，在对话框的右侧将显示选定布局的预览和说明。
预设计的 CSS 布局提供了下列类型的列：
固定 列宽是以像素指定的。列的大小不会根据浏览器的大小或站点访问者的文本设置来调整。
弹性 列宽是以相对于文本大小的度量单位（全方）指定的。如果站点访问者更改了文本设置，该设计将会进行调整，但不会基于浏览器窗口的大小来更改列宽度。
液态 列宽是以站点访问者的浏览器宽度的百分比形式指定的。如果站点访问者将浏览器变宽或变窄，该设计将会进行调整，但不会基于站点访问者的文本设置来更改列宽度。
混合 用上述三个选项的任意组合来指定列类型。例如，两列混合，右侧栏布局具有可缩放至浏览器大小的主列，而右侧的弹性列可缩放至站点访问者的文本设置的大小。
从“文档类型”弹出菜单中选择文档类型。大多数情况下，您希望所选的文档类型保留为默认选择，即 XHTML 1.0 Transitional。
从“文档类型”菜单中选择一种 XHTML 文档类型定义使页面符合 XHTML。例如，可从菜单中选择“XHTML 1.0 Transitional”或“XHTML 1.0 Strict”，使 HTML 文档符合 XHTML 规范。XHTML（可扩展超文本标记语言）是以 XML 应用的形式重新组织的 HTML。通常，利用 XHTML，可以获得 XML 的优点，同时还能确保 Web 文档的向后和向前兼容性。
注： 有关 XHTML 的详细信息，请访问 WWW 联合会 (W3C) Web 站点，它包含有关 XHTML 1.1 - 基于模块的 XHTML (www.w3.org/TR/xhtml11/) 和 XHTML 1.0 (www.w3c.org/TR/xhtml1/) 的规范以及针对基于 Web 的文件 (http://validator.w3.org/) 和本地文件 (http://validator.w3.org/file-upload.html) 的 XHTML 验证程序站点。
如果您在“布局”列中选择了 CSS 布局，则从“布局 CSS 位置”弹出菜单中为布局的 CSS 选择一个位置。
添加到文档头 将布局的 CSS 添加到要创建的页面头中。
新建文件 将布局的 CSS 添加到新的外部 CSS 样式表并将新的样式表附加到要创建的页面中。
链接到现有文件 可以通过此选项指定已包含布局所需的 CSS 规则的现有 CSS 文件。为此，请单击“附加 CSS 文件”窗格上方的“附加样式表”图标并选择一个现有 CSS 样式表。当您希望在多个文档上使用相同的 CSS 布局（CSS 布局的 CSS 规则包含在一个文件中）时，此选项特别有用。
（可选）创建页面时，还可以将 CSS 样式表附加到新页面（与 CSS 布局无关）。为此，请单击“附加 CSS 文件”窗格上方的“附加样式表”图标并选择一个 CSS 样式表。
如果要设置文档的默认首选参数（如文档类型、编码和文件扩展名），请单击“首选参数”。
如果要打开可在其中下载更多页面设计内容的 Dreamweaver Exchange，请单击“获取更多内容”。
单击“创建”按钮。
保存新文档（“文件”&“保存”）。如果还没有向模板添加可编辑区域，则会出现一个对话框，告诉您文档中没有可编辑的区域。单击“确定”关闭该对话框。
在“另存为模板”对话框中，选择一个用于保存模板的站点，并在“描述”框中添加模板说明。
在“文件名”框中，键入新模板的名称。不需要在模板名称后附加文件扩展名。单击“保存”时，.dwt 扩展名将附加到新的模板，该模板保存在站点的 Templates 文件夹中。
请不要在文件名和文件夹名中使用空格和特殊字符，文件名也不要以数字开头。具体说来就是不要在打算放到远程服务器上的文件名中使用特殊字符或标点符号（如冒号、正斜杠或句点）；很多服务器在上传时会更改这些字符，这会导致与这些文件的链接断开。欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术！您的位置： >
> DIV+CSS开发软件之Adobe Dreamweaver介绍
如果你不会安装Adobe Dreamweaver，了解：
接下来我们()给大家介绍是大家最熟悉不过的软件Adobe Dreamweaver，他被称为网页三剑客之一主要成员。
Dreamweaver我们常称他为DW,是开发比较好的工具。
Dreamweaver特点
1、开发具体完善快捷简便提示功能
2、新建和非常方便
3、代码和效果可以上下对应浏览参考
接下来我们给介绍使用Dreamweaver技巧
使用Dreamweaver提示功能快速写，英文的拼写一直是新手学习感觉不可解决的问题。这里我们使用DW的提示功能即可无需让你记住具体英文单词的拼写，我们只需要记住的是一看某英文单词就知道它的属性、管什么的、属性值有什么、属性常用值代表什么，如看见font-size你就应该知道他是与文字有关，是管理字的大小，他的值是数字如:20,代表字大小为20像素。
1、使用Dreamweaver提示属性，如下图
在写好后再按&{&花括号时候就会弹出CSS属性列表共大家选择，或者在一个属性分号&;&结束后，在输入法英文并半角小写时候点一个空格，也会弹出css属性列表（这里可以输入属性英文单词的开头字母以便找到自己需要css属性单词）
2、提示css属性的值
首先选择css属性列表的属性并按回车选中蓝色背景的CSS属性（如图overflow蓝色底的属性）
按完回车选择好css属性后将提示该属性值的可选列表（如下图，提示：可以使用键盘小键盘带上下箭头，上下选择属性或属性值 ）
这样熟练运用将很快开发。
新建html和css文件方便性
我们新建一个html和css文件更加方便，新建出来的html基本是标准的基本html页面。
介绍新建一个html文件
1、首先点击Dreamweaver软件的&文件（F）&中的&新建（N）&
2、在弹出的窗口中选择&空白页&，再选择&HTML&如果是新建css文件则点&CSS&。
3、点击右下角的&创建（R）&，这样就新建出一个标准的最基本的页面。
如果是新建CSS文件只需在新建文件时候的第2步选择&CSS&即可创建一个css文件。
最后保存html或css为自己需要文件名即可。
代码和效果可以上下对应浏览参考
在软件打开一个html文件点击&拆分&即可将窗口风格为上下两部分，上部分为代码模式，下部分为浏览网页模式。
窗口的代码区与浏览区图例如下
虽然有时候我们在开发的时候，浏览区不一定标准显示，但是我们可以通过浏览器很快找到浏览区具体内容的代码位置，方便我们开发查找代码。
以上是总结Dreamweaver&DW&软件在开发DIV+CSS的时候常用方法和功能。希望大家在实际制作使用时候多总结多熟悉各类。
相关教程：
至于大家说，有的人可以只用记事本可以写网页、写CSS、写程序。对此大家不必去特意要求自己，因为各人的情况不同，而开发网页的软件有很多，各个语言的编程都是有自己的对应软件。只要大家从基础做起，找到适合自己顺手开发工具或者手写都可以。假如你用记事本手写一个网页需要2天时间，如果一个人用工具辅助开发只需要半天的时间，你说如果你们两个去应聘同一个职位老板会要谁？所以大家在以后多总结，多实践，找出适合自己开发工具和技巧是最佳之选。
：如需转载，请注明文章出处和来源网址：我要分享到：上一篇： 下一篇： 必备CSS教程 Essential CSS Tutorials• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • ()• • ()• ()• • • • • • • • • • • • • • • • 必备HTML基础教程 Essential HTML Tutorials •
• () • () • () •
• () •
• () •
• 如对文章有任何疑问请提交到，或有任何网页制作CSS问题立即到发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。文章修订日期： 08:14
原创：本文 DIVCSS5版权所有。最新文章NEWS• • • • • • • • • • CSS EFFECTS相关文章RELATED• • • • • • • • • • 热点文章HOT
学习与资源分享平台点击:13134
点击:17006
Dreamweaver分类导航
推荐Dreamweaver文章
热门Dreamweaver
() () () () () () () () () () ()}