第一篇：靜態網頁設計專業課程教學大綱（精選）

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

課程名稱（中文/英文）：靜態網頁設計

課程性質：專業基礎課必修課 適用專業：計算機科學與技術 學 時 數： 76 其中：實驗/上機學時：38 學 分 數： 4 考核方式：任務上機方式進行考核。成績構成如下：平時：40%期末：60% 先修課程：無 后續課程： 動態網頁設計、JSP 等 教學參考書：

1.溫謙，趙偉等，網頁制作綜合技術教程，人民郵電出版社，2009 2．向隅，網頁設計實用教程，北京郵電出版社，2009 3.張磊，網頁設計技術，中國鐵道出版社 2006 開課部門：計算機系計算機科學與技術教研室 課程簡介：

《靜態網頁設計》主要講解如何應用Dreamweaver創建和管理網站、網頁制作基本知識，講授Dreamweaver網頁制作集成工具使用方法等內容。本課程介紹html的基礎知識，CSS的基礎知識，以及開發WEB最流行的工具Dreamweaver的使用方法。主要包括基本html語句的語法，各種內容在網頁中的插入，表格布局，css樣式表，層的使用等。

教學目的和要求

《靜態網頁設計》是計算機科學與技術專業的一門重要專業基礎課。通過本課程學習，使學生掌握構建網站的基本知識，熟悉網頁開發平臺的使用，能夠獨立的創建個人網站。

教學重點和難點

Html中頁面標簽元素的使用，CSS樣式表的設計

教學方法

啟發式教學，引導學生通過實例獲取知識，鞏固知識。多媒體教學，機房授課 教學主要內容

第一章 網頁設計基礎知識（4學時）1.1 網頁的基礎概念 1.2 網頁與HTML 1.3 WEB標準

1.4 網頁設計與開發過程 1.5 HTML基礎 1.6 簡單的HTML案例 1.7 網頁源文件的獲取

1.8 利用Dreamweaver快速建立基本文檔 第二章 用HTML設置文本和圖像（4學時）2.1 文本排版 2.2文字列表

2.3 HTML標記與HTML屬性

2.4 HTML標記與HTML屬性的局限性 2.5 特殊文字符號 2.6 使用圖像 2.7 設置圖片的尺寸 2.8 設置圖像的替換文本

2.9 利用Dreamweaver設置文本和圖像2.10 利用Dreamweaver代碼提高效率 第三章 超鏈接（4學時）3.1 設置文字超鏈接 3.2 設置頁面內部超鏈接 3.3 設置圖片超鏈接 3.4 設置電子郵件超鏈接 3.5 設置鏈接頁面的目標窗口 3.6 創建熱點區域 3.7 框架之間的鏈接

第四章 使用表格與表單（4學時）4.1 使用表格 4.2 使用表單

4.3 Dreamweaver中的模版

第五章(X)HTML與CSS概述（4學時）5.1 HTML與 XHTML 5.2(X)HTML與CSS

5.3 構造CSS規則 5.4 基本CSS選擇器

5.5 在HTML中使用CSS的方法 第六章 CSS樣式設置實踐（6學時）6.1 手工編寫頁面

6.2 使用Dreamweave進行CSS設置 6.3 復合選擇器 6.4 CSS的繼承特性 6.5 CSS的層疊特性

第七章 用CSS設置文本和圖像（6學時）7.1 使用CSS設置文本樣式 7.2 用CSS設置圖像樣式 7.3 用CSS設置背景樣式

第八章 用CSS設置鏈接與導航菜單（6學時）8.1 豐富的超鏈接特效 8.2 控制鼠標指針 8.3 設置項目列表樣式 8.4 創建簡單的導航菜單

8.5 應用滑動門技術的玻璃效果菜單

第九章 用CSS設置表格和表單樣式（6學時）9.1 控制表格 9.2 美化表格 9.3 案例—日歷 9.4 CSS與表單

