网页制作[数据参考]

1、阜新高等专科学校毕业设计 网页设计 学生姓名： 李阳 系 部： 计信系 专 业： 计算机系统维护 指导教师： 卢莹莹 2011年 07 月 8 日 摘要 在信息技术飞速发展的今天，人们获取信息的方式更多是来源于互联网。而吸引浏览用户的则是视觉效果出色、信息量丰富、使用起来便捷的网页，所以网页设计尤为重要。本文从网页设计的角度出发，介绍一些设计中要素和技巧，宣传网页的设计思想，整体规划及相关基础知识包括汇编HTML语言程序及效果图. 网页规划包含的内容很多，如网页的结构、栏目的设置、网页的风格、颜色搭配、版面布局、文字图片的运用等，也只有如此制作出来的网页才能有个性特色，具有吸引力。 网页主题就

2、是所要包含的主要内容，一个网页必须要有一个明确的主题。特别是对于个人网页，不可能像综合网站那样做得内容大而全，包罗万象。所以必须要找准一个自己最感兴趣内容，做深、做透，办出自己的特色，这样才能给人留下深刻的印象。 Abstract Today that flies to soon deveolp in the information technique, the mode that people obtain an information is more is come from an Internet.But attraction browse a consumer of then the

3、visual effect is outstanding, the information measure abundance and use a convenient web page, so webpage designing for important.This text sets out from the angle of webpage designing and introduces the factor and the skill in some designs and publicizees the design thought of web page, comprehensi

4、ve plan and related foundation knowledge the including edit collected materials HTML language procedure and effect chart.The web page programs the contents of containment a lot of, if the structure, column purpose of the web page establish, the style, color of web page match, the usage of the layout

5、 of printed sheet layout, character picture etc., also only have thus manufacture then a web page can have a personality special feature, have an attraction.The web page subject is the main contents of containment wanted, a web page has to have an explicit subject.Especially for personal web page, i

6、s not likely to be like to synthesize a website to make so the contents is big and whole, all inclusive.So have to seek a most interested in contents of being quasi- by himself/herself, make deeply and make deeply and do an own special feature, just can leave a deep impression for people like this.目

7、录摘要（1） 前言（6）一.网页的要素（7）1.1图片要素（7）1.2排列方法要素（7）1.3色彩要素（8）二.网页设计技巧（9）2.1框架的使用（9）2.2 CSS样式的使用（9）三.设计软件 （10）3.1 Dreamweaver介绍 （10）3.2 Dreamweaver操作界面 （11）3.3 photoshop介绍 _（12）3.4 ASP脚本介绍 （13） 四具体网站分析 （14） 4.1 需求分析 （14）4.2 系统运行环境分析 （15）4.3 系统设计流程图 （15）5 作品制作的过程 （16）5.1利用photoshop切割网页画面 （16）5.2利用photoshop制作

8、logo （17）5.3 利用photoshop制作banner （17） 六网站前台界面的设计与实现 （18）6.1 网站前台首页 （18）6.2 站内展示功能的实现 （18）6.3 网站前台界面的设计与实现分析 （19）附录 （20）参考文献（21）致谢（25）前言随着网络技术的不断发展，如今的公司越来越倾向于在网络上进行宣传产品，网页设计成了企业展示自身形象、发布产品信息、联系网上客户的新平台、新天地，进而可以通过电子商务开拓新的市场，以极少的投入获得极大的收益和利润。网页设计是通过网站管理员管理整个网站的内容，使之公司的信息不断得到更新.因此我设计开发了一个关于宣传上海绪胜纺织品有限公

9、司的网页设计。该网站实现了树立公司形象，扩大业务宣传，收集客户反馈，加强客户服务，网上市场调查，开展网络营销，建立信息数据库，实施电子商务，直接实现网络销售以及网站的后台管理。我所做的这个关于宣传风范数码的网页设计，主要分为五大板块：公司首页、公司简介、产品展示、新品推荐、客户留言、联系我们。这些都分别实现了达到宣传公司的目的和加强公司管理的功能，同时在很大程度上也扩大了知名度和提高了销售效益。本网站的设计采用的是ASP技术，数据库采用的是ACCESS数据库，网站的布局使用的是Dreamweaver。同时在设计过程中用到了Flash 动画设计和Photo shop图形图像处理技术。这也给本设计

