商务网p设计与制作版课件项目一(3生成商务网p设计与制作指导文案)

1、商务网页设计与制作商务网页策划郑 伟Contents Page目录页06 任务一 生成完整的商务网页设计与制作指导方案02 项目概述03 项目分析04 任务分解07 任务二 快速清晰地勾画出简单的商务网页设计草图08 任务三 熟练整理项目所需资料并建立项目资料库09 项目小结05 网页设计与制作基础01 教学目标任务1 生成完整的商务网页设计与制作指导文案子任务一 分析网站建设策划书1子任务二 提取相关需求点并生成指导文案2 子任务1 分析网站建设策划书1行业定位 打开本书配套资源“项目资料库/朗声科贸策划书.doc”文件，阅读分析此网站策划书，可知朗声科贸所属电子数码视听产品销售及代理的科贸

2、企业，该类企业网页的特点是时尚现代、简洁大方、结构严谨，同时着重突出产品的品质和服务等方面内容。 （知识要点：网站策划书 行业定位）2色调分析 朗声科贸网页的主色调是银灰色、蓝色、红色，辅色调是白色，通过进一步的分析策划可以确定其中银灰色主要应用于标题栏和页尾区，蓝色主要应用于公告栏，红色主要应用于商品属性。 （知识要点：色调 色调分析）3网页风格分析通过分析策划书可知，朗声科贸网页的风格为精细、简洁、大气、实用、有现代感，网页采用语言为简体中文，主要适应1280*1024的显示器分辨率。 （知识要点：网页风格 网页风格分析）4. 确定导航通过分析策划书可知，朗声科贸网页的基本导航条内容。主导

3、航为：首页、公司简介、产品展示 、行业动态 、售后服务、分销合作 。次导航为：返回首页、添加收藏、友情链接、联系我们。 （知识要点：导航） 子任务1 分析网站建设策划书 指导文案是供设计师设计制作网页时查看的。在快节奏的现代化办公中，高效、快捷、方便显得尤为重要，所以指导文案一定要简单、明了、实用。 通过对朗声科贸网站策划书中网页设计与制作部分内容的分析与策划，生成该项目具体的商务网页设计与制作指导文案，内容如下。 （1）行业：电子数码视听产品销售及代理。 （注意：在进行具体策划时，可参照该行业网页的内容和风格特点。） （2）色调：主色调是银灰色、蓝色、红色，辅色调是白色。 （3）风格及属性：

4、精细、简洁、大气、实用、有现代感，网页采用语言为简体中文，主要适应1280*1024的显示器分辨率。 子任务2 提取相关需求点并生成指导文案 （4）导航：分主导航和次导航两种。主导航：首页、公司简介、产品展示、行业动态、售后服务、分销合作，如图1-1所示。次导航：返回首页、添加收藏、友情链接、联系我们。 （注意：“返回首页”是为了浏览者在网站底部方便快捷地返回首页而设置的。）附加：站内公告 （5）logo：朗声科贸公司已提供。 （6）品牌性原则：为客户提供有价值的产品和服务，充分体现朗声科贸品牌优势。 子任务2 提取相关需求点并生成指导文案 （7）功能性原则：建立适合朗声科贸自身需求的网络平台

5、，提供广泛的适合一般用户需求的功能。 （8）实用性原则：作为企业商业运作的一个重要组成部分，服务于朗声科贸企业文化。 （注意：生成的指导文案保存成.doc文档，如保存为“朗声科贸商务网页设计与制作指导文案.doc”。） （知识要点：LOGO 分辨率） 子任务2 提取相关需求点并生成指导文案知识要点1. 网站策划 在网站建设前期，要进行市场调查分析，总结形成书面报告，即网站策划书。根据每个网站的情况不同，网站策划书的具体内容也不同，但是最终都不能离开主框架。网站策划书能够指导网站建设和运营的进行，也是阶段性总结的依据。2. 行业定位 分析客户的所属行业是很重要的，一般会依据所属行业大体来定位网站

6、的风格。行业有大类和小类，比如金融业，而金融业又包括银行、保险、证券、基金等。本案例中，通过对网站策划书中的栏目说明内容分析可知，朗声科贸是一家专业销售及代理平板电脑、手机、音响、耳机等电子数码视听产品的科贸公司，即所属行业是数码视听产品销售及代理。3. 色调 色调是指一幅作品色彩的基本倾向，一幅绘画作品虽然用了多种颜色，但总体有一种倾向，即偏蓝或偏红、偏暖或偏冷等，这种颜色上的倾向就是我们通常所说的色调。4. 色调分析 色调分析是很重要的，有些行业有忌讳色，有些行业又有大众色，若不加了解就贸然着手设计是很容易失败的。一般在设计网页时，如果客户已经提供了色调要求，可依据此色调设计；如果客户没有

