第13章 网站综合设计与制作实例ppt课件（完整版）.pptx

《第13章 网站综合设计与制作实例ppt课件（完整版）.pptx》由会员分享，可在线阅读，更多相关《第13章 网站综合设计与制作实例ppt课件（完整版）.pptx（48页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第13章 网站综合设计与制作实例ppt课件（完整版）第13章网站综合设计与制作实例网站综合设计与制作实例第 13 章本书编写组网页设计与制作（微课版第3 版）第13章网站综合设计与制作实例13.1班级网站的规划与设计13.2网页设计与制作13.3网页标准技术与HTML 513.4综合实训案例第13章网站综合设计与制作实例学习目标 通过一个小型班级网站的制作过程，了解网站规划、通过一个小型班级网站的制作过程，了解网站规划、设计与网页制作设计与网页制作工作流程及详细的样式代码工作流程及详细的样式代码。制作网站前制作网站前，一般先要进行前期调研，确定网站的主题、栏目和整体风，一般先要进行前期调研，确

2、定网站的主题、栏目和整体风格等。本章将介绍一个小型班级网站的制作过程，制作该网站需要的所格等。本章将介绍一个小型班级网站的制作过程，制作该网站需要的所有素材和资料都可在教学资源文件中找到。有素材和资料都可在教学资源文件中找到。第13章网站综合设计与制作实例13.1班级网站的规划与设计13.13.1 1. .1 1 网站定位网站定位网站定位就是确定网站在互联网上扮演哪种角色，要向目标浏览者提就是确定网站在互联网上扮演哪种角色，要向目标浏览者提供哪些有价值的信息，以及希望通过网站发挥什么样的作用等。供哪些有价值的信息，以及希望通过网站发挥什么样的作用等。班级网站的浏览者有该班级的学生、老师和家长，

3、该网站将为学生、班级网站的浏览者有该班级的学生、老师和家长，该网站将为学生、老师和家长建立一个相互沟通的平台。老师和家长建立一个相互沟通的平台。明确了网站的浏览群体就明确了建站的目的，即满足浏览者的需求。明确了网站的浏览群体就明确了建站的目的，即满足浏览者的需求。第13章网站综合设计与制作实例13.1班级网站的规划与设计13.1.2 网站需求分析1 1学生需求学生需求 发布班级公告，并对公告进行管理。发布班级公告，并对公告进行管理。 建立留言板，对留言进行回复、修改和删除等管理。建立留言板，对留言进行回复、修改和删除等管理。 建立班级相册，能够建立不同主题的图片集，能够对每个主题、建立班级相册

4、，能够建立不同主题的图片集，能够对每个主题、每张图片进行介绍并提供留言功能。每张图片进行介绍并提供留言功能。 建立课程的讨论区域，能够针对某个主题进行讨论或完成老师布建立课程的讨论区域，能够针对某个主题进行讨论或完成老师布置的作业等。置的作业等。第13章网站综合设计与制作实例13.1班级网站的规划与设计13.1.2 网站需求分析2 2教师需求教师需求 具有对学生的管理功能。具有对学生的管理功能。 能够发布通知。能够发布通知。 能够发布课程的作业，参与学生的讨论，从而引导学生学习。能够发布课程的作业，参与学生的讨论，从而引导学生学习。3 3家长需求家长需求 能够提供汇聚指定学生的所有信息功能。能

5、够提供汇聚指定学生的所有信息功能。 能够参与学生的讨论。能够参与学生的讨论。 具有留言功能。具有留言功能。第13章网站综合设计与制作实例13.1班级网站的规划与设计13.1.3 网站栏目设计班级网站具有自身的特殊性，主要面向的是在校的学生，其中的内容包班级网站具有自身的特殊性，主要面向的是在校的学生，其中的内容包括学生的学习安排、日常活动、留言和讨论等信息。具体栏目的设计可括学生的学习安排、日常活动、留言和讨论等信息。具体栏目的设计可以根据需要及分析同类网站的栏目设计来确定，图以根据需要及分析同类网站的栏目设计来确定，图13-113-1所示是本实例网所示是本实例网站的栏目结构，该图也称为网站导

