第19章 公司宣传网站的布局.pptVIP

教学内容：随着网络的普及，企业拥有自己的网站已是必然的趋势。企业网站作为电子商务时代企业对外的窗口，起着提高企业知名度，展示和提升企业形象、查询企业产品信息，提供售后服务等重要作用，因而越来越受到企业的重视。 第19章 公司宣传网站的布局 教学重点 熟悉公司宣传网站排版构架的方法 掌握公司宣传网站各部分设计要点 19.1 企业网站设计分析 在企业网站的设计中，既要考虑商业性，又要考虑到艺术性，企业网站是商业性和艺术性的结合。好的网站设计，有助于企业树立良好的社会形象，更直观的展示企业的产品和服务。好的企业网站首先看商业性设计，包括功能设计、栏目设计、页面设计等。和商业性相对应的就是艺术性，艺术性要求怎么更好地传达信息，怎样让访问者更好的接触信息，怎样给访问者创造一个愉悦的视觉环境，留住访问者视线等。 企业网站是以企业宣传为主题构建的网站，域名后缀一般为.com。与一般门户型网站不同，企业网站相对来说信息量比较少。内容设计主要是从企业简介、产品展示、服务等几个方面来进行的。这种网站一般没有过多的颜色修饰，整体风格是最重要的，而且网站的更新频率相对较高，一般都包含有企业新闻的发布系统。 19.1.1 企业网站内容设计 网站的主页是整个网站的门面，通常要设计得简洁、大方。在主页上应该显示出网站的主要栏目和企业概况性的介绍。 19.1.2 排版构架 对主页和内容进行详细的布局分析后，接下来就可以进行网页的具体设计了。 19.2 各部分设计 19.2.1 Logo与顶部导航 一般企业网站通常都将Logo和导航放置在页面的左上角，让用户一进入网站就能够看到。下面制作Logo与顶部导航部分，这部分主要放在#header对象中。 19.2.2 左侧导航 左侧的#leftbar块内容虽然不少，但主要是导航列表，制作比较简单。在“leftbar”层中导航设计成了“ul”项目列表，其中将这个大块的宽度设置为200px，且向左浮动。对块中实际内容的项目列表采用常用的方法，即将ul标记的list-style属性设置为none，然后调整li的padding参数，设置每个列表前的项目符号用一幅GIF背景图像img08.gif代替，并且为每个li标记都设置了实线作为下画线。 19.2.3 主体内容 网页主体内容主要放在#content对象中，采用左浮动且固定宽度的版式设计，在#content对象中有post1和post2两个层，分别放置“关于我们”和“咨询业绩”两部分内容，主体内容部分效果如图19.8所示 。 19.2.4 制作搜索部分 表单中的元素很多，包括常用的文本框、单选按钮、复选框、下拉菜单和按钮等，可以利用CSS对表单样式的风格，如边框、背景色、宽度和高度等控制。这里制作的搜索部分效果如图19.13所示，主要是一个搜索表单，在结构设计上十分简单，也没有更多复杂的内容。 19.2.5 制作公司新闻 公司新闻部分效果如图19.14所示，主要包括公司的最新新闻动态信息，制作时主要是创建一个无序列表，其CSS代码与19.2.2小节介绍的一致，这里就不再赘述。 19.2.6 制作联系我们 联系我们部分效果如图19.15所示，主要包括公司的联系信息，制作时主要是创建一个无序列表，其CSS代码也与19.2.2小节介绍的一致，这里就不再赘述。。 #footer脚注主要用来放一些版权信息和联系方式，与其他网页一样，保持简单、清晰的风格。其HTML框架中没有更多的内容，只有一个div块中包含一个p标记。#footer 块的设计要与页面其他部分风格一致，这里采用深蓝色的背景配合浅蓝色的文字，效果如图19.16所示。 19.2.7 底板版权信息 19.3练习题 制作一个如图19.17所示的企业网站主页。 *