第十章 CSS盒子模型（8學時）10.1 “盒子”與“模型”的概念探究 10.2 邊框 10.3 設置內邊距 10.4 設置外邊距 10.5 盒子之間的關系

10.6 盒子在標準流中的定位原則 第十一章 盒子的浮動與定位（8學時）11.1 盒子的浮動 11.2 盒子的定位 11.3 z-index空間位置 11.4 盒子與display屬性

第十二章 CSS+div布局方法剖析（8學時）12.1 CSS排版觀念

12.2 固定寬度且居中的款式 12.3 左中右版式 12.4 塊的背景色問題

12.5 div 排版與傳統的表格方式排版的分析 案例設計（8學時）

執筆人： 魏榮華

審核人：

第二篇：靜態網頁設計知識點

第一章 概述 4學時

教學目的：

了解網頁及網站基本概念及網頁的基本要素分析 教學重點與難點：

網頁、網站設計流程，網頁基本要素

第一節 網頁和網站

一、網頁

二、網站

三、網頁的基本功能

第二節 網頁中的主要元素

一、文本

二、圖像

三、鏈接標志

四、其他的基本要素

第三節 網頁制作工具

一、網頁編輯工具

二、網頁圖像編輯工具

三、動態網頁技術

第四節 網頁設計的基本流程

一、網站的設計流程

二、網頁的設計與制作

三、網頁的測試

四、網頁上傳和發布

第二章 HTML語言基礎 6學時

教學目的：

了解HTML文件的基本結構，掌握HTML中文本的編輯及圖像的語法，掌握HTML中各種設置超級鏈接的語法，掌握HTML中表格和框架的基本語法。

教學重點與難點：

HTML的語法結構、超級鏈接的語法、表格和框架的基本語法。

第一節 HTML概述

一、HTML簡介

二、HTML語法結構

第二節 文本的編輯

一、段落標記

二、文本標記

三、標題顯示等級

四、列表

第三節 圖像編輯

一、插入圖像

二、使用背景圖像

第四節 建立超鏈接

一、建立超鏈接

二、使用書簽

三、標記新窗口和基準鏈接

第五節 表格與框架

一、建立表格

二、表格屬性

三、建立框架

四、框架屬性

第三章 Dream weaver基礎 2學時

教學目的：

了解DW的操作界面及常用命令，掌握規劃和創建站點的操作，掌握基本的網頁操。

教學重點與難點：

規劃站點的結構、網頁的基本操作

第一節 Dream weaver 工作界面

一、啟動和退出Dreamweaver

二、Dreamweaver操作界面

第二節 規劃與創建站點

一、規劃網站的整體結構

二、建立本地站點

三、管理本地站點

第三節 網頁文件的基本操作

一、新建網頁

二、保存網頁

三、關閉網頁

四、打開網頁

五、預覽網頁

第四章 網頁中的基礎元素 4學時

教學目的：

通過本章的學習可以掌握在網頁中的文本和段落的設置方法，掌握圖像的插入及其屬性的設置的方法，熟悉頁面屬性的設置，熟悉各種超級鏈接及設置。

教學重點與難點：

文本和段落的設置文本、圖像的插入及其屬性的設置、超鏈接

第一節 在網頁中插入文本

一、插入文本

二、設置文本格式

三、段落格式的編輯

四、設置列表

五、簡單的CSS樣式應用

第二節 在網頁插入圖像

一、插入圖像

二、設置圖像屬性

三、編輯圖像

四、圖像外部編輯

五、鼠標經過圖像

六、創建導航條

第三節 插入其他網頁元素

一、水平線

二、日期和時間

第四節 設置網頁的頁面屬性

一、打開頁面屬性對話框

二、設置網頁的標題

三、設置網頁的背景

四、設置網頁的文本

五、設置網頁的邊界

第五節 設置超級鏈接

一、超鏈接的路徑

二、創建基本超鏈接

三、錨點鏈接

四、熱區鏈接