10、增色不少，让我的设计更加生动，更加让人赏心悦目。下面我将就我设计的过程所采用的技术、思路等方面详细的介绍我所设计开发的关于风范数码宣传的网页设计。由于制作经验不足，作品和论文中存在问题之处，请老师指导完善。一、 网页设计的要素 在一个网站中，最重要的页面当属主页，所以在此以主页为例，说明在网页制作中版面设计的问题。从版面设计来讲,一个有特色的主页,必须包含有四个要素：文字，图片，排列方式和主色调，这四者相辅相成，缺一不可。 1.1.图片要素 要设计出漂亮的主页，首先要成为计算机图形高手，仅这一点就可以让初学者花上一年半载的时间。图片的要求与页面的内容有关，一些较随意的主页像股票、医药站点等，来

11、访者并不在乎你能否做出精彩的图片，有些时候他们反而觉得放置图象后影响了访问速度，他们关心的只是页面内容；相反像一些需要靠图象来吸引访客的主页，如游戏介绍、影视介绍、风光名胜等站点，图象是一个极为重要的要素，在这里缺少了恰当的图象，整个页面就会黯然失色、就是一个不完整的主页。这需要去学习像photoshop这样的图形图像处理软件，还要有一定的美术基础，如审美观、创意技巧等， 1.2.排列方法要素 主页的第二个要素是排列方法，即网页布局。网页作为一种版面，既有文字，又有图片；文字有大有小，还有标题和正文之分；图片页有大小而且有横竖之别。图片和文字都需要同时展示给观众，不能简单地将其罗列在一个页面上

12、，否则会搞得杂乱无章。关于具体的网页布局，常见的有“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型等，关于它们，在网页设计的相关书籍中或者在网络上都可以看到详细的叙述。比如如果内容非常多，就要考虑用“国字型”或拐角型；而如果内容不算太多而一些说明性的东西比较多，则可以考虑标题正文型；而如果是一个企业网站想展示一下企业形象或个人主页想展示个人风采，封面性是首选；Flash型更灵活一些，好的Flash大大丰富了网页，但是它不能表达过多的文字信息。还没有提到的就是变化型了，只有不断的变化才会提高，才会不断丰富我们的网页。 F、基于屏幕的可视开发环境；G

13、、可视编程环境；H、高级可控制外观组件支持；I、数据绑定；J、Web 服务和 XML 的预建数据连接器；K、项目管理功能；L、源代码控制系统；M、其它软硬件1.3.色彩要素 色彩在网页所占比重很大。有了合理清新的色调，会弥补主页上的其它不足。页面的色彩搭配是与网站的主题分不开的，一个网站必须有一种或两种主题色。不至于让浏览者迷失方向，也不至于单调乏味。一般来说，页面的主体文字应尽量使用黑色等较深的颜色，与背景对比明显，按钮、边框等使用彩色。例如教育类网站使用蓝色为主题色，再用红色和黑色作为配色，就能表达出严肃、稳重的效果。 图1.1 完整的页面软硬件二 网页设计技巧 一张完美的主页设计需要积累

14、丰富的知识以及掌握大量的技巧。在这里从框架和CSS样式的运用两方面来介绍网页设计的技巧。 2.1.框架的使用 FRAME（框架）是Web上经常会看到的页面结构。框架的最常见用途就是导航。一组框架通常包括一个含有导航条的框架和另一个要显示主要内容页面的框架。 使用框架具有以下优点：访问者的浏览器不需要为每个页面重新加载与导航相关的图形；每个框架都具有自己的滚动条(如果内容太大，在窗口中显示不下)，因此访问者可以独立滚动这些框架。例如，当框架中的内容页面较长时，如果导航条位于不同的框架中，那么向下滚动到页面底部的访问者就不需要再滚动回顶部来使用导航条。 使用框架具有以下缺点：可能难以实现不同框架中

