CSS 图文混排

CSS 图文混排

Div + CSS 混合布局实例

一、准备工作目录及素材

1、在 D：盘上创建名为 myweb 的新文件夹。

2、准备所需素材。拷贝 F:网页素材网站重构源文件第4章 中的 images 文件夹到 D:myweb 文件夹中。

3、在 D:myweb 文件夹中新建子文件夹 style 。

二、定义站点

1、启动 Dreamweaver cs4，选择“站点 ”>“管理站点”。

2、在弹出的“管理站点”对话框中单击“新建”按钮，然后选择“站点”。

3、在弹出的“站点定义”对话框中，如果显示向导（“基本”选项卡），则单击“高级”选项卡，然后从“分类”列表中选择“本地信息”（它应当是默认选项）。

4、在“站点名称”文本框中，输入 科技之窗 作为站点名称。

5、在“本地根文件夹”文本框中，指定 D:myweb 文件夹。你可以单击文件夹图标来浏览并选择该文件夹，或者在“本地根文件夹”文本框中输入路径。

6、在“默认图像文件夹”文本框中，指定 D:myweb 文件夹中已有的 images 文件夹。你可

以单击文件夹图标来浏览并选择该文件夹，或者在“默认图像文件夹”文本框中输入路径。

7、从“分类”列表中选择“远程信息”，“访问”选：“FTP” 并填写好相关信息。

8、从“分类”列表中选择“测试服务器”，“访问”选：“FTP” 并填写好相关信息，“URL前缀”须根据实际情况做相应修改。

9、从“分类”列表中选择“本地信息”，“HTTP 地址”须根据实际情况做相应修改。

10、单击“确定”。随即出现“管理站点”对话框，显示您的新站点。

11、单击“完成”关闭“管理站点”对话框。此时“文件”面板显示当前站点的新本地根文件夹。“文件”面板中的文件列表将充当文件管理器，允许你复制、粘贴、删除、移动和打开文件，就象在计算机桌面上一样。

三、了解你的任务

下图是一张为 科技之窗 站点设计的完整的和符合要求的设计草样。作为 Web 设计人员，你需要对草样进行转换，使之最终形成可以使用的 Web 页面。

四、创建并保存新页面

建立站点并检查设计草样后，你就可以开始创建 Web 页面了。首先你将创建一个新页面，并将它保存到你的 Web 站点的本地根文件夹 D:myweb 中。该页面最终将成为 远航 Wireless Services 站点的主页。

1、在 Dreamweaver cs4 中，选择“文件”>“新建”。

2、在“新建文档”对话框的左侧列表中选择“空白页”，在“页面类型”列表中选择“HTML”，在“布局”列表中选择“无”，然后单击“创建”按钮，从而创建一个新的 HTML 文档。

3、在新文档顶部的“文档标题”文本框中，输入“科技之窗欢迎您！” 。这就是页面的标题。站点访问者在 Web 浏览器中查看页面时将在浏览器窗口的标题栏中看到此标题。

4、选择“文件”>“另存为”。

5、在“另存为”对话框中，浏览至定义为站点的本地根文件夹的 D:myweb 文件夹并打开该文件夹。

6、在“文件名”文本框中输入 ，然后单击“保存”。 文件名即出现在应用程序窗口顶部的标题栏中。

制作页面布局及顶部内容

五、 制作页面布局及顶部内容

1、在 Dreamweaver cs4 中，选择“文件”>“新建”。

2、在“新建文档”对话框的左侧列表中选择“空白页”，在“页面类型”列表中选择“CSS”，然后单击“创建”按钮，从而创建一个新的 CSS 文档。

3、选择“文件”>“另存为”。

4、在“另存为”对话框中，浏览至定义为站点的本地根文件夹的 D:myweb 文件夹并打开该文件夹，双击打开 style 子文件夹。

5、在“文件名”文本框中输入 ，然后单击“保存”。

6、在 创建一个 * 的CSS规则和一个 body 的CSS规则：

复制代码

1. * {

2. margin: 0px;

3. padding: 0px;

4. border-top-width: 0px;

5. border-right-width: 0px;

6. border-bottom-width: 0px;

7. border-left-width: 0px;

8. }

