CSS模板和库项目课程_第1页
CSS模板和库项目课程_第2页
CSS模板和库项目课程_第3页
CSS模板和库项目课程_第4页
CSS模板和库项目课程_第5页
已阅读5页，还剩46页未读， 继续免费阅读

下载本文档

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

文档简介

第八讲CSS、模板和库项目CSS样式表是Dreamweaver中的重点和难点，通过本章的学习，大家要理解CSS样式表的作用。掌握如何建立CSS样式表，如何运用CSS样式表，如何设置CSS样式表的各项属性。在DreamweaverMX中利用模板和库项目能够创建具有统一风格的网页，同时也能更方便地进行网站的维护。本章介绍模板与库项目的基础知识和应用：如何创建模板以及在网页设计中应用模板，如何创建和设置库项目以及向网页添加库项目等。本章内容学习目标利用CSS技术创建和应用CSS样式，对网页进行格式设置和特殊处理。掌握模板和库项目的创建方法；掌握应用模板设计网页的方法；掌握将库项目添加到网页中的方法；掌握用模板和库更新页面的方法。模板：实际上是一种特殊网页，可以通过模板页面产生许多形式相似的网页。库项目：指网站上经常重复使用或更新的页面元素（如图象、文本和其他对象），将它们存储在库中进行管理和维护。在DreamweaverMX中利用模板和库项目能够创建具有统一风格的网页，同时也能更方便的进行网站的维护。8．1创建模板将现有文档存为模板定义模板的可编辑区修改模板将现有文档存为模板实例1创建模板建立站点新建网页网页另存为模板：选择菜单→文件→另存为模板单击保存按钮。在站点根目录下会自动增加一个文件夹Templates，新保存的模板就在该文件夹中。模板文件扩展名为.dwt。打开资源面板并单击“模板”按钮，可以看到新建模板。8.1.2定义模板的可编辑区在模板中，有两种类型的区域：可编辑区域和锁定区域。在应用了模板的网页中，模板部分是锁定的，其中的内容都为不可编辑，所以必须在模板中定义可以编辑的区域以使用该模板来创建新的文档。可以像普通网页一样在文档窗口中打开模板文件进行修改和编辑。实例2为模板index.dwt定义可编辑区域。打开index.dwt模板；清理模板文档：只保留所有页面中都需要的公共元素；定义可编辑区域：选择菜单命令“插入→模板对象→可编辑区域”；或插入面板→选择模板标签→可编辑区域。在模板页页中，可可编辑区区域用下下面的标标记来表表示：<!--TemplateBeginEditablename="EditRegionMain"--><!--TemplateEndEditable-->在模板中中，还有有两个默默认的可可编辑区区域：页页面标题题和页面面头部中中的区域域。因此此，应用用了该模模板的文文档，可可以更改改文档的的标题，，可以在在页面插插入客户户端脚本本及定义义CSS样式表，，而其他他区域均均是不可可编辑的的。8.2使用用模模板板使用用模模板板创创建建新新文文档档对现现有有文文档档应应用用模模板板使用用模模板板更更新新文文档档8.2.1使用用模模板板创创建建新新文文档档实例例３３利利用用模模板板index.dwt创建建新新文文档档。。选择择菜菜单单命命令令““文文件件→→新新建建””，，打打开开新新建建文文档档对对话话框框，，选选择择““模模板板””选选项项卡卡，，选选择择站站点点模模板板，，在在右右边边的的预预览览视视图图中中给给出出模模板板示示意意图图。。如如图图所所示示：：选中中““当当模模板板改改变变时时更更新新页页面面””选选项项，，单单击击““创创建建””按按钮钮，，进进入入新新文文档档设设计计视视图图。。在新新文文档档中中，，光光标标只只能能移移动动到到可可编编辑辑区区。。在可可编编辑辑区区EditRegionMain中插插入入相相应应的的表表格格、、图图象象和和文文字字。。可以以更更改改文文档档标标题题。。8.2.2对已已有有文文档档应应用用模模板板实例例4对下下列列表表单单应应用用模模板板index.dwt。打开开表表单单网网页页文文档档；；展开开资资源源面面板板的的模模板板窗窗口口，，选选中中模模板板index.dwt，单单击击面面板板下下面面的的““应应用用””按按钮钮。。显显示示如如下下对对话话框框：：其中中提提示示当当前前页页在在模模板板中中不不存存在在相相应应的的区区域域：：Documentbody和Documenthead。这这是是由由于于在在当当前前文文档档的的头头部部（（head）中中不不存存在在JavaScript函数数，，而而在在主主体体（（body）中中不不存存在在内内容容的的原原因因。。选中中对对话话框框中中间间窗窗口口““名名称称””列列下下的的可可编编辑辑区区域域““Documentbody””，在在窗窗口口下下的的““将将内内容容移移到到新新区区域域””下下拉拉列列表表中中选选择择““EditRegionMain””，其其出出现现在在窗窗口口““已已解解析析””列列下下对对应应行行，，即即让让当当前前页页面面的的body部分内内容位位于应应用模模板的的可编编辑区区域EditRegionMain中；再再选中中”Documenthead”将其移移到head区域中中，如如图所所示：：单击““确定定”，，得到到如下下所示示页面面设计计视图图。8.2.3使用模模板更更新文文档当需要要对模模板的的某些些方面面进行行修改改，此此时可可在DreamweaverMX中打开开模板板文件件，按按照需需要进进行相相应的的修改改工作作。在在保存存模板板时会会弹出出如下下对话话框，，询问问是否否需要要更新新使用用该模模板来来创建建的文文件；；选择择“更更新””，则则自动动对所所有相相关文文件进进行更更新工工作。。8.3库项目目及其其应用用创建库库项目目向网页页添加加库项项目利用库库项目目更新新网站站8.3.1创建库库项目目在一个个库项项目中中，可可以包包含文文本、、表格格、表表单、、图象象和多多媒体体等内内容。。创建建库项项目时时，先先选中中文档档中的的需要要作为为库项项目的的对象象，选选择菜菜单命命令““修改改→库库→增增加对对象到到库””来创创建项项目，，也可可以在在资源源面板板库类类窗口口中单单击““新建建库项项目””按钮钮来创创建。。实例5创建一一个库库项目目，在在项目目中包包含一一个表表格。。在DreamweaverMX中，新新建网网页文文件。。向网页页中插插入一一个2行3列的表表，设设定表表格边边框为为5，间距距为2，边框框颜色色为蓝蓝色。。选定页页面上上的表表格，，选择择菜单单命令令“修修改→→库→→增加加对象象到库库”，，在当当前站站点根根目录录下自自动增增加一一个Library文件夹夹和文文件““未命命名.lbi””。在库库类窗窗口中中同时时给出出该库库项目目的样样式图图。将新项项目重重命名名为table，Library目录中中的文文件的的名称称也自自动改改变为为table.lbi8.3.2向网页页添加加库项项目实例6将库项项目添添加到到index.dwt中。打开文文档；；确定插插入位位置；；打开资资源面面板并并切换换到库库类别别，选选中库库项目目table，单击击面板板底部部的““插入入”按按钮，，或者者直接接将库库项目目拖动动到目目标位位置释释放，，该项项目就就插入入到网网页中中。8.3.3利用库库项目目更新新网站站在对库库项目目进行行修改改后，，一般般在保保存该该库项项目时时，就就会打打开如如下对对话框框，询询问是是否更更新添添加了了该库库项目目的文文件，，如果果选择择“更更新””按钮钮，就就会打打开对对话框框如图图所示示。使用模模板和和库，，极大大地提提高了了网站站开发发的速速度和和效率率，也也极大大改善善了网网站的的维护护工作作。8.4CSS样式表表概述述为什么么用CSS样式如今网网页排排版格格式越越来越越来复复杂，，如果果要对对多个个网页页的同同样格格式一一一进进行设设计，，那么么就会会给制制作人人员带带来很很多的的工作作量，，所以以解决决办法法是采采用CSS样式来来一次次性对对若干干个文文档的的格式式进行行控制制。8.4CSS样式表表概述述什么是是CSS样式CSS（CascadingStyleSheet，层叠叠样式式表））技术术是一一种格格式化化网页页的标标准方方式，，它扩扩展了了HTML的功能能，使使网页页设计计者能能够以以更有有效的的方式式设置置网页页格式式。8.4CSS样式表表概述述什么是是CSS样式CSS样式存存于样样式表表文件件中，，然后后在多多个网网页中中同时时应用用该样样式表表中的的样式式，，就能能确保保多个个网页页具有有一致致的格格式，，并且且能够够随时时更新新（只只要更更改样样式表表文件件就可可以使使所有有网页页自动动更新新），，从而而大大大降低低了网网站的的开发发和维维护工工作量量。8.4CSS样式表表概述述认识CSS面板显示所所有样样式显示当当前样样式内部样样式表表样式名名称样式及及属性性值8.5CSS的分类类外部链链接样样式表表(Externallinkingcss):实际上上是一一个仅仅包含含样式式规则则的外外部文文本文文件，，其后后缀名名为““CSS”，当编编辑此此文件件时，，所有有与此此样式式表链链接的的文档档将全全被更更新。。内嵌式式样式式表(EmbeddedCSS)：嵌在在HTML代码的的<style>标记之之间。。内联式式样式式表(InlinkCSS):直接在在某一一HTML标记后后添加加样式式代码码。优先程程度：：内联联式>内嵌式式>外部链链接（1）显示示“CSS样式””面板板的方方式：：打开“窗口”菜单——““CSS”样式（2）样式式视图图CSS样式式面板板CSS样式在在网页页中的的三种种存在在方式式外部文文件方方式：：CSS以文件件的形形式存存在，，在HTML文档头头通过过文件件引用用进行行控制制。CSS文件的的引用用是在在<head></head>标签之之间写写下列列语句句:<linkrel=““stylesheet”href=““文件名名.CSS””type=“text/css””>不以文文件的的形式式存在在,仅作用用于本本文档档,直接定定义在在<head></head>之间.<Styletype=““text/css”><!——P{font-family:““宋体””font-size:9pt;color:blue}H2{font-family:““宋体””;font-size:13pt;color:red}--></style>内嵌样样式直接插插入式式只需要要在每每个HTML标签后后书写写CSS属性。。作用用范围围只限限于本本标签签。<tablestyle=“color:red;font-size:10pt””>在统一一站点点风格格上，，用第第一方方式，，在某某个网网页风风格统统一上上，用用第二二种方方式，，而在在网页页内部部某个个标签签的具具体调调整上上，用用第三三种方方式。。如果是是新建建CSS文件,有两种种方法法:方法一一:可以通通过菜菜单”文件/新建/CSS样式”方法二二:通过进进入CSS面板,点击右右下角角的”新建CSS样式”接下来来,我们来来看第第二种种方法法创建新新的CSS样样式式创建建自自定定义义样样式式(也就就是是选选择择器器类类型型中中选选择择”类”)：名名称称须须以以.开头头，，并且且可可以以包包含含任任何何字字母母和和数数字字组组合合。。例例如如.myhead1。如如果果您您没没有有输输入入开开头头的的句句点点，，Dreamweaver将自自动动为为您您输输入入。。在””定定义义在在:””的的选选项项中中,有有两两个个选选择择,第第一一个个表表示示新新建建CSS文文件件,这这时时,你你在在刚刚才才的的””名名称称:””后后面面的的文文本本框框中中输输入入的的就就是是CSS文文件件名名;如如果果你你选选择择””仅仅对对该该文文档档””,则则是是以以形形如如””.myhead1””方方式式出出现现在在代代码码中中.重定定义义HTML标签签：：重定定义义特特定定HTML标签签的的默默认认格格式式。。对文文档档中中的的任任何何标标签签都都可可以以应应用用CSS样式式.acronym从从字字义义上上理理解解，，是是取取首首字字母母的的缩缩写写词词，，abbr是是缩缩写写，，在在应应用用过过程程中中，，两两个个标标签签看看起起来来差差不不多多，，但但还还是是有有区区别别的的。。<acronymtitle="css">CascadingStyleSheets</acronym><abbrtitle="ps">photoshop</abbr>上面面这这两两行行代代码码是是放放在在页页面面中中的的.然后后再再设设置置abbr或acronym标签签注意意:IE6中可可能能不不支支持持,IE7支持持更多多的的HTML标签签的的信信息息请请浏浏览览附附录录:html标记记大大全全选择择高高级级：：重重新新定定义义一一些些标标签签的的特特定定组组合合格格式式。。共共有有四四种种:a:link,a:visited,a:hover,a:activea:link当文文字字作作为为链链接接时时,a:visited当其其链链接接的的网网页页已已被被浏浏览览时时,a:hover表示示光光标标移移向向链链接接文文字字时时,a:active当超超链链接接文文字字被被选选中中时时在网网页页中中练练习习这这四四种种的的效效果果外部部：：将将以以文文件件的的形形式式存存在在。。仅对对该该文文档档：：内内嵌嵌式式样样式式。。CSS的属属性性字体体：：font-family大小：font-size粗细：font-weight样式：font-style行高：line-height修饰：text-decoration颜色：color定义层叠样式式表类型：定义CSS样式的基本类类型设置。背景：对CSS样式的背景设设置进行定义义，可以对网网页中的任何何元素应用背背景属性。例例如，创建一一个样式，将将背景颜色或或背景图像添添加到任何页页面元素中，，比如在文本本、表格、页页面等的后面面。还可以设设置背景图像像的位置。区块：精确定定义整段文本本中文字的字字距、对齐方方式等属性。。盒子：可以定定义特定元素素的大小及其其与周围元素素的间距等属属性。边框面板：可可以对控制元元素周围边界界的样式属性性进行定义。。列表面板：定定义列表的样样式属性。定位面板：定定义层的样式式属性。扩展样式面板板：主要是用用来控制那些些不被大多数数浏览器所支支持的功能。。注意：那些在在样式定义义对话框中以以星号（*））标注的样式式属性是不会会在文档窗窗口中显示的的，只有浏览览器预览的时时候才能看到到。应用样式表课堂作业对上海凯泉生生物科技有限限公司主页的的CSS样式导出为独独立文件。滤镜特效有时时为什么看不不到有几种滤镜的的效果对文字作用时，必须须在定义“box”中的Width参数之后，才才能显示出来来。这类滤镜镜包括：dropshadow,blur,glow,alpha,wave等.9、静夜四四无邻，，荒居旧旧业贫。。。2022/12/202022/12/20Tuesday,December20,202210、雨中黄黄叶树，，灯下白白头人。。。2022/12/202022/12/202022/12/2012/20/20225:44:12PM11、以我独沈久久，愧君相见见频。。2022/12/202022/12/202022/12/20Dec-2220-Dec-2212、故人江海别别，几度隔山山川。。2022/12/202022/12/202022/12/20Tuesday,December20,202213、乍见翻疑梦梦，相悲各问问年。。2022/12/202022/12/202022/12/202022/12/2012/20/202214、他乡生生白发，，旧国见见青山。。。20十十二月20222022/12/202022/12/202022/12/2015、比比不不了了得得就就不不比比，，得得不不到到的的就就不不要要。。。。。。十二二月月222022/12/202022/12/202022/12/2012/20/202216、行行动动出出成成果果，，工工作作出出财财富富。。。。2022/12/202022/12/2020December202217、做前前，能能够环环视四四周；；做时时，你你只能能或者者最好好沿着着以脚脚为起起点的的射线线向前前。。。2022/12/202022/12/202022/12/202022/12/209、没有有失败败，只只有暂暂时停停止成成功！！。2022/12/202022/12/20Tuesday,December20,202210、很多事事情努力力了未必必有结果果，但是是不努力力却什么么改变也也没有。。。2022/12/202022/12/202022/12/2012/20/20225:44:13PM11、成功就就是日复复一日那那一点点点小小努努力的积积累。。。2022/12/202022/12/202022/12/20Dec-2220-Dec-2212、世间成事事，不求其其绝对圆满满，留一份份不足，可可得无限完完美。。2022/12/202022/12/202022/12/20Tuesday,December20,202213、不知香积积寺，数里里入云峰。。。2022/12/202022/12/202022/12/202022/12/2012/20/202214、意志志坚强强的人人能把把世界界放在在手中中像泥泥块一一样任任意揉揉捏。。20十十二二月20222022/12/202022/12/202022/12/2015、楚塞塞三湘湘接，，荆门门九派派通。。。。。十二月

人人文库> 全部分类> 行业资料 > 商业贸易

温馨提示

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

最新文档

评论

0/150

提交评论