网页设计_期末报告

2014-2015学年上学期

《网页设计》课程期末大作业说明

1.题目：*****网站设计与实现（根据学期初自已的选题确定）

其中应包含以下内容：

(1)网站设计概述

?需要掌握的基本技术及它们的作用

?平台的搭建和开发工具的选择

?你的设计目标：解释你设计的主题和目标

(2)典型网站设计分析及学习

?以期中作业为基础，分析经典网站的设计

?强调两点：文档标记的标准化与格式化，布局方式

?从中你学到了什么？文件的组织结构、图片的大小、命名等，请自己

思考展开

(3)设计与实现

?完成你自己的设计

?整体布局思路：流式布局或固定布局？布局采用什么技术？

?包含适当的代码及截图

?代码请保持良好的格式

?页面中的支撑文本可以任取样本文字

(4)总结

?从这门课你学到了什么？

?还有什么需要在今后的学习中加以拓展？

?WEB上的一些新的发展趋势，如HTML5你如何看？

2.请提交：

(1)设计报告（A4纸打印）

?word文档

?格式和基本内容要求（见附件1）

(2)电子文件（以下文件压缩打包，以“学号_姓名”方式命名）

?HTML文档：index.html

?CSS文件：final.css

?图片文件夹img：

?设计报告的电子版：学号_姓名.doc

3.提交时间和方式：

(1)完成时间表：

?2015年1月8日：提交最后完成的版本

(2)地点：

?上课地点

4.附件：报告格式

《网页设计》期末课程设计报告

题目：灵异世界网站

姓名：许蕾

学号：12990255

日期：2014年12月30日

摘要

请解释在这门课程的学习过程中，你学到了哪些知识？以及如何运用这些知识，来进行设计与实现的。

随着大三上学期正式的开始，抱着懵懂的心态，选择了网页设计与制作这门课程，曾记得第一节的课的时候，老师让每一位同学提一个问题，上完第一节课似乎我应该大概明白我们这学期学习网站关于哪方面的知识，接下来，在听完老师讲课的基础上，自己学习w3Cschool在线学习网站上关于html标记语言和css样式方面的教程。对此感觉这学期更加明白了网站标记与设计方面的理解，也增添了我对于网站学习的热情。

本学期学习到的知识有：

1.简单的html标记；例如

;

;

; ;等等

方面的标签，利用这些标签基本上可以实现了一些网页上的基本功能，对于他们分别的属性

也有所了了解，在设计你网页的时候，应用的更加得心应手。

2.布局方式上从原有的知识结构中只能用表格来规划整个网页的思想中解脱出来，了解了关于

div标签的浮动布局，“层”的应用，使整个网页布局显得不那么呆板，而是更加的灵活。因

此受益匪浅啊。

3.css样式

基于对于css样式的初步了解，使我在网页设计上减少了很多不必要时间的浪费，而且很多

功能实现起来比以前的方式更加的方便与灵活。但是关于css样式只是处于基本的了解层面，

更多的知识，我想我以后会在仔细的钻研。

你最初的目标是设计一个***类型的网站，以此为目标，你做了哪些工作？最终是否完成了既定目标？

我最初的目标是设计一个关于灵异世界方面的网站，以此为目标，我首先展开了对于灵异世界方面知识的收集，刚开始的时候是想按照自己的想法来设计的，后来觉得应该先有模仿，再有创新。因此接下来开始收集各种关于灵异世界网站，研究他们采用的布局和样式，在此期间，遇到了很多的问题，由于对网页代码，以及动态网站的了解是一片空白，因此在研究的时候真是白爪挠心，非常的痛苦，后来恍然大悟，学术这个东西是需要时间来慢慢研究的，不能急于求成，因此对此暂且放弃。开始着重关注css样式和页面设计这方面的东西，根据老师的推荐——禅意花园，在这个很好的学习css样式的网站中遨游，最终做出了自己还是比较满意的网站了吧。

目录

1. 网站设计概述 4 页

2. 典型网站设计分析与学习5页

3. 设计与实现 6 页

4. 总结11 页

1. 网站设计概述

