第一篇：網站設計教案

Internet的相關知識

1學時

重難點：

1、什么是www.tmdps.cn”，顯然域名比IP地址好記憶多了。

域名前加上傳輸協議信息及主機類型信息就構成了網址(URL），例如“電子技術學院昆明訓練大隊”的www.tmdps.cn 用于組織、協會等

.net 用于網絡服務

.edu 用于教育機構

.gov.用于政府部門

.mil 用于軍事領域

域名申請的具體步驟由學員自己看書學習

網站空間的獲得

1課時

重難點：如何申請個人空間

1.什么是網站空間

簡單地講，就是存放網站內容的空間，在上網時，通過域 名（網址、網站地址）就可以訪問到對方的網站內容，然后看 對方網站的文章，或下載音樂、電影什么的。

2.如何獲得網站空間

網站空間可以由自己買臺服務器來做，但費用太高，這一 般都是大公司或大型網站才會這樣做，購買一個普通服務器要 幾萬，高性能的服務器要幾

十、幾百甚至幾千萬，也要24小時

開機，并配備專人負責。有時候在沒特別指明的情況下，也稱

其為虛擬主機空間，通常企業做網站都不會自己架服務器，而 是選擇以虛擬主機空間做為放置網站內容的網站空間。

2.2.1 選擇網站空間

1、空間大小

2、是否支持數據庫

3、是否支持論壇

3、是否支持論壇

4、在線人數指標

購買網站空間的誤區 誤區１：無限制是最好的

誤區２：全能空間

誤區３：低價空間

誤區４：共享服務器——一個完美的選擇

選擇自己的網站空間

1.代理商空間

2.有限制空間

3.有權限的空間

選擇適合自己的空間

1.普通ＨＴＭＬ空間：這類空間適合剛剛學會制作網頁的人，或者一些下載站點；

2.論壇專用空間：正規的空間商不可能讓你的論壇無限制，一

般會控制在２０～４０人左右。如果你的論壇能超過５０人，一定要買論壇專用的空間，這類空間比較貴

Dreamweaver MX的工作環境

1課時

重難點：熟悉各種功能的使用和位置

本章到第九章在課堂上直接演示

HTML語言

2課時

重難點：

1、掌握HTML語言的結構

2、掌握常見的HTML標記

1.HTML概述

HTML語言，又稱超文本標記語言，英文全稱是Hypertext Markup Language。它是一種標識性的語言，由一些特定符號 組成，語法簡單，其目的在于運用標記使文件達到預期的顯示 效果。

用HTML編寫的超文本文件稱為HTML文件，擴展名可以 是htm、html、shtm或shtml。

WWW有3個基本內容組成，分別是URL、HTTP和HTML。

1)URL（Uniform Resource Locators）：統一資源定位符

2）HTTP（Hypertext Transfer Protocol）：超文本傳輸協議

3)HTML語言(Hypertext Markup Language)：HTML文檔是一 個放置了標記（Tags）的ASCII文本文件

2.HTML特點 HTML語言與其它編程語言（如C和Java）不同，具有以 下特點：

（1）超文本性

（2）標記性

（3）簡單性

（4）可擴展性

（5）平臺無關性

3.基本結構

（1）HTML基本語法

HTML語法結構卻比較簡單。HTML文件是由標記和內容 組成，形式如下：

<標記名稱 屬性1=值1 屬性2=值2 ……> 文本或超文本內容

（2)HTML文件基本結構

HTML文檔結構可以劃分為兩個基本部分：文件頭(head)和文件體(body)。

4.HTML文檔的編寫

HTML文檔的編寫是非常容易的，可以使用任何文本編輯 工具來編寫，保存時的文件擴展名可以是htm、html、shtm或 shtml。

5.HTML標記

標記(Tags)，通常又叫著標簽，它是HTML文檔的重要組 成部分。可以說沒有標記就沒有形式多樣化的Web頁面效果。

基本標記

（1）

標記放在HTML文檔的最前面，用來表示HTML文檔的 開始，而標記放在HTML文檔的最后，用來表示HTML 文檔的結束，這兩個標記必須一起使用。

（2） 和是HTML文檔頭部標記，在此標記對之 間可以使用、等標記。

（3)

第二篇：網站設計電子教案2

2.1 課堂任務1 DreamWeaver8入門

課程名稱：自定義工作界面 課時數：2 教學目標：

知識與技能：了解DreamWeaver 8相關知識。

過程與方法：掌握DreamWeaver8軟件界面組成；

掌握自定義DreamWeaver8軟件的工作區；

掌握獲取、安裝網頁制作軟件的方法；

掌握各網頁制作軟件的啟動和退出的方法；

