《HYLI5教程课件》_《HYLI5教程课件》_第七章 网页布局.pptxVIP

;;;框架主要是用来把浏览器窗口划分为若干个区域，每个区域可以分别显示不同的网页。访问者浏览站点时，可以使某个区域的文档永远不更改，但可通过导航条的链接更改主要框架的内容。在Dreamweaver中，利用框架和框架集，可以将单个网页分成多个独立的区域，以实现在一个浏览器窗口中同时显示多个页面的效果。通过构建这些页面之间的关系，可以实现文档导航、浏览等功能。框架多应用于各种论坛和电子邮箱页面，如图7-1所示。;;;frameset是一种框架集属性，它的目的是用来将网页分成什么样子。如图所示，通过frameset将整个页面分成三个部分，如图7-4所示：;【案例引入】;【案例实现】;frame_b.html的代码如下：;【案例引入】;【案例实现】;【案例引入】;【案例实现】;1.2iframe浮动框架用法;iframe还有其他的一些常用属性如表7-1所示：;【案例引入】;【案例实现】;【任务目标】;【案例实现】;（1）搭建结构;（2）插入内容;底部框架代码：;（3）美化页面;美化过后，并且删除每个div的style=border:double4px;，最后运行效果如图7-13所示;（4）iframe浮动框架的设置;divid=mright

h1新源数码，br/

真诚br/

欢迎您！/h1

/div

/div

/body

/html;;7.3CSS3+DIV技术布局;7.3.1单列布局;【案例引入】;【案例实现】;7.3.2多列布局;【案例引入】;【案例实现】;【案例引入】;【案例实现】;divclass=main

divclass=left

h4align=center红烧牛肉/h4

imgsrc=images/红烧牛肉.jpgbr

p

制作方法：br

1、牛肉洗净，切0.5厘米长方形厚片。陈皮切条状，葱洗净、切长段，姜去皮、切丝。br

2、锅中倒1杯油烧热，放入牛肉片小火炸至肉片干酥，捞出。br

3、倒出炸油，锅中留1小匙油烧热，爆香干辣椒，加入陈皮炒香，再加入葱、姜炒匀。br

4、最后加入牛肉片、八角和A料，小火焖烧至汤汁收干即可盛出。br

br

/p

/div

divclass=middle

h4align=center红烧茄子/h4

imgsrc=images/红烧茄子.jpgbr

p

制作方法：br

1、将腌过的茄块用力挤干水份。br

2、锅中放油烧至三成热，倒入茄块翻炒，至呈黄色时成盘里。br

3、锅洗净，放少量油，烧至五成热时，将葱碎、蒜片、八角放入炒出香味，倒入茄块翻炒。br

4、茄块炒时，放料酒、豆瓣碗里的所有调料、半杯汤或水烧沸后勾芡。br

5、撒入香菜。br

/p

/div;divclass=right

h4align=center可乐鸡翅/h4

imgsrc=images/可乐鸡翅.jpgbr

p

制作方法：br

1、将材料准备好，鸡翅膀用生抽、盐、火麻油、料酒腌制30分钟左右。br

2、锅中放油烧至三成热，倒入茄块翻炒，至呈黄色。br

3、鸡翅煎至变色后，倒入准备好的蒜、姜、辣椒，翻炒两面金黄香味流入到肉汁中即可。br

4、倒入辅料之后，翻炒几下，就可以倒入可乐了。要注意，可乐不要倒太多，刚好盖过鸡翅就可以了。br

5、大火焖10分钟后收汁即可出锅，放上准备好的香菜即可。br

/p

/div

/div

/body

/html;7.3.3弹性盒模型布局;【案例引入】;【案例实现】;divclass=content

h1section2/h1

p博客上的文章通常以网页形式出现，并根据张贴时间，以倒序排列。/p

/div

divclass=content

h1section3/h1

p博客是继MSN、BBS、ICQ之后出现的第4种网络交流方式，现已受到大家的欢迎，是网络时代的个人“读者文摘”，是以超级链接为入口的网络日记，它代表着新的生活、工作和学习方式./p

/div

/div

/body

/html;因此，引入弹性盒布局模型的目的是提供一种更加有效的方式来灵活地应对这样的