（中職）數據采集技術（初級）項目2：制作慕課網首頁教學課件

1、正版可修改PPT課件（中職）數據采集技術（初級）項目2：制作慕課網首頁教學課件CONTENTS任務一：分析慕課網首頁任務二：編寫慕課網首頁任務三：設置慕課網首頁交互項目情景零經理：小張，咱們公司需要制作一個網頁，并實現交互。小張：布局之類的什么要求？經理：這個大概的布局和慕課網的類似。小張：是用HTML+CSS實現嗎？經理：對，使用這個實現基本的布局，之后需要使用JavaScript實現輪播圖的制作。小張：好的，沒問題。經理：據我了解，你JavaScript比較薄弱，好好學一下，爭取輪播圖這塊自己完成。小張：好的，保證完成任務。小張和經理談完話后，開始對慕課網站首頁進行分析，并通過分析得出需要

2、使用的HTML標簽和CSS樣式，實現慕課網界面的步驟如下。步驟一：分析慕課網首頁結構。步驟二：編寫慕課網首頁。步驟三：設置慕課網首頁交互效果。學習目標零【知識目標】了解HTML的結構掌握HTML常用標簽掌握HTML表單屬性掌握HTML表格標簽 掌握CSS文本屬性掌握CSS背景屬性掌握CSS盒子模型掌握CSS定位了解JavaScript概念掌握JavaScript用法學習目標零【技能目標】能夠分析網站的布局能夠根據網站的布局設計界面能夠根據網站布局制作界面能夠使用CSS設置布局能夠使用JavaScript進行交互 知識儲備任務一：分析慕課網首頁壹網頁概述-網頁標準網頁標準也稱Web標準，它由一系

3、列標準組成，這些標準有些是W3C制定的，有些是ECMA的ECMAScript標準。Web（World Wide Web）即全球廣域網，也稱為萬維網，它是一種基于超文本和HTTP的、全球性的、動態(tài)交互的、跨平臺的分布式圖形信息系統(tǒng)，是建立在Internet上的一種網絡服務，為瀏覽者在Internet上查找和瀏覽信息提供了圖形化的、易于訪問的直觀界面，其中的文檔及超級鏈接將Internet上的信息節(jié)點組織成一個互為關聯(lián)的網狀結構。Web的本意是爬蟲網和網，在網頁設計中稱為網頁。知識儲備任務一：分析慕課網首頁壹網頁概述-網頁標準網頁三劍客在符合標準的網頁設計中，HTML、CSS和JavaScript

4、并列稱為網頁前端設計的3種基本語言。HTML英語全稱是HyperText Markup Language，中文全稱是超文本標記語言，作用是瀏覽器端組織和顯示網頁信息（文本、圖片、視頻等）。CSS英文全稱是Cascading Style Sheets，中文全稱是層疊樣式表，作用是格式化網頁的樣式。JavaScript是客戶端腳本語言，使網頁與用戶之間產生動態(tài)交互效果，屬于網頁的行為層。知識儲備任務一：分析慕課網首頁壹網頁概述-網頁發(fā)展網頁發(fā)展共分為三個階段，即web1.0（共享）、web2.0（交互）和web3.0（聚合）。Web 1.0 只讀的互聯(lián)網時代19世紀中期（1996年）HTML的出現

5、推動了家用計算機的普及以技術創(chuàng)新為主導，注重點擊瀏覽，通過門戶整合，用戶以流量為主，以網頁制作為主，大多是靜態(tài)頁面，也有動態(tài)頁面。Web 2.0 交互的互聯(lián)網時代大約在2004年左右，誕生了WEB2.0的概念，更注重用戶的交互作用，用戶既是瀏覽者，也是內容的制造者，在模式上由單純的“讀”向“寫”以及共同建設發(fā)展。Web 3.0 聚合的互聯(lián)網時代Web3.0是一個正在嘗試概念，用戶擁有自己的數據，并能在不同平臺交互共享，強化虛擬貨幣及網絡安全和網絡財富的共識，以及語義化的實現。知識儲備任務一：分析慕課網首頁壹網頁概述-網頁內容的分類靜態(tài)網頁靜態(tài)網頁是每個網頁都有固定的網址，網址后面是普通的格式，

6、后綴一般為html，htm，shtml等，不包含“？”等格式的內容。靜態(tài)網頁發(fā)布到網上后，每個靜態(tài)網頁都會存儲到服務器上。靜態(tài)網頁相對穩(wěn)定，方便搜索引擎搜索，但在使用過程中，也存在一些弊端，比如不支持數據庫，網站創(chuàng)建和維護所需工作量比較大，除此之外交互性比較差，在功能方面有很大的限制。動態(tài)網頁動態(tài)網頁是相對靜態(tài)網頁來說的，指使用動態(tài)網絡技術生成的網頁，動態(tài)網頁的后綴不僅僅是靜態(tài)文件常見的形式，通常在動態(tài)網址之后包含“?”符號。在使用動態(tài)網頁過程中，因其基于數據庫技術，可以大大減少網站維護的工作量，采用動態(tài)技術的網頁可以實現更多的功能，比如用戶登錄注冊、在線管理等。在動態(tài)網頁中，搜索引擎在搜索時

