实训报告-网页制作与网站建设项目实战

第一篇：实训报告-网页制作与网站建设项目实战

《网页制作与网站建设项目实战》

实训报告册

系部： 专业： 指导老师： 班级：

同组人员： 实训时间 学号: 姓名： 实训成绩： 批阅时间：

江苏财经职业技术学院

目录

一、实训目的....................................................................................3

二、实训任务....................................................................................4

三、实训要求....................................................................................5

四、实训设计说明............................................................................6

五、实训中遇到的问题和解决方法..............................................17

六、心得体会..................................................................................18

一、实训目的

1．进一步熟悉和掌握网站建设的基本流程和技术规范； 2．巩固网页设计中各种HTML标记的使用。

3．巩固运用Dreamweaver软件创建网站，边界和创建网页，Fireworks，photoshop图像处理软件进行网页中图形制作和运用flash动画，背景音乐文件，视频文件丰富网页内容的知识；

4．巩固运用网页模板，使用恰当布局技术实现网页的合理布局和内容的编排；

5．巩固运用网页特效，网页行为给网页添加简单交互功能； 6．巩固运用CSS样式表实现网页，网站整体风格，样式的设置。8.熟悉使用Dreamweaver和CMS系统开发简单动态网页的能力。9．具备独立撰写实训报告等科技文件的基本能力；

10．在网页设计的实践中培养分析问题、解决问题的能力，培养协作、交流的能力，培养创新能力和团队意识；

11．为今后从事网站开发、维护和管理奠定基础。

二、实训任务

1．站点规划，搜集资料。确定网站主题内容，规划站点结构，从网上搜索相关资料（图片、文字等）。

2．进行主页设计。构思主页布局，进行主页标题图片的设计（力求原创，使用学过的绘图软件），进行主页其余图片的设计和页面内容的录入，最后进行主页的整体优化设计。

4．网页设计。除主页以外的网页设计，首先设计网页模版，一部分网页由模版生成，一部分为单独设计（依据实际需要确定哪些网页由模版生成，确定哪些网页单独设计）。包括版面设计和图形设计、内容录入等。

5．多媒体使用。在网页上使用网络上的多媒体素材，或者可以自己创作多媒体素材，实现网页的内容多样性，增加网站的美观和趣味性。

6．创建数据库，链接数据库，添加简单动态网页，实现部分数据的维护和更新。

综合优化。链接正确、得当，动态效果好（时间轴动画、行为、代码的嵌入等）

7．网站测试并递交。在浏览器中对完成的网站逐页打开测试，包括链接正确与否，页面打开时间，图片和动画是否丢失等。

8．说明：实训报告中第一、二、三、部分为复印，四部分为分组打印，第五、六部分手写。

三、实训要求

1．网站题材选择。

（1）班级网站（2）旅游景点网站（3）个人网站（4）网上书店（5）网上商店（6）课程学习网站（7）公司网站（8）学校网站

2．分组实现和各自网站风格对应的留言板，或者部分新闻发布管理功能。3．实训技术要求。

页面布局合理，色彩和谐，链接正确，图文并茂并茂。网站页面大小应该满足800*600分辨率的客户，兼顾1024*768分辨率。

主要图片和动画为原创（保存有源文件），主页标题图片（动画）必须为原创。必须且合理使用动态技术（包括行为、时间轴动画、嵌入代码等），必须且合理运用模版、库文件。

站点中网页总数不少于8页。

四、实训设计说明

1．网站主题说明（给出网站名称，为什么选择本主题网站，网站风格特色说明）

1、网站名称：旅游网站

2、选择本网站的的原因：选择旅游网站是因为我们身居江苏这个风景迷人的地方，在这里学习了接近2年的时间，对江苏淮安的文化有了更深的理解。尤其是淮安的景点，那有着古典气息的文化色彩，让我们对它有着很大的热爱。

3、网站风格特色：我们无的网站的主要特色是以古老的淮河文化为主业面板，运用透明flash实现古色古香的气息，让旅客看到这个页面有身临其境的感觉。2．网站总体设计（说明设计思路，给出网站总体结构图，参考实训指导书）3．网站主体风格设置，网站整体CSS样式表文件或网站模板，库，使用文字加效果图说明。4．网站主页设计（网页主页布局设计，画出主页主要内容布局图）