情感與價值觀：培養學生仔細的觀察態度和積極動手探索的學習習慣。教學重點：

自定義DreamWeaver8軟件的工作區。教學難點：

自定義DreamWeaver8軟件的工作區 教法：

任務驅動法 學法：

閱讀，記錄要點，動手操作。課前準備：

第二章第一節素材和實例。視頻教程：自定義界面.wmv 教學過程設計：

（一）導入設計：

打開Dreamweaver 8這個軟件。

前面我們已經學習過了Dreamweaver 8軟件的獲取與安裝。這一節我們主要了解Dreamweaver 8軟件的界面和相關的一些基本操作。為今后的網頁制作操作打好基礎。

（二）新課講解設計：

（1）請學生帶著以下問題閱讀P23~27知識預讀1，并動手預習操作。問題如下：

A.DreamWeaver8軟件界面由哪幾部分組成？

B.在DreamWeaver8中對功能面板可以做哪些操作？

C.當網頁編輯窗口太小的時候，如何擴大網頁編輯窗口？（2）請學生一一回答以上問題。

（3）教師總結評價并補充相關要點。

（4）參考教材第28頁至第29頁的任務實施步驟，點名請一個同學上來按要求完成。教師在一旁提示和總結方法。

（5）請其他同學完成相同操作。可參考視頻文件自定義界面.wmv。教師巡邏指導。（6）學生完成任務一對照練習第1、2兩題。

（7）抽取個別同學上臺完成對照練習，檢驗教學成果。

（三）小結和作業： 小結：

（1）DreamWeaver8軟件界面組成

（2）DreamWeaver8軟件的工作區相關操作

（3）網頁制作軟件的獲取、安裝、啟動和退出。作業：

（1）

（2）填寫《任務評價表》并上交 預習任務二“我的個人工作室”。

2.2 課堂任務2 我的個人工作室

課程名稱：我的個人工作室 課時數：2 教學目標：

知識與技能：了解DreamWeaver 8相關知識

過程與方法：掌握打開文件、格式化文字、預覽網頁等基本操作 情感與價值觀：培養學生主動思考問題的習慣和自主學習的能力。教學重點：

打開文件、格式化文字、預覽網頁等基本操作。教學難點：

打開文件、格式化文字、預覽網頁等基本操作。教法：

任務驅動法、演示法 學法：

閱讀，記錄要點，動手操作。課前準備：

第二章第一節素材和實例。視頻教程：我的個人工作室.wmv。教學過程設計：

（一）導入設計：

提問：

1、網頁元素有哪些？

2、文字的屬性有哪些，如何編輯？

（二）新課講解設計：

（1）請學生打開“素材和實例第二章第一節素材 mywork.html”文件，觀察其與圖2-1-18個人工作室頁面的不同之處；

（2）教師演示輸入文字并格式化，保存文件并預覽（詳見教材第33頁）。（3）學生完成相同操作。可參考視頻文件教師巡邏指導。（4）教師總結評價并補充相關要點。（5）由學生完成任務二對照練習。

（三）小結和作業： 小結：

（1）網頁文件的打開、編輯與保存（2）網頁文字的格式化（3）網頁預覽

作業：

（1）填寫《任務評價表》并上交（2）自學知識拓展： DreamWeaver8的快捷鍵大全。

2.2 課堂任務

“企業簡介”頁面的制作

課程名稱：美樂電器“企業簡介”頁面的制作 課時數：2 教學目標：

知識與技能：了解常用的圖像類型和格式、層疊樣式表的概念和相關知識。過程與方法：掌握新建網頁，設置網頁頁面屬性的方法

掌握在網頁中插入文本，設置文本格式化的方法；

掌握在網頁中插入圖片，設置圖文混排效果的方法；

掌握插入Flash動畫，設置透明效果的方法；

情感與價值觀：培養學生仔細觀察事物的習慣和主動學習的能力。教學重點：

設置網頁頁面屬性、插入文本，設置文本格式化、插入圖片，設置圖文混排效果、插入Flash動畫，設置透明效果。教學難點：

設置網頁頁面屬性、插入文本，設置文本格式化、插入圖片，設置圖文混排效果、插入Flash動畫，設置透明效果。教法：

任務驅動法 學法：

閱讀，記錄要點，動手操作。課前準備：

第二章第二節素材和實例。視頻教程：美樂電器企業簡介網頁制作.WMV。教學過程設計：

（二）導入設計：

上一節我們學習了DreamWeaver8軟件的基礎操作，本節我們將開始學習如何用DreamWeaver8這個軟件來制作網頁，從而學習網頁中有關頁面屬性、文本格式、圖像、動畫的插入和層疊樣式表的相關操作。

