第一篇：網頁設計與HTML課程設計補考

網頁設計與HTML課程設計補考

要求：

1.網站主題為“**班級網站建設”，頁面數3-4頁，其中一頁為主頁；

2.小組人數2-4人

3.站點內容豐富，站點目錄結構清晰，符合規范；

4.頁面布局合理，美觀大方；

5.能綜合應用網頁制作技術，Photoshop，flash，Dreamweaver，HTML，CSS等；

6.撰寫課程設計報告；

7.提交文檔：

網站：軟件

課程設計報告：紙質，A4紙打印，裝訂成冊

8.提交時間：

2013-3-19日之前由謝小芳同學統一收齊，交網頁老師處

課程設計補考名單：阿拉坦敖都、梁啟明、李洋洋、夏偉達、于澤鵬、張磊（112131047）、張鵬

期末考試補考名單：阿拉坦敖都、梁啟明、李永競、石濤、夏偉達、楊超、于澤鵬、張磊（112131047）

第二篇：《HTML網頁設計》課程教學大綱

《HTML網頁設計》課程教學大綱

一、教學目的和任務

《HTML靜態網頁設計》是我院軟件開發專業的專業基礎課，選用教材《網頁設計》，全書共分為17章，其中HTML內容占11章，包括HTML基本語法，常用標簽的使用，表格的使用，層和框架的使用，在HTML中多媒體的應用，表單的使用，網頁的圖像及多媒體，以及站點的創建和管理。其中重點包括常用標簽的使用，表格的使用，框架和表單的使用，文字與段落，以及CSS應用。

一方面本課程通過對網頁用戶界面設計中的信息傳達、視覺符號的應用等專業知識的講授，讓學生能掌握網頁設計中相關的設計思維與視覺表現方面的知識，讓學生把網站中要傳達的信息通過數碼交互媒體的手段展現出來。另一方面通過對相關設計軟件的使用進行課堂講解與練習，使學生能夠掌握相關軟件操作的基本知識，并能夠通過靈活應用課堂知識處理一些在實際項目中遇到的技術困難。

二、教學方法與教學要求

1課前認真備課，選好實例

網頁制作技術不斷地發展變化，新的技術、新的方法也在不斷涌現，所以我們也需要將網頁設計的最新、最實用的技術引用到課堂上去。課堂教學是傳授知識的主要方式和場所，目的在于將書本知識轉化為學生的知識和技能。為實現這一目的，我深入鉆研教材，理清教材內容特點、編排次序和知識點之間的銜接關系，整理出一條條線索。如在上第一節課時，我會從網上下載一些經典的并具有代表性的網頁給同學欣賞，在看的過程中一一的介紹并分解到書本的各個章節的知識點,提高學生們的興趣與積極性。

課堂的教學方法

教學過程是教師與學生之間信息傳遞及反饋的過程。“我認為教學的藝術不在于傳授本領，而在于激勵、喚醒、鼓舞。”因此，在學習過程中，給學生明確的思路，激勵學生積極主動參與思考，運用任務驅動法、模塊教學法，案例教學法和項目教學法等教學手段，引導他們在解決問題的過程中體驗到學習帶來的成功感和愉悅感，使學習興趣長久地保持下去。

2.1 案例教學法。案例教學法，即在教師指導下，根據教學目標的內容的需要，采用案例組織學生進行學習、研究、鍛煉能力的方法。案例教學法可分為案例導入、案例例證、案例討論、案例結尾和案例練習等多種方法。

在課堂上我采用是案例例證法，通過精心挑選案例，明確提出需要掌握的知識點及操作技能，以案例帶動知識點，貫穿整個教學過程。具體做法是通過具體案例提出任務，將任務分解到每次的課堂教學中實現，教學過程中為了調動學生的學習積極性，教學過程中常常采用互動方式，即老師提出一種解決問題的思路，然后讓學生采用其他方式來解決同一個問題。

2.2 項目教學法。項目教學法是指通過實施一個完整的項目工作而進行的教學活動,采取小組討論、協作學習的方式。