五、電子郵件鏈接

第五章 頁面布局規劃 4學時

教學目的：

學會運用表格進行數據展示及進行網頁布局，學會使用框架結構建立網頁。

教學重點與難點：

表格的插入、表格的編排和設置、利用表格進行布局

第一節 表格的基本操作

一、插入表格

二、添加內容

三、選擇表格

四、設置表格屬性

五、編輯表格的基本操作

第二節 表格布局

一、布局視圖

二、繪制布局表格和布局單元格

三、編輯布局表格和布局單元格

第三節 框架布局

一、建立框架

二、框架面板

三、設置框架的屬性

四、保存框架

五、框架中的超鏈接

第六章 網頁中的層和時間軸 2學時

教學目的：

通過教學，使學生掌握Dream weaver層的概念、層的操作方法；時間軸的概念、時間軸中各元素的功能及時間軸的常用操作方法。

教學重點與難點：

層的操作方法、時間軸操作方法

第一節 層

一、創建層

二、層的基本操作

三、層與表格的轉換

第二節 時間軸

一、認識時間軸

二、創建動畫

第七章 表單的應用 4學時

教學目的：

表單，可以收集用戶的信息和反饋意見，是網站管理者與瀏覽者之間溝通的橋梁，在本章將學習如何使用表單創建描述表單信息的網頁。

教學重點與難點： 創建表單、處理表單的方法

第一節 創建表單

一、表單概述

二、表單對象

三、插入表單

四、表單屬性

第二節 創建表單對象

一、創建文本域

二、創建復選框

三、創建單選按鈕

四、創建列表/菜單

五、創建文件域

六、創建跳轉菜單

七、創建按鈕

八、創建單選按鈕組

九、創建圖像域

第三節 處理表單

一、使用行為驗證表單

二、利用郵件傳送表單

第八章 CSS樣式使用 6學時

教學目的：

通過教學，使學生掌握CSS樣式表的基本概念，會使用CSS樣式面板。掌握創建CSS樣式表的方法，新建CSS樣式表，設置CSS樣式定義對話框，創建外部CSS樣式表，使用和編輯自定義CSS樣式表。

教學重點與難點：

新建和和應用CSS樣式表，CSS經典應用（大字、下劃線）、濾鏡的作用。

第一節 CSS樣式概述

一、認識CSS樣式

二、CSS樣式的類型

三、CSS樣式面板

第二節 使用CSS樣式

一、創建CSS樣式

二、附加外部CSS樣式

三、應用CSS樣式

四、編輯CSS樣式

五、刪除CSS樣式

第三節 CSS樣式設置

一、類型

二、背景

三、區塊

四、方框

五、邊框

六、列表

七、定位

八、擴展

第四節 CSS樣式經典實例

一、改變鼠標形狀

二、更改超鏈接的樣式

三、應用CSS濾鏡

第九章 在網頁中使用行為 2學時

教學目的：

通過教學，使學生掌握Dreamweaver中行為的概念，熟練掌握使用行為面板對行為的各種操作方法。使用Dreamweaver 的內置行為為網頁對象添加各種常用的行為。

教學重點與難點： 使用Dreamweaver 的內置行為為網頁對象添加各種常用的行為

第一節 認識行為

一、認識行為

二、使用行為面板

三、增加行為的基本步驟

四、修改行為

第二節 使用Dreamwerver內置的行為

一、播放聲音

二、打開瀏覽器窗口

三、彈出消息

四、轉到URL

五、設置狀態欄文本

六、控制Shockwave或Flash 第十章 網頁中的多媒體應用 2學時

教學目的：

通過教學，使學生掌握在Dreamweaver中插入音頻文件的方法，掌握在Dreamweaver中插入Flash文件的方法，掌握在Dreamweaver中嵌入視頻文件的方法。

教學重點與難點：

在Dreamweaver中插入音頻文件、Flash文件、嵌入視頻文件的方法。

