交互網(wǎng)頁設(shè)計培訓課程ppt課件

1、交互網(wǎng)頁巨匠班課程2021.7.21課程主要內(nèi)容Web前端技術(shù)引見自順應網(wǎng)頁設(shè)計開源技術(shù)引見案例實際前言與網(wǎng)絡(luò)有關(guān)的那些事無處不在的網(wǎng)絡(luò)這兩天上海什么天氣?從這里到外灘怎樣走?星期五下午回家買哪個車次的票?不是從石頭縫里蹦出來的猴子美國國防部先進研討工程局域名baidu/.net/.org360萬美圓IP地址號碼約43億34后面加36個零第一部分 Web前端技術(shù)Web Front-endWeb工程組成員工程經(jīng)理UI設(shè)計師Web前端開發(fā)工程師Web后臺開發(fā)工程師數(shù)據(jù)庫開發(fā)工程師招聘Web前端開發(fā)所需掌握的技術(shù)1.1 HTML超文本標志言語HTML有什么作用世界上第一張網(wǎng)頁i

2、nfo.cern.ch1991-8-6Tim Berners-LeeHello, World根底標簽之段落標簽段落標簽運用中的留意點根底標簽之標題標簽根底標簽之無序列表標簽根底標簽之有序列表標簽根底標簽之超鏈接標簽超鏈接標簽運用中的留意點正斜杠要添加到子文件夾Target屬性Anchor錨根底標簽之圖像標簽圖像標簽運用中的留意點alt空元素閱讀器和圖像文件格式圖像文件途徑：相對途徑和絕對途徑根底標簽之div標簽讓我們來試試看總體流程流程1前期謀劃明確網(wǎng)站主題、欄目設(shè)置、整體風格、所需功能域名懇求、虛擬主機或效力器的購買、開發(fā)周期、后期維護費用分類典型特征方案瀏覽者只看不回為他們提供方便的檢索及

3、友好的推薦參與者會回帖，在有強烈抒發(fā)意愿時會回帖為他們提供簡單的發(fā)布方式分享者積極寫帖、回帖，渴望認同、獎勵為他們設(shè)置排行榜，提供及時的用戶反饋某購物網(wǎng)站對用戶行為的分類流程2工程細化及實施頁面美工設(shè)計靜態(tài)頁面制造程序開發(fā)靜態(tài)頁面制造HTML語義化讓HTML通知閱讀器：“這行是一個標題，這幾行組成了一個段落。這些文字是工程列表，這些文字是鏈接到互聯(lián)網(wǎng)上另一個文件的超鏈接。不應該讓HTML來通知閱讀器：“這些文字是藍色的，這些文字又是紅色的。這部分內(nèi)容是最最靠右的一欄，這行內(nèi)容是斜體字。HTML語義化的益處去掉或款式喪失的時候能讓頁面呈現(xiàn)明晰的構(gòu)造對搜索引擎友好便于團隊開發(fā)和維護HTML標簽權(quán)重

4、偷師學藝讓我們來試試看1.2 CSS層疊款式表Hello, CSS常用款式屬性BorderWidthHeightBackgroundColorCSS文本屬性文本CSS中的留意點文本垂直居中首行縮進隱藏單行文字讓我們來試試看網(wǎng)頁的三個層次構(gòu)造、表現(xiàn)、行為分別原那么添加網(wǎng)頁的靈敏性減少任務量CSS的運用方法Inline Style內(nèi)聯(lián)款式Embedded Style內(nèi)嵌款式Link Style 外部款式Embedded StyleLink Style選擇器ID選擇器類選擇器包含選擇器分組選擇器承繼 子元素自動被賦予父元素的款式層疊優(yōu)先級高的CSS規(guī)那么覆蓋優(yōu)先級低的規(guī)那么CSS盒模型浮動讓我們來試

5、試看清理浮動1.3 Layout網(wǎng)頁規(guī)劃網(wǎng)頁規(guī)劃的開展2002年Yahoo首頁運用DIV+CSS規(guī)劃讓我們來試試看綜合案例讓我們來試試看960GRID SYSTEM960Grid從入門 到知曉 JavaScriptbehaviorJavaScript能干什么當初怎樣會有JavaScript最簡單的JavaScriptJavaScript的第二春JavaScript框架HBuilderdcloud.io/jQuery根本語法頁面翻開鼠標移入鼠標移出jQuery庫和jQuery插件第二部分 呼應式網(wǎng)頁設(shè)計Responsive Web DesignGoogle開發(fā)者 2021挪動設(shè)備上網(wǎng)成為主流我們面對的挑戰(zhàn)屏幕尺寸網(wǎng)速對于規(guī)范的支持輸入方式最穩(wěn)定的處理方案針對特定中的設(shè)備開發(fā)獨立的Web站點終極處理方案呼應式網(wǎng)頁設(shè)計alistapart/article/responsive-web-design最正確實際實現(xiàn)呼應式的三種工具fluid grids流動規(guī)劃media queries媒介查詢Scalable images自順應圖片2.1 規(guī)劃Layout固定規(guī)劃960Grid從入門到知曉 us try!視口viewport從桌面端向下設(shè)計從挪動端向上設(shè)計加強對大屏幕