网页设计及说明1

存档资料成绩：*******大学理工学院课程设计报告书所属课程名称网页设计题目网站的模版分院专业班级学号学生姓名指导教师2012年6月22日华东交通大学理工学院课程设计报告-2-目录目录第1章建立站点第2章结构分析第3章搭建框架（1）div框架代码（2）各框架的属性截图第4章切割效果图第5章布局页面（1）头部和导航（2）侧边栏（3）主体部分第6章底部和细节调整参考文献第1章建立站点要做一个网站，首先需要建立一个站点。因为网站不同于其它文件，网站是许多文件相互关联的，所以要专门一个目录把它们分门别类存放起来。在DW里创建一个站点指向这个文件夹，然后在目录下新建images文件夹、css文件夹等把各类文件分别存放起来。站点建立好后，先建立一个images和css文件夹，分别用来存放图片和css文件。直接在windows的资源管理器下建立或者在dw里建立都是可以的；在dw建立需要在文件面板列表的根目录上点击右键，选择新建文件夹后更改名字即可。第2章结构分析创建完站点后，就需要对页面结构进行分析了，根据效果图，分析页面分为几大块，该怎么布局更合理。下面这个图是我做的一个企业网站的模板，虽然不怎么好看，但目的是把前边学的东西全都给串起来，让大家掌握各种情况的处理方法，先看下效果图及在网页中显示的样式：在浏览器中打开效果图预览从图中可以看出整个页面分为头部区域、导航区域、主体部分和底部，其中主体部分又分为左右两列，整个页面居中显示，看明白了这点，下框架就好搭建了。整体框架结果图如下：第3章搭建框架css样式表就最好写在单独文件里了，不要再写在文件内部了，这样可以利用代码的重用性，减少很多劳动强度。在DW文件菜单选择新建，然后在打开的窗口页面类型中选择css，创建后保存在css文件夹中layout.css（1）div框架代码!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN==Content-Typecontent=text/html;charset=gb2312/title主页/title/headbody/body/htmldivid=header此处显示idheader的内容/divdivid=nav此处显示idnav的内容/divdivid=maincontentdivid=main此处显示idmain的内容/divdivid=side此处显示idside的内容/div/divdivid=footer此处显示idfooter的内容/div从上边的效果图分析得知，整个网页是居中浏览器显示的，按照这样的写法需要把以上的header、nav、maincontent、footer都设置宽度并居中，这样做起来很麻烦，所以再在这些标签外增加一下父标签，设置这个父标签宽度并居中后，是不是所有的标签都居中了呢。增加后的代码如下：divid=containerdivid=header此处显示idheader的内容/divdivid=nav此处显示idnav的内容/divdivid=maincontentdivid=main此处显示idmain的内容/divdivid=side此处显示idside的内容/div/divdivid=footer此处显示idfooter的内容/div/div（2）各框架的属性截图第4章切割效果图基本框架搭建完毕后，为了更好的收集素材下一步就是要分析每一块该怎么切图了。切图方法有多种，可以使用ps或fireworks自带的切片工具，也可以用QQ的截屏或者创建新文件，把需要的部分复制过来保存都可以，关键看个人对于个软件的熟练程度,而我选择PS.第4章布局页面(1)头部和导航divid=headerdivid=logoimgsrc=images/logo.gifwidth=181height=45//divdivid=search#logo{float:left;margin-top:18px;}#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)00no-repeat;border:1pxsolid#cbcbcb;}.btn_srh{width:58px;height:23px;background:url(../images/btn_srh.gif)00no-repeat;border:none;cursor:pointer;text-indent:-999em;}#search*{vertical-align:middle;}formid=form1name=form1method=postaction=搜索产品inputtype=textname=textfieldid=textfield/inputtype=submitname=buttonid=buttonvalue=查询//form/div/div（2）侧边栏主体部分涉及side和main两部分，的内容比较多，但操作起来并不吃力。主体部分先从侧边栏开始，侧边栏可以共用一个样式，下面就先做一个通用的，插入如下html代码divclass=side_boxh2strong产品/strong导购/h2divclass=side_con此处显示classside_con的内容/div/div（3）主体部分这里的标题采用h2标签，没必要再用个div，还有“产品导购”中“产品”二字是红色字体，这里用strong标签，这样可以省去很多没必要的定义，所以在页面布局当中一定要合理利用每一个标签。主体部分可以分三大部分，顶部是幻灯和热点新闻，中间是图片列表，下边是左右两块，先来布局主体部分的顶部。顶部实际上还是个左右两列布局，热点新闻列表中的日期，是用一个span标签写在了内容的前边，然后把span向右浮动就实现了，“个人登录”和“商户登录”的实现方法也是这样。第6章底部和细节调整浏览器兼容问题一直是让我这样的新手头疼的地方，题的。本例中使用的zoom=1：用来解决自适应高度时IE6的兼容问题：这里用到的共同layout.css代码有：@charsetutf-8;#container{width:900px;margin-top:0px;margin-right:auto;margin-bottom:0px;margin-left:auto;}.clearfloat{font-size:1px;line-height:0px;clear:both;height:8px;}body{margin:0px;font-family:Verdana,Geneva,sans-serif;font-size:12px;line-height:1.5;}ul,dl,dd,h1,h2,h3,h4,h5,h6,form,p{margin:0px;padding:0px;}ul{list-style:none;}img{border:0px;}a{text-decoration:none;color:#05a;}a:hover{color:#f00;}华东交通大学理工学院课程设计报告-17-参考文献[1]谢希仁.计算机网络（第五版）[M].北京:电子工业出版社,2008年2月[2]丁海洋，计算机平面设计实训[M].北京：高等教育出版社，2005年[3]杨选辉，网页设计与制作教程[M].北京：清华大学出版社，2009年[4]陈季，Flash基础与实例教程[M].北京:北京希望电子出版社，2005年[5]张怒涛，Photoshop平面设计图像处理技法[M].北京：清华大学出版社，2003年谢谢