网站页面设计报告

计算机系

网站页面设计报告

班 级 姓 名 学 号

计算机系 科技专用周报告

网站页面设计报告

一、 设计概述

【设计目的】

Web界面设计实现。运用Web技术，制作小型图书室管理系统网站。

【设计环境】

Dreamweaver结合photoshop等图像处理软件

二、 设计内容

1. Html基本结构

框架设计

2. Html基本标签、控件

DIV标签的应用、管理与设计等 3. CSS样式

CSS样式的运用与管理 4. 超链接

超链接的应用与设计（链接字体及效果等） 5. 本次制作设计理念：

全局各站点统一风格，简练、实用、规范 6. 制作小型图书室管理系统网站网站

计算机系 科技专用周报告

三、 设计方案 ——遵循网站设计的3C原则（简洁、一致性、对比度）

1、简洁

设计并不再现具体的物象和特征，它要表达的是一定的意图和要求，在适当的环境里为人们所理解和接受。

保持简洁的通常做法是使用一个醒目的标题，另一种保持简洁的做法是限制所用的字体和颜色的数目。

页面上所有的元素都应当有明确的含义和用途，不要试图用无关的图片把页面装点起来，很多人都容易犯这样的一个错误：把页面搞的花里呼哨，却不能让别人明白他到底要突出表达的是什么内容，主题和意念。

2、一致性

一致性是表现一个站点的独特风格的重要手段之一。

要保持一致性，可以从页面的排版下手，各个页面使用相同的页边距。文本，图形之间保持相同的间距。

一致性还包括：页面中的每个元素与整个页面以及站点的色彩和风格上的一致性。

另一种保持一致性的办法是字体和颜色的使用。文字的颜色要同图像的颜色保持一致并注意色彩搭配的和谐。

3、对比度

使用对比是强调突出某些内容的最有效的办法之一。

好的对比度使内容更易于辨认和接受。实现对比的方法很多，最常用的是使用颜色的对比。例如链接的色彩，在设计页面时我们常常会只注意到未被访问的链接的色彩，而容易忽视访问过的链接色彩将使得链接的文字难地辨认。

使用对比的关键是强调突出关键内容，以吸引浏览者，鼓励他去发掘更深层次的内容。

计算机系 科技专用周报告

四、 设计规范

1、 各页面设计应主题鲜明，层次清晰，栏目设置应科学合理，主次分明 2、 下一层页面不能大于上一层页面的相应字号，同一层各栏目下内容的字号应一致。

3、 目录和文件命名标准化。

五、 设计小结（实验过程中出现的问题、结果分析、出错原因分析等）

网页设计说白了——就是美工。（真正开发网站的时候，颜色搭配基本上都是客户说着算的）。

这次实验使我更加了解了Htlm，这次实验对样式表的运用更加熟练，颜色、字体、形式的更改都很方便，清晰的了解到样式的便捷。能够深刻知道网站的源代码是配对呈现的，对网站的形成过程有了大致的了解。对网页的各个小部分也有了认识，能够熟练的做一个简单的网页，如时间允许可以更加完善页面的美观度。

经过这段时间的学习，虽然大部分都很顺利，也还是出现过小问题。例如，由于双引号用成了单引号，以至调试是总是有错误。由于图片的名称中的一个字母的不同，导致图片显示不出来。有了几次经验后再处理之后出现的小问题也就得心应手了。

网页的连接和超链接也能了解及适当的运用，网页的连接与不断优化就是一个小型网站的雏形。虽然不够美观、细致，但基本操作都已经能够熟练运用并形成一个小型网站。