DreamWeaverCS5学习笔记之：网页设计基础讲解_第1页
DreamWeaverCS5学习笔记之：网页设计基础讲解_第2页
DreamWeaverCS5学习笔记之：网页设计基础讲解_第3页
DreamWeaverCS5学习笔记之：网页设计基础讲解_第4页
已阅读5页，还剩15页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第一课 网页设计基础一、学做网页的基础知识1、学好做网页（在互联网上基于http协议传播信息的页面）要做到三个方面 :一是多看；二是多想；三是多做。2、好的网站（反应同一主题的多个网页的集合）颜色搭配：儿童网站 :橙色,粉红色,紫色；时装网站:黑、白色；高科技网站：蓝色3、做网站时的三大原则：1建立网页前需要新建一个网站；2文件名，对象ID名，尽量使用英文，拼音，数字尽量避免使用中文，首页一般命名为：index.htm（l）或default.htm（l）（注：主页必须放在网站的根目录下面，同时名称也有特殊的要求）；3尽量要存盘。4、网页内容的组成：（1）文字；（2）图片（jpg，gif，png）；（3）动画（swf，gif）；（4）多媒体；（5超链接；（6）表单；（7）网页特效；（8）其它元素；（9）网页标题；（10）LOGO；（11）导航栏。5、网页的制作方法；（1）代码法：html；（2）软件制作：Dreamweaver、frontpage（所见即所得）。6、DWcs6的界面：７、设置工作区：在DS6界面的“工作区菜单”的下拉箭头进行选择，默认是⑴设计器，然后有⑵经典等16种样式进行选择。8、调整工具栏：从菜单[查看]－[工具]的下级菜单中选择文档、样式呈现、标准三种工具输入法；编码工具栏（只在代码和拆分视图时窗口左边垂直显示，也可在菜单[查看]－[工具]的下级菜单中选择）、浏览器导航工具栏只在实时视图中显示。9、保存自定义工作区：设计好各种面板、工具栏等工作区后则可从菜单[工作区]－[新建工作区]，在弹出菜单中输入名称后确定则可。10、创建自定义的快捷键（是独立于自定义工作区加载和保存的）：⑴从菜单[编辑]－[快捷键]，弹出“快捷键”窗口；⑵单击“复制副本”按钮，在弹出的“复制副本”窗口中的“复制副本名称”框中输入名称后点击“确定”按钮；⑶从“命令”框中选择“菜单命令”，从“文件”命令列表中选择“保存全部（L）”（此命令还没有快捷键，经常使用），在“按键”框中插入光标，同时按下“Ctrl+Alt+S”组合键（则会提示此组合键已分配给“拆分单元格（P）且与的消息窗口快捷键相同），我们可选择“Ctrl+Alt+Shift+S”；⑷单击“更改”，“确定”，则会保存好，在之后就可以使用了。11、使用属性检查器（是上下文驱动的，随所选元素类型而变） ：⑴使用HTML选项卡：将光标停在任何文本内容中，“属性”检查器将提供快速分配一些基本的HTML代码和格式化效果的方式。当选择“HTML”按钮时，可以在“格式”框中应用标题和段落标签，还可设置字体的粗体、斜体；项目列表、编号列表、缩进等。⑵使用CSS选择卡：单击CSS(层叠样式表)按钮，可以快速访问用于分配或编辑CSS格式化效果的命令。⑶图像属性：选择一幅图像，可以访问“属性检查器”中的基于图像的属性和格式化控制。二,创建站点（流程：规划网站类型及主题

搜集资料素材

使用软件进行网页制作

测试及发布）1、规划站点（用来存放网站中所有元素的文件夹，但在 Windows资源管理器中看不到站点名称，为了制作方便需要将这个文件夹和制作软件相链接， 分为：（1）本地站点；（2）远程站点）：1）决定站点的目标,如希望通过网站获得什么?(要干什么?)2）选择站点面对的对象?希望吸引哪些人?3）创建具有浏览器兼容性的站点.4）组织站点的结构,在本地磁盘上建立站点,修改结束后再公布于众.5）收集资源.2、规划本地站点目录结构：（1）images（图片）；（2）swf（动画）；（3）css（CSS样式）；（4）script（存放网页特效）JS；（5）other（其它）3,创建站点的方法有：1）站点—新建站点；2）文件面板右上角的下拉箭头；3）应用程序栏（窗口—应用程序栏）的图标；4)欢迎窗口处4、创建(链接)站点的基本结构1),选择"站点"下面的"新建站点"2),输入站点的名称(该名称出现在站点窗口中 F8即文件窗口)3),指定网站文件存放的位置4),在"站点"对话框中选择"高级设置"5),默认图像文件夹,通常输入images6),还可“选择站点范围媒体查询文件”后的选择文件夹路径按钮。7),WebURL中输入网站的 URL,如果没有则留为空,8),缓存如不选则打不开资源面。（还可设置遮盖、设计备注、文件视图列、contribute、模板、Spry、Web字体。）(?9),选择"站点地图布局",在主页中输入index.htm或default.html（主页只能放在网站的根目录下）?)10),确定5、在文件面板中可创建子页面，文件夹 ：右击站点根目录,在弹出菜单中进行。6、编辑页面：双击文件名；将文件拖入，如果已经打开了文件，只要拖入不是该文档的区域则可。？8、打开己做好网站窗口的方法 :"站点"-"新建站点",输入站点名称(随意),再指定网站源文件位置,确定.三、自定义工作区1、浏览工作区：⑴、代码视图（编码员习惯用）；⑵、拆分视图（开发人员，从菜单[查看]－[垂直拆分]可进行垂直与水平拆分的切换）；⑶、设计视图（设计人员）；⑷、实时视图（节省在浏览器中预览页面的时间）、2、处理面板（可随意显示、隐藏、排列、停靠）：⑴、菜单[窗口]列出了所有可用的面板；⑵、通过双击、单击、拖动实现各类操作（但是，停靠则要拖动时出现蓝色释放区才可）四、HTML（HypertextMarkupLanguage超文本标记语言）基础1、代码视图的行数、自动换行、自动缩进、语法着色、信息栏中的语法错误警告的设置：菜单“查看－代码视图选项”下的级联菜单中选择。CSS样式面板中出现的规则与代码视图中的顺序一样，可以自动拖动调整顺序。可右击其一规则（后选择“转到代码”）则将光标停在该规则的代码。2、正确结构化或平衡的HTML标记由一个开始标签和一个封闭标签组成。标签封闭在“<>”括号内。封闭标签有一个斜杠。2、网页基本代码2、网页基本代码<html><html><head><head><title></title><title></title></head></head><body><body></body></body></html></html>5、HTML常用字符实体6、常用的HTML默认设置：五、CSS格式化1、可以用以下3种方式应用CSS（CascadingStyleSheet，可译为“层叠样式表”或“级联样式表”是一组格式设置规则，用于控制Web页面的外观；是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言）格式化：内联、嵌入在内部的样式表、通过自问样式表。2、CSS格式化指令称为规则（rule）,规则由两部分组成：选择器和一个或多个声明。选择器指定要格式化什么元素或者哪些元素的组合，而声明则包含格式化规范。CSS规则可以重新定义任何现有的HTML元素以及定义两个自定义的选择器修饰符，它们分别名为“class”和“id”（规则名称不能以数字或者标点符号字符开头，只有两个例外，即句点“ .”指示类和磅符号“#”指示id）。如果功能还不够强大灵活，也可以使用一个规则组合选择器，对元素以独特方式出现的页面内的特定实例进行格式化，比如当一个元素嵌套在另一个元素内时。注意：在大多数情况下，当启用“实时视图”时，将不能创建新的CSS规则或者格式化文档中的元素。3、CSS规则执行工作的四种理论：⑴、层叠理论描述了规则在样式表中或者页面上的顺序和位置如何影响样式的应用。接近度是决定如何应用CSS的一

