（中职）数据采集技术（初级）项目2：制作慕课网首页教学课件.pptx
( 4.5 )《（中职）数据采集技术（初级）项目2：制作慕课网首页教学课件.pptx》由会员分享，可在线阅读，更多相关《（中职）数据采集技术（初级）项目2：制作慕课网首页教学课件.pptx（99页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。
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属性表示，这个方法简便快捷，但是具
- 配套讲稿：
如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制：
部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词：
- 数据 采集 技术 初级 项目 制作 慕课网 首页 教学 课件
淘文阁 - 分享文档赚钱的网站所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。
限制150内