《网页设计》课件-4.1知识链接_第1页
《网页设计》课件-4.1知识链接_第2页
《网页设计》课件-4.1知识链接_第3页
《网页设计》课件-4.1知识链接_第4页
《网页设计》课件-4.1知识链接_第5页
已阅读5页，还剩16页未读， 继续免费阅读

下载本文档

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

文档简介

SAMPLE4.1知识链接项目四使用CSS样式美化页面——简单快捷规范制作页面电子商务网页常用术语1CSS样式基础234

CSS样式基本语法

4.1知识链接

CSS样式的使用方法电子商务网站需要以展示商品和服务为主，在页面设计中需要着重突出的部分与普通网站有所不同。商品分类列表的合理布局，将直接应用站点中产品的销量；网站菜单栏和导航条的合理使用，更有利于用户查找想要的商品。接下来针对电子商务网页设计中常用的术语和CSS样式基础进行介绍。1电子商务网页常用术语

1.LOGO2.Banner3.导航栏Logo指的是标志、徽标的意思。互联网中的Logo通常指的是网站的标志，如图4-2所示。Logo是网站形象的重要体现，也是网站的名片。对于一个追求完美的网站，Logo更是其灵魂的所在。Logo的形式很多，有文字Logo、图形化Logo，还有动态的Logo。丰富的Logo表现形式更能吸引人的注意。图4-2Banner是指横幅广告或者通栏广告，在网站设计和制作中，除了小图片、文字、图标外，通常还有一个占较大篇幅或占据重要位置的广告，往往称其为Banner，如图4-3所示。在网络营销术语中，Banner作为一种网络广告形式，Banner广告一般是放置在网页上的不同位置，在用户浏览网页信息的同时，吸引用户对于广告信息的关注，从而获得用户点击广告进入相关链接页面的效果。图4-3用户访问网站的主要目的就是为了寻找信息。而导航系统就是帮助用户找到这些信息。要想设计出优秀的导航，帮助用户轻松找到他们真正想要找的东西。导航系统中最常用的就是位于网站页面顶部或者侧边区域的导航栏，如图4-4所示。图4-4局部导航帮助用户到达临近感兴趣的位置网站全局导航，是最顶层导航，可以方便地查找页面中重要的内容导航栏导航栏是一个网站的指路标，可以帮助用户快速到达想要到达的页面。通常导航栏中会加入搜索功能，更便于用户查询并找到想要的内容。用户对每个信息的搜索行为都要通过特定的导航工具才能完成，按照其功能的不同可以分为3种导航工具：结构导航、关联导航和可用性导航。结构导航表示网站内容的层次结构，通常会采用全局和局部导航的形式。全局导航一般是网站的顶层类别，通过全局类型很容易地访问到网站中最重要的内容。局部导航会引导用户到达网站层次结构中临近用户当前所在位置的层次，如图4-5所示。图4-5图4-6

