网络编辑第五章规划与设计网站课件.ppt

1、第五章 规划与设计网站知识要求：l 了解网站的模式与定位、主题定位、栏目选择及内容提要制作。l 理解网站专题策划的原则。l 掌握网站专题选题、材料组织、专题栏目的设置方法，网站专题的版式设计和风格设计方法。l能根据企业实际情况及发展目标规划企业网站。l能对网站图片进行处理；能制作Flash动画；了解网站音频与视频的类型；能制作出网页文件。l能根据商品特点设置商品标题；能为商品设置正确的商品类目；能正确编辑商品属性；能较好地编辑商品描述信息；能设置商品图片并上传。能力要求：【引例】网站设计是技术、艺术、企业形象与企业营销策略的有机组合，以先进的网页网站设计是技术、艺术、企业形象与企业营销策略的有

2、机组合，以先进的网页制作技术与平面设计作为形象的展示手段，以合理的结构层次和准确的链接关制作技术与平面设计作为形象的展示手段，以合理的结构层次和准确的链接关系表达企业营销策略。网站设计并非是简单的输入文本的过程，而是一个从处系表达企业营销策略。网站设计并非是简单的输入文本的过程，而是一个从处理图像，制作动画到编写网页代码和脚本的完整过程。在这一过程的各种阶段理图像，制作动画到编写网页代码和脚本的完整过程。在这一过程的各种阶段中，需要使用不同类型的软件，这些软件可以极大地提高网站设计的效率，每中，需要使用不同类型的软件，这些软件可以极大地提高网站设计的效率，每位同学都必须掌握设计网站常用软件的使

3、用。位同学都必须掌握设计网站常用软件的使用。【学习目标】任务编号任务名称职业能力目标知识要求参考课时第一节规划网站能根据企业实际情况及发展目标规划企业网站1网站的模式与定位2网站的主题定位3网站的栏目选择4网站的内容提要制作2课时第二节设计网站能进行网页的版式设计和导航设计；掌握HTML语言能用Dreamweaver制作网页文件。1版式设计基本知识2导航设计基本知识3HTML语言基础4Dreamweaver使用基础46课时第三节编辑网店商品信息能根据商品特点设置商品标题；能为商品设置正确的商品类目；能正确编辑商品属性；能较好地编辑商品描述信息；能设置商品图片并上传1商品标题的设置2商品类目的设

4、置3商品属性编辑4商品描述编辑5商品图片设置与上传4课时 1 2 3 4（一）（一）常见企业网站模式常见企业网站模式（1）信息发布型信息发布型 万象企业公司的网站首页（万象企业公司的网站首页（http:/ 规划网站规划网站 1 2 3 42.电子商务型（销售型）电子商务型（销售型）当当网的示例（当当网的示例（http:/ 规划网站规划网站图图4-2 4-2“当当网当当网”首页截图首页截图 1 2 3 43.公司门户型（综合型）公司门户型（综合型）典型的门户网站有新浪网、网易和搜狐网等典型的门户网站有新浪网、网易和搜狐网等 所谓门户网站，是指通向某类综合性互联网信息资源并提供有关信息服务所谓门户

5、网站，是指通向某类综合性互联网信息资源并提供有关信息服务的应用系统。的应用系统。第一节第一节 规划网站规划网站图图4-3 4-3“新浪网新浪网”首页截图首页截图 1 2 3 44.商务服务型商务服务型：联邦快递公司网站首页（联邦快递公司网站首页（http:/）商务服务型网站不同于商务服务型网站不同于企业展示型网站企业展示型网站，以提供远程、及时、准确的商务，以提供远程、及时、准确的商务服务为主要目的，比如可实现渠道分销管理、终端客户销售管理、合作伙伴管服务为主要目的，比如可实现渠道分销管理、终端客户销售管理、合作伙伴管理、网上采购管理、实时在线售后服务管理、物流管理等，理、网上采购管理、实时在

6、线售后服务管理、物流管理等，第一节第一节 规划网站规划网站图图4-4 4-4“联邦快递联邦快递”首页截图首页截图 1 2 3 4（二）（二）网站定位网站定位 所谓网站定位就是明确网站在所谓网站定位就是明确网站在互联网互联网上扮演什么角色，要向网站的浏览者传达上扮演什么角色，要向网站的浏览者传达什么样的核心概念，透过网站发挥什么样的作用；因此，网站定位相当关键，换句什么样的核心概念，透过网站发挥什么样的作用；因此，网站定位相当关键，换句话说，网站定位是确定网站是做什么用的及网站建设的策略，而后面我们要将的话说，网站定位是确定网站是做什么用的及网站建设的策略，而后面我们要将的网网站栏目的选择站栏目

