第一篇：電子政務網(wǎng)頁設(shè)計與制作實驗教案

《電子政務網(wǎng)頁設(shè)計與制作》實驗教案

實驗名稱 IIS的安裝與調(diào)試

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

一、實驗目的

1．掌握檢測不同版本W(wǎng)indows操作系統(tǒng)IIS的安裝與否； 2.掌握在Windows操作系統(tǒng)中安裝IIS的方法；

3．掌握利用IIS設(shè)置虛擬目錄調(diào)試ASP程序的初步方法。

二、實驗重點、難點

利用IIS設(shè)置虛擬目錄調(diào)試ASP程序

三、實驗原理

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

四、實驗設(shè)備、實驗教學軟件介紹

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

五、實驗分組及組織情況

無

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

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

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

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

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

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

七、實驗教學，如實驗教學內(nèi)容設(shè)計、時間設(shè)計、實驗教學手段設(shè)計、實驗指導設(shè)計等；

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

八、預期的實驗效果

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

九、實驗中應注意事項

對于因操作系統(tǒng)本身的原因，無法安裝調(diào)試好IIS，需重新安裝系統(tǒng)。

十、課外實驗或思考題

教材P13 練習1-1

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

《ASP網(wǎng)頁數(shù)據(jù)庫短訓教程》、劉瑞新主編，機械工業(yè)出版社，2005年出版

十二、實驗后記

學生獨立完成實驗報告

實驗名稱 HTML網(wǎng)頁編輯

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

一、實驗目的

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

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

二、實驗重點、難點

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

三、實驗原理 HTML標記語言

四、實驗設(shè)備、實驗教學軟件介紹

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

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

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

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

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

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

七、實驗教學，如實驗教學內(nèi)容設(shè)計、時間設(shè)計、實驗教學手段設(shè)計、實驗指導設(shè)計等；

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

八、預期的實驗效果

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

九、實驗中應注意事項

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

十、課外實驗或思考題

教材P34 練習2-1

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

《ASP網(wǎng)頁數(shù)據(jù)庫短訓教程》、劉瑞新主編，機械工業(yè)出版社，2005年出版

十二、實驗后記

學生獨立完成實驗報告

實驗名稱 Vbscript對象編程

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

一、實驗目的

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

二、實驗重點、難點

事件驅(qū)動程序的編制，面向?qū)ο蟮某绦蛟O(shè)計思想的掌握。

三、實驗原理

Vbscript事件驅(qū)動程序編制。

四、實驗設(shè)備、實驗教學軟件介紹

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

五、實驗分組及組織情況

無

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

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

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

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

七、實驗教學，如實驗教學內(nèi)容設(shè)計、時間設(shè)計、實驗教學手段設(shè)計、實驗指導設(shè)計等；

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

八、預期的實驗效果

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

九、實驗中應注意事項

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

十、課外實驗或思考題

教材P74 練習4-1

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

《ASP網(wǎng)頁數(shù)據(jù)庫短訓教程》、劉瑞新主編，機械工業(yè)出版社，2005年出版

十二、實驗后記

學生獨立完成實驗報告

實驗名稱 表單設(shè)計

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

一、實驗目的

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

二、實驗重點、難點

掌握DHTML中INPUT控件的使用

三、實驗原理 DHTML語言

四、實驗設(shè)備、實驗教學軟件介紹

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

五、實驗分組及組織情況

無

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

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

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

七、實驗教學，如實驗教學內(nèi)容設(shè)計、時間設(shè)計、實驗教學手段設(shè)計、實驗指導設(shè)計等；

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

八、預期的實驗效果

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

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

十、課外實驗或思考題

教材P121 練習6-1

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

《ASP網(wǎng)頁數(shù)據(jù)庫短訓教程》、劉瑞新主編，機械工業(yè)出版社，2005年出版

十二、實驗后記

學生獨立完成實驗報告

實驗名稱 Response對象應用

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

一、實驗目的

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

二、實驗重點、難點

Response對象中Write方法的使用

三、實驗原理

ASP中Response對象應用

四、實驗設(shè)備、實驗教學軟件介紹

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

五、實驗分組及組織情況

無

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

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

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

七、實驗教學，如實驗教學內(nèi)容設(shè)計、時間設(shè)計、實驗教學手段設(shè)計、實驗指導設(shè)計等；

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

八、預期的實驗效果

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

九、實驗中應注意事項

對于ASP的內(nèi)置對象，注意代碼的編寫規(guī)范性。

十、課外實驗或思考題

教材P142 練習7-1

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

《ASP網(wǎng)頁數(shù)據(jù)庫短訓教程》、劉瑞新主編，機械工業(yè)出版社，2005年出版

十二、實驗后記

學生獨立完成實驗報告

實驗名稱 交互式表單程序設(shè)計

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

一、實驗目的

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

二、實驗重點、難點

Request對象中Form集合的應用

三、實驗原理

ASP交互式表單程序設(shè)計

四、實驗設(shè)備、實驗教學軟件介紹

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

五、實驗分組及組織情況

無

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

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

七、實驗教學，如實驗教學內(nèi)容設(shè)計、時間設(shè)計、實驗教學手段設(shè)計、實驗指導設(shè)計等；

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

八、預期的實驗效果

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

九、實驗中應注意事項

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

十、課外實驗或思考題

教材P163 練習8-1

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

《ASP網(wǎng)頁數(shù)據(jù)庫短訓教程》、劉瑞新主編，機械工業(yè)出版社，2005年出版

十二、實驗后記

學生獨立完成實驗報告

第二篇：網(wǎng)頁設(shè)計與制作教案

《網(wǎng)頁設(shè)計與制作教案》

教師：系部：信息技術(shù)工程系專業(yè)：計算機應用班級：計機

湄洲灣職業(yè)技術(shù)學院

2008-2009學年第一學期

唐 俊 奇

電子信息

07（1）信息07（1）08（2）

1.3 網(wǎng)頁中所使用的技術(shù)

1.3.1 HTML語言和XML語言

1、HTML語言

?HTML只使用SGML中很小一部分標記

?HTML語言（Hyper Text Markup Language 超文本標記語言）

?HTML是純文本的語言，其源代碼可以用各種文本編輯工具進行編輯，常用的網(wǎng)頁制作軟件如FrontPage、Dreamweaver等實際上是自動生成HTML源代碼的工具

2、XML語言

XML（eXtensible Markup Language）1.3.2 動態(tài)網(wǎng)頁

1.3.3 多媒體技術(shù)的應用 1.3.4 Web服務器端程序

1.4 制作網(wǎng)頁的基本方法

1.4.1 制作網(wǎng)頁的基本步驟

1、確定網(wǎng)頁的內(nèi)容

2、設(shè)計網(wǎng)頁的組織結(jié)構(gòu)

3、資料的收集與整理

4、選擇網(wǎng)頁的設(shè)計方法

1.4.2 制作網(wǎng)頁時要注意的問題

1、網(wǎng)頁的標題要簡潔，明確。

2、在文本中要使用水平線，以分割不同部分。

3、對重點段落要強調(diào)顯示。

4、網(wǎng)頁中插入的圖片要盡量的小。

5、圖形要附加文字說明，以便關(guān)閉圖像時查看。

6、網(wǎng)頁中引用的資料及商標（或圖標），不能侵犯版權(quán)?！菊n后小結(jié)】

通過學習，認識網(wǎng)絡(luò)、網(wǎng)站、網(wǎng)頁及相關(guān)信息，理解網(wǎng)頁制作的流程及了解相應開發(fā)工具，為設(shè)計網(wǎng)頁做準備。

第二講 HTML的基本標志與格式標志

【教學內(nèi)容】

講解HTML基本標志對和格式標志?！窘虒W目的】

使學生標志對與格式標志對的使用?！窘虒W重點】

格式標志的使用?！窘虒W難點】

* 使學生掌握超級鏈接標志的使用?！窘虒W重點】

* 字體、圖片和超級鏈接標志的使用。* 網(wǎng)頁中特殊符號的輸入?！窘虒W難點】

* 理解特殊符號對應的標志。* 理解img標志中屬性的意義。* 理解書簽超級鏈接的意義。【教學方式】

討論式、案例分析式、練習式?！窘虒W參考】

1、《網(wǎng)頁設(shè)計與制作》楊尚森 曲宏山 賈文峰等著 電子工業(yè)出版社。

2、《WEB網(wǎng)站設(shè)計》Joel Sklar著 高等教育出版社。

3、《HTML網(wǎng)頁制作教程》材義語編著 鐵道出版社?！拘抡n內(nèi)容】

2.2 插入文字

2.2.1 劃分段落 格式

段落內(nèi)容

標題內(nèi)容 2.2.3 字號屬性

設(shè)置基準字號： 網(wǎng)頁內(nèi)的其他文字，采用下面的格式來定義 ...... Size的有效范圍是1（最大）到7（最小）。如果在Size的值前面帶上“+”號或“-”號，則表示相對于基礎(chǔ)字體增大或減小若干字號。2.2.4 顏色屬性 兩種方式

字符串 2.2.5 字體屬性

2.2.6

文本修飾

......，文字以粗體顯示。......，文字顯示為斜體。......，顯示下劃線。

......，中心線貫穿文字。< EM>......，強調(diào)文字，通常用斜體。

< STRONG>......，特別強調(diào)的文字，通常用黑體。

2.3.2 圖片的屬性

2.4 建立超級鏈接

2.4.1 指向一個目標

1、建立超級鏈接

字符串

2、為圖片建立超級鏈接

3、鏈接到郵件和多媒體文件 鏈接到郵件

請與我聯(lián)系 2.4.2 使用錨點

?使用錨點可以使用戶在一個較長的文檔中跳轉(zhuǎn)，方便地找到要閱讀的內(nèi)容。?建立錨點：

?錨點文字 ?使超級鏈接指向已定義的錨點。?文字 ?文字 2.4.3 新窗口和基準鏈接

1、打開新窗口

Target=“window-name”>開一個新窗口

2、基準鏈接

在 與 之間設(shè)定

BorderColor=“#008000“ >

2.7.3 子窗口屬性設(shè)置

-2.7.4 常見的框架窗口劃分方法（1）標題和正文，分為上下兩部分（2）層次結(jié)構(gòu)，分為上中下三部分

（3）目錄和標題，分為左上、左下、右三部分