7、存在某些問題。搜索引擎通常不可能訪問網站數據庫中的所有網頁，或者由于技術原因，搜索無法獲得網址？數字背后的內容，所以網站使用動態(tài)網頁需要做一定的技術處理，以適應搜索引擎的要求。CMS 內容管理系統(tǒng)知識儲備任務一：分析慕課網首頁壹HTML基礎HTML（Hyper Text Markup Language，超文本標記語言）是表示網頁的一種規(guī)范（或者是一種標準），在HTML中，通過標記符可以定義網頁內容的顯示格式，在文本文件的基礎上，增加了一系列描述文本格式，顏色等的標記，同時再添加聲音、動畫或視頻等效果，可以形成精彩的畫面。知識儲備任務一：分析慕課網首頁壹HTML基礎-HTML文檔的基本結構 無標

8、題文檔 知識儲備任務一：分析慕課網首頁壹HTML基礎-HTML文檔的基本結構 HTML文檔結構下包括下面幾部分：（1）和分別表示文檔的開始和結束，用于告知瀏覽器其自身是一個HTML文檔。（2）為頭部標簽，用于定義HTML文檔的頭部信息，緊跟在標簽后，里面包括的內容有、和等。（3）為主體標簽，用于定義HTML文檔所要顯示的內容，在瀏覽器中所看到的圖片，音頻，視頻，文本等都位于內。該標簽中的內容是展示給用戶看的。知識儲備任務一：分析慕課網首頁壹HTML基礎-HTML語法在HTML中，包含標簽、元素、塊級元素、內聯(lián)元素及屬性等，其中：標簽：用尖括號包圍的關鍵詞稱之為標簽。元素：我們把匹配的標簽對以及

9、它們包圍的內容稱為元素。屬性：開始標簽中那些以名稱/值對的形式出現的內容，我們稱之為屬性。知識儲備任務一：分析慕課網首頁壹HTML基礎-HTML語法在HTML中，包含標簽、元素、塊級元素、內聯(lián)元素及屬性等，其中：塊級元素：在瀏覽器默認顯示時以新行來開始（和結束）的元素。實例: , , , 內聯(lián)元素：在瀏覽器默認顯示時在同一行按從左至右順序顯示，不單獨占一行的元素，又稱行內元素。 實例: , , , 知識儲備任務一：分析慕課網首頁壹HTML基礎-HTML常用標簽標簽描述定義段落，標簽不但能使后面的文字換到下一行，還可以使兩段之間多一空行可定義預格式化的文本。被包圍在pre元素中的文本通常會保留空

10、格和換行符，而文本也會呈現為等寬字體在 HTML 頁面中創(chuàng)建一條水平線用于設置網頁中的標題文字；n可以取16的整數值，取1時文字最大，取6時文字最小定義粗體文本。定義大號字。HTML5不再支持。定義斜體字。定義小號字。定義下標字。定義上標字。定義呈現類似打字機或者等寬的文本效果。HTML5不再支持。 標簽的縮寫版本,不贊成使用。使用 代替。知識儲備任務一：分析慕課網首頁壹HTML基礎-HTML常用標簽標簽描述order list縮寫，定義有序列表。unorder list縮寫，定義無序列表。list item縮寫，定義列表項。definition list縮寫，定義自定義列表。definiti

11、on term縮寫，自定義列表項目。definition description縮寫，定義自定義的描述。超鏈接標簽；用于從一張頁面鏈接到另一張頁面。 元素最重要的屬性是 href 屬性，它指示鏈接的目標。向網頁中嵌入一幅圖像，要在頁面上顯示圖像。知識儲備任務一：分析慕課網首頁壹HTML基礎-表格表格是由行和列組成的結構化數據集（表格數據），通過在行和列的標題之間進行視覺關聯(lián)的方法，就可以讓信息能夠很簡單地被解讀出來。每個表格均有若干行，每行被分割為若干單元格。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等。表格的基本結構如下圖所示。知識儲備任務一：分析慕課網首頁壹HTML基礎-

12、表格表格是通過，等標簽來完成的，具體標簽及描述如下表所示。標簽描述定義表格。定義表格的頁眉。定義表格的主體。定義表格的頁腳。定義表格的行。定義表格的表頭。定義表格單元。定義表格標題。定義用于表格列的屬性。定義表格列的組。知識儲備任務一：分析慕課網首頁壹HTML基礎-表格 標簽定義 HTML表格。一個HTML表格包括 元素，一個或多個、以及元素。 元素定義表格行， 元素定義表頭， 元素定義表格單元，常用屬性如下表所示。屬性值描述borderpixels規(guī)定表格單元是否擁有邊框。cellpaddingPixelsHTML5 不支持。規(guī)定單元邊沿與其內容之間的空白。cellspacingpixels

13、HTML5 不支持。規(guī)定單元格之間的空白。frameVoid、above、below、hsides、lhs、rhs、vsides、box、borderHTML5 不支持。規(guī)定外側邊框的哪個部分是可見的。rulesNone、groups、rows、cols、allHTML5 不支持。規(guī)定內側邊框的哪個部分是可見的。summarytextHTML5 不支持。規(guī)定表格的摘要。widthPixels，%HTML5 不支持。規(guī)定表格的寬度。知識儲備任務一：分析慕課網首頁壹HTML基礎-表格在表格中，可以實現跨多列或跨多行的現象，實現跨多列及跨多行的語法如下。/跨多列的語法/跨多行的語法 知識儲備任務一：

