计算机网络专业毕业论文网页设计与制作

1、安徽工业经济职业技术学院毕业论文（设计）论文题目： 网页设计与制作 系 部： 计算机科学技术系 专业名称： 计算机网络技术 论文作者： 李婷婷 指导教师： 宋多琳 2014年4月12日摘 要计算机和计算机网络的快速发展，人们对计算机网络的依赖越来越多。人们在网上聊天，在网上请教问题，查阅资料，网上娱乐。除此之外，人们还会在网上进行商务交易、下载信息，有着众多的使用者。尤其是电子商务大大的减少了人们对周围环境的依赖，无论是在哪里上网，都可以浏览到世界各地的各类信息，非常的方便，由于以上的优势，各类网站快速的出现。因此，各个国家集中人力、财力加大对信息技术的产业投入，以适应市场需求。可喜的是在这几

2、十年的发展中我们有了互联网。互联网加大了我们了解世界的眼界，缩紧了人与人之间的距离，这就更容易的使我们走上信息化的道路。在网页的制作与设计中，我学到了很多知识。关键字：计算机网络、互联网、网站、网页的制作与设计AbstractThe rapid development of computer and computer network, people more and more dependence on computer network. People chat on the net, ask questions on the Internet, access to information,

3、online entertainment. In addition, people also can download information on the Internet for business transactions, and with many users. Especially e-commerce greatly reduced people rely on the surrounding environment, where both on the Internet, can browse to all kinds of information from all over t

4、he world, very convenient, as a result of the above advantages, various websites appear rapidly. Countries concentrate manpower, financial resources, therefore, increase in information technology industry input, to adapt to the market demand. The good news is that we have in the decades of developme

5、nt of the Internet. The Internet increases the we know the world vision, tighten the distance between people, its easier to make us on the path of informatization. In the web of production and design, I learned a lot of knowledge.Key words: computer network, Internet, web sites, web production and d

6、esign目 录第1章 网站设计环境介绍51.1因特网和万维网51.1.1何为因特网51.1.2何为万维网51.2 相关术语解释61.3 开发工具运行环境71.3.1静态网页71.3.2HTML：超文本标记语言71.3.3HTML 技术介绍71.4 Dreamweaver81.5 Macromedia Flash81.6 Fireworks91.7 JavaScript91.8 Adobe Photoshop8.0101.9 DIV+CSS101.9.1什么是div101.9.2什么是CSS111.9.3何为样式111.9.4何为层叠111.9.5DIV+CSS简介11第2章 网站的需求和分析

7、122.1建立网站分析122.2 网站的总体设计132.3 校园网站的建设132.3.1从功能分析开始132.3.2 首页页面设计142.3.3结构分析142.3.4 风格定位152.3.5页头设计152.3.6 学校网站简介及banner设计152.3.7 中间内容设计162.3.8页脚16第3章 内页设计163.1主要页面173.2 用户注册183.3用户注册线登陆的代码193.4 教学大纲子页的主要代码20第4章 结论21第5章 结束语22参考文献22第1章 网站设计环境介绍随着计算机应用的发展，网站已经是展现学校形象、企业形象、介绍产品和社会服务、社会发展战略的重要途径。网页制作与设计

8、是科技与艺术的结合，是商业社会的产物。虽然网页设计也是平面设计中的一个方面，但是网页设计有其独特的设计理念与原则，设计网页之前要对其有所了解。1.1因特网和万维网1.1.1 何为因特网大家可能对因特网这个词不会感到陌生，因特网是由多台计算机连接在一起构成的一个计算机网络，在这个网络中，人们可以使用自己的计算机互相传递信息；可以在自己的计算机上存储文件供别人访问；可以利用多台计算机实现分布式应用。Internet规模庞大，遍及全球，一旦上网，你就与全球无以计数的计算机连成一体。1.1.2 何为万维网有上网经历的会知道，在浏览器的地址栏中经常出现“WWW”，比如要访问百度网站就需输入“WWW”。其