9. body {

10. font-family: "宋体";

11. font-size: 12px;

12. background-color: #f4ebdc;

13. text-align: center;

14. }

7、按快捷键 Ctrl+S 保存好该 CSS 文件。

8、再次在菜单栏中选择“文件”>“新建”。

9、在“新建文档”对话框的左侧列表中选择“空白页”，在“页面类型”列表中选择“CSS”，然后单击“创建”按钮，从而创建一个新的 CSS 文档。

10、选择“文件”>“另存为”。

11、在“另存为”对话框中，定位到文件夹 D:myweb style。

12、在“文件名”文本框中输入 ，然后单击“保存”。

13、在 创建一个 pagebox 的CSS规则：

复制代码

1. #pagebox {

2. background-image: url(../images/);

3. background-repeat: repeat-y;

4. height: 740px;

5. width: 788px;

6. margin: auto;

7. text-align: left;

8. }

14、按快捷键 Ctrl+S 保存好该 CSS 文件。

15、选中 ，然后单击“CSS样式”面板下部的“附加样式表”按钮。

16、在弹出的“链接外部样式表”对话框中，单击“浏览”按钮，在随后弹出的“选择样式表文件”对话框中选择 D:myweb style 中的 ，然后单击“确定”按钮，将 链接到 。

17、再次单击“CSS样式”面板下部的“附加样式表”按钮。

18、在弹出的“链接外部样式表”对话框中，单击“浏览”按钮，在随后弹出的“选择样式表文件”对话框中选择 D:myweb style 中的 ，然后单击“确定”按钮，将 也链接到 。

19、单击“新建CSS规则”对话框中的“确定”按钮，然后在弹出的“将样式表文件另存为”对话框中，将新建的样式表文件保存为 D: .

20、在设计视图中单击，然后单击“插入”面板中的“常用”选项卡中的“插入 Div 标签”按钮。

21、在弹出的“插入 Div 标签”对话框中，“插入”选择“在插入点”，“ID” 设置为 pagebox 。

22、在“插入 Div 标签”对话框中单击“确定”按钮，在页面中将插入 pagebox 层。

23、删除pagebox 层中多余的文字，然后单击“插入”面板中的“常用”选项卡中的“插入 Div

标签”按钮，在弹出的“插入 Div 标签”对话框中，“插入”选择“在插入点”，“ID” 设置为 header 。设置完成后单击“确定”按钮，在页面中将插入 header 层。

24、单击“CSS样式”面板下部的“新建CSS规则”按钮。在弹出的“新建CSS规则”对话框中，在“选择器类型”列表框中选择“ID”，在“选择器名称”中输入 #top，在“规则定义”中选择“”。

25、单击“确定”按钮，然后在弹出的“CSS 规则定义”对话框中单击“分类”列表中的“方框”选项，然后在弹出的选项卡中设置“宽”为770px ，“高”为 63px ，在“边界（Margin）”选项区中分别设置“上”、“下”均为0，“右”、“左”均为auto 。

26、单击“分类”列表中的“背景”选项，然后在弹出的选项卡中设置“背景图像”为 D:，“重复”选择“不重复”。

27、单击“确定”按钮，完成该 CSS 规则的定义。

注：以上四步完全可以不用，只需切换到 并写入如下代码的方式即可：

复制代码

1. #top{

2. width:770px;

3. height:62px;

4. margin:auto;

5. background-image:url(../images/);

6. background-repeat:no-repeat;

7. }

28、切换到 ，创建一个 ul li 的CSS规则和一个 a 的CSS规则：

复制代码

1. ul li {

2. padding:6px;

3. list-style:none;

4. float:left;

5. font-size: 12px;

6. color: #575757;

7. }

8.

9. a {

10. text-decoration:none;

11. color:#000000;

12. }

29、删除 top 层中多余的文字，然后单击“插入”面板中的“常用”选项卡中的“插入Div 标签”按钮，在弹出的“插入 Div 标签”对话框中，“插入”选择“在插入点”，“ID” 设置为 top-right 。设置完成后单击“确定”按钮，在页面中将插入 top-right 层。

