任务三网页界面的布局微课脚本.docx

平面设计课程一教学设计脚本环节教学设计教学讲解画面也旺时长K1T导入展示不同的网页界面同学们好，这一节我们来学习网页界面布局的基本知 识，当我们在网上冲浪时会看到各种各样的界面，有的让 人看着眼花缭乱、有的则界面非常简洁，那么这么多不同 的界面里面蕴含了哪些知识呢？下面让我们来一起学习 吧。真人音乐 +课配音 件教学过程及微课视频分镜头脚本知识点网页界面的布局教学目标L理解网页布局的常见类型2.理解网页布局的技巧设计思路1 .列出学习必备知识点。2.微课：导入：展示生活中常用网页布局常见类型，引出在本节教学目标教学内容讲 解一、网页布局的常见类型音乐配音讲解一、网页布 局的常见类 型1、“同”字形结构布局也可以称为“国”字形布局，采用这种结构的网页，往往 将导航区置于页面顶端，如广告条、友情链接、搜索引擎、 等内容置于页面两侧，中间为主体内容，这种结构条理性 强，直观，有视觉的平衡感，但也比较僵化，可以用配色 来规避“同”字形结构缺陷2、“回”字形结构布局“回”字形是对“同”字形结构的一种变化，这种变形将 “同”字形不是很重视的页脚利用起来，增大了主题内容, 合理的使用了页面的有限面积，同时这种布局使页面拥挤不堪，不利于浏览。M -3 MBS 二：E9 桁面E T®金多台 107K.我也号。4升 23*5 a吸速体父0天36力o*»Q*a*Q»ar»Qao-rr岁” 倒a 王区盘网BAR今日虺鼻百度43998m8-电视的承乐安国房产0K嗟fflffiWa -和区整女0:9IM16M4万斯12306 AH“品叁-779We 月如7金» tiuxwe 加*2&1 FT童无30.Q5«必 03 1CM 仑萸* j am ®*，戌色修骨靠awQ2A »zC”，5FG?a«昆外3 tm无帚十名一刀999沱月受仃“施安安安传空余2 9 1打金无上，目样”ItRBftVI?MAX-aWr*畲打台9MS9WS»4»5E今日新贡势条环府不同炭禽鼾定事特大5坟防中蜗至|12W 一无*皿大赞RJTWtt K&M 页费不才由会一刀""CM笠o«-«w83二力洌。Utsb染承 tte M RW0 g0 ri5G 3 0 3£J3»»ZA个王至一R FT叵簿* ,&际.,干沁皿中X3、“匡”字形结构布局“回”字形也是对“同”字形结构的一种变化，是同字形 和回字形结构的一种这种，这种结构承载的信息量与同字 形相同，而且改善了回字形的封闭结构。、网页布 局的技巧4、左右对称结构布局左右对称指在视觉上相对对称，这种结构将网页分割 成左右两部分，一般将导航区设置在左半部，右半部 作为主体内容的区域。该结构便于浏览者直观的读取 主体内容，但不利于发布大量的信息。传讯传讯IM. MWWeMaHjHUbMeiBSxe5t) iw2书比豺* eVAK anUMia inyMMri -32-3.85、自由式结构布局MY1H0该结构灵活性大，颠覆了从前以图文为主的表现形式, 将图像、Flash动画或者视频作为主体内容，其他的文 字说明及栏目条均被分到不起眼的位置，起装饰作用, 同时因文字过少，浏览者难以长时间驻足。二、网页布局的技巧1、大框套小框大框套小框布局是常用的一种布局方式，在一个大的 栏目里，布局几个小的相关栏目，这种布局方式大小有限, 让用户专注某一方面，主体突出。2、环绕式布局环绕式布局更加灵活方便，横幅广告区域相对较小， 但是可以在页面中安置更多的信息和内容，这种布局 适合内容较多或者以内容为主的网页穿插式布局。天猫超市一站式购齐E- 1s3、通栏式布局通栏式布局使网页更加大气，视觉上更加的开阔，主 视觉部分可以随机灵活处理。认识更快、更聪明、 更好用的Photoshop认识更快、更聪明、 更好用的PhotoshopCloud.0为人人on.u分口，m倒wuit.EMM凌方案Met* ft WWAM.f 力*. *“予jeiflEewiMSFiuAcrotMtWH.我金文体IET ItaixAUf结束4、左中右布局左中右布局不常见上，是一种新鲜的布局方式，比 较有条理，逻辑性较强。导航栏多布局在主视觉下方, 打开网页I一个9。收事整理.免员岛用字体”的网玷,刘欢卡通手书昭源'秋聘在网页设计中，不同类型的网站布局方式不一样，不 管采用何种布局，都要围绕用户的浏览习惯区布局， 要主次鲜明，突出重点。. baidu. com/article/ad310e803bec 3cl848f49e52. html好了这一节我们就到这里，感谢大家学习。音乐 配音