9、中的三个“W”是英文World Wide Web的缩写，中文译为万维网。万维网是无数个网络站点和网页的集合，它们在一起构成了因特网最主要的部分（因特网还包括电子邮件、Usenet以及新闻组等应用）。万维网实际上是多媒体的集合，各个部分由超级链接连接而成。我们通常使用浏览器上网观看的内容，就是万维网的内容。比如在浏览器中输入“.”,就可以访问百度网站的首页。网页也称作Web页面或Web文档，它包含了文字、图像、动画和一些具有交互功能的控件。1.2 相关术语解释 1. Internet国际互联网始于美国，又称因特网，是全球性的网络，是一种公用信息的载体，是大众传媒的一种。具有快捷性、普及性，是现今

10、最流行、最受欢迎的传媒之一。这种媒体比以往的任何一种通讯媒体都要迅速。互联网是由一些使用公用语言互相通信的计算机连接而成的网络，即广域网、局域网及单机按照一定的通讯协议组成的国际计算机网络 2. 站点 站点是 内容管理平台主要管理的逻辑单元，站点管理是对一个Internet的站点进行组织、维护和管理的功能集合。站点可分父子站点（站点和虚拟目录），通过站点管理，用户可以根据自己的需要设计出自己网站结构。为了实现多个不同站点、不同地域或不同部门站点的统一管理，内容管理平台提供了多站点集群管理能力，方便进行集团站点与分支站点的统一维护管理，以及站点集群的管理。 3. 超链接 网页上的超链接一般分为三

11、种：一种是绝对URL的超链接。就是统一资源定位符，简单地讲就是网络上的一个站点、网页的完整路径。第二种是相对URL的超链接。如将自己网页上的某一段文字或某标题链接到同一网站的其他网页；还有一种称为同一网页的超链接，这种超链接又叫做书签1.3 开发工具运行环境1.3.1 静态网页静态编程最重要的特征就是由程序自动生成网页，最终形成供浏览器解释的网页。那么如何设计出精美的网页以及动态更新交互的站点，这就需要网页编程与网页制作相结合。本章主要介绍网站建设所必须掌握的基础知识，如网页文档的结构、超链接、表格和表单等基本的HTML标识的写法要求，网页编辑的常用工具，动态网站项目工程的设计步骤要求，以及网

12、站的发布与维护、网站的主机方案等相关知识。1.3.2 HTML：超文本标记语言简意：一种为普通文件中某些字句加上标识的语言，其目的在于运用标记合文件达到预期的效果。 HTML 是在 SGML 定义下的一个描述性的语言，或可说 HTML 是 SGML 的一个应用程式。HTML 不是程式语言，如 C+ 和 Java 之类，它只是标记语言，基本上你只要明白了各种 标记的用法便算学懂了 HTML，HTML 的格式非常简单，只是由文字及标记组合而成，于 编辑部方面，任何文字编辑器都市可以，只要能将档案存为文本格式即可， 用专门的网页编辑工具当然更好。1.3.3 HTML 技术介绍Macromedia公司

13、的Roundtrip HTML技术让用户可以随意导入HTML文件而无需重新设置代码格式，用户还可以利用Dreamweaver清除或重新格式化HTML代码，实现代码的优化。利用Dreamweaver，可以方便地使用动态HTML功能，却不需要写一行行的代码；利用它还可以检查作品在所有流行的平台和浏览器中可能发生的错误。当然,如果不用DW的话,同样可以制作出非常棒的网站来,其实什么样的程序或者HTML代码都可以直接用记事本来写,只不过DW实现起来确实方便一些吧,还有一些其他的网页编辑工具,比如微软的Frontpage等等,只是想说明一下,做网站,DW很好用，但是不是必须的!1.4 Dreamweav

14、er Dreamweaver是创建和管理网页的专业化可视编辑器。使用Dreamweaver可以轻松创建跨平台、跨浏览器的页面。Macromedia的Roundtrip HTML技术允许用户随意导入HTML文档而无需重新设置代码格式。Dreamweaver可以为用户做到：使用动态HTML功能（例如具有动态效果的层和行为）而不用写一行代码。它甚至还可以检查用户的工作成果在所有流行的平台和浏览器中可能发生的错误。Dreamweaver还是一个可以完全自定义的应用程序。用户可以创建自己的对象和命令修改菜单和快捷键，甚至编写JavaScript代码扩展Dreamweaver的行为和属性检查器。至于Dre