30、切换到 ，创建一个 #top-right 的CSS规则：

复制代码

1. #top-right {

2. font-size:14px;

3. float:right;

4. margin-top:20px;

5. width:480px;

6. }

31、将光标移到 top-right 层中，将多余的文本内容选中，然后输入（或者复制+粘贴）相应的文本内容。

32、选中 top-right 层中输入的所有文字内容，单击属性面板中的“项目列表”按钮。

33、将光标定位到 top 层的下面，然后单击“插入”面板中的“常用”选项卡中的“插入Div 标签”按钮，在弹出的“插入Div 标签”对话框中，“插入”选择“在插入点”，“ID” 设置为 main-top。设置完成后单击“确定”按钮，在页面中将插入 main-top 层。

34、切换到 ，创建一个 #main-top 的CSS规则：

复制代码

1. #main-top {

2. width:770px;

3. height:195px;

4. margin-top:5px;

5. margin-left:9px;

6. }

35、将光标移到 main-top 层中，将多余的文本内容选中，然后然后插入图像 D: 。

36、将光标定位到 main-top 层的下面，然后单击“插入”面板中的“常用”选项卡中的“插入Div 标签”按钮，在弹出的“插入Div 标签”对话框中，“插入”选择“在插入点”，“ID” 设置为 main-top。设置完成后单击“确定”按钮，在页面中将插入 main-line 层。

37、切换到 ，创建一个 #main-line 的CSS规则：

复制代码

1. #main-line {

2. width:770px;

3. height:14px;

4. margin-top:5px;

5. margin-left:9px;

6. background-image:url(../images/);

7. background-repeat:repeat-x;

8. }

38、在菜单栏中选择“文件”>“保存全部”，保存所有打开的文件。

39、切换到 ，然后按 F12 在浏览器中预览该页面。

制作页面左侧内容

六、 制作页面左侧内容

1、将光标定位到 main-line 层的下面，然后单击“插入”面板中的“常用”选项卡中的“插入Div 标签”按钮，在弹出的“插入Div 标签”对话框中，“插入”选择“在插入点”，“ID” 设置为 main-left。设置完成后单击“确定”按钮，在页面中将插入 main-left 层。

2、切换到 ，创建一个 #main-left 的CSS规则：

复制代码

1. #main-left {

2. width:540px;

3. height:400px;

4. float:left;

5. margin-left:9px;

6. margin-top:4px;

7. }

3、将光标移到 main-left 层中，将多余的文本内容选中并删除，然后单击“插入”面板中的“常用”选项卡中的“插入Div 标签”按钮，在弹出的“插入Div 标签”对话框中，“插入”选择“在插入点”，“ID” 设置为 main-left-top。设置完成后单击“确定”按钮，在页面中将插入 main-left-top 层。

4、切换到 ，创建一个 #main-left-top 的CSS规则：

复制代码

1. #main-left-top {

2. width:540px;

3. height:130px;

4. background-image:url(../images/);

5. background-repeat:no-repeat;

6. }

5、将光标移到 main-left-top 层中，将多余的文本内容选中并删除，然后单击“插入”面板中的“常用”选项卡中的“插入Div 标签”按钮，在弹出的“插入Div 标签”对话框中，“插入”选择“在插入点”，“ID” 设置为 main-left-text 。设置完成后单击“确定”按钮，在页面中将插入 main-left-text 层。

6、切换到 ，创建一个 main-left-text 的CSS规则：

复制代码

1. #main-left-text {

2. width:350px;

3. height:80px;

4. padding-left:10px;

5. margin-top:50px;

6. color:#767475;

7. line-height:20px;

8. }

7、将光标移到 main-left-text 层中，将多余的文本内容选中，然后输入（或者复制+粘贴）相应的文本内容。

8、将光标定位到 main-left-top 层的下面，然后单击“插入”面板中的“常用”选项卡中的“插入Div 标签”按钮，在弹出的“插入Div 标签”对话框中，“插入”选择“在插入点”，“ID” 设置为

main-left-left 。设置完成后单击“确定”按钮，在页面中将插入 main-left-left 层。

9、切换到 ，创建一个 #main-left-left 的CSS规则：

复制代码

