网页制作三合一实用教程 教学课件 作者 王爱赪 杜金 郭海 第一章.ppt

《网页制作三合一实用教程 教学课件 作者 王爱赪 杜金 郭海 第一章.ppt》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、第1章在网页中插入文本和图像本章要点1.1DreamweaverMX2004的工作界面和基本操作1.2建立本地站点和制作第1个网页1.3建立本地站点和制作第1个网页1.4“星座图片浏览”网1.1DreamweaverMX2004的工作界面和基本操作1.1DreamweaverMX2004的工作界面和基本操作1.1.1工作界面1．选择工作界面的类型第一次运行DreamweaverMX2004后，会弹出“工作区设置”对话框，如图1-1-1所示，可以看出，DreamweaverMX2004提供了两种工作区布局（也叫工作界面）。选中某一种工作

2、区名称的单选钮，再单击“确定”按钮，即可进入相应的工作区。如果要更改工作区设置，可以进行如下的操作。（1）单击“编辑”→“首选参数”菜单命令，弹出“首选参数”对话框。单击该对话框左边“分类”栏中的“常规”选项。（2）再单击“首选参数”对话框内右边栏中的“更改工作区”按钮，即可弹出如图1-1-1所示的“工作区设置”对话框。此时可以重选DreamweaverMX2004的工作区。1.1DreamweaverMX2004的工作界面和基本操作图1-1-1“工作区设置”对话框1.1DreamweaverMX2004的工作界面和基本操作图1-1-

3、1“工作区设置”对话框1.1DreamweaverMX2004的工作界面和基本操作图1-1-2采用“设计者”风格的DreamweaverMX2004工作界面1.1DreamweaverMX2004的工作界面和基本操作1.1.2文档窗口文档窗口用来显示和编辑当前的页面文档。在文档窗口最大化时，其标签顶部显示文档的名称。文档工具栏和标准工具栏在文档窗口内；如果文档窗口处于还原状态，则文档工具栏和标准工具栏在文档窗口外，其标题栏内显示网页的标题和网页文档所在的文件夹名称和网页文档的名称。文档窗口的底部有状态栏，可以提供多种信息。1．使用“代

4、码”视图窗口单击文档工具栏中的“显示代码视图”按钮，切换到“代码”视图窗口。“代码”视图窗口是一种用于编写和编辑HTML、JavaScript、服务器语言代码（如ASP或ColdFusion标记语言）以及任何其他类型代码的手工编码环境。读者还可以在代码窗口内，输入用HTML编写的网页，再保存该网页，然后按F12键，用浏览器浏览它的内容。还可以在“代码”窗口内修改源代码，同时观察页面的变化。利用“查看”→“代码视图选项”菜单下的各菜单命令，可改变代码的显示状态。1.1DreamweaverMX2004的工作界面和基本操作2．使用“设计”

5、视图窗口单击标准工具栏内的“显示设计视图”按钮，即可进入“设计”视图窗口。“设计”视图窗口是一种用于可视化页面布局、可视化编辑和快速开发的设计环境。在该视图中，显示的效果与在网络浏览器中浏览时非常相似，可以直接进行编辑。3．使用“代码和设计”视图窗口单击文档工具栏内的“显示代码视图和设计视图”按钮，即可进入“代码和设计”视图窗口。“代码和设计”视图窗口可以在单个窗口中同时看到同一文档的“代码”视图和“设计”视图，如图1-1-3所示。而且在单击选中“设计”视图窗口中的对象时，“代码”视图窗口内的光标也会定位在相应的代码处；如果在“设计”

6、视图窗口内移动光标位置，则“代码”视图窗口中的内容也会随之变化；如果用鼠标拖曳选中“设计”视图窗口中的内容，则“代码”视图窗口内也会选中相应的代码；反之也会获得相应的效果。总之，这两个窗口内代码与设计对象之间的对应性非常好，这有利于修改HTML代码。1.1DreamweaverMX2004的工作界面和基本操作图1-1-3“代码”视图窗口与“设计”视图窗口同时显示1.1DreamweaverMX2004的工作界面和基本操作如果要切换文档窗口的视图，可单击“查看”→“代码”（或“设计”、“代码和设计”）菜单命令或按Ctrl+-键。4．状态

7、栏DreamweaverMX2004的状态栏位于文档窗口的底部，如图1-1-4所示。（1）标签选择器。HTML标签选择器在状态栏的最左边，它以HTML标记显示方式来表示光标当前位置处的网页对象信息。如果光标当前位置处有多种信息，则可以显示出多个HTML标记，不同的HTML标记表示不同的HTML元素信息。例如，表示文档主体，表示图像，