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

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

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

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

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

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

5、ead> 正文 <body> </body> </html> 3、了解常用的HTML標識第三步，課堂實踐（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)頁截圖保存。 第四步，教師總結（10分鐘）總結本次課內容，強調網(wǎng)頁、 網(wǎng)站的關系，回顧網(wǎng)頁中的構成元素，對不同類型網(wǎng)站的特征總結。第二次課 使用軟件制作網(wǎng)頁、了解網(wǎng)頁設計基礎第一步，問題導入（10分鐘）引導學生回顧上次課的知識點，通過提問“除了使用代碼制作網(wǎng)頁，還有沒有其他便捷方法來制作網(wǎng)頁？”，引出本節(jié)課的教學內容。第二步，知識講解（35分鐘）知識講解要點如下：一、網(wǎng)頁制作軟件dreamweaver CS6是針對專業(yè)網(wǎng)頁設計師特別設計的一款視覺化網(wǎng)頁開發(fā)工具，利用它可以輕而易舉地制作出跨平臺限制和跨

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

溫馨提示

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

評論

0/150

提交評論