中职高教版高二《网页设计与制作》任务3.2 制作首页商品分类课件

项目3 制作网站导航系统 ——任务2 制作首页商品分类 高等教育出版社 Higher Education Press 任务3.2 制作首页商品分类 目录 01 活动1 实现商品分类栏的制作 02 活动2 实现页面跳转 高等教育出版社 Higher Education Press 任务2 制作首页商品分类 01 活动1 实现商品分类栏的制作 高等教育出版社 Higher Education Press 活动1 实现商品分类栏的制作 商品分类是指根据一定的管理目的，为满足商品生产、流通、消费活动的全部或部分需要，将管理范围内的商品集合总体，以所选择的适当的商品基本特征作为分类标志，逐次归纳为若干个范围更小、特质更趋一致的子集合体（类目），从而使该范围内所有商品得以明确区分与体系化的过程。 项目3 制作网站导航/任务3.2 制作首页商品分类 /活动1 实现商品分类栏的制作 【商品分类】 高等教育出版社 Higher Education Press 活动1 实现商品分类栏的制作 【举例】 京东商品分类图 苏宁红孩子商品分类图 项目3 制作网站导航/任务3.2 制作首页商品分类 /活动1 实现商品分类栏的制作 高等教育出版社 Higher Education Press 活动1 实现商品分类栏的制作 【作业步骤】 （1）新建站点，把 “项目三/任务3.2.1”文件夹作为站点文件夹，打开 index.html文件。 （2）在导航栏下新建1行2列的表格。 （3）制作商品分类板块：在新建表格的左侧单元格中新建6*1的表格，输入文字。 （4）修改商品分类列表中文字的样式。 （5）为导航文字设置鼠标经过文字变色效果。 （6）保存网页文件，预览网页效果。 项目3 制作网站导航/任务3.2 制作首页商品分类 /活动1 实现商品分类栏的制作 高等教育出版社 Higher Education Press 活动1 实现商品分类栏的制作 【小助手1】：hover选择器 :hover 选择器用于选择鼠标指针浮动在上面的元素,而且:hover 选择器可用于所有元素，不只是链接。a:hover可用于设置当鼠标悬停在超链接之上时超链接的样式。 设置超链接样式时，:link 选择器设置指向未被访问页面的链接的样式，:visited 选择器用于设置指向已被访问的页面的链接，:active 选择器用于活动链接。要超链接中设置鼠标悬停样式，在 CSS 定义中，:hover 必须位于 :link 和 :visited 之后（如果存在的话），这样样式才能生效。 项目3 制作网站导航/任务3.2 制作首页商品分类 /活动1 实现商品分类栏的制作 高等教育出版社 Higher Education Press 活动1 实现商品分类栏的制作 【小助手2】css选择符种类 （1）id选择符：定义方式为“id=""”，id名称为网页中各元素唯一标识，在CSS定义中，id使用“#”作为标识。 （2）类（class）选择符：定义方式为“class=""”,在网页中的多个元素都可以使用同一个class定义。在css规则定义中，使用点符号加上class名称作为标识 （3）类型选择符：定义时直接使用XHTML标签。 （4）特殊选择符：例如伪类，定义时以冒号开始，目前所有浏览器只支持a元素与超链接操作相关的4个伪类：a:link{}、a:visited{}、a:hover{}和a:active{}。 项目3 制作网站导航/任务3.2 制作首页商品分类 /活动1 实现商品分类栏的制作 高等教育出版社 Higher Education Press 活动1 实现商品分类栏的制作 【知识链接】CSS的三种使用方式 （1）行间样式表 行间样式表是指将CSS样式编码写在HTML标签中，格式如下： <h1 style="font-size:12px;color:#000FFF">我的CSS样式</h1> 行间样式表只需将CSS代码用分号隔开写在style=""之中。这是最基本的形式，但是它没有实现表现与内容分离且不能灵活的控制多个页面所以我们只是在调试CSS代码的时候使用。 项目3 制作网站导航/任务3.2 制作首页商品分类 /活动1 实现商品分类栏的制作 高等教育出版社 Higher Education Press 活动1 实现商品分类栏的制作 【知识链接】CSS的三种使用方式 （2）内部样式表 内部样式表与行间样式表相似都是把CSS代码写在HTML页面中，稍微不同的是前者可以将样式表放在一个固定的位置。内部样式表编码是初级的应用形式，不能达到跨页面使用所以不适合使用。格式如下： <html> <head> <title>内部样式表</title> <style type="text/css">