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