任务三网页界面的布局微课教案.docx

《任务三网页界面的布局微课教案.docx》由会员分享，可在线阅读，更多相关《任务三网页界面的布局微课教案.docx（5页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、教学分析网页界面的授课项目项目六授课任务门霸的授课课时2课时教学内容通过网页界面的布局学习， 理解网页界面的布局的含义，作 用和功能以及网页设计的构成要 素1：同.字形结构布H2 回字形结构布国网页界面的布目类型.3：国字形结构布冏4左石对称结构布局8任务三网页界面的布局5自由式靖构布局1大框叁小框布局2 .环虢式布局3 .连拄式布局4左中右布局二网页布局的技巧1教学目标知识 目标L理解网页布局常见的类 型2.掌握网页布局的技巧教学重点L掌握网页布局的技巧技能 目标L理解网页布局常见的类 型2 ,掌握网页布局的技巧教学难点1.掌握网页布局的技巧情感 目标1.理解网页布局常见的类 型。教学过程同

2、学们好，这一节我们来学习网页界面布局的基本知识，当我们在网上冲浪时会看到各 种各样的界面，有的让人看着眼花缭乱、有的则界面非常简洁，那么这么多不同的界面里面 蕴含了哪些知识呢？下面让我们来一起学习吧。一、网页布局的常见类型Head 头部1、“同”字形结构布局也可以称为“国”字形布局，采用这种结构的网页，往往将导航区置于页面顶端，如广 告条、友情链接、搜索引擎、等内容置于页面两侧，中间为主体内容，这种结构条理性强, 直观，有视觉的平衡感，但也比较僵化，可以用配色来规避“同”字形结构缺陷2、“回”字形结构布局“回”字形是对“同”字形结构的一种变化，这种变形将“同”字形不是很重视的页脚 利用起来，增

3、大了主题内容，合理的使用了页面的有限面积，同时这种布局使页面拥挤不堪, 不利于浏览。2”，下 L审百度一F祖5日KULX10-IyC“京九号Z升 23*5 皿0天JSJ8力o*口天“事进口”QaotF 大.嗖jn 豆宇H8今日犯点否叟43%0爰用主Q-iBS-SrH电决鼬原5*fil用产2“5小加戏MffM招aw行RF 食。三JB阿叟16B8孽上F75WW12306*总会即E十名一刀999沱月灾打拿 取查直传本意天2合1 年盒元上限0旃*一鼻冷玳无足十名一刀9999tz三,广V*越交交变传片的冰，2合1打全元上制二展科恰主法九方vizMAx-asi沐雷打金星m妄天？号， fltH优角互；去今日

4、勤其头条环球车新境原急新拿事大真发景-岬国承2电mG天赛小卷碇 双色博国失奈aw Qua az C 条衅 漫史多0 90 ,然回Z&皿EJIP T中”支和 ：*一刀77亿 FB0花oa- w陶不常龙攵IM 55HS后刀刀令冷亿,也府集3、“匡”字形结构布局“回”字形也是对“同”字形结构的一种变化，是同字形和回字形结构的一种这种，这 种结构承载的信息量与同字形相同，而且改善了回字形的封闭结构。=A WMNNV4W)( IS 0atl5推广SM M笠泪。久 k MVT4、左右对称结构布局左右对称指在视觉上相对对称，这种结构将网页分割成左右两部分，一般将导航区 设置在左半部，右半部作为主体内容的区域

5、。该结构便于浏览者直观的读取主体内容, 但不利于发布大量的信息。5、自由式结构布局该结构灵活性大，颠覆了从前以图文为主的表现形式，将图像、Flash动画或者视 频作为主体内容，其他的文字说明及栏目条均被分到不起眼的位置，起装饰作用，同时 因文字过少，浏览者难以长时间驻足。二、网页布局的技巧1、大框套小框大框套小框布局是常用的一种布局方式，在一个大的栏目里，布局几个小的相关栏目, 这种布局方式大小有限，让用户专注某一方面，主体突出。2、环绕式布局环绕式布局更加灵活方便，横幅广告区域相对较小，但是可以在页面中安置更多的 信息和内容，这种布局适合内容较多或者以内容为主的网页穿插式布局。询一o迪宝3、

6、通栏式布局通栏式布局使网页更加大气，视觉上更加的开阔，主视觉部分可以随机灵活处理。Gtivc Ooud. t)为人人on.u分口，eoi.m倒wuit.Gtivc Ooud. t)为人人on.u分口，eoi.m倒wuit.EMM凌方案Met* f pmmt WWAM.f 力*. *“予jeiflEewiMSFiuAcrotMtWH.我金文体SMIPOmE a7F. ! IET ItaixAUf4、左中右布局左中右布局不常见上，是一种新鲜的布局方式，比较有条理，逻辑性较强。导航栏多 布局在主视觉下方，打开网页一个中门收n整理.免费霸用字体”的网玷2： k ” *n mt ok *3*a* an * ea在网页设计中，不同类型的网站布局方式不一样，不管采用何种布局，都要围绕用户的 浏览习惯区布局，要主次鲜明，突出重点。