网页的设计与制作毕业论文.doc

《网页的设计与制作毕业论文.doc》由会员分享，可在线阅读，更多相关《网页的设计与制作毕业论文.doc（6页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、网页的设计与制作 【摘要】随着计算机网络的普及，计算机网络应用日趋丰富，利用网络足不出户就可以获取若品，实现电子商务；政府可以利用网络宣传法律规范，实现电子政务。因此，拥有一个网站，制作精美的网页来吸引浏览者的目光，提高知名度，是一个网页制作者追求的目标，这一切都要依赖于网页设计和制作技术的应用。关键词： 网页 设计 制作 前言：网页是构成网站的基本元素，是承载各种网站应用的平台。通俗的说，网站就是由网页组成的。如果只有域名和虚拟主机而没有制作任何网页的话，客户仍旧无法访问网站。网页（英文：Web page）是一个文件，他存放在世界某个角落的某一部计算机中，而这部计算机必须是与互联网相连的。网

2、页经由网址（URL）来识别与存取，当我们在浏览器输入网址后，经过一段复杂而又快速的程序，网页文件会被传送到计算机上，然后再通过浏览器解释网页的内容，再展示到眼前。是万维网中的一“页”，通常是 HTML 格式（文件扩展名为.html 或.htm）。网页通常用图像档来提供图画。网页要透过网页浏览器来阅读。当然，进行网页设计的前提就要掌握photoshop、flash、dreanmweaver等基础软件的应用。以下内容主要是对dreanmweaver等软件的介绍及其作用。第一章1.1、网页的类型通常我们看到的网页，都是以 htm 或 html 后缀结尾的文件，俗称 HTML 文件。 不同的后缀， 分

3、别代表不同类型的网页文件， 例如以 CGI 、 ASP、 PHP 、 JSP 甚至其他更多。1.2、网页的分类网页分为静态网页和动态网页： 1.2.1 静态网页在网站设计中，纯粹 HTML 格式的网页通常被称为“静态网页”，早期的网站一般都是由静态网页制作的。静态网页是相对于动态网页而言，是指没有后台数据库、不含程序和不可交互的网页。你编的是什么它显示的就是什么、不会有任何改变。静态网页相对更新起来比较麻烦，适用于一般更新较少的展示型网站。 1.2.2 动态网页是与静态网页相对应的， 也就是说，网页 URL 的后缀不是 htm、html、 shtml、 xml等静态网页的常见形动态网页制作专家

4、式， 而是以 aspxasp、 sp、 php、perl、cgi 等形式为后缀，并且在动态网页网址中有一个标志性的符号“?” 。1.3、网页设计网页设计的两大要点是：整体风格和色彩搭配。 1.3.1 确定网站的整体风格a.将你的标志 logo，尽可能的放在每个页面上最突出的位置。b.突出你的标准色彩。c.总结一句能反映贵站精髓的宣传标语！d.相同类型的图像采用相同效果，比如说标题字都采用阴影效果，那么在网页中出现的所有标题字的阴影效果的设置应该是完全一致的！1.3.2 网页色彩的搭配a.用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，这样的页面看起来色彩统一，有层次感。b.用两种

5、色彩。先选定一种色彩，然后选择它的对比色。c.用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿； 或者土黄，土灰，土蓝。 在网页配色中，还要切记一些误区： (a)、不要将所有颜色都用到，尽量控制在三至五种色彩以内。 (b)、背景和前文的对比尽量要大(绝对不要用花纹繁复的图案作背景)，以便突出主要文字内容。第二章2.1、Dreamweaver8 简介Macromedia Dreamweaver8是建立Web 站点和应用程序的专业工具。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用

6、程序。从对基于 CSS 的设计的领先支持到手工编码功能，Dreamweaver 提供了专业人员在一个集成、高效的环境中所需的工具。开发人员可以使用 Dreamweaver及所选择的服务器技术来创建功能强大的Internet应用程序，从 而使用户能连接到数据库、Web 服务和旧式系统。Dreamweaver可以轻而易举地制作出跨操作系统平台，跨浏览器的充满动感的网页，是目前制作Web页站点,Web页和Web应用程序开发的理想工具。2.2、主要功能特点2.2.1、网页编辑形式灵活,将“设计”和“代码”编辑器集成在一起，既可以方便的进行源代码编辑，也可以使用鼠标方式添加和设置对象.2.2.2、使用可

7、视化编辑环境,既有效的减少了代码编写的工作量，也确保所设计文档的专业性和兼容性。2.2.3、强大的CSS功能, 可以有效的控制网页对象的外观，美化网页界面，如文本字体，颜色，表单样式、图像风格等。2.2.4、站点管理功能完,Dreamweaver提供了强大的站点管理功能，可以安全，系统的维护和管理各种规模的网站。2.2.5、集成性高,与Fireworks，Flash，Shockwave具有良好的集成性，可以在这些Web创作工具之间自由的进行切换。2.2.6、媒体支持能力强, 可以灵活加入JAVA，Flash，Shockwave，ActiveX以及其他媒体元素，也可以对各种多媒体元素进行处理。2

