HTML5+CSS3网页设计与制作课件：配置工作环境_第1页
HTML5+CSS3网页设计与制作课件：配置工作环境_第2页
HTML5+CSS3网页设计与制作课件：配置工作环境_第3页
HTML5+CSS3网页设计与制作课件：配置工作环境_第4页
HTML5+CSS3网页设计与制作课件：配置工作环境_第5页
已阅读5页，还剩15页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

HTML5+CSS3网页设计与制作配置工作环境项目将通过“制作一个D清单网页广告单页”项目，即通过制作一个HTML页面来承载网页制作知识，完成网页开发环境搭建、HTML5标签、CSS3叠层样式和响应式布局等的学习。项目目标D清单是某公司推出的一款跨平台同步的待办事项和任务提醒软件,旨在协助您完成待办事务比如生日提醒,旅行安排,会议准备等以便更好的进行时间和事项管理。为了方便D清单应用的推广，其公司需要制作一个该应用产品的介绍网页。该页面主要用于手机端进行分享推广，同时也要求能够在电脑端进行访问。前端工程师小王所在的科技公司已经拿到了设计稿，如图1所示。主管希望他担任本次项目的前端工作，开发完成后将成果交付给程序员完成逻辑制作、测试和发布。项目情境图1-1-1项目移动端和电脑端页面截图网页制作的一般流程如下：项目分析项目发布需求分析规划设计实施测试交付根据“移动优先”原则，我们需要制定项目完成的计划：项目分析时间段1时间段2时间段3时间段4时间段5分析规划实施阶段1移动端内容制作阶段2移动端格式制作阶段3响应式制作测试与交付D清单前端开发甘特图时间进度任务制作网页内容能够表述常见的网页开发工具。能够下载和安装VisualStudioCode软件，并进行中文设置。能够简单使用VisualStudioCode软件编写HTML网页文件。任务目标配置工作环境为完成酒店宣传单页网页内容的制作，我们要安装专业的开发工具，以提高开发效率。本次任务我们要求配置VisualStudioCode软件的开发工作环境，并简单使用软件编写代码。任务描述配置工作环境为了完成工作环境的配置和软件操作，需要：认识HTML和常见的网页开发工具。选择开发工具并下载安装。配置软件和熟悉操作界面，进行简单代码编写以测试软件安装成功与否。任务分析配置工作环境知识与技能准备HTML（HyperTextMarkupLanguange），称为超文本标记语言，是一种描述语言，主要用于描述超文本中内容的显示方式。1、认识HTML5知识与技能准备产生HTML文件的方式有两种：一种使用记事本手工编写HTML文件；另一种是使用HTML编辑器。2、HTMl5网页的开发环境打开记事本，输入如下HTML代码（注意代码格式缩进）：课堂练习1-1-1使用记事本编写HTML5123456789<html><head><metacharset="utf-8">

<title>我的网页</title></head><body><p>这是用记事本制作的第一个网页</p></body></html>任务实施1、VisualStudioCode软件下载和安装图1-1-2VisualStudioCode官网下载页面截图任务实施2、软件中文语言设置图1-1-3VisualStudioCode软件界面图1-1-4搜索框任务实施3、软件使用介绍图1-1-5VisualStudioCode软件界面图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、使用VisualStudioCode软件编写HTML文件图1-1-7使用VisualStudioCode编写代码

好的开发工具能让你更好的去开发，无论是前端还是后端，都需要用到编辑器，常见的HTML5

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论