網(wǎng)頁設(shè)計與制作教案1_第1頁
網(wǎng)頁設(shè)計與制作教案1_第2頁
網(wǎng)頁設(shè)計與制作教案1_第3頁
網(wǎng)頁設(shè)計與制作教案1_第4頁
網(wǎng)頁設(shè)計與制作教案1_第5頁
已閱讀5頁，還剩1頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

1、授課周次第1周授課時間年 月 日至 年 月 日課程章節(jié)第1次課：認(rèn)識網(wǎng)頁、了解網(wǎng)站第2次課：了解網(wǎng)頁制作方法與網(wǎng)頁設(shè)計基礎(chǔ)教學(xué)目的第1次課：拓寬學(xué)生對網(wǎng)頁、網(wǎng)站的認(rèn)識第2次課：掌握網(wǎng)頁制作的方法，熟悉網(wǎng)頁設(shè)計的工作流程內(nèi)容提要 及板書設(shè)計第1次課： 1.網(wǎng)頁、網(wǎng)站的定義；2.網(wǎng)頁的構(gòu)成要素；3.不同類型網(wǎng)站的特征歸納總結(jié)第2次課： 1.代碼制作網(wǎng)頁和軟件制作網(wǎng)頁的兩種方法2.網(wǎng)頁設(shè)計的工作流程3.網(wǎng)店美工的標(biāo)準(zhǔn)重點、難點 及解決方案第1次課： 重點：網(wǎng)頁基本元素難點：歸納總結(jié)不同網(wǎng)站類型的特征解決方案：學(xué)做合一，實踐任務(wù)第2次課： 重點：網(wǎng)頁制作方法；設(shè)計網(wǎng)頁的基礎(chǔ)知識難點：制作網(wǎng)頁的兩種方法

2、；網(wǎng)頁設(shè)計的工作流程解決方案：學(xué)做合一，實踐任務(wù)教學(xué)內(nèi)容 時間分配序號教 學(xué) 內(nèi) 容學(xué)時分配1認(rèn)識網(wǎng)頁、了解網(wǎng)站452使用代碼制作網(wǎng)頁453使用軟件制作網(wǎng)頁454了解網(wǎng)頁設(shè)計基礎(chǔ)455教學(xué)手段第1次課：多媒體教學(xué)第2次課：多媒體教學(xué)教學(xué)形式（在右欄勾選）理實一體（）理論教學(xué)（ ）實驗（ ）實訓(xùn)（ ） 上機（ ）作業(yè)作業(yè)完成方式書面（ ）電子（）教學(xué)后記第1次課：第2次課：附頁：序號具體內(nèi)容（課堂組織和教學(xué)過程設(shè)計）授課改進(jìn)意見及實時教學(xué)效果記錄第一次課 認(rèn)識網(wǎng)頁、了解網(wǎng)站、使用代碼制作網(wǎng)頁第一步，問題導(dǎo)入（10分鐘）以問題“平時喜歡在網(wǎng)上做什么？試問成長于信息化時代的你面對浩瀚如海的信息和四通

3、八達(dá)的互聯(lián)網(wǎng)，你真正了解什么是網(wǎng)頁、什么是網(wǎng)站嗎？面對五花八門的網(wǎng)頁，你知道這些網(wǎng)頁是怎么做出來的嗎”為引入，與學(xué)生互動，引出本節(jié)課內(nèi)容。第二步，知識講解（35分鐘）知識講解要點如下：一、網(wǎng)頁的概念網(wǎng)頁(web)是網(wǎng)站上的某一個頁面，是萬維網(wǎng)中的一“頁”，它是一個純文本文件，是向訪問者傳遞信息的載體，以超文本和超媒體為技術(shù)，采用HTML、CSS、XML等語言來描述組成頁面的各種元素，包括文字、圖像、音樂等，并通過客戶端瀏覽器進(jìn)行解析，從而向瀏覽者呈現(xiàn)網(wǎng)頁的各種內(nèi)容。 二、網(wǎng)頁的元素三、網(wǎng)站的定義網(wǎng)站(Website)是指在因特網(wǎng)上，根據(jù)一定的規(guī)則，使用HTML等工具制作的用于展示特定內(nèi)容的相關(guān)

