《新手入门必备课程淘宝店铺装修基础》教案讲义.ppt

Add the author and the accompanying title 新手入门必备课程淘宝店铺装修基础 网页构造原理 1、网页实际上是一个大盒子，这个盒子里面装着各种各样的小盒子。 2、各个盒子有着不同的属性（大小、边框、背景颜色、字体大小等）。 3、各个小盒子里面装着各种元素（文字、图片、动画、视频等）。 工作职能 1、与交互设计师、 视觉设计师协作，根据设计稿，把图片形式的东西“制作”为 可编辑的网页形式。 2、再根据网站要求，给相应的地方添加上交互（链接、动画等）。 3、前端开发工程师（通常说的“网页制作”、“网页制作工程师”、 “前端制作工程师”、“网站重构工程师”都统称为“前端”。） 4、一名合格的前端开发工程师，应该具有一定的审美能力和基础的美工操作能力， 能很好的与交互及视觉协作。 课前演练 请学员们观察这个店铺， 并讨论他有哪些问题。 店铺装修的重要性 1、引入流量、提升销售。 3、给买家提供便捷，能简捷快速的找到需要的产品。 2、品牌识别，提升品牌知名度。 4、让卖家更好的对店铺进行管理。 店铺装修流程 普通 店铺装修 店铺首页和 宝贝详情页等 告诉买家在购 买前的注意事项 网页 形式 编辑并存储 备份:方便以后我们修改 Dreamweaver Adobe “网页三剑客” 一、店铺装修工具介绍 实训环节 1、了解熟悉图片空间各个功能。 2、尝试新建文件夹，并命名为“我的店铺”。 3、上传素材包里的“店招.jpg”图片至“我的店铺”。 4、打开Dreamweaver，新建一个页面，插入图片空间的“店招.jpg”。 二、制作店招 1、Html简介 超文本标记语言 “超文本”就是指页面内可以包含： 非文字元素 Html基本组成部分 HTML、CSS、JS之间的关系 HTML标签 HTML标签是HTML语言中最基本的单位，也是最重要的一部分。 浏览器以某种方式显示相应的标签样式。 标签特点 开放 闭合 尖括号 成对 开始 结束 标签语义话 什么是标签语义化： 重要性： 去掉或样式丢失的时候能让页面呈现清晰的结构； 搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重； 便于团队开发和维护。 语义化标签就是尽量使用与结构相对应的含义的Html的标签 练习 1、跟着老师，打开Dreamweaver，用10分钟时间试一下左边这些标签各有什么作用。 2、根据块级元素和行内元素的区别，完成下面的连线题。 Add the author and the accompanying title 生活 图标元素 商务 图标元素 商务 图标元素 商务 图标元素 商务 图标元素