单元9-旅游景点网站-Axure低保真原型设计与CSS模型结构的标准流《WEB前端开发实用案例教程》

《WEB前端开发实用案例教程》

第九单元旅游景点网站

——Axure低保真原型设计与CSS模型结构的标准流

通过Axure制作低保真原型，确定需求功能，避免因客户需求变动返工，制作效果是没有设计好的界面和功能模块，有的只是一份需求，理解这份需求的原型设计，分析网页的各个功能模块，来进行原型设计。在现实情况下，通常拿到的也只有一份需求说明书，从而根据原型设计的经验以及对说明书的理解来进行设计。网页布局CSS的核心，利用CSS来控制HTML元素的位置，显示方法和大小等。网页布局中最基本的布局方式是标准流布局，决定了网页元素的默认位置和显示方式。通过旅游网站的网页布局，学习网页布局的基础知识，理解盒子模型和标准流的概念。教学目标：

掌握利用Axure软件制作低保真原型页面掌握Axure软件设计页面中鼠标点击触发事件掌握盒子模型的概念掌握网页设置元素边框、边界、填充和宽度等控制大小和间距的CSS属性目录页/Contents01

任务1旅游页面页头部分——盒子模型02

任务2制作旅游网正文——标准文档流概念知识储备01

任务1旅游页面页头部分——盒子模型【知识储备】盒子模型是CSS中较为重要的核心概念之一，使用CSS控制页面元素外观和位置的基础。只有充分理解盒子模型概念，才能进一步掌握CSS的正确使用方法。那么，什么是盒子模型呢？HTML中的大多数元素都可以看做是一个盒子，网页元素的定位实际是大大小小的盒子在页面中的定位。网页布局就是如何在页面中摆放、嵌套这些盒子的问题。盒子尺寸计算、是否流动等要素。

任务1旅游页面页头部分——盒子模型【知识储备】

一个标准的W3C盒子模型由content（内容）、padding（填充，也称内边距）、border（边框）和margin（外边距）4个属性组成，如图9-1所示的标准盒子模型示意图。图9-1标准盒子模型示意图

任务1旅游页面页头部分——盒子模型【知识储备】

Content表示盒子里装的东西，我们使用width和height属性为盒子设置宽度和高度时，实际上设置的是content的宽度和高度，不是盒子的实际大小；border表示盒子的边框，它具有border-style（边框线型）、border-width（边框宽度）和border-color（边框颜色）属性；padding是content与border之间的距离；margin是盒子与其他盒子间的距离。与标准W3C盒子模型不同的是，IE盒子模型的width和height部分包含了border和padding。当content超出盒子设定的width和height时，盒子会随着content的内容变大。在不考虑content内容超出设定的width和height的情况下，IE盒子本身的大小就是为盒子的width和height设定的值，border和padding包含在里面。在网页设计中，content常指文字、图像等元素，也可以是div中的嵌套。content不受盒子其他部分的约束，是独立的，当content超出盒子设定的width和height时，盒子的其他部分不受影响，只是content会溢出盒子。素材收集02创建站点，用DreamweaverCS制作网页（实例图片文字内容见本章素材文件夹）实例素材：第九单元\images效果文件：第九单元\“旅游.rp”、“travel.html”

任务实施03

任务1旅游页面页头部分——盒子模型【任务实施】

在任务实施中，先进行低保真的原型设计，再进行网页模块设计的实现。1.用Axure软件制作低保真原型页面效果旅游网站原型设计，需要分析按照功能模块划分为，页头的动画模块、主体内容模块、页尾的版权所有模块。主体内容主要包括旅游景点和旅游价格两个功能模块，主要给用户提供展示旅游景点信息的功能。根据原型设计经验，设计的架构以及页面布局，把功能模块组合起来，实现页面的整体布局。

