网页课程设计与报告.docx

1、网页课程设计与报告存档资料 成绩： 华东交通大学理工学院课 程 设 计 报 告 书所属课程名称 网页设计与制作课程设计 题 目 网站首页 分 院 电 信 分 院 专业班级 信息管理与信息系统1班 学号 201002104501XX 学生姓名 何XX 指导教师 程志平 2012年 12月 24日 目录第一章 绪论 11、网站设计的目 12、网站的主题 13、网站规划 1第二章 网页整体设计 21、创建HTML 22、创建CSS文件 3第三章 网页详细设计 41、头部的和导航栏设计 42、布局页面侧边栏 73、页面布局主体部分 94、页面布局脚部的设计 11第四章 课程设计心得 121、充分发挥动

2、手能力 122、在设计过程中不断提高网页设计水平 123、不足之处 12第五章 参考文献 13第一章 绪论 1、网站设计的目 本学期通过对网页设计与制作的学习，让我了解到了如何让设计网页，以及一些基础的网页设计的知识和对Dreamweaver软件的基础应用，学习到了运用一些基本的网页设计工具和原则来制作和美观网页。比如PS，背景图片，文字，超链接，布局，框架，多媒体等等。 通过这次设计，进一步的提高了我的网站设计能力和动手能力，更加全面的巩固了我在课堂上学到的知识，掌握了网站设计的一些方法和步骤，了解了网站的基本结构，熟悉了规范和标准。 2、网站的主题主题：某企业网站首页 3、网站规划 我设计

3、网页的布局，整体上我借鉴了一些公企业网站，我才用了其中的一些布局，分块。而我主要采用了布局模式，div+css来设计，背景图片，然后再插入超链接，图片等等，这样就形成了整个网页的布局设第二章 网页整体设计1、创建HTML首先打开DW软件建立一个站点，我取名为homework，如下图2-1图2-1站点建好后，还需要在产点里创建一些文件夹，用于存放东西。将CSS放在CSS文件夹里，图片放在images里，js存放java脚本。如图2-2图2-2然后利用所学的知识，开始进行大体的页面布局。布局的方式使用CSS+DIV进行如下图2-3：源代码：此处显示 id header 的内容此处显示 id nav

4、 的内容此处显示 id main 的内容此处显示 id side 的内容此处显示 id footer 的内容图2-32、创建CSS文件创建一个外联的层叠样式表，将CSS代码写如下：/*body*/#container width:900px; margin:0 auto;/*header*/#header height:70px; background:#CCFFCC; margin-bottom:8px;#nav height:30px; background:#CCFFCC; margin-bottom:8px; /*main*/#maincontent margin-bottom:8px

5、;#main float:left; width:664px; height:500px; background:#FFFF99;#side float:right; width:228px; height:500px; background:#FFCC99;/*footer*/#footer height:70px; background:#CCFFCC;第三章 网页详细设计1、头部的和导航栏设计头部：分为两部分，一个是logo（3-1）靠左侧显示，一个是搜索（3-2）靠右侧显示，那么布局时插入两个div，一个向左浮动，一个向右浮动的方式来完成。另外还有很多种实现方法，比如logo用h1标签

6、，搜索用span，或者把logo做为背景图片也是可以的，不管采用哪种方法，要根据页面的需求选用一种最合理的方法。如果要在logo加上链接的话，那么就不能用背景图片的方法了。 产品搜索图3-1 图3-2用如下代码实现：搜索产品#search float:right; height:24px; margin-top:30px; color:#444;.inp_srh width:140px; height:17px; padding-left:20px; background:url(./images/srh_bg.gif) 0 0 no-repeat; border:1px solid #cbc

7、bcb;.btn_srh width:58px; height:23px; background:url(./images/btn_srh.gif) 0 0 no-repeat; border:none; cursor:pointer; text-indent:-999em;#search * vertical-align:middle;inp_srh的宽度和高度并不是实际效果图中的宽高，是因为默认情况下文本框带有内边距造成的。另外就是padding的值也会算到总宽度上的；btn_srh就是应用背景图像来实现的，说明一点这里的border的值为none指的是无边框，cursor定义鼠标样式为手

8、形， text-indent:-999em这个属性它的作用相当于word中的首行缩进，这里设置成-999，意思是向左侧缩进-999em，这样就看不到文字，所以它的作用是将按钮上的文字隐藏。导航分为一级导航和二级导航，所以我需要在nav下再插入nav_main和nav_son两个块元素。先设置nav的高度及背景图片样式。#nav height:66px; background:url(./images/nav_bg.gif) 0 0 repeat-x; argin-bottom:8px;一级导航栏使用如下代码：首 页企业新闻企业简介产品展示企业历史招商加盟企业文化网上下单联系我们二级导航栏代码如

9、下： 交大理工 电信分院 10信管 何浔亚 论坛模板 腾讯 360 微软 Adobe 巨人 淘宝 京东 苏宁 国美CSS代码如下：#menu UL BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; PADDING-BOTTOM: 0px; LINE-HEIGHT: 150%; LIST-STYLE-TYPE: none; MARGIN: 0px 0px 0px 15px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; BORDER-TOP: 0px; LIST-STYLE-IMAGE: none; BORDER-RIGHT: 0px;

