网页设计说明书

目录第一章：网页设计规划 2一、整体规划 21.网页设计目的 22.网页定位： 23.网页模块的设置 2第二章：网页设计与制作 3一、主页设计 31.模块设计 32.风格与色彩 3二、子页设计 31.基本信息模块 32.学习成绩模块 33.获奖情况模块 44.实践经历模块 4总结 4第一章：网页设计规划一、整体规划1.网页设计目的我们读书就是为了获得知识，学习了网页设计就是为了把它运用到实际中。此次网页设计的目的有三个。第一，完成我们的考试，对我们平时学到的知识进行考核。第二，把学到的知识运用到实践中。正值大四，求职是我们必须面对的事情，一份完美的简历是找到一份满意工作的敲门砖。把自己的简历做成个人网页是一个独特新颖的方式，能让大家直观快速地了解我。第三，在此次的网页设计中，能把之前学到的知识前后联系起来，系统地得到复习，加强对知识的掌握程度。2.网页定位：让大家更快更全面地了解我。把自己以最新颖的方式推荐给大家。网页设计风格要符合简历本质的要求。3.网页模块的设置此次网页设计共分成五个模块。第一个是网页主页，其次是四个子网页，分别是我的基本信息、学习成绩、获奖情况、实践经历四个模块。主页中包含有四个子网页的链接。在基本信息页面中，可以了解到我的个人信息、优势、技能和在校任职情况等。在学习成绩模块可以了解到大学期间每个学期我的综测排名情况，还可以链接到我的详细成绩单。获奖信息页面中可以了解到大学期间不同时间段我获得的奖励，并附上了主要的几张奖状。在实践经历页面中可以了解到大学期间我的一些实践情况以及每次实践经历后提高的能力。第二章：网页设计与制作一、主页设计1.模块设计此页面上包含四个链接图标，分别为基本信息、获奖情况、学习成绩和实践经历。在photoshop中制作好四个链接图片，设定图片大小。通过使用<a>标签在HTML中创造链接，使用herf属性创建指向另一个文档的链接。通过<style>标签定义链接图片的样式信息，再通过<div>定义每一个区域段。根据背景属性设置背景图片。通过<embed>标签插入背景音乐。为了增加网页的画面感加入一个特效浮动在窗口的图片，该图片在photoshop中制作，之后对下载的特效代码进行修改，以适合该网页设计的要求。2.风格与色彩页面背景使用花瓣飘落的动态图片，给人以画面美，四个链接图片同样是粉色花朵为底色，融入整个背景之中。黑色的背景映衬下，花瓣越发鲜艳，同时整个画面不会因为飘动的花瓣而显得杂乱。浮动的图片采用与背景有一定对比度的米色和红色，使其识别度更高，其中的字体表达了对浏览该网页人们的尊重。“个人简历”四个字位于页面正中间并采用与背景对比度很大的颜色，达到醒目的效果。背景音乐为“我相信”，一首很励志的歌曲，与网页设计内容相称，同时通过歌词让大家对我留下深刻的第一印象。二、子页设计1.基本信息模块该子网页包含了我最基本的信息，通过<table>标签定义个人信息和在校任职情况两个表格，设置边框属性border为3显示边框。通过<textarea>标签定义优势和技能的多行输入文本控件。插入图片特效，把制作好的照片保存到文件夹中，修改特效代码，使其大小和特效效果符合整个页面结构。五张照片中，包含一张工作照和四张生活照，使大家能更全面的了解我。背景图片采用竹子的水墨画，向大家传达自己的虚心和正直。2.学习成绩模块该子网页上包含了综测排名情况和详细成绩单的超链接。背景是梅花图案，传达出自己不屈不挠的品质。旁边附有《出师表》的节选。梅花和该词都是与学习相关的积极的意象，与该子网页内容紧密相关。3.获奖情况模块获奖情况通过<ul>定义无序列表，列出在校期间每天获得的奖励。插入与基本信息页面相同的特效，把照片替换成几张主要的奖状，是大家更直观的了解到该模块信息。因为奖状色彩比较多，所以采用白色系列图片。4.实践经历模块该网页页面通过<table>标签定义实践经历表格。根据内容设定表格的宽度，根据<align>属性设置文字在表格中的对齐方式。背景图片中阳光表示希望，宽阔的天空、辽阔的草地上放着书本表达了不仅要学习更要走出课本，去接触外面的社会和世界，理论结合实践，才会得到更广阔的视野，得到更丰富的知识。总结本次网页设计我制作了个人简历网页。首先根据自己想到表达的内容确定设计思路，大致确定设计风格、构建整体布局。紧接着进行素材收集，素材包括必要的照片、图片和网页特效代码。一切准备就绪之后，利用PhotoShop对图片进行处理使之符合设计思路和网页页面大小要求，对必要的文字进行特效处理，使之切合网页设计的整体设计格局。然后进行HTML网页编辑。在设计制作的整个过程中，加深了对网页设计的认识