任务1旅游页面页头部分——盒子模型【任务实施】1）旅游网页模块设计（1）页头的动画模块，双击打开home页面，拖拽一个矩形组件，宽度设置为1000，高度设置为730，线宽、线条颜色设置为默认；拖拽一个矩形，宽度设置为1000，高度设置为144，标签命名为flash动画。如图9-2所示的页面显示。图9-2页头显示

任务1旅游页面页头部分——盒子模型【任务实施】（2）拖拽一个图片组建，宽度设置为233，高度设置为51。（3）拖拽一个矩形，宽度设置为214，高度设置为415，颜色填充为#88C3D6，外框线条设置为无色。拖拽矩形，宽度设置为159，高度设置为39，填充颜色为白色，外框线条设置为无色，输入文本内容，调整字号为13，字体颜色为默认黑色，如图9-3所示的左侧内容显示。图9-3左侧内容显示

任务1旅游页面页头部分——盒子模型【任务实施】（4）拖拽一个圆形，宽度设置为10，高度设置为10，颜色填充为#86CED0；再拖拽一个圆形，宽度设置为10，高度设置为10，颜色填充为#000000；拖拽一个文本标签，输入文字；拖拽一个水平线，线条颜色为#86CED0，线宽为第三条；如图9-4所示的右侧标题显示。图9-4右侧标题显示

任务1旅游页面页头部分——盒子模型【任务实施】（5）拖拽一个图片，宽度设置为220，高度设置为128，拖拽文本标签，输入文字，文字颜色为#ff9900。继续拖拽文本标签，输入文字，字体颜色为#000000，字体大小为14号。如图9-5所示的右侧内容显示。图9-5右侧内容显示

任务1旅游页面页头部分——盒子模型【任务实施】（6）拖拽一个文本标签，输入文字内容，版权所有模块完成。按F5测试，如图9-6所示的低保真原型效果。图9-6低保真原型效果

任务1旅游页面页头部分——盒子模型【任务实施】2.根据低保真原型设计，使用DreamweaverCS制作网页由效果图的需求分析模块，可以看出，网页中需要插入动画，图像，文字。具体制作时，我们分为构建Html结构和设置CSS样式属性两部分来进行。如图9-7所示的旅游网。图9-7旅游网-7旅游网

任务1旅游页面页头部分——盒子模型【任务实施】1）Html结构（1）将素材实例文件夹拷贝至创建MyWeb站点的根目录中。（2）启动DreamweaverCS，打开“文件”面板，在拷贝的文件夹中创建一个名为“travel.html”的网页文档，并在文档编辑窗口中打开。（3）对网页进行整体布局划分，页面结构分为，页头是动画部分，内容介绍部分，版权信息部分。

任务1旅游页面页头部分——盒子模型【任务实施】（4）页面结构中，页头动画部分。<divid="content"><!--页头动画部分开始--><divid="content"><divid="header"><objectid="FlashID"classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"width="1002"height="150"><paramname="movie"value="images/top.swf"/><paramname="quality"value="high"/><paramname="wmode"value="opaque"/><paramname="swfversion"value=""/><!--此param标签提示使用FlashPlayer6.0r65和更高版本的用户下载最新版本的FlashPlayer。如果您不想让用户看到该提示，请将其删除。--><paramname="expressinstall"value="../Scripts/expressInstall.swf"/>代码内容1

任务1旅游页面页头部分——盒子模型【任务实施】<!--下一个对象标签用于非IE浏览器。所以使用IECC将其从IE隐藏。--><!--[if!IE]>--><objecttype="application/x-shockwave-flash"data="images/top.swf"width="1002"height="150"><!--<![endif]--><paramname="quality"value="high"/><paramname="wmode"value="opaque"/><paramname="swfversion"value=""/><paramname="expressinstall"value="../Scripts/expressInstall.swf"/><!--浏览器将以下替代内容显示给使用FlashPlayer6.0和更低版本的用户。-->代码内容2

