中文DreamweaverCS3案例教程（第二版）作者沈大林等第六章课案.pptVIP

中文Dreamweaver CS3案例教程（第二版） 沈大林 主编 6.1 【案例25】“牡丹花的特点和用途2”网页 案例效果 操作步骤 1．创建内部CSS （1）打开“【案例25】牡丹花的特点和用途2”文件夹内复制的网页文档“牡丹花的特点和用途0.htm”。 （2）打开“CSS样式”面板，“新建CSS规则”。 （3）“.STYLE1”CSS样式的设置。 （4）定义一个内部CSS样式。 2．定义CSS样式的代码含义 第6章 CSS样式和Div标签 3．创建外部CSS样式 4．应用CSS样式 相关知识 1．“CSS样式”面板 2．“新建CSS规则”对话框中其他选项的含义 3．应用CSS样式 6.2 【案例26】“特效课程表”网页 案例效果 在半透明的鲜花图像之上有一个计算机网络专业课程表。 操作步骤 1．制作表格和添加图像 （1）首先制作一个普通的课程表 （2）在表格的上面创建一个层，其内导入一幅图像。 2．创建外部CSS样式和应用样式 （1）新建CSS规则 （2）将.CSS1样式应用于选中的图像。 相关知识 1．定义CSS的背景属性 2．定义CSS的区块属性 3．定义CSS的列表属性 4．定义CSS的扩展属性 6.3 【案例27】“世界名花列表”网页 案例效果 页面上边居中位置是红色标题文字“世界名花列表”，标题下边有9幅大小一样的小鲜花图像。单击表中的任意一幅小鲜花图像，均可以弹出相应的高清晰度图像。 操作步骤 1．设置网页背景和插入标题图像 2．插入Div标签 （1）在页面内顶部居中位置创建一个名称为apDiv2的AP Div。 （2）生成了一个名称为#apDiv2的内部CSS样式 （3）单击“插入”面板“布局”选项卡内的“插入Div标签”按钮 （4）完成CSS样式设置，生成了一个名称为“.PIC”的内部CSS样式。 3．插入图像和创建链接 相关知识 1．定义CSS的方框属性 在“.PIC的CSS规则定义”对话框内左边“分类”列表框内选择“方框”选项。 2．定义CSS的边框属性 单击“.×××的CSS规则定义”对话框内左边“分类”列表框内的“边框”选项。 3．定义CSS的定位属性 单击“.×××的CSS规则定义”对话框内左边“分类”列表框中的“定位”选项。 4．使用Div标签和CSS的网页布局 （1）单击“插入”（布局）栏内的“插入Div标签”按钮 （2）单击“插入Div标签”对话框内的“新建CSS样式”按钮