15、各元素的精确图形对齐；对导航进行测试可能很耗时间。 许多专业 Web 设计人员不喜欢使用框架，并且许多浏览 Web 的人也不喜欢框架。在大多数情况下，这种反感是因为遇到了那些使用框架效果不佳或不必要地使用框架的站点(例如，每当访问者单击导航按钮时就重新加载导航框架内容的框架集)。如果框架使用得法(例如，在允许其他框架的内容发生更改的同时，使一个框架中的导航控件保持静态)，则这些框架对于某些站点可能非常有用。 2.2. CSS样式的使用 CSS(层叠样式表)是一种制作网页的新技术,它的全称是级联样式表,即Cascading StyleSheets的缩写，又称之为风格样式表单。CSS是在网页制作过

16、程中普遍用到的技术。采用了CSS技术控制的网页，设计者会更轻松、有效地对页面的整体布局、颜色、字体、链接、背景以及同一页面的不同部分、不同页面的外观和格式等效果实现更加精确地控制。 3. 设计软件3.1 Dreamweaver介绍Dreamweaver是由Macromedia公司推出的，用于网页开发和网站管理的专业化设计工具。它采用了多种新技术，具有设计和开发网站过程中需要的网站管理、网站设计、页面制作、多媒体制作和动画制作等丰富实用的功能；它具有友好的操作界面，在文档窗口中可以打开各种浮动面板，同时还可以使用系统内置的多种对象进行操作。Dreamweaver启动后，会出现一个新的文档操作窗口

17、,该窗口包含如下的几个部分：标题栏、菜单栏、工作区、浮动面板和状态栏。标题栏中主要显示该文档的标题信息、文件名及该文件所在的文件夹等；菜单栏中包含了各种操作命令、应用特性和访问浮动面板的简单方法；Dreamweaver启动后，工作区是白色的空白区域，可以在工作区中输入文字、插入图象、添加背景以及其它页面元素；浮动面板提供了访问程序特性的简单方法，可以对浮动面板进行选择、拖放、重新定位、移动等操作，当我们不需要使用某个移动面板时，还可以用鼠标单击该面板右上角的关闭按钮将其关闭，需要时再打开；状态栏位于窗口的最下端，用于显示文档的HTML标记、文档窗口大小、下载速度等信息。3.2 Dreamwea

18、ver操作界面Dreamweaver cs3界面设计友好，空间广阔，操作精微细致,是一种所见即所得的网页编辑器，既有效的减少了代码编写的工作量，也确保所设计文档的专业性和兼容性。，如图3.1所示。图3.2 Dreamweaver cs3操作界面软硬件3.3 photoshop介绍Photoshop是平面图像处理业界霸主Adobe公司推出的跨越PC和MAC两界首屈一指的大型图像处理软件。它功能强大，操作界面友好，得到了广大第三方开发厂家的支持，从而也赢得了众多的用户的青睐。ADOBE PHOTOSHOP最初的程序是由Mchigan大学的研究生Thomas创建，后经Knoll兄弟以及ADOBE公司

19、程序员的努力ADOBE PHOTOSHOP产生巨大的转变，一举成为优秀的平面设计编辑软件。它的诞生可以说掀起了图象出版业的革命，目前ADOBE PHOTOSHOP最新版本为6.0，它的每一个版本都增添新的功能这使它获得越来越多的支持者也使它在这诸多的图形图象处理软件中立于不败之地。 Photoshop支持众多的图像格式，对图像的常见操作和变换做到了非常精细的程度，使得任何一款同类软件都无法望其颈背；它拥有异常丰富的插件(在Photoshop中叫滤镜)，熟练后您自然能体会到只有想不到，没有做不到的境界。3.4 ASP脚本介绍Active Server Pages：“动态服务器网页”，一般简称为“

