《網(wǎng)頁的制作》教案優(yōu)秀

時(shí)間：2024-07-24 13:11:10 教案我要投稿

《網(wǎng)頁的制作》教案優(yōu)秀推薦度：
相關(guān)推薦

《網(wǎng)頁的制作》教案優(yōu)秀4篇(推薦)

　　作為一位不辭辛勞的人民教師，就不得不需要編寫教案，借助教案可以更好地組織教學(xué)活動(dòng)。那么什么樣的教案才是好的呢？以下是小編收集整理的《網(wǎng)頁的制作》教案優(yōu)秀，供大家參考借鑒，希望可以幫助到有需要的朋友。

《網(wǎng)頁的制作》教案優(yōu)秀4篇(推薦)

《網(wǎng)頁的制作》教案優(yōu)秀1

　　一、教材分析

　　首頁之外的其他網(wǎng)頁在結(jié)構(gòu)上很相似，為了給這些網(wǎng)站增加一些亮點(diǎn)，故在網(wǎng)頁中插入了交互式按鈕，交互式按鈕不僅具有超鏈接功能，在使用過程中還會(huì)發(fā)生變化，更能引起學(xué)生的學(xué)習(xí)興趣。

　　二、教學(xué)目標(biāo)

　　1、知識(shí)性目標(biāo)

　�。�1）了解交互式按鈕的功能；

　　（2）了解計(jì)算機(jī)主機(jī)包括的部件；

　�。�3）了解網(wǎng)頁動(dòng)態(tài)效果。

　　2、技能性目標(biāo)

　�。�1）會(huì)設(shè)置網(wǎng)頁的目錄；

　　（2）學(xué)會(huì)插入、修改交互式按鈕；

　　（3）學(xué)會(huì)復(fù)制表格。

　　3、情感性目標(biāo)

　　（1）加深對(duì)計(jì)算機(jī)硬件的認(rèn)識(shí)；

　�。�2）培養(yǎng)學(xué)生分工協(xié)作的精神。

　　三、教學(xué)重、難點(diǎn)

　　1、教學(xué)重點(diǎn)

　　（1）交互式按鈕的功能；

　�。�2）插入、修改交互式按鈕。

　　2、教學(xué)重點(diǎn)

　�。�1）交互式按鈕；

　�。�2）復(fù)制表格。

　　四、教學(xué)準(zhǔn)備

　　制作一個(gè)具有幾個(gè)漂亮交互式按鈕的網(wǎng)頁。

　　五、教學(xué)過程

　　1、導(dǎo)入

　　教師：現(xiàn)在我們的首頁已經(jīng)做好了，可是其他的網(wǎng)頁還沒做，但是一節(jié)課內(nèi)無法做太多的，今天呀我們就來學(xué)習(xí)制作“主機(jī)”網(wǎng)頁吧！其余的以后在做.

　　2、學(xué)習(xí)新課。

　�。�1）指導(dǎo)學(xué)生用表格布局；

　　教師:用表格對(duì)網(wǎng)頁進(jìn)行布局方法，前一堂課我們學(xué)習(xí)了，現(xiàn)在就請(qǐng)同學(xué)們，對(duì)照課本用表格給 “主機(jī)”網(wǎng)頁進(jìn)行設(shè)置。

　　學(xué)生看書練習(xí)。

　�。�2）指導(dǎo)學(xué)生學(xué)習(xí)插入交互式按鈕；

　　教師：在網(wǎng)頁內(nèi)經(jīng)常會(huì)插入具有超鏈接功能的按鈕，單擊這些按鈕，便可打開其他網(wǎng)頁，請(qǐng)同學(xué)們看下面具有交互式按鈕的網(wǎng)頁。

　　屏幕展示。

　　教師：下面我們就來學(xué)習(xí)如何制作交互式按鈕。

　　教師示范講解，學(xué)生觀察。

　　學(xué)生練習(xí)、老師巡視指導(dǎo)。

　　3、鞏固練習(xí)。

