黄石“双节”主题网站的规划、设计与制作毕业设计论文

《黄石“双节”主题网站的规划、设计与制作毕业设计论文》由会员分享，可在线阅读，更多相关《黄石“双节”主题网站的规划、设计与制作毕业设计论文（19页珍藏版）》请在装配图网上搜索。

1、摘 要在21世纪的今天，随着电脑的普及，信息的交互，让网络成为了人们不可替代的东西。最近几年，越来越多的人在网络上建立的自己的网站，让更多的人们来了解自己的网站，让更多的人民来关注自己，网站的已经成为了一种趋势，人们越来越喜欢在网络上展现自己.Internet正在以强大的冲击力影响着人类的生活。Internet的出现和迅速发展，彻底改变了人们的传统生活方式。Internet现在已经渗透到了人类社会的各个领域，以及人们的日常生活的各个环节。Internet的迅速普及，正是依靠不计其数、丰富多彩的网站。网站是由网页按照一定的链接顺序组成。现在有越来越多的人希望在网络上拥有自己的个人主页或个人网站，

2、来展示个人的个性和特点。以这种廉价的方式获取最大的宣传效果。所以说，网页制作已经成为现代社会中人们的一种基本功，越来越多的人希望学习如何制作网页，同时越来越多的网页制作工具展现在人们面前。在本文中，我会涉及对Dreamweaver软件网页制作的知识的详细讲解，通过设计的过程来学习制作网站的步骤和相关技术。本文就黄石“双节”主题网站的规划、设计与制作，对全过程进行了分析与研究。本文的主要工作集中在：对首页的制作流程进行了详细的阐述、对网站建设中要用到的软件进行了介绍，并对主题网站的需求进行了分析说明、对自己的主题网站从规划到建设进行了详细的分析、使用HTML+Javascript+Access+

3、photoshop技术实现了主题网站的美化和各种功能，其中和数据库的连接使用到了ODBC技术、就网站的设计与建设提出了自己的观点与建议。关键词：HTML；Access；Javascript；分析。目 录摘 要2前 言4第1章.网站需求分析51.1网站的背景51.2网站的简述51.3网站的运行需求5第2章.网站概要设计62.1网页制作所需软件介绍62.1.1 Adobe Dreamweaver CS5 简介62.1.2 Adobe Photoshop CS5 简介62.1.3 Adobe flash 简介62.2网页制作所需技术介绍72.2.1 CSS简介72.2.2 DIV+CSS简介72.3

4、主题网站所需材料72.4网站的总体设计72.4.1确定网站主题72.4.2确定网站形象82.4.3确定网站风格82.4.4确定网站内容82.5规划布局结构92.6功能模块的概述9第3章.网站详细设计103.1站点设计103.2页面的制作11第4章.网站调试和用户使用说明174.1网站的调试174.2用户使用说明17第5章 总 结18致 谢19参考文献20前 言伴随着社会的发展和科学的进步，上网成为越来越多人们的选择。随着互联网的飞速发展，有关网络的技术也层出不穷。如今互联网上的网站如雨后春笋般蓬勃发展，绚丽多彩的主页比比皆是。每个人都有发挥个人才能，挥洒自己个性的网上伊甸园。在hao123神话

5、以后，网站大全类网站又再一次达到顶峰。然而这个模式拷贝成功的网站却寥寥无几。而对于技术薄弱的个人网站来说，似乎网址类网站应该是一个很好的切入点。但是由于搜索的异军突起，网址类网站似乎变得可有可无。 网页实际是一个文件，他存放在世界某个角落的某一台计算机中而这台计算机必须是与互联网相连的。网页经由网址（URL）来识别与存取，当我们在浏览器输入网址后，经过一段复杂而又快速的程序，网页文件会被传送到你的计算机，然后再通过浏览器解释网页的内容，再展示到你的眼前。文字与图片是构成一个网页的两个最基本的元素。可以简单的理解为：文字，就是网页的内容，图片，就是网页的美观。除此之外，网页的元素还包括动画、音乐

6、、程序等等。网页实际上只是一个纯文本文件，它通过各式各样的标记对页面上的文字、图片、表格、声音等元素进行描述（例如字体、颜色、大小），而浏缆器则对这些标记进行解释并生成页面。第1章.网站需求分析1.1网站的背景 2012 9月21日23日黄石市将举办中国黄石第三届国际乒乓节暨第二届国际矿冶文化旅游节，即双节活动。本次节会为国家体育总局乒羽中心、省体育局、省文化厅、省旅游局、省外侨办、黄石市政府共同主办，节会主题是：弘扬矿冶文化，传承国球精髓，推动跨越发展。节会举办时间为：2012年9月21日23日。节会举办宗旨是：打响城市品牌，扩大对外开放，促进跨越发展。节会主要内容包括世界杯女子乒乓球赛、第

