网页制作毕业设计论文.docx

网页制作毕业设计论文.docx

《网页制作毕业设计论文.docx》由会员分享，可在线阅读，更多相关《网页制作毕业设计论文.docx（19页珍藏版）》请在冰豆网上搜索。

网页制作毕业设计论文

综合设计

日期2012年12月26日

摘要

在21世纪的今天，随着电脑的普及，信息的交互，让网络成为了人们不可替代的东西。

最近几年，越来越多的人在网络上建立的自己的网站，让更多的人们来了解自己的网站，让更多的人民来关注自己，网站的已经成为了一种趋势，人们越来越喜欢在网络上展现自己.Internet正在以强大的冲击力影响着人类的生活。

Internet的出现和迅速发展，彻底改变了人们的传统生活方式。

Internet现在已经渗透到了人类社会的各个领域，以及人们的日常生活的各个环节。

Internet的迅速普及，正是依靠不计其数、丰富多彩的网站。

网站是由网页按照一定的链接顺序组成。

现在有越来越多的人希望在网络上拥有自己的个人主页或个人网站，来展示个人的个性和特点。

以这种廉价的方式获取最大的宣传效果。

所以说，网页制作已经成为现代社会中人们的一种基本功，越来越多的人希望学习如何制作网页，同时越来越多的网页制作工具展现在人们面前。

在本文中，我会涉及对Dreamweaver软件网页制作的知识的详细讲解，通过设计的过程来学习制作网站的步骤和相关技术。

本文就黄石“双节”主题网站的规划、设计与制作，对全过程进行了分析与研究。

本文的主要工作集中在：

对首页的制作流程进行了详细的阐述、对网站建设中要用到的软件进行了介绍，并对主题网站的需求进行了分析说明、对自己的主题网站从规划到建设进行了详细的分析、使用HTML+Javascript+Access+photoshop技术实现了主题网站的美化和各种功能，其中和数据库的连接使用到了ODBC技术、就网站的设计与建设提出了自己的观点与建议。

关键词：

HTML；Access；Javascript；分析。

目录

摘要2

前言4

第1章.网站需求分析5

1.1网站的背景5

1.2网站的简述5

1.3网站的运行需求5

第2章.网站概要设计6

2.1网页制作所需软件介绍6

2.1.1AdobeDreamweaverCS5简介6

2.1.2AdobePhotoshopCS5简介6

2.1.3Adobeflash简介6

2.2网页制作所需技术介绍7

2.2.1CSS简介7

2.2.2DIV+CSS简介7

2.3主题网站所需材料7

2.4网站的总体设计7

2.4.1确定网站主题7

2.4.2确定网站形象8

2.4.3确定网站风格8

2.4.4确定网站内容8

2.5规划布局结构9

2.6功能模块的概述9

第3章.网站详细设计10

3.1站点设计10

3.2页面的制作11

第4章.网站调试和用户使用说明17

4.1网站的调试17

4.2用户使用说明17

第5章总结18

致谢19

参考文献20

前言

伴随着社会的发展和科学的进步，上网成为越来越多人们的选择。

随着互联网的飞速发展，有关网络的技术也层出不穷。

如今互联网上的网站如雨后春笋般蓬勃发展，绚丽多彩的主页比比皆是。

每个人都有发挥个人才能，挥洒自己个性的网上伊甸园。

在hao123神话以后，网站大全类网站又再一次达到顶峰。

然而这个模式拷贝成功的网站却寥寥无几。

而对于技术薄弱的个人网站来说，似乎网址类网站应该是一个很好的切入点。

但是由于搜索的异军突起，网址类网站似乎变得可有可无。

网页实际是一个文件，他存放在世界某个角落的某一台计算机中而这台计算机必须是与互联网相连的。

网页经由网址（URL）来识别与存取，当我们在浏览器输入网址后，经过一段复杂而又快速的程序，网页文件会被传送到你的计算机，然后再通过浏览器解释网页的内容，再展示到你的眼前。

文字与图片是构成一个网页的两个最基本的元素。

可以简单的理解为：

文字，就是网页的内容，图片，就是网页的美观。

除此之外，网页的元素还包括动画、音乐、程序等等。

网页实际上只是一个纯文本文件，它通过各式各样的标记对页面上的文字、图片、表格、声音等元素进行描述（例如字体、颜色、大小），而浏缆器则对这些标记进行解释并生成页面。

第1章.网站需求分析

1.1网站的背景

20129月21日—23日黄石市将举办"中国·黄石第三届国际乒乓节暨第二届国际矿冶文化旅游节"，即"双节"活动。

本次节会为国家体育总局乒羽中心、省体育局、省文化厅、省旅游局、省外侨办、黄石市政府共同主办，节会主题是：

弘扬矿冶文化，传承国球精髓，推动跨越发展。

节会举办时间为：

2012年9月21日—23日。

节会举办宗旨是：

打响城市品牌，扩大对外开放，促进跨越发展。

