商务网页实例项目03课件

1、 内容提要在了解了商务网站的相关理论后，如何利用网页制作软件实现网页的构想呢？本项目将为你打开网页制作的第一步。通过本项目的学习，可以了解到在Dreamweaver CS5中新建、管理、导入、导出本地站点的方法。本项目知识点相对单一，却是设计制作任何网站至关重要的第一步。本项目主要内容有： Dreamweaver CS5有关站点的概念。 Dreamweaver CS5创建站点的方法。 Dreamweaver CS5站点管理功能。 Dreamweaver CS5发布站点的方法。1简介站点可以简单地理解成存放站内信息的文件夹，是一组网页文档的集合。设计者通过各种链接把这些网页联系在一起，浏览者通过

2、不同的链接，可以从一个网页跳转到另一个网页，从而实现对整个网站的访问。网页制作的第一步不是制作一个网页，而是创建一个新的站点。Dreamweaver站点由3种类型的文件夹组成，这3种文件夹是否是同一个文件夹，取决于开发环境和所开发的网站类型。（1）本地文件夹。（2）远程文件夹。（3）测试服务器文件夹。活动1 了解有关站点的概念2站点的设计流程要设计一个好的网站并不简单，这需要做好充分的事先准备，如果准备做得好，那么在后续工作中往往会达到事半功倍的效果，反之，则会做很多无用功。在此，介绍站点设计的基本流程和几大步骤。第1步：对网站进行周密的规划，确定建站目的和面向的对象，明确几级页面，页面之间的

3、关系，服务器配置的各项情况等。第2步：建立完整的站点目录结构。第3步：使用网页制作工具完成网站的创建。3站点常见的素材文件1）文字。2）图像。3）声音。4）动画。5）视频。6）其他。除此以外，Dreamweaver中还能添加JavaScript、ActiveX控件等，使网页的动态效果千变万化。4常见站点结构以站点web为例，web站点根目录下，有images、css和swf三个文件夹和一个index.html文件，其中从文件名上就能看出index.html是该站点的首页，images文件夹存储网站所用的图片，也是网站的默认图片文件夹，css文件夹存放该网站的样式表，swf存放flash等多媒体

4、文件，如图3-1所示。该站点创建完成后在Dreamweaver“文件”面板中显示如图3-2所示。 图3-1 web站点结构 图3-2 web本地站点以上站点规划比较适合规模较小的网站，例如个人制作的个人空间等，如果要制作企业等一些专业性的网站或者商业购物网站，那么建立的站点结构就会复杂些，各部分有专门的子文件夹，每个部分的文件夹下均包括html文件夹和images文件夹分别存放文本资料和图片资料，但是值得注意的是，文件目录不适宜过深，一般不超过三层，因为目录过深，不容易管理。5站点的目录结构基本常识创建站点前，应该有所计划，将站点下的各文件及文件夹进行有效的分类，以便将来管理站点时节省更多的时

5、间。通常在本地磁盘上新建一个文件夹，该文件夹称为“根目录”，存放所有的站点资料。以下是站点目录结构的几个常识：1）一般主页文件名“index.html”，放在站点的根目录下。2）文件名通常使用小写英文字母，不使用空格、特殊符号，不使用中文。3）文件命名尽量以4种方式命名，即汉语拼音，汉语拼音缩写，英文，英文缩写。方便通过文件名直观地了解页面内容。切忌用默认的untitled-1、untitled-2、untitled-3等方式命名，即便是初学者，也需要养成很好的文件命名习惯。4）图像一般存放于单独的文件夹中，如“images”，“img”。5）各分支页面的文件存放在各自的文件夹中。1定义站点通

6、过之前的学习我们知道了站点的重要性和需要注意的地方，那么怎样在Dreamweaver 中创建站点呢？这里特别需要注意的是Dreamweaver CS5与之前的版本在站点的定义上的区别。Dreamweaver CS5定义站点时有所升级，取消了向导定义站点和直接定义站点，取而代之的是“站点设置对象”对话框来对站点进行定义。我们只需在“站点设置对象”对话框通过每个选项卡中的每个文本框一步一步引导我们创建一个新的站点。2创建贸贸女装本地站点（1）活动分析创建站点是制作网站前必不可少的，本例利用“站点设置对象”对话框一步步地创建一个新的站点。（2）知识要点 理解什么是Dreamweaver站点。 通过“

7、新建站点”命令创建一个站点。活动2 创建“贸贸女装”本地站点（3）动手操作步骤1 前期准备在本机E盘创建根目录文件夹maomaonvzhuang，在文件夹内新建images文件夹来存放图像，新建css文件夹来存放样式表，如图3-3所示。图3-3 maomaonvzhuang本地目录步骤2 创建站点1）打开Dreamweaver CS5软件。2）在Dreamweaver CS5窗口中，选择“站点”“新建站点”，如图3-4所示。步骤3 站点设置对象1）打开站点定义对话框，单击“站点”选项卡，在“您可以在此处为Dreamweaver站点选择本地文件夹和名称”的文本框中输入站点名称和本地站点文件夹的位