15、amweaver工作区是非常灵活的，因此它可以适应各种不同的工作风格和使用水平。常用的Dreamweaver工作区组件有以下若干种： 文档窗口可显示当前文档，文档的外观和浏览器中看到的非常相似。 装载器中包含一些打开和关闭常用检查器和模板的按钮。 对象工具栏包含创建不同类型的对象（例如 图象、表格和层等）的按钮。 属性检查器显示选定对象的属性。 快捷菜单可以使用户对当前选择或区域快速执行某些命令。 可固定的浮动工具栏允许用户将浮动窗口、检查器和工具栏组合在一个或多个选择窗口中。1.5 Macromedia Flash Macromedia Flash用于web站点的交互式的矢量图形和动画的制作

16、，它可制作出用于浏览时的导航控制、制作动画图标、带同步声音的大段的动画，创建出生动富于表现力的网页。Flash中的图形都是矢量的，占据存储空间较少，因而下载时间短，且能很好地适应浏览者不同尺寸的屏幕。Flash 的交互性的大部分设置就在 Action 和 Fs Command 里，通过对 Action 和 Fs Command 的设置，你可以随意的设置各事件发生的效果，还有对变量及函数的设置。1.6 Fireworks Adobe Fireworks可以加速 Web 设计与开发，是一款创建与优化 Web 图像和快速构建网站与 Web 界面原型的理想工具。Fireworks不仅具备编辑矢量图形与

17、位图图像的灵活性， 还提供了一个预先构建资源的公用库, 并可与 Adobe Photoshop、Adobe Dreamweaver和Adobe Flash软件省时集成。 在Fireworks 中将设计迅速转变为模型，或利用来自 Illustrator、Photoshop 和 Flash 的其它资源。 然后直接置入Dreamweaver 中轻松地进行开发与部署。Fireworks特性如下： 矢量编辑与位图编辑。创建和编辑矢量图像与位图图像，并导入和编辑本机 Photoshop 文件。 图像优化。采用预览、跨平台灰度系统预览、选择性 JPEG 压缩和大量导出控件，针对各种交付情况优化图像。 高效的

18、 Photoshop 和 Illustrator 集成。导入 Photoshop 文件， 导入时可保持分层的图层、图层效果和混合模式。 将 Fireworks 文件保存回 Photoshop 格式。 导入 Illustrator文件， 导入时可保持包括图层、组和颜色信息在内的图形完整性。 智能缩放。通过切片缩放智能地缩放矢量图像或位图图像中的按钮与图形元件。 将切片缩放与新的自动形状库相结合, 以加速网站和应用程序的原型构建进度。 简化的 Dreamweaver 和 Flash 集成。复制 Fireworks CS3 中的任意对象, 并直接粘贴到 Dreamweaver CS3 中。 创建可保

19、存为 CSS 和 HTML 的弹出菜单。 将 Fireworks 文件直接导出至 Flash CS3, 导出时可保持矢量、位图、动画和多状态不变, 然后在 Flash CS3 中编辑文件。大家都知道，在网页上的jpg图片如果过大，会严重影响页面的打开速度，Fireworks提供优化图片的功能，即缩小图片的KB，而且不影响画面的质量。由于很多人喜欢用photoshop制作jpg图片，所以它的容量会很大,最终还是要用Fireworks来处理一下。1.7 JavaScriptJavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言。使用它的目的是与HTML超文本标记语言、Java 脚本语

20、言一起实现在一个Web页面中链接多个对象，与Web客户交互作用。从而可以开发客户端的应用程序等。它是通过嵌入或调入在标准的HTML语言中实现的。它的出现弥补了HTML语言的缺陷，它是Java与HTML折衷的选择。1.8 Adobe Photoshop8.0 Photoshop 8.0是目前最流行的图形、图像编辑设计软件，在数码影像处理、图像编辑合成、广告设计、封面设计、美术绘画、网页设计等领域都被广泛地应用。 文字处理更加方便 增加的图层集使图层管理更有序。 新增图像功能：图像的剪切和剪裁更加方便。 将所有工具的选项板改进为工具选项栏放置在工作区顶部，方便先项参数的设置。 为了更方便地用路径绘