7、二届国际矿冶文化研讨会、中国（黄石）国际时装模特表演赛、嘉年华万人乒乓球比赛、激情舞动活力无限黄石市体育舞蹈大赛等活动。黄石矿冶文化旅游节，是由湖北省政府主办，省文化厅、省旅游局和黄石市政府共同承办的国际性大型节会活动。首届矿冶文化旅游节于2010年8月隆重举办，与黄石市建市60周年庆祝大会同步进行，是黄石建市以来规格最高、规模最大的一次文化盛会。1.2网站的简述1.网站的作用：制作黄石“双节”主题网站主要是宣传黄石的矿冶文化、乒乓球文化、旅游文化和景点，展示黄石所取得的各项瞩目的成就。2.网站的规模：主要制作黄石“双节”主题网站的首页以及相关子网站的制作。3.网站特色：详细的介绍了黄石“双节

8、”，主题鲜明，富有时代特色。1.3网站的运行需求 在调试和运行过程中，应该能够让系统正常使用时不出错，若运行时遇到不可恢复的系统错误，也应该保证数据完好无损，对数据的精确度、时间特性、适应性等都有一定要求，要求系统运行时，能够保证数据的正确性、信息的可靠性、实现的高效性、系统的易使用性、系统管理的可维护性、信息的可测试性、数据的复用性、数据的可移植性以及网络互联性。第2章.网站概要设计2.1网页制作所需软件介绍2.1.1 Adobe Dreamweaver CS5 简介Adobe Dreamweaver CS5是一款集网页制作和管理网站于一身的所见即所得网页编辑器，Dreamweaver CS

9、5是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。2.1.2 Adobe Photoshop CS5 简介Adobe Photoshop CS5 Extended 是电影、视频和多媒体领域的专业人士, 使用 3D 和动画的图形和 Web 设计人员, 以及工程和科学领域的专业人士的理想选择。呈现 3D 图像并将它合并到 2D 复合图像中。轻松编辑视频图层上的动画图形, 让时间停下来。以及使用测量、计数和可视化工具, 探查您的图像。 CS5中最闪亮的明星莫过于Photoshop CS5。作为Adobe的核心产品，Pho

10、toshop CS5历来最受关注，Adobe也在2010年4月12日发布了其正式版版。选择Photoshop CS5的理由不仅仅是它会完美兼容Vista和Windows7 ，更重要的是几十个激动人心的全新特性，诸如支持宽屏显示器的新式版面、集20多个窗口于一身的dock、占用面积更小的工具栏、多张照片自动生成全景、灵活的黑白转换、更易调节的选择工具、智能的滤镜、改进的消失点特性、更好的32位HDR图像支持，等等等等。另外，Photoshop从CS5首次开始分为两个版本，分别是常规的标准版和支持3D功能的Extended(扩展)版。 这些组件中我们最熟悉的可能就是Photoshop了，Photo

11、shop CS5有标准版和扩展版两个版本。Photoshop CS5标准版适合摄影师以及印刷设计人员使用，Photoshop CS5扩展版除了包含标准版的功能外还添加了用于创建和编辑 3D 和基于动画的内容的突破性工具。2.1.3 Adobe flash 简介Adobe Flash（原称Macromedia Flash，简称Flash；前身FutureSplash），是 美国 Macromedia公司（现在已被Adobe公司收购）所设计的一种二维动画软件。通常包括Macromedia Flash，用于设计和编辑Flash文档，以及Adobe Flash Player，用于播放Flash文档。2

12、.2网页制作所需技术介绍2.2.1 CSS简介 CSS是英语Cascading Style Sheets（层叠样式表单）的缩写，它是一种用来表现HTML或 XML等文件样式的计算机语言。 CSS目前最新版本为CSS3，能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象盒模型的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。2.2.2 DIV+CSS简介DIV+CSS是网站标准（或称“WEB标准”）中常用术语之一，div+css 是一种网页的布局方

13、法，这一种网页布局方法有别于传统的HTML网页设计语言中的表格（table）定位方式，可实现网页页面内容与表现相分离。XHTML是The Extensible HyperText Markup Language（可扩展超文本标识语言）的缩写。XHTML基于可扩展标记语言（XML），是一种在HTML 基础上优化和改进的的新语言，目的是基于XML应用与强大的数据转换能力，适应未来网络应用更多的需求。在XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。2.3主题网站所需材料 黄石“双节”主题网站的各种文字、图片、视频材料主要是通过在网络上以及报纸上搜集来的。有

