网页设计的课程设计报告

华东交通大学理工学院课程设计报告--PAGE18-目录TOC\o"1-2"\f\h23846第1章素材的准备 27633第2章站点的创建和结构组织 34284建立站点 36052构建框架 410400第3章网页页头的设计 730338Logo设置 729838Search设置 717603总体设置 712482第4章导航栏的设计 825562纵向导航栏设置 832388横向导航菜单 91824二级菜单 917969横向导航的背景图片 105695第5章主体部分的设计 1130341顶部幻点和热点新闻 1115318中部图片表 1129483尾部设置 1219011第6章侧边拦的设计 1421731产品导购 1412218使用问答 1428605联系我们 1415376第7章底部的设计 1530771参考文献（资料） 1619939致谢 17第1章素材的准备利用photoshop软件剪切所需的图片

第2章站点的创建和结构组织建立站点打开DREAMWEAVER，在标题栏点击站点/新建站点，取名站点名为马燕青，然后在目录下新建images文件夹、css文件夹等把各类文件分别存放起来。构建框架从图中可以看出整个页面分为头部区域、导航区域、主体部分和底部，其中主体部分又分为左右两列。头部设置插入ID为header的div以同样的方法插入nav、maincontent、footer;再在maincontent内插入main和side的div。对各个div建立css样式，使其如下：#reader{ background-color:#99FFFF; height:70px; margin-bottom:8px; width:900px;}#nva{ background-color:#CF6; height:30px; margin-bottom:8px; width:900px;#maincontent#main{ height:500px; width:664px; float:left; background-color:#FFCCFF;}#maincontent#side{ background-color:#CFF; height:500px; width:228px; float:right;}#footer{ background-color:#9FF; height:70px; width:900px;}效果图如下：第3章网页页头的设计Logo设置插入一个div,设置为：#logo{float:left;margin-top:18px;}在div里插入所需图片<divid="logo"><imgsrc="images/企业.jgp"width="180"height="45"/></div>Search设置插入一个div,设置为：#logo{float:right;margin-top:30px;}在search里插入一个表单，一个文本框和一个按钮。总体设置去掉reader的背景颜色和底部外边距。效果图：

第4章导航栏的设计纵向导航栏设置在nva里插入ul和li，并输入所需文字。<divid="nva"><ul><li><ahref="#">首页</a></li><li><ahref="#">企业新闻</a></li><li><ahref="#">企业简介</a></li><li><ahref="#">产品展厅</a></li><li><ahref="#">企业历史</a></li><li><ahref="#">招商加盟</a></li><li><ahref="#">网上下单</a></li><li><ahref="#">联系我们</a></li></ul></div>创建css样式为：#nvaul{list-style-type:none;margin:0px; padding:0px;}#nvaulli{ height:26px; padding-top:0px; padding-right:8px; padding-bottom:0px; padding-left:8px; line-height:26px; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:#eee; float:left;}body{ font-family:Verdana,Geneva,sans-serif; font-size:20px; line-height:1.2;}a{ color:#000; text-decoration:none;}a:hover{ color:#F00;}横向导航菜单利用float属性，将纵向导航栏里的li横向排列即可得到横向导航菜单。效果图：二级菜单<divclass="nav_son"><ul><li><ahref="#">企业动态</a></li><li><ahref="#">领导活动</a></li><li><ahref="#">产品资讯</a></li><li><ahref="#">通知公告</a></li></ul></div>横向导航的背景图片在之前建立的nva.a和nva.a.hover的css样式里添加相对应的背景图片。效果图：

第5章主体部分的设计顶部幻点和热点新闻插入一个表格：在1、2、3内插入相关的图片在4中插入以下背景图片并输入相关的内容设置边框、填充、间距为0.效果图：中部图片表插入一个1div,添加背景图片。在1中插入一个表格并在内插入相关图片和内容：设置相关的细节内容，并设置边框、填充、间距效果图：尾部设置用同样的方法插入表格、背景图片，并输入相关的内容。效果图：侧边拦的设计1、先做一个通用的，插入如下html代码：<divclass="side_box"><h2><strong>产品</strong>导购</h2><divclass="side_con">此处显示class"side_con"的内容</div></div>2、定义侧边栏的样式如下：#side{float:right;width:228px;}.side_box{margin-bottom:8px;}.side_boxh2{height:25px;padding:6px10px010px;background:url(../images/side_bg.gif)00no-repeat;font-size:14px;color:#444;}.side_boxh2strong{color:#f30;}.side_con{padding:10px;background:url(../images/side_bg.gif)0bottomno-repeat;}效果图：产品导购1、用ul、li列表的形式输入相关内容：<ul><li><strong>语音业务：</strong><ahref="#">普通电话</a>|<ahref="#">语音数字中继</a></li><li><strong>语音业务：</strong><ahref="#">普通电话</a>|<ahref="#">语音数字中继</a></li><liclass="product3"><strong>语音业务：</strong><ahref="#">普通电话</a>|<ahref="#">语音数字中继</a></li></ul>2、设置样式：.product{padding:0px10px;}.productul{background:url(../images/icon2.gif)5px12pxno-repeat;}.productulli{height:58px;padding:14px0064px;border-bottom:1pxdashed#dcdcdc;color:#777;}.productullistrong{display:block;height:24px;color:#333;}.productullia{color:#777;}.productullia:hover{text-decoration:underline;}.productulduct3{border-bottom:none;}使用问答1、先输入以下内容并复制为5份：<dl><dt><ahref="#">最新出的这个产品如何使用？</a></dt><dd>该产品采用全新的技术，较上一产品有质的飞跃，功能上增强了许多，使用方法更加简便...</dd></dl>2、将“最新出的这个产品如何使用？”加粗，设置相关性质：askdl{padding:10px0;border-bottom:1pxdashed#dcdcdc;}.askdldt{height:22px;overflow:hidden;font-weight:bold;background:url(../images/icon.gif)0-149pxno-repeat;padding-left:20px;}.askdldta{color:#666;}.askdldd{color:#666;background:url(../images/icon.gif)0-198pxno-repeat;padding-left:20px;}联系我们在之前做好的相应的class“side_on”里插入图片并调整位置：<divclass="side_box"><h2><strong>联系</strong>我们</h2><divclass="side_concontact"><ahref="#"><imgsrc="images/tel.gif"width="222"height="112"/></a></div></div>.contact{padding:2px;}第7章底部的设计设置背景颜色为灰色，输入所需要的内容，将它们设置水平垂直居中。效果图：整体效果图：参考文献