节会主要内容包括世界杯女子乒乓球赛、第二届国际矿冶文化研讨会、中国（黄石）国际时装模特表演赛、"嘉年华"万人乒乓球比赛、"激情舞动·活力无限"黄石市体育舞蹈大赛等活动。

黄石矿冶文化旅游节，是由湖北省政府主办，省文化厅、省旅游局和黄石市政府共同承办的国际性大型节会活动。

首届矿冶文化旅游节于2010年8月隆重举办，与黄石市建市60周年庆祝大会同步进行，是黄石建市以来规格最高、规模最大的一次文化盛会。

1.2网站的简述

1.网站的作用：

制作黄石“双节”主题网站主要是宣传黄石的矿冶文化、乒乓球文化、旅游文化和景点，展示黄石所取得的各项瞩目的成就。

2.网站的规模：

主要制作黄石“双节”主题网站的首页以及相关子网站的制作。

3.网站特色：

详细的介绍了黄石“双节”，主题鲜明，富有时代特色。

1.3网站的运行需求

在调试和运行过程中，应该能够让系统正常使用时不出错，若运行时遇到不可恢复的系统错误，也应该保证数据完好无损，对数据的精确度、时间特性、适应性等都有一定要求，要求系统运行时，能够保证数据的正确性、信息的可靠性、实现的高效性、系统的易使用性、系统管理的可维护性、信息的可测试性、数据的复用性、数据的可移植性以及网络互联性。

第2章.网站概要设计

2.1网页制作所需软件介绍

2.1.1AdobeDreamweaverCS5简介

AdobeDreamweaverCS5是一款集网页制作和管理网站于一身的所见即所得网页编辑器，DreamweaverCS5是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。

2.1.2AdobePhotoshopCS5简介

AdobePhotoshopCS5Extended是电影、视频和多媒体领域的专业人士,使用3D和动画的图形和Web设计人员,以及工程和科学领域的专业人士的理想选择。

呈现3D图像并将它合并到2D复合图像中。

轻松编辑视频图层上的动画图形,让时间停下来。

以及使用测量、计数和可视化工具,探查您的图像。

CS5中最闪亮的明星莫过于PhotoshopCS5。

作为Adobe的核心产品，PhotoshopCS5历来最受关注，Adobe也在2010年4月12日发布了其正式版版。

选择PhotoshopCS5的理由不仅仅是它会完美兼容Vista和Windows7，更重要的是几十个激动人心的全新特性，诸如支持宽屏显示器的新式版面、集20多个窗口于一身的dock、占用面积更小的工具栏、多张照片自动生成全景、灵活的黑白转换、更易调节的选择工具、智能的滤镜、改进的消失点特性、更好的32位HDR图像支持，等等等等。

另外，Photoshop从CS5首次开始分为两个版本，分别是常规的标准版和支持3D功能的Extended（扩展）版。

这些组件中我们最熟悉的可能就是Photoshop了，PhotoshopCS5有标准版和扩展版两个版本。

PhotoshopCS5标准版适合摄影师以及印刷设计人员使用，PhotoshopCS5扩展版除了包含标准版的功能外还添加了用于创建和编辑3D和基于动画的内容的突破性工具。

2.1.3Adobeflash简介

AdobeFlash（原称MacromediaFlash，简称Flash；前身FutureSplash），是美国Macromedia公司（现在已被Adobe公司收购）所设计的一种二维动画软件。

通常包括MacromediaFlash，用于设计和编辑Flash文档，以及AdobeFlashPlayer，用于播放Flash文档。

2.2网页制作所需技术介绍

2.2.1CSS简介

CSS是英语CascadingStyleSheets（层叠样式表单）的缩写，它是一种用来表现HTML或XML等文件样式的计算机语言。

CSS目前最新版本为CSS3，能够真正做到网页表现与内容分离的一种样式设计语言。

相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象盒模型的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。

2.2.2DIV+CSS简介

DIV+CSS是网站标准（或称“WEB标准”）中常用术语之一，div+css是一种网页的布局方法，这一种网页布局方法有别于传统的HTML网页设计语言中的表格（table）定位方式，可实现网页页面内容与表现相分离。

XHTML是TheExtensibleHyperTextMarkupLanguage（可扩展超文本标识语言）的缩写。

XHTML基于可扩展标记语言（XML），是一种在HTML基础上优化和改进的的新语言，目的是基于XML应用与强大的数据转换能力，适应未来网络应用更多的需求。

在XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。

2.3主题网站所需材料

黄石“双节”主题网站的各种文字、图片、视频材料主要是通过在网络上以及报纸上搜集来的。

有部分图片是通过Photoshop软件自己制作的。

2.4网站的总体设计

2.4.1确定网站主题

做网站，首先必须要解决的就是网站内容问题，即确定网站的主题。

如果自己在某些方面有兴趣，或掌握的资料越多，也可以做一个自己感兴趣的东西。

你可以有自己的见解，做出自己的特色。

对于内容主题的选择，要做到小而精，主题定位要小，内容要精。

不要去试图制作一个包罗万象的站点，这往往会失去网站的特色，也会带来高强度的劳动，给网站的及时更新带来困难。

