第2章-Dreamweaver网页制作基础

第2章DreamweaverMX2004网页制作基础主讲:李丽萍网页制作基础2.1DreamweaverMX2004工作区2.2规划和设置站点2.3网页文字与图像的编辑2.4巴黎文化之旅—首页制作2.5插入超链接2.6网络多媒体的应用工作区2.1.1选择工作区布局DreamweaverMX2004提供了两种可供选择的工作区布局：设计者布局和代码编写者布局。在Windows中首次启动DreamweaverMX2004时，会出现一个对话框让用户选择一种工作区布局。对话框如下图：1.设计者工作区(建议)2.代码编写者工作区3.切换工作区用户选择一种工作区布局用户选择一种工作区布局可以从中选择一种工作区布局。如果不熟悉编写代码选择“设计者”。如果想更改工作区，可以使用编辑菜单“首选参数”对话框切换到一种不同的工作区。“编辑”→“首选参数”→“常规”对话框如下图：更改工作区使用Dreamweaver窗口和面板使用Dreamweaver窗口和面板“文档”窗口“文档”窗口用于显示当前文档。可以选择下列任一视图：使用Dreamweaver窗口和面板“文档”窗口“设计”视图，这是一个用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境。“代码”视图，这是一个用于编写和编辑HTML、JavaScript、服务器语言代码（如MicrosoftActiveServerPage(ASP)或ColdFusion标记语言）以及任何其他类型代码的手工编码环境。利用“拆分”视图可以在单个窗口中同时看到同一文档的“代码”视图和“设计”视图。使用Dreamweaver窗口和面板“插入”栏包含将各种对象（图像，表格，图层）插入文件中所用的面板使用Dreamweaver窗口和面板“属性检查器”用于查看和更改所选对象或文本的各种属性。使用Dreamweaver窗口和面板“面板组”小技巧如何设置默认的编码方式选择[编辑][首选参数]，打开[首选参数]对话框使用Dreamweaver窗口和面板状态栏——“文档”窗口底部的状态栏提供与正创建的文档有关的其他信息。标签选择器显示环绕当前选定内容的标签的层次结构。单击该层次结构中的任何标签以选择该标签及其全部内容。单击body以选择文档的整个正文。“窗口大小”弹出式菜单（仅当显示“设计”视图时可见）用来将“文档”窗口的大小调整到预定义或自定义的尺寸。最右侧是页面（包括全部相关的文件，如图像和其他媒体文件）的文档大小和估计下载时间。使用Dreamweaver窗口和面板“历史记录”面板打开“历史记录”面板【shift+F10】撤消最后一个步骤一次撤消多个步骤设置“历史记录”面板保留和显示的步骤数删除当前文档的历史记录列表规划和设置站点为了达到最佳效果，在创建任何WEB站点页面之前应该对站点进行设计与规划。站点规划和设计1.确定目标2.选择目标用户3.创建具有浏览器兼容性的站点4.组织站点结构5.创建设计外观6.设计导航方案7.规划和收集资源设置Dreamweaver站点Dreamweaver站点是用于组织所有与Web站点关联的文档的一种方法。可以将它看作一个项目。需要为所开发的每个Web站点设置一个站点。通过在站点中组织文件，可以与FTP一起利用Dreamweaver将站点上传到Web服务器、自动跟踪和维护链接、管理文件以及共享文件。除非定义站点，否则不能充分利用Dreamweaver的功能。设置Dreamweaver站点的方法：方法一：使用“站点定义”向导，它可以逐步完成设置过程；方法二：使用“站点定义”对话框的“高级”设置，它可以根据需要分别设置本地、远程和测试文件夹。实例演示新建一个网站—（1）选择[站点][管理站点]对话框。选择[新建][站点]进入定义网站的流程新建一个网站--（2）进入[基本]选项卡，使用网站定义向导，可以轻松完成所有设置。在[站点定义]对话框的[编辑文件]中输入想要的网站名称。在此范例中，输入网站名称为“巴黎文化之旅”，单击[下一步]按钮。新建一个网站--（3）输入站点的名字在[站点定义]对话框的[编辑文件，第2部分]，请选择[否，我不想使用服务器技术]，然后单击[下一步]按钮。新建一个网站--（4）新建一个网站--（5）在[站点定义]对话框的[编辑文件，第3部分]，请选择[编辑我的计算机上的本地副本，完成后再上传到服务器（推荐）]，然后在[您将把文件存储在计算机上的什么地方]中设置为“e:\paris”中，然后单击[下一步]按钮。强烈提醒:请各小组使用统一的存储目录（统一的盘符，统一的文件夹）方便日后汇总,减少不必要的错误与链接。新建一个网站--（5）新建一个网站--（6）在[站点定义]对话框的[共享文件]中，请单击菜单按钮，选择[无]暂不设置远程服务器的连线，然后单击[下一步]按钮。选”无“新建一个网站--（7）最后，在此对话框中，会将前面的设置做一个总结，当确认无误后，请单击[完成]按钮。回到dreamweaver工作环境中，将会在右侧[文件]面板组的[文件]面板中，发现一个“巴黎文化之旅”的新网站。新建一个网站--（7）站点文件的管理在文件面板中进行管理站点名称查看状态文件上传管理按钮[扩展/折叠]站点文件管理，可以说是DreamweaverMX2004管理网站的首要战将，它不仅可以管理本地文件夹，还可以查看远程网站文件，更厉害的是它可以生存在个人或多人的工作模式中，亦能同步更新远程网站及本地文件夹的内容远端站点与本地文件的关系所有制作完成的网页最后要放置在WebServer上，但制作者不能在服务器上制作网页。常规做法一般先将本地计算机的文件夹模拟成远程服务器的文件夹，完成作品后再将本地文件夹里完成的作品上传到服务器中成为真正的网站。这个原理在dreamweaver中延伸为[本地文件]与[远端站点]实例演示1新建一个简单网页以下边的简单网页为例，叙述一下制作过程实例演示1新建一个简单网页实例演示1新建一个简单网页先对这个页面进行一下分析。看看这个页面用到了那些东西。网页顶端的标题“我的主页”是一段文字。网页中间是一幅图片。最下端的欢迎词是一段文字。网页背景是一深紫红颜色。实例演示1新建一个简单网页首先启动DreamweaverMX2004，确保已经用站点管理器建立好了一个网站“dreamweaverEX”（根目录）。注意：为了制作方便，事先要打开资源管理器，把要使用的图片收集到网站目录images文件夹内。设置网页的标题和背景颜色点击“修改”菜单选“页面属性”。系统弹出页面属性对话框（如下图）实例演示1新建一个简单网页在“分类”“标题/编码”，请在标题输入框填入标题“我的主页”在“分类”“外观”，设置背景颜色：网页背景可以是图片，也可以是颜色。此例是颜色#990033。如上图打开背景颜色选择器进行选取。如果背景要设为图片，点击背景图像“浏览”按钮，系统弹出图片选择对话框，选中背景图片文件，点击确定按钮。插入标题文字进入页面编辑设计视图状态。在一般情况下，编辑器默认左对齐，光标在左上角闪烁，光标位置就是插入点的位置。如果要想让文字居中插入，点属性面板居中按钮即可。启动中文输入法输入“我的主页”四个字。字小不要紧，稍后可以对它进行设置。实例演示1新建一个简单网页【设置文字的格式】选中文字，在上图属性面板中将字体格式设置成默认字体，大小可任意更改字号。并选中“B”将字体变粗。【设置文字的颜色】首先选中文字，在属性面板中，单击颜色选择图标，在弹出的颜色选择器中用滴管选取颜色即可。颜色选择器插入图片下面准备插入图片，为了使图片插入时在源文件的路径上采用相对地址，在这里建议先将页面保存到站点根目录，通常首页会以index.htm命名。设置图片设计视图状态，在标题“我的主页”右边空白处单击鼠标，回车换一行，按照以下的步骤插入一幅图片，并使这张图片居中。也可以通过属性面板中的左对齐按钮让其居左安放。【插入图像】常用方法：（1）使用插入菜单：在“插入”菜单选“图像”，弹出“选择图像源文件”对话框，选中该图像文件，单击确定。如下图：【插入图像】常用方法：（2）使用插入栏（如下图）：单击插入栏图像对象