网站设计1Word文档下载推荐.docx
- 文档编号:18619796
- 上传时间:2022-12-29
- 格式:DOCX
- 页数:18
- 大小:231.98KB
网站设计1Word文档下载推荐.docx
《网站设计1Word文档下载推荐.docx》由会员分享,可在线阅读,更多相关《网站设计1Word文档下载推荐.docx(18页珍藏版)》请在冰豆网上搜索。
3.2.班级简介
3.3学习园地
3.4.娱乐天地
3.5.留言板
四、页面及页面流转关系
4.1根目录
页面名称
全路径
说明
index.html
/index.html
首页
文件夹名称
页面说明
Amusement
/Amusement
存放二级(娱乐天地)页面的子页面,存放音乐素材文件夹
css
/css
存放控制二级页面的样式
html
/html
存放二年级页面文件夹
iframecss
/iframecss
控制iframe页面的样式文件夹
ifranehtml
/ifranehtml
二级页面中引用iframe页面的文件夹
img
/img
存放图片的文件夹
indexnews
/indexnews
首页中各模块的链接页面文件夹
js
/js
存放JavaScript脚本文件的文件
message
/message
存放留言板的所有页面文件夹
Scripts
/Scripts
添加FLV自动增加的文件夹
4.2二级目录
4.2.1二级静态页面
页面名称
classintroduce.html
/html/classintroduce.html
班级简介页面
memberinfo.html
/html/memberinfo.html
成员简介页面
classphoto.html
/html/classphoto.html
班级相册页面
classlearn.html
/html/classlearn.html
学习园地页面
classhappy.html
/html/classhappy.html
娱乐天地页面
4.2.1动态页网
index.asp
/message/index.asp
留言板首页
admin.asp
/message/admin.asp
管理者登陆框架页面
common.asp
/message/common.asp
登录时验证页面
dataconn.asp
/messagedataconn.asp
数据库连接命令
login.asp
/message/login.asp
管理者登录页面
logo.asp
/message/logo.asp
write.asp
/message/write.asp
images
/message/images
留言板中的图片文件
msg_data
/message/msg_data
存放留言板中的数据库文件夹
admin
/message/admin
管理者文件夹
4.3其他页面
classin.html
/iframehtml/classin.html
班级简介引用页面
photo1.html
/iframehtml/photo1.html
相册引用页面
photo2.html
photo3.html
stuinfo.html
/iframehtml/stuinfo.html
成员简介引用页面
五、详细设计过程
5.1各页面相同部分设计
Index.html和各个二级页面的页面结构为:
Container,banner,global,foot都是div;
container是其他div的父亲级div,其他div以父容器为依据进行定位。
Banner为网页的标题div,插入教育技术背景图片;
global为网页的导航div,里面添加一个list-style为none的ul标签,li标签的display属性为block,做导航按钮;
content显示网页的主内容,各个页面不尽相同;
foot显示网页的版权信息等。
5.2代码
<
divid="
cont"
>
<
banner"
/div>
golab"
ulid="
menu"
li>
/li>
ahref="
#"
首页<
/a>
html/classintroduce.html"
班级简介<
html/memberinfo.html"
成员简介<
html/classphoto.html"
班级相册<
html/classlearn.html"
学习园地<
html/classhappy.html"
娱乐天地<
message/index.asp"
班级留言<
/ul>
left"
<
message"
class="
leftdiv"
divclass="
style="
text-align:
left;
"
spanstyle="
display:
block;
text-align:
center;
font-size:
20px;
font-weight:
bold;
/span>
color:
#00F;
友情链接<
flink"
target="
_blank"
清华首页<
北大首页<
北航首页<
包师院<
<
人人网<
淘宝网<
奇异网<
right"
rightdiv"
spanclass="
Childiv"
font-weight:
margin:
1px;
热点新闻<
ulclass="
rblock"
indexnews/news1.html"
indexnews/news2.html"
indexnews/news3.html"
班级新闻<
indexnews/newsc1.html"
2px;
ClassPic"
overflow:
hidden;
width:
340px;
height:
250px;
最新留言<
id="
mess"
imgsrc="
img/photo/bxs.jpg"
/>
马上四级了,好好准备<
img/photo/dys.jpg"
期末考试了,加油!
!
gogo!
img/photo/jxs3.jpg"
元旦到哪玩!
?
img/photo/jxs5.jpg"
呵呵哈哈<
img/photo/zzhs1.jpg"
短短 短信!
foot"
p>
包头师范学院版权所有Copyright©
2008第四版<
br>
包头师范学院网络信息中心制作维护Email:
nic@
Add:
内蒙古包头市青山区科学路3号postalcode:
014030蒙ICP备06005981号
/p>
/body>
主要CSS代码:
body
{
}
a{
text-decoration:
none;
color:
#03F;
.rblockli{
30px;
.rblocka{
#000;
.rblocka:
hover{
underline;
font-family:
serif;
#mess{
padding:
0px;
list-style:
#messli{
display:
48px;
border-bottom:
#03C1pxsolid;
0px2px;
3px;
#messliimg{
border:
opx;
45px;
vertical-align:
bottom;
#ClassPicimg{
70px;
100px;
4px;
float:
a:
幼圆"
serif;
#0FC;
.leftdiv{
3px0px0px0px;
200px;
228px;
#09Fsolid1px;
.Childiv{
font-size:
blod;
8pxauto;
#cont
0pxauto;
960px;
solid1px#09f;
912px;
position:
relative;
}
#banner
background-image:
url(../img/bannerbg.jpg);
background-repeat:
no-repeat;
165px;
#golab
url(../img/global.jpg);
35px;
#left{/*border:
solid1px#09F;
*/
230px;
620px;
#right
/*border:
700px;
right;
#foot
border-top:
solid1px#06F;
0pxauto0pxauto;
75px;
clear:
#menu
#menuli
110px;
auto;
黑体"
border-right:
1px#06Fsolid;
#message{
#flink{text-align:
.rightdiv{
302px;
#06Fsolid1px;
3px3px;
#Middle{
955px;
.Middlediv{width:
310px;
height:
border:
#03Fsolid1px;
float:
margin:
padding:
.Middleul{list-style:
decimal;
5px;
text-align:
.Middleulli{height:
}
.Middle_classulli{
line-height:
.Middle_classa{color:
text-decoration:
.Middle_classa:
hover{color:
visited{color:
#03C;
#Talk_area{
#Talk_areali{display:
50px;
#Talk_areaimg{height:
40px;
widows:
js代码相册浏览:
//JavaScriptDocument
varbigimg=newArray();
bigimg[0]="
../img/photo/bx.jpg"
;
bigimg[1]="
../img/photo/lab.jpg"
bigimg[2]="
../img/photo/lab2.jpg"
bigimg[3]="
../img/photo/sport.jpg"
functionfun(index){
document.getElementById("
bigpic"
).src=bigimg[index];
六、数据库设计
Web_admin(管理者表)
编号
列名
类型
主键
允许为空
备注
1
id
int
Y
N
管理者编号
2
web_logo
varchar(100)
网站logo路径
3
web_name
varchar(20)
留言版名称
4
web_gg
nvarchar(30)
留言版公告
5
disp_gg
dis页面公告
6
msg_num
每页显示留言条数
7
web_admin_id
账号
管理员账号
8
web_admin_ps
密码
管理员密码
msg_book(留言表)
自动编号
留言者编号
nick
昵称
oicq
varchar(10)
qq号
add
text
地址
head
image
头像
e_mail
varchar(30)
电子邮件
title
主题
content
内容
9
reply
回复
10
data
datetime
时间
数据库的各个表设计如上,各字段都有备注。
七、分析和讨论
div+css网页布局与表格布局相比较具有如下特点:
1.页内容和布局美工分离,代码精简;
2.改变排版布局容易,只需改变控制div的CSS文件即可;
3.div位置控制比较困难,容易
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网站 设计