　　請(qǐng)同學(xué)們?cè)囍瓿蓵斜菊n的“試一試”中的.練習(xí)，在遇到困難時(shí)可小組同學(xué)相互幫助，也可以舉手問老師。

　　4、總結(jié)評(píng)價(jià)。

　　教師總結(jié)后，請(qǐng)同學(xué)根據(jù)自己掌握的知識(shí)情況和收獲，在本節(jié)課的“評(píng)一評(píng)”中打上自己的成績。

《網(wǎng)頁的制作》教案優(yōu)秀2

　　一、教學(xué)目標(biāo)

　　1、知道站點(diǎn)、主頁的概念，能在指定位置建立只有一個(gè)網(wǎng)頁的站點(diǎn)；

　　2、認(rèn)識(shí)FRONTPAGE的界面；

　　3、掌握在主頁中插入文字、圖片、水平線；

　　4、掌握頁面文件與圖片的保存。

　　二、教學(xué)重點(diǎn)

　　1、能在指定位置建立只有一個(gè)網(wǎng)頁的站點(diǎn)（難點(diǎn)）

　　2、能在頁面中插入文字、圖片、水平線

　　3、掌握頁面文件與圖片的保存（難點(diǎn)）

　　三、學(xué)情分析

　　學(xué)生已經(jīng)學(xué)習(xí)了WORD、POWERPOINT與上網(wǎng)瀏覽信息，對(duì)計(jì)算機(jī)的基本操作（WORD中文檔的編輯，網(wǎng)頁的瀏覽等）比較熟練。這使得學(xué)生主動(dòng)探索、自主學(xué)習(xí)成為可能。每位學(xué)生必須完成基本任務(wù)，有能力的學(xué)生還可以完成提高篇的學(xué)習(xí)，以充分發(fā)揮學(xué)生的'積極性與自主性。

　　四、教學(xué)方法

　　在教學(xué)中，一方面采用比較教學(xué)的方法，促進(jìn)學(xué)生知識(shí)的遷移；另一方面，提供學(xué)生一個(gè)導(dǎo)學(xué)，讓學(xué)生根據(jù)這個(gè)網(wǎng)絡(luò)環(huán)境下的自己探索學(xué)習(xí)，以滿足不同層次學(xué)生的需求。

　　五、教學(xué)過程設(shè)計(jì)

　　教師活動(dòng)：1、引入課題：（激發(fā)興趣，活躍氣氛）

　　同學(xué)們喜不喜歡上網(wǎng)？經(jīng)常上新浪、西祠胡同等，有沒有同學(xué)知道新浪、西祠胡同稱做什么？（網(wǎng)站）

　　瀏覽新浪網(wǎng)站，瀏覽的第一個(gè)頁面稱為什么？（主頁）

　　我們還可以瀏覽其它的頁面，點(diǎn)擊超鏈接瀏覽，當(dāng)鼠標(biāo)變成手指的形狀時(shí)有超鏈接。

　　問題1：網(wǎng)站是不是就是網(wǎng)頁？用自己的語言描述一下網(wǎng)站的概念（網(wǎng)站包含多個(gè)網(wǎng)頁，通過超鏈接把不同的頁面鏈接起來）

　　問題2：網(wǎng)頁是不是就是主頁？（第一個(gè)頁面稱為主頁，網(wǎng)站設(shè)計(jì)者可以確定哪一個(gè)是主頁，主頁的文件名一般為：index.ht,主頁也是網(wǎng)頁）

　　設(shè)計(jì)網(wǎng)站一般必須經(jīng)過兩個(gè)步驟，首先是在計(jì)算機(jī)里做好，然后發(fā)布在internet上，讓所有的人訪問瀏覽。

　　今天我們學(xué)習(xí)用Frntpage建立站點(diǎn)，制作一個(gè)主頁。

　　先來研究一下沒有發(fā)布的網(wǎng)站，打開教師做的網(wǎng)站

《網(wǎng)頁的制作》教案優(yōu)秀3

　　學(xué)習(xí)目標(biāo):

　　制作框架網(wǎng)頁、在網(wǎng)頁中插入字幕和超鏈接知識(shí)