7、的选择及网站内容提要的制作都围绕网站定位展开。及网站内容提要的制作都围绕网站定位展开。很多时候网站运营不起来，不是关键词选择不正确，也不是自己的能力不足，很多时候网站运营不起来，不是关键词选择不正确，也不是自己的能力不足，而是网站建设推广前，没有给网站制定一个合适的定位。一个网站要想成功，必备而是网站建设推广前，没有给网站制定一个合适的定位。一个网站要想成功，必备要素之一就是有一个清晰的定位，那么网站定位要从哪几个方面来分析呢要素之一就是有一个清晰的定位，那么网站定位要从哪几个方面来分析呢?网站定网站定位具体内容有以下几个方面：位具体内容有以下几个方面：（1）根据产品的某些特质）根据产品的某些

8、特质（2）对网站的理解）对网站的理解（3）根据用户群体分布）根据用户群体分布（4）可行性分析）可行性分析（5）赢利模式）赢利模式第一节第一节 规划网站规划网站 1 2 3 4 一个好的网站、一个能够真正受用户关注和欢迎的网站不仅仅只是有精美、一个好的网站、一个能够真正受用户关注和欢迎的网站不仅仅只是有精美、华丽的页面，更重要的是要有个准确鲜明的主题，让用户能够在你网站上以最华丽的页面，更重要的是要有个准确鲜明的主题，让用户能够在你网站上以最快的速度得到或了解他想要的东西，这样他会常来网站，为网站积累人气。用快的速度得到或了解他想要的东西，这样他会常来网站，为网站积累人气。用户就是流量，流量就是

9、网站的血液，有了血液网站才会持久的生存下去。所以户就是流量，流量就是网站的血液，有了血液网站才会持久的生存下去。所以我们做网站一定要突出主题，不要过于追求好看华丽的页面，我们要注重内容。我们做网站一定要突出主题，不要过于追求好看华丽的页面，我们要注重内容。可以看那些已经成功的网站，他们的页面都是相当简单、大众化的。给用户的可以看那些已经成功的网站，他们的页面都是相当简单、大众化的。给用户的直观感受很好，如果页面过于耀眼反而会让用户流走。那么网站策划初期，我直观感受很好，如果页面过于耀眼反而会让用户流走。那么网站策划初期，我们应该如何精确定位网站主题呢们应该如何精确定位网站主题呢?网站主题定位决

10、定网站的成败。因此，一开始就应该确定好主题，而不是网站主题定位决定网站的成败。因此，一开始就应该确定好主题，而不是半途修改。再次，如果是企业网站如何定位主题呢？这个很简单做什么的就主半途修改。再次，如果是企业网站如何定位主题呢？这个很简单做什么的就主题就定位成什么。题就定位成什么。第一节第一节 规划网站规划网站1主题要小而精主题要小而精2域名的选择域名的选择 1 2 3 4 伴随互联网的普及，伴随互联网的普及，企业网站建设企业网站建设已经成为企业信息化建设的重要组成部分已经成为企业信息化建设的重要组成部分，是企业宣传营销的重要工具，网站栏目是一个网站的大纲索引，企业网站的栏目，是企业宣传营销的

11、重要工具，网站栏目是一个网站的大纲索引，企业网站的栏目设计要明白显示出企业想表达的主题。设计要明白显示出企业想表达的主题。1企业网站栏目设计的要点企业网站栏目设计的要点第一节第一节 规划网站规划网站（1）要紧扣主题（2）设立最近更新或网站指南栏目（3）设立下载或常见问题答复栏目（4）设立可以双向交换的栏目（5）面向不同目标细分页面栏目设计 1 2 3 42确定网站栏目的技巧确定网站栏目的技巧 站点的栏目规划简单地说就是确定站点的逻辑结构，企业用户应该如何站点的栏目规划简单地说就是确定站点的逻辑结构，企业用户应该如何确定自己的栏目，主要有以下几种办法。确定自己的栏目，主要有以下几种办法。（1）借

12、鉴同行网站）借鉴同行网站 上网搜索上网搜索10个以上与本企业相似的企业网站，每个网站都有的栏目一定个以上与本企业相似的企业网站，每个网站都有的栏目一定要加上；要加上；70%以上网站都有的栏目可以考虑加上；以上网站都有的栏目可以考虑加上；50%网站有的栏目在询问网站有的栏目在询问客户意见后，再决定是否采用此栏目。客户意见后，再决定是否采用此栏目。50%以下网站有的栏目要注意了，这以下网站有的栏目要注意了，这类栏目：一是用处不大的栏目，二是特色栏目，你要根据情况再三斟酌，而类栏目：一是用处不大的栏目，二是特色栏目，你要根据情况再三斟酌，而后决定。后决定。第一节第一节 规划网站规划网站 1 2 3

