Photoshop制作网站首页 - 图文

图1-6-3

4. 打开CSS 样式面板，为标签“body,td,th”新建一个CSS 规则，选择“仅对该文档”，这个CSS是针对当前页面全局的，如图1-6-4 所示。

图1-6-4

5. 在类型中，设置字体为“宋体”，大小为“9pt”，行高为“16px”，颜色为绿色，修饰为“无”，如图1-6-5 所示。

图1-6-5

6. 接下来设置图片的文字环绕效果，使文字都围绕在图片的右侧，也就是文字左对齐。选择“石桥茶舍”的图片，为其添加一个CSS 规则，如图1-6-6 所示。

图1-6-6

7. 选择方框标签页，将浮动设置为“左对齐”，即实现的文字对图片的环绕，如图1-6-7 所示。其它页面元素的CSS 设置方法类似，比如关于“石桥花园”的介绍文字，因文字的粗细不同，可在CSS中设置两个类规则来进行样式化，这里就不再赘述了。

图1-6-7

8. Spry 构件是Dreamweaver CS3 新增的用户界面对象，包括 XML 驱动的列表和表格、折叠构件、选项卡式面板等元素。在Spry 工具组中选择插入Spry 选项卡式面板，每一个选项卡都可以直接输入标签的名称和该选项卡的内容，这里我们输入“菊花”，如图1-6-8 所示。