Dreamweaver网页设计项目教程王雪松项目二任务3搭建网站框架1章节.pptVIP

* * * Dreamweaver网页设计项目教程 机械工业出版社 任务3搭建网站框架1（建议2学时） 01 任务分析 02 任务实施 03 任务提示 任务分析 网站主体框架布局划分示意图 任务实施 1．选择站点 2．设置页面标题 3．链接CSS文件 打开Adobe Dreamweaver，选择“shanzai”站点，并打开index.html文件 在工作区单击“拆分”视图模式，这样可以同时看到代码窗口和设计视图窗口，有利于熟悉代码。设置页面的标题为“ShanZai手机 引领时尚” 。 打开CSS面板，选择面板下方的“附加样式表”图标并在弹出的“链接外部样式表”对话框中进行设置 。 任务实施 4．搭建首页布局框架 打开插入面板，调出布局选项卡 ， （1）插入第一个DIV 1）首先将光标定位在“设计”窗口，选择“插入Div标签”选项 2）在弹出的“插入Div标签”中修改“ID”为“container”。“ID”作为一个“Div”的唯一识别，用以识别其身份，在一个网页内，同一“ID”的对象只能引用一次。 （2）网页头部DIV框架创建 1）插入DIV id=“header” 2）插入网页标识DIV标签，id=“logo”，位置在“header”内部。 3）插入网页快速搜索DIV，id=“search”，位置在“header”内部，“logo”的右侧 任务实施 4．搭建首页布局框架 （3）插入网页导航DIV 网页导航DIV的位置在“header”下部 1）插入网页导航栏DIV，id=“nav”，位置在“header”下面 2）插入网页主导航栏DIV，id=“nav_main”，位置在“nav”内部 3）插入网页子导航栏DIV“nav_son”，“nav_main”的下部 （4）插入网页主内容区 网页主内容区DIV“maincontent”的位置在“nav”下部 （5）插入网页底部 网页底部DIV“footer”的位置在“maincontent”下部 （6）首页主要布局完毕 任务提示 一般HTML中的标签都是成对出现的，如div/div成对的标签之间可以有嵌套关系，但绝不能交叉 为了便于阅读代码，我们可以删除代码中不必要的文字说明，并利用左侧工具栏中的“缩进”按钮，“凸出”按钮，对代码进行重排 Thank you! 谢谢观赏 在线教务辅导网： 更多课程配套课件资源请访问在线教务辅导网 馋死 PPT研究院 POWERPOINT ACADEMY * * * * * * * * *