网页大学计算机个人网页毕业设计论文

题目名称 个人网站的规划与设计学 院 计算机科学技术学院专业年级 计算机科学与技术 08级学生姓名 苏海峰班级学号 专计082班 23号指导教师 徐春艳

二○一一年五月二十二日

摘 要

在网络越来越接近我们生活的当今社会 Internet的应用已普及到了人们生活与工作的各个层面。 网页作为一个宣传企业和展示自我的平台其重要性也越来越受到人们的关注。因此网页制作业逐渐发展成为一种职业。 目前用于网页制作的的软件非常多但根据多位网页制作者多年的经验Dreamweaver+Photoshop+Flash无疑是制作网页的最强组合它们在制作网页效果图、制作网页动画 以及制作Web格式的页面中担任着重要的角色。随着Adobe公司发布的CS3系列设计软件的出现Dreamweaver与Photo shop、 Flash的结合更加紧密使用更加方便。熟练地使用这三种设计软件可以大大提高网页设计和制作的效率 以便制作出精美的网页。商业网页是企业向用户和网名提供产品和服务的一种方式是企业开展电子商务的基础设施和信息平台其网页页面由具体的文字标题、广告语、单位名称、 Email地址等、企业标志、商标、产品图形、和信息菜单等内容组成这些元素的不同展现影响到读者的视觉习惯和心理变化。本文将对一个小型企业设计一个网页 以展现企业形象、介绍产品和服务、体现企业的发展战略。

关键词 网站设计 网页制作 Dreamweaver Photo shop Flash

II

Abstract

In network is more and more close to our life in today's society, theapplication of the Internet has spread to people all aspects of life and work.Page as a propaganda enterprise and show off our platform, its importanceis also more and more attention by people.So manufacturing economygradually developed into a web page a profession.Now used for Webpages of the software is very much,but according to DuoWei Webproducer DuoNian experience,Dreamweaver+Photoshop+Flash isundoubtedly make a Web page, the strongest combination in make a Webpage rendering them,make a Web page animation,and making Web pageas a format of the important role.As issued by the company Adobe CS3series design software,Dreamweaver and the emergence of thecombination of Photoshop,Flash more closely,use more convenient.Skilled in using the three design software,can greatly improve theefficiency of web design and production, so as to make out the exquisiteweb pages.

Commercial web page is the enterprise to the consumers and net provideproducts and services of a way, is the enterprise develop e-commerceinfrastructure and information platform, its web pages from the concretetext (the title,AD,unit name,Email address,etc.),enterprise marks,trademark,product graphics,and information content such as menu ofthese elements, the different influence to readers of the show viewinghabits and psychological changes.This paper will be to a small enterprisedesigning a web page, in order to show the enterprise image, introduceproducts and services,reflect the development of the enterprise strategy.Keywords:website design;Web;Dreamweaver;Photoshop;Flash

III

目 录

摘 要.........................................................................................................................II

Abstract.........................................................................................................................III

第一章 引言...................................................................................................................1

第二章网站设计.............................................................................................................2

2.1 文件设置. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2

2.2 表格的设计. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2

2.3 主表格的设计. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2

第三章网站的简介.........................................................................................................3

3.1 个人网页概述. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3

3.2 网页设计. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3

3.3 图片处理. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3

第四章软件简介.............................................................................................................4

4.1 Dreamweaver简介. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4

4.2 photoshop简介. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .5

4.3 flash简介. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .5

第五章网页内容及代码..................................................................................................7

5.1 主页代码. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .7

5.1.1 主页. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .7

5.1.2代码. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .7

5.2 子页及代码. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .12

5.2.1 子页. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .12

5.2.2 代码. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .12

5.2.3 子页. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .15

5.2.4 代码. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .15

总 结.........................................................................................................................17

致 谢.........................................................................................................................18

参考文献.........................................................................................................................19

IV

第一章 引言

