使用Dreamweaver进行一个简单的图文混排1/HTML

一、分析案例

1 结构

• 图片、标题、段落文本、特殊字符

2 样式

• 图片：和文本左右排列。水平间距为30
• 标题：二级标题，字号为6，字体为微软雅黑，颜色为#545454
• 网页正文：字号为2，颜色为自定义中灰色，特殊效果正文为蓝色

二、开始实现

1.首先我们打开Dreamweaver2021 并点击新建文件

2.选择文档格式为HTML5，设置标题为“图文混排”

3.将预先下载好的图片重命名并保存在指定的位置

4.回到Dreamweaver开始编码

5.首先我们插入图片，由于我们将html文件与图片保存在同一个文件夹，故此我们可以直接使用图片的相对路径。

6.插入图片后使用alt属性对图片进行描述，align属性利用left值使图片靠左，使用hspace属性设置图片左右两侧右30的空白区域，使用width属性将图片尺寸调整到合适大小

<img src="photo.png" align="left" hspace="30" 
alt="天猫双11图片" width="400">

7.使用<h2>插入标题，并将标题设置成要求样式。

	<h2 color="#545454" size="6" face="微软雅黑">电商的大型活动——双十一购物节</h2>

8.使用<p>标签插入文本并进行文字的填充填充完成文本后将字体与字号进行修改

8.保存后使用option+fn+f12使用浏览器预览效果

###欢迎加入QQ群一同交流学习937864538