使用CSS样式美化和布局网项目管理知识_第1页
使用CSS样式美化和布局网项目管理知识_第2页
使用CSS样式美化和布局网项目管理知识_第3页
使用CSS样式美化和布局网项目管理知识_第4页
使用CSS样式美化和布局网项目管理知识_第5页
已阅读5页，还剩37页未读， 继续免费阅读

下载本文档

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

文档简介

使用CSS样式美化和布局网页项目7知识要点

了解CSS基本概念1掌握CSS样式的创建和使用方法2掌握CSS样式属性设置方法37.1网页展示：在“商旅管理”页面中应用CSS样式

在“商旅管理”页面中应用CSS样式在“乐途网”站点的“ch7”文件夹中创建“商旅管理”页面ctmindex.html，运用表格布局页面，插入网页中相关的内容，再创建CSS样式，对网页内容进行美化，效果如图所示。

7.2网页制作7.2.1使用表格布局制作“商旅管理页面”

步骤1启动DreamweaverCS4，新建HTML文档，将文档命名为ctmindex.html，保存在“乐途网”站点根目录下的“ch7”文件夹中。 步骤2按照制作“乐途网”首页的方式，在ctmindex.html中插入表格，对“商旅管理”页面进行布局。 步骤3在表格中对应位置插入相应图片或文本，并设置表格或单元格的背景颜色，完成“商旅管理”页面的制作

7.2网页制作7.2.2创建文本CSS样式

步骤1打开“商旅管理”子页（ctmindex.html），按下Shift+F11组合键，打开【CSS样式】面板，单击“新建CSS规则”按钮，打开【新建CSS规则】对话框。 步骤2在【选择器类型】选项组中选择“类（可以应用于任何HTML元素）”。在【选择器名称】下拉列表框中输入类样式的名称：.black12。在【规则定义】选项组中选择“新建样式表文件”，若选择“仅限该文档”，则该样式只能应用在当前网页中。7.2网页制作 步骤3单击“确定”按钮，弹出【将样式表文件另存为】对话框。将CSS规则定义在mycss.css文件中，保存在站点目录下“ch7”文件夹中。 步骤4单击“保存”按钮，弹出【.black12的CSS规则定义】对话框，设置.black12类样式的属性。在【分类】中选择【类型】，设置字体大小为“12px”，行高为“20px”，颜色为“#000”，修饰设置为无。单击“确定”按钮，完成.black12的CSS规则的定义。7.2网页制作7.2.3创建表格CSS样式

