第一篇：網頁設計教學與實驗內容7

教課程名稱：網頁設計與制作

學七

教學題目：Photoshop圖層的應用 講授內容：

? 圖層的概念 ? 圖層的基本操作。一．圖層的概念

圖層是對圖像進行各種合成效果的重要途徑。

不同圖層中的圖像可以進行獨立操作，更改圖層的順序和屬性可以改變圖像的合成效果。

? ?

? ? 背景圖層：默認為鎖定，未解鎖不允許更改。

調整圖層：調整圖層中的色彩調整對其下方的所有圖層產生作用。填充圖層：純色填充、漸變填充和圖案填充。圖層樣式：投影、發光、浮雕等效果。

二．新建圖層

1．單擊“圖層”面板的新建按鈕創建新圖層。2．復制圖層可產生新圖層。3．輸入文字時可生成新圖層。三．復制圖層

將需復制的圖層拖至新建圖層按鈕上，形成圖層的“副本”。四．刪除圖層

選擇需刪除的圖層，單擊“刪除圖層”按鈕，或將圖層拖至“刪除圖層”按鈕。五．合并圖層

向下合并、合并可見圖層、拼合圖層。六．調整圖層順序

直接拖動圖層或選擇“圖層/排列”命令。七．鏈接圖層

固定當前圖層和鏈接圖層間的相對位置，鏈接后視為一個整體，可進行移動、縮放、旋轉、色彩調整和合并等操作。

案例文件：講授案例彩色圓點.psd 選擇需要鏈接的多個圖層（注：使用Ctrl鍵），單擊“鏈接圖層”按鈕。八．鎖定圖層

防止圖層被誤操作，可將圖層鎖定?！版i定透明像素”、“鎖定圖像像素”、“鎖定位置”、“鎖定全部”。九．對齊和分布圖層

選擇多個圖層，在工作區頂端“選項”面板中使用對齊和分布圖層按鈕。案例文件：講授案例彩色圓點.psd 十．圖層屬性

圖層名稱、不透明度、顯示隱藏。

十一．應用舉例——背景特效制作（參照“講授案例背景特效.psd”）

1.新建800×600 px的黑色畫布。

2.選擇20px的黃色（#fdd000）畫筆工具，調整為硬度100%、間距150%的虛線。3.新建“圖層1”，按住Shift繪制長短不

一、疏密有致的垂直虛線。4.新建“圖層2”，改變畫筆顏色為綠色（#218f49），畫筆直徑為9px，按步驟3，隨意繪制另一色彩的垂直虛線。

5.新建“圖層3”，改變畫筆顏色及畫筆直徑，按步驟3，隨意繪制另一色彩的垂直虛線。

6.選擇直排文字工具，輸入“Effect Design”。

7.復制文字圖層多份，分別改變各圖層文字的大小、不透明度以及位置。8.合并所有圖層，保存于“實驗素材”文件夾，命名“我的背景特效.jpg”。十二．案例操作要點總結：

畫筆色彩、間距、直徑；直線；圖層自由變換；圖層不透明度。

實驗內容

一．根據教學案例的說明，完成“背景特效”。

二．根據“實驗素材水晶按鈕.psd”，完成水晶按鈕的特效。制作過程如下：

1.新建200×80像素，分辨率72，白色背景的畫布。2.新建“圖層1”，前景色設置為“綠色”（#45b035）。

3.選擇圓角矩形工具，屬性設置為“填充像素”，半徑40像素，在圖層1中繪制圓角矩形。4.設置圖層1的“圖層樣式”，選擇“投影”，90度，不透明度40%，距離2像素。選擇“內陰影”，不透明度80%，距離13像素，大小21像素。5.選擇圓角矩形工具，屬性設置為“路徑”，半徑80像素。6.新建“圖層2”，在圖層2上繪制圓角矩形路徑。

7.打開“路徑”面板，單擊“將路徑作為選區載入”按鈕。

8.設置前景色為白色，選擇漸變工具，屬性設置漸變樣式為“前景到透明”和“線性漸變”，在選區中從上到下繪制漸變色。9.按Ctrl+D取消選區，選擇“圖層1”，按Ctrl鍵同時單擊圖層面板中“圖層1”的縮略圖，將圖層1的選區載入。

10.選擇矩形選框工具，單擊“與選區交叉”屬性按鈕，在“圖層1”中繪制選區，使選區交叉后僅保留圓角矩形選框的下1/4部分。

11.使用“選擇/羽化…”命令，將交叉后的選區羽化，羽化值為5像素。