5．网站各个功能模块的功能及实现（每个功能部分功能说明，使用的主要技术，运行截图）．网站特色，关键模块介绍（请结合具体的文字介绍，还有功能展示截图进行说明。该部分可以为网站的创意，网站的架构，网站的整体版式，网站的风格，还可以是网站使用的典型的特效，突出的功能模块等）

五、实训中遇到的问题和解决方法

六、心得体会

第二篇：网页制作实训报告

《网站设计与制作》实训报告

X学院XX班XXX号

一．实训时间：

2010年6月7日到2010年6月13日

二．实训地点：

XXX学院XXX班级

三．实训组员：

XXX、XXX

四．实训目标：

运用网页设计方法，设计一个网站，提高综合应用所学知识的能力，积累Web网站的制作经验，培养团队协作精神。本次实训的具体目标为:了解网站制作的一般流程;熟练使用网页制作工具Dreamweaver、Flash、Fireworks设计网页;能灵活运用表格、层和框架布局页面;熟练使用CSS样式表美化网页;正确使用JavaScript添加网页特效;灵活使用模板和库来制作网页；学会申请免费域名空间和正确上传站点的方法。

五．实训策划：

这一周，我们要进行《网站设计与制作》实训，我们认为做网站前最主要的是确定主题、框架和标题栏的设计。因此我们相互讨论之后，确定制作以“婚纱”为主题的“喜多坊时尚婚纱网”。在之后的资料收集和网页的框架的建设中，我们发现了许多问题，某些关键点无法做出心中的效果，这让我们有些遗憾。通过自身及组员的共同探索，我们已尽权利将以下是我们的策划内容：

1.确定主题。制作网页,首先是确定主题，冬天很冷,却冷得很幸福，刚刚过去的圣诞的热闹劲还在心头。于是我们从幸福出发，想到了结婚-婚纱，建立一个简单的介绍婚纱的网站并取名喜多坊时尚时尚婚纱,专业介绍一些喜多坊婚纱的特色等。我们本次间的网站基本以粉红为基点，粉红是可爱清纯的颜色，粉红代表着幸福温馨，所以本站以粉红为风格，让整个网站充满爱的力量。

2.设计主页。主页的设计是整个网站的灵魂，构思导航栏的分类，然后是整体规划，每一版块都有其个性的色彩，清晰明了，便于阅读浏览，我们构思大致

分几部分，首页，关于我们，婚纱礼服，量体裁衣，婚纱选购，公司门市，与我联系，在线论坛8大板块，每一板块又分几小部分，内容比较充分，多样。确定导航栏的各个分类标题之后对于建立二级子网尤为重要，我们运用Photoshop CS3技术来设计出导航栏，制作切片，建立导航栏，将整体的主页效果建立起来。

3.资料的搜集。主页的导航栏设计好后，接下来就是对主页导航栏的各个内容进行资料的收集，我们采用大量的资料收集再对资料进行塞选p图，得到最适合导航栏内容的资料。素材的选择，要符合网站的主题，图片的大小要符合模板的轮廓，我们将不符合模板的用Photoshop处理编辑，然后放入站点底下，进行图文的链接和排版。

4.各个子网页的建立。我们设计好模板后只要在可编辑区依次编辑所需资料就可，运用模板建立子网页少了很多工序，为我们节省大量的时间。尽管我们建立了模板，但我们在建立子网时很小心，因为一张图片的大小插入就有可能破坏整个模板的结构尤其在使用表格时，因此我们对所插入的图片和表格都得进行测量，做到不影响网站整体的美观。

5.实现网页间的链接。做好个格子网和首页后，接下来就是通过模板的链接，将整个网站中的网页链接起来，过程其实很简单，主要是把要链接的文字和图标选择在选择工具栏的链接按钮最后选择自己要链接的网页单击确定便可以了。做好这一步后，网站基本算是建好了。

6.向静态网页插入动态效果。在基本建好网页中的插入层和时间轴，制作其动态效果，让整个网页充满生机。我们在网上进行flash素材的收集，通过Flash CS3设计出主题下的风格动态效果。然后插入到静态网页中，使网页更加生动形象。

六．实训心得：

通过这周的学习实践，在老师的指导下以大量明晰的操作步骤和典型的应用实例，使我们真正对所学的软件融会贯通。我们结合年轻人心理制作了时尚婚纱网站，作为实训的成果。其内容是多样化的，制作网页用的软件是Deamweaver CS3软件。它提供了网页和表单的动态生成到网站的解决方案。主图是一个网页的门面，它能体现出这个网页的整体风格。

