Dreamweaver CS6插入HTML代码和定义CSS样式
综合实践4
本文来自 九州书源 《Dreamweaver CS6网页制作》 清华大学出版社 2015年
摘 要 :本文档主要给出Dreamweaver C S6插入HTML代码和定义CSS样式综合实践4之制
作“科技公司网站”首页的具体要求及最终网页效果图。
关键词: Dreamweaver CS6B插入HTML代码B定义CSS样式
制作“科技公司网站”首页
前面主要对网页中的 HTML 和 CSS 的基本知识进行了介绍,了解了 HTML 中的各种基本语法、标记、
HTML 编辑器的使用方法,以及在网页文档中插入 HTML 代码和在网页文档中编辑简单的 HTML 代码的
方法。对 CSS 而言,则介绍了 CSS 的基本语法、认识管理 CSS 样式的面板、使用 CSS 对网页文档中的
各种对象(文本、图像、链接、背景)进行美化以及使用 CSS 在网页中制作简单的特殊效果的方法。为
了巩固所学知识,下面将以制作“科技公司网站”首页为例,达到巩固练习所学知识的目的。
本案例将制作一个简单的科技公司网站首页,采用 Div+CSS 方式进行网页制作,首先选择 【插
入】/【布局对象】/【Div 标签】命令,在网页中插入相应的 Div 标签,再使用 CSS 进行设置。最终效
果如图 1 所示。
图 1 制作“科技公司网站”首页
在制作时,可根据以下提示的操作步骤进行制作。
第 一 步 : 在 页 面 顶 部 插 入 “ 宽 ” 为 “ 360” , “ 高 ” 为 “ 80” 的 Div 标 签 , 背 景 图 片 选 择
“back.jp”文件B
第二步:插入“左浮动”,“宽”为“180”、“高”为“430”,“填充”为“10”的 Div 标签B
第三步:在左侧 Div 标签中粘贴“link.txt”中的链接文本并设置空链接B
第四步:在右侧插入“左浮动”、“宽”为“480”、“高”为“410” “填充”为“20”,左侧“边
界”为“10”,“背景”为“&FFF” 的 Div 标签B
第五步:粘贴 “content.txt” 中的内容,保存文档,完成制作。
1 / 1
Dreamweaver CS6 插入 HTML 代码和定义 CSS 样式综合实践 4