12.選擇“圖像/調整/色階…”命令，在對話框中拖動滑塊，使羽化后的選區內容變亮。之后取消選區。

13.選擇橫排文字工具，輸入“確定”文本，并調整文本至按鈕中央，設置文本的“圖層樣式”為“投影”。此時效果已完成。

14.刪除“路徑”面板中的路徑。合并圖層，保存為jpg格式的圖像，命名為“水晶按鈕.jpg”。

第二篇：網頁設計與開發實驗教學大綱

實驗

一、優秀網站賞析 1.實驗目的要求

通過對不同類型、不同風格、不同特色的優秀網站的欣賞，使學生對網站制作課程有一個初步了解，誘發學生的學習興趣。同時指導學生分析各類網站的總體布局、色彩搭配、內容規劃等，為后面的學習打基礎。2.實驗主要內容

各種不同類型和風格的網站地址如下： 綜合門戶網站：新浪網 http://>

歡迎來到我的個人主頁

---

這是我開發的第一個網頁

第三篇：《網頁設計》實驗教學大綱

《網頁設計》實驗教學大綱

《網頁設計》實驗教學大綱

開課實驗室：網絡技術實驗室 課程學時：36 課程名稱：網頁設計 課程編號：12412219 實驗學時：36 面向專業：動畫

一、實驗教學目的和任務

《網頁設計》是教育技術學專業的一門實踐性課程，其基本任務是使學生通過學習本課程，掌握靜態網站運行的基本原理和開發動靜態網站的基本方法，熟悉HTML基礎知識，了解JavaScript語言程序設計的思想并能夠讀懂復雜的HTML代碼和編寫一些簡單的靜態網頁，并能運用JavaScript和Css等技術設計網頁界面，為今后從事計算機網站開發，網絡編程以及B/S軟件系統的開發打下良好的基礎。

二、配套教材和實驗教材

教材：莫治雄 李 捷 《網頁設計實訓教程》（《網頁設計》實驗教學大綱

4、按指定時間上機，不得無故缺席。

5、嚴格遵守校校規校紀和實驗室規章制度。

六、主要實驗內容

實驗一

HTML中的Hr,p,br,img等標簽的使用(1)了解HTML文檔基本結構(2)掌握HTML各種標簽的作用(3)比較jsp和HTML文件(4)HTML標記語言設計

實驗二

用DreamWeaver8創建一個簡單的站點(1)了解站點的含義及站點結構的類型(2)掌握創建站點的基本步驟和基本過程(3)熟悉如何用Dreamweaver創建站點

實驗三

用表格布局頁面元素(1)了解表格布局的含義

(2)熟悉table tr td等html標簽的作用(3)熟悉表格的相關操作

(4)建立一個簡單網頁，并用表格對網頁進行布局設計

實驗四

用框架布局頁面元素(1)了解框架的基本含義(2)熟悉frame標簽的屬性和方法(3)設計一個用框架布局的網頁

實驗五CSS樣式的應用一(1)了解Css的基礎知識(2)熟悉Css的幾種使用方式

(3)掌握用Dreamweaver進行Css的設計

《網頁設計》實驗教學大綱

(4)設計一個網頁，并用Dreamweaver設計網頁的Css以實現網頁外觀

實驗六

CSS樣式的應用二(1)了解Div+Css布局技巧(2)理解Div對象的基本工作原理(3)熟悉Div和Css對象的配合使用

(4)設計一個網頁，并用Div+Css對其布局進行設計

實驗七

表單設計一(1)了解表單設計的基礎知識(2)了解input標簽的相關屬性和方法(3)屬性常用表單設計元素(4)設計一個登陸網頁表單

實驗八

表單設計二

(1)了解Css在表單美化中的作用(2)了解表單元素的常用屬性設置

(3)設計一個表單，并用Css對其外觀進行美化

實驗九

流媒體及行為的應用一

（1）了解流媒體的基本概念

（2）了解哪些格式的視頻和flash動畫可以加入到網頁（3）設計一個網頁，并在其中加入視頻和flash動畫等內容

實驗十

流媒體及行為的應用二（1）了解行為的基本概念（2）了解行為面板的使用

（3）熟悉交換圖像和恢復交換圖像等常用行為的設置和使用

實驗十一

模板和庫

《網頁設計》實驗教學大綱

（1）了解模板和庫的基本概念（2）了解模板面板的使用

（3）熟悉模板使用，學會使用模板創建和更新網頁，使用庫項目更新網頁

實驗十二

Dreamweaver 8服務器技術一（1）了解web服務器的基本概念（2）了解web服務器的相關配置

