当前位置：文档之家› 网页设计报告

网页设计报告

酷轮吧网站

教学部工学一部

专业计算机科学与技术

班级B841102

学号B84110217

姓名乔明

指导教师吕荣鑫张岩

成绩

沈阳航空工业学院北方科技学院

2011年12月

摘要

本次实验是要完成酷轮吧网页的制作，通过对apache和Dreamweaver的运用来实现网页的完整性，要求超链接的完整性，实现多个网页的点击，而且整体布局要求美观大方，能看出酷轮吧网页的整体效果和一些与其相关的内容。

Web站点的设计是展现企业形象、介绍产品和服务、体现企业发展战略的重要途径，因此我们必须明确设计站点的目的和用户需求，从而做出切实可行的设计计划。我们会根据消费者的需求、市场的状况、企业自身的情况等进行综合分析，以“消费者”为中心，而不是以“美术”为中心进行设计规划。通过图片、文字前后叠压所构成的空间层次不太适合网页设计，根据现有浏览器的特点，网页设计适合比较规范、简明的页面，尽管这种叠压排列能产生强节奏的空间层次，视觉效果强烈。网页上常见的是页面上、下、左、右、中位置所产生的空间关系，以及疏密的位置关系所产生的空间层次，这两种位置关系使产生的空间层次富有弹性，同时也让人产生轻松或紧迫的心理感受。

为了成功地设计网站，你必须理解HTML是如何工作的。大多数的网站设计者建议网络新手应从有关HTML的书中去寻找答案，因为用HTML设计网站，可以控制设计的整个过程。我们从中要学习的还有很多很多

关键词：Apache Dreamweaver 酷轮吧网站

前言 (1)

1 系统分析 (2)

1.1系统的开发背景 (2)

1.2系统的需求分析 (2)

1.3系统的实现目标 (2)

2 总体设计 (4)

2.1系统功能分析 (4)

2.2系统模块设计 (4)

2.3系统结构图 (4)

2.4关键技术 (5)

2.5程序环境介绍 (5)

3 详细设计 (7)

3.1网页头部设计 (7)

3.2网页底部设计 (7)

3.3首页页面设计 (8)

3.4平地花式模块设计 (9)

3.5轮滑装备模块设计 (9)

3.6精彩瞬间模块设计 (10)

4 系统测试、编译 (12)

4.1代码测试 (12)

4.2结构功能测试 (12)

结束语 (13)

致谢 (15)

附录Ⅰ顶部页面设计代码 (16)

附录Ⅱ底部页面设计代码 (17)

附录Ⅲ首页页面设计代码 (18)

附录Ⅵ精彩瞬间页面设计代码 (23)

前言

在信息飞速发展的当今社会，网络已经不可或缺。每当我们上网点击形形色色的网页的时候，对我们的视觉是个享受，所以对于我们自身来说把网页制作的美观大方也就很重要。

现在许多公司都拥有自己的网站，他们利用网站来进行宣传、产品资讯发布、招聘等等。随着网页制作技术的流行，很多个人也开始制作个人主页，这些通常是制作者用来自我介绍、展现个性的地方。目前，很多企业在进行网页设计时，网站注重网站外观是否漂亮，有的网页为追求漂亮，用了大量的flash，实际上flash不利于百度蜘蛛的抓取，不利于企业开展网络营销，建议企业在进行网页设计时的时候，不仅要重视它的外观是否漂亮，还要注意网页是否迎合搜索引擎的喜好。也有提供专业企业网站制作的公司，通常这些公司的网站上提供人们生活各个方面的资讯、服务、新闻、旅游、娱乐、经济等。现在的网络上有很多的虚假新闻以及个人言论，严重影响了大众对娱乐界的真是了解，信息化是一场深刻的革命，在社会许多领域对传统的生产、生活和思维方式产生着巨大冲击，并促进着经济和社会的快速和均衡发展。

当今社会网站已经层出不穷，需要我们标新立异，我们要做的就是运用好软件将我们的创新思路表达出来，对于本次网页设计要用到多个软件，也需要了解用法以及活学活用。

1 系统分析

1.1系统的开发背景

当今社会各种极限运动的网站层出不穷，但往往小广告众多，页面也显得相当的复杂，本着实验的原则完成简单的轮滑网页制作，即要求实现对轮滑的起源和它的装备还有一些新的玩法和一些精彩的瞬间的栏目然你能够一手掌握以及布局方面的调控。