21、画，改进增加了几何形状工具，通过选择工具的不同工作模式，可创建路径、几何形状或几何填充区，使得矢量绘图功能得到了加强。1.9 DIV+CSS1.9.1 什么是divdiv标签和其他HTML标签没有什么区别，需要由关闭标志。如果不加入任何css样式，它的效果类似标记。Div示例代码如下：内容把css的扩展属性放入div标签中，就可以控制div容器中的所有HTML元素显示在屏幕上的具体位置，为了实现这种1:1的精确控制，必须给当前的div加上唯一的id，用来区分其他div标记。还有一种情况是：你想让一类或者说几个div具有相同的样式属性时，可以给每个div加上class属性，这样具有同样class

22、属性的div标记样式相同。代码如下：内容内容1.9.2 什么是CSSCSS是英文Cascading Style Sheet缩写形式，中文译为层叠样式表或级联样式表。Web设计者可利用它来定义文档的样式，这里指的文档不仅限于（X）HTML。通过CSS，设计者可控制文档的字体、颜色、图像、表格、链接和布局格式，同时设计者也可以将表示样式外观的信息从内容中分离出来，集中放置在页面的某一部分，甚至可保存为独立的文件，从而减少文件的大小，节省网络的宽带、节约web设计者维护代码的时间。CSS有如此多的好处，掌握和使用好它对于web设计者来说是非常必要的。1.9.3 何为样式样式一词对于我们来说并不陌生，

23、即使尚未接触CSS的人也不难理解样式的含义。当你使用Microsoft Word一类的字处理程序时，几乎总要更爱某些样式以达到更好的效果，比如设定标题为加粗的三号黑体字，每一段的开始流出两个空格等。样式表不能孤立地使用，因为它本身并不包含任何内容信息。当然CSS也不仅仅能同Web文档一起使用，它还能定义XML甚至软件界面的样式。1.9.4 何为层叠与样式相比，了解层叠一词的CSS初学者可能就比较少了，层叠是CSS中的术语，它包含了一系列的规则，浏览器根据这个规则来确定样式应该如何应用到页面的各个元素中去。1.9.5 DIV+CSS简介DIV+CSS是网站标准中常用术语之一，div+css 是一

24、种网页的布局方法,这一种网页布局方法有别于传统的HTML网页设计语言中的表格（table）定位方式,真正地达到了w3c内容与表现相分离。HTML语言自HTML4.01以来，不再发布新版本，原因就在于HTML语言正变得越来越复杂化、专用化。XHTML语言是一种可以将HTML语言标准化，用XHTML语言重写后的HTML页面可以应用许多XML应用技术。使得网页更加容易扩展，适合自动数据交换，并且更加规整。在XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。以下是DIV+CSS的特点简介： 符合W3C标准。微软等公司均为W3C支持者。这一点是最重要的，因为这保证

25、您的网站不会因为将来网络应用的升级而被淘汰。 支持浏览器的向后兼容，也就是无论未来的浏览器大战，胜利的是IE7或者是火狐，您的网站都能很好的兼容。 搜索引擎更加友好。相对与传统的table, 采用DIV+CSS技术的网页，对于搜索引擎的收录更加友好。 样式的调整更加方便。内容和样式的分离，使页面和样式的调整变得更加方便。 现在YAHOO,MSN等国际门户网站，网易，新浪等国内门户网站，和主流的WEB2.0网站，均采用DIV+CSS的框架模式，更加印证了DIV+CSS是大势所趋。 CSS的极大优势表现在简洁的代码，对于一个大型网站来说，可以节省大量带宽，而且众所周知，搜索引擎喜欢清洁的代码。 表

26、现和结构分离，在团队开发中更容易分工合作而减少相互关联性第2章 网站的需求和分析2.1建立网站分析要有一个清晰的网站布局。比如说，导航条是否需要？很多人说那东西很多人在做，就显得没个性，难显示出新潮。但导航条之所以有那么多人在用，是因为它给用户一个明确的布局，便利人们查找所需的信息。从某种角度上说，大家都在用的东西就说明它确实被人类接受。要清楚网站做出来是给每一个人普通用户看的。网站还要定时更新，给人以新意。设计技术的成熟，带来了网页世界的繁荣。尤其在崇尚个性的今天，设计者们将页面设计表示的淋漓尽致。用户欣喜的看到那些僵化的设计模式正在被逐个打破，网页设计充满了朝气。但是，作为网页设计者，不能

