毕业设计(论文)-DIVCSS技术在WEB中的实际应用.doc

武 汉 大 学毕业设计（论文）说明书题 目 DIV+CSS技术在WEB中的实际应用专题的排版 专业班级 学 生 指导教师 总评成绩 2011年 05 月 02 日武汉大学毕业设计（论文）任务书专业班级 学生 课题名称DIV+CSS技术在WEB中的实际应用专题的排版课题条件在本次设计中采用的是WEB2.0技术，对设计后的网页效果图进行静态页面编写，将网页代码与CSS代码分离开。三、任务（含实验、分析、计算、绘图、论述等内容）（1）对项目进行初步分析：页面组成（2）对组成的页面深入分析：页面关系。（3）对构成的页面之间的异同点逐一编写。（4）对页面编写CSS并同时实现样式分离。四、设计（论文）说明书内容DIV+CSS是网站标准（或称“WEB标准”）中常用术语之一，DIV只是HTML中的一个标签，而CSS是一种语言，通常为了说明与HTML网页设计语言中的表格（table）定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。XHTM是目前国际上倡导的网站标准设计语言，因为XHTML网站设计语言具有的基本特点，这种CSSDIV模式的网站设计具有一定的优势。本次设计将会将“符合W3C标准”作为设计原则，使设计出的页面更加符合网页设计规范，对搜索引擎更加友好，并且支持浏览器的向后兼容性。五、计划进度 1、发题时间 2011 年 4 月 2 日2011年4月2日开始编写论文，当天完成进度为全文的10%。2011年4月6日跳过项目详细设计，完成全文50%。2011年4月7日至2011年4月9日对项目详细设计。完成全文85%。2011年4月10日完成剩余项目设计，对项目整体进行调试。2011年4月11日论文进入最后阶段。对整个项目进行最后测试，测试结果良好，并对全文格式进行整合。于当夜完成。指导教师 教研室主任 年 月 日 年 月 日注：1、学生进行实践教学环节前，指导教师应填写好此任务书，经教研室主任签字后，正式给学生下任务。实践教学环节结束后，应将此任务书放在设计（论文）说明书首页装订。2、若实践教学环节和任务书另行发了单行本，则不填写此任务书，实践教学环节结束后，应将任务书单行本装入资料袋。毕业设计（论文）评审表（指导教师用）评价内容具体要求满分得分调查论证能独立查阅文献和调研；能提出并论证课题的实施方案；有收集、加工各种信息及获取新知识的能力10实验方案设计与实验技能能正确设计实验方案，独立进行实验操作如装置安装，调试，操作15分析与解决问题的能力能运用所学知识和技能去实现与解决实际问题；能正确处理实验数据；能对课题进行理论分析，得出有价值的结论20工作量、工作态度按期圆满完成规定的任务，工作量饱满，难度较大；工作努力，遵守纪律；工作作风严谨务实15质 量综合简练完整，有见解；立论正确，论述充分，结论严谨，实验正确，分析处理科学；文字通顺，技术用语准确，符号统一，编号齐全，书写工整规范，图表完整、整洁、正确；论文结果有应用价值20外语、计算机应用能力能正确翻译外文资料；能正确撰写中英文摘要，用计算机计算、绘图和打印文稿10创 新工作中有创新意识；对前人工作有改进或突破，或有独到见解10总 分评阅意见 指导教师签名 日 期 武汉大学毕业设计（论文）答辩小组意见书专业班级 学生姓名 题目 DIV+CSS技术在WEB中的发展与应用 答辩记录记录人 地点 年 月 日答辩小组意见意见：得分：答辩组长 组员 年 月 日总评毕业设计（论文）得分*60%+毕业答辩得分*40% 总评成绩 总评成绩 目 录第一章 符合WEB标准71.1 早期常用的WEB标准方法71.2 新的WEB标准7第二章 分析页面计算“房子”的大小和数量92.1 分析页面个数92.2 页面构造分析10 专题首页10 专题列表页11 专题内容页12第三章 搭建模型给他们安排足够合适的“房间”133.1 画出简图133.1 用div把他们的房子搭建起来14 基本构成通用的“房间”14 首页div构成15 列表页div构成16 内容页div构成18第四章 设计样式让“房子”看起来更漂亮204.1 样式表简介20 什么是CSS20 CSS的作用20 将样式表加入HTML中204.2 给页面添加样式21 相同板块用同样的样式21 首页的样式22 列表页的样式24 内容页的样式26总 结28致 谢29参考文献30第一章 符合WEB标准1.1 早期常用的WEB标准方法早期常用的网页布局，通常采用下面四种方法图1-1早期网页布局这些布局的方法在很长时间以来，都是较为流行的网页布局模式，或是其中的一种，或是以上四种方法混合使用，随着网络技术的不断发展和许多新的上网设备的出现，使得这些网页布局方式越来越不能适应新的要求。新的WEB标准在国内逐渐普及，一种基于DIV+CSS的新型网页布局方式开始流行，一些大型门户网站都已经完成了网站的重建，都是使用DIV+CSS的布局方式。1.2 新的WEB标准WEB标准是一系列标准的集合，在WEB标准中，把网页分成4个部分：内容 Content 、结构 Structure 、表现 Presentation 和行为 Behavior 。“内容”就是页面实际要传达的真正信息，包含数据、文档或者图片等。注意这里强调的“真正”，是指纯粹的数据信息本身。比如一些辅助的信息，像导航菜单、装饰性图片等。“结构”就是把混乱的内容进行结构化，比如加上标题、作者、章、节、段落和列表，这些就称为“结构”。结构使内容更加具有逻辑性，易用性。虽然定义了结构，但是内容还是原来的样式没有改变，例如字体没有变大，正文的颜色也没有变化，没有背景，没有修饰。所有这些用来改变内容外观的东西，称之为“表现”。“行为”就是对内容的交互及操作，例如，使用JS判断一些表单提交，或者实现菜单的显示和隐藏等。HTML和XHTML页面都是由“内容、结构、表现和行为”这4个方面组成的。“内容”是基础，然后是附加上去的“结构”和“表现”，最后再对他们加上“行为”。针对“结构、表现和行为”这三个部分，W3C组织制定了大部分的标准。第二章 分析页面计算“房子”的大小和数量对WEB标准有了初步的认识之后，我现在将制作一个交友网站的“成功故事”专题系列。交友网站的“成功故事”主要是用于交友网中的会员叙述他们在该网站的成功交友案例。2.1 分析页面个数成功故事类似于新闻发布系统，即可以由会员在后台自行添加他自己的成功故事，然后在前台页面中表现出来。后台制作页面主要是程序员多年经验后集成的一些通用页面，我就不加以制作，我主要制作前台展示给所有网站浏览者的前台页面。对于新网发布系统的前台页面，主要是由三个页面构成：（1）专题首页：用于展示特别受欢迎的成功匹配新人，以及是最新成功的新人案例、成功的新人的婚纱照。（2）专题的列表页：用于展示所有发布过的新人成功案例，使用上一页下一页可以翻页逐一浏览。（3）专题的内容展示页：用于展示某一个新人的成功案例，可以添加多张新人图片，新人的认识过程，恋爱过程所有想说的话都可以发表。三个页面的主要作用和包含内容已经有了大概的面貌，那么三个页面之间的关系是如何的呢？由上面的叙述可以知道，这三个页面是父- 子- 孙的关系，首页是父页面，用于展示主要的东西；列表页是子页面，用于展示所有的案例；内容页是孙页面，用于展示某一个案例的详细情况。这三个页面之间可以用文字链接的形式将他们链接起来，以便可以互相点击。2.2 页面构造分析 专题首页图2-1 专题首页首页中最上面是页面导航部分，然后是页面的flash部分，再下面是首页的主体内容部分，这部分是典型的左右两栏式设计：左边是4个相同的图片加一小段文字介绍的形式，右边是两列相同的姓名加日期的形式。接着最后是网站的底部链接、底部声明、底部版权等。 专题列表页图2-2 专题列表页列表页中最上面是页面导航部分，然后是页面的flash部分，再下面是列表页的主体内容部分：这部分是一些相同的图片+文字的形式，再加上列表下面进行翻页的部分。接着最后是网站的底部链接、底部声明、底部版权等。 专题内容页图2-3 专题内容页内容中最上面是页面导航部分，然后是页面的flash部分，再下面是内容的主体内容部分：主要是文字加图片的介绍，以及回到上一级栏目或者上上级栏目的链接。接着最后是网站的底部链接、底部声明、底部版权等。第三章 搭建模型给他们安排足够合适的“房间”3.1 画出简图根据上面对页面的初步分析，可以知道这三个页面是以“导航+flash+内容+底部”构成的，所以我们画出三个页面的草图的时候可以给这几处相同的部分同样的命名，让他们引用相同的CSS，得到一致的样式。图3-1 首页简图图3-2 列表页简图图3-3 内容页简图3.1 用div把他们的房子搭建起来 基本构成通用的“房间”首先，每个页面最外面设置一个div将所有内容包裹起来，以便后面设置css样式的时候，可以将页面整体居中： div class all 为了以后的设计更方便，我在这些div之间添加上一些个人的注释，注释的格式为： !-if !IE 注释内容 !endif- 或者 !-注释内容- 然后再在这个最外层的div里面设置其他的div div class all div class menu img src images/menu.jpg border 0 usemap #Map / map name Map id Map area shape rect coords 64,28,127,57 href # / area shape rect coords 171,29,247,55 href # / area shape rect coords 290,28,352,57 href # / area shape rect coords 664,28,725,56 href # / area shape rect coords 778,29,839,56 href # / area shape rect oords 888,28,949,57 href # / !-if !IE 导航条部分：使用热点+图片的做成导航的链接!endif- div class banner object classid clsid:D27CDB6E-AE6D-11cf-96B8-444553540000 codebase /pub/shockwave/cabs/flash/swflash.cab#version 7,0,19,0 width 880 height 280 param name movie value flash/flash_visual.swf / param name quality value high / param name wmode value transparent / embed src flash/flash_visual.swf width 880 height 280 quality high pluginspage /go/getflashplayer type application/x-shockwave-flash wmode transparent !-if !IE 插入flash !endif- div class h_pagebody !-if !IE 主体内容 !endif- div class footer 东方总部地址：湖北省武汉市汉口建设大道青年路同成广场A栋一单元27楼 武昌地址：湖北省武汉市武昌区中北路楚天都市花园D座15 咨询热线nbsp;  客服热线Copyright 2003-2010东方丽人婚恋DFLR.NET All Rights Reserved !-if !IE 底部声明 !endif- 首页div构成除了上面搭造的基本构成之外，再设置首页div的主体内容部分，也就是 div class h_pagebody 之间的部分，之前已经分析过，首页的主体部分是典型的两栏式设计，所以我可以将这两栏写成： div class h_pagebody div class leftbody div class rightbody 而左边是4个相同的图片加一小段文字介绍的形式，右边是两列相同的姓名加日期的形式。这两部分都是由循环的列表构成，这里，我可以使用一个名为 的无序列表的标签：左边可以写成： ul class ”case” a href # img src images/h_caseimg.jpg/ !图片- div class h_cast_tit !文字内容介绍- div class member male !男方姓名- div class member female !女方姓名- div class more a href # 点击查看 !点击后即可查看这一对新人的详细故事即进入详细内容页面- 右边可以写成： ul class namelist div class name 男方姓名和女方姓名 div class riqi 2010-01-19 首页的div基本构成就结束了。 列表页div构成由之前的分析知道列表页的主体内容部分是循环图3-4这一部分：图3-4 列表页循环部分该列表也可以分为左右两部分，图片+文字+背景为左边部分，文字段落为右边部分： ul class fallinlove div class left img src # width 309 height 160 / span class riqi 2010-9-10 div class h_cast_tit div class member male div class member female div class right 大山的孩子  大山的媳妇儿 李广：在搜索到她的时候，我发现她的内容里写的都挺符合我的要求，所以就想多了解一下。在聊天的过程中我以诚相待，见了面后，更是下定了决心，确定了就是她。她的漂亮大方，贤惠温柔深深的打动了我，我们过的每一天都很快乐。缘分到了，怎么挡都挡不住的。呵呵我们从内心感到非常的快乐和幸福！ 李广：在搜索到她的时候，我发现她的内容里写的都挺符合我的要求，所以就想多了解一下。在聊天的过程中我以诚相待，见了面后，更是下定了决心，确定了就是她。她的漂亮大方，贤惠温柔深深的打动了我，我们过的每一天都很快乐。缘分到了，怎么挡都挡不住的 div class more2 a href # 查看详细 列表页还需要页码，div写成： div class prevnext span class total 18 span class else a href # 上十页 span class first a href # 1 span class else 2 span class else 3 span class else a href # 4 span class else 5 span class else 6 span class else 7 span class else 8 span class else 9 span class else 10 span class else 下十页 内容页div构成依旧是和上面一样，分为左右两个部分： div class link id con_link a href # 上传你的成功故事   |   a href # 浏览更多成功故事 div class left eng id con_bg img src images/listimg.jpg width 309 height 160 / span class riqi 2010-9-10 div class h_cast_tit div class member male div class member female div class more3 a href # 查看他们的幸福相册 大山的孩子  大山的媳妇儿 p id pbg 李广：在搜索到她的时候，我发现她的内容里写的都挺符合我的要求，所以就想多了解一下。在聊天的过程中我以诚相待，见了面后，更是下定了决心，确定了就是她。她的漂亮大方，贤惠温柔深深的打动了我，我们过的每一天都很快乐。缘分到了，怎么挡都挡不住的。呵呵我们从内心感到非常的快乐和幸福！ 李广：在搜索到她的时候，我发现她的内容里写的都挺符合我的要求，所以就想多了解一下。在聊天的过程中我以诚相待，见了面后，更是下定了决心，确定了就是她。她的漂亮大方，贤惠温柔深深的打动了我，我们过的每一天都很快乐。缘分到了，怎么挡都挡不住的 特别说明 标签是指标题标签。第四章 设计样式让“房子”看起来更漂亮4.1 样式表简介 什么是CSSCSS是Cascading Style Sheets 层叠样式表 的简称。 CSS语言是一种标记语言,它不需要编译,可以直接由浏览器解释执行 属于浏览器解释型语言 . CSS的作用在标准网页设计中CSS负责网页内容 XHTML 的表现。CSS文件也可以说是一个文本文件,它包含了一些CSS标记,CSS文件必须使用css为文件名后缀。可以通过简单的更改CSS文件,改变网页的整体表现形式,可以减少工作量,所以她是每一个网页设计人员的必修课。 将样式表加入HTML中 LINK REL StyleSheet HREF style.css TYPE text/css MEDIA screen 标记是放置在文档的HEAD部分。可选的TYPE属性用于指定媒体类型-text/css是一个层叠样式表-允许浏览器忽略它们不支持的样式表类型。为CSS文件配置服务器而将text/css当作Content-type内容发送出去也是一个好注意。外部样式表不能含有任何像 或 这样的HTML的标记。样式表仅仅由样式规则或声明组成。一个单独由P margin: 2em 组成的文件就可以用作外部样式表了。 标记也有一个可选的MEDIA属性，用于指定样式表被接受的介质或媒体。允许的值有 screen 缺省值 ，提交到计算机屏幕； print， 输出到打印机； projection，提交到投影机； aural，扬声器； braille，提交到凸字触觉感知设备； tty，电传打字机 使用固定的字体 ； tv，电视机； all，所有输出设备。 多样的媒体通过用逗号隔开的列表或值all指定。4.2 给页面添加样式 相同板块用同样的样式* margin:0; padding:0; *代表所有，这个样式的意思是将页面中所有的标签的内外边距都清除为0.因为有一些标签即使未设置任何内外边距，它会有一些默认的边距，如果不清除为0，会在页面中造成一些我不想出现的效果。body font-family:宋体; font-size:14px; color:#666; text-align:center; background:url ./images/body_bg.jpg no-repeat #404040 center top; 设置整个页面的属性：字体为宋体，大小为14px；颜色是#666；让页面居中；给她一个背景。.all width:1003px; margin:0 auto; text-align:left; 设置最外层的div： margin：0 auto；这一段代码与body标签中设置的text-align:center;可以使整个页面居中显示；让她的大小为1003px；让页面内容居左，因为在上一个body标签设置的时候我让所有的标签都居中了。a text-decoration:none; color:#666; 设置链接标签，让所有的链接都无下划线，颜色为灰色。a:hover color:#e50b82; 设置鼠标划过链接时的颜色。p line-height:1.6em; 设置段落标签，让段落内文章行间距是1.6倍的文字大小。img display:block; 设置图片标签，让所有的图片以块显示，这样图片和文字间就不会有间距。a img border:0; 设置图片的链接标签，如果图片被添加了链接的时候，不会有蓝色的边框出现。.menu,.banner,.footer,.h_pagebody float:left; 让menu，banner，footer，h_pagebody都向左浮动.banner,.h_pagebody,.menu,.footer clear:both; 清除他们的浮动，也就是等同于换行.banner,.h_pagebody,.menu width:1003px; 设置他们的宽度为1003px，让他们占满整个大的div.footer width:1001px; padding-top:20px; height:65px; background:url ./images/footer_bg.jpg repeat-x; margin-top:15px; 都这里，页面就变成了：图4-1 宽屏下的样子 首页的样式要使首页变得完整，需要再写出：图4-2 首页主体内容根据上文的分析得出这一部分分为左右，并且我已经写出这部分的代码了，主要是由两个大的 包含着几个 构成，ul是无需列表，li是无序列表的列表项，不断的循环li或者ul可以得到上面的页面。可以写出他的css：.h_pagebody background:url ./images/h_page.jpg no-repeat; height:502px; .leftbody width:721px; padding:0px 5px 0 5px; .rightbody width:255px; .case width:721px; .case li width:316px; height:209px; padding:11px 14px 0 14px; background:url ./images/h_case.jpg no-repeat; margin-left:8px; margin-top:15px; .case li:hover background:url ./images/h_casecha.jpg no-repeat; color:#fff; .case li:hover a color:#fff; .h_cast_tit,.more margin-top:16px; .h_cast_tit width:256px; .namelist color:#fff; margin-top:80px; margin-left:8px; width:250px; .namelist li height:13px; padding-top:10px; .name width:180px; font-weight:bold; overflow:hidden; 即可得出首页：图4-3 首页 列表页的样式列表页也是一个不断循环 之间的内容。上面已经将li的内容写了出来，现在我就写li的css。.l_pagebody border:1px solid #fff; background:#eee; padding:8px 0 8px 5px; width:985px; .fallinlove padding:12px; width:961px; height:228px; .fallinlove background:url ./images/list_bg_fil.jpg no-repeat; .left .riqi color:#000; margin:20px 0 0 13px; .left .h_cast_tit margin-top:9px; margin-left:3px; h1 font-family:微软简粗黑, 宋体; font-size:22px; color:#e71b8c; margin-bottom:5px; .left width:309px; .right margin-left:20px; width:615px; .l_pagebody p line-height:1.7em; .more2 margin-top:5px; 得到下图的内容：图4-4 列表页列表项列表页还需要页码的css：.total,.else height:10px; border:1px solid #ccc; margin-right:5px; .else padding:5px 5px 5px 5px; color:#008cf8; .else a,.total a color:#008cf8; .first padding:5px 5px 5px 5px; color:red; height:10px; border:1px solid red; margin-right:5px; .first a color:red; .total padding:5px 8px 5px 8px; font-weight:bold; color:#008cf8; 列表页页面如下：图4-5列表页 内容页的样式内容页是一个图文混排的结构，主要由左边的图片和右边的文字环绕构成，根据上一章中的div可以写出css：#con_link width:965px; .more3 width:309px; text-align:right; margin-top:5px; #con_bg padding:13px; margin-right:5px; .mar background:url ./images/pmar.jpg no-repeat; .fil background:url ./images/pfil.jpg no-repeat; .eng background:url ./images/peng.jpg no-repeat; #pbg background:url ./images/pbg.jpg repeat; margin:13px; line-height:29px; 图4-6内容页总 结此毕业设计讲述了div+css在实际中的应用，此技术是由web协会和w3c协会所开发研究的，此项技术经过了长期的测试，div+css是表现与形式的分离，使网页文件更小，更加方便网页设计者的修改，以及一些常用的css样式和div布局，通过熟悉css属性的常用样式，利于网页设计者更快的写出网页设计布局。我们常用的属性有文本属性和图片属性以及边框属性，这些属性在图文混排在网页中应用的较多，而布局在网页中应用的做多的是float和absolute。让网页更加丰富，通过css的控制可以实现简单的ps样式。网页自然是要有观众流览，因此div+css也为不少网页设计师带来了令人头痛的问题，那就是浏览器兼容的问题，现在主流的浏览器有IE5.5 IE6 IE7 火狐浏览器等，对于兼容性问题，目前已经出现了一些兼容性插件，以及各种浏览器也开始向互相兼容发展，相信不久后的将来，网页兼容性问题将会彻底被解决，从而减轻网页设计师的工作量。致 谢本论文是在我的指导老师 的指导下完成的，特别感谢她大学四年来对我的指导和教育，让我在日后的工作中得到了不少的益处，尤其是在这次论文的编写工作中她的细心指导和不懈的支持，非常感谢她。光阴似箭，岁月如梭，转眼间4年的时光就要结束，在学校里虽不是学有所成但是也学到了很多，不管是做人方面的，或是做事方面的。很感谢龚念老师对我毕业论文的指导，以及众多好友的帮助，让我完成了此论文。在共同度过了4年的时光，毕业将至，每个人都即将走入社会，心里也有万分的不舍，天下无不散的宴席，相信以后会重逢。4年之前我期待着有个精彩的大学生涯，所以的生活虽不能像我想象中的那样，但是我也得到了很多，学习是要不耻下问，脚踏实地。这4年我将会成为我人生中最精彩的回忆，我会记住同窗好友的鼓励，是你们在我最困难的时候鼓励我，支持我，在这里我要对你们说一声谢谢，我最应该感谢的人应该就是我的父母了，焉得谖草，言树之背，养育之恩，无以回报，你们永远健康快乐是我最大的心愿。 好了，千言万语尽在不言中，就让我内心所有的感谢和思念化做春雨，永远滋润你们的心扉。在这最后，祝愿所有的老师和同学们都有一个美好的前程！参考文献1 CSS+DIV网页样式与布局作者：王俭敏等编著 出版社：电子工业出版社2 别具光芒CSS属性、浏览器兼容与网页布局作者：李烨编著 出版社：人民邮电出版社3 CSS实战手册作者：（美）麦克法兰著，俞黎敏译 出版社：电子工业出版社4 Web 标准实战作者：（美）锡德霍姆著，常可译 出版社：人民邮电出版社5 CSS完全使用详解作者：黄斯伟等编著 出版社：人民邮电出版社6 CSS+DIV网页样式与布局案例指导作者：王俭敏等编著 出版社：电子工业出版社7 CSS网站布局实录：基于Web标准的网站设计指南（第二版）作者：李超编著 出版社：科学出版社武汉大学2006级毕业论文 设计 第6页 共30页底部：链接、声明、版权等主体内容FLASH页面导航底部：链接、声明、版权等主体内容FLASH页面导航底部：链接、声明、版权等主体内容FLASH页面导航MenuBanner Flash RightbodyLeftbodyFooterMenuBanner Flash ListFooterMenuBanner Flash ContentFooter袁节膅薂羄肅蒃薁蚃芀荿薀螆肃芅蕿袈芈膁蚈羀肁蒀蚇蚀袄莆蚇螂肀莂蚆羅袂芈蚅蚄膈膄蚄螇羁蒂蚃衿膆莈蚂羁罿芄螁蚁膄膀螁螃羇葿螀袅膃蒅蝿肈羆莁螈螇芁芇莄袀肄膃莄羂艿蒂莃蚂肂莈蒂螄芈芄蒁袆肀膀蒀罿袃薈葿螈聿蒄葿袁羁莀蒈羃膇芆蒇蚃羀膂蒆螅膅蒁薅袇羈莇薄罿膄芃薃虿羆艿薃袁节膅薂羄肅蒃薁蚃芀荿薀螆肃芅蕿袈芈膁蚈羀肁蒀蚇蚀袄莆蚇螂肀莂蚆羅袂芈蚅蚄膈膄蚄螇羁蒂蚃衿膆莈蚂羁罿芄螁蚁膄膀螁螃羇葿螀袅膃蒅蝿肈羆莁螈螇芁芇莄袀肄膃莄羂艿蒂莃蚂肂莈蒂螄芈芄蒁袆肀膀蒀罿袃薈葿螈聿蒄葿袁羁莀蒈羃膇芆蒇蚃羀膂蒆螅膅蒁薅袇羈莇袄芈蒇袇螀芇蕿蚀聿芆艿蒃肅芅蒁螈羁芄薃薁袆芃芃螆螂芃莅蕿肁节蒈螅羇莁薀薈袃莀艿螃蝿荿莂薆膈莈薄袁肄莇蚆蚄羀莇莆袀袆羃蒈蚂螂羂薁袈肀肁芀蚁羆肁莃袆袂肀薅虿袈聿蚇蒂膇肈莇螇肃肇葿薀罿肆薂螆袅肅芁薈螁膅莃螄聿膄蒆薇羅膃蚈螂羁膂莈蚅袇膁蒀袀螃膀薂蚃肂腿节衿羈腿莄蚂袄芈蒇袇螀芇蕿蚀聿芆艿蒃肅芅蒁螈羁芄薃薁袆芃芃螆螂芃莅蕿肁节蒈螅羇莁薀薈袃莀艿螃蝿荿莂薆膈莈薄袁肄莇蚆蚄羀莇莆袀袆羃蒈蚂螂羂薁袈肀肁芀蚁羆肁莃袆袂肀薅虿袈聿蚇蒂膇肈莇螇肃肇葿薀罿肆薂螆袅肅芁薈螁膅莃螄聿膄蒆薇羅膃蚈螂羁膂莈蚅袇膁蒀袀螃膀薂蚃肂腿节衿羈腿莄蚂袄芈蒇袇螀芇蕿蚀聿芆艿蒃肅芅蒁螈羁芄薃薁袆芃芃螆螂芃莅蕿肁节蒈螅羇莁薀薈袃莀艿螃蝿荿莂薆膈莈薄袁肄莇蚆蚄羀莇莆袀袆羃蒈蚂螂羂薁袈肀肁芀蚁羆肁莃袆袂肀薅虿袈聿蚇蒂膇肈莇螇肃肇葿薀罿肆薂螆袅肅芁薈螁膅莃螄聿膄蒆薇羅膃蚈螂羁膂莈蚅袇膁蒀袀螃膀薂蚃肂腿节衿羈腿莄蚂袄芈蒇袇螀芇蕿蚀聿芆艿蒃肅芅蒁螈羁芄薃薁袆芃芃螆螂芃莅蕿肁节蒈螅羇莁薀薈袃莀艿螃蝿荿莂薆膈莈薄袁肄莇蚆蚄羀莇莆袀袆羃蒈蚂螂羂薁袈肀肁芀蚁羆肁莃袆袂肀薅虿袈聿蚇蒂膇肈莇螇肃肇葿薀罿肆薂螆袅肅芁薈螁膅莃螄聿膄蒆薇羅膃蚈螂羁膂莈蚅袇膁蒀袀螃膀薂蚃肂腿节衿羈腿莄蚂袄芈蒇袇螀芇蕿蚀聿芆艿蒃肅芅蒁螈羁芄薃薁袆芃芃螆螂芃莅蕿肁节蒈螅羇莁薀薈袃莀艿螃蝿荿莂薆膈莈薄袁肄莇蚆蚄羀莇莆袀袆羃蒈蚂螂羂薁袈肀肁芀蚁羆肁莃袆袂肀薅虿袈聿蚇蒂膇肈莇螇肃肇葿薀罿肆薂螆袅肅芁薈螁膅莃螄聿膄蒆薇羅膃蚈螂羁膂莈蚅袇膁蒀袀螃膀薂蚃肂腿节衿羈腿莄蚂袄芈蒇袇螀芇蕿蚀聿芆艿蒃肅芅蒁螈羁芄薃薁袆芃芃螆螂芃莅蕿肁节蒈螅羇莁薀薈袃莀艿螃蝿荿莂薆膈莈薄袁肄莇蚆蚄羀莇莆袀袆羃蒈蚂螂羂薁袈肀肁芀蚁羆肁莃袆袂肀薅虿袈聿蚇蒂膇肈莇螇肃肇葿薀罿肆薂螆袅肅芁薈螁膅莃螄聿膄蒆薇袁节膅薂羄肅蒃薁蚃芀荿薀螆肃芅蕿袈芈膁蚈羀肁蒀蚇蚀袄莆蚇螂肀莂蚆羅袂芈蚅蚄膈膄蚄螇羁蒂蚃衿膆莈蚂羁罿芄螁蚁膄膀螁螃羇葿螀袅膃蒅蝿肈羆莁螈螇芁芇莄袀肄膃莄羂艿蒂莃蚂肂莈蒂螄芈芄蒁袆肀膀蒀罿袃薈葿螈聿蒄葿袁羁莀蒈羃膇芆蒇蚃羀膂蒆螅膅蒁薅袇