（3）熟悉IIS的配置和使用，熟悉用IIS發布網站

實驗十三

Dreamweaver 8服務器技術二（1）了解動態網頁的基本概念（2）了解asp的使用

（3）會制作簡單的asp動態網頁

實驗十四

網站的發布與管理（1）了解網站空間的基本概念（2）學會空間的申請與網站發布（3）學會網站的管理、維護與更新

實驗十五

綜合實例(Div+Css)

綜合實例

(1)了解Div+Css布局技巧(2)理解Div對象的基本工作原理(3)熟悉Div和Css對象的配合使用

(4)設計一個主頁，并用Div+Css對其布局進行設計

實驗十六

綜合實例(設計數據庫)（1）了解數據access的基本概念（2）熟悉數據庫access的基本使用（3）設計一個簡單的用戶登錄數據庫

《網頁設計》實驗教學大綱

實驗十七

綜合實例(動態網頁設計)（1）了解動態網頁的基本概念（2）熟悉asp的使用

（3）用asp設計一個簡單的動態網站，實現用戶的登錄功能

第四篇：網頁設計與制作實驗過程及報告

網頁制作過程及報告

網頁設計與制作的一般實驗步驟：

1、確定網站主題

網站里的每一個網頁都要有統一的風格，以加強渲染自己性格的效果。最重要的是做出自己的風格，吸引瀏覽者的眼球。

2、搜集材料

主要在網站上搜集所要的網頁信息，包括圖片、文字、相關的新聞，同時，查詢相關的圖書、報紙、光盤、多媒體等，也可以得來更加有說服力的信息。

3、規劃網站

我的網站包括5個頁面。版面設計要靈活，根據各部分內容的不同適當的自由設計。但是每個頁面的主元素和位置不能變。用CSS設計一個樣式，以保證隨時、準確的調用。另外，為了網頁布局的協調，還可以加入flash動態圖片，會達到更好的效果。

4、選擇合適的制作工具

做網頁的首先工具當然為Dreamweaver。

5、認識網頁設計工具Dreamweaver

（1）Dreamweaver的啟動

（2）窗口組成的認識

6、新建站點

7、站點中首頁的創建

8、制作網頁

素材、風格、模板都設計好以后，下一步就是具體的制作網頁。制作網站時，首先要做的就是站點的規劃，建立一個本地站點。網頁中的css 樣式文件也應統一管理，做到有條不紊。

9、根據自己的網頁風格，在網上搜集合適的圖片。

最后還要制作各個頁面的鏈接，把整個網頁可憐起來，形成一個統一的整體，方便瀏覽者進行各個頁面間的跳轉。

10、上傳測試

網頁制作完畢以后，要進行測試，在瀏覽器上運行自己的網站，反復測試，以發現設計中的缺陷。

實驗結果及理論分析：

通過這簡短的三個周的學習，讓我有一個獨立設計，制作網頁的機會，通過這次試驗，我的收益頗多。首先，獨立的實踐了一個完整的網站設計的全過程，把設計中零散的注意點和要求在自己大腦中形成了一個完整的框架體系，使平時學到的知識點有了一個質的升華，并且合理的在試驗中進行了實踐。第二，在這次實驗的過程中，我搜集了大量的素材和網頁設計的技術技巧方面的書，擴大了知識面，給我在以后的設計過程中能博采眾長，制作出技術精湛的網頁打下了基礎。最后，我感受最深的是，技術方面的學習，最重要的是自己實踐做出東西，只通過自己的親身實踐，才能學會、學懂、學通技術。

朱禮明

信息管理與信息系統1301班

2014.07.23

第五篇：電子政務網頁設計與制作實驗教案

《電子政務網頁設計與制作》實驗教案

實驗名稱 IIS的安裝與調試

實驗類型：演示型√ 驗證型□ 綜合型□ 設計型□ 實驗類別：基礎√ 專業基礎□ 專業□ 實驗要求：必做√ 選做□ 實驗學時：2 實驗對象：本科生

一、實驗目的

1．掌握檢測不同版本Windows操作系統IIS的安裝與否； 2.掌握在Windows操作系統中安裝IIS的方法；

3．掌握利用IIS設置虛擬目錄調試ASP程序的初步方法。

二、實驗重點、難點

利用IIS設置虛擬目錄調試ASP程序

三、實驗原理

ASP模型的運行原理是：當瀏覽器向Web服務器請求.asp文件時，服務器端腳本開始運行，WEB服務器調用.asp文件，將運行結果發送到瀏覽器。

四、實驗設備、實驗教學軟件介紹

個人PC，Windows 2000,IIS 5.0,記事本

