《CSS图文混排.doc》由会员分享，可在线阅读，更多相关《CSS图文混排.doc（19页珍藏版）》请在金锄头文库上搜索。
1、CSS图文混排Div + CSS混合布局实例一、准备工作目录及素材1、在 D：盘上创建名为 myweb的新文件夹。2、准备所需素材。拷贝 F:网页素材网站重构源文件第4章 中的 images 文件夹到 D:myweb文件夹中。3、在 D:myweb文件夹中新建子文件夹 style 。 二、定义站点1、启动 Dreamweaver cs4，选择“站点 ”“管理站点”。 2、在弹出的“管理站点”对话框中单击“新建”按钮，然后选择“站点”。3、在弹出的“站点定义”对话框中，如果显示向导（“基本”选项卡），则单击“高级”选项卡，然后从“分类”列表中选择“本地信息”（它应当是默认选项）。 4、在“站点名
2、称”文本框中，输入 科技之窗 作为站点名称。 5、在“本地根文件夹”文本框中，指定 D:myweb 文件夹。你可以单击文件夹图标来浏览并选择该文件夹，或者在“本地根文件夹”文本框中输入路径。 6、在“默认图像文件夹”文本框中，指定 D:myweb 文件夹中已有的 images 文件夹。你可以单击文件夹图标来浏览并选择该文件夹，或者在“默认图像文件夹”文本框中输入路径。7、从“分类”列表中选择“远程信息”，“访问”选：“FTP” 并填写好相关信息。8、从“分类”列表中选择“测试服务器”，“访问”选：“FTP” 并填写好相关信息，“URL前缀”须根据实际情况做相应修改。9、从“分类”列表中选择“本
3、地信息”，“HTTP 地址”须根据实际情况做相应修改。10、单击“确定”。随即出现“管理站点”对话框，显示您的新站点。 11、单击“完成”关闭“管理站点”对话框。此时“文件”面板显示当前站点的新本地根文件夹。“文件”面板中的文件列表将充当文件管理器，允许你复制、粘贴、删除、移动和打开文件，就象在计算机桌面上一样。三、了解你的任务下图是一张为 科技之窗 站点设计的完整的和符合要求的设计草样。作为 Web 设计人员，你需要对草样进行转换，使之最终形成可以使用的 Web 页面。四、创建并保存新页面 建立站点并检查设计草样后，你就可以开始创建 Web 页面了。首先你将创建一个新页面，并将它保存到你的
4、Web 站点的本地根文件夹 D:myweb中。该页面最终将成为 远航 Wireless Services站点的主页。1、在 Dreamweaver cs4 中，选择“文件”“新建”。 2、在“新建文档”对话框的左侧列表中选择“空白页”，在“页面类型”列表中选择“HTML”，在“布局”列表中选择“无”，然后单击“创建”按钮，从而创建一个新的 HTML 文档。 3、在新文档顶部的“文档标题”文本框中，输入“科技之窗欢迎您！” 。这就是页面的标题。站点访问者在 Web 浏览器中查看页面时将在浏览器窗口的标题栏中看到此标题。 4、选择“文件”“另存为”。 5、在“另存为”对话框中，浏览至定义为站点的本
5、地根文件夹的D:myweb文件夹并打开该文件夹。 6、在“文件名”文本框中输入 index.html，然后单击“保存”。 文件名即出现在应用程序窗口顶部的标题栏中。制作页面布局及顶部内容五、 制作页面布局及顶部内容1、在 Dreamweaver cs4 中，选择“文件”“新建”。 2、在“新建文档”对话框的左侧列表中选择“空白页”，在“页面类型”列表中选择“CSS”，然后单击“创建”按钮，从而创建一个新的 CSS 文档。 3、选择“文件”“另存为”。 4、在“另存为”对话框中，浏览至定义为站点的本地根文件夹的D:myweb文件夹并打开该文件夹，双击打开 style 子文件夹。 5、在“文件名”
6、文本框中输入 css.css，然后单击“保存”。 6、在 css.css 创建一个 *的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;
7、 13. text-align: center; 14. 7、按快捷键 Ctrl+S 保存好该 CSS 文件。8、再次在菜单栏中选择“文件”“新建”。 9、在“新建文档”对话框的左侧列表中选择“空白页”，在“页面类型”列表中选择“CSS”，然后单击“创建”按钮，从而创建一个新的 CSS 文档。 10、选择“文件”“另存为”。 11、在“另存为”对话框中，定位到文件夹D:myweb style。 12、在“文件名”文本框中输入 Div.css，然后单击“保存”。 13、在 Div.css 创建一个 pagebox 的CSS规则：复制代码 1. #pagebox 2. background-ima
8、ge: url(./images/4-1.gif); 3. background-repeat: repeat-y; 4. height: 740px; 5. width: 788px; 6. margin: auto; 7. text-align: left; 8. 14、按快捷键 Ctrl+S 保存好该 CSS 文件。15、选中 index.html ，然后单击“CSS样式”面板下部的“附加样式表”按钮。16、在弹出的“链接外部样式表”对话框中，单击“浏览”按钮，在随后弹出的“选择样式表文件”对话框中选择 D:myweb style 中的 css.css ，然后单击“确定”按钮，将 css
9、.css链接到 index.html 。17、再次单击“CSS样式”面板下部的“附加样式表”按钮。18、在弹出的“链接外部样式表”对话框中，单击“浏览”按钮，在随后弹出的“选择样式表文件”对话框中选择 D:myweb style 中的 Div.css ，然后单击“确定”按钮，将 Div.css也链接到 index.html 。19、单击“新建CSS规则”对话框中的“确定”按钮，然后在弹出的“将样式表文件另存为”对话框中，将新建的样式表文件保存为 D:mywebstylecss.css .20、在设计视图中单击，然后单击“插入”面板中的“常用”选项卡中的“插入 Div 标签”按钮。21、在弹出的
10、“插入 Div 标签”对话框中，“插入”选择“在插入点”，“ID” 设置为 pagebox 。22、在“插入 Div 标签”对话框中单击“确定”按钮，在页面中将插入 pagebox层。23、删除pagebox层中多余的文字，然后单击“插入”面板中的“常用”选项卡中的“插入 Div 标签”按钮，在弹出的“插入 Div 标签”对话框中，“插入”选择“在插入点”，“ID” 设置为 header 。设置完成后单击“确定”按钮，在页面中将插入 header层。24、单击“CSS样式”面板下部的“新建CSS规则”按钮。在弹出的“新建CSS规则”对话框中，在“选择器类型”列表框中选择“ID”，在“选择器名称
11、”中输入 #top，在“规则定义”中选择“Div.css”。25、单击“确定”按钮，然后在弹出的“CSS 规则定义”对话框中单击“分类”列表中的“方框”选项，然后在弹出的选项卡中设置“宽”为770px ，“高”为 63px ，在“边界（Margin）”选项区中分别设置“上”、“下”均为0，“右”、“左”均为auto 。26、单击“分类”列表中的“背景”选项，然后在弹出的选项卡中设置“背景图像”为 D:mywebimages4-2.gif，“重复”选择“不重复”。27、单击“确定”按钮，完成该 CSS 规则的定义。注：以上四步完全可以不用，只需切换到 Div.css 并写入如下代码的方式即可：复
12、制代码 1. #top 2. width:770px; 3. height:62px; 4. margin:auto; 5. background-image:url(./images/4-2.gif); 6. background-repeat:no-repeat; 7. 28、切换到 css.css ，创建一个 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.
13、text-decoration:none; 11. color:#000000; 12. 29、删除 top层中多余的文字，然后单击“插入”面板中的“常用”选项卡中的“插入Div 标签”按钮，在弹出的“插入 Div 标签”对话框中，“插入”选择“在插入点”，“ID” 设置为 top-right 。设置完成后单击“确定”按钮，在页面中将插入 top-right 层。30、切换到 Div.css ，创建一个 #top-right 的CSS规则：复制代码 1. #top-right 2. font-size:14px; 3. float:right; 4. margin-top:20px; 5. w
14、idth:480px; 6. 31、将光标移到 top-right层中，将多余的文本内容选中，然后输入（或者复制+粘贴）相应的文本内容。32、选中 top-right 层中输入的所有文字内容，单击属性面板中的“项目列表”按钮。33、将光标定位到 top 层的下面，然后单击“插入”面板中的“常用”选项卡中的“插入Div 标签”按钮，在弹出的“插入Div 标签”对话框中，“插入”选择“在插入点”，“ID” 设置为 main-top。设置完成后单击“确定”按钮，在页面中将插入 main-top 层。34、切换到 Div.css ，创建一个 #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:mywebimages4-3.gif 。36、将光标定位到 main-top 层的下面，然后单击“插入”面板中的“常用”选项卡中的“插入Div 标签”按钮