制作网页,首先是确定主题,经过再三考虑,就做了个关于婚纱的网站。考虑到,现在城市普遍幸福感不高，加上寒冬，于是以幸福为论点扩展想到了结婚，想到了婚纱，想到了未来的美好城市生活，城市让生活更美好，结婚让生活更完整婚纱让生活更多姿！想到这些，我们最后决定建立一个简单的介绍都市婚纱的网站,让这个冬天不再寒冷，让我们回忆起那些幸福的日子。于是网站主题确立。

然后是整体规划，每一版块都有其个性的色彩，清晰明了，便于阅读浏览，大致分几部分，首页，关于我们，婚纱礼服，量体裁衣，婚纱选购，公司门市，与我联系，在线论坛，每一部分又分几小部分，内容比较充分，多样。

再后是收集资料与素材，大量浏览相关网站，收集关于婚纱的图片，进行Photoshop CS3图片处理和排版，插入好的文章和图片等，还有参考一些好的网站的布局，特色，颜色搭配，背景图等。

再后是设计网页图片，用flash制作动画，用Photoshop制作静态图片。再后是建立站点，和制作网页了，使用dreamweaver制作。

首页内容精彩丰富，首页主要是导航作用。首页制作时，时刻考虑着网页的基本原则：统一，连贯，分割，对比及和谐的原则，内容统一，都是为了主题服务，一个网站强调的就是一个整体，只有围绕一个统一的目标所做的设计才是成功的；连贯，页面之间关系连贯，统成一体；每版内容都自成一体，颜色各异，便于浏览；整个网页有动有静，颜色不同，形成对比，不呆板，富有生气；颜色各异，但又不同之中又相同，浑然一体。

简洁实用: 这是非常重要的，网络特殊环境下，尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，所以要去掉所有的冗余的东西。使用方便:同第一个是相一致的，满足使用者的要求，网页做得越适合使用，就越显示出其功能美；页面用色协调，布局符合形式美的要求: 布局有条理，充分利用美的形式，是网页富有可欣赏性，提高档次。当然雅俗共赏是人人都追求的。

利用我们所学的模板设计，制作更完美的页面。将动态网页与静态网页结合起来

再后，调试过程，好多次本来在Deamweaver CS3里好好的，把字调的好好的，位置很对，可在浏览器里御览就出毛病了，不是靠上了，就是靠下了，经过再三调试，整理，加了好多表格，终于满意了。

通过温本周的实训，发现自己还有很多的不足。框架的应用很难把握，切片也很难合理切割，当插入图片的时候把原有的模板给撑破了，精确定位很重要。

因为学艺不精，所以不会网页的代码设计，只能通过网络三剑客综合使用。不过也实践中也学到了很多知识，表格的嵌套是非常重要的，CSS样式的应用也很便捷。还有一些行为中的效果也是蛮不错的。所以这次实训还是很有意义的。

第三篇：网页设计与制作实训报告[范文]

《网页设计与制作》

实习报告

指导老师：

实习地点：

实习时间：

实习班级：

学生姓名：

一、实习目的① 学会制作新闻发布系统。

② 学会制作在线调查系统。

③ 熟悉购物网站的主要功能和栏目。

④ 学会购物网站数据库表的创建和数据库连接的创建。

⑤ 学会购物系统前台页面制作和后台管理制作。

二、实训内容

1.创建数据库表

① 启动Microsoft Access，执行“文件”——“新建”命令，打开“新建文件”面板，在面板中单击“空数据库”。

② 弹出“文件新建数据库”对话框，在对话框中选择数据库保存的路径，“文件名”文本框中输入shop。

③ 单击“创建”按钮，在对话框中双击“使用设计器创建表”选项。

④ 弹出“表1：表”对话框，在对话框中输入“字段名称”和字段所对应的“数据类型”，将shopID字段设置为主键。

⑤ 执行“文件”——“保存”命令，弹出“另存为”对话框，在对话框的“表名称”文本框中输入products。

⑥ 单击“确定”按钮，保存表。按以上步骤的方法，创建表fen和admin。

2.创建数据库连接

新建一个网页文件夹，打开IIS信息服务，创建IIS虚拟目录，在文件夹安全性把来宾用户的权限修改为完全控制，并导入数据库。

3.制作购物网系统页面

