《网页设计与制作》课件-第七章 CSS常用模块实现

第七章CSS常用模块实现本章知识点网页中常用的模块导航条内容模块“文字列表”的实现“图标列表”的实现“图片列表”的实现图片播放器网页整体布局面向对象的CSS一、网页中常用的模块如果从组成结构上来看，大部分网站都是相似的。一般来说，网页从上至下可以分成头部、主体、底部一、网页中常用的模块在一个网站内，所有网页的头部一般是一致的，以此保持网站的风格统一，主要包括：网站标志（Logo）导航条（Nav）快捷导航条（QuickNav）搜索框（Search）广告（Banner）登录（Login）一、网页中常用的模块网页主体是当前网页的主要内容所在，由各种“内容模块”组成。“内容模块”的基本结构是相同的，根据其内容分为：用户登录滚动新闻分类菜单快捷导航条文字列表排序列表图片列表图文混排图片播放器分页列表一、网页中常用的模块与头部类似，为保持网站的风格统一，整个网站的网页底部都是一致的，包括：友情链接（FriendLink）版权申明（Copyright）快捷导航条（QuickNav）二、导航条导航条是一个网页中极为重要的部分，由多个超链接组成，这些超链接可以链接到网站的各个二级栏目各种风格的导航条二、导航条导航条的各种显示效果栏目链接之间一般有分隔鼠标停留在某栏目上，一般有鼠标悬停效果一般使用特殊的样式标示当前页面所属栏目有的栏目链接上还需要用特殊的小图标进行标识有的栏目链接有子导航，子导航的显示效果有两类：鼠标悬停时以下拉或横向显示子导航，鼠标移出时消失主栏目导航下方固定出现子导航有的导航条上，通过颜色、字体划分出左右两部分，以此区分主要栏目导航和重要功能导航二、导航条任务：实现导航条的步骤构造HTML结构导航条的栏目链接相互独立，但又是一个整体，所以使用无序列表<ul>是比较合适的编写CSS代码由大范围至小范围，一步步实现CSS样式二、导航条实现导航条的重要知识及技巧HTML默认样式重置在不同的浏览器下，某些标签默认的显示效果是不同的，为兼容各个浏览器，使显示效果一致，应首先在CSS中对显示效果不同的属性进行定义浮动整个导航条是一个无序列表（<ul>），栏目链接及分割线都是列表项目（<li>）。<li>是块级元素，要让其在一行内排列，必须将其设置为“float:left;”伪类设置鼠标悬停效果，会用到伪类“:hover”CSSSprites三、内容模块各种“内容模块”是构成网页主体的主要部分，根据其具体内容不同，又分为不同的类型。尽管类型不同，但“内容模块”的基本结构是一致的，主要由以下部分组成：标题栏间隙内容部分三、内容模块标题栏可能包括“修饰小图标”、“标题（可能有多个）”、“更多”一般使用<h1-6>标题标签间隙“标题栏”与“内容部分”之间的间距一般高度为5px，有些内容模块会省略“间隙”内容部分内容头部：采用特殊效果，以图片作为背景，可省略内容主体：放置具体内容，不能省略内容底部：采用特殊效果，以图片作为背景，可省略三、内容模块内容模块结构的实现四、“内容模块”中的具体内容各种类型的“内容模块”按照具体内容的类型，可以分为：文字列表四、“内容模块”中的具体内容图标列表四、“内容模块”中的具体内容图片列表四、“内容模块”中的具体内容“文字列表”的实现无序修饰图标有序修饰图标从HTML结构来说，两种图标大同小异，主要的差别在CSS上由于“list-style-image”在各个浏览器下支持不是很好，所以列表项目前的修饰图标是通过背景的方式进行设置的四、“内容模块”中的具体内容“图标列表”的实现“图标列表”经常用来做导航链接，通过图标与文字的配合，能起到美化网页，以图达意的效果四、“内容模块”中的具体内容“图片列表”的实现如果有文字标题的图片列表，一般要使用定义列表<dl>，如果是没有文字标题的图片列表，使用无序列表<ul>即可五、图片播放器图片播放器是美化网页不可缺少的特效，能在一个固定尺寸的空间内，自动或被动的显示多张图片，常用来做广告展示或重要内容的提示五、图片播放器要实现一个图片播放器效果，需要使用HTML、CSS、Javascript三种语言，这里只对HTML部分、CSS部分进行介绍一个完整图片播放器应该由三大部分组成：图片列表、按钮列表、文字提示在播放的过程中，图片列表中当前播放的图片显示，其他的图片应该要隐藏（display:none;）在播放的过程中，当前的按钮应该高亮显示，其他按钮应该普通显示文字提示如果覆盖在图片上，一般需要半透明显示（opacity）五、图片播放器图片播放器的实现六、网页整体布局要做出一个完整的网页，除了掌握各个局部模块，还要实现网页的整体布局网页的整体布局是网页的代码（HTML、CSS）和显示效果的统一，是网页中各个模块如何摆放、相互关系的统称六、网页整体布局一个良好的网页整体布局，应该有以下特征：简约：在实现同样效果的情况下，代码及代码的嵌套应尽量的少语义化：整个代码中HTML的使用，class的命名应符合语义化的要求易维护：代码的结构应利于重用，便于修改兼容性：网页在不同的浏览器中，能保持一致的显示效果自适应：网页中某些模块应做到宽度或高度上的自适应，在不同的屏幕、不同的内容下保持显示效果一致六、网页整体布局不考虑具体内容，只考虑整体结构，实现简单布局六、网页整体布局整体分析网页分成头部、主体、底部三部分主体包含6个内容模块两种布局方案A：1、3为一列，2、4为一列，5、6各为一行B：1、2为一行，3、4为一行，5、6各为一行六、网页整体布局A方案的“线框图”六、网页整体布局A方案的代码构思头部头部包含两个部分：广告位和导航条，但写代码时可不用层把它们包裹在一起，能减少代码的嵌套主体主体有6个内容模块，对于选择器的使用有多种思路，通过对4种实现方式的比较，理解网页整体布局思想六、网页整体布局A方案中内容模块的4种实现方式比较最后一个方案是CSS代码最少，最容易维护的方案。基本思路：将所有内容模块都看做同一类，在CSS中，通过Class选择器“.box”定义6个内容模块的共同点。通过“class”属性，组合“.box”选择器和“.box_0X”选择器。如果“.box”中没有定义的样式则由“.box_0X”进行补充；如果“.box”中定义了样式，但与该内容模块所需要的样式不同，则由“.box_0X”重新定义，覆盖“.box”中的。七、面向对象的CSS面向对象的CSS是一种“模块化”的设计思想，我们也称之为“面向对象模块化设计”核心思想：将HTML和CSS通过一定的规则进行分类、组合，以达到特定HTML、CSS在特定范围内最大程度的复用实现方式：模块化分析与面向对象的CSS模型建立七、面向对象的CSS模块化分析的基本思路前提：具备完善的UI平面图原则：每个模块应该具备“单一职责”模块与模块之间尽量不要包含相同部分模块的功能应该相对简单稳定为提高模块的重用性，其应尽量做到少而简单本章小结一般来说，网页从上至下可以分成头部、主体、底部三个部分，包含一到多个“模块”功能上或结构上是一个整体的部分，称之为“模块”实现“模块”的主要步骤：构造HTML结构，编写CSS代码导航条是一个网页中极为重要的部分，由多个超链接组成各种“内容模块”是构成网页主体的主要部分，一个完整的“内容模块”主要由标题栏，间隙，内容部分组成“内容模块”中的具体内容有：“文字列表”、“图片列表”、“图标列表”本章小结图片播放器是美化网页不可缺少的特效，常用来做广告展示