案例一案例一 淮安市专用汽车制造有限公司企业网站开发淮安市专用汽车制造有限公司企业网站开发1.1 网站需求分析网站需求分析1.1.11.1.1 网站功能需求网站功能需求淮安市专用汽车制造有限公司网站旨在，能使任何人在任何时候、任何地方都能借助网络了解公司的基本情况与最新的产品信息。淮安市专用汽车制造有限公司网站的功能示意图如图 1-1 所示。图 1-1 淮安市专用汽车制造有限公司网站的功能示意图1.1.21.1.2 网站的风格定位网站的风格定位首先要了解网站的类型，确定一个大致的风格走向，不同网站的风格肯定是不同的。营造出各种类型的氛围，需要对各种行业有敏感的洞察力，如果设计者还不是很熟悉这个行业，不知什么样的风格是适合它的，大致该用什么样的色调和笔触，那么花一定时间先做一些调查和学习是必要的。这样可以保证在设计者的脑海里有一个较为确定的概念，并不一定会马上或明显地显露到工作中去，但是必然会对设计者的工作产生专业的影响。淮安市专用汽车制造有限公司网站是专业的专用汽车制造类网站，他的主要用户为城市的环保部门，同时也是环保类的网站，所以采用绿色为主色调，因为绿色代表生命，代表健康，代表活力，是充满希望的颜色。绿色不仅仅是由树木、花草构成的风景，而且是安全、健康、清洁等等美好事物与节约资源、减少污染的象征。另外为了突出网站的热情、充满活力，在网站上又加以运用了橙色，让用户第一眼就被网站亮丽的色彩所吸引。1.1.31.1.3 规划草图规划草图对于一般的网站来说，一个项目往往从一个简单的界面开始，但要把所有的东西组织到一起并不是件容易的事情。首先，要先画一个站点的草图，勾画出所有客户想要看到的东西。然后，将它详细的描述交给美工人员，让他们知道在每一屏上都要显示哪些内容。如图 1-3 所示为本站的草图。淮安市专用汽车制造有限公司网站功能公 司 概 况公 司 动 态企 业 简 介产 品 介 绍在 线 订 购招 聘 信 息联 系 我 们办 公 系 统图 1-2 淮安市专用汽车制造有限公司网站的草图1.2 项目展示项目展示淮安市专用汽车制造有限公司网站效果图如图 1-1 所示。图 1-3 淮安市专用汽车制造有限公司网站效果图案例目标：掌握网站前期策划与内容组织技巧掌握网站页面效果图的设计与制作方法掌握网页编辑与动画设计方法网站 Logo 标志服务热线网站导航版权信息系列产品联系我们产品推介公司动态企业简介企业动画展示网页设计与制作课程案例 淮安信息职业技术学院第 3 页 共 25 页掌握网站管理系统的使用方法与技巧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 所示。2）然后使用矩形选框工具选中矩形区域（2,2,998,1198） ，将其区域进行描边，宽度为 1px，颜色为绿色（#5f9507） ，位置为居中。3）打开“公司标志.psd”,将公司标志放到文件左上角去，调整其大小，然后添加“淮安市专用汽车制造有限公司”和“Huaian Special Purpose Vehcle Manufacturing Co.,Ltd.”两需求分析风格定位内容组织效果图设计网页编辑与动画设计动态编程或代码融合发布测试（域名空间）网站维护行网站名称，文字大小为 24px，颜色为“#00591B” ，字体为“经典综艺体” （将素材文件夹中的字体文件复制到 C 盘 windows 下的 font 文件夹即可） ，如图 1-6 所示。图 1-5 效果图辅助线分布 图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” ， 使用渐变进行填充，最后将多余的线删除。按住健，复制六条分隔线。同时选中七条分隔线图层，点击水平居中分布，最后，按住将分隔线所在图层合并。在导航上分别输入“网站首页、公司概况、公司动态、产品介绍、办公系统、在线订购、招聘信息、联系我们” ，字体为“宋体” ，大小为“14px” ，颜色为白色，用上述同样的方式将其水平居中分布。结果如图 1-10 所示。网页设计与制作课程案例 淮安信息职业技术学院第 5 页 共 25 页图 1-10 整个导航完成后的效果7）新建图层，在水平参考线第 3、4 条之间选取高 10px 的区域，进行前景色为“#ececec”的填充，使得导航与下面的图像有个明显的间隔。然后打开素材中的“图1.jpg” ，将其放到文件中。在图 1 上面空白处输入文字“城市让生活更美好 永旋让城市更环保！” ，字体“黑体” ，字号“24” ，颜色 “#4cc9e7” ，用白色将其描边。最终结果如图1-11 所示。图 1-11 完成后的效果8）打开“图标 1.jpg” ，将它放置在第 5 条、第 6 条水平参考线之间。再打开“图标2.jpg” ，放在图标 1 的左上方，在图标 2 后面输入“系列产品” ，字体为“方正大黑简体” ，大小“14 点” ，颜色“#3f8f36” 。打开“图标 3.jpg” ，将图标拖至图标 1 下方，按住鼠标左键与键，复制同样的九个图标，按照类似上述步骤 6）的方式，将十个图标对齐，并合并图层。在图标后面相应输入“疏通吸污车（联合）系列、罐式车系列、粉粒物料运输车系列、铵油炸药现场混装车系列、垃圾压缩车系列、自卸车系列、集装箱运输车系列、厢式车系列、低平板半挂车、栏板半挂车” ，字体为“宋体” ，大小“14 点” ，颜色为黑色，将文本对齐后，效果如图 1-12 所示。9）新建图层，使用“矩形选框工具”，属性的样式设置分别为：样式为固定大小，宽度为 216 像素，高度为 396 像素。执行菜单下的“修改”“平滑”命令，取样半径为5 像素，确定选区，然后使用前景色“#ffad20” ，背景色“#fa7f18” ，进行渐变填充，并对此框进行“#ed6c04”描边，宽度为 2px。打开“图标 4.jpg” ，将其放在左上角，在其后输入“联系我们” ，字体为“方正大黑简体” ，大小“16 点” 。新建图层，再用上述同样的方式画一个半径为 5 像素，宽 204px，高 340px 的矩形，填充白色，然后打开选择菜单下的“修改”“收缩”3px，填充“# ececec” ，再收缩 1px，填充白色。如图 1-13 所示。10）新建图层，画一个宽 184px，高 45px，半径为 5px 的矩形，将其描边，宽度为1px，颜色为“# ececec” ，将其复制五个，对齐，合并图层。打开“图标 5.jpg、图标6.jpg、图标 7.jpg、图标 8.jpg、图标 9.jpg”分别放在刚做好的框中，其中第三个框上的图标需要复制“图标 6.jpg” 。再在每个图标后面输入“李经理、销售电话、服务电话、传真、QQ 号码、电子邮箱” ，字体为“方正大黑简体” ，大小“14 点” ，颜色“# 999898” ，再相应的在各文字下方输入“13000000000、0517-88888888、0517-88888888、0517-88888888、88888888、8888sohu.com” ，字体为“方正大黑简体” ，大小“12 点” ，颜色“# fea620” ，结果如图 1-14 所示。图 1-12 制作“系列产品”模块 图 1-13“联系我们”背景 图 1-14“联系我们”完成效果11）新建图层，用单列选框工具选中垂直参考线 240px，用“#ececec”进行填充，删除多余的部分。打开“图标 10.jpg” ，将其放置右边，在图中合适位置输入栏目名“新品推荐” ，字体“方正大黑简体” ，大小“14 点” ，颜色“#3f8f36” ，将其描边，宽度为 2 像素，颜色为白色。在图标的右边输入“更多” ，字体为“宋体” ，大小“12px” ， 颜色“#3f8f36” 。 结果如图 1-15 所示。图 1-15“新品推荐”标题完成后的效果12）打开“产品 1.jpg、产品 2.jpg、产品 3.jpg、产品 4.jpg、产品 5.jpg、产品 6.jpg、产品 7.jpg、产品 8.jpg” ，分别将其放置于两行，调整其大小，并将其对齐。在各产品下面输入相对应的产品型号与产品名称，“HYG5070GQX、HYG5162GXW、HYG5275GXW、HYG5160GQX、HYG5290GXW、HYG9400GXW、HYG5151GXW、HYG5252GXW” ， “下水道疏通车、多功能联合吸污车、多功能联合吸污车、下水道疏通车、干式物料吸排车、半挂式吸污车、吸污车、吸污车” ，字体为“宋体” ，大小“12 点” ，颜色为黑色。将其对齐。新建图层，选择“圆角矩形工具”，用路径的方式画一个半径为 5px 大小合适的矩形，用 1px 的灰色对路径进行描边，将路径载入选区，用白色到灰色将其进行渐变填充。在矩形框上输入“产品详细介绍” ，字体“宋体” 、大小“12 点” 、颜色“ff0000” 。将矩形框与文字相链接，复制七个，分别放在产品名称下方，将其对齐排列。结果如图 1-16 所示。网页设计与制作课程案例 淮安信息职业技术学院第 7 页 共 25 页图 1-16 “新品推荐”完成后的效果13）新建一图层，做一矩形框，