关联导航将一个页面与包含类似内容的其他页面相关联，特别适合“试探的查找”，并且可以帮助用户发现他们“原本不知道”但却应该知道的信息，如图4-6所示。可用性导航实现了页面与帮助访问者使用网站本身的特性之间的关联。例如会员登录、访问用户信息等功能，如图4-7所示。网站中主要内容组织以外的所有内容都可以归纳为可用性导航，它对网站的功能设计非常重要。通过关联导航可以快速进入到与本页面相似的页面中通过可用性导航可以帮助用户快速进入网站其他页面中图4-6图4-7商品分类表，是划分商品和服务类别的文件，根据商品的性质、用途、原料以及不同的服务将其分为若干类，每类又分若干种。按照这种归类方式划分的商品注册使用表，成为商品分类表，如图4-8所示。[商品分类列表在商品众多的大型电子商务网站中起着至关重要的作用。用户通过使用商品分类列表可以快速找到感兴趣的商品，同时也会在不同品牌中做选择，避免用户离开该网站去访问其他网站4.商品分类列表图4-8版权信息通常指的是网站中文字、艺术、科学作品的作者对其作品享有的权利。通常位于页面的底部，主要用来展示一些网页相关版权信息，如图4-9所示。5.版权信息图4-96.友情链接友情链接是指互相在自己的网站上放对方网站的链接，是具有一定资源互补优势的网站之间的简单合作形式。即分别在自己的网站上放置对方网站的LOGO[上一页还是Logo，这种专业术语请全书统一][已改]图片或文字的网站名称，并设置对方网站的超链接，如图4-10所示。用户可以从合作网站中发现自己的网站，达到互相推广的目的，因此常作为一种网站推广基本手段，图4-102CSS样式基础

运用CSS样式表可以依次对若干个网页所有的样式进行控制。同HTML样式相比，使用CSS样式表的好处除了在于它可以同时链接多个网页文件之外，还在于当CSS样式表要是被修改后，所有应用的样式都会自动更新。在Dreamweaver中，用户不需要了解CSS复杂烦琐的语法就可以创建出具有专业水准的CSS样式。不仅如此，Dreamweaver还能够识别现存文档中已定义的CSS样式，方便用户对现有文档进行修改。CSS是网页排版和风格设计的重要工具，在所谓的新式网页里，CSS不容置疑是相当重要的一环，CSS是用来弥补HTML规格中的不足，也让网页设计更为灵活。也可以这样讲，CSS是为了帮助简化和整理在使用HTML标签制作页面过程中那些烦琐的方式以及杂乱无章的代码而被开发出来的。

CSS可以为网页上的元素精确地定位和控制传统的格式属性（如字体、尺寸、对齐等），还可以设置如位置、特殊效果、鼠标滑过之类的HTML属性。如图4-11所示为未使用CSS样式时的页面，如图4-12所示为使用CSS样式后的页面效果。图4-12图4-11（1)将格式和结构分离HTML语言定义了网页的结构和各要素的功能，而CSS样式表通过将定义结构的部分和定义格式的部分分离，使设计者能够对页面的布局施加更多的控制，同时HTML仍可以保持简单明了的初衷。CSS代码独立出来从另一个角度控制页面外观。（2)以前所未有的能力控制页面布局HTML语言对页面总体上的控制很有限。如精确定位、行间距或字间距等，这些都可以通过CSS来完成。（3)制作体积更小、下载更快的网页CSS样式表只是简单的文本，就像HTML那样。它不需要图像，不需要执行程序，不需要插件。使用CSS样式表可以减少表格标签及其他加大HTML体积的代码，减少图像用量从而减小文件大小。（4)将许多网页同时更新，比以前更快更宜易没有CSS样式表时，如果想更新整个站点中所有主体文本的字体，必须一页一页地修改网页。CSS样式表的主旨就是将格式和结构分离。利用CSS样式表，可以将站点上所有的网页都指向单一的一个CSS文件，这样只要修改CSS文件中的某一行，整个站点的网站都会随之修改。（5)浏览器将成为更友好的界面样式表的代码有很好的兼容性，也就是说，如果用户丢失了某个插件时不会发生中断，或者使用老版本的浏览器时代码不会出现杂乱无章的情况。只要是可以识别CSS样式表的浏览器就可以应用它。3CSS样式基本语法

