《网页制作(四)(2010ppt)》由会员分享，可在线阅读，更多相关《网页制作(四)(2010ppt)（64页珍藏版）》请在金锄头文库上搜索。
1、.NET程序设计,主讲教师: 李璟 e-mail: 手机：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
2、的id名,(1)页面整体布局,从整体上说，页面是上、中、下3行布局，从中间部分的划分来说，是二列式的左右布局。,（2）寻找如何来实现这种框架结构的方法,对于整体来说，把一个容器分成3份，上、中、下，分别都使用div标签定义空间。 对于中间部分来说，又分为中上、中下两部分。 对于中上部分来说，又分为中上左、中上右两部分。,确定各个div的id名,确定父div 的id名为container。 从上到下确定各子div的id名分别为header、content和footer。 确定在CSS代码中，仅设置父div container的宽度，其他子div在container中通过外边距定位或浮动定位即可。
3、,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软件打开设计图，利用参考线精确确定坐标和页面中每个模块的位置关系。 使用参考线将这个页面的框架结构进行
4、划分。 在参考线的帮助下，可以掌握页面中每个模块的位置，以及长度、宽度，是CSS样式编写的重要辅助方法。,*标尺和参考线的使用方法*,使用Photoshop软件打开设计图源文件，使用“视图-标尺”菜单打开标尺工具。 右单击标尺区域，在弹出的快捷菜单中选择“像素”项，标尺变为以像素为单位。 使用光标从标尺区域可以拖出参考线到任意位置，并可任意移动参考线。,参考线示意图,确定整体CSS代码,使用photoshop中标尺与参考线，确定网页效果图中的网页的整体CSS代码如下： *margin:0px; padding:0px; body font-size: 12px; font-family: “宋
5、体“; #container width: 800px; margin: 0px auto; #content height: 714px; #footer height: 155px; 注：以上红色标注的像素值都是在效果图中利用标尺和参考线精确测量得来的。,7.1.3切图,在根据网页效果图的网页制作过程中，切图是一项很重要的工作。 下面讲解使用Photoshop软件来切图的方法： (1)使用参考线 (2)使用矩形选取框工具 (3)复制图片 (4)存储图片,(1)使用参考线,首先使用光标从标尺区域可以拖出参考线划分页面中的各个元素。 页面中的各个元素的结构和位置被参考线明显划分开以后，只需要按
6、照参考线划分的边界进行切割图片即可。,(2)使用矩形选取框工具,现在以网页的logo图片的切图为例，讲解接下来的工作。 先用参考线划定logo的宽度和高度，同时通过标尺和参考线也能够得到logo上的上外边距(top-margin)和左外边距(left-margin)。 沿着参考线，拖动“矩形选取”工具，选取logo区域。,测量得，Logo图片的 top-margin为24px， left-margin为6px， bottom-margin为14px。,(3)复制图片,选取完成所需要的图片之后，使用命令“拷贝”，然后再使用命令“创建新文件”将其复制的图片粘贴在新的文件中，使用命令“粘贴”完成切图
7、工作。,(4)存储图片,切出来的图片，使用命令“存储为Web所用格式”,存储为一种格式的图片，一般选择jpg格式或者gif格式。 其他的图片都可以按照以上方法一个一个切出来，都保存在预先准备好的文件夹中。,7.2 布局设计,7.2.1页面顶部布局设计 7.2.2页面中上部的布局设计 7.2.3页面中下部的布局设计 7.2.4页面底部的布局设计,7.2.1页面顶部布局设计,分为两个步骤来制作： 页面分析 代码的制作,页面分析,在进行布局制作之前，首先计划制作顶部内容的整体构思，以便按照步骤一步一步实现: (1)根据页面顶部的设计图，构思草图。 (2)确定页面顶部的布局方式。 (3)为每个区域的d
8、iv的id或者class命名。,(1)根据页面顶部的设计图，构思草图。,(2)确定页面顶部的布局方式。,logo部分与快速导航部分(nav)可以视为二列式布局，使用浮动定位方法实现布局设计，并且二者放在同一个div容器top中。 中间的banner部分和下面的”面包屑”部分(crumbs)分别使用一个div容器。 top部分、banner部分和crumbs部分各占据一行，宽度都设置为与页面一样的宽度。,页面顶部实现方法示意图,top(设置宽度),（3）为每个区域的div的id或者class命名。,#head,#top,代码的制作,(1)添加页面顶部的XHTML结构代码。 (2)为每一个部分实现
9、精确定位，并进行主要样式的制作。,(1)添加页面顶部的XHTML结构代码。,(2)为每一个部分实现精确定位 以及主要样式的制作。,logo的定位是使用了id选择符#logo设置上、下、左外边距来实现的。 logo部分浮动向左，nav部分浮动向右，实现左右二列式布局。,(2)为每一个部分实现精确定位 以及主要样式的制作。,#top width:100%; #logo margin-left:6px; margin-top:24px; margin-bottom:14px;float:left; #nav float:right; margin-top:33px; ,7.2.2页面中上部的布局设计
10、,分为两个步骤来制作： 页面分析 代码的制作,页面分析,页面中上部的页面分析分为以下几个步骤： （1）根据页面中上部的设计图，构思草图。 （2）左侧图片和右列内容使用浮动定位实现二列式布局，并且设置宽度和高度。 （3）为每个区域的div的id或者class命名。 注：在此，若不给左侧图片和右列内容设置高度，会出现下面图片浮动上来的情况。,（1）根据页面中上部的设计图，构思草图。,（2）左侧图片和右列内容使用浮动定位实现二列式布局，并且设置固定宽度。,右列内容 设置宽度和高度 浮动定位,（3）为每个区域的div的id或者class命名。,右列：#intro_info,代码的制作,(1)添加制作页
11、面中上部的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%;
12、 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）为每个区域的di
13、v的id或者class命名。,（1）根据页面中下部的设计图，构思草图。,图片按钮,图片按钮,图片按钮,图片按钮,图片按钮,图片按钮,图片按钮,图片按钮,（2）确定使用div容器浮动定位，设置每个div的宽度。,图片按钮 浮动定位,（3）为div的id或者class命名。,图片按钮 (#function_channel),代码制作,（1）制作页面中下部的XHTML结构代码。 （2）为实现每个部分的布局添加CSS代码。,（1）制作页面中下部的 XHTML结构代码,中下部页面的XHTML代码如下： ,（2）为实现每个部分的布局和样式 添加CSS代码,#function_channel margin-
14、left:12px; #function_channel div float:left; margin-left:3px; #function_channel img border-style:none;,7.2.4页面底部的布局设计,分为两个步骤： 页面分析 代码制作,页面分析,#copyright,代码制作,分为两个步骤： （1）制作页面底部的结构XHTML代码 （2）为实现每个部分的布局添加CSS代码,（1）制作页面底部的 XHTML结构代码, copyright 2000-2003 ,（2）为实现每个部分的布局和样式 添加CSS代码,#logob margin-top:70px; ma
15、rgin-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 模块设计,模块设计，就是对页面中的具体的内容进行布局实现，例如导航的制作、数据列表的制作、图片按钮的排版、文本的排版等。 下面将分别对网页中的每一个内容模块进行CS
16、S布局设计。,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:n
