Abstract:ThedevelopmentofInformationtechnologyimprovesEducationalInformatization.Sounderthenetworkco下面是小編為大家整理的網頁設計與制作【五篇】【優秀范文】,供大家參考。
網頁設計與制作范文第1篇
關鍵詞:專題學習網站;網頁設計與制作;設計
中圖分類號:TP393 文獻標識碼:A 文章編號:1009-3044(2009)15-4089-02
The Design of Subject Learning Webside: Web Design and Making
HUANG Yi-bao
(Gaozhou Normal Subcollege of Maoming University,Gaozhou 525200,China)
Abstract: The development of Information technology improves Educational Informatization. So under the network condition, the buiding of educational resources are the important parts of Educational Informatization. Subject Learning Website represents the importance of the buiding of educational resources. This paper takes the course Web Design and Making ( Gaozhou Normal School of Maoming College) as an example, presenting the design of Subject Learning Webside, and mostly expatiating three aspects: demanding analysis, system design and function design.
Key words: subject learning Webside; Web design and making; design
1 專題學習網站的概述
專題學習網站是指在互聯網絡的環境下,圍繞某門課程或多門課程密切相關的某一項或多項學習知識點,有機地結合起來形成專題,讓學習者進行廣泛深入研究的資源型學習網站。它可以用來存儲傳遞加工和處理教學信息,能讓學生進行自主學習和協作學習,并對學生的學習情況提供在線反饋。根據這些理論,專題學習網站主要包括專題結構化知識庫、專題資源庫、專題協作學習工具和專題學習評價四大部分內容[1]。
2 專題學習網站的需求分析
《網頁設計與制作》在本校是大專學生比較感興趣的學科,并且本學科具備操作性強、個性突出、資源廣泛等特點,有利于引導學生的學習主導性和協作性。
2.1 專題功能需求分析
根據專題學習網站的總體要求和本學科的特點,本專題學習網站主要實現以下功能:
1) 資源管理功能。按專題學習網站的理論要求和教學需要,資源管理功能必須能對資源進行查詢、修改、刪除、分類、整合等資源處理功能,同時還要提供資源的搜索和資源下載功能。2) 交流討論功能。向用戶提供一個交流討論的空間,可以對學習內容的交流討論,也可以上傳與學習相關知識或問題或作品進行交流討論。3) 評價展示功能。包括作業批改、作品展示、自我測試、競賽投票等在線評價。4) 用戶管理功能。包括專題學習網站的資源管理用戶、學習留言用戶和專題論壇用戶。根據不同的需要設置不同的權限,以使師生共同使用和合作管理。
2.2 專題角色需求分析
功能的需求主要來源于角色,不同的角色有著不同的需求。本專題學習網站的角色主要有兩類:學習者和管理者。各類用戶有自己相應的權限,登錄后只能訪問自己權限內的功能模塊。
1) 學習者的功能需求。學習者主要是利用專題網站進行學習活動,包括查看專題知識與相關資源、交流心得與討論問題、提交作品與上傳資源、測評反饋與投票評價。2) 管理者的功能需求。管理者主要是利用專題網站向學習者提供學習的資源與協作的場景,包括資源管理、討論管理、評價管理和用戶管理。
3 專題學習網站的系統結構設計
3.1 專題學習網站系統框架設計
根據需求分析中的專題網站功能分析,可以把專題網站分為網頁基礎、動態技術、數據庫、輔助工具、作品展示、專題論壇等模塊,網站的框架結構設計如下 :
1) 專題結構化知識:網頁基礎、動態技術、數據庫、輔助軟件。2) 專題資源庫:拓展資源、相關鏈接、強化訓練、素材集錦。3) 專題協作學習工具:學習留言、專題論壇。4) 專題學習評價:作業批改、自我測驗、作品展示、競賽投票。
3.2 專題學習網站系統程序流程設計
根據需求分析中的專題網站角色分析,可以把專題網站分為前臺應用和后臺管理兩個模塊,網站的程序流程圖(如圖1所示)如下。
3.3 專題學習網站體系結構設計
專題學習網站作為管理信息系統又稱MIS(Management Information System)的一種,根據功能需要,主要包括前端應用程序以及后臺數據庫的建立和維護的后臺管理。要把前端應用程序與后端的數據庫聯系起來,即給用戶提供數據庫相應信息和將用戶相應信息存入數據庫等,本專題學習網站基于面向互聯網和用戶機要求不高的基礎上,采用的體系結構為B/S。B/S是Brower/Server的縮寫,客戶機上只要安裝一個瀏覽器(Browser),服務器安裝數據庫。瀏覽器通過Web Server 同數據庫進行數據交互。那樣通過用戶的登錄,以及相應的權限,就可以實現在遠端對系統的瀏覽、查詢和修改?；贐/S的體系結構得出專題網站運行模式包括有客戶機、應用程序服務器、數據庫服務器三部分[2],其各部分運行工作如下:
1) 客戶機:屬于表示層,用于界面的入導,接受用戶輸入,然后向應用服務器部分發送服務請求,最后顯示處理結果。2) 應用程序服務器:屬于業務邏輯層,執行業務邏輯,向數據庫服務器發送請求。3) 數據庫服務器:屬于數據存儲層,執行數據邏輯,運行SQL式存儲過程。
4 專題學習網站的功能設計
專題知識資源的輸出應用,即前臺顯示主要是依托動態技術和數據庫技術的結合,根據用戶需求提供一定的參數,動態地從數據庫提取數據,并自動整合為網頁形式輸出。而作為專題學習網站的管理部分,即后臺管理則是通過管理平臺與數據庫聯合起來實現的。
4.1 專題學習網站資源的形成
為了達到為師生提供結構化的專題知識的需要,必定要將學習內容相關的文本、圖形、動畫、視頻等資源按一定的教學策略進行分類、組織、入庫,以此達到知識結構化重組,形成了以網頁形式的專題網絡教學課件[3]。并且提供上傳、下載、維護、搜索等資源管理與應用功能,以此形成專題資源庫。除了設計組在初期完成的教師教學資料和收集的資源外,網站的管理員或授權的教師甚至學生根據教學的需要和使用的反饋信息,能不斷地對專題知識或專題資源庫更新、調整。這是一個不斷循環、動態調節的資源生產過程。根據數據庫設置的角色,用戶可以擁有相應的添加、修改、刪除、重組資源等權限。并且還設置了審核權,這個權限要賦予教學的專業教師負責,以確保資源的正確與有學習意義的。
4.2 專題知識的結構化重組
使用專題網站教學,既要學習專題知識,又要學習有關聯且經過整合的拓展知識;既可以根據個人愛好或能力自主選取相應的其它知識學習,還可以進行相應專題的實踐訓練?；谶@些目的,專題網站必須能夠提供有針對性的自主探究學習,才能調動學生的主導性和能動性。由于本專題學習網站采取了網頁設計的動態技術和數據庫技術,所以除了對專題知識的查詢、添加、修改等外,還可以對已有的資源進行重組整合。例如,在教學網頁圖片的應用時,給學生提供了Fireworks軟件的拓展學習資源,那樣除了可以根據教學進程Fireworks的教程外,在學習完Fireworks后,可以將的所有Fireworks教程,重組成一個資源。只需要將所有Fireworks教程根據教學順序,將其超鏈接集合成一個新的資源到專題知識欄目,如此可以方便學生的學習。同樣可以對各章節或各年級學習遇到的問題或教師一個階段的教學心得等,進行結構化重組,有利于不同程度的或不同級別的學生學習和教師對教學的改進。
4.3 專題協作學習工具
專題學習網站為師生提供協作學習的空間,既利于學生之間的交流,共同學習相應內容,也利于學生對相應學習內容反饋問題和教師根據反饋進行調整或解決問題。同時,對學生以外的網頁愛好者開放,更利于學生與互聯網上的網頁愛好者交流,以使知識面更廣和交流更深刻。在本專題學習網站,專題協作學習工具主要包括有學習留言和專題論壇。學習留言主要是專題知識后的留言板,在每一個資源后都給學生提供留下學習心得或需求信息的空間,以便于其他學生的便捷認識或教師掌握教學程度。教師對學習留言擁有整理和回復權,以確保信息的有意義和回復相關問題。專題論壇主要為學習者之間或教與學之間進行討論、問答、交流而進行的協作、探討學習的交流工具。根據《網頁設計與制作》學科特點,將論壇分為新手上路、CSS美化、圖片加工、動畫制作、數據庫、動態技術、素材源碼等欄目,可以讓師生分享教程和學習心得,探討相關問題。除專任教師要管理論壇外,還可以在各欄目設置學生版主,這樣既讓問題得到及時解決,也讓資源得到及時更新,還可以加強資源審核。
4.4 專題學習評價
包括學生提交作品、教師評改作業、學生互評、學生自我測試、競賽投票等功能,根據評價內容不同,有打分數等級的評價,也有詳細評析的評價,也有公開投票的評價。主要是要實現到師生能進行評價、能看到評價、能交流評價、能反饋評價,只有這樣才能達到評價的最終目的。首先,通過收集與學習專題相關的思考性問題和總結性考察的評測資料,學生完成相應專題或階段或知識點后,可以進行自我測試,以檢測個人掌握程度;其次,學生在此提交作業,教師對作業打分或評析;再次,學生通過網絡提交作業或競賽作品,教師對作業或競賽作品進行展示,也給學生之間提供了比較和交流,從而進行他人評價和自我評價。
5 結束語
專題學習網站實際上就是一本拓展的課本和一個開放的課堂,有著多元的內容和多樣的評價,既使師生學習的空間得到了拓展,也滿足了學生因材施教的發展。但正因為如此,專題學習網站不能成為純粹的資源收集網站,更應該達到鼓勵和引導自主學習、協作學習、創新學習的目的。因為不管是教師在教的過程,還是學生在學的過程,都不僅是一種利用資源的過程,更是一種創新資源的過程。因此,專題學習網站的設計要遵循整合性、自主
性、交互性、開放性等原則。在設計中注重把主動權交給用戶,不要把學習的模式或內容固定,讓用戶在教與的基礎上,既能學習基礎知識和拓展知識,又能討論交流和相互評價,更能夠在教學過程中創造資源。
參考文獻:
[1] 謝幼如,余紅,尹睿.基于專題網站的開發性學習模式的效果分析[J].中國電化教育,2004,1.
網頁設計與制作范文第2篇
關鍵詞：
SQL Server；
教學平臺；
Dreamweaver；
ASP
中圖分類號：TP311 文獻標志碼：A 文章編號：1006-8228（2013）12-65-02
Design and implementation of teaching websites
Gao Yaxia1，2， Zou Hairong3
（1. Shaanxi University of Science & Technology， Xi"an， Shaanxi 710021， China；
2. Shaanxi Commercial School；
3. Shaanxi University of Technology）
Abstract：
In order to improve teaching efficiency and spread good teaching resources and information in a larger scope but a short period of time， the network teaching platform is developed using Dreamweaver tools and ASP technology. A dynamic web page is applied at the front desk in teaching website， and SQL Server 2005 is used in the backstage data base to satisfy large amount of consumer. After testing and operation of the site， the functions such as answering of the network， online discussions， assignments and learning announcements， uploading and downloading courseware， teaching management and user management are realized in this teaching website， which provides an efficient and convenient teaching environment on web.
Key words：
SQL Server；
teaching Website；
Dreamweaver；
ASP
0 引言
隨著計算機和信息技術的飛速發展，網絡教學也在快速發展和普及。教師與學生都迫切需要一種簡便高效的教學方式，網絡教學的出現正好滿足了人們的這種需要。隨著網頁技術的發展成熟，人們對網頁的要求也不再是文字、圖片的簡單堆砌和單調枯燥的內容，而是實時性、交互性和豐富性，使用動態技術的網頁越來越受歡迎[1]。本文介紹采用ASP動態網頁技術結合SQL Server 2005數據庫構建一個“網頁設計與制作”課程教學網站。學生通過訪問該網站，可以瀏覽/下載課件、在線作業、在線交流與討論等；
教師可以上傳課件、在線答疑等；
管理員可以修改、刪除、添加、查詢用戶信息、進行教程管理等。系統發揮了ASP技術顯示于客戶端和運行于服務器端，以及保護用戶資料的安全性等特性。
1 系統需求分析
利用互聯網技術進行網絡教學，可以跨越時空限制，最大范圍地傳播資源，具有投資少、覆蓋面廣、受益人多和互動性強等特點，使辦學單位減少了人力和物力的消耗，并為廣大學子提供了豐富的資源?？梢?，網絡教學為教育事業開辟了廣闊的前景。由于在網絡中易于實現資源共享，學生可以將個人問題轉化為公共問題，并借助集體智慧解決個人問題，學生在網絡中容易找到志同道合的學友，各自就共同感興趣的問題發表自己的看法，有益于培養學生的信息素養和解決問題的能力等[2]。教師可以在網絡平臺成為導師，接受或選擇學生的輔導請求，起到指導和督導作用。通過對在校大學生和教師調查發現，計算機網絡教學因其互動性強、教學效果好等優勢成為人們的新需求。網絡教學網站系統的開發，主要是為用戶設計和開發一個便于學習與交流的網絡教學平臺，以提高教學效率。
2 開發技術和方法
本網站教學平臺采用目前流行的B/S（Brower/Server）結構。整個網站可以運行于Windows 2003 Server/Windows XP平臺上，系統前臺使用流行的工具和腳本語言Dreamweaver HTML語言和ASP技術開發，后臺采用當前最流行且性能較高，數據庫維護與管理性能很強大的SQL Server 2005。B/S是隨Internent技術的興起，對C/S（Client/Server）結構的一種變化或者改進的結構，在這種結構下，用戶界面完全通過www瀏覽器實現，一部分事務邏輯在前端實現，但主要事務邏輯在服務器端實現[3]。系統充分發揮了ASP技術顯示于客戶端、運行于服務器端，以及保護用戶資料的安全性等優點。
3 “網頁設計與制作”教學網站的設計
3.1 系統功能設計
從教學用戶的角度，網頁設計與制作課程教學網站可劃分為教師、學生和管理員三大功能模塊。具體內容如表1所示。
表1 系統用戶與功能設計
[分類＼&模塊＼&使用者＼&教師＼&查看短消息＼&教師＼&學習及作業公告＼&教師＼&上傳課件＼&教師＼&網絡答疑＼&教師＼&討論交流＼&教師＼&學生
＼&查看短消息＼&學生＼&瀏覽課件＼&學生＼&查看作業公告＼&學生＼&網絡提問＼&學生＼&討論交流＼&學生＼&管理員＼&消息管理＼&管理員＼&教學管理＼&管理員＼&討論管理＼&管理員＼&用戶管理＼&管理員＼&]
3.2 數據流程
3.2.1 系統總流程
在網站首頁進行用戶賬號的登錄時，系統接收到用戶賬號后，首先與數據庫中存放的賬號進行權限分析和匹配，若賬號相匹配，則進入相應權限的用戶模塊；
若賬號不匹配，則提示用戶操作錯誤，返回登錄界面。系統的總流程如圖1所示。
[用戶登錄][賬號是否正確？] [驗證權限] [具體模塊][數據庫] [N][Y][學生][教師][管理員][結束]
圖1 系統流程圖
3.2.2 后臺管理流程
管理員用戶具有對整個系統的管理權限，除接收短消息功能外主要實現管理學生和教師模塊的內容，課件管理可在一個特定的時間內刪除數據庫里的課件記錄和站點內相應的文件，這樣可節省站點的空間；
用戶管理可針對目前系統的工作量適當地添加或刪除系統管理員，也可更改用戶賬號；
在討論管理區內管理員可刪除一些過期的或惡意的帖子，也可針對一些話題發帖；
在教學管理區內可對學生、教師、學院、專業、班級等進行編輯、修改、添加和刪除。詳細流程如圖2所示。
[管理員登錄][接收短消息][課件管理][用戶管理][討論管理][教學管理][收信息][發信息] [學生管理][教師管理][學院管理][專業管理][班級管理][課件管理][開課管理][操作完成] [數據庫]
圖2 后臺管理流程圖
4 “網頁設計與制作”教學網站的實現
4.1 數據庫設計
數據庫是網站信息管理的后臺支持，存儲著前臺頁面所需要的信息，在信息管理系統中有著很重要的地位。數據庫設計的好與壞，直接影響到網站系統的運行效率。良好的數據庫設計，可以提高數據信息的存儲效率，保證數據信息的完整性和一直性。同時，一個合理的數據庫結構有利于程序的實現。本網站系統使用數據庫SQL Server 2005建立教學（teaching）數據庫。后臺數據庫的連接采用字符串連接，其連接文件的代碼如下：
ctrConnection="Driver={SQL Server}；
server=（local）；
uid=wy；
pwd=123；
database=teaching；
" //連接字符串
set conn=server.createobject（"ADODB.CONNECTION"）
//創建連接對象
conn.open ctrConnection %> //打開數據庫
4.2 網站主要頁面實現
4.2.1 網站主頁面
課程教學網站主要是實現教師、學生在線學習與交流的良好平臺，進入系統首頁就能夠方便的選擇用于學習的資源信息等內容。資料列表模塊，顯示學生可以自主學習的所有教學資料信息；
網上答疑模塊，提供師生在線交流、學習和討論的平臺。主頁運行效果如圖3所示。
圖3 網站主頁界面
4.2.2 網站管理頁面
網站后臺管理系統能夠實現教師、學生、課件與教學資源及用戶信息的管理等功能。系統管理員登錄頁面的運行效果圖4所示。
圖4 管理員登錄頁面
5 系統功能測試
為了提高網站開發和設計的效率，該教學網站使用目前流行的B/S模式[5]。整個網站可以運行于Windows 2003 Server/Windows XP平臺上，系統前臺采用先進的Dreamweaver、HTML語言工具和ASP技術開發。后臺數據庫采用當前最流行且性能較高，數據庫維護與管理性能很強大的SQL Server 2005實現。通過對網站系統的基本信息模塊，消息管理模塊、課件管理模塊、上傳下載課件模塊，作業公告、BBS模塊與教學管理等功能模塊（學生管理，教師管理，課程管理）進行系統測試，結果表明，所設計的功能都能實現，系統性能良好，能夠滿足用戶的實際需求。
6 結束語
本教學網站平臺的開發和應用，實現了教學資源的訪問、課件上傳下載、師生互動、學習交流和網上答疑討論等功能；
使優秀的教學資源和交流信息能在大范圍、短時間內傳播。給教師和學生提供了一個方便、高效的網上教學與學習平臺，從而提高了學校教學效率與教學質量。
參考文獻：
[1] 周興華，周新偉，張軍等.ASP+SQL Server數據庫開發與實例[M].清
華大學出版社，2008.
[2] 蔣理.動態網頁設計實用教程[M].西安電子科技大學出版社，2007.
[3] 王萍萍，李曉娜，孫更新.ASP+Dreamweaver動態網站開發[M].清華
大學出版社，2008.
[4] 韓培友，董桂云，柳虹.數據庫技術[M].西北工業大學出版社，2008.
網頁設計與制作范文第3篇
關鍵詞：網頁設計與制作 網頁與網站設計原則 教學改革
中圖分類號：G71 文獻標識碼：A 文章編號：1672-3791（2014）03（a）-0209-02
內蒙古科技大學是地方高等院校，畢業生大多到企業從事設計、生產、管理等技術工作，故人才培養定位于“工程實施型人才”，要求學生具有扎實的基礎理論和專業基礎知識，能夠教深入地掌握專業知識和流行生產技術，具有較強的工程實施能力，因此內蒙古科技大學的畢業生具有“上手快，留得住，后勁足”的特點，畢業生就業率連續多年位居自治區高校前列，被國務院授予“全國就業先進工作單位”光榮稱號。該校的計算機科學與技術專業在學校人才培養思想的指導下完成了專業定位，重新制定了人才培養方案和課程體系，在此背景下，計算機科學與技術專業開設了《網頁設計與制作》課程。
1 《網頁設計與制作》課程現狀及存在的問題
根據企業用人標準及對畢業生的回訪調查，總結出了網頁設計師的從業要求：具備優秀網站設計能力，能綜合運用各類軟件設計視覺創意網站，能獨立進行平面網頁的創意設計，具有良好的藝術觸覺和美術色彩搭配功底，深刻理解web標準，熟悉CSS+DIV模式，能手寫XHTML及CSS樣式代碼，懂得javascript應用，精通設計與網頁設計軟件，如photoshop、fireworks、dreamweaver等，能獨立完成網站的規劃和靜態頁面制作?？梢钥闯鲆粋€優秀的網頁設計師能夠對網頁的構成元素進行藝術規劃和創造性思維活動，通過網頁制作技術實現網頁設計的目的，達到了藝術與技術的和諧統一。[1]為了培養大一新生對計算機專業的學習興趣和熱情，許多高校包括我校在內，將《網頁設計與制作》課程規劃為必修課安排在大一下學期開課，目的通過本課程所見即所得的特點，激發新生對計算機專業的學生興趣和熱情?？稍谝酝谋菊n程教學內容安排上，重網頁制作技術的講授，對網頁設計相關知識涉及甚少，即便學生掌握了XHTML、css+div、JavaScript等網頁制作技術，可沒有遵循網站與網頁設計原則，致使學生制作出來的網頁粗糙拙劣，毫無美感可言，這樣的教學安排，難以培養學生的專業學習興趣和熱情。
2 《網頁設計與制作》課程改革思路
以適應企業需求為導向，以培養學生網頁設計能力為根本，以項目教學和案例教學為手段，以實際網站為目標，進行課程內容的編排和改革。[2]緊跟當前市場需求，及時對教學內容作出調整，特別強調網站與網頁設計原則理論知識，在講授網頁制作技術的過程中注重網頁設計基本理論與基礎知識的滲透，努力提高學生的審美情趣，在潛移默化中讓學生形成“技術為設計服務”的思想，讓這種思想指導其網頁設計與制作行為，最后將這種認識轉換為能力，最終體現在其網頁設計作品上。
3 《網頁設計與制作》課程教學改革方案
以“技術為設計服務”為指導思想，以項目教學和案例教學為手段，通過項目驅動，[3]讓學生在32學時講授+32學時上機的學習過程中，獨立完成上機項目。上機項目按照具備知識水平由易到難，需求由低到高，設計方案由局部到整體的梯度進行，符合教育教學的基本規律。結課后，以一個綜合項目的開發作為對學生學習效果的最后的評價。綜合項目的開發，實際上是學生實踐和獨立探究的過程，在此過程中，增長了學生的知識，培養了學生創造性思維和發現問題、解決問題的能力。
3.1 教學內容的編排
按照WEB標準，網頁由三部分組成：結構（structure）、表現（presentation）和行為（behavior），因此，在教學內容的編排上，將《網頁設計與制作》課程分為四大模塊進行講授和實踐。分別為：網頁與網站設計原則、XHTML基礎知識、css+div、javascript。
網頁與網站設計原則模塊：在本課程的教學過程中處于指導地位和核心地位。通過該模塊的教學，首先讓學生掌握網站的3C設計原則，即簡潔、一致性、對比度。通過一些優秀網站設計案例的展示，使學生對3C設計原則有初步的體會和認識。其次讓學生掌握頁面設計要點，包括：精心組織的內容、格式美觀的正文、和諧的色彩搭配、較好的對比度、生動的背景圖案、頁面元素大小適中，布局均勻、不同元素間的留白等。通過優秀網站設計案例的講解，讓學生初步體會每一個頁面設計要點。在隨后的課程講授及上機實踐中，通過具體案例，強調網頁與網站設計原則，讓學生對3C設計原則及頁面設計要點有更深的體會和認識，在潛移默化中，學會用網頁與網站設計原則指導自己的網站制作行為。
其他三個模塊為《網頁設計與制作》課程的技術范疇。通過XHTML、css+div、javascript的講授及配合各類上機項目的實踐，使學生具備認識網頁創建站點應用網頁元素對網頁布局應用CSS美化頁面給網頁添加動態行為的能力。最后以網頁與網站設計原則為指導，設計開發一個綜合項目。該綜合項目要求要有鮮明的主題，內容與形式統一，個性突出、布局合理、配色美觀?？梢钥闯?，通過本課程技術層面的學習，為學生奠定了制作綜合項目的技術基礎，而其掌握的網頁與網站設計原則又將反作用于其網頁制作的行為上，提高其網頁制作水平，逐步達到技術與設計的和諧統一。
4 《網頁設計與制作》課程考核體系
本課程的考核方式為考察，主要考察學生的實踐能力及學生網頁與網站設計原則的掌握情況。將平時表現，上機項目完成情況、綜合項目的開況相結合，從而得出學生的最終成績。
考核方案設計如下。
平時表現10分：包括上課出勤，上機出勤。有課堂主動回答問題的額外加3分。
上機實驗40分：內容包括：包含文本、圖像、超鏈接、多媒體的簡單網頁設計（3分）；
包含表格的簡單網頁設計（3分）；
包含表單的簡單網頁設計（3分）；
利用框架進行簡單網頁設計（3分）；
利用CSS樣式表美化網頁（10分）；
利用表格進行網頁布局（3分）、利用DIV進行網頁布局（5分）、利用DIV嵌套表格進行網頁布局（5分）；
利用javascript實現網頁特效（5分）。
綜合項目開發：通過本課程掌握的網站設計原則及制作方法，完成綜合項目的設計與制作。（50分）
設計要求（25分）：需求分析充分，欄目設計合理，功能完善，網站深度不低于3級別（5分）；
主題鮮明，頁面布局合理，配色和諧，形式美觀，風格統一（10分）；
logo、banner的設計應突出主題，與頁面風格相協調（5分）；
要有便捷的導航信息。網站內容豐富，具有良好的可讀性（5分）。
技術要求（25分）：站點文件組織規劃合理，主頁必須以index命名（2分）；
代碼書寫符合XHTML語法規范（3分）；
用Div對網站進行總體布局，局部布局可用表格（6分）；
用css進行頁面的美化，對樣式的定義統一寫在外部樣式表中（6分）；
多媒體元素運用得當，適合網絡傳輸（3分）；
頁面中包含有JavaScript實現的特效（5分）。
5 結語
改革后的《網頁設計與制作》課程重視學生網頁設計能力的培養，在每一次的教學實踐環節中，都在強調網頁與網站設計原則，在潛移默化中讓學生學會用網頁與網站設計原則來指導自己的制作行為。在此原則的指導下，74名學生完成的綜合項目開發作品中，符合網站與網頁設計原則的作品有62.3%，其中優秀作品比例為 12.6%，較未實行教改前學生的設計與制作水平有了明顯提高。實踐證明，以“技術為設計服務”為指導思想的《網頁設計與制作》課程教學改革實在可行，提高了學生網站設計與制作水平，為其以后的就業打下了良好基礎。
參考文獻
[1] 邵小蘭.淺析網頁設計中的藝術設計[J].科技資訊，2011（15）：14.
網頁設計與制作范文第4篇
關鍵詞：傳統教學；
學即能用；
CSS
中圖分類號：G64文獻標志碼：A文章編號：2095-6401(2016)02-0068-01
作者簡介：侯敏（1979-），女，漢族，陜西西安人，講師。研究方向：軟件工程，數據庫
互聯移動終端的大面積推廣，使得掌握網頁制作技術的人才在各個行業里都成為必不可少的需求；
同時，地方普通高校為社會服務的使命感在不斷增強，如何培養出“學即能用”的人才，使之在短時間內掌握主流的網頁設計技術，提高站點訪問量，是這門課程課堂教學效果進步的體現。
一、技術背景與課堂教學要求
（一）Internet發展歷程
Internet經歷了從Web1.0到Web3.0的迅猛發展。Web1.0是靜止、單向、被動的；
Web2.0則為用戶開設了主動權，使得用戶和網站可進行雙向信息互動；
Web3.0提升了用戶的主動權，用戶可對頁面的多種元素（顯示、色彩、像素、框架等）按需設置，訂制專屬的功能模塊，整合數據資源，適用于電腦、手機、PDA等多終端平臺定制。
（二）傳統的網頁設計與制作課程內容一般情況下，高校開設的網頁設計課程從教學內容上可劃分為兩大塊：
1.相關知識介紹。網站的概念、基本元素及頁面等相關知識的介紹。
2.應用軟件的使用。介紹使用最多的Dreamweaver系列網頁制作工具，使學生掌握布局（表格、層、框架、模板等）、超級鏈接、表單和幾種特效。隨著互聯網的全面推廣和“學即能用”的需求，以上內容已不能滿足互聯網時代與時俱進的特點。最關鍵的問題在于：課堂學到的知識是否馬上就能得到應用，是否與目前社會上專業的網頁制作公司的技術規格保持一致。因此，本門課程的改革勢在必行。
二、“服務于地方”教學內容的改革
（一）教學內容改革
內容改革是課程改革的首要環節。關于什么是關鍵內容，什么是次要內容，筆者走訪了本地專業網頁設計公司中企動力的設計總監馬女士，通過對她的訪談，了解到時下主流的網頁設計公司所涉及到的技術規范，對本?，F階段的教學內容做了必要的調整，簡化了表格布局頁面、框架設計等已被淘汰的陳舊技術的授課內容，有選擇地介紹了網頁交互特效及表單的應用，加強了網頁美化工具、HTML語言及CSS的學習內容。改革后的課程主要分為六大模塊：網頁和網站的基礎知識、網頁美化工具（Photoshop或者Fireworks）、HTML語言、網頁開發工具的介紹、DIV+CSS、動態網頁技術。首先，通過具體的例子闡明網頁、網站的定義，頁面的布局類型（主要是盒模型）、整體造型及配色方案的相關知識；
其次，介紹網頁美化工具圖片處理工具（Photoshop或Fireworks）的使用，學生可用其設計頁面元素，加強頁面的視覺效果與美觀性，提升站點的專業度；
再次，介紹HTML的基本語法結構和語句，使學生熟練掌握其主要標簽的使用（傳統的教學模式對這一部分的內容有所忽略）。
實踐證明，學生若不熟悉HTML的語法構成，學習DIV+CSS這一主流的網頁布局模式就會相當吃力。當然，對于非專業學生而言，學習一門語言，即便是文本標記語言，由于其本身對計算機系統相關知識的欠缺，授課會比較困難，學生也學得辛苦，但這又是一個必要的過程，其所占用的時間比較長，需要設計大量實例，反復練習才能掌握。之后介紹開發工具，重點是要理解頁面的代碼模式和設計模式，而DIV+CSS則是本門課程的重頭戲，由于學生對代碼有種天生的恐懼，所以，在建立CSS時又以開發工具建立為主，修改程序為輔。最后簡單提及動態網頁技術。由于課時限制（32節），本課程主要講授靜態網頁制作。靜態網頁技術分為傳統技術和新技術。傳統課堂教學內容重點是布局表格、框架、模板等，而目前主流的網頁制作公司則主要應用DIV+CSS。所以，對于陳舊的技術簡單介紹即可，而把DIV+CSS作為布局的主要技術進行講解。由于這些內容需要學生對代碼部分比較熟悉，所以，在課時中增加了相應的HTML的基本語法結構和語句的介紹，并對主要標簽的使用熟練掌握。
（二）實際授課效果
筆者今年為設計和思政兩個專業的學生授課。設計專業的學生已經開設了PS，有一定的設計基礎，所以，課程內容改革中的第一部分可以省略；
思政專業的學生沒有圖片處理基礎，筆者在授課過程中有意加強了這部分內容，講授簡單的圖片處理方法和文字特效工具。實踐證明，學生有追求新知識的欲望，基本能做到學以致用，并反饋到最終的作品中。往屆學生的作品更像電子小報，而今年通過課程內容改革的學生作品雖不完美，但在形式內容上更接近Internet的正規網站，教學效果良好。針對我校提出建立培養服務于地方應用型人才的本科院校，傳統的網頁設計與制作課程必須響應時代號召，更新教學內容與方法。本文僅供從事該課程教學的教師參考。
參考文獻：
網頁設計與制作范文第5篇
（福建廣播電視大學晉安校區 福建 福州 350003）
摘要：根據多年對“網頁設計與制作”課程的教學探索，提出“課程案例”這一新概念，并設計開發出一個學生既熟悉、又感興趣的“課程案例”——班級網站，讓學生在模仿再開發該案例網站的過程中學習課程知識，從而掌握本課程的知識和運用技能，達到教與學的良好效果。
關鍵詞 ：網頁設計與制作；
課程案例；
班級網站
中圖分類號：G712 文獻標識碼：A 文章編號：1672-5727（2014）11-0093-03
作者簡介：王淑云（1965—），女，福建福州人，福建廣播電視大學晉安校區高級講師，研究方向為計算機軟件。
中職生的共性就是對缺乏學習興趣。筆者通過多年的課堂教學體會到：如果有一套行之有效的既適合中職生實際水準、又貼近他們學習生活、能激發他們學習興趣的案例貫穿于整個課程教學，就有可能解決這個問題?；诖?，筆者提出了“課程案例”這一新概念，設計并開發出一套“課程案例”應用于“網頁設計與制作”課程教學中，學生通過案例的模仿再開發，全面掌握“網頁設計與制作”課程知識與技能的基本要領，從而實現課程的教學目標，培養學生的網站開發和設計能力。下面詳述這一“課程案例”教學的設計及所進行的課堂教學。
“課程案例”的提出和設計
（一）“課程案例”這一新概念的提出
市面上相關教材比比皆是，但從其所提供的案例方面看，沒有比較適合中職學生的：要么網頁主題讓學生很陌生，要么網頁頁面設計太復雜，中職生很難掌握，而且其中的案例多是針對某一知識點或某一章節設計的，屬于“知識點案例”或“章節案例”，是零碎知識，不能貫穿整個課程知識教學。所以，教科書只適合作為本課程理論知識點的參考資料?！熬W頁設計與制作”是一門技能型課程，重要的是要教會學生如何去構建和設計一個完整的網站，而不是空泛地談一些理論知識?！罢n程案例”區別于“知識點案例”或“章節案例”之處在于：該案例貫穿于整個課程教學，覆蓋課程包含的所有知識，課程知識的學習以“課程案例”為線索進行，學生模仿再開發設計完該案例，課程的所有知識學習也已結束。筆者思考并設計這樣的“課程案例”，并對教材進行如下處理：提煉教材所提到的知識點，將其重新排列組合，按由淺入深的學習順序，將課程知識點結合到自主設計的“課程案例”中，分模塊漸進教學，整個教學過程注重學生自身思維的開發，將個體集美術設計、課程知識學習和課程實踐三者緊密結合，將學生各方的能力逐漸激發展示出來。
（二）圍繞學生的興趣進行“課程案例”的設計
學生對一門應用型技術課的學習如沒有興趣，可能是沒有一個令他們感興趣的實例吸引他們漸次深入學習，從而引導他們學習掌握課程知識。班級是校園學習生活的一個集體，班級網站中所記錄的人物、活動都是學生身邊的人和事，網站的主題反映的正是他們的校園生活。如果把班級網站作為教學案例，讓學生以自己的學習生活為主題組建成網站，一方面能引起他們極大的學習興趣，另一方面，作為同一個班級的學生，在設計本班級的網站過程中，能夠創造很多互相交流的機會，培養互相學習的精神，也能加深同學間的友情。所以，“班級網站的設計與創作”是一個理想的課程案例。筆者應用模塊教學法，將理論知識與該課程案例完美結合起來，在近似實踐的學習過程中培養學生的學習興趣，讓他們在興趣中學、在學習中增添興趣，從而在良性循環中完成課程學習。
再考慮學生的能力方面，他們已經有了對文字、圖片和表格的基本處理能力，還學過或同步學習Photoshop、flash、計算機網絡基礎等相關課程，所以，只要對網頁素材的處理提出具體的要求，或對他們略加指導即能自行設計處理完成。對于該課程，雖然大部分學生瀏覽過很多網站內容，但并沒有真正了解網站是怎么回事；
對互聯網世界充滿興趣和好奇，卻還沒有網頁設計與制作的理論知識和實踐技能，對網站常識還比較陌生。因此，在課程學習中，重點是要力求深入淺出、盡可能直觀全面地剖析一個好的網站案例，運用視、聽的方法，幫助學生建立有關網頁設計與制作的基本概念和基本知識，掌握建設網站的基本技能。
鑒于此，教師如何將Dreamweaver、HTML和CSS三部分內容有機結合，讓學生通過課程學習，模仿再開發出一個比較完整的“班級網站”，著力培養學生的實際建站能力、設計開發能力，從而提高他們自主學習與創新能力、信息收集與處理能力、提出問題并分析問題和解決問題的能力，成為課程教學的重要目標。
“課程案例”教學方法的設計
教學手段以“多媒體機房、網絡、項目開發”三項結合。多媒體機房為學生設計網站提供基本條件，網絡是學生尋找素材資源和借鑒別人經驗的空間，項目開發是他們學習的任務。
教學方法上，采用示范講解、任務驅動的教學模式，從以下三個方面展開：
采用案例講解的教學模式 教學過程根據編排好的知識點內容和事先創建好的“班級網站”實例，逐步講解該“課程案例”，便于學生理解和進行模仿設計開發。
實施模塊化教學方法 遵循學生“由淺入深，循序漸進，由感性到理性”的認識規律，把知識點組合后分模塊漸進教學。教學過程講練結合，以學生實踐為主，完成“班級網站”這一“課程案例”中包含的每個模塊的再設計與再創作；
以教師引導為輔，講解設計與創作過程中遇到的新知識，組織學生完成能力拓展訓練。
走四步教學流程，融“教、學、練”于一體 第一步，教師展示課程案例，演示創作過程，講解涉及的知識點內容；
第二步，下達任務，提出完成任務的具體要求和完成時間；
第三步，學生模仿再設計再創作，完成任務；
第四步，任務驗收，學生自我評價，教師綜合講評。
“課程案例”的課堂教學
基于學生的現有知識技能，教師課程教學中重點講授如何設計開發網站，在其他環節只扮演一個組織者和啟迪者的角色，一步步引導學生完成本課程的目標，充分培養和發揮學生的自主設計能力、繪畫能力和創新能力。
整個課程的課堂教學以“課程案例”為主線，設定以下幾個教學模塊。
模塊一：學習有關網頁的基本知識，介紹建設網站的工具等。
模塊二：草擬“網站地圖”，設計網站“模板頁”。展示課程案例網站，分析班級網站的風格、頁面的布局和包含的元素，先給學生一個真實的空間印象，之后讓學生模仿如何設計這樣的網站。首先設計出紙質的網站空間布局和內容：包括考慮整個網站的風格、主色調、頁面布局、頁面的大概內容等，每一個頁面設計草擬在一張紙上，其實這就是網站地圖了。做足了這個功課，日后的整個班級網站的設計就有了頭緒。為避免各頁面出現相同內容的重復設計，提出設計制作“模板頁”來生成其他頁面。例如：把風格和內容相一致的部分（如班級廣告圖、班級徽標、導航條、版權信息等）設計出來，作成模板頁保存下來，以備后面制作網站各頁面時利用模板頁生成，并在此基礎上進行相應頁面內容的設計創作。草擬“網站地圖”和設計制作網站“模板頁”是同時進行的，要結合著做。這個階段都還是“紙上練兵”。
模塊三：收集和創作素材。班級網站的素材主要來源于學生自己的學習生活，可以是活動的照片、活動記錄，也可以是為自己班級創作的班級廣告圖、班級徽標等Flash或Photoshop作品，將這些素材分門別類放入建好的站點目錄樹中。
模塊四：學習Dreamweaver，首先建立班級網站站點。
模塊五：設計創建“模板頁”。根據前期草擬的網站地圖，利用布局表格設計模板框架?？蚣艽詈煤缶褪菫槟０屙撎砑铀夭?。模板上需要的素材并不太多，關鍵是要“精”，用精心選擇和創作的素材。提醒學生，模板上大塊的空間要留出來給各頁面添加相應的內容，這點至關重要。
模塊六：利用模板生成網站各頁面。模板設計成熟并制作出來后，就要根據模板上的導航設計生成相應的頁面，并將各頁面互相鏈接起來。
模塊七：完善各頁面內容。每一兩次課完善一個頁面的內容，直到網站中各頁面內容全部添加完成。當然，課后要為如何合理安排這些頁面內容花很多時間去構思、去創作或收集相應的素材。所以，收集素材這項工作是一直貫穿于整個網頁設計過程中的。
模塊八：應用一些網頁特效的代碼，如添加背景音樂、QQ互動、圖片文字的滾動、表單等，讓頁面動起來，增加網頁的吸引力和活力。
模塊九：本地站點測試。
教學評價設計
評價方案 （1）學生自我評價：即每個學生對自己的評價。教師事先給出評價標準和具體要求，學生對照自己的學習態度、創作的作品，對自己給出合理評價。（2）模塊作品評價：教師對每個學生的評價。教師通過對學生課堂反映、每個模塊上交的作品、討論活躍程度等方面，對每個學生進行評價。（3）期末考核：教師通過對學生一整學期模仿再設計創作的“班級網站”進行評分，考核學生的實踐與動手的綜合能力，對學生進行合理的評價。
成績評定 按出勤率、模塊作品成績、成熟作品成績加權考核。
結語
在“網頁設計與制作”課程案例的課堂教學中，筆者采用的是興趣教學和讓學生貼近實戰的方法，以保持學生對知識探索的興趣并提高學生的動手能力。這種教學的重要前提是要設計一個好的案例，“好”的標準是內容貼近學生的學習生活、設計難度又適合他們的實際水平，“班級網站”這一課程案例便是好案例之一。此外，在教學過程中，筆者為學生提供了十分豐富的信息資源，教會他們信息資源該如何收集、從哪里獲取、以及如何有效利用等知識。
參考文獻：
[1]劉瑞新.網頁設計與制作教程[M].北京：機械工業出版社，2010.
[2]唐乾林.網站界面設計案例教程[M].北京：機械工業出版社，2011.
[3]尚俊杰.網絡程序設計——ASP[M].北京：清華大學出版社，北方交通大學出版社，2009.
[4]趙豐年.網頁制作三劍客操作互動[M].北京：人民郵電出版社，2011.
[5]趙豐年.網頁制作技術——Dreamweaver Flash Fireworks[M].北京：人民郵電出版社，2003.
[6]馬月.網站界面設計[M].北京：北京理工大學出版社，2006.
