淮安市专用汽车制造有限公司企业网站开发.docVIP

《网页设计与制作》课程案例 淮安信息职业技术学院 第 PAGE 25 页 共 NUMPAGES 25 页 案例一 淮安市专用汽车制造有限公司企业网站开发 1.1网站需求分析 1.1.1网站功能需求 淮安市专用汽车制造有限公司网站旨在，能使任何人在任何时候、任何地方都能借助网络了解公司的基本情况与最新的产品信息。 淮安市专用汽车制造有限公司网站的功能示意图如图1-1所示。 淮安市专用汽车制造有限公司网站功能 淮安市专用汽车制造有限公司网站功能 公司概况 公司动态 企业简介 产品介绍 在线订购 招聘信息 联系我们 办公系统 图1-1淮安市专用汽车制造有限公司网站的功能示意图 1.1.2网站的风格定位 首先要了解网站的类型，确定一个大致的风格走向，不同网站的风格肯定是不同的。营造出各种类型的氛围，需要对各种行业有敏感的洞察力，如果设计者还不是很熟悉这个行业，不知什么样的风格是适合它的，大致该用什么样的色调和笔触，那么花一定时间先做一些调查和学习是必要的。这样可以保证在设计者的脑海里有一个较为确定的概念，并不一定会马上或明显地显露到工作中去，但是必然会对设计者的工作产生专业的影响。 淮安市专用汽车制造有限公司网站是专业的专用汽车制造类网站，他的主要用户为城市的环保部门，同时也是环保类的网站，所以采用绿色为主色调，因为绿色代表生命，代表健康，代表活力，是充满希望的颜色。绿色不仅仅是由树木、花草构成的风景，而且是安全、健康、清洁等等美好事物与节约资源、减少污染的象征。另外为了突出网站的热情、充满活力，在网站上又加以运用了橙色，让用户第一眼就被网站亮丽的色彩所吸引。 1.1.3规划草图 对于一般的网站来说，一个项目往往从一个简单的界面开始，但要把所有的东西组织到一起并不是件容易的事情。首先，要先画一个站点的草图，勾画出所有客户想要看到的东西。然后，将它详细的描述交给美工人员，让他们知道在每一屏上都要显示哪些内容。如图1-3所示为本站的草图。 服务热线网站Logo标志 服务热线 网站Logo标志 网站导航 网站导航 企业动画展示 企业动画展示 系列产品联系我们 系列产品 联系我们 产品推介 企业简介公司动态 企业简介 公司动态 版权信息 版权信息 图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所示。 2）然后使用矩形选框工具选中矩形区域（[2,2],[998,1198]），将其区域进行描边，宽度为1px，颜色为绿色（#5f9507），位置为居中。 3）打开“公司标志.psd”,将公司标志放到文件左上角去，调整其大小，然后添加“淮安市专用汽车制造有限公司”和“Huaian Special Purpose Vehcle Manufacturing Co.,Ltd.”两行网站名称，文字大小为24px，颜色为“#00591B”