（二）新課講解設計：

（1）請學生帶著任務一對照練習第1～5題閱讀P36~47知識預讀，并動手預習操作。（2）請學生一一回答以上問題。（3）教師總結評價并補充相關要點。

（4）打開“素材和實例第二章第二節素材課堂任務 jianjie.html”，請學生觀察并回答該網頁的組成元素有哪些？教師在一旁提示。

（5）請學生上臺演示新建網頁并保存在相應的文件夾中。其他學生自己完成。可參考教材第47頁內容。（6）教師演示設置網頁頁面屬性，保存并預覽（詳見教材第48頁）。請其他同學完成相同操作。教師巡邏指導。

（7）教師演示文本格式化部分操作，（詳見教材第49～52頁）。

（8）學生完成相同操作，可參考視頻文件美樂電器企業簡介網頁制作.WMV。教師巡邏指導。

（9）教師演示插入圖片操作，（詳見教材第52頁）。學生完成相同操作，教師巡邏指導。操作要點及注意事項如下：

先將要插入的圖片文件復制到jianjie.html網頁文件所在的文件夾中，再進行插入圖像操作。（10）請學生上臺完成插入FLASH動畫的操作，（提示：方法和注意點與插入圖像相似）。教師在一旁提示指導。

（11）教師演示為FLASH動畫設置透明效果，（詳見教材第54頁）。（12）學生完成相同操作，教師在旁指導。（13）由學生完成任務一對照練習第6～8題。

（三）小結和作業：

小結：

（4）設置網頁頁面屬性；

（5）插入文本，設置文本格式化；（6）插入圖片，設置圖文混排效果；（7）插入Flash動畫，設置透明效果。作業：

（1）

（2）填寫《任務評價表》并上交 自學知識拓展：自定義CSS樣式。

2.3 課堂任務

我的第一個網站

課程名稱：美樂電器網站的創建 課時數：4 教學目標：

知識與技能：了解超鏈接相關概念。

過程與方法：掌握在DreamWeaver8中創建站點的方法

掌握在DreamWeaver8中管理站點的文件和文件夾的方法；

掌握制作網頁中各種超鏈接的方法；

掌握制作CSS鏈接特效的方法。

情感與價值觀：培養學生主動思考問題和解決問題的能力。教學重點：

在DreamWeaver8中創建站點、管理站點的文件和文件夾、制作網頁中各種超鏈接。教學難點：

在DreamWeaver8中創建站點、管理站點的文件和文件夾、制作網頁中各種超鏈接、制作CSS鏈接特效。教法：

任務驅動法 學法：

閱讀，記錄要點，動手操作。課前準備：

第三章第三節素材和實例。視頻教程：美樂電器網站制作.wmv。教學過程設計：

（三）導入設計：

之前我們已經學習了單張網頁的制作。一般我們所設計的，往往不是單張網頁，而是多張有機聯系在一起的網頁，而對于這些網頁和相關素材，一般都要求存放在同一個文件夾內，方便網站的維護和管理，特別是要將網站發布到服務器上時，這點尤為重要。我們建立站點的目的也在于此。因此，我們在用DreamWeaver8軟件設計制作網站，必須先建立站點，將網頁全都保存在這一個站點內。DreamWeaver8軟件的站點管理功能非常強大，通過它，我們能很輕松的對網站進行管理。

（二）新課講解設計：

（1）請學生帶著任務一對照練習第1～3題閱讀P60~65知識預讀。（2）請學生一一回答以上問題。

（3）教師總結評價并補充相關要點。

（4）教師演示建立美樂電器網站站點的相關操作，（詳見教材第65～68頁）。操作要點及注意事項如下： 站點是一個文件夾，可以在本地計算機上選擇一個已有的文件夾作為站點根目錄，也可以新建一個文件夾建立一個空的站點。

（5）請其他同學完成相同操作。可參考視頻文件美樂電器網站制作.wmv。教師巡邏指導。

（6）請學生參考教材第69頁的內容，完成管理網站中文件和文件夾的創建文件夾操作。并叫1位學生上臺演示，以檢驗自學成果。教師在旁指導。

（7）教師演示站點管理的時候文件的移動操作，（詳見教材第69頁）。

操作要點及注意事項如下： 在復制文件過程中，同類的連續文件可以按住Shift鍵，同時用鼠標選擇第一個文件后，再在最后的一個文件上單擊即可。不連續的文件可以用Ctrl鍵，再用鼠標選擇。將其拖動到相應文件夾中。

（8）請其他同學完成相同操作。教師總結并補充相關要點。

（9）教師演示設置文本超鏈接的一種方法，（詳見教材第69～70頁）。請學生找找還有哪些設置超鏈接的方法。