步骤1在【CSS样式】面板中，单击“新建CSS规则”按钮，在【新建CSS规则】对话框中定义名称为.talbe1的类样式，将样式规则定义在已经保存的mycss.css样式表文件中。 步骤2单击“确定”按钮，打开【.table1的CSS规则定义】对话框。选择【分类】中的【背景】，设置表格背景颜色为“#9C0”。 步骤3选择【分类】中的【边框】，设置边框的样式、宽度和颜色。单击“确定”按钮，完成.table1样式规则的定义。7.2网页制作7.2.4创建超级链接CSS样式 步骤1在【CSS样式】面板中，单击“新建CSS规则”按钮，打开【新建CSS规则】对话框。在【选择器类型】下拉列表框中选择“复合内容（基于选择的内容）”，设置网页中各种超级链接的风格。 步骤2在【选择器名称】中选择【a:link】，将规则定义在mycss.css文件中，单击【确定】按钮，打开【a:link的CSS规则定义】对话框。选择【分类】中的【类型】，设置字体大小为“12px”，颜色为“#06F”，修饰为无（表示无下划线。单击“确定”按钮，完成a:link样式规则的定义。7.2网页制作 步骤3同定义a:link的CSS规则方法一样，在步骤1对话框中选择【a:visited】，在【a:visited的CSS规则定义】对话框中设置a:visited超链接样式。 步骤4以相同的方法，在mycss.css文件中定义a:hover超链接样式。7.2网网页页制作应应用类类CSS样式下面来应应用创建建好的CSS样样式美化化页面。。因为在在创建““.black12””、“.table””以及超超级链接接样式时时，“商商旅管理理”栏目目网页（（ctmindex.html）为为当前打打开页面面，因此此，可以以直接应应用mycss.css样式式表文件件中的CSS样样式。步骤1在在““商旅管管理”网网页（ctmindex.html）的设设计视图图中，用用鼠标选选中商旅旅管理介介绍的文文本。步骤2在在【【属性】】面板的的【类】】下拉列列表中选选择类样样式“black12”，如如图所示示，这样样所选中中的文本本就设置置成“black12”所定定义的样样式。【属性】】面板中中选择样样式7.2网网页页制作步骤3选选中中要应用用“table1”CSS样样式的表表格，如如图所示示。步骤4在在【【属性】】的面板板的【类类】下拉拉列表中中选择““table1”样式式，如图图所示，，将所选选中的表表格设置置为“table1””样式。。选中要应应用“table1””样式的的表格在【属性性】面板板中设置置类样式式7.2网网页页制作主主页应应用CSS样式式表文件件步骤1在在右右侧【文文件】浮浮动面板板中，鼠鼠标双击击打开““乐途网网”首页页index.html。步骤2单单击击【CSS样式式】面板板中的【【附加样样式表】】命令，，或者直直接单击击面板下下的“附附加样式式表”按按钮，打打开【链链接外部部样式表表】对话话框。步骤3在在““文件/URL”文本本框中输输入mycss.css的路路径及文文件名，，也可单单击“浏浏览”按按钮从对对话框中中选择该该文件。。7.2网网页页制作步骤4在在““添加为为”设置置区域，，选择添添加该样样式的方方式，有有“链接接”和““导入””两种方方式。如果选中中“链接接”单选选按钮，，然后单单击“确确定”按按钮，则则会在页页面的头头部插入入以下代代码。<linkhref="mycss.css"rel="stylesheet"type="text/css"/>即通过<link>标标签将样样式表文文件mycss.css与网网页文档档链接。。7.2网网页页制作如果选中中“导入入”单选选按钮，，然后单单击“确确定”按按钮，则则会在网网页头部部的<style>和和</style>标标签之间间插入下下列代码码。@importurl("mycss.css");也就是说说，通过过@import标签签实际上上将mycss.css中的的内容嵌嵌入到网网页文档档的代码码中。步骤5附附加加样式表表后，在在当前网网页文档档中就可可以应用用mycss.css样式表表文件中中所定义义的CSS样式式了。7.3知知识链链接CSS简简介认识【CSS样样式】面面板管理CSS样式式设置CSS样式式属性简简介1.CSS及及其作用用CSS是是CascadingStyleSheets的英英文缩写写，即层层叠样式式表。CSS是是一种用用来进行行网页风风格设计计的样式式表技术术。使用用CSS可以对对网页中中文本的的大小、、字体、、颜色、、边框、、链接状状态等内内容进行行统一设设置，保保证站点点页面的的整体风风格一致致。7.3.1CSS简介2.CSS的特点点（1）创建建一个CSS样式，，可以用于于多个网页页文档。（2）若修修改了某个个CSS样样式，则文文档中所有有应用该样样式的文档档格式都会会自动进行行更新。（3）CSS样式可可以为网页页中的元素素设置各种种过滤器，，从而产生生特殊效果果，如阴影影、辉光、、模糊和透透明等。（4）可以以精确地控控制网页中中元素的位位置。（5）由于于是直接的的HTML格式的代代码，因而而网页打开开速度比较较快。（6）使用用CSS可可以将设计计部分剥离离出来放在在一个独立立样式文件件中，让多多个网页文文件共同使使用，省去去在每一个个网页文件件中都要重重复设置样样式的麻烦烦。（7）CSS有很好好的兼容性性，只要是是可以识别别CSS样样式的浏览览器都可以以应用它。。（8）CSS容易编编写，在Dreamweaver中提提供相应的的辅助工具具。7.3.1CSS简介3.CSS的语法法规则CSS格式式设置规则则由两部分分组成：选选择器和声声明块。在下面的示示例中，h1

