項目四 制作慕課網(wǎng)首頁_第1頁
項目四 制作慕課網(wǎng)首頁_第2頁
項目四 制作慕課網(wǎng)首頁_第3頁
項目四 制作慕課網(wǎng)首頁_第4頁
項目四 制作慕課網(wǎng)首頁_第5頁
已閱讀5頁，還剩42頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

項目四制作慕課網(wǎng)首頁目錄4.2【任務(wù)2】編寫慕課網(wǎng)首頁4.1【任務(wù)1】分析慕課首頁4.3【任務(wù)3】設(shè)置慕課網(wǎng)首頁交互案例分析3在日常生活中，無論是手機端還是PC端，看到的界面都可以由網(wǎng)頁技術(shù)實現(xiàn)，其中，HTML+CSS實現(xiàn)了網(wǎng)頁的制作，JavaScript實現(xiàn)了網(wǎng)站的交互。小張想實現(xiàn)慕課網(wǎng)首頁的制作，首先需要了解慕課網(wǎng)首頁的布局及使用的相關(guān)HTML標(biāo)簽。需求描述案例分析4打開慕課網(wǎng)站首頁。分析慕課網(wǎng)站首頁布局。確定慕課網(wǎng)站使用的HTML標(biāo)簽。設(shè)計思路任務(wù)一分析慕課首頁5案例展示知識點講解60102HTML基礎(chǔ)網(wǎng)頁概述網(wǎng)頁概述網(wǎng)頁標(biāo)準(zhǔn)網(wǎng)頁標(biāo)準(zhǔn)也稱Web標(biāo)準(zhǔn)，它由一系列標(biāo)準(zhǔn)組成，這些標(biāo)準(zhǔn)有些是W3C制定的，有些是ECMA的ECMAScript標(biāo)準(zhǔn)。Web（WorldWideWeb）即全球廣域網(wǎng)，也稱為萬維網(wǎng)，它是一種基于超文本和HTTP的、全球性的、動態(tài)交互的、跨平臺的分布式圖形信息系統(tǒng)，是建立在Internet上的一種網(wǎng)絡(luò)服務(wù)，為瀏覽者在Internet上查找和瀏覽信息提供了圖形化的、易于訪問的直觀界面，其中的文檔及超級鏈接將Internet上的信息節(jié)點組織成一個互為關(guān)聯(lián)的網(wǎng)狀結(jié)構(gòu)。Web的本意是爬蟲網(wǎng)和網(wǎng)，在網(wǎng)頁設(shè)計中稱為網(wǎng)頁。7網(wǎng)頁概述網(wǎng)頁標(biāo)準(zhǔn)在符合標(biāo)準(zhǔn)的網(wǎng)頁設(shè)計中，HTML、CSS和JavaScript并列稱為網(wǎng)頁前端設(shè)計的3種基本語言，其中：