选择器声明声明HTML元素－多重－后代－p{font-family:Verdana;color:blue;}类－ID－th,td{font-weight:bold;padding:4px;}属性值属性值个强大因素。当尝 divp{font-size:95%;margin-top:5px;}试确定将选用哪个 CSS规则时，记住浏览器通常使用以下层级顺序，其中④级是最高的层级：①浏览器默认设置；②外部样式表；③内部样式表（在头部区域中）；④内联样式（在HTML元素内）。⑵、继承理论描述了一个规则怎样被一个或多个以前声明的规则所影响。 继承可以影响同名的规则，以及格式化父元素或者彼此嵌套原元素的规则。⑶、后代理论描述了怎样基于特定元素相对于其他元素的位置对其进行格式化。 通过构建多个元素的选择器，以及 id和class属性，可以针对 Web页面肉摊文本的特定实例进行格式化。⑷、特征理论描述了当规则相冲突时浏览器怎样确定应用什么格式化效果的概念。 内联样式用过任何其他的格式化。6、格式化对象：格式化对象就是用于修改元素的定位、大小、边框和阴影以及边距和填充的规范。尽管常用于<div>元素，实质上可以应用于任何标签。⑴、定位：CSS可以将元素旋转在任何位置及另一元素的上面或下面。⑵、大小：CSS可以指定元素的方框的宽度和高度。⑶、边框和阴影：每个元素都有 4条单独格式化的边框。⑷、边距和填充：边距在元素外面创建空间——在一个元素与另一个元素之间； 填充在元素的内容与其边框之间增加间距，而不管边框可见。7、多重、类和ID⑴、多重：就是同时对多个元素应用格式化。⑵、创建类选择器：①类可以应用于页面上任意数量的元素，而 id只可能在每个页面上出现一次。对于印刷物设计师，类与SdobeInDesign的段落、字符和对象样式的组合相似。类和id名称可以是字母和数字、单个单词、科室以及几乎任何内容的任意组合，但是不能以数字开头，也不能包含空格。也应该避免使用 HTML标签和属性名称。②声明CSS类选择器，可以在样式表内的名称前插入一个句点，如：.ctr{text-align:center;}

.blue{color:blue}③将CSS类用为属性应用于整个HTML元素，如：<h1class=”blue”>Typeheadinghere</h1>④将CSS类以内联方式应用于字符块或单词块，如：Hereis<spanclass=”blue”>sometext</span>formatteddifferently⑶、创建CSSID选择器：①Id被认为是唯一的选择器，它在每个页面上只应该出现一次，ID可指向页面内的特定成分，也可把表格、图像和特定的内容作为目标。尽管你可以千方百计地自己手动把一个id输入多次，但是Dreamweaver不会在你尝试破坏规则时提供任何帮助。②声明CSSID选择器，可以在样式表内的名称前面插入一个数字符号或磅标记（ #），如：#header{width:80%;float:left;}③可将

CSSID作为属性应用于整个

HTML

元素，如：

