华东交通大学理工学院
课 程 设 计 报 告 书
所属课程名称 网页设计与制作课程设计
题 目 网站首页
分 院 电 信 分 院
专业班级
学 号
学生姓名
指导教师 程志平
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、创建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(buttonjpg) 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(buttonjpg) 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 代码如下
天气查询
南昌雷阵雨 20℃-31℃ 新建多云转阴 20℃-28℃ 安义阵雨转多云 25℃-32℃ 青山湖阵雨转阴 21℃-28℃ 进贤雷阵雨 26℃-30℃
css 代码如下
#left{float:left;width:200px;background-color:#FFFFFF;margin:0px;padding:0px 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(icongif) 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;}