20、ASP”，ASP之所以能受到大家的重视与使用的原因，主要在于所产生的执行结果都是标准的HTML格式，而且这些程序是在网络服务端中执行，使用一般的浏览器（如IE 或Netscape）都可以正确地获得ASP的“执行”结果，并且将这ASP执行的结果直接在浏览器中“浏览”，不像VBScript或 JavaScript是在客户端（Client）的浏览器上执行，若使用VBScript来设计程序，客户端（Client）在浏览器中可以显示程序执行的结果，可是，客户端（Client）若使用Netscape浏览器就无法显示VBScript的执行结果。 ASP的特点：任何开发工具皆可发展ASP只要使用一般的文书编辑

21、程序，如Windows记事本，就可以编辑。当然，其他网页发展工具，例如，FrontPage Express、 rontPage等也都可以；不过还是建议你用记事本来写，既省钱又方便，若是使用那些所见即所得的网页编辑来写ASP，可能会发生一些意想不到的离奇状态。通吃各家浏览由于ASP程序是在网络服务器端中执行，执行结果所产生的HTML文件适用于不同的浏览器。语言相容性高：ASP与所有的ActiveX Script语言都相容，除了可结合HTML，VBScript、Java Script、Active X服务器组件来设计外，并可经由“plug-In（外挂组件模组）的方式，使用其他厂商（Third Pa

22、rty）所提供的语言。隐密安全性高：如果我们在浏览器中直接查看网页的原始代码，就只能看到文件，原始的程序代码是看不到的！这是因杰程序先于网站服务（eb Server）端执行后，将结果转换成标准文件，再传送到客户端（Client）的浏览器上，因此，我们所辛苦撰写的程序并不会轻易地被看见进而被盗用。易于操控数据库：ASP可以轻易地通过DBC(Open Database Connectivity)驱动程序连接各种不同的数据库，例如：Acess、Foxpro、dBase、Oracle等等，另外，ASP亦可将“文本文件”或是”Excel” 文件当成数据库用。面向对象学习容易：ASP具备有面向对象（bje

23、ct-Oriented）功能，学习容易，ASP提供了五种方便能力强大的内建对象：Request、Response、Sever、Application以及Session，同时，若使用ASP内建的“Application”对象或”Session”对象所撰写出来的ASP程序可以在多个网页之间暂时保存必要的信息。ASP的六大内部对象：对象名称 功能描述Request Response Server Session Application Object Context 从客户端取得信息将信息送给客户端提供一些Web服务器工具储存在一个Session内的用户信息，该信息仅可被该用户访问在一个ASP-App

24、lication中让不同的客户端共享信息可以用来配合Microsoft Transaction 服务器进行分布式事务处理。4 具体网站分析4.1需求分析目前，Internet技术与公司宣传网页网上营销相结合的趋势已经具有一定规模，开发一个高效、可靠、通用的资源管理系统已经迫在眉睫。我考虑到公司网站多样性的需要，同时也考虑到公司宣传网页实现电子商务的重要性，所以，在该资源管理系统中特意加入在线留言的功能，使其功能更全面。该资源管理系统主要功能模块介绍如下：1. 在线留言板块如图4.1-1 图4.1-1在线留言，此功能增强了公司与客户会员的沟通情况，互动比较容易，交流过程中能让公司获得宝贵的建议，

25、更好的集思广益，当我们多听听客户和会员的心声时，对公司的发展是绝对有利的。当公司有一个庞大的会员群和客户群时，公司的发展前景可想而知。本网站是网上很很常见的浏览性网站，本网站的实现主要是以ASP与ACCESS数据库相结合的技术来实现。作为一个用于用户学习、进行知识查询的浏览性网站，应该从使用方便角度出发，因此本网站必须具备一下特点：1.网站安全可靠 2.功能齐全3.操作方便，界面友好且简单易懂，运行迅速4.易于维护和扩充4.2 系统运行环境分析系统软硬件平台：系统需要一台PC机，标准采用Pentium及以上级别CPU，至少300MB硬盘，主频90MHz,支持VGA或分辨率更高的显示器。操作系统