随着二十一世纪新兴科技的飞速发展如今的电子信息产业正在经受着一个巨大的挑战 同时也面临着一个重大的机遇。就目前的科技发展水平而言 电子信息产业的发展已经不能够满足社会化大生产的要求 因此各个国家集中人力、财力加大对信息技术产业的投入 以适应目前需要。可喜的是在这几十年的发展中我们有了互联网。互联网加大了我们了解世界的眼界缩紧了人与人之间的距离这就更容易的使我们走上信息化的道路。随着信息技术的飞速发展 电子商务、 电子政务及办公信息化成为未来的必然趋势Web在计算机领域得到最为广泛的应用 网页的设计也成为Web开发的核心内容。

本文主要介绍了网页的布局设计特别是网页的代码编写布局设计。

全文分为五章。第1章为引言第2章和第3章为网站设计和网站简介第4章详细介绍了在制作过程中用到的软件包括dreamweaver、 photo shop、 flash。第5章主要是主网页的截图及主网页代码和代表性子网页的截图及代码。

1

第二章网站设计

2.1 文件设置

1在网站根目录中开设【毕业设计】 一个子目录根据需要再开设【毕业设计】目录中放不同栏目的页面都要用到的公共图片例如公司的标志、banner条、菜单、按钮等等。为节约时间并且文件数不是很多的话可以将其它的文件和【毕业设计】文件夹放在一个文件夹里。我就是用的这种方法如果文件数多为了以后更好的查找文件应该再建两个文件夹【子页】 . 【图片】 。 【图片】子目录中放所有用到的图片 【子页】子目录放所有子页 多媒体文件存放于【毕业设计】众。

2文件数量不多可以将所有的文件都和【毕业设计】放在同一文件夹里文件数量比较多了原则上就应该在根目录中按照首页的栏目结构给每一个栏目开设一个目录根据需要在每一个栏目的目录中开设一个【毕业设计】多媒体文件如果这个栏目的内容特别多又分出很多下级栏目可以相应的再开设其他目录。

3如果【毕业设计】 目录中的文件往往会比较多建议以时间为名称开设目录将客户陆续提供的资料归类整理。

4除非有特殊情况 目录、文件的名称全部用小写英文字母、数字、下划线的组合其中不得包含汉字、空格和特殊字符 目录的命名请尽量以英文为指导不到万不得已不要以拼音作为目录名称经验证明用拼音命名的目录往往连一个月后的自己都看不懂。

2.2 表格的设计

网页的存在则必需有一个布局的存在布局是所有内容的基础也是整个网页的基础同时布局设计好坏也决定了一个网页在Internet上的访问速度。所以一个网页好不好看、好不好用很多时候都决定于布局设计方面。

因为结构比较简单我下面采用的是用表格布局。这样对网页的访问速度还是有帮助的。

2.3 主表格的设计

这次我设计的网页是一款小巧而精美的网站所以我考虑到把整个网页的内容都要在显示器上一个屏幕的大小就能显示出来,而现在显示器的分辨率一般为1024*768以上所以按照这种思路我把最外层的表格设置如下

<table width="960" height="414" border="0" align="center"cellpadding="0" cellspacing="1">

<tr><td>&nbsp;</td</tr>

</table>

这样网页的内容一眼就能全部看到了。

2

第三章 网站的简介

3.1 个人网页概述

网页是网站中的一「页」 通常是HTML格式文件扩展名为.html 。 网页通常用图像档来提供图画。 网页要使用网页浏览器来阅读。

网页是构成网站的基本元素是承载各种网站应用的平台。通俗的说您的网站就是由网页组成的。如果您只有域名和虚拟主机而没有制作任何网页的话您的客户仍旧无法访问您的网站。

所谓的个人网页就是就是指网页内容是介绍自己的或是以自己的信息为中心不一定是自己做的但强调的是以个人信息为中心。 由个人或单个团体创建、管理的网站页面。其目的在于展示、表达创建人或团体对于某事物的见解或意见、看法、由于实际需求如求职、发布消息、公布通告等。

文字与图片是构成一个网页的两个最基本的元素。你可以简单的理解为文字就是网页的内容 图片就是网页的美观。除此之外 网页的元素还包括动画、音乐、程序等等。

在网页上点击鼠标右键选择菜单中的 “查看源文件” 就可以通过记事本看到网页的实际内容。可以看到 网页实际上只是一个纯文本文件它通过各式各样的标记对页面上的文字、图片、表格、声音等元素进行描述例如字体、颜色、大小 而浏览器则对这些标记进行解释并生成页面于是就得到你现在所看到的画面。为什么在源文件看不到任何图片 网页文件中存放的只是图片的链接位置而图片文件与网页文件是互相独立存放的甚至可以不在同一台计算机上。