第一節 在網頁中插入音頻

一、鏈接到音頻文件

二、在網頁中嵌入音頻文件

三、在網頁加入背景音樂

第二節 在網頁中插入Flash動畫

一、插入Flash文本

二、插入Flash按鈕

三、插入Flash動畫

第三節 在網頁中插入視頻

一、鏈接到視頻文件

二、在網頁中嵌入視頻文件

第十一章 模板和庫 1學時 教學目的：

通過教學，使學生了解模板的概念；理解歷史記錄和庫的概念；熟練掌握模板的創建和使用方法；掌握歷史記錄和庫的使用方法。

第一節 模板

一、模板的創建

二、利用模板更新網頁

第二節 庫

一、創建庫項目

二、利用庫項目更新網頁

第十二章 網站的測試與上傳 1學時

教學目的：

通過教學，使學生了解測試的目的以及測試所包含的內容；熟練掌握測試的方法；掌握HTML優化的方法；掌握上傳站點的方法。

第一節 網站的測試、發布與域名

一、網站的測試與發布

二、網站的維護

三、網站的管理

第二節 域名

一、域名的概念

二、域名的注冊

三、虛擬主機

四、整機托管

第三篇：靜態網頁設計總結報告

網頁設計總結報告

目錄

一、設計介紹.................................................................................................................2

二、制作過程............................................................................................................................3

1、布局……………………………………………………………………………………………………………………………..…3

2、相關插入……………………………………………………………………………………………………………………………..4

3、相關鏈接……………………………………………………………………………………………………………………………..4

三、制作代碼.................................................................................................................5

四、心得體會.............................................................................................................7

五、參考資料.............................................................................................................8

一、網頁設計介紹

從文件的角度來說，一個網頁就是一個HTML文件。當瀏覽者輸入一個網址或單擊某個鏈接后，在瀏覽器中顯示出來的就是一個網頁。一般網頁上都會有文本、圖片等信息，而復雜一些的網頁上還會有聲音、視頻、動畫等多媒體內容，為網頁增添了豐富的色彩和動感。靜態網頁是指網頁文件中沒有程序，只有HTML代碼，一般以.html或.htm為后綴名的網頁，靜態網站內容不會在制作完成后發生變化，任何人訪問都顯示一樣的內容。網站是一系列邏輯上可以視為一個整體的網頁集合，是許多相關網頁有機結合而組成的一個信息服務中心。對于小型網站，是指帶有一定主題的多個網頁集合；對于大型網站還包含數據庫和服務器端應用程序等如新浪、網易、搜狐等門戶網站。在構成網站的眾多網頁中，有一個頁面比較特殊，稱為首頁，即網站的設計課，與以前的課相比更加注重個人的創意能力和軟件的運用實戰能力，更加綜合的考驗了我，使我更加完善自我。現將我的作業情況匯報如下：

將理論與社會實踐相結合，通過行業生產實踐的形式，進一步了解、認識網頁藝術設計工作在實際生活中廣泛應用的表現渠道和表現方法，提高認知水平，縮短工作磨合期。根據項目課題要求，結合本專業所學網頁設計理論知識，通過對網絡廣告等方面的調研和項目實踐形成文字思路，并以自命題目設計完成多媒體網頁設計制作。兩項內容要求準確、完整，工作過程報告內容既要客觀實際又要有認識深度，設計作品新穎有創意。

我首先的工作就是制作網站整體框架和收集資料，將其通過美圖秀秀完善圖片，然后導入Dreamweaver進行排版，并進一步的加以制作，完善美化，如加 入 Flash Css。由于我在某些方面的技術運用還不能得心應手，許多情況下不得不求他人。

