搜索
项目2网页文档的编辑/1781项目2网页文档的编辑知识技能目标掌握站点的创建与管理技术掌握网页基本制作技术掌握表单网页的制作技术掌握框架网页制作方法掌握基本的HTML标记本单元理论授课16学时，上机操作16学时。项目2网页文档的编辑/1782课次3课时2教具投影仪备注课题任务1站点的创建与管理任务2网页文档的基本操作目的掌握站点创建与管理的方法,掌握网页文档的基本操作方法重点网页文档的基本操作难点无任务1站点的创建与管理一、任务分析在Dreamweaver中制作网页，首先需要定义一个站点。无论是网页制作的新手，还是专业的网页设计师，都要从创建站点开始，理清网站结构。Dreamweaver有一套专业的创建和管理站点的工具，实现站点的创建和管理非常方便。通过本任务的学习，掌握“文件”面板的使用方法，学会站点的创建和管理方法。二、相关知识1．本地站点与远程站点要制作一个能够被公众浏览的网站，首先要在本地磁盘上制作这个网站，然后把这个网站上传到Web服务器上。放在本地磁盘上的网站称为本地站点，处于Internet中Web服务器上的网站称为远程站点。项目2网页文档的编辑/17832．认识“文件”面板网站是多个网页、图像、动画和程序等文件有机联系的整体，要管理这些文件以及它们之间的联系，需要一个有效的工具，“文件”面板便是这样的工具。“文件”面板主要有三个方面的功能：（1）管理本地站点，包括建立文件夹和文件，对文件夹和文件进行重命名等操作，也可以管理本地站点的结构；（2）管理远程站点，包括文件上传、文件更新等；（3）连接网络应用服务器，预览动态网页。打开“文件”面板的方法：选择【窗口】菜单\【文件】，或者按【F8】键，即可显示“文件”面板。“文件”面板的组成如图2-1所示，在“文件”面板中显示了当前站点的内容。项目2网页文档的编辑/1784使用“文件”面板中的按钮和命令，可以设置站点窗口显示的内容和形式，实现本地站点和远程站点之间的来回传递。“文件”面板的“站点列表”中显示了Dreamweaver中定义的所有站点。“视图列表”中显示了可以选择的四种站点视图类型：本地视图、远程视图、测试服务器和地图视图。图2-1“文件”面板项目2网页文档的编辑/1785三、任务实施1.创建本地站点使用Dreamweaver创建站点的向导创建第一个本地站点“我的站点”，具体操作步骤如下:（1）在磁盘上创建一个用来存放站点的文件夹，命名为“myweb”，该文件夹就是本地站点的根目录，是为网站特别建立的一个文件夹。（2）选择【站点】菜单\【新建站点】，打开“站点定义”对话框，如右图所示。在“站点定义”对话框上方有两个选项卡：“基本”和“高级”，这里打开的是“基本”选项卡。项目2网页文档的编辑/1786（3）在“您打算为您的站点起什么名字?”文本框中输入要创建的网站名称：我的站点。站点的URL可以暂时不填写，在上传网站时再添加。（4）单击【下一步】按钮，设置该站点需要用到的服务器技术。由于新建的是静态网站，所以选中“否，我不想使用服务器技术”单选按钮。（5）单击【下一步】按钮，打开如下图所示的对话框，在该对话框中可以设置该站点的编辑方式。具体有以下两种情况：项目2网页文档的编辑/1787大多数情况下，都是在本地站点中编辑网页，再上传到远程服务器，这种情况下选中“编辑我的计算机上的本地副本，完成后再上传到服务器（推荐）”单选按钮。但有时会直接用Dreamweaver在服务器上编辑网页，这种情况下应该选中“使用本地网络直接在服务器上进行编辑”单选按钮。本任务中，选中“编辑我的计算机上的本地副本，完成后再上传到服务器（推荐）”单选按钮。（6）在图2-3所示的对话框下方的“您将把文件存储在计算机上的什么位置?”文本框用来设定保存网站文件的文件夹的路径。可以在文本框中输入已有的路径，也可以单击其后的按钮，在弹出的“选择站点我的站点的本地根文件夹：”对话框中选择保存位置，结果如图2-3所示。（7）单击【下一步】按钮，进一步设置如何连接到远程服务器。“您如何连接到远程服务器?”下拉列表框中有六个选项：“无”、“FTP”、“本地网络”、“WebDAV”、“RDS”和“SourceSafe（R）数据库”。本任务创建网站时不需要用Dreamweaver来管理远程站点，所以应选择“无”，在网站创建完成后再与FTP连接。项目2网页文档的编辑/1788（8）单击【下一步】按钮，打开如下图所示的对话框。“站点定义”对话框列出了刚才设置的主要内容，如果发现有错误，则可以单击【上一步】按钮返回，进行更正。核对无误后，单击【完成】按钮，结束“站点定义”对话框的设置。项目2网页文档的编辑/1789至此，在Dreamweaver中新建了一个静态站点：我的站点。“文件”面板中显示了刚才新建的站点，如下图左所示。2．站点的管理通常需要对多个站点进行管理，这就需要专门的工具完成站点的切换、添加、删除等操作。用户可以选择【站点】菜单﹨【管理站点】，也可以在“文件”面板左边的下拉列表框中选择“管理站点”，如上图右所示，同样可以打开“管理站点”对话框。项目2网页文档的编辑/17810（1）切换站点用Dreamweaver编辑网页或进行网站管理时，每次只能操作一个站点，这样就需要在各个站点之间进行切换，打开另一个站点。在“文件”面板左边的下拉列表框中选择某个已创建的站点，这样就可切换到对这个站点进行操作的状态。（2）编辑站点如果要对站点进行编辑，可以在上图所示的“管理站点”对话框中，选择要编辑的站点，然后单击【编辑】按钮，将重新打开“站点定义”对话框，用户可以根据需要逐步修改站点的属性。项目2网页文档的编辑/17811（3）复制站点复制站点就是对某一个站点进行复制操作。复制站点的功能省去了重复建立多个结构相同的站点的操作，这样可以提高工作效率，也可以让这些站点保持一定的相似性。（4）删除站点删除站点就是对某一个站点进行删除操作，注意，这个操作只是从Dreamweaver的站点管理器中删除，网站的文件仍保存在硬盘原来的位置上，并没被删除。（5）导入站点导入站点就是将选中的站点导出成一个XML文件，需要的时候还可以再次导入。（6）导出站点导出站点就是把导出的保存站点设置的XML文件再次导入。项目2网页文档的编辑/178123．管理网站中的文件和文件夹（1）创建文件夹和文件在“文件”面板中站点根目录上右击，然后从弹出的快捷菜单中单击菜单【新建文件夹】或【新建文件】，接着给新建的文件夹或文件命名，即可完成站点中文件夹和文件的创建。（2）移动和复制文件从“文件”面板的本地站点“文件列表”中，选中要移动或复制的文件夹或文件，右键单击，如果要进行移动操作，则单击【编辑】菜单\【剪切】；如要进行复制操作，则单击【编辑】\【拷贝】。然后单击【编辑】菜单\【粘贴】，将文件夹或文件移动或复制到相应的文件夹中。使用拖动的方法，也可以实现对文件夹或文件移动的操作，方法如下：先从“文件”面板的本地站点“文件列表”中，选中要移动或复制的文件夹或文件，用鼠标再拖动选中的文件夹或文件将其移动到目标文件夹中，然后释放鼠标即可。项目2网页文档的编辑/17813（3）重命名文件夹或文件选中需要重命名的文件夹或文件，选择快捷菜单中的【编辑】\【重命名】或者按【F2】键，文件夹或文件的名称变成可编辑状态，重新输入新的名称，按Enter键确认。（4）删除文件夹或文件选中要删除的文件夹或文件，然后选择【编辑】菜单\【删除】或按【Delete】键，在弹出的提示对话框中询问是否要真正删除文件夹或文件，单击【是】按钮确认。项目2网页文档的编辑/17814四、课堂实践创建一个命名为“课堂实践”的静态网站，该网站的所有文件存储在本地计算机E盘中的“ClassroomPractise”文件夹中。在“文件”面板的站点根目录下创建三个子文件夹“image”、“music”和“text”。在根文件夹中创建一个名为“index.html”的网页文档。将所需的图像文件和音乐文件分别复制到“image”和“music”文件夹中。操作中注意以下几点：①文件夹“C1assroomPractise”必须在Windows操作系统的资源管理器中创建。②其他子文件夹直接利用Dreamweaver的“文件”面板创建。③拷贝图像文件和音乐文件也是在Windows操作系统的资源管理器中完成。项目2网页文档的编辑/17815任务2网页文档的基本操作一、任务分析网页上的信息大多是通过文字来表达的，文字是网页的主体和构成网页最基本的元素，它具有准确快捷地传递信息、存储空间小、易复制、易保存、易打印等优点。制作网页时，文本的输入与编辑占了制作工作的大部分时间。在Dreamweaver中输入文本与在Word中输入文本很相似，它们都可以对文本的格式进行设置。本任务主要学习如何创建网页文档、打开和关闭网页；如何设置网页的整体属性以及关于文本的各项操作。项目2网页文档的编辑/17816二、相关知识Dreamweaver为处理各种Web设计和开发文档提供了灵活的环境。除了HTML文档以外，还可以创建和打开各种基于文本的文档，如CFML（互联网应用标记语言）、ASP、XML、JavaScript和CSS等。Dreamweaver还支持源代码文件，如VisualBasic、.NET、C#和Java。Dreamweaver为创建新文档提供了若干选项。可以创建以下文档：新的空白文档或模板基于Dreamweaver附带的某预定义页面布局的文档基于某现有模板的文档文档的创建包括创建空白文档和打开现有文档；文档的编辑包括文档页面属性的设置、插入换行标签、文字属性的设置、段落属性的设置、列表的使用及文档的保存。项目2网页文档的编辑/17817三、任务实施1．创建一个空白文档选择【文件】菜单﹨【新建】命令，弹出如图2-7所示的新建文档界面，选择相应的文档类别，单击按钮。由于制作的是静态页面，所以这里选择的是“基本页”列表中的“HTML”。项目2网页文档的编辑/178182.打开现有文档方法一：选择【文件】菜单\【打开】命令，弹出“打开”对话框。如图2-8所示,在该对话框内选中要打开的文档，单击按钮，即可将选定的文档打开。项目2网页文档的编辑/17819方法二：在Windows资源管理器中选择要打开的文档，单击右键，从快捷菜单中选择“使用Dreamweaver编辑”选项。如图2-9所示。项目2网页文档的编辑/178203.设置文件的页面属性新的文档建好后，要先对文档的属性进行设置，主要包括指定页面的默认字体和字体大小、背景颜色、边距、链接样式等内容。设置文档页面属性的方法如下：（1）打开【修改】菜单﹨【页面属性】，或在文档窗口右健单击鼠标右健，然后从快捷菜单中选择【页面属性】选项，打开如图2-10所示对话框。项目2网页文档的编辑/17821其中，各项意义如下：①外观：为文档指定多种基本页面默认布局选项，如图2-11所示，字体：指定在Web页面中使用的默认字体。大小：指定在Web页面中使用的默认字体大小。文本颜色：指定显示字体的默认颜色。背景着色：指定文档的背景颜色。背景图像：指定文档的背景图像。重复：指定背景图像在页面上的显示方式。左边距和右边距：指定左右页边距的大小。上边距和下边距：指定上下页边距的大小。②链接：定义默认的字体、字体大小，以及链接、访问过的链接和活动链接的颜色。③标题：指定文档页中标题使用的字体、大小和颜色。项目2网页文档的编辑/178224.插入换行标签一般文本的换行是自动进行的，在大多数情况下，它由浏览器的窗口大小来决定。在浏览文本时，不同的窗口大小，可能导致文本中换行位置发生变化，同样在文档窗口中，窗口的大小也会影响段落的显示。有时希望将一组文字设置为一个段落，但是又希望在其中某个位置强行换行，这时可以使用换行标签BR。如希望在“湖北三峡职业技术学院信息系”中“信”字处强制换行，操作方法如下：①将光标移到文本中要强制换行处；②单击【插入】菜单\【标签】，打开“标签