web前端技术 课件 模块１ 网站搭建_第1页
web前端技术 课件 模块１ 网站搭建_第2页
web前端技术 课件 模块１ 网站搭建_第3页
web前端技术 课件 模块１ 网站搭建_第4页
web前端技术 课件 模块１ 网站搭建_第5页
已阅读5页，还剩38页未读， 继续免费阅读

下载本文档

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

文档简介

网站项目创建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>标签中添加div和img的样式。延时符5在<head></head>标签中添加一对<script>标签,在<script>标签中添加警告框alert语句，添加页面弹窗。任务实施视频讲解谢谢观看！主页布局Web前端技术主讲老师：***延时符CONTENTS目录01任务描述03知识点导图02学习目标

04相关知识05任务实施延时符任务描述延时符任务描述在学会了创建项目和文件后，我们开始要正式创建和制作主页。在上个任务的主页效果图片引导下，按照实际项目开发的流程，进行主页布局，先把主页划分为几个区域，用局部图片拼接把整个页面效果呈现，后期再分别完成每一个区域块的内容结构和样式添加。延时符页面效果图延时符学习目标延时符学习目标掌握CSS样式通配符选择器和类选择器的使用方法；掌握CSS弹性布局flex相关属性的设置方法；掌握CSS背景颜色样式background-color、border属性的设置方法。知识目标能够根据效果图使用合理标签进行页面结构搭建；能为页面添加内部CSS样式；能够根据需求正确使用类选择器进行样式添加；技能目标延时符培养细致、认真的工作态度；培养与他人合作沟通的能力；培养善于思考、敢于提问的精神。素养目标知识点导图延时符知识点导图延时符相关知识延时符注释图像标签类选择器通配符选择器盒子模型Flex布局HTML标签：注释延时符如果需要在HTML文档中添加一些便于阅读和理解，但又不需要显示在页面中的文字，就需要使用注释标签。HTML中的注释语法如下：

<!--注释语句-->也可以选择需要改为注释的行，按快捷键:ctrl+/，将已有文字或代码改为注释，添加注释是为了更好地解释代码的功能，便于相关开发人员理解和阅读代码，程序是不会执行注释内容的。添加图像，使用<imgsrc=”图像URL”/>方法，本次任务中需要根据实际需求调整图像的大小，需要用到图像的宽度和高度属性width和height。默认情况下，如果不给<img/>标签设置宽高属性，图像就会以原始尺寸显示，如若需要也可以通过width属性和height属性，定义图像的大小。通常宽和高只需要设置一个，另一个会根据图像原来的宽高比例自动调整。如果同时设置宽高值，会引起图像的宽高比例不对，从而图片变形。HTML标签：图像标签延时符html5新标签在html5中增加了一些有语义的新标签，合理的使用这些标签可以使页面代码更清晰，可访问性更好，搜索引擎更优。这些标签都是双标签，具体的含义如下：<header>：定义文档或区块的页眉，通常包含标题、导航和其他相关信息。<main>：定义文档的主要内容，一个页面中只能包含一个<main>元素。<footer>：定义文档或区块的页脚，通常包含版权信息、联系方式等内容。延时符<nav>：<section>：定义文档的一个独立节或区块，用于组织相关的内容。<article>：定义导航链接的容器，用于包裹网站的导航部分。定义一个独立的、完整的、可以独自分发或独立引用的内容块，如博客文章、新闻报道等。<aside>：定义页面或区块的侧边栏或附属信息，通常用于显示相关的内容或广告。CSS样式：类选择器延时符为页面内容添加样式，需要通过选择器选中相应的标签。选择器分为基础选择器和复合选择器两个大类。本任务先介绍基础选择器。基础选择器是由单个选择器组成的，包括：标签选择器、类选择器、id选择器和通配符选择器。如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。基本语法如下：类选择器视频讲解.类名{属性1:属性值1;属性2:属性值2;...}在CSS中类选择器使用“.”（英文点号）进行标识，类名是用户命名的，命名时不要使用纯数字、中文等命名，应使用英文字母来表示，命名要有意义，尽量使别人一眼就知道这个类名的目的。类选择器是开发中最常用的。类选择器定义好样式后，在HTML中以标签的class属性表示。可以给一个标签指定多个类名，从而达到更多的选择目的。这些类名都可以选出这个标签.简单理解就是一个标签有多个名字。在标签class属性中写多个，这个标签就可以分别具有这些类名的样式。如：<divclass=“greenpink”>多样式应用</div>。多个类名中间必须用空格分开CSS样式：通配符选择器延时符在CSS中，通配符选择器使用“*”定义，它表示选取页面中所有元素（标签）。基本语法如下：

*{属性1:属性值1;属性2:属性值2;...}通配符选择器不需要调用，自动就给所有的元素使用样式，本任务中是用于清除所有的元素标签的内外边距，这也是通配符选择器使用最多的场景。*{margin:0;padding:0;}CSS样式：背景颜色延时符background-color属性定义了元素的背景颜色。基本语法如下：

background-color:颜色;一般情况下元素背景颜色默认值是transparent（透明），也可以手动指定背景颜色为某种颜色或透明色。其取值方式有3种：预定义的颜色值，就是颜色英文单词，例如black，white，green等。#+6位十六进制数，例如#FF0000，#123456，#DE32FA等，实际工作中，这种颜色表示法是最常用的。RGB代码，如rgb（red值，green值，blue值），每个值的范围是0~255，或者rgb（100%，50%，0%）。CSS样式：盒子模型延时符网页布局过程：先准备好相关的网页元素，网页元素基本都是盒子box。利用CSS设置好盒子样式，然后摆放到相应位置。往盒子里面装内容。网页布局的核心本质：就是利用CSS摆盒子。所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框、外边距、内边距和实际内容。CSS样式：边距延时符padding属性用于设置内边距，即边框与内容之间的距离，如果盒子有背景，padding部分也会填充背景。当我们给盒子指定padding值之后，发生了2件事情：(1) 内容和边框有了距离，添加了内边距。(2) padding影响了盒子实际大小。也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。margin属性用于设置外边距，即控制盒子和周边元素之间的距离。外边距可以让块级盒子水平居中，但是必须满足两个条件：(1) 盒子必须指定了宽度（width）。(2) 盒子左右的外边距都设置为auto。CSS样式：边框延时符border可以设置元素的边框。边框由三要素组成:边框宽度(粗细)边框样式边框颜色，语法如下：border:border-width||border-style||border-color例如border:1pxsolidred;表示设置1px粗细的红色实线边框，三个参数没有顺序要求。边框不同边可以分开写，如只设定上边框：border-top:1pxsolidred;其余同理。CSS样式：flex布局

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

温馨提示

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

最新文档

评论

0/150

提交评论