① 用index.html创建zhanshi.asp商品分类展示页，新建站点，导入shop.mdb数据库文件建立数据库连接。插入表格并插入图片、文字，创建记录集并在表格相应位置绑定数据。在服务器行为里为表格设置重复区域，创建记录集RS2并在左边的商品分类表格里绑定

数据，在服务器行为里为左侧的表格添加重复区域和转到详细页，制作记录集导航条。

② 用index.html创建xiangxi.asp商品详细信息页，首先创建记录集并制作左侧的商品分类表格，之后在中间区域插入表格，在表格中插入图片、文字，创建记录集RS2并将数据绑定在表格相应位置。

③ 用index.html创建denglu.asp商品详细信息页,创建记录集并制作左侧的商品分类表格，在中间区域插入表单，在表单里插入表格，在表格里插入文字、文本域、表单按钮，并为表单设置检查表单。创建记录集RS2并在服务器行为里添加登录用户。

④ 用index.html创建fenlei.asp添加商品分类页，插入表单，在表单里插入文字、文本域、表单按钮，创建记录集并在服务器行为里添加插入记录和限制对页的访问。再用index.html创建fenleiok.asp,在其中插入表格输入文字，并设置返回链接。

⑤ 用index.html创建tianjia.asp添加商品页，创建记录集，用插入记录表单向导创建插入记录表单，在服务器行为里添加限制对页的访问。再用index.html创建tianjiaok.asp,在其中插入表格输入文字，并设置返回链接。

⑥ 用index.html创建guanli.asp商品管理页，创建记录集并制作左侧的商品分类表格，在中间区域插入表格并插入文字，创建记录集RS2并在表格相应位置绑定数据，为该表格设置服务器行为的重复区域，制作修改和删除链接，制作记录集导航条。

⑦ 用tianjia.asp创建xiugai.asp修改页面，创建记录集在对应的文本域中绑定数据，把服务器行为里的插入记录删除并添加更新记录。在服务器行为里添加限制对页的访问。再用index.html创建xiugaiok.asp,在其中插入表格输入文字，并设置返回链接。

⑧ 用index.html创建shanchu.asp删除页面,插入表格并插入文字，建立记录集，在表格相应位置绑定数据，插入表单和表单按钮，创建服务器行为限制对页的访问和删除记录。再用index.html创建shanchuok.asp,在其中插入表格输入文字，并设置返回链接。

三、疑难解惑

① 网页不能正常打开，电脑用户权限没有修改，在文件夹安全性把来宾用户的权限修改为完全控制。

② 创建重复区域时，总显示相同的内容，仔细阅读教材，发现创建重复区域时要选中表格，而不是文字内容。

③ 登陆页面不能登陆，把表格放入表单后，重新登录，问题解决。

④ 创建添加商品页面时，无法显示商品分类。在插入记录表单时，应将feileiID“显

示为”下拉列表中选择“菜单”，并在“菜单属性”里的“域”列表中选择fenlei。

⑤ 修改页面点进去初始内容都一样，“唯一键列”下拉列表中应选择shpID。

⑥ 商品分类点进去每个种类都一样，查找原因，发现记录集中筛选是shpID，把记录集中的筛选改为fenleiID解决。

四、实训心得

经过一周动态网页的实训，使我们对本学期的这门课进行了整体的汇总。在这汇总期间，也算是对自己本学期的一个考核，此次实训暴露出了许多我自身存在的问题，同时也对自身有了很大的提高。

在这次实训中，我也有许多收获。首先，我体会到了作为一个计算机专业的人，不会用DW的痛苦和尴尬。在制作的过程中遇到问题，可以说得是困难重重，这毕竟是第一次独自制作动态网页，难免会遇到过各种各样的问题，同时在制作的过程中发现了自己的不足之处，对以前所学过的知识理解得不够深刻，掌握得不够牢固。在此过程当中弥补了我许多知识上的缺陷，弄清的以前没有搞懂的知识点。经过多番的努力和辛酸，我成功地完成了这次过程艰辛的实训，而且我从中体会到了一种叫做‘成功的喜悦’的感觉，那种小有成就的兴奋是只有置身其中的人才能体会的。

在实训过程中，我更体会到了基础知识的重要性，也许我们正在迷惘，我们是否学到了东西，但事实说明零零散散的知识，在项目开发当中起到了非常关键的作用，我们不缺少时间和工具，我们只是缺少经验和动手能力，如果我们以后能更好的在各方面增长自己的经验，相信我们能在长长的就业队伍中脱颖而出的！相信自己，相信未来。今后我将会更加努力的学习，不断提高自身素质，为我将来的就业打下良好的基础