14、分析慕課網首頁壹HTML基礎-框架框架的作用是把瀏覽器窗口分割成幾個獨立的小窗口，每個小窗口可以顯示不同頁面的內容，這樣就可以同時瀏覽若干個網頁。框架分為兩種，分別是普通框架和內嵌框架。框架相關標簽如下表所示。標簽描述定義一個框架集，框架集是若干框架的集合，利用框架集可以定義框架結構，實現分割瀏覽器窗口的功能。定義 frameset 中的一個特定的窗口（框架）。noframes 元素可為那些不支持框架的瀏覽器顯示文本。noframes 元素位于 frameset 元素內部。定義內聯(lián)的子窗口（框架）知識儲備任務一：分析慕課網首頁壹HTML基礎-框架說明：frameset標簽有一個必需的屬性，即r

15、ows或cols。常用屬性如下表所示：屬性值描述frameborder0無邊框1有邊框（默認值）規(guī)定是否顯示框架周圍的邊框。出于實用性方面的原因，最好不用設置該屬性，請使用 CSS 來應用邊框樣式和顏色。marginheightpixels規(guī)定框架內容與框架的上方和下方之間的高度，以像素計。marginwidthpixels規(guī)定框架內容與框架的左側和右側之間的高度，以像素計。namename規(guī)定框架的名稱。用于在 JavaScript 中引用元素，或者作為鏈接的目標。noresizenoresize規(guī)定無法調整框架的大小。scrollingyes始終顯示滾動條no從不顯示滾動條auto在需要的

16、時候顯示滾動條規(guī)定是否在框架中顯示滾動條。默認地，如果內容大于框架，就會出現滾動條。srcURL規(guī)定在框架中顯示的文檔的 URL。知識儲備任務一：分析慕課網首頁壹HTML基礎-表單元素在編寫網站的登錄注冊頁面時，表單的應用非常重要，表單的主要作用就是收集用戶的信息，例如：在一個購物網站上購物，購物之前需要注冊一個該網站的賬號，用戶需要輸入自己的個人信息，包括姓名、性別、郵箱、地址等信息。表單中的按鈕標簽主要是實現用戶信息儲存的功能，當用戶點擊按鈕之后用戶的信息會儲存到服務器中，然后由服務器將用戶信息上傳到數據庫中或者將相關信息返回到主頁面中。知識儲備任務一：分析慕課網首頁壹HTML基礎-表單元

17、素表單的標簽為標簽。表單的五個常用屬性分別如下。name、method、action、enctype、target。代碼的基本格式如下。在HTML5中新增加的屬性有：autocomplete、novalidate。知識儲備任務一：分析慕課網首頁壹HTML基礎-表單元素標簽的屬性如下表所示。屬性描述name表單的名稱method定義表單結果從瀏覽器傳送到服務器的方法，一般有兩種方法：get和postaction用來定義表單處理程序(ASP，CGI等程序)的位置(相對地址或絕對地址)enctype設置表單資料的編碼方式target設置返回信息的顯示方式accept-charset規(guī)定服務器可處理的

18、表單數據字符集autocomplete規(guī)定是否啟用表單的自動完成功能，有on和off兩個值novalidate設置了該特性不會在表單提交之前對其進行驗證知識儲備任務一：分析慕課網首頁壹HTML基礎-表單元素表單控件為單行輸入型控件input標簽。輸入類型是由類型屬性（type）定義的?；菊Z法如下： 知識儲備任務一：分析慕課網首頁壹HTML基礎-表單元素輸入元素對應的類型如下表所示。type取值取值的含義屏幕呈現效果text文本框password密碼框radio單選按鈕checkbox復選框button普通按鈕submit提交按鈕reset重置按鈕image圖形域顯示為一個圖片 hidden隱

19、藏域。不顯示在頁面，只將內容傳遞到服務器中。隱藏字段，不可見file文件域input type=知識儲備任務一：分析慕課網首頁壹HTML基礎-表單元素input標簽屬性值描述idid規(guī)定 HTML 元素的唯一的 id。通過 JavaScript（HTML DOM）或通過 CSS 為帶有指定 id 的元素改變或添加樣式。namefield_name定義 input 元素的名稱。用于對提交到服務器后的表單數據進行標識，或者在客戶端通過 JavaScript 引用表單數據。只有設置了 name 屬性的表單元素才能在提交表單時傳遞它們的值。checkedchecked規(guī)定此 input 元素首次加載時

20、應當被選中。checked 屬性 與 或 配合使用。checked 屬性也可以在頁面加載后，通過 JavaScript 代碼進行設置。disableddisabled當 input 元素加載時禁用此元素。被禁用的 input 元素既不可用，也不可點擊?？梢栽O置 disabled 屬性，直到滿足某些其他的條件為止（比如選擇了一個復選框等等）。然后，就需要通過 JavaScript 來刪除 disabled 值，將 input 元素的值切換為可用。注釋：disabled 屬性無法與 一起使用。maxlengthnumber規(guī)定輸入字段中的字符的最大長度，以字符個數計。maxlength 屬性與 或

21、 配合使用。sizenumber_of_char對于 和 ，size 屬性定義的是可見的字符數。而對于其他類型，size 屬性定義的是以像素為單位的輸入字段寬度。srcURL定義以提交按鈕形式顯示的圖像的 URL。任務描述任務一：分析慕課網首頁壹在日常生活中，無論是手機端還是PC端，看到的界面都可以由網頁技術實現，其中，HTML+CSS實現了網頁的制作，JavaScript實現了網站的交互。小張想實現慕課網首頁的制作，首先需要了解慕課網首頁的布局及使用的相關HTML標簽。分析慕課網布局的思路如下：（1）打開慕課網站首頁。（2）分析慕課網站首頁布局。（3）確定慕課網站使用的HTML標簽。任務步驟