通常我们看到的网页都是以htm或html后缀结尾的文件俗称html文件。不同的后缀分别代表不同类型的网页文件例如以CGI 、 ASP 、 PHP 、 JSP甚至其他更多。

3.2 网页设计

确定网站制作栏目确定界面风格和大致框架结构后根据风格对图片进行处理并掌握logo设计的基本方法和设计风格统一的按钮、底纹、边框确定网站的大致界面。

3.3 图片处理

Photoshop具有强大的图像修饰功能。利用这个软件可以快速修复一张破损的照片也可以修复照片本身所存在的一些缺陷。为了这些照片能够具有更好的视觉效果运用Photoshop软件对图像的颜色进行了明暗、色编的调整和校正使图片的效果更为突出 同时也是图片的风格与网页的风格更为协调统一。

3

第四章 软件简介

4. 1 Dreamweaver简介

Dreamweaver是在网页设计与制作领域中用户最多、应用最广、功能最强大的软件随着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

4.2 photoshop简介

Photoshop是世界顶尖级的图像设计与制作工具软件。图像处理是对已有的位图图像进行编辑加工处理以及运用一些特殊效果其重点在于对图像的处理加工。在表现图像中的阴影和色彩的细微变化方面或者进行一些特殊效果处理时使用位图形式是最佳的选择它在这方面的优点是矢量图无法比拟的。

学习内容 Photoshop掌握绘画的基础理论学习色彩原理和选取颜色、范围选取、工具与绘图、 图像编辑、控制图像色彩和色调、使用图层、路径、通道和蒙板的应用、滤镜等。

4.3 flash简介

FLASH简介Flash是一种交互式矢量多媒体技术他的前身是Futureplash早期网上流行的矢量动画插件。后来由于Macromedia公司收购了Future Splash以后便将其改名为Flash2到现在最新的flash4。现在网上已经有成千上万个Flash站点著名的如Macromedia专门ShockRave站点全部采用了Shockwave Flash和Director。可以说Flash已经渐渐成为交互式知量的标准未来网页的一大主流。下面介绍Flash3及4版本的特点

1灵巧的绘图工具Flash本身具有极其灵巧的图形绘制功能更重要的是他能导入专业级绘图工具如Macromedia FreeHand、Adobe Illustrator等绘制的图形并产生翻转、拉伸、擦除、歪斜等效果还可以将图形打碎分成许多单一的元素进行编辑并改变其颜色亮度。 由于Flash提供具有保真技术的绘图工具使图形边缘在经过一系列加工后仍会保持平滑。

2 向量透明效果应用Flash3可以创建透明的图形并可以任意改变层次间透明的不同效果如透明度、倾斜度及透明的颜色等属性。

3具有动画效果的按钮和菜单Flash采用精灵动画的方式在Flash3中可以随意创建按钮、多级弹出式菜单、复选框、 以及复杂的交互式字谜游戏。

4物体的变形和形状的渐变在Flash3中产生物体的变形和形状的渐变非常容易其发生完全由Flash自动生成无须人为地在两个对象间插入关键帧。

5增强对图像的支持Flash3不但可以对导入的图像jpg、 gif产生翻转、拉伸、擦除、歪斜、改变颜色亮度等效果还能利用新的套索工具或魔术棒在图像中选择颜色相同的区域并创建遮罩Mask 将图像打碎分成许多单一的元素进行编辑设置图像的属性如产生平滑效果和质量损失压缩等。

6声音插入Flash3支持同步WAV(Windows)和AIFF(Macinto sh)格式的声音文件和声音的连接你可以用同一个主声道中的一部分来产生丰富的声音效果而无须改变文件量的大小。

7 自定义字体Flash可以处理自定义的字体及其颜色、大小、字间距、行间距、缩进等多种格式。在Flash创建的网页中可以加入眼花缭乱的标题和动态的文本而数据量非常小 比位图的下载速度还快。当然为了防止客户端字体短缺你也可以将特殊字体转换为位图图形。

5