1、能力目标：能力目标：(1)能够设计多网页网站。能够设计多网页网站。(2)能够制作多网页站点。能够制作多网页站点。知识目标：知识目标：(1)掌握网站建设流程。掌握网站建设流程。(2)掌握网页制作的基本原则。掌握网页制作的基本原则。(3)掌握电子商务网页设计的方法。掌握电子商务网页设计的方法。(4)掌握多网页站点的建设的基本方法。掌握多网页站点的建设的基本方法。任务一任务一 添加网页基本元素添加网页基本元素网站的总体设计与策划网站的总体设计与策划1确定网站需求及功能（1）网站的需求：是指企业通过网站希望实现的目标。一个企业网站的成功与否不仅关系到企业的业务，同时也会影响企业信息化及互联网利用率，所
2、以在建设网站之前，首先要明确企业用户的需求、建设网站的需求，从而确定建站规模、投资费用等方面。只有准确的需求说明，才能确保在建站过程是朝正确的方向发展的。（2）网站定位：主要解决“网站将面向谁”的问题。不同人群的观念、信息需求层次及关注焦点存在差异，精准的网站定位有利于网站的推广。（3）网站的功能：大体分为产品宣传型、网上营销型、信息门户型、服务咨询型、电子商务型这样几大类。任务一任务一 添加网页基本元素添加网页基本元素网站的总体设计与策划网站的总体设计与策划2确定网站主题和风格（1）网站风格：网站页面设计上的视觉元素组合在一起的整体形象，展现给人的直观感受。这个整体形象包括网站的配色、字体、
3、页面布局、页面内容、交互性、海报、宣传语等因素。（2）网站风格一致性：网站的风格要统一。因为一个网站是由很多个网页组成的，如果每个网页的风格都不一样的话，那么一定会使整个网站显得凌乱、不协调，甚至很容易使浏览者感到迷惑，不知自己是否还在同一个网站内浏览，所以一定要使网站的风格保持一致。一般来说，要使网站的风格保持一致，可以从以下几个方面着手：版面设计要一致。如网页的主色调要一致，字体的风格要一致。网页中的有代表性的东西要一致，如网站的名称、LOGO、有代表性的图形和动画等。导航条要一致。可以用CSS、js技术实现导航条的外观及行为方式保持一致。任务一任务一 添加网页基本元素添加网页基本元素网站
4、结构与内容设计网站结构与内容设计1.规划站点结构（1）规划站点结构的方法：应该将所有信息按类别分开，分别纳入不同层次的页面中。应先把主要的内容放到首页上，其他内容分主次地依次安排在下级网页页面中。（2）网站的结构图：网站的结构图有顺序结构、网状结构、集成结构、Web结构等。多数比较复杂的电子商务网站会综合应用几种；综合应用几种不同的结构图。定义好网站结构图的目的是便于有效地组织站点的页面链接。（3）网站栏目设计原则：一是网站内容重点突出，二是方便访问者浏览，三是便于管理者进行维护。此外，网站栏目划分要服从并体现网站主题。任务一任务一 添加网页基本元素添加网页基本元素网站结构与内容设计网站结构与
5、内容设计2.编写网站设计计划书网站策划书包括以下几个内容。确定网站主题与名称。确定网站性质的内容主题及定位浏览人群。策划栏目功能与层次结构。清晰、丰富的内容组织。网站的发布形式。页面设计要求。任务一任务一 添加网页基本元素添加网页基本元素网站结构与内容设计网站结构与内容设计2.编写网站设计计划书网站策划书包括以下几个内容。确定网站主题与名称。确定网站性质的内容主题及定位浏览人群。策划栏目功能与层次结构。清晰、丰富的内容组织。网站的发布形式。页面设计要求。网站的发布形式：一种是企业级商业网站的发布；另一种是中小企业级或小型组织社团的网站发布（服务器托管、申请虚拟主机、DDN专线接入）此外还有免费
6、主页空间的方式。页面设计要求：一是统一的页面设计风格，色彩纯净、版面统一；二是页面的大小适中；三是合理使用空白页；四是导航条的使用。任务一任务一 添加网页基本元素添加网页基本元素制作网站的步骤制作网站的步骤在制作网站页面时，需要全面的考虑，大体可以分为三个步骤：1.确定网页版面布局在制作网页时，要先把大的结构设计好，再逐步完善小的结构设计；要先设计简单的内容，再设计复杂的，即先大后小、先简单后复杂。这样设计方便在出现问题时进行修改。要根据网站设计目标和主要浏览对象设计好网页的版式及网页的内容。2.制作网页网页包括静态网页制作和动态网页制作。制作网页时要按照版面布局灵活运用模板和库，提高制作效率
7、。3.丰富网页内容为了使网页更加美化，视觉效果更加突出，可以通过Flash动画、视频等技术手段来丰富网页内容。任务一任务一 添加网页基本元素添加网页基本元素网页制作的注意事项网页制作的注意事项网页的长度不要过长；使用的图像宜小而精；定义图片的尺寸；正确选择图片格式；降低颜色数目；使用图片简图；慎用动画；慎用Java程序；使用缓存浏览器兼容性测试浏览器兼容性测试浏览器对HTML和CSS 等语法的支持度是不同的。，其版本越高，所支持的语法就越多。在Dreamweaver中提供了可以检查网页中是否含有某版本，浏览器不能识别的语法功能，设计者可以借助其进行检查。平台兼容性测试平台兼容性测试设计者要为用
8、户着想，必须最少在一台PC和一台Mac机上测试自己的网站网页，看看兼容性如何。超链接完好性测试超链接完好性测试设计者必须检测超链接的完好性，保证链接的有效性，如果在测试过程中发现错误，要及时修改，在准确无误后方可正式上传到Internet上。任务一任务一 添加网页基本元素添加网页基本元素网页制作的注意事项网页制作的注意事项网页的长度不要过长；使用的图像宜小而精；定义图片的尺寸；正确选择图片格式；降低颜色数目；使用图片简图；慎用动画；慎用Java程序；使用缓存浏览器兼容性测试浏览器兼容性测试浏览器对HTML和CSS 等语法的支持度是不同的。，其版本越高，所支持的语法就越多。在Dreamweave
9、r中提供了可以检查网页中是否含有某版本，浏览器不能识别的语法功能，设计者可以借助其进行检查。平台兼容性测试平台兼容性测试设计者要为用户着想，必须最少在一台PC和一台Mac机上测试自己的网站网页，看看兼容性如何。超链接完好性测试超链接完好性测试设计者必须检测超链接的完好性，保证链接的有效性，如果在测试过程中发现错误，要及时修改，在准确无误后方可正式上传到Internet上。任务二任务二 企业商务网页的设计企业商务网页的设计网站logo及banner网站导航条（首页、公司动态、产品系列、公司案例、关于我们）公司图片公司介绍经典案例展示版尾任务二任务二 企业商务网页的设计企业商务网页的设计网页制作的
10、原则和技巧网页制作的原则和技巧页面布局的简洁原则：简洁是版面最重要的原则。因为设计网页的主要目的是为了传达信息，网页上的信息是最精华的、最重要的，除此以外的东西均应处于次要地位。不要使版面显得过于花哨，虽然访问者会被精美的动画和花哨的图片所吸引，但访问者真正关心的是网页的内容，如果网页的内容是有价值的，那么他们才会经常光顾。网页布局的技巧：确定网页设计的尺寸；巧用黄金分割比；适当处理留白。任务二任务二 企业商务网页的设计企业商务网页的设计网页色彩搭配原理：网页色彩搭配原理：色彩的鲜明性：网页的色彩要鲜艳，容易引人注目。色彩的独特性：要有与众不同的色彩，使浏览者对网页的印象强烈。色彩的合适性：色彩和设计者表达的内容与气氛相适合，如用粉色体现女性站点的柔美。色彩的联想性：不同的色彩会产生不同的联想，选择色彩要和自己网页的内涵相关联。常用的配色方案：常用的配色方案：暖色调：即红色、橙色、黄色、褐色等色彩的搭配。这种色彩的运用，可使主页呈现温馨、和煦、热情的氛围，冷色调：即青色、绿色、紫色等色彩的搭配。这种色调的运用，可使主页呈现宁静、清凉、高雅的氛围。对比色调：即把色性完全相友的色彩搭配在同一个空间里。例如：红与绿、黄与紫、与蓝等。这种色彩的搭配，可以产生强烈的对比效果，给人亮丽、鲜艳、喜庆的感觉。
