新网页设计与制作项目实训教程 教学课件 严加琼 曾金发 项目14.pptVIP

14.3 实践向导 任务14-1诗歌排版:《再别康桥》 2.制作HTML页面 ① 在页面中插入一个DIV，使用“插入”菜单→“布局对象”→“DIV标签”命令，弹出“插入DIV标签”对话框，将一个DIV标签插入到当前页面中，ID命名为“poem”。 ② 在此DIV标签中，使用菜单命令“插入→HTML→文本对象→标题1”插入一个标题。输入标题“再别康桥”后，在下一行录入整首诗歌（换行采用SHIFT+ENTER）。也可以直接打开文件光盘素材文件夹中纯HTML文件“14-6a.html”进行修改。 14.3 实践向导 任务14-1诗歌排版:《再别康桥》 3.设置文本CSS规则 ① 定义DIV#poem容器，让它水平居中，需要利用到它的左右外边距，自动撑开，建立一个仅对该文档生效的规则，首先设置“CSS规则定义”对话框中的“背景”类别“background-color”为“#F8FFF0”，然后把“方框”的规则定义如图14-31所示。将“边框”设置成如图14-32所示。 ② 为了配合诗文效果，安装一种中文书法字体“方正启体简体”。安装字体的方法是将字体文件直接复制到系统盘的windows文件夹内的fonts文件夹（XP和WIN7都适用）然后在Dreamweaver中添加该字体。 ③ 为H1标签建立一个仅限该文档使用的选择器规则，在“类型”中，设置如图14-33所示。 ④ 设置诗歌的文字居中，在“CSS样式”面板中单击按钮 ，新建一个复合规则“#poem p”，在“类型”中将字体设置为“方正启体简体”，字体大小“18px”，字体颜色“#666”。特别需要注意的“定位”类别设置如图14-36所示。 14.3 实践向导 任务14-1 诗歌排版:《再别康桥》 4.设置背景规则 ① 设置页面背景水平平铺 ② 设置诗歌标题“再别康桥”背景图片 ③ 设置诗歌正文背景图片 图14-28 诗歌美化效果 1４.3 实践向导 任务14-2图文排版：制作庐山景点介绍页面 １.设计页面结构 本页面图片和文字较多，适合采取图文混排形式排版。在最外层是DIV容器，内容正文用P标记，景点子标题也用P标记，图片一左一右，从上到下间隔排列，第一个小标题向左浮动，第二个小标题向右浮动。总体规划如图14-43所示。 图14-43 “庐山介绍”页面结构 14.3 实践向导 任务14-2图文排版：制作庐山景点介绍页面 2.制作HTML页面 使用“插入”菜单→“布局对象” →“DIV标签”命令，将一个DIV标签插入到当前页面中，ID命名为“lushan”。在此DIV标签中，先将各个小标题和正文内容录入或粘贴（标题与段落间的换行用enter，介绍文字段落内部不换行）。完成文字部分后，在相应的小标题后插入该景点的图片。也可以直接打开光盘素材文件夹中“14-7a.html”文件。 14.3 实践向导 任务14-2图文排版：制作庐山景点介绍页面 3.设置CSS规则 ① 定义整个页面的背景色。建立标签规则“body”，设置“背景”类别中“background-color：#033”，“区块”类别中“text-align：center”，“类型”类别中“font-size：13px”。 ② 定义最外层方框的规则，使用ID规则，“#lushan”方框设置如图14-44所示。“边框”类别中设置“width:2px，style:solid，color:#CC0”。“背景”类别中设置“background-color:#E9FEEB”。 ③ 定义页面小标题的规则。小标题需要一左一右设置成两种，向左对齐的小标题使用类规则title1，向右对齐的小标题使用类规则title2，建立复合规则p.title1，如图14-45所示。向右浮动标题p.title2的设置与p.title1基本相同，不同之处仅是“text-align：right”。 ④ 定义普通正文的规则。建立一个类规则“.content”，设置如图14-46所示。 14.3 实践向导 任务14-2图文排版：制作庐山景点介绍页面 3.设置CSS规则 ④ 定义图片的规则。对于所有的景点图片，采取通用设置，加边框修饰，在标签规则中定义img标签“border:1px，border-style:solid，bordercolor:#664a2c”。 左侧图片和右侧图片分别向左和向右浮动，并用外边距隔开周围的文字，设置类规则.pic1和.pic2如图14-47所示。右侧图片img.pic2应设置“margin-left:10px”和“Float:right”。 ⑤ 定义首字下沉的规则。给全文第一个字添加一个首字下沉放大的效果，创建类规则“.first”，如图14-48所示。 14.3 实践向导 任务14-2　图文排版：制作庐山景