我經過初步的構思，我因為要做的是湖南特色美食設計，所以要有一個時光主題，我在網上自己找到一些圖片和文字，做一個簡單的網站初步積累，考慮到主要是鍛煉我們相關軟件的操作能力與代碼初步掌握的熟練成度，由于我們這段時間沒有進行網站相關的課程，剛著手時，很多技術上的問題就暴露出來了，我感覺制作網頁是需要耐心的，如果你沒有耐心，你學不好網頁設計，這是我最大的體會。因為當你碰到一個問題時，如果不能立刻得到問題的答案，你可能需要長時間去解決，我就碰到過一個問題，用了很長時間才解決，在網上查各種資

料，向同學請教。學習網頁設計需要堅持，堅持不斷的學習，因為設計網頁的軟件在不斷的更新，只有綜合運用多種知識，富于個性的頁面,才能全面展現互聯網這一新型媒體的獨特魅力和多維空間的超強功能。我完成了全部課件內容，忙碌的幾周讓大家從新熟悉制作網站的過程，由于這次課程的網頁都是靜態的，難度不算大。但收獲還是很多的。比如將你的標志盡可能的放在每個頁面上最突出的位置，突出你的標準色彩，這些就是我的經驗收獲。

參考資料：

網站建設自學資料；

百度百科。

江蘇大學

靜態網頁制作報告

學院:計算機學院

班級 :網絡1302

姓名:劉賽雄

學號:3130610036

第四篇：大學生活主題靜態網頁設計范文

畢業綜合實踐報告

Graduation Synthesis Practice Report

大學生活主題靜態網頁設計

Static Webpage Design of University Class Theme

系別:計算機工程系

班級:

學生姓名:

學號:

指導老師:

完成日期:2014/4/30

第五篇：網頁設計教學大綱

網頁設計教學大綱

一、課程性質與任務

1、課程性質

《網頁設計與制作》是中計算機專業開設的一門專業必修課，是計算機類專業的一門實踐環節課程，也可以作為其他相關專業的實踐課程或選修課，它是一門操作性和實踐性很強的職業技術課程。本課程的主要內容為系統介紹網頁編輯與制作軟件Dreamweaver cs3，通過這種有代表性的網頁制作軟件的使用，掌握網站設計的全過程，并能熟練地制作出有專業水準的網站。2、課程任務

本門課程在專業教學計劃中起著十分重要的作用，通過這門課程，學生可以掌握以下技能和知識：

* 掌握網站的開發流程，如建站規劃、效果圖制作、建立站點等相關知識。

* 掌握各種網頁元素在Dreamweaver cs3中的使用。例如表格、文本、圖像、超級鏈接、層和表單等。

* 熟悉一些網頁設計輔助軟件的功能和使用方法。例如Flash、Fireworks、Photoshop等。* 掌握測試和發布網站的方法。包括網站測試的內容和方法。* 能夠解決一些網頁設計中的常見問題。

* 了解ASP開發平臺的搭建，Dreamweaver cs3在動態網頁制作方面的應用。

二、課程教學目標與要求

1、本課程的基本目標

（1）使學生通過本課程的學習，掌握Dreamweaver cs3的使用方法，學會使用Dreamweaver cs3制作Web網頁的技術。

（2）本課程學習結束后，學生應能自行設計各種網頁、開發一定規模的網站，使學生通過本課程的學習，熟練掌握其基本制作方法和技巧，并最終設計一個綜合性的網站并且編制簡單的腳本上傳到互聯網上。

2、課程在知識、素質方面的基本要求（1）知識要求

深入了解Internet，理解WWW、HTTP、HTML等概念及作用；掌握網站設計和發布的1 流程。理解網站維護管理的意義及重要性，理解服務器、客戶端、瀏覽器的概念和作用；了解多種網頁制作軟件和圖像處理軟件相結合設計網站的好處。了解Dreamweaver cs3在動態網站上的應用。（2）素質要求

本課程將培養學生以下幾方面的職業素質： 服務意識：能夠為他人提供優質的服務；

文明法制意識：網站內容應積極健康向上，不做違法的事；

合作精神：能夠與他人進行合作，具有協調工作能力和組織管理能力； 較強的自我知識及技術更新能力：快速跟蹤網頁制作的新技術及市場應用動態。

