《網(wǎng)頁設(shè)計(jì)基礎(chǔ)》

1、授課題目網(wǎng)頁設(shè)計(jì)基礎(chǔ)課型新課 第（ 4 ）課時(shí)教具學(xué)具電子白板授課時(shí)間本單元目標(biāo)1、了解互聯(lián)網(wǎng)的發(fā)展歷史及其在我國的應(yīng)用現(xiàn)狀，了解互聯(lián)網(wǎng)對社會的影響，了解云計(jì)算及其價(jià)值。2、熟悉IP地址和域名的組成、類型和發(fā)展趨勢，理解IP地址、網(wǎng)址和域名三者的關(guān)系。3、學(xué)會無線路由器組建無線局域網(wǎng)。4、增強(qiáng)健康、安全使用網(wǎng)絡(luò)的意識，進(jìn)一步提高網(wǎng)絡(luò)應(yīng)用能力。5、了解網(wǎng)頁設(shè)計(jì)的基礎(chǔ)知識。本課教學(xué)目標(biāo)1、了解互聯(lián)網(wǎng)的相關(guān)概念2、 理解網(wǎng)頁與網(wǎng)站的基礎(chǔ)知識及其關(guān)系3、 HTML 基礎(chǔ)知識4、 網(wǎng)站設(shè)計(jì)基本流程重點(diǎn)難點(diǎn)1、理解網(wǎng)頁與網(wǎng)站的基礎(chǔ)知識及其關(guān)系2、網(wǎng)站設(shè)計(jì)基本流程教學(xué)過程導(dǎo)入師：同學(xué)們，當(dāng)我們上網(wǎng)瀏覽一個(gè)個(gè)

2、精美的網(wǎng)頁時(shí)，你是否有想過自己建設(shè)一個(gè)屬于自己的網(wǎng)站呢？建設(shè)一個(gè)網(wǎng)站該從哪里入手？怎樣去規(guī)劃網(wǎng)站？怎樣確定網(wǎng)站的主題？怎樣去進(jìn)行色彩的搭配？你的腦袋里是不是充滿了一個(gè)個(gè)問號呢？那我們就一起去了解吧?。? min）二、新授（10min）1、網(wǎng)頁與網(wǎng)站的概念用戶是通過Internet上的各種諸如Web服務(wù)器提供的服務(wù)來獲取自己所需的信息。如果把網(wǎng)站比作各種信息的集散地，網(wǎng)頁則是把信息從集散地（網(wǎng)站）輸送到各地的主要載體。（1）網(wǎng)頁網(wǎng)頁是我們在瀏覽器上看到的窗口界面是一種可以在萬維網(wǎng)上傳輸并被瀏覽器認(rèn)識和翻譯成頁面顯示出來的文件。網(wǎng)頁的最大特色就是超鏈接，通過超鏈接使各個(gè)網(wǎng)頁之間連接起來，使網(wǎng)站中眾

3、多的頁面構(gòu)成一個(gè)有機(jī)整體，單擊超鏈接瀏覽器可以進(jìn)入一個(gè)新的網(wǎng)頁或轉(zhuǎn)到當(dāng)前網(wǎng)頁的其他位置。（2）網(wǎng)站網(wǎng)站（Website）是一群相關(guān)網(wǎng)頁的集合，這就意味著需要單獨(dú)編輯若干個(gè)網(wǎng)頁文件，然后通過“超鏈接”把它們鏈接在一起，讓瀏覽者可以看到網(wǎng)站中所有的網(wǎng)頁。2、網(wǎng)頁設(shè)計(jì) 網(wǎng)頁設(shè)計(jì)三劍客：Dreamweaver 最初是由美國著名的軟件開發(fā)商 Macromedia 公司，現(xiàn)已被 Adobe 公司收購，推出的一個(gè)“所見即所得”的可視化網(wǎng)站開發(fā)工具。Fireworks 是網(wǎng)頁設(shè)計(jì)“三劍客”之“火焰”，它以處理網(wǎng)頁圖片為特長，并可以輕松創(chuàng)作 GIF 動(dòng)畫。 Flash 是網(wǎng)頁三劍客之中的“閃電”，其以制作網(wǎng)上動(dòng)

4、畫為特長，它做出的動(dòng)畫聲音動(dòng)畫效果都是其他軟件無法比擬的。3、HTML 的概念HTML（Hypertext Markup Language）即超文本置標(biāo)語言是制作網(wǎng)頁的基礎(chǔ)語言，它是一系列的標(biāo)記符號或希望顯示在文件內(nèi)的代碼。這些標(biāo)記告訴瀏覽器應(yīng)該如何顯示文字和圖形。在 WWW 上最基本的傳輸單位是 Web 頁，而這些 Web都是用 HTML 語言編寫的，因此，HTML 是構(gòu)成 Web 頁面的主要工具。（1）靜態(tài)網(wǎng)頁與動(dòng)態(tài)網(wǎng)頁、靜態(tài)網(wǎng)頁 靜態(tài)網(wǎng)頁是指網(wǎng)頁基本上全部用 HTML 語言制作，頁面的內(nèi)容是固定不變的，靜態(tài)網(wǎng)頁是網(wǎng)站建設(shè)的基礎(chǔ)。、動(dòng)態(tài)網(wǎng)頁動(dòng)態(tài)網(wǎng)頁是指網(wǎng)頁文件不僅具有 HTML 標(biāo)記，而且

