HTML5,CSS3,javasript,网页制作,网页设计第7章 链接与导航设计

HTML+CSS+JavaScript

网页制作机械工业出版社同名教材配套电子教案7.1案例：网络花店友情链接局部页面——设置链接样式7.2案例：网络花店鲜花展示页面——设置列表样式7.3案例：网络花店鲜花分类导航菜单——设置纵向导航菜单7.4案例：网络花店主导航菜单——设置横向导航菜单7.5实训：网络花店商务安全中心页面第7章链接与导航设计【案例展示】使用CSS设置链接样式的基本知识制作网络花店友情链接局部页面，本例文件7-1.html在浏览器中的浏览效果如图7-1所示。7.1案例：网络花店友情链接局部页面

7.1.1设置文字链接伪类中通过:link、:visited、:hover和:active来控制链接内容访问前、访问后、鼠标悬停时以及用户激活时的样式。需要说明的是，这4种状态的顺序不能颠倒，否则可能会导致伪类样式不能实现。【演示7-1-1】改变文字链接的外观。7.1案例：网络花店友情链接局部页面

7.1.2设置图文链接网页设计中对文字链接的修饰不仅限于增加边框、修改背景颜色等方式，还可以利用背景图片将文字链接进一步的美化。【演示7-1-3】设置图文链接。

7.1案例：网络花店友情链接局部页面

【案例展示】使用CSS设置列表样式的基本知识制作网络花店鲜花展示页面，本例文件7-2.html在浏览器中的浏览效果如图7-5所示。7.2案例：网络花店鲜花展示页面——设置列表样式

7.2.1表格布局与列表布局的对比

1．表格布局

2．列表布局使用列表布局来实现新闻列表，不仅结构清晰，而且代码数量明显减少，如图7-7所示。7.2案例：网络花店鲜花展示页面——设置列表样式

7.2.2设置列表类型通常的项目列表主要采用<ul>或<ol>标签，然后配合<li>标签罗列各个项目。在CSS样式中，列表项的标志类型是通过属性list-style-type来修改的，无论是<ul>标记还是<ol>标记，都可以使用相同的属性值，而且效果是完全相同的。【演示7-2-1】设置列表类型

。

7.2案例：网络花店鲜花展示页面——设置列表样式7.2.3设置列表项图片符号

list-style-image属性主要使用图像来替换列表项的标记，当list-style-image属性的属性值为none或者设置的图片路径出错时，list-style-type属性会替代list-style-image属性对列表产生作用。【演示7-2-3】设置列表项图片符号

。

7.2案例：网络花店鲜花展示页面——设置列表样式7.2.4设置列表项位置

list-style-position属性用于设置在何处放置列表项标记，其属性值只有两个关键词outside（外部）和inside（内部）。【演示7-2-4】设置列表项位置。

7.2案例：网络花店鲜花展示页面——设置列表样式【案例展示】使用CSS设置纵向导航菜单的基本知识制作网络花店鲜花分类导航菜单，本例文件7-3.html在浏览器中的浏览效果如图7-17所示。7.3案例：网络花店鲜花分类导航菜单

7.3.1普通的超链接导航菜单普通的链接导航菜单的制作比较简单，主要采用将文字链接从“行级元素”变为“块级元素”的方法来实现。【演示7-3-1】制作链接导航菜单

。

7.3案例：网络花店鲜花分类导航菜单

7.3.2纵向列表模式的导航菜单

由于纵向导航菜单的内容并没有逻辑上的先后顺序，因此可以使用无序列表制作纵向导航菜单。【演示7-3-2】制作纵向列表模式的导航菜单

。

7.3案例：网络花店鲜花分类导航菜单

【案例展示】使用CSS设置横向导航菜单的基本知识制作网络花店主导航菜单，本例文件7-4.html在浏览器中的浏览效果如图7-27所示。7.4案例：网络花店主导航菜单

导航菜单不只有纵向排列的形式，许多时候还需要页面的菜单能够在水平方向显示。通过CSS属性的控制，可以实现列表模式导航菜单的横竖转换。在保持原有HTML结构不变的情况下，将纵向导航转变成横向导航最重要的环节就是设置<li>标签为浮动。【演示7-4-1】制作横向列表模式的导航菜单

。

7.4案例：网络花店主导航菜单

【实训展示】制作网络花店商务安全中心页面，本例文件safe.html在浏览器中的浏览效果如图7-33所示，页面局部布局示意图如图7-34所示。7.5实训：网络花店商务安全中心页面

制作过程如下：①页面布局规划。页面布局的首要任务是弄清网页的布局方式，分析版式结构。从页面布局示意图可以看出，页面中的主要内容包括顶部的网站标识及导航菜单、左侧的网购标准及新闻列表、右侧的主体内容及底部的版权信息。②建立目录结构。在实训文件夹下创建文件夹images和css，分别用来存放图像素材和外部样式表文件。③准备素材。将本页面需要使用的图像素材存放在文件夹images下。7.5实训：网络花店商务安全中心页面

制作过程如下：④外部样式表。在文件夹css下新建一个名为style.css的样式表文件。⑤网页结构文件。在当前文件夹中，用记事本新建一