网
页
设
计
说
明
书
网页名称： 博客
专业名称： 软件技术
班级名称： 软件一班
姓 名： 张辉德
学 号：20135533116
完成时间： 一月3号
“XXXX（网站标题）”网页设计说明书
一、网站规划设计说明
注：请按以下模板填写，文字说明必须与所设计的网站实际内容严格对应，文中所有红字部分属于说明注释的部分，填好后应全部删除红字。
1、网站需求和目的
简述本网站制作的目的，面向的用户。网站具备的功能和期望达到的目标。
目的：简单的博客制作
面向对象：全体客户
功能：简单的链接
期望：实现人机交流及人人网上互动
2、网站栏目规划
简要说明一下栏目设计，共几个栏目。
⏹ 栏目1:index.html,主页
⏹ 栏目2:link，链接页（音乐）
⏹ 栏目3:link1，链接页（文字）
⏹ 栏目4:link2，链接页（图片）
⏹ 栏目5：link3，链接页（视频）
3、网页内容规划
首页中的内容版块包含以下几个部分：
⏹ 页面头部：LOFTER博客
⏹ 栏目导航：图片链接（视频，文字，音乐，图片）
⏹ 具体内容：博主头像，好友作品，及几张图片
⏹ 版权声明：计算机少年|power by lofter
首页截图（index.htmlhtml网页设计的标题）：
二级栏目页截图（请说明对应的html文件名）：
4、技术方案
(说明：用到了哪些技术及软件？有无CSS、div布局、Javascript网页特效或多媒体等元素？网站有何特？)
有CSS，DIV布局，Javascript网页特效，多媒体
软件：PS，dreamwveaver
二、网站彩说明
(说明:包括网页主调、链接、导航等，要求通过表格列出页面中需要的颜表)
1、网站主调
该网站的主彩是黑、灰、白。黑是经典的代表，让人睿智。灰，单调，特别适合灵感的创作。白，简单。
2、网页链接
普通文字链接配表
未访问过链接 (a:link) | 已访问过链接(a:visited) | 鼠标悬停 (a:hover) | 当前激活链接 (a:active) |
#000000,无下划线 | 无定义 | #dddddd | 链接 |
3、 导航链接
(如果导航中的链接和整个网页链接相同的话，将上表复制到下方即可，按实际情况填写)
导航文字链接配表
未访问过链接 (a:link) | 已访问过链接(a:visited) | 鼠标悬停 (a:hover) | 当前激活链接 (a:active) |
#000000,无下划线 | 无定义 | #dddddd | 链接 |
3、HTML页面结构图
#container
| ||||||||||||||||||||||||||||||||||||||||
4、
首页div布局结构图
(请将首页及二级页结构图列出。)
四、页面DIV结构代码
(请将首页及二级页div结构代码列出。)
首页：
<div id="container">页面宽度1325px
<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>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论