网站规划与网页制作.docx
- 文档编号:10160927
- 上传时间:2023-02-08
- 格式:DOCX
- 页数:18
- 大小:31.58KB
网站规划与网页制作.docx
《网站规划与网页制作.docx》由会员分享,可在线阅读,更多相关《网站规划与网页制作.docx(18页珍藏版)》请在冰豆网上搜索。
网站规划与网页制作
网站规划与网页制作
作者:
李言岭
目录
摘要 ………………………………………………………1
关键字 ……………………………………………………1
前言………………………………………………………2
第一章.网页设计的背景和工具介绍……………………2
1.1网页设计的发展、前景和作用………………………2
1.2网页设计开发工具软件的介绍………………………3
第二章.总体规划网页的策划、设计制作………………4
2.1设计意念………………………………………………4
2.2规划设计………………………………………………4
2.3艺术性处理原则………………………………………5
第三章.具体页面的构思和实现过程……………………6
3.1网页设计制作规范……………………………………6
3.2网页的布局和结构……………………………………6
3.3网页画面风格的设计…………………………………7
3.4页面的设计、制作开发………………………………7
第四章. 个人Web网站作品制作过程…………………………8
4.1制作网站前的准备……………………………………8
4.2确定网页的内容结构…………………………………8
4.3建立站点进行页面设计………………………………9
4.4网页设计中的关键技巧………………………………9
4.5HTML脚本编写、源代码………………………………10
第五章.总结回顾…………………………………………13
5.1总结课题设计的优缺点………………………………13
5.2结束语…………………………………………………13
参考文献……………………………………………………13
摘 要
网站规划与网页设计是一门新兴的边缘性的行业,在网络产生以后应运而生。
网页如门面,小到个人主页,大到大公司、大的政府部门以及国际组织等在网络上无不以网页作为自己的门面。
当点击到网站时,首先映入眼帘的是该网页的界面设计,如内容的介绍、按钮的摆放、文字的组合、色彩的应用、使用的引导等等。
这一切都是网页设计的范畴,都是网页设计者的工作。
关键字
规划设计、动态效果、设计意念、配色方案等。
前言
本论文是网站规划与网页制作,如果准备投身网站规划与网页制作行业,就会知道Dreamweaver的大名,它是一种专业化的网页创作工具,它采用所见即所得编辑方式,通过特有的行为,模板,时间线等技术,能够快速高效地创建极具表现力和动感效果的网页,使网页创作过程变的简单无比。
本论文的实例我就采用Dreamweaver来制作网页的。
首先我先从网站设计和制作的概念、网站构建的整套思路流程出发,然后通过自己的个人Web作品来说明并演示一个完整的网站制作过程。
本论文网页设计有一条主线,就是说明设计网站的策划、设计、维护的全过程。
本论文的每一章都是网站建设的一个步骤,理论和实践相结合。
既有理论、又有实例。
把每一章的实例合在一起,就构成一个大实例。
本论文主要分为四个方面:
一、是网站策划、制作的整个流程的阐述,二、是具体页面的构思和实现过程、设计技巧的灵活使用。
三、自己个人网页设计作品展示。
四、总结和回顾。
在网页设计的背景和工具介绍方面,介绍了网页设计的背景和设计的开发工具。
目前最流行的制作工具是网页“三剑客”,即:
Dreamweaver,Fireworks,Flash。
在网站流程方面,主要从设计意念、规划设计,艺术性处理原则出发,同时对网站总体策划、网站布局策划、网站资料的收集、网站目录结构的规划做了说明。
在具体页面的构思和实现过程方面,主要阐述了制作规范,布局和结构,画面风格设计,网页制作的完成。
在个人Web作品制作过程方面,我详细用上面的设计流程来设计自己的个人主页,应用了包括:
用Dreamweaver对网页进行排版、用Fireworks给图像"减肥"、用Flash做广告、用CSS规划网页色彩、使用网页配色方案软件等内容。
还包含设计的关键技巧:
内容,页面设计,布局,HTML格式,连接,通则,设备独立等等。
第一章.网站规划与网页设计的背景和工具介绍
1.1网站规划与网页设计的发展、前景和作用
网页设计拥有传统的媒体的不具有的优势,例如能够声音、图片、文字、动画相结合,营造一个富有生气的独特世界,同时它拥有极强交互性,使使用者能够参与其中,同设计者相互交流。
但是最基本的模式还是平面设计的内容,所以平面设计就要考虑形式美的内容,其中网页的排版布局就属于形式的内容,那什么是形式呢?
一个网站的建设,首先应该从功能出发。
功能是网站的目的所在,为了“个性”而牺牲功能上的需求,那就舍本求末了。
而通常功能上的需求无非有:
1,能够明确的表达一个网站的主题。
2,能够容纳多种形式的内容。
3,能够良好的适应不同的分辨率。
其次要有一个清晰的网站结构。
比如说吧,导航条要不要?
个性一派说那东西人人在做,太俗没个性,要了难显新潮。
但我想导航条之所以有那么多人在用,是因为它给浏览者一个明确的结构,方便人们查找自己所需的信息。
从某种角度上说,大家都在用的东西就说明它确实被大家所接受。
要明白网站做出来是给每一个人普通网民看的,而不是用来孤芳自赏的。
在美学类书籍上也这样讲过:
艺术的个性要在人们所能接受的范围内,而并非天马行空。
经常更新,给人以新意。
设计技术的发展,带来了网页世界的繁荣。
尤其在崇尚个性的今天,设计者们更是将页面设计表现的淋漓尽致。
我们欣喜的看到那些僵化的设计模式正在被逐个打破,网页设计充满了生机。
但是,作为网页设计者,不能一味的只追求个性的体现,还必须兼顾到用户的习惯,在体现自己的风格的同时,在功能上使用户更加方便。
综上所叙,各位可能也看出来了:
网页设计要在满足网站功能,结构及需求的基础上,做到尽量的美观。
在常规中做出个性,在个性中表现常规。
1.2网站规划与网页设计开发工具软件的介绍
制作网页的工具大概分成二类。
一类是所见即所得,如:
FrontPage,Netscape,navigator、golden、等,这类软件使用较简单,适合初学者。
而另一类是文本编辑类,如Dreamweaver,hotdog、homesite、webedit等都是不错的软件,适合于已掌握一定html语法的制作者,其中Dreamweaver功能更为强大,能制作出相当效果的主页。
下面分别介绍本论文需要用到的常见网页编辑软件。
1.Dreamweaver:
是现在最盛行的,最辣手的网页编辑工具。
它支持DHTML动态网页,支持Flash,支持插件,支持外部编辑器。
能实现很多FrontPage无法实现的功能。
2.MacromediaFlash:
制作网页动画软件,可以给网页增加动感,适合做网站的广告设计,Flash是比较另类、超强的网页制作工具,可以产生小体积的动画文件。
它的出现,可以说网页设计的一次革命性突破。
特点是用矢量图代替传统的点阵图,而且互动性极强,可以做出很多精彩夺目的效果。
3.MacromediaFireworks:
图形处理软件,有了它,就不用为图形的体积大而发愁。
了。
4.AdobePhotoshop:
图形处理软件。
网页编程软件:
1.Html:
超文本标记语言,它是网上用于编写网页的主要语言。
它的语法非常简单,她采用简捷的语法命令,通过各种标记、元素、属性、对象等关键字建立与图形、声音、视频等多媒体以及其他超文本的链接。
2.Java:
脚本语言,是现代计算机最流行的话题之一,它的规模可变性、可移植性、多线程、面向对象的特点,以及强大的内存管理功能,使之成为有口皆碑的系统语言。
Java是一种建立分布式应用程序的简单易行技术,是网络编程的最优秀工具,使Internet的作用从通讯工具扩展到能够运行成熟应用程序的网络,这种性技术使企业可以在Internet上部署全方位的业务服务和实时交互式信息内容。
Java还简化了Software、Agent的结构,Software、Agent即在网络上交换信息和运行远程计算机上的程序。
Java是一种基于对象和事件驱动并具有安全性能的脚本语言,有了Java可使网页变得生动。
使用它的目的是与HTML超文本标识语言、Java脚本语言一起实现在一个网页中链接多个对象,与网络客户交互作用,从而可以开发客户端的应用程序。
它是通过嵌入或调入在标准的HTML语言中实现的。
3.Asp:
动态交互式语言,用于编写动态网页,是非常实用的语言。
其它:
CGI等
其它比较著名的网页制作软件还有:
AdobeIllustrator、MicrosoftNotepad、MacromediaDirector、Lightwave、MacromediaFreehand、AdobeImageRead等。
这里就不详细介绍了。
第二章.总体规划网页的策划、设计制作
2.1设计意念
①.计划制定
制定建站计划往往是一件使个人、公司、企业、机关单位等头痛的事情,因为网站建设对他们来说,可供套用的经验几乎为零,希望能通过我们的服务制定计划提供一点参考意见。
②.计划实施
有了计划,还需要通过有效的实施才能达到预期目的,成功的投资当然需要回报。
委托设计、进度控制、测试验收及网站开通后的日常维护,都是计划实施过程中关键的环节。
③.总体设计
总体设计的任务是从整体上对网站精心策划并确定网站的设计目标,在技术上合理规划设计指标,收集、整理、编辑网站内容,同时从访问者的角度设计划分栏目。
④.界面设计
界面设计涉及的范围极其广泛,根据个人、公司、企业、机关单位等对界面设计的不同要求需要,我们通常采用不同的设计方式,包括最简洁的模板填空、大众化设计、个性化设计以及整体要求极高的创意设计。
⑤.功能设计
设计定位不同的网站之间功能之间的差距很大,最简单的是静态页面,然后是充满动感的动态效果(有时也叫做动态页面,但与动态内容是不同的概念),还有与数据库结合的动态内容页面(通常所说的动态页面),功能最丰富的当然是能实现在线沟通的电子商务。
2.2规划设计
不论是正规的商业网站还是个人网站,要想把网页搞得丰富多彩,吸引大量用户前来访问,网站规划设计是至关重要的。
网站的总体规划
除非只设计一两个网页,否则网页制作应按网站来考虑,首先对网页内容进行划分设计。
创建新网站最佳方法是先建立原型系统,再进行详细设计,最后正式实施。
原型系统最主要的目标是学习、尝试采用不同的方法修改目标、更新形象。
原型系统开发过程中要解决网站建设的一些基本问题,例如:
●网站的结构;
●新添文件与原有系统保持一致的措施;
●信息的组织与管理;
●存储信息的物理方法(采用数据库还是文件系统);
●文档版本控制(例如,如何确保多个用户同时编辑同一个文件);
●结构的完整性和一致性的维护方法。
这些问题没有绝对正确的答案,只能根据实际情况进行选择。
详细设计包括画面的布局、系统的内部结构、实现方法和维护方法等。
这些对于以后的系统开发和投资估计都有着极其重要的意义。
进行详细设计时,最重要的是确定网站的运行模式。
它仅仅是宣传性站或者随意性很强的个人站点,还是通过广告、销售等方式获利的点,设计的方式和内容有着很大的区别。
对于商业网站,必须充分考虑财力、人力、计算机数目、网络连接方式、系统的经济效益、网站验证和用户反馈回复等诸多方面的问题。
从长远角度考虑,必须准确地知道网站的目标和系统的资金投入。
网站内容的开发
影响网站成功的因素主要有网站结构的合理性、直观性,多媒体信息的实效性和开销等。
成功网站的最大秘诀在于让用户感到网站对他们非常有用。
因此,网站内容开发对于网站建设至关重要。
进行网站内容开发的要点包括:
●HTML文档的效果由其自身的质量和浏览器解释HTML的方法决定。
由不同浏览器的解释方法不尽相同,所以在网页设计时要充分考虑到这一点,让所有的浏览器都能够正常浏览。
●网站信息的组织没有任何简单快捷的方法,吸引用户的关键在于总体结构的层次分明。
应该尽量避免形成复杂的网状结构。
网状结构不仅不利于用户查找感兴趣的内容,而且在信息不断增多后还会使维护工作非常困难。
●图像、声音和视频信息能够比普通文本提供更丰富和更直接的信息,产生更大的吸引力,但文本字符可提供较快的浏览速度。
因此,图像和多媒体信息的使用要适中,减少文件数量和大小是必要的。
●对任何网站,每一个网页或主页都是非常重要的,因为它们能够给用户带去第一印象,好的第一印象能够吸引用户再次光临这个网站。
●网站内容应是动态的,随时进行修改和更新,以使自己的网站紧跟市场潮流。
在主页上注明更新日期及URL对于经常访问的用户非常有用。
●网页中应该提供一些联机帮助功能。
比如输入查询关键字就可以提供一些简单的例子,甚至列出常用的关键字。
千万不能让用户不知所措。
●网页的文本内容应简明、通俗易懂。
所有内容都要针对设计目标而写,不要节外生枝。
文字要正确,不能有语法错误和错别字。
2.3艺术性处理原则
主页的设计主要是网页设计软件的操作与技术应用的问题。
但是,要使主页设计、制作得漂亮,必然离不开对主页进行艺术的加工和处理,这就要涉及到美术的一些基本常识。
本文将介绍一些主页设计中经常涉及到的艺术处理原则,供各位在进行主页制作的时候参考。
一、风格定位
主页的美化首先要考虑风格的定位。
任何主页都要根据主题的内容决定其风格与形式,因为只有形式与内容的完美统一,才能达到理想的宣传效果。
目前主页的应用范围日益扩大,几乎包括了所有的行业,林林总总,包罗万象,但归纳起来大体有这么几个大类:
新闻机构、政府机关、科教文化、娱乐艺术、电子商务、网络中心等。
对于不同性质的行业,应体现出不同的主页风格,就像穿着打扮,应依不同的性别以及年龄层次而异一样。
例如:
政府部门的主页风格一般应比较庄重,而娱乐行业则可以活泼生动一些;文化教育部门的主页风格应该高雅大方,而商务主页则可以贴近民俗,使大众喜闻乐见。
主页风格的形成主要依赖于主页的版式设计,依赖于页面的色调处理,还有图片与文字的组合形式等。
这些问题看似简单,但往往需要主页的设计和制作者具有一定的美术素质和修养。
还有,动画效果也不宜在主页设计中滥用,特别是一些内容比较严肃的主页。
主页毕竟主要依靠文字和图片来传播信息,它不是动画片,更不是电视或电影。
至于在主页中适当链接一些影视作品,那是另外一回事。
第三章.具体页面的构思和实现过程
3.1网页设计制作规范
基本要求
1.在网站根目录中开设imagescommontemp三个子目录,根据需要再开设media子目录,images目录中放不同栏目的页面都要用到的公共图片,例如公司的标志、banner条、菜单、按钮等等;common子目录中放css、js,、php、include等公共文件;temp子目录放客户提供的各种文字图片等等原始资料;media子目录中放flash,avi,quicktime等多媒体文件。
2.在根目录中原则上应该按照首页的栏目结构,给每一个栏目开设一个目录,根据需要在每一个栏目的目录中开设一个images和media的子目录用以放置此栏目专有的图片和多媒体文件,如果这个栏目的内容特别多,又分出很多下级栏目,可以相应的再开设其他目录。
3.temp目录中的文件往往会比较多,建议以时间为名称开设目录,将客户陆续提供的资料归类整理。
4.除非有特殊情况,目录、文件的名称全部用小写英文字母、数字、下划线的组合,其中不得包含汉字、空格和特殊字符;目录的命名请尽量以英文为指导,不到万不得已不要以拼音作为目录名称,经验证明,用拼音命名的目录往往连一个月后的自己都看不懂,
3.2网页的布局和结构
一般原则
1.在排布表格之前,请大家一定要好好思考一个最佳的方案,表格的嵌套尽量控制在三层以内,并且应该尽量避免
2.一个网页要尽量避免用整个一张大表格,所有的内容都嵌套在这个大表格之内,因为浏览器在解释页面的元素时,是以表格为单位逐一显示,如果一张网页是嵌套在一个大表格之内,那么很可能造成的后果就是,当浏览者敲入网址,他要先面对一片空白很长时间,然后所有的网页内容同时出现。
如果必须这样做,请使用
标记,以便能够使这个大表格分块显示。3.排版中我们经常会遇到需要进行首行缩进的处理,不要使用或者全角空格来达到效果,规范的做法是在样式表中定义p{text-indent:
2em;}然后给每一段加上
标记,注意,一般情况下,请不要省略
结束标记。4.原则上,我们禁止用 height=? >来人为干预图片显示的尺寸,而且建议 5.为了最大程度的发挥浏览器自动排版的功能,在一段完整的文字中请尽量不要使用 6.不同语种的文字之间应该有一个半角空格,但避头的符号之前和避尾的符号之后除外汉字之间的标点要用全角标点,英文字母和数字周围的括号应该使用半角括号。 7.所有的字号都应该用样式表来实现,禁止在页面中出现 >标记。 8.请不要在网页中连续出现多于一个的也尽量少使用全角空格(英文字符集下,全角空格会变成乱码),空白应该尽量使用text-indent,padding,margin,hspace,vspace以及透明的gif图片来实现。 9.中英文混排时,我们尽可能的将英文和数字定义为verdana和arial两种字体。 10.行距建议用百分比来定义,常用的两个行距的值是line-height: 120%/150%. 11.网站中的路径全部采用相对路径,一般链接到某一目录下的缺省文件的链接路径不必写全名,如我们不必这样: 12、嵌入图形文本的使用较大的字体,建议不要在图形中包括文本。 13、“网页大小”定义为网页的所有文件大小的总和,包括HTML文件和所有的嵌入的对象。 用户喜欢快的而不是新奇的站点。 对于解调器用户,网页大小保持在34K以下为合适。 3.3网页画面风格的设计 简洁明快、独具特色、保持统一的网站风格能让用户产生深刻印象,不断前来访问。 优秀的网页画面少不了漂亮的图像,但更主要的是布局效果。 网页布局采用的主要技术是HTML的表格(Table)和窗框(Frame)功能。 3.4页面的设计、制作开发 1、有了一个HTML编辑器和几兆服务器空间并不能说马上就可以设计网页了。 在开始编写文字、寻找图像和进行HTML标记之前应该先把基本的网页结构组织号。 如果没什么要说的,就什么也不要说。 要是开始的时候在脑子里没有一个相当明确的结构,那几乎肯定会以一团糟而告终。 开始时谨慎一些,然后不停地学习,不停地改进。 卸载一些你喜欢的页面,核对HTML源文件,看它是怎样写的,把它全部或部分粘贴到一个试验文件进行检验。 整页地拷贝别人的东西是剽窃行为,但是向别人学习则是研究过程。 2、人们第一次进入你的主页时,他们通常不是在寻找值得阅读的地方,他们可能正在寻找可供选择的东西,以超文本术语说即是可用鼠标点取的词句、图像、按钮等等,接下来是阅读文字,选定一个可选项,按鼠标键,下页出现后又重复此过程。 这里的技巧是确定阅读时按键的适当比率。 提供的可选项要是太少,访问者会觉得没意思,要是太多又会吓倒别人。 3、要是页面包含的内容信息量大,在开始设计页面之前就要先确定好读者对象。 对新手或新的访问者来说用一种固定的文件结构并在开始的时候给予说明是有意义的。 例如,关于内容的说明表格或某种类似结构。 如果你要满足知识或经验不在同一个层次的读者,提供限制性的线索可以让某些读者跳过基本内容直达目标。 提供连接时要考虑到各个层次的读者。 4、不要让读者不知所措。 不必非要用声音和图像充斥网页,也不要把文件做得太长以至于在装载文件时让读者等得脚后跟发凉,因此使用图像时要谨慎: 大的图像显然会降低页面建立的速度,但许多需要顺序装载的小图像也会如此。 第四章.个人Web作品制作过程 4.1制作主页前的准备 1、主页题材 下面我开始着手策划制作主页。 首先面临的问题便是我要制作什么内容,选择什么样的主页题材。 网络上的主页题材千奇百怪、琳琅满目。 只要你想的到,就可以把它制作出来。 这里我做的是一个名叫“网络园艺”的网站,所以我找了很多电脑教材方面知识的东西。 (1)一般来说,个人主页的选材要小而精。 如果你想制作一个包罗万象的站点,把所有您认为精彩的东西都放在上面,那么往往会事与愿违的,给人的感觉是没有主题,没有特色,样样有但是样样都很肤浅,因为您不可能有那么多的精力去维护它。 注意: 网页的最大特点就是更新快。 目前最受欢迎的个人主页都是天天更新甚至几小时更新一次。 (2)题材最好是你自己擅长或者喜爱的内容。 比如: 您对诗歌感兴趣,可以放置自己的诗词;对足球感兴趣,可以报道最新的球场战况等等。 这样在制作时,才不会觉得无聊或者力不从心。 (3)不要太滥或者目标太高。 “太滥”是指到处可见,人人都有的题材;“目标太高”是指在这一题材上已经有非常优秀,知名度很高的站点,你要超过它是很困难的。 2、规划框架 每个网站都是一项庞大的工程。 好比造高楼,没有设计图纸,规划好结构,盲目的建造,结果往往是倒塌;也好比写文章,构思好提纲,才不至于逻辑混乱,虎头蛇尾。 全面仔细规划架构好自己网站,不要急于求成。 规划一个网站,可以用树状结构先把每个页面的内容大纲列出来,尤其当你要制作一个很大的网站(有很多页面)的时候,特别需要把这个架构规划好,也要考虑到以后可能的扩充性,免得做好以后又要一改再改整个网站的架构,十分累人,也十分费钱。 大纲列出来后,你还必须考虑每个页面之间的链接关系。 是星形、树形,或是网形链接这也是判别一个网站优劣的重要标志。 链接混乱,层次不清的站点会造成浏览困难,影响内容的发挥。 为了提高浏览效率,方便资料的寻找,本站的框架基本采用“蒲公英”式,即所有的主要链接都在首页上,每个主链接再分别展开,主链接之间相互链接。 框架定下来了,然后开始一步一步有条理、有次序地做来,就胸有成竹得多,也为主页将来发展打下良好的基础。 3、资料收集 题材选定,框架选定,接下来就开始往主页里面输入内容。 我们称作资料收集。 就个人主页而言,很少有人有能力完全靠自己来创作所有的内容。 大部分人的方法是: 从报纸、杂志、光盘等媒体中把相关的资料收集整理,再加上一定的编辑后就可以了。 另外一个好的方法是从网络上收集,您只要到雅虎、搜狐等搜索引擎上查找相应的关键字,就可以找到一大堆的资料。 如果您是英语高手,您可以到国外站点上把最新的信息、资料翻译成中文,提供给大家,这叫“洋为中用”。 网络上的资料呈爆炸性的 如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。 copyright@ 2008-2022 冰点文档网站版权所有 经营许可证编号:鄂ICP备2022015515号-1标签中不要带上width和height两个属性,这是因为制作过程中,图片往往需要反复的修改,这样可以避免人为干预图片显示的尺寸,尽可能的发挥浏览器自身的功能;但是这样的一个副作用是当网页还未加载图片时,不会留出图片的站位大小,可能会造成网页在加载过程中抖动(如果图片是插在一个固定大小的表格里的,不会有这个现象),尤其是当图片的尺寸较大时,这种现象会很明显,所以当预料到这种会明显导致网页抖动的情况会发生时,请大家务必在最后给
附上width和height属性。
来人工干预分段。
冰豆网所有资源均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。