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

付費下載

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

網站項目創(chuàng)建Web前端技術主講老師：姜文秀延時符CONTENTS目錄01任務描述03知識點導圖02學習目標

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

溫馨提示

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

評論

0/150

提交評論