　　1.制作框架網(wǎng)頁

　　框架網(wǎng)頁是一種特殊的HTML網(wǎng)頁，它將窗口劃分成若干小窗口區(qū)域（框架）。每個(gè)框架獨(dú)立顯示一個(gè)不同的網(wǎng)頁（有自己的網(wǎng)頁名字），整個(gè)框架網(wǎng)頁有一個(gè)總的名字。

　　框架與表格在組織網(wǎng)頁結(jié)構(gòu)時(shí)相似。表格是對(duì)頁面區(qū)域進(jìn)行劃分，框架是對(duì)整個(gè)瀏覽窗口進(jìn)行劃分。

　　·創(chuàng)建框架網(wǎng)頁：?jiǎn)螕舨藛巍拔募薄靶陆ā薄熬W(wǎng)頁”，選擇“框架網(wǎng)頁”標(biāo)簽→選擇“嵌套式層次結(jié)構(gòu)”

　　·選中的框架邊框?yàn)樗{(lán)色，在拆分或刪除框架時(shí)應(yīng)注意是否選中。

　　·隱藏框架間的橫線：

　　右擊框架網(wǎng)頁→單擊“框架屬性”→在對(duì)話框中單擊“框架網(wǎng)頁”按鈕，在“網(wǎng)頁屬性”對(duì)話框中選“框架”標(biāo)簽→設(shè)置“顯示邊框”為未選中狀態(tài)。

　　·按住Ctrl鍵，拖動(dòng)鼠標(biāo)可以快速拆分框架。

　　·刪除框架：?jiǎn)螕舨藛巍翱蚣堋薄皠h除框架”。

　　·保存框架網(wǎng)頁時(shí)注意要保存所涉及到的所有網(wǎng)頁。

　　·更改框架鏈接的網(wǎng)頁：

　　右擊相應(yīng)的超鏈接→在彈出的快捷菜單上選擇“超鏈接屬性”命令，打開“編輯超鏈接”對(duì)話框

　　→可直接選擇列出的文件，或在“URL”框中輸入網(wǎng)頁的地址

　　→單擊“目標(biāo)框架”右邊的“更改目標(biāo)框架”按鈕，在“當(dāng)前框架網(wǎng)頁”中選擇目標(biāo)框架。

　　2.網(wǎng)頁中插入字幕

　　·插入字幕：光標(biāo)定位插入點(diǎn)→單擊“插入”→“組件”→“字幕”打開“字幕屬性”對(duì)話框；

　　→在文本框中輸入文字，選擇“方向”、“速度”、“表現(xiàn)方式”等；

　　→選中字幕，拖動(dòng)鼠標(biāo)，調(diào)節(jié)字幕運(yùn)動(dòng)范圍。

　　·修改字幕：雙擊字幕，可以打開“字幕屬性”對(duì)話框，對(duì)字幕屬性進(jìn)行修改。

　　3.超鏈接相關(guān)網(wǎng)頁

　　超鏈接是從一個(gè)網(wǎng)頁指向另一個(gè)目標(biāo)的連接。一般在網(wǎng)頁中的某文字或圖片上設(shè)置超鏈接。

　　·創(chuàng)建超鏈接：?jiǎn)螕粑淖只驁D片→“常用”工具欄的“超鏈接”按鈕，打開“創(chuàng)建超鏈接”對(duì)話框。

　　·取消超鏈接：選中具有超鏈接的文本或圖片，單擊“超鏈接”按鈕，在打開的對(duì)話框中將URL欄中的內(nèi)容刪除。

　　·跟蹤超鏈接：

　　在超鏈接上右擊，在打開的快捷菜單上選擇“跟蹤超鏈接”命令；

　　或：在普通視圖中，按住Ctrl鍵，將光標(biāo)移到超鏈接上，單擊，會(huì)跟蹤連接到超鏈接指向的目的位置。