五、實驗分組及組織情況

無

六、實驗的基本操作與實驗重要步驟

1、實驗前先觀看指導老師的演示；

2、如果計算機未安裝IIS，使用安裝程序安裝IIS；

3、利用記事本編寫教材P13 1－1的ASP程序并存盤；

4、在IIS中建立虛擬目錄，調試ASP程序，找出并解決問題，確保調試成功，并相互訪問；

5、學生獨立完成相應的實驗報告。

七、實驗教學，如實驗教學內容設計、時間設計、實驗教學手段設計、實驗指導設計等；

參照上述實驗內容，分模塊講解各業務流程的作用和操作方法

八、預期的實驗效果

多數學生能獨立完成實驗，掌握基本原理和方法。

九、實驗中應注意事項

對于因操作系統本身的原因，無法安裝調試好IIS，需重新安裝系統。

十、課外實驗或思考題

教材P13 練習1-1

十一、實驗教材及實驗參考資料

《ASP網頁數據庫短訓教程》、劉瑞新主編，機械工業出版社，2005年出版

十二、實驗后記

學生獨立完成實驗報告

實驗名稱 HTML網頁編輯

實驗類型：演示型√ 驗證型□ 綜合型□ 設計型□ 實驗類別：基礎√ 專業基礎□ 專業□ 實驗要求：必做√ 選做□ 實驗學時：2 實驗對象：本科生

一、實驗目的

1．掌握HTML基本標記的使用； 2.掌握HTML中超級鏈接的使用方法；

3．掌握HTML中特殊符號、圖片鏈接的使用方法。

二、實驗重點、難點

HTML中特殊符號、圖片鏈接的使用方法

三、實驗原理 HTML標記語言

四、實驗設備、實驗教學軟件介紹

個人PC，Windows 2000,IIS 5.0,記事本

五、實驗分組及組織情況 無

六、實驗的基本操作與實驗重要步驟

1.實驗前先觀看指導老師的演示；

2.利用記事本編寫教材P34 2－1的HTML程序并存盤； 3.調試；

4.學生獨立完成相應的實驗報告。

七、實驗教學，如實驗教學內容設計、時間設計、實驗教學手段設計、實驗指導設計等；

參照上述實驗內容，分模塊講解各業務流程的作用和操作方法

八、預期的實驗效果

多數學生能獨立完成實驗，掌握基本原理和方法。

九、實驗中應注意事項

注意熱點鏈接的使用，調試出問題時，多從連接文件的上下級目錄上找原因。

十、課外實驗或思考題

教材P34 練習2-1

十一、實驗教材及實驗參考資料

《ASP網頁數據庫短訓教程》、劉瑞新主編，機械工業出版社，2005年出版

十二、實驗后記

學生獨立完成實驗報告

實驗名稱 Vbscript對象編程

實驗類型：演示型√ 驗證型□ 綜合型□ 設計型□ 實驗類別：基礎√ 專業基礎□ 專業□ 實驗要求：必做√ 選做□ 實驗學時：2 實驗對象：本科生

一、實驗目的

1．掌握Vbscript的基本數據類型、常量、變量、表達式和常用函數； 2.掌握在HTML中插入Vbscript編碼的方法； 3．掌握事件驅動程序的編制。

二、實驗重點、難點

事件驅動程序的編制，面向對象的程序設計思想的掌握。

三、實驗原理

Vbscript事件驅動程序編制。

四、實驗設備、實驗教學軟件介紹

個人PC，Windows 2000,IIS 5.0,記事本

五、實驗分組及組織情況

無

六、實驗的基本操作與實驗重要步驟

1.實驗前先觀看指導老師的演示；

2.利用記事本編寫教材P74練習4－1題的程序并存盤； 3.調試；

4.學生獨立完成相應的實驗報告。

七、實驗教學，如實驗教學內容設計、時間設計、實驗教學手段設計、實驗指導設計等；

參照上述實驗內容，分模塊講解各業務流程的作用和操作方法

八、預期的實驗效果

多數學生能獨立完成實驗，掌握基本原理和方法。

九、實驗中應注意事項

對象編程的思想，對象事件的編程方法。

十、課外實驗或思考題

教材P74 練習4-1

十一、實驗教材及實驗參考資料

《ASP網頁數據庫短訓教程》、劉瑞新主編，機械工業出版社，2005年出版

十二、實驗后記

學生獨立完成實驗報告

實驗名稱 表單設計

實驗類型：演示型√ 驗證型□ 綜合型□ 設計型□ 實驗類別：基礎√ 專業基礎□ 專業□ 實驗要求：必做√ 選做□ 實驗學時：2 實驗對象：本科生

