Web前端技術(shù) 課件 模塊一 任務(wù)1 網(wǎng)站項(xiàng)目創(chuàng)建_第1頁(yè)
Web前端技術(shù) 課件 模塊一 任務(wù)1 網(wǎng)站項(xiàng)目創(chuàng)建_第2頁(yè)
Web前端技術(shù) 課件 模塊一 任務(wù)1 網(wǎng)站項(xiàng)目創(chuàng)建_第3頁(yè)
Web前端技術(shù) 課件 模塊一 任務(wù)1 網(wǎng)站項(xiàng)目創(chuàng)建_第4頁(yè)
Web前端技術(shù) 課件 模塊一 任務(wù)1 網(wǎng)站項(xiàng)目創(chuàng)建_第5頁(yè)
已閱讀5頁(yè)，還剩14頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

網(wǎng)站項(xiàng)目創(chuàng)建Web前端技術(shù)主講老師：姜文秀延時(shí)符CONTENTS目錄01任務(wù)描述03知識(shí)點(diǎn)導(dǎo)圖02學(xué)習(xí)目標(biāo)

04相關(guān)知識(shí)05任務(wù)實(shí)施延時(shí)符任務(wù)描述延時(shí)符任務(wù)描述在互聯(lián)網(wǎng)流行的今天，網(wǎng)站已經(jīng)成為一個(gè)信息的基本載體，Web前端主要負(fù)責(zé)創(chuàng)建Web頁(yè)面或app等前端界面呈現(xiàn)給用戶，也就是使用HTML、CSS、JavaScript等專業(yè)技能和工具將產(chǎn)品的UI設(shè)計(jì)稿實(shí)現(xiàn)成網(wǎng)站產(chǎn)品，涵蓋用戶PC端、移動(dòng)端（手機(jī),平板）等網(wǎng)頁(yè)，處理視覺(jué)和交互問(wèn)題。Web前端開(kāi)發(fā)是一項(xiàng)很特殊的工作，涵蓋的知識(shí)面非常廣，既有具體的技術(shù)，又有抽象的理念。簡(jiǎn)單地說(shuō)，它的主要職能就是把網(wǎng)站的界面更好地呈現(xiàn)給用戶。學(xué)習(xí)好了Web前端技術(shù)，將來(lái)可以成為Web前端開(kāi)發(fā)人員，其主要工作是確保網(wǎng)站訪問(wèn)者可以輕松地與頁(yè)面交互。通過(guò)將設(shè)計(jì)、技術(shù)和編程相結(jié)合來(lái)對(duì)網(wǎng)站的外觀進(jìn)行編碼，并負(fù)責(zé)調(diào)試。每當(dāng)我們?cè)L問(wèn)網(wǎng)站時(shí)，我們看到、點(diǎn)擊或以其他方式使用的任何內(nèi)容都是前端開(kāi)發(fā)人員的工作。本任務(wù)將帶領(lǐng)同學(xué)們了解網(wǎng)站的基本組成，學(xué)習(xí)Web前端開(kāi)發(fā)軟件和運(yùn)行環(huán)境。學(xué)會(huì)創(chuàng)建一個(gè)Web項(xiàng)目，并創(chuàng)建和制作第一個(gè)頁(yè)面，效果如圖所示。延時(shí)符頁(yè)面效果圖延時(shí)符學(xué)習(xí)目標(biāo)延時(shí)符學(xué)習(xí)目標(biāo)掌握web前端三大技術(shù);掌握Vscode/Hbulider軟件使用方法;掌握網(wǎng)頁(yè)基本標(biāo)簽結(jié)構(gòu)。知識(shí)目標(biāo)能夠使用VScode軟件創(chuàng)建web項(xiàng)目，熟悉項(xiàng)目結(jié)構(gòu)；能夠掌握網(wǎng)頁(yè)的基本結(jié)構(gòu)組成，為頁(yè)面添加簡(jiǎn)單元素；能夠區(qū)分相對(duì)地址和絕對(duì)地址。技能目標(biāo)延時(shí)符培養(yǎng)嚴(yán)謹(jǐn)、精益求精的工作態(tài)度；培養(yǎng)分析問(wèn)題和解決問(wèn)題的能力；培養(yǎng)團(tuán)隊(duì)合作的意識(shí)。素養(yǎng)目標(biāo)知識(shí)點(diǎn)導(dǎo)圖延時(shí)符知識(shí)點(diǎn)導(dǎo)圖延時(shí)符相關(guān)知識(shí)延時(shí)符認(rèn)識(shí)網(wǎng)頁(yè)常用瀏覽器Web標(biāo)準(zhǔn)開(kāi)發(fā)工具HTML簡(jiǎn)介認(rèn)識(shí)網(wǎng)頁(yè)延時(shí)符web中文譯為“網(wǎng)頁(yè)”，網(wǎng)頁(yè)是網(wǎng)站中的一“頁(yè)”，通常是HTML格式的文件，它要通過(guò)瀏覽器來(lái)閱讀。網(wǎng)站是指展示特定內(nèi)容相關(guān)的網(wǎng)頁(yè)集合。網(wǎng)頁(yè)是構(gòu)成網(wǎng)站的基本元素，它通常由圖片、鏈接、文字、聲音、視頻等元素組成。通常我們看到的網(wǎng)頁(yè)，常見(jiàn)以.htm或.html后綴結(jié)尾的文件，因此將其俗稱為HTML文件。Google瀏覽器Edge瀏覽器Safari瀏覽器Opera瀏覽器常用瀏覽器一個(gè)制作好的網(wǎng)頁(yè)文件必須要使用瀏覽器打開(kāi)才能看到網(wǎng)頁(yè)所呈現(xiàn)的效果，換句話說(shuō)，瀏覽器是網(wǎng)頁(yè)運(yùn)行的平臺(tái)。目前，常用的瀏覽器有Edge、火狐（Firefox）、谷歌(Chrome)、Safari和Opera等。常用瀏覽器延時(shí)符Firefox瀏覽器Web標(biāo)準(zhǔn)W3C與其他標(biāo)準(zhǔn)化組織共同制定了Web標(biāo)準(zhǔn)。Web標(biāo)準(zhǔn)并不是某一個(gè)標(biāo)準(zhǔn)，而是一系列標(biāo)準(zhǔn)的集合，主要包括結(jié)構(gòu)(Structure)、表現(xiàn)（Presentation）和行為（Bchavior）三方面。結(jié)構(gòu)標(biāo)準(zhǔn)結(jié)構(gòu)(Structure)是指網(wǎng)頁(yè)的基本框架，它是網(wǎng)頁(yè)的基本組成部分，主要包括HTML、XML等標(biāo)簽語(yǔ)言。表現(xiàn)標(biāo)準(zhǔn)表現(xiàn)（Presentation）是指網(wǎng)頁(yè)的外觀，它是網(wǎng)頁(yè)的美觀度和可讀性的重要體現(xiàn)。表現(xiàn)規(guī)范是指網(wǎng)頁(yè)的外觀表現(xiàn)，包括文字的字體、大小、顏色、間距、布局等，以及圖片的尺寸、位置、邊框等，主要指的是CSS。行為標(biāo)準(zhǔn)行為（Behavior）是指網(wǎng)頁(yè)模型的定義及交互行為，主要包括DOM和ECMAScript兩部分，它是網(wǎng)頁(yè)的功能實(shí)現(xiàn)和用戶體驗(yàn)的重要體現(xiàn)。延時(shí)符開(kāi)發(fā)工具延時(shí)符常見(jiàn)的網(wǎng)頁(yè)開(kāi)發(fā)工具有多種，如webStorm、Hbulider、Sublime等，本教材以VSCode為例。平時(shí)也可使用Hbulider。軟件使用視頻講解HTML簡(jiǎn)介延時(shí)符HTML是英文HyperTextMarkupLanguage的縮寫(xiě)，中文翻譯為超文本標(biāo)記語(yǔ)言，主要是通過(guò)HTML標(biāo)記對(duì)網(wǎng)頁(yè)中的文本、圖片、聲音、視頻等內(nèi)容進(jìn)行描述。HTML提供了許多標(biāo)記（標(biāo)記也可稱為標(biāo)簽），網(wǎng)頁(yè)中需要定義什么內(nèi)容，就可用相應(yīng)的HITML標(biāo)記描述。HTML標(biāo)簽是由尖括號(hào)包圍的關(guān)鍵詞，例如<html>,HTML標(biāo)簽通常是成對(duì)出現(xiàn)的，例如<html>和</html>，我們稱為雙標(biāo)簽。標(biāo)簽對(duì)中的第一個(gè)標(biāo)簽是開(kāi)始標(biāo)簽，第二個(gè)標(biāo)簽是結(jié)束標(biāo)簽。有些特殊的標(biāo)簽必須是單個(gè)標(biāo)簽（極少情況），例如<br/>，我們稱為單標(biāo)簽。每個(gè)網(wǎng)頁(yè)都會(huì)有一個(gè)基本的結(jié)構(gòu)標(biāo)簽（也稱為骨架標(biāo)簽），頁(yè)面內(nèi)容也是在這些基本標(biāo)簽上書(shū)寫(xiě)。任務(wù)實(shí)施延時(shí)符創(chuàng)建項(xiàng)目制作主頁(yè)創(chuàng)建項(xiàng)目1創(chuàng)建項(xiàng)目文件夾;2打開(kāi)vscode軟件，熟悉插件的安裝方法。在軟件中用菜單將根目錄打開(kāi)，或者直接將根目錄拖入軟件中打開(kāi)，在根目錄下新建主頁(yè)文件index.html并打開(kāi)編輯。延時(shí)符制作主頁(yè)1生成頁(yè)面結(jié)構(gòu)；2在<title></title>標(biāo)簽中添加頁(yè)面標(biāo)題；3在<body></body>標(biāo)簽中添加一對(duì)<div>標(biāo)簽，在<div>標(biāo)簽中添加<img>標(biāo)簽，添加頁(yè)面內(nèi)容；4在<head></head>標(biāo)簽中添加一對(duì)<style>標(biāo)簽,在<style>

溫馨提示

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

最新文檔

評(píng)論

0/150

提交評(píng)論