网页设计课件-参考.ppt

1、 答辩人：王娟 专 业：计算机信息管理商务类网站的设计与实现西安电大莲湖分校研究概述研 究 背 景网站设计方案网站结构分析网站的准备工作1234实施步骤测试网站 56教育公平科学发展机制研究 建筑业应用软件 计算机和计算机网络的飞速发展，人们对计算机网络的依赖是越来越大。人们在网上聊天交友，在网上请教问题，查阅资料，还在网上听音乐。除此之外，人们还会在网上进行商务交易、下载信息，有着众多的使用者。尤其是电子商务大大的减少了人们对周围环境的依赖，无论是哪里的网友，都可以浏览到世界各地的各类信息，非常的方便，由于以上的优势，各类网站如雨后春笋般的出现，企业网站也不例外。而Web设计的健康发展依靠w

2、eb标准的采用，没有web标准就不会有真正的可访问性和连贯的设计。不用web标准，就跟不上时代。在这样的标准时代，我们需要网页更加容易扩展，适合自动数据交换，并且更加规整。而css，则实现了页面内容与样式分离。鉴于web标准，本论文着重对div+css布局与美化公司网页进行了讨论；同时根据客户需求，采用div+css实现了咨询公司网页的设计，具体实现了首页、设计理念、作品展示、企业文化、关于我们、联系我们等功能，系统符合公司网站的需求。课题的提出.研究背景12.设计方案网站主页（index.html）作品展示-support.html企业策划-blog.html联系我们-contact.htm

3、l设计理念-about.html3.网站结构分析.准备工作4技术要求：1、采用Windows 2000以上的操作系统，网页三剑 客+Photoshop+div+css开发；2、采用div+css布局和美化网页；设计内容：1.整个网站风格定位及各页面布局设计。2.网页整体图形的制作。3.div+css布局。4.网站测试与后期优化。.具体操作步骤5网站的页头主要分为两个部分。一是Logo，logo使一张准备好的图片，直接放置在头部容器左侧，调整好位置；二是导航条，网站导航条因为有立体感效果，因此它需要脱离文本流，因此在控制样式的时候要用定位，相对于文本流的定位。网站的导航栏目可以让用户对网站的内容

4、及信息一目了然。导航分为：首页、作品展示、设计理念、企业策划、关于我们、联系我们。导航采用的是ul li布局，然后再用a标签对其他相关网页进行链接，设计和操作上都非常简单。相关代码如下：首 页 作品展示 设计理念 企业策划 联系我们 5.1 头部效果图5.2 中间内容页设计根据 浏览者在阅读时经常采用从上到下，从左到右的习惯，主体内容中，将“优秀网站案例”靠左边放，这样能更好地吸引浏览者的眼球，同时也体现公司的专业、能力等。优秀网站案例采用网页图片切换的形式展现在首页中，使整个首页处于于静于动的画面。右边则是创意设计公司的设计理念。设计效果图如下5.3 页脚设计5.4.1 作品展示页设计一、设

5、计理念设计理念界面展示了公司设计的理念，同时还附带了公司设计的一些行业案例，让客户体会到本公司的专业。左边的链接为以后的编辑奠定基础。效果图如下5.4.1 作品展示页设计作品展示模版可以介绍公司的特色，让游客更充分的了解公司、公司业务所面向地方对象。左边列举了公司业务项目，左边的链接为以后的编辑奠定基础。效果图如下图 5.4.2 企业文化页设计此页面的的设计为左边是代表流程的图片，右边详细介绍了公司的企业文化等信息，让客户清晰的了解公司的文化，服务信息等等。效果图如下图5.4.3 联系我们页设计联系我们板块能实现交流的目的，让客户对公司的发展，公司的业务流程提出宝贵的意见和建议，这样公司才能更

6、好的为自己定位，才能根据客户提出的意见来完善自身。联系我们页面主要介绍公司所在地、公司联系电话、公司地图等信息。网站的联系我们界面效果，如下图5.5 网站最终效果图编码完成后，就要对源程序进行测试。软件测试的目的在于争取在第一时间发现程序中的错误，以便于及时纠错，增加软件可靠性。它在整个系统设计实施过程中占有相当的分量。测试是软件开发时期的最后一个阶段，也是软件质量保证中至关重要的一个环节。测试的目的是为了尽可能的发现程序中存在的错误，其任务就是消除网站故障，保证程序的可靠运行，最终把一个高质量的网站系统交给用户使用。一般来说在每个模块完成之后就要对它作必要的测试，这种测试被称为单元测试，模块的测试者也就是编写者。编码和单元测试属于网站生命周期的同一阶段。这个阶段结束之后，对网站系统还应该进行各种综合测试，这是网站生命周期的另一个独立的阶段，由专门的测试人员承担。在网页中的测试阶段主要是对网站进行浏览器兼容性测试。在网页测试的阶段我分别安装了IE8、火狐等浏览器，并且进行了逐个测试。在多次实践中或多或少都遇到了不可调节的DIV浮动问题，但是最后还是在老师的指导和书籍查阅后，嵌入表格完成了页面设计，使页面在各个浏览器中显示正常。.网站测试6测试结果 IE8浏览器运行正常 火狐浏览器运行正常 谷歌浏览器运行正常 360安全浏览器运行正常 谢谢 谢谢 请各位老师批评指正