22、任務一：分析慕課網首頁壹第一步：打開慕課網站首頁。/ 效果如下圖所示：任務步驟任務一：分析慕課網首頁壹第二步：分析慕課網站頭部部分。 頭部可以分為四部分，分別是logo、導航、輸入框、登錄和注冊入口。效果如下圖所示。logo部分可以用img引入圖片。導航部分可以用列表形式表示，建議使用ul標簽和li標簽。也可以使用ol標簽。搜索框可以使用input標簽中type=text，發(fā)現搜索框中有“前端小白 Java入門”內容，可以用palacehold屬性或者是直接使用a標簽。搜索圖標可以用img表示。登錄和注冊入門可以使用無序列表制作。任務步驟任務一：分析慕課網首頁壹第三步：分析慕課網站中間部分。

23、中間部分又分為上下兩部分，其中上面部分包括切換菜單和輪播圖，下面部分是一些方向的快捷方 式進入。效果如下圖所示。任務步驟任務一：分析慕課網首頁壹點擊左邊切換菜單，會彈出相關方向的分類目錄，效果如下圖所示。其中：輪播圖可以使用img標簽引入對應的圖片內容，之后通過JavaScript實現。輪播圖的切換按鈕可以使用a標簽實現。輪播圖左側的切換菜單可以使用列表編寫。切換菜單的分類目錄中標題可以使用H4標簽，分類目錄內容可以使用無序列表標簽。文字部分可以使用span標簽。輪播圖下方的圖片可以使用img標簽。任務步驟任務一：分析慕課網首頁壹第四步：尾部部分。 尾部是由幾個應用的圖標組成，效果如下圖所示。

24、可以使用a標簽和img標簽實現。知識儲備任務二：編寫慕課網首頁貳 CSS3簡介CSS3概述CSS3（Cascading Style Sheet，層疊樣式表）是一種不需要編譯、可直接由瀏覽器執(zhí)行的標記性語言，用于控制頁面的布局、文字的大小和顏色、圖片位置、列表、表單等樣式。CSS3的產生大大簡化了編程模型。CSS3樣式表的特點如下：表現和內容分離易于維護和改版縮減頁面代碼，提高頁面瀏覽速度結構清晰，精確的控制網頁中各元素的位置更好的控制頁面的布局與腳本語言相結合，從而產生各種動態(tài)效果知識儲備任務二：編寫慕課網首頁貳 CSS3簡介CSS3樣式規(guī)則CSS3主要是給文字、圖片設置樣式和布局。CSS3的

25、標準格式如下：具體代碼如下所示：選擇器屬性1:屬性值1；屬性2:屬性值2h1font-size:10px;color:#c0c0c0;CSS 3樣式規(guī)則知識儲備任務二：編寫慕課網首頁貳 CSS3簡介CSS3樣式表 在CSS3里可以使用如下四種方法，將樣式表的功能加到網頁里。1. 定義標記的style屬性 CSS3樣式可以寫在HTML標簽內，用style屬性表示，這個方法簡便快捷，但是具有局限性，無法通用。 該屬性的語法格式如下。 知識儲備任務二：編寫慕課網首頁貳 CSS3簡介CSS3樣式表2. 定義內部樣式 定義內部樣式表，即CSS3樣式表寫在HTML文檔內，可以對整個或者整個設置樣式，也可以

26、對單個標簽設置樣式。 CSS3的基本語法如下：選擇符1樣式屬性：屬性值；樣式屬性：屬性值選擇符2樣式屬性：屬性值；樣式屬性：屬性值.知識儲備任務二：編寫慕課網首頁貳 CSS3簡介CSS3樣式表3. 嵌入外部樣式表 嵌入外部樣式表就是在HTML代碼中直接導入樣式表的方法。 基本語法如下： 注意：該語法格式中import語句后的“;”一定要加上。import url(外部樣式表的文件名稱);知識儲備任務二：編寫慕課網首頁貳 CSS3簡介CSS3樣式表4. 鏈接外部樣式表 鏈接外部樣式表就是把外部的CSS文件鏈接到HTML中。 基本語法如下： 知識儲備任務二：編寫慕課網首頁貳 CSS選擇器 要想將C

27、SS樣式應用于特定的HTML元素，首先需要找到該目標元素，在CSS中，執(zhí)行這一任務的樣式規(guī)格部分被稱為選擇器。類選擇器 類選擇器根據類名來選擇前面以“.”來標志。語法結構如下。示例代碼如下：.類選擇器/*CSS規(guī)則;*/. a1 color:yellow; font-weight:bold;類選擇器知識儲備任務二：編寫慕課網首頁貳 CSS選擇器標簽選擇器 一個完整的HTML頁面是有很多不同的標簽組成，而標簽選擇器，則是決定哪些標簽，采用相應的CSS樣式。示例代碼如下： h1 color: red; font-size: 25px; 知識儲備任務二：編寫慕課網首頁貳 CSS選擇器ID選擇器 ID

