使用框架和DivCSS布局网页DreamweaverFlashPhotoshop网页制作从入门到精通（CS6版） ppt课件.pptx

;本章导读;10.1 创建框架网页;框架集是 HTML 文件，它定义一组框架的布局和属性，包括框架的数目、框架的大小、位置和最初每个框架中显示页面的 URL。如图所示。;10.1.2 创建框架集;选择【插入】/【HTML】/【框架】命令，并在子菜单中选择项。;10.1.4 自定义框架集;在“框架”面板或“文档”窗口中选择框架集，如左图所示，选择【文件】/【保存框架集】命令，打开 “另存为”对话框，选择保存目录和输入文件名，单击“保存”按钮保存框架集，如右图所示。;从入门到精通;10.2.1 设置框架集的属性;在“框架”面板中单击框架选择框架后，在“属性”面板中可以设置框架的属性，如框架的名称、框架源文件、框架的边距，框架的大小以及边框等特性。框架“属性”面板如图所示。;使用框架可以通过超级链接等方式改变框架中的网页文档。单击超级链接后，可在同一个框架中打开这些网页。;从入??到精通;10.3.1 CSS盒子模型;10.3.2 CSS+Div定位;在CSS的定义中，有的html标签被浏览器当成一个块来显示，比如div、table、p、ul等等，被称之为块元素；有的html标签被浏览器显示在文本行之类，如a、span、font等等，称之为行内元素。这里所说的块模式就是前面介绍的盒子模式。;2．文档流模型;在文档流中，每个块元素都会被安排到流中的一个位置，可以通过CSS中的定位属性来重新安排它的位置。定位分为相对定位和绝对定位，相对定位是相对于该块元素在文档流中的位置。;float可以达到这样一个效果，就是本来应该一行一个的块元素，如果定义了float属性，则只要行的空间足够，它会移到别的float元素的后面，不再单独占用一行，如图所示。;10.3.3 Div＋CSS布局实战;从入门到精通;使用框架结构制作一个“OA后台”主页面，最终效果如图所示。;办公自动化（OA）是面向组织的日常运作和管理，员工及管理者使用频率最高的应用系统，自1985年国内召开第一次办公自动化规划会议以来，OA在应用内容的深度与广度、IT技术运用等方面都有了新的变化和发展，并成为组织不可缺的核心应用系统。 随着信息化建设受到越来越多企业的重视，OA办公系统的应用也日渐普及起来。同时，用户对OA办公系统的要求也在不断提升。如何让OA办公系统满足广大用户的需求，这是一个需要所有厂商共同思考的问题。OA办公系统的设计原则由此也愈受关注。 OA后台操作界面大多都采用框架结构进行排版布局，这样做便于用户友好的操作和灵和的页面设计。 ;2．操作思路;从入门到精通;“网页菜单”是网页中最为重要的部分，它包含了网站的所有版块和主题链接，是用户操作的重要入口。 本例使用列表方式将菜单命令放在ul标签中，然后使用CSS定位Div的方式将竖排的列表改变为横排，这是目前最为流行的网页菜单布局方式。;;从入门到精通;操作思路;从入门到精通;从入门到精通