网页设计说明书(模板).doc

网 页 设 计 说 明 书 网页名称： 博客 专业名称： 软件技术 班级名称： 软件一班 姓 名： 张辉德 学 号：20135533116 完成时间： 一月3号 “XXXX（网站标题）”网页设计说明书 一、网站规划设计说明 注：请按以下模板填写，文字说明必须与所设计的网站实际内容严格对应，文中所有红字部分属于说明注释的部分，填好后应全部删除红字。 1、网站需求和目的 简述本网站制作的目的，面向的用户群。网站具备的功能和期望达到的目标。 目的：简单的博客制作 面向对象：全体客户 功能：简单的链接 期望：实现人机交流及人人网上互动 2、网站栏目规划 简要说明一下栏目设计，共几个栏目。 栏目5：link3，链接页（视频） 3、网页内容规划 首页中的内容版块包含以下几个部分： 页面头部：LOFTER博客 栏目导航：图片链接（视频，文字，音乐，图片） 具体内容：博主头像，好友作品，及几张图片 版权声明：计算机少年|power by lofter 首页截图（index.html）： 二级栏目页截图（请说明有无、Javascript或多媒体等元素何特色？Javascript网页特效，多媒体 软件：PS，dreamwveaver 二、网站色彩说明 (说明:包括网页主色调、链接色、导航色等，要求通过表格列出页面中需要的颜色表) 1、网站主色调 该网站的主色彩是黑色、灰色、白色。黑色是经典的代表，让人睿智。灰色，单调，特别适合灵感的创作。白色，简单。 2、网页链接色 普通文字链接配色表 未访问过链接 (a:link) 已访问过链接(a:visited) 鼠标悬停 (a:hover) 当前激活链接 (a:active) #000000,无下划线 无定义 #dddddd 链接 导航链接色 (如果导航中的链接色和整个网页链接色相同的话，将上表复制到下方即可，按实际情况填写) 导航文字链接配色表 未访问过链接 (a:link) 已访问过链接(a:visited) 鼠标悬停 (a:hover) 当前激活链接 (a:active) #000000,无下划线 无定义 #dddddd 链接 HTML页面结构图 #container #head #zuozhequ #left #middle #zuopinji #bozhu #wenzhang #bozhushezhi #guanzhu #faxianhaoboke #lizi #lizi #tupian 首页div布局结构图 (请将首页及二级页结构图列出。) 四、页面DIV结构代码 (请将首页及二级页div结构代码列出。) 首页： div id=container div id=”head”头部页面宽度1309px，高度83px/div div id=”left”左边页面宽度300PX div id=”zuozhequ”作品宽度114px /div div id=”middle”中间区域宽度563px div id=”zuopin”中间区域的作品宽度560px,高度433px/div /div div id=”right”右边宽度440px div id=”bozhu”博主宽度225px，高度53px/div div id=”wenzhang”文章宽度225px，高度38px/div div id=”bozhuzhezhi”博主设置宽度225px，高度33px/div div id=”guanzhu”关注宽度225px，高度36px/div div id=”faxianhaoboke”发现博客宽度225px，高度29px div id=”lizi”个博客宽度225px，高度32px/div div id=”lizi”一个博客宽度225px，高度49px/div /div /div /div 二级页： Times New Roman,字号:五号,行距:1.25倍，请挑选重要的CSS代码列出即可，不用贴全部代码。) 六、页面测试结果 (要求：页面至少在两种不同的浏览器中测试结果，如FireFox或IE6.0以上任一版本或其他类型浏览器 2、搜狗浏览器下测试结果 七、心得体会 (要求：必须要有内容，可以是技术知识总结或经验总结；制作网页的过程中碰到哪些问题，怎么解决的；网页存在哪些不足；今后有哪些地方可以进一步改进。) 经验总结： 首先，列出HTML页面结构图。 其次，设出个个div的宽度，高度 还有，可以用PS先大概做出模板 问题： 在排版时，浮动弄错；在设置DIV时，宽高的设定