第二章网页设计基础入门.pptVIP

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