28、 選擇器前面以“#”號來標志，根據元素ID來選擇元素，具有唯一性，這意味著同一id在同一文檔頁面中只能出現一次，ID 屬性不允許有以空格分隔的詞列表。語法結構如下。示例代碼如下：#a2color:#99FF66;font-size:20px;ID選擇器#id選擇器/*CSS規(guī)則;*/。知識儲備任務二：編寫慕課網首頁貳 CSS選擇器后代選擇器 后代選擇器也稱為包含選擇器，用來選擇特定元素或元素組的后代，將對父元素的選擇放在前面，對子元素的選擇放在后面，中間加一個空格分開。 語法結構如下： 示例代碼如下：li strong font-style: italic; font-weight: norm

29、al; 標簽 子標簽/*CSS規(guī)則*/知識儲備任務二：編寫慕課網首頁貳 CSS選擇器子選擇器 子代選擇器與后代選擇器的區(qū)別在于，子選擇器僅是指它的直接后代。而后代選擇器是作用于所有后代元素。子選擇器是通過“”進行選擇。 語法結構如下：示例代碼如下：/*只選擇h2元素的子元素strong元素*/h2 strong color:red;元素 子元素/*CSS規(guī)則*/知識儲備任務二：編寫慕課網首頁貳 CSS選擇器偽類選擇器偽類是指通過元素的基本特征對元素進行分類，而不是通過元素的名字、屬性等進行分類。偽類通過冒號“:”來定義，它定義了元素的狀態(tài)，如：點擊按下，點擊完成等。 語法結構如下：標記：偽類名

30、/*CSS規(guī)則*/a:link color:#FF0000; /* 未訪問的鏈接 */a:visited color:#00FF00; /* 已訪問的鏈接 */a:hover color:#FF00FF; /* 鼠標劃過鏈接 */a:active color:#0000FF; /* 已選中的鏈接 */知識儲備任務二：編寫慕課網首頁貳 CSS選擇器偽類選擇器 常用偽類如下表所示：偽類名描述link設置a標記在未被訪問前的樣式hover設置a標記在鼠標懸停時的樣式active設置a標記在鼠標點擊時的樣式visited設置a標記在被訪問后的樣式first-letter作用于塊，設置第一個字符的樣式f

31、irst-line作用于塊，設置第一個行的樣式表first-child設置第一個子標記的樣式lang設置具有l(wèi)ang屬性的標記的樣式知識儲備任務二：編寫慕課網首頁貳 CSS字體在CSS中，使用font相關屬性設置字體的樣式，常用的font子屬性如下表所示。屬性屬性值描述font-size絕對大小|相對大小|百分數|具體某個值（單位：pt|px|in）設置字體大小font-family宋體，黑體設置字體類型font-weightnormal設置字體常規(guī)格式顯示lighter設置比正常字體淡bold設置字體加粗bolder設置字體特粗font-stylenormal設置字體常規(guī)式顯示italic設

32、置字體為斜體Oblique與italic效果一樣知識儲備任務二：編寫慕課網首頁貳 CSS文本文本屬性主要用來修飾HTML文件中的文本內容、水平對齊方式以及行間距等。常用文本屬性如下表所示。文本屬性屬性值描述text-indentlength（常用單位pt）設置文字的首行縮進距離line-heightlength（常用單位pt）定義行間距l(xiāng)etter-spacinglength（常用單位px）定義字符間距text-decorationunderline顯示下劃線overline顯示上劃線line-through顯示刪除線none無任何修飾text-alignleft左對齊center居中對齊ri

33、ght右對齊justify兩端對齊word-breakbreak-all允許單詞中間換行keep-all不允許單詞中間換行知識儲備任務二：編寫慕課網首頁貳 CSS顏色和背景屬性 CSS顏色和背景屬性如下表所示。屬性屬性值含義background-color顏色值設定一個元素的背景顏色background-imageURL（image_file_path）設定一個元素的背景圖像background-repeatrepeat-x設置圖像橫向重復repeat-y設置圖像縱向重復repeat設置圖像橫向及縱向重復no-repeat設置圖像不重復background-positionleft設置圖像居左

34、放置right設置圖像居右放置center設置圖像居中放置top設置圖像向上對齊bottom設置圖像向下對齊知識儲備任務二：編寫慕課網首頁貳 盒子模型 把HTML頁面中的元素看作是一個矩形的盒子叫做盒子模型。盒子模型具備四個屬性，即內容、填充、邊框、邊界。CSS盒子模型就是在網頁設計中經常用到的CSS技術所使用的一種思維模型。 盒子模型的四個屬性分別是margin、border、padding、content，四者之間的相互關系如下圖所示。知識儲備任務二：編寫慕課網首頁貳 盒子模型 margin屬性 margin是設置元素邊框與相鄰元素之間的距離的屬性。margin的屬性如下表所示。 注意：使

35、用復合屬性margin定義外邊距時，必須按順時針順序采用值復制，一個值為四邊、兩個值為上下/左右，三個值為上/左右/下。 屬性描述margin-top上外邊距margin-right右外邊距magin-bottom下外邊距margin-left左外邊距margin上外邊距 右外邊距 下邊距 左邊距知識儲備任務二：編寫慕課網首頁貳 盒子模型 border屬性 border是為圖像添加邊框的屬性，border的屬性值有三種，分別是：邊框的粗細程度（2px）、邊框的樣式（solid）、邊框的顏色（#000）。border的屬性如下表所示： 屬性描述border-width用來設置邊框粗細主要參考值有