7、提供，可先考虑大众色。一般的行业都有大众色，可根据网站主题进行参考。如电子等科技类常用蓝色系，环保、饮食类常用绿色系，女性类则常用粉色系。一般设计网页时的色调不易超过4种，特殊情况特例。有时也可以根据客户所要求的色调在其色系内选取辅助色。 本案例中，通过分析网站策划书中的设计要求内容可知，客户所希望的网站主色调是银灰色、蓝色、红色，辅色调是白色。因为朗声科贸是电子数码视听产品销售及代理的科贸企业，比较适合以上色系，所以客户希望的色调符合一般规律。知识要点5. 网页风格 风格是指站点的整体形象给浏览者的综合感受。这个整体形象包括站点的CI（标志、色彩、字体、标语）、版面布局、浏览方式、交互性、文

8、字、语气、内容价值、存在意义、站点荣誉等等诸多因素。例如：我们觉得网易是平易近人的，迪斯尼是生动活泼的，IBM是专业严肃的，这些都是不同的网页风格给人们深刻留下的不同印象。6. 网页风格分析 分析网站的风格也是至关重要的，每个行业，每个客户都有自己的喜好与偏爱，抓住行业特点和客户心理就向成功迈出了一大步。一般在设计网页时，如果客户已经提供了网页风格，可依据此风格设计；如果客户没有提供，可先依据所属行业进行分析，一般的企业型客户都比较期望本企业的网站简洁、大方、实用，当然根据客户所属行业不同，还会有活泼、浪漫、温馨等不同的风格倾向。例如幼儿类网站一般健康、活泼，婚庆类网站浪漫、喜庆，家装类网站则

9、清新、温馨，等等。在本案例中，通过对网站策划书中的设计要求内容分析可知，朗声科贸所希望的网站大体风格是：简洁、实用，有现代感。知识要点7.导航网站导航是将网站的层次结构以一种有条理的方式清晰展示，让用户在浏览网站过程中不至于迷失，导航一定要简洁、直观、明确。对朗声科贸网页各栏目进行分析可得到以下信息：（1）首页（index）：即输入域名直接展示给来客的基本页面，此页面内容一般为各子页内容的缩览展示，或者附加一些美化或充实网站的版块。 （注意：有的网站还会有引导页面，从引导页面也可进入首页。）（2）公司简介（profile）：朗声科贸公司的简介。（3）产品展示（products）：朗声科贸所销售

10、或代理的产品展示。（4）行业动态（news）：朗声科贸所属行业的新闻动态。（5）售后服务（service）：购买了朗声科贸公司的产品所享受的服务。知识要点（6）分销合作（cooperate）：分销商和朗声科贸合作的相关信息。（7）添加收藏：游客可以添加本网站到收藏夹，方便以后查找、浏览。（8）友情链接（friends）：友情网站展示或链接。（9）联系我们（contact）：朗声科贸的联系方式。（10）站内公告（notice）：朗声科贸的公告信息（附加），在首页展示。（11）返回首页：回到朗声科贸网站的首页。 一般的网站栏目和网站导航并不是一一对应的，而是依据具体情况灵活处理。 从以上分析可知，

11、导航的基本栏目为11个，需要在导航上显示的为10个（这里除去了站内公告，因为在首页中展示此公告内容），为了让网页简洁大方、不显拥挤，可将导航分为主导航和次导航。主导航放置在网页顶部位置，次导航放置在网页底部位置。知识要点8. logo logo是标志、徽标的意思，它是网站形象的重要体现。一个好的logo应符合国际标准，精美、独特，与网站的整体风格相融，能够体现网站的类型、内容和风格。9分辨率 显示分辨率（屏幕分辨率）是屏幕图像的精密度，指显示器所能显示的像素有多少。由于屏幕上的点、线和面都是由像素组成的，显示器可显示的像素越多，画面就越精细，同样的屏幕区域内能显示的信息也越多，所以分辨率是个非

12、常重要的性能指标之一。可以把整个图像想象成是一个大型的棋盘，而分辨率的表示方式就是所有经线和纬线交叉点的数目。显示分辨率一定的情况下，显示屏越小图像越清晰，反之，显示屏大小固定时，显示分辨率越高图像越清晰。知识要点 常用的显示器分辨率有以下几种类型： 作图的人最喜欢用的显像管（CRT）显示器17寸普屏（4:3）即平时说的方屏，最佳分辨率为1024768，分辨率比值是4:3。 17寸和19寸普屏（5:4）即平时说的方屏液晶显示器，最佳分辨率是12801024，分辨率比值是5:4。 19寸宽屏（16:10）即平时说的方屏液晶显示器，最佳分辨率是1440900，分辨率比值是16:10。 22寸宽屏（16:10）即平时说的方屏液晶显示器，最佳分辨率是16801050，分辨率比值是16:10。 1280800，这是13.3吋、14.1吋笔记本屏幕常用的分辨率。 1366768、19201080、1