Div + CSS 布局简单实例.doc

Div+CSS布局简单实例
一、准备工作目录及素材1、在D：盘上创建名为myweb的新文件夹。2、准备所需素材。拷贝F:\网页素材\网站重构\源文件\第2章中的images文件夹到D:\myweb文件夹中。3、在D:\myweb文件夹中新建子文件夹style。二、定义站点1、启动Dreamweavercs4，选择“站点”>“管理站点”。2、在弹出的“管理站点”对话框中单击“新建”按钮，然后选择“站点”。3、在弹出的“站点定义”对话框中，如果显示向导（“基本”选项卡），则单击“高级”选项卡，然后从“分类”列表中选择“本地信息”（它应当是默认选项）。4、在“站点名称”文本框中，输入Cafe香浓作为站点名称。5、在“本地根文件夹”文本框中，指定D:\myweb文件夹。你可以单击文件夹图标来浏览并选择该文件夹，或者在“本地根文件夹”文本框中输入路径。6、在“默认图像文件夹”文本框中，指定D:\myweb文件夹中已有的images文件夹。你可以单击文件夹图标来浏览并选择该文件夹，或者在“默认图像文件夹”文本框中输入路径。7、从“分类”列表中选择“远程信息”，“访问”选：“FTP”并填写好相关信息。8、从“分类”列表中选择“测试服务器”，“访问”选：“FTP”并填写好相关信息，“URL前缀”须根据实际情况做相应修改。9、从“分类”列表中选择“本地信息”，“HTTP地址”须根据实际情况做相应修改。10、单击“确定”。随即出现“管理站点”对话框，显示您的新站点。11、单击“完成”关闭“管理站点”对话框。此时“文件”面板显示当前站点的新本地根文件夹。“文件”面板中的文件列表将充当文件管理器，允许你复制、粘贴、删除、移动和打开文件，就象在计算机桌面上一样。三、了解你的任务下图是一张为Cafe香浓站点设计的完整的和符合要求的设计草样。作为Web设计人员，你需要对草样进行转换，使之最终形成可以使用的Web页面。四、创建并保存新页面建立站点并检查设计草样后，你就可以开始创建Web页面了。首先你将创建一个新页面，并将它保存到你的Web站点的本地根文件夹D:\myweb中。该页面最终将成为Cafe香浓站点的主页。1、在Dreamweavercs4中，选择“文件”>“新建”。2、在“新建文档”对话框的左侧列表中选择“空白页”，在“页面类型”列表中选择“HTML”，在“布局”列表中选择“无”，然后单击“创建”按钮，从而创建一个新的HTML文档。3、在新文档顶部的“文档标题”文本框中，键入Cafe香浓欢迎您的光临！。这就是页面的标题。站点访问者在Web浏览器中查看页面时将在浏览器窗口的标题栏中看到此标题。4、选择“文件”>“另存为”。5、在“另存为”对话框中，浏览至定义为站点的本地根文件夹的D:\myweb文件夹并打开该文件夹。6、在“文件名”文本框中输入index.html，然后单击“保存”。文件名即出现在应用程序窗口顶部的标题栏中。

五、制作页面布局1、在设计视图中单击，然后单击“插入”面板中的“常用”选项卡中的“插入Div标签”按钮。2、在弹出的“插入Div标签”对话框中，“插入”选择“在插入点”，“ID”设置为pagebox。3、在“插入Div标签”对话框中单击“确定”按钮，在页面中将插入pagebox层。4、再次单击“插入”面板中的“常用”选项卡中的“插入Div标签”按钮，在弹出的“插入Div标签”对话框中，“插入”选择“在结束标签之前”，Div容器选择“<divid="pagebox”>"，“ID”设置为header。设置完成后单击“确定”按钮，在页面中将插入header层。5、再次单击“插入”面板中的“常用”选项卡中的“插入Div标签”按钮，在弹出的“插入Div标签”对话框中，“插入”选择“在标签之后”，Div容器选择“<divid="header”>"，“ID”设置为main。设置完成后单击“确定”按钮，在页面中将插入main层。6、再次单击“插入”面板中的“常用”选项卡中的“插入Div标签”按钮，在弹出的“插入Div标签”对话框中，“插入”选择“在开始标签之后”，Div容器选择“<divid="main”>"，“ID”设置为banner。设置完成后单击“确定”按钮，在页面中将插入banner层。7、再次单击“插入”面板中的“常用”选项卡中的“插入Div标签”按钮，在弹出的“插入Div标签”对话框中，“插入”选择“在标签之后”，Div容器选择“<divid="banner”>"，“ID”设置为left。设置完成后单击“确定”按钮，在页面中将插入left层。8、再次单击“插入”面板中的“常用”选项卡中的“插入Div标签”按钮，在弹出的“插入Div标签”对话框中，“插入”选择“在标签之后”，Div容器选择“<divid="left”>"，“ID”