27、一味的只追求个性的表现，还必需兼顾到学生和教师的习惯，在表现本身的风格的同时，在功能上更加便利 2.2 网站的总体设计与以往媒体不同，网页除了文字和图像之外，还包含声音、视频和动画等新兴多媒体元素，更借助由代码语言编程所实现的多种交互式效果，增加网页界面的生动性和美观性，也使得网页设计者需要考虑更多页面元素的排布、优化。一般来说，网页的界面主要由下面几个因素构成： 文字：文字元素是信息传达的主体部分。网页中的文字主要包括标题、信息、文字链接、几种主要形式。标题和传统媒体中信息传达的基本作用相同，是内容的简概说明一般比较醒目、优先编排。文字作为占据页面重要比率的元素，同时又是信息重要载体，它的字

28、体、大小、颜色和排布对页面整体设计影响极大 图形：图形在网页界面中具有重要作用。合理的运用图形，可以生动直观、形象地表现设计主题。网页中常用的图形格式包括jpg和gif，这两种格式压缩比高，得到了规范浏览器的支持，下载速度快，具有跨平台的特性，不需要浏览器安装插件即可直接阅览。图形元素包括标题、背景、主图、链接图标四种。 页面版式：版式是网页界面设计的重要组成部分，它将文字、图形等视觉元素进行组合配置，使页面整体视觉效果美观和谐，简单大方，便于阅读，实现信息传达的最佳效果 2.3 校园网站的建设 有了网站设计的基础，校园网站的需求，技术的支持，一级级前面素材等一系列的准备之后可以开始设计一个校

29、园网站了2.3.1从功能分析开始1 学校商标每一所学校都有自己的特色，每一所学校都有自己的个性。在这个高度信息化的社会里，建立自己学校网站是最直接的宣传手段。网站的超时空特性，不仅能让地区内的人们了解学校，更可让世界了解到学校。凭者学校网站，学校就可成为教育百花园中一朵鲜艳的花朵。2 学习平台不同的学生理解世界的方式各不相同，认知世界有诸多方式。网络提供的丰富资源可以使学生寻觅不同的教育方式，各取所需。学校网站允许不同的学生沿着自己的途径，按自己的速度接受教育与学习，学生将有机会享受最佳的教育机会，充分发掘自己的内在潜力，培植独特的个性和人格。3 资源桥梁网络有着巨大的教育资源库，它集全社会的

30、力量，使教育资源无限增长。这对于发达地区和欠发达地区，高投入学校和条件差的学校在获取教育资源的权力上达成平等，使每一位教师和学生都能均等的得到培训和受教育的机会，不再会受到学校水平、教材、教师能力的限制。不仅能极大的提高教学效率，而且能实现教育公平的社会理想。4 教学研究室学校网站与教育类专门网站的有效链接，给学校教学研究带来了一片新天地，各种优秀教案、专家论坛、网络观摩课、各科素材、多媒体课件制作等内容为教师教研提供了平台。降低教研成本、提高效率。 2.3.2 首页页面设计 了基于准备之后的网站策划，就可以开始进行页面设计了，页面设计主要包括创意、色彩和版式三个方面。创意会使网页在众多的竞争

31、对手中脱颖而出；色彩可以使网页获得生命的力量；板式则是和用户沟通的核心，所以这三者缺一不可。一般的网站都需要这样一些版块站名称（logo） 这些版块又可以称之为模块。选择哪些模块，实现哪些功能是否需要添加其他模块都是首页设计制作时首先需要确定的，下面我们就开始具体的首页设计制作工作。2.3.3结构分析根据需求可以知道，在页面上部要有logo和导航，接下来使banner，中间部分的左侧显示若干次要的栏目，右侧则显示部分文章的内容及作品展示，页面最底端为页脚区域，显示一些版权信息。2.3.4 风格定位 打开一个网站，给用户留下第一印象的既不是网站丰富的内容，也不是网站合理的版面布局，而是网站的色彩