一、實驗目的

1．掌握DHTML中INPUT控件的使用； 2.掌握DHTML中SELECT控件的使用； 3．掌握DHTML中TextArea控件的使用。

二、實驗重點、難點

掌握DHTML中INPUT控件的使用

三、實驗原理 DHTML語言

四、實驗設備、實驗教學軟件介紹

個人PC，Windows 2000,IIS 5.0,記事本

五、實驗分組及組織情況

無

六、實驗的基本操作與實驗重要步驟 1.實驗前先觀看指導老師的演示；

2.利用記事本或Dreamweaver等軟件編寫表單程序并存盤； 3.調試；

4.學生獨立完成相應的實驗報告。

七、實驗教學，如實驗教學內容設計、時間設計、實驗教學手段設計、實驗指導設計等；

參照上述實驗內容，分模塊講解各業務流程的作用和操作方法

八、預期的實驗效果

多數學生能獨立完成實驗，掌握基本原理和方法。

九、實驗中應注意事項 Dreamweaver集成化工具的使用

十、課外實驗或思考題

教材P121 練習6-1

十一、實驗教材及實驗參考資料

《ASP網頁數據庫短訓教程》、劉瑞新主編，機械工業出版社，2005年出版

十二、實驗后記

學生獨立完成實驗報告

實驗名稱 Response對象應用

實驗類型：演示型√ 驗證型□ 綜合型□ 設計型□ 實驗類別：基礎√ 專業基礎□ 專業□ 實驗要求：必做√ 選做□ 實驗學時：2 實驗對象：本科生

一、實驗目的

1．掌握Response對象中Write方法的使用； 2.掌握Response對象中Redirect方法的使用； 3．掌握Response對象中End方法的使用。

二、實驗重點、難點

Response對象中Write方法的使用

三、實驗原理

ASP中Response對象應用

四、實驗設備、實驗教學軟件介紹

個人PC，Windows 2000,IIS 5.0,記事本

五、實驗分組及組織情況

無

六、實驗的基本操作與實驗重要步驟

1.實驗前先觀看指導老師的演示；

2.利用記事本或Dreamweaver等軟件編寫程序并存盤； 3.打開IIS并設置虛擬目錄進行調試； 4.學生獨立完成相應的實驗報告。

七、實驗教學，如實驗教學內容設計、時間設計、實驗教學手段設計、實驗指導設計等；

參照上述實驗內容，分模塊講解各業務流程的作用和操作方法

八、預期的實驗效果

多數學生能獨立完成實驗，掌握基本原理和方法。

九、實驗中應注意事項

對于ASP的內置對象，注意代碼的編寫規范性。

十、課外實驗或思考題

教材P142 練習7-1

十一、實驗教材及實驗參考資料

《ASP網頁數據庫短訓教程》、劉瑞新主編，機械工業出版社，2005年出版

十二、實驗后記

學生獨立完成實驗報告

實驗名稱 交互式表單程序設計

實驗類型：演示型√ 驗證型□ 綜合型□ 設計型□ 實驗類別：基礎√ 專業基礎□ 專業□ 實驗要求：必做√ 選做□ 實驗學時：2 實驗對象：本科生

一、實驗目的

1．掌握交互式表單程序設計的方法； 2.掌握Response對象中Write方法的使用； 3.掌握Request對象中Form集合的應用。

二、實驗重點、難點

Request對象中Form集合的應用

三、實驗原理

ASP交互式表單程序設計

四、實驗設備、實驗教學軟件介紹

個人PC，Windows 2000,IIS 5.0,記事本

五、實驗分組及組織情況

無

六、實驗的基本操作與實驗重要步驟 1.實驗前先觀看指導老師的演示；

2.利用記事本或Dreamweaver等軟件編寫程序并存盤； 3.打開IIS并設置虛擬目錄進行調試； 4.學生獨立完成相應的實驗報告。

七、實驗教學，如實驗教學內容設計、時間設計、實驗教學手段設計、實驗指導設計等；

參照上述實驗內容，分模塊講解各業務流程的作用和操作方法

八、預期的實驗效果

多數學生能獨立完成實驗，掌握基本原理和方法。

九、實驗中應注意事項

注意對于Form集合的運用，代碼要規范。

十、課外實驗或思考題

教材P163 練習8-1

十一、實驗教材及實驗參考資料

《ASP網頁數據庫短訓教程》、劉瑞新主編，機械工業出版社，2005年出版

十二、實驗后記

學生獨立完成實驗報告