项目一 第一阶段 任务1 配置工作环境-【鹑首文化】HTML5+CSS3网页设计与制作配套电子课件PPT

HTML5+CSS3网页设计与制作 使用HTML5+CSS3制作响应式网页 项目一 项目将通过“制作一个D清单网页广告单页”项目，即通过制作一个HTML页面来承载网页制作知识，完成网页开发环境搭建、HTML5标签、CSS3叠层样式和响应式布局等的学习。 项目目标 D清单是某公司推出的一款跨平台同步的待办事项和任务提醒软件, 旨在协助您完成待办事务比如生日提醒, 旅行安排, 会议准备等以便更好的进行时间和事项管理。 为了方便D清单应用的推广，其公司需要制作一个该应用产品的介绍网页。该页面主要用于手机端进行分享推广，同时也要求能够在电脑端进行访问。 前端工程师小王所在的科技公司已经拿到了设计稿，如图1所示。主管希望他担任本次项目的前端工作，开发完成后将成果交付给程序员完成逻辑制作、测试和发布。 项目情境 图1-1-1 项目移动端和电脑端页面截图 网页制作的一般流程如下： 项目分析 项目发布 需求分析 规划设计 实施 测试 交付 根据“移动优先”原则，我们需要制定项目完成的计划： 项目分析 时间段1 时间段2 时间段3 时间段4 时间段5 分析规划 实施 阶段1 移动端内容制作 阶段2 移动端格式制作 阶段3 响应式制作 测试与交付 D清单前端开发甘特图 时间 进度 任务 制作网页内容 第一阶段 能够表述常见的网页开发工具。 能够下载和安装Visual Studio Code软件，并进行中文设置。 能够简单使用Visual Studio Code软件编写HTML网页文件。 任务目标 任务1 配置工作环境 为完成酒店宣传单页网页内容的制作，我们要安装专业的开发工具，以提高开发效率。 本次任务我们要求配置Visual Studio Code软件的开发工作环境，并简单使用软件编写代码。 任务描述 任务1 配置工作环境 为了完成工作环境的配置和软件操作，需要： 认识HTML和常见的网页开发工具。 选择开发工具并下载安装。 配置软件和熟悉操作界面，进行简单代码编写以测试软件安装成功与否。 任务分析 任务1 配置工作环境 知识与技能准备 HTML（Hyper Text Markup Languange），称为超文本标记语言，是一种描述语言，主要用于描述超文本中内容的显示方式。 1、认识HTML5 知识与技能准备 产生HTML文件的方式有两种：一种使用记事本手工编写HTML文件；另一种是使用HTML编辑器。 2、HTMl5网页的开发环境 打开记事本，输入如下HTML代码（注意代码格式缩进）： 课堂练习1-1-1 使用记事本编写HTML5 1 2 3 4 5 6 7 8 9 <html> <head> <meta charset="utf-8"> <title>我的网页</title> </head> <body> <p>这是用记事本制作的第一个网页</p> </body> </html> 任务实施 1、Visual Studio Code软件下载和安装 图1-1-2 Visual Studio Code官网下载页面截图 任务实施 2、软件中文语言设置 图1-1-3 Visual Studio Code软件界面 图1-1-4 搜索框 任务实施 3、软件使用介绍 图1-1-5 Visual Studio Code软件界面 图1-1-6 主命令面板 任务实施 3、软件使用介绍 表1 编辑器及窗口常用快捷键 功能 快捷键 功能 快捷键 显示/隐藏侧边栏 Ctrl+B 切出一个新的编辑界面 Ctrl+\ 打开新窗口 Ctrl+Shift+N 在各个编辑界面之间切换 Ctrl+1、Ctrl+2、Ctrl+3 关闭窗口 Ctrl+Shift+W 关闭编辑器 Ctrl+F4 新建文件 Ctrl+N 查找 Ctrl+F 打开文件 Ctrl+O 查找替换 Ctrl+H 在历史打开的文件之间切换 Ctrl+Tab 整个文件夹搜索 Ctrl+Shift+F 任务实施 4、使用Visual Studio Code软件编写HTML文件 图1-1-7 使用Visual Studio Code编写代码 好的开发工具能让你更好的去开发，无论是前端还是后端，都需要用到编辑器，常见的HTML5编辑器有Adobe Dreamweaver、Aptana Studio、HBuilde X、BlueGriffon、Sublime Text、Rendera等。 任务拓展 任务1 配置工作环境 THANKS $$