26、：Windows98/2000/XP/Me，也可使用WindowsNT操作系统数据库服务平台：Access数据库 ，适合开发中小型系统。4.3 系统设计流程图 如图4-3-1所示创建网页总体框架分析网页设计模块功能确定网页的目录结构和连接结构确定网站的整体风格创意设计收集需要用到的素材创建各个模块创建网页4-3-1 系统设计流程图 5 作品制作的过程5.1利用photoshop切割网页画面 如图5.1 图5.15.2利用photoshop制作logo 如图5.2 图5.25.3 利用photoshop制作banner 如图5.3 图5.36 网站前台界面的设计与实现6.1 网站前台首页公司网站

27、前台首页和很多网站一样，网站的首页一般都是公司简介、公告栏、产品浏览等界面，具体界面如图6.1 图6.16.2 站内展示功能的实现为了方便浏览者查看网站内容，本网站特意设置了站内展示功能，具体实现的效果如图6.2 图6.26.3 网站前台界面的设计与实现分析本网站利用B/S结构，利用Dreamweaver进行开发，同时结合SQL Server数据库，其功能目标是要实现前台信息在线浏览的功能，后台管理员对信息管理的功能。本网站主要实现的具体功能如下：1、信息管理，实现信息管理，对于信息类管理特别的系统。2、信息添加与修改功能，采用ewebeditor再线编辑器，支持图文动画等功能及各种上传，支持

28、远程图片自动保存，支持是否在标题前显示“图文”标志，支持自定义首页动画调用图片文章等。3、系统安全用于个人或客户进行资料收集整理十分的方便,功能也异常强大.当然也可以用作新闻管理或各种站点。本系统建成后，我们就已经对各模块进行了反复的测试，经过修改和调试通过以后，再进行运行测试。测试结果表明各项功能已经达到设计要求。目前该资源管理系统已经与计算机网络课程集成在一起，并在测试服务器上发布。本资源管理系统开发技术先进、功能模块齐全、可靠性高、投资成本低、按照信息资源建设规范构成，并且具有较好的通用性，稍作修改即可应用于其他的网页宣传。在这个网页设计的开发中，我主要负责的是网站功能的分析与前台网站的

29、设计，通过这个设计使我对网站设计的工具和技术有了更深刻的认识，本站的前台网站的主页上包括：公司首页、公司人员、推荐产品、发送邮件、联系方式等站内搜索功能，方便用户浏览时减少不必要的操作。本网站的设计采用的ASP技术，数据库采用的是SqL数据库，网站的布局使用的是Dreamweaver.前台网站设计我主要根据大多用户浏览习惯而想象以及它的外观要简捷、大方。做这个网站让我学到了很多实际应用的东西、当中遇到不少的问题、发现自己操作起来并不是像自己想象出来的那么简单。让我对设计网站工具有了更深刻的认识。附录总体框架代码无标题文档 !-function MM_preloadImages() /v3.0

30、var d=document; if(d.images) if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i0&parent.frames.length) d=parent.framesn.substring(p+1).document; n=n.substring(0,p); if(!(x=dn)&d.all) x=d.alln; for (i=0;!x&id.forms.length;i+) x=d.formsin; for(i=0;!x&d.layer

31、s&i 2) if (img = MM_findObj(args2) != null & !img.MM_init) img.MM_init = true; img.MM_up = args3; img.MM_dn = img.src; if (nbArr = documentgrpName) = null) nbArr = documentgrpName = new Array(); nbArrnbArr.length = img; for (i=4; i args.length-1; i+=2) if (img = MM_findObj(argsi) != null) if (!img.M

32、M_up) img.MM_up = img.src; img.src = img.MM_dn = argsi+1; nbArrnbArr.length = img; else if (event = over) document.MM_nbOver = nbArr = new Array(); for (i=1; i args.length-1; i+=3) if (img = MM_findObj(argsi) != null) if (!img.MM_up) img.MM_up = img.src; img.src = (img.MM_dn & argsi+2) ? argsi+2 : (argsi+1)? argsi+1 : img.MM_up); nbArrnbArr.length = img; else if (event = out ) for (i=0; i document.MM_nbOver.length; i+) img = document.MM_nbOveri; img.src = (img.MM_dn)