Dreamweaver——css规则之方框与边框
DreamweaverCS6 HTML CSS DIV JavaScript网站开发框架与浮动框架
第七章框架与浮动框架课堂案例:企业邮箱网页地制作7.1网站地后台管理页一般是由框架结构组成,本章通过学习框架地网页组织形式,制作企业邮箱地页面。
准备知识:框架与框架集7.2•创建框架7.2.2•删除框架与增加框架7.2.4•框架与框架集介绍7.2.1•保存框架7.2.3•在框架使用超链接7.2.5框架与框架集介绍7.2.1框架是网页常用地布局方式与网页间地组织形式,经常使用在网站地后台,邮箱,论坛等结构为一个浏览器窗口划分为若干区域并且每个区域显示不同地网页文件地网页组成。
框架是网页经常使用地页面设计方式,其作用就是把网页在一个浏览器窗口下分割成几个不同地区域,实现在一个浏览器窗口显示多个HTML页面。
使用框架可以非常方便地完成导航工作,让网站地结构更加清晰,而且各个框架之间决不存在干扰问题。
利用框架最大地特点就是使网站地风格一致。
一个框架是由框架与框架集构成,框架是浏览器窗口地一个区域,它可以显示与浏览器窗口地其余部分所显示内容无关地网页文件;框架集也是一个网页文件,它将一个窗口通过行与列地方式分割成多个框架,框架地多少根据具体有多少网页来决定,每个框架要显示地就是不同地网页文件。
框架地HTML标签为<frame></frame>,框架集地HTML标签为<frameset></frameset>。
1创建框架打开Dreamweaver工具,创建一个新地站点名称为frame）,新建一个网页文件,暂时不保存。
在Dreamweaver地CS6版本,单击菜单栏地插入 HTML 框架然后选择菜单地具体框架结构。
2修改框架显示大小与框架属性方法一:修改框架在浏览器显示大小,将鼠标放到框架边框上,当出现双箭头光标时拖拽框架边框,可以改变框架地显示大小。
方法二:单击代码视图,在代码修改rows="80,*"或cols="80,*"地值,如修改为rows="169,*"或cols="257,*"。
DW里CSS的详细介绍
-4 ）。字母间距配置覆盖对齐的文本
配置。 Internet Explorer 4 和更高版本连同 Netscape Navigator 6 支持“字母间距”属性。
垂直对齐 ：指定应用他的元素的垂直对齐方式。仅当应用于 <img> 标签时， Dreamweaver 才在“文档”窗口中显示该属性。
文本对齐 ：配置元素中的文本对齐方式。两种浏览器都支持“文本对齐”属性。
CSS 样
注：您需对 DW MX 2004 程式初步了解，并打开他对照本教程进行学习。假如您对 体中文版入门教程 】。
DW MX 2004 尚不熟悉，请浏览 【 DW MX 2004 简
【创建新的 CSS 样式】 将插入点放在文档中，然后执行以下操作之一打开“新建
CSS 样式”对话框：
在“ CSS 样式”面板（“窗口” >“ CSS 样式”）中，单击面板右下角区域中的“新建 CSS 样式”按钮，如下图：
定义您要创建的 CSS 样式的类型：
若要创建可作为 class 属性应用于文本范围或文本块的自定义样式，请选择“创建自定义样式
(Class) ”，然后在“名称”
文本框中输入样式名称。
注意：类名称必须以句点开头， 并且能够包含任何字母和数字组合 （例如， .mycss）。假如您没有输入开头的句点， DWMX2004
系列，您您能够通过下拉列表最下面的“编辑字体列表”来创建新的字体系列。 中文网页默认字体是宋体， 一般留空即可。 浏 览器最好选择用户系统第一种字体显示文本。两种浏览器都支持字体属性。
大小：定义文本大小。能够通过选择数字和度量单位选择特定的大小，也能够选择相对大小。以像素为单位能够有效 地防止浏览器变形文本。 提示： CSS中长度的单位分绝对长度单位和相对长度单位：
Dreamweaver中命名规则整理及常用技巧
主要命名介绍“container“就是将页面中的所有元素包在一起的部分，这部分还可以命名为: “wrapper“, “wrap“, “page“.“header”是网站页面的头部区域，一般来讲，它包含网站的logo 和一些其他元素。
这部分还可以命名为:“page-header” (或pageHeader).“navbar“等同于横向的导航栏，是最典型的网页元素。
这部分还可以命名为:“nav”, “navigation”, “nav-wrapper”.“Menu”区域包含一般的链接和菜单，这部分还可以命名为: “subNav “, “links“，“sidebar-main”.5. Main“Main”是网站的主要区域，如果是博客的话它将包含的日志。
这部分还可以命名为: “content“, “main-content”(或“mainContent”)。
“Sidebar”部分可以包含网站的次要内容，比如最近更新内容列表、关于网站的介绍或广告元素等…这部分还可以命名为: “subNav “, “side-panel“, “secondary-content“.“Footer”包含网站的一些附加信息，这部分还可以命名为: “copyright“.ID命名(1)页面结构容器: container页头：header内容：content页面主体：main页尾：footer导航：nav侧栏：sidebar栏目：column左右中：left right center页面外围控制整体布局宽度：wrapper(2)导航导航：nav主导航：mainbav子导航：subnav顶导航：topnav边导航：sidebar左导航：leftsidebar 右导航：rightsidebar 菜单：menu子菜单：submenu标题: title摘要: summary(3)功能标志：logo广告：banner登陆：login登录条：loginbar注册：regsiter搜索：search功能区：shop标题：title加入：joinus状态：status按钮：btn滚动：scroll标签页：tab文章列表：list提示信息：msg当前的: current小技巧：tips图标: icon注释：note指南：guild服务：service热点：hot新闻：news下载：download投票：vote合作伙伴：partner友情链接：link版权：copyright网站公用相关Container div #container 容器Header or banner div #header 页头部分Main or global navigation div #main-nav 主导航Menu #menu 菜单Sub Menu #submenu 子菜单Left or right side columns #sidebar-a, #sidebar-b 左边栏或右边栏Main div #main 页面主体Content div #content 内容部分The main content area #content-main 主要内容区域Footer div #footer 页脚部分Tag #tag 标签Message #msg #message 提示信息Tips #tips 小技巧Vote #vote 投票Friend Link #friendlink 友情连接Title #title 标题Summary #summary 摘要Sub-navigation list #sub-nav 二级导航Search input #search-input 搜索输入框Search output #search-output 搜索输出和搜索结果相似Search #search 搜索Search results #search-results 搜索结果Copyright information #copyright 版权信息brand #branding 商标branding-logo #branding-logo LOGOSite information #siteinfo 网站信息Copyright information etc. #siteinfo-legal 法律声明Designer or other credits #siteinfo-credits 信誉Join us #joinus 加入我们Partnership opportunities #partner 合作伙伴Services #service 服务Regsiter #regsiter 注册Status #status 状态电子贸易相关Products .products 产品Products prices .products-prices 产品价格Products description .products-description 产品描述Products review .products-review 产品评论Editor's review .editor-review 编辑评论New release .news-release 最新产品Publisher .publisher 生产商Screen shot .screenshot 缩略图FAQ .faqs 常见问题Keyword .keyword 关键词Blog .blog 博客Forum .forum 论坛注意事项-使用技巧元素居中{margin:0 auto; text-align:center;}text-align:center;这句是为了适应IE6以下版本的浏览器而加的，IE6以下对margin:0 auto;不能解析为居中，所以用这种方式来补救，所以在写代码时把两句都写上。
Dreamweaver_CS5自学教程-第十课：CSS样式表 2
第十课：CSS样式表10-1 认识CSS (1) 10-2 认识CSS (2)如果说目前在Web设计和开发技术领域，什么是非常“火”的新技术，CSS/DIV页面的布局无疑是其中之一CSS（Cascading Style Sheet），中文译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
对于一个网页设计者来说，HTML语言一定不会感到陌生，因为它是所有网页制作的基础。
但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。
本课从CSS的基本概念出发，介绍CSS语言的特点，以及如何在网页中引入CSS，并对CSS进行初步的体验。
（其实我们在前面的课程中已经接触到）作用：例子演示。
从CSS对标记的控制入手，讲解CSS的初步知识以及编辑方法。
希望大家能够掌握下一面几个方面的内容：①、标记的概念②、传统HTML的缺点③、CSS的引入1、传统HTML标记，在批量编辑时效率低，不够标准利用CSS样式编辑网页，可以大大挺高效率，规范网页的设计标准。
2、CSS样式代码在网页代码中的位置CSS代码style type="text/css"><!--body,td,th {font-size: 12px;color: #FF0000;}--></style>特点：1）灵活控制网页中的每个元素的样式2）把内容和格式处理相分离，提高工作效率3、CSS样式的链接10-3 编辑CSS样式(1) 10-4 编辑CSS样式(2) 如何编辑CSS样式█1) 属性面板快捷操作1、在下方的属性面板对选中的目标建立CSS规则创建的CSS规则将会应用到所有同类目标上2、建立的CSS规则代码自动添加在网页代码＜head＞部分中3、对建立的CSS样式修改：把鼠标光标在设计页面中放置到需要修改的内容上边，在下方的属性面板中修改，即可对所有应用了此CSS规则的目标修改█2）使用CSS样式面板打开“CSS样式”面板：全部﹤style﹥中显示的是当前网页中的所有CSS样式P表示CSS样式应用的标签的类型，下方显示的是当前CSS样式设置的属性下方修改当前CSS样式的属性修改CSS样式后将会全部应用到同类标签1、利用CSS样式给图片添加边框：选中图片，在CSS样式面板中点击“新建规则”设置“新建CSS规则”的应用属性设置成功，全部﹤style﹥中显示刚刚设置的“img”的属性2、属性的显示方式从下方的按钮中设置█3）手工输入代码10-5 CSS选择器选择器（selector）是CSS中很重要的概念，所有HTML语言中的标记都是通过不同的CSS选择器进行控制的。
Dreamweaver编写CSS的教程
Dreamweaver编写CSS的教程Dreamweaver编写CSS的教程我们为大家收集整理了关于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的真正优点，即你并没有将内容与格式分离开。
Dreamweaver表格边框设置的css语法
Dreamweaver表格边框设置的css语法Dreamweaver表格边框设置的css语法大全具体内容包括：上边框宽度、右边框宽度、下边框宽度、左边框宽度、边框宽度、边框颜色、边框样式、上边框、下边框、左边框、右边框、边框、宽度、高度、有关标签等。
1.上边框宽度语法:border-top-width:<值>允许值:thin|medium|thick|<长度>初始值:medium适用于:所有对象向下兼容:否上边框宽度属性用于指定一个元素上边框的宽度。
值可以是三个关键字其中的一个，都不受字体大小或长度的影响，可以用于实现成比例的宽度。
不允许使用负值。
也可以用在上边框、边框的宽度或边框的属性略写。
2.右边框宽度语法:border-right-width:<值>允许值:thin|medium|thick|<长度>初始值:medium适用于:所有对象向下兼容:否右边框宽度属性用于指定元素的右边框的宽度。
值可以是三个关键字其中的一个，都不受字体大小或长度的影响，可以用于实现成比例的宽度。
不允许使用负值。
也可以用在右边框、边框的宽度或边框的属性略写。
3.下边框宽度语法:border-bottom-width:<值>允许值:thin|medium|thick|<长度>初始值:medium适用于:所有对象向下兼容:否下边框宽度属性用于指定元素的下边框的宽度。
值可以是三个关键字其中的一个，都不受字体大小或长度的影响，可以用于实现成比例的宽度。
不允许使用负值。
也可以用在下边框、边框的宽度或边框的属性略写。
4.左边框宽度语法:border-left-width:<值>允许值:thin|medium|thick|<长度>初始值:medium适用于:所有对象向下兼容:否左边框宽度属性用于指定元素的左边框的宽度。
值可以是三个关键字其中的一个，都不受字体大小或长度的影响，可以用于实现成比例的宽度。
dreamweaver用法 dreamweaver中css规则详解
Dreamweaver用法——Dreamweaver中CSS规则详解1. 引言Adobe Dreamweaver是一款功能强大的网页设计和开发工具，是许多专业网页设计师和开发者的首选。
本文将详细介绍在Dreamweaver中使用CSS规则的方法和技巧，帮助您更好地利用Dreamweaver进行网站设计和开发。
2. Dreamweaver中CSS规则的基本概念在Dreamweaver中，CSS规则是用来控制网页样式和布局的指令集。
CSS规则由选择器和声明块组成，选择器用于选择要应用样式的HTML元素，声明块则包含了一系列属性和属性值，用于定义所选元素的样式。
Dreamweaver提供了全面的CSS规则编辑和管理功能，可以方便地创建和修改CSS规则，并实时预览样式效果。
3. 创建CSS规则在Dreamweaver中创建CSS规则非常简单。
首先，打开Dreamweaver并打开您想要编辑的HTML文件。
接下来，点击页面底部的“CSS规则”面板（或使用快捷键Ctrl+Alt+2），然后点击“新样式”按钮。
在弹出的对话框中，您可以选择要应用样式的选择器类型（如标签名、类名、ID等），并为选择器命名。
然后，您可以选择要应用的样式属性和属性值，并对这些样式进行设置。
最后，单击“应用”按钮，您的新CSS规则就创建好了。
4. 编辑和管理CSS规则Dreamweaver提供了方便的CSS规则编辑和管理功能，帮助您快速修改和管理页面的样式。
通过单击“CSS规则”面板中的规则名称，您可以直接编辑CSS规则中的属性和属性值。
另外，您还可以使用右键菜单来复制、删除和重新排序CSS规则。
另外，Dreamweaver还提供了CSS样式表的导入和导出功能，方便您在多个项目中复用样式。
5. Dreamweaver中的CSS选择器在Dreamweaver中，CSS选择器用于选择要应用样式的HTML元素。
常见的CSS选择器包括：•标签选择器：选择指定标签名的元素，例如p选择所有<p>元素。
DW属性大全
DW属性大全在Dreamweaver8的CSS样式里包含了W3C规范定义的所有CSS1的属性，DW8把这些属性分为Type（类型）、Background（背景）、Block（块）、Box（盒子）、Border（边框）、List（列表）、Positioning（定位）、Extensions（扩展）八个部分，如下图，下面我们分别详细讲解。
1、Type（类型）Type 面板主要是对文字的字体，大小，颜色，效果等基本样式进行设置。
设置时，我们只对要改变的属性进行设置，没有必要改变的属性就空着。
Font：设置字体系列。
什么叫字体系列呢？是指对文字设定几个字体，当遇到第一个字体不能显示的文字时会自动用系列中的第二个字体或后面的字体显示。
相对应的CSS 属性是”font-family”。
注意： Dreamweaver8已经内置设定了6个系列的英文字体，一般英文字体我们用“Verdana, Arial, Helvetica, sans-serif”这个系列比较好看。
如果不用这些字体系列，你就需要自己编辑字体系列，你可以通过下拉框最下面的“Edit Font List”来创建新的字体系列，也可以直接手动在下拉框里写字体名，字体之间用逗号隔开。
中文网页默认字体是宋体，一般就空着不要选取任何字体。
Size：定义文字的大小。
你可以通过选取数字和度量单位来选择具体的字体大小，或者你也可以选择一个相对的字体大小。
最好使用 Pixels作为单位，这样不会在浏览器中文本变形。
一般小字体用比较标准的12px。
相对应的CSS属性是”font-size”。
注意：CSS 中长度的单位分绝对长度单位和相对长度单位，一般我们常用的绝对长度单位有：px：（象素）根据显示器的分辨率来确定长度。
pt：（字号）根据windows系统定义的字号大小来确定长度。
mm、cn、in：（毫米、厘米、英寸）根据显示的实际尺寸来确定长度。
此类单位不随显示器的分辨率改变而改变。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
Dreamweaver——css规则之方框与边框
一、边框设置
1.边框设置。
点击打开css规则定义对话框，选择左侧的边框，打开边框属性设置。
2.选择样式，style就是边框的样式，这里面有很多种，就是边框的线条样式，有点线、虚线、实线、双重线等等，可以各种都尝试一下。
dotted——点线
dashed——虚线
solid——实线
double——双实线
groove——沟槽状
ridge——背脊(隆起)状
inset——内嵌
outset——外凸
2.设置粗细，width就是设置边框线条的粗细，有自带的样式，也可以直接输入数值，color 就是边框的颜色，可以根据需要设置。
注意：边框只有样式不设置为none，且粗细大于0时才有效果，否则无边框
二、设置方框
1.设置方框。
点击打开css规则定义对话框，选择左侧的方框，打开方框属性设置。
2.设置方框的大小。
方框可以直接设置方框的大小，直接输入宽和高，选择单位。
3.设置填充。
填充是指方框的边框离里面内容的距离。
可以全部一样，也可以分别设置。
这里可以设置为5px来看看效果。
4.设置边距，边距就是方框与其上下左右的内容之间的距离，可以全部一样，也可以分开放置，设置20px来看看效果。