是选选择器，介介于大括号号“{}””之间的所所有内容都都是声明块块：h1{font-size:16pixels;font-family:Helvetica;font-weight:bold;}在DreamweaverCS4中中可以定义义以下样式式类型：（1）类样样式（2）HTML标签样样式（（3）高级级样式7.3.1CSS简介4.CSS的保存存方式CSS样式式表可以保保存在网页页内部或者者网页外部部：（1）保存存在网页内内部：将CSS样式式保存在当当前网页<head>与</head>之间的的style标签中中，样式只只对当前网网页有效，，仅当前网网页中的对对象才能应应用相应的的样式。（2）保存存在网页外外部：将CSS样式式保存在一一个独立的的样式表文文件中（.CSS）），在网页页中只要链链接该样式式表文件，，就可以使使用其中的的样式，多多个网页可可以使用同同一样式表表文件。7.3.2认识【【CSS样样式】面板板在Dreamweaver中中，可以使使用【CSS样式】】面板来创创建层叠式式样式表。。用户可以以使用“窗窗口/CSS样式””命令，或或者使用Shift+F11组合键打打开【CSS样式】】面板，如如图所示。。【CSS样样式】面板板7.3.3管理CSS样式式1．编辑CSS样式式（1）在【【CSS规规则定义】】对话框中中修改【CSS规规则定义】】对话框7.3.3管理CSS样式式（2）在【【CSS样样式】面板板中修改选择要修改改的样式修修改属属性设置7.3.3管理CSS样式式（3）在CSS文件件代码中修修改7.3.3管理CSS样式式2．删除CSS样式式在【CSS样式】面面板中选中中要删除的的CSS样样式，再单单击“删除除CSS规规则”按钮钮，或者按按Del键键，即可删删除该CSS样式。。7.3.4设置CSS样式式属性1．类型样样式设置【类型】对对话框如图图所示，可可以用来设设置文本的的样式。7.3.4设置CSS样式式属性1．类型样样式设置各项功能如如下：字体（Font-family）：用来选选择文本的的字体。大小（Font-size）：用来设设置文本的的大小。样式（Font-style）：用于于设置文本本的倾斜格格式，有““正常”、、“斜体””和“偏斜斜体”三种种选项。行高（Line-height）：设置文文本所在行行的高度。。修饰（Text-decoration）：向向文本中添添加下划线线、上划线线或者删除除线，或者者使文本闪闪烁。粗细（Font-weight）：用于设设置文本加加粗的程度度。变体（Font-variant）：设置文文本的小型型大写字母母变量。大小写（Text-transform）：用于设设置文本的的大小写。。颜色（Color）：单击““下三角””按钮，可可以打开调调色板设置置文本的颜颜色，也可可以在该按按钮后边的的文本框中中直接输入入颜色的HTML代码。7.3.4设置CSS样式式属性2．背景样样式设置【背景】对对话框如图图所示，可可以用来设设置网页元元素的背景景属性。7.3.4设置CSS样式式属性2．背景样样式设置各项功能如如下：背景颜色（（Background-color）：设置置元素的背背景颜色。。背景图像（（Background-image）：设置置元素的背背景图片。。重复（Backgound-repeat）：：设置背景景图像的重重复方式。。“不重复复”只在元元素开始处处显示一次次图像；““重复”在在元素后面面水平和垂垂直平铺图图像；“横横向重复””和“纵向向重复”分分别显示图图像的水平平带区和垂垂直带区，，图像被剪剪辑为适合合元素的边边界。附件（Background-attachment））：设置背背景图像是是固定在其其原始位置置还是随内内容一起滚滚动。水平位置和和垂直位置置：设置背背景图像相相对于元素素的初始位位置，可以以用于将背背景图像与与页面中心心水平和垂垂直对齐。。7.3.4设置CSS样式式属性3．区块样样式设置【区块】对对话框如图图所示，可可以用来设设置文本的的间距和对对齐格式。。7.3.4设置CSS样式式属性3．区块样样式设置各项功能如如下：单词间距（（Word-spacing）：设置置字词的间间距。字母间距（（Letter-spacing）：：增加或减减少字母或或字符的间间距。垂直对齐（（Vertical-align）：：设置元素素的垂直对对齐方式。。文本对齐（（Text-align）：：设置文本本在元素内内的对齐方方式。文字缩进（（Text-indent））：设置第第一行文本本缩进的程程度。空格（White-space）：设设置处理元元素中空格格的方式。。“正常””表示收缩缩空白；““保留”表表示保留所所有空白；；“不换行行”表示仅仅遇到br标签时文文本才换行行。显示（Display）：用用来设置是是否以及如如何显示元元素。7.3.4设置CSS样式式属性4．方框样样式设置【方框】对对话框如图图所示，用用来设置元元素（如图图像和层））的高度、、宽度、浮浮动、内容容与边框之之间的距离离以及元素素内边框与与外边框之之间的距离离等属性。。7.3.4设置CSS样式式属性4．方框样样式设置各项功能如如下：宽（Width）和和高（Height）：设置置元素的宽宽度和高度度。浮动（Float））：设置其其他元素（（如文本、、APDiv、表表格等）围围绕元素的的哪个边浮浮动。其他他元素按通通常的方式式围绕在浮浮动元素的的周围。清除（Clear））：定义不不允许AP元素的边边。如果清清除边上出出现AP元元素，则带带清除设置置的元素将将移到该AP元素的的下方。填充（Padding）：设设置元素内内容与元素素边框之间间的间距（（如果没有有边框，则则为边距））。取消选选择“全部部相同”选选项可以设设置元素各各个边的填填充值。边距（Margin）：设置置一个元素素的边框与与另一个元元素之间的的间距（如如果没有边边框，则为为填充）。。取消选择择“全部相相同”可设设置元素各各个边的边边距。7.3.4设置CSS样式式属性5．边框样样式设置【边框】对对话框如图图所示，用用于设置元元素边框的的一些属性性，主要有有四个边的的样式、宽宽度以及颜颜色等。7.3.4设置CSS样式式属性6．列表样样式设置【列表】对对话框如图图所示，用用于设置类类表的一些些属性，包包括类型、、项目符号号图像以及及位置等属属性。7.3.4设置CSS样式式属性7．定位样样式设置【定位】对对话框如图图所示，一一般用来对对层的位置置、大小等等属性进行行设置。7.3.4设置CSS样式式属性7．定位样样式设置各项功能如如下：类型（Position）：：确定浏览览器应如何何定位选定定的元素。。显示（Visibility）：设置置内容的初初始显示条条件。Z轴（Z-Index）：设设置内容的的堆叠顺序序。Z轴值值较高的元元素显示在在Z轴值较较低的元素素的上方。。溢出（Overflow）：设置当当容器（如DIV）中内内容超出容器器的显示范围围时的处理方方式。定位（Placement）：设置置内容块的位位置和大小。。剪辑（Clip）：设置置内容的可见见部分。设设置CSS样式属性8．扩展样式式设置【扩展】对话话框如图所示示，用于设置置一些扩展属属性，如打印印时的分页属属性、当鼠标标移动到元素素上时鼠标的的形状以及滤滤镜等。设设置CSS样式属性8．扩展样式式设置各项功能如下下：（1）分页：：在打印期间间在样式所控控制的对象之之前或者之后后强行分页。。可在下拉菜菜单中选择要要设置的选项项。（2）光标（（Cursor）：设置置当鼠标移动动到元素上时时鼠标的形状状。（3）过滤器器（Filter）：对对样式所控制制的对象应用用特殊效果。。过滤器中所所包括的各类类效果及其参参数说明如下下：设设置CSS样式属性Alpha：：透明效果BlendTrans：：渐隐渐现效效果Blur：动动感模糊效果果Chroma：色度Dropshadow：：下拉阴影效效果FlipH：：水平翻转FlipV：：垂直翻转Glow：光光晕效果Gray：黑黑白效果Invert：反转效果果Light：：灯光效果Mask：蒙蒙版效果RevealTrans：图像转换换显示效果Shadow：：阴影影效果果Wave：：波浪浪效果果Xray：：X光光透视视效果果7.4总总结提提升CSS样式式是一一种高高级的的格式式化网网页元元素的的技术术，它它可以以以样样式表表文件件的形形式保保存在在磁盘盘上，，需要要时可可以““附加加”到到某一一个网网页文文档，，而且且以后后一旦旦修改改了某某个CSS样式式，文文档中中所有有应用用该样样式的的对象象都会会自动动得到到更新新。本章通通过制制作““乐途途网””的““商旅旅管理理”栏栏目页页面，，讲解解了CSS样式式的创创建、、应用用、管管理以以及属属性设设置等等内容容。读读者在在掌握握CSS的的创建建与使使用方方法后后，可可以举举一反反三，，制作作出各各种各各样的的CSS样样式，，这样样在网网页制制作中中可以以方便便地美美化页页面、、统一一页面面样式式，减减少HTML代代码量量。本本章内内容将将为今今后学学习Div的网网页布布局奠奠定基基础。。谢谢！9、静夜四无邻邻，荒居旧业业贫。。2023/1/72023/1/7Saturday,January7,202310、雨中黄叶叶树，灯下下白头人。。。2023/1/72023/1/72023/1/71/7/202311:36:42AM11、以我我独沈沈久，，愧君君相见见频。。。2023/1/72023/1/72023/1/7Jan-2307-Jan-2312、故人人江海海别，，几度度隔山山川。。。2023/1/72023/1/72023/1/7Saturday,January7,202313、乍见翻翻疑梦，，相悲各各问年。。。2023/1/72023/1/72023/1/72023/1/71/7/202314、他乡生生白发，，旧国见见青山。。。07一一月20232023/1/72023/1/72023/1/715、比不了得就就不比，得不不到的就不要要。。。一月232023/1/72023/1/72023/1/71/7/202316、行动出成果果，工作出财财富。。2023/1/72023/1/707January202317、做前，能够够环视四周；；做时，你只只能或者最好好沿着以脚为为起点的射线线向前。。2023/1/72023/1/72023/1/72023/1/79、没有有失败败，只只有暂暂时停停止成成功！！。2023/1/72023/1/7Saturday,January7,202310、很多多事情情努力力了未未必有有结果果，但但是不不努力力却什什么改改变也也没有有。。。2023/1/72023/1/72023/1/71/7/202311:36:42AM11、成功就就是日复复一日那那一点点点小小努努力的积积累。。。2023/1/72023/1/72023/1/7Jan-2307-Jan-2312、世间成事事，不求其其绝对圆满满，留一份份不足，可可得无限完完美。。2023/1/72023/1/72023/1/7Saturday,January7,202313、不知香积寺寺，数里入云云峰。。2023/1/72023/1/72023/1/72023/1/71/7/202314、意志坚坚强的人人能把世世界放在在手中像像泥块一一样任意意揉捏。。07一一月20232023/1/72023/1/72023/1/715、楚塞塞三湘湘接，，荆门门

人人文库> 全部分类> 行业资料 > 管理策划

温馨提示

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

最新文档

评论

0/150

提交评论