中职高教版高二《网页设计与制作》任务7.1 制作淘宝PC端首页课件

项目7 综合网页制作与发布 任务7.1 制作淘宝PC端首页 1 CONTENTS 01 活动1 布局淘宝PC端首页 02 活动2 制作其他交易类电商网页 01 布局淘宝PC端首页 首页是店铺的门面，是向买家传递店铺的整体风格和产品定位，让买家能更好地记住,店铺首页的布局就好比实体店一样，要有招牌。一般淘宝页面的通栏尺寸是950像素，双栏的是190像素和750像素。 【淘宝页面的尺寸】 5 （1）浏览店铺的首页，分析店铺的结构。 （2）画出店铺首页布局图。 （3）准备好各类素材。 （4）利用Dreamweaver CS6制作店铺首页。 （5）预览测试效果。 【作业步骤】 6 （1）浏览店铺的首页，分析店铺的结构。如下图 【作业步骤】 淘宝“小时光”文具店铺首页 “当当网”首页 7 （2）画出店铺首页布局图。 【作业步骤】 ？ ？ ？ ？ 新品上架 人气热销 限时折扣 优惠卷 宝贝分类 宝贝推荐 宝贝搜索 ？ LOGO banner 导航栏 广告区 新品上架 人气热销 限时折扣 优惠卷 宝贝分类 宝贝推荐 宝贝搜索 页脚 8 （3）准备好各类素材。 【作业步骤】 店标、店招等素材 （4）利用Dreamweaver CS6制作店铺首页。 布局店铺首页：使用表格及嵌套表格对页面进行合理布局，在表格中插入图像、文本等网页元素。 美化店铺首页：使用CSS样式文件美化店铺的首页。 9 （5）预览测试效果。 【作业步骤】 网页最终效果 10 表格应尽量使用绝对像素定义其大小，以免浏览器分辨率不同时产生变形。 一个网页要尽量避免将所有的内容都嵌套在一个大表格之中。 表格分块显示，从而加快网页下载时间，其写法“<table><tbody>……</tbody></table>” 。 如果页面中添加表格只是为了布局页面，应该将表格边框设置为0，在浏览时将不显示表格边框，从而使网页更美观。 【作业助手1】表格定义大小的技巧 11 表格属性与单元格属性会相互叠加，如果有相同的属性设置，单元格的属性优先于表格的属性。如设置表格背景颜色为红色，设置某个单元格背景颜色为白色，则该单元格的颜色为白色。 【作业助手2】表格属性与单元格属性 12 在某个单元格中插入内容后，为适应内容大小，将使其他单元格的宽度或高度发生改变，这时需要进行手动调整，如果需要在多个单元格中添加内容，应该将所有内容都添加完后再统一进行调整。 【作业助手3】手动调整表格 13 常见网页布局形式： （1）左右对称结构布局 （2）“同”字结构布局 （3）“回”字形结构布局 （4）“匡”字形结构布局 【知识链接】 14 （5）自由式结构布局 （6）另类结构布局 （7）分栏型布局 （8）封面型布局 15 02 制作其他交易类电商网页 淘宝网——中国领先的个人交易电子商务平台。首页除了列有产品分类之外，还提供了热卖单品、精彩资讯、社区精华等相关内容。 当当网——全球知名的综合性网上购物商城，其网站布局设计较为合理，体现出了内容丰富、可视性强、图文并茂的特点。其网站的功能模块主要有商品分类区、产品展示区、商品服务区、商品搜索区、信息发布区等。 【其他交易类电商网站】 18 （1）画出当当网首页布局图。 （2）准备当当网上的各类图片素材。 （3）利用Dreamweaver CS6制作店铺首页。 使用表格及嵌套表格对页面进行合理 布局使用CSS样式文件美化店铺的首页。 （4）预览测试效果。 【作业步骤】 当当网最终预览效果图 19 20 AP DIV具有可移动的特点，是Dreamweaer CS6中最为灵活的网页元素，用户可以在页面中的任意位置对其进行创建和移动操作，也可在其中嵌套多个AP DIV。可直接通过菜单栏进行插入，也可通过“布局”选项卡进行绘制。 【作业助手1】AP DIV的创建 21 “AP元素”面板显示了网页中所有的AP DIV及各个AP DIV之间的关系。在“AP元素”面板中可以选择AP DIV、设置AP DIV的显示属性、设置AP DIV 的堆叠顺序和重命名AP DIV等。 【作业助手2】AP DIV的编辑操作 22 在Dreamweaer CS6中创建多个AP DIV且需要将其堆叠在一起时，可对其排列顺序（即Z轴顺序）进行设置，控制需要显示的内容。通常先创建的AP DIV的Z轴值低，而后创建的AP DIV的Z轴值高，且Z轴值大的AP DIV遮盖Z轴值小的AP DIV的内容。设置AP DIV的堆叠顺序可以在“属性”面板或“AP元素”面板中进行，也可以通过菜单命令来设置。 【作业助手3】设置AP DIV的堆叠顺序 23 通过设置A