![静态设计页面的制作-课程设计_第1页](http://file4.renrendoc.com/view/5e17630fa16b0ddc8edfe53aa6952ac9/5e17630fa16b0ddc8edfe53aa6952ac91.gif)
![静态设计页面的制作-课程设计_第2页](http://file4.renrendoc.com/view/5e17630fa16b0ddc8edfe53aa6952ac9/5e17630fa16b0ddc8edfe53aa6952ac92.gif)
![静态设计页面的制作-课程设计_第3页](http://file4.renrendoc.com/view/5e17630fa16b0ddc8edfe53aa6952ac9/5e17630fa16b0ddc8edfe53aa6952ac93.gif)
![静态设计页面的制作-课程设计_第4页](http://file4.renrendoc.com/view/5e17630fa16b0ddc8edfe53aa6952ac9/5e17630fa16b0ddc8edfe53aa6952ac94.gif)
![静态设计页面的制作-课程设计_第5页](http://file4.renrendoc.com/view/5e17630fa16b0ddc8edfe53aa6952ac9/5e17630fa16b0ddc8edfe53aa6952ac95.gif)
版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
PAGE存档资料成绩:华东交通大学理工学院课程设计报告书所属课程名称网页设计与网页制作题目静态设计页面的制作分院电信分院专业班级信管2班学号20120210450221学生姓名 熊武指导教师魏建红2014年12月29日华东交通大学理工学院课程设计报告PAGE29第页共29页序号项目等级优秀良好中等及格不及格1课程设计态度评价2出勤情况评价3任务难度评价4工作量饱满评价5任务难度评价6设计中创新性评价7论文书写规范化评价8综合应用能力评价综合评定等级课程设计(论文)评阅意见评阅人职称2014年12月
目录TOC\o"1-1"\h\z\u第一章课程设计内容及要求 4第二章课程设计目的及流程 5第三章课程设计方法及步骤 6第四章课程设计的部分代码及截图 10第五章课程设计心得 27第六章参考文献 28
第一章课程设计内容及要求一.课程设计题目用已经学过的网站开发技术及开发工具DW,根据网站首页效果图,利用DIV+CSS设计出一个《网站首页》。二.课程设计内容及要求内容有:1.建立站点;2.结构分析;3.搭建框架;4.切割效果图;5.布局页面——头部和导航;6.布局页面——侧边栏;7.布局页面——主体部分;8.底部和细节调整要求有:运用DIV+CSS设计出一个静态页面,做到简洁,清晰,明了。
第二章课程设计目的及流程一.课程设计目的:1.通过课设的制作,来加深同学对网页设计的认识和制做。同时也加强了对同学的实际操作能力。2.要尊重浏览者体验,网站不是做给自己看的。一.课程设计流程:确定主题搭建版式风格画好框架DW把div框架搭建具体内容的添加
第三章课程设计方法及步骤确定主题搭建版式风格画好框架DW把div框架搭建具体内容的添加一.课程设计方法:1.建立站点 打开DW,建立名为website站点2.结构分析头部LOGO导航栏内容框左边部分内容上面部分下面部分右边部分内容中间部分下面部分尾部3.搭建框架4.切割效果图5.布局页面——头部和导航6.布局页面——侧边栏7.布局页面——主体部分8.底部和细节调整
第四章课程设计的部分代码及截图1、html代码头部和导航栏<divid="head"><divid="head_contend"><divid="first">足球天下</div><divid="index">首页</div><divid="admin">登陆</div></div></div><divid="body"> <divid="logo"><h1>绿茵场</h1></div><divid="rad"><ulclass="rad"><li><ahref="#">首页</a></li><li><ahref="#">联赛</a></li><li><ahref="#">直播</a></li><li><ahref="#">欧洲</a></li><li><ahref="#">南美</a></li><li><ahref="#">亚洲</a></li></ul></div>侧边栏<divid="content"><divclass="blank"style="background:aquamarine"><h1>最新消息</h1></div><divid="content_top"><ul><li><ahref="#">巴神自曝回国米?!打包回家悍将迎接:欢迎</a></li><li><ahref="#">因扎吉亲口宣布AC米兰1人必留队钦点红黑军2珍宝</a></li><li><ahref="#">卡佩罗:AC米兰国米路还很长3年不犯错能缓过来</a></li><li><ahref="#">梅西制霸之路添新版图这次他想当欧洲联赛射手王</a></li><li><ahref="#">皇马公布战AC米兰22人名单这场球皇马赚足400万</a></li><li><ahref="#">国米签阿森纳锋霸定了!本人点头温格开口放行</a></li><li><ahref="#">皇马更衣室回应穆里尼奥:希望欧冠能遇到你!</a></li></ul></div><divclass="blank"style="background:lightgreen"><h1>积分榜</h1></div><divid="content_bottom"><table><tr><th>英超积分榜</th></tr><tr><td>排名</td><td>球队</td><td>场次</td><td>积分</td></tr><tr><td>1</td><td>切尔西</td><td>19</td><td>46</td></tr><tr><td>2</td><td>曼城</td><td>19</td><td>46</td></tr><tr><td>3</td><td>曼联</td><td>19</td><td>46</td></tr><tr><td>4</td><td>开普敦</td><td>19</td><td>33</td></tr><tr><td>5</td><td>切尔西</td><td>19</td><td>33</td></tr><tr><td>6</td><td>阿森纳</td><td>19</td><td>33</td></tr><tr><td>7</td><td>热刺</td><td>18</td><td>46</td></tr><tr><td>8</td><td>西汉姆联</td><td>18</td><td>46</td></tr></table></div></div>主题部分<divid="content1"><divid="slid"><divid="img"><divclass="b1"style="background-image:url('1.jpg.png')"></div><divclass="b2"style="background-image:url('2.fw.png')"></div><divclass="b3"style="background-image:url('3.fw.png')"></div><divclass="b4"style="background-image:url('4.fw.png')"></div></div><divid="mcimg"><divid="p1"></div><divid="p2"></div><divid="p3"></div><divid="p4"></div></div></div></div><divid="boot"><divclass="blank"style="background:lightgreen"><h1>英超赛事</h1></div><divclass="c1"><ul><li><ahref="#">拿命死磕这就是英超!皇马巴萨来英超会如何</a></li><li><ahref="#">英名哨:小法那是绝对点球切尔西为假摔还债</a></li><li><ahref="#">切尔西一尊真龙变强无极限梅西能做的他也要做</a></li><li><ahref="#">切尔西又见半年前鬼影穆帅最强大招去哪了</a></li><li><ahref="#">切尔西造新版梅西+伊涅斯塔一狂神锁定英超第1</a></li><li><ahref="#">00000!切尔西一把灵刀自杀穆帅最爱神牌变废牌</a></li><li><ahref="#">穆帅暴怒:丑闻!英超在反切尔西裁判该羞愧</a></li><li><ahref="#">英超切尔西技术统计:空有传控优势射正仅有1次</a></li></ul></div><divclass="blank"style="background:lightgreen"><h1>德甲赛事</h1></div><divclass="c1"><ul><li><ahref="#">队报评百大球星:诺伊尔力压C罗梅西居榜首</a></li><li><ahref="#">国家队队友让香川变过去式德甲总进球超前辈传奇</a></li><li><ahref="#">穆勒:瓜迪奥拉是最职业的教练他让拜仁变更强</a></li><li><ahref="#">动人圣诞!德国小球队震撼一幕3万个温暖灵魂</a></li><li><ahref="#">海因克斯:我推荐罗伊斯加盟皇马拜仁那位置人多</a></li><li><ahref="#">伤病错过世界杯丑闻--2014成罗伊斯最惨的一年</a></li><li><ahref="#">多特官方宣布签冬季首援东欧飞翼接班罗伊斯?</a></li><li><ahref="#">德国名模示爱罗伊斯:你去拜仁我就是你的(图)</a></li><li><ahref="#">德甲-狼堡2-1逆转稳居次席多特1-2负垫底队</a></li><li><ahref="#">还记得他吗?前拜仁后卫将出狱纵火烧自己房子</a></li></ul></div></div>底部和细节调整<divid="root"><center><p>Copyright©2014熊武,AllRightsReserved</p></center></div>2、CSS代码*{margin:0px;padding:0px;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%;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-align: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;}#logo{ height:50px;margin-top:50px;padding:0;}#rad{margin:5px;height:50px;width:100%;border-radius:10px;box-shadow:darkcyan5px5px10px;}#content{border-radius:10px;width:30%;box-shadow:darkcyan5px5px10px;float:left;padding:15px;}#content#content_top{border:5pxdimgreysolid;border-radius:10px;width:100%;box-shadow:darkcyan5px5px10px;position:relative;float:left;margin-right:5px;background:greenyellow;;}#content#content_center{border:5pxdimgreysolid;border-radius:10px;width:100%;box-shadow:darkcyan5px5px10px;position:relative;float:left;margin-right:5px;background:turquoise;}#content#content_bottom{border:5pxdimgreysolid;border-radius:10px;width:100%;box-shadow:darkcyan5px5px10px;position:relative;float:left;margin-right:5px;background:palegreen;}#content1{border:5pxdimgreysolid;border-radius:10px;width:65%;height:250px;box-shadow:darkcyan5px5px10px;float:left;background:powderblue;}#content1#slid{height:100%;width:100%;margin:4px;padding:2px;}#slid#img{border:solid2pxrosybrown;height:190px;width:98%;box-shadow:lightblue2px2px2px;padding-top:2px;}#slid#mcimg{border:2pxdarkcyansolid;height:40px;margin-top:2px;width:58%;padding-left:40%;padding-top:2px;overflow:hidden;}#boot{border:5pxdimgreysolid;border-radius:10px;width:65%;height:500px;box-shadow:darkcyan5px5px10px;float:left;}#boot.c1{border:solid2pxgreenyellow;border-radius:5px;width:98%;height:200px;box-shadow:darkcyan5px5px10px;float:top;}#root{border:5pxdimgreysolid;border-radius:10px;width:100%;height:50px;box-shadow:darkcyan5px5px10px;float:left;background-color:deepskyblue;}#p1{background:cornflowerblue;width:35px;height:35px;float:left;box-shadow:darkcyan5px5px10px;}#p2{background:orange;width:35px;height:35px;float:left;box-shadow:darkcyan5px5px10px;}#p3{background:chartreuse;width:35px;height:35px;float:left;box-shadow:darkcyan5px5px10px;}#p4{background:orchid;width:35px;height:35px;float:left;box-shadow:darkcyan5px5px10px;}.b1{width:47%;height:28%;float:left;box-shadow:darkcyan5px5px10px;position:absolute;}.b2{background:chartreuse;width:47%;height:28%;float:left;font-size:40px;box-shadow:darkcyan5px5px10px;position:absolute;display:none;}.b3{background:orange;width:47%;height:28%;float:left;box-shadow:darkcyan5px5px10px;position:absolute;display:none;}.b4{background:cornflowerblue;width:47%;height:28%;float:left;box-shadow:darkcyan5px5px10px;position:absolute;display:none;}h1{color:chocolate;font-family:sans-serif;}ul{list-style-type:none;margin:0;padding:0;overflow:hidden;}.radli{float:left;}.rada: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;}.rada:hover,a:active{background-color:aqua;}.blank{border:5pxdimgreysolid;border-radius:10px;width:98%;box-shadow:darkcyan5px5px10px;float:top;margin-bottom:5px;}.c1a{color:dodgerblue;}#logoh1{color:lime;}#logoh2{color:dodgerblue;}#content_topa{color:dodgerblue;}3、JS代码/***Createdbyxxon2014/12/28.*/$(document).ready(function(){$("#p1").mouseenter(function(){varp1=$("#p1");p1.css({background:'#00ced1',boxshadow:'red5px5px5px',fontsize:'25px'});p1.css({border:'solid2pxlavender'})$(".b1").css({display:'inherit'})$(".b2").css({display:'none'})$(".b3").css({display:'none'})$(".b4").css({display:'none'})})$("#p1").mouseleave(function(){varp1=$("#p1");varp1=$("#p1");p1.css({background:'cornflowerblue'});})$("#p2").mouseenter(function(){varp2=$("#p2");p2.css({background:'#00ced1'});$(".b2").css({display:'inherit'})$(".b1").css({display:'none'})$(".b3").css({display:'none'})$(".b4").css({display:'none'})})$("#p2").mouseleave(function(){varp2=$("#p2");p2.css({background:'orange'});})$("#p3").mouseenter(function(){varp3=$("#p3");p3.css({background:'#00ced1'});$(".b3").css({display:'inherit'})$(".b1").css({display:'none'})$(".b2").css({display:'none'})$(".b4").css({display:'none'})})$("#p3").mouseleave(function(){varp3=$("#p3");p3.css({background:'chartreuse'});})$("#p4").mouseenter(function(){varp4=$("#p4");p4.css({background:'#00ced1'})$(".b4").css({display:'inherit'})$(".b1").css({display:'none'})$(".b3").css({display:'none'})$(".b2").css({display:'none'})})$("#p4").mouseleave(function(){varp4=$("#p4");sp4.css({background:'orchid'})})})第五章课程设计心得在学习网页制作的过程中,我深深体会到一点“有付出,就终有回报”,你的付出与你的回报终究是成正比的。经过了多少漫漫长路,经过了多少忘我的投入,经过了多少波折,我的网页与众人见面了。当我第一眼在网络下一览我的个人主页,我是多么的激动,多么的兴奋,就像多年未见的老同学,一种讲不出道不明的感觉。做好主页,并不是一件容易的事,它包括个人主页的选题、内容采集整理、图片的处理、页面的排版设置、背景及其整套网页的色调等很多东西。
第六章参考文献[1]谢希仁.计算机网络(第五版)[M].北京:电子工业出版社,2008年2月[2]胡小强计算机网络[M]北京:北京邮电大学出版社2005年1月[3]李济国计算机网络上海:上海交通大学出版社2012年3月[4]张和计算机网络完全北京:北京电子大学出版社2006年5月[5]刘贺计算机网络西安:西安电子工业大学出版社2008年8月致谢基于C8051F单片机直流电动机反馈控制系统的设计与研究基于单片机的嵌入式Web服务器的研究MOTOROLA单片机MC68HC(8)05PV8/A内嵌EEPROM的工艺和制程方法及对良率的影响研究基于模糊控制的电阻钎焊单片机温度控制系统的研制基于MCS-51系列单片机的通用控制模块的研究基于单片机实现的供暖系统最佳启停自校正(STR)调节器单片机控制的二级倒立摆系统的研究基于增强型51系列单片机的TCP/IP协议栈的实现基于单片机的蓄电池自动监测系统基于32位嵌入式单片机系统的图像采集与处理技术的研究基于单片机的作物营养诊断专家系统的研究基于单片机的交流伺服电机运动控制系统研究与开发基于单片机的泵管内壁硬度测试仪的研制基于单片机的自动找平控制系统研究基于C8051F040单片机的嵌入式系统开发基于单片机的液压动力系统状态监测仪开发模糊Smith智能控制方法的研究及其单片机实现一种基于单片机的轴快流CO〈,2〉激光器的手持控制面板的研制基于双单片机冲床数控系统的研究基于CYGNAL单片机的在线间歇式浊度仪的研制基于单片机的喷油泵试验台控制器的研制基于单片机的软起动器的研究和设计基于单片机控制的高速快走丝电火花线切割机床短循环走丝方式研究基于单片机的机电产品控制系统开发基于PIC单片机的智能手机充电器基于单片机的实时内核设计及其应用研究基于单片机的远程抄表系统的设计与研究基于单片机的烟气二氧化硫浓度检测仪的研制基于微型光谱仪的单片机系统单片机系统软件构件开发的技术研究基于单片机的液体点滴速度自动检测仪的研制基于单片机系统的多功能温度测量仪的研制基于PIC单片机的电能采集终端的设计和应用基于单片机的光纤光栅解调仪的研制气压式线性摩擦焊机单片机控制系统的研制基于单片机的数字磁通门传感器基于单片机的旋转变压器-数字转换器的研究基于单片机的光纤Bragg光栅解调系统的研究单片机控制的便携式多功能乳腺治疗仪的研制基于C8051F020单片机的多生理信号检测仪基于单片机的电机运动控制系统设计Pico专用单片机核的可测性设计研究基于MCS-51单片机的热量计基于双单片机的智能遥测微型气象站MCS-51单片机构建机器人的实践研究基于单片机的轮轨力检测基于单片机的GPS定位仪的研究与实现基于单片机的电液伺服控制系统用于单片机系统的MMC卡文件系统研制基于单片机的时控和计数系统性能优化的研究基于单片机和CPLD的粗光栅位移测量系统研究单片机控制的后备式方波UPS提升高职学生单片机应用能力的探究基于单片机控制的自动低频减载装置研究基于单片机控制的水下焊接电源的研究基于单片机的多通道数据采集系统基于uPSD3234单片机的氚表面污染测量仪的研制基于单片机的红外测油仪的研究96系列单片机仿真器研究与设计基于单片机的单晶金刚石刀具刃磨设备的数控改造基于单片机的温度智能控制系统的设计与实现基于MSP430单片机的电梯门机控制器的研制基于单片机的气体测漏仪的研究基于三菱M16C/6N系列单片机的CAN/USB协议转换器基于单片机和DSP的变压器油色谱在线监测技术研究基于单片机的膛壁温度报警系统设计基于AVR单片机的低压无功补偿控制器的设计基于单片机船舶电力推进电机监测系统基于单片机网络的振动信号的采集系统基于单片机的大容量数据存储技术的应用研究基于单片机的叠图机研究与教学方法实践基于单片机嵌入式Web服务器技术的研究及实现基于AT89S52单片机的通用数据采集系统基于单片机的多道脉冲幅度分析仪研究机器人旋转电弧传感角焊缝跟踪单片机控制系统基于单片机的控制系统在PLC虚拟教学实验中的应用研究基于单片机系统的网络通信研究与应用基于PIC16F877单片机的莫尔斯码自动译码系统设计与研究基于单片机的模糊控制器在工业电阻炉上的应用研究基于双单片机冲床数控系统的研究与开发基于Cygnal单片机的μC/OS-Ⅱ的研究基于单片机的一体化智能差示扫描量热仪系统研究基于TCP/IP协议的单片机与Internet互联的研究与实现变频调速液压电梯单片机控制器的研究基于单片机γ-免疫计数器自动换样功能的研究与实现基于单片机的倒立摆控制系统设计与实现
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 肠道病毒所致各系统感染病因介绍
- 功能介绍的课件
- 《NFC概述及认证》课件
- 耻骨炎病因介绍
- 智能制造生产线技术及应用 教案 5-2 AGV小车搬运系统
- 特发性骨质疏松病因介绍
- 《专利概述》课件
- 《债的发生原因》课件
- 二零二四年度汽车销售公司承包合同3篇
- 商业楼外墙施工方案(挤苯板、真石漆)
- 六年级上专题复习题及知识归纳(分数乘除、比、百分数应用、简便运算、解方程)
- 土力学与基础工程复习题及答案
- 购物中心运营管理
- 血液透析用留置针在自体动静脉内瘘中的应用新进展
- 酒店法规和法律事务案例分析
- 细菌的 遗传与变异
- 建筑施工技术的现状及未来发展分析
- 《公司金融》模拟试题答案 东北财经大学2023年春
- GB/T 27306-2008食品安全管理体系餐饮业要求
- GB/T 19367-2009人造板的尺寸测定
- 2022广东惠州市博罗县市场监督管理局补充公开招聘食品安全巡查员和质监辅助人员5人【共500题含答案解析】模拟检测试卷
评论
0/150
提交评论