第四篇：网页设计与制作实训报告

《Dreamweaver网页设计与制作案例教程》

实训报告

专 业： 计算机网络技术 年 级： 2013级 姓 名： 学 号： 辅导老师：

制作电子商务类网站首页

一、网站建设的前期准备工作

1、网站整体需求分析

网站整体需求主要包括以下几个方面： 1)网站建设背景及目标 2)网站建设现状分析 3)网站建设目标分解

4)网站建设资金及人员投入情况分析

2、确定网站风格

根据电子商务网站的特点，确定网站的整体风格，即网站的色彩和版式。网站风格是在网站整体需求分析的基础上，通过明确网站设计的目的和用户需求、访问者的特点等得出的结论。本实例是针对一个工业产品交易平台的网站，网站与用户交互性强，因此确定其主色调为暖色系的橘黄色给人以轻松愉快的浏览环境。如图是电子商务网站的LOGO。

3、网站素材搜集

明确网站主题和划分板块后，接着要为后续的网站建设搜集素材。若想让网站有声有色，能够吸引客户注意，就要尽量搜集文字、图片、音频、视频、动画等多媒体素材。对于一些通用素材，可以从网上搜集得到，也可以根据需求自行制作素材，比如，通过Photoshop图像处理软件对图像进行优化处理，使用Flash制作动画等。如图所示。

二、创建站点

1、网站建设的第一步是创建本地站点。

2、创建的站点信息将显示在“文件”面板中。如果需要对站点参数进行修改，可以单击“站点→管理站点”对站点进行重新设置。

三、网站主页制作

1.使用Div+CSS布局页面

使用Div+CSS实现页面布局，具体操作如下：

4）为AP Div元素设置CSS样式。由于网站首页和子页面采取相同的布局风格，因此样式表采用外部链接样式表。

5）选中创建的AP元素“container”，在右侧的“CSS样式”面板中单击鼠标右键，选择“新建”命令，打开“新建CSS规则”对话框，并作相应设置，如图所示。

6）单击确定按钮，弹出“#container的CSS规则定义”对话框，选择分类列表框下的“背景”选项卡，设置文档的“背景颜色”为#FFF；在分类列表框中，切换到“区块”选项卡，设置“文本对齐”属性为左对齐；在分类列表框中，切换到“方框”选项卡，设置Ap Div的“宽”为960 px，“上边界”为1 px，“下边界”为0 px；“边框”和“列表”选项卡的属性保持默认设置；切换到“定位”选项卡，单击确定按钮，完成对“#container”元素样式的定义。设置后的“CSS样式”面板如图所示。

/* ==整体布局定义开始== */ #Container { width:960px;/*定义页面宽度*/ visibility:visible;/*设置可见度*/ margin:1px auto 0;/*设置外边距*/ background-color: #FFF;/*定义背景颜色*/ } 2.设置页面属性

