1.8 Dreamweaver 工作流程（课件）-《网页设计与制作（DreamweaverCC)》（电子工业出版社）同步精品课堂

1.8 Dreamweaver 工作流程 网页设计与制作（Dreamweaver CC) 同步精品课堂 电子工业出版社 目录 02 01 Dreamweaver创建Web站点的作用与优势 Dreamweaver工作流程详解 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 教学目标 知识目标 1. 掌握Dreamweaver CC的基本工作流程。 2. 熟悉Dreamweaver CC的关键功能与操作。 1.能够独立完成简单的网页设计项目。 2.具备高效调整与优化Dreamweaver工作区的能力。 3.解决网页设计与制作中常见问题的能力。 能力目标 激发对网页设计与制作的兴趣与热情，提升团队协作与沟通能力。 情感目标 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 教学重难点 1. 针对动态内容设置Web 应用程序。 2. 高级站点管理功能。 1.站点规划与设置。 2. 创建与管理站点。 难点 重点 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 导入新课 掌握Dreamweaver CC的工作流程。 熟悉其关键功能与操作 具备高效调整与优化Dreamweaver工作区的能力 Dreamweaver CC——从站点规划到发布的全方位工作流程！ 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 1.8 Dreamweaver 工作流程 是指通过互联网可访问的一系列网页和相关资源的集合。它通常由多个网页组成，这些网页通过超链接相互连接，形成一个有机的整体。 Web站点概念 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 1.8 Dreamweaver 工作流程 创建Web站点是指通过一系列的技术和流程，构建一个可以在互联网上被访问的网站的过程。这个过程通常包括： 域名空间 规划设计 制作建设 测试发布 维护推广 创建Web站点 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 1.8 Dreamweaver 工作流程 在网站建设的五个基本阶段中，Dreamweaver作为一款功能强大的网页设计软件，扮演着重要角色，并具有显著的优势。 Dreamweaver作用与优势——域名空间阶段 作用：虽然Dreamweaver不直接涉及域名注册和空间购买，但它可以通过集成的功能帮助用户了解网站所需的文件结构和资源，为后续的网站设计和部署做准备。 优势：Dreamweaver提供了清晰的网站文件组织方式，使得用户在选择和配置域名空间时，能够更好地理解和规划网站的整体架构。 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 1.8 Dreamweaver 工作流程 Dreamweaver作用与优势——规划设计阶段 作用：Dreamweaver可以帮助用户进行网站的初步设计和布局规划。用户可以利用Dreamweaver的设计视图和代码视图，结合手绘草图或设计工具，快速创建网站原型。 优势：Dreamweaver提供了丰富的模板和布局选项，大大降低了设计的门槛，使得非专业设计人员也能快速上手。同时，其强大的可视化编辑功能，让设计调整变得更加直观和便捷。 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 1.8 Dreamweaver 工作流程 Dreamweaver作用与优势——制作建设阶段 作用：用户可以通过Dreamweaver编写HTML、CSS和JavaScript代码，创建网页的静态和动态内容。Dreamweaver还集成了多种动态服务器技术，如PHP、ASP等，支持开发动态网站。 优势：Dreamweaver的代码书写功能强大，支持自动完成和语法高亮显示，大大提高了编码效率。同时，其集成的多种功能和插件，如bootstrap框架等，使得开发人员能够轻松实现复杂的功能和效果。 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 1.8 Dreamweaver 工作流程 Dreamweaver作用与优势——测试发布阶段 作用：Dreamweaver提供了便捷的测试和发布工具。用户可以利用其内置的预览功能，在本地测试网站的兼容性和功能表现。同时，Dreamweaver还支持FTP传输和云托管服务，方便用户将网站部署到服务器上。 优势：Dreamweaver的实时视图和多屏幕预览功能，使得用户能够在发布前充分测试网站在不同设备和浏览器上的表现。此外，其优化的FTP传输性能，提高了文件上传的效率和稳定性。 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 1.8 Dreamweaver 工作流程 Dreamweaver作用与优势——维护推广阶段 作用：Dreamweaver帮助用户进行网站的日常维护和内容更新。同时，通过优化网站代码和结构，提升网站在搜索引擎中的排名。 优势：Dreamweaver的代码管理和编辑功能，使得网站维护变得更加高效和便捷。用户可以通过简单的操作，实现网站内容的更新和优化。此外，它还提供了丰富的SEO优化工具和建议，帮助用户提升网站的可见性和影响力。 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 1.8 Dreamweaver 工作流程 Dreamweaver整体工作流程概述 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 1.8 Dreamweaver 工作流程 规划和设置站点 文件发布位置 审查站点需求 访问者情况 站点目标 用户访问 浏览器、插件和下载限制等 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 1.8 Dreamweaver 工作流程 组织和管理站点文件 文件与文件夹管理 远程文件传输 存回/取出设置 文件同步 资源管理 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 1.8 Dreamweaver 工作流程 设计网页布局 布局技术选择 流体网格布局与模板 基于模板的页面创建 框架布局 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 1.8 Dreamweaver 工作流程 向页面添加内容 添加资源和设计元素 页面创建与编辑 网站性能优化 跨浏览器兼容性 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 1.8 Dreamweaver 工作流程 通过手动编码创建页面 灵活的编辑方式 代码与设计的无缝切换 提高开发效率 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 1.8 Dreamweaver 工作流程 针对动态内容设置Web 应用程序 设置Web服务器和应用程序服务器 创建或修改Dreamweaver站点 连接数据库 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 1.8 Dreamweaver 工作流程 创建动态页 定义动态内容来源 拖动动态内容到网页 自动化处理 增强交互性 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 1.8 Dreamweaver 工作流程 测试和发布 设置Web服务器和应用程序服务器 创建或修改Dreamweaver站点 连接数据库 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 做一做 学生选择或构想一个具体的网站主题（如个人博客、电商网站、企业官网等），启动Dreamweaver CC工具，围绕“Dreamweaver 工作流程”展开，亲身体验网站建设的初步规划过程。 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 练一练 在使用Dreamweaver进行网站建设的初期，首先需要进行的步骤是______________，这一步骤涉及确定网站的目标、受众和整体架构。 在Dreamweaver中，通过___________功能，用户可以方便地组织和管理网站中的各种文件，如HTML、CSS、图片等，以确保网站内容的有序性和可维护性。 在完成网页的设计和内容添加后，为了验证网站在不同设备和浏览器上的表现，需要使用Dreamweaver的____________功能进行彻底的测试，并最终将网站部署到服务器上 规划和设置站点 站点管理 测试和发布 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 课堂小结 1. 规划和设置站点 2. 组织和管理站点文件 3. 设计网页布局 4. 向页面添加内容 5. 通过手动编码创建页面 6. 针对动态内容设置Web 应用程序 7. 创建动态页 8. 测试和发布 Dreamweaver创建Web站点各阶段的作用与优势 1. 域名空间 2. 规划设计 2. 制作建设 3. 测试发布 4. 维护推广 Dreamweaver 工作流程 Dreamweaver工作流程 作用：预备规划 优势：架构清晰 作用：原型设计 优势：易上手、直观编辑 作用：编码开发 优势：高效编码、功能丰富 作用：测试发布 优势：多屏预览、高效部署 作用：维护优化 优势：高效维护、SEO助力 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 谢谢 $$