1.2系统的需求分析

Apache有多种产品，可以支持SSL技术，支持多个虚拟主机。Apache是以进程为基础的结构，进程要比线程消耗更多的系统开支，不太适合于多处理器环境，因此，在一个Apache Web站点扩容时，通常是增加服务器或扩充群集节点而不是增加处理器。Apache的特点是简单、速度快、性能稳定，并可做代理服务器来使用。

PHP是将程序嵌入到HTML文档中去执行，执行效率比完全生成HTML标记的CGI要高许多；PHP还可以执行编译后代码，编译可以达到加密和优化代码运行，使代码运行更快。

MySQL既能够作为一个单独的应用程序应用在客户端服务器网络环境中，也能够作为一个库而嵌入到其他的软件中提供多语言支持，常见的编码如中文的GB 2312、BIG5，日文的Shift_JIS等都可以用作数据表名和数据列名。

该网页主要包括以下几大功能模块：

(1) 平地花式轮滑：主要是对平地轮滑的简绍和与其相关的一些图片；

(2) 轮滑装备：展示了当今轮滑的一些主流轮滑鞋；；

(3) 精彩瞬间：是对一些热爱轮滑的青年人轮滑的剪辑画面；

1.3系统的实现目标

针对该系统在实践类课程管理方面存在的上述问题，本网站应该达到以下预期目标：

(1) 系统界面友好，操作简单易行。

(2) 全面管理该网站，时时掌握网站内容更新。

(3) 系统前台与后台的管理。

(4) 系统内部控制严密，数据库保密性要好。

2 总体设计

2.1系统功能分析

该轮滑吧网页是为一些热爱轮滑的人们提供他们喜欢的有关轮滑的信息，在这里能勾起人们对轮滑的热爱和自己在轮滑经历中的回忆还有为准备轮滑的人提供一些帮助和建议更好的为轮滑人服务。

首先需要运用Dreamweaver 8来实现表格操作，将大框表达出来实现总体设计，再进行超链接来实现网页的互通。CSS网页表现语言来方便我们修改页面属性，再利用JSP功能实现文字等动态显示。

2.2系统模块设计

本次旅游网页制作运用到Apache，MysqL以及PHP软件。将网站分为几大部分单独操作，其主要功能模块的作用分别如下所述：

(1) 主页：显示导航，以有关轮滑的一些动态的信息；

(2) 轮滑起源：显示导航，并且叙述了轮滑的起源是怎么回事；

(3) 平地花式：显示导航，并且叙述了平地花式的概念还附有相关的图片；

(4) 极限轮滑：显示导航，并且叙述了极限轮滑的概念还附有相关的图片；

(5) 轮滑装备：显示导航，并且展示当今比较流行的轮滑装备的图片；

(6) 精彩瞬间：显示导航，并且显示了一些比较刺激的轮滑表演视频；

2.3系统结构图

系统总体功能结构模块图

根据系统开发对象的实际情况和需要,本系统共分四大功能模块。系统总体功能模块见图2-1。

图2-1 系统总体功能结构图 2.4关键技术

DedeCms ：织梦内容管理系统，以简单、实用、开源而闻名，是国内最知名的PHP 开源网站管理系统，也是使用用户最多的PHP 类CMS 系统，在经历了二年多的发展，目前的版本无论在功能，还是易用性方面，都有了长足的发展，DedeCms 免费版的主要目标用户锁定在个人站长，功能更专注于个人网站或中小型门户的构建，当然也不乏有企业用户和学校等在使用本系统。织梦内容管理系统(DedeCms)基于PHP+MySQL 的技术架构，完全开源加上强大稳定的技术架构，使你无论是目前打算做个小型网站，还是想让网站在不断壮大后系仍能得到随意扩充都有充分的保证。上网搜索dedecms 的相关资料。 Dedecms 模板制作相关资料

2.5程序环境介绍

(1)Apache 简介

Apache 是世界使用排名第一的Web 服务器软件。它可以运行在几乎所有广泛使用的计算机平台上，由于其跨平台和安全性被广泛使用，是最流行的Web 服务器端软件之一。同时Apache 音译为阿帕奇，是北美印第安人的一个部落，叫阿帕奇族，在美国的西南部。也是一个基金会的名称、一种武装直升机等等。