將課程中的各個知識點或技術點采用教師給出項目要求或參考項目需求的方式，讓學生分組選擇項目或者自己調研確定項目，小組合作進行項目規劃和頁面設計。通過“小組合作規劃設計”，以“項目小組”為基本形式、小組成員之間的合作性活動為主體、完成小組項目為主要目標、小組整體水平為主要依據來評定成績的考核形式，為學生創造一個良好的合作氛圍。小組的每一個成員在這一過程中都有發揮自己優勢和表現自己的機會，通過小組成員之間相互討論、評價、反饋、傾聽、激勵以及互為師生、優勢互補等合作形式，激發學生的學習興趣，改進學生的學習方法與態度，增強學生的集體榮譽感和團隊協作精神。

三、教學內容與教學安排

1、課堂講授

第一章 HTML入門簡介

主要掌握文檔標記的使用，頭部標記title，主體標簽body，標題標記等，了解和掌握HTML文檔的結構。第二章HTML常用標簽

通過學習斜體字標簽、下標標簽、上標標簽、插入字標簽、刪除字標簽、計算機代碼標簽、鍵盤輸入文字標簽、計算機代碼樣式標簽等，用于控制文字樣式。第三章 超鏈接

超鏈接章節主要掌握錨點、外部鏈接、郵件鏈接、腳本鏈接、空鏈接的相關基本知識，用于鏈接跳轉功能的實現 第四章 框架

通過框架頁示例，學習網頁框架的基礎知識，掌握框架邊框的設置、框架邊距的設置、設置框架縮放、設置框架滾動條、設置框架邊框的顏色，對框架進行上下分割窗口、左右分割窗口來設計框架頁面，設置浮動框架的高度和寬度，設置浮動框架的對齊方式等。

第五章 表格【上】

表格章節主要學習設置表格的邊框、表格的背景顏色、表格邊框顏色、設置表格高度和寬度以及設置表格背景圖像等。第五章 表格【下】

本章主要掌握表格間距設置，表格水平對齊設置，表格標題的設置，行標簽和單元格背景顏色的設置，掌握表格跨行跨列的設置以及表格的嵌套，用于今后利用表格進行網頁布局。第六章 列表

本章節主要學習各種列表：有序列表、無序列表、目錄列表、菜單列表、自定義列表以及嵌套列表等。用于網頁的排版設計 第七章 表單

表單章節是HTML的重點章節，將學習表單的各種控件知識：如單行文本域、密碼域、單選按鈕、復選框、普通按鈕、文本域、圖像域、多行文本域、選擇列表等。第八章 網頁圖像

本章節主要學習網頁圖像設置的相關知識，主要有如何加載圖像、如何設置圖像大小、如何設置圖像邊框、如何設置圖像對齊方式、如何設置圖像與文本的距離、如何設置圖像的提示文字、如何設置圖像超鏈接、如何圖像影像地圖等。第九章 網頁多媒體

網頁的多媒體運用知識必不可少，本章節將學習如何設置文字及圖像的滾動效果、如何加入背景音樂、如何嵌入flash動畫、如何嵌入mp3、如何嵌入mpg視頻等。第十章 CSS基礎

本章節將學習使用CSS進行網頁樣式風格的設計。要使學生掌握使用CSS的基本語法，以及在HTML中使用CSS的幾種方法。達到網頁美化的目的。

2、課堂及課后練習

第一章 HTML入門簡介 任務一【文檔標記的使用】 任務二【頭部標記】 任務三【主體標簽BODY】 任務四【標題標記】 任務五【控制文字的格式】 任務六【特定文字標記的應用】 任務七【換行符標記的應用】 第二章 HTML常用標簽 任務一【文字樣式示例】 任務二【斜體字】

任務三【設置文字樣式】 任務四【下標】 任務五【上標】

任務六【插入字標簽】 任務七【刪除字標簽】 任務八【計算機代碼標簽】 任務九【鍵盤輸入文字標簽】 任務十【計算機代碼樣式標簽】 第三章 超鏈接

任務一【HTML鏈接】 任務二【錨點】 任務三【外部鏈接】 任務四【郵件鏈接】 任務五【腳本鏈接】 任務六【空鏈接】 第四章 框架

