毕业设计（论文）-用xhtml与css开发考伊希文化公司网页.doc

用xhtml与css开发考伊希文化公司网页摘 要：本论文所研究的是一个公司的门户网站，着重对div+css布局公司网页进行了讨论，并对网站开发过程中使用的开发工具和技术作了扼要的介绍。关键词：网页；HTML；CSS；DIV；Photoshop全套设计加扣 3012250582Abstract：The research of article is a set of display the company , its emphatically discusses div+css layout of the company Webpage. And its briefly introduced the use of the web development process and development tools and techniques .Key words：website；HTML；CSS；DIV；Photoshop1 研究背景当今世界已进入信息时代，Internet成为21世纪最受关注的行业之一,它的飞速发展和在全球范围的普及应用正在给人类生活带来革命性变化。网络技术的发展也取得了巨大的成就，为网站开发提供了很好的技术支持。网站已经成为现阶段众多企业不可或缺的网络营销平台，互联网应用规模正在不断扩大。其中，特别是中小型企业，对于网络平台搭建的需求相当的迫切。所以为企业建站十分必要。而Web设计的健康发展依靠web标准的采用，没有web标准就不会有真正的可访问性和连贯的设计。不用web标准，就跟不上时代。在这样的标准时代，我们需要网页更加容易扩展，适合自动数据交换，并且更加规整。而css，则实现了页面内容与样式分离。鉴于web标准，本论文着重对div+css布局与美化公司网页进行了讨论；同时根据客户需求，采用div+css实现了咨询公司网页的设计，具体实现了首页、公司简介、发展进程、等功能，系统符合公司网站的需求。2 需求分析现在网络的发展已呈现商业化、全民化、全球化的趋势。目前，几乎世界上所有的公司都在利用网络传递商业信息，进行商业活动，从宣传企业、发布广告、招聘雇员、传递商业档乃至拓展市场、网上销售等，无所不能。如今网络已成为企业进行竞争的战略手段。企业经营的多元化拓展，企业规模的进一步扩大，对于企业的管理、业务扩展、企业品牌形象等提供了更高的要求。在以资讯技术为支撑的新经济条件下，越来越多的企业利用起网络这个有效的工具。网站早已由论证阶段进入了实质阶段，尤其为企业提供一个展示自己的舞台、为消费者创造一个了解企业的捷径。公司可以通过建立商业平台，实行全天候销售服务，借助网络推广企业的形象、宣传企业的产品、发布公司新闻，同时通过信息反馈使公司更加了解顾客的心理和需求，企业网站将会有利于公司产品销售管道的拓展，并节省大量的广告宣传和经营运营成本，更好地把握商机。3 系统开发环境与技术 Adobe Dreamweaver，简称“DW”，中文名称梦想编织者，是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的html网页。 Dreamweaver是创建和管理网页的专业化可视编辑器。使用Dreamweaver可以轻松创建跨平台、跨浏览器的页面。Macromedia的RoundtripHTML技术允许用户随意导入HTML文档而无需重新设置代码格式1。 Dreamweaver可以为用户做到：使用动态HTML功能（例如具有动态效果的层和行为）而不用写一行代码。它甚至还可以检查用户的工作成果在所有流行的平台和浏览器中可能发生的错误。 Dreamweaver还是一个可以完全自定义的应用程序。用户可以创建自己的对象和命令修改菜单和快捷键。 至于Dreamweaver工作区是非常灵活的，因此它可以适应各种不同的工作风格和使用水平。常用的Dreamweaver工作区组件有以下若干种：（1）文档窗口可显示当前文档，文档的外观和浏览器中看到的非常相似。（2）装载器中包含一些打开和关闭常用检查器和模板的按钮。（3）对象工具栏包含创建不同类型的对象（例如、图象、表格和层等）的按钮。（4）属性检查器显示选定对象的属性。（5）快捷菜单可以使用户对当前选择或区域快速执行某些命令。（6）可固定的浮动工具栏允许用户将浮动窗口、检查器和工具栏组合在一个或多个选择窗口中。4 语言4.1 HTML HTML，英文全成为Hyper Text MarkupLanguage，中文译为超文版标记语言。它是用来创建Web文档的语言。页面元素是由特定的标记来确定的，这些标记告诉浏览器该如何显示这个页面。24.2 CSS HTML可以将内容、结构和格式化的信息都包含在同一个Web文档中，这样做虽然简单易行，但也存在很多问题。各种信息存放在一起不利于文档的维护，修改起来费时费力。因此HTML应只负责文档的内容和结构，而格式化信息交给一套新的语言来完成，这就是CSS。CSS全称为CascadingStyleSheet，中文译为层叠样式表（也有译作级联样式表的）。其作用就是要控制HTML的页面布局和外观样式，使Web文档内容结构和表现形式完全分离。因为采用CSS布局，不象表格布局充满各种各样的属性和数字，而且很多css文件通常是共用的，从而大大缩减页面代码，提高页面浏览速度。4.3 DIV+CSSDIV+CSS是网站标准（或称“WEB标准”）中常用术语之一，div+css 是一种网页的布局方法,这一种网页布局方法有别于传统的HTML网页设计语言中的表格（table）定位方式,真正地达到了w3c内容与表现相分离。HTML语言自HTML4.01以来，不再发布新版本，原因就在于HTML语言正变得越来越复杂化、专用化。XHTML语言是一种可以将HTML语言标准化，用XHTML语言重写后的HTML页面可以应用许多XML应用技术。使得网页更加容易扩展，适合自动数据交换，并且更加规整。在XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。以下是DIV+CSS的特点简介3：（1）符合W3C标准。微软等公司均为W3C支持者。这一点是最重要的，因为这保证您的网站不会因为将来网络应用的升级而被淘汰。（2）样式的调整更加方便。内容和样式的分离，使页面和样式的调整变得更加方便。 现在YAHOO,MSN等国际门户网站，网易，新浪等国内门户网站，和主流的WEB2.0网站，均采用DIV+CSS的框架模式，更加印证了DIV+CSS是大势所趋。（3）CSS的极大优势表现在简洁的代码，对于一个大型网站来说，可以节省大量带宽，而且众所周知，搜索引擎喜欢清洁的代码。 （4）表现和结构分离，在团队开发中更容易分工合作而减少相互关联性4。4.4 开发环境列表表4.1 开发环境表环境名系统名操作系统开发语言调试环境开发软件Windows 7HTML，CSS+DIVApache HTTP ServerDreamweaver; Ietester5 网页总体设计5.1 html 标记5.1.1 html中，标记的语法标记名称要控制的文字/标记名称当用一组html标记将一段文字夹在中间时，这段文字与夹文字的标记被称为一个组件。如：titleindex/title这就是一个组件，其中的title即为元素名，title就是一个标记，index为该元素的内容，有时在元素名后面还有属性。因此，在html文件中某个组件的完整定义语法如下:标记名称 属性1=“值1” 属性2=“值2” 属性3=“值3”组件数据/标记名称4由以上可知，标记元素有四种格式： （1）空元素没有内容的元素 （2）带有属性的空元素 （3）带有内容的元素 （4）带有内容和属性的元素5.1.2 需要使用的HTML常用标记html/html 创建一个html文档5head/head 设置文档标题和其它在网页中不显示的信息title/title 设置文档的标题h1/h1 最大的标题pre/pre 预先格式化文本u/u 下划线b/b 黑体字i/i 斜体字tt/tt 打字机风格的字体cite/cite 引用,通常是斜体em/em 强调文本(通常是斜体加黑体)strong/strong 加重文本(通常是斜体加黑体)font size= color=/font 设置字体大小从1到7，颜色使用名字或rgb的十六进制值basefont/basefont 基准字体标记big/big 字体加大small/small 字体缩小strike/strike 加删除线samp/samp 范例var/var 变量blockquote/blockquote 向右缩排dfn/dfn 述语定义address/address 地址标记sup/sup 上标字sub/sub 下标字xmp/xmp固定宽度字体(在文件中空白、换行、定位功能有效)plaintext/plaintext固定宽度字体(不执行标记符号)listing/listing 固定宽度小字体p/p 创建一个段落p align= 将段落按左、中、右对齐 br 换行 插入换行符blockquote/blockquote 从两边缩进文本dl/dl 定义列表ol/ol 创建一个标有数字的列表ul/ul 创建一个标有圆点的列表li 放在每个列表项之前,若在ol/ol之间则每个列表项加上一个数字, 若在ul/ul之间则每个列表项加上一个圆点 div align=/div 用来排版大块html段落,也用于格式化表menu 选项清单nobr./nobr 强行不换行hr size=9 width=80% color=ff0000水平线(设定宽度)center/center 水平居中a href=url/a 创建超文本链接/a 创建自动发送电子邮件的链接base 文档中不能被该站点辨识的其它所有链接源的urllink 定义一个链接和源之间的相互关系5.2 为web页面设置背景颜色 Html允许编写者为其web页面选择各种各样的颜色，包括背景、文本等等，这通过这种body标记的常用属性。 Bgcolor属性（用来控制页面的背景颜色），语法：bgcolor=“颜色”6。其中，颜色可以通过两种方式来表示，可以直接指定颜色的英文名称，也可以利用十六进制数值方式来指定颜色，颜色的表示方法如下：#RRGGBB，其中，RR代表红色、GG代表绿色、BB代表蓝色，我们以00到FF的值表示三种颜色成分的多少，以指 定出三种原色以多少的成分组成新颜色。语法如下：body bgcolor=“#00ff00”另外，ie支持3位数的颜色表示方法。与六位数的表示方法类似，不过就是位数少而已，#RGB分别表示红绿蓝的成分7。5.3 创建网页 在完成建立站点后，点击HTML(如图所示），建立一个新的空文档。图5-1 创建网页图示5.4 设计制作网页5.4.1 插入表格 单击“插入”工具栏中的“表格”按钮，弹出“表格”对话框（如图所示）。图5-2 插入表格图示 选择好表格的类型后，设置表格对齐方式，表格对齐方式有两种：水平方向和垂直方向。align(水平方向)： （1）align=left（水平左对齐） （2）align=right(水平右对齐) （3）align=center(水平居中对齐) valign(垂直方向)： （1）valign=top(垂直顶部对齐) （2）valign=bottom(垂直底部对齐) （3）valign=baseline(垂直一条公共基线对齐) （4）valign=middle(垂直居中对齐)5.4.2 插入图片 选择好插入图片的位置后，单击“插入”菜单中的“图像”，弹出“选择图像源。选择好要插入的图片点击“确认”。5.4.3 插入文字 在要插入文字地方直接输入，编辑8。5.5 网页设计5.5.1 导航条 Banner可以说是企业网页中一道美丽的风景线。网页中的banner信息代表着一个企业的素质和形象，所以应该表现的大气、端庄而且精细。还更要表现出一个企业应该有的朝气和活力。因此banner图片加文字说明成为首选。实例展示从侧面让客户了解到公司的实力。在首页的版面，先是用Photoshop对网站模板进行切片，然后用DIV+CSS进行排版。9图5-3 banner5.5.2 主页面无论是平面设计，还是网页设计，色彩永远是最重要的一环。当我们距离显示屏较远的时候，我们看到的不是优美的版式或者是美丽的图片，而是网页的色彩。本网页主要采用蓝色背景色，文字底色与背景色对比明显，故能清晰显示。网站页面主要采用简洁明快的主题搭配。5.6 网站功能及结构5.6.1 前台客户系统功能：(1) 用户可以浏览公司的一些基本的信息。(2) 用户可以浏览公司的案例。(3) 用户可以查看公司的联系方式。 设计理念界面展示了公司的企业文化发展前景，同时还附带了公司设计的一些行业案例，让客户体会到本公司的专业。 本网站给客户提供一个了解公司的平台，客户可以与公司及时地交换意见，产生互动，公司也可以及时对网站进行更新维护。5.6.2 网页层次结构图5-4 网页层次结构图5.7 网页展示图5.7.1 网站首页 首页是一个网站的入口网页，故往往会被编辑得易于了解该网站，并引导客户浏览网站其他部分的内容。这部分内容一般被认为是一个目录性质的内容。图5-5 首页截图5.7.2 公司简介 公司简介就是对企业简要介绍，让人初步了解公司概况 图5-6 公司简介截图5.7.3 发展进程 让客户对公司发展和前景展望有所了解，以及对企业文化的宣传。图5-7 发展进程截图5.7.4 产品项目 产品项目主要给客户展示企业的产品以及营销方式，使客户体会到公司的专业。图5-8 产品项目截图5.7.5 联系我们 联系我们页面方便企业与客户的沟通。图5-9 联系我们截图5.8 网站兼容性测试 网站兼容性测试主要检验网站能否在不同的客户浏览器中正常浏览。5.8.1 进行兼容性测试，主要基于下面的3个原因： 网页设计工具Dreamweaver所见即所得的网页制作界面所显示的页面效果和浏览器中的实际浏览效果有一定的出入 。不同的浏览器对同一页面显示的效果会有出入。 5.8.2 进行兼容性测试时的建议： （1）使用多种Web浏览器测试网页.最典型的是Internet Explore、Firefox等。 （2）不仅使用最新版本的浏览器进行网页测试，还使用了大众比较常用的浏览器版本。但考虑到有部分网络用户使用的是低版本浏览器，因此在测试时，以IE浏览器为主，当然还适当兼顾高版本和低版本的浏览器，但它们毕竟是少数。之所以要这样是因为随着浏览器版本的提高，其功能也越来越强。许多高版本中能体现的效果，在低版本浏览器中就不一定能体现出来。6 结束语转眼间，毕业设计完成了。设计的这段时间里，虽然很辛苦，但使我获益非浅，我体会到自己在学习的知识方面存在很多的欠缺，特别是在DIV浮动和CSS层叠样表方面。但最终在毕业设计的制作中，还是不断的把知识慢慢加深、巩固，并且完成了网页设计制作。不足之处在于后台管理还未实现。参考文献:1 陈锋HTMLCSS网页设计全接触M人民邮电出版社,2001:40-45.2 前沿科技精通CSS+DIV网页样式与布局M人民邮电出版社,2007:60-75.3 史晓燕网页设计基础（HTML，CSS和JavaScript）M清华大学出版社,2006:68-99.4 张景峰HTML程序设计M高等教育出版社,2005:223-256.5 项宇峰HTML网络编程从入门到精通M清华大学出版社,2006:77-90.6 昭君工作室Dreamwerver8网站开发自学导航M机械工业出版社,2008:195-202.7 梁霞网页设计与制做从新手到高手M中国铁道出版社,2014:70-77.8 韦胜辉CSS+div商业网站布局与设计案例M中国铁道出版社,2014:55-75. 9 王辉中文Dreamweaver8网页制作网页制作网页制作网页制作M清华大学出版社, 2006:68-78.第 14 页 （共 13页） 附录 关键代码/headbody div id=container_headerpnbsp;/p/div div id=main div id=header div id=banner./div !-配上banner导航条- div id=menubar ul id=nav li class=selecteda href=index.html首页/a/li lia href=ourwork.html公司简介/a/li lia href=testimonials.html发展历程/a/li lia href=projects.html产品项目/a/li li class=lasta href=contact.html联系我们/a/li /ul !- 有序列表列出网页页面访问该链接- /div /div div id=site_content div id=content div class=clear/div div class=content_item div style=width:600px; float:left; h1欢迎进入考伊希文化传播有限公司/h1 p重庆考伊希文化传播有限公司成立于2011年5月18日。公司秉持着专业高效的服务理念，力求成为重庆首屈一指的整合公关推广服务公司。考伊希是个年轻的公司，但是拥有成熟的团队，来自业界的各类精英相继加盟考伊希，给了考伊希腾飞的的翅膀。公司致力于为广大企业、品牌提供专业的策略咨询、公关顾问、政府公关、危机公关、行业分析、市场调研、活动策划、事件营销、互动营销、企业内刊、广告宣传、培训等服务。/p h3案例展示/h3 div style=width:300px; float:left; padding: 0px 20px 20px 0px;a id=example1 href=images/fancybox_large.jpgimg alt=image src=images/fancybox_small.jpg /a/div div style=width:75px; float:left;img src=images/icons/home.png alt=news/div p考伊希现为天涯重庆，龙湖两江新宸等多个知名品牌提供微博，微信服务，以及活动执行 。/p p重庆最受关注微博 我爱重庆：重庆城的一切，信息来源网络，微博服务大众！ /p p天涯重庆是全球著名中文网络社区-天涯社区旗下的论坛之一。天涯重庆论坛是当地影响力最大、人气最旺的重庆论坛。天涯社区,全球华人网上家园!/p h3我们服务包括:/h3 重庆考伊希文化传播公司集合全国最优秀的广告人，以提供策略与创意为核心，有效整合广告、媒介、公关、行销、咨询等服务内容，构建了一家横跨川渝、辐射全国的综合型广告公司。br /br /br / 重庆分公司2011年成立至今，先后为多家国内500强品牌及其区域公司提供卓有成效的全案服务，涉及行业包括：通信、能源、食品、汽车、地产、旅游等。br /br /br / /div pnbsp;/p div style=width:250px; float:left; margin-left:20px; div style=width:200px; float:left; h2最新动态/h2/div br style=clear:both;