任务1旅游页面页头部分——盒子模型【任务实施】<div><h4>此页面上的内容需要较新版本的AdobeFlashPlayer。</h4><p><ahref="/go/getflashplayer"><imgsrc="/images/shared/download_buttons/get_flash_player.gif"alt="获取AdobeFlashPlayer"width="112"height="33"/></a></p></div><!--[if!IE]>--></object><!--<![endif]--></object></div><!--页头动画部分结束-->代码内容3

任务1旅游页面页头部分——盒子模型【任务实施】<divid="cont"><divid="leftlist"><divid="img1"><imgsrc="images/a1.PNG"/></div><divid="img2"><ul><li>杭州   <spanclass="font2"><imgsrc="images/x.png"width="10"height="10"/>2508083</span></li><li>乌镇   <spanclass="font2"><imgsrc="images/x.png"width="10"height="10"/>2264837</span></li><li>苏州   <spanclass="font2"><imgsrc="images/x.png"width="10"height="10"/>2230465</span></li>（5）页面内容部分，分为左侧旅游介绍部分和右侧图片内容部分。

代码内容1

任务1旅游页面页头部分——盒子模型【任务实施】

<li>南京   <spanclass="font2"><imgsrc="images/x.png"width="10"height="10"/>1413739</span></li><li>西塘   <spanclass="font2"><imgsrc="images/x.png"width="10"height="10"/>528780</span></li><li>扬州   <spanclass="font2"><imgsrc="images/x.png"width="10"height="10"/>193106</span></li></ul></div></div>代码内容2

任务1旅游页面页头部分——盒子模型【任务实施】<divid="rightlist"><divid="right1"><imgsrc="images/right1.png"/></div><divid="right2"><tablewidth="722"height="488"border="0"cellpadding="0"cellspacing="0"><tr><td><imgsrc="images/r01.png"width="221"height="126"/></td><td><imgsrc="images/r02.png"width="221"height="126"/></td><td><imgsrc="images/r03.png"width="221"height="126"/></td></tr><tr><tdheight="66"><spanclass="font1">¥1796元</span><spanclass="font2">   满意度：</span><spanclass="font3">95%</span><br/><br/>代码内容3

任务1旅游页面页头部分——盒子模型【任务实施】<spanclass="font4">【国庆】‹华东4市-上海迪士尼乐园-杭州›</span></td><td><spanclass="font1">¥1379元</span><spanclass="font2">    满意度：</span><spanclass="font3">93%</span><br/><br/><spanclass="font4">【国庆】‹杭州-西塘-苏州-乌镇›无忧接机</span></td><td><spanclass="font1">¥918元</span><spanclass="font2">     满意度：</span><spanclass="font3">60%</span><br/><br/><spanclass="font4">【国庆】‹千岛湖-乌镇-苏州›天然氧吧</span></td></tr>代码内容4

任务1旅游页面页头部分——盒子模型【任务实施】<tr><td><imgsrc="images/r04.png"width="221"height="126"/></td><td><imgsrc="images/r05.png"width="221"height="126"/></td><td><imgsrc="images/r06.png"width="221"height="126"/></td></tr><tr><td><spanclass="font1">¥2449元</span><spanclass="font2">     满意度：</span><spanclass="font3">96%</span><br/><br/><spanclass="font4">【国庆】‹华东6市-扬州-乌镇›0购物</span></td><td><spanclass="font1">¥2872元</span><spanclass="font2">     满意度：</span><spanclass="font3">97%</span><br/><br/>代码内容5

任务1旅游页面页头部分——盒子模型【任务实施】<spanclass="font4">【国庆】‹上海迪士尼乐园-杭州双飞游›</span></td><td><spanclass="font1">¥1643元</span><spanclass="font2">     满意度：</span><spanclass="font3">96%</span><br/><br/><spanclass="font4">【国庆】‹上海迪士尼乐园›</span></td></tr></table></div></div></div>代码内容6

任务1旅游页面页头部分——盒子模型【任务实施】（6）版权信息部分<divid="footer">Copyright©2006-2017南京科技有限公司|营业执照|ICP证：2013006|石家庄旅游网</div></div><scripttype="text/javascript">swfobject.registerObject("FlashID");</script>

