第7讲 网页制作(四)(2010PPT).pptx

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,.,NET,程序设计,主讲教师,:,李璟,e-mail:2008sjyx,手机：,13806419626,第,7,讲,网页制作,（四）,7.1,框架设计,7.2,布局设计,7.3,模块设计,页面的效果图,正式网页制作前，要使用,photoshop,先设计出页面的效果图，然后再根据效果图设计,HTML,页面。,本讲将以如左图所示的效果图为例，介绍利用,DIV+CSS,技术进行网页制作的全过程。,7.1,框架设计,7.1.1,页面分析,7.1.2,框架制作,7.1.3,切图,7.1.1,页面分析,在进行页面代码制作之前，首先来对网站的整体进行构思，对设计的页面进行分析。,(1),页面整体布局,(2),寻找实现这种框架结构的方法,(3),确定各个,div,的,id,名,(1),页面整体布局,从整体上说，页面是上、中、下,3,行布局，从中间部分的划分来说，是二列式的左右布局。,顶 部,底 部,中上左,中上右,中 下,（,2,）寻找如何来实现这种框架结构的方法,对于整体来说，把一个容器分成,3,份，上、中、下，分别都使用,div,标签定义空间。,对于中间部分来说，又分为中上、中下两部分,。,对于中上部分来说，又分为,中上左、,中上右两部分。,确定各个,div,的,id,名,确定父,div,的,id,名为,container,。,从上到下确定各子,div,的,id,名分别为,header,、,content,和,footer,。,确定在,CSS,代码中，,仅设置父,div container,的宽度,，其他子,div,在,container,中通过,外边距定位或浮动定位即可。,顶 部（,#header,）,底 部,(#footer),中 部,（,#content,）,#container(,设置宽度,),7,.1.2,框架制作,1,）,XHTML,代码制作,2,）,CSS,样式的制作,1,）,XHTML,代码制作,打开,VS.NET2008,，,新建一,个,ASP.NET,网站，添加一个,HTML,文件。,首先编写,XHTML,代码，在,XHTML,格式文件的主体,内添加,XHTML,代码，如下：,2,）,CSS,样式的制作,现在来添加,CSS,样式，在,XHTML,格式文件的,中添加如下代码：,然后，使用,CSS,选择符为定义了,id,的,XHTML,标签进行样式设置。,2,）,CSS,样式的制作,添加,CSS,的过程中，要经常参照,UI,界面的设计图，并且使用,Photoshop,软件打开设计图，利用,参考线,精确确定坐标和页面中每个模块的位置关系。,使用,参考线,将这个页面的框架结构进行划分。,在,参考线,的帮助下，,可以掌握页面中每个模块的位置，以及长度、宽度，是,CSS,样式编写的重要辅助方法。,*标尺和参考线的使用方法*,使用,Photoshop,软件打开设计图源文件，使用,“,视图,-,标尺,”,菜单打开标尺工具。,右单击,标尺区域，在弹出的快捷菜单中选择,“,像素,”,项，标尺变为以像素为单位。,使用光标从,标尺区域,可以,拖出参考线,到任意位置，并可任意移动参考线。,参考线示意图,确定整体,CSS,代码,使用,photoshop,中标尺与参考线，确定网页效果图中的网页的整体,CSS,代码如下：,*margin:0px;padding:0px;,body font-size:12px;font-family:,宋体,;,#container,width:800px,;margin:0px auto;,#content,height:,714px,;,#footer height:,155px;,注：以上红色标注的像素值都是在效果图中利用标尺和参考线精确测量得来的。,7,.1.3,切图,在根据网页效果图的网页制作过程中，切图是一项很重要的工作。,下面讲解使用,Photoshop,软件来切图的方法：,(1),使用参考线,(2),使用矩形选取框工具,(3),复制图片,(4),存储图片,(1),使用参考线,首先使用光标从标尺区域可以拖出参考线划分页面中的各个元素。,页面中的各个元素的结构和位置被参考线明显划分开以后，只需要按照参考线划分的边界进行切割图片即可。,(2),使用矩形选取框工具,现在以网页的,logo,图片的切图为例，讲解接下来的工作。,先用参考线划定,logo,的宽度和高度，同时通过标尺和参考线也能够得到,logo,上的上外边距,(top-margin),和左外边距,(left-margin),。,沿着参考线，拖动,“,矩形选取,”,工具，选取,logo,区域。,测量得，,Logo,图片的,top-margin,为,24px,，,left-margin,为,6px,，,bottom-margin,为,14px,。,(3),复制图片,选取完成所需要的图片之后，使用命令,“,拷贝,”,，然后再使用命令,“,创建新文件,”,将其复制的图片粘贴在新的文件中，使用命令,“,粘贴,”,完成切图工作。,(4),存储图片,切出来的图片，使用命令,“,存储为,Web,所用格式,”,存储为一种格式的图片，一般选择,jpg,格式或者,gif,格式。,其他的图片都可以按照以上方法一个一个切出来，都保存在预先准备好的文件夹中。,7,.2,布局设计,7,.2.1,页面顶部布局设计,7,.2.2,页面中上部的布局设计,7,.2.3,页面中下部的布局设计,7,.2.4,页面底部的布局设计,7,.2.1,页面顶部布局设计,分为两个步骤来制作：,页面分析,代码的制作,页面分析,在进行布局制作之前，首先计划制作顶部内容的整体构思，以便按照步骤一步一步实现,:,(1),根据页面顶部的设计图，构思草图。,(2),确定页面顶部的布局方式。,(3),为每个区域的,div,的,id,或者,class,命名。,(1),根据页面顶部的设计图，构思草图。,logo,快速导航（,nav,）,banner,“,面包屑,”,(2),确定页面顶部的布局方式。,logo,部分与快速导航部分,(nav),可以视为二列式布局，使用浮动定位方法实现布局设计，并且二者放在同一个,div,容器,top,中。,中间的,banner,部分和下面的,”,面包屑,”,部分,(crumbs),分别,使用一个,div,容器。,t,op,部分、,banner,部分和,crumbs,部分各,占据一行，宽度都设置,为与页面一样的,宽度。,页面顶部实现方法示意图,logo,-,浮动定位,nav,-,浮动定位,banner,-,图片,“,面包屑,”,(crumbs,),top(,设置宽度,),（,3,）为每个区域的,div,的,id,或者,class,命名。,Logo,(#logo),快速导航,(#nav),banner,(#banner),“,面包屑,”,(#crumbs),#head,#top,代码的制作,(1),添加页面顶部的,XHTML,结构代码。,(2),为每一个部分实现精确定位，并进行主要样式的制作。,(1),添加页面顶部的,XHTML,结构代码。,(2),为每一个部分实现精确定位以及主要样式的制作。,logo,的定位是使用了,id,选择符,#logo,设置上、下,、左外边距来实现的,。,l,ogo,部分浮动向左，,nav,部分浮动向右，实现左右二列式布局。,(2),为每一个部分实现精确定位以及主要样式的制作。,#top width:100%;,#,logo margin-left:,6px,;margin-top:,24,px;,margin-bottom:,14px,;float:left;,#,nav float:right,;margin-top:33px,;,7,.2.2,页面中上部的布局设计,分为两个步骤来制作：,页面分析,代码的制作,页面分析,页面中上部的页面分析分为以下几个步骤：,（,1,）根据页面中上部的设计图，构思草图。,（,2,）左侧图片和右,列内容使用,浮动定位实现二列式布局，并且,设置宽度和高度。,（,3,）为每个区域的,div,的,id,或者,class,命名,。,注,：在此，若不给左侧图片和右列内容设置高度，会出现下面图片浮动上来的情况。,（,1,）根据页面中上部的设计图，构思草图。,左侧图片,标题文字,数据列表,数据列表,图片按钮,（,2,）左侧图片和右,列内容使用,浮动定位实现二列式布局，并且设置固定宽度。,左侧图片,设置宽度和高度,浮动定位,标题文字,数据列表,数据列表,图片按钮,右列内容,设置,宽度和高度,浮动定位,（,3,）为每个区域的,div,的,id,或者,class,命名。,左侧图片,（,#feature,）,标题文字,（,h1,）,数据列表,(#bgtable),数据列表,（,#notable,）,图片按钮,(#threeBtn),右列：,#intro_info,代码的制作,(1),添加制作页面中上部的,XHTML,结构代码。,(2),为页面中上部的每个部分的布局添加,CSS,代码。,(1),添加页面中上部的,XHTML,代码,联想,ThinkPad T400(2767MG1),（,2,）为页面中上部的每个部分的,布局添加,CSS,代码。,#info height:550px;width:100%;,#,productshow,margin-top:88px,;margin-left:80px;width:276px;float:left;,height:460px;,#,intr_infomargin-left:30px,;,float:right,;,width:400px;,height:100%;,line-height:20px;,#,intr_info h1 font-size:20px;,margin-top:37px,;,margin-bottom:50px;,#,threeBtn margin-left:20px;,#,threeBtn img margin-right:20px,;,在,以上代码中，,为左列和右列设置浮动定位，实现二列式布局。,为,图片按钮定义了外边,距，,实现定位,。,7,.2.3,页面中下部的布局设计,分为两个步骤：,页面分析,代码制作,页面分析,（,1,）根据页面中下部的设计图，构思草图。,（,2,）确定每部分都使用,div,容器浮动定位，并设置每个,div,的宽度。,（,3,）为每个区域的,div,的,id,或者,class,命名。,（,1,）根据页面中下部的设计图，构思草图。,图片按钮,图片按钮,图片按钮,图片按钮,图片按钮,图片按钮,图片按钮,图片按钮,（,2,）,确定使用,div,容器浮动定位，设置每个,div,的宽度。,图片,按钮,浮动定位,（,3,）,为,div,的,id,或者,class,命名。,图片按钮,(#function_channel),代码制作,（,1,）制作页面中下部的,XHTML,结构代码。,（,2,）为实现每个部分的布局添加,CSS,代码。,（,1,）制作页面中下部的,XHTML,结构代码,中下部页面的,XHTML,代码如下：,（,2,）为实现每个部分的布局和样式,添加,CSS,代码,#function_channel,margin-left:12px,;,#,function_channel div float:left;margin-left:3px;,#,function_channel img border-style:none;,7,.2.4,页面底部的布局设计,分为两个步骤：,页面分析,代码制作,页面分析,logo,(#logob),导航（,ul,、,li,）,联系方式,（,#,contact,）,版权信息,(#copyrightinfo),#copyright,代码制作,分为两个步骤：,（,1,）制作页面底部的结构,XHTML,代码,（,2,）为实现每个部分的布局添加,CSS,代码,（,1,）制作页面底部的,XHTML,结构代码,copyright,2000-2003,（,2,）为实现每个部分的布局和样式,添加,CSS,代码,#logob margin-top:70px;margin-left:20px;float:left;,#,copyright float:right;margin-top:25px;,#,contact,margin-top:15px,;text-align:right;,line-height:20px,;color:#ACACAC;,#,copyrightinfo,margin-top:15px,;,text-align:right;,line-height:20px;,7,.3,模块设计,模块设计，就是对页面中的具体的内容进行布局实现，例如导航的制作、数据列表的制作、图片按钮的排版、文本的排版等。,下面将分别对网页中的每一个内容模块进行,CSS,布局设计。,7,.3,模块设计,7,.3.1,快速导航制作,7,.3.2,”,面包屑,”,制作,7,.3.3,数据表格,制作,7,.3.1,快速导航制作,这个页面有两个位置使用了导航形式：页面顶部的右上角和页面底部的右上角。,为了页面代码的多样化，针对这两个导航系统，使用了不同的实现方法。,页面顶部右上角的导航使用了普通的文字链接并列的方法，整个导航放在,div,容器中控制位置。,页面底部右上角的导航使用,了无序列表,的形式，导航项使用,标签来控制，整个,导航通过,ul,控制位置。,7,.3.1,快速导航制作,1,）页面顶部的导航,2,）页面底部的导航,1,）页面顶部的导航,（,1,）页面顶部的导航模块的具体,XHTML,代码如下：,站点地图,|,关于我们,|,收藏本页,（,2,）为超链接添加,CSS,样式，代码如下：,a text-decoration:none;color:#000000;,a:hover,text-decoration:none;color:#210EC0;,2,）页面底部的导航,页面底部的导航模块的,XHTML,代码如下：,网站简介,About Us,广告服务,联系我们,招聘英才,客户服务,2,）页面底部的导航,为页面底部的导航添加,CSS,样式，代码如下：,#,copyright ul list-style-type:none;,#,copyright ul li display:inline,;,7,.3.2,”,面包屑,”,制作,制作,“,面包屑,”,的主要任务是设计文字链接样式。,带有背景的,“,面包屑,”,，需要注意的是设置好文本的背景图中的显示位置，通过,CSS,的行高属性，能够控制文本在背景中的显示位置。,7,.3.2,”,面包屑,”,制作,“,面包屑,”,中连接文字之间使用,”,”,分隔，表示子属关系，后者是前者的分支。,（,1,）添加,“,面包屑,”,的,XHTML,代码如下：,首页,联想,ThinkPad T400,7,.3.2,”,面包屑,”,制作,（,2,）为,“,面包屑,”,的添加,CSS,样式，代码如下：,#crumbscontent,background-image:url(images/crumbs_bg.jpg,);,background-repeat:repeat-x,;,height:40px,;,line-height:40px;,注意：以上“面包屑”的背景是通过背景图片横向平铺来实现的。,7,.3.3,数据表格制作,在页面中上部分别使用了有背景的数据表格和无背景的数据表格,。,注意：,div,和,table,混排时，,div,和,table,的,margin,无效,只需要,将该,div,的,display,属性设置为,inline-table,，即可使该,div,和,table,的,margin,有效。,数据表格的,CSS,样式,有背景的数据表格的,id,为,“,bgtable,”,。,无背景的数据表格的,id,为,“,notable,”,其,CSS,代码如下：,#bgtable height:110px;background-color:#EAEADE;,display:inline-table;,width:100%;,#,notable height:110px;,display:inline-table;width:100%;,#,bgtable table,#notable,table,margin,-top:25px,;margin,-left:15px,;line-height:20px;,table,th width:115px;text-align:left;color:#8D8D85;,