在style.css样式表文件内部设置网页的页面属性。页面属性是对标签属性的设置。代码如下所示： body{ font-size:12px;/*定义字号*/ color:#666;/*定义字体颜色*/ background:#FFF;/*定义背景颜色*/ text-align:center;/*定义文本位置*/ margin:0;/*定义外边距*/ padding:0;/*定义外边距*/ border:0;/*定义边框粗细*/ background: transparent;/*定义背景透明*/ } 也可以打开index.html，选择“修改→页面属性”菜单命令，在打开的“页面属性”对话框中进行相应设置。

3.插入图片

在顶部的“top”元素中插入一幅图像。如图所示。

4.添加导航条

网页导航条是非常重要的网页元素，网页间的跳转，需要通过导航条来完成。

1）将光标定位在“nav” Div元素中，在其内部输入列表项，并为列表项的各个单元设置超链接。设置情况如图所示。

2）添加CSS样式，需要在style.css文件中输入相关代码。#nav { height:30px;/*定义高度*/ width:100%;/*定义宽度*/ background-color:#c00;/*定义背景颜色*/ overflow: hidden;/*定义溢出效果*/ } #nav ul { font-size:12px;/*定义字号*/ color:#FFF;/*定义字体颜色*/ line-height:30px;/*定义字体行高*/ white-space:nowrap;/*定义区块空格*/ margin:0 0 0 30px;/*定义外边距*/ padding:0;/*定义内边距*/ } #nav li { list-style-type:none;/*定义列表类型*/ display:inline;/*定义区块显示效果*/ } #nav li a { text-decoration:none;/*定义字体修饰*/ font-family:Arial, Helvetica, sans-serif;/*定义字体*/ color:#FFF;/*定义字体颜色*/ padding:7px 10px;/*定义内边距*/ } #nav li a:hover { color:#ff0;/*定义字体颜色*/ background-color:red;/*定义背景颜色*/ 该样式表使用列表项实现导航菜单功能。效果如图所示。

5.推荐厂家

1）把光标置于DIV元素“left”中，创建新的DIV元素 sideBarLefta1，并定义相关样式

2）在DIV元素“sideBarLefta1”的内部插入推荐厂家标志及说明文字等信息，定义相关样式如图所示。

3）在style.css样式表中插入下面的代码，#left { float:left;/*定义浮动位置 */ width:640px;/*定义宽度 */ height:832px;/*定义高度 */ }.sideBarLeftb1 { width:238px;/*定义宽度 */ height:240px;/*定义高度*/ border:#ebcbb4 solid 1px;/*定义边框的颜色、粗细、样式*/ } 6.网页广告设计制作

1）将光标置于div元素“#left”中，插入一个嵌套的div元素#sideBarLefta2，2）将光标置于DIV元素“banner”中，插入一个已经准备好的SWF元素。

3）选中“banner”下面DIV元素，并定义类为“hot”，在4个小DIV元素中分别插入准备好的广告图，效果如图所示

style.css样式表中插入的代码如下： #sideBarLefta2 {

float:left;/*定义浮动位置 */ width:390px;/*定义宽度 */ height:268px;/*定义高度*/ overflow: hidden;/*定义溢出效果*/ } #banner { margin-top:5px;/*定义顶端外边距*/ border:#999 solid 1px;/*定义边框的颜色、粗细、样式*/ width:390px;/*定义宽度 */ }.hot{ display:inline;/*定义区块显示效果*/ border:#999 1px solid;/*定义边框的颜色、粗细、样式*/ width:91px;/*定义宽度 */ height:70px;/*定义高度*/ float:left;/*定义浮动位置 */ margin:2px;/*定义外边距*/ } 7.页面右侧栏目设计

1）将光标置于DIV元素“right”中，插入已经准备好的图片service.jpg。如图所示。

2）在service.jpg下面插入两个div，分别定义为.sideBarRightb3和.sideBarRightb4，在新建的div中插入准备好的广告图像ad1.jpg和ad2.jpg并在属性面板中定义超链接，效果如图所示。

在style.css中添加的代码如下： #right { float:left;/*定义浮动位置 */ width:320px;/*定义宽度 */ height:832px;/*定义高度 */ }.sideBarRightb3 { height:60px;/*定义高度*/ margin-top:5px;/*定义顶端外边距*/ border:#ebcbb4 1px solid;/*定义边框的颜色、粗细、样式*/ }.sideBarRightb4 { height:93px;/*定义高度*/ margin-top:5px;/*定义顶端外边距*/

border:#ebcbb4 1px solid;/*定义边框的颜色、粗细、样式*/ margin-bottom:5px;/*定义底端外边距*/ }.sideBarRightb3,.sideBarRightb4 img { text-align:center;/*定义文本位置 */ padding:5px;/*定义内边距*/ } 8.行业栏目设计

1）将光标置于DIV元素“left”中，在其下侧插入一个嵌套的DIV元素“sideBarLeftb2”。

2）选中Div元素“sideBarLeftb2”，将光标定位在其内部，创建多个新Div，为了方便日后的维护我们将新建Div单独定义为.sideBarLeftb3。

3）选中DIV元素“sideBarLeftb3”，在style.css中添加的代码如下：

sideBarLeftb3 { text-align:left;/*定义文本位置 */ float:left;/*定义浮动位置 */ height:150px;/*定义高度*/ width:280px;/*定义宽度 */ padding:4px;/*定义内边距*/ } 4）将光标移到sideBarLeftb3的DIV元素中，插入两行列表并对列表设置相关CSS参数。在style.css中添加的代码如下：.sideBarLeftb3 ul { font-size:12px;/*定义字号*/ line-height:6px;/*定义字体行高*/ float:left;/*定义浮动位置 */ width:270px;/*定义宽度 */ margin:0 0 0 5px;/*定义外边距*/ padding:0;/*定义内边距*/ } 5）在列表中添加列表内容，代码如下：