36、thin定義細邊框，medium定義中等邊框，即默認邊框，thick 定義粗邊框border-style用來設置元素邊框樣式，主要參考值有none 定義無邊框，solid 定義實線，double 定義雙線 雙線寬度等于border-width的值border-color用來設置邊框的顏色知識儲備任務二：編寫慕課網首頁貳 盒子模型 padding屬性 padding是設置邊框和內部元素之間的距離的屬性，padding的屬性如下表所示。 屬性描述padding-top上內邊距padding-right右內邊距padding-bottom下內邊距padding-left左內邊距padding上內邊距

37、 右內邊距 下內距 左內距知識儲備任務二：編寫慕課網首頁貳 盒子模型 position屬性 position屬性一般用于網頁中的定位，基本語法如下所示。 position：static | absolute | fixed | relative知識儲備任務二：編寫慕課網首頁貳 盒子模型position屬性position常用屬性值如下表所示。 取值說明參照物static靜態(tài)定位默認值。元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。relative相對定位自己原來的位置absolute絕對定位已定位的祖先元素 / 瀏覽器視口fixed

38、固定定位 瀏覽器視口（并不是所有的瀏覽器都支持）說明：static: 元素的位置由元素在 (X)HTML 中的位置決定。元素框正常生成。塊級元素生成一個矩形框，作為文檔流的一部分，行內元素則會創(chuàng)建一個或多個行框，置于其父元素中。relative: 相對定位的元素沒有脫離文檔流，只是按照 left、right、top、bottom值進行了位置的偏移。元素相對定位后，仍然在文檔流中占據原來的空間。absolute: 絕對定位使元素脫離文檔流，因此不占據空間。普通文檔流中元素的布局就像絕對定位的元素不存在時一樣。fixed:類似于absolute（絕對定位），不同的是其定位相對于視窗。知識儲備任務二

39、：編寫慕課網首頁貳 什么是SEO定義SEO (Search Engine Optimization)，漢譯為搜索引擎優(yōu)化，為近年來較為流行的網絡營銷方式，主要目的是增加特定關鍵字的曝光率以增加網站在搜索引擎中的能見度(即排名)，進而增加銷售的機會。分為站外SEO和站內SEO兩種。主要工作通過了解各類搜索引擎如何抓取互聯(lián)網頁面、如何進行索引以及如何確定其對某一特定關鍵詞的搜索結果排名等技術，來對網頁進行相關的優(yōu)化，使其提高搜索引擎排名，從而提高網站訪問量，最終提升網站的銷售能力或宣傳能力的技術。 知識儲備任務二：編寫慕課網首頁貳 SEO的重要性據全球最大網絡調查公司CyberAtlas的調查表明

40、，網站75的訪問量都來自于搜索引擎的推薦。據美國權威顧問公司IMTStrategies的調查結果表明：搜索引擎在導引用戶到達企業(yè)站點的比例點到了85,而自由沖浪、口碑宣傳、BANNER廣告以及報紙、電視等媒體所帶來的客戶量僅有15。據WebideStory公司的調查研究，網站訪問量的80來源于搜索引擎。搜索引擎在互聯(lián)網上的使用率僅次于E-mail，有79的使用率；就中國而言，搜索引擎用戶占互聯(lián)網用戶總數的88，平均每人每天使用三次。 知識儲備任務二：編寫慕課網首頁貳SEO的行業(yè)前景做關鍵詞排名，從而帶來大量的客戶賣產品和服務。很多大型機械廠家就是這么做的，顯然通過SEO賺取了不少利潤。通過SE

41、O帶來大量流量，從而投放廣告或者跟廠家合作買產品。比如流量站。做網站關鍵詞排名，然后轉介紹客戶。比如做一個養(yǎng)羊的站點，介紹客戶到別人家養(yǎng)殖場，賺取中間利潤。做平臺賺取會員費。比如招聘站、婚戀站。做平臺，用大量的用戶賺取商家的費用。比如試客網站。 任務描述任務二：編寫慕課網首頁貳在任務1中分析了慕課首頁，學習了HTML與CSS后，能夠實現慕課首頁的制作，通過慕課首頁的實現掌握CSS如何設置布局，如何美化界面，掌握HTML相關標簽的使用，達到熟練分析網頁結構布局的能力。實現編寫慕課首頁思路如下：（1）根據任務1中的分析，編寫HTML部分。（2）使用CSS對HTML部分進行美化。任務步驟任務二：編寫

42、慕課網首頁貳第一步：編寫慕課首頁導航部分 HTML代碼如下： 實戰(zhàn) 路徑 實戰(zhàn) 猿問 手記 任務步驟任務二：編寫慕課網首頁貳第一步：編寫慕課首頁導航部分 前端小白 Java入門 登錄 注冊 任務步驟任務二：編寫慕課網首頁貳第一步：設置頭部樣式 CSS核心代碼如下：/*頁面導航部分*/.header-left li float: left;.header-left a padding: 0 20px; font-size: 16px;/*頂部輸入框的樣式*/.search-bar width: 240px; height: 60px;/*輸入框*/.search-bar input width:

43、 240px; height: 40px; border: 0px; border-bottom: 1px solid #ccc; line-height: 40px; font-size: 14px; padding-left: 10px; background: transparent;.search-prompt font-size: 14px; z-index: 3;任務步驟任務二：編寫慕課網首頁貳第一步：設置頭部樣式效果如下圖所示：/*注冊，登錄樣式*/.login-register li float: left;.login-register a padding-right: 30

