静态设计页面的制作课程设计大学毕业设计论文Word文档下载推荐.docx
《静态设计页面的制作课程设计大学毕业设计论文Word文档下载推荐.docx》由会员分享，可在线阅读，更多相关《静态设计页面的制作课程设计大学毕业设计论文Word文档下载推荐.docx（24页珍藏版）》请在冰豆网上搜索。
3
任务难度评价
4
工作量饱满评价
5
6
设计中创新性评价
7
论文书写规范化评价
8
综合应用能力评价
综合评定等级
课程设计（论文）评阅意见
评阅人 职称
2014年12月29日
目录
第一章课程设计内容及要求4
第二章课程设计目的及流程5
第三章课程设计方法及步骤6
第四章课程设计的部分代码及截图10
第五章课程设计心得27
第六章参考文献28
第一章课程设计内容及要求
一.课程设计题目
用已经学过的网站开发技术及开发工具DW，根据网站首页效果图，利用DIV+CSS设计出一个《网站首页》。
二.课程设计内容及要求
内容有：
1．建立站点；
2．结构分析；
3．搭建框架；
4．切割效果图；
5．布局页面——头部和导航；
6．布局页面——侧边栏；
7．布局页面——主体部分；
8．底部和细节调整
要求有：
运用DIV+CSS设计出一个静态页面，做到简洁，清晰，明了。
第二章课程设计目的及流程
一.课程设计目的：
1.通过课设的制作，来加深同学对网页设计的认识和制做。
同时也加强了对同学的实际操作能力。
2.要尊重浏览者体验，网站不是做给自己看的。
一.课程设计流程：
第三章课程设计方法及步骤
一.课程设计方法：
1.建立站点
打开DW，建立名为website站点
2.结构分析
◆头部
◆LOGO
◆导航栏
◆内容框
✓左边部分内容
Ø
上面部分
下面部分
✓右边部分内容
✓中间部分
✓下面部分
◆尾部
3.搭建框架
4.切割效果图
5.布局页面——头部和导航
6.布局页面——侧边栏
7.布局页面——主体部分
8.底部和细节调整
第四章课程设计的部分代码及截图
1、html代码
头部和导航栏
<
divid="
head"
>
head_contend"
first"
足球天下<
/div>
index"
首页<
admin"
登陆<
body"
<
logo"
h1>
绿茵场<
/h1>
rad"
ulclass="
li>
<
ahref="
#"
/a>
/li>
联赛<
直播<
欧洲<
南美<
亚洲<
/ul>
侧边栏
content"
divclass="
blank"
style="
background:
aquamarine"
最新消息<
content_top"
ul>
巴神自曝回国米？
！
打包回家悍将迎接：
欢迎<
因扎吉亲口宣布AC米兰1人必留队钦点红黑军2珍宝<
卡佩罗：
AC米兰国米路还很长3年不犯错能缓过来<
梅西制霸之路添新版图这次他想当欧洲联赛射手王<
皇马公布战AC米兰22人名单这场球皇马赚足400万<
国米签阿森纳锋霸定了！
本人点头温格开口放行<
皇马更衣室回应穆里尼奥：
希望欧冠能遇到你！
style="
lightgreen"
积分榜<
content_bottom"
table>
tr>
th>
英超积分榜<
/th>
/tr>
td>
排名<
/td>
球队<
场次<
积分<
1<
切尔西<
19<
46<
2<
曼城<
3<
曼联<
4<
开普敦<
33<
5<
6<
阿森纳<
7<
热刺<
18<
8<
西汉姆联<
/table>
主题部分
content1"
slid"
img"
b1"
background-image:
url（'
1.jpg.png'
）"
b2"
2.fw.png'
b3"
3.fw.png'
b4"
4.fw.png'
mcimg"
p1"
p2"
p3"
p4"
boot"
英超赛事<
c1"
拿命死磕这就是英超！
皇马巴萨来英超会如何<
英名哨:
小法那是绝对点球切尔西为假摔还债<
切尔西一尊真龙变强无极限梅西能做的他也要做<
切尔西又见半年前鬼影穆帅最强大招去哪了<
切尔西造新版梅西+伊涅斯塔一狂神锁定英超第1<
00000！
切尔西一把灵刀自杀穆帅最爱神牌变废牌<
穆帅暴怒:
丑闻！
英超在反切尔西裁判该羞愧<
英超切尔西技术统计:
空有传控优势射正仅有1次<
德甲赛事<
队报评百大球星：
诺伊尔力压C罗梅西居榜首<
国家队队友让香川变过去式德甲总进球超前辈传奇<
穆勒：
瓜迪奥拉是最职业的教练他让拜仁变更强<
动人圣诞！
德国小球队震撼一幕3万个温暖灵魂<
海因克斯：
我推荐罗伊斯加盟皇马拜仁那位置人多<
伤病错过世界杯丑闻--2014成罗伊斯最惨的一年<
多特官方宣布签冬季首援东欧飞翼接班罗伊斯？
德国名模示爱罗伊斯:
你去拜仁我就是你的（图）<
德甲-狼堡2-1逆转稳居次席多特1-2负垫底队<
还记得他吗？
前拜仁后卫将出狱纵火烧自己房子<
底部和细节调整
root"
center>
p>
Copyright©
2014熊武,AllRightsReserved<
/p>
/center>
2、CSS代码
*{
margin:
0px;
padding:
font-family:
"
微软雅黑"
;
}
#head{
background-color:
deepskyblue;
height:
50px;
width:
100%;
box-shadow:
cornflowerblue5px5px5px;
position:
fixed;
float:
top;
z-index:
100;
#head#head_contend{
margin-left:
15%;
chartreuse;
widt
升级会员 