静态设计页面的制作--课程设计--大学毕业设计论文.doc

《静态设计页面的制作--课程设计--大学毕业设计论文.doc》由会员分享，可在线阅读，更多相关《静态设计页面的制作--课程设计--大学毕业设计论文.doc（28页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、存档资料 成绩： 华东交通大学理工学院课 程 设 计 报 告 书所属课程名称 网页设计与网页制作 题 目 静态设计页面的制作 分 院 电 信 分 院 专业班级 信管2班 学号 20120210450221 学生姓名 熊武 指导教师 魏建红 20 14 年 12 月 29 日 华东交通大学理工学院课程设计报告序号项 目等级优秀良好中等及格不及格1课程设计态度评价2出勤情况评价3任务难度评价4工作量饱满评价5任务难度评价6设计中创新性评价7论文书写规范化评价8综合应用能力评价综合评定等级课程设计（论文）评阅意见评阅人 职称 20 14 年 12 月29日 目录第一章 课程设计内容及要求4第二章 课

2、程设计目的及流程5第三章 课程设计方法及步骤6第四章 课程设计的部分代码及截图10第五章 课程设计心得27第六章 参考文献28第一章 课程设计内容及要求一.课程设计题目 用已经学过的网站开发技术及开发工具DW，根据网站首页效果图，利用DIV+CSS设计出一个网站首页。二.课程设计内容及要求 内容有：1建立站点；2结构分析；3搭建框架；4切割效果图；5布局页面头部和导航；6布局页面侧边栏；7布局页面主体部分；8底部和细节调整要求有：运用DIV+CSS设计出一个静态页面，做到简洁，清晰，明了。第二章 课程设计目的及流程一.课程设计目的： 1.通过课设的制作，来加深同学对网页设计的认识和制做。同时也

3、加强了对同学的实际操作能力。 2.要尊重浏览者体验，网站不是做给自己看的。一.课程设计流程：确定主题搭建版式风格画好框架DW把div 框架搭建具体内容的添加 第三章 课程设计方法及步骤一.课程设计方法：1.建立站点 打开DW，建立名为website站点2.结构分析 u 头部u LOGOu 导航栏u 内容框 左边部分内容 上面部分 下面部分 右边部分内容 中间部分 下面部分u 尾部3.搭建框架 4.切割效果图 5.布局页面头部和导航 6.布局页面侧边栏 7.布局页面主体部分 8.底部和细节调整 第四章 课程设计的部分代码及截图1、html代码头部和导航栏 足球天下 首页 登陆 绿 茵场 首页 联

4、赛 直播 欧洲 南美 亚洲 侧边栏 最新消息 巴神自曝回国米？！打包回家 悍将迎接：欢迎 因扎吉亲口宣布AC米兰1人必留队 钦点红黑军2珍宝 卡佩罗：AC米兰国米路还很长 3年不犯错能缓过来 梅西制霸之路添新版图 这次他想当欧洲联赛射手王 皇马公布战AC米兰22人名单 这场球皇马赚足400万 国米签阿森纳锋霸定了！本人点头 温格开口放行 皇马更衣室回应穆里尼奥：希望欧冠能遇到你！ 积分榜 英超积分榜 排名球队场次积分 1切尔西1946 2曼城1946 3曼联1946 4开普敦1933 5切尔西1933 6阿森纳1933 7热刺1846 8西汉姆联1846 28第 页 共 28 页主题部分 英超

5、赛事 拿命死磕 这就是英超！皇马巴萨来英超会如何 英名哨:小法那是绝对点球 切尔西为假摔还债 切尔西一尊真龙变强无极限 梅西能做的他也要做 切尔西又见半年前鬼影 穆帅最强大招去哪了 切尔西造新版梅西+伊涅斯塔 一狂神锁定英超第1 00000！切尔西一把灵刀自杀 穆帅最爱神牌变废牌 穆帅暴怒:丑闻！英超在反切尔西 裁判该羞愧 英超切尔西技术统计:空有传控优势 射正仅有1次 德甲赛事 队报评百大球星：诺伊尔力压C罗梅西居榜首 国家队队友让香川变过去式 德甲总进球超前辈传奇 穆勒：瓜迪奥拉是最职业的教练 他让拜仁变更强 动人圣诞！德国小球队震撼一幕 3万个温暖灵魂 海因克斯：我推荐罗伊斯加盟皇马 拜

