製作網站教學

① 如何提高網頁製作課程的教學效果

《網頁設計與製作》課程是我校計算機專業必修的課程，也是非計算機專業選修課程，本課程是側重學生設計與製作的一門課。那麼如何提高《網頁設計與製作》這門課程的教學質量，達到師生雙贏的結果，這是值得我們探討的。本人經過幾年的《網頁設計與製作》課程的教學實踐與觀察，從課程教學內容、教學方法等幾個方面進行闡述。
一.合理調整教學內容
從培養目標出發，《網頁設計與製作》課程教學內容重在培養學生的網頁設計、實際動手製作的能力，因此對課程的教學內容進行合理的調整尤為重要，在講述課程內容時，根據教學對象的不同，教學內容也是不同的，但是都沒有完全按照教材的章節順序來講述，比如對於計算機專業學生來講，我主要分成幾部分，第一部分介紹網頁基礎知識，網站的種類，網站的概念，並對優秀的網站網頁進行賞析；第二部分介紹HTML語言，通過一個典型的小型網站來講解HTML語言各類標記符的使用方法；第三部分用網站製作軟體具體介紹網站建設、網站規劃及流程，第四部分為網站綜合設計，通過由學生選擇設計各類題目，兩人一組設計一個綜合類網站，進而鍛煉學生的團隊合作能力，網頁設計與製作的能力。對於非計算機專業的學生來說，HTML語言部分就省略掉了，只有在做實例的過程中遇到問題時，在進行簡單講解，經過幾年的教學來看，取得了良好的教學效果。
二.改進教學方法，激發學生學習興趣
本人在此課程中主要採用了案例教學法，案例教學法師一種用案例教學的方法，在教學過程中，按照大綱的要求以實際案例作為剖析對象，在教師的指導下，教師與學生共同參與案例的分析，討論來尋找完成任務的方法。
比如在講授使用dreamweaver工具如何編輯文字和插入圖像等基本基本知識，我會將一個真實的學校的網頁呈現給學生，引導學生對這張網頁進行分析，並提出實現方法，最後選擇一種便捷的方法進行講解，學生再進行上機實踐。
再比如在介紹網頁中表格的布局時，以「製作旅遊類網站」為主進行介紹，首先由小組中的一名同學在黑板上畫出網頁的布局結構，然後再請另一名同學在軟體中進行設計，小組協作共同完成這一個案例，在製作過程中難免會遇到一些問題，如表格布局是否合理、單元格是否為頂端對齊、單元格的邊距和間距是否為0等現象是學生經常出問題的地方，那麼由學生進行操作所遇到的問題，他們自身的印象會更深，這樣就使其在今後的實踐環節中減少此類問題的出現
實踐證明案例教學方法可行，得到了學生的喜愛與好評，也取得了良好的教學效果。
三. 正確引導學生的學習方法
根據我校學生的特點，學生存在學習的積極性不高，不主動，課前不預習，課後不復習等現象，因此，在本課程的教學過程中，正確引導學生的學習方法是至關重要的。
(一)經常與學生溝通交流，使學生養成預習與自學的好習慣。使學生了解，通過預習和自學能夠充分發揮其動手的能力，掌握各種技能，培養自身的創新能力，這種方法的運用要比老師單純地講好得多。
(二)根據學生的認知水平、思維方式，適當降低教材的理論難底，並多讓學生欣賞一些網頁製作方面的案例，增加學生的興趣，調動學生的學習積極性，激發學生的潛能。
總之，《網頁設計與製作》課程是一門實踐性非常強的課程，如何提高本門課程的教學質量途徑多種多樣，只要在教學中不斷探索，勇於創新，定會尋找出一條既符合實際又有效的途徑，讓學生在有限的時間內學習到更多的知識，操作的更熟練，為今後的工作、學習奠定良好的基礎。同時,我也相信，只要每位教師本著「勤學、善思、實干」的准則，一如既往，再接再厲，調動學生學習的主動和積極性，培養學生觀察、思維、推理、自學以及分析問題、解決問題的能力，任何一門課程的教學質量都會得到提高。

② 怎麼製作網頁

伴隨網路的快速發展，上網已成為一種潮流。人們從網上傳播和獲取信息，而網頁則是信息的基本載體。因此製作網頁成為學生學習網路相關知識、學習信息傳播知識的重要途徑。

網頁製作與其他教學相比，無論是教學思想、教學方法。還是教學手段、考核方式上都有其特殊之處。教師在教學中，採取怎樣的教學模式和教學方法才能激發學生的學習積極性、提高教學質量呢？

網頁製作的教學內容決定教學模式和方法，中小學開設信息技術課程的目的是培養學生的創新精神和實踐能力、推動素質教育的開展，也就是說其重點是培養學生的動手能力。這樣的目標，按照通常的教學模式（教師——內容——學生）的方法很難實現，甚至行不通。筆者採取網頁製作教學模式（教師精講指導——上機操作練習——學以致用）的方法進行教學效果不錯。