4、網(wǎng)頁的集合。是一個存放在網(wǎng)絡(luò)服務(wù)器上完整信息的集合體，它包含一個或多個網(wǎng)頁。網(wǎng)頁是網(wǎng)站中的一頁，是構(gòu)成網(wǎng)站的基本元素。網(wǎng)站由以下三部分組成：網(wǎng)站域名；網(wǎng)站程序；網(wǎng)站空間。四、網(wǎng)站的分類五、使用代碼制作網(wǎng)頁HTML1、HTML的概念HTML即Hypertext Markup Language，是超文本標(biāo)記語言，用于描述網(wǎng)頁文檔的一種標(biāo)記語言，它不是一種編程語言，而是一種標(biāo)記語言 (markup language)。 2、HTML文檔的基本結(jié)構(gòu)<html > 開頭文件聲明 <head> <title>無標(biāo)題文檔</title> </h

5、ead> 正文 <body> </body> </html> 3、了解常用的HTML標(biāo)識第三步，課堂實踐（35分鐘）1、請瀏覽淘寶網(wǎng)、京東商城、1號店、蘇寧電器這些網(wǎng)頁，并記錄這些網(wǎng)頁中都包含了哪些元素。 2、請瀏覽有償資訊類網(wǎng)站、功能型網(wǎng)站、綜合類、辦公類網(wǎng)站的代表網(wǎng)站，并將這些網(wǎng)站的首頁以截圖的形式保存下來。3、制作一個簡單網(wǎng)頁。在記事本中輸入以下代碼：<HTML> <HEAD> <TITLE>簡單頁面</TITLE></HEAD> <BODY BGCOLOR=”BLACK” TEX

6、T=”WHITE”> 你好！</BODY></HTML> 并將網(wǎng)頁截圖保存。 第四步，教師總結(jié)（10分鐘）總結(jié)本次課內(nèi)容，強調(diào)網(wǎng)頁、 網(wǎng)站的關(guān)系，回顧網(wǎng)頁中的構(gòu)成元素，對不同類型網(wǎng)站的特征總結(jié)。第二次課 使用軟件制作網(wǎng)頁、了解網(wǎng)頁設(shè)計基礎(chǔ)第一步，問題導(dǎo)入（10分鐘）引導(dǎo)學(xué)生回顧上次課的知識點，通過提問“除了使用代碼制作網(wǎng)頁，還有沒有其他便捷方法來制作網(wǎng)頁？”，引出本節(jié)課的教學(xué)內(nèi)容。第二步，知識講解（35分鐘）知識講解要點如下：一、網(wǎng)頁制作軟件dreamweaver CS6是針對專業(yè)網(wǎng)頁設(shè)計師特別設(shè)計的一款視覺化網(wǎng)頁開發(fā)工具，利用它可以輕而易舉地制作出跨平臺限制和跨

7、越瀏覽器限制的充滿動感的網(wǎng)頁。1、Dreamweaver CS6的初識界面2、Dreamweaver CS6的工作界面二、網(wǎng)頁設(shè)計的含義從網(wǎng)頁布局來看，網(wǎng)頁的基本構(gòu)成要素包括Logo、導(dǎo)航條、廣告、按鈕、文本、圖片、動畫、超鏈接、表單、音頻和視頻等，將這些構(gòu)成要素有機整合在一起，形成具有美感和交互性的頁面，這就是通常所說的網(wǎng)頁設(shè)計。三、網(wǎng)頁設(shè)計工作流程1、設(shè)計階段：（1）選擇主題；（2）雛形設(shè)計；（3）收集和加工素材。2、制作階段：（1）選擇網(wǎng)頁制作工具；（2）制作網(wǎng)頁。3、檢測階段4、發(fā)布階段四、網(wǎng)頁美工標(biāo)準(zhǔn)網(wǎng)頁美工是指精通美學(xué)，具有良好的創(chuàng)意和一定程度的審美觀，并且會photoshop，flash，dreamwaver等網(wǎng)站制作軟件的網(wǎng)站制作人員。 必備技能：基礎(chǔ)美術(shù)：素描（石膏幾何體、靜物寫生）；色彩（色彩構(gòu)成、簡單色彩靜物寫生）。軟件基礎(chǔ)：Photoshop網(wǎng)頁配色及排版設(shè)計；Illustrator網(wǎng)頁設(shè)計；Dreamweaver網(wǎng)頁制作軟件。必備知識： 1.色彩的平衡與呼應(yīng) 2.常用的色彩搭配3.注意頁面的分塊 4.網(wǎng)頁安色的運用 5.色彩模式 第三步，課堂實踐（35分鐘）1、利用dreamweaver軟件制作一個如圖所示的頁面2、某女裝廠為拓展業(yè)務(wù)，將開拓網(wǎng)上市場，計劃開發(fā)一個電子商務(wù)企業(yè)網(wǎng)站，試?yán)眉埳喜季址ㄔO(shè)計一個電子商務(wù)公司的首頁

溫馨提示

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

評論

0/150

提交評論