13、4（2）突出自己特色）突出自己特色第一节第一节 规划网站规划网站图图4-5 4-5“广东省人民政府应急管理办公室广东省人民政府应急管理办公室”网站栏目截图网站栏目截图（3）注意）注意SEO优化优化图图4-6 4-6 百度搜索百度搜索“企业企业”两字的截图两字的截图 1 2 3 4（三）企业网站的基础栏目（三）企业网站的基础栏目 所有的企业网站有一个基本的框架。例如，关于我们、联系我们、服务所有的企业网站有一个基本的框架。例如，关于我们、联系我们、服务中心、成功案例，这几个内容是基本不变的，最多是名称上的变化，如成功中心、成功案例，这几个内容是基本不变的，最多是名称上的变化，如成功案例也可以写成

14、是公司业绩，也可以是企业案例，不过只是换个名字。案例也可以写成是公司业绩，也可以是企业案例，不过只是换个名字。一般企业网站可以包含以下几个栏目。一般企业网站可以包含以下几个栏目。（1）企业概况）企业概况（2）产品信息）产品信息（3）荣誉证书和专家、用户推荐）荣誉证书和专家、用户推荐（4）公司动态和媒体报道）公司动态和媒体报道（5）产品搜索：）产品搜索：（6）产品价格表）产品价格表（7）联系信息）联系信息（8）辅助信息）辅助信息（9）服务信息）服务信息第一节第一节 规划网站规划网站图图4-7 4-7“中联重科股份有限公司中联重科股份有限公司”网站栏目截图网站栏目截图 网站内容是整个网站的基础，一

15、个具有良好内容的网站不仅仅利于用户体验，而且也对网站的优化起到重要作用。因此在网站优化过程中，网站内容的质量越高，网站就会越容易被收录，从而有效地提高网站排名。随着网站内容质量的重要性提高，内容的发布编辑也是越来越规范。通常我们可以看到一些大型门户网站的内容都会有内容提要，而从内容摘要中可以看到某些重要信息。而这一点的做法在普通企业网站内容上很少出现，事实上网站内容提要相当重要，是不可忽视的。图4-8所示为网易的内容提要。1 2 3 4 第一节第一节 规划网站规划网站 （一）基本流程（一）基本流程 广泛浏览同行业网站广泛浏览同行业网站进行网站的内容策划进行网站的内容策划进行网站的栏目策划进行网

16、站的栏目策划进行网站内容的信息编辑进行网站内容的信息编辑 1 2 3 4 第一节第一节 规划网站规划网站（二）实施步骤（二）实施步骤 1广泛浏览同行业网站广泛浏览同行业网站 浏览郁美净集团、奥洛菲官网等企业网站，结合相关知识内容，对这两家企浏览郁美净集团、奥洛菲官网等企业网站，结合相关知识内容，对这两家企业的网站进行内容分析，并将相关内容填入表中。业的网站进行内容分析，并将相关内容填入表中。公司名公司名称称网站地址网站地址业务分析业务分析网站类型网站类型网站主要网站主要栏目栏目网站内网站内容提要容提要网站功能分网站功能分析研究析研究郁美净集团http:/www.yOLAY玉兰油http:/ 1

17、 2 3 4 第一节第一节 规划网站规划网站 2“MiTing”，中文名“米婷”，是一家新进入中国市场的化妆品公司，主要采用代理商和专柜等方式对产品进行销售。现公司决定建设一个销售型的网站来树立企业形象，加强产品的宣传。请帮其分析和规划网站类型、调查和确立网站栏目设置，并针对网站栏目中的内容进行信息采集和编辑。根据这一给定的背景资料，确定“MiTing”公司的网站类型、主题定位和栏目，并将结果填入表中。项目项目具体内容具体内容网站类型网站目标客户主题定位网站主要栏目 1 2 3 4 第一节第一节 规划网站规划网站 3收集资料，确定公司网站各栏目的主要内容，完成下表收集资料，确定公司网站各栏目的

18、主要内容，完成下表。“MiTing”公司网站栏目内容策划公司网站栏目内容策划 栏目名称栏目名称栏目内容栏目内容 1 2 3 4 第一节第一节 规划网站规划网站 4根据任务一给定的背景资料，根据任务一给定的背景资料，确定的网站内容和网站栏目内容，对网站内确定的网站内容和网站栏目内容，对网站内容信息进行编辑，完成下表容信息进行编辑，完成下表。“MiTing”公司网站内容信息编辑公司网站内容信息编辑 项目项目编辑内容编辑内容网站关键词（不少于3个关键词）内容提要（表述清楚；逻辑清晰；内容全面）1 2 3 4网页版式的基本类型主要有骨骼型、满版型、分割型、中轴型、曲线型、倾网页版式的基本类型主要有骨骼

19、型、满版型、分割型、中轴型、曲线型、倾斜型、对称型、焦点型、三角型、自由型斜型、对称型、焦点型、三角型、自由型10种。种。（1）骨骼型）骨骼型网页版式的骨骼型是一种规范的、理性的分割方法，类似于报刊的版式。网页版式的骨骼型是一种规范的、理性的分割方法，类似于报刊的版式。第二节第二节 设计网站设计网站 1 2 3 4（2）满版型）满版型页面以图像充满整版。主要以图像为诉求点，也可将部分文字压置于图像之页面以图像充满整版。主要以图像为诉求点，也可将部分文字压置于图像之上。上。1 2 3 4（3）分割型图）分割型图 把整个页面分成上下或左右两部分，分别安排图片和文案。两个部分形把整个页面分成上下或左