8、.2.7、扩展能力强, 可以实现功能的扩展。利用Adobe公司免费提供的Dreamweaver插件，可以丰富Dreamweaver的媒体处理能力。第三章3.1、网页制作制作步骤：网站是网页的集合，一个站点用的所有网页构成一个网站，网页是网站的表现形式，网页设计是指对网站整体页面的设计，包括页面风格、配色、布局、内容等。网页设计包含的内容非常多，大体分为两个方面：一方面是纯网站本身的设计，如文字、排版、图片制作、平面设计、静态图文和动态声音、影像等；另一方面是网站的延伸设计，包括网站主题、浏览群的定位、智能交互、制作策划、形象包装和宣传营销等。设计页面的第一步就是设计片面布局，就像报刊杂志版面设

9、计一样，我们可以看作一张报约或者一份杂志来进行排版布局。3.1.1、草稿新页面就像一张白纸，没有任何的约定俗成的东西，可以尽可能地发挥想象力、创造力，将想象的布局到上面去。这是原创阶段，你不必讲究细腻工整，你也可在草稿本上先画出整个布局框架，把多个版块的位置先粗略的布置上去以往下一步工作的展示，这一步也可以借住PHOTOSHOP或其他工具软件来完成。3.1.2、粗略布局 在草稿的基础上，将需要的功能模块放到页面上去，这时要遵循突出重点、整体协调的原则，首先将网站标志、导航条、广告条等最主要的模 块放在最突出位置，然后考虑其他模块的布局。3.1.3、定稿定稿即将粗略布局精细化、具体化，完成整个页

10、面的设计。页面的制作，首先在根据客户的要求下，完成首页的制作，在经客户确定后，再制作其他的页面，制作完成后，交给客户验收，然后发给客户确定，待所有的页面的都经客户确定后，完成网页的制作进程，交给程序员添加程序。3.2、网页布局常见网页版式布局结构有以下几种：3.2.1、两栏式结构，即页面顶部为网站标志或广告条，下面分为左右两栏，一般左栏式导航或分类信息，右栏为主要内容，这种布局很容易掌握，但如果在色彩上不加以注意的，很容易给人一种“乏味”的感觉。3.2.2、三栏式结构是一些大型网站常用的布局结构，一般为上面是横幅的广告条，下面分为三竖栏，中间较大，是主要的信息，左右是小条内容或者广告条。三栏式

11、给人一种充实的感觉，但页面拥挤，不够灵活，是网站常用的一种布局形式。3.2.3、“三”型结构，这种结构多用于国外网站或者视频类网站，其特点是分类清晰，展示方便。3.2.4、左右框架型，是企业网站或论坛常用的布局，页面分为左右两部分，左边一般为导航部分，右边是与导航相对应的内容。左右框架型的结果非常清晰，内容一目了然，便于信息的查询。3.2.5、上下框架型与左右框架型类似，其区别仅仅在于形式。页面整体为横向分布，上面为导航，中间的大展式窗口很突出，整个网站显得简洁明亮，这种结构适合于信息量不大，主要靠图片展示内容的网站。3.2.6、Flash 型主要采用现在流行的 Flash 技术，页面表达的内

12、容较为丰富，给人视觉和听觉上很大的冲击，处理得当会达到Web页面难以达到的效果。3.3、网页色彩 3.3.1、色彩模式在自然界看到的各种色彩都是由三种色光或三种颜色组成的，而他们本身不 能再分拆出其他的颜色成分，所以称为三原色。三原色分为光学三原色和物理三 原色。这两种三原色各自混合后，分别形成了不同的色彩体系。RGB 模式：R代表红色，G代表绿色，B 代表蓝色，三种色彩叠加形成了其它的色彩。因为三种颜色都有256个亮度水平级，所以三种色彩叠加就形成 1670 万种颜色了，通过它们足以再现绚丽的世界。就编辑图象而言，RGB色彩模式也是最佳的色彩模式，因为它可以提供全屏幕的24bit的色彩范围，

13、即真彩色显示。 CMYK 模式： CMYK 代表印刷上用的四种颜色，C代表青色，M代表洋红色，Y代表黄色，K代表黑色。因为在实际引用中，青色、洋红色和黄色很难叠加形成真正的黑色，最多不过是褐色而已。因此才引入了K黑色。黑色的作用是强化暗调，加深暗部色彩。CMYK模式是最佳的打印模式，RGB模式尽管色彩多，但不能完全打印出来。可以先用RGB模式进行编辑工作，再用CMYK模式进行打印工作，在打印前才进行转换，然后加入必要的色彩校正，锐化和休整。3.3.2、色彩的心理表现色彩具有精神的价值，人们常常能感受到色彩对自己心理的影响，这些影响总是在不知不觉中发挥作用，影响我们的情绪。色彩的心理效应法是在不

