华东交通大学理工学院
课 程 设 计 报 告 书
所属课程名称 网页设计与制作课程设计
题 目 网站首页
分 院 电 信 分 院
专业班级
学 号
学生姓名
指导教师 程志平
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 代码如下:
天气查询
- 南昌 雷阵雨 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(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
border="0">
中间中部
如图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 代码如下:
南昌风光
">
src="qingshanhu.png">
src="baohuru.png">
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 代码如下:
小吃推荐
- 17号抓饭
- 大盘鸡
- 五一夜市
- 水果
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 代码如下:
宾馆酒店
- 0791大饭店
- 海德大饭店
- 银都大饭店
- 鸿福大饭店
- 友好大酒店
- 棉麻宾馆
- 电信宾馆
Css 样式如下:
#life{padding-top:10px;padding-bottom:5px;margin-bottom:5px;}
5、布局页面——下部
如图3-10
图3-10
Html 代码如下:
艾萨克 ©版权所有
href="mailto:[email protected]">[email protected]
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月
致 谢
- 0
- 顶一下
收藏 推荐 打印 | 录入:admin | 阅读: 次
应城市纪委监察局“五个一”制度加强干部管理
刘媛媛演讲稿
华东交通大学理工学院
课 程 设 计 报 告 书
所属课程名称 网页设计与制作课程设计
题 目 网站首页
分 院 电 信 分 院
专业班级
学 号
学生姓名
指导教师 程志平
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 代码如下:
天气查询
- 南昌 雷阵雨 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(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
border="0">
中间中部
如图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 代码如下:
南昌风光
">
src="qingshanhu.png">
src="baohuru.png">
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 代码如下:
小吃推荐
- 17号抓饭
- 大盘鸡
- 五一夜市
- 水果
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 代码如下:
宾馆酒店
- 0791大饭店
- 海德大饭店
- 银都大饭店
- 鸿福大饭店
- 友好大酒店
- 棉麻宾馆
- 电信宾馆
Css 样式如下:
#life{padding-top:10px;padding-bottom:5px;margin-bottom:5px;}
5、布局页面——下部
如图3-10
图3-10
Html 代码如下:
艾萨克 ©版权所有
href="mailto:[email protected]">[email protected]
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月
致 谢
- 0
- 顶一下
收藏 推荐 打印 | 录入:admin | 阅读: 次
应城市纪委监察局“五个一”制度加强干部管理
刘媛媛演讲稿