6、航图站的栏目结构，该图也称为网站导航图。第13章网站综合设计与制作实例13.1班级网站的规划与设计13.1.3 网站栏目设计首页：进入班级网站的第一个页面，主要向浏览者展示日常访问和使用较多的首页：进入班级网站的第一个页面，主要向浏览者展示日常访问和使用较多的信息，因此首页内容包含注册与登录区、班级日历、班级公告、班级新闻、课程信息，因此首页内容包含注册与登录区、班级日历、班级公告、班级新闻、课程表与个人展示区等。表与个人展示区等。 留言本：供班级成员和其他浏览者进行交流、发表评论的板块，也显示以往留言本：供班级成员和其他浏览者进行交流、发表评论的板块，也显示以往的评论。的评论。 班级日志：记

7、录班级重要活动的板块。班级日志：记录班级重要活动的板块。 班级相册：用图片展示班级风采的板块，可浏览查看不同主题的照片。班级相册：用图片展示班级风采的板块，可浏览查看不同主题的照片。 课程讨论：对课程的相关问题进行讨论的板块。课程讨论：对课程的相关问题进行讨论的板块。 个人主页：指向一个班级内每个学生制作的关于自己的个人主页的列表。个人主页：指向一个班级内每个学生制作的关于自己的个人主页的列表。 关于我们：展示班级描述和班级宣言的板块。关于我们：展示班级描述和班级宣言的板块。第13章网站综合设计与制作实例网站导航图第13章网站综合设计与制作实例13.1班级网站的规划与设计13.1.4 站点定义

8、与目录管理站点是存放和管理网页文档的场所，一个个网页文档通过超链接链接起来构成了站点是存放和管理网页文档的场所，一个个网页文档通过超链接链接起来构成了站点。站点可以小到只有一个网页，大到包含成千上万个网页。制作网站的第一站点。站点可以小到只有一个网页，大到包含成千上万个网页。制作网站的第一步是创建站点，为网站指定本地的文件夹和服务器，使它们建立联系。步是创建站点，为网站指定本地的文件夹和服务器，使它们建立联系。站点实际上是一个文件夹，这个文件夹中包含很多子文件夹。站点文件夹中通常站点实际上是一个文件夹，这个文件夹中包含很多子文件夹。站点文件夹中通常包含一些公共文件夹，用于存放访问和使用各网页的

9、公共信息，如包含一些公共文件夹，用于存放访问和使用各网页的公共信息，如imageimage文件夹文件夹用来存放图像信息，用来存放图像信息，jsjs文件夹用来存放文件夹用来存放JavaScriptJavaScript程序文件，程序文件，CSSCSS文件夹用来存文件夹用来存放对全局的一些页面进行定义的外部样式表文件。除了这些公共文件夹，每个栏放对全局的一些页面进行定义的外部样式表文件。除了这些公共文件夹，每个栏目应创建一个对应的子文件夹。需要注意的是，文件夹和文件的命名最好不要出目应创建一个对应的子文件夹。需要注意的是，文件夹和文件的命名最好不要出现汉字。现汉字。第13章网站综合设计与制作实例13

10、.1班级网站的规划与设计13.1.5 班级网站的风格设计网站的风格设计是一个网站区别于其他网站的重网站的风格设计是一个网站区别于其他网站的重点，风格设计包含品牌传达、氛围渲染、信息排点，风格设计包含品牌传达、氛围渲染、信息排版等视觉表现技术。对于班级网站而言，应当考版等视觉表现技术。对于班级网站而言，应当考虑如何体现班级特色，尽可能地基于简洁的原则虑如何体现班级特色，尽可能地基于简洁的原则进行风格设计。进行风格设计。简洁、明快和充满活力应是班级网站传递给浏览简洁、明快和充满活力应是班级网站传递给浏览者的第一感觉。在配色设计上，因为浏览群体主者的第一感觉。在配色设计上，因为浏览群体主要为年轻人，

