[第2章网页设计基础入门.ppt

第2章　网页设计基础入门 教学目标 本章介绍网页设计的整体规划，站点的建立 ，用Dreamweaver8.0创建站点、管理站点， 以及如何网页的建立、保存和打开，怎样设置页面属性。 第2章　网页设计基础入门 教学重点和难点 网站草图的设计 站点的创建和管理 文档的新建、保存和打开 文档属性的设置 2.1　设计草图 在制作个人主页之前，首先来总体规划一下网站的结构。根据原始素材来确定网站需要制作的内容。我们的主人公是一个多才多艺的女孩，她的名字叫小慧。小慧的作品很多，需要分类。在制作网站之前，首先画出网站的设计草图。 2.1　设计草图 2.2.1　Dreamweaver8.0主界面 2.2.2　站点的建立 首先给站点起个名字，叫“小慧的家”。执行【站点】|【新建站点】菜单命令， 或者在右侧【文件】功能面板下的【文件】选项卡中，单击【管理站点】超级链接。 弹出【管理站点】对话框，单击【新建】按钮，选择【站点】命令，如图所示。 2.2.2　站点的建立 屏幕上出现了站点定义的对话框，有【基本】和【高级】两个选项卡，选择【基本】选项卡，并在文本框内输入站点的名称——小慧的家。 2.2.2　站点的建立 单击【下一步】按钮。选择【否，我不想使用服务器技术】选项，单击【下一步】按钮。接下来，要选择把文件存储在计算机上的什么位置，单击文本框右边的按钮。 2.2.2　站点的建立 这里存储文件的位置是“F:\xiaohui\”（在F盘下新建一个名为“小慧的家”的文件夹。可以根据你的需要进行选择），如图所示，单击【下一步】按钮。 2.2.2　站点的建立 打开【您如何连接到远程服务器？】中的下拉菜单，选择【无】项，单击【下一步】按钮，打开下图所示的对话框，该对话框显示所创建站点的所有信息，确认无误后，单击【完成】按钮，结束站点定义。 2.2.2　站点的建立 如果在上述的操作过程中有失误，可以单击“站点”|“管理站点”命令，在“管理站点”对话框中单击【编辑】按钮进行修改。单击【完成】按钮后，在【文件】功能面板下的【文件】选项卡中，也相应出现了相关信息，如图所示。 2.2.2　站点的建立 为了存放网页中要用到的图片，可以在该站点下新建一个专门存放图片的文件夹。选中“小慧的家”站点，单击鼠标右键，在弹出的菜单中选择【新建文件夹】，输入文件夹名称为“images”，按回车键确认。这样，在站点下就多了一个“images”文件夹，如图所示。 2.2.2　站点的建立 如果不想要这个文件夹了，也可以选中它，直接按键盘上的Delete键将它删掉。 与创建文件夹的方法相同，也可以创建网页文件。 2.2.2　站点的建立 提示：一般首页文件名为“index.htm”或者“index.html”，如果是使用ASP语言编写的页面，那么文件名变为“index.asp”，如果是用XML语言编写的，文件名为“index.xml”。 我们可以把一些制作网页时要用到的图片放到“images”文件夹下。接下来，就可以制作第一张网页，即首页文件——“index.htm”文件。 2.2.1　视图方式 在【文档】工具栏上左端的三个按钮，分别为【显示代码视图】、【显示代码视图和设计视图】、【显示设计视图】，单击这3个按钮可以实现三种视图间的切换。 2.2.1　视图方式 打开“index.htm”文件，如图所示。 2.2.1　视图方式 这三视图的用途各不相同，在代码视图中可以直接编辑网页的源代码，对于习惯编程的用户来说，是必不可少的；而设计视图能方便我们更好地美化网页，更合理地布局网页；而显示代码视图和设计视图让我们能够更好地理解源代码，提高编程能力。 2.3　站点的管理 站点的编辑 站点的导入/导出 重命名站点中的文件 通过站点地图改变链接 2.3.1　站点的编辑 选择要修改的站点 单击“管理站点”中的“编辑”按钮 在创建站点向导的“基本”或“高级”选项卡中修改相关参数 2.3.2　站点的导出 选择要导出的站点 单击“管理站点”中的“导出”按钮 为导出的站点文件命名，并保存为.ste的文件 2.3.2　站点的导入 调出“管理站点”对话框 单击“管理站点”中的“导入”按钮 选择要导入的STE站点文件，单击“打开”按钮 选择站文件根目录 单击“完成”按钮 2.3.3　重命名站点中的文件 打开文件面板 选择文件 单出右键 在弹出菜单中选择“重命名” 给文件重命名并在空白处单击，完成操做 2.3.4　通过站点地图改变链接 打开文件面板 单击“视图状态”组合框，选择“地图视图” 单出”折叠/展开面板”按钮，展开面板 单击“站点地图”按钮，选择“地图和文件” 选择文件，单击右键，在弹出菜单中选择”移除链接“ 拖动文件右边的标记到目标文件，则如下图所示 地图和文件双视图 2.3.5　文档