华东交通大学理工学院
课程设计报告书
所属课程名称网页设计与制作课程设计题目网站首页
分院电信分院
专业班级
学号
学生姓名
指导教师程志平
2014年1月4日
目录
第一章绪论 (1)
1、网站设计的目 (1)
2、网站的主题 (1)
3、网站规划 (1)
第二章网页整体设计 (2)
1、创建HTML (2)
2、创建CSS文件 (2)
第三章网页详细设计 (3)
1、头部的和导航栏设计 (3)
2、布局页面——左边栏 (4)
3、布局页面——中间 (6)
4、布局页面——右边 (8)
5、布局页面——下部 (11)
第四章课程设计心得 (13)
1、充分发挥动手能力 (13)
2、在设计过程中不断提高网页设计水平 (13)
3、不足之处 (13)
第五章参考文献 (14)
第一章绪论
1、网站设计的目
本学期通过对《网页设计与制作》的学习，让我了解到了如何让设计网页，以及一些基础的网页设计的知识和对Dreamweaver软件的基础应用，学习到了运用一些基本的网页设计工具和原则来制作和美观网页。比如PS，背景图片，文字，超链接，布局，框架，多媒体等等。通过这次设计，进一步的提高了我的网站设计能力和动手能力，更加全面的巩固了我在课堂上学到的知识，掌握了网站设计的一些方法和步骤，了解了网站的基本结构，熟悉了规范和标准。
2、网站的主题
主题：某企业网站首页
3、网站规划
我设计网页的布局，整体上我借鉴了一些公企业网站，我才用了其中的一些布局，分块。而我主要采用了布局模式，div+css来设计，背景图片，然后再插入超链接，图片等等，这样就形成了整个网页的布局设
第二章网页整体设计
1、创建HTML
首先打开DW软件建立一个站点，我取名为未命名站点2，如下图2-1
图2-1
将网站建好后把网页源代码，css文件，图片等放在相应的目录下。如图1-2.
图2-2
2、创建CSS文件
创建一个css文件。
第三章网页详细设计先设置好页面布局
接下来开始进行局部的设计：
1、头部的和导航栏设计
头部：头部为一张网页的图片和导航栏组成。
如图3-1
图3-1
用如下HTML代码实现：
css样式为
#globallink{margin:0px; padding:0px;}
#globallink ul{list-style:none;padding:0px; margin:0px;} #globallink li{float:left;text-align:center;width:78px;} #globallink a{display:block;padding:9px 6px 11px
6px;background:url(button1.jpg) no-repeat;margin:0px;}
#globallink a:link, #globallink
a:visited{color:#004a87;text-decoration:underline;}
#globallink
a:hover{color:#FFFFFF;text-decoration:underline;background:url(button1_bg. jpg) no-repeat;}#globallink{margin:0px; padding:0px;}
#globallink ul{list-style:none;padding:0px; margin:0px;}
#globallink li{float:left;text-align:center;width:78px;}
#globallink a{display:block;padding:9px 6px 11px
6px;background:url(button1.jpg) no-repeat;margin:0px;}
#globallink a:link, #globallink
a:visited{color:#004a87;text-decoration:underline;}
#globallink
a:hover{color:#FFFFFF;text-decoration:underline;background:url(button1_bg. jpg) no-repeat;}
2、布局页面——左边栏
左边栏的上半部分
如图3-2：
图3-2
Html代码如下：
css代码如下：
#left{float:left;width:200px;background-color:#FFFFFF;margin:0px;padding:0 px 0px 5px 0px;color:#d8ecff;}
#left div{background-color:#5ea6eb;margin:0px 5px 0px 5px;}
#weather{background:url(weather.jpg) no-repeat -5px 0px;margin:0px 5px 0px 5px;background-color:#5ea6eb;}
div#left #weather h3{font-size:12px;padding:24px 0px 0px
74px;color:#FFFFFF;background:none;margin:0px;}
div#weather ul{margin:8px 5px 0px 5px;padding:10px 0px 8px
5px;list-style:none;}
#weather ul li{background:url(icon1.gif) no-repeat 0px 6px;padding:1px 0px 0px 10px;}
左边栏的下半部分
如图3-3
图3-3
Css代码如下：
#today{padding:0px 0px 10px 0px;}
#today ul{list-style:none;margin:-5px 0px 0px 0px;padding:0px;}
#today ul li{text-align:center;}
#today ul li img{border:1px solid #FFFFFF;margin:8px 0px 0px 0px;} #today ul li a:link, #today ul li
a:visited{color:#d8ecff;text-decoration:none;}
#today ul li a:hover{color:#FFFF00;text-decoration:underline;} 3、布局页面——中间
中间上半部
如图3-4
图3-4
中间中部
如图3-5
图3-5
Html代码如下：
Css样式如下：
#beauty{margin:15px 0px 0px 0px;padding:0px;}
#beauty h3{background:url(picture_h1.gif) no-repeat;}
#beauty ul, #route ul{list-style:none;margin:8px 1px 0px 1px;padding:0px;} #beauty ul li{float:left;width:97px;text-align:center;}
#beauty ul li img{border:1px solid #4ab0ff;}
中间下部
如图3-6
图3-6
Html代码如下：
Css样式如下
#route{clear:both; margin:0px;padding:5px 0px 15px 0px;}
#route h3{background:url(route_h1.gif) no-repeat;}
#route ul li{padding:3px 0px 0px 30px;background:url(icon1.gif) no-repeat 20px 7px;}
#route ul li a:link, #route ul li
a:visited{color:#004e8a;text-decoration:none;}
#route ul li a:hover{color:#000000;text-decoration:underline;}
4、布局页面——右边
右边上半部
如图3-7
图3-7
Html代码如下：
Css样式如下：
#map{margin-top:5px;}
#map p{text-align:center;margin:0px;padding:2px 0px 5px 0px;} #map p img{border:1px solid #FFFFFF;}
右边中部
如图3-8
图3-8
Html代码如下：
Css样式如下：
#food{padding-top:10px;}
#food ul, #life ul{list-style:none; padding:0px 0px 10px 0px;margin:10px 10px 0px 10px;}
#food ul li, #life ul li{background:url(icon1.gif) no-repeat 3px
9px;padding:3px 0px 3px 12px;border-bottom:1px dashed #EEEEEE;}
#food ul li a:link, #food ul li a:visited, #life ul li a:link, #life ul li a:visited{color:#d8ecff;text-decoration:none;}
#food ul li a:hover, #life ul li a:hover{color:#000000;text-decoration:none;} 右边下部
如图3-9
图3-9
Html代码如下：
Css样式如下：
#life{padding-top:10px;padding-bottom:5px;margin-bottom:5px;} 5、布局页面——下部
如图3-10
图3-10
Html代码如下：
Css样式如下：
#footer{background-color:#FFFFFF;margin:1px 0px 0px
0px;clear:both;position:relative;padding:1px 0px 1px 0px;}
#footer p{text-align:center;padding:0px;margin:4px 5px 4px
5px;background-color:#5ea6eb;}
#footer p a{color:#FFFFFF;text-decoration:none;}
最后，进行细微的页面调整，将整体部局做得更细更，整个页面如下图3-8：
图3-11
第四章课程设计心得
1、充分发挥动手能力
本学期的网业设计课程，开展了动态思维训练教学活动，对于我们学生来说，可以激发学习兴趣，调动学习的自觉性，自己动脑、动手，动口，运用网络资源，结合教材及老师的指导，通过自身的实践，创作出积聚个人风格、个性的个人网页。总体来说，整个学期的学习过程，我学会了很多知识，虽然过程比较艰辛，但在INTENET 领域中，有了一个展示自我的空间，我觉得很开心、很有成就感。
作为网页设计的初学者，我对网页设计非常感兴趣，一心想设计出一个美观、实用、内容丰富的个人网页。本学期的教改方案由以前学生单纯接受知识变为主动参与教学活动。在这样的压力和动力下，通过自己动手、动脑，通过网络资源，老师的指导，在不断发现问题和解决问题的过程中学到了很多知识，也增强了我的创作能力和动手能力，在网页设计过程中，从构思到设计、完善、维护，整个过程我都全身心投入，使我真正学到了网页设计的知识。
2、在设计过程中不断提高网页设计水平
在本次网页设计中，我不仅学到了很多关于网页设计方面的知识，也从中学会了关于网络、编程等方面的知识。我从最初开始运用FrontPage设计网页，到后来运用Dreamweaver、Flash、Fireworks等网软件设计网页，完善网页。在这个过程中，我通过自学教材、上网查询，学习了Dreamweaver、Flash、Fireworks等网页软件的应用，学会了管理、维护自己的站点，以及一些简单动画、控件的制作等等。在设计过程中也出现了很多的问题，但通过看书，上网查询，请教老师等方式，不断的学习、解决、提高，设计出的网页不论是外观还是内容，都在不断的进步、改善。可以说在自己动手，不断实践的过程中，网页设计水平得到了很大的提高。
3、不足之处
由于对于网页设计软件的强大功能运用得还不够。在网页设计过程中，由于没有网页制作代码的知识，所以在设计时也遇到了很多麻烦，有时插入一个特效脚本也是很麻烦。在网页制作过程中，想提高设计水平，想有个理想的网页，必须学会代码的运用，我将在以后的学习过程中不断加强这方面的学习，希望老师能简单介绍一下代码，让我也对它有个初步的认识，以后再加强学习也才会有所提高。
总体来说，通过今次的对网页设计的学习，有收获也有遗憾、不足的地方，但我想，我已经迈入了网页设计的大门，只要我再认真努力的去学习，去提高，凭借我对网页设计的热情和执着，我将来设计出的网页会更加专业，更完善。也希望老师在今后的日子里多指导。
第五章参考文献
[1] 陈益才网页DIV+CSS布局和动画美化全程实例清华大学出版社，2012年9月
[2] 刘增杰，刘海松精通DIV+CSS 3网页布局与样式清华大学出版社，2012年1月
[3] 新视角文化行 DIV+CSS 3.0网页布局实战从入门到精通人民邮电出版社2013年4
月
[4] 王大远 Div+CSS 3.0网页布局案例精粹电子工业出版社201年2月
[5] 朱印宏 DIV+CSS网页样式与布局实录北京希望电子出版社 2012年1月
[6] 白春红、吴艳网页设计与制作实例教程武汉大学出版社 2012年12月
致谢
