网页设计与制作实训报告
网页设计与制作报告
网页设计与制作报告网页设计与制作报告(合集8篇)随着个人的文明素养不断提升，我们都不可避免地要接触到报告，报告中提到的所有信息应该是准确无误的。
为了让您不再为写报告头疼，以下是小编精心整理的网页设计与制作报告，仅供参考，欢迎大家阅读。
网页设计与制作报告1一、实习目的（一）检验自己是不是真的适合这个职业鉴于自己对未来的职业生涯的规划更倾向于设计，这和自己所学的专业不是十分有联系，所以我希望在实习的过程里思考自己未来是否适合从事这方面的工作，为以后求职之路少走弯路做一定的尝试。
（二）在实践中查漏补缺在学校学习的网站建设知识仅仅停留在平时的作业里，并没有得到充分的运用。
希望可以藉由这次实习，好好巩固书面知识。
在实际运用中通过发现问题，解决问题对知识进行查漏补缺。
（三）在工作中打磨自己由于学校和社会是截然不同的生活、学习、工作氛围，在工作中我们不可以像在学校一样随心所欲，待人接物方面需要更有礼貌的沟通和恰当好处的圆滑。
希望在实习里，和同事上司的相处中获得这方面的成长。
二、实习内容（一）实习主要内容广州xxxx有限公司是一个研发和销售智能寄存柜的公司。
它的产品在展示和销售这两个环节很需宣传册、企业网站等作为一个推广媒介。
我实习的主要内容就是配合网络部去完成网站建设的工作，涉及前台的外观设计和后台的代码编写，以及宣传册的设计。
1、负责设计公司整个企业网站的页面部分，根据网页设计师或客户所提供的主题要求和思路框架来设计出整个网站。
1）使用Photoshop、AI等图片处理软件设计、处理和制作网站上需要的图片2）使用DIV+CSS样式及基础的HTML语言做页面布局的排版3）使用Photoshop对网页进行配色及排版设计4）编写CSS代码使网站页面无论是在IE浏览器里还是在FF浏览器上正常显示2、负责网站的几个主体模块的文案撰写和后台编辑1）在已有的文案上配合网站架构进行提炼和归纳整理2）使用Photoshop对文案进行概念配图3）在后台将文案部分合理配色排版4）按照网站架构在后台录入所有产品资料（二）工作过程在公司的2个多月里，我的工作都是由负责整个网站文案架构的曹经理分配监督的。
网页设计实践报告3篇
网页设计实践报告3篇网页设计实践报告1一实验目的1.学习html语言和dreamweaver，frontpage等工具2.掌握在本地环境下运用asp技术实现一个简单的电子商务二实验的方法和原理三实验过程1.资料的搜集。
组长分配任务，大家从上搜集各种关于手机的资料。
2.熟悉制作软件。
做网页主要用的工具便是dremweaver、photoshop、flash软件。
在这些软件我对dremweaver、photoshop相对比较熟悉，因为在平时上课是老师带领我们运用过。
所以我还可以正常的运用，但是出现的问题还是有很多。
有很多不懂如何操作，只有通过在次去看书才能够了解，这也体现了我学习方面的缺点，它是我平时不够认真的具体表现。
3.构建站点框架。
打开dremweaver后第一步便是新建站点4设计主页及二级页面。
5实现网页间的链接链接的过程其实很简单，主要是把要链接的文字选择在选择工具栏的链接按钮最后选择自己要链接的网页单击确定便可以了。
6向静太网页插入动态效果四实验心得在经济迅速发展的今天，internet显得更为重要它是人们发布信息与传递信息的重要渠道，为了与社会发展同步，为了让我们成为真正的技术性人才。
学校在本周为我们安排了维持三周的网页制作专用周是实习，让我们把平时所学知识运用到实践中做到真正的学以致用而不只是纸上谈兵。
通过本周的实习使我获得了更多的新知识同时也使我使我认识到了自己在学习上的许多不足。
近三个星期的实训将要结束，其中的酸甜苦辣我会在今后的日子里不断地去咀嚼，去回味，去探索。
从制作网页过程中，我学到了新的美化网页的方法，运用了更多以前未运用的技巧。
这使我学到了更多的知识，并且为我自己在制作网页这方面积累了一些经验。
这些将是我人生中的一次重要的经历，将是我今后走上社会后的一笔巨大的财富。
这次实习的收获对我来说有不少，我自己感觉在知识、技能等方面都有了不少的收获。
总体来说这次是对我的综合素质的培养，锻炼和提高。
网页设计实训报告心得_网页设计与制作实训心得体会(汇编3篇)
网页设计实训报告心得_网页设计与制作实训心得体会（精选3篇）网页设计实训报告心得_网页设计与制作实训心得体会（精选3篇）网页设计实训报告心得_网页设计与制作实训心得体会篇1毕业后，我来到了社会这个汇合众多江河湖水的大海，感受到了独立生活的好处与艰辛，同时我自己也更深的理解了，家长和学校老师对我们的殷切盼望，在社会实习的这段日子，我吃了些苦，受了些罪，可是整个人在肉体上和精神上却升华了许多，也比以前的变得更有自信了。
现将我的实习状况汇报如下：一、实习工作介绍我所在的这家公司，是一家做网上招商的商业网站，公司接收各种厂家供应的信息，然后由网络的技术人员，将商家的信息做成网页广告，然后挂在我们的网站上，以此达到商业推广的目的，类似我们公司的网站在同行业还有u88、28招商网等。
我和其它几位同事做为网络部的技术人员，主要的工作就是接收美工人员的网站模板，将其通过photoshop切片，然后导入dreamweaver进行排版，(排版主要使用css+div)，并进一步的加以制作，完善美化，如加入js代码，或透亮flash，因为网页是用css+div进行排版的，所以在最终一步的时候，我们还需要进行扫瞄器测试，因为css+div排版方式有一个最大的缺点就是：扫瞄器不兼容的问题，典型的如：ie与fireworks，因为各种扫瞄器使用的协议不同，所以会导致页面在最终扫瞄的时候有一些小问题，如：页面混乱，图片、文字之间的距离过大或过小，页面不美观等等，做为一个新人，我在有些方面的技术还很不成熟，所以在技术总监张伟的关心下，解决了许多问题，所在我很感谢他，当每天我们做完网页后，都会在代码页面加入解释代码，在里面写上每个人姓名的汉语拼间和工作日期，这样便利月底做统计工作，公司领导会依据每个人的工作数量进行嘉奖，每做一个页面会有2块的提成，虽然少点，但是积少成多，也是很可观的。
二、初来公司的时候(一)初级考试初来公司的时候，我们经过了初期考试，培训，与最终考试三个阶段，在接到公司让我面试的电话后，我来到了xx公司，因为要干的是网页设计，所以要有一个小测验，技术总监要求我们在网上自找图片和文字，做一个简洁的页面，要求是：什么样的页面都可以，考查的主要是面试者相关软件的操作力量与代码把握的娴熟成度，说实话，从毕业后，有一段时间没有写代码了，刚一上机，还有点生疏，但是凭借在学样扎实的学习功底，我很快就恢复了自己的英雄本色，将html代码写的很娴熟，做了一个左右分栏的页面，没什么太大难度，技术总监看了以后，说不错，让我三天后参与培训，合格扣就可以正式上班了。
大学生毕业生网页设计实习报告（精选5篇）
大学生毕业生网页设计实习报告大学生毕业生网页设计实习报告（精选5篇）接地气的实习生活已经告一段落，相信你会领悟到不少东西，让我们一起来学习写实习报告吧。
在写实习报告之前，可以先参考范文，下面是小编收集整理的大学生毕业生网页设计实习报告（精选5篇），仅供参考，欢迎大家阅读。
大学生毕业生网页设计实习报告1实习目的：熟悉和掌握计算机网页设计的基本技巧及网页制作相关工具软件等内容。
培养我们利用计算机进行商务网页设计的基本思路和应用开发能力，提高我们的计算机文化素质。
网页是世界上最有价值的不动产之一。
人们在这个不足0.1平米的空间内投资达数百万美元。
网页对公司的影响比简单的电子商务增收方法大得多;网页也是公司对外的脸面。
WEB站点就像一栋房子，它的每一个窗口都可以看成一扇门，人们可以沿着搜索引擎其他WEB站点的链接，绕过主页而进入WEB的深层。
一、网站的整体规划1.讨论网站主题：因为自己对普罗旺斯很感兴趣，于是就想到要是一下为心中的仙境设计一个旅游网站。
2.定位网站CI形象：旅游网站最重要的就是是浏览者产生想去亲身体验一下的共鸣。
于是在网页设计上面，根据普罗旺斯梦幻般的意境，我采用的是清新隽永的CI形象。
使浏览者有宾至如归的感受。
3.确定栏目和板块：（1）首先要考虑整个网页的长和宽，以及长度和宽度之间的比例。
（2）其次就应该考虑导航条的设置了。
（3）正文的框架设置(横向因素和纵向因素交错)在浏览了很多精美的旅游网站之后，再结合自己的想法，我先在草纸上画出了大体的栏目和板块。
（4）网站的整体风格和创意：建立一个浪漫的旅行网站，走映像派路线，目的务必使浏览者留下映像。
二、网页制作的前期策划与准备1.资料的搜集：由于个人的爱好，我很早以前就收集了许多普罗旺斯的美图，这次就方便多了。
接着就搜集了一些有梦幻效果的网页背景，FIASH源代码、小图标和一些GIF的动画等。
2.熟悉制作工具软件：主页制作的基本条件有：硬件：一台电脑(64mb以上内存，当然越大越好啦);可以拨号上网;如果你有条件的话，建议:配置扫描仪，这将大大方便图像和文字的输入;软件：html编辑软件：常用的有frontpage、hotdog等，本文重点介绍dreamweaver;图像处理软件：常用的有photoshop、flash、fireworks等;文件上传软件：常用的有cuteftp、wsftp等。
网设计与制作实训报告完整版
网设计与制作实训报告完整版网页设计与制作实训报告一、实训目的与背景网页设计与制作是现代社会中非常重要的技能之一，通过本次实训，我旨在培养自己的网页设计与制作能力，提高自己的实际操作能力，并将所学知识与技能应用于实际工作中。
二、实训过程与方法1. 确定实训内容与目标：为了更好地完成实训，我事先确定了实训的内容及所需达到的目标。
实训的内容包括学习HTML、CSS、JavaScript等网页设计与制作相关知识，并能够通过实际操作制作出具有实用性与美观性的网页。
2. 学习与研究：在开始实际操作之前，我首先进行了系统的学习与研究。
通过参考书籍、网络资源、视频教程等方式，我全面了解了HTML、CSS、JavaScript等技术的基本原理与应用方法，并加深了对网页设计与制作的理解。
3.实际操作与练习：在学习与研究阶段结束后，我开始进行实际操作与练习。
我首先从简单的网页设计开始，逐渐增加难度，通过一步步实际操作，不断巩固所学知识，并提高自己的技术水平。
同时，我也积极参与实验室和班级里的网页设计与制作项目，与同学们共同学习，互相交流经验。
4.实际项目案例：在实训的最后阶段，我开始进行实际项目案例的设计与制作。
我选择一个健身房的官方网站作为实际项目，通过网站的设计与制作，展示出我所学技术的实际应用。
在这个过程中，我不断与客户进行沟通与反馈，保证项目的质量与效果。
三、实训成果与收获通过本次实训，我取得了一些实质性的成果。
首先，我掌握了HTML、CSS、JavaScript等网页设计与制作技术，能够熟练运用这些技术进行网页设计与制作。
其次，我通过实际操作，提高了自己的实际操作能力，并在实际项目中展示出良好的设计与制作水平。
最后，我与同学们共同学习，互相交流经验，取得了一定的进步。
在实训中，我也遇到了一些问题与困难。
其中最大的困难是在实际项目中与客户进行沟通与反馈，因为客户对于网页设计与制作可能存在一些不了解或误解。
但通过与客户的不断沟通与解释，我最终成功理解并满足了客户的需求。
网页制作实训报告
网页制作实训报告第一篇：网页制作实训报告《网站设计与制作》实训报告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篇)
第1篇一、实验目的1. 理解网页系统设计的基本概念和流程。
2. 掌握网页系统的规划、设计和实现方法。
3. 提高网页设计与制作能力，熟悉相关软件的使用。
二、实验环境1. 操作系统：Windows 102. 浏览器：Chrome3. 开发工具：Adobe Dreamweaver CC4. 编程语言：HTML、CSS、JavaScript三、实验内容1. 网页系统规划2. 网页系统设计3. 网页系统实现4. 网页系统测试与优化四、实验步骤1. 网页系统规划（1）明确系统功能：根据用户需求，确定网页系统的功能模块，如首页、产品展示、新闻资讯、联系方式等。
（2）确定页面布局：根据功能模块，规划页面布局，包括头部、导航栏、主体内容、底部等。
（3）设计导航结构：根据页面布局，设计导航结构，使用户能够方便地浏览各个页面。
2. 网页系统设计（1）设计页面风格：根据网站定位和用户需求，设计页面风格，包括颜色、字体、图片等。
（2）设计界面元素：根据页面风格，设计界面元素，如按钮、图标、表格等。
（3）设计交互效果：使用JavaScript等脚本语言，实现页面元素的交互效果，如滚动动画、鼠标悬停等。
3. 网页系统实现（1）编写HTML代码：使用HTML标签，构建网页结构。
（2）编写CSS代码：使用CSS样式，美化网页界面。
（3）编写JavaScript代码：使用JavaScript脚本，实现页面交互效果。
4. 网页系统测试与优化（1）功能测试：测试各个功能模块是否正常工作。
（2）性能测试：测试网页加载速度和响应时间。
（3）兼容性测试：测试网页在不同浏览器和设备上的显示效果。
（4）优化：根据测试结果，对网页进行优化，提高用户体验。
五、实验结果与分析1. 网页系统规划根据用户需求，本网页系统规划了以下功能模块：- 首页：展示网站简介、最新动态、热门产品等。
- 产品展示：详细介绍各个产品，包括图片、文字、价格等。
- 新闻资讯：发布公司新闻、行业动态等。
网页设计实习报告（通用11篇）
网页设计实习报告（通用11篇）网页设计实习报告（通用11篇）在不断进步的时代，需要使用报告的情况越来越多，写报告的时候要注意内容的完整。
你知道怎样写报告才能写的好吗？以下是小编精心整理的网页设计实习报告，供大家参考借鉴，希望可以帮助到有需要的朋友。
网页设计实习报告篇1一、实习目的(一) 检验自己是不是真的适合这个职业鉴于自己对未来的职业生涯的规划更倾向于设计，这和自己所学的专业不是十分有联系，所以我希望在实习的过程里思考自己未来是否适合从事这方面的工作，为以后求职之路少走弯路做一定的尝试。
(二) 在实践中查漏补缺在学校学习的网站建设知识仅仅停留在平时的作业里，并没有得到充分的运用。
希望可以藉由这次实习，好好巩固书面知识。
在实际运用中通过发现问题，解决问题对知识进行查漏补缺。
(三) 在工作中打磨自己由于学校和社会是截然不同的生活、学习、工作氛围，在工作中我们不可以像在学校一样随心所欲，待人接物方面需要更有礼貌的沟通和恰当好处的圆滑。
希望在实习里，和同事上司的相处中获得这方面的成长。
二、实习内容(一) 实习主要内容广州xxxx有限公司是一个研发和销售智能寄存柜的公司。
它的产品在展示和销售这两个环节很需宣传册、企业网站等作为一个推广媒介。
我实习的主要内容就是配合网络部去完成网站建设的工作，涉及前台的外观设计和后台的代码编写，以及宣传册的设计。
1、负责设计公司整个企业网站的页面部分，根据网页设计师或客户所提供的主题要求和思路框架来设计出整个网站。
1）使用Photoshop、AI等图片处理软件设计、处理和制作网站上需要的图片2）使用DIV+CSS样式及基础的HTML语言做页面布局的排版3）使用Photoshop对网页进行配色及排版设计4）编写CSS代码使网站页面无论是在IE浏览器里还是在FF浏览器上正常显示2、负责网站的几个主体模块的文案撰写和后台编辑1）在已有的文案上配合网站架构进行提炼和归纳整理2）使用Photoshop对文案进行概念配图3）在后台将文案部分合理配色排版4）按照网站架构在后台录入所有产品资料(二)工作过程在公司的2个多月里，我的工作都是由负责整个网站文案架构的曹经理分配监督的。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
《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>标签属性的设置。
代码如下所示：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）在列表中添加列表内容，代码如下：<div class="sideBarLeftb3"><ul class="font-c"><a class="font-d">机械</a><a>轴承</a><a>阀门</a><a>模具</a><a>刀具夹具</a><a>泵</a></ul><ul class="font-b"><li>密封件</li><li>粉碎机</li><li>压缩机</li><li>减速机</li><li>机械加工</li></ul><ul class="font-b"><li>焊机 </li><li>风机</li><li>机床</li><li>弹簧</li><li>齿轮</li><li>锅炉</li><li>更多</li></ul></div>6）对列表内容设置相关CSS参数。