网页设计与制作教学课件作者HTML+CSS+JavaScript张洪斌教学资源KC11120100002_设计文档课件.doc

《课程案例 ——案例任何在任何时候、任何地方都能借助网络代表生命，代表健康，代表活力，是充满希望的颜色绿色不仅仅是由树木、花草构成的风景，而且是安全、健康、清洁等等美好事物节约资源、减少污染的象征。 1.1.3规划草图 对于一般的网站来说，一个项目往往从一个简单的界面开始，但要把所有的东西组织到一起并不是件容易的事情。首先，要先画一个站点的草图，勾画出所有客户想要看到的东西。然后，将它详细的描述交给美工人员，让他们知道在每一屏上都要显示哪些内容。如图1-3所示为本站的草图。 图1-2淮安市专用汽车制造有限公司网站的草图 1.2 项目展示 淮安市专用汽车制造有限公司网站效果图如图1-1所示。 图1-3淮安市专用汽车制造有限公司网站效果图 案例目标： 掌握网站前期策划与内容组织技巧 掌握网站页面效果图的设计与制作方法 掌握网页编辑与动画设计方法 掌握网站管理系统的使用方法与技巧 1.3 实施步骤 虽然每个Web站点在内容、规模、功能等方面都各有不同，但是有一个基本设计流程可以遵循。从国内大的门户站点如搜狐、新浪到一个微不足道的个人主页，都要以基本相同的步骤来完成。本网站的开发流程同样如此，如图1-4所示。 图1-4淮安市专用汽车制造有限公司网站的制作流程 1.4 效果图与静态页面制作 1.4.1效果图设计 效果图制作的原则：先背景，后前景，先上后下，先左后右。 本系统最终的效果图如图1-1所示。 制作软件：Photoshop CS各种版本，本实例采用的是Photoshop CS5中文版。 针对此网页的效果图，采用前面谈的先背景，后前景，先上后下，先左后右的设计原则进行设计。 本效果图设计中用到的主要知识： 辅助线的应用 图层样式与图层混合模式的应用 选择工具的应用 文字工具的使用 选框工具的使用 铅笔工具的使用 自由变化的应用 本网站的详细制作步骤如下： 1）打开Photoshop 软件，新建文件命名为“淮安市专用汽车制造有限公司”，大小为：1000*1200，背景色为“白色”，执行“视图”-“新建参考线”命令，添加3条垂直辅助线（依次为2px，240px，998px），添加9条水平辅助线（依次为2px，105 px ，145px，155px，363 px，415px，1075px， 1185px，1198px），如图1-5所示。 图1-5 效果图辅助线分布 2）然后使用矩形选框工具选中矩形区域（[2,2],[998,1198]），将其区域进行描边，宽度为1px，颜色为绿色（#5f9507），位置为居中。 3）打开“公司标志.psd”,将公司标志放到文件左上角去，调整其大小，然后添加“淮安市专用汽车制造有限公司”和“Huaian Special Purpose Vehcle Manufacturing Co.,Ltd.”两行网站名称，文字大小为24px，颜色为“#00591B”，字体为“经典综艺体”（将素材文件夹中的字体文件复制到C盘windows下的font文件夹即可），如图1-6所示。 图1-6 添加公司标志与文字的效果 4）在右上角输入“服务热线：8000-800-800”，大小为“18px”，文字颜色为绿色（#01541b）， 号码颜色为橙色（# f6820a）。打开“小图标1.gif”和“小图标2.gif”文件，分别将两个图标放到其下方，然后在每个图标的后面分别输入“English(new)、English(old)”，大小为“14px”，颜色为“#01541B”，调整位置后，如图1-7所示。 5）新建图层，使用矩形选框工具，调整固定大小为：宽度“994px”， 高度 “40px”，将其放在水平第2条与第3条参考线中间，用渐变工具从深绿色“#3c7102”到绿色“#73a80b”将其填充，设置如图1-8所示，最终效果如图1-9所示。 图1-7 右上角效果 图1-8 “渐变”效果设置 图1-9 添加导航背景后的效果 6）新建图层，取名为分隔线，在垂直参考线127px位置时，选择单列选框工具，然后设置前景色“#79aa20”，背景色为“#e0f4b8”， 使用渐变进行填充，最后将多余的线删除。按住Alt+Shift健，复制六条分隔线。同时选中七条分隔线图层，点击水平居中分布，最后，按住CTRL+E将分隔线所在图层合并。在导航上分别输入“网站首页、公司概况、公司动态、产品介绍、办公系统、在线订购、招聘信息、联系我们”，字体为“宋体”，大小为“14px”，颜色为白色，用上述同样的方式将其水平居中分布。结果如图1-10所示。 图1-10 整