《网页设计与制作电子课件_第2章 创建站点》由会员分享，可在线阅读，更多相关《网页设计与制作电子课件_第2章 创建站点（38页珍藏版）》请在金锄头文库上搜索。
1、第二章 创建站点,2.1 Dreamweaver MX 8.0 工作界面 2.2 定义站点 2.3 发布站点,2.1 Dreamweaver MX 8工作界面,Dreamweaver 8是Dreamweaver 系列产品的最新版本，它在原来版本的功能基础之上进行了改进和升级，功能更加强大，而且界面更美观、操作更方便，也更适于网页制作和网站管理。 Dreamweaver 8的工作界面由“菜单”栏、“插入”栏、“文档”窗口、“文档”工具栏、状态栏、属性面板、标签选择器、集成工作面板等部分组成，如下图所示。,1. “插入”栏“插入”栏包含用于创建和插入对象（如表格、层和图像）的按钮。这些按钮被分类组
2、织到各个选项卡中。如图所示。当鼠标指针滚动到一个按钮上时，会出现一个工具提示，其中含有按钮的名称。,2. “菜单”栏 菜单栏提供了程序功能的选项命令，可以通过“菜单栏”中的命令完成某项特定操作。,3. “文档”窗口 通过“文档”窗口可以显示、创建和编辑当前文档，可以在“设计”视图、“代码”视图或“设计和代码”视图中查看和编辑文档。 “文档”窗口的状态栏位于文档窗口的底部，作用是提供与用户正编辑的文档有关的某些信息，如当前窗口大小、文档大小和估计下载时间等等。,代码视图,设计和代码视图,设计视图,状态栏,4.“文档”工具栏 “文档”工具栏中主要包含了一些对文档进行常用操作的功能按钮，用户通过单击
3、这些按钮可以在文档的不同视图间进行快速切换：“代码”视图、“设计”视图、同时显示“代码”和设计视图的拆分视图。 工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。,5.“属性”面板 “属性”面板并不是将所有的属性加载在面板上，而是根据我们选择的对象来动态显示对象的属性，“属性”面板的状态完全是随当前在文档中选择的对象来确定的。例如，当前选择了一幅图像，那么“属性”面板上就出现该图像的相关属性；如果选择了表格，那么“属性”面板会相应的变化成表格的相关属性。下图所示，是选择了文本对象的属性。,2.2 定义本地站点,在 Dreamweaver中，“站点”一词既表示Web站
4、点，又表示属于Web站点的文档的本地存储位置。在开始构建Web站点之前，您需要建立站点文档的本地存储位置。Dreamweaver 站点可组织与 Web 站点相关的所有文档，跟踪和维护链接、管理文件、共享文件以及将站点文件传输到Web服务器上。 要制作一个能够被大家浏览的网站，首先需要在本地磁盘上制作，放置在本地磁盘上的网站被称为本地站点，传输到位于互联网web服务器里的网站被称为远程站点。Dreamweaver 8提供了对本地站点和远程站点强大的管理功能。 因而应用Dreamweaver 8不仅可以创建单独的文档，还可以创建完整的Web站点。,规划站点结构 网站是多个网页的集合，其包括一个首页
5、和若干个分页，这种集合不是简单的集合。为了达到最佳效果，在创建任何 Web 站点页面之前，要对站点的结构进行设计和规划。决定要创建多少页，每页上显示什么内容，页面布局的外观以及各页是如何互相连接起来的。 我们可以通过把文件分门别类的放置在各自的文件夹里，使网站的结构清晰明了，便于管理和查找。 创建站点 在Dreamweaver 8中可以有效的建立并管理多个站点。搭建站点有两种方法，一是利用向导完成，二是利用高级设定来完成。 在搭建站点前，我们先在自己的电脑硬盘上建一个以英文或数字命名的空文件夹。 比如：www,2.2.1定义web站点,启动Dreamweaver 8，选择菜单栏站点管理站点，出
6、现“管理站点”对话框如下图所示。点击“新建”按钮，选择弹出菜单中的“站点”项。,在打开的窗口上方有“基本”和“高级”两个标签，可以在站点向导和高级设置之间切换。 新建一个站点，站点名为：www，设置本地根文件夹和默认图像文件夹。,搭建站点结构 站点是文件与文件夹的集合，下面我们根据前面对WWW网站的设计，来新建WWW站点要设置的文件夹和文件。通常我们建议目录、文件的名称用英文字母、数字、下划线的组合，其中不要包含汉字、空格和特殊字符；目录名应以英文、拼音为主。尽量用一些常见能看懂的词汇，使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义。 4. 编辑站点 单击“管理站点”对话框中的编
7、辑，打开“WWW站点定义”对话框，对站点名称及路径或其它的相关信息进行编辑。,新建文件夹：在文件面板的站点根目录下单击鼠标右键，从弹出菜单中选择“新建文件夹”项，然后给文件夹命名。这里我们创建flash文件夹。 用于存放flash动画文件。 接下来创建页面，在文件面板的站点根目录下单击鼠标右键，从弹出菜单中选择“新建文件”项，然后给文件命名。首先要添加首页，我们把首页命名为index.htm.,2.2.2 管理站点 单击“站点”菜单“管理站点”命令，弹出“管理站点”对话框，进行新建、编辑、删除、复制站点等操作。 下面以修改站点的名称，改变站点的对应的本地根文件夹路径为例进行讲解。 步骤1 单击
8、“管理站点”对话框中“编辑”按钮，如下图所示。 步骤2 弹出“myweb的站点定义为”的对话框，单击“高级”选项卡，选择“本地信息”，修改了站点的名称、站点的路径等。,2.2.3 编辑网页,在建好站点之后，我们以下边的简单网页为例，叙述一下网页的编辑制作过程。简单网页如下图：,在开始制作之前，我们先对这个页面进行一下分析。 背景：添加了一个背景图像。 IE浏览器顶端的主题栏是“带您走入网络世界”。 网页上方有一行文字。 添加一个FLASH文字动画。 有一幅世界地图图像。 最下面有一个超链接。,在建好站点之后，就是创建网页。 1.新建网页 在Dreamweaver中，创建网页的方法很多，此处介绍
9、以下三种方法。 方法一 打开“文件”面板，在站点根文件夹下单击鼠标右键，从弹出菜单中选择“新建文件”命令。 方法二 启动Dreamweaver后，窗口中会出一个启动界面，单击“创建新项目”下面的“HTML”项，即可创建网页。 方法三 选择“文件”菜单|“新建”命令，弹出“新建文档”对话框，选定“常规”选项卡中“类别”下的“基本页”选项中“HTML”，单击“创建”按钮，即可创建网页，默认名称为“Untitled-1”。,2.保存网页 网页在编辑过程或编辑完成后，要及时保存。用户可选择“直接保存”、“另存为”、“保存为模板”等命令。 保存文件 选择“文件”菜单“保存”命令，如果是第一次保存，会弹出
10、“另存为”的对话框，在“保存在”下拉列表中选择保存文件的位置，在“文件名”文本框中输入保存文件的名称，如果不是第一次保存，则会直接覆盖保存。网页保存的快捷键：Ctrl+S。 另存为文件 选择“文件”菜单“另存为文件”命令，弹出“另存为”的对话框，将已经保存的文件另存到其它位置，或重新命名保存。 保存为模板 选择“文件”菜单“另存为模板”命令，弹出“另存为模板”对话框，输入模板的名称，单击“保存”将文件保存为模板。,网页的制作过程如下： 第一步，在“文档”工具栏中输入网页标题，将在浏览器的标题栏中显示。,第二步，如何添加背景图像。点击属性面板中的“页面属性”按钮，添加“页面属性”对话框，在外观选
11、项中设置背景图像。（或选择“修改”菜单“页面属性”命令）,第三步，输入文字，居中对齐。,设置文字的格式：选中文字，对照“属性”面板中的文字的属性，将其字体格式设置成默认字体。大小可任意更改字号，“B”表示将字体变粗。 光标放在文本段落中，单击属性面板中的对齐方式。 设置文字的颜色：首先选中文字，在“属性”面板中，单击颜色选择图标，在弹出的颜色选择器中用滴管选取颜色即可。,插入FLASH动画：插入栏中常用选项中的flash按钮。,插入图像 插入图像可以选择以下任意一种方法： （1）使用“插入”菜单：在“插入”菜单选“图像”，弹出“选择图像源文件”对话框，选中该图像文件，单击“确定”按钮。 （2）
12、使用插入栏：单击“插入”栏|“图像”按钮，弹出“选择图像源文件”对话框，其余操作同上。 （3）使用 “资源”面板：单击“图像”选项，查看图片，选定图像文件，用鼠标拖动至工作区合适位置。,最后添加一个链接，如选中“网页三剑客”，在其“属性”面板的链接框里输入链接地址。,2.3 发布站点,网站完成后，就可以将网站发布到互联网中，浏览者通过浏览器可以访问该网站。 一、申请网页空间 .作为学生来说，一般可上网申请免费的个人空间及免费的域名，然后将作品上传到个人空间。 2.如果是用于商业用途，可以向ICP（互联网信息服务提供商）申请交费的虚拟空间或租用整台服务器。 二、上传网站 .设置远程站点，点击“站
13、点”菜单“管理站点”命令，单击编辑站点，选择“高级”选项中的远程信息，选中访问下拉列表中的FTP，输入远程站点的FTP地址，用户名和密码，单击“确定”按钮。如图所示：,2.上传站点点击文件面板中的展开以显示本地和远程站点。,单击“连接远程站点”按钮，开始远程FTP站点相连。 选中本地站点中要上传到远程服务器的内容，单击“上传”按钮。 如果要将远程站点中的内容下载到本地站点，可单击“下载”按钮。,上传,下载,本章小结,本章主要介绍了以下内容： 1Dreamweaver 8.0的工作界面； 2管理站点：创建本地站点、编辑站点； 3简单网页制作； 4将本地站点信息上传远程站点。练习题 1.简答题 简述定义本地站点的流程。,上 机 实 训 背景知识根据本章所学的内容，创建站点和创建网页。 实训准备工作在本地硬盘创建一个空文件夹myweb，并建一个子文件夹images。 实训要求 创建站点和创建网页 要求：定义本地站点和新建一个网页。 课时安排：1课时,
