网页设计与制作 工业和信息化普通高等教育“十二五”规划教材立项项目 作者 雷伟军 第12章 企业网站.pptVIP

第12章 企业网站 制作网站前，一般先要进行前期调研，确定网站的主题、栏目、整体风格等。企业网站的具体页面以内容来划分，一般包括网站logo、导航条、Banner、内容栏和版尾5个组成部分。同时，企业网页中各栏目（公司动态、公司简介等）的内容应该保持一致的风格，在设计企业网页的界面时，可先设计网页的logo、导航条等板块，然后通过复制结构和内容实现栏目风格的统一。为了简洁的描述制作过程，下面主要以代码的形式给出企业网站首页和内部页面的制作过程。 12.1 制作软件公司网站首页 在编写软件公司网页页面时，通常以div标签为网页最基础的结构，在div标签内部，则使用列表等存储各种内容数据。 操作步骤如下： 1.新建站点对应“12”文件夹，在站点根文件夹（即文件夹“12”）下创建“pages”、“style”文件夹。用Dreamweaver创建网页文档，并将网页文档以“index.html”保存在 “pages” 文件夹下，然后再创建“main.css”层叠样式表文件，将其保存在“styles”子文件夹下。 2.从“文件”面板打开“index.html”，切换到“拆分”视图。将工具栏“标题”文本框内容修改为“SD软件公司”。 3.在“main.css”文档中，定义网页的body标签以及表格的样式属性。代码如下所示: body, td, th { font-size: 12px; } body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; width:1003px; background-image: url(../images/hbg.jpg); background-repeat: no-repeat; background-color: #2e597b; } 4.在“index.html”文档的“设计”视图中，在“body”标签中插入div标签创建网页的基本结构，并为每个版块添加id属性，其代码如下所示。 !--网页的Logo栏板块-- div id=logodiv !--网页的导航栏板块-- div id=nav !--网页的banner板块-- div id=banner/div !--网页的内容板块-- div id=home1 div id=home2 !--网页的版尾板块-- div id=footer/footer 5.在ID为“logo”的Div层中，插入ID为“contactUs”的Div层。 在“main.css”文档中分别设置ID为“logo”和“contactUs”的CSS样式属性。 #logo { height: 100px; width: 809px; margin:0 96px; background-image:url(../images/home_02.gif); } #logo #contactUS { float: right; height: 30px; width: 150px; margin-top: 40px; color:#FFF; } 6.在ID为“contactUs”的Div层按“Enter”键创建两个段落（即p标签），在第1个段落中插入图像“twitter.gif”,在第2个段落中输入文本“欢迎与我们联系”。在“main.css”文档中为两个p标签设置高度、浮动、边距等CSS样式代码。代码如下所示。 #logo #contactUS p { height: 30px; display:inline; line-height:30px; margin:0; float:right; padding:0; } 7.在ID为“nav”的Div层中输入“首 页”，然后单击“属性”面板中的按钮，出现项目列表符号，按“Enter”键，出现下一个项目列表符号，在项目列表符号后再输入“服 务”，以此类推，分别输入“产 品”、“关于我们”、“博 客”、“联系我们”。 分别选择上面所建项目列表的6个文本，在“属性”面板中“链接”文本框中输入“#”。 在“main.css”文档中为ID为div、定义项目列表（ul标签、li标签）及链接文本和鼠标经过时文本变化的样式属性。代码如下所示。 #nav { width:809px; height:45px; margin:0 96px; background-color:#000; } #nav ul { width: 809px; margin:0; padding:0; list-style:none; heig