20、右两部分，分别安排图片和文案。两个部分形成对比：有图片的部分感性而具活力，文案部分则理性而平静。成对比：有图片的部分感性而具活力，文案部分则理性而平静。1 2 3 4（4）中轴型）中轴型沿浏览器窗口的中轴将图片或文字作水平或垂直方向的排列。水平排列的页沿浏览器窗口的中轴将图片或文字作水平或垂直方向的排列。水平排列的页面给人稳定、平静、含蓄的感觉。垂直排列的页面给人以舒畅的感觉。面给人稳定、平静、含蓄的感觉。垂直排列的页面给人以舒畅的感觉。1 2 3 4（5）曲线型）曲线型图片、文字在页面上作曲线的分割或编排构成，产生韵律与节奏。如图图片、文字在页面上作曲线的分割或编排构成，产生韵律与节奏。如图

21、4-13所示。所示。1 2 3 4（6）倾斜型）倾斜型 页面主题形象或多幅图片、文字作倾斜编排，形成不稳定感或强烈的动页面主题形象或多幅图片、文字作倾斜编排，形成不稳定感或强烈的动感，引人注目感，引人注目。1 2 3 4（7）对称型）对称型 对称的页面给人稳定、严谨、庄重、理性的感受。对称的页面给人稳定、严谨、庄重、理性的感受。对称分为绝对对称和相对对称。一般采用相对对称的手法，以避免呆板对称分为绝对对称和相对对称。一般采用相对对称的手法，以避免呆板。左右对称的页面版式比较常见。左右对称的页面版式比较常见。1 2 3 4（8）焦点型）焦点型 焦点型的网页版式通过对视线的诱导，使页面具有强烈的视

22、觉效果。焦点型的网页版式通过对视线的诱导，使页面具有强烈的视觉效果。1 2 3 4（9）三角型）三角型网页各视觉元素呈三角形排列。正三角形（金字塔型）最具稳定性，倒三角网页各视觉元素呈三角形排列。正三角形（金字塔型）最具稳定性，倒三角形则产生动感。侧三角形构成一种均衡版式，既安定又有动感。形则产生动感。侧三角形构成一种均衡版式，既安定又有动感。1 2 3 4（10）自由型）自由型自由型的页面具有活泼、轻快的风格。自由型的页面具有活泼、轻快的风格。1 2 3 4 导航栏能让我们在浏览网页时很容易的到达不同的页面，是网页元素导航栏能让我们在浏览网页时很容易的到达不同的页面，是网页元素非常重要的部分

23、。非常重要的部分。（1）设计网页导航的基本准则）设计网页导航的基本准则组织良好的链接组织良好的链接确保你的链接按照重要性有序排列。确保你的链接按照重要性有序排列。清晰且鲜明清晰且鲜明一旦你决定做链接，需要考虑把它们置于最优位置。导航必须突出且鲜一旦你决定做链接，需要考虑把它们置于最优位置。导航必须突出且鲜明，把你设计的链接置于页面顶部或左侧这些最抢眼的位置上。明，把你设计的链接置于页面顶部或左侧这些最抢眼的位置上。连贯性连贯性 导航必须清晰且连贯。导航必须清晰且连贯。易于理解易于理解 确保链接言简意赅。确保链接言简意赅。DHTML菜单对于每个一大堆的分类栏和子栏，需要导航菜单来帮助菜单对于每个

24、一大堆的分类栏和子栏，需要导航菜单来帮助你组织链接。你组织链接。第二节第二节 设计网站设计网站 1 2 3 4（2）几种常用的导航）几种常用的导航顶部水平栏导航顶部水平栏导航顶部水平栏导航是当前两种最流行的网站导航菜单设计模式之一。顶部水平栏导航是当前两种最流行的网站导航菜单设计模式之一。1 2 3 4（2）几种常用的导航）几种常用的导航竖直竖直/侧边栏导航侧边栏导航侧边栏导航的导航项被排列在一个单列，一项在一项的上面。侧边栏导航的导航项被排列在一个单列，一项在一项的上面。1 2 3 4（2）几种常用的导航）几种常用的导航出式菜单和下拉菜单导航出式菜单和下拉菜单导航出式菜单出式菜单(与竖直与竖

25、直/侧边栏导航一起使用侧边栏导航一起使用)和下拉菜单和下拉菜单(一般与顶部水平栏导一般与顶部水平栏导航一起使用航一起使用)是构建健壮的导航系统的好方法。是构建健壮的导航系统的好方法。1 2 3 4 计算机领域大部分名词都是源于英文，计算机领域大部分名词都是源于英文，HTML也一样，他是也一样，他是“Hypertext Markup Language”这几个英文单词的首字母缩写，中文意这几个英文单词的首字母缩写，中文意思是思是“超文本标记语言超文本标记语言”，它是用于描述网页文档的一种标记语言，是网页，它是用于描述网页文档的一种标记语言，是网页制作人员必须掌握的一门计算机语言。制作人员必须掌握的