11、所以网站色彩以明快为主基调，页要为年轻人，所以网站色彩以明快为主基调，页面的整体使用橙色偏绿的色调，突显一种朝气蓬面的整体使用橙色偏绿的色调，突显一种朝气蓬勃的氛围，再配合白色背景营造大气的感觉。勃的氛围，再配合白色背景营造大气的感觉。 第13章网站综合设计与制作实例13.1班级网站的规划与设计 第13章网站综合设计与制作实例13.2 网页设计与制作13.2.1 页面布局在拿到网页设计图时，要先分析网在拿到网页设计图时，要先分析网页的布局结构，了解各组成部分的页的布局结构，了解各组成部分的尺寸大小。网页整体上可划分为上、尺寸大小。网页整体上可划分为上、中、下中、下3 3部分，其中上面区域主要部

12、分，其中上面区域主要为为LogoLogo、导航和、导航和Banner 3Banner 3部分内容。部分内容。下面区域主要为底部导航。中间区下面区域主要为底部导航。中间区域面积最大，为重要的信息栏区。域面积最大，为重要的信息栏区。在不同的页面中，该区域可根据需在不同的页面中，该区域可根据需要再进行布局的划分要再进行布局的划分。 Top Banner Content Bottom 第13章网站综合设计与制作实例对于这种结构的布局，可以使用对于这种结构的布局，可以使用DivDiv层搭建主结构，主体代码层搭建主结构，主体代码如下：如下： headerbannercontentbottom13.2.1

13、页面布局第13章网站综合设计与制作实例在对首页的布局进行了分割之后，整个页面被分成了头部、导航、在对首页的布局进行了分割之后，整个页面被分成了头部、导航、内容和底部内容和底部4 4个区域。除内容区域之外，其他个区域。除内容区域之外，其他3 3个区域都属于相对固定个区域都属于相对固定的区域，将会出现在网站的其他页面上。在进行网站设计时，为保持的区域，将会出现在网站的其他页面上。在进行网站设计时，为保持站点风格的一致性，应当将应用于多个网页的样式独立出来，定义为站点风格的一致性，应当将应用于多个网页的样式独立出来，定义为全局的全局的CSSCSS。下面的代码对班级网站全局的页面元素样式进行了统一的定

14、义，一下面的代码对班级网站全局的页面元素样式进行了统一的定义，一般将该文件命名为般将该文件命名为default.cssdefault.css、main.cssmain.css或或style.cssstyle.css，以便在每个，以便在每个页面加以引用。下面列出了全部全局页面加以引用。下面列出了全部全局CSSCSS代码，请仔细阅读，并了解其代码，请仔细阅读，并了解其含义，在本章后面的制作步骤中会对这些代码进行逐段分析和应用含义，在本章后面的制作步骤中会对这些代码进行逐段分析和应用。13.2.1 页面布局第13章网站综合设计与制作实例charset utf-8;/* CSS Document */

15、*margin:0px;padding:0px;imgborder:0px;bodybackground:#fffff url(images/body-bg.gif) top left repeat-x;font-family:Arial, Helvetica, sans-serif;font-size:12px;#containerwidth:900px;margin:0 auto;.headerbackground:url(images/header-bg.gif) bottom left no-repeat;height:200px;.floatlfloat:left;.floatrfl

16、oat:right;.logopadding-top:20px;padding-left:10px;.clearclear:both;.top-links ullist-style:none;padding-top:22px;.top-links lifloat:left;color:#272727;background:url(images/li-seperator.gif) top right no-repeat;font-weight:bold;line-height:20px;padding:0 20px;.top-links li atext-decoration:none;colo

17、r:#272727;font-weight:bold;.top-links li a:hovercolor:#517208;.top-links li a:activecolor:#517208;.infofont-size:20px;width:400px;padding-top:140px;padding-right:69px;color:#004802;font-weight:bold;.content-boxpadding:30px 0px;.left-colwidth:490px;.main-contentcolor:#9B9875;line-height:18px;h1, h2,

18、h3, h4line-height:normal;第13章网站综合设计与制作实例.main-content h1color:#007b3b;padding-bottom:15px;font-size:20px;.main-content span.second_headingcolor:#0a356d;font-weight:bold;display:block;padding-bottom:15px;font-size:13px;.main-content ppadding-bottom:20px;color:#9b9875;line-height:18px;acolor:#9B9875;t