(2)Php 简介

PHP 是一种新型的CGI 程序编写语言,易学易用,运行速度快,可以方便快捷地编写出功能强大,运行速度快,并可同时运行于 Windows 、Unix 、Linux 平台的Web 后台程序,内置了对文件上传、密码认证、Cookies 操作、邮件收发、动态GIF 生成等功能,PHP 直接为很多数据库提供原本的连接,包括Oracle 、Sybase 、Postgres 、Mysql 、Informix 、酷轮吧网页

首

页

轮滑装备

平地花

式

精彩瞬间

Dbase、Solid、Access等,完全支持ODBC接口,用户更换平台时,无需变换PHP代码,可即拿即用.

(3)MySQL简介

MySQL是一个小型关系型数据库管理系统，开发者为瑞典MySQL AB公司。在2008年1月16号被Sun公司收购。而2009年，SUN又被Oracle收购。MySQL是一种关联数据库管理系统，关联数据库将数据保存在不同的表中，而不是将所有数据放在一个大仓库内。这样就增加了速度并提高了灵活性。MySQL的SQL“结构化查询语言”。SQL是用于访问数据库的最常用标准化语言。MySQL软件采用了GPL（GNU 通用公共许可证）。由于其体积小、速度快、总体拥有成本低，尤其是开放源码这一特点，许多中小型网站为了降低网站总体拥有成本而选择了MySQL作为网站数据库。

3 详细设计

根据静态页面效果设计网站模板。在\templets\default目录下创建xxx目录，新建的模板文件都保存在xxx目录下。

由于系统中各个页面都包含页面头和页面底部分，故将页面头与页面底部分保存为单独模板，供其他页面模板调用。

3.1 网页头部设计

(1)实现目标

网页头部为网站页面的公共部分，将其保存为单独模板，供其他模板调用，可以有效的提高的工作效率，体现了系统模块化设计。

功能：

①网站logo

②网站导航。

见下图3-1。

图3-1 网页头部

(2)实现代码见附录Ⅰ

3.2网页底部设计

(1)实现目标

网页底部为网站页面的公共部分，将其保存为单独模板，供其他模板调用，可以有效的提高的工作效率，体现了系统模块化设计。见下图3-2。

图3-2 网页底部

(2)实现代码见附录Ⅱ

3.3首页页面设计

进入网站后，主要查看的功能如下：

1）可以对轮滑起源，平地花式，极限轮滑，轮滑装备，精彩瞬间进行操作。

2）设置快捷工具栏，提高工作效率。

网页总体界面如图3-3。

图3-3 网页总体界面

(2)实现代码见附录Ⅲ

3.4平地花式模块设计

(1)实现目标

当点击进入平地花式模块后，会显示出新的页面，里面有平地花式轮滑的简绍和照片，还有文字介绍。

平地花式模块界面如图3-4。

图3-4 平地花式界面

(2)实现代码见附录Ⅳ

3.5轮滑装备模块设计

(1)实现目标

当点击进入轮滑装备后，会显示出新的页面，里面有当今比较流行的轮滑装备及其照片。

轮滑装备模块界面如图3-5。

图3-5 轮滑装备界面

(2)实现代码见附录Ⅴ

3.6精彩瞬间模块设计

(1)实现目标

当点击进入精彩瞬间模块后，会显示出新的页面，里面有一些轮滑达人的精彩瞬间中的图片。

精彩瞬间模块界面如图3-6。

(2)实现代码见附录Ⅵ

4 系统测试、编译

本系统采取的测试方法是先进行各模块测试,经过修改和调整通过后,进行总体测试.测试结果各项功能均已基本达到设计要求。

4.1代码测试

在系统具体实现时进行仔细测试，在各个模块编写时就开始测试，有利于尽早的发现问题，以减少集成测试时出现错误的机率以及修改源程序的难度。

(1) 使用合法数据进行测试

提交数据时输入符合要求的数据，检验运行结果，确保系统可接收正常数据，能够正常运行。

(2) 使用不合法数据进行调试

在提交时输入一些不符合要求的数据，如在时间的地方输入不是时间型的数据，在数字输入的地方输入非数字数据等等，进行结果调试，确保系统有识别非法数据的能力，同时能够予以拒绝并给出提示。