26、一门计算机语言。（1）HTML语言简介语言简介 超级文本标记语言是超级文本标记语言是标准通用标记语言标准通用标记语言下的一个应用，也是一种规范，下的一个应用，也是一种规范，一种一种标准标准，它通过标记符号来标记要显示的网页中的各个部分。网页，它通过标记符号来标记要显示的网页中的各个部分。网页文件文件本本身是一种文本文件，通过在文本文件中添加标记符，可以告诉身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器浏览器如何显如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。下面我们来看一小段下面我们来看一小段

27、HTML语言的代码，来了解语言的代码，来了解HTML语言的基本结构：语言的基本结构：HTML语言的基本结构语言的基本结构HTML是使用特殊标记来描述文档结构和表现形式的一种语言。是使用特殊标记来描述文档结构和表现形式的一种语言。将这一小段代码粘贴至文本文件中，然后选择将这一小段代码粘贴至文本文件中，然后选择“另存为另存为”，将文件的后缀名改，将文件的后缀名改为为.htm或者或者.html即可，然后在所在的目录下就可看到一个即可，然后在所在的目录下就可看到一个IE的图标，名字的图标，名字就是你所存的文件名称。就是你所存的文件名称。第二节第二节 设计网站设计网站 1 2 3 4（2）HTML语言案

28、例制作语言案例制作用用HTML语言为网站设计一个简单的留言板，程序如下：语言为网站设计一个简单的留言板，程序如下：案例案例4-1HTML语言设计留言板语言设计留言板留言板留言板 留留 言言 板板 留言主题：留言主题：*1 2 3 4 详细描述：详细描述：*联联 系系 人：人：联系电话：联系电话：*1 2 3 4 QQ/MSN： 1 3 4 Dreamweaver在网页设计领域具有强大的功能，且其在网页设计领域具有强大的功能，且其Web站点架设可以方便站点架设可以方便地实现管理与维护，简单地发布站点至网络网站空间，实施远端维护等操作，故它地实现管理与维护，简单地发布站点至网络网站空间，

29、实施远端维护等操作，故它不能简单地定位为网页设计软件。在所见即所得的工作环境中，不能简单地定位为网页设计软件。在所见即所得的工作环境中，Dreamweaver可可轻松地创建表格、层和框架，对网页内容和资料进行完美编排；可以通过简单的图轻松地创建表格、层和框架，对网页内容和资料进行完美编排；可以通过简单的图像转换、动态行为、时间轴和层的结合来制作具有各种视觉特效的网页。像转换、动态行为、时间轴和层的结合来制作具有各种视觉特效的网页。（1）Dreamweaver CS6工作界面介绍工作界面介绍接下来让我们先来了解下接下来让我们先来了解下Dreamweaver CS6软件的基础软件的基础启动启动Dr

30、eamweaver CS6在桌面左下角单击在桌面左下角单击“开始开始”按钮，在弹出的按钮，在弹出的“开始开始”菜单中执行菜单中执行“所有程序所有程序 Dreamweaver CS6”命令，或者双击桌面的命令，或者双击桌面的Dreamweaver CS6快捷方式图标即可快捷方式图标即可启动启动Dreamweaver CS6。第二节第二节 设计网站设计网站 1 3 4认识认识Dreamweaver CS6的工作界面，如图的工作界面，如图4-58所示。所示。由上图可以看出，由上图可以看出，Dreamweaver CS6的工作界面主要由菜单栏、【插入】工具栏的工作界面主要由菜单栏、【插入】工具栏、【文

31、档】工具栏、编辑窗口、状态栏、【属性】面板和各种面板组构成。、【文档】工具栏、编辑窗口、状态栏、【属性】面板和各种面板组构成。1 3 4（2）Dreamweaver CS6主要组成部分简介主要组成部分简介【插入】工具栏【插入】工具栏Dreamweaver CS6的【插入】工具栏中包含了的【插入】工具栏中包含了8个标签，如图个标签，如图4-59所示。所示。【文档】工具栏【文档】工具栏【文档】工具栏中包含了代码视图、拆分视图、设计视图、实时视图、实时代码、【文档】工具栏中包含了代码视图、拆分视图、设计视图、实时视图、实时代码、文档标题、文件管理、浏览器预览、可视化选项等按钮，如图文档标题、文件管理

