网页设计说明书(模板)

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