HTML5,CSS3,javasript,网页制作,网页设计第7章 链接与导航设计概要1.ppt

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 案例：网络花店主导航菜单