• /  59
  • 下載費用: 9.90積分  

HTML5跨平臺開發基礎與實戰 王寅峰電子任務2 熟悉WebStorm開發環境,設計和開發個人網頁 .ppt

'HTML5跨平臺開發基礎與實戰 王寅峰電子任務2 熟悉WebStorm開發環境,設計和開發個人網頁 .ppt'
跨平臺HTML5實戰軟件學院 王寅峰任務2 熟悉WebStorm開發環境,設計和開發個人網頁學習目標【知識目標】 ? 掌握HTML5的新特性:標簽和表單; ? 掌握網頁設計基本流程; ? 掌握文檔結構相關的標記符; ? 掌握頁面布局相關的標記符; ? 掌握文本標記符; ? 掌握圖形和超鏈接的實現。 【技能目標】 ? 能獨立實現圖文混排的網頁; ? 能為特殊的網頁選用合適的技術。 引例描述 隨著公司業務的發展和新員工陸續報到,為了盡快讓新員工上手,薛總工設計了初級網頁設計的培訓課題: HTML5快速入門指南。薛總工要求學員為動畫片《冰河時代》的主角.希德創建個人主頁。任務陳述 希德的個人網站:布局合理,層次分明,保持統一的風格,有助于加深訪問者對希德網站的印象。要講究組合、搭配來構成美觀的頁面,吸引訪問者長時間的停留在網頁,更重要的是多一些原創的內容,個性色彩可以起到畫龍點睛的作用。1 WebStorm工具2 HTML5基本結構3 HTML5常用標簽的基本結構知識準備1 WebStorm工具1 WebStorm工具HTML5網頁編輯:最直接的是采用記事本。通過選擇“開始”菜單 ?“所有程序”或“程序” ?“附件”打開記事本。網頁預覽:需要依賴各種瀏覽器,比如IE,Chrome或者Firefox等。采用專門的源碼編輯工具:語法高亮,同時還有輔助設計命令,如自動縮進、美化代碼、提示出錯信息等,從而使得源碼易于閱讀。比如Jetbrains WebStorm(簡稱:WebStorm)。1 WebStorm工具(1). 啟動WebStorm并創建新項目。 項目新建后,在打開的窗口中新建一個網頁文件。操作:File->New…,在彈出的窗口中選擇HTML File,并命名為main。如圖所示,WebStorm在創建網頁文件的同時會插入一個基本文件框架。 需要注意的是,若此處采用index作為文件名,語法高亮失效,并且也無法自然彈出的瀏覽器選擇條。 1 WebStorm工具(2). 新建一個網頁文件 2 HTML5基本結構2 HTML5基本結構一個HTML5文件的基本結構如下: //文件開始標簽 //文件頭開始的標簽 …… //文件頭的內容 //文件頭結束的標簽 //文件主體開始的標簽 …… //文件主體的內容 //文件主體結束的標簽 2 HTML5基本結構(1)HTML部分 雙標簽標記符HTML的語法格式如下: … 代碼 … 標簽還能幫助人們閱讀HTML代碼,以便于平常的文字處理工具能夠識別出文檔是網頁文檔。2 HTML5基本結構(2) 標簽用于定義文檔的頭部,它是所有頭部元素的容器。中的元素可以引用腳本、指示瀏覽器在哪里找到樣式表、提供元信息等等。 文件頭部一般包含標題標簽、標簽、內聯樣式表及預定義腳本等。即title、meta、link、base、script等常用標簽: 2 HTML5基本結構(3)主體部分 雙標記符定義了主體部分,它包含顯示在Web瀏覽器中的所有信息。在與中放置的是頁面中的所有內容,如文字、圖片、鏈接、表格、表單等。 在HTML4中標簽有很多自身的屬性,如定義頁面文字的顏色、背景的顏色、背景圖片等,在HTML 5中,刪除了所有的特殊屬性,減少不必要的標簽。主體部分 2 HTML5基本結構DOCTYPE聲明,該標記符必須以驚嘆號開始,而且要放在文檔的開始處,在其他的所有標記符之前。HTML5的語法中大多數標記符都不區分大小寫,但DOCTYPE必須全部大寫。 meta定義好字型,從而支持中文顯示title是網頁唯一標題標簽 3 HTML5常用標簽行列單元格在 HTML 文檔中,廣泛使用表格來存放網頁上的文本和圖像表格的基本結構3 HTML5常用標簽頁面布局相關的標記符 3 HTML5常用標簽 單元格內容 …… ……...定義表格… 定義列 … 定義行 border用來設置表格邊框尺寸大小頁面布局相關的標記符 塊。 如何創建表格 移動 聯通 鐵通 IBM 惠普 華碩 3 HTML5常用標簽頁面布局相關的標記符 作為使用最廣的標簽標簽,它可以把文檔分割為獨立的、不同的部分。div可以用作嚴格的組織工具,并且不使用任何格式與其關聯。在HTML5以前的時代,常常在代碼中看到環環嵌套的,造成瀏覽器在解讀代碼時效率低下,也給源碼的維護造成了困難。HTML5通過提供一組標簽(nav、section、article、aside、footer、header)來解決這個問題,這些標簽可以更清晰地定義構成某個HTML文檔的主要內容。塊。 3 HTML5常用標簽頁面布局相關的標記符 HTML4頁面 HTML5頁面 3 HTML5常用標簽頁面布局相關的標記符 nav元素是一個可以用作頁面導航的鏈接組,其中的導航元素鏈接到其他頁面或當前頁面的其它部分。并不是所有的鏈接組都要被放進nav元素,只需要將主要的、基本的鏈接組放到nav元素中即可。如果文檔中有“前后”按鈕,則應該把它放到 元素中 一個頁中可以擁有多個nav元素,作為頁面整體或不同部分的導航。具體來講,nav元素可以用于以下場合: ? 傳統導航條; ? 側邊欄導航; ? 內頁導航; ? 翻頁導航。 3 HTML5常用標簽頁面布局相關的標記符/ 與的無語義相對, 相當于帶有語義的。常表示一段專題性的內容,一般會帶有標題。應用的典型場景有文章的章節、標簽對話框中的標簽頁、或者論文中有編號的部分。 是一個特殊的標簽,它比具有更明確的語義,它代表一個獨立的、完整的相關內容塊。通常會有標題部分(通常包含在heade。省略部分。ript src="path/to/script.js">不必要的屬性值的引號和閉合元素,為了保證文檔的結構化,建議不要省略: Start the reactor. 改為: Start the reactor.準確理解和使用標簽contenteditable用于指定某個區域可以被用戶編輯: HTML5非常優秀 webkit引擎開始支持HTML5可以為輸入框指定類型不在麻煩,下面是一個郵箱的例子:郵箱:表單允許新的必要屬性,用來指定是否需要特殊的input:準確理解標簽的語義被定位為“小字”了,不用于創建和logo靠近的副標題;比如制作網站的版權信息。Header和Footer的正確語意: ... ... ... ... 將相關內容組合到一起: 主標題 副標題 準確理解標簽的語義定義一組媒體內容,以及他們的標題,如下定義一個圖片及其標題:Image of Mars. This is an image. 不同的需求使用不同的元素header, article, section, 和footer的出現減少了div的使用.元素可以高亮顯示某些內容:HTML5是目前最先進的Web標準,各瀏覽器都逐漸開始支持。output元素被用來顯示部分位置的值: 10 + 5 = 使用區域input創建滑塊:自定義屬性更強大簡單的以”data”為前綴定義我們的自定義屬性:HTML5的未來!var theDiv = document.getElementById('customDiv ');var attr = theDiv.getAttribute('data-custom-attr');.data_custom { display:inline-block; position: relative; }.data_custom:hover { color: transparent; }.data_custom:hover:after { content: attr(data-hover-response); color: black; position: absolute; left: 0;}不支持或不建議使用的標簽不支持的元素(屬性)不要用!使用自動獲取焦點屬性autofocus,可以提高用戶體驗:在需要的地方使用視頻預加載:合理利用占位符(placeholder)提醒用戶:增強的表單控件拾色器日期字段時間字段 數字字段滑動組件類型匹配除了這些,還有…搜索進度條25%密鑰輸出10 + 5 = And so on…正則匹配必填字段選項列表 從個人編程->自動編程結構是指代碼設計的層次關系框架是指網頁布局和相應的代碼軟件流水線任務實施本任務將文字段落與圖片進行混排,通過HTML的頁面的基本布局、解決文字與圖片的混排。任務實施步驟如下: 第一步:編輯和預覽網頁,使用WebStorm工具自動創建代碼框架; 第二步:設計頁面布局,結合HTML5的布局方法、圖像和文本標記符完成圖文設計; 第三步:展示設計效果。的基本結構任務實施頁面布局 實現效果作業要求參照任務1課件中“增強的表單控件”內表單效果,制作相似界面網頁。 小 結
關 鍵 詞:
開發 實戰 webstorm 電子 熟悉 任務 基礎 開發環境 設計 跨平臺
 天天文庫所有資源均是用戶自行上傳分享,僅供網友學習交流,未經上傳用戶書面授權,請勿作他用。
關于本文
本文標題:HTML5跨平臺開發基礎與實戰 王寅峰電子任務2 熟悉WebStorm開發環境,設計和開發個人網頁 .ppt
鏈接地址: http://www.476824.live/p-51617387.html
關于我們 - 網站聲明 - 網站地圖 - 資源地圖 - 友情鏈接 - 網站客服點擊這里,給天天文庫發消息,QQ:1290478887 - 聯系我們

本站為“文檔C2C交易模式”,即用戶上傳的文檔直接賣給(下載)用戶,本站只是中間服務平臺,本站所有文檔下載所得的收益歸上傳人(含作者)所有【成交的100%(原創)】。本站是網絡服務平臺方,若您的權利被侵害,侵權客服QQ:1290478887 歡迎舉報。

[email protected] 2017-2027 http://www.476824.live 網站版權所有

粵ICP備19057495號 

收起
展開
球探网即时蓝球比分 期货配资公司是否合法 互联网理财平台有哪些,求排名 陕西11选5预测下期号码 十一运夺金组三奖金是多少 青海十一选五推荐 河北20选5走势图2元网 大乐透中奖规则表说明 融资的股票平仓会还本金 七乐彩所有开奖历史 湖北高频11选5走势图