14、部分图片是通过Photoshop软件自己制作的。2.4网站的总体设计2.4.1确定网站主题做网站，首先必须要解决的就是网站内容问题，即确定网站的主题。如果自己在某些方面有兴趣，或掌握的资料越多，也可以做一个自己感兴趣的东西。你可以有自己的见解，做出自己的特色。对于内容主题的选择，要做到小而精，主题定位要小，内容要精。不要去试图制作一个包罗万象的站点，这往往会失去网站的特色，也会带来高强度的劳动，给网站的及时更新带来困难。我的网站主题是黄石“双节”。2.4.2确定网站形象网站形象的设计可以从网站标志、网站色彩、网站字体等这些方面着手。网站色彩，网站给人的第一印象来自视觉冲击，不同的色彩搭配产生不

15、同的效果，并可能影响到访问者的情绪。“标准色彩”是指能体现网站形象和延伸内涵的色彩，给人以整体统一的感觉。我的主题网站的色彩确定为以薰衣草紫（#E6E6FA）为主，以蓝色(#0066CC)和白色（#FFF）为辅，给人一种清新、简洁、大方的感觉。网站字体，和标准色彩一样，标准字体是指用于标题、主菜单的特有字体。为了体现网站的特有风格，可以根据自已网站所表达的内涵，选择更贴切的字体。我的主题网站的标准字体是宋体。2.4.3确定网站风格风格是抽象的，是指网站的整体形象给浏览者的综合感受。这个“整体形象”包括网站的标志、色彩、字体、标语等诸多因素。网站是可以平易近人、生动活泼的，也可以是专业严肃的。不

16、管是色彩、技术、文字、布局、还是交互方式，只要你能由此让浏览者明确的分辨出这是你网站独所有的，这就形成了风格。一个人拥有自己独特的风格，是一般人所没有的，就会让人注意到那个人的特别，若那个人的风格是正面的，甚至就会引起别人的羡慕与注意，或是赞赏。就如同一个网站，拥有别的网站所没有的风格，就会让浏览者愿意多停留些时间，细细品尝该站的内容，甚至该站会得到多人的鼓励与注目。风格是有人性的，通过网站的色彩、排版、特效、文字、布局、内容、交互方式可以概括出一个网站的风格；我的主题网站风格是以简洁为主，最大限度的方便浏览者在较短的时间内获取最及时以及最有价值的有关黄石“双节”举办的各种信息。2.4.4确定

17、网站内容我制作的黄石“双节”主题网站主要包括了一些内容：首页、活动安排、志愿者风采、纪录、留言板等网站常用内容，方便大家浏览。2.5规划布局结构 网页布局结构如图2.5.1所示网页的Banner #banner网页的导航栏#nav网页的登录#log网页的主体部分#content网页的脚注#foot（图2.5.1）2.6功能模块的概述黄石“双节”主题网站主要是展现自我的平台。最要是运用了JS特效来使网站更吸引年浏览者的眼球。功能不多，网页也比较简洁明了，主要是关于“两节”的各种信息以及黄石本地的风景图片，目的是宣传黄石的矿冶文化、旅游文化和景点，展示黄石所取得的各项瞩目的成就。网站中的各个导航的

18、主要功能如下：首页：第一时间给别人知道这是一个有特点的宣传黄石“双节”的主题网站，网站使用photoshop图像处理软件设计，里面加入了焦点图，以及黄石的各有名的景点的照片，还有一些有关黄石“双节”的服务信息和动态，有效的宣传了黄石的矿冶旅游文化、方便了广大浏览者对黄石“双节”重要信息的获取。活动安排：主要是宣传黄石“双节”期间所组织的各种活动。黄石“双节”历时多天，要主办的活动也丰富多彩，涉及到经济、文化、旅游等诸多方面。对黄石“双节”期间要组织举办的活动安排进行宣传，可以为浏览者有计划的观看黄石“双节”期间所举行的各种活动提供信息服务。志愿者风采：展示志愿者的风采，传播志愿者的精神。在黄石

19、举办“双节”期间，有很多的志愿者在默默的为“双节”提供服务。如志愿者为外国友人提供翻译，为“双节”活动的场所做保洁等等，这些看似微薄的力量，甚至是不为广大人民群众所知的志愿者活动，却是必要的和重要的。总而言之，黄石“双节”的主办离不开志愿者的无私奉献。纪录：全程纪录黄石“双节”的点点滴滴，为广大浏览者提供“节前”和“节后”的各种相关信息。留言板：留言板以“我为双节建言献策”为主题。主要是为了让浏览者与浏览者提供一个相互交流的平台。浏览者可以在留言板版块各抒己见，发表对黄石双节的期望和看法。第3章网站详细设计3.1站点设计 打开【Adobe Dreamweaver CS5】【站点】【新建站点】；

20、进入【站点设置对象】对话框，点击【站点】选项卡，设置如图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导航栏代码 首页 活动安排 志愿者风采 纪录 留言板 网站登录效果如图3.2.3所示图3.2.3登录界面代码 用户名： 密码： 首页左侧焦点图代码 首页