32、、浏览器预览、可视化选项等按钮，如图4-60所示。所示。1 3 4状态栏状态栏在在Dreamweaver CS6状态栏中可以显示当前光标所在位置的状态栏中可以显示当前光标所在位置的HTML标记，通过此标记，通过此标记可以确定所编辑的网页内容。如图标记可以确定所编辑的网页内容。如图4-61所示。所示。【属性】面板【属性】面板【属性】面板用于显示或修改当前所选对象的属性。如图【属性】面板用于显示或修改当前所选对象的属性。如图4-62所示。所示。1 3 4面板组面板组面板组是指组合在一起的面板集合，它为我们编辑网页提供了既直观又快速的操作面板组是指组合在一起的面板集合，它为我们编辑网页提供了既直观又

33、快速的操作方法，是设计制作网页时不可缺少的工具。如图方法，是设计制作网页时不可缺少的工具。如图4-63所示。所示。1 2 3 4（一）基本流程（一）基本流程 第二节第二节 设计网站设计网站 1 3 41、Dreamweaver CS6案例制作案例制作下面我们为下面我们为”MiTing”护肤品公司创建网站并进行主页面的设计。护肤品公司创建网站并进行主页面的设计。（1）创建站点创建站点Dreamweaver CS6提供了两种创建站点的方法，一是在启动提供了两种创建站点的方法，一是在启动Dreamweaver时通时通过欢迎画面创建；二是在过欢迎画面创建；二是在Dreamweaver工作环境下，单击菜

34、单栏中的工作环境下，单击菜单栏中的【站点站点】【新建站点新建站点】命令。命令。步骤步骤1：启动：启动Dreamweaver CS6，则弹出欢迎画面，如图，则弹出欢迎画面，如图 所示。所示。（二）实施步骤（二）实施步骤 1 3 4步骤步骤2：单击：单击【Dreamweaver站点站点】选项，则弹出选项，则弹出【的站点定义为的站点定义为】对话框，对话框，在该对话框中有两个标签，其中在该对话框中有两个标签，其中【基本基本】标签就是站点定义向导。第标签就是站点定义向导。第1个对话框如个对话框如图图4-65所示，这里有两个选项，第所示，这里有两个选项，第1个选项要求输入站点名称，以便在个选项要求输入站点

35、名称，以便在Dreamweaver中标识该站点，这里输入中标识该站点，这里输入“miting”；第；第2个选项要求输入本地站点个选项要求输入本地站点文件夹。文件夹。1 3 4步骤步骤3：单击保存后，站点创建成功，建立了本地站点以后，新建的站点将显示在：单击保存后，站点创建成功，建立了本地站点以后，新建的站点将显示在【文件文件】面板中。单击菜单栏中的面板中。单击菜单栏中的【窗口窗口】【文件文件】命令，或者按下命令，或者按下F8键，可以键，可以打开打开【文件文件】面板。该面板中显示了本地站点的名称以及本地站点的文件夹等选项面板。该面板中显示了本地站点的名称以及本地站点的文件夹等选项，如图，如图4-

36、70所示。所示。1 3 4步骤步骤4：单击：单击【文件文件】面板中的面板中的“miting”下的管理站点，可以进入站点管理对话下的管理站点，可以进入站点管理对话框，如图框，如图4-67所示。所示。步骤步骤5：进入管理站点对话框后可对站点进行高级设置，如图：进入管理站点对话框后可对站点进行高级设置，如图4-68所示。所示。1 3 4（2）添加网页文件与站点文件夹添加网页文件与站点文件夹在站点中添加网页文件与文件夹的方法基本一致，在站点中添加网页文件与文件夹的方法基本一致，操作步骤如下：操作步骤如下：步骤步骤1：在：在【文件文件】面板中单击鼠标右键，则弹出面板中单击鼠标右键，则弹出一个快捷菜单。一

37、个快捷菜单。步骤步骤2：选择快捷菜单中的：选择快捷菜单中的【新建文件新建文件】命令，则命令，则新建了一个网页文件，如图新建了一个网页文件，如图4-69所示。所示。步骤步骤3：在光标位置处输入网页的名称，重命名为：在光标位置处输入网页的名称，重命名为index.html，然后按下，然后按下Enter键确认，则完成了网键确认，则完成了网页文件的添加。页文件的添加。步骤步骤4：同样的方法，如果在弹出的快捷菜单中选：同样的方法，如果在弹出的快捷菜单中选择择【新建文件夹新建文件夹】命令，则可以在站点中添加命令，则可以在站点中添加images、flash文件夹。文件夹。1 3 4（3）编辑编辑index.

38、html的内容的内容步骤步骤1：设计网页布局，在：设计网页布局，在dreamweaver CS6中可以使用表格、框架、模版、中可以使用表格、框架、模版、css和和DIV技术实现各种元素在网页页面上的排版、定位，如图技术实现各种元素在网页页面上的排版、定位，如图4-70所示就是利用所示就是利用DIV技术和表格共同实现的一个页面设计。技术和表格共同实现的一个页面设计。1 3 4步骤步骤2：将准备好的素材插入到相应区域，进行产品说明及版权所有的文字编辑，：将准备好的素材插入到相应区域，进行产品说明及版权所有的文字编辑，并保存到站点文件夹下，如图并保存到站点文件夹下，如图4-71、图、图4-72所示。

