《电子商务网页设计》课件-项目二  网页开发工具的使用

项目二网页开发工具的使用学习任务1Dreamweaver CC的启动与退出学习任务2Dreamweaver CC的工作界面ONTENTSC目录63Dreamweaver CC的启动与退出0164知识目标1. 了解网页开发工具。2. 熟悉Dreamweaver CC的功能。技能目标1. 能够正确启动Dreamweaver CC软件。2. 能够正确退出Dreamweaver CC软件。

65为机房内的计算机安装授课必备的软件——Dreamweaver CC。安装后需要打开软件进行检查，确保软件能够正常使用后退出。66一、网页开发工具目前市场上有多款流行的网页开发工具，

其中的代码编辑器包括VSCode、Sublime Text、WebStorm、HBuilder、Notepad++以及Dreamweaver等。VSCode是一款专为现代Web和云应用开发设计的跨平台源代码编辑器，可在Mac OS X、Windows和Linux上流畅运行。Sublime Text是一款功能强大的文本编辑器。其最初的设计理念是打造一个扩展性强的类似Vim的编辑器。67WebStorm是一款JavaScript开发工具，它与IntelliJ IDEA共享同源技术，并继承了IntelliJ IDEA在JavaScript开发方面的强大功能。HBuilder是一款专为HTML5设计的Web开发集成开发环境（IDE）。Notepad++是一款特色鲜明的自由软件纯文本编辑器，提供了完整的中文化界面和多国语言支持。它不仅适合用于编写简单的文本文件，也非常适合作为编程编辑器使用。Dreamweaver是Adobe公司推出的一款兼具网页制作和网站管理功能的网页编辑软件。这款软件是专为专业网页设计人员打造的视觉化开发工具，能让用户轻松制作出跨平台、跨浏览器且动态十足的网页。68二、DreamweaverCC简介Dreamweaver CC引入了众多新功能和增强功能，包括网页元素快速检查、实时检查中的全新编辑功能、CSS设计工具的显著增强、实时插入功能、支持SFTP连线时使用身份文件、还原/重做功能的优化，以及Business Catalyst和PhoneGap Build工作流程的改进等。此外，用户还能体验到访问Dreamweaver扩展功能的新方式、同步设置功能，以及直接发送错误报告或功能要求等便捷操作。同时，帮助中心和帮助菜单也有所改进，能为用户提供更为贴心的支持。69三、安装的系统要求如果想运行和使用Dreamweaver CC软件，计算机必须满足Adobe官方规定的最低系统配置。实际使用中，为了提高软件的运行效率和稳定性，建议使用配置更高的计算机。70Dreamweaver CC的工作界面0271知识目标1. 了解Dreamweaver CC界面的布局。2. 熟悉Dreamweaver CC界面菜单命令的含义。技能目标1. 能够正确使用菜单栏及其子菜单命令。2. 能够灵活切换应用代码视图和设计视图。3. 能够独立打开或关闭各个面板。72某公司为树立全新的企业形象，拓宽销售渠道，决定升级公司网站，升级期间用户将不能访问公司网站，网站需要向访问者展示暂停服务页面如图所示，依据该效果图，利用Dreamweaver CC软件，在文档窗口制作一个纯文本的提示页面，并进行预览，文档命名为error.html。7374任务效果图软件初次启动后，屏幕上会显示菜单栏、欢迎界面和属性面板，具体布局如下图所示。最上方的是菜单栏，这里汇集了软件的大多数功能，用户可以根据实际需求，点击菜单栏中的相应项目，以使用所需的功能。7576软件启动界面中间部分展示的是欢迎界面，它旨在为用户提供便捷操作，其中包含“打开最近的项目”“新建”“主要功能”以及“快速入门”等快捷菜单。若用户不希望显示欢迎界面，可以通过“编辑—首选项”菜单命令来取消其显示。底部是属性面板，该面板主要用于设置文档窗口中选中元素的属性，从而实现各种样式效果。在Dreamweaver CC中，用户可以直接在属性面板中修改元素的属性。根据所选元素的不同，属性面板中的内容也会相应变化。如果不慎关闭了属性面板，用户可以通过“窗口—属性”菜单命令重新打开，或者直接使用组合键“Ctrl+F3”快速调出。77在新建一个网页后，Dreamweaver CC会从启动界面转入工作界面。这个工作界面延续了Dreamweaver系列软件一贯的简洁、高效和易用的特点。用户可以在工作界面中轻松找到软件的大部分功能，具体界面如下图所示。78工作界面二、菜单栏Dreamweaver CC的菜单栏包含10个菜单项，分别是文件、编辑、查看、插入、修改、格式、命令、站点、窗口和帮助。这些菜单项为用户提供了丰富的功能和操作选项，如下图所示。79菜单栏文件菜单用于管理当前文档，包括新建、打开、保存、预览等操作，如下图所示。80文件菜单编辑菜单用于对文档内容进行常规编辑操作，如查找和替换等。需特别注意的是，首选参数设置也位于编辑菜单中，方便用户进行个性化配置，如下图所示。81编辑菜单查看菜单提供了多种文档视图选项，用户可以根据需要显示或隐藏不同类型的页面元素、工具栏等，从而更灵活地编辑和预览网页，如下图所示。82

查看菜单插入菜单用于用户向网页中添加各种对象，如图像、链接、表格等，极大地丰富了网页的内容和功能，如下图所示。83插入菜单修改菜单用于更改选定页面属性，帮助用户精细调整网页元素的表现和行为，如下图所示。84修改菜单格式菜单用于设置文本的格式样式，包括字体、大小、颜色等，使网页文本更加美观且易于阅读，如下图所示。85

格式菜单命令菜单为用户提供了对各种命令的快速访问途径，提高了工作效率，如下图所示。86

命令菜单站点菜单提供了用于管理站点以及上传、下载文件的便捷选项，方便用户进行网站的维护和更新，如下图所示。87

站点菜单窗口菜单整合了软件中的所有面板、检查器和窗口，用户可以通过该菜单快速访问和管理这些工具，提升工作效率，如下图所示。88窗口菜单二、工具栏使用工具栏中的视图工具，可以轻松地在代码视图、设计视图和拆分视图之间进行切换，具体如下图所示。其中，代码视图主要用于在文档窗口中展示HTML源代码；设计视图用于显示网页的最终设计效果；而拆分视图巧妙地将代码视图和设计视图结合在一起，便于用户同时查看和编辑源代码和设计效果。此外，工具栏还提供了实时视图功能，能够模拟网页在浏览器中的显示效果，使用户在设计过程中就能预览到实际的网页呈现效果。最后，通过点击“预览／调试”按钮，用户可以直接通过浏览器查看网页文档的实际浏览效果。89工具栏界面三、文档窗口文档窗口，

又称文档编辑区，

其主要功能是用于展示和编辑文档内容，

如下图所示。90文档窗口四、属性面板属性面板的主要作用是设置当前页面上正在编辑内容的各项属性如下图所示。用户可以通过依次点击“窗口”和“属性”来打开或关闭该面板。根据所选的页面元