网页设计制作教程二.ppt

项目二 创建度假村网站 Dreamweaver CS3入门,面板基本操作初识Dreamweaver CS3 创建“fuligong”站点新建和管理站点 为首页设置头信息和页面属性页面总体设置,任务一 面板基本操作 初识Dreamweaver CS3,相关知识,一、启动Dreamweaver CS3,安装Dreamweaver CS3后，单击桌面左下角的“开始”按钮，选择“所有程序”“Adobe Design Premium CS3”“Adobe Dreamweaver CS3”，就可以启动Dreamweaver CS3了，如左图所示。,单击可打开文档,单击可创建相应类型的文档,二、Dreamweaver CS3界面元素简介,Dreamweaver CS3的工作界面由标题栏、菜单栏、“插入”栏、文档工具栏、文档窗口、状态栏、“属性”面板和面板组等组成，如下图所示。,1标题栏和菜单栏,标题栏位于界面顶部，左侧显示软件名称和文档标题，右侧显示程序窗口的控制按钮，包括“最小化窗口”按钮 、“最大化窗口”按钮 和“关闭窗口”按钮 。 菜单栏位于标题栏下方，几乎集中了Dreamweaver CS3的全部操作命令，利用这些命令可以编辑网页、管理站点以及设置操作界面等。要执行某项命令，可首先单击主菜单名打开其下拉菜单，然后用鼠标单击某个菜单项即可。,2插入栏,“插入”栏包含各种类型的对象按钮（如图像、表格和Flash动画等），通过单击这些按钮，可将相应的对象插入到文档中。,在不同的插入栏之间切换,单击小三角符号 打开同位按钮组,3文档标签与文档工具栏,文档标签位于插入栏下方，左侧显示当前打开的所有网页文档名称，右侧显示当前文档对应的最小化、向下还原和关闭按钮。当用户打开多个网页时，通过单击文档标签可在各网页之间切换，如下图所示。,文档工具栏中包括可对文档进行操作的按钮。,4状态栏,状态栏位于文档窗口下方，它提供了与当前文档相关的一些信息。,5属性面板与面板组,在Dreamweaver中，大多数操作都是通过面板实现的。“属性”面板位于文档窗口下方，主要用于查看或编辑所选对象的属性。 除“属性”面板外，Dreamweaver CS3还为用户提供了众多面板，如“文件”面板、“历史记录”面板等。为便于管理，Dreamweaver CS3将这些面板归入到不同的面板组中。,实施步骤,在Dreamweaver CS3中制作网页时，经常需要对其工作界面进行各种调整。为方便后面的操作，本节我们简单介绍一下Dreamweaver CS3中面板的基本操作。（具体操作见视频1-1）。,任务二 创建“fuligong”站点 新建和管理站点,初步认识Dreamweaver CS3后，下面我们来学习新建和管理站点的方法，主要包括网页文档和文件夹的命名规则，定义站点以及新建、保存、关闭、打开和预览文档的方法。,相关知识,一、网页文档和文件夹的命名规则,静态的首页文件一般命名为“index.html”。 最好不要使用中文命名文件和文件夹。 文件名中不要使用大写英文字母。 运算符符号不能用在文件名的开头。 比较长的文件名可以使用下划线“_”来隔开多个单词或关键字。 在大型网站中，分支页面的文件应存放在单独的文件夹中。 在动态网站中，用来存放数据库的文件夹一般命名为“data”或者“database” 。,二、在Dreamweaver中定义站点,为便于管理和编辑站点，在创建网页之前，首先要在Dreamweaver中定义站点。定义站点可以将本地磁盘中的站点文件夹同Dreamweaver建立一定的关联，可以使用Dreamweaver上传或下载站点内容。 定义站点主要包括设置站点名称、站点性质，以及站点所对应的文件夹，下面来看具体操作。,三、新建文档,Dreamweaver中的文档也就是网页，创建新网页的方法有多种。本节使用“文件”菜单创建网页。,选择“文件”“新建”菜单，打开“新建文档”对话框。,四、保存和关闭文档,新建或编辑网页文档后，需要保存文档，才能使所做的设置生效。 关闭文档的操作相当简单，只需单击相应文档右上角的“关闭”按钮（或按【Ctrl+W】组合键）即可。,选择“文件”“保存”菜单（或按【Ctrl+S】组合键），弹出“另存为”对话框。,五、打开和预览文档,除常用的新建、保存和关闭文档操作外，有时还需要打开某个文档进行编辑。,选择“文件”“打开”菜单，弹出“打开”对话框,保存网页后，单击“文档”工具栏中的“在浏览器中预览/调试”按钮，在弹出的菜单中选择“预览在IExplore”菜单项（或直接按【F12】键），预览文档,六、“文件”面板的应用,使用“文件”面板可以非常高效地管理站点。实际操作中，在定义站点后，我们通常都是利用该面板来创建、重命名或打开站点中的网页文档或文件夹的。,创建文档,重命名文档,新建文件夹,重命名文件夹,实施步骤,一、确定站点目录结构,创建网站的第一步是确定本地站点的目录结构，并准备好相应的素材文件，然后在Dreamweaver中定义站点并创建网页，本节我们先来确定站点目录结构（具体操作见视频2-1）。,二、定义站点并创建网页,确定站点目录结构并准备好相关素材后，本节我们将“fuligong”文件夹定义为站点文件夹，并在该站点内创建和制作相关网页（具体操作见视频2-2）。,任务三 为首页设置头信息和页面属性 页面总体设置,新建网页后，一般都要对页面进行一些简单的设置，主要包括头信息和页面属性设置。头信息可以使网页更容易被搜索到，虽然在网页上看不到它的效果，但从功能角度来讲，它是网页中必不可少的元素。页面属性主要包括文档标题、页边距、背景颜色及背景图像等基本属性。,相关知识,一、设置头信息,头信息包括网页关键字、网页说明等。在使用Google、baidu、Yahoo等搜索引擎搜索网页时，不是检索网页的所有内容，而是只检索网页的关键字。如果想要自己的网页能够被搜索引擎检索到，最好把关键字设置为人们经常使用的词语。,二、设置页面属性,页面属性主要包括页面字体、文本颜色、文档标题、页边距、背景颜色和背景图像等。,实施步骤,本节通过为前面创建的度假村网站首页“index.html”设置头信息和页面属性，来看看头信息和页面属性在实际网页制作中的应用（具体操作见视频3-1）。,知识拓展,一、设置站点远程信息,申请好主机和域名后，服务商会为我们提供登录虚拟空间所用的IP地址、登录账户名称和密码。必须把这些信息设置到Dreamweaver对应的站点中，才能通过Dreamweaver内置的站点管理功能上传或下载站点文