在大一的时候，我们已经初步接触网页设计，在那个时候只是单纯的介绍了一下关于html语言一些知识，知识能够将网页的大体布局格式，各种各样的标签和表格，基本都可以表示出来，后来通过学习一些简单的代码，基本上可以简单的实现一下走马灯等效果，而这一切，全都是静态网页的设计，而且并不是很美观，这个学期大致对于网页的设计又有些了解，例如将页面的美化，这就让我们受益匪浅，使我们设计网页设计的时候得心应手，锦上添花。

关于网站设计，我觉得我暂时还没有太多的发言权，但是可以简单的说一下我对于网站设计的一些看法。

网站设计的首要问题就是网页的整体的布局，从刚开始的table（就是所谓的表格布局），到现如今层，浮动布局，css样式的美化，使我们的布局更加多种多样，实现的效果更加的丰富多彩。

下面我阐述一下，我在翻阅《dreamweaver》时的一些关于网页设计的见解。在具体的制作一个网页时我了解到一个优秀的网页设计应该具备一些基本原则。

首先，要确定网页设计的内容，一个优秀的网站要有一个明确的主题。整个网站围绕这个主题，也就是你在网页设计之前要明确你这个网站有什么目的，用什么来做，所有的页面都是围绕着这个内容来制作，有了明确的内容对排版有很重要的作用；其次要了解你网站所在行业的客户，及你的网页属于哪个类别。用户是一个网站成败的关键，如果用户花很多时间进入你的网站很有可能用户会立即关掉你的网站，或者你网站操作很不方便用户也会，马上离开，这种网站是很失败的设计，只会让用户失望的离去。在完成以上的基本内容之后网页的基本框架便成形了。

下面要开始的便是网页的美化工作。内容是整个网页的核心。在网页设计之前必须明确网页的内容安排。优秀的网页设计是要建立在平凡的基础上的，然后再具体的规划一个网页时，可以用树状结构先把每个页面的内容大纲列出来，尤其要制作一个大的网站（有很多页面的）时候，特别需要把这个架构回话好，也要考虑到以后可能的扩充性，免得做好以后又要一改再改整个网站的架构，很浪费时间和财力。大纲列出来后，还必须考虑每个页面之间的链接关系，是星形，树形，或者是网形链接。这也是判别一个网站优劣的重要标志。链接混乱，层次不清的站点会造成浏览困难，影响内容的发挥。框架定下来了，然后开始一步步有条理，有次序地做来，就胸有成竹得多，也会为主页将来发展打下良好的基础。下一步，就以动手制作具体的内容了，题材选定，接下来就开始往主页里面填内容。

这样网站的搭建就会慢慢实现回来。

2. 典型网站设计分析与学习

对你选择的一个或多个网站进行逆向分析及学习，以期中作业为基础。从中你学到了什么？

从中我学习到了css样式怎么样设计，怎么样布局。参考这个网站我做出了自己的网站。

3. 设计与实现

你的设计与实现：通过代码、截图、文字等多种方式加以表述。

这是我的css样式：

/*

Credit: #

*/

body {

margin: 0px;

padding: 0px;

color: #a2979e;

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 12px;

line-height: 1.5em;

background-color: #0f020b;

background-image: url(images/templatemo_body.psd);

background-repeat: no-repeat;

background-position: top

}