21、右侧选项卡式面板代码 通告 动态 关于“两节”开幕式现场秩序的通告 关于黄石“两节”期间免除景区(景点)门票的通告 黄石市公安局关于“两节”期间黄石城区部分路段实行交通管制的通告 黄石“两节”引来众多中外客商 页底图片轮播代码 东方山 大冶雷山 黄石磁湖 西塞山 矿山公园 阳新仙岛湖 湘鄂赣烈士陵园 黄石澄月岛 仙岛湖野人岛 网站的脚注效果如图3.2.4所示图3.2.4网页首页效果如图3.2.5所示图3.2.5第4章.网站调试和用户使用说明4.1网站的调试应用程序的调试对编程来说是一项十分重要的工作。当程序有错误时，通过调试将问题找出来，加以解决，其应用的步骤如下：(1)选择要调试的对象或者文

22、件，打开对应文件，代码将显示在Dreamwaver中，然后在Dreamwaver中进行调试。(2)修改某段代码后可一在浏览器中预览结果，如果仍有问题重复(1)。再次反复重复(1)，(2)步骤，直到程序无错误为止。4.2用户使用说明(1)此网站运行的环境为安装有IIS组件的WINDOWS XP或更高版本的操作系统。(2)系统数据库为 Microsoft Office Access。(3)此网站的操作人员要有一定的计算机基础。(4)由于此网站还有许多需要改进的地方，所以在功能及使用范围方面存在一定的局限性。(5)本网站是个人的毕业设计作品，不能与其他个人网站进行对比。(6)本网站的网页已通过Mic

23、rosoft Internet Explorer 8，百度浏览器，世界之窗浏览器，淘宝浏览器等浏览器的测试。第5章 总 结经过一个多月以来的努力，在指导老师和同学之间的相互帮助下我终于顺利的把毕业设计完成了。在这次做毕业设计的过程中，使我深深的了解到自己的不足，有很多东西还有待去了解和学习。我同时翻阅了大量的资料，经过近一段时间的努力，黄石“双节”主题网站的设计与制作告一段落。总结这次黄石“双节”主题网站的设计、制作过程，我使用了目前因特网上比较流行的CSS+DIV网页制作、布局方法及交互式动态网站的设计、制作手段，并利用后台程序完成了网站的动态响应与生成网页的技术。同时也从中学习到了对静态页

24、面的处理风格，色彩搭配，网页布局，页面导航等方面的很多知识。对我来说，我所设计、制作的黄石“双节”主题网站虽然它不是很完美，在网页美工方面存在较大的问题，但也是我用这两年多来所学到的知识和心思去做的。在做网站的过程中，使受益匪浅，这一个多月来也学到了很多。由于我所学的知识水平有限，所以本网站的功能不是很齐全也不是很完善，还有待更新，望大家多多见谅与包含，我会努力学习更多的知识来充实自己，完善自我，相信我以后会做的更好、更理想。致 谢弹指一挥间，大学三年已经接近了尾声。大学三年，生活其实很简单，只是一些读书、写字和考试的周而复始。如果把这种单调的生活看作一场场循环的演出，那么我只是一个安静的演员

25、。这篇毕业论文也称不上什么精彩的台词，只不过是这种循环演出即将告一段落时的谢幕词。但是无论多么安静的演员，无论台下有多少观众，即使是只说给自己听，在他谢幕时也总要感激一些人，是这些人帮助他走上舞台，成功或者不那么成功地“演出”。敲完最后一个字符，重新从头细细阅读早已不陌生的文字，我感触颇多。虽然其中没有什么值得特别炫耀的成果，但对我而言，是宝贵的。它是无数教诲、关爱和帮助的结果。书到用时方恨少，在毕业设计的制作和这篇论文的写作过程中，我深感自己的水平还非常的欠缺，对于一些重大的难题和一些简单的问题不能自己独立的去解决。生命不息，学习不止，人生就是一个不断学习和完善的过程。敢问路在何方?路在脚下

26、!最后，感谢和我共度三年美好大学生活的10级计算机网络班的全体同学。感谢所有的授课老师和指导老师，你们使我终身受益。感谢所有关心、鼓励、支持我的人。参考文献1谭浩强.Web开发应用技术.中国铁道出版社，20092钟欣荣.网站规划建设与管理维护.中国铁道出版社，20093杨学全.SQL Server实例教程.电子工业出版社，20104赵立超.JSP完全实例教程.电子工业出版社，20105齐建玲.网页制作教程.中国水利水电出版社，20066王兴宝.计算机网络技术基础与应用.电子科技大学出版社，20007赖建兴.网络工程概论.清华大学出版社，20098李建青.网站建设与管理维护.清华大学出版社，2009第 19 页 共 19 页