一、學為主體，突起能力

計算機軟體教學是中學信息技術教學的重要內容之一。網頁製作教學有別於其他軟體的教學。它具有教強的實踐性。所以在教學中應充分體現學生的主體作用，即教師可用較短的時間做一些操作演示。還可以給學生展示一些較優秀的網頁作品供學生參考，然後大部分時間交給學生，讓他們在某一特定主題下自己動手製作。教師在學生製作過程中不要過多指點，應讓學生在實踐中摸索、在摸索中提高。當然這需要學生事先進行充分的預習，還要有其他軟體知識（如Word）做基礎。

這樣做會不會花費較多時間，從而影響教學進度呢？回答是否定的。首先，從心理學的角度講，興趣是獲取知識的源動力。學生對網頁這種新事物非常感興趣，早就躍躍欲試。其次，學習網頁製作之前學生已有一些軟體知識做基礎，對軟體本身的使用障礙不大。

這樣的教學方法使學生的知識獲取是通過親身實踐得到的，因此學得扎實，記得牢固。此外，學生在學習過程中遇到的問題是通過分析、摸索得到解決的，這又進一步提高了他們分析問題和解決問題的能力。所以這種以學為主、突出能力的網頁製作教學方法是符合學生認知規律的行之有效的方法。

二、提倡創新，體現個性

網頁是網路信息的基本載體，它除了為傳播信息提供平台外，還體現出製作者的個人審美情趣和藝術修養。因此在網頁製作的教學過程中，除了讓學生掌握網頁的一般製作技巧外，還應鼓勵學生在製作網頁時突出個人風格，提倡創新。

⒈自選主題

網頁製作的作業應置選題分。教師可為學生提供一些網頁主題，如環保、助殘、娛樂等，學生可以選擇教師提供的主題，也可以自擬主題，集中報教師後選題雷同的允許其重選，以利其取得較高的選題分。

2、頁面新穎、美觀

主頁面的布局和製作是網頁能否吸引人的關鍵所在，因此教師應在學生製作網頁前將評價標准公布出來，把頁面布局合理、製作精緻、設計有新意、不雷同等作為加分因素。目的是鼓勵創新、避免抄襲。這一標准對美術基礎較好的同學十分有利，亦使他們的良好素質得到充分體現。

雖然教師事先准備了相關的文字、圖片素材，但為了得到高分，學生們仍四處搜集相關圖片、自己動手撰寫文章、為自己的網頁進行充分的素材准備，以期顯示自己的個人風格。

這樣進行的網頁製作教學不但使學生學會了網頁製作的方法，還充分展示了每個學生的個人審美情趣和對素材的組織能力，克服了以往學生們互相抄襲的弊病，能檢驗出每個學生的真實水平。通過這樣的教學過程，學生們製作出的網頁各有千秋，使我們老師都大開眼界，真正做到了教學相長。

三、鼓勵協作，培養團隊精神

「一花獨放不是春，百花齊放春滿園。」在當今競爭激烈的信息時代，如果只強調個人奮斗、忽視與他人協作，終究難成大器。在信息技術領域，團隊精神顯得尤為重要。在這個領域，許多軟體都是幾個、幾十甚至幾百人合作完成的。如果讓一個人單獨去做，恐怕當他的軟體設計完成之時，也就是該軟體淘汰之日。

為了鼓勵協作，網頁製作的考核中可增設小組附加分，即每四人為一組，小組成員的分數之和為小組分，小組分的30%作為附加分加入到該組每個成員的分數上。

學生在進行網頁製作時遇到問題應首先自已分析解決，解決不了可請求其他同學幫助，如果仍不能解決則可組織小組討論。由於有小組附加分的激勵，能力強的同學在完成了自己的任務後，也樂於幫助同組同學，提高了小組總分，亦使自己受益。

③ 怎麼用dreamweaver8製作交互網站教學

用dreamweaver做網站來前台頁面還可以，但是涉及到源後台就不怎麼好了。而且交互網站是需要後台和資料庫的。如果你只是想要一個網站試試的話，可以去上找一些網站的後台模板，或者是一些CMS，下載下來在自己電腦上裝個iis，或者其他的web伺服器，如果有編程基礎的話，一般修修改改還是可以的，如果沒有編程基礎的話，用dreamweaver做個頁面都很難。

④ 急求DW製作動態網站視頻教學

http://www.enet.com.cn/eschool/zhuanti/dwasp/

Dreamweaver是大家共認最優秀的可視化網頁製作軟體.其豐富的插件,多樣化的模板以及簡單易用性深受廣大網頁製作愛好者的喜歡.動態網頁的製作一直是新手的困惑,復雜的命令和資料庫等操作都讓新手望而卻步.但以後不必了,因為今天我們為大家帶來的就是通過dreamweaver製作ASP動態網頁的實例教程.