6、仁那位置人多 伤病 错过世界杯 丑闻-2014成罗伊斯最惨的一年 多特官方宣布签冬季首援 东欧飞翼接班罗伊斯？ 德国名模示爱罗伊斯:你去拜仁 我就是你的(图) 德甲-狼堡2-1逆转稳居次席 多特1-2负垫底队 还记得他吗？前拜仁后卫将出狱 纵火烧自己房子 底部和细节调整 Copyright 2014 熊武, All Rights Reserved 2、CSS代码* margin: 0px; padding: 0px; font-family:微软雅黑;#head background-color: deepskyblue; height: 50px; width: 100%; box-shad

7、ow: cornflowerblue 5px 5px 5px ; position: fixed; float: top; z-index: 100;#head #head_contend margin-left: 15%; background-color: chartreuse; height: 50px; width: 75%;#head_contend #first text-align: left; background:powderblue; width: 200px; height: 50px; float: left;#head_contend #admin text-alig

8、n: center; background:lightblue ; height: 50px; width: 50px; float: right;#head_contend #index text-align: center; background: darkseagreen; height: 50px; width: 50px; float: right;#body margin-left:15%; padding-top: 10px; width:75%; float: top; z-index: 0; #logoheight:50px; margin-top:50px ; paddin

9、g: 0;#rad margin: 5px; height: 50px; width: 100%; border-radius: 10px; box-shadow: darkcyan 5px 5px 10px ;#content border-radius: 10px; width: 30%; box-shadow: darkcyan 5px 5px 10px ; float:left; padding:15px ;#content #content_top border:5px dimgrey solid; border-radius: 10px; width: 100%; box-shad

10、ow: darkcyan 5px 5px 10px ; position: relative; float:left; margin-right: 5px; background:greenyellow;#content #content_center border:5px dimgrey solid; border-radius: 10px; width: 100%; box-shadow: darkcyan 5px 5px 10px ; position: relative; float:left; margin-right: 5px; background:turquoise;#cont

11、ent #content_bottom border:5px dimgrey solid; border-radius: 10px; width: 100%; box-shadow: darkcyan 5px 5px 10px ; position: relative; float:left; margin-right: 5px; background: palegreen;#content1 border:5px dimgrey solid; border-radius: 10px; width: 65%; height: 250px ; box-shadow: darkcyan 5px 5

12、px 10px ; float: left; background: powderblue; #content1 #slid height: 100%; width: 100%; margin: 4px; padding:2px;#slid #img border: solid 2px rosybrown; height:190px; width: 98%; box-shadow: lightblue 2px 2px 2px; padding-top: 2px;#slid #mcimg border: 2px darkcyan solid; height: 40px; margin-top:

13、2px; width: 58%; padding-left: 40%; padding-top: 2px; overflow: hidden;#boot border:5px dimgrey solid; border-radius: 10px; width: 65%; height: 500px ; box-shadow: darkcyan 5px 5px 10px ; float:left;#boot .c1 border: solid 2px greenyellow; border-radius: 5px; width:98%; height: 200px; box-shadow: da

14、rkcyan 5px 5px 10px ; float: top;#root border:5px dimgrey solid; border-radius: 10px; width: 100%; height: 50px ; box-shadow: darkcyan 5px 5px 10px ; float:left; background-color: deepskyblue;#p1 background: cornflowerblue; width: 35px; height: 35px; float: left; box-shadow: darkcyan 5px 5px 10px ;

15、#p2 background: orange; width: 35px; height: 35px; float: left; box-shadow: darkcyan 5px 5px 10px ;#p3 background: chartreuse; width: 35px; height: 35px; float: left; box-shadow: darkcyan 5px 5px 10px ;#p4 background: orchid; width: 35px; height: 35px; float: left;box-shadow: darkcyan 5px 5px 10px ;