44、px;任務步驟任務二：編寫慕課網首頁貳第二步：編寫慕課中間部分 HTML代碼如下： 任務步驟任務二：編寫慕課網首頁貳第二步：編寫慕課中間部分 前端開發(fā) 分類目錄 基礎 : HTML/CSS/ JavaScript/ jQuery 任務步驟任務二：編寫慕課網首頁貳第二步：編寫慕課中間部分 進階 : Html5/ CSS3/ Node.js/ AngularJS/ Bootstrap/ React/ Sass/Less/ Vue.js/ WebApp 其他 :前端工具 任務步驟任務二：編寫慕課網首頁貳第二步：編寫慕課中間部分 分類目錄 職業(yè)路徑 前端小白手冊 職業(yè)路徑 HTML5與CSS3實現動態(tài)

45、網頁 實戰(zhàn) Vue2.0高級實戰(zhàn)-開發(fā)移動端音樂App 實戰(zhàn) Web前后端漏洞分析與防御 課程 攜程C4技術分享沙龍 任務步驟任務二：編寫慕課網首頁貳第二步：編寫慕課中間部分 后端開發(fā) 移動開發(fā) 數據庫 云計算&大數據 運維和測試 UI設計 任務步驟任務二：編寫慕課網首頁貳第二步：編寫慕課中間部分 任務步驟任務二：編寫慕課網首頁貳第二步：編寫慕課中間部分CSS核心代碼如下：.main margin: 30px auto 0 auto; width: 1200px; height: 460px;/*底部的輪播圖*/.bg-carousel z-index: -1; width: 1200px;

46、overflow: hidden;/*存放輪播圖所要用的圖片*/.pic height: 460px; width: 6000px;.pic img float: left;/*輪播圖左右切換按鈕*/.prev,.next position: absolute; top: 175px; z-index: 100; display: inline-block; width: 50px; height: 80px; font-size: 70px; line-height: 75px; text-align: center;任務步驟任務二：編寫慕課網首頁貳第二步：編寫慕課中間部分 效果如下圖所示：

47、任務步驟任務二：編寫慕課網首頁貳第三步：編寫慕課尾部部分 HTML代碼如下： 關于我們 企業(yè)合作 人才招聘 講師招募 聯(lián)系我們 意見反饋 友情鏈接 2016 京ICP備13042132號 任務步驟任務二：編寫慕課網首頁貳第三步：編寫慕課尾部部分 CSS核心代碼如下：效果如下圖所示：/* 1.position: absolute; left: 50%; margin-left: -600px; width: 1200px; 實現div居中 2. bottom: 0; div一直在頁面的底部*/#footer position: absolute; left: 50%; bottom: 0; ma

48、rgin-left: -600px; width: 1200px; font-size: 14px;知識儲備任務三：設置慕課網首頁交互弎 JavaScript簡介JavaScript概念JavaScript是面向Web的編程語言，獲得了所有網頁瀏覽器的支持，是目前使用最廣泛的腳本編程語言之一，也是網頁設計和Web應用必須掌握的基本工具。ECMAScript是JavaScript的標準，但它并不等同于JavaScript，也不是唯一被標準化的規(guī)范。一個完整的JavaScript實現由以下3個不同部分組成：核心（ECMAScript）：語言核心部分。文檔對象模型（Document Object M

49、odel，DOM）：網頁文檔操作標準。瀏覽器對象模型（BOM）：客戶端和瀏覽器窗口操作基礎。知識儲備任務三：設置慕課網首頁交互弎 JavaScript簡介JavaScript的發(fā)展歷程年份發(fā)展史1997年ECMAScript 1.0發(fā)布1998 年 6 月ECMAScript 2.0發(fā)布1999 年 12 月ECMAScript 3.0 版發(fā)布，并成為 JavaScript 的通用標準，獲得廣泛支持2007 年 10 月ECMAScript 4.0 版草案發(fā)布2009 年 12 月ECMAScript 5.0 版正式發(fā)布2011 年 6 月ECMAScript 5.1 版發(fā)布，并且成為 ISO

50、 國際標準（ISO/IEC 16262:2011）2013 年 12 月ECMAScript 6 版草案發(fā)布2015 年 6 月ECMAScript 6 發(fā)布正式版本，并更名為 ECMAScript 2015 。Mozilla 在這個標準的基礎上推出了 JavaScript 2.0。2016年ECMAScript 7.0版正式發(fā)布2017年ECMAScript 8.0版正式發(fā)布知識儲備任務三：設置慕課網首頁互動弎 JavaScript基本語法JavaScript語句和代碼塊JavaScript語句是發(fā)給瀏覽器的命令，JavaScript語句結束使用回車，但建議使用“;”。代碼塊用于在函數或者條

51、件語句中把若干語句組合起來，通常情況下以左花括號開始，右花括號結束。示例代碼如下。/語句document.write(Hello inspur);document.write(Hello inspuruptec );/代碼塊var time = new Date().getHours();if (time=8 & time17) / 片段1document.write(您好！);document.write(當前為工作時間);else/ 片段2document.write(當前為休息時間);document.write(請明天再來);知識儲備任務三：設置慕課網首頁互動弎 JavaScript基

52、本語法標識符標識符是給變量、行數和對象指定的名字。標識符的命名規(guī)則如下：JavaScript語言區(qū)分大小寫，例如：Name與name是不同的標識符。標識符首字符可以是以下劃線（_）、美元符($)或者字母開始，不能是數字。標識符中其它字符可以是下劃線（_）、美元符($)、字母或數字組成的。標識符不能是JavaScript中的關鍵字。知識儲備任務三：設置慕課網首頁互動弎 JavaScript基本語法運算符運算符指的是表示各種不同運算的符號，在JavaScript中，運算符可以分為算術運算符、比較運算符、賦值運算符、邏輯運算符等，其中常見的算術運算符如下表所示。運算符說明示例+如果操作數都是數字時執(zhí)

