工信版（中职）网页设计与制作-2电子课件.ppt

YCF（中职）网页设计与制作-2电子课件网页设计与制作网页设计与制作教 学 课 件第2章网站开发与网页制作准备 本章主要内容：Dreamweaver MXDreamweaver MX的工作界面的工作界面Dreamweaver MXDreamweaver MX中站点的建立与发布中站点的建立与发布网页的新建、打开、保存与预览网页的新建、打开、保存与预览2.1 2.1 任务一：任务一：Dreamweaver MX 2004Dreamweaver MX 2004的工作界面的工作界面 2.1.1 Dreamweaver MX 20042.1.1 Dreamweaver MX 2004的工作区布局的工作区布局 选择【开始】选择【开始】【程序】【程序】【MacromediaMacromedia】【Macromedia Dreamweaver MX 2004Macromedia Dreamweaver MX 2004】，即可启动】，即可启动Dreamweaver MXDreamweaver MX，第一次启动，第一次启动Dreamweaver MXDreamweaver MX时，将打开时，将打开“工作区设置工作区设置”对话框。对话框。如图如图1 1、“设计者设计者”工作区布局工作区布局 选择左边的选择左边的“设计者设计者”选项，单击【确定】按钮进入选项，单击【确定】按钮进入“设计设计者者”工作区模式。工作区模式。“设计者设计者”工作区布局采用多文档界面形工作区布局采用多文档界面形式，将所有文档窗口以及面板模式集合到主窗口中，将面板式，将所有文档窗口以及面板模式集合到主窗口中，将面板组叠放在窗口的右边，以方便用户操作。组叠放在窗口的右边，以方便用户操作。左边是左边是“设计者设计者”工作区布局，右边是工作区布局，右边是“代码编写者代码编写者”工作区布局。工作区布局。“设计者设计者”工作区布局工作区布局 2.1 2.1 任务一：任务一：Dreamweaver MX 2004Dreamweaver MX 2004的工作界面的工作界面2 2、代码编写者工作区模式、代码编写者工作区模式 以同样的方法，点选以同样的方法，点选“代码编写者代码编写者”选项。单击【确定选项。单击【确定】按钮，进入】按钮，进入“代码编写者代码编写者”工作区模式。工作区模式。“代码编写者代码编写者”工作区布局主要为习惯用代码编写网页工作区布局主要为习惯用代码编写网页的用户而设计的，网页设计初学者一般不用，该工作方的用户而设计的，网页设计初学者一般不用，该工作方式也集成工作区，但区别在于浮动面板组停靠在左侧式也集成工作区，但区别在于浮动面板组停靠在左侧 2.1.2 Dreamweaver MX 2004的工作窗口的工作窗口2.2 2.2 任务二：创建站点任务二：创建站点 2.2.1 2.2.1 站点规划站点规划(1)(1)确定站点目标确定站点目标 (2)(2)确定目标群体确定目标群体 (3)(3)注意区分浏览器注意区分浏览器 (4)(4)安排站点结构安排站点结构 (5)(5)设计导航方案设计导航方案 (6)(6)网页设计网页设计 (7)(7)资源准备资源准备 2.2 2.2 任务二：创建站点任务二：创建站点另外在规划站点结构时，应该遵循一下一些规则：另外在规划站点结构时，应该遵循一下一些规则：(1)(1)合理的命名文件名称合理的命名文件名称 为了方便管理，文件夹和文件的名称最好要有具体的为了方便管理，文件夹和文件的名称最好要有具体的含义。还有，应该尽量避免使用中文文件名。含义。还有，应该尽量避免使用中文文件名。(2)(2)本地站点与远程站点结构统一本地站点与远程站点结构统一 为了方便维护和管理，设置本地站点时，应该将位为了方便维护和管理，设置本地站点时，应该将位于本地计算机上的本地站点与位于于本地计算机上的本地站点与位于InternetInternet服务服务器上的远程站点的结构设计保持一致。器上的远程站点的结构设计保持一致。2.2 2.2 任务二：创建站点任务二：创建站点2.2.2 建立测试服务器建立测试服务器 测试服务器在动态网页的制作过程中必不可少。制测试服务器在动态网页的制作过程中必不可少。制作和数据库连接的动态网页时，很多服务器端的脚本，作和数据库连接的动态网页时，很多服务器端的脚本，如如ASPASP、JSPJSP等都需要在服务器端运行。这时就不能用本等都需要在服务器端运行。这时就不能用本地预览功能来预览网页，而必须架设真正的地预览功能来预览网页，而必须架设真正的WWWWWW服务器服务器来提供服务器脚本执行的功能。但来提供服务器脚本执行的功能。但Dreamweaver MXDreamweaver MX本身本身不提供测试服务器，设计者应该根据需要安装第三方的不提供测试服务器，设计者应该根据需要安装第三方的服务器软件。下面将介绍如何使用微软公司的服务器软件。下面将介绍如何使用微软公司的IISIIS（Internet Information ServiceInternet Information Service）软件来实现测）软件来实现测试服务器的功能。试服务器的功能。2.2 2.2 任务二：创建站点任务二：创建站点1 1、IISIIS的安装的安装 打开【控制面板】打开【控制面板】【添加删除程序】，打开【添加删除程序】，打开“添加删添加删除程序除程序”对话框，选择【添加删除对话框，选择【添加删除windowswindows组件】，此组件】，此时打开时打开如图如图2-122-12所示的所示的“windows“windows组件向导组件向导”对话框。对话框。复选【复选【InternetInternet信息服务（信息服务（IISIIS）】，单击【下一步】）】，单击【下一步】按钮开始安装。按钮开始安装。图图2-12 windows组件向导组件向导 2.2 2.2 任务二：创建站点任务二：创建站点2 2、配置测试服务器、配置测试服务器 安装了安装了IISIIS后，计算机就启动了后，计算机就启动了WebWeb服务器服务，接下来服务器服务，接下来需要对服务器进行配置。配置过程如下：需要对服务器进行配置。配置过程如下：(1)(1)打开【控制面板】打开【控制面板】【管理工具】【管理工具】【InternetInternet服务服务管理器】。管理器】。(2)(2)右击【默认的右击【默认的WebWeb站点】，在弹出菜单中选择【属性站点】，在弹出菜单中选择【属性】。打开】。打开“默认默认WebWeb属性属性”对话框，选择【主目录】选对话框，选择【主目录】选项卡。项卡。(3)(3)有关有关wwwwww服务的配置选项很多，大部分选项设置为默服务的配置选项很多，大部分选项设置为默认值即可，仅需要更改少数选项。认值即可，仅需要更改少数选项。2.2 2.2 任务二：创建站点任务二：创建站点3、配置远程服务器 Dreamweaver MXDreamweaver MX支持多种类型的远程服务器，但最常支持多种类型的远程服务器，但最常用的是用的是FTPFTP服务器的方式，即通过服务器的方式，即通过FTPFTP服务实现本地服服务实现本地服务器与远程服务器之间的上传下载，安装了务器与远程服务器之间的上传下载，安装了IISIIS后，计后，计算机就启动了算机就启动了FTPFTP服务，可以作为服务，可以作为Dreamweaver MXDreamweaver MX的远的远程服务器。可在计算机管理窗口中右击【默认程服务器。可在计算机管理窗口中右击【默认FTPFTP服务服务】【属性】，打开【属性】，打开如图如图2-152-15所示所示的默认的默认FTPFTP站点属性站点属性对话框，配置服务器的本地路径和访问权限。对话框，配置服务器的本地路径和访问权限。图2-15 默认FTP站点属性 2.2 2.2 任务二：创建站点任务二：创建站点2.2.3 2.2.3 创建本地站点创建本地站点 创建一个新站点的步骤如下：创建一个新站点的步骤如下：1 1、在本地硬盘上建立一个用来存放站点的文件夹，这、在本地硬盘上建立一个用来存放站点的文件夹，这个文件夹就是本地站点的根目录。个文件夹就是本地站点的根目录。2 2、启动、启动Dreamweaver MX 2004Dreamweaver MX 2004，选择菜单【站点】，选择菜单【站点】【管理站点】命令，打开【管理站点】命令，打开“站点管理站点管理”对话框，继对话框，继续执行【新建】续执行【新建】【站点】命令。【站点】命令。3 3、弹出站点定义对话框，在其中设置新建站点的参数。、弹出站点定义对话框，在其中设置新建站点的参数。默认状态下，激活的是默认状态下，激活的是“高级高级”页框，并且页框中页框，并且页框中“分类分类”列表选中的是列表选中的是“本地信息本地信息”。这部分主要。这部分主要定义了如下信息：定义了如下信息：2.2 2.2 任务二：创建站点任务二：创建站点站点名称：输入网站的名称，网站名显示在站点面板站点名称：输入网站的名称，网站名显示在站点面板中的站点下拉列表中。站点名称可以使用喜欢的任何名中的站点下拉列表中。站点名称可以使用喜欢的任何名称，它不会在浏览器上显示，只是用来做参考。称，它不会在浏览器上显示，只是用来做参考。本地根文件夹：指定放置该站点文件、模板、库的本地本地根文件夹：指定放置该站点文件、模板、库的本地文件夹。文件夹。自动刷新本地文件夹列表：选择是否每次拷贝文件到本自动刷新本地文件夹列表：选择是否每次拷贝文件到本地站点时都自动更新本地文件夹列表。地站点时都自动更新本地文件夹列表。默认图像文件夹：设定站点默认的图片存放文件夹的位默认图像文件夹：设定站点默认的图片存放文件夹的位置。置。HTTPHTTP地址：输入你使用的完整网站的地址：输入你使用的完整网站的URLURL。缓存：选择是否创建一个缓存以提高链接和网站维护任缓存：选择是否创建一个缓存以提高链接和网站维护任务的速度。务的速度。2.2 2.2 任务二：创建站点任务二：创建站点2.2.4 2.2.4 创建动态站点创建动态站点 1 1、启动、启动Dreamweaver MX 2004Dreamweaver MX 2004，选择菜单下【站点】，选择菜单下【站点】【管理站点】命令，打开【管理站点】命令，打开“站点管理站点管理”对话框，继续对话框，继续执行【新建】执行【新建】【站点】命令，选择【基本】选项卡，【站点】命令，选择【基本】选项卡，弹出如图弹出如图2-182-18所示的站点定义对话框，为网站起个名所示的站点定义对话框，为网站起个名字字 。2、完成后单击【下一步】按钮，在如图、完成后单击【下一步】按钮，在如图2-19所示的对话所示的对话框中设置网站是否使用服务器技术。这里制作的是动框中设置网站是否使用服务器技术。这里制作的是动态网页，所以选择第二项态网页，所以选择第二项“是，我想使用服务器技术是，我想使用服务器技术”。在。在“哪种服务技术？哪种服务技术？”下拉表单中，选择下拉表单中，选择“ASP VBScript”。2.2 2.2 任务二：创建站点任务二：创建站点3 3、完成后单击【下一步】按钮，在如图、完成后单击【下一步】按钮，在如图2-202-20所示的对话所示的对话框中设置在开发过程中如何使用您的文件。选择第一框中设置在开发过程中如何使用您的文件。选择第一项项“在本地进行编辑和测试（我的测试服务器是这台在本地进行编辑和测试（我的测试服务器是这台计算机），然后指定文件存储在计算机上的什么位置，计算机），然后指定文件存储在计算机上的什么位置，如：如：“D:lfzhjxy“D:lfzhjxy校园网站校园网站”。4 4、完成后单击【下一步】按钮，开始设置、完成后单击【下一步】按钮，开始设置“应该使用什应该使用什么么URLURL来浏览站点的根目录？来浏览站点的根目录？”，如图，如图2-212-21所示，选择所示，选择默认路径即可。默认路径即可。5 5、完成后单击【下一步】按钮，开始设置、完成后单击【下一步】按钮，开始设置“是否需要远是否需要远程服务器程服务器”，选择第二项【否】。，选择第二项【否】。2.2 2.2 任务二：创建站点任务二：创建站点6 6、完成后单击【下一步】按钮，、完成后单击【下一步】按钮，单击【完成】按钮后，单击【完成】按钮后，DreamweaverDreamweaver将自动加载所定义的站点。将自动加载所定义的站点。2.2 2.2 任务二：创建站点任务二：创建站点2.2.5 2.2.5 站点的管理与维护站点的管理与维护 1 1、打开站点、打开站点 启动启动Dreamweaver MX 2004Dreamweaver MX 2004之后，系统会自动地打之后，系统会自动地打开上一次退出开上一次退出Dreamweaver MX 2004Dreamweaver MX 2004时正在编辑的站时正在编辑的站点。如果想打开另外一个站点，则应展开【文件】面点。如果想打开另外一个站点，则应展开【文件】面板，从左边的下拉列表选择当前已经定义的站点。板，从左边的下拉列表选择当前已经定义的站点。2 2、编辑站点、编辑站点 选择菜单【站点】选择菜单【站点】【管理站点】，然后选择需要【管理站点】，然后选择需要编辑的站点，点击【编辑】按钮，弹出站点定义对话编辑的站点，点击【编辑】按钮，弹出站点定义对话框，可以对现有站点进行修改，复制、删除、导入及框，可以对现有站点进行修改，复制、删除、导入及导出等操作。导出等操作。2.2 2.2 任务二：创建站点任务二：创建站点2.2.6 2.2.6 发布站点发布站点 发布站点是将用户创建在本地计算机的一个站点复制发布站点是将用户创建在本地计算机的一个站点复制到服务器上指定到服务器上指定URLURL的过程。如果想修改已经发布的站的过程。如果想修改已经发布的站点，可以在本地修改网站，再重新发布，以便在不影点，可以在本地修改网站，再重新发布，以便在不影响别人使用的情况下完成站点的维护、更新。设置发响别人使用的情况下完成站点的维护、更新。设置发布站点的步骤如下：布站点的步骤如下：2.2 2.2 任务二：创建站点任务二：创建站点1 1、打开站点定义对话框，选择【高级】、打开站点定义对话框，选择【高级】【远程信息】【远程信息】远程站点属性如下：远程站点属性如下：远程站点的访问方法：远程站点的访问方法：Dreamveaver MXDreamveaver MX中可以通过多种方式访问远中可以通过多种方式访问远程站点。其中程站点。其中FTPFTP是最常用的方法，这里选是最常用的方法，这里选FTPFTP。FTP FTP 主机：主机：FTPFTP远程主机名。本例设置为远程主机名。本例设置为MySiteMySite。主机目录：远程目录名。本例中设置为主机目录：远程目录名。本例中设置为MySiteMySite。登录：输入访问登录：输入访问FTPFTP服务器的用户名。服务器的用户名。密码：输入访问密码：输入访问FTPFTP服务器的用户密码。服务器的用户密码。其它选项使用默认值。其它选项使用默认值。设置完成，首先单击【测试】按钮，如果成功连接到远程服务器，设置完成，首先单击【测试】按钮，如果成功连接到远程服务器，则单击【确定】，完成设置。则单击【确定】，完成设置。2.2 2.2 任务二：创建站点任务二：创建站点2 2、在站点定义对话框中，选择高级选项卡，单击分类中、在站点定义对话框中，选择高级选项卡，单击分类中的【测试服务器】。的【测试服务器】。设置服务器模型：在下拉列表中选择设置服务器模型：在下拉列表中选择ASP VBScriptASP VBScript。设置访问测试服务器的方式：在下拉列表中选择设置访问测试服务器的方式：在下拉列表中选择FTPFTP方式。方式。设置设置FTPFTP主机：主机：LocalhostLocalhost。设置主机目录：设置主机目录：mysitemysite。其他按默认值设置即可。完成后单击【确定】按钮其他按默认值设置即可。完成后单击【确定】按钮 2.2 2.2 任务二：创建站点任务二：创建站点3 3、上传站点。、上传站点。(1)(1)单击【窗口】单击【窗口】【文件】，打开文件面板，单击文件面【文件】，打开文件面板，单击文件面板中的【扩展板中的【扩展/折叠】按钮，打开本地站点和远程站点窗折叠】按钮，打开本地站点和远程站点窗口，如图口，如图2-272-27所示。所示。单击【连接】按钮，连接到远程站点，然后选择需要上传单击【连接】按钮，连接到远程站点，然后选择需要上传的站点文件夹或部分文件，单击【上传文件】按钮，完的站点文件夹或部分文件，单击【上传文件】按钮，完成站点的发布。成站点的发布。注：虽然远程服务器和测试服务器一样，都是用了注：虽然远程服务器和测试服务器一样，都是用了IISIIS的的默认默认FTPFTP服务，但两者的本质不同。测试服务器中使用的服务，但两者的本质不同。测试服务器中使用的FTPFTP服务是为了向测试服务器上载文件，以便进行站点动服务是为了向测试服务器上载文件，以便进行站点动态内容的测试；而远程服务器中使用态内容的测试；而远程服务器中使用FTPFTP则是发布、修改、则是发布、修改、维护网页，同时可以和其他设计者共享站点文件，协同维护网页，同时可以和其他设计者共享站点文件，协同工作。工作。2.3 2.3 任务三：网页的建立、打开、保存与预览任务三：网页的建立、打开、保存与预览 2.3.1 2.3.1 新建网页新建网页启动启动Dreamweaver MXDreamweaver MX，执行【文件】，执行【文件】【新建】命令，【新建】命令，打开打开“新建文档新建文档”对话框，选择所需类别和基本页，对话框，选择所需类别和基本页，点击【创建】按钮，即可创建新的网页。点击【创建】按钮，即可创建新的网页。2.3.2 2.3.2 打开已有的网页打开已有的网页打开已有的网页有两种方法：打开已有的网页有两种方法：1 1、执行【文件】、执行【文件】【打开】命令，在弹出的对话框中选【打开】命令，在弹出的对话框中选择需要打开的文件。选定后单击【打开】按钮，即可择需要打开的文件。选定后单击【打开】按钮，即可打开此文件。打开此文件。2 2、单击标准工具栏上的【打开】按钮，在弹出的对话框、单击标准工具栏上的【打开】按钮，在弹出的对话框选取要打开的文件，同样可以打开网页。选取要打开的文件，同样可以打开网页。2.3 2.3 任务三：网页的建立、打开、保存与预览任务三：网页的建立、打开、保存与预览2.3.3 2.3.3 保存网页保存网页1 1、编辑好的网页需要将其保存起来，执行【文件】、编辑好的网页需要将其保存起来，执行【文件】【保存】命令，或者按下【保存】命令，或者按下【CtrlCtrl】【】【S S】组合键。】组合键。2 2、打开、打开“另存为另存为”对话框，。在【保存在】下拉列表中对话框，。在【保存在】下拉列表中选择文件保存的位置。在【文件名】文本框中输入保选择文件保存的位置。在【文件名】文本框中输入保存文件的名称。完成设置后单击【保存】按钮，即可存文件的名称。完成设置后单击【保存】按钮，即可完成保存。完成保存。2.3 2.3 任务三：网页的建立、打开、保存与预览任务三：网页的建立、打开、保存与预览2.3.4 2.3.4 页面属性调整页面属性调整页面属性包括网页中文本的颜色、网页的背景颜色、背页面属性包括网页中文本的颜色、网页的背景颜色、背景图像、网页边距等等。执行【修改】景图像、网页边距等等。执行【修改】【页面属性【页面属性】命令或者在【属性】面板上单击【页面属性】按钮，】命令或者在【属性】面板上单击【页面属性】按钮，打开打开“页面属性页面属性”对话框。对话框。1 1、外观选项、外观选项 页页面面字字体体：设设置置网网页页中中一一般般文文字字的的默默认认字字体体格格式式、大小、文本颜色，包括加粗、倾斜等。大小、文本颜色，包括加粗、倾斜等。页页面面背背景景：包包括括背背景景颜颜色色、背背景景图图像像。如如果果同同时时设设置置了了背背景景颜颜色色和和背背景景图图片片，北北京京图图片片将将覆覆盖盖背背景景颜颜色色的的设置。设置。边距：指页面内容与浏览器边框之间的距离。边距：指页面内容与浏览器边框之间的距离。2.3 2.3 任务三：网页的建立、打开、保存与预览任务三：网页的建立、打开、保存与预览2 2、链接、链接 链接字体：指超级链接文字的字体、大小及样式。链接字体：指超级链接文字的字体、大小及样式。链链接接颜颜色色：可可以以设设置置超超级级链链接接的的四四种种状状态态的的颜颜色色，包包括括初初始始颜颜色色、鼠鼠标标悬悬停停颜颜色色、鼠鼠标标按按下下颜颜色色、已已访访问问链接的颜色。链接的颜色。下划线样式：指定超级链接是否有下划线、或下划线下划线样式：指定超级链接是否有下划线、或下划线的样式。的样式。3、标题、标题/编码编码设置网页的标题以及网页文字的编码方式。设置网页的标题以及网页文字的编码方式。2.3 2.3 任务三：网页的建立、打开、保存与预览任务三：网页的建立、打开、保存与预览2.3.5 2.3.5 预览制作的效果预览制作的效果 执行【文件】执行【文件】【在浏览器中预览】命令，选择适【在浏览器中预览】命令，选择适用的浏览器进行网页的预览或按快捷键【用的浏览器进行网页的预览或按快捷键【F12F12】进行网】进行网页预览。页预览。本章小结熟悉熟悉Dreamweaver MXDreamweaver MX的文档窗口与站点窗口操作的文档窗口与站点窗口操作熟练使用熟练使用Dreamweaver MXDreamweaver MX的各种面板的各种面板学会新建、保存、预览网页和打开已有网页学会新建、保存、预览网页和打开已有网页 学会创建、管理和发布站点学会创建、管理和发布站点