4网页设计报告.doc

存档资料 成绩： 　 华东交通大学理工学院 课 程 设 计 报 告 书 所属课程名称 网页设计与制作课程设计 题 目 　 制作网页首页　　 分 院 　　 　 专业班级 学　 号 　 　　 　 学生姓名 　 　 　　 指导教师 　　 2014 年 12月 29 日  目 录 目 录 1 第1章 课程设计内容及要求 2 第2章 课程设计的目的与意义 3 第3章 网页详细设计 4 第4章 网页效果 5 第5章 网页设计部分源代码 10 第6章 课程设计心得 27 第7章 参考文献（资料） 28 第1章 课程设计内容及要求 用已经学过的网站开发技术及开发工具DW，根据网站首页果图，利用DIV+CSS设计出一个《网站首页》。 设计内容及要求 1．建立站点； 2．结构分析； 3．搭建框架； 4．切割效果图； 5．布局页面——头部和导航； 6．布局页面——侧边栏； 7．布局页面——主体部分； 8．底部和细节调整。 要求：用DW进行设计； 第2章 课程设计的目的与意义 目的：1）熟悉设计网页的基本思路，掌握网站开发工具EditPlus软件的使用方法。 2）熟悉网页中div与样式CSS的相关知识，将其用于实践加以巩固，为将来的工作奠定基础。 3）使学生得到系统的技能训练，巩固加深对编程的基础理论知识的掌握与了解理解。 4）培养学生综合运用所学理论知识解决实际问题的能力，使学生成为具有扎实的计算机理论基础和较强的独立动手能力的复合型人才和应用型人才。 第3 章 网页详细设计 设计方法与步骤： 建立站点 由于个人偏好，喜欢纳兰性德的诗词，便做了一个有关他的网页 结构分析 一个网页大体包含头部 导航 左右侧边栏及底部等结构，对这些部分依次设计、制作 搭建框架 切割效果图 将各个模块设计好，运行并截取效果图 布局页面——头部和导航 头部设计为“纳兰性德驿站（居左，醒目大字号）、设为首页 收藏驿站 驿站地图（居右）”，导航栏设计为“纳兰简介、纳兰诗词、生平经历、影视形象、人物评价” 五个内容 布局页面——侧边栏 分为左右两部分，皆为纳兰诗词展示 布局页面——主体部分 该网页主体即为左右侧栏了，左侧添加了一个PPT图片放映（javascript技术实现），其余皆为纳兰词展示，这里将导航中的“纳兰诗词”作为首页 底部和细节调整 底部标注了版权 相对路径和相对于根目录路径 第 4章 网页效果 用截图工具将各个部分的设计的效果图截取下来 头部及导航： 左右侧各块： （注意看，各个图片上标有文字） 底部模块： 网页全图： 第5章 网页设计部分源代码 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=utf-8 / title纳兰性德网页/title link type=text/css rel=stylesheet href=css/cxyz.css / script type=text/javascript src=js/jquery.min.js/script script type=text/javascript src=js/sl.js/script /head body style= background: url(images/body_bg.png) repeat-x scroll center top transparent; font-size:12px div class=cx_top div class=fl cx_left style=font-size:25px;color:#cc0000 纳兰性德驿站 /div div class=fr cx_right a href=#img src=images/min3.png alt=网站地图驿站地图/a a href=#img src=images/min2.png alt=收藏创新驿站收藏驿站/a a href=#img src=images/min1