1、PHP+MySQL+Dreamweaver 动态网站开发案例教程,机械工业出版社同名教材 配套电子教案,一 Dreamweaver概述 二 Dreamweaver的工作环境 三 Dreamweaver创建网页的工作流程 四 站点管理 五 实训,Dreamweaver是Adobe公司开发的著名网站开发工具，利用Dreamweaver的可视化编辑功能，用户可以轻松地完成设计、开发和维护网站的全过程。Dreamweaver不仅提供了直观的可视布局界面，而且具备强大的编码工具。用户可以使用服务器语言（例如，ASP、ASP.NET、ColdFusion标记语言、JSP和PHP）生成支持动态数据库的Web
2、应用程序，使用Ajax的Spry框架进行动态用户界面的可视化设计、开发和部署。使用Dreamweaver的网站地图，用户可以快速地制作网站雏形。在设计过程中，用户如果改变了网页的位置，Dreamweaver会自动更新所有链接。Dreamweaver提供一组预先设计的CSS布局，可以帮助用户快速地设计出美观的页面。Dreamweaver成功地整合了所见即所得的编辑方式和动态网站开发功能。,1.1 Dreamweaver概述,1.2.1 Dreamweaver的启动安装好Dreamweaver后，选择“开始”“程序”“Adobe Dreamweaver CS3”命令。Dreamweaver经过一系
3、列初始化过程后，首先显示“工作区设置”对话框，如图1-1所示。由于要采用可视化方式设计网页，选中“设计者”单选钮，单击“确定”按钮。接下来显示起始页对话框，如图1-2所示，在其中可以在“打开最近的项目”、“新建”或“从模板创建”栏中进行选择。,1.2 Dreamweaver的工作环境,1.2.2 Dreamweaver的主工作区Dreamweaver的主工作区由插入工具栏、文档工具栏、文档窗口、属性面板等部分组成，如图1-3所示。,1.2 Dreamweaver的工作环境,Dreamweaver为处理各种Web设计和开发文档提供了灵活的环境。除了HTML文档以外，用户还可以创建和打开各种基于文
4、本的文档，如ASP、JavaScript和CSS。Dreamweaver还支持源代码文件，如PHP、C#和Java。Dreamweaver为创建新文档提供了若干选项，用户可以创建以下任意文档： 新的空白文档或模板； 基于Dreamweaver附带的预设计页面布局文档； 基于现有模板的文档。,1.3 Dreamweaver创建网页的工作流程,1创建新文档 用户可以用下列方法创建新文档。 创建新的空白文档 创建新的空白文档，操作步骤如下。 选择“文件”“新建”，即出现“新建文档”对话框，默认选中“空白页”选项。 从“页面类型”列表框中选择类型，对于基本页，可选择“HTML”；如果有页面布局的需要，
5、可以从右侧的“布局”列表框中选择需要的布局。 单击“创建”按钮，在文档窗口中创建新文档。,1.3 Dreamweaver创建网页的工作流程,2保存新文档 要保存新文档，操作步骤如下。 选择“文件”“保存”。 在出现的对话框中，定位到要用来保存文件的文件夹。 在“文件名称”文本框中，输入文件名。不要在文件名和文件夹名中使用空格和特殊字符，文件名也不要以数字开头。例如，为新建的网页命名为“example.html”。 单击“保存”按钮。,1.3 Dreamweaver创建网页的工作流程,1.4.1 Dreamweaver的网站定义严格地说，站点也是一种文档的磁盘组织形式，它同样是由文档和文档所在的
6、文件夹组成的。设计良好的网站通常具有科学的结构，利用不同的文件夹，将不同的网页内容分门别类地保存，这是设计网站的必要前提。结构良好的网站，不仅便于管理，也便于更新。利用Dreamweaver可以对位于Internet服务器上的站点文档直接进行编辑和管理，但有时非常不便，且影响的因素很多，例如，网络速度和网络的不稳定性等都会对管理和编辑操作带来影响。另一个更重要的原因是，如果直接对位于Internet服务器中的文档和站点进行操作，则必须始终保持同Internet的连接，这意味着会花费不必要的上网费用。,1.4 站点管理,1.4.2 建立本地站点 【案例1-1】建立一个本地站点，定义站点名称和站点
7、使用的本地根文件夹及默认的图像文件夹。 【案例展示】站点的设置如图1-17所示，站点结构如图1-18所示。,1.4 站点管理,1.4.3 管理本地站点1编辑站点 在Dreamweaver中创建好本地站点后，如果需要，还可以对整个站点进行编辑操作。例如，编辑修改站点、复制站点、删除站点等。编辑站点的操作步骤如下。 选择“站点”“管理站点”，打开“管理站点”对话框。 在“管理站点”对话框左侧列表框中选择需要编辑的站点，然后单击右侧按钮，则可以进行相应的操作。,1.4 站点管理,1.4.3 管理本地站点2文件的基本操作在Dreamweaver中，可以使用“文件”菜单对单独的文件进行管理，例如，执行“
8、新建”、“打开”、“保存”、“另存为”等命令。另外，也可以在“文件”面板中，在文件或文件夹上单击鼠标右键，在弹出快捷菜单的“编辑”命令子菜单中，执行“新建”、“打开”、“删除”、“移动”、“复制”、“重命名”等命令对网站中的文件进行管理。3指定站点首页首页就是网站的门面。通常，首页文件中包含有若干指向其他主要网页的超链接。可以先为网站创建一个空白首页，然后进行编辑，并可以利用站点地图查看网站中超链接的情况。,1.4 站点管理,1.4.4 站点的测试当用户获得了域名和网站空间之后，应当对本地站点进行完整的测试，再将页面上传到远程Web服务器中，主要的测试工作包括： （1）确保页面在浏览器中的显示
9、达到预期效果 （2）在不同的浏览器上预览页面。 （3）检查站点是否有断开的链接 （4）运行站点报告来测试并解决整个站点的问题,1.4 站点管理,1.4.5 站点的发布网页设计好并在本地站点测试通过后，必须把它发布到Internet上形成真正的网站，否则网站形象仍然不能展现出去。要构建远程站点，必须知道ISP提供的主页空间是如何支持上传的。网页的上传一般是通过FTP软件工具连接Internet服务器进行上传的。FTP软件很多，如CutFtp、LeapFtp等，也可以使用Dreamweaver的站点管理器上传网页。Dreamweaver内置了FTP上传功能，可以通过FTP实现在本地站点和远程站点之间的文件传输。,1.4 站点管理,【实训综述】建立一个旅游主题的本地站点及制作网站首页。 【实训展示】本实例页面预览后的结果如图1-37所示。,1.5 实训,图1-37 页面预览的结果,1简答Dreamweaver文档编辑所包括的3种视图及特点。 2在本地站点中创建一个首页文件index.html和一个存放图像的文件夹images，自定义首页文件的标题、背景色和页面字体。 3举例简述Dreamweaver创建网页的工作流程。 4本地站点和远端站点的区别是什么？举例建立一个本地站点。 5测试网页主要包括哪些方面的测试？ 6简述使用Dreamweaver发布网站的过程。,1.6 习题,