三、教學內容結構

學生應按照《網頁設計與網站建設課程設計指導書》的要求認真設計。教師應掌握好課程設計的總體進度，并組織答疑，以保證學生按時保質、保量地完成任務。學生最后所完成的《網頁設計與網站建設課程設計報告》應當做到內容齊全、條理清楚、文字通暢、打印或書寫規范。

（1）網站建設總體策劃

（2）域名注冊與建站方式選擇論證（3）網站總體設計（4）網站靜態頁面設計（5）Web數據庫設計

（6）網站測試、發布與維護管理

四、教學內容與要求

第一章

網頁設計概述：重點講授網站，網頁設計的概念；了解網頁設計設計的相關概念；了解網頁設計的語言HTML；掌握學習網頁設計的某一種工具；理解網站和網頁的關系。

第二章

網頁賞析：初步了解網頁賞析要求；理解網頁賞析的理論要求；掌握網頁突破性設計的要素；分清各類網站的設計要求和框架；理解實例分析過程。

第三章

網頁規劃與布局：了解網頁的組織結構，掌握網頁內容上的組織方法；熟悉網頁設計的流程和注意事項；了解網站的規劃與建設；熟悉網站設計，掌握網站與網頁的區別。

第四章

網頁設計創意：通過對創意思維及創意手法的講解，輔以對優秀網頁作品的分析，啟發學生全面的創新思維，進而從多角度的思維中獨樹一幟，培養學生的個性化意識。讓學生對優秀設計的創意進行解讀和闡釋，并分析其創新之處，鼓勵學生敢于發覺新意，提2 出自己獨到的見解。

第五章

網頁編程語言：了解HTML、CSS的定義、概念和作用；理解HTML語言中的各種文本格式、字符格式、段落設置、列表標記的作用；會用HTML語言總的標記設置顏色、文本格式和列表；掌握HTML的語法結構，掌握HTML語言中標記的使用方法；理解表格、框架、表單的作用。理解CSS樣式表的作用和意義；掌握CSS樣式表的結構；掌握在網頁中添加CSS的方法。掌握三種添加樣式信息的方法，會使用CSS設置網頁格式和列表的格式。

第六章

網頁制作工具：

（1）通過教學，使學生能夠用基本法和高級法新建站點、編輯站點，掌握如何在站點中新建文件和文件夾，會預覽網頁。

（2）掌握表格的組成和基本操作方法；熟練掌握穿件表格、表格操作、表格編輯的方法；（3）掌握表單的基本概念和表單的各個組成元素；掌握插入表單以及表單元素的方法；會制作具有表單的網頁。

（4）通過教學，掌握在動畫中添加聲音的操作方法以及設置動畫聲音的各種屬性。（5）通過教學，使學生掌握導出與發布Flash動畫的方法，能夠準確設置Flash8動畫作品的發布格式。

第七章

動態網頁介紹：掌握靜態網頁和動態網頁的概念；了解實現動態網頁的四種技術（CGI、ASP、JSP和PHP）的特點；掌握數據庫、數據庫管理系統、Web數據庫的概念及關系數據庫的特點；理解數據庫在開發動態網頁中的地位；了解ASP、JSP、PHP如何訪問Web數據庫。

第八章

設計實例：綜合運用前七章所學的知識創建和編輯一個站點，掌握主頁和子頁、子頁之間、以及站內和站外的鏈接。

五、教學實施、教學方法：本課程是一門應用型課程，涉及到以前所學知識點較多，因此在教學中應注意啟發式教學并加強項目教學的直觀性。、教學場所與設備要求：安裝有 Windows XP 或 Windows 2000 的機房均可以進行實驗，教學要求在多媒體教室進行。

六、考核與評價方式

有筆試和機試兩種考試形式，主要由選擇題、實驗操作題組成。在總成績中，筆試成績和上機考試成績各占50%。