1. #main-left-left {

2. width:260px;

3. height:270px;

4. float:left;

5. }

10、将光标移到 main-left-left 层中，将多余的文本内容选中并删除，然后单击“插入”面板中的“常用”选项卡中的“插入Div 标签”按钮，在弹出的“插入Div 标签”对话框中，“插入”选择“在插入点”，“ID” 设置为 main-left-left-top 。设置完成后单击“确定”按钮，在页面中将插入 main-left-left-top 层。

11、切换到 ，创建一个 main-left-left-top 的CSS规则：

复制代码

1. #main-left-left-top {

2. width:260px;

3. height:25;

4. text-align:center;

5. }

12、将光标移到 main-left-left-top 层中，将多余的文本内容选中，然后然后插入图像 D: 。

13、将光标定位到 main-left-left-top 层的下面，然后单击“插入”面板中的“常用”选项卡中的“插入Div 标签”按钮，在弹出的“插入Div 标签”对话框中，“插入”选择“在插入点”，“ID” 设置为 main-left-left-1 。设置完成后单击“确定”按钮，在页面中将插入 main-left-left-1 层。

14、切换到 ，创建一个 #main-left-left-1 的CSS规则：

复制代码

1. #main-left-left-1 {

2. width:235px;

3. height:70px;

4. margin:auto;

5. border-bottom-width:1px;

6. border-bottom-color:#e5e5e3;

7. border-bottom-style:solid;

8. }

15、将光标移到 main-left-left-1 层中，将多余的文本内容选中并删除，然后单击“插入”面板中的“常用”选项卡中的“插入Div 标签”按钮，在弹出的“插入Div 标签”对话框中，“插入”选择“在插入点”，“ID” 设置为 main-pic-1 。设置完成后单击“确定”按钮，在页面中将插入

main-pic-1 层。

16、切换到 ，创建一个 #main-pic-1 的CSS规则：

复制代码

1. #main-pic-1 {

2. width:56px;

3. height:58px;

4. float:left;

5. }

17、将光标移到 main-pic-1 层中，将多余的文本内容选中，然后然后插入图像 D: 。

18、将光标定位到 main-pic-1 层的下面，然后输入（或者复制+粘贴）相应的文本内容。

19、切换到 ，创建一个名为 .text-2 的CSS样式：

复制代码

1. .text-2 {

2. font-weight:bold;

3. color:#CC3333;

4. text-decoration:underline;

5. line-height:24px;

6. }

20、将该样式应用到对应的文本上。

21、用同样的方法依次制作 main-left-left 层中的其它部分。

22、将光标定位到 main-left-left 层的后面，然后单击“插入”面板中的“常用”选项卡中的“插

入Div 标签”按钮，在弹出的“插入Div 标签”对话框中，“插入”选择“在插入点”，“ID” 设置为 main-left-right 。设置完成后单击“确定”按钮，在页面中将插入 main-left-right 层。

23、切换到 ，创建一个 #main-left-right 的CSS规则：

复制代码

1. #main-left-right {

2. width:270px;

3. height:270px;

4. float:right;

5. }

24、将光标移到 main-left-right 层中，将多余的文本内容选中并删除，然后单击“插入”面板中的“常用”选项卡中的“插入Div 标签”按钮，在弹出的“插入Div 标签”对话框中，“插入”选择“在插入点”，“ID” 设置为 main-left-right-top 。设置完成后单击“确定”按钮，在页面中将插入 main-left-right-top 层。

25、切换到 ，创建一个 #main-left-right-top 的CSS规则：

复制代码

1. #main-left-right-top {

2. width:270px;

3. height:25px;

4. text-align:center;

5. }

26、将光标移到 main-left-right-top 层中，将多余的文本内容选中，然后然后插入图像 D: 。

27、将光标定位到 main-left-right-top 层的下面，然后单击“插入”面板中的“常用”选项卡中的“插入Div 标签”按钮，在弹出的“插入Div 标签”对话框中，“插入”选择“在插入点”，“ID”

设置为 main-left-right-1 。设置完成后单击“确定”按钮，在页面中将插入 main-left-right-1

层。

28、切换到 ，创建一个 #main-left-right-1 的CSS规则：