19、ext-decoration:none;a:hover a:activetext-decoration:none;.gallery-sectionwidth:255px;background:url(images/dotted-bg.gif) top right repeat-y;padding-right: 30px;margin-top:30px;.gallery-section h1color:#007b3b;padding-bottom:10px;font-size:20px;.gallery-section span.second_headingcolor:#0a356d;font-

20、weight:bold;display:block;padding-bottom:20px;font-size:13px;.gallery-section imgpadding-right:10px;padding-bottom:10px;.drawing-sectionwidth:175px;margin-top:30px;.drawing-section h1color:#007b3b;padding-bottom:10px;font-size:20px;.drawing-section span.second_headingcolor:#0a356d;font-weight:bold;d

21、isplay:block;padding-bottom:20px;font-size:13px;.drawing-section ppadding-bottom:20px;color:#9b9875;line-height:18px;acolor:#9B9875;text-decoration:none;第13章网站综合设计与制作实例.news-titlecolor:#0a356d;font-weight:bold;display:block;padding-bottom:5px;font-size:13px;.news-title atext-decoration:none;color:#0

22、a356d;.right-colwidth:331px;.events-sectionpadding:10px 10px 0px 10px;border:5px solid #fcd598;background: #f9eddd url(images/events-section-bg.gif) bottom right no-repeat;.events-section h1color:#007b3b;padding-bottom:10px;font-size:20px;.events-section divcolor:#0a356d;font-weight:bold;padding-bot

23、tom:10px;.events-section pcolor:#c75300;line-height:20px;font-size:11px;padding-top:2px;padding-bottom:20px;.events-section p atext-decoration:none;color:#c75300;.right-titlecolor:#0a356d;font-weight:bold;font-size:13px;.right-title atext-decoration:none;color:#0a356d;.kcbpadding:3px 5px;background:

24、url(images/best-section.gif) top left no-repeat; height:111px;margin-top:20px;.tablewidth:100%;border:0px;background-color:#ffffff;.table thbackground:#F9EDDD;line-height:20px;color:#0a356d;.table tdtext-align:center;line-height:17px;.rightborderborder-right:1px solid #d9d9d9;border-bottom:1px solid

25、 #d9d9d9;第13章网站综合设计与制作实例.footerbackground:url(images/footer-bg.gif) top left repeat-x;.footer-linksfont-size:12px;text-align:center;width:900px;color:#fedbc2;margin:auto;padding-bottom:22px;.footer-links ullist-style:none;padding:22px 0px 0px 278px;.footer-links lifloat:left;margin-bottom:5px;margin

26、-right:9px;color:#fedbc2;margin-bottom:15px;font-size:13px;.footer-links li atext-decoration:none;color:#fedbc2;/*class_blog*/.class_blog h1color:#007b3b;padding-bottom:10px;font-size:20px;.class_blog div.second_headingcolor:#0a356d;font-weight:bold;padding-bottom:10px;.class_blog ppadding-bottom:20

27、px;color:#9b9875;line-height:18px;.one-photoheight:90px;.one-photo imgpadding-right:25px;padding-bottom:5px;.photo-texttext-align:left;padding-left:25px;padding-bottom:10px;第13章网站综合设计与制作实例 制作网站首页1 1创建本地站点创建本地站点站点是存放和管理网页文档的场所，创建好站点后即可根据站点规划创建站点的站点是存放和管理网页文档的场所，创建好站点后即可根据站点规划创建站点的主要文件夹及文件。主要文件夹及文件。下面

28、为班级网站创建一个名为下面为班级网站创建一个名为classwebsiteclasswebsite的站点，操作步骤如下。的站点，操作步骤如下。 启动启动Dreamweaver CS6Dreamweaver CS6后，在菜单栏中选择后，在菜单栏中选择“站点站点”“”“新建站点新建站点”命令，如图命令，如图13-413-4所示。所示。 打开打开“站点设置对象站点设置对象”对话框，设置站点名称为对话框，设置站点名称为“classwebsite”“classwebsite”，选择站点，选择站点文件夹为文件夹为“E:“E:网页设计教材网页设计教材13classwebsite”13classwebsite”