5、含有需要 Web 服務(wù)器執(zhí)行的程序代碼，如數(shù)據(jù)庫連接、數(shù)據(jù)庫數(shù)據(jù)讀取與更新等，動(dòng)態(tài)網(wǎng)頁能夠根據(jù)不同的時(shí)間和不同的用戶顯示不同的內(nèi)容專業(yè)的大中型網(wǎng)站都是建立在使用數(shù)據(jù)庫的基礎(chǔ)之上的用戶要想通過瀏覽器在Web 頁面上查詢數(shù)據(jù)庫里的相關(guān)數(shù)據(jù)，就要編寫服務(wù)器端的程序。4、網(wǎng)站設(shè)計(jì)的流程（1）規(guī)劃客戶需求分析網(wǎng)站開發(fā)者通過與客戶的交流，首先要了解客戶對網(wǎng)站的內(nèi)容、功能、規(guī)模和使用對象等方面的要求。（2）規(guī)劃注冊域名與申請空間網(wǎng)站的開發(fā)計(jì)劃確定之后，下一步就是為該網(wǎng)站申請網(wǎng)絡(luò)空間和域名。 網(wǎng)絡(luò)空間用于存放網(wǎng)站所包含的全部文件，其中包括網(wǎng)頁文件、圖像文件以及其他相關(guān)的數(shù)據(jù)文件等。域名是該網(wǎng)站在網(wǎng)絡(luò)上的唯一標(biāo)

6、識地址，通過在瀏覽器中輸入該地址來訪問網(wǎng)站的全部內(nèi)容。目前，提供網(wǎng)絡(luò)空間和域名出售業(yè)務(wù)的公司很多，只需按時(shí)支付年費(fèi)，即可獲得一定大小的網(wǎng)絡(luò)空間以及網(wǎng)站域名。（3）設(shè)計(jì)確定網(wǎng)站的主題與特色按照客戶的需求，網(wǎng)站開發(fā)者需要同客戶進(jìn)一步溝通以確定網(wǎng)站的主題、頁面特色、具體內(nèi)容以及需實(shí)現(xiàn)的功能等。（4）開發(fā)運(yùn)用網(wǎng)頁設(shè)計(jì)工具實(shí)施網(wǎng)站建設(shè)計(jì)劃接下來就用選好的網(wǎng)頁設(shè)計(jì)工具軟件進(jìn)行網(wǎng)頁設(shè)計(jì)。（5）發(fā)布上傳網(wǎng)站內(nèi)容到服務(wù)器當(dāng)網(wǎng)站全部開發(fā)完畢并在本地測試通過后，即可將網(wǎng)站設(shè)計(jì)的全部頁面文件和數(shù)據(jù)文件上傳到服務(wù)器。此時(shí)在瀏覽器中輸入網(wǎng)站的域名和首頁地址即可打開站點(diǎn)進(jìn)行瀏覽了。（6）維護(hù)網(wǎng)站的后期維護(hù)如何對建設(shè)好的網(wǎng)站

7、進(jìn)行后期維修，是建一個(gè)優(yōu)秀網(wǎng)站必須重視的問題。網(wǎng)站上傳之后并不代表已經(jīng)全部開發(fā)完畢，后期維護(hù)也是網(wǎng)站開發(fā)過程中非常重要的一步。網(wǎng)站運(yùn)行時(shí)出現(xiàn)的問題、頁面中需要修改的瑕疵、以及可能在網(wǎng)站運(yùn)行時(shí)發(fā)現(xiàn)需要增刪的部分功能，都是后期維護(hù)階段需要完成的工作?！菊n堂活動(dòng)】師：老師剛剛講了那么多不知道同學(xué)們對于網(wǎng)頁設(shè)計(jì)有了多深的了解，下面就請看兩個(gè)關(guān)于網(wǎng)頁短視頻加深一下印象。（播放 研習(xí)設(shè)：一篇教程搞懂網(wǎng)頁設(shè)計(jì) ）13 min ，播放靜態(tài)網(wǎng)頁和動(dòng)態(tài)網(wǎng)頁8min）【學(xué)生討論】師：如果要?jiǎng)?chuàng)建一個(gè)優(yōu)秀的電子商務(wù)網(wǎng)站，應(yīng)該考慮到哪些方面的因素？請同學(xué)們分小組討論一下。（5 min）小結(jié)本節(jié)課我們一起學(xué)習(xí)了網(wǎng)頁設(shè)計(jì)的基礎(chǔ)知識：網(wǎng)頁與網(wǎng)站的概念以及他們之間的關(guān)系、網(wǎng)頁設(shè)計(jì)開發(fā)的工具、網(wǎng)頁的分類，還有網(wǎng)站建設(shè)的流程。相信同學(xué)們應(yīng)該已經(jīng)知道了一個(gè)網(wǎng)站的開發(fā)和網(wǎng)頁的設(shè)計(jì)大概有哪些步驟了吧？有興趣的同學(xué)可以利用課余的時(shí)間多了解一些相關(guān)的資料，希望本節(jié)課給大家?guī)砹瞬簧偈斋@！【課外延伸】如果作為