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