任務一【框架頁示例】 任務二【設置框架邊框】 任務三【設置框架邊距】 任務四【設置框架縮放】 任務五【設置框架滾動條】 任務六【設置框架邊框的顏色】 任務七【上下分割窗口】 任務八【左右分割窗口】

任務九【浮動框架的高度和寬度】 任務十【浮動框架的對齊方式】 第五章 表格【上】 任務一【表格邊框】 任務二【表格高度】 任務三【表格背景顏色】 任務四【表格邊框顏色】 任務五【表格高度和寬度】 任務六【表格背景】 第五章 表格【下】 任務七【表格間距】 任務八【表格水平對齊】 任務九【表格標題】 任務十【行標簽】

任務十一【單元格背景顏色】 任務十二【跨行跨列】 任務十三【表格嵌套】 第六章 列表

任務一【有序列表1】 任務二【有序列表2】 任務三【有序列表3】 任務四【無序列表】 任務五【目錄列表】 任務六【菜單列表】 任務七【定義列表】 任務八【嵌套列表】 第七章 表單

任務一【表單method屬性測試】 任務二【單行文本域】 任務三【密碼域】 任務四【單選按鈕】 任務五【復選框】 任務六【普通按鈕】 任務七【文本域】 任務八【圖像域】 任務九【多行文本域】 任務十【選擇列表】 第八章 網頁圖像 任務一【加載圖像】 任務二【設置圖像大小】 任務三【設置圖像邊框】 任務四【設置圖像對齊方式】 任務五【設置圖像與文本的距離】 任務六【設置圖像的提示文字】 任務七【設置圖像超鏈接】 任務八【圖像影像地圖】 第九章 網頁多媒體 任務一【滾動效果1】 任務二【滾動效果2】 任務三【背景音樂】

任務四【嵌入flash動畫】 任務五【嵌入mp3】

任務六【嵌入mpg視頻】 第十章 CSS基礎

任務一【使用CSS美化網頁字體】 任務二【使用CSS美化網頁背景】 任務三【使用CSS讓用戶自由定制個性化的頁面】

3、課程作業（按知識點劃分，共計八個部分）第一部分、制作第一個網頁

第二部分、新聞信息瀏覽頁面的制作

（一）第三部分、新聞信息瀏覽頁面的制作

（二）第四部分、網站結構的實現

（一）第五部分、網站結構的實現

（二）第六部分、用戶信息錄入頁面的實現

（二）第七部分、網頁文本的樣式設置 第八部分、CSS結構、規則及屬性

四、課程考核

本課程理論考試采用閉卷形式，上機實踐與其他課程進行組合考試，同時結合平時作業進行課程考核與成績評定。考核評分以百分制計，原則上理論、實踐考試成績占80%，平時作業成績占20%。

五、教材及參考書

教材： 《網頁設計》 中國水利水電出版社 參考書：《HTML 標準教程》 賈素玲 王強 著 清華大學出版社

六、教學設備及教具要求

由學院統一安排多媒體教室及機房，任課教師準備多媒體課件等教學相關資料。

第三篇：html網頁畢業論文

畢業論文

網站設計與制作

所 屬 系：計算機

專業：應用技術

學生姓名：***

學號：************

指導老師：****

二〇一一年五月

第1章網站總體分析及概要設計

1.1 模塊功能分析

1.1.1 引導首頁模塊

引導首頁使用整體顏色背景，配合圖片或Flash構成，頂部為導航首頁鏈接。

1.1.2 班級形象模塊

該模塊功能主要是展示班級的形象，同時作為網站的導航首頁，在用戶登錄后就可以看到班級的整體形象，班級的展示及班級動態，用戶還可以通過頂部和左側的導航欄進入網站，更深入的了解該班級。

1.1.3 用戶模塊

用戶注冊與登錄：網絡上的用戶通過填寫ID、密碼等信息可以注冊成為會員，并獲得相應的用戶權限。系統自動把用戶的注冊信息存儲到服務器端的數據庫中。如果用戶ID重復或者填寫錯誤，系統會給出提示信息，而通過用戶注冊與登錄、可以自由發布與查看各種信息。

用戶信息維護：系統的注冊用戶可以隨時修改自己的注冊信息，這些修改后的信息將自動更新到服務器端的數據庫中。

