网站内容设计PPT文档格式.ppt

网站内容设计PPT文档格式.ppt

《网站内容设计PPT文档格式.ppt》由会员分享，可在线阅读，更多相关《网站内容设计PPT文档格式.ppt（34页珍藏版）》请在冰豆网上搜索。

良好的视觉效果，体现对称与平衡和节奏美观大方：

良好的视觉效果，体现对称与平衡和节奏与韵律与韵律p交互性强：

用户与企业网站信息的相互交流交互性强：

用户与企业网站信息的相互交流p安全快捷：

良好的软件硬件环境、链接的安全快捷：

良好的软件硬件环境、链接的3次点击次点击p服务至上：

提供多种的信息入口检索，提供全面细致服务至上：

提供多种的信息入口检索，提供全面细致的用户帮助的用户帮助3.2电子商务网站的结构设计电子商务网站的结构设计一、一、网站的层次结构设计网站的层次结构设计二、二、网站的目录结构设计网站的目录结构设计三、三、网站的链接和导航设计网站的链接和导航设计一、网站的层次结构设计一、网站的层次结构设计p网站的层次结构是整个网站的架构，一般用树状结构网站的层次结构是整个网站的架构，一般用树状结构表示，横向表示基本的功能表示，横向表示基本的功能主栏目，纵项表示栏主栏目，纵项表示栏目的层次。

目的层次。

p网站的主栏目要尽量全面、语言精炼准确、体现每一网站的主栏目要尽量全面、语言精炼准确、体现每一项功能。

一般有企业信息、产品信息、客户信息、服项功能。

一般有企业信息、产品信息、客户信息、服务信息、其他信息（财务、互动、招聘、友情链接）务信息、其他信息（财务、互动、招聘、友情链接）p栏目层次一般不要超过栏目层次一般不要超过3层层4一般网站的树状结构一般网站的树状结构公司主页公司主页公司简介公司简介公司组织公司组织公司产品公司产品客户服务客户服务公司历程公司荣誉我们的宗旨产品产品1产品产品产品产品2意见建议反馈意见建议反馈积分积分退货换货退货换货服务承诺服务承诺旅游网站的树状结构旅游网站的树状结构前台设计前台设计机票机票旅游产品旅游产品社区社区会员中心会员中心客户服务客户服务国外机票国外机票国内机票国内机票打折机票打折机票个人个人度假度假旅游旅游商务商务旅游旅游评论评论社区说明社区说明作品发表作品发表俱乐部俱乐部会员登录会员登录会员注册会员注册订单管理订单管理积分奖励积分奖励常见常见问题问题新手新手上路上路线路查询线路查询线路推荐线路推荐线路预订线路预订首页首页酒店酒店酒店预订酒店预订海外酒店海外酒店国内酒店国内酒店让利项目让利项目最新最新促销促销折价折价产品产品网站的结构设计网站的结构设计后台设计后台设计用户管理用户管理新闻管理新闻管理酒店、机酒店、机票管理票管理订单管理订单管理线路管理线路管理添加添加新闻新闻删除删除新闻新闻删除订单删除订单订单处理订单处理登录及身份识别登录及身份识别删除航班删除航班添加航班添加航班更新航班更新航班添加酒店信息添加酒店信息删除酒店信息删除酒店信息更新酒店信息更新酒店信息线路线路更新更新线路线路添加添加线路线路删除删除删除删除分组分组查询查询禁用禁用审核审核二、网站的目录结构设计二、网站的目录结构设计p网站目录是指建立网站时创建的目录（文件夹），目网站目录是指建立网站时创建的目录（文件夹），目录结构是指网站组织和存放站内所有文档的目录集合。

录结构是指网站组织和存放站内所有文档的目录集合。

p设计原则设计原则n根目录：

简洁，管理子目录和欢迎页、主页等根目录：

简洁，管理子目录和欢迎页、主页等n子目录：

按栏目或产品内容分类建立子目录：

按栏目或产品内容分类建立nImages目录：

在根目录和每个子目录中都要建立目录：

在根目录和每个子目录中都要建立n目录的层次不要超过目录的层次不要超过3层层n目录的命名：

简短易记、见名知意、英文拼音目录的命名：

