網(wǎng)站設(shè)計與網(wǎng)頁制作立體化項目教程（第4版） 課件 1-1 課件：網(wǎng)頁體驗-城市電子名片頁面制作

1-1任務(wù)1：網(wǎng)頁體驗-城市電子名片頁面制作第一篇：基本技能篇1-1任務(wù)1：網(wǎng)頁體驗-城市電子名片頁面制作（1）能識別網(wǎng)頁和網(wǎng)站。（2）掌握網(wǎng)頁制作的相關(guān)技術(shù)。（3）掌握網(wǎng)頁制作工具的基本功能。（4）熟悉網(wǎng)站建設(shè)的基本流程。能力要求學(xué)習(xí)導(dǎo)覽內(nèi)容豐富、視覺效果好的網(wǎng)頁如何設(shè)計制作？引入1-1任務(wù)1：網(wǎng)頁體驗-城市電子名片頁面制作任務(wù)概述制作國家歷史文化名城“蘇州”的城市電子名片頁面，體驗網(wǎng)頁制作的流程、工具和技術(shù)，包括名片內(nèi)容的制作，樣式的設(shè)計以及簡單時間特效的添加。1-1任務(wù)1：網(wǎng)頁體驗-城市電子名片頁面制作任務(wù)思考1-1任務(wù)1：網(wǎng)頁體驗-城市電子名片頁面制作（1）HTML、CSS、JavaScript在網(wǎng)頁開發(fā)中的作用是什么？

（2）網(wǎng)頁開發(fā)的工具軟件有哪些？列舉兩個。

（3）開發(fā)一個網(wǎng)站的流程是怎樣的？

討論你喜歡哪個設(shè)計呢，為什么？A設(shè)計B設(shè)計1-1任務(wù)1：網(wǎng)頁體驗-城市電子名片頁面制作討論區(qū)任務(wù)一：選擇你喜歡的設(shè)計，說說理由?。ňW(wǎng)絡(luò)平臺討論區(qū)跟帖回復(fù)）1-1任務(wù)1：網(wǎng)頁體驗-城市電子名片頁面制作什么是網(wǎng)頁網(wǎng)站建設(shè)基礎(chǔ)知識概念瀏覽器窗口中顯示的一個頁面被稱為一個網(wǎng)頁，網(wǎng)頁實際上就是一個文件，這個文件存放在世界上某個地方的某一臺計算機中，而且這臺計算機必須要與互聯(lián)網(wǎng)相連接。元素一般網(wǎng)頁上都會有文字和圖片等信息，而復(fù)雜一些的網(wǎng)頁中還包括動畫、表單、視頻和音頻等內(nèi)容。什么是網(wǎng)站概念網(wǎng)站是眾多網(wǎng)頁的集合。不同的網(wǎng)頁通過有組織的鏈接整合到一起，為瀏覽者提供更豐富的信息。網(wǎng)站同時也是信息服務(wù)類企業(yè)的代名詞。網(wǎng)頁小型網(wǎng)站大型網(wǎng)站1-1任務(wù)1：網(wǎng)頁體驗-城市電子名片頁面制作討論區(qū)任務(wù)二：靜態(tài)網(wǎng)頁及動態(tài)網(wǎng)頁的概念與區(qū)別（網(wǎng)絡(luò)平臺討論區(qū)跟帖回復(fù)）靜態(tài)網(wǎng)頁VS動態(tài)網(wǎng)頁1-1任務(wù)1：網(wǎng)頁體驗-城市電子名片頁面制作討論區(qū)靜態(tài)網(wǎng)頁VS動態(tài)網(wǎng)頁

靜態(tài)網(wǎng)頁動態(tài)網(wǎng)頁內(nèi)容網(wǎng)頁內(nèi)容固定網(wǎng)頁內(nèi)容動態(tài)生成后綴.htm；.html等.asp；.shtm；.php；.cgi等優(yōu)點無需系統(tǒng)實時生成網(wǎng)頁風(fēng)格靈活多樣日常維護簡單更改結(jié)構(gòu)方便交互性能強缺點交互性能差日常維護繁瑣需要大量的系統(tǒng)資源合成網(wǎng)頁數(shù)據(jù)庫不支持支持1-1任務(wù)1：網(wǎng)頁體驗-城市電子名片頁面制作網(wǎng)頁制作技術(shù)1-1任務(wù)1：網(wǎng)頁體驗-城市電子名片頁面制作討論區(qū)任務(wù)三：HTML、CSS、JavaScript這三門技術(shù)在Web前端開發(fā)中的作用？（網(wǎng)絡(luò)平臺討論區(qū)跟帖回復(fù)）1-1任務(wù)1：網(wǎng)頁體驗-城市電子名片頁面制作常用開發(fā)工具下載地址：https://www.dcloud.io/hbuilderx.html1-1任務(wù)1：網(wǎng)頁體驗-城市電子名片頁面制作網(wǎng)站建設(shè)流程定位網(wǎng)站的主題網(wǎng)站項目總結(jié)設(shè)計規(guī)劃網(wǎng)站結(jié)構(gòu)設(shè)計網(wǎng)頁布局實現(xiàn)網(wǎng)頁結(jié)構(gòu)測試與發(fā)布網(wǎng)站CSS樣式美化頁面裁切網(wǎng)站設(shè)計稿收集整理資料設(shè)計網(wǎng)站形象規(guī)劃建立站點JS腳本應(yīng)用更新與維護網(wǎng)站1-1任務(wù)1：網(wǎng)頁體驗-城市電子名片頁面制作實操任務(wù)四：在電腦上安裝HBuilderX，熟悉軟件的基本操作（看視頻）。1-1任務(wù)1：網(wǎng)頁體驗-城市電子名片頁面制作任務(wù)實施鏈接CSS樣式表02.添加JavaScript特效03.01.新建網(wǎng)頁文件，添加內(nèi)容1-1任務(wù)1：網(wǎng)頁體驗-城市電子名片頁面制作具體要求見任務(wù)書討論區(qū)為您的家鄉(xiāng)制作一個電子名片，讓大家進一步了解她，發(fā)布在討論區(qū)。1-1任務(wù)1：網(wǎng)頁體驗-城市電子名片頁面制作在自己電腦上安裝網(wǎng)頁制作相關(guān)工具，PhotoShop2021、HBuilderX（必裝），熟悉各個工具的基本界面和