10、PADDING-TOP: 0px#menu_out PADDING-LEFT: 4px; WIDTH: 956px; BACKGROUND: url(./images/menu_left.gif) no-repeat left top; MARGIN-LEFT: auto; MARGIN-RIGHT: auto#menu_in PADDING-RIGHT: 4px; BACKGROUND: url(./images/menu_right.gif) no-repeat right top#menu BACKGROUND: url(./images/menu_bg.gif) repeat-x; H

11、EIGHT: 73px.menu_line WIDTH: 8px; BACKGROUND: url(./images/menu_line.gif) no-repeat center top.menu_line2 WIDTH: 15px; BACKGROUND: url(./images/menu_line2.gif) no-repeat center top#nav PADDING-LEFT: 20px#nav LI FLOAT: left; HEIGHT: 35px#nav LI A PADDING-LEFT: 6px; DISPLAY: block; BACKGROUND: url(./i

12、mages/menu_on_left.gif) no-repeat left top; FLOAT: left; HEIGHT: 35px; CURSOR: pointer; TEXT-DECORATION: none#nav LI A SPAN PADDING-BOTTOM: 10px; LINE-HEIGHT: 14px; PADDING-LEFT: 10px; PADDING-RIGHT: 14px; BACKGROUND: url(./images/menu_on_right.gif) no-repeat right top; FLOAT: left; COLOR: #ffffff;

13、FONT-SIZE: 14px; FONT-WEIGHT: bold; TEXT-DECORATION: none; PADDING-TOP: 11px#nav LI .nav_on BACKGROUND-POSITION: left 100%#nav LI .nav_on SPAN PADDING-BOTTOM: 7px; PADDING-LEFT: 10px; PADDING-RIGHT: 14px; BACKGROUND-POSITION: right 100%; COLOR: #333333; TEXT-DECORATION: none; PADDING-TOP: 14px#menu_

14、con TEXT-ALIGN: left; PADDING-LEFT: 20px; CLEAR: both#menu_con LI MARGIN-TOP: 8px; FLOAT: left; HEIGHT: 22px#menu_con LI A PADDING-LEFT: 3px; DISPLAY: block; BACKGROUND: url(./images/menu_on_left2.gif) no-repeat left top; FLOAT: left; CURSOR: pointer#menu_con LI A SPAN PADDING-BOTTOM: 4px; LINE-HEIG

15、HT: 12px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; BACKGROUND: url(./images/menu_on_right2.gif) no-repeat right top; FLOAT: left; PADDING-TOP: 6px#menu_con LI A:hover BACKGROUND: url(./images/menu_on_left2.gif) no-repeat left bottom; TEXT-DECORATION: none#menu_con LI A:hover SPAN BACKGROUND: url(./i

16、mages/menu_on_right2.gif) no-repeat right bottom做出的效果图如下3-3：图3-3通过使用图片，使得该二级导航栏具有动态效果，导航栏部分完成。2、布局页面侧边栏主体部分先从侧边栏说起，侧边栏可以共用一个样式，下面就先做一个通用的，插入如下html代码这里的标题采用h2标签，没必要再用个div，还有“产品导购”中“产品”二字是红色字体，这里用strong标签，这样可以省去很多没必要的定义。定义侧边栏的样式如下3-4：#side float:right; width:228px;.side_box margin-bottom:8px;.side_box

17、 h2 height:25px; padding:6px 10px 0 10px; background:url(./images/side_bg.gif) 0 0 no-repeat; font-size:14px; color:#444;.side_box h2 strong color:#f30;.side_con padding:10px;background:url(./images/side_bg.gif) 0 bottom no-repeat;图3-4产品导购部分，内容分为三部分，可以用ul、li列表的形式实现，前边的图标用背景图片来实现，可以在li上设置背景图片。产品导购语音业

18、务：普通电话 | 语音数字中继语音业务：普通电话 | 语音数字中继语音业务：普通电话 | 语音数字中继“产品导购”的样式定义如下（图3-5）：图3-5.product padding:0px 10px;.product ul background:url(./images/icon2.gif) 5px 12px no-repeat;.product ul li height:58px; padding:14px 0 0 64px; border-bottom:1px dashed #dcdcdc; color:#777;.product ul li strong display:block;

19、height:24px; color:#333;.product ul li a color:#777;.product ul li a:hover text-decoration:underline;.product ul li.product3 border-bottom:none;“产品导购”完成后，下边该“使用问答”了。“使用问答”部分都是一问一答的形式，问答各采用不同的图标，而且问的文字加粗了。所以这部分采用dl、dt、dd的形式来完成。最新出的这个产品如何使用？该产品采用全新的技术，较上一产品有质的飞跃，功能上增强了许多，使用方法更加简便.最新出的这个产品如何使用？该产品采用全新的技术，较上一.最新出的这个产品如何使用？该产品采用全新的技术，较上一产品有质的飞跃，功能上增强了.最新出的这个产品如何使用？该产品采用全新的技术，较上一产品有质的飞跃，功能上增强.最新出的这个产品如何使用？该产品采用全