Web前端技术 课件 模块一 任务1 网站项目创建_第1页
Web前端技术 课件 模块一 任务1 网站项目创建_第2页
Web前端技术 课件 模块一 任务1 网站项目创建_第3页
Web前端技术 课件 模块一 任务1 网站项目创建_第4页
Web前端技术 课件 模块一 任务1 网站项目创建_第5页
已阅读5页，还剩14页未读， 继续免费阅读

下载本文档

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

文档简介

网站项目创建Web前端技术主讲老师：姜文秀延时符CONTENTS目录01任务描述03知识点导图02学习目标

04相关知识05任务实施延时符任务描述延时符任务描述在互联网流行的今天，网站已经成为一个信息的基本载体，Web前端主要负责创建Web页面或app等前端界面呈现给用户，也就是使用HTML、CSS、JavaScript等专业技能和工具将产品的UI设计稿实现成网站产品，涵盖用户PC端、移动端（手机,平板）等网页，处理视觉和交互问题。Web前端开发是一项很特殊的工作，涵盖的知识面非常广，既有具体的技术，又有抽象的理念。简单地说，它的主要职能就是把网站的界面更好地呈现给用户。学习好了Web前端技术，将来可以成为Web前端开发人员，其主要工作是确保网站访问者可以轻松地与页面交互。通过将设计、技术和编程相结合来对网站的外观进行编码，并负责调试。每当我们访问网站时，我们看到、点击或以其他方式使用的任何内容都是前端开发人员的工作。本任务将带领同学们了解网站的基本组成，学习Web前端开发软件和运行环境。学会创建一个Web项目，并创建和制作第一个页面，效果如图所示。延时符页面效果图延时符学习目标延时符学习目标掌握web前端三大技术;掌握Vscode/Hbulider软件使用方法;掌握网页基本标签结构。知识目标能够使用VScode软件创建web项目，熟悉项目结构；能够掌握网页的基本结构组成，为页面添加简单元素；能够区分相对地址和绝对地址。技能目标延时符培养严谨、精益求精的工作态度；培养分析问题和解决问题的能力；培养团队合作的意识。素养目标知识点导图延时符知识点导图延时符相关知识延时符认识网页常用浏览器Web标准开发工具HTML简介认识网页延时符web中文译为“网页”，网页是网站中的一“页”，通常是HTML格式的文件，它要通过浏览器来阅读。网站是指展示特定内容相关的网页集合。网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以.htm或.html后缀结尾的文件，因此将其俗称为HTML文件。Google浏览器Edge浏览器Safari浏览器Opera浏览器常用浏览器一个制作好的网页文件必须要使用浏览器打开才能看到网页所呈现的效果，换句话说，浏览器是网页运行的平台。目前，常用的浏览器有Edge、火狐（Firefox）、谷歌(Chrome)、Safari和Opera等。常用浏览器延时符Firefox浏览器Web标准W3C与其他标准化组织共同制定了Web标准。Web标准并不是某一个标准，而是一系列标准的集合，主要包括结构(Structure)、表现（Presentation）和行为（Bchavior）三方面。结构标准结构(Structure)是指网页的基本框架，它是网页的基本组成部分，主要包括HTML、XML等标签语言。表现标准表现（Presentation）是指网页的外观，它是网页的美观度和可读性的重要体现。表现规范是指网页的外观表现，包括文字的字体、大小、颜色、间距、布局等，以及图片的尺寸、位置、边框等，主要指的是CSS。行为标准行为（Behavior）是指网页模型的定义及交互行为，主要包括DOM和ECMAScript两部分，它是网页的功能实现和用户体验的重要体现。延时符开发工具延时符常见的网页开发工具有多种，如webStorm、Hbulider、Sublime等，本教材以VSCode为例。平时也可使用Hbulider。软件使用视频讲解HTML简介延时符HTML是英文HyperTextMarkupLanguage的缩写，中文翻译为超文本标记语言，主要是通过HTML标记对网页中的文本、图片、声音、视频等内容进行描述。HTML提供了许多标记（标记也可称为标签），网页中需要定义什么内容，就可用相应的HITML标记描述。HTML标签是由尖括号包围的关键词，例如<html>,HTML标签通常是成对出现的，例如<html>和</html>，我们称为双标签。标签对中的第一个标签是开始标签，第二个标签是结束标签。有些特殊的标签必须是单个标签（极少情况），例如<br/>，我们称为单标签。每个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写。任务实施延时符创建项目制作主页创建项目1创建项目文件夹;2打开vscode软件，熟悉插件的安装方法。在软件中用菜单将根目录打开，或者直接将根目录拖入软件中打开，在根目录下新建主页文件index.html并打开编辑。延时符制作主页1生成页面结构；2在<title></title>标签中添加页面标题；3在<body></body>标签中添加一对<div>标签，在<div>标签中添加<img>标签，添加页面内容；4在<head></head>标签中添加一对<style>标签,在<style>

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

温馨提示

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

最新文档

评论

0/150

提交评论