（4）標題、目錄和正文，分為上、左下、右下三部分（5）嵌套目錄，分為左、右上、右下三部分 2.7.5 不支持框架的網(wǎng)頁

</p><p><BODY> 很抱歉，饋下使用的瀏覽器不支援框架功能，請轉(zhuǎn)用新的瀏覽器。</p><h2><a name="3" >第三篇：網(wǎng)頁制作與規(guī)劃實驗教案</a></h2><p>實驗一 站點的創(chuàng)建與基本HTML標記的應用</p><p>一、實驗目的及要求</p><p>1.了解組成網(wǎng)頁的基本元素</p><p>2.掌握文本元素的添加和編輯方法 3.掌握圖像元素的添加和運用技巧 4.掌握幾種鏈接的具體創(chuàng)建方法 5.掌握圖像元素的添加和運用技巧</p><p>二、實驗學時</p><p>4學時</p><p>三、實驗內(nèi)容</p><p>任務一：在網(wǎng)頁中基本頁面元素的應用 1．準備工作</p><p>在c盤或其他盤新建一個文件夾作為站點文件夾，文件夾名稱為myweb3。復制給定的一個圖像文件夾images和一個網(wǎng)頁文件sx3-2.htm。</p><p>2．建立本地站點</p><p>‘ 用已學方法建立本地站點。</p><p>3．依據(jù)圖3．38所示的效果，向網(wǎng)頁中添加并編輯頁面元素，具體操作步驟如下。</p><p>(1)在默認打開的網(wǎng)頁中選擇“修改”|“頁面屬性”菜單命令，設(shè)置使</p><p>背景顏色為#CCCCCC。</p><p>(2)輸入網(wǎng)頁首行文本“老郵票知多少”，大小為48像素，顏色為#FFFF00，字體為“華文行楷”粗體，居中對齊。</p><p>(3)在網(wǎng)頁第二行插入更新日期和版權(quán)信息，選擇“插入”l“日期”菜單命令，將當前編輯日期插入網(wǎng)頁，然后利用“插入”面板上“文本”選項卡中的晶按鈕，插入多個空格，再輸入版權(quán)信息“◎版權(quán)所有：D．Wei@sohu．com”整行文字大小為18像素，顏色為#000000，字體為默認字體，粗體，居中對齊。</p><p>(4)在網(wǎng)頁第三行選擇“插入”|“水平線”菜單命令，插入一條水平線，高度為5，其他屬性取默認值。</p><p>(5)在網(wǎng)頁第四行、第七行各插入一行文本，內(nèi)容分別為“紀33(C33)：中國古代科學家、1955．8．25發(fā)行600萬套、全套4枚、新票市場參考價￥550元。”和“紀36(C36)：中國工農(nóng)紅軍勝利完成二萬五千里長征二十周年、1955．12．30發(fā)行600萬套、全套2枚、新票市場參考價￥850元?！蔽淖执笮?8像素，格式為“項目列表”，其他屬性取默認值。</p><p>(6)在網(wǎng)頁第五行選擇“插入”I“圖像”菜單命令，插入四張郵票圖像，文件名分別為0637.jpg、0638.jpg、0639.jpg、0640.ipg。每張圖像的寬為</p><p>110、高為150，其他屬性取默認值。</p><p>(7)在網(wǎng)頁第六行插入一條水平線，寬為400像素，其他屬性取默認值。</p><p>(8)在網(wǎng)頁第八行插入兩張郵票圖像，文件名分別為0645.jPg、0646.ipg，圖像寬高分別為150／110和110／150，其他屬性取默認值。</p><p>4．保存網(wǎng)頁 選擇“文件”“|保存”菜單命令，在站點中將此網(wǎng)頁保存為sx3-1．htm。5．打開并編輯給定的網(wǎng)頁文件sx3．2．htm，如圖3-39所示。</p><p>(1)建立圖像熱點鏈接。為此選中網(wǎng)頁上方圖像，利用“屬性”檢查器</p><p>中的熱點工具在圖像上建立兩個熱點，如圖3．40所示。從左到右兩個熱點分別鏈接到sx3-2-1．htm和sx3-2-2．htm文件(兩個文件可稍后建立)。</p><p>(2)插入命名錨記。為此將光標放在網(wǎng)頁標題“教育天地”后，選擇“插入”I‘‘命名錨i6'’菜單命令，在輸入對話框中輸入錨記“A0“。依此方法在網(wǎng)頁右側(cè)文本“教養(yǎng)員”、“教員”、“特級教師”、“助教”、“講師”、“副教授”和“教授”處分別插入命名錨記，依次為A1～A7。</p><p>(3)創(chuàng)建錨點鏈接。為此分別創(chuàng)建左列目錄文本“教養(yǎng)員”、“教員”、“特級教師”、“助教”、“講師”、“副教授”和“教授”與右列命名錨記A1～A7的錨點鏈接。然后再將各段下方的文本“返回”與標題處錨記A0建立錨點鏈接。</p><p>(4)創(chuàng)建無址鏈接。選中網(wǎng)頁上方文本“教師篇”，在“屬性”檢查器的鏈接欄中輸入“≠}”即可。</p><p>(5)創(chuàng)建郵件鏈接。選中網(wǎng)頁最后一行文本“聯(lián)系”，然后在“屬性”檢查器的鏈接欄中輸入“mailto：abc@163．com'’即可。如圖3—41所示。</p><p>6．保存網(wǎng)頁</p><p>選擇“文件”I“保存”菜單命令，將此網(wǎng)頁保存在站點中。7建立其他網(wǎng)頁</p><p>(1)新建一張網(wǎng)頁，輸入“名人看教育”，文件名為sx3-2-1.htm，保存</p><p>在站點中。</p><p>(2)再新建一張網(wǎng)頁，輸入“教育話題”，文件名為sx3-2-2.htm，保存在站點中。</p><p>8．站點測試</p><p>按【F12】鍵在瀏覽器中預覽，觀察效果與樣圖是否一致。單擊建立的每個鏈接，以測試超鏈接是否都能夠正確跳轉(zhuǎn)。</p><p>任務二：HTML基本標記的應用 1．準備工作</p><p>在C盤或其他盤符下新建一個工作夾，制作的所有頁面都保存在這個文件夾內(nèi)。將給定的圖像素材文件復制到工作文件夾中。</p><p>2．建立名稱為了test.html的HTML頁面，效果如圖4-1所示。頁面功能要求為：</p><p>（1）頁面標題為“基本標記測試”；</p><p>（2）頁面內(nèi)的所有標題文字均為標題2格式；</p><p>（3）單擊鏈接文字時要求在新的瀏覽器窗口中，打開test.html頁面自身；</p><p>(4)圖片名稱為1．gif，存放在工作文件夾中，與test．htm頁面位于同一位置；</p><p>(5)依據(jù)圖4—1所示樣式，完成頁面中的表格制作</p><p>3．建立名稱為login．htm的HTMI。頁面，效果如圖4—2所示。頁面功能要求為：</p><p>(1)頁面標題為“表單標記測試”；</p><p>(2)“姓名”為單行文本框，寬10個字符，最多能填寫20個字符；(3)“性別”為單選按鈕，傳遞的值為“男”和“女”，第一個按鈕為默認選中；</p><p>(4)“職業(yè)”為下拉列表框，內(nèi)容有“教師”、“工人”和“職員”；(5)“愛好”為復選按鈕，傳遞的值分別對應為1，2，3，4，第一個按</p><p>鈕為默認選中；</p><p>(6)“留言”為多行文本框，大小為5行40列，默認內(nèi)容為“說幾句吧!”；(7)“提交”按鈕和“重置”按鈕分別完成提交表單功能和重置表單功能，表單提交方式為get；</p><p>(8)頁面上的所有文字默認為3號字。4．頁面測試</p><p>在瀏覽器中瀏覽所完成的頁面，觀察效果是否符合要求。</p><p>實驗二 表格、表單和框架的應用</p><p>一、實驗目的及要求 1.掌握表格的基本用法 2.掌握表格布局頁面的方法 3.學會用框架布局頁面的方法 4.了解框架布局的特點</p><p>二、實驗學時</p><p>10學時</p><p>三、實驗內(nèi)容</p><p>任務一：表格的應用 1．準備工作</p><p>在c盤或其他盤新建一個文件夾，作為站點文件夾。輸入你想要的站點名稱，這里輸入myweb5。在此文件夾中新建一個圖像文件夾images，并將給定圖像素材復制到其中。</p><p>2．建立本地站點</p><p>用已學方法建立本地站點。3．利用表格編輯首頁</p><p>(1)在默認打開的網(wǎng)頁中，選擇“修改”l‘‘頁面屬性”菜單命令，設(shè)置背景顏色為#clclcl。</p><p>(2)在網(wǎng)頁中插入一個2行2列的表格，參數(shù)設(shè)置如圖5-21所示。選中表格，在“屬性”檢查器的表格“高”輸入框中輸入100，單位為“％”。將第一行兩個單元格合并為一個，如圖5-22所示。</p><p>．</p><p>(3)利用“屬性”檢查器調(diào)整3個單元格的寬度和高度。將光標放在第一行單元格內(nèi)，在“屬性”檢查器“高”輸入框中輸入110，“寬”不輸入；將光標放在第二行第一個單元格內(nèi)，在“屬性”檢查器“寬”輸入框中輸入250，“高”不輸入；將光標放在第二行第二個單元格內(nèi)，在“屬性”檢查器“寬”輸入框中輸入450，“高”不輸入。效果如圖5-22所示。</p><p>(4)按樣張(如圖5-23所示)在第一行單元格中輸入“飲食本草”，文字大小80像素，字體“華文彩云”，前兩個字白色，后兩個字顏色為#009900。在文字下方插入一條水平線，屬性取默認值。</p><p>(5)在第二行第一個單元格內(nèi)插入一嵌套表格，表格相關(guān)屬性分別為8行1列、表格高度和寬度均為100％、邊框粗細為0、單元格邊框為0、單元格間距為0。如圖5．23所示。</p><p>(6)在第二行第二個單元格內(nèi)插入一嵌套表格，表格相關(guān)屬性分別為3行3列、表格高度和寬度均為100％、邊框粗細為</p><p>2、單元格邊框為0、單元格間距為0。如圖5-23所示。</p><p>(7)在左側(cè)嵌套表格各行中分別輸入圖5．24所示內(nèi)容，然后將8個單元格的高度均設(shè)置為50。文字大小為36，字體為“華文新魏”，然后將每行文字均創(chuàng)建無址鏈接。</p><p>（8）在中側(cè)嵌套表格中分別插入5張文件夾images中的圖片，每張圖片的寬度和高度均為150，注意：當圖片尺寸變小后，表格不會自動縮小，這時可以選中整個表格，在“屬性”檢查器中單擊“清除行高”和“清除列寬”兩個按鈕來調(diào)整表格大小。</p><p>4．保存網(wǎng)頁</p><p>選擇“文件”！“保存”菜單命令，將此網(wǎng)頁保存在站點中。5．站點測試</p><p>按【F12】鍵在瀏覽器中預覽，觀察效果是否與樣張一樣。任務二：框架的應用 1．準備工作</p><p>在C盤或其他盤新建一個文件夾，作為站點文件夾。并將給定的圖片文件和素材文件復制到站點文件夾中。</p><p>2．建立本地站點</p><p>用已學方法建立本地站點。3．利用框架布局頁面</p><p>站點首頁部局效果如圖15-15所示，頁面制作步驟如下。（1）在默認打開的網(wǎng)頁中，選擇“插入”面板上的“布局’’選項卡。單擊框架按鈕的下拉箭頭，從下拉菜單中選擇命令。</p><p>(2)將光標置于頂端框架內(nèi)，選擇“修改”|“頁面屬性”菜單命令，設(shè)置背景顏色為#C1C1C1。同理將左框架和主框架的頁面背景色都設(shè)置為#C1C1C1。</p><p>(3)選擇“窗口“|‘‘框架”菜單命令，將“框架”面板調(diào)出來。然后設(shè)置三個框架的大小。</p><p>“頂端框架”：在“框架”面板中選定外層框架集，在“屬性”檢查器將頂端框架的高度設(shè)置為“120像素”，下面部分設(shè)置為“1”，單位為“相對”。將“邊框”設(shè)置為“是”，“邊框?qū)挾取痹O(shè)置為1’，邊框顏色設(shè)置為“#CCCCCC”。如圖15—16所示。</p><p>“左側(cè)框架”在“框架”面板中選定內(nèi)層的子框架集，在“屬性”檢查器將左側(cè)框+架的寬度設(shè)置為“250像素”，右側(cè)主框架設(shè)置為“1”，單位為“相對”。將“邊框”設(shè)置為“是”，“邊框?qū)挾取痹O(shè)置為“1’，邊框顏色設(shè)置為“#CCCCCC”。如圖15—17所示。</p><p>(4)在頂端框架內(nèi)輸入站點標題‘‘飲食本草”，文字大小為80像素，字體為“華文彩云”，前兩個字白色，后兩個字顏色為#009900，居中對齊。</p><p>(5)在左側(cè)框架內(nèi)插入一個表格，表格相關(guān)屬性分別為9行1列、表格高度和為100％、寬度為100％、邊框粗細為0、單元格邊框為0、單元格間距為0、對齊方式為右對齊。然后</p><p>將9個單元格的高度均設(shè)置為50，在其中輸入樣張中的文字，文字大小為36，字體為“華文</p><p>新魏”。如圖15．15所示。</p><p>(6)在右側(cè)主框架中插入一個表格，表格相關(guān)屬性分別為3行3列、表格高度和寬度任意、邊框粗細為</p><p>2、單元格邊框為0、單元格間距為0、居中對齊。按樣張效果在表格中分別插入5 張文件夾images中的圖片，每張圖片的寬度和高度均為150。注意：當圖片尺寸變小后，要在“屬</p><p>性，檢查器中單擊cc清除行高’’和“清除列寬”兩個按鈕，使表格調(diào)整到最小。如圖15—15所示。</p><p>4．保存框架網(wǎng)頁</p><p>選擇“文件”|“保存全部”菜單命令，按照保存窗口彈出的順序，分別將框架集、右側(cè)</p><p>主框架、左側(cè)框架、頂端框架命名為index．htm、main．htm、left．htm、top．htm。注意以上文件均保存在本站點中。</p><p>5．建立導航鏈接 具體制作步驟如下。</p><p>(1)按導航欄目分別建立8個相關(guān)內(nèi)容的頁面，或者從提供的素材文件中獲取。</p><p>(2)在左側(cè)框架內(nèi)選擇“首頁”文字，在“屬性”檢查器的鏈接欄中設(shè)置目標文件為本框架集頁面．Index．htm，目標選擇“parent'’。</p><p>(3)在左側(cè)框架內(nèi)選擇“谷物篇”文字，在“屬性”檢查器的“鏈接”欄中設(shè)置目標文件為素材文件guwu．htm，“目標”欄選擇右側(cè)主框架的名稱“mainframe”。同理，將左側(cè)框 架內(nèi)的各項導航內(nèi)容分別鏈接到對應的素材文件，且“目標”均設(shè)置為“mainframe”。</p><p>(4)再次選擇“文件”|“保存全部”菜單命令。6．預覽和測試站點</p><p>在打開的Index．htm文件中，按【F12】鍵在瀏覽器中預覽，觀察效果與樣張是否一樣，然后，測試各導航鏈接內(nèi)容和顯示位置是否正確。效果如圖15-18所示。</p><p>實驗三 網(wǎng)頁圖像和動畫的設(shè)計與應用</p><p>一、實驗目的及要求</p><p>1．掌握在Fireworks中創(chuàng)建動畫的方法 2．掌握在Fireworks中制作蒙版的創(chuàng)建方法 3．掌握基本動畫補間操作</p><p>二、實驗學時</p><p>8學時</p><p>三、實驗內(nèi)容 任務一：gif動畫 1．準備工作</p><p>在c盤或其他盤新建一個文件夾，本次實訓的內(nèi)容將全部保存在該文件夾下。</p><p>2．一張向日葵畫框圖片的制作(1)新建文件</p><p>打開Fireworks 8，在“開始頁”中選擇“新建Fireworks文件”，新建一個空白文件。在彈出的“新建文檔”中設(shè)置畫布的“寬”為360，“高”為400，畫布顏色選擇白色，然后單擊“確定”按鈕。選擇“文件”|‘‘另存為”菜單命令，將文件以“sx6—1．png”為文件名保存在指定文件夾下。</p><p>(2)制作圖片 選擇“文件”l‘‘導入”菜單命令，在“導入”對話框中選擇需要導入的圖片“畫框．gif”。此時光標的形狀變?yōu)閂-，在畫布上單擊鼠標左鍵，即可將該圖片以原始大小導入(也可以按下左鍵拖放，將圖片以不同的大小導入)。此時可以在“層”面板中看到剛導入的對象。用相同的方法導入第二張圖片“向日葵．png”，將圖片的大小調(diào)整合適，放入畫框內(nèi)，并調(diào)整整個圖片的坐標，到此這個圖片的制作就完成了。單擊“主要”工具欄上的“保存”按鈕，保存文件。</p><p>(3)圖片的優(yōu)化和導出</p><p>選擇“窗口”l“優(yōu)化”菜單命令，打開“優(yōu)化”面板，如圖6-23所示的設(shè)置。選擇“文件”|“導出”菜單命令，在彈出的“導出”對話框中，“文件名”一欄輸入文件名“sx6—1．jpg”，選擇侏存類型為“僅圖像”，單擊“保存”按鈕，該文件即可以JPEG的文件格式輸出。</p><p>選擇“文件”l礫存”菜單命令，保存源文件，單擊“預覽”按鈕預覽效果，如圖6-24所示。</p><p>3．進一步編輯向日葵畫框圖片(1)新建一幀</p><p>打開剛剛創(chuàng)建的向日葵畫框，即“sx6—1．png”。在“幀”面板，選擇剛才已有的第一幀，將它拖到“新建／重制幀”按鈕上釋放，得到復制的一幀。</p><p>將新復制的第二幀選中，將原有的向日葵圖片刪除，重新導入另一幅圖像“椰子樹．jpg”，并調(diào)整大小使其居于畫框內(nèi)。這樣當前文件具有兩個幀的畫面，如圖6—25所示。</p><p>(2)觀看動畫播放效果</p><p>單擊位于工作窗口下方幀控制器的“播放”按鈕，觀看動畫播放效果。單擊“停止”按鈕，停止播放。</p><p>如果不滿意，可以返回幀1或幀2進行修改。</p><p>如果想調(diào)整兩幀的播放速度，可以在幀面板雙擊每幀右側(cè)的數(shù)字“7”，將其修改成想要的值。</p><p>再次通過幀控制器觀看動畫播放效果，如果想再增加幾幀，可以按上面的方法進行編輯，直至滿意為止。</p><p>選擇“文件”|“另存為”菜單命令，將文件以“sx6．2．png'’為文件名保存在指定文件夾下保存文件。</p><p>再選擇“文件”|“圖像預覽”菜單命令，打開“圖像預覽”對話框，如圖6—26所示。</p><p>選擇導出的文件格式為“GIF動畫”，然后再選擇“導出”按鈕，就可以導出GIF動畫文件，文件名為“sx6．2．gift。這樣可以在Fireworks之外，同樣看到動畫效果。</p><p>任務二：蒙版和動畫的制作 1．準備工作</p><p>在c盤或其他盤新建一個文件夾，將給定圖像素材復制到其中，本次實訓的內(nèi)容將全部保存在該文件夾下。</p><p>2．導入圖像并調(diào)整畫布</p><p>新建空白文檔，大小、顏色均默認。</p><p>選擇“文件”l“導入”菜單命令，將指定文件夾中的圖像導入文檔。選中圖片，在“屬性”檢查器中修改圖片的寬、高值(500×400)。然后單擊畫布之外，在“屬性”檢查器選擇“符合畫布”命令，使畫布和圖片一樣大且對齊。</p><p>在“屬性”檢查器選擇“畫布”旁邊的拾色器，把畫布顏色改成自己喜歡的顏色。</p><p>3．制作矢量蒙版</p><p>選擇橢圓工具，在窗口中畫一個橢圓。選擇“編輯”I“剪切”菜單命令，橢圓消失，用鼠標再次選中導入的圖像，然后選擇“編輯”I“粘貼為蒙版”菜單命令，出現(xiàn)蒙版效果，如圖9-36所示。</p><p>打開“層”面板，如圖9-37所示。單擊層中圖片與蒙版之間的鏈接@標記，可以使它消失，再次單擊又會出現(xiàn)。它的出現(xiàn)與消失決定著蒙版是否與圖片鏈接在一起。當未鏈接時，單擊“層”面板中的蒙版圖標，使它周圍出現(xiàn)綠框。如圖9-38所示。</p><p>用鼠標移動畫布上橢圓的位置，效果如圖9-39所示。</p><p>把位置調(diào)整到理想狀態(tài)后，選擇“文件”|“另存為”菜單命令，將文件以“sx9-1．png'，為名保存在指定文件夾下。</p><p>4．修改蒙版效果</p><p>打開剛才新建的蒙版文件，在“層”面板選中蒙版。在“屬性”檢查器中，選擇“蒙版”為“灰度外觀”，將方式改為“放射狀”，并單擊旁邊的拾色器，將放射狀填充的中心調(diào)整為透明(白色)，邊緣調(diào)整為不透明(黑色)，如圖9-40所示。</p><p>在“屬性”檢查器中，將“邊緣”修改為“羽化”，值為“50'’，“描邊”設(shè)置為“無”，如下圖9-41所示。</p><p>在畫布上適當調(diào)整橢圓填充的放射中心和幅度，最后達到如圖9—42所示效果。</p><p>5．制作位圖蒙版，打開給定圖像文件0258.jpg，另存為sx9-2.jpg。把顯示的縮放比例調(diào)整為66%。單擊“層”面板的“添加蒙版”按鈕，并在“層”面板選中，然后按照圖9-43蒙版圖標。</p><p>在“工具”面板“顏色”部分中選擇“漸變”工具設(shè)置蒙版的相關(guān)屬性。</p><p>在圖像中間拖動鼠標，使填充呈由中心向四周的放射形狀。圖像產(chǎn)生了蒙版效果，同時“層”面板的蒙版圖標也發(fā)生了變化。如圖9-44所示。</p><p>6.制作文本蒙版</p><p>打開給定圖像文件0258.jpg，另存為sx9-3.jpg。把顯示的縮放比例調(diào)整為66%。在“工具”面板“矢量”部分中選取“文字”工具。輸入文字“熱帶風情”，字體為華文行楷，大小150。選中文字，選擇“編輯”|“剪切”菜單命令，將其剪切。在“層”面板中選擇取位圖標，然后選擇“編輯”|“粘貼為蒙版”菜單命令。圖像產(chǎn)生了蒙版效果，同時“層”面板也出出了文本蒙版圖標，如圖9-45所示。</p><p>任務三：風吹樹葉(1)新建Flash文件。</p><p>(2)修改背景顏色為“藍色”。</p><p>(3)使用“文本工具”按鈕，創(chuàng)建文字“風吹效果”四個字，用工具選中文字并按【Ctrl】+【B】一次，將四個字分解為個體。如13-11所示。</p><p>(4)再次用工具，選中“風”字然后選擇“修改”|轉(zhuǎn)換為元件”菜單命令。在彈出轉(zhuǎn)換為符號“對話框中，將元件名稱改為“風”，如圖13-12所示。</p><p>(5)重復步驟(4)，將剩下的三個字“吹”、“效”、“果”也依次做成圖形元件。</p><p>(6)選中所有的文字，然后鼠標右擊，在彈出的上下文菜單中選擇“分散到各層”，于是個字將分別處于四個不同的圖層。這樣做是為了動畫漸變能夠正確的執(zhí)行。</p><p>如果分散到各層后文字沒有對齊，則可用“對齊面板”，將各層的文字重新排列好?！皩γ姘迦鐖D13-13所示，可以通過菜單“窗口”|對齊’’菜單命令打開“對齊”面板。</p><p>(7)在時間軸中第1 5幀處，給各層“添加關(guān)鍵幀”，選中第15幀。(8)將四個字全部選中，使用鼠標向上移動一段距離，選擇“修改”|變形”|“水平翻轉(zhuǎn)”菜單命令，將四個字水平翻轉(zhuǎn)一下，然后調(diào)整字體的位置，用“對齊’’面板排列字體，如圖13-14所示。</p><p>(9)選中所有元件，在“屬性，檢查器中將顏色“Alpha”值設(shè)為“O”，如圖13-15所示。</p><p>(1 O)在“吹”、“效”、“果”三個元件所在層的第1幀處創(chuàng)建動畫補間，如圖13-16所示。</p><p>(11)按住【Ctrl】鍵，選擇第二層的第2幀到最后一幀。按住鼠標左鍵不放，將位置向后拖放一段距離，如圖13-17所示。</p><p>(1 2)參照步驟(1 0)內(nèi)容，將‘‘效”、“果”兩個元件所在層的位置分別后移，如圖13-l8所示。</p><p>(1 3)按【Ctrl】+【Enter】組合鍵查看效果。任務四：球的跳動 1.準備工作</p><p>在c盤或其他盤新建一個文件夾，并將給定的圖片文件和素材文件復制到站點文件夾中。本次初訓的內(nèi)容將全部保存在該文件夾下。</p><p>2．素材的導入</p><p>1)新建文件</p><p>打開Flash 8，在“開始頁”中選擇“新建Flash文件”，以新建一個空白文件。背景色為“白色’’。</p><p>選擇“文件”|“保存”菜單命令，將文件保存為ex3.fla文件。2)“球’’的導入</p><p>選擇“文件”|“導入”|“導入到庫”菜單命令將“球”導入到庫，如圖13-33所示。</p><p>3.元件的轉(zhuǎn)換</p><p>選擇“修改”|“轉(zhuǎn)換為元件”菜單命令，將圖片轉(zhuǎn)換為“圖形”元件，并命名為“球”。13-34所示。</p><p>4．動作補間的設(shè)置</p><p>將元件“球”拖放到場景1的圖層1中。在圖層1的第60幀處插入關(guān)鍵幀，如圖13-35所示。</p><p>在第1幀處添加‘‘動畫補-間，效果，如圖13-36所示。</p><p>在第1幀處處的“屬性”檢查器中，單擊“緩動”旁邊的“編輯”按鈕，設(shè)置動作的“緩入|緩出”效果(通過緩入／緩出可以控制動畫漸變的速度和狀態(tài))。設(shè)置效果如圖13-37所示。</p><p>在“自定義緩入／緩出”對話框定義各個幀處的動畫補間速度和方向。新建圖形元件，命名為“陰影”，設(shè)置筆觸色為“無”，填充色為“黑白漸變”，白色部分的alpha透明度為29％。使用橢圓工具繪制一個橢圓，設(shè)置面板如圖13-38所示，繪制的效果如13-39所示。</p><p>在場景1中新建圖層2，將元件“陰影”拖放到第1幀處的恰當位置(在球落下的下方)，并在第60幀插入關(guān)鍵幀，陰影位置如圖13—40所示。</p><p>在圖層2第1幀處設(shè)置元件“陰影”的A1pha透明度為20％，如圖1 3-4 1所示。</p><p>在圖層2第1幀處設(shè)置補間動作，如圖1 3—42所示。</p><p>打開圖層1第一幀“屬性”，檢查器的“自定義緩入／緩出”面板，按鍵【Ctrl】+【c】復制緩動效果。打開圖層2第一幀處的“自定義緩入／緩出”面板，按I Ctrl 】+【V】組合鍵，將其粘貼到陰影動畫補間中。</p><p>5．發(fā)布動畫</p><p>使用“文件”|“發(fā)布”菜單命令進行發(fā)布。</p><p>實驗四 層疊樣式與層的應用</p><p>一、實驗目的及要求 1.掌握層的正確定位方法</p><p>2.學會利用層來制作彈出式菜單 3.了解時間軸的編輯特點和方法 4．學會定義和應用CSS樣式</p><p>二、實驗學時</p><p>6學時</p><p>三、實驗內(nèi)容</p><p>任務一：利用層制作彈出菜單</p><p>步驟：</p><p>l準備工作</p><p>在c盤或其他盤新建一個文件夾，作為站點文件夾。將給定的素材文件存入其中。</p><p>2．建立本地站點</p><p>啟動Dreamweaver·8，用已學方法建立本地站點。3．利用圖層制作下拉彈出菜單</p><p>(1)新建一個空白頁面，選擇“修改”I“頁面屬性”菜單命令，設(shè)置頁面的背景顏色為#FFCC99，左邊距為0，上邊距為0。</p><p>(2)在文檔第一行插入一行文字“電子信息職業(yè)技術(shù)學院”作為站點標題，字體為華文行楷，大小為48號字，顏色為#FF9933。</p><p>(3)在標題的下一行插入一個l行5列的表格，表格寬度800像素，邊框粗細為l，高 度30，平均分配各列(每列寬度為160像素)，表格背景顏色為#9999FF。</p><p>(4)在表格的各列分別寫入“首頁”、“學院概況”、“師資建設(shè)”、“系部設(shè)置”、“招生就業(yè)”，各單元格文字對齊方式為居中對齊，文字為粗體顯示。如圖16—16所示。</p><p>(5)在“學院概況”列中添加一個圖層，命名為“Layerl”，注意不可見元素“層錨記”應在此列當中。如果不在，可用鼠標將其拖到此列中。然后在圖層中添加一個3行l(wèi)列的表格，表格寬度為160像素，各行高度為30像素，邊框粗細為1，單元格文字為居中對齊，表格背景顏色為#9999F’F，文字為粗體顯示。三個單元格內(nèi)容為“學院簡介”、“辦學思想”、“校園風景”，如圖16．17所示。</p><p>(6)同樣在其他幾列中也分別添加圖層，各自命名為“Layer2'’，“Layer3”，“Layer4”。其中Layer2中插入3行1列的表格，表格屬性與Layerl中的相同，內(nèi)容為“隊伍建設(shè)、名師風采、優(yōu)秀教師”；L,ayer3中插入5行l(wèi)列的表格，表格屬性與L,ayerl中的相同，內(nèi)容為“機電技術(shù)系、電子技術(shù)系、計算機應用系、計算機網(wǎng)絡(luò)系、計算機軟件系”；Layer4中插入2行1列的表格，表格屬性與Layerl中的相同，內(nèi)容為“招生信息、就業(yè)信息”。如圖16—18所示。</p><p>(7)調(diào)整各層的位置。注意：層的調(diào)整非常重要，不同的瀏覽器窗口大</p><p>小，不同的分辨率，層的位置顯示都不是一樣。即使在同一個機器上調(diào)整瀏覽器的窗口大小，都會出現(xiàn)位置的變動。Dreamweaver中并不是所見即所得，需要我們來精確定位才會達到滿意的效罘。為此，首先固定表格的寬度，本例中將表格固定為寬度800，高度30。然后固定層的位置，這</p><p>個位置需要計算一下，計算公式并不是很難。本例中表格總寬度為800，共有5列，這樣每列的橫坐標起始位置的計算公式為：</p><p>800÷5*(當前列一1)對于“Layerl”，當前列為2，所以結(jié)果為160。</p><p>最后加上一個將要創(chuàng)建的層與原表格列偏移值，那么計算各列下屬的層的橫坐標公式變?yōu)椋?/p><p>800--5x(當前列-1)+偏移量</p><p>這個偏移量需要通過大家試驗來最終確定，因為不同的字體和寬度這個值是不同的。這里測試滿意的效果是-1，所示Layer1的實際工資起始橫坐標為159據(jù)這個公式將各個層的位置設(shè)定好，最好不要用鼠標禾移功定位。要使用“屬性”檢查器來設(shè)置。(8)打開“層，面板，將Layerl～Layer4都設(shè)置為隱藏狀態(tài)。．</p><p>(9)在窗口左下方選中第2列“學院概況”所在單元格的標簽選擇器<td>，在“行為”面板中為其添加“顯示一隱藏層’’行為，將“Layerl”設(shè)定為“顯示”，如圖16-19所示。</p><p>(10)更改行為的觸發(fā)事件為“onMouseOver”。(11)再次選中第二列的標簽選擇器<td>，在‘‘行為’’面板中為其添加“顯示一隱藏層”行為，設(shè)定圖層Layerl為‘‘隱藏”，并更改此行為的觸發(fā)事件為“onlMoluseOut”。．</p><p>(12)重復步驟9～1l，為第三列、第四列、第五列添加顯示與隱藏圖層的行為。</p><p>4．保存與預覽</p><p>保存文件為Index．html，然后按IFl2]鍵進行預覽。當移動鼠標到菜單時，將顯示當前菜單項所屬的子菜單內(nèi)容，當鼠標離開顯示的子菜單時，子菜單隱藏，返回初始狀態(tài)。最終效果如圖16—20所示。</p><p>5．為下拉菜單設(shè)置超級鏈接</p><p>(1)根據(jù)菜單內(nèi)容，建立相應的其他頁面文件。(2)為各菜單項設(shè)置跳轉(zhuǎn)到這些頁面的超級鏈接。(3)再次保存文件并預覽效果。任務二：時間軸 步驟：</p><p>1．準備工作</p><p>在C。盤或其他盤新建一個文件夾，作為站點文件夾。在此站點中再建一個images子文件夾，將給定的素材存入其中。2．建立本地站點</p><p>啟動Dreamweaver 8，用已學方法建立本地站點。</p><p>3.利用時間軸使層做直線運動</p><p>(1)打開給定的網(wǎng)頁文件sx17-1-1.htm，在網(wǎng)頁上插入一個層”Layerl",并將其位置調(diào)整好，然后在其中插入給定的圖片imgl．gif,圖片大小為64×64。如圖17-9所示.(2)打開“時間軸”面板，把圖層Layerl拖到“時間軸’’面板上，單擊最后一幀關(guān)鍵幀，并將其拖到第100幀的位置。再單擊圖層Layerl，將 Layerl水平拖動到頁面的右側(cè)。如圖17-10所示。</p><p>(3)選中“時間軸”面板上的“自動播放”和“循環(huán)”選項。</p><p>(4)將文件另存為sxl7-1-3．htm，并在瀏覽器中預覽，即可看到小豬從頁面左側(cè)運動到 右側(cè)，并循環(huán)播放。</p><p>4．利用時間軸使層做軌跡運動</p><p>(1)打開剛才保存的sxl7-1-3．htm文檔，再插入一個圖層Layer2，并將給定的圖片img2．Gif插入其中，設(shè)置圖片和層的大小均為100*100，如圖17-11所示。</p><p>(2)右擊“時間軸”面板的動畫通道，在彈出的快捷菜單中選擇“添加時間軸”命令，新添加的時間軸為“Timeline2'’。</p><p>(3)選中頁面中的圖層Layer2，并單擊右鍵，在彈出的快捷菜單中選擇</p><p>“記錄路徑”命令，緊接著用鼠標拖動層左上角的標記在頁面上移動繪制路徑，釋放鼠標，在頁面上出現(xiàn)了一條灰色的路徑。同時，時間軸上也出現(xiàn)了一個有多個關(guān)鍵幀的動畫條。如圖17-12所示。</p><p>(4)選中“時間軸”面板上的“自動播放”和“循環(huán)”選項。</p><p>(5)保存文件，并在瀏覽器中預覽，即可看到小豬從頁面左側(cè)運動到右側(cè)的同時，另一小豬在頁面上按繪制的軌跡進行移動，并循環(huán)播放。5．給移動的小豬添加行為和超級鏈接</p><p>(1)選中頁面中的Layer2，打開“行為”面板，單擊“+”按鈕，從彈出的菜單中選擇“時間軸”I“停止時間軸”命令。然后從對話框中選擇“1'imeline2'’，單擊“確定”按鈕。在“行為”面板中將事件改為onMouseover。(2)再次單擊“行為”面板的“+”按鈕，從彈出的菜單中選擇“時間軸”}“播放時間軸”命令。然后從對話框中選擇“Timeline2'’，單擊“確定”按鈕。在“行為”面板中將事件改為onMouseout。</p><p>(3)選中Layer2層中的圖片，在“屬性”檢查器的鏈接欄中輸入“sxl7-1-2．htm'’(預先編輯好的網(wǎng)頁)，在替代欄中輸入“單擊有驚喜”。</p><p>(4)保存文件，并在瀏覽器中預覽，即可看到當鼠標指向小豬時，小豬停止移動；當鼠標離開小豬時，小豬繼續(xù)移動。當鼠標單擊小豬時，跳轉(zhuǎn)到sxl7-1-2．htm頁面。</p><p>任務三：利用CSS樣式改變頁面風格 步驟：</p><p>1．準備工作</p><p>在c盤或其他盤新建一個文件夾，作為站點文件夾。將給定的網(wǎng)頁文件及素材文件夾存入該文件夾中。</p><p>2．建立本地站點</p><p>啟動Dreamweaver 8，用已學方法建立本地站點。3．自定義樣式的定義及應用</p><p>(1)打開站點中給定的sx20．1．1．htm文檔。(2)選擇“窗口”I‘‘樣式”菜單命令，將“CSS樣式”面板打開。(3)單擊“CSS樣式”面板下方的“新建CSS樣式”按鈕，打開新建樣式對話框。在選擇器類型處選擇“類(可應用于任何標簽)”，名稱處輸入“ysl”，定義在處選擇“僅對該文檔”。單擊“確定”按鈕。</p><p>(4)在彈出的“ysl的CSS樣式定義”對話框中，進行如圖20-25所示的樣式定義(類型：字體為隸書，大小為36像素，顏色為#0033FF；區(qū)塊：文字對齊為居中)。</p><p>(5)用同樣的方法定義樣式“ys2”，定義內(nèi)容如圖20-26所示(類型：</p><p>字體為華文新魏，大小為24像素；區(qū)塊：文字對齊為居中)。</p><p>(6)用同樣的方法定義樣式“ys3”，定義內(nèi)容如圖20—27所示(類型：字體為隸書，大小為36像素，粗細為粗體，#00CC33；區(qū)塊：文字對齊為居中)。</p><p>(7)下面開始應用已定義的樣式。選中第一行標題“唐詩欣賞”，單擊右鍵，選擇“CSS樣式y(tǒng)sl，(或者用前面介紹的其他方法來應用ysl)，這時標題已變成所定義的樣式了。用同樣的方法，將每首詩的詩文內(nèi)容應用</p><p>‘‘ys2’’，將每首詩的標題段落應用“ys3”。效果如圖20-28所示。</p><p>(8)修改頁面的背景風格。首先為頁面設(shè)置背景圖像(站點中images文件夾中的bj．jpg文件)，效果如圖20-29所示。由于選擇的背景圖像的尺寸不夠大，在頁面中圖像會以不斷重復的形式鋪滿整個頁面，視覺效果不夠理想。</p><p>(9)在“CSS樣式”面板新建自定義樣式“ys4”，在樣式定義對話框中，背景樣式的設(shè)置如圖20—30所示(背景：重復為不重復，附件為固定，水平位置為居中，垂直位置為居中)。</p><p>(10)選擇文檔窗口左下方的標簽選擇器<．body>，然后單擊右鍵，從下拉列表中選擇“設(shè)置類，ys4”，文檔應用樣式y(tǒng)s4后的效果如圖20-31所示。當預覽時會發(fā)現(xiàn)背景圖像居中并不再重復，且當用鼠標滾動游覽文字時，背景圖像保持靜止，而不隨文字的滾動而滾動。</p><p>4．重定義特定標簽外觀</p><p>(1)單擊“CSS樣式”面板下方的“新建(；SS樣式”按鈕，打開新建樣式對話框，選擇器類型處選擇“標簽(重定義特殊標簽的外觀)”，標簽處下拉列表選擇“l(fā)n定義在處選擇“僅對該文檔”。單擊“確定”按鈕。</p><p>(2)在彈出的“l(fā)i的CSS樣式定義”對話框中，進行如圖20-32所示的樣式定義(類型：字體為華文新魏，大小為24像素；列表：項目符號圖像為0001．gif)。</p><p>(3)單擊“確定”按鈕，發(fā)現(xiàn)頁面列表外觀發(fā)生了變化。效果如圖20-33</p><p>所示。</p><p>(4)再次單擊“CSS樣式”面板下方的“新建CSS樣式”按鈕，打開新建樣式對話框，選擇器類型處選擇“標簽(重定義特殊標簽的外觀)”，標簽處下拉列表選擇“a”，定義在處選擇“僅對該文檔”。單擊“確定”按鈕。</p><p>(5)在彈出的‘‘a(chǎn)的cSS樣式定義”對話框中，進行定義，其中類型分類中只將修飾選擇為‘‘無”。單擊“確定”后，頁面中超級鏈接的下劃線處的修飾沒有了，如圖20-33所示。</p><p>5．鏈接文字技術(shù)</p><p>(1)單擊“CSS樣式”面板下方的“新建CSS樣式”按鈕，打開新建樣式對話框，選擇器類型處選擇“高級(ID、偽類選擇器等)”，選擇器處下拉列表選擇“a：link”，定義在處選擇“僅對該文檔”。單擊“確定”按鈕。</p><p>(2)在彈出的“a：link的(；SS樣式定義”對話框中，進行如圖20—34所示的樣式定義(類型：字體為華文新魏，大小為24像素，顏色為#CC0099，修飾為無)。</p><p>(3)再次單擊“CSS樣式”面板下方的“新建CSS樣式”按鈕，在對話框中其他選項不變，只將選擇器選為“a：hover'。然后在“a：hover的CSS樣式定義”對話框中，進行如圖20—35所示的樣式定義(類型：字體為華文新魏，大小為24像素，顏色為#FF0000，修飾為下劃線)。</p><p>(4)單擊“確定”按鈕，關(guān)閉定義對話框。預覽時可以看到當鼠標指針移到超級鏈接文字時，文字變?yōu)榧t色且出現(xiàn)下劃線修飾。</p><p>(5)將網(wǎng)頁另存為Index．．html，按【F12】預覽網(wǎng)頁，觀察各種樣式的應用效果。</p><p>實驗五</p><p>網(wǎng)頁綜合設(shè)計</p><p>一、實驗目的及要求</p><p>利用所學的網(wǎng)頁設(shè)計的方法來設(shè)計一個個性化的網(wǎng)站，網(wǎng)站的內(nèi)容一定要合理，內(nèi)容健康，頁面美觀。</p><p>二、實驗學時</p><p>6學時</p><p>三、實驗內(nèi)容</p><p>自己設(shè)計</p><h2><a name="4" >第四篇：網(wǎng)頁設(shè)計與制作實驗過程及報告</a></h2><p>網(wǎng)頁制作過程及報告</p><p>網(wǎng)頁設(shè)計與制作的一般實驗步驟：</p><p>1、確定網(wǎng)站主題</p><p>網(wǎng)站里的每一個網(wǎng)頁都要有統(tǒng)一的風格，以加強渲染自己性格的效果。最重要的是做出自己的風格，吸引瀏覽者的眼球。</p><p>2、搜集材料</p><p>主要在網(wǎng)站上搜集所要的網(wǎng)頁信息，包括圖片、文字、相關(guān)的新聞，同時，查詢相關(guān)的圖書、報紙、光盤、多媒體等，也可以得來更加有說服力的信息。</p><p>3、規(guī)劃網(wǎng)站</p><p>我的網(wǎng)站包括5個頁面。版面設(shè)計要靈活，根據(jù)各部分內(nèi)容的不同適當?shù)淖杂稍O(shè)計。但是每個頁面的主元素和位置不能變。用CSS設(shè)計一個樣式，以保證隨時、準確的調(diào)用。另外，為了網(wǎng)頁布局的協(xié)調(diào)，還可以加入flash動態(tài)圖片，會達到更好的效果。</p><p>4、選擇合適的制作工具</p><p>做網(wǎng)頁的首先工具當然為Dreamweaver。</p><p>5、認識網(wǎng)頁設(shè)計工具Dreamweaver</p><p>（1）Dreamweaver的啟動</p><p>（2）窗口組成的認識</p><p>6、新建站點</p><p>7、站點中首頁的創(chuàng)建</p><p>8、制作網(wǎng)頁</p><p>素材、風格、模板都設(shè)計好以后，下一步就是具體的制作網(wǎng)頁。制作網(wǎng)站時，首先要做的就是站點的規(guī)劃，建立一個本地站點。網(wǎng)頁中的css 樣式文件也應統(tǒng)一管理，做到有條不紊。</p><p>9、根據(jù)自己的網(wǎng)頁風格，在網(wǎng)上搜集合適的圖片。</p><p>最后還要制作各個頁面的鏈接，把整個網(wǎng)頁可憐起來，形成一個統(tǒng)一的整體，方便瀏覽者進行各個頁面間的跳轉(zhuǎn)。</p><p>10、上傳測試</p><p>網(wǎng)頁制作完畢以后，要進行測試，在瀏覽器上運行自己的網(wǎng)站，反復測試，以發(fā)現(xiàn)設(shè)計中的缺陷。</p><p>實驗結(jié)果及理論分析：</p><p>通過這簡短的三個周的學習，讓我有一個獨立設(shè)計，制作網(wǎng)頁的機會，通過這次試驗，我的收益頗多。首先，獨立的實踐了一個完整的網(wǎng)站設(shè)計的全過程，把設(shè)計中零散的注意點和要求在自己大腦中形成了一個完整的框架體系，使平時學到的知識點有了一個質(zhì)的升華，并且合理的在試驗中進行了實踐。第二，在這次實驗的過程中，我搜集了大量的素材和網(wǎng)頁設(shè)計的技術(shù)技巧方面的書，擴大了知識面，給我在以后的設(shè)計過程中能博采眾長，制作出技術(shù)精湛的網(wǎng)頁打下了基礎(chǔ)。最后，我感受最深的是，技術(shù)方面的學習，最重要的是自己實踐做出東西，只通過自己的親身實踐，才能學會、學懂、學通技術(shù)。</p><p>朱禮明</p><p>信息管理與信息系統(tǒng)1301班</p><p>2014.07.23</p><h2><a name="5" >第五篇：網(wǎng)頁設(shè)計與制作簡答題</a></h2><p>1、簡述Web瀏覽器打開一個Web文件的工作過程。</p><p>2、描述網(wǎng)頁設(shè)計的一般步驟。</p><p>3、簡述網(wǎng)頁設(shè)計的基本準則。</p><p>4、簡述規(guī)劃網(wǎng)站目錄結(jié)構(gòu)時應遵循的原則。</p><p>5、描述版面布局的步驟。</p><p>6、什么是“HTML”？HTML“標記”又是什么？</p><p>7、簡述“HTML”文檔的基本結(jié)構(gòu)。</p><p>8、簡述以下一段HTML代碼中各對標記的作用。〈html〉</p><p>〈head〉</p><p>〈title〉網(wǎng)頁設(shè)計〈/title〉 〈/head〉</p><p>〈body〉</p><p>〈h2〉北國風光〈/h2〉</p><p>〈/body〉 〈/html〉</p><p>9、如何進行本地網(wǎng)頁的測試？</p><p>10、網(wǎng)站管理和維護的主要工作有哪些？</p><p>11、什么是Web瀏覽器?</p><p>12、簡述網(wǎng)頁設(shè)計中所需要注意的通用規(guī)則。</p><p>13、簡述DHTML的概念及主要組成。</p><p>14、簡述使用FrontPage在網(wǎng)頁中插入一個日歷的過程。</p><p>15、簡述色彩的三原色的概念及每種顏色的調(diào)配范圍。</p><p>16、為什么要采用DHTML技術(shù)？客戶端動態(tài)網(wǎng)頁技術(shù)有哪些優(yōu)點？</p><p>17、網(wǎng)站欄目劃分的原則是什么？</p><p>18、XML與HTML相比的主要優(yōu)點有哪些？</p><p>19、請簡述一下網(wǎng)站的設(shè)計流程？</p><p>20、簡述FireWorks的特點。</p><p>21、網(wǎng)頁制作的步驟是什么？</p><p>22、怎樣讓鏈接沒有下劃線?</p><p>23、怎樣在網(wǎng)頁中加入多媒體播放?</p><p>24、怎樣讓網(wǎng)頁的背景圖像不滾動?</p><p>25、怎樣定義網(wǎng)頁的關(guān)鍵字?</p><p>26、什么是Web瀏覽器?</p><p>27、網(wǎng)頁上所說的重心平衡指的是什么?</p><p>28、什么是DHTML？DHTML技術(shù)主要由哪幾部分組成？</p><p>29、在CSS中，對字體的的設(shè)置所涉及到的屬性有哪些？</p><p>30、用HTML語言回答一個HTML文件應具有的基本結(jié)構(gòu)。</p><p>31、比較GIF格式和JPG格式的原理與各自的適用范圍。</p><p>32、為什么要采用DHTML技術(shù)?客戶端動態(tài)網(wǎng)頁技術(shù)有哪些優(yōu)點?</p><p>33、簡述站點的概念以及虛擬目錄和實際目錄之間的對應關(guān)系。</p><p>34、什么是Web安全色?</p><p>35、簡述虛擬主機的概念和功能。</p><p>36、簡述Dreamweaver的工作窗口由哪些部分組成。</p><p>37、在Dreamweaver中，插入圖像的方法有哪些？</p><p>38、在Fireworks中，如何使文字附加于路徑？</p><p>39、在Flash MX中可以創(chuàng)建哪些類型的元件？各元件的含義是什么？</p><p>40、HTML中<BR>標記和<p>標記有何區(qū)別?</p><p>41、簡述在網(wǎng)頁中插入背景音樂的方法。</p><p>42、怎樣在網(wǎng)頁中插入Flash影片？</p><p>43、簡述設(shè)計Web站點的一般步驟。</p><p>44、簡要說明html的基本工作原理。</p><p>45、簡要說明表格與框架布局的區(qū)別。</p><p>46、舉例說明在網(wǎng)頁中使用CSS樣式表的三種方式（都使用對p標記符應用color屬性為例），并簡要分析各自的特點。</p><p>47、簡要說明使用網(wǎng)頁圖像時應注意的問題</p><p>48、簡要回答選擇符的作用及分類。</p><p>49、XML的主要特征有哪些？</p><p>50、FrontPage的主要功能有哪些？</p><p>51、簡答HTML文件的基本標記組成。</p><p>52、簡答Java與JavaScript的主要區(qū)別。</p><p>53、簡述網(wǎng)站的開發(fā)流程。（10分）</p><p>54、簡述靜態(tài)網(wǎng)頁的執(zhí)行過程。（7分）</p><p>55、簡述在Dreamweaver MX中制作以插件方式播放音樂的頁面的步驟。</p><p>56、簡述網(wǎng)頁制作有哪些基本流程。</p><p>57、在Dreamweaver MX中，目標端點的鏈接有哪幾種？</p><p>58、簡述在Fireworks中，可以做哪幾個方面的環(huán)境設(shè)置。</p><p>59、在Flash MX中，幀有哪幾種類型？各自的含義是什么？</p><p>參考答案：</p><p>1、簡述Web瀏覽器打開一個Web文件的工作過程。</p><p>1）</p><p>Web瀏覽器向服務器發(fā)出頁面請求</p><p>2）</p><p>服務器接收頁面請求，并將搜索到的頁面發(fā)給Web瀏覽器</p><p>3）</p><p>Web瀏覽器接收并顯示頁面</p><p>2、描述網(wǎng)頁設(shè)計的一般步驟。</p><p>1)</p><p>設(shè)計主題</p><p>2)</p><p>設(shè)計網(wǎng)頁的總體結(jié)構(gòu)</p><p>3)</p><p>資料的收集和整理</p><p>4)</p><p>選擇網(wǎng)頁的設(shè)計方法</p><p>5)</p><p>注意一些基本問題，如：標題要簡明、圖片最好加說明等</p><p>3、簡述網(wǎng)頁設(shè)計的基本準則。</p><p>需要遵循的藝術(shù)原則主要有：</p><p>1）</p><p>對比原則</p><p>2）</p><p>協(xié)調(diào)原則</p><p>3）</p><p>平衡原則</p><p>4）</p><p>趣味原則。</p><p>還包括統(tǒng)一、連貫、分割、對比、和諧、易讀、易找、清晰、精選。</p><p>4、簡述規(guī)劃網(wǎng)站目錄結(jié)構(gòu)時應遵循的原則。</p><p>在創(chuàng)建目錄時需要注意：</p><p>（1）不要將所有文件都存放在根目錄下。</p><p>（2）目錄層次不要太深，建議不要超過三層。</p><p>（3）不要使用過長的目錄名和盡量不要使用中文目錄名。</p><p>5、描述版面布局的步驟。</p><p>步驟：</p><p>1）</p><p>繪制網(wǎng)頁草圖</p><p>2）</p><p>粗略布局</p><p>3）</p><p>定案</p><p>6、什么是“HTML”？HTML“標記”又是什么？</p><p>HTML是一種建立網(wǎng)頁文件的語言，透過標記式指令，將影像、聲音、圖片和文字等連接起來。</p><p>在HTML中用于描述功能的符號稱為“標記”，它是用來控制文字、圖形等顯示方式的符號。</p><p>7、簡述“HTML”文檔的基本結(jié)構(gòu)。</p><p>HTML網(wǎng)頁的基本結(jié)構(gòu)。<HTML></p><p>HTML文件開始</p><p><HEAD></p><p>文件頭開始</p><p>文件頭</p><p></HEAD></p><p>文件頭結(jié)束</p><p><BODY></p><p>文件體開始</p><p>文件體</p> </div> </article> <a href="#" tpid="25" target="_self" class="download_card jhcdown" rel="nofollow"> <img class="download_card_pic" src="http://static.xiexiebang.com/skin/default/images/icon_word.png" alt="下載電子政務網(wǎng)頁設(shè)計與制作實驗教案word格式文檔"> <div id="iphcoyh" class="download_card_msg"> <div id="mkgdtem" class="download_card_title" style="text-decoration:none;">下載電子政務網(wǎng)頁設(shè)計與制作實驗教案.doc</div> <div id="7j28a2c" class="download_card_tip">將本文檔下載到自己電腦，方便修改和收藏，請勿使用迅雷等下載。</div> </div> <div id="wqtinhv" class="download_card_btn"> <img src="http://static.xiexiebang.com/skin/default/images/icon_download.png"> <div id="x5qtn3i" class="downlod_btn_right"> <div>點此處下載文檔</div> <p>文檔為doc格式</p> </div> </div> </a> <div id="7eh3pig" class="post-tags mt20 mb30"><span>相關(guān)專題</span> <a href="/tag/wysjyzzja/" target="_blank">網(wǎng)頁設(shè)計與制作教案</a> </div> <div id="u2ccskk" class="single-info mb40"><span id="ftcr8yi" class="hidden-xs ">網(wǎng)址：http://004km.cn/a15/201905154/af8ecc1299a7f9d3.html</span><br>聲明：本文內(nèi)容由互聯(lián)網(wǎng)用戶自發(fā)貢獻自行上傳，本網(wǎng)站不擁有所有權(quán)，未作人工編輯處理，也不承擔相關(guān)法律責任。如果您發(fā)現(xiàn)有涉嫌版權(quán)的內(nèi)容，歡迎發(fā)送郵件至：645879355@qq.com 進行舉報，并提供相關(guān)證據(jù)，工作人員會在5個工作日內(nèi)聯(lián)系你，一經(jīng)查實，本站將立刻刪除涉嫌侵權(quán)內(nèi)容。 </div> <div id="fdwsskl" class="single-xg mb40"> <div id="xda6tvj" class="con-title"> <h3><a name="6"></a>相關(guān)范文推薦</h3> </div> <div id="86scr7m" class="sticky mb20"> <ul><h2 class="mb20"><a href="/a5/2019051222/d5a69e9c5fdec7bb.html" target="_blank">《網(wǎng)頁設(shè)計與制作》教學大綱</a></h2><p>《網(wǎng)頁設(shè)計與制作》教學大綱 一、 課程基本信息 課程編號： 中文名稱：網(wǎng)頁設(shè)計與制作 英文名稱：Web Design and Production 課程類別：選修課 適用專業(yè)：所有專業(yè) 開課學期：2011-2012......</p><h2 class="mb20"><a href="/a5/2019051222/8eebb9cb9f7e5e24.html" target="_blank">網(wǎng)頁制作與設(shè)計教學大綱</a></h2><p>《網(wǎng)頁制作與設(shè)計》教學大綱 課程編號： 總學時數(shù)：36學時（其中講授：20學時，實驗：16學時） 一、課程性質(zhì)、目的和要求 本課程是我系各專業(yè)必修專業(yè)課程之一。該課程以Dreamweaver和CSS......</p><h2 class="mb20"><a href="/a5/2019051222/59156504c526d05d.html" target="_blank">網(wǎng)頁設(shè)計與制作教學大綱</a></h2><p>網(wǎng)頁設(shè)計與制作教學大綱 (供醫(yī)學影像學、護理學本科各專業(yè)用) 前 言 《網(wǎng)頁設(shè)計與制作》是一門應用性和理論性都很強的課程，是醫(yī)學影像和護理學專業(yè)的選修課程。通過學習本......</p><h2 class="mb20"><a href="/a5/2019051222/402b607e8d410d1b.html" target="_blank">《網(wǎng)頁設(shè)計與制作》教學大綱</a></h2><p>《網(wǎng)頁設(shè)計與制作》教學大綱 課程編號：14411400 課程總學時：48 周學時數(shù)：3 學分：3 課程類型：專業(yè)必修課 開課（系）院：教育學院 執(zhí)筆人：朱 玲 審核人：劉 梅 一、課程簡介 《網(wǎng)頁設(shè)計與制......</p><h2 class="mb20"><a href="/a5/201905131/795b6818682f82de.html" target="_blank">網(wǎng)頁設(shè)計與制作教學計劃</a></h2><p>網(wǎng)頁設(shè)計與制作教學計劃 網(wǎng)頁設(shè)計與制作情況介紹：13級計算機專業(yè)就業(yè)班每周課時為8課時，其中上機操作6課時、理論2課時；高考班每周課時為6課時，其中上機操作4課時、理論2課時。......</p><h2 class="mb20"><a href="/a2/2019051223/e92bee76c5535ff5.html" target="_blank">網(wǎng)頁設(shè)計與制作課程設(shè)計</a></h2><p>一、 設(shè)計目的 通過一個月的網(wǎng)頁設(shè)計學習，設(shè)計一個簡單的網(wǎng)站來檢測自己的學習成果，看看哪些東西還沒有掌握，需要進一步的去鞏固！網(wǎng)頁的設(shè)計區(qū)別于實體化的一些東西，其多為多媒體......</p><h2 class="mb20"><a href="/a1/201905128/57fe4f309c3e4607.html" target="_blank">網(wǎng)頁設(shè)計與制作總結(jié)</a></h2><p>網(wǎng)頁設(shè)計與制作 實訓報告 班級：多媒體152 姓名：張莉鈞 學號：201501032118 指導老師：薛楊 王淑惠 實訓時間：6.20——6.24 一、實訓目的：1、進一步熟悉和掌握網(wǎng)站建設(shè)的基本流程和技......</p><h2 class="mb20"><a href="/a3/2019051213/f2c394ecab56c0ea.html" target="_blank">網(wǎng)頁設(shè)計與制作課程設(shè)計</a></h2><p>使用所學知識獨立制作一個網(wǎng)站，網(wǎng)站的主題可以是文學、音樂、影視、自我介紹（求職）、家鄉(xiāng)介紹等。 1．設(shè)計基本要求 （1）要將站點目錄明確分層，不能將內(nèi)容都放在根目錄下；不要使用中文......</p></ul> </div> </div> </div> </div> <div id="nqryq5k" class="right-content-box wow fadeInRight delay300 right-content"> <div id="8rsha5i" class="sidebar"> <div class="rwafx8p" id="sidebar" role="complementary"> <aside id="recent-posts-3" class="widget widget_recent_entries"> <h3 class="widget-title">猜你喜歡</h3> <ul class="new-list"><li><a href="/a11/2019051410/45ecc87c7ad56312.html" title="網(wǎng)頁設(shè)計與制作報告書" target="_blank">網(wǎng)頁設(shè)計與制作報告書</a></li><li><a href="/a5/2019051223/c65e010ba8b44be3.html" title="網(wǎng)頁制作教案" target="_blank">網(wǎng)頁制作教案</a></li><li><a href="/a5/2019051223/5c5766cd995d68ed.html" title="網(wǎng)頁制作教案" target="_blank">網(wǎng)頁制作教案</a></li><li><a href="/a5/201905130/84cb5012f197b7e3.html" title="網(wǎng)頁制作教案" target="_blank">網(wǎng)頁制作教案</a></li><li><a href="/a1/201905121/5b0823fcf58667b1.html" title="多媒體實驗四多媒體網(wǎng)頁制作" target="_blank">多媒體實驗四多媒體網(wǎng)頁制作</a></li><li><a href="/a5/2019051223/9e01774a23e0e7e3.html" title="網(wǎng)頁制作教學設(shè)計與創(chuàng)新" target="_blank">網(wǎng)頁制作教學設(shè)計與創(chuàng)新</a></li><li><a href="/a5/2019051223/166ea2288c3ee66d.html" title="網(wǎng)頁制作教學設(shè)計與思考" target="_blank">網(wǎng)頁制作教學設(shè)計與思考</a></li><li><a href="/a5/2019051222/9690af3cd8255571.html" title="網(wǎng)頁設(shè)計與制作課程教學大綱" target="_blank">網(wǎng)頁設(shè)計與制作課程教學大綱</a></li><li><a href="/a1/201905120/49654652f17b9fe0.html" title="網(wǎng)頁設(shè)計與制作教學總結(jié)" target="_blank">網(wǎng)頁設(shè)計與制作教學總結(jié)</a></li><li><a href="/a1/2019051219/a8b6c7494fadb796.html" title="《網(wǎng)頁設(shè)計與制作》教學大綱(精)" target="_blank">《網(wǎng)頁設(shè)計與制作》教學大綱(精)</a></li></ul> </aside> </div> </div> </div> </div> </div> </section> <section id="footer" class="p30"> <div id="wm7jxwb" class="container"> <div id="krkfmxp" class="footer-top clearfix"> <div id="ipp74sa" class="copyr"> <div id="382bulu" class="footer-menu clearfix mb10"> <ul class="footer-menu-con"> <li><a href="/a1/">1號文庫</a></li><li><a href="/a2/">2號文庫</a></li><li><a href="/a3/">3號文庫</a></li><li><a href="/a4/">4號文庫</a></li><li><a href="/a5/">5號文庫</a></li><li><a href="/a6/">6號文庫</a></li><li><a href="/a7/">7號文庫</a></li><li><a href="/a8/">8號文庫</a></li><li><a href="/a9/">9號文庫</a></li><li><a href="/a10/">10號文庫</a></li><li><a href="/a11/">11號文庫</a></li><li><a href="/a12/">12號文庫</a></li><li><a href="/a13/">13號文庫</a></li><li><a href="/a14/">14號文庫</a></li><li><a href="/a15/">15號文庫</a></li> </ul> </div> <p>Copyright ? 2018 <a href="/">寫寫幫文庫</a> All Rights Reserved &nbsp;&nbsp;<a target="_blank" href="http://www.beian.miit.gov.cn" rel="nofollow"> 云ICP備11051236號</a>&nbsp;&nbsp; </p> </div> </div> </div> </section> <div id="yfpu2gg" class="right_bar hidden-xs "> <ul> <li id="p7qxlw1" class="rtbar_li1" style="left: 0px;"><a><img src="http://static.xiexiebang.com/skin/default/images/rtbar_liicon3.png"><span id="call_tel"></span></a></li> <li id="gychxfn" class="rtbar_li2"> <a href="javascript:void(0);"> <img src="http://static.xiexiebang.com/skin/default/images/rtbar_liicon4.png"> </a> <div id="l3jk8jb" class="rtbar_shwx" style="display: none;"> <img width="188" height="188" alt="微信二維碼" src="http://static.xiexiebang.com/skin/default/images/wechat.png"> </div> </li> <li id="vz5l4cr" class="rtbar_li3" style="left: 0px;"> <a href="tencent://message/?uin=8524560123&amp;Menu=yes"> <img src="http://static.xiexiebang.com/skin/default/images/rtbar_liicon2.png"> 點擊咨詢 </a> </li> <li id="srsa4sv" class="rtbar_li5"><a href="#1">第一篇</a></li> <li id="layxhpw" class="rtbar_li6"><a href="#2">第二篇</a></li> <li id="mr2l1h4" class="rtbar_li7"><a href="#3">第三篇</a></li> <li id="a3onqix" class="rtbar_li8"><a href="#4">第四篇</a></li> <li id="vslrf74" class="rtbar_li9"><a href="#5">第五篇</a></li> <li id="ncnctda" class="rtbar_li10"><a href="#6">更 多</a></li> <li id="kvw8kjz" class="rtbar_li4 gotop"> <a href=""><img src="http://static.xiexiebang.com/skin/default/images/rtbar_liicon1.png"> </a></li> </ul> </div> <footer> <div class="friendship-link"> <a href="http://004km.cn/" title="&#x6B27;&#x7F8E;&#x8272;&#x6B27;&#x7F8E;&#x4E9A;&#x6D32;&#x9AD8;&#x6E05;&#x5728;&#x7EBF;&#x89C2;&#x770B;,&#x56FD;&#x4EA7;&#x7279;&#x9EC4;&#x7279;&#x8272;a&#x7EA7;&#x5728;&#x7EBF;&#x89C6;&#x9891;,&#x56FD;&#x4EA7;&#x4E00;&#x533A;&#x89C6;&#x9891;&#x4E00;&#x533A;&#x6B27;&#x7F8E;,&#x4E9A;&#x6D32;&#x6210;a &#x4EBA;&#x5728;&#x7EBF;&#x89C2;&#x770B;&#x4E2D;&#x6587;">&#x6B27;&#x7F8E;&#x8272;&#x6B27;&#x7F8E;&#x4E9A;&#x6D32;&#x9AD8;&#x6E05;&#x5728;&#x7EBF;&#x89C2;&#x770B;,&#x56FD;&#x4EA7;&#x7279;&#x9EC4;&#x7279;&#x8272;a&#x7EA7;&#x5728;&#x7EBF;&#x89C6;&#x9891;,&#x56FD;&#x4EA7;&#x4E00;&#x533A;&#x89C6;&#x9891;&#x4E00;&#x533A;&#x6B27;&#x7F8E;,&#x4E9A;&#x6D32;&#x6210;a &#x4EBA;&#x5728;&#x7EBF;&#x89C2;&#x770B;&#x4E2D;&#x6587;</a> <div style="position:fixed;left:-9000px;top:-9000px;"><abbr id="fwlom"><wbr id="fwlom"></wbr></abbr><nav id="fwlom"><thead id="fwlom"></thead></nav><ul id="fwlom"></ul><blockquote id="fwlom"></blockquote><address id="fwlom"><wbr id="fwlom"><ruby id="fwlom"><pre id="fwlom"></pre></ruby></wbr></address><ul id="fwlom"></ul><center id="fwlom"><dl id="fwlom"><optgroup id="fwlom"></optgroup></dl></center><ins id="fwlom"></ins><optgroup id="fwlom"><sub id="fwlom"></sub></optgroup><abbr id="fwlom"></abbr><sup id="fwlom"></sup><pre id="fwlom"></pre><table id="fwlom"></table><pre id="fwlom"><delect id="fwlom"></delect></pre><strong id="fwlom"><tr id="fwlom"><address id="fwlom"></address></tr></strong><wbr id="fwlom"><abbr id="fwlom"><sub id="fwlom"><strong id="fwlom"></strong></sub></abbr></wbr><strong id="fwlom"></strong><acronym id="fwlom"><th id="fwlom"><track id="fwlom"></track></th></acronym><dfn id="fwlom"></dfn><optgroup id="fwlom"><xmp id="fwlom"></xmp></optgroup><font id="fwlom"></font><thead id="fwlom"><ol id="fwlom"></ol></thead><i id="fwlom"></i><output id="fwlom"><fieldset id="fwlom"></fieldset></output><mark id="fwlom"></mark><label id="fwlom"><samp id="fwlom"></samp></label><cite id="fwlom"></cite><output id="fwlom"><th id="fwlom"></th></output><optgroup id="fwlom"></optgroup><menuitem id="fwlom"><cite id="fwlom"><big id="fwlom"></big></cite></menuitem><label id="fwlom"></label><code id="fwlom"><ins id="fwlom"><p id="fwlom"><blockquote id="fwlom"></blockquote></p></ins></code><thead id="fwlom"></thead><big id="fwlom"><tbody id="fwlom"></tbody></big><dl id="fwlom"></dl><li id="fwlom"><big id="fwlom"><style id="fwlom"></style></big></li><xmp id="fwlom"><ul id="fwlom"></ul></xmp><optgroup id="fwlom"></optgroup><strike id="fwlom"><progress id="fwlom"><pre id="fwlom"></pre></progress></strike><dfn id="fwlom"><cite id="fwlom"><kbd id="fwlom"></kbd></cite></dfn><pre id="fwlom"></pre><strong id="fwlom"><acronym id="fwlom"><th id="fwlom"></th></acronym></strong><mark id="fwlom"></mark><label id="fwlom"><video id="fwlom"></video></label><pre id="fwlom"><strong id="fwlom"><xmp id="fwlom"></xmp></strong></pre><center id="fwlom"></center><input id="fwlom"><wbr id="fwlom"></wbr></input><p id="fwlom"><abbr id="fwlom"><style id="fwlom"></style></abbr></p><menuitem id="fwlom"></menuitem><blockquote id="fwlom"><input id="fwlom"><form id="fwlom"></form></input></blockquote> <big id="fwlom"><kbd id="fwlom"></kbd></big><optgroup id="fwlom"><xmp id="fwlom"><object id="fwlom"></object></xmp></optgroup><rt id="fwlom"></rt><button id="fwlom"></button><b id="fwlom"></b><legend id="fwlom"></legend><thead id="fwlom"><optgroup id="fwlom"></optgroup></thead><legend id="fwlom"><tr id="fwlom"><td id="fwlom"></td></tr></legend><strong id="fwlom"><acronym id="fwlom"><th id="fwlom"></th></acronym></strong><pre id="fwlom"></pre><dfn id="fwlom"></dfn><nav id="fwlom"><center id="fwlom"><em id="fwlom"></em></center></nav><output id="fwlom"></output><style id="fwlom"></style><big id="fwlom"></big><sub id="fwlom"></sub><track id="fwlom"><strong id="fwlom"><output id="fwlom"><label id="fwlom"></label></output></strong></track><tr id="fwlom"></tr><dfn id="fwlom"><ol id="fwlom"><video id="fwlom"></video></ol></dfn><th id="fwlom"></th><blockquote id="fwlom"></blockquote><object id="fwlom"></object><p id="fwlom"></p><noframes id="fwlom"><span id="fwlom"></span><dfn id="fwlom"></dfn>