网站设计毕业论文 峡溪漂流网站设计.doc

湖南工业职业技术学院 2011 届项目设计（论文） 峡溪漂流网站设计 院 (系)： 信息工程系 学生姓名： 孟 卓 伟 指导教师： 段傲霜、徐屹、孔岚 专 业： 计算机多媒体技术 班 级： 计媒S08-1班 完成时间： 2010年9月30日星期五2010年8月摘 要伴随着社会的发展和科学的进步，上网成为越来越多人们的选择。随着互联网的飞速发展，有关网络的技术也层出不穷。从静态网页到动态网页的变化也正说明了这一点。掌握动态网页的基本知识，以及动态网页设计原则和设计过程就显得尤为重要。一 、 动态网页的发展伴随着网络的出现，网页逐渐融入人们的生活。快速及时的新闻浏览，五彩缤纷的网上信息，网络与人们的生活息息相关，于是世界上又出现了第三媒体Internet。制作网页是企业和个人的宣传自己的重要手段，同时也是学习者获取学习信息的重要手段，尤其是在教育领域，在素质教育与终身教育成为必然的今天，人们对信息的需求有了更新，更高的要求，而网页由于本身所具有的信息量大，传递快速，没有时空限制等特点恰好满足这种要求。所以网页也逐渐成为一种新兴的教育资源。为了更有效的利用这种资源，本文对动态网页布局设计方面进行了有益的探索。1、网页什么是网页呢？网页实际是一个文件，他存放在世界某个角落的的某一台计算机中而这台计算机必须是与互联网相连的。网页经由网址（URL）来识别与存取，当我们在浏览器输入网址后，经过一段复杂而又快速的程序，网页文件会被传送到你的计算机，然后再通过浏览器解释网页的内容，再展示到你的眼前。文字与图片是构成一个网页的两个最基本的元素。你可以简单的理解为：文字，就是网页的内容，图片，就是网页的美观。除此之外，网页的元素还包括动画、音乐、程序等等。2、网页的类型通常我们看到的网页，都是以 htm 或 html 后缀结尾的文件，俗称 HTML 文件。不同的后缀，代表不同类型的网页文件，如CGI、ASP、PHP、JSP等。关键字：动态网页、网页、网络、htmlABSTRACTAlong with the development of society and the progress of science, the Internet becomes more and more peoples choice. Along with the rapid development of the Internet, the network technology also emerge in endlessly. From the static page to dynamic web changes also suggests that point. Grasp the basic knowledge of dynamic web pages, and dynamic web design principle and design process are particularly important.A dynamic web development,With the Internet, web gradually into peoples life. Timely news browsing, colourful online information, network with peoples life, then again the third world, Internet media. Manufacture enterprise and individual homepage is an important means of propaganda themselves, but also learn the learners access information, especially in education is an important means in quality education and field, lifelong education become inevitable today, the demand of information to the people have the update, and higher requirements and web due to the large amount of itself, fast, and not just to meet this requirement characteristics, etc. So the page will also become a kind of education resources. For more effective utilization of the resources, based on dynamic web page layout design makes a beneficial exploration. 1, webWhat is a web page? Page, he is actually a document in the corner of the world in a computer and the computer must be connected to the Internet. Web via the address (URL) to identify and access, when we enter site in the browser, after a period of complex and fast programs, web documents will be transferred to your computer, and then through the web browser explain to you again, show the eyes.Text and graphics is a web page two most basic elements. You can simply as a web page, is the text, images, and web content is beautiful. In addition, the web page elements include music, animation, procedures, and so on. 2, page typeWe usually see page, is the end or HTML HTM documents suffixes, commonly known as HTML file. Different suffix, representing different types of web documents, such as CGI, ASP, PHP, JSP, etc.Key words:Dynamic pages, web, network, HTML前 言随着信息技术的飞速发展，电子商务、电子政务及办公信息化成为未来的必然趋势，Web在计算机领域得到最为广泛的应用，动态网页的设计也成为Web开发的核心内容。ASP是微软公司开发的服务器端脚本运行环境，是目前开发动态网页的主流技术之一，它简单易学、功能强大且易于扩充，深受Web开发人员的喜爱，常用于开发基于InternetIntranet平台的Web应用程序。互联网应用技术成了这些热门应用的必备知识。 本文主要介绍了动态网页的网页的布局设计，特别是网页的代码编写布局设计。全文分为三章。第1章和第2章介绍峡溪漂流网站的基本设计和峡溪漂流的简介：第3章详细介绍了在Dreamweaver用html语言给网页的布局。 编 者 ：孟卓伟 2010年8月 目 录摘 要2ABSTRACT3前 言4第一章 网站的设计5一、 文件的设置5二、 表格的设计6三、主表格的设计6第二章 网站简介6一、峡溪漂流概述7二、网页设计72.2.1景点拍照72.2.2收集资料72.2.3图片处理7第三章 网页的设计8一、文件的设置8二、布局设计8三 主表格的设计8四 首页的布局9五、二级页面的设计15六、留言页面的设计15七、总结16第一章 网站的设计一、文件的设置1. 在网站根目录中开设images 一个子目录，根据需要再开设images目录中放不同栏目的页面都要用到的公共图片，例如公司的标志、banner 条、菜单、按钮等等。为节约时间并且文件数不是很多的话可以将其它的文件和images文件夹放在一个文件夹里。我就是用的这种方法；如果文件数多，为了以后更好的查找文件应该再建三个文件夹common、temp、mon 子目录中放css、js,、php、include 等公共文件；temp 子目录放客户提供的各种文字图片等等原始资料；media 子目录中放flash, avi, quick time 等多媒体文件 。 2. 文件数量不多，可以将所有的文件都和images放在同一文件夹里；文件数量比较多了，原则上就应该在根目录中按照首页的栏目结构，给每一个栏目开设一个目录，根据需要在每一个栏目的目录中开设一个images 和media 的子目录用以放置此栏目专有的图片和多媒体文件，如果这个栏目的内容特别多，又分出很多下级栏目，可以相应的再开设其他目录。3. 如果开设了temp，则temp 目录中的文件往往会比较多，建议以时间为名称开设目录，将客户陆续提供的资料归类整理。 4. 除非有特殊情况，目录、文件的名称全部用小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符；目录的命名请尽量以英文为指导，不到万不得已不要以拼音作为目录名称，经验证明，用拼音命名的目录往往连一个月后的自己都看不懂。二、表格的设计网页的存在，则必需有一个布局的存在，布局是所有内容的基础，也是整个网页的基础；同时布局设计好坏也决定了一个网页在Internet上的访问速度。所以一个网页好不好看、好不好用很多时候都决定于布局设计方面。因为结构比较简单，我下面采用的是用表格布局。这样对网页的访问速度还是有帮助的。三、主表格的设计这次我设计的网页是一款小巧而精美的网站，所以我考虑到把整个网页的内容都要在显示器上一个屏幕的大小就能显示出来,而现在显示器的分辨率一般为1024*768以上，所以按照这种思路我把最外层的表格设置如下： /td这样网页的内容都一眼就能全部看到了。第二章 网站简介一、峡溪漂流概述宁乡沩山风景名胜区峡溪漂流景区于2006年10月1日正式对外营业。湖南宁乡沩山峡溪漂流风景区地处湖南省宁乡县黄材镇（原崔坪乡）境内，距县城62公里。漂流全长9公里，水位落差985米，急滩21个。本景区采取二人自助漂。境内风清气爽、气候宜人，是旅游避暑胜地；峡溪水质一流、资源丰富、落差大、多、长、刺激、动感、曲折迭宕、深谷幽潭，宜于漂流。景区内主要精华景点有：迎客松、扇子排、情侣树、烽火台、雷打石、狮身人面像等。省会周边近距离内最大最具特色的天然溶洞千佛洞，离此处仅1公里的车程。洞内石钟乳、石笋、石桩千姿百态，鬼斧神工，令人神往；洞外，青山对峙、地形奇峻、风景怡人。这里交通方便，设施齐全，内设高档宾馆、餐厅、烧烤、民俗表演等，吃、住、玩、乐，一应俱全。宁乡沩山峡溪生态旅游有限责任公司以360休闲旅游为理念，着力打造全方位精品：激情漂流、晨漂、夜漂、峡谷探秘、探险、岸降、溯溪、溪降等，日后还拟大规模投资建设农业观光园、少年水库度假村，湖南宁乡沩山峡溪漂流风景区将集餐饮、度假、娱乐、健身于一体，成为生态休闲度假旅游区。驾一叶小舟，乘风破浪，妙趣横生！湖南宁乡沩山峡溪漂流风景区抖动迷人的风姿，迎接海内外各地朋友前来观光、旅游，激情一漂！二、网页设计 确定网站制作栏目，确定界面风格和大致框架结构后，根据风格对图片进行处理，并掌握logo设计的基本方法和设计风格统一的按钮、底纹、边框，确定网站的大致界面。2.2.1景点拍照 峡溪漂流flash网站设计需要运用大量的景点图片，进行具有特色和风格的视觉创意。因此，需要在景点取景，用于点缀、丰富网页。2.2.2收集资料 现场取景拍照受到各种因素的影响，因而导致取景不够全面，因此为了满足网页设计的需求，必须要收集大量的不同角度的相关照片。当然，也必须要收集大量的有关峡溪漂流的其他各方面资料，用以充实网页。2.2.3图片处理 Photoshop具有强大的图像修饰功能。利用这个软件，可以快速修复一张破损的照片，也可以修复照片本身所存在的一些缺陷。为了这些照片能够具有更好的视觉效果，运用Photoshop软件对图像的颜色进行了明暗、色编的调整和校正，使图片的效果更为突出，同时也是图片的风格与网页的风格更为协调统一。第三章 网页的设计一、文件的设置1. 在网站根目录中开设images 一个子目录，根据需要再开设images目录中放不同栏目的页面都要用到的公共图片，例如公司的标志、banner 条、菜单、按钮等等。为节约时间并且文件数不是很多的话可以将其它的文件和images文件夹放在一个文件夹里。我就是用的这种方法；如果文件数多，为了以后更好的查找文件应该再建三个文件夹common、temp、mon 子目录中放css、js,、php、include 等公共文件；temp 子目录放客户提供的各种文字图片等等原始资料；media 子目录中放flash, avi, quick time 等多媒体文件 。 2. 文件数量不多，可以将所有的文件都和images放在同一文件夹里；文件数量比较多了，原则上就应该在根目录中按照首页的栏目结构，给每一个栏目开设一个目录，根据需要在每一个栏目的目录中开设一个images 和media 的子目录用以放置此栏目专有的图片和多媒体文件，如果这个栏目的内容特别多，又分出很多下级栏目，可以相应的再开设其他目录。3. 如果开设了temp，则temp 目录中的文件往往会比较多，建议以时间为名称开设目录，将客户陆续提供的资料归类整理。 4. 除非有特殊情况，目录、文件的名称全部用小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符；目录的命名请尽量以英文为指导，不到万不得已不要以拼音作为目录名称，经验证明，用拼音命名的目录往往连一个月后的自己都看不懂。二、布局设计网页的存在，则必需有一个布局的存在，布局是所有内容的基础，也是整个网页的基础；同时布局设计好坏也决定了一个网页在Internet上的访问速度。所以一个网页好不好看、好不好用很多时候都决定于布局设计方面。因为结构比较简单，我下面采用的是用表格布局。这样对网页的访问速度还是有帮助的。三 主表格的设计这次我设计的网页是一款小巧而精美的网站，所以我考虑到把整个网页的内容都要在显示器上一个屏幕的大小就能显示出来,而现在显示器的分辨率一般为1024*768以上，所以按照这种思路我把最外层的表格设置如下： /td这样网页的内容都一眼就能全部看到了。四 首页的布局首页分为左右两部分，左边是一个flash，右边则是网页的内容介绍。按照一定比例将最外层表格划分为两个单元格，设置如下：  左右设计好后，再根据内容设计表格，当然，为了提高网页的访问速度，表格的嵌套不超过三层。其它设计如下：                              .