32、。色彩对人的视觉效果非常明显，一个网站设计成功与否，在某种程度上取决于设计者对色彩的运用和搭配。因为网页设计属于一种平面效果设计，在排除立体图形、动画效果之外，在平面图上，色彩的冲击力是最强的，它很容易给用户留下深刻的印象。因此，在设计网页时，必须要高度重视色彩的搭配。 2.3.5页头设计网站的页头主要分为两个部分。一是Logo，logo使一张准备好的图片，直接放置在头部容器左侧，调整好位置；二是导航条，网站导航条因为有立体感效果，因此它需要脱离文本流，因此在控制样式的时候要用定位，相对于文本流的定位。网站的导航栏目可以让用户对网站的内容及信息一目了然。 导航分为：网站首页、教学大纲、教学方法

33、、教学内容、教学队伍，教学效果，实习实训，课程效果，教学课件，学习论坛。相关网页进行链接，设计和操作上都非常简单 。 2.3.6 学校网站简介及banner设计Banner可以说是企业网页中一道美丽的风景线。网页中的banner信息代表着一个企业的素质和形象，所以应该表现的大气、端庄而且精细。还更要表现出一个企业应该有的朝气和活力。因此banner图片加文字说明成为首选。实例展示从侧面让客户了解到公司的实力。在首页的版面，先是用Photoshop对网站模板进行切片，然后用DIV+CSS进行排版。2.3.7 中间内容设计 根据浏览者在阅读时经常采用从上到下，从左到右的习惯，主体内容中，将“用户登

34、录”靠左边放，这样能更好地吸引学生和教师的眼球。学院新闻案例采用网页图片切换的形式展现在首页中，使整个首页处于于静于动的画面。右边是 学院信息的公告栏，考试认证，一目了然 让学生，老师更好的了解。 2.3.8页脚 以插入表格的方式设置的，并归属版权。 第3章 内页设计 3.1主要页面本网站是为了给学生和教师提供更好的服务和资源，其子网页有网站首页，教学大纲，教学方法，教学内容，教学队伍，教学效果，实习实训，课程特色，教学课件，学习论坛。主要分布了学院的最新情况，学生和老师的考证，和教学课件的介绍，以下将介绍本网站的主页和主要子页。3.2 用户注册用户注册的主要目的是为了存储用户的个人信息3.3

35、用户注册线登陆的代码 用户登录 论坛登录 账号: 密码:                   联系我们联系人：魏老师 联系电话：联系地址：安徽工业经济职业技术学院 3.4 教学大纲子页的主要代码/div    本课程的教学目的 全面介绍与网页设计制作有关的知识，向学生阐明Web基本工作机制，并使学生具有解决一般网页制作问题的能力。与此同时，通过对网页制作技术和制作工具Dreamweaver MX 2004的学习，使学生对于网页设计中所涉及的相关知识有一个全

36、面的了解。    知识要求： 1了解Internet的过去、现在和将来； 2了解WWW、HTTP、HTML、CSS的定义，概念和作用； 3理解服务器、客户端、浏览器的概念和作用； 4深入理解表格、框架、表单的作用； 5理解HTML语言中的各种文本格式、字符格式、段落设置、列表、标记的作用； 6深入理解HTML语言的各种功能和应用； 7理解CSS样式表中属性的作用和意义； 8理解对象的定义，及含义；   Dreamweaver 网页制作软件，其中主要包括界面、工作流程、建立站点、排版视图、表格布局、文本、图像、层、表单、框架、链接、行为、动画与多媒体、如何

37、提高工作效率以及一系列的实例等；使学生掌握网页的设计流程和设计思想，能够全面运用 Dreamweaver的各项功能、技术制作精美的、较为专业的、静态或动态的网页。    本课程介绍的是应用软件，前大半学 期的内容不需要任何的课程基础，直到介绍到定义数据库数据源的时候才用到Access数据库方面的知识，这跟先修课程Office中的Access有关联。此课程学完之后，紧接着学习ASP编程基础的网页后台技术，因此也要有Dreamweaver软件的前台基础。    第1章、网页制作初识 第2章、创建站点 第3章、网页文本的处理 第4章、网页表格的处理 第5章、网页框架的处理 第6章、网页图像处理 第7章、在网页中使用超链接 第8章、网页表单的处理    教学方法：本课程以面授和上机实践为主。 考核方式：本课程为考试课程，理论占40%，实践技能占60%（实践技能为制作网页实例） 本学院网站以前台静态HTML为主，其中关键是描述DIV+CSS在网页布局中的妙用、巧用。但要真正的去完善一个网站，还需要更多的专业知识，比如说，数据