华东交通大学理工学院
课 程 设 计 报 告 书
所属课程名称 网页设计与制作课程设计 题 目 利用DIV+CSS设计一个《网站首页》 分 院 电 信 分 院
专业班级 12信息管理与信息系统 学 号 [1**********]209 学生姓名 许鹏飞 指导教师 魏建红
2014 年 12月 29 日
课程设计（论文）评阅意见
评阅人 职称
20 年 月 日
目录
一、设计目的 ..................... 4 二、设计内容及要求 ............... 4 三、需求分析 ..................... 4 四 、设计方法与步骤 .............. 5 五、设计总结 .................... 15 参考文献（资料） ................ 17
一、设计目的
用已经学过的网站开发技术及开发工具DW，根据网站首页效果图，利用DIV+CSS设计出一个《网站首页》。
二、设计内容及要求
内容有：1．建立站点；2．结构分析；3．搭建框架；4．切割效果图；5．布局页面——头部和导航；6．布局页面——侧边栏；7．布局页面——主体部分；8．底部和细节调整。
三、需求分析
网页设计是将技术性与艺术性融为一体的创造性活动。网页设计是以功能行为第一指导原则，以技术因素为主要考虑对象，以完成或实现必要的功能为目标。近几年随着网络的发展而逐渐受到人们的重视，它本身已网络为载体，把各种信息以快捷、方便的方式传达给受众，在这种标准的要求下，逐步产生了审美需求和功能
需求等。人们对美的追求是不断深入的，网页设计同样如此。如何使受众能更好的和有效率地接受网页上的信息，这就需要从审美方面入手。网页设计的审美需求是对视觉设计美学的一种继承和延伸，两者的表现形式和目的都有一定的相似性。
网页设计的主题为我的篮球网，它是我根据自己的兴趣做出来的网站，内容非常简单，但却富有深意！它融合了当今大多数青少年朋友的兴趣爱好，可以说是一个大众化的网站！
四 、设计方法与步骤
1．建立站点
打开dreamweaver cs4，建立站点，放到F盘里，在目录下有css、jz2.html 、web（建立的网站）文件夹。如下图示：
2．网站代码
头部 中间
首页 活动 图片 视频 交流 关于
*
alt="" />
激战2之美
《激战2》的故事以泰瑞亚
大陆为舞台，充满了波澜壮阔的英雄史诗。游戏拥有可覆盖半个欧洲的地图面积，充分契合了游戏的“史诗”风范！玩家可以在这片充满真实细节的幻想国土上自由冒险探索。同时，爽快的实感战斗，独一无二的个人史诗剧情，无处不在动态事件，横跨三个服务器的世界之战等颠覆性的创新理念，带领玩家演绎真实热血的冒险体验。
了解更多
alt="" />
激战2之美
《激战2》的故事以泰瑞亚
大陆为舞台，充满了波澜壮阔的英雄史诗。游戏拥有可覆盖半个欧洲的地图面积，充分契合了游戏的“史诗”风范！玩家可以在这片充满真实细节的幻想国土上自由冒险探索。同时，爽快的实感战斗，独一无二的个人史诗剧情，无处不在动态事件，横跨三个服务器的世界之战等颠覆性的创新理念，带领玩家演绎真实热血的冒险体验。
了解更多
*
alt="" />
激战2之美
《激战2》的故事以泰瑞亚
大陆为舞台，充满了波澜壮阔的英雄史诗。游戏拥有可覆盖半个欧洲的地图面积，充分契合了游戏的“史诗”风范！玩家可以在这片充满真实细节的幻想国土上自由冒险探索。同时，爽快的实感战斗，独一无二的个人史诗剧情，无处不在动态事件，横跨三个服务器的世界之战等颠覆性的创新理念，带领玩家演绎真实热血的冒险体验。
了解更多
尾部
《激战2》国服将于12月19日更新世
界动态《欢度冬幕节》
奇妙工
场
src="css/images/gc1.jpg" alt="" />
登上玩具制作人魔像造型的飞船，进
入他的奇妙工场——提克斯的无尽迷宫，整理失控的玩具们，帮提克斯打理好他的工场!
温暖格朗克的心
src="css/images/gc2.jpg" alt="" />
英雄快来拯救冬幕节!格朗克从神佑之城的孤儿院中偷走了孩童们的装饰品，只有靠你才能找回它们!
冬幕节礼品树
src="css/images/gc3.jpg" alt="" />
礼品树是泰瑞亚最新推出的节日装饰，这些树木可以全年无休地提供冬幕节礼物。...
节庆活动
src="css/images/gc4.jpg" alt="" />
用传统的方式庆祝节日：穿梭于雪花之间;在叮铛铃乐团中保护好驮着礼物的牦牛;在雪球大乱斗中，争抢宝贵的礼物!
玩具和宝藏
提克斯为泰瑞亚的子民带来了新的礼物!完成三个新的收藏成就，获取无尽礼物盒合剂这样的独特奖励!这次节日还有其他的新奇奖励，如尚雅乐团铃铛和水手的凝霜换气装置，为大家带来更多美妙的节日气氛!
潮流单品雪地礼服
* 雪地礼服
* 温暖围巾
* 高贵长靴
* 绚丽翅膀
* 爱心手套
图例
五、设计总结
通过这次网页课程的设计，激发了学习兴趣，调动学习的自觉性，提高了自己动脑、动手，动口的能力，运用网络资源，结合教材及老师的指导，通过自身的实践，创作出积聚大众风格的网页。总体来说，整个小学期的学习过程，我学会了很多知识。
在此次网页设计中，我充分利用了这次设计的机会，全心全意投入到网页世界，去不断的学习、不断的探索；同时去不断的充实、不断的完善自我，在网络的天空下逐渐的美化自己的人生！
做好页面，并不是一件容易的事，它包括主页的选题、内容采集整理、图片的处理、页面的排版设置、背景及其整套网页的色调等很多东西。本次课程设计不是很好，页面过于简单，创新意识薄弱，这是我需要提高的地方。需要学的地方还有很多，需要有耐心、坚持，不断的学习，综合运用多种知识，才能设计出好的web页面。
总体来说，通过这次的网页课程设计，有收获也有遗憾，不足的地方还很多，但我想，我已经迈入了网页设计的
大门，只要我再认真努力的去学习，去提高，凭借我对网页设计的热情和执着，我将来设计出的网页会更加专业，更完善！
参考文献（资料）
[1] 谢希仁 计算机网络（第五版）[M]. 北京：电子工业出版社，2008年2月
[2] 胡小强 计算机网络[M] 北京：北京邮电大学出版社2005年1月
[3] 赵祖荫 网页设计与制作[M] 北京：清华大学出版社,2008年9月
[4] 周德华 新编网页设计教程[M].北京：冶金工业出版社，2006年7月
[5] 胡崧 HTML从入门到精通[M]。北京：中国青年出版社，2007年2月
[6] 杨选辉 网页设计与教程 [M].北京：清华大学出版社，2009年4月
[7] 张怒涛 Photoshop平面设计图像处理技法 [M].北京：清华大学出版社，2003
年12月
[8] 杨聪 Photoshop经典作品赏析 [M].北京：北京海洋智慧图书有限公司，2002
年12月
致 谢
华东交通大学理工学院
课 程 设 计 报 告 书
所属课程名称 网页设计与制作课程设计 题 目 利用DIV+CSS设计一个《网站首页》 分 院 电 信 分 院
专业班级 12信息管理与信息系统 学 号 [1**********]209 学生姓名 许鹏飞 指导教师 魏建红
2014 年 12月 29 日
课程设计（论文）评阅意见
评阅人 职称
20 年 月 日
目录
一、设计目的 ..................... 4 二、设计内容及要求 ............... 4 三、需求分析 ..................... 4 四 、设计方法与步骤 .............. 5 五、设计总结 .................... 15 参考文献（资料） ................ 17
一、设计目的
用已经学过的网站开发技术及开发工具DW，根据网站首页效果图，利用DIV+CSS设计出一个《网站首页》。
二、设计内容及要求
内容有：1．建立站点；2．结构分析；3．搭建框架；4．切割效果图；5．布局页面——头部和导航；6．布局页面——侧边栏；7．布局页面——主体部分；8．底部和细节调整。
三、需求分析
网页设计是将技术性与艺术性融为一体的创造性活动。网页设计是以功能行为第一指导原则，以技术因素为主要考虑对象，以完成或实现必要的功能为目标。近几年随着网络的发展而逐渐受到人们的重视，它本身已网络为载体，把各种信息以快捷、方便的方式传达给受众，在这种标准的要求下，逐步产生了审美需求和功能
需求等。人们对美的追求是不断深入的，网页设计同样如此。如何使受众能更好的和有效率地接受网页上的信息，这就需要从审美方面入手。网页设计的审美需求是对视觉设计美学的一种继承和延伸，两者的表现形式和目的都有一定的相似性。
网页设计的主题为我的篮球网，它是我根据自己的兴趣做出来的网站，内容非常简单，但却富有深意！它融合了当今大多数青少年朋友的兴趣爱好，可以说是一个大众化的网站！
四 、设计方法与步骤
1．建立站点
打开dreamweaver cs4，建立站点，放到F盘里，在目录下有css、jz2.html 、web（建立的网站）文件夹。如下图示：
2．网站代码
头部 中间
首页 活动 图片 视频 交流 关于
*
alt="" />
激战2之美
《激战2》的故事以泰瑞亚
大陆为舞台，充满了波澜壮阔的英雄史诗。游戏拥有可覆盖半个欧洲的地图面积，充分契合了游戏的“史诗”风范！玩家可以在这片充满真实细节的幻想国土上自由冒险探索。同时，爽快的实感战斗，独一无二的个人史诗剧情，无处不在动态事件，横跨三个服务器的世界之战等颠覆性的创新理念，带领玩家演绎真实热血的冒险体验。
了解更多
alt="" />
激战2之美
《激战2》的故事以泰瑞亚
大陆为舞台，充满了波澜壮阔的英雄史诗。游戏拥有可覆盖半个欧洲的地图面积，充分契合了游戏的“史诗”风范！玩家可以在这片充满真实细节的幻想国土上自由冒险探索。同时，爽快的实感战斗，独一无二的个人史诗剧情，无处不在动态事件，横跨三个服务器的世界之战等颠覆性的创新理念，带领玩家演绎真实热血的冒险体验。
了解更多
*
alt="" />
激战2之美
《激战2》的故事以泰瑞亚
大陆为舞台，充满了波澜壮阔的英雄史诗。游戏拥有可覆盖半个欧洲的地图面积，充分契合了游戏的“史诗”风范！玩家可以在这片充满真实细节的幻想国土上自由冒险探索。同时，爽快的实感战斗，独一无二的个人史诗剧情，无处不在动态事件，横跨三个服务器的世界之战等颠覆性的创新理念，带领玩家演绎真实热血的冒险体验。
了解更多
尾部
《激战2》国服将于12月19日更新世
界动态《欢度冬幕节》
奇妙工
场
src="css/images/gc1.jpg" alt="" />
登上玩具制作人魔像造型的飞船，进
入他的奇妙工场——提克斯的无尽迷宫，整理失控的玩具们，帮提克斯打理好他的工场!
温暖格朗克的心
src="css/images/gc2.jpg" alt="" />
英雄快来拯救冬幕节!格朗克从神佑之城的孤儿院中偷走了孩童们的装饰品，只有靠你才能找回它们!
冬幕节礼品树
src="css/images/gc3.jpg" alt="" />
礼品树是泰瑞亚最新推出的节日装饰，这些树木可以全年无休地提供冬幕节礼物。...
节庆活动
src="css/images/gc4.jpg" alt="" />
用传统的方式庆祝节日：穿梭于雪花之间;在叮铛铃乐团中保护好驮着礼物的牦牛;在雪球大乱斗中，争抢宝贵的礼物!
玩具和宝藏
提克斯为泰瑞亚的子民带来了新的礼物!完成三个新的收藏成就，获取无尽礼物盒合剂这样的独特奖励!这次节日还有其他的新奇奖励，如尚雅乐团铃铛和水手的凝霜换气装置，为大家带来更多美妙的节日气氛!
潮流单品雪地礼服
* 雪地礼服
* 温暖围巾
* 高贵长靴
* 绚丽翅膀
* 爱心手套
图例
五、设计总结
通过这次网页课程的设计，激发了学习兴趣，调动学习的自觉性，提高了自己动脑、动手，动口的能力，运用网络资源，结合教材及老师的指导，通过自身的实践，创作出积聚大众风格的网页。总体来说，整个小学期的学习过程，我学会了很多知识。
在此次网页设计中，我充分利用了这次设计的机会，全心全意投入到网页世界，去不断的学习、不断的探索；同时去不断的充实、不断的完善自我，在网络的天空下逐渐的美化自己的人生！
做好页面，并不是一件容易的事，它包括主页的选题、内容采集整理、图片的处理、页面的排版设置、背景及其整套网页的色调等很多东西。本次课程设计不是很好，页面过于简单，创新意识薄弱，这是我需要提高的地方。需要学的地方还有很多，需要有耐心、坚持，不断的学习，综合运用多种知识，才能设计出好的web页面。
总体来说，通过这次的网页课程设计，有收获也有遗憾，不足的地方还很多，但我想，我已经迈入了网页设计的
大门，只要我再认真努力的去学习，去提高，凭借我对网页设计的热情和执着，我将来设计出的网页会更加专业，更完善！
参考文献（资料）
[1] 谢希仁 计算机网络（第五版）[M]. 北京：电子工业出版社，2008年2月
[2] 胡小强 计算机网络[M] 北京：北京邮电大学出版社2005年1月
[3] 赵祖荫 网页设计与制作[M] 北京：清华大学出版社,2008年9月
[4] 周德华 新编网页设计教程[M].北京：冶金工业出版社，2006年7月
[5] 胡崧 HTML从入门到精通[M]。北京：中国青年出版社，2007年2月
[6] 杨选辉 网页设计与教程 [M].北京：清华大学出版社，2009年4月
[7] 张怒涛 Photoshop平面设计图像处理技法 [M].北京：清华大学出版社，2003
年12月
[8] 杨聪 Photoshop经典作品赏析 [M].北京：北京海洋智慧图书有限公司，2002
年12月
致 谢