14、同层次中，有些色彩对人有直接的刺激，有些则需要通过间接的联想，更高层次的则涉及人的观念与信仰。 3.3.3、色彩的表达感觉不同的色彩给人不同的心理暗示。对色彩的不同感觉和认知，对色彩搭配所 产生的心理联想，会导致不同的心理反应。空间感色彩的空间感与色彩对比的知觉度有关，对比度强和高纯度的色彩具有前进感，对比度弱和低纯度色的色彩具有后退感。色彩的空间感，具体表现在利用色彩的明度对比层次、形与色的排列转折、大小弯曲等秩序节奏，从而有意识地形成凹凸深远的空间感，甚至利用人的错觉形成假象空间色彩的前进、后退感形成的距离措视原理、在网页中常被用来加强画面的空间层次。亲切感色彩的亲切感是指人对色彩的对比变

15、化所产生的亲近的心理感觉。通常较为明快柔和的色彩都能使人产生亲切感，色彩的纯度对比和明度对比较弱时，也会使整体色调变得柔和、轻快。产生亲切感的网页一般采用同类色、类似色和邻近色。使用具有亲切感的色彩，可以用来表现家具网站、儿童网站和女性网站、服装网站及日用消费品网站等。庄重感通常，明度较低、纯度不高的色彩能给人以庄重感、常用的有黑、棕色、深蓝和褐色等。在使用时要注意搭配，搭配不当则会产生沉闷、呆板的感觉。神秘感色彩的神秘感，并不是色彩本身具有的，而是人的联想所产生的心理感觉。一般能使人感到神秘的色彩，多为明度较低、色相不明确、纯度也不高的色彩，如昏黄的氛围、幽暗的巷子、夜晚的角落，都可以用来营

16、造色彩的神秘感。兴奋和忧郁感色彩和人的个性一样，具有明朗与忧郁的区分。明朗的色 彩必然是明度高、对比较强的色彩，以及纯度偏纯的色彩，忧郁的色彩则是明度低、对比较弱的色彩，以及纯度偏低且色性偏冷的色彩。一般来说，暖色较易引起心理的亢奋和积极性，属于兴奋色，其中朱红色最具兴奋作用，其他明度较高、纯度较高的颜色（如黄色、橘黄色等）也具有煽动性、倾向于兴奋色。3.4细节的把握网站的品位，除了页面本身整体的视觉效果外，往往更突出在一些细节上，只有把握住细节，才能更好地提高浏览者的使用友好度，给浏览者留下深刻的印象。3.4.1颜色在初学网页设计的时候，在用色方面要非常注意，如果对网页用色没有太大的把握，那

17、么就先选择好网页的基本色调，然后针对这一种颜色去进行变化，如需加其他颜色，可以试着加些灰色，因为灰色是中色调，不会对页面颜色造成太大的冲突。这样做出的网页整体颜色会非常协调统一。3.4.2线条的运用很多朋友在制作网页的时候，在两块过渡的地方，如 banner 和导航条之间 会用一条细线区分开，此时往往会画上一条直直的线，这样给人感觉会很突兀。3.4.3图标网站中在各个标题的前面适当的加些图标点缀网页，可以使网页效果更加出彩，但是切忌网页图标使用过多，图标的色调也要一致，避免杂乱。3.4.4文字网站中文字的运用，用户在浏览网页时，主要是要看网页当中的文字内容， 所以要特别注意文字的处理。一是文字

18、的颜色不要和背景颜色相近，这样用户在 浏览文字信息时会非常的吃力；二是不要乱用字体，你使用的字体在本机上可以 显示， 但是到了别人的电脑上就不一定能显示出来了； 三是注意文字之间的行距，通常我们不对文字进行行距的设置时，文字间的行距会非常小；影响页面的美观度，注意文字间的行距，使其不会显得特别挤，做到宽松有序。结束语网页制作主要是利用图形制作软件和处理软件进行网页效果图的制作。我们需要了解一个完整网站的制作过程，并知道网页制作在网站制作中的作用。一方面结合具体的实例，多加练习，培养对于技术的敏感和快速适应性，注意到技术变化带来的各种新的可能性，消除技术所形成的障碍；另一方面要多方面、多角度地感受与掌握电脑设计的时尚语言，扩展对传统设觉设计范畴的认识。 参考文献：1.书名 网页设计与制作实用教程 网页制作教程作者 马绍惠 郭振欣、史红星出版社 机械工业出版社 高等教育出版社出版时间 2009 年 第 1 版(2002 年 7 月 1 日)参考资料：2.姚琳主编 网页设计与制作三合一（CS3）中国铁道出版社（北京市宣武区右安门西街8号）3.王淑英主编 网页制作教程清华大学出版社 6