Web编程基础（HTML+CSS）项目实战教程任务4-选择网页开发工具教学课件.pptx

Web编程基础（HTML+CSS）项目实战教程任务4-选择网页开发工具任务4：选择网页开发工具WEB选择网页开发工具编写工具浏览工具编写工具HBuilderX可以在HBuilderX官网http:/www.dcloud.io/点击免费下载，下载最新版的HBuilderX。HBuilderX 目前有两个版本，一个是Windows版，一个是macOS版。下载时根据自己计算机的操作系统，选择合适自己的版本。下载后，解压，无需安装，双击运行可执行文件HBuilderX.exe即可启动HBuilderX开发环境。HbuilderX下载与安装编写工具打开HBuilderX，依次单击文件 新建 项目，会打开“新建项目”对话框，如图所示：新建Web项目编写工具在左侧项目管理器中，选择新建的项目，右击，依次选择新建 html文件，打开“新建html文件”对话框，如下左图所示。键入新建html文件名，单击“浏览”按钮选择保存位置；然后单击“创建”按钮，会打开新建的html页面，代码窗口出现模板的代码，如下右图所示。新建HTML文件编写工具在左侧项目管理器中，新建的项目下右击“CSS”子目录，依次选择新建 CSS文件，打开“新建css文件”对话框，如下图所示。键入新建css文件的文件名，单击“创建”按钮即可完成。新建CSS文件浏览工具对于页面设计而言，浏览器的支持情况至关重要，各大浏览器对HTML的支持正在不断完善。目前，Chrome对HTML5支持最好。常用的五类浏览器：浏览工具2.打开安装好的Web浏览器方法一：单击“运行”菜单，选择安装好的任何一个浏览器，即可打开相应的浏览器浏览网页效果。方法二：单击工具栏上的图标右侧的三角按钮，可以选择安装好的任意浏览器浏览网页文件。1.打开集成的Web浏览器方法一：单击“视图”菜单下，“显示内置浏览器”，即可打开集成的“Web浏览器”视图窗口，用户可以浏览到显示效果。方法二：单击工具栏右侧的“预览”，可以浏览页面显示效果。浏览工具已编写好一个HTML文档，如左图所示；浏览页面效果，如右图所示。简单的Web网页演示任务4-选择网页开发工具网页的本质是纯文本文件，可以用任何文本编辑器制作网页，为提高网页制作效率，可以借助专业的开发工具主要有EditPlus、Dreamweaver、HBuilderX等。在网页开发工具中，能灵活运用HBuilderX工具创建一个完整的Web项目，体验在HBuilderX环境下进行HTML的创建与浏览。课堂实训任务描述：制作班级公告栏，使用HTML创建网页结构，初步使用CSS技术简单修饰页面样式，通过标记控制公告内容自下而上循环滚动，最后通过JavaScript程序代码响应鼠标操作。当鼠标在滚动字幕上悬浮时，字幕停止滚动；当鼠标离开滚动字幕时，字幕继续滚动，页面效果如图所示。课后作业超星学习平台上完成本模块作业学习平台完成线上预习任务学习平台中参与话题讨论学习平台中按要求完成过程性考核任务