图文混排应用.PDF

图文混排应用 【实训目的】 文本和图像是构成网页的主体，是网页设计不可缺少的组成元素。文本可以直观地体现 信息内容，图像可以使网页内容更加丰富、美观。在网页中添加文本和图像并恰当地设置其 CSS 样式是网页制作的基本技能。 实训目的：  掌握在网页中添加文本和图像的方法；  掌握用CSS 设置文本样式的方法；  掌握设置图像属性的方法；  掌握在网页中插入特殊对象的方法；  掌握用CSS 对图像和文本进行简单混排的方法。 【实训要求】 以设计畅销书介绍网页为载体，重点练习在网页中插入文本、图像、列表、特殊符号等 对象的方法，以及用 CSS 设置对象样式，提高制作图文并茂网页的技能。参考效果如图 1 所示。 图1 畅销书介绍网页效果 【实训流程】 1）启动Dreamweaver CS6，创建一个本地站点，新建一个HTML 文档并保存在站点中。 2）输入文本“《百年孤独》”，键入Enter键，然后输入图书的价格、折扣、作者、出 版社等信息，注意多个连续空格的输入，需要选择“插入→HTML→特殊字符→不换行空格” 菜单命令；或单击“插入”面板“文本”类别中最后的【字符：不换行空格】图标按钮或按 下Ctrl+Shift+Space组合键。如图2 所示。 图2 网页中输入文本 3）光标定位在 “《百年孤独》”与“会员价”文字中间，选择“插入→图像”菜单命令 插入素材图片，如图3 所示。 图3 网页中插入图像 4）在需要的位置插入水平线，方法是选择“插入→HTML→水平线”菜单命令。 5）单击“属性”面板中的【页面属性】按钮，打开“页面属性”对话框，为网页设置 页面属性分别为： “页面字体”为宋体、“大小”为14、“文本颜色”为#333、“背景颜色” 为#FFC、上下左右边距为50px 等，如图4 所示。 图4 设置页面属性 6）选中“《百年孤独》”文本，在“属性”面板 “HTML”选项卡中，设置“格式”其 为标题1，并通过CSS 样式设置文本对齐方式为居中对齐，字体为黑体。参考CSS 代码如下， 效果如图5 所示。 .name { text-align: center; font-family: 黑体; } 图5 设置标题文字样式 7）选中图片，“格式”其为标题1，设置图像的边框样式、间距及左对齐样式，参考CSS 代码如下然后通过直接拖拽其控制点、或通过“属性”面板设置图像大小，使其与右侧文字 显示协调，效果如图6 所示。 img { margin-right: 30px; margin-bottom: 30px; border: 2px solid #666; float:left; } 图6 设置图像样式 8）分别设置图片右侧文本样式，参考CSS 样式代码如下，效果如图7 所示。 .ddjiage { font-size: 24px; color: #C00; font-weight: bold; font-family: Arial; } .jiage { text-decoration: line-through; } .xingji { color: #F30; } .kucun { color: #060; font-weight: bold; } .lianjieyanse { co