《设计与制作网站首页界面》项目教学设计.pdfVIP

Photoshop CS6 基础与案例教程《任务一 设计与制作网站首页》项目教学设计 《设计与制作网站首页界面》 项目教学设计 一、任务描述 网站是众多企业、 团体和个人宣传产品、 主张和树立良好形象的主要途径和 重要手段。据不完全统计，当前 100% 的大型企业、 60% 的中小企业都已经或将 要在互联网上建立的自己的网站， 要使我们的网站在众多网站中脱颖而出， 其界 面的设计就显得十分重要。 网页界面设计其实是一个系统工程， 它包括网站页面布局、 设计，颜色的搭 配、尺寸的大小和风格的定位等。网站首页界面是整个网站的“面子”工程，首 先突出的是功能， 使用户只要看一眼网站， 就能够知道该网站的类型。 其次就是 能够给访问者带来一种视觉享受， 特别是展示、 宣传型的网站需要更加注重艺术 设计。 在本任务就是要求学生使用 Photoshop CS6 软件设计、 制作设计制作网站 首页界面。 1 / 61 Photoshop CS6 基础与案例教程《任务一 设计与制作网站首页》项目教学设计 二、任务目标 学生通过完成本项目，达成以下目标： 知识与技能 ：能够使用切片工具处理图像；了解优化图像命令选项优化 Web 图像的使用方法；了解界面设计与制作；尝试使用动作处理图像。 方法与过程 ：能够根据任务的要求，确定完成任务的所需要的技术，并较 熟练的完成任务； 能对自己和他人的活动过程与结果进行评价与交流， 能归纳利 用信息技术解决问题的基本思想与方法。 情感、态度、价值观 ：通过完成本任务，能够感受到信息技术对社会发展、 工作效率的影响。 三、任务分析 房地产宣传展示型的网站内容不多，架构不复杂，更注重的是形象和标的 （楼盘）的展示。因此，我们将“怡海新城”的实景图处理成宽幅画面作为主题 放置在首页中间的位置， 占据一半以上的版面。 网站分类栏目按钮放置在主题图 下面，当用户需要进一步了解详细内容时， 单击按钮即可进入二级页面。 同时将 公司的名称、 楼盘名、 经营理念和联系方式分别放置在页面的上下端， 给用户更 多的信息。 根据网站的特点，本首页采用 800 像素×520 像素大小，使用图像自动合 并、色调调整等技术进行整体设计， 然后采取切片的方法分别保存文件， 有利于 网页的编辑和浏览。 四、活动策略 在本任务活动的过程中，教师首先要引导学生认识网站首页，知道网站首 面构思、 设计的一般方法。 然后引导学生尝试自动命令拼合图像， 使用切片工具 切分图像的操作。 当学生具备了设计与制作网站首页界面的知识与技术后， 即可 2 / 62 Photoshop CS6 基础与案例教程《任务一 设计与制作网站首页》项目教学设计 引导其完成本项目——网站首页界面的设计与制作活动。 在本任务活动过程中，学生技术方面的获得，大部分内容从阅读教材、观 看操作录屏、 教师演示示范即可达到目标， 教师还需要引导学生了解网页中图像 相关规则、颜色搭配、文件格式、设计创意等方面的知识。因此，教师可以结