网页设计完整第2章ppt课件

.,网页制作案例教程制作：张兴科北京大学出版社PEKINGUNIVERSITYPRESS,.,第2章站点的创建与管理,本章内容在网站设计中的地位本章是DreamweaverCS3学习的开始，从本章开始，DreamweaverCS3的面纱将被层层揭开。在制作网页之前，都要建立一个本地站点，以方便管理网站文件。本章内容是Dreamweaver的基础部分，要求熟练应用。本章要点组成网页的元素；网页的布局风格；本教材附带的网站介绍。教学目标DreamweaverCS3的工作界面；创建本地站点；使用“文件”面板管理站点文件；在Dreamweaver中管理网站。,.,2.1本地站点的创建并上传案例,2.1.1工作环境DreamweaverCS3操作界面主要由标题栏、菜单栏、文档窗口、插入面板、属性面板和浮动面板组成，如图,.,2.1.2文档窗口文档窗口也称文档编辑区，如图,.,文件名：显示当前编辑的Web文档名字。在文档窗口可以同时打开多个Web文档，通过单击“文件名”切换到不同的文档进行编辑。“视图切换”按钮：提供3种视图查看模式，分别单击“代码”、“拆分”、“设计”按钮进行切换文档标题：允许用户为文档输入一个标题，它将显示在浏览器的标题栏中文件管理：显示“文件管理”下拉菜单，可以在弹出菜单中选择对应的命令，对当前编辑的网页做文件的管理设置。,.,标准工具栏：在默认情况下标准工具栏是隐藏的，可以执行“查看”“工具栏”“标准”显示标准工具栏，如图标准工具栏中包含一些在“文件”和“编辑”菜单中常用的操作，如新建、打开、保存、保存全部、打印代码、剪切、复制、粘贴、撤销以及重做。,.,插入面板插入面板使用户快捷地创建和插入各种对象常用：创建常见的如表格、图像、超链接等对象。布局：可以插入表格、div标签、APDiv(层)、框架和Spry组件。当处于布局模式时可以使用“绘制布局表格”和“绘制布局单元格”。除此以外可以执行“标准模式”和“扩展表格模式”的切换。,.,表单：可以创建表单及插入表单元素，以及Spry表单对象。数据：可以插入动态元素，如记录集、记录集分页、插入记录、更新记录、删除记录、用户身份验证以及用于SpryXML数据的组件。Spry：DreamweaverCS3中集成的最新功能，用于创建SpryXML记录集、Spry区域及其他Spry组件。文本：可以插入各种文本和列表格式设置标签，如B、I、em、h1、ul等。收藏夹：可以自定义该面板，将常用的插入按钮添加到该面板中。,.,属性面板属性面板用于显示或者修改所选对象的各种属性，当选择不同的对象时属性面板也会随之改变。,.,浮动面板Dreamweaver中还有很多各种功能的面板，可以根据用户需要展开或者折叠，还可以任意组合和移动，称之为“浮动面板”,.,创建新站点创建站点有两种方式：使用向导一步一步地进行设置，或者通过在“管理站点”中设置“高级”选项卡信息来创建。无论哪种方式，都要事先在本地磁盘上建立一个用来存放站点的文件夹，这个文件夹就是本地站点的根目录。,.,1使用向导建立站点使用向导建立站点的步骤如下。(1)打开建立站点向导的方法有3种。在进入Dreamweaver的起始页面中选择“新建”“Dreamweaver站点”。选择“站点”菜单中的“新建”“站点”命令。选择“站点”菜单中的“管理站点”命令，打开“管理站点”对话框，执行“新建”“站点”。,.,(2)打开“站点定义为”对话框，在“您打算为您的站点起什么名字”文本框中输入站点名字，如travel。若已申请域名，则可以在“您的站点的HTTP地址(URL)是什么？”对话框中填入申请的域名地址。(3)单击“下一步”按钮，询问是否使用服务器技术，若是静态站点则选择“否，我不想使用服务器技术”，若是动态站点可以进一步设置使用哪一种服务器技术。,.,(4)单击“下一步”按钮，在“您将把文件存储在计算机上的什么位置？”文本框中直接输入站点根目录的路径，或者单击按钮，选择文件夹目录。(5)单击“下一步”按钮，在“您如何连接到远程服务器”对话框中选择一种连接到远程服务器的方式，这里选择“无。(6)单击“下一步”按钮，将显示前几步设置的总结，若需修改可单击“上一步”按钮返回重新设置，若确定设置则单击“完成”按钮，如图2.20所示。,.,管理资源站点对于已经创建好的站点，可以执行编辑、复制、删除、导出和导入等操作。1编辑站点如果要重新设置站点的属性，可以执行以下步骤。(1)单击“站点”“管理站点”。(2)从站点列表中选择要编辑的站点名称，单击“编辑”按钮。可以参考前面创建站点的方法重新设置站点属性。(3)编辑完毕后，单击“确定”按钮，返回到“管理站点”对话框，单击“完成”按钮。,.,2复制站点如果要创建多个结构相同或相似的站点，可以利用站点的复制功能，具体步骤如下。(1)单击“站点”“管理站点”。(2)从列表中选择要复制的站点名称，单击“复制”按钮。(3)若要对复制的站点进行编辑，可以从站点列表中选中新复制的站点，单击“编辑”按钮，编辑完成返回到“管理站点”对话框，单击“完成”按钮。3删除站点如果某个站点在Dreamweaver中不再需要编辑了可以删除该站点，具体步骤如下。(1)单击“站点”“管理站点”。(2)从列表中选择要删除的站点名称，单击“删除”按钮。(3)在弹出的提示对话框中，单击“是”按钮，即可删除选定的站点。,.,4导出站点如果要将站点移植到其他计算机或其他版本的软件中，或要与其他用户共享站点设置的话，可以使用导出站点功能，具体步骤如下。(1)单击“站点”“管理站点”。(2)从列表中选择要导出的站点名称，单击“导出”按钮。(3)在弹出的“导出站点”对话框中，设置导出文件名和保存位置，单击“保存”按钮。(4)返回“管理站点”对话框，单击“完成”按钮。,.,5导入站点对于已导出的站点，或者从别的用户处获得的共享站点设置文件，可以在Dreamweaver中导入该站点，对导入的站点可以像其他创建的站点一样进行编辑操作。导入站点步骤如下。(1)单击“站点”“管理站点”。(2)在“管理站点”对话框中单击“导入”按钮。(3)在弹出的“导入站点”对话框中，选择要导入的站点，单击“打开”按钮。(4)返回“管理站点”对话框，单击“完成”按钮。,.,上传文件将文件从本地站点上传到远程站点的步骤如下。(1)打开“文件”面板，单击“展开以显示本地和远端站点”按钮，右边窗口显示的是本地站点的文件列表。,.,(2)单击“连接到远端主机”按钮，与服务器建立连接，连接成功后“连接到远端主机”按钮变成，在左边窗口显示远端站点的文件列表，如图,.,(3)在右边窗口的“本地文件”列表中选择要上传的文件，同时在左边窗口选择上传的文件存放在远端主机的目录，然后单击“站点”“上传”，或者单击工具栏上的“上传文件”按钮，也可以直接将要上传的文件拖到左边窗口的指定目录下。(4)上传成功后在左边窗口列表中会显示刚上传的文件，重复以上操作可以继续上传其他文件。上传完毕后，单击“从远端主机断开”按钮，完成文件的上传。,.,本案例将在Dreamweaver中建立一个本地站点，并使用Dreamweaver自身的FTP功能把网站文件上传到远程FTP服务器，最终效果如图,.,案例实现下面简单介绍操作步骤。(1)在本地磁盘D上新建一个站点文件夹，如mysite，再创建几个子文件夹，如images、music、diary等分别用于存放不同类型的文件。(2)启动Dreamweaver，选择“站点”“新建”，打开“站点定义为”对话框，输入为站点起的名字，如“我的个人网站”。(3)单击“下一步”按钮，选择“否，我不想使用服务器技术”。(4)单击“下一步”按钮，直接输入或单击按钮选择站点文件存放位置“D:mysite”。(5)单击“下一步”按钮，在“您如何连接到远程服务器”对话框中选择“FTP”，填入FTP服务器地址、用户及口令，测试。,.,(6)单击“下一步”按钮，选择“否，不启用存回和取出”。单击“下一步”按钮，查看前面设置的信息，单击“完成”按钮。(7)打开“文件”面板(F8)，单击最右边的按钮，在菜单中选择“文件”“新建文件夹”，为新建的文件夹命名为“flash”。用鼠标右键单击“diary”,在快捷菜单中选择“新建文件夹”，输入文件夹名April。(8)在“文件”面板中选中“站点-mysite”，单击最右边的按钮，在菜单中选择“文件”“新建文件”，将新建的文件命名为“index.html”，将此文件作为网站的主页，双击文件名可以在Dreamweaver中打开编辑。(9)