8、置，如图3-5所示。 图3-4 新建站点图3-5 “站点“选项卡2）单击“服务器”选项卡，此处将在此位置上选择承载web的页面服务器。如果要链接到Web并发布页面，则只需定义一个远程服务器即可。如果只在Dreamweaver站点上工作，则无需完成此步骤，如图3-6所示。图3-6 “服务器”选项卡3）在需要添加的时候，单击空白列表下面的“”按钮，在弹出的对话框的文本框中依次输入服务器的相关信息即可。本书的案例以本地站点为基础，因此直接保存跳至“高级设置”选项卡。如图3-7、图3-8所示。4）单击“高级设置”选项卡，出现高级选项卡的下拉选项卡。在本地信息选项卡的“默认图片文件夹”文本框中单击文件夹

9、图标选择站点默认的图片文件夹。在“链接相对于”中选择“文档”按钮。如果没有定义远程服务器则在Web URL文本框中输入Web URL，如果已定义远程服务器，则Dreamweaver CS5根据设置的远程服务器自动生成Web URL。“启用缓存”选项是用来设置是否建立高速缓存文件，它的作用是为每个实际存在的文件创建一条记录，当移动、删除和重命名时，迅速更新链接，建议选中该复选框。剩余选项卡没有特别要求一律选择默认，不作更改，如图3-9所示。5）单击“保存”按钮，Dreamweaver CS5创建初始站点缓存，站点创建完成，在文件面板中可以查看，如图3-10所示。如果文件面板没有显示，可通过“窗口

10、”“文件”菜单命令或者直接按键即可打开文件面板。图3-10 maomaonvzhuang本地站点1站点管理功能Dreamweaver CS5包含许多站点管理功能，例如建立站点，编辑站点，复制、删除站点以及导入、导出站点。这些操作对网站的建立和编辑提供了便利。2管理站点在Dreamweaver CS5中，所定义的站点是以本地文件夹为根目录的，当该文件夹被删除、移动或重命名后，站点将无法正确使用，重新新建站点又需要浪费更多的时间和精力，因此可以对该站点进行编辑操作或者删除操作。可以通过执行“站点”“管理站点”菜单命令对站点进行管理，如图3-11所示。打开“管理站点”对话框，如图3-12所示。活动3

11、 管 理 站 点（1）新建站点单击“新建”按钮，弹出对话框后的操作和“站点”“新建站点”相同，如图3-13所示。（2）编辑站点编辑当前选定的站点，如图3-14所示。选择后重新弹出“站点设置对象”对话框，可以对站点的所有对象重新进行设置。（3）复制站点复制当前选定的站点，如图3-15所示。（4）删除站点删除当前选定的站点，如图3-16所示。（5）导出站点导出当前的站点，用于网站备份。（6）导入站点导入当前的站点，比如将备份文件导入到站点内。3使用“文件”面板管理文件和文件夹（1）打开文件（2）新建文件或文件夹（3）删除站点文件或文件夹（4）重命名文件或文件夹（5）移动文件或文件夹（6）刷新“文件

12、”面板（1）活动分析Dreamweaver具有与远程服务器进行文件传输的功能，通过站点窗口，可以将本地站点结构复制到远程站点上，也可以将远程站点结构复制到本地计算机中。当在本地站点创建了链接关系并连接到远程站点后，就可以向远程站点传递文件，因为两个站点的结构是完全相同的。（2）知识要点 学习Dreamweaver的远程传输功能。 上传站点。（3）动手操作活动4 发布“贸贸女装”站点步骤1 定义远程站点1）在“文件”面板的站点列表中选中需要上传的站点，如图3-17所示。2）单击“文件”面板的“上传文件”按钮，如图3-18所示。3）此时弹出对话框提示需要定义远程服务器，单击“是”按钮，如图3-19

13、所示。4）单击“是”按钮后，界面跳转至“站点设置对象 添加服务器”对话框，单击“添加新服务器”按钮，如图3-20所示。5）在弹出的对话框中，依次填写“服务器名称”，选择“连接方法”为“FTP”，填写“FTP地址”“用户名”和“密码”，单击“保存”按钮，如图3-21所示。6）回到“站点设置对象 添加服务器”对话框，同样单击“保存”按钮。步骤2 上传站点文件1）在“文件”面板中单击“展开以显示本地和远程站点”按钮，打开站点窗口，如图3-22所示。2）打开站点窗口后，在右侧的“本地文件”窗口中选择要上传的文件及文件夹，单击“上传”按钮，如图3-23所示。3）单击“上传”按钮后，将弹出提示对话框，确定是否上传整个站点，单击“确定”按钮，上传文件。4）上传的过程需要一点时间，待文件全部上传后，站点