　　·設(shè)置超鏈接文本的`顏色：網(wǎng)頁中超鏈接文本的顏色共有3種：未訪問過的，當(dāng)前正在訪問的，已訪問過的。FrontPage默認(rèn)這3種顏色分別為藍(lán)色，紅色、深藍(lán)色。單擊“格式”→“背景”→在“網(wǎng)頁屬性”對(duì)話框→選“背景”標(biāo)簽，選定“超鏈接”、“已訪問過的超鏈接”、“當(dāng)前超鏈接”的顏色。

　　作業(yè)：

　　新建框架網(wǎng)頁，建立超鏈接，在網(wǎng)頁中插入字幕。7.2制作網(wǎng)頁（框架）這一教案

《網(wǎng)頁的制作》教案優(yōu)秀4

　　一、課程基本信息

　　課程編號(hào)：

　　中文名稱：網(wǎng)頁設(shè)計(jì)與制作

　　英文名稱：Web Design and Production課程類別：選修課適用專業(yè)：所有專業(yè)

　　開課學(xué)期：20xx—20xx第2學(xué)期總學(xué)時(shí)：24學(xué)時(shí)總學(xué)分：1課程簡(jiǎn)介：

　　本課程突出網(wǎng)頁設(shè)計(jì)與制作的現(xiàn)代特點(diǎn)，從Internet的基礎(chǔ)知識(shí)入手，重點(diǎn)介紹HTML超文本標(biāo)記語言，以及所見即所得的網(wǎng)頁設(shè)計(jì)制作工具Dreamweaver的基本操作流程。從靜態(tài)頁面到動(dòng)態(tài)頁面由淺入深的介紹網(wǎng)頁設(shè)計(jì)與制作全過程。采用案例分析和親自實(shí)踐的方式突出、突破課程的重點(diǎn)和難點(diǎn)。并指導(dǎo)每一名選課的同學(xué)為自己建一個(gè)博客網(wǎng)站，以此提高同學(xué)對(duì)網(wǎng)頁設(shè)計(jì)與制作的興趣和愛好。參考書：

　　1、網(wǎng)頁設(shè)計(jì)與制作教程，熊前興閔聯(lián)營，科學(xué)出版社；

　　2、網(wǎng)站與網(wǎng)頁設(shè)計(jì)，張貴明，清華大學(xué)出版社；

　　3、網(wǎng)頁美術(shù)設(shè)計(jì)原理及實(shí)戰(zhàn)策略，王曉峰焦燕，清華大學(xué)出版社；

　　4、網(wǎng)站建設(shè)典型案例，張梟，清華大學(xué)出版社；

　　二、課程教學(xué)目標(biāo)：

　　網(wǎng)頁和網(wǎng)站是Internet的重要組成部分，企業(yè)、公司和機(jī)構(gòu)通過網(wǎng)站來宣傳推介自己的技術(shù)和產(chǎn)品，個(gè)人發(fā)布主頁展示自己的風(fēng)采，人們從不同類型的網(wǎng)站來獲取需要的信息。因此，設(shè)計(jì)與制作網(wǎng)頁已經(jīng)成為計(jì)算機(jī)應(yīng)用技術(shù)的一個(gè)重要方面。本課程的主要教學(xué)目的是使學(xué)生掌握網(wǎng)頁設(shè)計(jì)與制作的基礎(chǔ)知識(shí)，能運(yùn)用網(wǎng)頁工具設(shè)計(jì)和制作常用網(wǎng)頁。

　　三、理論教學(xué)內(nèi)容與要求

　　第一章、網(wǎng)頁的基礎(chǔ)知識(shí)（1學(xué)時(shí)）

　�。�1）Internet基礎(chǔ)知識(shí)

　　（2）www簡(jiǎn)介

　�。�3）網(wǎng)頁制作的技術(shù)和工具介紹

　　第二章、超文本編輯語言HTML（8學(xué)時(shí)）

　　（1）HTML文件的基本結(jié)構(gòu)

　�。�2）文字和段落標(biāo)記

　�。�3）列表標(biāo)記

　�。�4）圖片標(biāo)記

　　（5）表格標(biāo)記

　�。�6）超鏈接標(biāo)記