
上QQ阅读APP看书,第一时间看更新
2.5 综合实例——图文并茂房屋装饰装修网页

图2-16 房屋装饰效果网页
本章讲述了网页组成元素中最常用的文本和图片。本综合实例的目的是创建一个由文本和图片构成的房屋装饰效果网页(如图2-16所示),具体操作步骤如下:
01 在Dreamweaver CC中新建HTML文档,并修改成HTML5标准,代码如下:
<!DOCTYPE html> <html> <head> <title>房屋装饰装修效果图</title> </head> <body> </body> </html>
02 在body部分增加如下HTML代码,保存页面。
<p> <img src="images/xiyatu.jpg" width="300" height="200"/><br/> 西雅图原生态公寓室内设计</p> <hr> <!—此标签将显示为一条水平线。--> <p> <img src="images/stadshem.jpg" width="300" height="200"/><br/> Stadshem小户型公寓设计(带阁楼)</p> <hr> <p> <img src="images/qingxinhuoli.jpg" width="300" height="200"/><br/> 清新活力家居</p> <hr> <p> <img src="images/renwen.jpg" width="300" height="200"/><br/> 人文简约悠然家居</p> <hr>
技巧提示
<hr>标记的作用是定义内容中的主题变化,并显示为一条水平线,在HTML5中它没有任何属性。
另外,快速插入图片及设置相关属性可以借助Dreamweaver CC的插入功能,或者按下组合键Ctrl+Alt+I。