a, a:link, a:visited { color: #ff58ff; text-decoration: none; }

a:hover { text-decoration: underline; }

p { margin: 0 0 15px 0; padding: 0; }

img { border: none; }

h1, h2, h3, h4, h5, h6 { color: #fff; }

h1 { font-size: 30px; font-weight: normal; margin: 0 0 20px 0; padding: 5px 0; }

h2 { font-size: 28px; font-weight: normal; padding-bottom: 20px; margin: 0 0 30px 0; font-weight: normal; background: url(images/templatemo_divider.png) bottom repeat-x } h3 { font-size: 24px; margin: 0 0 30px 0; padding: 0; padding: 0; font-weight: normal; }

h4 { font-size: 16px; margin: 0 0 30px 0; padding: 0; }

h5 { font-size: 12px; margin: 0 0 10px 0; padding: 0; }

.cleaner { clear: both; width: 100%; height: 0px; font-size: 0px; }

.cleaner_h10 { clear: both; width:100%; height: 10px; }

.cleaner_h20 { clear: both; width:100%; height: 20px; }

.cleaner_h30 { clear: both; width:100%; height: 30px; }

.cleaner_h40 { clear: both; width:100%; height: 40px; }

.cleaner_h50 { clear: both; width:100%; height: 50px; }

.cleaner_h60 { clear: both; width:100%; height: 60px; }

.float_l { float: left; }

.float_r { float: right; }

.image_wrapper { display: inline-block; border: 1px solid #2f2824; padding: 9px; margin-bottom: 10px; background: #000000 }

.image_fl { float: left; margin: 3px 20px 0 0 }

.image_fr { float: right; margin: 3px 0 0 20px }

blockquote { font-style: italic; margin: 0 0 0 10px;}

cite { font-weight: bold; color:#fff; }

cite a, cite a:link, cite a:visited { font-weight: normal; color:#fff; }

cite span { font-weight: 400; color: #ccc; }

em { color: #fff; }

.tmo_list { margin: 10px 0 10px 10px; padding: 0; list-style: none; }

.tmo_list li { background: transparent url(images/templatemo_list.png) no-repeat; margin:0 0 20px; padding: 0 0 0 25px; line-height: 1em; } .tmo_list li a { color: #ff58ff; }

.tmo_list li a:hover { color: #fff; }

.post_box { clear: both; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px dotted #999999 }

.post_header { border-top: 3px solid #999; border-bottom: 1px solid #ccc; padding: 5px; margin-bottom: 20px }

.post_box h2 { font-size: 22px; margin-bottom: 15px; background: none; padding-bottom: 5px }

.post_box h2 a { color: #fff }

.post_box p.post_meta { margin-bottom: 0 }

.post_box img { float: left; margin-right: 20px }

#contact_form { padding: 0; width: 340px; }

#contact_form form { margin: 0px; padding: 0px; }

#contact_form form .input_field { width: 240px; padding: 2px 5px; color: #fff; background: #070105; border: 1px solid #660044; }

#contact_form form label { display: block; width: 100px; margin-right: 10px; font-size: 14px; }

#contact_form form textarea { width: 328px; height: 80px; color: #fff; padding: 5px; background: #070105; border: 1px solid #660044; }

.submit_btn { padding: 5px 10px; color: #fff; background: #330022; border: 1px solid #660044; }

#slider {

position: relative;

width: 100%;

}

#templatemo_wrapper {

width: 800px;

margin: 0 auto;

background: url(../images/templatemo_body.jpg) no-repeat top center;

}

#templatemo_social {

width: 800px;

height: 50px;

}

#templatemo_main {

clear: both;

width: 800px;

padding: 30px 0;

height: 580px;

#templatemo_sidebar {

float: left;

width: 320px;

}

#templatemo_content {

float: right;

width: 480px;

}

#header h1 { display: block; width: 315px; height: 166px; margin: 0 auto 80px; padding: 0 }

#header h1 a { float: left; margin-top: 25px; width: 315px; height: 166px; background: url(../images/templatemo_logo.png); text-indent: -10000px; }

#menu {

clear: both;

float: right;

}

#templatemo_footer {

clear: both;

float: right;

width: 360px;

margin: 20px 40px;

padding: 20px;

text-align: left;

background: #070105;

border: 1px solid #26071d;

}

#templatemo_footer a {

color: #fff;

}

.scroll {

width: 480px;

height: 580px;

overflow: auto;

/* overflow-x: hidden; */

position: relative;

clear: left;

}

.scrollContainer div.panel {

width: 400px;

height: 500px;

padding: 40px;

overflow: hidden;

.scrollContainer div.pane2 {

width: 400px;

height: 200px;

padding: 40px;

overflow: hidden;

}

ul.navigation {

list-style: none;

margin: 0;

padding: 0;

}

ul.navigation li {

margin: 0;

padding: 0;

}

ul.navigation a {

display: block;

float: right;

padding: 8px 15px;

margin-bottom: 5px;

font-size: 18px;

font-weight: 400;

text-decoration: none;

color: #fff;

text-align: right;

}

ul.navigation a:hover, ul.navigation a.selected {

background: #0f020b;

}

ul.navigation a:focus {

outline: none;

}

我的网站是采用左右框架实现的，网站最后实现的结果为:

通过一系列的学习，我初步认识了网页设计的过程。但是对于网页更加复杂的结构，和css样式的设置还是只了解皮毛，因此在网站学习的路上还是要走好长时间，网站的建设，不是我仅仅学习这一点点的东西就可以搭建起来的。

W3cschool 上课PPT