4.2结构功能测试

经过代码测试确定程序在逻辑上符合要求，并不能验证是否符合具体功能，即是否能够使数据前后一体化，模块间的数据操作统一化，所以还要进行功能测试。

(1) 模块测试

本系统由多个功能模块组成，每一个模块由多个程序组成。这一个阶段的测试由自己独立完成，把各个程序串联起来，经过测试修改，实现各模块之间的连接，并且可以使数据前后操作一致。

(2) 确认测试

这一阶段主要是针对系统的功能、特性及稳定性和适用性进行进一步的测试。该阶段主要是用户进行。由他们确定该系统哪些功能需要修改，哪些数据需要增加备份。针对使用意见，再次完善系统功能并做最终测试。

结束语

通过本次网页设计实验让我基本了解了一些制作简单网页的流程，以及一些例如CSS，JSP网页制作技术的简单应用，和之前制作网页流程不太一样，这次所运用的软件简单易懂，能很快的制作出我们所预期的效果，更加实用。我们要更循序渐进的来学习网页制作方面的知识，先学一学HTML，找本自己能看懂的教材，浏览为主，不用记住所有的概念，只要记住使用原理就行了，这一阶段，估计三天就够了；然后用两天时间学CSS，方法同上；进而再花些时间了解一下JavaScript。

最后实现了旅游网页的制作，刚开始要拿D8来制作大框这方面还是比较简单的，但是到后来链接的时候总是出错，结果后期图片找不到而且一些文字链接到同一地方，修改起来很麻烦，虽然大体上显示出了轮滑吧的概况，但明显运用不足。还有模板之间的嵌套还有待加强，不太会互相之间代码转换，列表总是变不过来，以后还需要多加练习。

非常感谢这次试验，像这些比较实用的技术以后工作的时候肯定或多或少会用到，这对我们来说非常好，比较速成的网站建设工作需要我们不断地练习才能达到客户的需求。

参考文献

[1] 丁淼．网页设计与制作．东南大学出版社出版，2004

[2] 鲁宏伟、汪厚祥．多媒体计算机技术（第三版），电子工业出版社社

[3] 任学文、范严．网页设计与制作，中国科学技术出版社

[4] 吴黎兵、罗云芳．网页设计教程，武汉大学出版社

[5] Geoffrion A M, Krishman R. E-business and management science[J], Management

Science, 2003 (10): 1275-1286

致谢

经过这次课设，总结如下：注重理论知识和动手能力的相辅相成。平时要多动脑和多动手，多上机操作实践。平时多浏览资料。所学的专业知识更新很快，这就要求我们能与时俱进，图书馆里有大量的参考书，另外网上有着更多、更新的知识宝库。如果能很好的利用这两点，对自己的进步会有很大的帮助。虚心请教，当遇到不懂的问题自己想了很多办法却无法解决时，可以请教一些其他的同学或老师，这可以很快的解决问题。

在这次课设中，收获丰富，受益良多；从中学到的知识和吸取的经验教训将会使我的知识很好的加深。没有课设，我们就不可能真正的学好、掌握知识。语言并不重要毕竟它仅仅是工具，用好一个工具并不是一件值得为外人道的事情，主要是了解学习思想。古语说的好：学无止境啊！以后我将更加努力争取取得更好的成绩。

附录Ⅰ顶部页面设计代码

首页

娱乐热点

精彩推荐

明星图片

网页设计美工工作总结报告

网页设计美工工作总结报告时光匆匆，xx年马上离我们远去。回首这走来的一年，似乎去年的圣诞歌还在耳边萦绕，实是感叹时间的飞逝，让自己的脚步显得如此匆忙。可细细品味，却也发觉自己在不轻易间成熟了很多。不知不觉中，充满希望的xx年就伴随着新年伊始临近。回首xx年的工作，有硕果累累的喜悦，也有遇到困难和挫折时惆怅。在医院我所从事的岗位是网络美工，工作主要涉及到网站的广告设计，广告图片替换，页面策划修改;网站的页面制作，样式修改，后期维护等不同工作。能够说凡是需要突出我们网络部及网站整体形象的地方，就需要美工参与工作。设计工作是痛苦并着快乐，每当面临重大的设计任务时充满了压力，开始搜集各种资料(包括文字的、图片的)，接下来寻找设计灵感，沉思、焦灼，经过痛苦煎熬，终于有了满意的创意时倍感轻松。每当经过艰苦的磨砺，自己的劳动成果得到大家的肯定时，便是工作中的快乐!充满了快意。下面是我过去一年来工作回顾，工作主要围绕以下内容： 1、官方网站改版。 2、激光美容网制作与设计。 3、中韩整形美容网站相关样式修改，日常维护，广告设计，内容更新。 4、活动专题，与项目专题的设计。根据文案提供的内容来设计策划专题活动。平均 3天/个。二、经验总结：作为一个网页美工除了要求网页三剑客，ps这些必会的软件之外，还要求对html用得熟练，对asp或php，以及jsp要有初步的了解。