复制代码

1. #main-left-right-1 {

2. width:235px;

3. height:75px;

4. margin:auto;

5. color:#767475;

6. padding-top:10px;

7. border-bottom:1px #e5e5e3 solid;

8. }

29、将光标移到 main-left-right-1 层中，将多余的文本内容选中并删除，然后单击“插入”面板中的“常用”选项卡中的“插入Div 标签”按钮，在弹出的“插入Div 标签”对话框中，“插入”选择“在插入点”，“ID” 设置为 main-pic-4 。设置完成后单击“确定”按钮，在页面中将插入

main-pic-4 层。

30、切换到 ，创建一个 #main-pic-4 的CSS规则：

复制代码

1. #main-pic-4 {

2. width:50px;

3. height:50px;

4. float:left;

5. border:1px #cdcdcd solid;

6. }

31、将光标移到 main-pic-4 层中，将多余的文本内容选中，然后然后插入图像 D: 。

32、将光标定位到 main-pic-4 层的下面，然后输入（或者复制+粘贴）相应的文本内容。

33、将样式 .text-2 应用到对应的文本上。

34、用同样的方法依次制作 main-left-right 层中的其它部分。

35、在菜单栏中选择“文件”>“保存全部”，保存所有打开的文件。

36、切换到 ，然后按 F12 在浏览器中预览该页面。

制作页面右侧内容

七、 制作页面右侧内容

1、将光标定位到 main-left 层的后面，然后单击“插入”面板中的“常用”选项卡中的“插入Div 标签”按钮，在弹出的“插入Div 标签”对话框中，“插入”选择“在插入点”，“ID” 设置为 main-right 。设置完成后单击“确定”按钮，在页面中将插入 main-right 层。

2、切换到 ，创建一个 #main-right 的CSS规则：

复制代码

1. #main-right {

2. width:200px;

3. height:340px;

4. color:#767475;

5. float:left;

6. border-left:1px #e5e5e3 solid;

7. margin-top:4px;

8. background-image:url(../images/);

9. background-repeat:no-repeat;

10. background-position:left top;

11. padding-top:60px;

12. padding-left:20px;

13. }

3、将光标移到 main-right 层中，将多余的文本内容选中，然后输入（或者复制+粘贴）相应的文本内容。

4、通过属性面板中的“格式”将所有日期文本设置为“标题 1”，其它文本设置为“无”，

5、切换到 ，创建一个 #main-right h1 的CSS规则：

复制代码

1. #main-right h1 {

2. font-size:12px;

3. font-weight:bold;

4. color:#cc3333;

5. margin-top:1px;

6. }

6、将光标移到所有文本内容的后面，然后插入图像 D: 。

7、切换到 ，创建一个 #main-right img 的CSS规则：

复制代码

1. #main-right img {

2. margin-top:20px;

3. }

8、在菜单栏中选择“文件”>“保存全部”，保存所有打开的文件。

9、切换到 ，然后按 F12 在浏览器中预览该页面。

制作页面版底

八、 制作页面版底

1、将光标定位到 main-right 层的后面，然后单击“插入”面板中的“常用”选项卡中的“插入Div 标签”按钮，在弹出的“插入Div 标签”对话框中，“插入”选择“在插入点”，“ID” 设置为 bottom 。设置完成后单击“确定”按钮，在页面中将插入 bottom 层。

2、切换到 ，创建一个 #bottom 的CSS规则：

复制代码

1. #bottom {

2. width:760px;

3. height:30px;

4. clear:left;

5. margin-top:20px;

6. margin-left:9px;

7. padding-left:10px;

8. padding-top:20px;

9. background-image:url(../images/);

10. background-repeat:no-repeat;

11. }

3、将光标定位到 bottom 层的中，然后输入（或者复制+粘贴）相应的文本内容。

4、切换到 ，创建一个名为 .text-3 的CSS样式：

复制代码

1. .text-3 {

2. margin-left:240px;

3. }

5、将该样式应用到对应的文本上。

6、在菜单栏中选择“文件”>“保存全部”，保存所有打开的文件。

7、切换到 ，然后按 F12 在浏览器中预览该页面。