下载文档原格式
浅谈Dreamweaver CS6中网页布局的三种方式作者：李爱红来源：《电脑知识与技术》2018年第22期摘要：网页设计的关键之一在于网页的布局，好的布局不仅能体现设计者的奇思妙想，更能让浏览者眼前一亮，从而提高网页的访问量。
Dreamweaver CS6中提供了多种网页布局的方法，其中以表格、框架及AP Div为最常用的三种方式。
该文分析说明了目前常用的三种布局方式：表格、框架和AP Div方式，并对三种方式进行了详细的比较。
关键词：Dreamweaver CS6；表格；框架；AP Div中图分类号：TP393 文献标识码：A 文章编号：1009-3044（2018）22-0288-021 网页布局的基础知识在工作、学习和娱乐中，我们上网时会发现网页具有感染力，有的网页给人干净整洁的感觉，有的网页优雅高贵，有的网页给人以爽朗、清凉的感觉，还有的网页使用植物的色彩，使人想到健康、和谐。
这些是由网站的风格决定的。
1.1 网站的风格在对网页插入各种对象、修饰效果前，一定要确定网站的风格和网页的布局。
也就是说，要先确定网站的总体风格，并对网页的布局进行规划，这样才能保证网站中各网页的统一。
1.2 网页的布局在确定网站的风格后，要对网站的总体布局进行规划调整，也就是网页上的网站标志、导航栏、菜单栏等元素的位置确定，不同风格网页的網页元素所处的位置也不同。
1.3 配色方案网页的布局没有优劣之分，要与网站的风格相适应，就必须注意整个站点的平衡性、对称性、对比性、疏密度、反复性、韵律感和颜色搭配等。
根据色彩要素，结合色彩的感觉，应用色彩的搭配原则，展现不同网站类型的配色。
2 常用的网页布局方式在网页布局中有三种方法，一种是利用表格进行网页布局排版，一种是利用框架进行网页布局排版，还有一种是使用AP Div排版布局页面。
下面就对常用的三种方法进行分析和说明。
2.1 表格排版网页布局表格是网页设计中常用的方法，在表格中可以定位文字、图像、动画等网页元素，还可以对数据进行排列，在内容和形式上使网页整体条理清晰。
XXX中等职业学校教案
适用年级： XXX 课程名称：网页设计与制作 Dreamweaver CS6 任课教师： XXX
XXXX学校计算机专业组制
第1-4课时讲授2学时实践2学时
第5-10课时讲授2学时实践4学时
第11-16课时讲授2学时实践4学时
第16-21课时讲授2学时实践4学时
第22--27课时讲授2学时实践4学时
第28-37课时讲授4学时实践6学时
第38--41课时讲授2学时实践2学时
第41--50课时讲授4学时实践6学时
第51--56课时讲授2学时实践4学时
第57--60课时讲授2学时实践2学时
第61--68课时讲授4学时实践4学时
第69--74课时讲授2学时实践4学时
第75--80课时讲授2学时实践4学时
第81--90课时讲授4学时实践6学时
第91--94课时讲授2学时实践2学时。
DreamweaverCS6教程第一节Dreamweaver CS6 软件简介和安装1、Dreamweaver CS6是由美国Adobe公司最新开发的一款网页设计、网站管理为一体的专业软件2、为了保护能够正常安装，安装时，请断开网络。
第二节Dreamweaver CS6软件界面和简介一、软件界面组成1、菜单栏2、工作区3、属性栏4、浮动面板（文件、资源、CSS样式、行为等）二、界面的切换：为满足不同开发人员的需求三、界面的恢复：窗口——工作区——重置设计器四、插入面板的调用第三节网页相关知识1、什么是网页（网页概念）在互联网上基于HTTP协议传播信息的页面2、什么是网站反应同一个主题的多个网页集合3、网页内容的组成（网页元素）（1）文字（2）图片（jpg,gif,png）（3）动画（swf,gif）（4）多媒体（5）超链接（6）表单（7）网页特效（8）其他元素第四节网页制作方法与站点建立1、网页的制作方法（1）代码发：html（2）软件制作：Dreamweaver、frontpage2、制作网站前准备工作，建立站点。
3、站点：用来存放网站中所有元素的文件夹，为了制作方便需要将这个文件夹和制作软件相关连接。
4、站点的建立（连接）（1）站点——建立（2）文件面板（3）应用程序栏（窗口——应用程序栏）5、站点的分类（按照网站的位置）（1）本地站点（2）远程站点第五节规划本地站点目录结构1、规划本地站点目录结构（1）images(图片)（2）swf（动画）（3）css(CSS样式)（4）script(存放网页特效)（5）other(其他)2、网站主页名称（1）index.htm（2）index.html（3）default.htm（4）default.html注：主页必须放在网站的根目录下面，同时名称也有特殊的要求第六节网页中文字的输入1、网页的四个视图（1）设计视图（2）代码视图（3）拆分视图（4）实时视图3、网页中的文字（1）文字直接输入（2）回车表示换段（3）Shift+回车：表示换行（4）输入空格时要在全角输入法状态下输入（5）特使字符插入：“插入——html——特殊字符”（6）文字也可以从网站中复制，但是在复制时需要将网页中文字的格式去掉（注：如何去除复制来的文字格式，只需要将文字粘贴到记事本，然后从记事本中在复制文字就可以了）4、预览网页：文件——在浏览器中预览——Iexplore(快捷键：F12)第七节页面属性1、页面属性（1）修改——页面属性（2）或通过属性栏2、属性（1）左边距、右边距、上边距、下边距（2）文字字体、大小、颜色。
第1章 Dreamweaver CS6简介Dreamweaver CS6是一款功能强大的可视化的网页编辑与管理软件。
利用它，不仅可以轻松地创建跨平台和跨浏览器的页面，也可以直接创建具有动态效果的网页而不用自己编写源代码。
Dreamweaver CS6 最主要的优势在于能够进行多任务工作，并且在操作方法、界面风格方面更加人性化。
用户可以根据自己的喜好和工作方式，重新排列面板和面板组，自定义工作区。
本章主要容●Dreamweaver CS6的新增功能。
●Dreamweaver CS6的安装、删除和启动。
●Dreamweaver CS6的工作界面。
●Dreamweaver CS6的一般操作。
本章重点●Dreamweaver CS6常用面板的使用方法。
●Dreamweaver CS6的文件操作。
1.1 Dreamweaver CS6概述Dreamweaver CS6 是世界顶级软件厂商Adobe推出的一套拥有可视化编辑界面，用于制作并编辑和移动应用程序的网页设计软件。
在业界通常将Dreamweaver、Flash、Fireworks称为“网页三剑客”。
由于它支持代码、拆分、设计、实时视图等多种方式来创作、编写和修改网页，因此对于初级人员，无须编写任何代码就能快速创建Web页面。
其成熟的代码编辑工具更适用于Web开发高级人员的创作。
CS6新版本使用了自适应网格版面创建页面，在发布前可使用多屏幕预览审阅设计,大大提高了用户的工作效率，而改善的FTP性能可更高效地传输大型文件。
“实时视图”和“多屏幕预览”面板可呈现HTML5 代码，用户能更方便地检查自己的工作。
1.2 Dreamweaver CS6的新增功能相对于以前的版本，Dreamweaver CS6的功能主要在以下方面进行了增强。
1. 可响应的自适应网格版面使用响应迅速的 CSS 自适应网格版面，可以创建跨平台和跨浏览器的兼容网页设计。
利用简洁、业界标准的代码可为各种不同设备和计算机开发项目，提高工作效率。
