【文章內(nèi)容簡介】 范操作并講解如何制作超鏈接。交互式按鈕的超鏈接制作要求在框架網(wǎng)頁中演示操作。老師可以提問學生：演示者操作的對嗎？有沒有問題？引導學生發(fā)現(xiàn)問題：超鏈接制作完成后需要檢驗（保存后預覽）。教師講解，突破難點，再交由學生操作。以上是同一站點內(nèi)不同網(wǎng)頁之間的鏈接，有時一個頁面中內(nèi)容過多，需要不斷拖動滾動條實現(xiàn)閱讀，能否實現(xiàn)快速跳轉呢？任務2同一站點內(nèi)同一頁面內(nèi)的跳轉（鏈接）：在“動物趣聞”頁面內(nèi)制作書簽鏈接。教師講解：由生活中的書簽引入，介紹“書簽鏈接”的概念，然后再演示如何操作。提示：書簽鏈接的雙向性問題（返回）。學生認真聽講后模仿制作，教師巡視進行指導并反饋學生的完成情況。（2）站間超級鏈接僅憑我們課堂上制作的這些頁面還不足以詳細介紹我們的主題，此時我們還可以借助超鏈接，鏈接到因特網(wǎng)上的其他網(wǎng)站，以豐富我們的內(nèi)容。任務3借助熱區(qū)鏈接，為“友情鏈接”頁面制作超鏈接，鏈接我國一些自然保護區(qū)網(wǎng)站。有了以上基礎，可安排學生自學教材中有關熱區(qū)鏈接的相關內(nèi)容，學生探究操作后教師再安排學生進行演示，輔助以提問的形式檢驗學生的自學情況?？偨Y與評價開展同學間的互助，檢驗其鏈接完成情況，推薦優(yōu)秀同學做展示。引導學生分類總結本節(jié)課的知識點。網(wǎng)頁制作教學設計2教學目標：讓學生掌握在網(wǎng)頁中插入表格的方法以及表格的修改學會利用表格來規(guī)劃網(wǎng)頁培養(yǎng)學生創(chuàng)新的能力以及動手操作的能力教學重、難點：利用表格來規(guī)劃網(wǎng)頁，從中培養(yǎng)學生的創(chuàng)新能力教學過程：一、情境導入同學們你們善于觀察嗎？老師先考考你們，我們一起來看一組圖片，你們看看在那里看過呢？學校緩臺的窗臺上。你們的觀察能力真的很強啊，對，這些都是我們學校美術的特色作口，盤畫。其實，我們做過很多作品：有手工作品，語文課中的作文、書法等都是作品，這節(jié)課我們以繪畫作口品為例，做一個學習園地網(wǎng)頁，把我們的作品展示到自己的班級網(wǎng)站中，以便我們更好的努力學習?，F(xiàn)在我們就一起來制作吧！二、新知探究首先我們來打開上節(jié)課的班級網(wǎng)站，在這個網(wǎng)站中新建一個網(wǎng)頁，并保存成“學習園地”。教師講解：如何制作學習園地網(wǎng)頁。制作網(wǎng)頁的標題：輸入文字，并設置文字的格式。插入表格：單擊“表格”中的“插入表格”并對表格屬性進行設置。如：行、列的操作，對齊方式等。同時講解什么是行，什么是列，以及單元格的概念。修改表格：調(diào)整表格行高和列寬。在學生學會插入表格的基礎上，來設計網(wǎng)頁，展示作品。并講解在單元格中可以插入圖片、文字。那我們就一起快快去做吧！插入圖片，并在圖片的上面或下面進行圖片的注釋。進一步設置單元格的背景，來美化網(wǎng)頁。設置超鏈接：通過導航欄目，設置文字超鏈接。選中文字，點擊右鍵選擇超鏈接在列表中選擇你要鏈接的網(wǎng)頁，單擊“確定”按鈕。學生在教師的講解后，學生自己動手操作制作網(wǎng)頁。教師進行指導。（伴隨音樂）三、作品評價生評：從網(wǎng)頁設計上，美觀程度上，知識落實上重點評價。師評：對學生作品進行評價，并對其它學生的評價加以更完整的解釋。四、總結我們這節(jié)課主要是利用了表格來設計網(wǎng)頁，以使來美化我們的網(wǎng)頁，通過繪畫作品的展示，學習更多的知識。網(wǎng)頁制作教學設計3一、課程基本信息課程編號：中文名稱：網(wǎng)頁設計與制作英文名稱：Web Design and Production課程類別：選修課適用專業(yè)：所有專業(yè)開課學期：20xx—20xx第2學期總學時：24學時總學分：1課程簡介：本課程突出網(wǎng)頁設計與制作的現(xiàn)代特點，從Internet的基礎知識入手，重點介紹HTML超文本標記語言，以及所見即所得的網(wǎng)頁設計制作工具Dreamweaver的基本操作流程。從靜態(tài)頁面到動態(tài)頁面由淺入深的介紹網(wǎng)頁設計與制作全過程。采用案例分析和親自實踐的方式突出、突破課程的重點和難點。并指導每一名選課的同學為自己建一個博客網(wǎng)站，以此提高同學對網(wǎng)頁設計與制作的興趣和愛好。參考書：網(wǎng)頁設計與制作教程，熊前興閔聯(lián)營，科學出版社；網(wǎng)站與網(wǎng)頁設計，張貴明，清華大學出版社；網(wǎng)頁美術設計原理及實戰(zhàn)策略，王曉峰焦燕，清華大學出版社；網(wǎng)站建設典型案例，張梟，清華大學出版社；二、課程教學目標：網(wǎng)頁和網(wǎng)站是Internet的重要組成部分，企業(yè)、公司和機構通過網(wǎng)站來宣傳推介自己的技術和產(chǎn)品，個人發(fā)布主頁展示自己的風采，人們從不同類型的網(wǎng)站來獲取需要的信息。因此，設計與制作網(wǎng)頁已經(jīng)成為計算機應用技術的一個重要方面。本課程的主要教學目的是使學生掌握網(wǎng)頁設計與制作的基礎知識，能運用網(wǎng)頁工具設計和制作常用網(wǎng)頁。三、理論教學內(nèi)容與要求第一章、網(wǎng)頁的基礎知識（1學時）（1）Internet基礎知識（2）簡介（3）網(wǎng)頁制作的技術和工具介紹第二章、超文本編輯語言HTML（8學時）（1）HTML文件的基本結構（2）文字和段落標記（3）列表標記（4）圖片標記（5）表格標記（6）超鏈接標記（7）表單標記（8）框架標記第三章、JavaScript語言（4學時）（1）JavaScript語言簡介（2）JavaScript編程基礎（3）基于對象的JavaScript語言（4）JavaScript程序實例第四章、層疊樣式表CSS（1學時）（1）CSS概述（2）CSS屬性第五章、可視化網(wǎng)頁設計工具（1）網(wǎng)頁的基本操作（2）圖像、表格與超鏈接（3）表單與框架（4）添加網(wǎng)頁元素（5）發(fā)布站點第六章、動態(tài)網(wǎng)頁設計語言ASP（4學時）（1）ASP簡介（2）VBScript腳本基礎（3）ASP的內(nèi)置對象（4）實用文件第七章、利用AD0訪問數(shù)據(jù)庫（1學時）（1）數(shù)據(jù)庫的連接（2）數(shù)據(jù)庫的檢索（3）數(shù)據(jù)庫的操作總結復習（1學時）四、實驗教學內(nèi)容與要求五、作業(yè)六、考核方式期末考核每個同學為自己設計制作一個博客網(wǎng)站。七、成績評定自制網(wǎng)站（80%）平時考勤、作業(yè)（20%）平時成績分配：平時考勤5次，每次2分，共占10%作業(yè)5次，每次2分，共占10%八、執(zhí)行大綱時應注意的問題根據(jù)學生對課程內(nèi)容的掌握和理解程度會對進度做適當?shù)恼{(diào)整。網(wǎng)頁制作教學設計4一、學習內(nèi)容分析《H5快速制作網(wǎng)頁》是蘇教版《初中信息技術》8年級第3章《主題網(wǎng)站設計與制作》第2節(jié)《制作網(wǎng)頁》中第1課時的內(nèi)容。H5是指第5代HTML標記語言，其搭建的站點可方便地應用于PC、Android、iOS等多種平臺，它為互聯(lián)網(wǎng)內(nèi)容的呈現(xiàn)提供了一種全新的框架和平臺，包括免插件的音視頻、圖像、動畫、本地存儲以及更多酷炫的功能。通俗地說，H5是一種創(chuàng)建網(wǎng)頁的方式，用H5創(chuàng)建的網(wǎng)頁以文字、圖片、動畫、聲音等相結合的富媒體出現(xiàn)，頁面圖文并茂、生動活潑、傳達方便、易于推廣。二、學習者分析本節(jié)課的學習對象是八年級的學生，處于這一年齡段的學生，思維活躍，具備一定的理解能力和較強的自學能力。通過前面的學習，學生已熟練使用WPS、Photoshop等軟件，也掌握了規(guī)劃設計主題網(wǎng)站的方法。本節(jié)課以iH5軟件工具為平臺，學習用H5快速制作網(wǎng)頁。然而學生從未接觸過iH5，對于陌生軟件的學習，有些畏難情緒，覺得無從下手。但是在日常生活中，他們經(jīng)常能接觸到各種各樣的手機H5網(wǎng)頁，如企業(yè)宣傳、個人簡歷、邀請函、紀念冊等，這些H5網(wǎng)頁給大家?guī)砹巳碌捏w驗，技術本身帶來的新奇感讓學生心生向往。三、學習目標知識與技能：能列舉H5網(wǎng)頁的特點；掌握在iH5軟件中添加和編輯文字、圖片、動畫等元素的方法以及設置對象屬性的方法，理解舞臺、頁面、對象之間的層級關系。過程與方法：通過制作校園文化藝術節(jié)邀請函，經(jīng)歷制作H5網(wǎng)頁的基本過程。情感態(tài)度及價值觀：感悟網(wǎng)頁制作并非難事，軟件使用有共通之處。四、教學過程（一）創(chuàng)設情境，初認H5以藝載德、以藝促智，一年一度的校園文化藝術節(jié)又開始了，同學們踴躍報名，比拼才藝。八年級將舉行以“多彩校園，閃亮你我”為主題的匯報演出，充分展示八年級同學的青春活力和精神面貌。思考：本次演出將要邀請家長參加，你會選擇什么樣的方式來做出邀請呢？（口頭傳達、短信、紙質(zhì)邀請函等）活動1：體驗“校園文化藝術節(jié)邀請函H5”，初認H5。（1）二人一組，一位同學在手機瀏覽器中打開；另一位同學在電腦瀏覽器中打開（網(wǎng)址：xxxxxx）。瀏覽后回答以下問題：不同平臺的瀏覽效果是否一致？為什么？這支H5中具有哪些媒體元素？用戶能參與其中嗎？你會用什么方式推廣這支H5？小結：（1）H5具有跨平臺、支持多媒體、可交互、易推廣等優(yōu)勢。以上特點使得H5可能成為我們發(fā)出邀請的首選。（2）“校園文化藝術節(jié)邀請函H5”為何如此吸引人？觀看視頻，思考到底什么是H5？小結：H5是指第5代HTML標記語言，也指用H5語言制作的一切數(shù)字產(chǎn)品。通俗地說，H5是一種創(chuàng)建網(wǎng)頁的方式。用H5創(chuàng)建的網(wǎng)頁圖文并茂、生動活潑、傳達方便、易于推廣。設計意圖：與H5相關的概念性知識抽象、枯燥難懂，如果采用講授法，學生并不容易理解。因此本節(jié)課創(chuàng)設了學生現(xiàn)實生活中的情境，以制作校園文化藝術節(jié)邀請函H5為主題，設計了4個問題，每個問題目標指向明確，容易引起學生的共鳴，激發(fā)學生的思考并得出結論。通過微視頻用通俗易懂的語言幫助學生進一步認識H5，內(nèi)化知識。（二）根據(jù)需求，規(guī)劃H5凡事預則立，不預則廢，要制作匯報演出邀請函，首先對每個頁面的內(nèi)容、素材等進行一個簡單規(guī)劃。活動2：根據(jù)需求，選擇素材，規(guī)劃邀請函。設計意圖：學生已經(jīng)學習過網(wǎng)站的規(guī)劃，所以容易理解規(guī)劃的重要性。教師通過搭建“規(guī)劃表”這個支架，引導學生根據(jù)制作校園文化藝術節(jié)邀請函的需求，對所要制作的邀請函進行初步的規(guī)劃，幫助學生理清楚每個頁面的內(nèi)容和所需添加的元素。（三）知識遷移，制作H5能夠用于開發(fā)H5網(wǎng)頁的工具很多，今天以iH5軟件工具為平臺，學習使用H5快速制作網(wǎng)頁。活動3：找“共性”，探“個性”，認識iH5軟件。（1）使用課前申請的賬號，登錄網(wǎng)址：，進入在線編輯平臺。（2）對比Photoshop界面，認識iH5界面，找出相同之處和不同之處。小結：相同之處：_______________________（菜單欄、工具面板、編輯區(qū)）不同之處：_______________________（對象樹面板）（3）比較PS中的圖層面板和iH5中的對象樹面板，思考對象樹面板的作用。小結：對象樹面板可以用來管理舞臺中的對象，對象樹中的層級關系為：舞臺→頁面→文本、圖片等素材，每個頁面中的對象上層覆蓋下層?；顒?：利用iH5軟件，制作邀請函H5。（1）觀看操作指導微視頻，自主探究頁面的制作，完成以下問題：設置背景：選中頁面1，在屬性面板中找到_____________選項，添加背景圖片。添加文字：選中頁面1，在工具面板中選擇_____________選項。添加圖片：選中頁面1，在工具面板中選擇_____________選項。小結：添加文字、圖片的一般步驟：選擇位置—添加對象。（2）展示學生作品，師生共同分析存在的問題，尋求解決方式。問題1：首頁、內(nèi)容頁都播放同一素材。原因分析：素材全部都添加在了舞臺之中，其層級關系在內(nèi)容頁和首頁的上一級。問題2：內(nèi)容頁沒有顯示內(nèi)容。原因分析：素材全部都添加在了首頁之中，而不是