39、所示。1 3 4在浏览器预览效果如图在浏览器预览效果如图4-73所示。所示。第三节第三节 编辑网店商品信息编辑网店商品信息1关键字类型关键字类型淘宝网上将商品名称的字数限制在淘宝网上将商品名称的字数限制在30个汉字（个汉字（60个字符）以内，关键字越个字符）以内，关键字越多被搜索到的可能性越大，商品的浏览量也会增加，从而商品的成交率也会多被搜索到的可能性越大，商品的浏览量也会增加，从而商品的成交率也会提高。提高。（1）属性关键字：指介绍商品的类别、规格、功用等介绍商品基本情况的）属性关键字：指介绍商品的类别、规格、功用等介绍商品基本情况的字或者词。字或者词。（2）促销关键字：是指关于清仓、折扣

40、、甩卖、赠礼等信息的字或者词）促销关键字：是指关于清仓、折扣、甩卖、赠礼等信息的字或者词（3）品牌关键字：包括商品本身的品牌和我们店铺的品牌两种）品牌关键字：包括商品本身的品牌和我们店铺的品牌两种（4）评价关键字：主要作用是人产生一种心理暗示，一般都是正面的、褒）评价关键字：主要作用是人产生一种心理暗示，一般都是正面的、褒义的形容词。义的形容词。第三节第三节 编辑网店商品信息编辑网店商品信息2关键字的组合关键字的组合根据上面关键字的分类，在商品发布的时候，商品名称可以由两种以上的关根据上面关键字的分类，在商品发布的时候，商品名称可以由两种以上的关键字来进行组合，例如：键字来进行组合，例如：促销

41、关键字促销关键字 属性关键字。属性关键字。品牌关键字品牌关键字 属性关键字。属性关键字。评价关键字评价关键字 属性关键字。属性关键字。从上面这三种组合方式我们又可以得到更多种组合方式，例如：从上面这三种组合方式我们又可以得到更多种组合方式，例如：促销关键字品牌关键字属性关键字。促销关键字品牌关键字属性关键字。品牌关键字评价关键字属性关键字。品牌关键字评价关键字属性关键字。评价关键字促销关键字属性关键字。评价关键字促销关键字属性关键字。如图如图4-75所示所示。第三节第三节 编辑网店商品信息编辑网店商品信息 第三节第三节 编辑网店商品信息编辑网店商品信息为了方便顾客在站内对商品进行分类查找，商家

42、将商品分为不同的属性类为了方便顾客在站内对商品进行分类查找，商家将商品分为不同的属性类目，发布的所有商品都会选择一个相应的类目属性。目，发布的所有商品都会选择一个相应的类目属性。类目设置可以遵循以下三个原则：类目设置可以遵循以下三个原则：1根据自己的行业经验进行分类。根据自己的行业经验进行分类。2参考同等行的分类。参考同等行的分类。3同样的商品可以按照不同的规则设置不同的分类。同样的商品可以按照不同的规则设置不同的分类。第三节第三节 编辑网店商品信息编辑网店商品信息商品属性编辑应突出商品使用价值的基本属性。商品属性编辑应突出商品使用价值的基本属性。商品的基本属性相对较固定，可以参照常用电子商务

43、平台上相同商品属性描商品的基本属性相对较固定，可以参照常用电子商务平台上相同商品属性描述进行设置。如图述进行设置。如图4-77所示。所示。第三节第三节 编辑网店商品信息编辑网店商品信息精美的商品图片吸引消费者点击浏览商品，能否使消费者满意商品描述至关精美的商品图片吸引消费者点击浏览商品，能否使消费者满意商品描述至关重要，所以要在商品描述里补充名称及图片没能完整表达出来的内容，让消重要，所以要在商品描述里补充名称及图片没能完整表达出来的内容，让消费者在购买之前对商品有更全面和客观的了解。费者在购买之前对商品有更全面和客观的了解。商品描述里可以添加以下几部内容：商品描述里可以添加以下几部内容：1型

44、号规格型号规格如图如图4-78所示的商品品牌、型号所示的商品品牌、型号、功率、功能等信息一目了然，、功率、功能等信息一目了然，这些都是顾客最想了解的信息，这些都是顾客最想了解的信息，应该放在商品描述的最前面。应该放在商品描述的最前面。2交易说明交易说明一般可以用一般可以用“买家必读买家必读”、“购物须知购物须知”等方式来体现等方式来体现,如如图图4-80所示。所示。3配送说明配送说明配送说明是指关于邮寄的费用和物流配送周期的说明，预先告知顾客既是商配送说明是指关于邮寄的费用和物流配送周期的说明，预先告知顾客既是商家的职责，也是优质服务的一种体现。家的职责，也是优质服务的一种体现。如图如图4-8