第一章 網頁製作基礎入門

1.1 網頁製作入門實例-1 1.1 網頁製作入門實例-2 1.2 超級鏈接設置-1
1.2 超級鏈接設置-2 1.3-1 表格的插入和屬性 1.3-2 製作立體化表格
1.3-3 製作格式化表格 1.3-4 層的創建與操作 1.3-5 層的排版
1.4-1 跳轉菜單 1.4-2 表單的運用 1.5-1 彈出窗口
1.5-2 狀態欄信息 1.5-3 製作跳轉頁面 1.5-4 製作下拉菜單
1.5-5 製作網路相冊

第二章 動態基礎入門

2.1 定義動態站點及鏈接資料庫 2.2-1 製作分頁顯示 2.2-1 製作顯示記錄數據頁面
2.2-1 製作顯示欄的內容 2.2-2 多個記錄的顯示 2.3-1 刪除記錄
2.3-1 添加記錄 2.3-2 修改記錄 2.4 創建查詢頁面

第三章 動態網頁實例

3.1 製作留言板-1 3.1 製作留言板-2 3.1 製作留言板-3
3.2 製作在線調查系統-1 3.2 製作在線調查系統-2 3.2 製作在線調查系統-3
3.4-1 製作圖書查詢系統 3.4-2 製作圖書查詢系統 3.4-3 製作圖書查詢系統
3.5 製作在線聊天室-1 3.5 製作在線聊天室-2 3.5 製作在線聊天室-3
3.5 製作在線聊天室-4 3.6 製作在線論壇-1 3.6 製作在線論壇-2
3.6 製作在線論壇-3 3.6 製作在線論壇-4 3.7 創建新聞發布系統-1
3.7 創建新聞發布系統-2 3.7 創建新聞發布系統-3 3.8 製作電子商務網站-1
3.8 製作電子商務網站-2 3.8 製作電子商務網站-3 3.8 製作電子商務網站-4
3.8 製作電子商務網站-5 3.8 製作電子商務網站-6 3.8 製作電子商務網站-7
3.8 製作電子商務網站-8 3.9 製作下載系統-1 3.9 製作下載系統-2
3.10 製作人力資源管理系統-1 3.10 製作人力資源管理系統-2 3.10 製作人力資源管理系統-3
3.10 製作人力資源管理系統-4 3.10 製作人力資源管理系統-5 3.10 製作人力資源管理系統-6
3.10 製作人力資源管理系統-7 3.10 製作人力資源管理系統-8

第四章 資料庫

4.1 構建ASP.NET的開發環境-1 4.2-1 創建數據鏈接 4.2-2 創建數據鏈接
4.2 常見數據鏈接-1 4.2 常見數據鏈接-2 4.3-1 製作基本ASP.NET動態網頁
4.3-2 製作基本ASP.NET動態網頁 4.3 製作基本ASP.NET動態網頁-1 4.3 製作基本ASP.NET動態網頁-2
4.3 製作基本ASP.NET動態網頁-3 4.4 在頁面之間傳遞信息 4.5 製作添加,更新和刪除頁面

相關視頻教程

·精華！ASP互動視頻教程 ·Dreamweaver 超全面視頻教程 ·ASP超速入門視頻教程
·入門級HTML基礎視頻教程 ·Dreamweaver輕松上手教程 ·Dreamweaver實例視頻教程

⑤ 本人想學PPT製作，那個網站有這樣的教學素材和視頻教程呢

PPT名師教程，色彩常識及ppt色彩搭配 ，PPT教程集錦， 網路一下：pptmuban com

⑥ 怎麼製作網上教學視頻

看你具體要教學什麼內容了！如果你只是想製作一個普通的微課視頻，可以用專一般的屏幕錄制軟體屬或微課工具，這里推薦「微講師多媒體教學盒」，是一款老師可自己獨立快速製作自己微課的工具，只需要一台筆記本電腦，就可以自己一個人獨立進行微課錄制，後期編輯也特別簡單。
如果你要是想要將那種課堂教學過程實錄下來，再做成視頻上傳到網站上，供學生學習的那種教學視頻，可以採用「微講師多媒體教學盒」，這是一款集無線麥克、無線手寫板、激光手寫筆、高清攝像頭為一體的多功能教學設備，老師只需拿著無線手寫板就可站在學生中間遠程操作電腦、講解課件並進行無線板書書寫，通過教室現有的投影機或者觸摸一體機進行成果展示，並且還可以直接在老師的PPT課件、動畫、視頻等資源上進行標注；通過該系統的錄制、編輯功能，可以將老師的課堂教學過程及講稿同步錄制下來簡單編輯就能生成一個教學視頻，非常實用。

