《网页设计与制作（HTML5+CSS3）立体化项目教程》 课件 02.工具的安装

网页设计与制作（HTML5+CSS3）主讲教师：周礼萍0

1常用Web开发工具02VisualStudioCode下载与安装03VisualStudio常用插件04VisualStudioCode创建项目05网站开发小知识目录contents常用开发工具部分编辑器高手不在乎工具！HBuilder优势(官网优势)：编码比其他工具快5倍够不够？对极客而言，追求快，没有止境！代码输入法：按下数字快速选择候选项可编程代码块：一个代码块，少敲50个按键内置emmet：tab一下生成一串代码无死角提示：除了语法，还能提示ID、Class、图片、链接、字体…跳转助手、选择助手，不用鼠标，手不离键盘多种语言支持：php、jsp、ruby、python、nodejs等web语言，less、coffee等编译型语言均支持边改边看：一边写代码，一边看效果强悍的转到定义和一键搜索这里还有最全的语法库、最全的语法浏览器兼容库HBuilder的安装1)官网下载地址：http://www.dcloud.io/2)安装：解压zip文件到指定目录3)运行安装文件下的exe文件VisualStudioCode(简称VSCode/VSC)是微软公司推出的一款免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补、GIT等特性，支持插件扩展等等。推荐理由l比sublime开源，比webstorm更轻l智能提示很强大l自带emmetl插件安装非常方便l自带强大的调试功能l软件跨平台支持Win、Mac以及Linux。l...VScode简介VisualStudioCode下载与安装（1）登录VisualStudioCode官方网站，点击下载

官方下载地址：

/（2）安装：执行VSCodeUserSetup.exe，安装文件到指定目录（3）运行安装文件下的Code.exe（4）根据小贴士进行安装，安装完成，运行VisualStudioCodeVSCode安装VisualStudioCode界面VisualStudio常用插件推荐安装的插件插件名称插件说明Chinese中文（简体）语言包openinbrowser右键选择浏览器打开html文件AutoRenameTagHTML标签自动重命名配对Liveserver本地服务器，实时预览prettier代码自动格式化ChineseLorem生成随机中文RandomEverything随机生成文本插件安装的方法VisualStudioCode其他设置设置颜色主题VisualStudioCode其他设置设置保存时自动格式化VisualStudioCode其他设置设置服务器默认浏览器任务实践（1）登录官网下载页面/Download，点击下载安装包（2）打开安装包所在文件，双击

VSCodeUserSetup.exe

根据小贴士进行安装（3）安装完成后，运行VisualStudioCode程序，安装汉化包，重启程序（4）尝试安装其他相关插件（5）设置主题颜色（6）设置保存时自动格式化（7）设置服务器默认浏览器VisualStudioCode创建项目问题1：什么是站点文件夹？问题2：为什么需要站点文件夹？问题3：站点文件夹的命名规范有哪些？站点就是一个文件夹，用来存放网页所用到的所有文件和文件夹包括主页、子页、用到的图片、音频文件...站点分为本地站点和远程站点站点文件夹文件夹命名规则：文件夹命名一般采用英文，长度一般不超过20个字符，命名采用小写字母文件命名规则：文件名称统一用小写的英文字母、数字和下划线的组合，以英文字母开头VisualStudio创建项目第1步：选择文件——将文件夹添加到工作区VisualStudio创建项目第2步：在资源管理器窗口选择新建文件，并命名demo.htmlVisualStudio创建项目第3步：在编辑器用英文的叹号“!”+Tab键或者回车键，生成固定HTML5结构VisualStudio创建项目第4步：在body标签内，编辑内容后，ctrl+S保存/文件—保存第5步：鼠标右键选择“openinDefaultBrowser”在默认浏览器打开任务实践（1）创建站点文件夹website（2）在根目录下分别创建images、html、style、js、media文件夹（3）在根目录下创建index.html文件（4）用英文感叹号生成HTML5结构（5）在body标签内输入“HELLOWEB！”保存（6）鼠标右键选择“OpeninDefaultBrowser”用默认浏览器打开观察网站开发小知识问题1：网站开发流程有哪些？问题2：从事前端有哪些相关的岗位呢？网站的开发流程网站的开发团队任务实践网站简介：数字乡村建设是乡村振兴的战略方向，数字信息化为乡村振兴注入新动力、提供新路径。本网站经营范围涉及到乡村旅游推广、农业科技咨询、农产品销售等业务。具体要求：1.按照规范的开发流程，