任务1旅游页面页头部分——盒子模型【任务实施】

2）构建CSS样式（1）本例使用链接样式表。<linkrel="stylesheet"type="text/css"href="travel.css"/>（2）根据页面结构，定义页面结构样式body{margin:0auto;padding:0;}#content{position:relative;width:1020px;height:700px;margin-top:1px;margin:0auto;}

任务1旅游页面页头部分——盒子模型【任务实施】（3）页面中动画大小样式定义（4）页面结构的左侧图片和内容样式定义#header{width:1002px;height:150px;margin:0auto;}#cont{width:1020px;height:560px;}#leftlist{width:233px;height:550px;float:left;}#img1{width:233px;height:51px;}代码内容1

任务1旅游页面页头部分——盒子模型【任务实施】#img2{background-image:url(images/left01.png);width:220px;height:487px;}#contulli{background-image:url(images/left2.png);background-repeat:no-repeat;background-position:right;list-style:none;line-height:37px;height:40px;padding-left:60px;padding-top:10px;font-size:13px;}ul{list-style-type:none;margin:0px;padding:5px;}代码内容2

任务1旅游页面页头部分——盒子模型【任务实施】（5）页面结构的右侧图片和内容样式定义#rightlist{width:730px;height:48px;float:left;}#right1{width:728px;height:48px;}.font1{padding-left:15px;color:#F90;font-size:16px;font-weight:bold;}.font2{color:#999;font-size:12px;}代码内容1

