网页设计论文初稿.doc

网页设计摘 要在网络越来越接近我们生活的当今社会，Internet的应用已普及到了人们生活与工作的各个层面。网页作为一个宣传企业和展示自我的平台，其重要性也越来越受到人们的关注。因此网页制作业逐渐发展成为一种职业。目前用于网页制作的的软件非常多，但根据多位网页制作者多年的经验，Dreamweaver+Photoshop+Flash无疑是制作网页的最强组合，它们在制作网页效果图、制作网页动画，以及制作Web格式的页面中担任着重要的角色。随着Adobe公司发布的CS3系列设计软件的出现，Dreamweaver与Photoshop、Flash的结合更加紧密，使用更加方便。熟练地使用这三种设计软件，可以大大提高网页设计和制作的效率，以便制作出精美的网页。商业网页是企业向用户和网名提供产品和服务的一种方式，是企业开展电子商务的基础设施和信息平台，其网页页面由具体的文字（标题、广告语、单位名称、Email地址等）、企业标志、商标、产品图形、和信息菜单等内容组成，这些元素的不同展现影响到读者的视觉习惯和心理变化。本文将对一个小型企业设计一个网页，以展现企业形象、介绍产品和服务、体现企业的发展战略。关键词：网站设计；网页制作；Dreamweaver；Photoshop；Flash第1章 前言随着Internet的迅猛发展,网页设计技术已成为计算机学习的重要内容之一. 近几年来,网页设计技术一直在推陈出新.不断有新技术被推出并应用,实在令人眼花缭乱.这些网页设计技术可以分为静态网页技术和动态网页技术两种. 静态网页技术一般是指HTML和CSS技术.采用静态网页技术的网页只能在网页中展示文字和图片,但它却是所有网页设计的基础技术.动态网页技术是指让网页能够按照用户的需求做出动态响应的技术,例如JavaScript , VBScript及ASP等技术都属于动态网页技术的范畴. 目前,大部分制作网页的方式,都是运用网页设计软件,这些软件的功能相当强大,使用非常方便.不论是那一种网页设计软件,最后都是将所设计的网页转化为HTML,CSS,JavaScript/VBScript和ASP。网页设计是指使用标识语言（markup language)，通过一系列设计、建模、和执行的过程将电子格式的信息通过互联网传输，最终以图形用户界面（GUI）的形式被用户所浏览。简单来说，网页设计的目的就是产生网站，什么是网站呢，就是服务器内的一系列网页的组合，终端用户发出请求后服务器通过传输特定的网页向用户传输所需的信息。简单的信息如文字，图片（GIFs， JPEGs，PNGs）和表格，都可以通过使用HTML/XHTML/XML放置到网站页面上。而更复杂的信息如vector graphics,动画，视频，声频则需要插件程序例如Flash, QuickTime, Java run-time environment,等等，这些插件程序也是通过HTML/XHTML/XML植入网页的。随着浏览器和W3C标准一致性的改善，XHTML/XML（可扩展标识语言）与CSS（层叠样式表）共同用作网页内容的设计已经被广泛的接受和使用。最新的标准和建议则是朝着浏览器的能力扩充和改善发展，使之能够不需要插件程序也能够给用户传输多媒体信息和更多的选择。通常，网页可以分为静态网页和动态网页。静态网页页面上的内容和格式一般不会改变，只有网管可根据的需要更新页面。动态网页的内容随着用户的输入和互动而有所不同，或者随着用户，时间，数据修正等而改变。网页上的内容也可以由用户通过使用客户端描述语言(JavaScript, JScript, Actionscript,）来改变。当然更普遍的是由服务器端的描述语言（Perl，PHP, ASP, JSP, ColdFusion, 等)进行编译，从而对动态网页的内容进行改变。无论是客户端还是服务器端的改变都需要使用较为复杂的应用软件。第2章 网页设计的基础知识2.1 万维网和浏览器WWW是环球信息网（World Wide Web ）的缩写，也可以简称为Web，中文名字为“万维网”。另外，www也是世界气象监视网的英文简称。Internet Explorer，简称IE或MSIE，是微软公司推出的一款网页浏览器。Internet Explorer是使用最广泛的网页浏览器，虽然自2004年以来它丢失了一部分市场占有率。在2005年4月，它的市场占有率约为85%。Internet Explorer是微软的新版本Windows操作系统的一个组成部分。在旧版的操作系统上，它是独立、免费的。从Windows 95 OSR2开始，它被捆绑作为所有新版本的Windows操作系统中的默认浏览器。微软公司于美国当地时间2009年3月19日上午，北京时间2009年3月20日凌晨正式发布Internet Explorer 8浏览器，并同时开放下载。2.2 IP地址和域名域名表示的组织或机构的类型域名表示的组织或机构的类型com商业机构firm商业或公司edu教育机构或设施store商场gov非军事性的政府机构web和WWW有关的实体int国际性机构arts文化娱乐mil军事机构或设施arc消遣性娱乐net网络组织或机构info信息服务org非赢利性组织机构nom个人机构域名表2.3 HTML概述与基本结构2.3.1 HTML的概述 HTML的英语意思是：Hypertext Marked Language，即超文本标记语言,是一种用来制作超文本文档的简单标记语言。超文本传输协议规定了浏览器在运行 HTML 文档时所遵循的规则和进行的操作.HTTP协议的制定使浏览器在运行超文本时有了统一的规则和标准.用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台，自1990年以来HTML就一直被用作（是World Wide Web的缩写，也可简写WEB、中文叫做万维网） 的信息表示语言，使用HTML语言描述的文件，需要通过WEB浏览器显示出效果。2.3.2 HTML的基本结构：一个HTML文档是由一系列的元素和标签组成，元素名不区分大小写，HTML用标签来规定元素的属性和它在文件中的位置。HTML超文本文档分文档头和文档体两部分，在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。2.4 文本文本指的是网页的文字内容部分，其中包括文本的内容、格式、字体样式、连接等。2.4.1 文本的显示 在网页直接输入没有定义任何样式 图2-1 文本在IE中默认效果与属性的文本内容，其显示效果和浏览器的设置有关。其默认的文本显示效果如图2-1所示。如果更改浏览器的设置，则文本显示效果会相应的改变。单击“查看”菜单，在打开的下拉菜单中选择“文字大小”选项，如图2-2所示，单击其中的“最大”选项，此时网页中的文本效果如图2-3所示。在浏览器中进行其他的设置也可以改变网页中文本的显示效果。单击“查看”菜单中选择“编码”选项，选择其中的“其他”选项。 图2-2 IE中显示字体大小的菜单 1图2-3 更改IE设置后文本的显示效果2.4.2 文本的格式在网页中可以为文本设置各种格式，其中包括文本中字体的选择、字体的大小、文本的颜色、行高等。在浏览器中，文本内容的字体要依赖浏览者操作系统中的字体，所以最好不要定义特殊字体，通常使用“宋体”。2.5图像网页中使用的图像可以分为两个部分：一部分是起修饰作用的图像，一般在页面中起美化作用：另一部分是作为内容的图像，其中有些内容部分的文本内容，因为涉及到特殊的字体，所以也要用图像的方式来显示。2.5.1矢量图和位图计算机中显示的图形一般可以分为两大类矢量图和位图。矢量图使用直线和曲线来描述图形，这些图形的元素是一些点、线、矩形、多边形、圆和弧线等等，它们都是通过数学公式计算获得的。例如一幅花的矢量图形实际上是由线段形成外框轮廓，由外框的颜色以及外框所封闭的颜色决定花显示出的颜色。由于矢量图形可通过公式计算获得，所以矢量图形文件体积一般较小。位图：又称光栅图，一般用于照片品质的图像处理，是由许多像小方块一样的像素组成的图形。由其位置与颜色值表示，能表现出颜色阴影的变化。在PHOTOSHOP主要用于处理位图。2.5.2 网页设计中常用的图片格式1，BMP格式:Windows系统下的标准位图格式,未经过压缩，一般图像文件会比较大。在很多软件中被广泛应用.2，JPEG格式：也是应用最广泛的图片格式之一，它采用一种特殊的有损压缩算法，将不易被人眼察觉的图像颜色删除，从而达到较大的压缩比(可达到2:1甚至40:1)，因为JPEG格式的文件尺寸较小，下载速度快,所以是互联网上最广泛使用的格式!3，GIF格式：最大的特点是不仅可以是一张静止的图片,也可以是动画，并且支持透明背景图像，适用于多种操作系统，“体型”很小，网上很多小动画都是GIF格式。但是其色域不太广,只支持256种颜色.2.6多媒体网页中使用的多媒体包括音频文件、视频文件、Flash动画等内容，其中使用最多的是Flash动画。2.6.1 音频多媒体内容在网页中音频文件可以直接作背景使用。如果要再其他浏览器中使用音频文件，则需要使用播放器。2.6.2 Flash动画在网页中使用的Flash动画非常多。Flash动画可以用来制作站点的片头、Logo、Banner、页面中的广告等内容。2.6.3 视频多媒体内容在网页中无法直接播放视频内容。如果要播放内容，必须使用相应的播放器。2.7 超链接HTML文件中最重要的应用之一就是超链接，超链接是一个网站的灵魂，web上的网页是互相链接的，单击被称为超链接的文本或图形就可以链接到其它页面。超文本具有的链接能力,可层层链接相关文件，这种具有超级链能力的操作，即称为超级链接。超级链接除了可链接文本外，也可链接各种媒体，如声音、图象、动画，通过它们我们可享受丰富多采的多媒体世界。2.8 脚本脚本一般在网页中用来实现某种特殊的效果或功能。通常使用的是JavaScript和VBScript，使用Dreamweaver等网页制作软件，可以直接在页面中添加脚本。脚本一般用来完成一个或多个相应的动作。第3章 网页设计的一般步骤3.1需求分析 需求分析是制作一个网站的第一步。在制作网站之前，首先要了解客户的需要和要求。这些必要的信息包括客户所要表达的理念、界面显示的内容和栏目的要求、网站功能方面的要求等。根据客户的具体情况，需求也会有所差别。3.2制作页面效果图制作页面效果图的目的是向客户展示页面的显示效果，以便客户对页面设计提出具体的修改意见。使用效果图的好处在于便于修改，并且方便直观。常使用到的软件是Photoshop和Fireworks，本文以Photoshop为主。3.3制作Flash动画在网页中使用的多媒体内容主要为Flash动画。因为Flash动画内容可以在页面中直接使用，而其他的多媒体内容都需要在客户端安装相应的播放器来支持。3.4 切图在制作静态网页之前，要对效果图进行切片。目的主要是制作页面中使用的修饰图片。主要工具是Photoshop。3.5制作静态Web页面静态网页是实际存在的，无需经过服务器的编译，直接加载到客户浏览器上显示出来。静态页面需要占一定的服务器空间，且不能自主管理发布更新的页面,如果想更新网页内容,要通过FTP软件把文件DOWN下来用网页制作软件修改。制作静态页面通常使用的软件是Dreamweaver。一般是HTML页面，文件的后缀名为.html。3.6添加程序添加程序的目的是使页面能够和服务器中的资源进行交互，一般要涉及对数据库的操作。根据使用的程序语言不同，网页中的使用程序可以分为ASP程序、ASP.NET程序、JSP程序、PHP程序等。3.7 Web站点的发布、推广和维护客户对网页的所有功能和页面都确认后，就可以正式发布制作好的站点了。网站的推广和维护也是网站建设中相当重要的部分。针对站点的性质和不同的需求，推广和维护的方法也不尽相同。其中推广的方法包括百度等搜索引擎上的推广、相关论坛推广、邮件推广等。维护需指定专业人士来做定期的维护。第4章 软件与硬件的设施4.1 硬件操作系统：Microsoft Windows XP Professional设备：Pentium（R）4 CPU 3.06GHz 512MB的内存 NVIDIA GeForce 7100 GS的显卡 1280*1024的分辨率 80GB的可用磁盘空间 DVD-ROM 驱动器4.2 软件4.2.1 Macromedia Dreamweaver 8Dreamweaver是在网页设计与制作领域中用户最多、应用最广、功能最强大的软件，随着Dreamweaver 8的发布，更坚定Dreamweaver在该领域的地位。它集网页设计、网站开发和站点管理功能于一身，具有可视化、支持多平台和跨浏览器的特性，是目前网站设计、开发、制作的首选工具。1、灵活的编写方式Dreamweaver具有灵活编写网页的特点，不但将世界一流水平的“设计”和“代码”编辑器合二为一，而且在设计窗口中还精化了源代码，能帮助用户按工作需要定制自己的用户界面。2、可视化编辑界面Dreamweaver是一种所见即所得的HTML编辑器，可实现页面元素的插入和生成。或视化编辑环境大量减少了代码的编写，同时亦保证了其专业性和兼容性，并且可以对内部的HTML编辑器和任何第三方的HTML编辑器进行实时的访问。无论用户习惯手工输入HTML源代码还是使用可视化的编辑界面，Dreamweaver都能提供便捷的方式使用户设计网页和管理网站变得更容易。3、功能更多的CSS支持CSS可视化设计、CSS检查工具4、动态跨浏览器验证当保存时系统自动检查当前文档的跨浏览器有效性，可以指定何种浏览器为测试用浏览器，同时系统自动检验以确定页面有没有目标浏览器不支持的tags或CSS结构。动态跨浏览器有效性检查功能可以自动核对tags和CSS规则是否适应目前的主浏览器。5、强大的WEB站点管理功能6、内建的图形编辑引擎7、Dreamweaver的集成特性Dreamweaver 8继承了Fireworks、Flash和Shockwave的集成特性，可以在这些Web创作工具之间自由地切换，轻松地创建美观实用的网页。8、丰富的媒体支持能力可以方便地加入Java、Flash、Shockwave、ActiveX以及其他媒体。Dreamweaver具有强大的多媒体处理功能，在设计DHTML和CSS方面表现得极为出色，它利用JavaScript和DHTML语言代码轻松地实现网页元素的动作和交互操作。Dreamweaver还提供行为和时间线两种控件来产生交互式响应和进行动画处理。9、超强的扩展能力Dreamweaver还支持第三方插件，任何人都可以根据自己的需要扩展Dreamweaver的功能，并且可以发布这些插件。4.2.2 Adobe Photoshop CS3Adobe Photoshop是公认的最好的通用平面美术设计软件。由Adobe公司开发设计。其用户界面易懂，功能完善，性能稳定，所以，在几乎所有的广告、出版、软件公司，Photoshop都是首选的平面工具。Photoshop的专长在于图像处理，而不是图形创作。有必要区分一下这两个概念。图像处理是对已有的位图图像进行编辑加工处理以及运用一些特殊效果，其重点在于对图像的处理加工；图形创作软件是按照自己的构思创意，使用矢量图形来设计图形，这类软件主要有Adobe公司的另一个著名软件Illustrator和Micromedia公司的Freehand。 Photoshop CS3 新增的特性及功能: 1、Photoshop CS3最大的改变是工具箱，变成可伸缩的，可为长单条和短双条。 2、工具箱上的快速蒙版模式和屏幕切换模式也改变了切换方法。 3、工具箱的选择工具选项中，多了一个组选择模式，可以自己决定选择组或者单独的图层。 4、工具箱多了快速选择工具Quick Selection Tool，应该魔术棒的快捷版本，可以不用任何快捷键进行加选， 按往不放可以像绘画一样选择区域，非常神奇。当然选项栏也有新、加、减三种模式可选，快速选择颜色差异大的图像会非常的直观、快捷。 5、所有的选择工具都包含重新定义选区边缘(Refine Edge)的选项，比如定义边缘的半径，对比度，羽化程度等等，可以对选区进行收缩和扩充。另外还有多种显示模式可选，比如快速蒙版模式和蒙版模式等，非 常 方便。举例来说，您做了一个简单的羽化，可以直接预览和调整不同羽化值的效果。当然，选择菜单里熟悉 的羽化命令从此退出历史舞台。 6、调板可以缩为精美的图标，有点儿像CorelDraw的泊坞窗，或者像Flash的面板收缩状态，不过相比之下这个更酷，两层的收缩，感觉超棒！ 7、多了一个“克隆（仿制）源”调板，是和仿制图章配合使用的，允许定义多个克隆源（采样点），就好像 Word有多个剪贴版内容一样。另外克隆源可 以进行重叠预览，提供具体的采样坐标，可以对克隆源进行移位缩放、旋转、混合等编辑操作。克隆源可以是针对一个图层，也可以是上下两个，也可以是所有图 层，这比之前的版本多了一种模式。 8、在Adobe Bridge的预览中可以使用放大镜来放大局部图像，而且这个放大镜还可以移动，还可以旋转。如果同 时选中了多个图片，还可以一起预览，真是酷毙了。 9、Adobe Bridge添加了Acrobat Connect功能，用来开网络会议的，前身是Macromedia的降将Breeze。 10、Bridge可以直接看Flash FLV格式的视频了，另外Bridge启动感觉好快，比CS2和CS两个版本都要快，没有任 何拖累感和“死机感”。 11、在Bridge中，选中多个图片，按下Ctrl+G可以堆叠多张图片，当然随时可以单击展开，这个用来节省空间 12、新建对话框添加了直接建立网页、视频和手机内容的尺寸预设值。比如常用的网页Banner尺寸，再比如常见的手机屏幕尺寸等等4.2.3 Adobe Flash CS3Adobe Flash CS3是Adobe公司收购Macromedia公司后将享誉盛名Macromedia Flash更名为Adobe Flash后的一款动画软件。Flash软件可以实现多种动画特效,动画都是由一帧帧的静态图片在短时间内连续播放而造成的视觉效果,是表现动态过程、阐明抽象原理的一种重要媒体.使用设计合理的动画,不仅有助于学科知识的表达和传播,使学习者加深对所学知识的理解,提高学习兴趣和教学效率,同时也能为课件增加生动的艺术效果,特别对于以抽象教学内容为主的课程更具有特殊的应用意义.第5章 网页具体制作5.1 需求分析5.1.1 网站设计背景（中宁）布衣苹果艾瑞克专卖店,基于多年的发展与积淀,由一位年轻的经理，历经6年时间一手创立起来的一家服饰鞋店连锁机构。是一家专业从事品牌服饰代理专卖的销售公司,自专卖店创立以来备受本地各大消费者的亲睐,公司服饰及品牌鞋主要定位青少年女性与男性,是目前倍受吸引倍受欢迎的专卖店。公司自创立以来，年业绩迅猛增长，使得公司利润直线上线，至今已有成功运营四个服装鞋店。（中宁）布衣苹果艾瑞克专卖店,下设世界名牌：苹果（苹果中国运动分部包括运动休闲鞋和运动休闲服饰），俊成专业男式牛仔，中国篮协CBA篮球鞋，艾锐克休闲运动（艾瑞克中国）。公司本着以顾客为中心，树品牌意识，科学管理，创新改进的销售方针；创新为魂、人才为本、专业销售、诚信服务的经营理念。竭诚与社会各界朋友、客户建立长期友好的合作关系我们将抱这薄利多销，互惠互利的基本思想，最大限度的让利给客户，为客户提供超值服务。让客户买的放心，穿的舒心。5.1.2 网站建设市场分析衣、食、住、行是人类生活的四大元素。人们把“衣”放在首位，可见衣服对于我们的重要性。中国人口十四亿，庞大的人口基数本身就组成了一个庞大的服装消费市场。同时随着中国国民收入的不断飞升，中国市场进入精品消费时代，服装消费将不再仅仅为了满足其最基本的生存需求，将向更高的心理需求、自我满足需求跃进，特别是几千万人口跨入中产阶级后，其对反映自身社会地位和品位的服饰的需求将越来越迫切，将成就一批抓住了该阶层需求的服装品牌。经过全面的市场分析和（福建）草草服饰有限公司及同行业多年的销售业绩发展状况报表得知，社会服装行业的市场需求量很大，正在呈逐年增加的态势发展，特别是时尚服饰及个性自主的服装市场出现供小于求的发展局面。“知己知彼，百战百胜”，了解竞争对手上网情况及其网站规划、功能作用，竞争企业的经营状况和自身的特点对公司网站的整体规划是非常必要的。草草服饰有限公司建设网站将给公司带来的优势： 公司可降低广告宣传费用，让消费者快捷地找到公司资料。 公司随时可获取和发布优惠活动广告，加速增长服装的销售业绩。 公司可提供每天24小时的网上宣传服务。 公司利用互联网扩大自己的知名度。 公司更快捷地了解客户需求。 公司有利于开拓省内基于国内市场。 公司更好地与供应商、销售渠道和合作伙伴沟通与交流。 公司改善组织结构和管理体系，提高工作效率，及时适应市场变化。 公司可以树立现代化表象。5.1.3 网站建设目的及功能定位 根据福建草草服饰有限公司新世纪的发展战略目标通过网站建设进行网上形象策划宣传，可以打破地域局限性、广告费用的高额性，从而进一步提升草草服饰有限公司形象，扩大公司知名度。同时为以后的子公司宣传提供良好的展示平台。 根据草草服饰有限公司市场战略，网站的建设可以草草服饰有限公司的市场开发增加一个廉价的、覆盖面更广的宣传平台，草草服饰有限公司可通过这个网络平台将服装产品更好、更快地打入市场及时寻求潜在客户。 通过建立网站可提供一个方便的与直接消费者“面对面”的交互平台。通过这个平台，公司可以在第一时间了解客户需求把握市场动脉，从而更好的占领省内市场创造知名品牌打入国内市场。 网站平台可以有效的缩短公司和用户的洽谈周期，因为通过这个平台客户可以更加直观地了解公司，通过简单的信息反馈可以更好的了解公司的经营理念，不仅节省了时间也缩短了地域上的局限性。 通过网络平台公司可以第一时间展示公司最新动态，让供应商和广大用户及时地了解公司的发展动态，以便和用户达到很好的交流。5.2 站点的管理与设置5.2.1定义站点1、 在任意一个根目录下创建好一个文件夹（我们这里创建在D盘），如取名为apple。*备注：网站中所用的文件都要用英文名。2、打开Dreamweaver，选择“站点管理站点”，打开对话框，单击“管理站点”对话框中的“新建”按钮，弹出“站点”按钮，单击“站点”命令如图5-1。在站点名称中输入网站的名称（可用中文），在本地根文件夹中选择刚才创建的文件夹（D:apple）。然后确定即可。图5-1站点