Photoshop 网页设计 静态与动态色彩
这里讲的静态色彩并不是静态的色彩的意思，而是结构色彩、背景色彩和表格色彩等带有特殊识别意义的、决定网站的色彩风格的色彩。
而动态色彩也不是动画中运动物体携带的色彩，而是插图、照片和广告等复杂图像中带有的色彩，这些色彩通常无法用单一色相去描绘，并且带有多种不同的色调，随着图像图片在不同页面的更换，动态色彩也要跟着改变。
如图9-7所示，该网页中的静态色彩是网页中的信息导航背景颜色和文字颜色；动态色彩是网页中的Banner图片中具有的颜色。
静态色彩
动态色彩
图9-7 静态与动态色彩
1．静态色彩
静态色彩主要是由框架色彩构成的，也包括了背景色彩等其他色块形式的色彩。框架色彩是决定网站色彩风格的主要因素，不论插图或者网络广告如何更换，最初和最终给浏览者留下深刻印象的就是框架色彩。
大型站点的装饰很少，大多数色彩是以HTML的形式直接填充在表格里的，十分直接的展示出来。对门户网站来说，静态色彩是网站风格的决定者，有着惊人的魅力和强烈的识别作用，如图9-8所示，该网站就是主要利用静态色彩来完成网页色彩搭配的。其中，静态色彩是网页中的信息导航背景颜色和文字颜色。
图9-8 静态色彩
提示
以静态色彩为主体的网站主要是大型的门户、资讯和电子商务等信息内容型的站点。在大量信息中，为了起到引导阅读的作用，动态色彩需要用跳跃的、引人注目的色彩。
2．动态色彩
以动态色彩为主体的网站主要是图片尺寸大、图片信息多的图片展示型的站点，或者是产品网站、彩信网站和虚拟人物等图片多的资讯站点等。如图9-9所示，是以产品展示为主，所以动态色彩较为突出、明亮，而静态色彩在该网页中只是辅助效果。
图9-9
动态色彩
在分析网站色彩之后，可以看出静态色彩决定了网站的色彩风格和网站给访问者留下的色彩印象。动态色彩则属于即时更换的图片或者广告中带有的颜色。不论动态色彩多么艳丽，也只能针对单独页面起到强烈的视觉引导作用。更换页面后，动态色彩就“消失”了。浏览者离开网站更不会记得动态色彩。
Photoshop 网页设计 实例——静态LOGO图标制作
网站LOGO，是互联网上各个网站用来与其它网站链接的图形标志；是与其它网站链接以及让其它网站链接的标志和门户。在一个布满各种LOGO的链接页面中，受众要在大堆的网站中寻找自己想要的特定内容的网站时，一个能让人轻易看出它所代表的网站的类型和内容的LOGO很重要。LOGO图标分为静态的和动态的，本案例中LOGO图标为静态，网站标识和网站名称包含在内，如图1-69所示。
图1-69 优秀设计网 操作步骤：
（1）新建一个【宽度】和【高度】分别为1100和420像素，白色背景文档。使用【横排文字工具】，输入N字母。右键单击文字图层面板，执行【转换为形状】命令，将文字转换为形状，如图1-70所示。
图1-70 添加渐变叠加效果
（2）使用【直接选择路径】，调整路径各锚点。双击该图层，打开【图层样式】对话框，启用【渐变叠加】命令，设置由#367CFB到#1FC6FB渐变，设置参数，如图1-71所示。
提示
通过使用【添加锚点工具】和【删除锚点工具】，添加和删除路径锚点。
图1-71 添加渐变效果
（3）新建“图层1”，使用【椭圆工具】。设置W和H分别43像素，在文字图像上方绘制正圆。如同上述方法，添加【渐变叠加】效果，设置参数，如图1-72所示。
图1-72 绘制正圆
（4）使用【横排文字工具】，输入neBoiz字母。如同上列方法，文字添加【渐变叠加】效果，设置参数，如图1-73所示。
图1-73 绘制文字
（5）如同上述方法，将文字转换为形状。使用【直接选择路径】，将i字母上的方点删除。并使用【多边形工具】，在该点的位置上绘制五角星路径，如图1-74所示。
图1-74 绘制图像
（6）隐藏“背景”层以外图层，新建“图层2”，填充白色。启用【渐变叠加】样式，添加渐变效果，设置参数，如图1-75所示。
图1-75 添加渐变背景
煎……建…一一电…一 ＵＪ｛ＡＮ ＣＯＭＰＵＴ篷张 在网络教学平台下的信息化教学设计 ——电子商务专业《静态网页制作》课程 刘巧瑜 （福建化工学校福建厦门３６１０２２） 【摘要】：信息化教学设计是通过充分地、恰当地利用现代信息技术和信息资源，科学地安排教学 过程的各个环节和要素，以实现教学过程的优化。笔者将以信息化教学设计的基本原则为基准，针对中 职学校电子商务专业的《静态网页制作》课程，进而探讨在网络教学平台下的信息化教学设计。 【关键字】：网页制作信．ｇ－４Ｊｃ网络教学平台 教育信息化时代的到来，促使教师在教学设计中 更加注重信息资源的利用，从以教为中心的教学逐步 发展到以学中心的教学设计。教师掌握信息化环境下 教学设计的目的，是在自己的日常课堂教学中充分利 用信息技术和信息资源，培养学生的信息素养、创新 精神和解决问题的能力，从而增强学生的学习能力， 提高他们的学业成就。 信息化教学设计的基本设计原则有以下五点： １．充分利用各种信息资源来支持学。 ２．以“任务驱动”和“问题解决”作为学习和研究活 动的主线，在相关的有具体意义的情境中确定和教授 学习策略与技能。 ３．强调“协作学习”。 ４．强调针对学习过程和学习资源的评价 ５．以学为中心，注重学习者学习能力的培养。 接下来，笔者将以《静态网页制作》这门课为例， 结合信息化教学设计的基本原则，探讨该课程在网络 教学平台下的信息化教学设计。 一、充分利用各种信息资源来支持学。 笔者应用到的信息化资源主要有互联网、校内网 络教学平台、电子数码设备和多媒体机房。 互联网的应用主要是用来搜集素材的，但是如果 将互联网开放给学生，容易出现学生寻找的素材五花 八门，甚至部分学生偏离任务目标，玩起网络游戏，老 师疲于监控，课堂效率低下。因此主要是由教师在互 联网上收集素材。笔者所任课班级为电子商务专业， 以电子商务网页制作为题的任务即与学生的专业相 关又能结合实际，受到学生的欢迎。因此，笔者搜集的 素材基本从淘宝网等真实电子商务网站中获取。 网络教学平台是教师与学生交流的平台。学生可 以在该平台上看到教师提供的资料（包括教案，学案， 小技巧等），下载素材，可以上传作业，给教师提问等。 教师可以在该平台上传资料，批改作业（包括打分、写 评语等），答疑解惑等。传统学习总要在一定的场合发 生，如教室等。学生必须亲身坐在教室中才可以听到 教师授课，才可以与同学讨论交流。脱离这样的环境， 学习者将面临巨大的困难，甚至无法进行学习。但利 用网络教学平台则摆脱了这种束缚，依赖技术的帮 助，原则上一个人几乎可以在任何时间，任何地点进 行学习。与传统的有形，受制于种种限制条件的学习 方式相比，网络教学平台使学习过程摆脱了空间的限 制。 制作电子商务网页需要有一些商品图片，教学前 期我们可以从网络中获取商品图片，但教学的后半段 为综合练习阶段，继续从网络中获取素材就不能体现 电子商务网页制作的完整流程。而当今数码设备技术 先进，笔者所在地区９９％的学生拥有可拍照的手机等 电子设备，且拍照质量不错。这使得我们的教学能够 从商品拍摄开始。 多媒体机房则提供学生登录网络教学平台和制 作静态网页所需要的一切软件。 二、以“任务驱动”和“问题解决”作为学习和研究 活动的主线，在相关的有具体意义的情境中确定和教 授学习策略与技能。 在信息化教学环境中，教师和学生的角色将发生 变化。教师的作用不仅是向学生传递知识，更重要是 担当起一个导航者和帮助者的作用。因此，信息化教 学环境中的教学设计不仅要求教师掌握一般的教案 设计，而且还要模拟学生，设计学生的电子作品。教师 布置给学生的学习任务，不是简单的教科书内容的学 ２ｏ１３年第１１期ｌ福建电脑 ・２０１・
营销型网站建设实训
课程标准
课程编号：适用专业：电子商务课程类别：专业基础课程修课方式：必修教学时数：64学时总学分数：4学分
一、课程定位
1. 课程性质《网页设计与制作》是以计算机专业为主体，辐射计算机网络技术专业、计算机应用技术专业、电子商务专业、多媒体设计与制作专业等计算机类专业的理论实践一体化课程，是计算机专业的专业基础课程，也是电子商务的一门核心技能课程。
围绕电子商务专业的培养目标，该课程的定位为：
.懂专业：掌握Web国际标准基础知识；基于W3C网页设计标准，熟悉和掌握静态网页设计与制作及小型网站建设与维护的基本知识。
.精技能：掌握综合运用网页编辑软件、图像处理软件(fireworks)设计和制作网页的技能，熟练掌握DIV+CSS网页布局设计方法，能熟练运用XHTML、CSS(及后续课程JavaScript)进行网站客户端开发，熟悉Web国际标准，掌握小型网站策划、分析、设计、布局、测试的职业能力；坚持手写代码，形成良好的代码规范编写习惯。
.高素质：在课程学习中培养学习和工作的方法能力，培养与人协作和做人的社会能力。
2. 课程作用《网页设计与制作》是面向“网站美工、网站维护”职业岗位的领域课程，也是满足职业岗位任职要求的基本能力课程。
通过该课程的学习，实现以下专业知识、职业能力、职业素质目标，为今后职业生涯发展打好基础。
知识目标：
•熟悉和掌握静态网页设计与制作的基本知识；
•掌握Web国际标准基础知识；
•了解和熟悉HTML语言；
•掌握静态网页设计与制作的知识；
•掌握网页中DIV+CSS网页布局方法；•掌握网页中图片设计和处理、动画导入的知识；•掌握网站检查与发布的知识；
•坚持手写代码，形成良好的代码规范编写习惯。
能力目标：
•具备信息收集、处理、准备、加工的能力；
•具备网页设计及网页中图形设计、动画导入的基本能力，能独立设计并制作一个内容完整、图文并茂、技术运用得当的小型静态网站；
