Dreanweaver MX网页设计基础.pptVIP

Dreanweaver MX网页设计基础 主要内容： 编辑工具Dreamweaver MX的介绍、Dreamweaver MX站点的创立、表的使用、文字、图象等的输入、主页的设计、利用表格进行页面设计。 练习使用表格对页面元素进行定位，表的嵌套作用。相应HTML代码的熟悉，再利用表来对整个页面进行定位。 一、Dreamweaver基础知识 1. 菜单栏 2. 插入栏 单击“插入”栏的下拉按钮，出现菜单方式的选项卡。 可以根据插入对象的不同选择不同类别的选项卡，不同选项卡包含创建不同类型对象的按钮。单击“显示为制表符”可转为常规样式的“插入”栏。图为“插入”栏的两种显示方式： 3. 文档工具栏 文档工具栏如右图所示， 包含按钮和弹出式菜单， 提供各种“文档”常用视图、各种查看选项和一些普通操作。文档工具栏内容从左到右依次为： 代码视图：以代码的形式显示页面，方便文档代码编写。 拆分视图：同时显示代码和设计视图，可同时看到两种效 果。 设计视图：以设计形式显示视图，可看到所见即所得的网页 效果。 标题： 可在标题文本框中为文档输入或修改标题。 服务器调试： 显示一个调试现行浏览器的报告。 文件管理： 显示“文件管理”弹出式菜单。 在浏览器中预览/调试：随时预览网页在浏览器中的效果。 4. 文档窗口 文档窗口用于显示文档，有“设计视图”、“代码视图”、“拆分试图”三种显示方式。 设计视图：用于可视化页面布局、可视化编辑和应用程序开发的设计环境，此视图类似在浏览器中查看页面。 代码视图：用于编写或编辑html、JavaScript、服务器语言代码、其他类型代码的编码环境。 拆分视图：可以在单个窗口中同时看到同一文档的“代码”视图和“设计”视图。 5.状态栏 状态栏的左边是HTML元素信息条，它以HTML的方式显示光标当前位置的网页元素信息。可以在此选中HTML标签，所以有的教科书把称为HTML标签选择器。 567×289表示窗口大小信息栏，它可以显示和调节窗口的大小。 1K/1秒表示当前文件的大小和下载的时间（或者是网页的连接速度）。 5. 属性面板及面板组 6.属性面板及面板组 7. 创建及设计页面—创建文档 在DreamweaverMX界面的中间空白处就是网页编辑区，或者称为文档窗口，它显示当前创建和编辑的文档。该窗口基本可以显示页面在浏览器中的最终显示效果，其中有些元素只能在浏览器中才能正确显示，如一些图片或Flash动画等。 运行DreamweaverMX后会自动新建一个空白的文档窗口，用户就可以在其中进行各种输入、设计、编辑操作。 7. 创建及设计页面—创建文档 创建网页文件 创建空白网页可以用两种方法： 方法1：在起始页“创建新项目”列表中单击“HTML”，建立一个空白页。 方法2：在工作窗口打开“文件”菜单→选“新建”→“类别”列表中选“基本页”→“基本页”列表中选“HTML” →单击“创建”，建立一个空白页。 利用Dreamweaver提供的示例文件创建网页 “文件”菜单→“新建”→在“类别”列表中选一种实例文档（如页面设计CSS）→在“页面设计CSS”列表中选一种网页样式→单击“创建”，网页中将显示文字和页面布局，修改其中的文字及图像，快速创建所需网页。 7. 创建及设计页面—创建文档 保存新建立的网页 “文件”菜单→“保存”→ 指定保存位置、文件名及 保存类型→单击“保存”。 设置文档属性 “修改”菜单→“页面属 性”，打开“页面属性”对话 框，如图所示。通过“页面 属性”对话框可以对页面基 本属性进行设置 。 8. 创建及设计页面——文本输入 使用Dreamweaver输入文本及对文本进行编辑的方法与我们学过的字处理软件的操作方法非常类似，Dreamweaver系统也提供非常灵活、方便快捷的菜单、命令对文字进行编辑处理。其操作方法非常简单，很容易掌握。（举例演示说明） 注意： 1、在Dreamweaver中的“空格”是中文全角下按“空格”键。 2、换段直接按回车键。（出现空一行） 3、段落中的换行按Shift+Enter。（不空一行） 8. 创建及设计页面—设置文本 文本是网页元素中主要部分。 输入文本