我的网站主题是黄石“双节”。

2.4.2确定网站形象

网站形象的设计可以从网站标志、网站色彩、网站字体等这些方面着手。

网站色彩，网站给人的第一印象来自视觉冲击，不同的色彩搭配产生不同的效果，并可能影响到访问者的情绪。

“标准色彩”是指能体现网站形象和延伸内涵的色彩，给人以整体统一的感觉。

我的主题网站的色彩确定为以薰衣草紫（#E6E6FA）为主，以蓝色（#0066CC）和白色（#FFF）为辅，给人一种清新、简洁、大方的感觉。

网站字体，和标准色彩一样，标准字体是指用于标题、主菜单的特有字体。

为了体现网站的特有风格，可以根据自已网站所表达的内涵，选择更贴切的字体。

我的主题网站的标准字体是宋体。

2.4.3确定网站风格

风格是抽象的，是指网站的整体形象给浏览者的综合感受。

这个“整体形象”包括网站的标志、色彩、字体、标语等诸多因素。

网站是可以平易近人、生动活泼的，也可以是专业严肃的。

不管是色彩、技术、文字、布局、还是交互方式，只要你能由此让浏览者明确的分辨出这是你网站独所有的，这就形成了风格。

一个人拥有自己独特的风格，是一般人所没有的，就会让人注意到那个人的特别，若那个人的风格是正面的，甚至就会引起别人的羡慕与注意，或是赞赏。

就如同一个网站，拥有别的网站所没有的风格，就会让浏览者愿意多停留些时间，细细品尝该站的内容，甚至该站会得到多人的鼓励与注目。

风格是有人性的，通过网站的色彩、排版、特效、文字、布局、内容、交互方式可以概括出一个网站的风格；我的主题网站风格是以简洁为主，最大限度的方便浏览者在较短的时间内获取最及时以及最有价值的有关黄石“双节”举办的各种信息。

2.4.4确定网站内容

我制作的黄石“双节”主题网站主要包括了一些内容：

首页、活动安排、志愿者风采、纪录、留言板等网站常用内容，方便大家浏览。

2.5规划布局结构

网页布局结构如图2.5.1所示

网页的Banner#banner

网页的导航栏#nav

网页的登录#log

网页的主体部分#content

网页的脚注#foot

（图2.5.1）

2.6功能模块的概述

黄石“双节”主题网站主要是展现自我的平台。

最要是运用了JS特效来使网站更吸引年浏览者的眼球。

功能不多，网页也比较简洁明了，主要是关于“两节”的各种信息以及黄石本地的风景图片，目的是宣传黄石的矿冶文化、旅游文化和景点，展示黄石所取得的各项瞩目的成就。

网站中的各个导航的主要功能如下：

首页：

第一时间给别人知道这是一个有特点的宣传黄石“双节”的主题网站，网站使用photoshop图像处理软件设计，里面加入了焦点图，以及黄石的各有名的景点的照片，还有一些有关黄石“双节”的服务信息和动态，有效的宣传了黄石的矿冶旅游文化、方便了广大浏览者对黄石“双节”重要信息的获取。

活动安排：

主要是宣传黄石“双节”期间所组织的各种活动。

黄石“双节”历时多天，要主办的活动也丰富多彩，涉及到经济、文化、旅游等诸多方面。

对黄石“双节”期间要组织举办的活动安排进行宣传，可以为浏览者有计划的观看黄石“双节”期间所举行的各种活动提供信息服务。

志愿者风采：

展示志愿者的风采，传播志愿者的精神。

在黄石举办“双节”期间，有很多的志愿者在默默的为“双节”提供服务。

如志愿者为外国友人提供翻译，为“双节”活动的场所做保洁等等，这些看似微薄的力量，甚至是不为广大人民群众所知的志愿者活动，却是必要的和重要的。

总而言之，黄石“双节”的主办离不开志愿者的无私奉献。

纪录：

全程纪录黄石“双节”的点点滴滴，为广大浏览者提供“节前”和“节后”的各种相关信息。

留言板：

留言板以“我为双节建言献策”为主题。

主要是为了让浏览者与浏览者提供一个相互交流的平台。

浏览者可以在留言板版块各抒己见，发表对黄石双节的期望和看法。

第3章网站详细设计

3.1站点设计

打开【AdobeDreamweaverCS5】→【站点】→【新建站点】；

进入【站点设置对象】对话框，点击【站点】选项卡，设置如图3.1.1所示：

站点名称

shuangjie

本地站点文件夹

F:

\huangshi\

图3.1.1

图

3.1.2

点击【保存】按钮完成站点设置。

完成后右下角的站点窗口会显示一个新的站点.如图3.1.3所示

图3.1.3

3.2页面的制作

网站前台主要页面一共有5个，分别是：

首页、活动安排、志愿者风采、纪录、留言板。

首页banner如图3.2.1所示

图3.2.1

首页导航栏效果如图3.2.2所示

图3.2.2

导航栏代码

• 首页
• 活动安排
• 志愿者风采
• 纪录
• 留言板