第章情景一——认识网页和网站课件.pptVIP

2. Dreamweaver CS5主要面板 ⑴“插入”面板： ⑵“文件”面板 ⑶“CSS样式”面板 ⑷“网格”线 1.3.2 工作任务和设计效果 制作中国马文化博物馆网站。是一个以展示马文化为主旨的专题博物馆。通过本任务了解Dreamweaver CS5中网页文件的建立方法。常见网页元素的插入、控制，简单版面的布局，页面之间的超链接，站点的建立及站点文件的管理等。设计效果如图所示。 1.3.3 认识Dreamwweaver CS5 Dreamweaver CS5是Adobe公司必威体育精装版推出的网页制作软件，用于对网站、网页和Web应用程序进行设计、编码和开发。它广泛用于网页制作和网站管理。Dreamweaver CS5为开发各种网页和网页文档提供了灵活的环境，除了可以制作HTML静态网页外，还可以使用ASP、PHP或JSP技术，创建基于数据库的交互式动态网页。此外，Dreamweaver CS5对CSS样式表提供了更强劲的支持，并扩展了对XML和XSLT技术的支持，以帮助设计人员创建功能复杂的专业级Web页面。 1、启动 安装Dreamweaver CS5软件之后，可以执行Windows的“开始”|“程序”|Adobe Dreamweaver CS5命令，启动该软件，弹出欢迎屏幕，如图1-3-8所示。用于打开最近使用过的文档或创建新文档。其中有3个栏目，分别是打开最近的项目、新建和主要功能。在3个栏中单击任意一个栏中的文字和图标，都可打开相应的功能程序或窗口。 Dreamweaver 为处理各种 Web 文档提供了灵活的环境。除了 HTML 文档以外，您还可以创建和打开各种基于文本的文档，如 ColdFusion 标记语言 (CFML)、ASP、JavaScript 和层叠样式表 (CSS)。还支持源代码文件，如 Visual Basic、.NET、C# 和 Java。 ⑴文件类型。在 Dreamweaver 中可以使用多种文件类型。使用的主要文件类型是 HTML 文件。HTML 文件（或超文本标记语言文件）。包含基于标签的语言，负责在浏览器中显示 Web 页面。可以使用 .html 或 .htm 扩展名保存 HTML 文件。Dreamweaver 默认情况下使用 .html 扩展名保存文件。 2．文件类型与文件创建 ⑵文件创建 Dreamweaver 为创建新文档提供了若干选项。如图所示 1.3.4 使用Dreamweaver CS5建立站点 了解本地根文件夹、远程文件夹、测试服务器文件夹的结构 Web站点是一组具有共享属性（如相关主题、类似的设计或共同目的）的链接文档和资源。Dreamweaver是创建和管理站点的工具。可以组织和管理所有的Web文档，将用户的站点上传到Web服务器，跟踪和维护链接以及管理和共享文件。 Dreamweaver CS5站点由3个部分（或文件夹）组成，具体取决于开发环境和所开发的Web站点类型。 本地根文件夹。存储正在处理的文件。此文件夹可以位于本地计算机上，也可以位于网络服务器上。 远程文件夹。存储用于测试、生产和协作等用途的文件。远程文件夹通常位于运行Web服务器的计算机上。 测试服务器文件夹。Dreamweaver 在其中处理动态页的文件夹。 2、创建站点 若要定义Dreamweaver站点，需要先创建一个本地文件夹。若要向Web服务器传输文件或开发Web应用程序，还必须添加远程站点和测试服务器信息。为了让大家比较直观地了解站点的创建过程，在本任务中我们安装了FTP服务器软件Server-U 10.0配置好了文件服务器（存放远程站点），同时也安装了WEB服务器软件IIS5.0配置了测试服务器（存放测试文件）。（注：有关FTP和IIS的安装不做详细说明，在后续课程中讲解。如果需要在讲授时做适当的扩充。） 在本任务中，三个文件夹分别命名为： 测试服务器文件夹：horse(http://localhost/) 本地根文件夹：horse(E:\商业网页设计与制作\horse) 远程文件夹：ftp() 站点建立的具体步骤主要有五个：指定本地站点位置；指定服务器；版本控制；高级设置；站点保存与完成；。 ⑴指定本地站点位置。 在Dreamweaver菜单程序中，执行“站点”|“新建站点”命令。在弹出的“站点设置对象”“对话框中，输入站点名称（horse），并选择本地根文件夹为（E:\商业网页设计与制作\horse\）。如图所示。 ⑵指定服务器。 选择“站点设置对象”“对话框中左列的“服务器”选项。出现如图1-3-15所示的“站点设置对