29、，如图，如图13-513-5所示，单击所示，单击“保存保存”按钮，在右下角出现按钮，在右下角出现“文件文件”面板。面板。13.2 网页设计与制作第13章网站综合设计与制作实例3.2.2 制作网站首页1 1创建本地站点创建本地站点第13章网站综合设计与制作实例 制作网站首页2 2创建全局创建全局CSSCSS右击右击“文件文件”面板中的面板中的csscss文件夹，在弹出的菜单中选择文件夹，在弹出的菜单中选择“新建文件新建文件”命令，创命令，创建建style.cssstyle.css文件，需将文件扩展名由默认的文件，需将文件扩展名由默认的.html.html改为改为.css.css。切换到。切换到“

30、代码代码”视视图，输入图，输入13.2.213.2.2节中的全局节中的全局CSSCSS代码，该部分代码为网站公共文件之一的外部样代码，该部分代码为网站公共文件之一的外部样式表文件，定义了网页各布局板块的位置、大小及其他属性。如果觉得输入代码式表文件，定义了网页各布局板块的位置、大小及其他属性。如果觉得输入代码麻烦，也可利用麻烦，也可利用Dreamweaver CS6Dreamweaver CS6的的“CSS“CSS样式样式”面板分别创建下面的每条面板分别创建下面的每条CSSCSS样样式，属性取值可参考下列代码的属性值部分。由于全局式，属性取值可参考下列代码的属性值部分。由于全局CSSCSS包含

31、的样式表过多，包含的样式表过多，输入代码可能比操作输入代码可能比操作“CSS“CSS样式样式”面板更为方便面板更为方便。13.2 网页设计与制作第13章网站综合设计与制作实例基本的CSS代码如下：#containerwidth:850px;height:430px;margin:0 auto;border:1px solid #000;#headerwidth:100%;height:70px;#bannerwidth:100%;height:110px;#contentwidth:100%;height:200px;#bottomwidth:100%;height:50px;#logohei

32、ght:70px;width:300px;background:#ccffee;float:left;#menuheight:70px;width:550px;background:#d3F8BC;float:right;v 创建名为index.html的网站首页，在“代码”视图中输入下列代码 head banner content bottom 13.2.2 制作网站首页2 2创建全局创建全局CSSCSS第13章网站综合设计与制作实例13.2.2 制作网站首页2 2创建全局创建全局CSSCSS第13章网站综合设计与制作实例 制作网站首页3 3制作首页的头部区域制作首页的头部区域 从网站首页效

33、果图可以看出头部区域分为两部分内容，左边为班级网站的从网站首页效果图可以看出头部区域分为两部分内容，左边为班级网站的LogoLogo和和名称，右边为网站的主导航栏。可以使用嵌套在名称，右边为网站的主导航栏。可以使用嵌套在headerheader层中的两个层中的两个DivDiv层分别控制层分别控制LogoLogo和导航栏区域，代码如下：和导航栏区域，代码如下： divheadid=headerhead divlogoid=logologo divnavid=menunav /div 13.2 网页设计与制作第13章网站综合设计与制作实例 制作网站首页3 3制作首页的头部区域制作首页的头部区域 对

34、这两个层进行对这两个层进行CSSCSS样式设置，代码如下：样式设置，代码如下：#logoheight:70px;width:300px;background:#ccffee;float:left;#logoheight:70px;width:300px;background:#ccffee;float:left;#menuheight:70px;width:550px;background:#d3F8BC;float:right;#menuheight:70px;width:550px;background:#d3F8BC;float:right;效果如图效果如图13-813-8所示，此处添加

35、背景色是为了看得更清晰，最终效果要将背景色去掉。所示，此处添加背景色是为了看得更清晰，最终效果要将背景色去掉。继续细化头部区域，将继续细化头部区域，将LogoLogo图像加入图像加入LogoLogo层中，代码如下：层中，代码如下：接下来制作导航部分。导航区域使用了标准的横向导航栏，采用通用的列表方式实现。在接下来制作导航部分。导航区域使用了标准的横向导航栏，采用通用的列表方式实现。在menumenu层中添加列表，即可插入导航栏。但此时预览的话，列表项目为竖向排列，且列表项目前面有实层中添加列表，即可插入导航栏。但此时预览的话，列表项目为竖向排列，且列表项目前面有实心圆点项目符号，看不到横向效果