CSS的基本语法CSS由选择符和声明两部分组成。其中声明由属性和属性值组成，所以简单的CSS规则如图4-13所示选择符属性属性值图4-13选择符部分指定对文档中的哪个标签进行定义。选择符最简单的类型是“类型选择符”，直接输入元素的名称，便可以对其进行定义，例如定义XHTML中的<p>标签，只要给出<>尖括号内的元素名称，用户就可以编写类型选择符了，如下所示：p{属性:值;}规则会选择所有<p>标签的样式1.选择符3.属性2.声明4.属性值声明包含在{}大括号内，在大括号中首先给出属性名，接着是冒号，然后是属性值，结尾分号是可选项，推荐使用结尾分号，这样做的原因将在本章后面更清楚，整条规则以结尾大括号结束。属性由官方CSS规范定义。用户可以定义特有的样式效果，与CSS兼容的浏览器可能会支持这些效果，尽管有些浏览器识别不是正式语言规范部分的非标准属性，但是大多数浏览器很可能会忽略一些非CSS规范部分的属性，最好不要依赖这些专有的扩展属性，不识别它们的浏览器只是简单的忽略它们。声明的值放置在属性名和冒号之后。它确切定义应该如何设置属性。每个属性值的范围也在CSS规范中定义。例如，名为color（颜色）的属性可以采用由颜色名或代码组成的值如下所示：p{color:blue;}该规则声明所有段落标签的内容应该将color属性设置为值blue（蓝色），因此所有<p>文本将变成蓝色。4CSS样式的使用方法CSS的使用方法在HTML内插入样式，可分为3种，分别是内联式样式、嵌入式样式和外部样式，在应用时可以根据需要任意应用以上3种，最接近目标的样式定义优先权越高，高优先权样式将继承低优先权样式的未重叠定义并覆盖重叠的定义。1．内联样式内联样式是指将CSS样式写在XHTML标签中，其格式如下。<pstyle=”font-family:宋体;font-size:14px;color:#CCCCCC;”>内联样式<./p>内联样式由XHTML文件中的元素的style属性所支持，只需要将CSS代码用“;”分号隔开输入在style=””中，便可以完成对当前标签的样式定义。这是CSS样式定义的一种基本形式。内联样式仅仅是XHTML标签对于style属性的支持所产生的一种CSS样式编写方式，并不符合表现与内容分离的设计模式，使用内联样式与表格式布局从代码结构上来说完全相同，仅仅利用了CSS对于元素的精确控制优势，并没有很好的实现表现与内容的分离，所以这种书写方式应当尽量少用。CSS的使用方法2．嵌入样式嵌入样式又称为内部样式，是将CSS样式统一放置在页面一个固定的位置，代码如下。<html><head><title>内部样式</title><styletype="text/css">*{padding:0px;<--!设置填充-->margin:0px;border:0px;<--!设置边框-->}body{ font-family:"宋体"; font-size:12px; color:#CCCCCC;}</style></head><body>内部样式</body>样式由<style>……</style>标签标记在<head>……</head>之间，作为一个单独的部分。内部样式是CSS样式的初级应用形式，它只针对当前页面有效，不能跨页面执行，因此达不到CSS代码多用的目的，在实际的大型网站开发中，很少会用得到内部样式。CSS的使用方法3．外部样式外部样式是CSS样式中较为理想的一种形式。将CSS样式代码单独编写在一个独立文件之中，由网页进行调用，多个网页可以调用同一个外部样式文件，因此能够实现代码的最大化使用及网站文件的最优化配置。<html><head><title>外部样式</title><linkhref="style/style.css"rel="stylesheet"type="text/css"/></head><body>外部样式</body>在上面的HTML代码中，在<head>标签中使用<link>标签，可以将link指定为stylesheet样式方式，并使用href=”style.css”指明外部样式文件的路径，只需将样式单独编写在style.css文件中即可。CSS的使用方法

除此之外设计人员还可以使用@import命令导入外部CSS样式文件，此方法与链接外部CSS文件基本相同，创建一个简单的CSS样式文件，然后在引入到HTML文件中，只不过语法上和运作方式上有所不同。采用导入的样式，在HTML文件初始化时，会被导入到HTML文件中，作为文件的一部分，类似于内部CSS样式。而链接的外部CSS样式文件是在HTML标签需要CSS样式风格时才以链接方式引入。简单地说，导入外部CSS样式文件就是在内部样式的<style>……</style>标签中，使用@import导入一个外部CSS样式文件。那么如何导入外部CSS样式文件呢？首先打开一个已将初步设计好并且没有CSS样式控制的页面，打开“CSS设计器”面板，单击“源”部分的加号按钮，在弹出的快捷菜单中选择“附加现有的CSS文件”选项，如图4-14所示。在弹出的“使用现有的CSS文件”对话框中单击“浏览”按钮选择导入的CSS文件，如图4-15所示。图4-15CSS的使用方法单击“确定”按钮完成CSS样式的导入，在代码界面可以看到在<head>……</head>标签中间添加了一段相应代码，如图4-16所示。CSS样式在页面中的应用主要目的在于实现良好的网站文件管理及样式管理，分离式的结构有助于合理分配表现与内容。PPT模板下载：/moban/行业PPT模板：/hangye/节日PPT模板：/jieri/PPT素材下载：/sucai/PPT背景图片：/beij

人人文库> 全部分类> 教育资料 > 中学教育

温馨提示

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

最新文档

评论

0/150

提交评论