《（中职）数据采集技术（初级）项目2：制作慕课网首页教学课件.pptx》由会员分享，可在线阅读，更多相关《（中职）数据采集技术（初级）项目2：制作慕课网首页教学课件.pptx（99页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、正版可修改PPT课件（中职）数据采集技术（初级）项目2：制作慕课网首页教学课件CONTENTS 任务一：分析慕课网首页 任务二：编写慕课网首页 任务三：设置慕课网首页交互项目情景零经理：小张，咱们公司需要制作一个网页，并实现交互。小张：布局之类的什么要求？经理：这个大概的布局和慕课网的类似。小张：是用HTML+CSS实现吗？经理：对，使用这个实现基本的布局，之后需要使用JavaScript实现轮播图的制作。小张：好的，没问题。经理：据我了解，你JavaScript比较薄弱，好好学一下，争取轮播图这块自己完成。小张：好的，保证完成任务。小张和经理谈完话后，开始对慕课网站首页进行分析，并通过分析得
2、出需要使用的HTML标签和CSS样式，实现慕课网界面的步骤如下。步骤一：分析慕课网首页结构。步骤二：编写慕课网首页。步骤三：设置慕课网首页交互效果。学习目标零【知识目标】u了解HTML的结构u掌握HTML常用标签u掌握HTML表单属性u掌握HTML表格标签 u掌握CSS文本属性u掌握CSS背景属性u掌握CSS盒子模型u掌握CSS定位u了解JavaScript概念u掌握JavaScript用法学习目标零【技能目标】u能够分析网站的布局u能够根据网站的布局设计界面u能够根据网站布局制作界面u能够使用CSS设置布局u能够使用JavaScript进行交互 知识储备任务一：分析慕课网首页 壹 网页概述-
3、网页标准网页标准也称Web标准，它由一系列标准组成，这些标准有些是W3C制定的，有些是ECMA的ECMAScript标准。Web（WorldWideWeb）即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统，是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。Web的本意是爬虫网和网，在网页设计中称为网页。知识储备任务一：分析慕课网首页 壹 网页概述-网页标准 网页三剑客在符合标准的网页设计
4、中，HTML、CSS和JavaScript并列称为网页前端设计的3种基本语言。HTML英语全称是HyperTextMarkupLanguage，中文全称是超文本标记语言，作用是浏览器端组织和显示网页信息（文本、图片、视频等）。CSS英文全称是CascadingStyleSheets，中文全称是层叠样式表，作用是格式化网页的样式。JavaScript是客户端脚本语言，使网页与用户之间产生动态交互效果，属于网页的行为层。知识储备任务一：分析慕课网首页 壹 网页概述-网页发展网页发展共分为三个阶段，即web1.0（共享）、web2.0（交互）和web3.0（聚合）。Web 1.0 只读的互联网时代1
5、9世纪中期（1996年）HTML的出现推动了家用计算机的普及以技术创新为主导，注重点击浏览，通过门户整合，用户以流量为主，以网页制作为主，大多是静态页面，也有动态页面。Web2.0交互的互联网时代大约在2004年左右，诞生了WEB2.0的概念，更注重用户的交互作用，用户既是浏览者，也是内容的制造者，在模式上由单纯的“读”向“写”以及共同建设发展。Web3.0聚合的互联网时代Web3.0是一个正在尝试概念，用户拥有自己的数据，并能在不同平台交互共享，强化虚拟货币及网络安全和网络财富的共识，以及语义化的实现。知识储备任务一：分析慕课网首页 壹 网页概述-网页内容的分类 静态网页 静态网页是每个网页
6、都有固定的网址，网址后面是普通的格式，后缀一般为html，htm，shtml等，不包含“？”等格式的内容。静态网页发布到网上后，每个静态网页都会存储到服务器上。静态网页相对稳定，方便搜索引擎搜索，但在使用过程中，也存在一些弊端，比如不支持数据库，网站创建和维护所需工作量比较大，除此之外交互性比较差，在功能方面有很大的限制。动态网页 动态网页是相对静态网页来说的，指使用动态网络技术生成的网页，动态网页的后缀不仅仅是静态文件常见的形式，通常在动态网址之后包含“?”符号。在使用动态网页过程中，因其基于数据库技术，可以大大减少网站维护的工作量，采用动态技术的网页可以实现更多的功能，比如用户登录注册、在
7、线管理等。在动态网页中，搜索引擎在搜索时存在某些问题。搜索引擎通常不可能访问网站数据库中的所有网页，或者由于技术原因，搜索无法获得网址？数字背后的内容，所以网站使用动态网页需要做一定的技术处理，以适应搜索引擎的要求。CMS内容管理系统知识储备任务一：分析慕课网首页 壹 HTML基础HTML（HyperTextMarkupLanguage，超文本标记语言）是表示网页的一种规范（或者是一种标准），在HTML中，通过标记符可以定义网页内容的显示格式，在文本文件的基础上，增加了一系列描述文本格式，颜色等的标记，同时再添加声音、动画或视频等效果，可以形成精彩的画面。知识储备任务一：分析慕课网首页 壹 H
8、TML基础-HTML文档的基本结构 无标题文档知识储备任务一：分析慕课网首页 壹 HTML基础-HTML文档的基本结构HTML文档结构下包括下面几部分：（1）和分别表示文档的开始和结束，用于告知浏览器其自身是一个HTML文档。（2）为头部标签，用于定义HTML文档的头部信息，紧跟在标签后，里面包括的内容有、和等。（3）为主体标签，用于定义HTML文档所要显示的内容，在浏览器中所看到的图片，音频，视频，文本等都位于内。该标签中的内容是展示给用户看的。知识储备任务一：分析慕课网首页 壹 HTML基础-HTML语法在HTML中，包含标签、元素、块级元素、内联元素及属性等，其中：标签：用尖括号包围的关
9、键词称之为标签。元素：我们把匹配的标签对以及它们包围的内容称为元素。属性：开始标签中那些以名称/值对的形式出现的内容，我们称之为属性。知识储备任务一：分析慕课网首页 壹 HTML基础-HTML语法在HTML中，包含标签、元素、块级元素、内联元素及属性等，其中：块级元素：在浏览器默认显示时以新行来开始（和结束）的元素。实例:,内联元素：在浏览器默认显示时在同一行按从左至右顺序显示，不单独占一行的元素，又称行内元素。实例:,知识储备任务一：分析慕课网首页 壹 HTML基础-HTML常用标签标签 描述 定义段落，标签不但能使后面的文字换到下一行，还可以使两段之间多一空行 可定义预格式化的文本。被包围
10、在pre元素中的文本通常会保留空格和换行符，而文本也会呈现为等宽字体 在HTML页面中创建一条水平线 用于设置网页中的标题文字；n可以取16的整数值，取1时文字最大，取6时文字最小 定义粗体文本。定义大号字。HTML5不再支持。定义斜体字。定义小号字。定义下标字。定义上标字。定义呈现类似打字机或者等宽的文本效果。HTML5不再支持。标签的缩写版本,不赞成使用。使用代替。知识储备任务一：分析慕课网首页 壹 HTML基础-HTML常用标签标签 描述 orderlist 缩写，定义有序列表。unorderlist 缩写，定义无序列表。listitem 缩写，定义列表项。definitionlist
11、缩写，定义自定义列表。definitionterm 缩写，自定义列表项目。definitiondescription 缩写，定义自定义的描述。超链接标签；用于从一张页面链接到另一张页面。元素最重要的属性是href 属性，它指示链接的目标。向网页中嵌入一幅图像，要在页面上显示图像。知识储备任务一：分析慕课网首页 壹 HTML基础-表格 表格是由行和列组成的结构化数据集（表格数据），通过在行和列的标题之间进行视觉关联的方法，就可以让信息能够很简单地被解读出来。每个表格均有若干行，每行被分割为若干单元格。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等。表格的基本结构如下图所示。知识储
12、备任务一：分析慕课网首页 壹 HTML基础-表格 表格是通过，等标签来完成的，具体标签及描述如下表所示。标签 描述 定义表格。定义表格的页眉。定义表格的主体。定义表格的页脚。定义表格的行。定义表格的表头。定义表格单元。定义表格标题。定义用于表格列的属性。定义表格列的组。知识储备任务一：分析慕课网首页 壹 HTML基础-表格 标签定义HTML表格。一个HTML表格包括元素，一个或多个、以及元素。元素定义表格行，元素定义表头，元素定义表格单元，常用属性如下表所示。属性 值 描述border pixels规定表格单元是否拥有边框。cellpadding Pixels HTML5不支持。规定单元边沿与
13、其内容之间的空白。cellspacing pixels HTML5不支持。规定单元格之间的空白。frame Void、above、below、hsides、lhs、rhs、vsides、box、borderHTML5不支持。规定外侧边框的哪个部分是可见的。rules None、groups、rows、cols、allHTML5不支持。规定内侧边框的哪个部分是可见的。summary text HTML5不支持。规定表格的摘要。width Pixels，%HTML5不支持。规定表格的宽度。知识储备任务一：分析慕课网首页 壹 HTML基础-表格 在表格中，可以实现跨多列或跨多行的现象，实现跨多列及跨
14、多行的语法如下。/跨多列的语法/跨多行的语法知识储备任务一：分析慕课网首页 壹 HTML基础-框架 框架的作用是把浏览器窗口分割成几个独立的小窗口，每个小窗口可以显示不同页面的内容，这样就可以同时浏览若干个网页。框架分为两种，分别是普通框架和内嵌框架。框架相关标签如下表所示。标签 描述 定义一个框架集，框架集是若干框架的集合，利用框架集可以定义框架结构，实现分割浏览器窗口的功能。定义frameset 中的一个特定的窗口（框架）。noframes 元素可为那些不支持框架的浏览器显示文本。noframes 元素位于frameset 元素内部。定义内联的子窗口（框架）知识储备任务一：分析慕课网首页
15、壹 HTML基础-框架 说明：frameset标签有一个必需的属性，即rows或cols。常用属性如下表所示：属性 值 描述frameborder 0 无边框1 有边框（默认值）规定是否显示框架周围的边框。出于实用性方面的原因，最好不用设置该属性，请使用CSS 来应用边框样式和颜色。marginheight pixels 规定框架内容与框架的上方和下方之间的高度，以像素计。marginwidth pixels 规定框架内容与框架的左侧和右侧之间的高度，以像素计。name name 规定框架的名称。用于在JavaScript 中引用元素，或者作为链接的目标。noresize noresize 规
16、定无法调整框架的大小。scrolling yes 始终显示滚动条no 从不显示滚动条auto 在需要的时候显示滚动条规定是否在框架中显示滚动条。默认地，如果内容大于框架，就会出现滚动条。src URL 规定在框架中显示的文档的URL。知识储备任务一：分析慕课网首页 壹 HTML基础-表单元素 在编写网站的登录注册页面时，表单的应用非常重要，表单的主要作用就是收集用户的信息，例如：在一个购物网站上购物，购物之前需要注册一个该网站的账号，用户需要输入自己的个人信息，包括姓名、性别、邮箱、地址等信息。表单中的按钮标签主要是实现用户信息储存的功能，当用户点击按钮之后用户的信息会储存到服务器中，然后由服
17、务器将用户信息上传到数据库中或者将相关信息返回到主页面中。知识储备任务一：分析慕课网首页 壹 HTML基础-表单元素 表单的标签为标签。表单的五个常用属性分别如下。name、method、action、enctype、target。代码的基本格式如下。在HTML5中新增加的属性有：autocomplete、novalidate。知识储备任务一：分析慕课网首页 壹 HTML基础-表单元素 标签的属性如下表所示。属性 描述name 表单的名称method 定义表单结果从浏览器传送到服务器的方法，一般有两种方法：get 和postaction 用来定义表单处理程序(ASP，CGI 等程序)的位置(相
18、对地址或绝对地址)enctype 设置表单资料的编码方式target 设置返回信息的显示方式accept-charset 规定服务器可处理的表单数据字符集autocomplete 规定是否启用表单的自动完成功能，有on 和off 两个值novalidate 设置了该特性不会在表单提交之前对其进行验证知识储备任务一：分析慕课网首页 壹 HTML基础-表单元素 表单控件为单行输入型控件input标签。输入类型是由类型属性（type）定义的。基本语法如下：知识储备任务一：分析慕课网首页 壹 HTML基础-表单元素 输入元素对应的类型如下表所示。type 取值 取值的含义 屏幕呈现效果text 文本框
19、password 密码框radio 单选按钮checkbox 复选框button 普通按钮submit 提交按钮reset 重置按钮image 图形域 显示为一个图片hidden隐藏域。不显示在页面，只将内容传递到服务器中。隐藏字段，不可见file 文件域inputtype=知识储备任务一：分析慕课网首页 壹 HTML基础-表单元素 input标签属性 值 描述id id规定HTML 元素的唯一的id。通过JavaScript（HTMLDOM）或通过CSS 为带有指定id 的元素改变或添加样式。name field_name定义input 元素的名称。用于对提交到服务器后的表单数据进行标识，或
20、者在客户端通过JavaScript引用表单数据。只有设置了name 属性的表单元素才能在提交表单时传递它们的值。checked checked规定此input 元素首次加载时应当被选中。checked 属性 与 或 配合使用。checked 属性也可以在页面加载后，通过JavaScript 代码进行设置。disabled disabled当input 元素加载时禁用此元素。被禁用的input 元素既不可用，也不可点击。可以设置disabled 属性，直到满足某些其他的条件为止（比如选择了一个复选框等等）。然后，就需要通过JavaScript 来删除disabled 值，将input 元素的值切
21、换为可用。注释：disabled 属性无法与 一起使用。maxlength number规定输入字段中的字符的最大长度，以字符个数计。maxlength 属性与 或 配合使用。size number_of_char对于 和，size 属性定义的是可见的字符数。而对于其他类型，size 属性定义的是以像素为单位的输入字段宽度。src URL 定义以提交按钮形式显示的图像的URL。任务描述任务一：分析慕课网首页 壹在日常生活中，无论是手机端还是PC端，看到的界面都可以由网页技术实现，其中，HTML+CSS实现了网页的制作，JavaScript实现了网站的交互。小张想实现慕课网首页的制作，首先需要了
22、解慕课网首页的布局及使用的相关HTML标签。分析慕课网布局的思路如下：（1）打开慕课网站首页。（2）分析慕课网站首页布局。（3）确定慕课网站使用的HTML标签。任务步骤任务一：分析慕课网首页 壹 第一步：打开慕课网站首页。https:/任务步骤任务一：分析慕课网首页 壹 第二步：分析慕课网站头部部分。头部可以分为四部分，分别是logo、导航、输入框、登录和注册入口。效果如下图所示。logo部分可以用img引入图片。导航部分可以用列表形式表示，建议使用ul标签和li标签。也可以使用ol标签。搜索框可以使用input标签中type=text，发现搜索框中有“前端小白 Java入门”内容，可以用pa
23、lacehold属性或者是直接使用a标签。搜索图标可以用img表示。登录和注册入门可以使用无序列表制作。任务步骤任务一：分析慕课网首页 壹 第三步：分析慕课网站中间部分。中间部分又分为上下两部分，其中上面部分包括切换菜单和轮播图，下面部分是一些方向的快捷方式进入。效果如下图所示。任务步骤任务一：分析慕课网首页 壹点击左边切换菜单，会弹出相关方向的分类目录，效果如下图所示。其中：l 轮播图可以使用img标签引入对应的图片内容，之后通过JavaScript实现。l 轮播图的切换按钮可以使用a标签实现。l 轮播图左侧的切换菜单可以使用列表编写。l 切换菜单的分类目录中标题可以使用H4标签，分类目录内
24、容可以使用无序列表标签。文字部分可以使用span标签。l 轮播图下方的图片可以使用img标签。任务步骤任务一：分析慕课网首页 壹 第四步：尾部部分。尾部是由几个应用的图标组成，效果如下图所示。可以使用a标签和img标签实现。知识储备任务二：编写慕课网首页 贰u CSS3简介 CSS3概述CSS3（CascadingStyleSheet，层叠样式表）是一种不需要编译、可直接由浏览器执行的标记性语言，用于控制页面的布局、文字的大小和颜色、图片位置、列表、表单等样式。CSS3的产生大大简化了编程模型。CSS3样式表的特点如下：表现和内容分离 易于维护和改版 缩减页面代码，提高页面浏览速度 结构清晰，
25、精确的控制网页中各元素的位置 更好的控制页面的布局 与脚本语言相结合，从而产生各种动态效果知识储备任务二：编写慕课网首页 贰u CSS3简介 CSS3样式规则CSS3主要是给文字、图片设置样式和布局。CSS3的标准格式如下：具体代码如下所示：选择器 属性1:属性值1；属性2:属性值2h1font-size:10px;color:#c0c0c0;CSS3 样式规则知识储备任务二：编写慕课网首页 贰u CSS3简介 CSS3样式表在CSS3里可以使用如下四种方法，将样式表的功能加到网页里。1.定义标记的style属性CSS3样式可以写在HTML标签内，用style属性表示，这个方法简便快捷，但是具
26、有局限性，无法通用。该属性的语法格式如下。知识储备任务二：编写慕课网首页 贰u CSS3简介 CSS3样式表2.定义内部样式定义内部样式表，即CSS3样式表写在HTML文档内，可以对整个或者整个设置样式，也可以对单个标签设置样式。CSS3的基本语法如下：选择符1 样式属性：属性值；样式属性：属性值选择符2 样式属性：属性值；样式属性：属性值.知识储备任务二：编写慕课网首页 贰u CSS3简介 CSS3样式表3.嵌入外部样式表嵌入外部样式表就是在HTML代码中直接导入样式表的方法。基本语法如下：注意：该语法格式中import语句后的“;”一定要加上。importurl(外部样式表的文件名称);知
27、识储备任务二：编写慕课网首页 贰u CSS3简介 CSS3样式表4.链接外部样式表链接外部样式表就是把外部的CSS文件链接到HTML中。基本语法如下：知识储备任务二：编写慕课网首页 贰u CSS选择器要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素，在CSS中，执行这一任务的样式规格部分被称为选择器。类选择器类选择器根据类名来选择前面以“.”来标志。语法结构如下。示例代码如下：.类选择器/*CSS 规则;*/.a1color:yellow;font-weight:bold;类选择器知识储备任务二：编写慕课网首页 贰u CSS选择器 标签选择器一个完整的HTML页面是有很多不同的
28、标签组成，而标签选择器，则是决定哪些标签，采用相应的CSS样式。示例代码如下：h1color:red;font-size:25px;知识储备任务二：编写慕课网首页 贰u CSS选择器 ID选择器ID选择器前面以“#”号来标志，根据元素ID来选择元素，具有唯一性，这意味着同一id在同一文档页面中只能出现一次，ID属性不允许有以空格分隔的词列表。语法结构如下。示例代码如下：#a2color:#99FF66;font-size:20px;ID选择器#id 选择器/*CSS 规则;*/。知识储备任务二：编写慕课网首页 贰u CSS选择器 后代选择器后代选择器也称为包含选择器，用来选择特定元素或元素组的
29、后代，将对父元素的选择放在前面，对子元素的选择放在后面，中间加一个空格分开。语法结构如下：示例代码如下：listrongfont-style:italic;font-weight:normal;标签 子标签/*CSS规则*/知识储备任务二：编写慕课网首页 贰u CSS选择器 子选择器子代选择器与后代选择器的区别在于，子选择器仅是指它的直接后代。而后代选择器是作用于所有后代元素。子选择器是通过“”进行选择。语法结构如下：示例代码如下：/*只选择h2元素的子元素strong元素*/h2strongcolor:red;元素子元素/*CSS规则*/知识储备任务二：编写慕课网首页 贰u CSS选择器 伪
30、类选择器伪类是指通过元素的基本特征对元素进行分类，而不是通过元素的名字、属性等进行分类。伪类通过冒号“:”来定义，它定义了元素的状态，如：点击按下，点击完成等。语法结构如下：标记：伪类名/*CSS规则*/a:linkcolor:#FF0000;/*未访问的链接*/a:visitedcolor:#00FF00;/*已访问的链接*/a:hovercolor:#FF00FF;/*鼠标划过链接*/a:activecolor:#0000FF;/*已选中的链接*/知识储备任务二：编写慕课网首页 贰u CSS选择器 伪类选择器常用伪类如下表所示：伪类名描述link 设置a 标记在未被访问前的样式hover
31、设置a 标记在鼠标悬停时的样式active 设置a 标记在鼠标点击时的样式visited 设置a 标记在被访问后的样式first-letter 作用于块，设置第一个字符的样式first-line 作用于块，设置第一个行的样式表first-child 设置第一个子标记的样式lang 设置具有lang 属性的标记的样式知识储备任务二：编写慕课网首页 贰u CSS字体在CSS中，使用font相关属性设置字体的样式，常用的font子属性如下表所示。属性 属性值 描述font-size 绝对大小|相对大小|百分数|具体某个值（单位：pt|px|in）设置字体大小font-family 宋体，黑体 设置字
32、体类型font-weight normal 设置字体常规格式显示lighter 设置比正常字体淡bold 设置字体加粗bolder 设置字体特粗font-style normal 设置字体常规式显示italic 设置字体为斜体Oblique 与italic 效果一样知识储备任务二：编写慕课网首页 贰u CSS文本文本属性主要用来修饰HTML文件中的文本内容、水平对齐方式以及行间距等。常用文本属性如下表所示。文本属性 属性值 描述text-indent length（常用单位pt）设置文字的首行缩进距离line-height length（常用单位pt）定义行间距letter-spacing l
33、ength（常用单位px）定义字符间距text-decoration underline显示下划线overline显示上划线line-through显示删除线none无任何修饰text-align left左对齐center居中对齐right右对齐justify两端对齐word-breakbreak-all允许单词中间换行keep-all不允许单词中间换行知识储备任务二：编写慕课网首页 贰u CSS颜色和背景属性 CSS颜色和背景属性如下表所示。属性 属性值 含义background-color颜色值 设定一个元素的背景颜色background-image URL（image_file_pat
34、h）设定一个元素的背景图像background-repeat repeat-x设置图像横向重复repeat-y设置图像纵向重复repeat设置图像横向及纵向重复no-repeat设置图像不重复background-position left设置图像居左放置right设置图像居右放置center设置图像居中放置top设置图像向上对齐bottom设置图像向下对齐知识储备任务二：编写慕课网首页 贰u 盒子模型把HTML页面中的元素看作是一个矩形的盒子叫做盒子模型。盒子模型具备四个属性，即内容、填充、边框、边界。CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。盒子模型的四个属性
35、分别是margin、border、padding、content，四者之间的相互关系如下图所示。知识储备任务二：编写慕课网首页 贰u 盒子模型 margin属性margin是设置元素边框与相邻元素之间的距离的属性。margin的属性如下表所示。注意：使用复合属性margin定义外边距时，必须按顺时针顺序采用值复制，一个值为四边、两个值为上下/左右，三个值为上/左右/下。属性 描述margin-top上外边距margin-right右外边距magin-bottom下外边距margin-left左外边距margin 上外边距右外边距下边距左边距知识储备任务二：编写慕课网首页 贰u 盒子模型 bor
36、der属性border是为图像添加边框的属性，border的属性值有三种，分别是：边框的粗细程度（2px）、边框的样式（solid）、边框的颜色（#000）。border的属性如下表所示：属性 描述border-width 用来设置边框粗细主要参考值有thin定义细边框，medium定义中等边框，即默认边框，thick定义粗边框border-style 用来设置元素边框样式，主要参考值有none定义无边框，solid定义实线，double定义双线 双线宽度等于border-width的值border-color用来设置边框的颜色知识储备任务二：编写慕课网首页 贰u 盒子模型 padding属性
37、padding是设置边框和内部元素之间的距离的属性，padding的属性如下表所示。属性 描述padding-top上内边距padding-right右内边距padding-bottom下内边距padding-left左内边距padding 上内边距右内边距下内距左内距知识储备任务二：编写慕课网首页 贰u 盒子模型 position属性position属性一般用于网页中的定位，基本语法如下所示。position：static|absolute|fixed|relative知识储备任务二：编写慕课网首页 贰u 盒子模型 position属性position常用属性值如下表所示。取值 说明 参照物
38、static静态定位 默认值。元素出现在正常的流中（忽略top,bottom,left,right或者z-index声明）。relative相对定位 自己原来的位置absolute绝对定位已定位的祖先元素/浏览器视口fixed固定定位浏览器视口（并不是所有的浏览器都支持）说明：l static:元素的位置由元素在(X)HTML中的位置决定。元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。l relative:相对定位的元素没有脱离文档流，只是按照left、right、top、bottom值进行了位置的偏移。元素相对定位后，仍然在文档流
39、中占据原来的空间。l absolute:绝对定位使元素脱离文档流，因此不占据空间。普通文档流中元素的布局就像绝对定位的元素不存在时一样。l fixed:类似于absolute（绝对定位），不同的是其定位相对于视窗。知识储备任务二：编写慕课网首页 贰u 什么是SEO 定义SEO(SearchEngineOptimization)，汉译为搜索引擎优化，为近年来较为流行的网络营销方式，主要目的是增加特定关键字的曝光率以增加网站在搜索引擎中的能见度(即排名)，进而增加销售的机会。分为站外SEO和站内SEO两种。主要工作通过了解各类搜索引擎如何抓取互联网页面、如何进行索引以及如何确定其对某一特定关键词的
40、搜索结果排名等技术，来对网页进行相关的优化，使其提高搜索引擎排名，从而提高网站访问量，最终提升网站的销售能力或宣传能力的技术。知识储备任务二：编写慕课网首页 贰u SEO的重要性 据全球最大网络调查公司CyberAtlas的调查表明，网站75的访问量都来自于搜索引擎的推荐。据美国权威顾问公司IMTStrategies的调查结果表明：搜索引擎在导引用户到达企业站点的比例点到了85,而自由冲浪、口碑宣传、BANNER广告以及报纸、电视等媒体所带来的客户量仅有15。据WebideStory公司的调查研究，网站访问量的80来源于搜索引擎。搜索引擎在互联网上的使用率仅次于E-mail，有79的使用率；就
41、中国而言，搜索引擎用户占互联网用户总数的88，平均每人每天使用三次。知识储备任务二：编写慕课网首页 贰 SEO的行业前景 做关键词排名，从而带来大量的客户卖产品和服务。很多大型机械厂家就是这么做的，显然通过SEO赚取了不少利润。通过SEO带来大量流量，从而投放广告或者跟厂家合作买产品。比如流量站。做网站关键词排名，然后转介绍客户。比如做一个养羊的站点，介绍客户到别人家养殖场，赚取中间利润。做平台赚取会员费。比如招聘站、婚恋站。做平台，用大量的用户赚取商家的费用。比如试客网站。任务描述任务二：编写慕课网首页 贰在任务1中分析了慕课首页，学习了HTML与CSS后，能够实现慕课首页的制作，通过慕课首
42、页的实现掌握CSS如何设置布局，如何美化界面，掌握HTML相关标签的使用，达到熟练分析网页结构布局的能力。实现编写慕课首页思路如下：（1）根据任务1中的分析，编写HTML部分。（2）使用CSS对HTML部分进行美化。任务步骤任务二：编写慕课网首页 贰 第一步：编写慕课首页导航部分HTML代码如下：实战 路径 实战 猿问 手记任务步骤任务二：编写慕课网首页 贰 第一步：编写慕课首页导航部分 前端小白Java 入门 登录 注册任务步骤任务二：编写慕课网首页 贰 第一步：设置头部样式CSS核心代码如下：/*页面导航部分*/.header-leftlifloat:left;.header-leftap
43、adding:020px;font-size:16px;/*顶部输入框的样式*/.search-barwidth:240px;height:60px;/*输入框*/.search-barinputwidth:240px;height:40px;border:0px;border-bottom:1pxsolid#ccc;line-height:40px;font-size:14px;padding-left:10px;background:transparent;.search-promptfont-size:14px;z-index:3;任务步骤任务二：编写慕课网首页 贰 第一步：设置头部样式
44、效果如下图所示：/*注册，登录样式*/.login-registerlifloat:left;.login-registerapadding-right:30px;任务步骤任务二：编写慕课网首页 贰 第二步：编写慕课中间部分HTML代码如下：><任务步骤任务二：编写慕课网首页 贰 第二步：编写慕课中间部分前端开发分类目录基础:HTML/CSS/JavaScript/jQuery任务步骤任务二：编写慕课网首页 贰 第二步：编写慕课中间部分进阶:Html5/CSS3/Node.js/AngularJS/Bootstrap/React/Sass/Less/Vue.js/WebApp其他:
45、前端工具任务步骤任务二：编写慕课网首页 贰 第二步：编写慕课中间部分分类目录职业路径前端小白手册职业路径HTML5与CSS3实现动态网页实战Vue2.0高级实战-开发移动端音乐App实战Web前后端漏洞分析与防御课程携程C4技术分享沙龙任务步骤任务二：编写慕课网首页 贰 第二步：编写慕课中间部分后端开发移动开发数据库云计算&大数据运维和测试UI设计任务步骤任务二：编写慕课网首页 贰 第二步：编写慕课中间部分任务步骤任务二：编写慕课网首页 贰 第二步：编写慕课中间部分CSS核心代码如下：.mainmargin:30pxauto0auto;width:1200px;height:460px;/*底
46、部的轮播图*/.bg-carouselz-index:-1;width:1200px;overflow:hidden;/*存放轮播图所要用的图片*/.picheight:460px;width:6000px;.picimgfloat:left;/*轮播图左右切换按钮*/.prev,.nextposition:absolute;top:175px;z-index:100;display:inline-block;width:50px;height:80px;font-size:70px;line-height:75px;text-align:center;任务步骤任务二：编写慕课网首页 贰 第二
47、步：编写慕课中间部分 效果如下图所示：任务步骤任务二：编写慕课网首页 贰 第三步：编写慕课尾部部分HTML代码如下：关于我们企业合作人才招聘讲师招募联系我们意见反馈友情链接京ICP备13042132号任务步骤任务二：编写慕课网首页 贰 第三步：编写慕课尾部部分CSS核心代码如下：效果如下图所示：/*1.position:absolute;left:50%;margin-left:-600px;width:1200px;实现div居中 2.bottom:0;div一直在页面的底部*/#footerposition:absolute;left:50%;bottom:0;margin-left:-6
48、00px;width:1200px;font-size:14px;知识储备任务三：设置慕课网首页交互 弎uJavaScript简介 JavaScript概念JavaScript是面向Web的编程语言，获得了所有网页浏览器的支持，是目前使用最广泛的脚本编程语言之一，也是网页设计和Web应用必须掌握的基本工具。ECMAScript是JavaScript的标准，但它并不等同于JavaScript，也不是唯一被标准化的规范。一个完整的JavaScript实现由以下3个不同部分组成：核心（ECMAScript）：语言核心部分。文档对象模型（DocumentObjectModel，DOM）：网页文档操作标
49、准。浏览器对象模型（BOM）：客户端和浏览器窗口操作基础。知识储备任务三：设置慕课网首页交互 弎uJavaScript简介 JavaScript的发展历程年份 发展史1997年 ECMAScript1.0发布1998年6月 ECMAScript2.0发布1999年12月 ECMAScript3.0版发布，并成为JavaScript的通用标准，获得广泛支持2007年10月 ECMAScript4.0版草案发布2009年12月 ECMAScript5.0版正式发布2011年6月 ECMAScript5.1版发布，并且成为ISO国际标准（ISO/IEC16262:2011）2013年12月 ECMA
50、Script6版草案发布2015年6月 ECMAScript6发布正式版本，并更名为ECMAScript2015。Mozilla在这个标准的基础上推出了JavaScript2.0。2016年 ECMAScript7.0版正式发布2017年 ECMAScript8.0版正式发布知识储备任务三：设置慕课网首页互动 弎uJavaScript基本语法 JavaScript语句和代码块JavaScript语句是发给浏览器的命令，JavaScript语句结束使用回车，但建议使用“;”。代码块用于在函数或者条件语句中把若干语句组合起来，通常情况下以左花括号开始，右花括号结束。示例代码如下。/语句docume