36、，如图心圆点项目符号，看不到横向效果，如图13-913-9所示。所示。这时需要在这时需要在CSSCSS中加入如下代码：中加入如下代码：#menu ullist-style:none;margin:0px;#menu ullist-style:none;margin:0px;#menu ul lifloat:left;#menu ul lifloat:left;13.2 网页设计与制作第13章网站综合设计与制作实例13.2 网页设计与制作13.2.2 制作网站首页3 3制作首页的头部区域制作首页的头部区域第13章网站综合设计与制作实例13.2 网页设计与制作13.2.2 制作网站首页3 3制作首

37、页的头部区域制作首页的头部区域#menu#menu ullist-style:none;margin:0px;ullist-style:none;margin:0px;#menu#menu ulul lifloat:left;lifloat:left;这两行代码的作用分别是取消列表项目符号和删除这两行代码的作用分别是取消列表项目符号和删除ulul的缩进。的缩进。“float:left”“float:left”表表示使用示使用floatfloat属性让列表项目都在同一行显示，预览效果如图属性让列表项目都在同一行显示，预览效果如图13-1013-10所示。可以看所示。可以看到此时导航栏文字带有下划

38、线，且文字排列密集，后面会对超链接进行到此时导航栏文字带有下划线，且文字排列密集，后面会对超链接进行CSSCSS样式设样式设置，以去掉下划线，美化导航栏。置，以去掉下划线，美化导航栏。第13章网站综合设计与制作实例 制作网站首页3 3制作首页的头部区域制作首页的头部区域 在在#menu ul li #menu ul li 中再加入代码中再加入代码“padding: 0 20px;”“padding: 0 20px;”，其作用是让列表项目之，其作用是让列表项目之间产生一个间产生一个2020像素的距离，这样列表项目之间就有间距了；同时在像素的距离，这样列表项目之间就有间距了；同时在#menu ul

39、 #menu ul 中中加入代码加入代码“padding-top:22px;”“padding-top:22px;”，使其上边距为，使其上边距为2222像素。此时预览网页，导航栏像素。此时预览网页，导航栏文字设计与效果图还有一些差异，还需要设计导航间隔线、链接文字颜色、导航文字设计与效果图还有一些差异，还需要设计导航间隔线、链接文字颜色、导航栏字体效果，文字垂直居中显示等栏字体效果，文字垂直居中显示等。13.2 网页设计与制作第13章网站综合设计与制作实例 制作网站首页3 3制作首页的头部区域制作首页的头部区域 在在CSSCSS文件中与导航栏相关的代码如下：文件中与导航栏相关的代码如下：#me

40、nu#menu ullist-ullist-style:none;margin:0px;padding:0style:none;margin:0px;padding:0 20px;color:#272727;20px;color:#272727; background:background: url(imagesli-seperator.gif)url(imagesli-seperator.gif) toptop rightright no-repeat;font-weight:bold;line-no-repeat;font-weight:bold;line-height:20px;heig

41、ht:20px;#menu#menu ulul lifloat:left;padding:10px;margin-top:20px;lifloat:left;padding:10px;margin-top:20px;#menu#menu a:linktext-decoration:none;color:#272727;a:linktext-decoration:none;color:#272727; font-weight:bold;font-weight:bold;#menu#menu a:hovercolor:#517208;a:hovercolor:#517208;#menu#menu

42、a:activecolor:#517208;a:activecolor:#517208;这部分代码对列表项目的文字和超链接进行了样式设置，预览效果如图这部分代码对列表项目的文字和超链接进行了样式设置，预览效果如图13-1113-11所示。所示。13.2 网页设计与制作第13章网站综合设计与制作实例 制作网站首页4 4BannerBanner的制作的制作该网站的该网站的BannerBanner栏使用了一张制作好的背景图像，在主体结构中使用了一个栏使用了一张制作好的背景图像，在主体结构中使用了一个DivDiv层层进行控制，先处理好图像大小，要求其与进行控制，先处理好图像大小，要求其与DivDiv层