45、1 4服务保障服务保障 服务保障包括质量承诺、售后维修、会员优惠等信息，这些信息既是给顾服务保障包括质量承诺、售后维修、会员优惠等信息，这些信息既是给顾客安全感也是用返利的方式来增加店铺的黏性，如图客安全感也是用返利的方式来增加店铺的黏性，如图4-82所示。所示。5相关信息相关信息相关信息里面的内容可以非常丰富，一切有利于销售的、有利于体现商家专业性相关信息里面的内容可以非常丰富，一切有利于销售的、有利于体现商家专业性的内容都可以放在这部分内容里。如促销活动介绍、品牌文化、专业的商品包装的内容都可以放在这部分内容里。如促销活动介绍、品牌文化、专业的商品包装等。美的面包机商品描述中的包含了面包机

46、的教学视频，这样方便顾客学习等。美的面包机商品描述中的包含了面包机的教学视频，这样方便顾客学习.如如图图4-83。第三节第三节 编辑网店商品信息编辑网店商品信息一张合格的商品图片基本上需要满一张合格的商品图片基本上需要满足以下几个要求：足以下几个要求：第一，画面、用光和构图要有视觉第一，画面、用光和构图要有视觉上的美感。上的美感。第二，抓住商品的形、色、质，如第二，抓住商品的形、色、质，如实反映商品的本来特征。实反映商品的本来特征。第三，搭配协调的配饰和展示更多第三，搭配协调的配饰和展示更多的商品细节。的商品细节。1 2 3 4（一）基本流程（一）基本流程确定商品基本属性确定商品基本属性定义一

47、个合适的商品标题定义一个合适的商品标题为商品选择合适类目为商品选择合适类目编辑设计商品的详细描述编辑设计商品的详细描述 第三节第三节 编辑网店商品信息编辑网店商品信息 1 3 4（二）实施步骤（二）实施步骤1参照商品说明书，将商品基本特征属性填入表参照商品说明书，将商品基本特征属性填入表中中。属性属性属性值属性值商品基本特征属性表商品基本特征属性表 1 3 42定义一个合适的商品标题定义一个合适的商品标题（1）搜索关键词，将结果填入表）搜索关键词，将结果填入表中中。标题应突出商品功效、品质、信誉、出价优势等卖点且符合关健词优化特点，标题标题应突出商品功效、品质、信誉、出价优势等卖点且符合关健词

48、优化特点，标题字数不超过个字数不超过个20字。字。商品关键词搜索统计表商品关键词搜索统计表搜索方法搜索方法搜索界面的截图搜索界面的截图选择一个与产品最接选择一个与产品最接近的关键词为标题近的关键词为标题通过百度、淘宝首页搜索框中输入“韩国原装梦妆花萃净白2件套EX”，可以从搜索下拉框的衍生关键词中进行选择。从搜索结果页中的“相关搜索”，“你是不是想找”相关的搜索词中进行关键词选择。从淘宝网商品属性类目热门关键词里选择。1 3 4（2）从商品的维度去选择和组合关键词，将结果填入表）从商品的维度去选择和组合关键词，将结果填入表中中。商品关键词组合表商品关键词组合表商品维度商品维度分类分类关键词（各

49、设一个关键词）关键词（各设一个关键词）品牌品牌名称货号产品名称产品各类产品符号产品细节解剖包装方式产地系列目标人群精准定位搜索习惯产品用途与保障基本功效品质保证市场活动节日功用促销流行元素 1 3 43为商品选择合适栏目为商品选择合适栏目根据网站栏目设置，为商品进行栏目选择，将结果填入表根据网站栏目设置，为商品进行栏目选择，将结果填入表中中。栏目选择至少包括两。栏目选择至少包括两级栏目。级栏目。商品栏目设置商品栏目设置一级栏目一级栏目二级栏目二级栏目 1 3 44编辑商品的详细描述编辑商品的详细描述结合给定资料，对商品宝贝进行描述，并对商品信息进行编辑，将内容填入表结合给定资料，对商品宝贝进行

50、描述，并对商品信息进行编辑，将内容填入表中中。商品宝贝详细信息与描述商品宝贝详细信息与描述信息类别信息类别主要内容主要内容型号规格交易说明配送说明服务保障相关信息宝贝描述u本项目通过为本项目通过为“MiTing”护肤品公司网站设计一个网站，系统地介绍了内容决护肤品公司网站设计一个网站，系统地介绍了内容决定形式、先整体，后局部，最后回归到整体和功能决定设计方向的网站网页设计定形式、先整体，后局部，最后回归到整体和功能决定设计方向的网站网页设计理念。理念。u通过通过Photoshop CS6、Flash CS6、Dreamweaver CS6等软件的学习，熟练等软件的学习，熟练掌握这些软件的使用，