网页设计与制作课程案例 淮安信息职业技术学院案例一 淮安市专用汽车制造有限公司企业网站开发1.1网站需求分析1.1.1网站功能需求淮安市专用汽车制造有限公司网站旨在，能使任何人在任何时候、任何地方都能借助网络了解公司的基本情况与最新的产品信息。淮安市专用汽车制造有限公司网站的功能示意图如图1-1所示。淮安市专用汽车制造有限公司网站功能公司概况公司动态企业简介产品介绍在线订购招聘信息联系我们办公系统图1-1淮安市专用汽车制造有限公司网站的功能示意图1.1.2网站的风格定位首先要了解网站的类型，确定一个大致的风格走向，不同网站的风格肯定是不同的。营造出各种类型的氛围，需要对各种行业有敏感的洞察力，如果设计者还不是很熟悉这个行业，不知什么样的风格是适合它的，大致该用什么样的色调和笔触，那么花一定时间先做一些调查和学习是必要的。这样可以保证在设计者的脑海里有一个较为确定的概念，并不一定会马上或明显地显露到工作中去，但是必然会对设计者的工作产生专业的影响。淮安市专用汽车制造有限公司网站是专业的专用汽车制造类网站，他的主要用户为城市的环保部门，同时也是环保类的网站，所以采用绿色为主色调，因为绿色代表生命，代表健康，代表活力，是充满希望的颜色。绿色不仅仅是由树木、花草构成的风景，而且是安全、健康、清洁等等美好事物与节约资源、减少污染的象征。另外为了突出网站的热情、充满活力，在网站上又加以运用了橙色，让用户第一眼就被网站亮丽的色彩所吸引。1.1.3规划草图对于一般的网站来说，一个项目往往从一个简单的界面开始，但要把所有的东西组织到一起并不是件容易的事情。首先，要先画一个站点的草图，勾画出所有客户想要看到的东西。然后，将它详细的描述交给美工人员，让他们知道在每一屏上都要显示哪些内容。如图1-3所示为本站的草图。服务热线网站Logo标志网站导航企业动画展示系列产品联系我们产品推介企业简介公司动态版权信息图1-2淮安市专用汽车制造有限公司网站的草图1.2 项目展示淮安市专用汽车制造有限公司网站效果图如图1-1所示。图1-3淮安市专用汽车制造有限公司网站效果图案例目标：l 掌握网站前期策划与内容组织技巧l 掌握网站页面效果图的设计与制作方法l 掌握网页编辑与动画设计方法l 掌握网站管理系统的使用方法与技巧1.3 实施步骤虽然每个Web站点在内容、规模、功能等方面都各有不同，但是有一个基本设计流程可以遵循。从国内大的门户站点如搜狐、新浪到一个微不足道的个人主页，都要以基本相同的步骤来完成。本网站的开发流程同样如此，如图1-4所示。需求分析风格定位内容组织效果图设计网页编辑与动画设计动态编程或代码融合发布测试（域名空间）网站维护图1-4淮安市专用汽车制造有限公司网站的制作流程1.4 效果图与静态页面制作1.4.1效果图设计效果图制作的原则：先背景，后前景，先上后下，先左后右。本系统最终的效果图如图1-1所示。制作软件：Photoshop CS各种版本，本实例采用的是Photoshop CS5中文版。针对此网页的效果图，采用前面谈的先背景，后前景，先上后下，先左后右的设计原则进行设计。本效果图设计中用到的主要知识：l 辅助线的应用l 图层样式与图层混合模式的应用l 选择工具的应用l 文字工具的使用l 选框工具的使用l 铅笔工具的使用l 自由变化的应用本网站的详细制作步骤如下：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所示。图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所示。图1-16 “新品推荐”完成后的效果13）新建一图层，做一矩形框，宽350px，高240px，对其进行描边，像素为1px，颜色为灰色“#ececec”。打开“图标11.jpg”，将其拖动到矩形框中，如上述11）中给文字“公司动态”添加样式，再在其后输入“更多”。用同样的方式做出右边的矩形框，分别在两个矩形框空白处添加文字，完成后的效果如图1-17所示。图1-17 “公司动态”与“公司简介”两模块的制作