43、的高度和宽度匹配。其层的高度和宽度匹配。其CSSCSS样式代码样式代码如下：如下：#bannerbackground:url(images/header-bg.gif)#bannerbackground:url(images/header-bg.gif) bottombottom leftleft no-repeat;no-repeat;height:150px;height:150px;BannerBanner栏预览效果如图栏预览效果如图13-1213-12所示。所示。13.2 网页设计与制作第13章网站综合设计与制作实例 制作网站首页5 5制作首页的中间内容区域制作首页的中间内容区域首页中

44、间内容区域的布局是将中间主体内容分为左、右两个部分。其中左侧首页中间内容区域的布局是将中间主体内容分为左、右两个部分。其中左侧栏为主要区域，又分为上下区域，上部区域为班级欢迎内容，下部区域又分栏为主要区域，又分为上下区域，上部区域为班级欢迎内容，下部区域又分为了宽度相等的左右两个板块，分别为班级活动和班级新闻。右侧栏作为侧为了宽度相等的左右两个板块，分别为班级活动和班级新闻。右侧栏作为侧边栏分为上下两部分，上部分为动态滚动的班级公告栏，下部分为班级课程边栏分为上下两部分，上部分为动态滚动的班级公告栏，下部分为班级课程表。总体中间部分布局的划分要使用嵌套表。总体中间部分布局的划分要使用嵌套Div

45、Div的形式的形式。13.2 网页设计与制作第13章网站综合设计与制作实例 制作网站首页5 5制作首页的中间内容区域制作首页的中间内容区域代码如下：代码如下：divid=content中间内容区域中间内容区域 divid=left divid=con_welcome欢迎区欢迎区 divid=con_bott divid=activity班级活动班级活动 divid=classnews班级新闻班级新闻 divid=right divid=blackboard班级公告班级公告 divid=schedule课程表课程表 13.2 网页设计与制作CSSCSS样式的代码如下：样式的代码如下：#conte

46、ntwidth:100%;height:470px;margin-#contentwidth:100%;height:470px;margin-bottom:5px;background:#9ff;bottom:5px;background:#9ff;#leftwidth:600px;height:470px;float:left;backg#leftwidth:600px;height:470px;float:left;background:#ffbb00;round:#ffbb00;#con_welcomewidth:600px;height:200px;backgroun#con_wel

47、comewidth:600px;height:200px;background:#666699;margin-top:5px;d:#666699;margin-top:5px;#con_bottwidth:600px;height:260px;background:#con_bottwidth:600px;height:260px;background:#660099;margin-top:5px;660099;margin-top:5px;#activitywidth:290px;height:250px;background:#activitywidth:290px;height:250p

48、x;background:#acf47B;float:left;margin:5pxacf47B;float:left;margin:5px 5px;5px;#classnewswidth:290px;height:250px;background:#classnewswidth:290px;height:250px;background:#EACE87;float:left;margin:5px#EACE87;float:left;margin:5px 5px;5px;#rightwidth:300px;height:470px;float:right;bac#rightwidth:300p

49、x;height:470px;float:right;background:#ff0000;#blackboardwidth:300px;heighkground:#ff0000;#blackboardwidth:300px;height:300px;background:#E7B5EE;margin-top:5px;t:300px;background:#E7B5EE;margin-top:5px;#schedulewidth:300px;height:160px;background:#schedulewidth:300px;height:160px;background:#DBCEFF;

50、margin-top:5px;DBCEFF;margin-top:5px;第13章网站综合设计与制作实例 制作网站首页5 5制作首页的中间内容区域制作首页的中间内容区域为了显示效果，为每一区域添为了显示效果，为每一区域添加了加了backgroundbackground属性，设置不属性，设置不同的背景色，并设置同的背景色，并设置DivDiv层的高层的高度和宽度，后期制作时应去掉度和宽度，后期制作时应去掉背景色，宽度和高度可根据需背景色，宽度和高度可根据需要灵活进行调整，布局效果如要灵活进行调整，布局效果如图图13-1313-13所示。所示。13.2 网页设计与制作第13章网站综合设计与制作实例