⑦ 如何製作自己的網站和網頁，求Dreamweaver 製作教學視頻

這類的教程視頻網上很多，你可以直接在網上搜索你要學習的內容就會有很多的視頻和圖文教程。跟著做就行了、

⑧ 用JSP製作一個教學網站需要安裝哪些軟體

dreamweaver主要是網頁界面設計的,jsp是利用JAVA語言來開發網頁的,是SUN公司所設計出來的語言,同時JSP在網頁中用版JAVABEAN可以使很權好的使網頁的動態部分和靜態部分分離出來,也比較利於以後的維護.ASP是MICROSOFT公司推出的網頁的開發語言,與JSP相對,也能實現網站中的網頁靜態和動態分離.JDK是開發工具,JAVA DEVELOP KIT,TOMCAT WEB伺服器是運行JSP文件必須的,MYSQL資料庫伺服器的話,如果你JSP里需要調用資料庫,那就需要安裝.ECLIPSE是JSP IDE開發環境,JSP的開發環境還有很多,不只ECLIPSE一個.

⑨ 求教學一個div+css網頁製作

<!doctypehtml>
<html>
<head>
<metacharset="utf-8">
<title>教學</title>
<style>
*{
margin:0;
padding:0;
}
.wrap{
width:960px;
margin:0auto;
}
a{
text-decoration:none;
}
.top{
width:100%;
height:5px;
background-color:#039;
}
.header{
width:100%;
height:200px;
position:relative;
background-color:#6F3;
}
.header.logo{
color:#000000;
margin:20px100px;
}
.headerp{
position:absolute;
right:0;
top:0;
background-color:rgba(0,0,0,.3);
}
.headerpa{
margin:5px10px;
display:inline-block;
}
.headera{
margin-left:15px;
color:#ffffff;
}
.nav{
height:30px;
background-color:#C60;
}
.navul{
overflow:hidden;
width:90%;
margin:0auto;
}
.navulli{
list-style:none;
float:left;
width:9%;
text-align:center;
border-right:1pxsolid#ffffff;
}
.navullia{
line-height:30px;
color:#ffffff;
}
.navullia:hover{
color:#F00;
}
</style>
</head>

<body>
<divclass="top">
</div>
<divclass="wrap">
<divclass="header">
<ahref="#"class="logo">logo</a>
<p>
<ahref="#">加入收藏</a>
<ahref="#">設為首頁</a>
</p>
</div>
<divclass="nav">
<ul>
<li><ahref="#">首頁</a></li>
<li><ahref="#">技術文章</a></li>
<li><ahref="#">行業動態</a></li>
<li><ahref="#">IT行業</a></li>
<li><ahref="#">資源下載</a></li>
<li><ahref="#">酷圖欣賞</a></li>
<li><ahref="#">程序開發</a></li>
<li><ahref="#">設計資訊</a></li>
<li><ahref="#">論壇</a></li>
<li><ahref="#">素材下載</a></li>
<li><ahref="#">English</a></li>
</ul>
</div>
</div>
</body>
</html>

大概就是這個意思，要想精確製作，都是需要psd源文件的。

⑩ 想學習網頁的製作，介紹個教學視頻吧！

雖然我對這類不專業，但還是說說我的一些看法。

就像你現在看到的頁面中，有藍色的字、有黑色的字，有大字、有小字 ，有框框、有按鈕，有圖片……

CSS就是決定頁面的風格，就像不同顏色、不同大小的字，框框的顏色……

DIV就是決定頁面的布局，就像網路欄目在最上面，右上角是個人信息，下面是問題，最下面是推薦問題……

現在我把它們都去除了，就變成了如圖片這樣的樣式：而這也就是最簡單的html了，裡面有內容，有鏈接，html也可以定義風格，只是沒有CSS那麼豐富：

PHP的作用我舉一些例子：

你登錄時會輸入密碼，而php就會把密碼傳入到伺服器端進行驗證，如果相同就登錄成功；

提問時間，回答時間都會通過php傳入到伺服器存儲起來；

還有瀏覽次數，就像你打開了這個網頁，php就會自動傳輸一個信息讓資料庫+1。

你的登陸IP，登錄時間，都是通過php來判斷和傳輸的……

資料庫的作用就是存儲數據：

比如存儲你的ip，你累計在線的時間，你的文章，你的個人資料……

js的作用：

比如你在某些網站看視頻的時候，會有關燈的提示，點一下頁面就會變黑；

右邊的箭頭，點一下就會返回到頂部；

你看圖片時上一張和下一張的切換……

php和asp,jsp的作用是一樣的，分不同情況使用。

另外，建議你初學不要使用Dreamweaver這類軟體，你要先理解和熟悉它們的作用和方法，而不是自動化，所以用記事本寫就行了。

學習的網站：http://www.w3school.com.cn