（10）教師總結評價并補充相關要點。

（11）展示設置了CSS效果的超鏈接，激發學生學習興趣。

（12）教師演示建立網頁超鏈接特效相關操作，（詳見教材第71～73頁）。并解釋a:link、a:active、a:hover、a:visited分別代表的狀態。

（13）請其他同學完成相關操作。教師總結并補充相關要點。（14）展示網頁導航，請學生分析該導航的組成和制作方法。由學生獨立完成。參考教材第74頁的內容。請一位同學上臺演示導航的制作方法。教師在旁提示，并總結導航制作方法。

操作要點及注意事項如下：

每個頁面都必須分別制作設置導航。

（15）展示chanpin.html網頁成品，介紹錨點鏈接的應用范圍和作用。

（16）教師演示制作錨點鏈接的相關操作，（詳見教材第74頁）。學生完成相同操作。（17）展示其他網站上E-mail鏈接的效果。

（18）教師演示制作E-mail鏈接的相關操作，（詳見教材第74頁）。學生完成相關操作。操作要點及注意事項如下：

設置超鏈接的時候冒號輸入要半角。（19）學生將作品完善一下，并上交。（20）抽取個別同學的作品展示評價。

（三）小結和作業： 小結：

（8）在DreamWeaver8中創建站點（9）管理站點的文件和文件夾（10）制作網頁中各種超鏈接（11）制作CSS鏈接特效 作業：

（1）填寫《任務評價表》并上交

（2）自學知識拓展：多媒體文件插入。（3）完成任務一對照練習第4題。（4）課外完成本章習題。

第三篇：《網站建設與網頁設計》教案

《網站建設與網頁設計》

教案

學期：2014-2015-1 班級：2012軟件工程

2012計算機科學與技術

課時：44學時 教師：李念

第1講 HTML基礎

1.1 教學目的和要求

1.了解HTML的發展歷史和HTML5的特性；

2.掌握HTML的文檔結構、代碼規范和網頁文件的創建過程； 3.掌握搭建支持HTML5瀏覽器環境的方法。

1.2 教學重點和難點

1.HTML5的新特點； 2.HTML5的新元素；

1.3 教學方法及手段

實例教學，講授與演示結合。

1.4 教學內容

1.4.1 HTML簡介

HTML是HyperText Markup Language（超文本置標語言）的縮寫，是一種為普通文件中某些字句加上標簽的語言，其目的在于運用標簽（tag）對文件達到預期的效果。

HTML5的特性及元素：

(1)實現Web應用程序：繪畫的Canvas元素，該元素就像在瀏覽器中嵌入一塊畫布，程序可以在畫布上繪畫；更好的用戶交互操作，包括拖放、內容可編輯等；擴展的HTMLDOM API（Application Programming Interface，應用程序編程接口）。

(2)更好地呈現內容：基于Web表現的需要，HTML5引入了更好地呈現內容的元素；用于視頻、音頻播放的video元素和audio元素；用于文檔結構的article、footer、header、nav、section等元素。

1.4.2 HTML編寫規范

HTML文檔由標簽和被標簽的內容組成。標簽能產生所需要的各種效果。其功能類似于一

個排版軟件，將網頁的內容排成理想的效果。其格式為：

<標簽> 受標簽影響的內容 每個標簽都有一系列的屬性。標簽通過屬性來制作出各種效果，格式為： <標簽

屬性1=“屬性值1” 屬性2=“屬性值2” ?> 受標簽影響的內容 。不推薦使用的標簽：在HTML中，某些標簽不推薦使用，例如，、、、、、、、、、等標簽。

代碼的縮進：在編寫HTML代碼時要注意使用代碼縮進來提高程序的結構性和層次性。

1.4.3 網頁文件的創建過程

用記事本創建網頁 用DW軟件創建網頁

1.4.4 搭建支持HTML5的瀏覽器環境

目前，Microsoft的IE系列（僅有IE9及其以上版本）瀏覽器，以及Opera Software的Opera與Google的Chrome瀏覽器。

1.4.5 小結

本次課主要講述了網頁設計的步驟和要點以及HTML5的新特征。

第2講 HTML標簽

2.1 教學目的和要求

1.掌握基本的文字與段落標簽的使用；

2.掌握超鏈接、圖像、表格和列表標簽的使用方法和基本屬性； 3.能夠進行基本的網頁排版。

2.2 教學重點和難點

1.各類標簽的使用方法和屬性設置； 2.嵌套列表的使用。

2.3 教學方法及手段

實例教學，講授與演示結合。

2.4 教學內容

2.4.1 文字與段落排版

注釋標簽 強制換行標簽
段落標簽

?