53、行加法運算，如果其中的操作數有字符串時，作為字符串運算符會執(zhí)行連接字符串的作用A = 5 + 8，結果是13，A =5+ 8，結果是58-減法A = 8 5*乘法A = 8 * 5/除法A = 20 / 5%取余 - 相除之后的余數10 % 3 = 1+一元遞增。此運算符只計算一個操作數，將操作數的值加1。返回的值取決于+運算符與操作數的先后順序。+x返回遞增后的x值，x+返回遞增前的x值 -一元遞減。此運算符只計算一個操作數。返回的值取決于-運算符是位于操作數之前還是位于操作數之后-x返回遞減后的x值，x-返回遞減前的x值 -一元求反。此運算符返回操作數的相反數 a等于5，則-a =-5知識

54、儲備任務三：設置慕課網首頁互動弎 JavaScript基本語法運算符比較運算符如下表所示。運算符說明示例= = 等于。如果兩個操作數相等，則返回Truea = b!=不等于。如果兩個操作數不等，則返回TrueVar2 != 5大于。如果左操作數大于右操作數，則返回TrueVar1 var2=大于或等于。如果左操作數大于或等于右操作數，返回TrueVar1 = 5Var1 = var2小于。如果左操作數小于右操作數，則返回TrueVar2 var1=小于或等于。如果左操作數小于或等于右操作數，返回TrueVar2 = 4Var2 = var1知識儲備任務三：設置慕課網首頁互動弎JavaScrip

55、t基本語法運算符賦值運算符如下表所示。運算符描述例子=簡單賦值運算符，將右邊運算數的值賦給左邊運算數C = A + B 將A+B的值賦給C+=加等賦值運算符，將右邊運算符與左邊運算符相加并將運算結果賦給左邊運算數C += A 相當于 C = C + A-=減等賦值運算符，將左邊運算數減去右邊運算數并將運算結果賦給左邊運算數C -= A 相當于C = C - A*=乘等賦值運算符，將右邊運算數乘以左邊運算數并將運算結果賦給左邊運算數C *= A 相當于C = C * A/=除等賦值運算符， 將左邊運算數除以右邊運算數并將運算結果賦值給左邊運算數C /= A 相當于 C = C / A%=模等賦值

56、運算符，用兩個運算數做取模運算并將運算結果賦值給左邊運算數C %= A 相當于 C = C % A知識儲備任務三：設置慕課網首頁互動弎JavaScript基本語法運算符邏輯運算符如下表所示：運算符說明例子&邏輯與，左操作數與右操作數同為True時，返回Trueexpr1 & expr2|邏輯或，左操作數與右操作數有一個為True時，返回Trueexpr1 | expr2!邏輯非，操作數為True時，返回False，否則返回True!expr知識儲備任務三：設置慕課網首頁互動弎JavaScript基本語法流程控制語句 根據作用的不同，流程控制語句分為以下三種：選擇語句：if.else 語句，if

57、.else if.else語句，switch.case語句迭代語句：for語句，while語句，dowhile語句跳轉語句：break語句，continue語句，return語句知識儲備任務三：設置慕課網首頁互動弎JavaScript核心對象 JavaScript核心對象包含String對象、Math對象、Date對象、Array對象等String對象 String對象用于處理字符串。創(chuàng)建String對象的語法如下： 說明：當 String() 和運算符new一起作為構造函數使用時，它返回一個新創(chuàng)建的 String 對象，存放的是字符串 Hello inspur!。 當不用new運算符調用St

58、ring() 時，它只把Hello inspur!轉換成原始的字符串，并返回轉換后的值。var myString=Hello inspur!;var myString=new String(Hello inspur!);知識儲備任務三：設置慕課網首頁互動弎JavaScript核心對象String對象 常用的String對象方法如下表所示：方法描述charAt()返回指定位置的字符indexOf()返回某個指定的字符串值在字符串中首次出現的位置。指定字符串在字符串中不存在時返回-1replace(oleStr,newStr)在字符串中用一些字符替換另一些字符語法toLocaleLowerCase

59、()把字符串轉換為小寫substring(start,stop)提取字符串中介于兩個指定下標之間的字符,該方法返回的子串包括 start 處的字符，但不包括 stop 處的字符知識儲備任務三：設置慕課網首頁互動弎JavaScript核心對象Math對象 Math對象對象用于執(zhí)行數學任務，使用Math對象的屬性和方法的語法如下： 說明：Math對象并不像Date和String那樣是對象的類，因此沒有構造函數Math()。var pi_value=Math.PI;var sqrt_value=Math.sqrt(15);知識儲備任務三：設置慕課網首頁互動弎JavaScript核心對象Date對象

60、Date對象用于處理日期和時間，使用Date對象語法如下。 示例代碼如下：var myDate=new Date()var now = new Date();document.write(當前年份:+now.getFullYear()+);document.write(當前月份:+now.getMonth()+);document.write(當前日期:+now.getDate()+);document.write(今天星期:+now.getDay()+);document.write(當前完整時間:+now.toLocaleString()+);知識儲備任務三：設置慕課網首頁互動弎JavaS