简短易记、见名知意、英文拼音+数字数字网站的目录结构网站的目录结构三、网站的链接和导航设计三、网站的链接和导航设计1.网站的链接设计网站的链接设计p设计时要有组织、有分类设计时要有组织、有分类p有节奏、有层次有节奏、有层次p减少页面长度减少页面长度p避免链接折行避免链接折行p链接形式新颖吸引人、明确清晰、有点击感链接形式新颖吸引人、明确清晰、有点击感p链接内容明确可知链接内容明确可知2.导航链接导航链接链接结构设计链接结构设计p栏目导航栏目导航p专题导航专题导航p分类目录与列表导航分类目录与列表导航p搜索框导航搜索框导航p框架导航框架导航从内容分：

信息链接、从内容分：

信息链接、功能链接、导航链接功能链接、导航链接从载体上分：

文字链接、从载体上分：

文字链接、图片链接、按钮链接图片链接、按钮链接3.3电子商务网站的风格设计电子商务网站的风格设计1.网站风格是网站整体形象给浏览者的综合感受，网站风格是网站整体形象给浏览者的综合感受，包括包括CI设计（站标、色彩、字体、标语）、版面设计（站标、色彩、字体、标语）、版面布局、浏览方式、交互性、语气、文字、内容价布局、浏览方式、交互性、语气、文字、内容价值、网站荣誉等值、网站荣誉等2.网站网站风格类型风格类型3.网站风格设计网站风格设计p制作有创意的制作有创意的logop突出网站主题的标准色彩、字体突出网站主题的标准色彩、字体p有内涵的宣传语有内涵的宣传语p吸引人气的语气和称谓吸引人气的语气和称谓p图片的应用图片的应用:

特有的符号图标特有的符号图标网站风格的追求：

网站风格的追求：

与众不同与众不同体现在色调、网体现在色调、网站印象、网站个性站印象、网站个性和网站特别之处和网站特别之处网站的风格网站的风格p平易近人平易近人p简洁清爽简洁清爽p温文儒雅温文儒雅p生动活泼生动活泼p专业严肃专业严肃p肃穆庄严肃穆庄严p温馨可人温馨可人8典型的网站典型的网站logoLogo的创意的创意pLogo要体现功用性、识别性、显著性、艺术性、准确性、持要体现功用性、识别性、显著性、艺术性、准确性、持久性久性p有代表性的人物、动物、花草等有代表性的人物、动物、花草等（）p网站有代表的物品网站有代表的物品（www.bank-of-）p网站英文名称网站英文名称（）p形象绘图形象绘图（）p文字变形文字变形（）p变换颜色变换颜色（cn.made-in-、）p字体填充字体填充（）p动画动画3.4电子商务网站的网页设计电子商务网站的网页设计一、网页设计的原则一、网页设计的原则二、网页版式设计二、网页版式设计三、网页色彩的设计三、网页色彩的设计四、网页图片和文字的设计四、网页图片和文字的设计五、网站的首页设计五、网站的首页设计一、网页设计的原则一、网页设计的原则p网页命名简洁有规律网页命名简洁有规律p良好的页面导览性良好的页面导览性p主页设计一目了然主页设计一目了然p清晰清晰p专业的视觉效果专业的视觉效果n善用表格善用表格n风格一致风格一致n页面长度适中页面长度适中p快捷快捷n少用动画少用动画n相对的超级链接相对的超级链接nJava程序和背景音乐程序和背景音乐二、网页版式设计二、网页版式设计1.网页设计的基本步骤网页设计的基本步骤p绘制草图绘制草图p粗略布局粗略布局p设计布局设计布局2.版式的类型版式的类型p骨骼型骨骼型p图像型图像型p分割型分割型p中轴型中轴型p曲线型曲线型p倾斜型倾斜型p对称型对称型p焦点型焦点型p视觉冲击型视觉冲击型p自由型自由型三、网页色彩的设计三、网页色彩的设计p标准色彩标准色彩标准色彩标准色彩（主色调），主要用于网站的标志、标题、主（主色调），主要用于网站的标志、标题、主菜单和主色块，网页上的标准色不超过三种，其他色菜单和主色块，网页上的标准色不超过三种，其他色作为点缀和衬托。

适合网页标准色的色系：

蓝色、黄作为点缀和衬托。

