计算机网页设计毕业论文(王胜)
河南商业高等专科学校
2011 届网站设计（论文）
我的网站设计
院(系)：计算机
学生姓名：王胜
指导教师：李奇
专业：计算机应用专业
班级：计应（2）
完成时间：2011年4月5日星期二
2011年4月
摘要
伴随着社会的发展和科学的进步，上网成为越来越多人们的选择。随着互联网的飞速发展，有关网络的技术也层出不穷。从静态网页到动态网页的变化也正说明了这一点。掌握动态网页的基本知识，以及动态网页设计原则和设计过程就显得尤为重要。
一、动态网页的发展
伴随着网络的出现，网页逐渐融入人们的生活。快速及时的新闻浏览，五彩缤纷的网上信息，网络与人们的生活息息相关，于是世界上又出现了第三媒体——Internet。制作网页是企业和个人的宣传自己的重要手段，同时也是学习者获取学习信息的重要手段，尤其是在教育领域，在素质教育与终身教育成为必然的今天，人们对信息的需求有了更新，更高的要求，而网页由于本身所具有的信息量大，传递快速，没有时空限制等特点恰好满足这种要求。所以网页也逐渐成为一种新兴的教育资源。为了更有效的利用这种资源，本文对动态网页布局设计方面进行了有益的探索。
1、网页
什么是网页呢？网页实际是一个文件，他存放在世界某个角落的的某一台计算机中而这台计算机必须是与互联网相连的。网页经由网址（URL）来识别与存取，当我们在浏览器输入网址后，经过一段复杂而又快速的程序，网页文件会被传送到你的计算机，然后再通过浏览器解释网页的内容，再展示到你的眼前。
文字与图片是构成一个网页的两个最基本的元素。你可以简单的理解为：文字，就是网页的内容，图片，就是网页的美观。除此之外，网页的元素还包括动画、音乐、程序等等。
2、网页的类型
通常我们看到的网页，都是以htm 或html 后缀结尾的文件，俗称HTML 文件。不同的后缀，代表不同类型的网页文件，如CGI、ASP、PHP、JSP等。
关键字：动态网页、网页、网络、html
前言
随着信息技术的飞速发展，电子商务、电子政务及办公信息化成为未来的必然趋势，Web在计算机领域得到最为广泛的应用，动态网页的设计也成为Web开发的核心内容。
ASP是微软公司开发的服务器端脚本运行环境，是目前开发动态网页的主流技术之一，它简单易学、功能强大且易于扩充，深受Web开发人员的喜爱，常用于开发基于Internet／Intranet平台的Web应用程序。互联网应用技术成了这些热门应用的必备知识。
本文主要介绍了动态网页的网页的布局设计，特别是网页的代码编写布局设计。
全文分为三章。第1章和第2章介绍峡溪漂流网站的基本设计和峡溪漂流的简介：第3章详细介绍了在Dreamweaver用html语言给网页的布局。
编者：孟卓伟
2010年8月
目录
摘要 (2)
ABSTRACT........................................... 错误！未定义书签。前言.. (3)
第一章网站的设计 (5)
一、文件的设置 (5)
二、表格的设计 (5)
三、主表格的设计 (6)
第二章网站简介 (6)
一、峡溪漂流概述 (6)
二、网页设计 (7)
2.2.1景点拍照 (7)
2.2.2收集资料 (7)
2.2.3图片处理 (7)
第三章网页的设计 (7)
一、文件的设置 (7)
二、布局设计 (8)
三主表格的设计 (8)
四首页的布局 (8)
五、二级页面的设计 (14)
六、留言页面的设计 (14)
七、总结 (15)
第一章网站的设计
一、文件的设置
1. 在网站根目录中开设images 一个子目录，根据需要再开设images目录
中放不同栏目的页面都要用到的公共图片，例如公司的标志、banner 条、菜单、按钮等等。为节约时间并且文件数不是很多的话可以将其它的文件和images文件夹放在一个文件夹里。我就是用的这种方法；如果文件数多，为了以后更好的查找文件应该再建三个文件夹common、temp、media。common 子目录中放css、js,、php、include 等公共文件；temp 子目录放客户提供的各种文字图片等等原始资料；media 子目录中放flash, avi, quick time 等多媒体文件。
2. 文件数量不多，可以将所有的文件都和images放在同一文件夹里；文件
数量比较多了，原则上就应该在根目录中按照首页的栏目结构，给每一个栏目开设一个目录，根据需要在每一个栏目的目录中开设一个images 和media 的子目录用以放置此栏目专有的图片和多媒体文件，如果这个栏目的内容特别多，又分出很多下级栏目，可以相应的再开设其他目录。
3. 如果开设了temp，则temp 目录中的文件往往会比较多，建议以时间为
名称开设目录，将客户陆续提供的资料归类整理。
4. 除非有特殊情况，目录、文件的名称全部用小写英文字母、数字、下划
线的组合，其中不得包含汉字、空格和特殊字符；目录的命名请尽量以英文为指导，不到万不得已不要以拼音作为目录名称，经验证明，用拼音命名的目录往往连一个月后的自己都看不懂。
二、表格的设计
网页的存在，则必需有一个布局的存在，布局是所有内容的基础，也是整个
网页的基础；同时布局设计好坏也决定了一个网页在Internet上的访问速度。所以一个网页好不好看、好不好用很多时候都决定于布局设计方面。
因为结构比较简单，我下面采用的是用表格布局。这样对网页的访问速度还是有帮助的。
三、主表格的设计
这次我设计的网页是一款小巧而精美的网站，所以我考虑到把整个网页的内容都要在显示器上一个屏幕的大小就能显示出来,而现在显示器的分辨率一般为1024*768以上，所以按照这种思路我把最外层的表格设置如下：
这样网页的内容都一眼就能全部看到了。
第二章网站简介
一、峡溪漂流概述
宁乡沩山风景名胜区峡溪漂流景区于2006年10月1日正式对外营业。
湖南宁乡沩山峡溪漂流风景区地处湖南省宁乡县黄材镇（原崔坪乡）境内，距县城62公里。漂流全长9公里，水位落差98．5米，急滩21个。本景区采取二人自助漂。境内风清气爽、气候宜人，是旅游避暑胜地；峡溪水质一流、资源丰富、落差大、多、长、刺激、动感、曲折迭宕、深谷幽潭，宜于漂流。景区内主要精华景点有：迎客松、扇子排、情侣树、烽火台、雷打石、狮身人面像等。
省会周边近距离内最大最具特色的天然溶洞——千佛洞，离此处仅1公里的车程。洞内石钟乳、石笋、石桩千姿百态，鬼斧神工，令人神往；洞外，青山对峙、地形奇峻、风景怡人。这里交通方便，设施齐全，内设高档宾馆、餐厅、烧烤、民俗表演等，吃、住、玩、乐，一应俱全。
宁乡沩山峡溪生态旅游有限责任公司以360°休闲旅游为理念，着力打造全
方位精品：激情漂流、晨漂、夜漂、峡谷探秘、探险、岸降、溯溪、溪降等，日后还拟大规模投资建设农业观光园、少年水库度假村，湖南宁乡沩山峡溪漂流风景区将集餐饮、度假、娱乐、健身于一体，成为生态休闲度假旅游区。驾一叶小舟，乘风破浪，妙趣横生！
湖南宁乡沩山峡溪漂流风景区抖动迷人的风姿，迎接海内外各地朋友前来观光、旅游，激情一漂！
二、网页设计
确定网站制作栏目，确定界面风格和大致框架结构后，根据风格对图片进行处理，并掌握logo设计的基本方法和设计风格统一的按钮、底纹、边框，确定网站的大致界面。
2.2.1景点拍照
峡溪漂流flash网站设计需要运用大量的景点图片，进行具有特色和风格的视觉创意。因此，需要在景点取景，用于点缀、丰富网页。
2.2.2收集资料
现场取景拍照受到各种因素的影响，因而导致取景不够全面，因此为了满足网页设计的需求，必须要收集大量的不同角度的相关照片。当然，也必须要收集大量的有关峡溪漂流的其他各方面资料，用以充实网页。
2.2.3图片处理
Photoshop具有强大的图像修饰功能。利用这个软件，可以快速修复一张破损的照片，也可以修复照片本身所存在的一些缺陷。为了这些照片能够具有更好的视觉效果，运用Photoshop软件对图像的颜色进行了明暗、色编的调整和校正，使图片的效果更为突出，同时也是图片的风格与网页的风格更为协调统一。
第三章网页的设计
一、文件的设置
1. 在网站根目录中开设images 一个子目录，根据需要再开设images目录中放不同栏目的页面都要用到的公共图片，例如公司的标志、banner 条、菜单、按钮等等。为节约时间并且文件数不是很多的话可以将其它的文件和images文件夹放在一个文件夹里。我就是用的这种方法；如果文件数多，为了以后更好的查找文件应该再建三个文件夹common、temp、media。common 子目录中放css、js,、php、include 等公共文件；temp 子目录放客户提供的各种文字图片等等原始资料；media 子目录中放flash, avi, quick time 等多媒体文件。
2. 文件数量不多，可以将所有的文件都和images放在同一文件夹里；文件数量比较多了，原则上就应该在根目录中按照首页的栏目结构，给每一个栏目开设一个目录，根据需要在每一个栏目的目录中开设一个images 和media 的子目录用以放置此栏目专有的图片和多媒体文件，如果这个栏目的内容特别多，又分出很多下级栏目，可以相应的再开设其他目录。
3. 如果开设了temp，则temp 目录中的文件往往会比较多，建议以时间为名称开设目录，将客户陆续提供的资料归类整理。
4. 除非有特殊情况，目录、文件的名称全部用小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符；目录的命名请尽量以英文为指导，不到万不得已不要以拼音作为目录名称，经验证明，用拼音命名的目录往往连一个月后的自己都看不懂。
二、布局设计
网页的存在，则必需有一个布局的存在，布局是所有内容的基础，也是整个网页的基础；同时布局设计好坏也决定了一个网页在Internet上的访问速度。所以一个网页好不好看、好不好用很多时候都决定于布局设计方面。
因为结构比较简单，我下面采用的是用表格布局。这样对网页的访问速度还是有帮助的。
三主表格的设计
这次我设计的网页是一款小巧而精美的网站，所以我考虑到把整个网页的内容都要在显示器上一个屏幕的大小就能显示出来,而现在显示器的分辨率一般为1024*768以上，所以按照这种思路我把最外层的表格设置如下：
这样网页的内容都一眼就能全部看到了。
四首页的布局
首页分为左右两部分，左边是一个flash，右边则是网页的内容介绍。按照一定比例将最外层表格划分为两个单元格，设置如下：
左右设计好后，再根据内容设计表格，当然，为了提高网页的访问速度，表格的嵌套不超过三层。其它设计如下：
五、二级页面的设计
二级页面（除了留言页面）的布局和首页非常相似，只需将右侧的表格做小的修改或删除就可以了。
六、留言页面的设计
因留言页面涉及到文本的输入，所以要在页面中设计文本输入框，单行文本域设计如下：
多行文本域设计如下：
左侧内容的显示是在每一个表格中显示出来不同内容的，所以设计如下：
| 主 题： | class="STYLE15"> |
| 留言内容： | |
| 时 间： | |
| 回 复： | |
七、总结
网站的整体布局已经基本出来了，只需要将内容加进去就是一个完整的网站了。
在上述所说的的布局中，全部是使用的代码，当然这种布局不是最简单、实用的方法，DW中的布局可视化设计是一个十分不错的选择，当然完全的窗口操
作会给后面的数据添加带来很多的不便，所以，设计和代码结合是我觉得最实用也是最好用的方法