《html5,css3,javasript,网页制作,网页设计第7章链接与导航设计概要》由会员分享，可在线阅读，更多相关《html5,css3,javasript,网页制作,网页设计第7章链接与导航设计概要（19页珍藏版）》请在金锄头文库上搜索。
1、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、
2、:hover和:active来控制链接内容访问前、访问后、鼠标悬停时以及用户激活时的样式。需要说明的是，这4种状态的顺序不能颠倒，否则可能会导致伪类样式不能实现。 【演示7-1-1】改变文字链接的外观。,7.1 案例：网络花店友情链接局部页面,7.1.2 设置图文链接 网页设计中对文字链接的修饰不仅限于增加边框、修改背景颜色等方式，还可以利用背景图片将文字链接进一步的美化。 【演示7-1-3】设置图文链接。,7.1 案例：网络花店友情链接局部页面,【案例展示】使用CSS设置列表样式的基本知识制作网络花店鲜花展示页面，本例文件7-2.html在浏览器中的浏览效果如图7-5所示。,7.2 案例：网
3、络花店鲜花展示页面设置列表样式,7.2.1 表格布局与列表布局的对比 1表格布局 2列表布局 使用列表布局来实现新闻列表，不仅结构清晰，而且代码数量明显减少，如图7-7所示。,7.2 案例：网络花店鲜花展示页面设置列表样式,7.2.2 设置列表类型 通常的项目列表主要采用或标签，然后配合标签罗列各个项目。在CSS样式中，列表项的标志类型是通过属性list-style-type来修改的，无论是标记还是标记，都可以使用相同的属性值，而且效果是完全相同的。 【演示7-2-1】设置列表类型 。,7.2 案例：网络花店鲜花展示页面设置列表样式,7.2.3 设置列表项图片符号 list-style-ima
4、ge属性主要使用图像来替换列表项的标记，当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设置纵向导航菜单的
5、基本知识制作网络花店鲜花分类导航菜单，本例文件7-3.html在浏览器中的浏览效果如图7-17所示。,7.3 案例：网络花店鲜花分类导航菜单,7.3.1 普通的超链接导航菜单 普通的链接导航菜单的制作比较简单，主要采用将文字链接从“行级元素”变为“块级元素”的方法来实现。 【演示7-3-1】制作链接导航菜单 。,7.3 案例：网络花店鲜花分类导航菜单,7.3.2 纵向列表模式的导航菜单 由于纵向导航菜单的内容并没有逻辑上的先后顺序，因此可以使用无序列表制作纵向导航菜单。 【演示7-3-2】制作纵向列表模式的导航菜单 。,7.3 案例：网络花店鲜花分类导航菜单,【案例展示】使用CSS设置横向导航
6、菜单的基本知识制作网络花店主导航菜单，本例文件7-4.html在浏览器中的浏览效果如图7-27所示。,7.4 案例：网络花店主导航菜单,导航菜单不只有纵向排列的形式，许多时候还需要页面的菜单能够在水平方向显示。通过CSS属性的控制，可以实现列表模式导航菜单的横竖转换。在保持原有HTML结构不变的情况下，将纵向导航转变成横向导航最重要的环节就是设置标签为浮动。 【演示7-4-1】制作横向列表模式的导航菜单 。,7.4 案例：网络花店主导航菜单,【实训展示】制作网络花店商务安全中心页面，本例文件safe.html在浏览器中的浏览效果如图7-33所示，页面局部布局示意图如图7-34所示。,7.5 实
7、训：网络花店商务安全中心页面,制作过程如下： 页面布局规划。页面布局的首要任务是弄清网页的布局方式，分析版式结构。从页面布局示意图可以看出，页面中的主要内容包括顶部的网站标识及导航菜单、左侧的网购标准及新闻列表、右侧的主体内容及底部的版权信息。 建立目录结构。在实训文件夹下创建文件夹images和css，分别用来存放图像素材和外部样式表文件。 准备素材。将本页面需要使用的图像素材存放在文件夹images下。,7.5 实训：网络花店商务安全中心页面,制作过程如下： 外部样式表。在文件夹css下新建一个名为style.css的样式表文件。 网页结构文件。在当前文件夹中，用记事本新建一个名为safe.html的网页文件。 浏览网页。,7.5 实训：网络花店商务安全中心页面,1综合使用链接和导航菜单技术制作如图7-38所示的页面。 2综合使用链接和导航菜单技术制作如图7-39所示的页面。,习题7,