1.表达一定的艺术效果，特别是医疗网站，视觉效果很重要。一个成功的网站应该把网页设计得吸引人，同时又要传达设计思想和情感。网页作为一种媒体，它必须具有一定的艺术感染力，一个平淡无奇、杂乱无章或毫无美感的网页很难会有浏览者喜欢，更不说去浏览它的内容了。 2.使页面结构清晰可读性强经常能够看到这样的页面，上面堆砌了很多内容，却没有考虑它的空间框架，让人无法知晓那些内容才是的。没有流畅的视觉流程，这是典型的没有注意到编排清晰度、可读性的表现。 3.实现不同的功能：在网络这条信息高速公路上，网页最主要的功能就是一种传递信息的手段。所以，它一切内容都是为了这个目的而服务。都要围绕这个中心实行设计。然后，要实现这个功能，网页的美工设计和内容都必须有针对性。所谓针对性，就是指对不同类别的网页要求采用不同的美工艺术效果。 4.网页的内容：网页设计人员美化网页，增加网页设计的艺术感，都是为了网页设计的内容服务的。一般来说，网页的几项基本内容：标题、网站标志、主体内容、导航、广告栏等。 5.确定网站的风格：整形美容行业的网站或者专题，浏览用户群体，一般都是爱美人士。年龄大约在20~45岁之间，对于这类群体，页面设计得浪漫并有艺术感。 6.确定网页之间的链接关系：在网站的部体规划列出来后，就必须要考虑各个网页之间的关系，是星型、树形、网型还是直线链接!

web简单网页课程设计报告

设计内容及要求 <1>使用各种HTML标记，CSS各种常用样式及简单的JavaScript 技术，完成的网页没有错误 <2>首页设置导航栏，命名为 <3>利用CSS技术对网站进行布局，网站风格统一 <4>灵活运用JavaScript使网页生动一、设计思路首页：二、设计结果及分析首页：

1.对于主页，因为不太喜欢类似于搜狐类似的全文检索，更青睐于百度类似比较简洁的页面，随后设计出主页，虽然很简单，但我认为很精练，突出了这次设计的主题。东营： 2.对于主页，因为不太喜欢类似于搜狐类似的全文检索，更青睐于百度类似比较简洁的页面，随后设计出主页，虽然很简单，但我认为很精练，突出了这次设计的主题。

广饶简介：联系： 3.第四章做了根据js的一个互动。可以对前台邮箱的内容进行判断。

图片欣赏： 4.第五章，由于需要用到表格的内容，所以将照片用着种形式呈现出。三、总结通过本次网页的制作过程，我学到了很多实用的东西，也充分了解了editpuls这个软件的强大，对学习了一个学期的课程也有了深入的了解。在这段时间里，一方面，我尝试着讲课本上所学的知识运用到制作中，另一方面，我又时刻在网上学习自己需要的知识，学习到了很多有用的知识。虽然之前对于代码的编辑不是很明白，但这几天不断搜集各种网站模板，不断学习设计思路。虽然呈现出的作品很不完整，基本达不到观赏性和实用性，但我还会不断练习。争取作出属于我的风格的web。五、附录（源代码）

文档之家

网页设计报告

网页设计美工工作总结报告

web简单网页课程设计报告

我大东营

网页制作课程设计报告

Web网页设计实验报告

简单网页制作实验总结报告

网页工作设计综合实验总结报告

网站设计报告

大学网页设计实习报告

web网站设计报告书

网页设计与制作总结

简单网页设计实验总结

网页设计课程设计报告