用戶登錄/退出：系統的注冊用戶可以登錄系統并且獲得相應的權限，登錄了的用戶也可以選擇退出登錄。

1.1.4 留言板模塊

該模塊功能主要是提供用戶與網站主之間的交流平臺及站長收集用戶反饋信息以改善站點。

1.2 網站導航功能結構

網站主要實現的功能有：網站首頁導航，各頁面導航以及其他模塊。

1.3 論文可行性分析

1.3.1 社會可行性分析

可行性分析主要分析現有技術條件能否順利完成開發工作，軟硬件配置能否滿足開發者的需要等。隨著計算機硬件和軟件技術的飛速發展，為網站的建設提供了有利的技術條件，由此看來技術基礎也已非常成熟，因而技術上是可行的。

1.3.2 軟件可行性分析

1.3.2.1 ASP技術介紹

ASP（Active Server pages）即“動態服務器網頁”，ASP之所以能受到大家的重視與使用的原因，只要在于腳本在服務器上而不是在客戶端運行，傳送到瀏覽器上的Web頁是在Web服務器上生成的。所以不必擔心瀏覽器能否處理腳本，Web服務器已經完成了所有腳本的處理，并肩標準的HTML傳輸到瀏覽器。由于只有腳本的結果返回到瀏覽器，所有服務器端腳本不易復制。用戶看不到創建

他們正在瀏覽的頁的腳本命令。所以在客戶端看到的只能是經過解析之后的數據，而無法獲得源代碼，故編寫者不用擔心自己的代碼會被別人剽竊。

ASP的主要特點：容易產生，無需Compile變異或Link鏈接即可執行，集成于HTML中，使用常規文本編輯器，如Windows的記書本，即可設計，用戶端只要使用常規的可執行HTML碼的瀏覽器，即可瀏覽ASP所設計的主頁內容，Script語言（Vbscript，Jscript）是在站點服務器執行，用戶不需要執行這些語言，可通過ActiveX服務器組件來擴充功能。ActiveX Server component，可使用visual Basic，Java，Visual C++，COBOL等語言來實現，任何AcTiveX scripting語言兼容。可使用Vbscript或Jscript等語言來設計，一個應用程序，可以在多個主頁之間保留和使用一些共同的信息，也就是說一個用戶，可以在多個主頁之間保留和使用一些共同的信息，在多個主頁之間共享信息。

1.3.2.2 DREAMWEAVER

Dreamweaver、FLASH以及在DREAMWEAVER之后推出的針對專業網頁圖像設計的FIREWORKS，三者被MACROMEDIA公司稱為DREAMTEAM(夢之隊)，足見市場的反響和MACROMEDIA公司對它們的自信。說到

DREAMWEAVER我們應該了解一下網頁編輯器的發展過程，隨著互聯網

(Internet)的家喻戶曉，HTML技術的不斷發展和完善，隨之而產生了眾多網頁編輯器，從網頁編輯器基本性質可以分為所見即所得網頁編輯器和非所見即所得網頁編輯器（則原始代碼編輯器），兩者各有千秋。所見則所得網頁編輯器的優點就是直觀性，使用方便，容易上手，您在所見即所得網頁編輯器進行網頁制作和在WORD中進行文本編輯不會感到有什么區別。

Dreamweaver可以用最快速的方式將Fireworks，FreeHand，或Photoshop等檔案移至網頁上。使用檢色吸管工具選擇熒幕上的顏色可設定最接近的網頁安全色。對于選單，快捷鍵與格式控制，都只要一個簡單步驟便可完成。Dremweaver能與您喜愛的設計工具，如Playback Flash，Shockwave和外掛模組等搭配，不需離開Dreamweaver便可完成，整體運用流程自然順暢。除此之外，只要單擊便可使Dreamweaver自動開啟Firework或Photoshop來進行編輯與設定圖檔的最佳化。

