使用 Dreamweaver 进行 Web 开发
Web 开发的第一个阶段是规划阶段,在此阶段您分析受众需求以及技术和市场需求。您还收集有关设计和发布网站所需的必要信息,回答类似以下的这些问题:
我选择哪个服务提供商来托管网站?我是否可以将文件上传到发布服务器?
网站使用什么域名?
如果您正在将现有网站迁移到 Dreamweaver,当前这些文件和资源存储在何处?我是否可以访问存储此信息的服务器?
如果您需要一个动态网站,我能使用哪个服务器来测试数据是否动态显示?我是否有要用于加载动态数据的 Web 应用程序服务器的详细信息?
网站需要哪些种类的资源?
这些资源将从头开始设计吗?如果这些资源已提供,我是否可以访问它们?
我想使用什么应用程序来设计资源?
我是否计划创建一个响应性网站?
假定您对要开发的网站、如何以及在何处托管它有清楚的了解,并且选择了 Dreamweaver 和 Creative Cloud 用于 Web 开发流程,请继续执行下一步。
检查您是否有您的网站所需的所有资源。在您的本地文件夹或 Adobe 的 Creative Cloud Libraries 中收集和整理它们。
使用以下项在 Dreamweaver 中创建新文档:
新的空白文档,
随 Dreamweaver 打包的起始页模板,或
其他人创建的模板文件 (*.dwt)
注意:
如果您不熟悉 Dreamweaver 或刚刚开始学习 Web 开发,起始页模板对于您入门和开始设计网页有很大帮助。
即使您计划从头开始,也最好参考一下这些页面了解好的网页设计应具备哪些要素。
请花几分钟时间熟悉 Dreamweaver 工作区。找到适合您的工作区,然后设置颜色主题。以适合您的方式重新组织不同的面板。
在 Dreamweaver 中设置您的站点。开始使用文件和资源创建文件夹结构。在组织好信息并确定结构后,您就可以开始创建站点了。(请参阅关于 Dreamweaver 站点。)
在此阶段,最好还设置到远程服务器的连接,如果有动态内容,还要设置测试服务器。在此阶段,最好还设置到远程服务器的连接,如果有动态内容,还要设置测试服务器。
开始在“代码”视图中编写网页代码,或在“设计”/“实时”视图中设计网页。
如果您计划使用 Photoshop 复合,可以将它们提取到 Dreamweaver 并处理它们。有关使用 Photoshop 图层复合的详细信息,请参阅在 Dreamweaver 中提取。
添加设计元素,如文本、图像、鼠标经过图像、图像地图、颜色、影片、声音、HTML 链接、表格等。
使用 CSS 设计网页的外观样式。
您可以使用不同方式在 Dreamweaver 中处理 CSS:
您可以将手动编写 CSS 代码。有关帮助您手动编写 CSS 代码的 Dreamweaver 编码功能的信息,请参阅 Dreamweaver 中的编码环境。
如果您不十分熟悉创建 CSS 页,可以使用 CSS Designer 面板帮助生成 CSS。有关更多信息,请参阅使用 CSS Designer 布局页面。
如果您更喜欢使用 Sass 和 Less 文件,Dreamweaver 也支持该选项,允许您将 Sass 和 Less 文件导入 Dreamweaver 站点并处理它们。Dreamweaver 然后自动编译它们(或您可以选择手动编译它们)并实时查看 CSS 更改的结果。有关将 Sass 和 Less 文件用于 Dreamweaver 的信息,请参阅 CSS 预处理器。
针对创建动态内容设置 Web 应用程序。
许多 Web 站点都包含了动态页,动态页使访问者能够查看存储在数据库中的信息,并且一般会允许某些访问者在数据库中添加新信息或编辑信息。若要创建此类页面,则必须先设置 Web 服务器和应用程序服务器,创建或修改 Dreamweaver 站点,然后连接到数据库。有关更多信息,请参阅动态网站、页面和 Web 窗体。
创建动态页。
在 Dreamweaver 中,您可以定义动态内容的多种来源,其中包括从数据库提取的记录集、表单参数和 JavaBeans 组件。要将动态内容添加到网页,仅将该动态内容拖放到网页即可。
您可以通过设置页面来同时显示一个记录或多个记录,显示多页记录,添加用于在记录页之间来回移动的特殊链接,以及创建记录计数器来帮助用户跟踪记录。有关更多信息,请参阅动态网站、页面和 Web 窗体。
测试、预览和发布网站。
在创建页面后,您需要预览它们以查看网站是否符合设计目标。您可以在“拆分”视图中编码,同时使“编码”视图和“实时”视图并排放置。
还可在浏览器上实时预览网页。
如果不需要实时预览体验,则可使用常规的“在浏览器中预览”体验。
如果已定义与远程服务器的连接,则发布网站需要将文件放入远程服务器以使其发挥正常功能。