蓝色、黄/橙色、黑橙色、黑/灰灰/白色白色p色彩的象征色彩的象征p搭配原则搭配原则p注意事项注意事项色彩的象征色彩的象征p红色：

热烈、活力、激奋红色：

热烈、活力、激奋p绿色：

生命、自然、安静、健康、成长绿色：

生命、自然、安静、健康、成长p蓝色：

清爽、清新、淡雅、浪漫蓝色：

清爽、清新、淡雅、浪漫p黄色：

快乐、智慧、轻快、希望、光明、宝贵黄色：

快乐、智慧、轻快、希望、光明、宝贵p橙色：

热情、温暖、欢喜橙色：

热情、温暖、欢喜搭配原则搭配原则p特色鲜明特色鲜明p搭配合理搭配合理p合适合适p联想联想p艺术艺术注意事项注意事项p避免用单色避免用单色p使用相同色系颜色使用相同色系颜色p运用对比或互补色运用对比或互补色p背景色的衬托背景色的衬托p颜色的记忆性原则：

暖色比冷色强颜色的记忆性原则：

暖色比冷色强p颜色的群体性颜色的群体性四、网页图片和文字四、网页图片和文字

（一）图片

（一）图片p收集筛选收集筛选p选择类型选择类型p效果处理效果处理p背景为文字服务背景为文字服务p慎用动画慎用动画

（二）文字

（二）文字网页文字网页文字1）标准字体）标准字体中文中文宋体，英文宋体，英文“TimesNewRoman”注意：

通常将特殊的字体做成图像格式，在用字体的位注意：

通常将特殊的字体做成图像格式，在用字体的位置用图像代替。

置用图像代替。

2）文本设计原则）文本设计原则p字体种类：

一般以不超过字体种类：

一般以不超过3种为宜种为宜p突出显示：

用不同的字体、字号、字体颜色突出显示：

用不同的字体、字号、字体颜色p字体的疏密度：

正文部分每行长度为中文字体的疏密度：

正文部分每行长度为中文2030字，字，英文英文4060字字；

行距要适当，一般以默认值设置；

行距要适当，一般以默认值设置p正文文字用正文文字用12Ptp字体与网站的主题相适应字体与网站的主题相适应3）文字的编排：

疏密得当，对齐方式）文字的编排：

疏密得当，对齐方式（左对齐左对齐）五、网站首页设计五、网站首页设计

（一）首页的类型

（一）首页的类型p形象展示型：

图像信息为主形象展示型：

图像信息为主p信息罗列型：

文字为主，辅以一定的图片信息罗列型：

文字为主，辅以一定的图片

（二）

（二）首页布局首页布局p主栏目主栏目p辅栏目辅栏目p版块版块三者相互结合、突出主要信息三者相互结合、突出主要信息三者间的空隙可以用一些广告或图片作为间隔，增加活力三者间的空隙可以用一些广告或图片作为间隔，增加活力（三）（三）栏目的强化栏目的强化p分类索引分类索引p层级式索引层级式索引p鼠标响应索引鼠标响应索引p有特色的设计元素：

精致的图标、明亮的颜色、比喻性的元有特色的设计元素：

精致的图标、明亮的颜色、比喻性的元素素慧聪网主页慧聪网主页主栏目版块辅栏目3see网首页网首页主栏目版块1版块4版块5版块2版块3中国制造网首页中国制造网首页栏目的强化设计栏目的强化设计鼠标响应的层进索引层级式的分类索引版块式分类索引栏目网页栏目网页色彩强化图标强化栏目图标强化栏目中关村在线中关村在线图标强化图标强化栏目图标强化栏目迪士尼迪士尼图标强化3.5电子商务网站的设计语言电子商务网站的设计语言一、一、HTML二、二、DHTML即即DynamicHTML动态动态HTML，是网页技术，是网页技术（JavaScript、VBScript和和CSS）与标准的整合，）与标准的整合，标准不统一，兼容性较差标准不统一，兼容性较差三、三、CSS内容与表现格式分离、格式统一、支持多种设备、缩小内容与表现格式分离、格式统一、支持多种设备、缩小网页空间网页空间四、四、XMLeXtensibleMarkupLanguage，可扩展标记语，可扩展标记语言，