使用網站地圖可以快速制作網站雛形、設計、更新和重組網頁。改變網頁位置或檔案名稱，Dreamweaver 會自動更新所有連結。使用支援文字、HTML碼、HTML屬性標簽和一般語法的搜尋及置換功能使得復雜的網站更新變得迅速又簡單。Dreamweaver是唯一提供Roundtrip HTML、視覺化編輯與原始碼編輯同步的設計工具。它包含HomeSite和BBEdit等主流文字編輯器。幀(frames)和表格的制作速度快的令您無法想像。進階表格編輯功能使您簡單的選擇單格、行、欄或作未連續之選取。甚至可以排序或格式化表格群組，Dreamweaver 支援精準定位，利用可輕易轉換成表格的圖層以拖拉置放的方式進行版面配置。所見即所得 Dreamweaver成功整合動態式出版視覺編輯及電子商務功能，提供超強的支援能力給Third-party廠商，包含ASP，Apache，BroadVision，Cold Fusion，iCAT，Tango與自行發展的應用軟體。當您正使用Dreamweaver在設計動態網頁時，所見即所得的功能，讓您不需要透過瀏覽器就能預覽網頁。夢幻樣版和XML Dreamweaver將內容與設計分開，應用于快速網頁更新和團隊合作網頁編輯。建立網頁外觀的樣版，指定可編輯或不可編輯的部份，內容提供者可直接編輯以樣式為主的內容卻不會不小心改變既定之樣式。您也可以使用樣版正確地輸入或輸出XML內容。

Dreamweaver還集成了程序開發語言，對ASP、.NET、PHP、JS的基本語言和連接操作數據庫，都是完全支持的。

1.3.2.3 SQL 2000

SQL Server 2000是為迅速提供可伸縮性電子商務、企業及數據倉庫解決方案而開發的完整數據庫與分析軟件產品。SQL SERVER 2000定位于Internet背景下的數據庫應用，它為用戶的Web應用提供了一款完善的數據管理和數據分析解決方案。同時SQL SERVER 2000還是Windows DNA（Distributed Internet Architecture）架構的一個核心組件。它極大地縮短了用戶開發電子商務、數據倉庫應用的時間。SQL SERVER 2000還提供對XML(Extensible Markup Language擴展標示語言支持)和HTTP的全方位支持。

在高性能和企業級可伸縮性領域，SQL Server 2000 設計成利用 Windows 2000 對更多處理器、更大的系統內存的支持，最終達到支持 64 位硬件平臺。在不斷提升可用性的努力過程中，SQL Server 2000 采用 Windows 2000 四路群集，提供了大大改進的群集支持。SQL Server 7.0 已經在可管理性和易用性方面在行業內領先，SQL Server 2000 通過與 Windows 2000 活動目錄緊密結合進一步改進了這些功能。而且，SQL Server 2000 還包含對現有管理工具和實用程序的重大改進，并引入更具自我調節和自我管理的引擎功能。

SQL Server 2000 按照設計可以為部署和維護強大的、易于管理、支持商務活動的 Web 站點提供最好的性能，這些站點可以從事商家和商家之間或商家與客戶之間的交易。在尋求一個支持您的電子商務解決方案的數據庫時，需要考慮的項目包括：可用性、性能、可管理性和價格。

1.3.2.4 PHOTOSHOP

Photoshop是Adobe公司推出的一款功能十分強大、使用范圍廣泛的平面圖像處理軟件。擁有多種選擇工具，極大地方便了用戶的不同需求。而且多種選擇工具還可以結合起來選擇較為復雜的圖像。它不僅擁有多種內置濾鏡可供用戶選擇使用，而且還支持第三方的濾鏡。目前Photoshop是眾多平面設計師進行平面設計，圖形，圖像處理的首選軟件。

1.3.2.5 FLASH

Flash被大量應用于互聯網網頁的矢量動畫設計。因為使用向量運算﹙Vector Graphics﹚的方式，產生出來的影片占用存儲空間較小。使用Flash創作出的影片有自己的特殊檔案格式﹙SWF﹚，該公司聲稱全世界97%的網絡瀏覽器都內建Flash播放器﹙Flash Player﹚。Flash是Macromedia提出的“富因特網應用”（RIA）概念的實現平臺。

1.4 開發環境介紹

操作系統：Windows XP professional；

開發的軟件環境：IIS 5.1，Dreamweaver CS4，SQL server 2000，Photoshop CS5，Flash 8

