《网页设计教学课件作者曾娜3》由会员分享，可在线阅读，更多相关《网页设计教学课件作者曾娜3（88页珍藏版）》请在金锄头文库上搜索。
1、任务三 电子商务网站首页设计,学习活动一 接受工作任务,明确工作要求 学习活动二 工作准备 学习活动三 农产品销售网首页设计 学习活动四 某数码产品销售网首页设计 学习活动五 电子商务网首页设计工作总结、成果展示与经验交流,返回,一、学习准备 .学习设备: 电脑、投影仪。 .学习资料: 参考书籍、互联网上的电子资源。 .分成学习小组。 二、学习过程 引导问题 .电子商务网有什么特点? .当所拍摄的数码相片不能满足客户视觉上的需求时， 如何处理? .根据老师的讲解完成以下图片的处理。 “色彩平衡” 调色(图. 、图. )。,下一页,返回,学习活动一 接受工作任务， 明确工作要求, “镜头光晕”
2、效果(图. 图. )。 “ 锐化” (图. )。 去水印(图. )。 修复瑕疵(图. )。 钢笔工具抠图(图. )。 添加闪光效果(图. )。 曲线调整图片对比度(图. )。 照片滤镜(图. )。,上一页,下一页,返回,学习活动一 接受工作任务， 明确工作要求,三、评价反馈 填写学习活动考核评价表。 学习活动名称: 接受工作任务、明确工作要求,上一页,下一页,返回,学习活动一 接受工作任务， 明确工作要求,上一页,下一页,返回,学习活动一 接受工作任务， 明确工作要求,上一页,返回,学习活动二 工作准备,一、学习准备 .学习设备: 电脑、投影仪。 .学习资料: 参考书籍、互联网上的电子资源。
3、.分成学习小组。 二、学习过程 .每个小组到网上查阅电子商务网并展示， 为该电子商务网写出需求分 析， 包含以下内容。 网站的功能模块分析。 网站结构分析。,下一页,返回,学习活动二 工作准备,网站拓扑图。 收集相关的素材。 .教师通过一个例子讲解农产品销售网草图的规划。 “希望之光” 网站是一个以农产品销售为主的电子商务网站， 网站中有现实商场中常见的“最新促销活动”， 有用户登录窗口， 有专卖自家品牌商品的“品牌店” 和卖各类不同品牌商品的“专卖店”， 有客户服务的在线订货、配选须知， 有本站主打商品， 有搜索品牌的品牌店搜索， 有最新销售的最新商品和销售业绩很好的推荐商品， 现在正在热销
4、的热卖商品， 按季节分的季节商品， 以及服务热线和版权声明等， 还有和其他网站建立连接的友情链接等。,上一页,下一页,返回,学习活动二 工作准备,网站色彩搭配。 “希望之光” 网站在配色上采用大众很容易接受的蓝色和绿色。 蓝色是天空的颜色， 象征宽广和包容， 象征网站的容量和内涵丰富 绿色是植物的固有色， 是最有生命力的颜色， 用绿色做网站的辅助色， 是借用了绿色环保的概念， 现在， 人们都崇尚绿色食品， 这个网站的建设也秉承这种理念， 人性化的绿色使人看着很舒服。 红色水果作为点睛色出现， 给人一种很想吃的欲望， 可以达到销售的 目的。 “ 希望之光” 网站的颜色搭配， 是自然和人们心理感受
5、融合的结果， 足够传给人们一种网上销售农产品和水果副食的信息， 达到颜色为转达信息服务的目的。,上一页,下一页,返回,学习活动二 工作准备,网站制作特点。 “希望之光” 网站在布局上采用电子商务网站常用的上左右结构式， 中间还有两分栏， 如图. 所示。 此网站一个最大的特点是在图片效果的处理上采用了现在流行的元 素水晶来表现导航(图. )， 这样的导航让人想起水果的透明和色泽， 从而引起食欲， 产生购买的欲望。 网站布局。 网站布局如图. 所示， 其中: 区为网站、快速导航(包括“首页”、“加入收藏”、“登录”、“注册” 和“购物车” 链接) 和 区。 区为促销活动专区， 展示近期最新推出的促
6、销活动。 区为网站导航区。,上一页,下一页,返回,学习活动二 工作准备, 区为用户登录区。 区为商品搜索区， 用于站内的模糊搜索。 区为品牌区， 展示网站的著名品牌， 这样可以提高网站名气。 区为客户服务区， 主要展示网站订货相关服务。 区为主打商品区， 实为网站广告位。 区为品牌搜索区， 用来查询网站品牌。 区为最新商品区， 展示近期上架的产品。 区为专卖店区， 按照产品而设的店。 区为广告位区。 区为推荐商品区， 展示网站推荐给用户的一些商品。 区为热卖商品区， 展示最近购买最多的商品。,上一页,下一页,返回,学习活动二 工作准备, 区为季节商品区， 主要是按照季节的不同来划分商品。 区为
7、网站调查区， 调查用户是如何知道该网站的。 区为版权和友情链接区。 素材准备。 所需要的素材如图. 所示。 三、评价反馈 填写学习活动考核评价表。 学习活动名称: 网页设计工作准备,上一页,下一页,返回,学习活动二 工作准备,上一页,返回,学习活动三 农产品销售网首页设计,一、学习准备 .学习设备: 电脑、投影仪。 .学习资料: 参考书籍、互联网上的电子资源。 .分成学习小组。 二、学习过程 .老师在课堂上演示农产品销售网的首页设计制作过程。 操作步骤如下。 () 区: 网站、快速导航和 区设计。 “希望之光” 网站要塑造的是一个以农产品为主的销售网站， 以蓝色和绿色为主色调。 下面先设计 部
8、分。,下一页,返回,学习活动三 农产品销售网首页设计,在 中新建一个“宽 高” 为 像素 像素， 分辨率为 像素/ 英寸的文档， 填充蓝色渐变色， 如图. 所示 用“钢笔工具” 勾出如图. 所示区域， 填充渐变， 相关设置如图. 中“背景色” 所示。 要体现晶莹剔透的诱人感觉， 水果是首选， 因此， 将“素材 ” 复制到页面中， 并用“圆角矩形工具” 新建一图层， 填充为白色， 设置其不透明度为， 如图. 所示。 为页面添加文字， 文字的图层样式设置为“描边” 和“外发光”， 如图. 所示。,上一页,下一页,返回,学习活动三 农产品销售网首页设计,为画面添加 和快速导航， 将“素材.” 复制到
9、页面的左上角 新建图层， 在页面上边绘制一条 像素的横线， 填充色为， 再绘制 像素的横线， 填充颜色为 再用“圆角矩形工具” 设置其半径为， 并设置其图层样式为“投影” 和“内阴影”， 如图. 所示。 () 区: 促销活动专区设计。 在水果图案的右侧添加“最新促销活动” 的相关信息， 这里主要作为网站中促销活动的版块， 可以理解为广告位， 如图. 所示 “ ” 形的图层样式为“投影” 和“内投影”， 相关设置如图. 所示。,上一页,下一页,返回,学习活动三 农产品销售网首页设计,() 、 区: 网站导航区和用户登录区设计。 网站导航也是采用和网站主色调统一的色调， 决定以绿色渐变为主， 蓝色
10、渐变为鼠标滑过时的颜色。 用“钢笔工具” 勾出两个图层， 下面的一层填充颜色为， 上面的一层填充颜色为， 完成效果如图. 所示。 为导航添加立体效果， 按图. 所示设置。 为导航添加文字， 导航的文字字号为 点， 欢迎词的字号为 点，如图. 所示。 () 区: 商品搜索区设计。 为页面添加搜索功能模块， 将“素材.” 和“素材.” 复制到页面中， 新建图层， 用“渐变工具” 绘制圆形形状， 并设置它的图层样式，如图. 所示。,上一页,下一页,返回,学习活动三 农产品销售网首页设计,() 区: 品牌店区设计。 用“圆角矩形工具” 绘制一个圆角矩形， 将这个形状栅格化， 并填充颜色， 并且描 个像
11、素的边， 描边颜色为。 新建图层， 填充“从前景到透明” 的渐变， 并将“素材.” 复制到页面中， 渐变颜色设为白色， 如图. 所示。 () 区: 客户服务区设计。 为画面添加客户服务的相关快速链接时注意， 用“圆角矩形工具” 绘制灰色和白色底色， 灰色的颜色值为， 并复制“素材.”， 如图. 所示。,上一页,下一页,返回,学习活动三 农产品销售网首页设计,() 区: 主打商品区设计。 主打商品区主要是用“圆角矩形工具” 绘制圆角矩形来新建 个图层， 最下面的浅绿色的颜色为 ， 中间图层为白色， 上面图层颜色为， 完成效果如图. 所示。 复制“素材.” 和“素材.” 到页面中， 并为页面添加文
12、字， 文字都设置为黑体， 颜色分别为紫色()、灰色()、蓝色()、绿色() 和黄色()， 完成效果如图. 所示。 () 区: 品牌搜索和服务热线区设计。 用“矩形圆角工具” 绘制出圆角矩形， 填充绿色渐变色， 再自定义一个图案， 新建一个图层， 填充这个自定义的图案， 设计其图层数字为“颜色加深”， 如图. 所示。,上一页,下一页,返回,学习活动三 农产品销售网首页设计,新建图层， 用“圆角矩形工具” 绘制圆角矩形， 填充灰色渐变色， 并将“素材.” 复制到画面中， 输入文字“服务热线 ”， 文字设置为 点、黑体， 文字“服务热线” 的颜色为，文字“ ” 的颜色为， 完成效果如图. 所示 ()
13、 区和 区: 最新商品和专卖店设计。 最新商品区放置的是近期最新推出的商品， 这里选择新商品中有代表性的商品。 右侧的专卖店区放置一些在本店中开设的小店中的商品， 完成的效果图如图. 所示。,上一页,下一页,返回,学习活动三 农产品销售网首页设计,这里主要是用“圆角矩形工具” 来设置圆角矩形， 然后进行颜色填充:最新商品区的颜色为 右侧深一点的蓝色为， 浅一点的蓝色为， 字体是常用的网页字体， 灰色字的颜色为， 红色字的体颜色为。 在图. 中， 左侧的滚动条中的三角形符号后的背景图层样式设置为“描边” 和“渐变叠加”。 () 区: 广告位区设计。 广告位的设计如下。 为了和整个网站的风格色调保
14、持一致， 要将广告位的背景色设置为蓝色和绿色， 具体设置如图. 所示。,上一页,下一页,返回,学习活动三 农产品销售网首页设计,为了增加画面的丰满度， 在该区中增加一些灰线(如图. 所示的图案)， 然后将“素材.” 和“素材.” 复制到画面中， 再输入文字， 文字的颜色有黑色、红色()、绿色()， 完成的效果如图. 所示。 () 区: 推荐商品区设计。 推荐商品区主要放置一些网站中希望推荐给用户的商品， 体现商品的名称和价格， 如图. 所示。 商品图片背景的主要制作方法: 用“矩形选框工具” 创建矩形选区 填充颜色为白色， 然后在没有取消选区的情况下， 新建一个图层， 填充颜色为， 执行“选择” “修改” “扩展” 命令， 弹出“扩展选区” 对话框， 将“扩展量” 选项设置为， 如图. 所示。 然后选择“选择” “反向” 命令将画面反向选择， 设置其羽化为， 按 键两次，完成投影阴影效果。,上一页,下一页,返回,学习活动三 农