16、 .b1 width: 47%; height: 28%; float: left; box-shadow: darkcyan 5px 5px 10px ; position: absolute;.b2 background: chartreuse; width: 47%; height: 28%; float: left; font-size: 40px; box-shadow: darkcyan 5px 5px 10px ; position: absolute; display: none;.b3 background: orange; width: 47%; height: 28%;

17、float: left; box-shadow: darkcyan 5px 5px 10px ; position: absolute; display: none;.b4 background: cornflowerblue; width: 47%; height: 28%; float: left; box-shadow: darkcyan 5px 5px 10px ; position: absolute; display: none;h1 color: chocolate; font-family: sans-serif;ul list-style-type:none; margin:

18、0; padding:0; overflow:hidden;.rad li float:left;.rad a:link,a:visited display:block; width:150px; height: 32px; font-weight:bold; color:#FFFFFF; background-color: lightblue; text-align:center; padding:4px; text-decoration:none; text-transform:uppercase; padding-top: 10px;.rad a:hover,a:active backg

19、round-color: aqua;.blank border:5px dimgrey solid; border-radius: 10px; width: 98%; box-shadow: darkcyan 5px 5px 10px ; float:top; margin-bottom: 5px;.c1 a color: dodgerblue;#logo h1 color: lime;#logo h2 color: dodgerblue;#content_top a color: dodgerblue;3、JS代码/* * Created by xx on 2014/12/28. */$(d

20、ocument).ready(function() $(#p1).mouseenter(function() var p1=$(#p1); p1.css(background:#00ced1,boxshadow:red 5px 5px 5px,fontsize:25px); p1.css(border: solid 2px lavender) $(.b1).css(display:inherit) $(.b2).css(display:none) $(.b3).css(display:none) $(.b4).css(display:none) ) $(#p1).mouseleave(func

21、tion()var p1=$(#p1); var p1=$(#p1); p1.css(background:cornflowerblue); ) $(#p2).mouseenter(function() var p2=$(#p2); p2.css(background:#00ced1); $(.b2).css(display:inherit) $(.b1).css(display:none) $(.b3).css(display:none) $(.b4).css(display:none) ) $(#p2).mouseleave(function() var p2=$(#p2); p2.css

22、(background:orange); ) $(#p3).mouseenter(function() var p3=$(#p3); p3.css(background:#00ced1); $(.b3).css(display:inherit) $(.b1).css(display:none) $(.b2).css(display:none) $(.b4).css(display:none) ) $(#p3).mouseleave(function() var p3=$(#p3); p3.css(background:chartreuse); ) $(#p4).mouseenter(funct

23、ion() var p4=$(#p4); p4.css(background:#00ced1) $(.b4).css(display:inherit) $(.b1).css(display:none) $(.b3).css(display:none) $(.b2).css(display:none) ) $(#p4).mouseleave(function() var p4=$(#p4); s p4.css(background:orchid) )第五章 课程设计心得在学习网页制作的过程中，我深深体会到一点“有付出，就终有回报”，你的付出与你的回报终究是成正比的。经过了多少漫漫长路，经过了多少

24、忘我的投入，经过了多少波折，我的网页与众人见面了。当我第一眼在网络下一览我的个人主页，我是多么的激动，多么的兴奋，就像多年未见的老同学，一种讲不出道不明的感觉。做好主页，并不是一件容易的事，它包括个人主页的选题、内容采集整理、图片的处理、页面的排版设置、背景及其整套网页的色调等很多东西。 第六章 参考文献1 谢希仁. 计算机网络（第五版）M. 北京：电子工业出版社，2008年2月2 胡小强 计算机网络M 北京：北京邮电大学出版社2005年1月3 李济国 计算机网络 上海：上海交通大学出版社 2012年3月4 张和 计算机网络完全 北京：北京电子大学出版社2006年5月5 刘贺 计算机网络 西安：西安电子工业大学出版社2008年8月致 谢