任务1旅游页面页头部分——盒子模型【任务实施】.font3{color:#F90;font-size:12px;}.font4{color:#000;font-size:12px;}（7）保存文件。按Ctrl+S组合键保存网页，然后按F12键在浏览器中预览效果，此页面完成。代码内容2

#footer{font-size:12px;color:#333;text-align:center;}（6）版权信息样式定义知识归纳04

任务1旅游页面页头部分——盒子模型【知识归纳】

Html中的大部分元素都可以看做一个盒子，网页元素的定位实际就是这些盒子的网页中的定位。网页布局就是如何在网页中摆放、嵌套这些盒子，摆放或嵌套这些盒子时候需要精确计算。盒子模型的一般计算方式为，实际widthwidth+padding-left+padding-right+border-left+border-right+margin-left+margin-right实际heightheight+padding-top+padding-bottom+border-top+border-bottom+margin-top+margin-bottom目录页/Contents01

任务1旅游页面页头部分——盒子模型02

任务2制作旅游网正文——标准文档流概念知识储备01

任务2制作旅游网正文——标准文档流概念【知识储备】

1.标准文档流的概念

在没有为网页元素添加CSS定位或浮动等属性的情况下，网页元素都是按Html代码的顺序自上而下或自左向右逐步分布的，就像流水一样，我们将这种流动方式称为标准文档流。标准流失网页默认的元素排列方式。CBA

任务2制作旅游网正文——标准文档流概念【知识储备】

2.标准文档流布局特征1）块级元素会在所处的包含元素内自上而下按顺序垂直分布。因为在默认状态下，不管把块元素的宽度设置多窄，它都会独占一行。2）内联元素会在所处的包含元素内自左向右水平分布显示，超出一行后，会自动自上而下换行显示，然后继续自左向右按顺序流动，依次类推。标准文档流是网页布局模式，任何没有被添加position、float属性的元素默认都具有标准文档流的特点。Positon属性用于对网页元素进行定位，float属性用于使网页元素脱离标准文档流而呈浮动状态。在实际的网页布局中，一般要结合使用多种布局模式。素材收集02创建站点，用DreamweaverCS制作网页(实例图片文字内容见本章素材文件夹)实例素材：第九单元\旅游网\images效果文件：第九单元\旅游网\“tour.html”任务实施03

任务2制作旅游网正文——标准文档流概念【任务实施】

制作显示页面的内容部分，整个内容部分主要分3部分；标题、段落、图像。利用CSS设置网页样式。如图9-8所示的旅游网。图9-8旅游网

任务2制作旅游网正文——标准文档流概念【任务实施】

<body><DIVid=content><DIVid=content1><!--图片开始--><UL><LI><IMGheight=120alt=天街src="images/i01.jpg"width=160></LI><LI><IMGheight=120alt=中天门src="images/i02.gif"width=160></LI><LI><IMGheight=120alt=旭日东升src="images/i03.jpg"width=160></LI><LI><IMGheight=120alt=五岳独尊src="images/i04.jpg"width=160></LI><LI><IMGheight=120alt=云海玉盘src="images/i05.jpg"width=160border=0></LI></UL><!--图片结束-->1）Html结构（1）将素材实例文件夹拷贝至创建MyWeb站点的根目录中。（2）启动DreamweaverCS，打开“文件”面板，在拷贝的文件夹中创建一个名为“tour.html”的网页文档，并在文档编辑窗口中打开。（3）整个内容部分主要分3部分；标题、段落、图像。代码内容1

任务2制作旅游网正文——标准文档流概念【任务实施】

<UL><!--标题开始--><LI>天街</LI><LI>中天门</LI><LI>旭日东升</LI><LI>五岳独尊</LI><LI>云海玉盘</LI><!--标题结束--></UL></DIV></DIV><DIVid=main1><DIVclass=divLeft><H2id=h2Left> 泰山摄影</H2><DIVclass=listDiv><P><IMGheight=115alt=彩石溪src="images/caishixi.jpg"width=160border=1><SPANclass=listMore>彩石溪</SPAN></P>代码内容2

任务2制作旅游网正文——标准文档流概念【任务实施】

<UL><!--段落开始--><LI>    进入桃花峪，行约2公里，溪中流水之下忽如彩石铺就，溪底一条条石纹五彩纷呈，阳光照耀下，分外生动，这就是著名的“彩石溪”。弯弯曲曲的溪水像是被彩石染上了色，也像是一条五彩的飘带，在此流淌得格外精神。动人的彩石常引得游人驻足，如果你细心，就可看见水中的赤鳞鱼。</LI><!--段落开始--></UL></DIV></DIV><DIVclass=divRight><H2id=h2Right>    景点推荐</H2><DIVclass=listDiv><P><IMGheight=115alt=扇子崖src="images/shanziya.jpg"width=160border=1><SPANclass=listMore>扇子崖</SPAN></P>代码内容3

任务2制作旅游网正文——标准文档流概念【任务实施】

<UL><LI>    位于泰山西溪西侧的扇子崖，奇峰突兀，高耸峻峭，形如扇面。崖上有明人杨博题刻摩崖石刻“仙人掌”。崖西有铁梯，攀援可登崖巅，北眺龙角山，九女寨历历在目，西望傲徕峰尽收眼底。向东俯视，龙潭水库宛若镶嵌在西溪的一颗璀璨的明珠，闪闪发光。清人孙宝僮有诗云：“剑峰怒刺天，积铁拔千仞；俯临鬼谷幽，旁倚丈人峻”，的确写出了扇子崖的风韵。</LI></UL></DIV></DIV></DIV><DIVid=main2><divid="scape"class="mainDiv"><h2><imgsrc="images/arrow.gif"alt=""/>泰山旅游景点</h2><divclass="mainContent">代码内容4

任务2制作旅游网正文——标准文档流概念【任务实施】

<ul><li>岱庙：宋天贶殿……<br/>丽区：王母池……<br/>幽区：经石峪……<br/>妙区：南天门……<br/>奥区：后石坞……<br/>旷区：黑龙潭……<br/>秀区：桃花峪……<br/>奇观：旭日东升……</li></ul></div><divclass="foot"></div></div><divid="depict"><h2> 泰山介绍</h2>代码内容5

任务2制作旅游网正文——标准文档流概念【任务实施】

<!--段落开始--><div>    泰山突兀而立于华北大平原东侧的齐鲁古国，东临浩波无涯的大海，西靠源远流长、奔流到海不复回的黄河，南有汶、泗、淮之水。纵览东部沿海广大区域，泰山踞高临下、凌驾于齐鲁丘群之上，真正成了茫茫原野上的"东天一柱"。这样，古人们便有了泰山为天下之中心的感觉。<br/>    泰山除了深厚的文化内涵，还具有丰富的自然美，如果我们把风景自然美的形象特征概括为雄、奇、险、秀、幽、奥、旷的话，那么泰山除了从总体上和宏观上具有雄伟的特征外，还在雄中蕴含着奇、险、秀、幽、奥、旷等美的形象。<br/>    泰山风景区内，有山峰156座，崖岭138座，名洞72处，奇石72块，溪谷130条，瀑潭64处，名泉72眼，古树名木万余株，寺庙58座，古遗址128处，碑碣1239块，摩崖刻石1277处。主要分布在岱阳、岱顶、岱阴及灵岩。<br/>    泰山是一座天然的历史、艺术博物馆，仅在泰山的中轴线上就现存有各种石刻1800余处，有的为帝王亲制，有的出自名流之手，大都文辞优美，书体高雅，制作精巧。</div><!--段落结束--></div></DIV></BODY>代码内容6

任务2制作旅游网正文——标准文档流概念【任务实施】

（4）从效果图中可知，文字及图像整体在页面中由一定的宽度并需要居中。为此，在设计视图中，使用CSS样式属性控制元素的宽度、高度等。2）构建CSS样式（1）本例使用链接样式表。<LINKhref="css/main.css"type=text/cssrel=stylesheet>（2）设置图像、文字、标题页面的标签代码：body{font-size:14px;margin:0px;padding:0px;}h2{list-style-type:none;margin:0px;font-size:14px;}代码内容1

任务2制作旅游网正文——标准文档流概念【任务实施】

ul{list-style-type:none;margin:0px;padding:5px;}a:link{color:#06c;}a:visited{color:#06c;}a:active{color:#f90;}a:hover{color:#FF3300;}#content{WIDTH:950px;margin:auto;height:165px;line-height:120%;padding-top:10px;}代码内容2

任务2制作旅游网正文——标准文档流概念【任务实施】

#content#content1{BORDER:#FFBA5A1pxsolid;FLOAT:left;WIDTH:930px;padding:8px;clear:both;}#content#content1LI{width:170px;padding-right:7px;padding-left:7px;float:left;text-align:center;white-space:nowrap;list-style:none;font-size:13px;}代码内容3

任务2制作旅游网正文——标准文档流概念【任务实施】

#main1{width:950px;height:200px;margin-right:auto;margin-left:auto;padding-top:10px;margin-top:5px;padding-bottom:10px;}.divLeft{float:left;width:464px;height:190px;border:1pxsolid#FFBA5A;overflow:hidden;}代码内容4

任务2制作旅游网正文——标准文档流概念【任务实施】

.divRight{float:right;width:464px;height:190px;border:1pxsolid#FFBA5A;overflow:hidden;}#h2Left{background:transparenturl(../images/bg01.gif)no-repeatscrollleft0px;height:16px;padding:10px10px10px50px;}#h2Right{background:transparenturl(../images/bg02.gif)no-repeatscrollleft0px;height:16px;padding:10px10px10px50px;}代码内容5

任务2制作旅游网正文——标准文档流概念【任务实施】

.listDiv{float:left;font-size:12px;width:445px;line-height:130%;padding-top:5px;padding-right:0px;padding-bottom:0px;padding-left:15px;height:160px;}.listDivp{float:left;width:160px;}.listDivul{float:right;margin-top:-5px;width:270px;}代码内容6

任务2制作旅游网正文——标准文档流概念【任务实施】

.listMore{text-align:center;displ