站点的创建与管理课件

网 页 设 计,主讲：上官珺 计算机系 邮箱: 网上E盘： 密码：dw123456,第二章 站点的创建与管理,本章导读：无论是网页设计新手，还是专业的网页设计师，在进行网页设计之前都要创建站点，这是网页设计的前提。 学习重点： 站点的创建和管理方法 学习要点： 网站与网页 站点的概念 创建和管理本地站点 创建新页面 打开和保存页面 设置网页属性,第二章 站点的创建与管理,复习：网站设计制作流程 网站策划网站设计网站制作 网站测试与发布网站宣传推广 网站维护,第二章 站点的创建与管理,2.1 站点及规划原则 要制作一个优秀的网站，一般情况是首先在本地磁盘上制作该网站，完成后再将其上传到Internet相连的web服务器上。放置在本地磁盘上的网站称为“本地站点”，Web服务器上的站点称为“远程站点”。 在创建本地站点之前，首先要理解站点的概念。,第二章 站点的创建与管理,2.1 站点及规划原则 一、什么是站点 站点是一组具有共享属性（如相关主题、类似的设计或共同目的）的链接文档。这些文档基于共同的表现目的集合到一起。站点也是文档的一种磁盘组织形式，它同样是由文档和文档所在的文件夹组成。,第二章 站点的创建与管理,2.1 站点及规划原则 一、什么是站点 利用不同的文件夹，将不同的网页内容分门别类保存，这是设计网站的前提。 在设置站点之前，一定要规划好站点的结构，这样可以提高工作效率，节省工作时间。,第二章 站点的创建与管理,2.1 站点及规划原则 二、站点规划原则 1、将站点中的内容进行分类 将站点中的内容进行分类，把相关的内容放在同一个文件夹中，这样便于对站点资源进行管理。 首先为站点创建一个根文件夹（即根目录），然后创建多个子文件夹，这样可以将站点的文件分类储存到相应的文件夹中。千万不可将所有文件全部都放在根文件夹中。,第二章 站点的创建与管理,2.1 站点及规划原则 二、站点规划原则 2、命名文件或文件夹 （2）命名应有一定规律，不要使用过长的名称，便于记忆和日后的管理。 （3）尽量使用意义明确的名称 ，比如，可以用image来建立目录。,第二章 站点的创建与管理,2.1 站点及规划原则 二、站点规划原则 文件夹可分为： （1）本地文件夹：本地文件夹是用户的工作目录，Dreamweaver将此文件夹称为本地站点。 （2）远程文件夹：远程文件夹是运行Web服务器的计算机上的某个文件夹，Dreamweaver将此文件夹称为远程站点。,第二章 站点的创建与管理,2.1 站点及规划原则 二、站点规划原则 文件夹可分为： （3）动态页文件夹（“测试服务器”文件夹）：是Dreamweaver用于处理动态页的文件夹，此文件夹与远程文件夹通常是同一文件夹。,第二章 站点的创建与管理,2.1 站点及规划原则 二、站点规划原则 3、合理分配各种类型文件 对文件进行分类存放，例如，网页中用到的图像可以放在根目录下的名为images的文件夹里，这样，当要将图像插入页面时，就知道在何处可以找到它;照片则放到根目录下的名为photo的文件夹里，必要时还可以使用子文件夹。,第二章 站点的创建与管理,2.1 站点及规划原则 二、站点规划原则 3、合理分配各种类型文件 通过这种方式 来管理文件，可以让站点具有清晰的站点结构，将来更容易维护和管理，如图所示。,第二章 站点的创建与管理,2.2 创建本地站点（两种方法） 一、创建本地站点 先在计算机硬盘上建立一个文件夹，如myweb，该文件夹用来存放站点中的所有文件，并在该文件夹中再创建一个子文件夹images，该文件夹用于存放站点中的图像。,第二章 站点的创建与管理,2.2 创建本地站点（两种方法） 一、创建本地站点 步骤： （1）执行【站点】-【新建站点】命令，再选择“基本”选项卡，如图3-1所示， 把“您打算为您的站点起什么名字？”项的“未命名站点 1”改为所需要的名字，中文英文均可，比如本例中输入“梦想 空间”作为网站名字，实际上只起个标签的作用，完全不影响网页显示的内容。,第二章 站点的创建与管理,2.2 创建本地站点（两种方法） 一、创建本地站点 步骤：,图3-1站点定义输入网站名称,第二章 站点的创建与管理,2.2 创建本地站点（两种方法） 一、创建本地站点 步骤： （2）单击“下一步”按钮，会显示如下图 所示的对话框 “您是否打算使用服务器技术，如ColdFusion、、asp、jsp 或php?”本书主要讲解静态网页设计技术，所以选择第一项“否，我不想使用服务器技术。”项,因为本站点是一个静态站点。 如果读者以后学习服务器端编程语言，那就要选择第二项了。,第二章 站点的创建与管理,2.2 创建本地站点（两种方法） 一、创建本地站点 步骤：,图询问是否使用服务器端技术,第二章 站点的创建与管理,2.2 创建本地站点（两种方法） 一、创建本地站点 步骤： （3）单击“下一步”按钮，会显示如图3-3 所示的对话框“在开发过程中，您打算如何使用您的文件？”按默认选项，即选择“编辑我的计算机上的本地副本，完成后再上传到服务器（推荐）”。单击“您将把文件存储在计算机上的什么位置？”右侧的文件夹按钮，设置本地站点。,第二章 站点的创建与管理,2.2 创建本地站点（两种方法） 一、创建本地站点 步骤：,图3-3选择本地文件夹,第二章 站点的创建与管理,2.2 创建本地站点（两种方法） 一、创建本地站点 步骤： （4）在打开的“选择站点 梦想空间 的本地文件夹”项中，选择本地文件夹位置，比如E: myweb，选择“myweb”文件夹，单击“打开”按钮，如图3-4所示，然后再单击“选择”按钮。,第二章 站点的创建与管理,2.2 创建本地站点（两种方法） 一、创建本地站点 步骤：,图3-4创建本地站点,第二章 站点的创建与管理,2.2 创建本地站点（两种方法） 一、创建本地站点 步骤： （5）单击“下一步”按钮，会显示如图3-5 所示的对话框 “您如何连接到远程服务器？”选择“无”项。,第二章 站点的创建与管理,2.2 创建本地站点（两种方法） 一、创建本地站点 步骤：,图3-5询问如何连接到远程服务器,第二章 站点的创建与管理,2.2 创建本地站点（两种方法） 一、创建本地站点 步骤： （6）单击“下一步”按钮，出现站点定义的总结信息，包括本地信息、远程信息、测试服务器信息等，如图3-6所示。,第二章 站点的创建与管理,2.2 创建本地站点（两种方法） 一、创建本地站点 步骤：,图3-6本地站点基本信息,第二章 站点的创建与管理,2.2 创建本地站点（两种方法） 一、创建本地站点 步骤： （7）单击“完成”按钮，这样站点定义就完成了。在Dreamweaver屏幕右侧的文件面板中可以看到刚刚创建的本地站点，如图3-7所示。执行【站点】-【管理站点】命令，打开“管理站点”对话框，可以看到如图3-8所示的“梦想空间”标签，它就是刚刚创建的本地站点，可以单击“编辑”按钮对它的一些选项进行更改。,第二章 站点的创建与管理,2.2 创建本地站点（两种方法） 一、创建本地站点 步骤：,图3-7 “文本”面板的站点信息,图3-8管理站点,第二章 站点的创建与管理,2.2 创建本地站点（两种方法） 二、使用高级设置建立站点 1建立本地站点根文件夹（主文件夹） 2定义本地站点 下面把文件夹myweb定义为本地站点，操作方法为： 1）启动Dreamweaver，选择“站点”“管理站点”。出现“管理站点”对话框，单击“新建”按钮，然后选择“站点”，如图所示。,第二章 站点的创建与管理,2.2 创建本地站点（两种方法） 二、使用高级设置建立站点,第二章 站点的创建与管理,2.2 创建本地站点（两种方法） 二、使用高级设置建立站点 2）出现“站点定义”对话框，如果显示向导的“基本”选项卡，单击“高级”选项卡，然后从“分类”列表中选择默认选项“本地信息”，如图6-27所示。,第二章 站点的创建与管理,2.2 创建本地站点（两种方法） 二、使用高级设置建立站点,第二章 站点的创建与管理,2.2 创建本地站点（两种方法） 二、使用高级设置建立站点 3）在“站点名称”文本框中，输入“梦想”作为站点名称。 4）在“本地根文件夹”文本框中，指定myweb文件夹。可以单击文件夹图标 来浏览并选择该文件夹，或者在“本地根文件夹”文本框中输入路径。,第二章 站点的创建与管理,2.2 创建本地站点（两种方法） 二、使用高级设置建立站点 5）在“默认图像文件夹”文本框中，指定已有的images文件夹。 设置后的“站点定义”对话框如图6-27所示。 6）单击“确定”。出现“管理站点”对话框，显示定义的新站点，如图6-28所示。,第二章 站点的创建与管理,2.2 创建本地站点（两种方法） 二、使用高级设置建立站点,第二章 站点的创建与管理,2.2 创建本地站点（两种方法） 二、使用高级设置建立站点 7）单击“完成”按钮，关闭“管理站点”对话框。此时“文件”面板显示当前站点的新本地根文件夹，如图6-29所示。“文件”面板中的文件列表将充当文件管理器，允许复制、粘贴、删除、移动和打开文件，就像Windows资源管理器一样.,第二章 站点的创建与管理,2.2 创建本地站点（两种方法） 二、使用高级设置建立站点,第二章 站点的创建与管理,2.3管理本地站点（2点） 一、文件管理 1、新建文件夹： 一般情况下，站点由几大部分构成，每一部分又包括许多内容，所以 为了便于管理站点，可以为每一部分创建一个文件夹，将属于同一类的内容存放在同一个文件夹中，如果有必要，还可以在文件夹下建立子文件夹。,第二章 站点的创建与管理,2.3管理本地站点（2点） 一、文件管理 1、新建文件夹： 新建文件夹操作步骤如下： （1）打开文件面板，选中 站点根文件夹，在该文件夹 上单击鼠标右键，在弹出的 菜单中选择新建文件夹即可。 如右图所示。,第二章 站点的创建与管理,2.3管理本地站点（2点） 一、文件管理 1、新建文件夹： (2)刚刚创建的新文件夹， 其名称是处于可编辑状态 的，默认为untitled,此时 可进行文件夹的命名，完 成命名后按下enter键确定。 如图所示，这样，就在站点 根文件夹下创建了photo子文件夹。 （3）用同样的方法再创建几个文件夹，并分别为其命名。,第二章 站点的创建与管理,2.3管理本地站点（2点） 一、文件管理 2、新建网页： 网站中的网页分为两种：主页和普通网页。主页一般直接存放在站点根文件夹下。 普通网页一般放入在各个文件夹中，当然也可以存放在站点根文件夹下。,第二章 站点的创建与管理,2.3管理本地站点（2点） 一、文件管理 2、新建网页： 新建普通网页的操作步骤如下： （1）打开文件面板，选择要添加网页文件的文件夹，在该文件夹上单击鼠标右键，在弹出的菜单中选择新建文件。 （2）刚刚创建的新网页文件，其名称是处于可编辑状态的，此时可进行文件的命名 （注意：名称要带后辍），完成命名后按enter键确认。,第二章 站点的创建与管理,2.3管理本地站点（2点） 一、文件管理 2、新建网页： 新建主页的操作步骤如下： （1）打开文件面板，选择要站点根文件夹，在该文件夹上单击鼠标右键，在弹出的菜单中选择新建文件。 （2）刚刚创建的新网页文件，其名称是处于可编辑状态的，此时可进行文件的命名 （注意：名称要带后辍），完成命名后按enter键确认。,第二章 站点的创建与管理,2.3管理本地站点（2点） 一、文件管理 2、新建网页： 新建主页的操作步骤如下： 注意：一般情况下，应该将主页文件命名为 index.htm或default.htm。 （3）设成首页:在该网页文件上单击鼠标右键，在弹出的右键菜单中选择设成首页.,第二章 站点的创建与管理,2.3管理本地站点（2点） 一、文件管理 3、文件的移动和复制 4、删除文件,第二章 站点的创建与管理,2.3管理本地站点（2点） 二、站点管理 对一个 已经创建好了的站点，还可以更改站点布局、重新规划站点、对站点的属性进行编辑，也可以将站点从列表中删除；若需要创建多个结构相同或类似的站点，还可以利用站点的复制功能。,第二章 站点的创建与管理,2.3管理本地站点（2点） 二、站点管理 操作步骤如下： （1）单击菜单栏中的站点/管理站点命令，打开管理站点对话框。 （2）从左边的站点列表中选择要编辑的站点，单击对话框右侧的按钮，即可对站点进行不同方式的编辑。 新建、 编辑、 复制、 删除、 导出、 导入,第二章 站点的创建与管理,2.4 创建新页面 一、从开始页创建新页面 在dreamweaver8启动时，如果显示开始页，则可以在开始页的创建新项目下选择html选项，即可创建一个空白的HTML页面。,第二章 站点的创建与管理,2.4 创建新页面 二、关闭开始页时创建新页面 当开始页关闭时，用户可以选择如下两种方式创建新页面： （1）使用文件面板创建新页面。 （2）单击菜单栏 中的文件/新建命令，弹出新建文档对话框，从类别列表中选择基本页选项，在右侧选择HTML选项，单击创建按钮，新建一个空白的网页。,第二章 站点的创建与管理,2.4 创建新页面 注意：无论采用哪种方式创建新页面，应该先将页面保存到本地站点，这样页面中的元素才能正常显示。,第二章 站点的创建与管理,2. 5 保存网页 单击菜单栏 中的文件/保存命令，在弹出的另存为对话框中指