<divid=”header”></div>8、代码浏览器的使用：①在设计视图的任一位置单击，等待 3秒后出现 “代码浏览器”图标；②单击此图标，打开一个较小的窗口，显示会影响此元素的所有CSS规则的列表，此列表采用特征顺序，最强大的规则位于底部，在一些情况下，列出的规则可能只会以迂回的方式影响元素，比如在body规则中，它会影响页面上的所有HTML元素；③将光标移动其一规则上，又显示另一个窗口，其中列出了所选的规则中指定的所有格式。六、Dreamweavercs6 快速入门1.创建站点：Dreamweaver站点就是工作环境。站点管理的良好策略是把不同的文件类型存储在单独的文件夹中。如图像文件夹imag，以后，当你从计算机上的其他位置插入图像时，Dreamweaver将使用这个设置自动把图像移入站点结构中。2、使用欢迎屏幕：通过左下角的“不再显示”复选框进行设置，它是与菜单“编辑”－“首选参数”－“文档”－“显示欢迎屏幕”前的复选框联动的。3、选择CSS布局：DWCS6提供了18种不同的CSS布局，从菜单“文件”－“新建”弹出的“新建文档”窗口的“布局”栏中选择。其中有： 1列、2列、3列；固定、液态；左侧栏、右侧栏；标题和脚注的不同组合而成16种，还添加了HTML5的两种（HTML5：2列固定，右侧栏。标题和脚注；HTML5：3列固定，标题和脚注），如果是固定的，则在布局预览图中显示一个挂锁标志，指示宽度是固定的，以像素表示。其他的布局将显示一个弹簧标志，指示宽度将随着浏览器窗口而扩展或收缩。4、保存文档：当文档标题处有“*”号时，表示文档修改后没有保存。记住快捷键： Ctrl+S；Ctrl+Shift+S；Ctrl+Shift+Alt+S.5、修改页面标题：Web页面标题将显示在浏览器的标题栏中，页面标题是搜索引擎用于对Web站点建立索引和评级的元素之一。修改网页标题的方法：① 修改->页面属性->标题/编码中修改标题；②在设计界面正上方标题中 修改标题；③ 在代码<title>⋯⋯</title>中修改标题6、更改标题（是指文档中的标题，而不是页面标题）：修改正文标题的方法：⑴在菜单“修改->页面属性->标题”中修改设置字体大小、单位、颜色。⑵在设计界面中打入文字后选中，然后在正下方属性中的“格式”框中选择标题即可实现。也可选定标题，打开“CSS样式面板”选中“content”规则后点新建 钮后，新建规则 contenth1进行更多格式化标题（只要用到h1默认规则的都会更改）。若需要输入正文 则格式改为段落。7、创建网页文档（HTML文档）文件→新建→新建文档窗中（空白页；页面类型选“HTML”；布局选“无”）→创建；欢迎页面中点新建中的“HTML”；在文件面板中右击站点名称后选“新建文件”，然后在文件面板中重命名（网页文件要用英文或数字进行命名，莫用中文），双击后打开编辑。8、打开已建的 HTML文档（拖动到Dreamweaver，也可按住Ctrl多选一同打开）9、文件的预览：（1）点“实时视图”按钮；（2）点“在浏览器中预览/调试”图标后选择浏览器；（3）按F12（默认浏览器的设置在菜单“编辑－首选参数－分类框中的在浏览器中预览”中）10、输入文本(1)、文本中连续输入空格的方法：①按快捷键CTRL+SHIFT+空格即可输入连续的空格；②编辑->首选参数->常规->编辑选项中，勾选允许多个连续的空，即可输入连续的空格；③在代码中输入 即代表一个空格；④在“插入”面板的“文本”菜单下的最后一个选项中选择不换行空格，然后连续单击图标 即可输入连续的空格；⑤ 将输入法切换至全角，即可输入连续的空格。⑵、网页文本的输入：①直接输入；②复制粘贴（复制后可点菜单“编辑－选择性粘贴”可选择粘贴要保留原文本的格式等要求）；③导入（文件－导入中选择）。⑶、注：①只复制文本，字体格式、段落缩进、颜色、段落分隔要另行设置。②Word能将粗体和斜体格式化效果传递给Dreamweaver，而WordPad、TextEdit则不然；③段落处只有换行符，只有在段落处回车，才会另行分段；④分段与换行：分段 (隔一行)按Enter或在代码中输入</p>(即由<p>⋯⋯</p>)；换行不分段按Shift+Enter、在代码中输入<br/>或点插入面板中文本选项中最后一个选项的下拉菜单选择换行符单击；⑤文字也可以从网站中复制，但是在复制时需要将网页中文字的格式去掉。只需要将文字粘贴到记事本中，然后从记事本中再复制文字就可以了。11、插入图像:⑴常用的网页图片格式 （一般控制在 200K以下）：①GIF格式：特点：它的图片数据量小，可以带有动画信息，且可以透明背景显示，但最高只支持256种颜色（8位调色板）和72ppi。用途：大量用于网站的图标Logo、广告条Banner及网页背景图像、Web界面、按钮、图形边框。但由于受到颜色的显示，不适合用于照片级的网页图像。②JPEG格式（JointPhotographicExpertsGroup联合图像专家组）：特点：可以高效地压缩图片的数据量，减小95%之多。使图片文件变小的同时基本不丢失颜色画质。用途：通常用于显示照片等颜色丰富的精美图像。③PNG格式（PortableNetworkGraphic便携式网络图形）：特点：是一种逐步流行的网络图像格式。既融合了GIF能做成透明背景的特点，又具有JPEG处理精美图像的优点。用途：常用于制作网页效果图。④可分为矢量图形（是通过数学创建的，它们的行为就像离散的对象一样，允许根据需要重新定位和调整它们的大小许多次，而不会降低它们的输出品质，先是艺术品的最佳应用是在任何需要的地方使用几何开关和文本创建艺术效果，如公司标志都是通过矢量形状创建的，常用格式有AI、EPS、PICT、WMF，但这些Web浏览器都不支持，只支持SVG，表示ScalableVectorGraphic保伸缩矢量图形，可由AdobeIllustrator、CorelDraw软件绘图并保存，也可由XML，ExtensibleMarkupLanguage自己创建）和光栅图形（是由像素创建的，常用格式有GIF、JPEG、PNG，都适合于Interet，并且与大多数浏览器兼容）。⑵插入方法：从菜单插入-图像；会弹出“图像标签辅助功能属性”窗②插入面板-常用-图像：图像点位符，该下拉按钮有7个选项如图，热点（hotspot）实质上是由在图像上绘制的用户定义的区域启用的超链接；③直接将图像拖入编辑区；④双击占位符打开图像源文件窗选择图像（仅此方法没有弹出“图像标签辅助功能属性”窗，原因是在插入图像占位符时已经设置了如图示）；⑤从图像编辑软件复制粘贴插入（在Fireworks中，可以选择多个图层，并把它们复制并粘贴到DW中，在Photoshop中，在复制并粘贴图层之前将不得不合并或拼合它们），打开JPEG图像，选择并复制，在DW中要插入图像的位置单击，粘贴，弹出“图像描述（Alt文本）”窗，输入确定后则可，其大小可从“属性”检查器中修改；如果打开的是不兼容类型的文件，则弹出“图像优化”窗，在“预置”框中选择后确定，弹出“保存Web图像”窗（使图像保存到站点根文件夹的images中）。弹出“图像描述（Alt文本）”窗，输入确定后则可。⑥从“资源”面板插入：在想要插入图片的位置单击光标，打开“资源”面板，点 “图像”类别图标，显示站点内存储的所有图像的列表，选定图像后点“插入”按钮。弹出“图像标签辅助功能属性”窗进行设置。也可从“资源”面板中直接拖入。这种情况要确保选择存储在默认的images文件夹中的图像。⑦使用AdobeBridge置入：光标定位，点击菜单“文件－在Bridge中浏览”启动AdobeBridge，从左边的“文件夹”导航（还可借助于过滤器导航）到图片文件，在“内容”中点击选择，从右边的“预览”、“元数据”可看到相片的相关数据，可将图片直接拖入。（DWcs6中不能置入图像？也可点菜单“文件－置入－在Dreamweaver中”，计算机自动切回DW，弹出“图像标签辅助功能属性”窗进行设置，确定后则可。？）；⑧插入不兼容的文件类型：DW允许选择许多不同的格式插入到布局中，然后软件将自由地把文件自动转换成兼容的格式。点菜单“插入－图像”，在弹出“选择图像源文件”窗，定位到不兼容的图像文件后确定，弹出“图像优化”窗进行设置；点确定后弹出“保存Web图像”则实现格式的转换；点确定后弹出“图像标签辅助功能属性”窗；点确定后则插入图像，但大小是以原大小，选择图像后在“属性”检查器的“宽、高”框中输入值则可，在图像的左上角出现了一个图标，表示是 Photoshop“智能对象”。⑶、注意：①在插入图像前应先将网页文件已保存,从而使所插图像引用正确；②图像插入网页后,应确定图像文件已存入站点,一般会自动将图像复制到站点的image文件夹中。否则在下次打开网页时，会出现看不到图像的情况；技巧是图像的位置、替换文字，在“属性”检查器中的“替换”框中输入，用于图片无法显示的时候用此内容代替；③图像的大小是插入图像的实际大小，可选择图像后拖动控制点进行修，也可在“属 性”检查器中修改宽和高；④图像与文本对齐方式的设置：在“属性”检查器中访问“类”框弹出式菜单的“右浮动 fltrt、左浮动fltlft”；（在DWcs6中没有此属性项：？在布局中，选取elaine.jpg图片，然后从“属性”检查器的“对齐”菜单中选择“右对齐”如图示，则实现与文本对齐，并且文本环绕在它左边。选择图像，在“代码”视图中可见一个align=“right”属性？）⑷、使用Photoshop智能对象（ ）：①与其他图像不同，“智能对象”连接到 Photoshop（PSD）文件，如果以任何方式改变了PSD文件并且保存它，DW就会识别这些改变，并且会提供用于更新布局中使用的Web图像的方法。可以把单个PSD文件作为“智能对象”放在一个或多个页面中，然后通过执行一个动作来更新它们。②智能对象的圆形绿色箭头指示原始图像未改变。右键单击要修改的图片，并从上下文菜单中选择“原始文件编辑方式－Photoshop”（如果不能打开，则在此处点‘浏览’后定位到Photoshop.exe）打开并修改后保存。也可选定图片点“属性”检查器中的 打开进行修改。智能对象变成红。深绿 圆形箭头，表示原始图像已被修改。右键单击从上下文菜单中选择“从源文件更新”则实现更新。⑸、利用属性检查器优化图像 :①修改图像的尺寸：方法一是：<styletype="text/css"><!--body{font:100%;color:#000;background-color:#fff;}</style>通过拖动图像的控制点实现，如按住Shift键拖动右下角的控制点则会约束宽高比。方法二是：在图像的“属性”检查器中的“宽、高”框中设置。如在“宽、高”的一个框中修改，可点“切换尺寸约束”按钮（第一个）；如锁的则保持宽高比与原图相同，如锁是开的则可修改宽高比；第二个按钮“重围为原始图像大小”；第三个按钮是“提交图像大小”（与“重新取样”按钮功能类似），点击弹出提示窗。注意：这种方法不会对文件大小或下载速度产生有益的作用。②Dreamweaver的图形工具：“编辑”：把所选图像发送给定敲锣打鼓外部图形编辑器。可在“编辑－首选参数－文件类型编辑器”中把图形编辑程序指定给任何给定的文件类型。工具按钮的图像将依据所选的程序而改变。“编辑图像设置”：在“图像预览”对话框中打开当前图像。“图像预览”对话框除了允许访问这个练习中使用的优化我之外，还可以用于裁剪图像以及修改动画式GIF设置。“从源文件更新”：以新选择的大小呈现“智能对象”。底层Photoshop文件不会改变。“裁剪”：删除图像中不想要的部分，拖动句柄后双击则可。“重新取样”：对调整过大小的图像重新取样。公当调整了图像的大小之后，“重新取样”工具才是活动的。“亮度和对比度”：对可能太亮或太暗的图像进行调整。 “锐化 ”：通过增加或减小比例尺（0－10）上像素的对比度，可调整图像边缘的清晰度。⑹．图片的热点：（1）热点：①矩形热点；②圆形热点；③多边形热点。？注：编辑——首选参数——辅助功能——图像⑺．相关html代码：①Img：图片；②Src：位置；③热点：<map>⋯⋯</map>12、插入日期：⑴在菜单插入－日期；⑵在面板中插入－常用－日期，弹出窗口中设置（日期格式及有无时间，存储时自动更新）13、插入水平线：在插入（菜单或面板中）－常用－水平线（其颜色要通过代码进行设置：）14、添加特殊字符：⑴通过菜[插入]－[HTML]-[特殊字符]；⑵从插入面板中的文本选项。15、选择并修改CSS样式：⑴、CSS样式代码在网页代码中的位置：在<title>⋯⋯</title>后以右框呈现。⑵、更改页面宽度：①首先弄清页面元素包含关系：最左边的<body>是它右边所有元素的父元素或父容器，级别最高，<div.container>则次之；②打开CSS样式面板（从菜单“窗口－CSS样式”调出浮动面板；或在浮动面板处单击“ CSS样式”选项；或单击 CSS样式图标 ）。打开一个文档，然后单击“全部”按钮，显示与当前页面关联的整个样式表，而“当前”按钮只显示影响所选元素的样式。单击加号在“CSS样式”面板中展开<style>条目（尖括号指示样式是文档内部的），单击各个CSS规则，则在下面查看其属性。③找到“container”规则单击，从下面的属性列表中单击width后的值则可进行修改，回车确定。⑶、调出“body的CSS规则定义”窗口：①在CSS样式面板中单击body规则，然后单击“编辑样式”按钮；②双击CSS样式面板中的body规则；③在“属性”检查器中单击选项后在“目标规则”栏中选择body规则，再单击“编辑规则”按钮；④点CSS面板右上角的下拉箭头，弹出下拉菜单中选“编辑”。⑷、css面板的使用：①单击

CSS面板右上角的下拉箭头

，在弹出的下拉菜单中可以：转到代码（转到拆分窗口此 CSS规则的代码处）；新建（新建一个规则）；编辑（弹出“ **的CSS规则定义”窗口）；复制；重命名类；编辑选择器（也可在CSS面板中双击）；移动CSS规则；禁用；启用选定规则中禁用的所有项；删除选定规则中禁用的所有项；应用；剪切；拷贝；粘贴；删除；站点；使用外部编辑器；附加样式表；设计时间；媒体查询；帮助；关闭；关闭标签组。②面板下部 三个按钮是面板下部选定规则属性的显示方式，分别是显示类别视、显示列表视图、只显示设置属性；

分别是链接样式表（弹出“链接外部样式表”窗口进行设置）、新建 CSS规则、编辑样式（弹出已选定规则的“ **的CSS规则定义”窗口）；禁用 /启用属性（在已选定属性时可用）；删除。⑸、在设计视图的“属性”检查器中格式化文本：①选定要格式化的文本，从属性检查器点“HTML”按钮则可实现格式化（粗体、斜体、项目列表 /编号、内缩区块、删除内缩区块）；②选定要格式化的文本，从属性检查器点“CSS”按钮，则可见“目标规则”框中显示“<新CSS规则>”。然后点字体（大小、粗体、斜体、颜色、对齐按钮）则弹出“新建 CSS规则”窗口，在“选择器类型”框中选择，在“选择器名称”框中输入或点“不太具体”到满意的名称，然后单击“确定”则新建了一个CSS规则。如“目标规则”框中显示已有的规则，则自动修改显示的那个CSS规则。⑹、css属性的解释类型Font-family（文本字体）：选择系统有的字体。Font-size（文本字号）：可以按照自己测需求来设置，可用像素、百分比等作单位。Font-style：①normal文本正常显示；②italic文本斜体显示；③oblique文本倾斜显示。Line-hight（行间距）：①normal默认。设置合理的行间距。② number设置数字，此数字会与当前的字体尺寸相乘来设置行间距。Text-decation(文本样式)：链接的时候用到很多。①none默认：定义标准的文本；②underline定义文本下的一条线；③overline定义文本上的一条线；④line-through定义穿过文本下的一条线；⑤blink定义闪烁的文本。Font-weight（文本粗细）：一般就是没有或者blod就可。①normal默认值，定义标准的字符；②bold定义粗体字符；③bolder定义更粗的字符；④lighter定义更细的字符；⑤100,200,300,400,500,600,700,800,900定义由粗到细的字符。400等同于normal，而700等同于bold。Font-variant（我也不知道）：①normal默认值。浏览器会显示一个标准的字体；②small-caps浏览器会显示小型大写字母的字体。Text-tranform（大概就这么回事）：①none默认，定义带有小写字母和大写字母的标准的文本；capitalize文本中的每个单词以大写字母开头；③uppercase定义仅有大写字母；④lowercase定义无大写字母，仅有小写字母。Color（就是rgb色）：背景background-color 设置元素的背景颜色。background-image把图像设置为背景。（当背景颜色与图像同时设置时则显示图像）background-repeat设置背景图像是否及如何重复。①repeat默认。背景图像将在垂直方向和水平方向重复；②repeat-x背景图像将在水平方向重复；③repeat-y背景图像将在垂直方向重复；④no-repeat背景图像将仅显示一次。background-attachment背景图像是否固定或者随着页面的其余部分滚动。 ①scroll 默认值。背景图像会随着页面其余部分的滚动而移动； ②fixed 当页面的其余部分滚动时，背景图像不会移动。background-position（X/Y）设置背景图像的起始（水平/垂直）位置。（left、center、right、值/top、center、bottom、值）区块Word-spacing：定义单词间。normal默认。定义单词间的标准空间。length定义单词间的固定空间。Letter-spacing：定义字母间距。normal默认。定义单词间的标准空间。length定义单词间的固定空间。Vertical-align：定义元素和文字的垂直对齐关系。baseline默认。元素放置在父元素的基线上；sub垂直对齐文本的下标；super垂直对齐文本的上标；top把元素的顶端与行中最高元素的顶端对齐；text-top把元素的顶端与父元素字体的顶端对齐； middle把此元素放置在父元素的中部； bottom把元素的顶端与行中最低的元素的顶端对齐； text-bottom把元素的底端与父元素字体的底端对齐； %使用"line-height"属性的百分比值来排列此元素。允许使用负值。Text-align：定义文字的位置。left把文本排列到左边。默认值：由浏览器决定； right把文本排列到右边；center把文本排列到中间；justify 实现两端对齐文本效果。Text-indent：首行缩进。White-space：设置文本换行①normal默认。空白会被浏览器忽略。③pre空白会被浏览器保留。其行为方式类似HTML中的<pre>标签。④nowrap文本不会换行，文本会在在同一行上继续，直到遇到<br>标签为止。⑤pre-wrap保留空白符序列，但是正常地进行换行。⑥pre-line合并空白符序列，但是保留换行符。Display：none此元素不会被显示。inline默认。此元素会被显示为内联元素，元素前后没有换行符。block此元素将显示为块级元素，此元素前后会带有换行符。 inline-block行内块元素。CSS2.1新增的值）list-item此元素会作为列表显示。run-in此元素会根据上下文作为块级元素或内联元素显示。compactCSS中有值compact，不过由于缺乏广泛支持，已经从CSS2.1中删除。MarkerCSS中有值marker，不过由于缺乏广泛支持，已经从CSS2.1中删除。table此元素会作为块级表格来显示（类似<table>），表格前后带有换行符。inline-table此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。table-row-group此元素会作为一个或多个行的分组来显示（类似 <tbody>）。table-header-group此元素会作为一个或多个行的分组来显示（类似 <thead>）。table-footer-group 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。table-row 此元素会作为一个表格行显示（类似 <tr>）。table-column-group此元素会作为一个或多个列的分组来显示 （类似 <colgroup>）。table-column此元素会作为一个单元格列显示（类似 <col>）table-cell 此元素会作为一个表格单元格显示（类似 <td>和<th>）table-caption 此元素会作为一个表格标题显示（类似 <caption>）方框Width：固定宽。 height固定高度Float：浮动方式Left：左浮动Right：右浮动none:不允许浮动Clear：清除浮动。left在左侧不允许浮动元素。right在右侧不允许浮动元素。both在左右两侧均不允许浮动元素。None:不清除浮动。Padding：内边距 margin：外边距边框Style：none定义无边框。hidden与"none"相同。不过应用于表时除外，对于表，hidden用于解决边框冲突。Dotted：定义点状边框。在大多数浏览器中呈现为实线。Dashed：定义虚线。在大多数浏览器中呈现为实线。 Solid：定义实线。double：定义双线。双线的宽度等于 border-width 的值。groove：定义3D凹槽边框。其效果取决于 border-color的值。Ridge：定义其效果取决于 border-color的值。Inset：定义3Dinset边框。其效果取决于值。outset：定义3Doutset边框。其效果取决于 border-color的值。列表

3D垄状边框。border-color的List-style-type：定义列表的记号None：无标记。Disc：默认。标记是实心圆。Circle：标记是空心圆。Square：标记是实心方块。decimal：标记是数字。decimal-leading-zero：0开头的数字标记。(01,02,03,等)。lower-roman：小写罗马数字(i,ii,iii,iv,v,等)。upper-roman：大写罗马数字(I,II,III,IV,V,等)。lower-alpha：小写英文字母(a,b,c,d,e,等)。upper-alpha：大写英文字母(A,B,C,D,E,等)。lower-greek：小写希腊字母(alpha,beta,gamma,等)。lower-latin：小写拉丁字母(a,b,c,d,e,等)。upper-latin：大写拉丁字母(A,B,C,D,E,等)。Hebrew：传统的希伯来编号方式。Armenian：传统的亚美尼亚编号方式。Georgian：传统的乔治亚编号方式(an,ban,gan,等)。cjk-ideographic：简单的表意数字。Hiragana：标记是：a,i,u,e,o,ka,ki,等（日文片假名）。Katakana：标记是：A,I,U,E,O,KA,KI,等（日文片假名）。hiragana-iroha：标记是：i,ro,ha,ni,ho,he,to,等（日文片假名）。katakana-iroha：标记是：I,RO,HA,NI,HO,HE,TO,等（日文片假名）。List-style-image：用图片来显示列表（但只在实时视图中才能看到效果）List-style-position：标记的位置inside：列表项目标记放置在文本以内，且环绕文本根据标记对齐。Outside：默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。定位：Position：absolute 生成绝对定位的元素，元素的位置通过"left",

"top",

"right"

以 及"bottom"属性进行规定。如左右同时定位距离小了，将会使元素拉伸；如大了则以左边距为准，不会对元素压缩。fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。（可以用来设置浮动的页面上的元素）元素的位置通过 "left","top","right" 以及"bottom"属性进行规定。relative 生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT位置添加 20像素。static默认值。没有定位，元素出现在正常的流中（忽略 top,bottom,left,right或者z-index声明）。Width和height的值用来设定这个区域的大小Visibility：visible：默认值。元素是可见的。Hidden：元素是不可见的。collapse当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。z-index：auto默认，堆叠顺序与父元素相等。 number设置元素的堆叠顺序。Clip：这个属性用于定义一个剪裁矩形。对于一个绝对定义元素，在这个矩形内的内容才可见。出了这个剪裁区域的内容会根据overflow的值来处理。剪裁区域可能比元素的内容区大，也可能比内容区小。扩展－分页break-before：Auto：默认值。如果必要则在元素前插入分页符。 Always：在元素前插入分页符。Avoid：避免在元素前插入分页符。Left：在元素之前足够的分页符，一直到一张空白的左页为止。Right：在元素之前足够的分页符，一直到一张空白的右页为止。break-after：类上。扩展－视觉效果Cursor：鼠标滑过这个区域的时候的光标。url需使用的自定义光标的URL。注释：请在此列表的末端始终定义一种普通的光标，以防没有由URL定义的可用光标。default默认光标（通常是一个箭头）auto默认。浏览器设置的光标。crosshair光标呈现为十字线。pointer光标呈现为指示链接的指针（一只手）。move此光标指示某对象可被移动。e-resize、ne-resize、nw-resize、n-resize、se-resize、sw-resize、s-resize、w-resize此光标指示矩形框的边缘可被向右（东）、上及向右移动（北/东）、向上及向左移动（北/西）、向上（北）、向下及向右移动（南/东）、向下及向左移动（南/西）、向下移动（南）、向左移动（西）移动。text此光标指示文本。wait此光标指示程序正忙（通常是一只表或沙漏）。help此光标指示可用的帮助（通常是一个问号或一个气球）。Filter：七、创建页面布局1、创建网页之前考虑的三个重要问题： ⑴、Web站点的目的（销售、产品、服务、娱乐、游戏、提供信息或新闻、购物车、数据库、信用卡付款或电子转账、 ）。⑵、顾客（成年人、儿童、年长者、专业人员、业余爱好者、男人、女人、所有人） 。⑶、他们怎样到达这里（台式机、手提、PDA、手机；高速Internet、拨号服务；浏览器的种类、显示器的种类及分辨率） 。2、使用缩略图和线框： ⑴、创建缩略图是页面的图形式购物清单，①有助于设计出 Web站点导航；显示导航如何连接各个页面。②缩略图包括主页、第一级（主导航中的所有页面，只能从主页到达）、第二级（只能通过特定的动作或者从特定的位置到达的页面，如购物车、产品详细信息）。⑵、创建页面设计：Header（含banner、logo）、Fooer(含Copyright)、Harizontalnavigation（含Home、reference、aboutus、contactus等）、Verticalnavigation（含product、service）、maincontent。页面设计要折衷灵活性与华丽性，使用一致的页面设计可以给你的访问者一种专业、自信的感觉。⑶、创建线框：线框是更大的缩略图，如右。用于草拟各个页面并填充关于各个成分的更详细的信息及大小、颜色，实际链接名称及主标题。3、修改现有的CSS布局：CSS布局是以CSS样式显示的，可通过菜单“查看－样式呈现－显示样式”前的勾来显示 /关闭CSS样式。如关闭样式，则按标题、内容、侧栏、脚注顺序显示，编排一般也按此顺序来进行。4、插入背景图片问题：⑴、 各个div成分的宽、高一般不确定，会随着内容而变化。但是插入背景图片时，由于背景图像不是真正插入在元素中，因此不会对容器的大小产生好或坏的影响，为了确保<div>足够大以显示整个图像，需要修改元素高、宽的规则；⑵、背景图像默认会在垂直和水平两个方向上重复，为了确保这种设置不会导致任何不想要的效果，你将需要更改重复行为。5、为LOGO图片插入新的<div>成分：⑴、当你想在某个代码元素的前面或后面的特定位置插入光标时，先用鼠标点该元素，然后选择该元素的标签选择器，再按向左或向右箭头键。这样不必求助“代码”视图。⑵、从“插入－布局－APDiv”插入此绝对定位容器（图层）；点击该容器边框，可见其属性。然后在容器中添加内容，其大小可以通过CSS样式规则修改，也可直接拖动边框修改。6、为水平导航栏创建<div>：⑴定位在<div.header>后（单击<div.header>标签选择器后按下向右箭头）；点“插入面板－布局－插入Div标签”显示“插入Div标签”对话框：“插入”框显示“在插入点”（表示新的<div>将插入在光标位置处并不会包装任何其他的元素），在ID框中输入“h-navbar”后单击“新建CSS规则”按钮。在“新建CSS规则”对话窗中：“选择器名称”框中自动输入了ID“#h-navbar”，单击“确定”按钮。弹出“#h-navbar的CSS规则定义”窗口：在“类型”选项卡设置字号为90%、颜色为#FFC；在“背景”选项卡中设置背景色为#090、背景图像为bacdground.jpg、背景重复为repeat-x；在“区块”选项卡中设置文本对齐为right；在“方框”选项卡中设置Padding的Top为5px，Right为20px，Bottom为5px；在“边框”选项卡中设置3个Bottom分别为solid、2px、#060；确定则可见<#h-navbar>出现在标题下文它进行了充分的格式化，并且填充有占位符文本，修改文本，链接以后再设置。7、修改页面宽度和背景颜色： 在CSS中修改要注意：如果修改了 container的宽度，小于siderbar和content的宽度和，则将content挤到siderbar的下面，这时要修改这两者之和。如将背景色设置为#FFF（白色），也就是删除背景色，这样给人留下页面的内容区域渐渐扩展得很宽的印象，如有背景色或者只是简单地添加边框，给页面提供明确的边缘。8、修改现有垂直导航栏： ①文本的修改只要选定直接编辑就可；②增加删除也方便，垂直导航栏作用项目列表优点就是它很容易插入新的链，只要在相应的位置按回车键，就插入一个新的项目列表，输入文字；③但是对齐及背景效果则不一样，只要选中文字后在“属性”检查器的“HTML”选项中的“链接”框中输入“#”超链接的占位符则可了；④背景颜色的修改，先点击等3秒后出现“代码浏览器”。找到相关规则，背景色是由ul.nava,ul.nava:visited规则影响，这个规则中包含<a>（超链接）元素的类属性nav为<ul>（无序列表）元素指定background，然后从CSS面板中双击ul.nava,ul.nava:visited规则修改则可。⑤就在④中的规则中，在CSS面板的属性显示栏中可点“添加属性”，从“属性”菜单中选择“color”，并在“值”框中输入“#FFC”，回车则可。9、在垂直导航栏下面插入图像占位符： ①将光标定位在垂直导航栏下面或后面说明文本的前面（选取文本，点标签选择器，再按箭头定位。最好在拆分视图中进行定位）；②点“插入－常用－图像旁的下拉箭头－点图像占位符”；③弹出“图像占位符窗口”，在名称、高度、宽度、颜色、替换文本框中分别设置后确定。10、检查浏览器兼容性：①打开要检查的文本；②点“文件－检查－浏览器兼容性” ，则会在属性检查器下面出现“浏览器兼容性”的报告。右击弹出关闭（则关闭该选项）、关闭标签组、最小化；双击最小化面板；单击展开面板；创建新的CSS规则1、创建后代选择器（适用于特定 <div>内的特定标签应用样式，以 content中的主标题为例）：①在新建规则时特别注意文档窗口询问的标签选择器的名称和顺序<body><div.container><div.content><h1>），因为位于样式表顶部的规则把格式化效果传递给后面出现的规则。在错误的位置插入规则可能导致浏览器完全忽略它。②在“CSS样式”面板中，单击 “新建CSS规则” 图标，弹出“新建 CSS规则”窗。③从“选择器类型”框中选择“复合内容（基于选择的内容）”；注意：当把光标插入在页面内容中时，Dreamweaver将总是为你创建复合内容的选择器，即使在第一次显示对话框时没有显示“复合内容”选项也是如此，并且基于光标的位置显示后代选择器，这里是.container.contenth1，这个规则只影响<h1>元素，但是必须满足两个条件：一是<h1>元素出现在利用.content的类格式化的元素内；二是它们都出现在利用.container的类格式化的元素内。否则，<h1>元素不受影响。③单击“不太具体”按钮，将从“选择器名称”框中删除单词.container而变成.contenth1（因为<div.container>中只有一个<div.content>元素，在规则中无需这样的特征，只要有可能，就应该简化规则，以减少需要下载的代码问题。虽然这晨只有单词.container是不需要的，但是不必要的代码会跨整个站点（和Internet）累积）。单击确定后弹出“.contenth1的CSS规则定义”窗口。④修改规则的“属性设置”。2、建立自定义的类（CSS类属性允许对特定的元素或者特定元素的一部分应用自定义的格式化效果）：①在“CSS样式”面板中，单击“新建CSS规则”图标，弹出“新建CSS规则”窗。②从“选择器类型”框中选择“类（可应用于任何HTML元素）”；在“选择器名称”框中输入合适的名称后点“确定”，弹出“**的CSS规则定义”窗口进行设置。注意：在大多数情况下，class属性将覆盖任何默认的或者应用的样式，因此它应该与它出现在样式表中的位置无关。不过，当把类与元素或id结合起来构成复合内容选择器时，可能会出现不同的（甚至矛盾的）效果。当想要的样式没有像期望的那样出现时，可以使用“代码浏览器”查找冲突。③选择要格式化的文本或光标定位后点标签选择器，然后从“属性”检查器中的“HTML”的“类”框中或“CSS”的“目标规则”框中选择规则就可以了。④删除类：可以在代码视图中进行删除；也可以选择要格式化的文本或光标定位后点标签选择器，然后从“属性”检查器中的“HTML”的“类”框中选择“无”或“CSS”的“目标规则”框中选择“删除类”。3、创建自定义的id：①在CSS样式编排中，CSS的id属性具有更特殊的重要价值，因为它被用于标识Web页面上的唯一内容，并且应该优先于所有其他的样式。包含LOGO标志的APdiv是唯一元素的良好示例。<div#apDiv1>定位在页面上的特定位置， 并且你可以非常肯定每个页面上只有一个这样的<div>。②从“CSS样式”面板中选择#apDiv1规则。右击选择器名称选择“编辑选择器”（也可选择后再单击），改名为“#logo”（规则名改变了，则不适用于<div#apDiv1>，布局反映了未格式化元素的默认行为；如果没有height、width及其他关键属性，它就会扩展到<div.container>的完整宽度，并把<div.header>下推到蝴蝶图像的高度以下，如上图）；特别注意：如果在标签选择器中选择<div#apDiv>后在属性面板的“ID”框中修改APDiv的id名称，则不存在布局变化，并且同时在“CSS样式”面板中更新规则的名称和标签选择器的标签名。③把#logo规则分配给<div#apDiv1>恢复布局；单击蝴蝶图像后单击<div#apDiv1>标签选择器，从“属性检查器”如右图，从DivID框中选择“logo”则可见“属性检查器”如下标签选择器也自动从<div#apDiv>变成<div#logo>，在“属性检查器”中只有唯一的ID是logo了，如果在“类”框中选择某一类如green，则标签选择器中由<div#logo>变成<div#logo.green>。（附：<div>分离：APdiv和处理方式不同于正常的<div>元素。一旦在文档中插入了APdiv，就可以看出这种区别，Dreamweaver将为它自动创建一个规则，并给它分配用于宽度、高度、位置和Z轴的属性。这对于正常的div是不会属性的。事实上，甚至在创建规则之后，它仍会保持特殊的处理方式。）4、创建交互式菜单：⑴超链接伪类：总共有4种状态或不同的行为可供<a>元素使用，可以通过CSS使用所谓的伪类（pseudoclass）修改它们。①、a:link伪类创建超链接的默认显示和行为。在CSS规则中，a:link伪类可以与“a”选择器互换使用。②、a:visited伪类在访问链接之后应用格式化效果。③、a:hover伪类在光标经过链接时应用格式化效果。④、a:active伪类在鼠标单击链接时格式化链接。记住：在使用时，必须以这种顺序声明伪类以使之有效。无论是否在样式表中声明它们，每种状态都具有一组默认的格式和行为。⑵、创建超链接：在文档“设计”窗口中选取菜单的一个项（如Home），在“属性”检查器的“HTML项”中的“链接”框中选择“#”（菜单的文本（Home）显示典型的超链接文本格式化效果：下划线、字体黑色），同样对其它的菜单栏添加格式化效果（“链接”框中选择“#”）。⑶、删除超链接（菜单文本）的下划线：在“CSS样式”面板中选择“#h-navbar”规则后点“新建CSS规则” 图标，弹出“新建CSS规则”窗，在“选择器类型”框中选择“复合类型”，在“选择器名称”后点“不太具体”后变成“#h-navbara”再在后面输入成为“#h-navbara,#h-navbara:visited”确定后弹出“#h-navbara,#h-navbara:visited的CSS规则定义”窗口。在“类型”项的Test-decoration后选择none。在Color框中输入#FFC。⑷、创建a:hover伪类（使光标经过时背景颜色变化）：①光标停留在需要修改的菜单文本处（如Home，不要选择），在“CSS样式”面板中选择“#h-navbara,#h-navbara:visited”规则后点“新建CSS规则” 图标，弹出“新建CSS规则”窗，在“选择器类型”框中选择“复合类型”，在“选择器名称”后点“不太具体”后变成“#h-navbara”再在后面输入成为“#h-navbara:hover”确定后弹出“#h-navbara:hvoer的CSS规则定义”窗口。在“类型”项的Color框中输入#FFC。在“背景”项的Background-color框中输入“#0C0”，然后“确定”。⑸、使背景颜色扩展到<div>的边缘：修改#h-navbara:hvoer的CSS规则（双击弹出“#h-navbara:hvoer的CSS规则定义”窗口），在“边框”项中使Padding的每项值均为“5px”。通过实时视图体验，每个超链接周围扩展了5个像素。但是无论是否激活a:hover状态，增加的填充都会导致链接每一边的文本移动，如果Padding-left、Padding-right都设置为0或空，则文本不会移动。⑹、解决链接文本移动：在“CSS样式”面板的“属性”区域中删除#h-navbara:hvoer的CSS规则的Padding属性（或在“#h-navbara:hvoer的CSS规则定义”窗口中设置Padding的值为空）。将“#h-navbara,#h-navbara:visited”规则的“边框”中的Padding的各个值设置为“5px”，问题则迎刃而解。⑺、修改垂直菜单的交互性：②确定哪些规则作用于垂直菜单：在垂直菜单项之一插入光标，观察标签选择器中显示的歹毒的名称和顺序，垂直菜单正在使用应用于<ul>（无序列表）元素的.nav类，<ul>元素是创建整个列表。②在“CSS样式”面板中，格式化.nav类的规则是ul.nava:hover,ul.nava:active,ul.nava:focus，双击在其弹出的“规则”窗中将“背景”项的Color的值改为#0C0则可。⑻、修改菜单边框颜色提供三维外观引人注目：从标签选择器中观察点击可知<li>是作用于每个菜单项的，在“CSS样式”面板中选择ul.navli规则，从其属性可知这规则格式化菜单按钮的基本结构。双击此规则，在“边框”项的Top、Right、Bottom、Left的前两个框中都输入solid、1px，后面一个框中分别输入“#0C0”、“#060”、“#060”、“#0C0”则可。5、创建伪列：⑴问题的提出：尽管多列设计在Web上非常流行，但是HTML和CS样式没有内置的命令用于在Web页面中产生真正的列结构。作为替代，通过使用<div>元素以及多种格式化技术（通常涉及边距和float属性）来模拟列设计——就像Dreamweaver的CSS布局中使用的一样。其实这些方法都有它们的局限性和缺点。如果你从菜单“文件—新建”创建一个多列文档，尽管各列以相同的高度显示， 但是其中一列几乎问题要短一些。由于侧栏具有背景色，在把内容添加到主页面上时，底部将会出现可见的间隙。有一些方法使用JavaScript及其他技巧，强制列以相等的高度显示，但是这些并没有受到所有浏览器的完全支持，并且可能导致页面出人意料地被破坏。许多设计师通过简单地拒绝使用背景色，完全回避了这个问题。你将代之以使用背景图形和重复功能，创建完全高度的侧栏的效果。这种技术可以很好地与固定宽度的Web设计协同工作。⑵、问题解决，使用背景图形和重复功能：①在垂直菜单下面的文本中插入光标，知道<div.sidebar1>是作用于侧栏的元素，在“CSS样式”面板中选择.sidebar1规则并检查它的属性，删除其背景色这一属性。②修改 .container规则，在“背景”项中的Background-image中点浏览找到divider.gif（此图像为纯色有右连线与侧边栏 180像素等宽），从Background-repeat框中选择repeat-y，确定则可。⑶、删除垂直菜单栏（<ul.nav>）与下面元素（如段落文本<p>或图像元素<img>）的间距：在“CSS样式”面板中点ul.na

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论