CSS 图文混排
Div + CSS 混合布局实例
一、准备工作目录及素材
1、在 D:盘上创建名为 myweb 的新文件夹。
2、准备所需素材。拷贝 F:\网页素材\网站重构\源文件\第4章 中的 images 文件夹到 D:\myweb 文件夹中。
3、在 D:\myweb 文件夹中新建子文件夹 style 。
二、定义站点
一、准备工作目录及素材
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 中,选择“文件”>“新建”。
下图是一张为 科技之窗 站点设计的完整的和符合要求的设计草样。作为 Web 设计人员,你需要对草样进行转换,使之最终形成可以使用的 Web 页面。
四、创建并保存新页面
建立站点并检查设计草样后,你就可以开始创建 Web 页面了。首先你将创建一个新页面,并将它保存到你的 Web 站点的本地根文件夹 D:\myweb 中。该页面最终将成为 远航 Wireless Services 站点的主页。
1、在 Dreamweaver cs4 中,选择“文件”>“新建”。
2、在“新建文档”对话框的左侧列表中选择“空白页”,在“页面类型”列表中选择“HTML”,在“布局”列表中选择“无”,然后单击“创建”按钮,从而创建一个新的 HTML 文档。
3、在新文档顶部的“文档标题”文本框中,输入“科技之窗欢迎您!” 。这就是页面的标题。站点访问者在 Web 浏览器中查看页面时将在浏览器窗口的标题栏中看到此标题。
4、选择“文件”>“另存为”。
5、在“另存为”对话框中,浏览至定义为站点的本地根文件夹的 D:\myweb 文件夹并打开该文件夹。
6、在“文件名”文本框中输入 index.html,然后单击“保存”。 文件名即出现在应用程序窗口顶部的标题栏中。
3、在新文档顶部的“文档标题”文本框中,输入“科技之窗欢迎您!” 。这就是页面的标题。站点访问者在 Web 浏览器中查看页面时将在浏览器窗口的标题栏中看到此标题。
4、选择“文件”>“另存为”。
5、在“另存为”对话框中,浏览至定义为站点的本地根文件夹的 D:\myweb 文件夹并打开该文件夹。
6、在“文件名”文本框中输入 index.html,然后单击“保存”。 文件名即出现在应用程序窗口顶部的标题栏中。
制作页面布局及顶部内容
五、 制作页面布局及顶部内容
1、在 Dreamweaver cs4 中,选择“文件”>“新建”。
2、在“新建文档”对话框的左侧列表中选择“空白页”,在“页面类型”列表中选择“CSS”,然后单击“创建”按钮,从而创建一个新的 CSS 文档。
3、选择“文件”>“另存为”。
4、在“另存为”对话框中,浏览至定义为站点的本地根文件夹的 D:\myweb 文件夹并打开该文件夹,双击打开 style 子文件夹。
5、在“文件名”文本框中输入 css.css,然后单击“保存”。
6、在 css.css css最新创建一个 * 的CSS规则和一个 body 的CSS规则:
1、在 Dreamweaver cs4 中,选择“文件”>“新建”。
2、在“新建文档”对话框的左侧列表中选择“空白页”,在“页面类型”列表中选择“CSS”,然后单击“创建”按钮,从而创建一个新的 CSS 文档。
3、选择“文件”>“另存为”。
4、在“另存为”对话框中,浏览至定义为站点的本地根文件夹的 D:\myweb 文件夹并打开该文件夹,双击打开 style 子文件夹。
5、在“文件名”文本框中输入 css.css,然后单击“保存”。
6、在 css.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; 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规则:
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论