HTML英語全稱是HyperTextMarkupLanguage，中文全稱是超文本標(biāo)記語言，作用是瀏覽器端組織和顯示網(wǎng)頁信息（文本、圖片、視頻等）。CSS英文全稱是CascadingStyleSheets，中文全稱是層疊樣式表，作用是格式化網(wǎng)頁的樣式。JavaScript是客戶端腳本語言，使網(wǎng)頁與用戶之間產(chǎn)生動態(tài)交互效果，屬于網(wǎng)頁的行為層。8網(wǎng)頁概述網(wǎng)頁發(fā)展網(wǎng)頁發(fā)展共分為三個階段，即web1.0（共享）、web2.0（交互）和web3.0（聚合）。Web1.0只讀的互聯(lián)網(wǎng)時代Web2.0交互的互聯(lián)網(wǎng)時代Web3.0聚合的互聯(lián)網(wǎng)時代9網(wǎng)頁概述網(wǎng)頁內(nèi)容的種類靜態(tài)網(wǎng)頁靜態(tài)網(wǎng)頁是每個網(wǎng)頁都有固定的網(wǎng)址，網(wǎng)址后面是普通的格式，后綴一般為html，htm，shtml等，不包含“?”等格式的內(nèi)容。靜態(tài)網(wǎng)頁發(fā)布到網(wǎng)上后，每個靜態(tài)網(wǎng)頁都會存儲到服務(wù)器上。靜態(tài)網(wǎng)頁相對穩(wěn)定，方便搜索引擎搜索，但在使用過程中，也存在一些弊端，比如不支持?jǐn)?shù)據(jù)庫，網(wǎng)站創(chuàng)建和維護(hù)所需工作量比較大，除此之外交互性比較差，在功能方面有很大的限制。10網(wǎng)頁概述網(wǎng)頁內(nèi)容的種類動態(tài)網(wǎng)頁動態(tài)網(wǎng)頁是相對靜態(tài)網(wǎng)頁來說的，指使用動態(tài)網(wǎng)絡(luò)技術(shù)生成的網(wǎng)頁，動態(tài)網(wǎng)頁的后綴不僅僅是靜態(tài)文件常見的形式，通常在動態(tài)網(wǎng)址之后包含“?”符號。在使用動態(tài)網(wǎng)頁過程中，因其基于數(shù)據(jù)庫技術(shù)，可以大大減少網(wǎng)站維護(hù)的工作量，采用動態(tài)技術(shù)的網(wǎng)頁可以實現(xiàn)更多的功能，比如用戶登錄注冊、在線管理等。在動態(tài)網(wǎng)頁中，搜索引擎在搜索時存在某些問題。搜索引擎通常不可能訪問網(wǎng)站數(shù)據(jù)庫中的所有網(wǎng)頁，或者由于技術(shù)原因，搜索無法獲得網(wǎng)址？數(shù)字背后的內(nèi)容，所以網(wǎng)站使用動態(tài)網(wǎng)頁需要做一定的技術(shù)處理，以適應(yīng)搜索引擎的要求。11HTML基礎(chǔ)HTML文檔的基本結(jié)構(gòu)每門語言都有自己特定的格式和規(guī)范。HTML文檔的基本結(jié)構(gòu)如下：12<html><head><metacharset="utf-8"><title>無標(biāo)題文檔</title></head><body></body></html>HTML文檔結(jié)構(gòu)下包括下面四部分（1）<html>和</html>分別表示文檔的開始和結(jié)束，用于告知瀏覽器其自身是一個HTML文檔。（2）<head></head>為頭部標(biāo)簽，用于定義HTML文檔的頭部信息，緊跟在<html>標(biāo)簽后，里面包括的內(nèi)容有<title>、<meta>、<link>和<style>等。（3）<body></body>為主體標(biāo)簽，用于定義HTML文檔所要顯示的內(nèi)容，在瀏覽器中所看到的圖片、音頻、視頻、文本等都位于<body>內(nèi)。該標(biāo)簽中的內(nèi)容是展示給用戶看的。HTML基礎(chǔ)HTML語法每門語言都有自己特定的格式和規(guī)范。HTML文檔的基本結(jié)構(gòu)如下：13在HTML中，包含標(biāo)簽、元素、塊級元素、內(nèi)聯(lián)元素及屬性等，語法結(jié)構(gòu)如右圖所示，其中：標(biāo)簽：用尖括號包圍的關(guān)鍵詞稱之為標(biāo)簽。元素：我們把匹配的標(biāo)簽對以及它們包圍的內(nèi)容稱為元素。塊級元素：在瀏覽器默認(rèn)顯示時以新行來開始（和結(jié)束）的元素。內(nèi)聯(lián)元素：在瀏覽器默認(rèn)顯示時在同一行按從左至右順序顯示，不單獨占一行的元素，又稱行內(nèi)元素。屬性：開始標(biāo)簽中那些以名稱/值對的形式出現(xiàn)的內(nèi)容，我們稱之為屬性。HTML基礎(chǔ)表格表格是由行和列組成的結(jié)構(gòu)化數(shù)據(jù)集（表格數(shù)據(jù)），通過在行和列的標(biāo)題之間進(jìn)行視覺關(guān)聯(lián)的方法，就可以讓信息能夠很簡單地被解讀出來。每個表格均有若干行，每行被分割為若干單元格。數(shù)據(jù)單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等。表格的基本結(jié)構(gòu)如圖所示。14HTML基礎(chǔ)框架框架的作用是把瀏覽器窗口分割成幾個獨立的小窗口，每個小窗口可以顯示不同頁面的內(nèi)容，這樣就可以同時瀏覽若干個網(wǎng)頁?？蚣芊譃閮煞N，分別是普通框架和內(nèi)嵌框架。框架相關(guān)標(biāo)簽如表所示。15標(biāo)簽描述<frameset>定義一個框架集，框架集是若干框架的集合，利用框架集可以定義框架結(jié)構(gòu)，實現(xiàn)分割瀏覽器窗口的功能。<frame>定義frameset中的一個特定的窗口（框架）。<noframes>noframes元素可為那些不支持框架的瀏覽器顯示文本。noframes元素位于frameset元素內(nèi)部。<iframe>定義內(nèi)聯(lián)的子窗口（框架）HTML基礎(chǔ)表單元素在編寫網(wǎng)站的登錄注冊頁面時，表單的應(yīng)用非常重要，表單的主要作用就是收集用戶的信息，例如：在一個購物網(wǎng)站上購物，購物之前需要注冊一個該網(wǎng)站的賬號，用戶需要輸入自己的個人信息，包括姓名、性別、郵箱、地址等信息。表單中的按鈕標(biāo)簽主要是實現(xiàn)用戶信息儲存的功能，當(dāng)用戶點擊按鈕之后用戶的信息會儲存到服務(wù)器中，然后由服務(wù)器將用戶信息上傳到數(shù)據(jù)庫中或者將相關(guān)信息返回到主頁面中。16HTML基礎(chǔ)表單元素表單的標(biāo)簽為<form></form>標(biāo)簽，表單的五個常用屬性分別如下。name、method、action、enctype、target。代碼的基本格式如下。<formname="biaodan"method="get"action="url"enctype="value"target="self"></form>，在HTML5中新增加的屬性有：autocomplete、novalidate，<form>標(biāo)簽的屬性如表所示。17HTML基礎(chǔ)表單元素18屬性描述name表單的名稱method定義表單結(jié)果從瀏覽器傳送到服務(wù)器的方法，一般有兩種方法：get和postaction用來定義表單處理程序(ASP，CGI等程序)的位置(相對地址或絕對地址)enctype設(shè)置表單資料的編碼方式target設(shè)置返回信息的顯示方式autocomplete規(guī)定是否啟用表單的自動完成功能，有on和off兩個值novalidate設(shè)置了該特性不會在表單提交之前對其進(jìn)行驗證目錄4.2【任務(wù)2】編寫慕課網(wǎng)首頁4.1【任務(wù)1】分析慕課首頁4.3【任務(wù)3】設(shè)置慕課網(wǎng)首頁交互案例分析20在任務(wù)1中分析了慕課首頁，學(xué)習(xí)了HTML與CSS后，能夠?qū)崿F(xiàn)慕課首頁的制作，通過慕課首頁的實現(xiàn)掌握CSS如何設(shè)置布局，如何美化界面，掌握HTML相關(guān)標(biāo)簽的使用，達(dá)到熟練分析網(wǎng)頁結(jié)構(gòu)布局的能力。需求描述案例分析21根據(jù)任務(wù)1中的分析，編寫HTML部分。使用CSS對HTML部分進(jìn)行美化。設(shè)計思路任務(wù)二編寫慕課網(wǎng)首頁22案例展示知識點講解23010203CSS選擇器CSS簡介CSS字體CSS簡介CSS3概述CSS3（CascadingStyleSheet，層疊樣式表）是一種不需要編譯、可直接由瀏覽器執(zhí)行的標(biāo)記性語言，用于控制頁面的布局、文字的大小和顏色、圖片位置、列表、表單等樣式。CSS3的產(chǎn)生大大簡化了編程模型。CSS3樣式表的特點如下：24表現(xiàn)和內(nèi)容分離易于維護(hù)和改版縮減頁面代碼，提高頁面瀏覽速度結(jié)構(gòu)清晰，精確的控制網(wǎng)頁中各元素的位置更好的控制頁面的布局與腳本語言相結(jié)合，從而產(chǎn)生各種動態(tài)效果CSS簡介CSS3樣式規(guī)則CSS3主要是給文字、圖片設(shè)置樣式和布局，CSS3的標(biāo)準(zhǔn)格式如下。25選擇器{屬性1:屬性值1;屬性2:屬性值2}具體代碼如下所示：h1{ font-size:10px; color:#c0c0c0;}<div> <h1>CSS3樣式規(guī)則</h1></div>CSS簡介CSS3樣式表在CSS3里可以使用如下四種方法，將樣式表的功能加到網(wǎng)頁里。定義標(biāo)記的style屬性CSS3樣式可以寫在HTML標(biāo)簽內(nèi)，用style屬性表示，這個方法簡便快捷，但是具有局限性，無法通用，該屬性的語法格式如下。<標(biāo)記style="樣式屬性:屬性值…..">

26CSS簡介CSS3樣式表在CSS3里可以使用如下四種方法，將樣式表的功能加到網(wǎng)頁里。定義內(nèi)部樣式定義內(nèi)部樣式表，即CSS3樣式表寫在HTML文檔內(nèi)，可以對整個<head>或者整個<body>設(shè)置樣式，也可以對單個標(biāo)簽設(shè)置樣式。CSS3的基本語法如下。<styletype="text/css">選擇符1{樣式屬性:屬性值;樣式屬性:屬性值}選擇符2{樣式屬性:屬性值;樣式屬性:屬性值}…….</style>27CSS簡介CSS3樣式表在CSS3里可以使用如下四種方法，將樣式表的功能加到網(wǎng)頁里。嵌入外部樣式表嵌入外部樣式表就是在HTML代碼中直接導(dǎo)入樣式表的方法?；菊Z法如下。<styletype="text/css">@importurl("外部樣式表的文件名稱");</style>該語法格式中import語句后的“;”一定要加上。28CSS簡介CSS3樣式表在CSS3里可以使用如下四種方法，將樣式表的功能加到網(wǎng)頁里。鏈接外部樣式表鏈接外部樣式表就是把外部的CSS文件鏈接到HTML中，基本語法如下。<linktype="text/css"rel="stylesheet"href="外部樣式表的文件名稱">29CSS選擇器類選擇器30類選擇器根據(jù)類名來選擇前面以“.”來標(biāo)志。語法結(jié)構(gòu)如下。.類選擇器{/*CSS規(guī)則;*/}示例代碼如下。.a1{color:yellow;font-weight:bold;}<pclass=”a1”>類選擇器</p>CSS選擇器標(biāo)簽選擇器31一個完整的HTML頁面是有很多不同的標(biāo)簽組成，而標(biāo)簽選擇器，則是決定哪些標(biāo)簽，采用相應(yīng)的CSS樣式。示例代碼如下。<styletype="text/css">h1{color:red;font-size:25px;}</style>CSS選擇器ID選擇器32ID選擇器前面以“#”號來標(biāo)志，根據(jù)元素ID來選擇元素，具有唯一性，這意味著同一id在同一文檔頁面中只能出現(xiàn)一次，ID屬性不允許有以空格分隔的詞列表。語法結(jié)構(gòu)如下。#id選擇器{/*CSS規(guī)則;*/}。示例代碼如下。#a2{color:#99FF66;font-size:20px;}<pid=”a2”>ID選擇器</p>CSS選擇器后代選擇器33后代選擇器也稱為包含選擇器，用來選擇特定元素或元素組的后代，將對父元素的選擇放在前面，對子元素的選擇放在后面，中間加一個空格分開。語法格式如下。標(biāo)簽子標(biāo)簽｛/*CSS規(guī)則*/｝示例代碼如下。listrong{font-style:italic;font-weight:normal;}CSS選擇器子選擇器34子代選擇器與后代選擇器的區(qū)別在于，子選擇器僅是指它的直接后代。而后代選擇器是作用于所有后代元素。子選擇器是通過“>”進(jìn)行選擇，語法格式如下。元素>子元素｛/*CSS規(guī)則*/｝示例代碼如下。/*只選擇h2元素的子元素strong元素*/h2>strong{color:red;}CSS選擇器偽類選擇器35偽類是指通過元素的基本特征對元素進(jìn)行分類，而不是通過元素的名字、屬性等進(jìn)行分類。偽類通過冒號“:”來定義，它定義了元素的狀態(tài)，如：點擊按下，點擊完成等。語法格式如下。標(biāo)記：偽類名｛/*CSS規(guī)則*/｝CSS選擇器偽類選擇器36常用偽類如表所示偽類名描述link設(shè)置a標(biāo)記在未被訪問前的樣式hover設(shè)置a標(biāo)記在鼠標(biāo)懸停時的樣式active設(shè)置a標(biāo)記在鼠標(biāo)點擊時的樣式visited設(shè)置a標(biāo)記在被訪問后的樣式first-letter作用于塊，設(shè)置第一個字符的樣式first-line作用于塊，設(shè)置第一個行的樣式表first-child設(shè)置第一個子標(biāo)記的樣式lang設(shè)置具有l(wèi)ang屬性的標(biāo)記的樣式CSS選擇器CSS字體37在CSS中，使用font相關(guān)屬性設(shè)置字體的樣式，常用的font子屬性如表所示。屬性屬性值描述font-size絕對大小|相對大小|百分?jǐn)?shù)|具體某個值（單位：pt|px|in）設(shè)置字體大小font-family宋體，黑體…設(shè)置字體類型font-weightnormal設(shè)置字體常規(guī)格式顯示lighter設(shè)置字體加粗bold設(shè)置字體加粗bolder設(shè)置字體特粗font-stylenormal設(shè)置字體常規(guī)式顯示italic設(shè)置字體為斜體oblique與italic效果一樣目錄4.2【任務(wù)2】編寫慕課網(wǎng)首頁4.1【任務(wù)1】分析慕課首頁4.3【任務(wù)3】設(shè)置慕課網(wǎng)首頁交互案例分析39使用HTML+CSS實現(xiàn)的網(wǎng)頁雖然華麗但是卻缺少交互，使用JavaScript可以使網(wǎng)頁看起來更完整，更生動。本任務(wù)是在慕課首頁上面使用JavaScript實現(xiàn)輪播圖，其中prev和next為左右切換按鈕，list存放所有的圖片，實現(xiàn)輸入框點擊效果等。需求描述案例分析40使用JavaScript實現(xiàn)輸入框點擊效果。使用JavaScript實現(xiàn)輪播圖效果。設(shè)置瀏覽器加載時調(diào)用JavaScript方法。設(shè)計思路知識點講解410102jQuery簡介與運用JavaScript簡介select基本查詢select基本查詢在MySQL中，在數(shù)據(jù)表擁有大量的數(shù)據(jù)記錄后，除了對數(shù)據(jù)表能夠完成數(shù)據(jù)更新操作外，另外需要重點考慮的是如何在數(shù)據(jù)表中查詢需要的數(shù)據(jù)。查詢數(shù)據(jù)的操作可以使用select語句來完成，使用select語句不但可以從數(shù)據(jù)庫中精確地查詢信息，而且可以模糊地查找?guī)в心稠椞卣鞯臄?shù)據(jù)。其語法格式如下：42select[all|distinct]要查詢的內(nèi)容from表名列表[where條件][groupby字段列表[having分組條件]][orderby字段列表[asc|desc]][limit[offset,]n];JavaScript簡介JavaScript簡介43JavaScript是面向Web的編程語言，獲得了所有網(wǎng)頁瀏覽器的支持，是目前使用最廣泛的腳本編程語言之一，也是網(wǎng)頁設(shè)計和Web應(yīng)用必須掌握的基本工具。ECMAScript是JavaScript的標(biāo)準(zhǔn)，但它并不等同于JavaScript，也不是唯一被標(biāo)準(zhǔn)化的規(guī)范。一個完整的JavaScript實現(xiàn)由以下3個不同部分組成：核心（ECMAScript）：語言核心部分。文檔對象模型（DocumentObjectModel，DOM）：網(wǎng)頁文檔操作標(biāo)準(zhǔn)。瀏覽器對象模型（BOM）：客戶端和瀏覽器窗口操作基礎(chǔ)。jQuery簡介與運用jQuery簡介44jQuery是一個簡潔而快速的JavaScript庫，可用于簡化事件處理，HTML文檔遍歷，Ajax交互和動畫，以便快速開發(fā)網(wǎng)站。jQuery簡化了HTML的客戶端腳本，從而簡化了Web2.0應(yīng)用程序的開發(fā)。jQuery的特點如下：jQuery是一個輕量級JavaScript庫兼容各種瀏覽器（IE6.0+，F(xiàn)F1.5+，Safari2.0+，Opera9.0+）支持方法連寫鏈?zhǔn)骄幊?、實現(xiàn)了同一函數(shù)的set0和get0能將JavaScript代碼和HTML代碼完全分離，便于代碼維護(hù)和修改。使用戶能更方便地處理HTML

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論