開發的硬件環境：Pebtium（R）Dual-Core CPU T4200 @ 2.00GHZ 內存：2 GB

參考文獻及引用內容

網站建設教程（金旭亮、吳彬），高等教育出版社；

ASP動態網頁編程/工作過程導向新理念從事（叢林編委會），清華大學出版社； Flash ActionScript 3 殿堂之路（孫穎）電子工業出版社；

站長之家 :；

站長網 : ；

結束語

在該網站制作的過程中利用了各種軟件或程序設計語言完成網站的設計，完成前臺基本操作與后臺的數據處理，瀏覽器向WEB服務器代理提出訪問請求，可以通過瀏覽器直接看到網站內容，同時給班級在網絡上帶來了一個很好的宣傳窗口。本網站也方便了班級同學間的聯系及交流。上述就是我制作該網站所想要視線的目標。相信通過一個多月的畢業論文對該網站的制作完善，能使我對網站制作有了一個比較清楚的認識，也加深了對數據庫原理、程序設計的學習，能提高資深的程序設計能力，到那時我得到的將是終生的財富，必將給我今后的學習和工作帶來更多的收益。

致謝

大學生活進入尾期，即將離開美麗的校園，心中難免有著種種不舍，這里的三年生活，存在了我太多美好的回憶。

在這里，首先要感謝銀濤老師在我完成該畢業論文過程中給予的悉心指導。同時通過互聯網在網上收集大量的資料并且及時向指導老師、同學請教。在他們的幫助下，我順利的完成了此次畢業論文的任務。通過此次設計，使我學到了很多有使用價值的只是，開闊了知識面，積累了對網站制作的經驗，在遇到困難時，去尋求解決的方法，去克服它，并學會自己找資料進行參考，直到問題最終得到解決。在制作學習中，我領悟到了很多道理——學習在于不斷探索、思考、質疑，在舉一反三中創新。更重要的是要有持之以恒的毅力。

在為期1個多月的畢業設計過程中使自己真正的學習到很多的東西，無論是自己的動手能力是是心智的開發都是一個很大的提高。更重要的是學到了一種嚴謹的學習態度。在整個畢業設計中三年的大學學習老師所教授的知識無疑是最大的幫助，指導老師細心的指導更加速了本人的提高。在此，我衷心的感謝及祝福老師們。

第四篇：網頁設計與制作課程設計

一、設計目的

通過一個月的網頁設計學習，設計一個簡單的網站來檢測自己的學習成果，看看哪些東西還沒有掌握，需要進一步的去鞏固！網頁的設計區別于實體化的一些東西，其多為多媒體的存在，意味著它可以容納更多的信息以及更多的展示形式，網頁設計則要求設計者具備一些特殊技能以營造特定瀏覽情景。網頁設計可以在短時間內增強我們的洞察力以更好察覺使用者的興趣點，只有這樣才能滿足他們的需要。

二、設計要求

運用所學的知識設計一個簡單的網站，類型不限

三、需求分析

網頁設計是將技術性與藝術性融為一體的創造性活動。網頁設計是以功能行為第一指導原則，以技術因素為主要考慮對象，以完成或實現必要的功能為目標。近幾年隨著網絡的發展而逐漸受到人們的重視，它本身已網絡為載體，把各種信息以快捷、方便的方式傳達給受眾，在這種標準的要求下，逐步產生了審

美需求和功能需求等。人們對美的追求是不斷深入的，網頁設計同樣如此。如何使受眾能更好的和有效率地接受網頁上的信息，這就需要從審美方面入手。網頁設計的審美需求是對視覺設計美學的一種繼承和延伸，兩者的表現形式和目的都有一定的相似性。

網頁設計的主題為我的籃球網，它是我根據自己的興趣做出來的網站，內容非常簡單，但卻富有深意！它融合了當今大多數青少年朋友的興趣愛好，可以說是一個大眾化的網站！

四、制作過程的內容及結果

1、網站目錄

打開dreamweaver cs4，建立站點，放到F盤里，在目錄下有images(包括圖片、flash)、scripts、shipin、web（建立的網站）文件夾。如下圖示：

2、我的籃球網（首頁）

主要代碼：