版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認(rèn)領(lǐng)
文檔簡介
課程教案（項目一）
授課內(nèi)容個人網(wǎng)頁的簡單美化——網(wǎng)頁制作基礎(chǔ)知識
授課班級授課學(xué)時6課時
教學(xué)方法
講授法、演示法、討論法。多媒體教學(xué)
與手段
本項目的主要工作內(nèi)容是對一個簡單個人網(wǎng)站首頁的網(wǎng)頁標(biāo)題、背景顏色、字
項目內(nèi)容體大小等基本要素做簡單修改，要求在熟悉網(wǎng)站的基本知識、認(rèn)識網(wǎng)頁的基本
元素基礎(chǔ)上，利用HTML語言完成。
學(xué)生通過本項目的學(xué)習(xí)，能：
1、認(rèn)識網(wǎng)頁和網(wǎng)站
教學(xué)目標(biāo)2、掌握IP地址、網(wǎng)址等基本概念
3、理解靜態(tài)網(wǎng)頁與動態(tài)網(wǎng)頁的區(qū)別
4、掌握簡單HTML文件的編寫方法
教學(xué)重點：
1.什么是網(wǎng)頁？
（1）網(wǎng)頁內(nèi)容組成；
教學(xué)重點
（2）網(wǎng)頁編寫語言種類及特點。
與難點
2.DreamweaverCS3功能簡介。
教學(xué)難點：
創(chuàng)建HTML文檔，掌握簡單HTML文件的編寫方法。
【任務(wù)一】認(rèn)識網(wǎng)站與網(wǎng)頁（2課時）
（-）網(wǎng)頁的概念
網(wǎng)頁：是組成WWW（WorldWideWeb：萬維網(wǎng)）的基本元素，也被稱為頁面
或Web頁。不同的網(wǎng)頁通過超鏈接聯(lián)系在一起，構(gòu)成了WW縱橫交織結(jié)構(gòu)。
網(wǎng)站：就是一個相互鏈接的網(wǎng)頁的集合，它們可以共享?大的網(wǎng)站頁面數(shù)
量多達幾十萬，甚至上百萬頁，小的個人網(wǎng)站也可以只包含數(shù)個頁面。
主頁：是網(wǎng)站中的一個特殊網(wǎng)頁，它是在附卅上進入網(wǎng)站的第一個網(wǎng)頁，
教學(xué)過程其中包含指向其他網(wǎng)頁的超鏈接，通常主頁的名稱是固定的。
設(shè)計
（二）網(wǎng)頁中的常見元素
?文本
?圖像：JPG、PNG、GIF
?超鏈接
?表單
?表格
?動畫
（三）IP地址、域名和網(wǎng)址
IP地址：由4個小于256的數(shù)字組成，數(shù)字之間用點間隔
域名：獨一無二,例如：www.sina.com
網(wǎng)址：又稱URL,由通信協(xié)議名稱、域名或IP地址、網(wǎng)頁在服務(wù)器中的
路徑和文件名4部分組成。
（四）動態(tài)網(wǎng)頁與靜態(tài)網(wǎng)頁
動態(tài)網(wǎng)頁（DHTML）：后綴名為.asp、.jsp、.php、.cgi等
靜態(tài)網(wǎng)頁（HTML）：后綴名.htm、.html、.xml等
（五）任務(wù)實施：制作個人網(wǎng)站
【任務(wù)二】使用HTML語言修改簡單網(wǎng)頁（4課時）
小貼士：什么是HTML語言
HTML（HypertextMarkupLanguage,超文本標(biāo)記語言）不是一種編程語
言，而是一種描述性的標(biāo)記語言，用于描述超文本中內(nèi)容的顯示方式。其最基
本的語法就是：〈標(biāo)記〉內(nèi)容〈/標(biāo)記》.標(biāo)記通常都是成對使用的，一個開頭標(biāo)
記就對應(yīng)有一個結(jié)束標(biāo)記。結(jié)束標(biāo)記只是在開頭標(biāo)記的前面加一個斜杠'7”。
當(dāng)瀏覽器從服務(wù)器接收到HTML文件后，就會解釋里面的標(biāo)記符，然后把標(biāo)記
符相對應(yīng)的功能表達出來。
（-）創(chuàng)建HTML文件
（1）選擇“開始”，然后依次選擇“程序”一“附件”一“記事本”命
令。
（2）在打開的記事本窗口中寫入代碼：
<html>
<head>
<title>test</title>
</head>
<body>
<b>
互聯(lián)網(wǎng)，我來了！
</b>
</body>
</html>
（3）保存該文檔。
（4）雙擊該HTML文件，會自動打開瀏覽器，顯示文件內(nèi)容。
（二）HTML文件結(jié)構(gòu)
1.<html>標(biāo)記
標(biāo)記放在HTML文件的開頭，并沒有實質(zhì)性的功能，只是一個形式上
的標(biāo)記，但要形成一個良好的編寫習(xí)慣，在HTML文件開頭使用標(biāo)記來做
一個形式上的開始。
2.<head>標(biāo)記
<head>也稱為頭標(biāo)記，一般放在<html>標(biāo)記里，其作用是放置關(guān)于此HTML
文件的信息，如提供索引、定義CSS樣式等。
3.<title>標(biāo)記
稱為標(biāo)題標(biāo)記，包含在<head>標(biāo)記內(nèi)，它的作用是設(shè)定網(wǎng)頁標(biāo)題，
可以看見在瀏覽器左上方的標(biāo)題欄中顯示這個標(biāo)題，此外，在Windows任務(wù)欄
中顯示的也是這個標(biāo)題。
4.<body>標(biāo)記
<body》又稱為主體標(biāo)記，網(wǎng)頁所要顯示的內(nèi)容都放在這個標(biāo)記內(nèi)，它是
HTML文件的重點所在。它并不僅僅是一個形式上的標(biāo)記，它本身也可以控制網(wǎng)
頁的背景顏色或背景圖像。
（三）簡單的HTML案例
1.設(shè)置標(biāo)題
2.設(shè)置文字顏色
3.設(shè)置加粗、傾斜及文字顏色
4、插入圖片
5、注釋標(biāo)記
（四）任務(wù)實施：對個人網(wǎng)站首頁做簡單修改
【知識拓展】網(wǎng)頁美化常識
（一）、網(wǎng)頁顏色的選擇與搭配
設(shè)計網(wǎng)頁時，可根據(jù)以下原則確定網(wǎng)頁的背景色和主色調(diào)，并進行顏色搭
配。
（1）網(wǎng)頁背景顏色最好選擇白色或黑色。
（2）可根據(jù)網(wǎng)站的性質(zhì)或網(wǎng)站標(biāo)志（Logo,又稱站標(biāo)）的顏色確定網(wǎng)頁的
主色調(diào)，并且該主色調(diào)應(yīng)貫穿于網(wǎng)站中的全部網(wǎng)頁。
（3）設(shè)計網(wǎng)頁時可充分利用同類色、鄰近色和對比色，以增強網(wǎng)頁的層次
感、豐富網(wǎng)頁的色彩或突出某些重要內(nèi)容（如導(dǎo)航條或版塊標(biāo)題）。
網(wǎng)頁色彩搭配的原理包括以下幾點。
（1）色彩的鮮明性。網(wǎng)頁的色彩要鮮艷，容易引人注目。
（2）色彩的獨特性。要有與眾不同的色彩，使得大家對網(wǎng)頁的印象強烈。
（3）色彩的合適性。色彩和網(wǎng)頁表達的內(nèi)容氣氛相適合，如用粉色體現(xiàn)女
性站點的柔性。
（4）色彩的聯(lián)想性。不同色彩會產(chǎn)生不同的聯(lián)想，如藍(lán)色想到天空，黑色
想到黑夜，紅色想到喜事等，選擇色彩要和網(wǎng)頁的內(nèi)涵相關(guān)聯(lián)。
（二）、網(wǎng)頁版式設(shè)計
（1）最好為導(dǎo)航條和各版塊標(biāo)題區(qū)設(shè)計一組形狀別致、顏色突出的背景圖
像，以方便網(wǎng)頁瀏覽者快速找到自己需要的內(nèi)容，并使網(wǎng)頁看起來更精美別致。
（2）對每個版塊而言，可通過插入典型圖片吸引訪問者。
（3）各版塊之間以空白區(qū)分隔。同時，為使各版塊區(qū)分明顯，還可為其設(shè)
置不同的背景色或加上邊框。
（三）網(wǎng)頁尺寸
目前，我國大部分電腦的顯示器的分辨率為1024X768像素。因此，為避
免在瀏覽網(wǎng)頁時需頻繁拖動水平滾動條，最好將網(wǎng)頁寬度設(shè)置為1024像素以
內(nèi)。
作業(yè)：
1.列舉你所了解的網(wǎng)頁設(shè)計的常用工具和美化網(wǎng)頁的主要工具。
2.網(wǎng)頁的基本組成部分包括哪些？
3.最簡單完整的HTML文件結(jié)構(gòu)包括哪些？
4.利用網(wǎng)上資源，在百度中搜索“網(wǎng)頁配色方案”關(guān)鍵詞，下載相關(guān)的“網(wǎng)頁配色方
案”文件，指導(dǎo)以后網(wǎng)頁設(shè)計中的配色問題。
課程教案
授課內(nèi)容項目二創(chuàng)建度假村網(wǎng)站
授課班級授課學(xué)時8課時
教學(xué)方法
講授法、演示法、討論法。多媒體教學(xué)
與手段
本次課程將講授網(wǎng)站站點的創(chuàng)建與管理知識，使學(xué)生了解站點的基本概
念，站點的種類，站點的作用，站點文件的管理。站點的發(fā)布及網(wǎng)頁的預(yù)覽。
項目內(nèi)容本項目的工作內(nèi)容是為某度假村公司創(chuàng)建網(wǎng)站。該公司要求度假村網(wǎng)站的
首頁以動靜相結(jié)合的方式突出度假村的整體形象，給人的視覺沖擊力強，網(wǎng)站
風(fēng)格獨特、新穎、嚴(yán)謹(jǐn)、大方、浪漫、溫馨。
學(xué)生通過本項目的學(xué)習(xí)，能：
5、了解網(wǎng)頁文檔和文件的命名規(guī)則
6、熟悉定義站點的步驟
教學(xué)目標(biāo)7、初步認(rèn)識DreamweaverCS3后，學(xué)習(xí)新建和管理站點的方法，主要包括網(wǎng)
頁文檔和文件夾的命名規(guī)則，定義站點以及新建、保存、關(guān)閉、打開和預(yù)
覽文檔的方法。
8、熟練掌握頁面屬性及網(wǎng)頁頭信息的設(shè)置
教學(xué)重點：
1、熟悉網(wǎng)頁文檔結(jié)構(gòu)，正確命名文檔
2、正確定義站點
教學(xué)重點
教學(xué)難點：
與難點
1、創(chuàng)建站點，新建文檔。
2、掌握頁面屬性及網(wǎng)頁頭信息的設(shè)置。
知識加油站：網(wǎng)頁中文件夾與文件的命名規(guī)則
L靜態(tài)的首頁文件一般命名為“index.html"。如果是包含程序代碼的動態(tài)頁
面，如ASP文件，則命名為“index.asp”。總之，后綴名與網(wǎng)頁本身所使用的
技術(shù)是一一對應(yīng)的。
2.最好不要使用中文命名文件和文件夾，因為在使用Unix或Linux作為操作
系統(tǒng)的主機上，使用中文命名的文件會出錯。
3.文件名中不要使用大寫英文字母，因為Unix操作系統(tǒng)區(qū)分英文字母大小
寫，而Windows操作系統(tǒng)不區(qū)分英文字母大小寫。因此，為保證網(wǎng)站發(fā)布后不
出錯，文件名最好全部使用小寫英文字母。
4.運算符號不能用在文件名的開頭。
5.比較長的文件名可以使用下劃線隔開多個單詞或關(guān)鍵字。
6.在大型網(wǎng)站中，分支頁面的文件應(yīng)存放在單獨的文件夾中，每個分支中的圖
像也應(yīng)該存放在單獨的文件夾中，存放網(wǎng)頁圖像的文件夾一般命名為
"images"或者"img”。
7.在動態(tài)網(wǎng)站中，用來存放數(shù)據(jù)庫的文件夾一般命名為“data”或者
“database”。
【活動一】定義站點
教學(xué)過程
步驟1在電腦的磁盤上創(chuàng)建一個要作為站點的根文件夾。
設(shè)計
步驟2啟動DreamweaverCS3后，選擇“站點”一“新建站點”菜單，打
開“未命名地點1的站點定義為”對話框。單擊“基本”選項卡，在上面的編
輯框中輸入站點名（此處為“fuligong"），然后單擊“下一步”按鈕。
步驟3由于創(chuàng)建的是靜態(tài)站點，因此，在接著彈出的對話框中選擇“否，
我不想使用服務(wù)器技術(shù)”單選鈕，然后單擊“下一步”按鈕。
步驟4在接下來彈出的對話框中選擇“編輯我的計算機…”單選鈕，單擊
“您將把…”編輯框后的文件夾圖標(biāo)，在打開的“選擇站點fuligong的本地根
文件夾：”對話框中選擇本地硬盤上的站點根文件夾，然后單擊“選擇”按鈕。
步驟5回到“fuligong的站點定義為”對話框，單擊“下一步”按鈕。由于
現(xiàn)在只是在本地編寫和調(diào)試網(wǎng)頁，故不需要連接到遠(yuǎn)程服務(wù)器，在“您如何…”
下拉列表中選擇“無工
步驟6單擊“下一步”按鈕，系統(tǒng)顯示所設(shè)參數(shù)總結(jié)，單擊“完成”按鈕,
此時便完成了站點的創(chuàng)建。
【活動二】新建文檔
Dreamweaver中的文檔也就是網(wǎng)頁，創(chuàng)建新網(wǎng)頁的方法有多和％下面使用
“文件”菜單創(chuàng)建網(wǎng)頁。
步驟1選擇“文件”一“新建”菜單，打開“新建文檔”對話框。在左側(cè)的
“文檔類型”列表中選擇創(chuàng)建方式，這里選擇“空白頁”，在“頁面類型”列表
中選擇網(wǎng)頁類型，這里選擇“HTML”，在“布局”列表中選擇布局類型，這里選
擇“無二
步驟2設(shè)置完后單擊“創(chuàng)建”按鈕，就創(chuàng)建了一個默認(rèn)名為“Untitled-1”
的新文檔。如圖所示：
tnwi
通金員BH
mt?tfi1手函?W
"
KSU（麗）?多崛?O
列B
情*皿（M?）1wH
■2?至
分助百I列EK
>????-
？cssK
>列?希
■—JwtSerift
2MB??
；XU.
?列量定,
iMtm
AKWWIS2今吟
工
2孚酶?
42>W>
*tStVKcrapl25<JI?tt-。心M注
*tsrmct
-2夕M
-ASPHTVI2
4C?ldFv?>?n2列陪
-catfwiMig??W1齊
J列費比?
--a，通Km
2WU-
2對蜂，
2MXft.
：?&??）：■■匚濁；森出。3
【活動三】保存和關(guān)閉文檔
新建或編輯網(wǎng)頁文檔后，需要保存文檔才能使所做的設(shè)置生效。
步驟1如要保存文檔，可選擇“文件”一“保存”菜單，或按［Ctrl+S］組
合鍵，彈出“另存為”對話框，在該對話框的“保存在”下拉列表中選擇保存
文檔的文件夾，在“文件名”編輯框中輸入文檔名。
步驟2設(shè)置完后單擊“保存”按鈕，便將文檔保存在選擇的文件夾中，此時
“文件”面板中也會出現(xiàn)剛保存的文檔。
步驟3關(guān)閉文檔的操作相當(dāng)簡單，只需單擊相應(yīng)文檔右上角的“關(guān)閉”按
鈕，或按【Ctrl+W】組合鍵即可。
【活動四】打開和預(yù)覽文檔
除常用的新建、保存和關(guān)閉文檔操作外，有時還需要打開某個文檔進行編輯。
步驟1要打開文檔，可選擇“文件”一“打開”菜單，彈出“打開”對話框。
步驟2在“查找范圍”下拉菜單中選擇文檔所在文件夾，在文件列表中選擇
要打開的文檔，單擊“打開”按鈕，即可打開所選擇的文檔。
步驟3在對網(wǎng)頁執(zhí)行保存操作后，通常需要預(yù)覽一下編輯效果.如果預(yù)覽文
檔，可在對網(wǎng)頁執(zhí)行保存操作后，單擊“文檔”工具欄中的“在瀏覽器中預(yù)覽
/調(diào)試”按鈕，在彈出的菜單中選擇“預(yù)覽在【Explore”菜單項，在瀏覽器中預(yù)
覽文檔。
【活動五】“文件”面板的應(yīng)用
使用“文件”面板可以非常高效地管理站點。實際操作中，在定義站點后,
通常都是利用該面板創(chuàng)建、重命名或打開站點中的網(wǎng)頁文檔或文件夾。
步驟1要創(chuàng)建網(wǎng)頁文檔，可右鍵單擊“文件”面板中的站點根文件夾，在彈
出的快捷菜單中選擇“新建文件”選項，新建的文檔名處于可編輯狀態(tài)。
▼K
文件
'ifullconf，,本地視圖，
E支西KgBFT
日0站點"fullCOMtt文件夾
BlOfvliconc文件夾
文件夾
ddlhulSDKim.2
ind?xhtal6KBKTIL:
intro,htal8XBKTH.：
text.txt2?文本文
IKBK71L1
步驟2單擊并拖動鼠標(biāo)選中文檔名，輸入新名稱（此處為“com”），之后按
Enter鍵確認(rèn)。
8KBHTMLJ
2文本文
lc<?h<i?L1KBHTMLJ
步驟3要新建文件夾，可在目標(biāo)文件夾上單擊鼠標(biāo)右鍵，在彈出的快捷菜單
中選擇“新建文件夾”選項，即可在目標(biāo)文件夾中新建一個文件夾。
*2M
KoT?tV4O|55
步驟4參照重命名網(wǎng)頁文檔的方法，將文件夾重命名為“images"，以存放
網(wǎng)站中用到的圖像文件。
步驟5要刪除網(wǎng)頁文檔或文件夾，可以右鍵單擊文檔或文件夾，然后在彈出
的快捷菜單中選擇“編輯”一“刪除”選項，也可在選中文檔后，直接按Delete
鍵刪除。
步驟6除上述操作外，在“文件”面板中還可以非常方便地打開文檔。雙
擊“文件”面板中的網(wǎng)頁文檔，可在文檔編輯窗口中打開該文檔。
步驟7要重命名現(xiàn)有的網(wǎng)頁文檔或文件夾，可首先選中文檔或文件夾，然后
單擊文檔名或文件夾名，接著輸入新名稱即可。重命名文檔時，注意不要更改
其擴展名。
【任務(wù)實施】
請同學(xué)們參考演示步驟，先確定本地站點的目錄結(jié)構(gòu)，并準(zhǔn)備好相應(yīng)的素
材文件，然后在Dreamweaver中定義站點并創(chuàng)建網(wǎng)頁，進行度假村網(wǎng)站創(chuàng)建的
具體操作。
【活動六】設(shè)置頭信息
頭信息包括網(wǎng)頁關(guān)鍵字、網(wǎng)頁說明等。在使用Google、Baidu、Yahoo等搜
索引擎搜索網(wǎng)頁時，不是檢索網(wǎng)頁的所有內(nèi)容，而是只檢索網(wǎng)頁的關(guān)鍵字。如
果想要自己的網(wǎng)頁能夠被搜索引擎檢索到，最好把關(guān)鍵字設(shè)置為人們經(jīng)常使用
的詞語。
步驟1單擊“常用”插入欄中“文件頭”按鈕右側(cè)的下拉按鈕，在打開的
下拉列表中選擇“關(guān)鍵字”，打開“關(guān)鍵字”對話框。在“關(guān)鍵字”編輯框中輸
入要為網(wǎng)頁設(shè)置的關(guān)鍵字，各個關(guān)鍵字之間用逗號隔開，單擊“確定”按鈕，
插入關(guān)鍵字。
步驟2為確認(rèn)所插入的關(guān)鍵字，單擊“拆分”按鈕，在文檔窗口上方將顯示
“代碼”視圖，可以看到在〈head〉標(biāo)簽里插入了＜meta＞標(biāo)簽，其中顯示了剛才
設(shè)置的關(guān)鍵字。
步驟3除關(guān)鍵字外，搜索引擎在檢索網(wǎng)頁時還會查看網(wǎng)頁中的說明文本。單
擊“常用”插入欄中“文件頭”按鈕右側(cè)的下拉按鈕，在打開的下拉列表中選
擇''說明"，打開“說明”對話框，在“說明”編輯框中輸入對網(wǎng)頁的描述性文
本。
【活動七】設(shè)置頁面屬性
頁面屬性主要包括頁面字體、文本顏色、文檔標(biāo)題、頁邊距、背景顏色和
背景圖像等。
步驟1單擊“屬性”面板上的“頁面屬性”按鈕，或按【Ctrl+J】組合鍵，
打開“頁面屬性”對話框。
步驟2在“頁面字體”下拉列表中選擇網(wǎng)頁默認(rèn)的字體。如果沒有需要的字
體，可選擇“編輯字體列表”選項，打開“編輯字體列表”對話框，在“可用
字體”列表框中選擇一種字體，然后單擊按鈕，可將選中的字體加入到字體列
表中。
步驟3如果還想添加其他字體，可繼續(xù)執(zhí)行上面的操作。添加完后單擊“確
定”按鈕，關(guān)閉”編輯字體列表”對話框，回到''頁面屬性”對話框，在“字
體”下拉列表中選擇需要的字體。
步驟4在“大小”下拉列表中可設(shè)置網(wǎng)頁默認(rèn)文本的大小；單擊“文本顏色”
后的按鈕，在彈出的調(diào)色板中設(shè)置網(wǎng)頁文本的顏色；采用同樣的方法可設(shè)置網(wǎng)
頁的背景顏色。
步驟5單擊“背景圖像”編輯框后的“瀏覽”按鈕，打開“選擇圖像源文件”
對話框，在對話框中選擇要設(shè)置為背景圖像的文件，然后單擊“確定”按鈕，
可將其設(shè)置為網(wǎng)頁背景。
步驟6在“重復(fù)”下拉列表中可設(shè)置背景圖像的顯示方式，其中，“不重復(fù)”
表示背景圖像保持原大小和位置；“重復(fù)”為默認(rèn)項，選擇該項，背景圖像會填
滿整個窗口；“橫向重復(fù)”表示背景圖像沿水平方向平鋪；“縱向重復(fù)”表示背
景圖像沿垂直方向平鋪。
步驟7在表示邊距的四個編輯框里分別輸入邊距值（指網(wǎng)頁有效內(nèi)容區(qū)距
離網(wǎng)頁上、下、左、右邊界的距離），一般設(shè)置為0。單擊左側(cè)“分類”列表中
的“鏈接”選項，可設(shè)置網(wǎng)頁中鏈接文本的顏色、是否有下劃線等。
步驟8單擊左側(cè)“分類”列表中的“標(biāo)題/編碼”選項，在“標(biāo)題”編輯框
中輸入網(wǎng)頁標(biāo)題，一般是表示網(wǎng)頁特征或歡迎詞之類的文本；在“編碼”下拉
列表中選擇網(wǎng)頁使用的編碼類型，一般選擇“簡體中文（GB2312）”。
步驟9單擊“確定”按鈕，關(guān)閉“頁面屬性”對話框，前面所做的設(shè)置將
應(yīng)用于網(wǎng)頁文檔中。
【任務(wù)實施】
請同學(xué)們參考課本，通過為前面創(chuàng)建的度假村網(wǎng)站首頁“index.html”設(shè)
置頭信息和頁面屬性，來學(xué)習(xí)頭信息和頁面屬性在實際網(wǎng)頁制作中的應(yīng)用。
uicutionvilLtgc
_yWIT介
—?I-
tucafionmllagtccnwwrVBBJJKiucoinwsuwo
【知識拓展】網(wǎng)站制作流程
1、確定網(wǎng)站內(nèi)容
2、規(guī)劃網(wǎng)站結(jié)構(gòu)
3、收集網(wǎng)站素材
4、設(shè)計制作網(wǎng)站頁面
5、空間和域名申請
6、測試和發(fā)布網(wǎng)站
7、推廣和維護網(wǎng)站
作業(yè)：
5.請簡述網(wǎng)頁文檔的命名規(guī)則。
6.請簡述刪除站點的步驟？
7.如何修改網(wǎng)頁背景顏色？
課程教案
授課內(nèi)容項目三制作汽車網(wǎng)站
授課班級授課學(xué)時8課時
教學(xué)方法
講授法、演示法、討論法。多媒體教學(xué)
與手段
某以經(jīng)營福特公司生產(chǎn)的汽車產(chǎn)品為主的汽車貿(mào)易公司目前正
在建設(shè)其門戶網(wǎng)站，本項目的內(nèi)容就是完成該項目中的產(chǎn)品展示與
項目內(nèi)容
營銷部分的設(shè)計制作。這部分是整個網(wǎng)站的核心，根據(jù)公司的要
求，應(yīng)建立完善的產(chǎn)品展示平臺和信息發(fā)布系統(tǒng)。
學(xué)生通過本項目的學(xué)習(xí)，能：
9、輸入并設(shè)置網(wǎng)頁文本
10、正確插入與編輯圖像
教學(xué)目標(biāo)
11、掌握導(dǎo)航條的制作
12、掌握插入Flash動畫的方法
13、掌握插入音頻和視頻的方法
教學(xué)重點：
1、熟練掌握文本的輸入與格式設(shè)置
2、掌握編輯圖像的方法及各種特效的制作方法
教學(xué)重點
教學(xué)難點：
與難點
3、掌握導(dǎo)航條的制作
4、應(yīng)用動畫及多媒體。
教學(xué)過程
項目效果
設(shè)計
【任務(wù)一】輸入并設(shè)置網(wǎng)站子頁文本
文本是網(wǎng)頁中不可缺少的組成元素，它能將各種信息有效地傳達給瀏覽者。
本任務(wù)介紹文本的輸入與編輯方法，主要包括文本的輸入、文本段落格式和字
符格式的設(shè)置，以及水平線和特殊字符的插入。
（一）輸入文本
步驟1首先用記事本打開外部文本，然后選擇“格式”一“自動換行”菜單,
取消“自動換行”前面的對勾。
步驟2按【Ctrl+A】組合鍵全選文本，然后按【Ctrl+C】組合鍵復(fù)制選中的文
本。
步驟3切換至Dreamweaver操作界面，將插入點置于網(wǎng)頁中要輸入文本的位
置，按［Ctrl+V］組合鍵即可將文本粘貼到網(wǎng)頁中。
（二）設(shè)置文本段落格式和字符格式
1.設(shè)置字體列表
Dreamweaver中自帶的字體有限，一般滿足不了大多數(shù)網(wǎng)頁設(shè)計者的需求。
可以通過設(shè)置字體列表解決這一問題。選中“屬性”面板的“字體”選項，彈
出“編輯字體列表”對話框。然后可參照項目二任務(wù)3"設(shè)置頁面屬性”中的
操作設(shè)置字體列表。
2.設(shè)置文本字體及大小
設(shè)置好需要的字體列表后，就可以為網(wǎng)頁中的文本設(shè)置字體了。下面介紹
在“屬性”面板中設(shè)置文本字體及大小的方法。
步驟1在文檔中選中文本，如“最新商品”，在“屬性”面板上“字體”下拉
列表中選擇所需字體，如“方正準(zhǔn)圓一GBK”，單擊“B”按鈕使文字加粗顯示。
步驟2在“大小”下拉列表中選擇“16”，設(shè)置文本大小。
3.設(shè)置段落縮進
通過設(shè)置段落縮進格式，可以更好地為文檔布局。將插入點置于需要設(shè)置
段落縮進的任意段落中，在“屬性”面板上“格式”下拉列表中選擇“段落”
選項，單擊“文本凸出”按鈕可使段落凸出，單擊“文本縮進”按鈕可使段落
縮進。
4.設(shè)置列表項
列表分為項目列表和編號列表，項目列表常應(yīng)用在“列舉”類型的文本中,
編號列表常應(yīng)用在“條款”類型的文本中，這種方式使得文本更加直觀、明了。
選中所要設(shè)置的文本，然后單擊“屬性”面板上的“項目列表”按鈕。
小提示：在對文本應(yīng)用列表項之前,必須用Enter鍵把文本中的各項分為不同
的段落。
（三）插入水平線和特殊字符
如果網(wǎng)頁文檔由很長的內(nèi)容構(gòu)成，可在內(nèi)容中間插入水平線，從而使網(wǎng)頁
內(nèi)容更容易理解，閱讀起來也更輕松。另外，網(wǎng)頁中還經(jīng)常包含一些特殊字符,
如版本符號、貨幣符號等。此處介紹如何在網(wǎng)頁中插入水平線和特殊字符。
1.插入水平線
水平線對于組織信息和區(qū)分版塊很有幫助，如圖所示。要插入水平線，可
在定位插入點后，選擇“插入記錄”一“HTML”一“水平線”菜單。
水平線“屬性”面板中各常用項的意義：
?水平線：設(shè)置水平線名稱，主要用于腳本程序。
?寬：設(shè)置水平線的寬度，以像素或百分比為單位。缺省為空，表示采用默
認(rèn)值（100%）。
?高：設(shè)置水平線的粗細(xì)，以像素為單位。缺省為空，表示采用默認(rèn)值（2像
素）。
?對齊：設(shè)置水平線的對齊方式。
?陰影：是否為水平線添加陰影效果。
?類（C）：為水平線設(shè)置類樣式（3種樣式之一，將在項目七中做詳細(xì)介紹）。
2.插入特殊字符
要插入特殊字符，可在定位插入點后，選擇''插入記錄”一“HTML”一“特
殊字符”菜單，然后在彈出的菜單中選擇相應(yīng)的特殊字符，如左圖所示。
如果在“特殊字符”菜單下沒有找到需要的特殊字符，可以通過選擇該菜
單中最下面的“其他字符”命令打開“插入其他字符”對話框，這樣可以獲取
更多的特殊字符。如右圖所示.在該對話框中選中要插入的字符后，單擊“確
定”按鈕即可插入。
小提示：使用“插入”欄可以非?？旖莸夭迦胩厥庾址?。具體方法為，將插入
欄切換至“文本”插入欄，單擊最右側(cè)“換行符”按鈕后的小三角圖標(biāo)，在打
開的下拉列表中選擇要插入的特殊字符。
【任務(wù)實施】
在學(xué)習(xí)了文本的輸入與編輯方法后，請同學(xué)們?yōu)槠嚲W(wǎng)站中的“關(guān)于福特
汽車”網(wǎng)頁輸入文本并設(shè)置格式。
【任務(wù)二】在主頁中插入導(dǎo)航條和圖像一一應(yīng)用圖像
（一）網(wǎng)頁中常見的圖像文件格式
目前在網(wǎng)頁中可以使用的圖像包括JPEG、GIF和PNG格式，下面分別列出
了它們各自的特點。
?JPEG（聯(lián)合圖像專家組標(biāo)準(zhǔn)）格式：該格式適于表現(xiàn)色彩豐富，具有
連續(xù)色調(diào)的圖像，如各種照片。其優(yōu)點是圖像質(zhì)量高，缺點是文件尺
寸稍大（相對于其他格式），且不能包含透明區(qū)。
?GIF（圖形交換格式）格式：由于它最多只能包含256種顏色，因而適
合表現(xiàn)色調(diào)不連續(xù)或具有大面積單一顏色的圖像，如卡通畫、按鈕、
圖標(biāo)、徽標(biāo)等。其優(yōu)點是圖像尺寸小，可包含透明區(qū)，且可制成包含
多幅畫面的簡單動畫，缺點是圖像質(zhì)量稍差。
?PNG（便攜網(wǎng)絡(luò)圖像）格式：該格式集JPEG和GIF格式的優(yōu)點于一身,
圖像質(zhì)量高且可包含透明區(qū)。
（二）插入與編輯圖像
在Dreamweaver中插入圖像的方法非常簡單，下面介紹具體操作。
步驟1首先在要插入圖像的位置單擊確定插入點，然后單擊“常用”插
入欄中的“圖像”按鈕。
步驟2打開“選擇圖像源文件”對話框，在“查找范圍”下拉列表中選
擇圖像文件夾，在文件列表中選擇要插入的圖像文件，然后單擊“確定”按鈕
插入圖像。
'**??
Ma,?,■?=
需一一一
（MX*
小提示：同網(wǎng)頁的背景圖像的設(shè)置一樣,如果此時所選圖像不在站點根文件夾
中，Dreamweaver會彈出提示框，詢問是否將圖像復(fù)制到站點根文件夾中。單擊
“是”按鈕，系統(tǒng)會自動復(fù)制圖像文件到站點根文件夾中。否則，在發(fā)布網(wǎng)頁
后，會因找不到圖像而無法顯示。
步驟3選中插入的圖像，可利用“屬性”面板對該圖像的各項屬性進行修改。
M.?eifGo畔▼
?>???_______g01sthCA
演anMCis
ITnot）亦平力率期疏震b中r國工^^29
下面列出圖像“屬性”面板中各常用項的意義。
?圖像：設(shè)置圖像名稱，主要用于通過腳本控制圖像。
?寬和高：圖像的寬度和高度（單位為像素），當(dāng)改變了圖像的尺寸后，該數(shù)
值將加粗顯示。
?源文件：顯示圖像文件的路徑。
?鏈接：用于創(chuàng)建從圖像到其他文件的鏈接。
?替換：在瀏覽器無法顯示圖像文件時，在圖像位置顯示的說明性文字。
?垂直邊距和水平邊距：指定圖像上、下、左、右空白的像素值。
?目標(biāo)：設(shè)置在何處打開鏈接文檔，.blank表示新窗口，.self表示當(dāng)前窗
口，.parent表示當(dāng)前窗口的父窗口，_top表示當(dāng)前窗口的頂級窗口。
?邊框：設(shè)置圖像邊框的粗細(xì)，以像素為單位。有時在為圖像設(shè)置鏈接后，
圖像的周圍會多出一個藍(lán)色的邊框，此時只需將圖像的邊框值設(shè)置為“0”,
即可將該邊框去掉。
?對齊：確定圖像在單元格或頁面中的對齊方式。
（三）使用圖像占位符
圖像占位符相當(dāng)于圖像的臨時替代對象。如果網(wǎng)頁中的某個圖像尚未制作
好，可暫時用圖像占位符代替。
步驟1圖像占位符的用法非常簡單。確定插入點后，選擇“插入記錄”f“圖
像對象”一“圖像占位符”菜單，打開“圖像占位符”對話框，然后設(shè)置其名
稱、寬度、高度、顏色和替換文本。
步驟2單擊“確定”按鈕，在指定位置插入一個圖像占位符。
步驟3要用制作好的圖像替換圖像占位符，可首先單擊選擇圖像占位符，然
后在“屬性”面板的“源文件”編輯框中輸入帶路徑的文件名，或者單擊該編
輯框后面的“瀏覽文件”按鈕，在打開的“選擇圖像源文件”對話框中選擇要
替換的圖像，單擊“確定”按鈕，Dreamweaver會自動將圖像占位符替換為所
選擇的圖像。
（四）制作鼠標(biāo)經(jīng)過圖像
在網(wǎng)頁中經(jīng)常可以看到這種情況，當(dāng)鼠標(biāo)移動到某一圖像上時，圖像變成
了另一幅圖像，而當(dāng)鼠標(biāo)移開時，又恢復(fù)成原來的圖像，這就是通常所說的鼠
標(biāo)經(jīng)過圖像。
要制作鼠標(biāo)經(jīng)過圖像，需要用到兩張大小相同，而內(nèi)容不同的圖像。其中
一張作為原始圖像，在頁面打開的時候顯示；另一張則作為鼠標(biāo)經(jīng)過圖像，在
鼠標(biāo)經(jīng)過的時候替換原始圖像顯示出來。以下示例采用了本項目素材中“image”
文件夾中的兩張圖片“EAR」,jpg"和“EAR2.jpg",在開始操作之前，先將這
兩張圖片拷貝到本地站點的圖像文件夾中。
步驟1在本地站點中新建文檔，并重命名為“image,html”。雙擊打開該文
檔，在文檔窗口中單擊定位插入點，然后選擇“插入記錄”-“圖像對象”一
“鼠標(biāo)經(jīng)過圖像”菜單。
步驟2彈出“插入鼠標(biāo)經(jīng)過圖像”對話框，在“圖像名稱”編輯框中為圖像輸
入一個名稱（此處為“ear”），然后單擊“原始圖像”編輯框右側(cè)的“瀏覽”按
鈕，彈出“原始圖像：”對話框，在“查找范圍”下拉列表中選擇圖像所在文件
夾，在文件列表中選擇原始圖像（此處為EARl.jpg）,然后單擊“確定”按鈕。
步驟3按照同樣的方法設(shè)置“鼠標(biāo)經(jīng)過圖像”為“EAR_2.jpg”，在“替換
文本”編輯框中輸入替換文本（此處為“耳釘”），在“按下時，前往的URL”編
輯框中輸入單擊圖像時將打開的網(wǎng)頁文檔名稱（或單擊編輯框右側(cè)的“瀏覽”
按鈕選擇網(wǎng)頁），最后單擊“確定”按鈕，插入鼠標(biāo)經(jīng)過圖像。
步驟4按【Ctrl+S】組合鍵保存文檔，然后按F12鍵預(yù)覽網(wǎng)頁，將光標(biāo)放
在設(shè)置為鼠標(biāo)經(jīng)過圖像上方時，可以看到原始圖像變?yōu)槭髽?biāo)經(jīng)過圖像。
（五）制作導(dǎo)航條
導(dǎo)航條在網(wǎng)站中起著不可替代的作用，它把網(wǎng)站中的各個頁面連接起來。
每一個網(wǎng)站都有自己的導(dǎo)航條。利用與制作鼠標(biāo)經(jīng)過圖像類似的方法，可制作
具有可變效果的導(dǎo)航條。制作導(dǎo)航條需要用到兩組大小相同而內(nèi)容不同的圖片,
本項目素材"image”文件夾中準(zhǔn)備了兩組圖片“dhal?dha6"和"dhbl~dhb6”,
在開始操作之前應(yīng)先將這兩組圖片拷貝到本地站點的圖像文件夾中。
步驟1在本地站點中新建文檔，保存并重命名為“dh.html”。雙擊打開該
文檔，在文檔窗口中單擊定位插入點，然后選擇“插入記錄”-“圖像對象”
一“導(dǎo)航條”菜單。
步驟2打開“插入導(dǎo)航條”對話框，在“項目名稱”編輯框中輸入項目名（此
處為“dhl”，也可以不輸）；單擊“狀態(tài)圖像”編輯框后的“瀏覽”按鈕，在打
開的“選擇圖像源文件”對話框中選擇要作為狀態(tài)圖像的文件（此處為
“dhal.gif"），然后單擊“確定”按鈕。
步驟6按［Ctrl+S］組合鍵保存文檔，然后按F12鍵預(yù)覽網(wǎng)頁，將光標(biāo)置于
導(dǎo)航條上方時，其背景顏色變深。
小提示：要修改、增加導(dǎo)航條項目，可在選中導(dǎo)航條后，選擇“修改”一“導(dǎo)
航條”菜單，打開“修改導(dǎo)航條”對話框進行修改?？蓡螕舨⑼蟿訉?dǎo)航條改變
其在網(wǎng)頁中的位置；可以復(fù)制導(dǎo)航條到別的網(wǎng)頁；也可以對導(dǎo)航條附加行為。
另外，一個網(wǎng)頁中只允許有一個導(dǎo)航條。
【任務(wù)實施】
在學(xué)習(xí)了圖像的應(yīng)用后，請同學(xué)們動手在“福特汽車”網(wǎng)站主頁中插入圖
像和導(dǎo)航條。
【任務(wù)三】為主頁設(shè)置動畫和背景音樂一一應(yīng)用動畫和多媒體
（一）插入Flash動畫
Flash動畫是目前最流行的矢量動畫，它具有文件尺寸小、變化豐富的優(yōu)
點，因而很多網(wǎng)頁中都會使用。
步驟1與插入圖像的方法類似，在網(wǎng)頁中插入Flash動畫的方法也非常簡
單。確定插入點后，單擊“常用”插入欄中的“媒體”f“Flash”按鈕。
步驟2彈出“選擇文件”對話框，在“查找范圍”下拉列表中選擇動畫所在
文件夾，在文件夾列表中選擇一個擴展名為“.swf”的Flash動畫。
步驟3單擊“確定”按鈕，彈出“對象標(biāo)簽輔助功能屬性”對話框，再次單
擊“確定”按鈕，F(xiàn)lash動畫就插入到網(wǎng)頁中了。
步驟4單擊選中網(wǎng)頁中的Flash動畫，可以在“屬性”面板中對該動畫的各
項屬性進行修改。
IJfFl*ik5630文件以1?頻5設(shè)計a?6…gQga去?無.
1/II熹210I而_______
MM4--
J自3放>W（1ItMBU~.QH^S
“屬性”面板中部分常用設(shè)置項的意義如下。
?循環(huán)：選中該選項后，F(xiàn)lash動畫將連續(xù)播放。如果沒有選中該選項，則
Flash動畫在播放一次后停止播放。
?自動播放：如果選中該選項，則在打開頁面時自動播放Flash動畫。
?垂直邊距和水平邊距：指定Flash動畫周圍的空白像素值。
?寬和高：以像素為單位指定Flash動畫的寬度和高度。
?文件:指向Flash動畫文件的路徑。
?重設(shè)大?。簩lash動畫恢復(fù)到實際大小。
?品質(zhì)：設(shè)置Flash動畫的播放品質(zhì)。
?比例：確定Flash動畫如何適應(yīng)在其“寬”和“高”編輯框中設(shè)置的尺寸。
缺省為“默認(rèn)（全部顯示”'，表示顯示整個Flash動畫；“無邊框”表示使
影片適合設(shè)定的尺寸，維持原始的縱橫比；“嚴(yán)格匹配”表示對影片進行縮
放以適合設(shè)定的尺寸，忽略縱橫比。
?對齊：確定影片在頁面上的對齊方式。
?背景顏色：指定Flash動畫區(qū)域的背景顏色。在不播放Flash動畫時（在
加載時和播放后）也顯示此顏色。
?參數(shù)：單擊此按鈕打開一個對話框，可在其中輸入傳遞給Flash動畫的附
加參數(shù)。
（二）應(yīng)用透明Flash動畫
假如已為網(wǎng)頁、某個表格或某個單元格設(shè)置了一張背景圖像，當(dāng)在單元格
中插入一個Flash動畫的時候，由于Flash動畫的背景顏色會遮蓋掉背景圖像,
這樣就看不到背景圖像了。為使背景圖像能夠正常顯示，只需將Flash動畫的
背景顏色改成透明即可。
步驟1在Dreamweaver中打開本項目素材"shop"文件夾中"index,html"
文檔。在網(wǎng)站標(biāo)志所在單元格右側(cè)的單元格中插入“\shop\\images”文件夾中
的動畫文件“nihong.swf”。
步驟2保存文檔，單擊“文檔”工具欄中的“在瀏覽器中預(yù)覽/調(diào)試”按鈕,
在彈出的菜單中選擇“預(yù)覽在【Explore”菜單項，在瀏覽器中預(yù)覽效果，可以
發(fā)現(xiàn)Flash動畫遮擋了表格的背景圖像。
步驟3回到Dreamweaver操作界面。選中Flash動畫，單擊“屬性”面板
中的“參數(shù)”按鈕，打開“參數(shù)”對話框。在“參數(shù)”列第一行單擊，輸入“wmode”,
在對應(yīng)的“值”列輸入-transparent",單擊“確定”按鈕，關(guān)閉“參數(shù)”對
話框。
步驟4再次保存文檔，并在瀏覽器中預(yù)覽，可以看到動畫后面的背景圖像出
現(xiàn)了。
（三）插入Flash按鈕
Flash按鈕包括兩類，一類是用Flash軟件制作的按鈕，另一類是
Dreamweaver中集成的Flash按鈕。前者的插入方法與Flash動畫類似，此
處主要講解后者的插入。
步驟1將插入點置于要插入Flash按鈕的位置，選擇“插入記錄”一“媒
體”一“Flash按鈕”菜單，打開“插入Flash按鈕”對話框。
步驟2在“樣式”列表框中選擇一種樣式，其效果將顯示在“范例”欄中，
這里選擇“Slider”；在“按鈕文本”編輯框中輸入要在按鈕上顯示的文本內(nèi)容,
此處為“company”；在“字體”下拉列表中選擇一種字體，作為按鈕文本的字
體；在“大小”編輯框中設(shè)置按鈕文本的大小；在“鏈接”編輯框中設(shè)置按鈕
的鏈接目標(biāo)；在“目標(biāo)”下拉列表中選擇打開鏈接文檔的方式，此處設(shè)置為
'[self”。單擊“確定”按鈕,即可插入Flash按鈕。
（四）插入音頻文件
步驟1打開本項目素材“music”文件夾中的“wma.html”文檔。將插入點
置于網(wǎng)頁中要插入音頻文件的位置（此處為表格最下方的空白單元格），選擇“插
入記錄”一“媒體”一“插件”菜單，打開“選擇文件”對話框。
步驟2在“查找范圍”下拉列表中選擇文件所在位置（此處為“\\項目三
WmusicWmusic”文件夾），在文件列表中選擇要插入的文件（此處為
“ybzdgd.wma"），單擊“確定”按鈕，插入音頻文件。
步驟3選中插入的音頻文件，在“屬性”面板中將"寬"和''高"分別改為
“280”和“45”，將“對齊方式”改為“居中”。
步驟4保存文檔并在IE瀏覽器中預(yù)覽。在音樂傳來的同時，可以看到白色
單元格中出現(xiàn)了WindowsMediaPlayer播放器的控制面板。
（五）插入視頻文件
除音頻文件外，在Dreamweaver中還可以插入視頻文件、Shockwave影片
和Applet等其他媒體元素。
步驟1打開本項目素材“video”站點中的“cat_a.html”文檔。在“影片
介紹”左側(cè)的空白單元格中單擊，然后選擇“插入記錄”一“媒體”一“插件”
菜單，打開“選擇文件”對話框。
步驟2選擇要插入的視頻文件（此處為“\\項目三\\video\\images”文
件夾中的“cat.mpeg"），單擊“確定”按鈕，即可插入視頻。
步驟3選中視頻文件，在“屬性”面板上“寬”和“高”編輯框中分別輸入
“320”和“240”,重新設(shè)置視頻文件大小。
步驟4按【Ctrl+S】組合鍵保存文檔，然后按F12鍵預(yù)覽網(wǎng)頁。
【任務(wù)實施】
學(xué)習(xí)了動畫應(yīng)用與多媒體設(shè)置后，請同學(xué)們繼續(xù)任務(wù)2“任務(wù)實施”中對
“index.html”的操作，為網(wǎng)站主頁插入動畫和設(shè)置背景音樂。
【知識拓展】網(wǎng)頁中圖像不顯示問題的處理
初學(xué)者可能會遇到本來插入成功的圖像，在預(yù)覽網(wǎng)頁時卻不能正常顯示的
情況。這是什么原因呢？
一般情況下，網(wǎng)頁中的圖像不顯示是因為路徑設(shè)置有誤或圖像名稱輸入有
誤。如要確認(rèn)圖像的路徑，可在文檔窗口中選定圖像，在“屬性”面板中查看
顯示圖像路徑的“源文件”編輯框，要確認(rèn)該編輯框中顯示的路徑同圖像的實
際路徑相同。另外，實際的圖像名稱與路徑中的圖像名稱也必須相同。因此，
要仔細(xì)查看是否正確輸入大小寫字母。多數(shù)情況下，在網(wǎng)上看不到圖像是因為
圖像的路徑被設(shè)定為絕對路徑。簡單來說，就是圖像路徑以“file://…”開頭,
這種情況下只有在自己的電腦上能看到圖像，網(wǎng)絡(luò)上的其他用戶均看不到圖像。
下面介紹在不同情況下該如何正確設(shè)定圖像路徑。
1.網(wǎng)頁文檔和圖像在一個文件夾內(nèi)時
當(dāng)插入圖像的網(wǎng)頁文檔和圖像在同一個文件夾內(nèi)時，圖像“屬性”面板上
的“源文件”編輯框中應(yīng)該直接顯示圖像名稱。在上傳網(wǎng)頁時，一定要同時上
傳圖像。
2.圖像在網(wǎng)頁文檔的下一級文件夾中時
一般情況下，都會把圖像放在專門的文件夾里，存放圖像的文件夾一般命
名為“images”，此時圖像“屬性”面板上的“源文件”編輯框中應(yīng)該顯示為
“images/圖像名稱"，在上傳網(wǎng)頁文檔時，一定要同時上傳保存圖像的文件夾。
作業(yè)：
8.請簡述如何修改、增加導(dǎo)航條項目。
9.網(wǎng)頁中常見的圖像文件格式有哪兒種？分別有什么特點？
10.如何為Flash動畫設(shè)置透明背景？
課程教案
授課內(nèi)容項目四制作文化公司網(wǎng)站
授課班級授課學(xué)時12課時
教學(xué)方法
講授法、演示法、討論法。多媒體教學(xué)
與手段
廣州皇翼文化發(fā)展有限公司是一家擁有豐富資源的新生代文化傳播公司，
本公司主要從事舞臺藝術(shù)、演藝演出、展覽展示、活動推廣等業(yè)務(wù)。本項目的
工作內(nèi)容就是為該公司建設(shè)網(wǎng)站，公司要求如下：
1.簡潔美觀的全版歡迎頁面。
2.內(nèi)容頁可以使用色彩對比強烈的風(fēng)格，少量文字版面內(nèi)容，以圖片顯示的版
塊為主。
項目內(nèi)容
3.圖片展示是重點，在訪客查看圖片的時候，圖片要有特色的顯示鏈接效
果。
4.網(wǎng)站欄目之間有明確的鏈接。
要完成上述任務(wù)要求，網(wǎng)站制作必須應(yīng)用超鏈接和行為技術(shù)。超鏈接是網(wǎng)
站中最重要的組成部分，它指向要訪問的目標(biāo)文檔或其他元素，從而使一個網(wǎng)
頁可以跳轉(zhuǎn)到另一個網(wǎng)頁或打開“下載文件”對話框等。利用行為可以實現(xiàn)浮
動廣告、滾動字幕，以及收縮、放大圖像等效果。
學(xué)生通過本項目的學(xué)習(xí)，能:
14、熟練掌握設(shè)置各種超鏈接的方法
教學(xué)目標(biāo)
15、掌握跳轉(zhuǎn)菜單的設(shè)置方法
16、熟練掌握各種行為的設(shè)置方法
教學(xué)重點：
1、熟練掌握設(shè)置各種超鏈接的方法
教學(xué)重點2、掌握跳轉(zhuǎn)菜單的設(shè)置方法
與難點3、熟悉“行為”面板
教學(xué)難點：
熟練掌握各種行為的設(shè)置方法
項目效果
教學(xué)過程
設(shè)計
【任務(wù)一】為首頁和子頁設(shè)置鏈接一一應(yīng)用超鏈接
超鏈接包括很多種，最常用的是常規(guī)超鏈接，另外還有圖片鏈接、下載鏈
接、電子郵件鏈接等。
(-)設(shè)置常規(guī)超鏈接
常規(guī)超鏈接包括內(nèi)部超鏈接和外部超鏈接。內(nèi)部超鏈接是指目標(biāo)文件位于
站點內(nèi)部的鏈接；外部超鏈接可實現(xiàn)網(wǎng)站與網(wǎng)站之間的跳轉(zhuǎn)，也就是從本網(wǎng)站
跳轉(zhuǎn)到其他網(wǎng)站。
1.內(nèi)部超鏈接
內(nèi)部超鏈接的設(shè)置非常靈活，在選中要設(shè)置超鏈接的文本或圖像后，可以
在“屬性”面板上的“鏈接”編輯框中直接輸入要鏈接到的網(wǎng)址或網(wǎng)頁名稱；
也可以通過單擊“屬性”面板上“鏈接”編輯框后的“瀏覽文件”按鈕，在彈
出的“選擇文件”對話框中選擇要鏈接到的文件。
?■丸ate。
■'U><*■*!?><?￡>公-?ss?m*inK/at*
還有一種方法是單擊并拖動“屬性”面
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 2024年餐飲服務(wù)公司食堂承包樣本協(xié)議版B版
- 2024新版反擔(dān)保動產(chǎn)抵押協(xié)議樣本版B版
- 2024建筑消防工程合同
- 2024年租賃合同：辦公空間租賃協(xié)議3篇
- 2024年特種車輛全面維保與安全檢查合同樣本3篇
- 2024年門窗采購標(biāo)準(zhǔn)協(xié)議格式一
- 2024年環(huán)境整治合作協(xié)議
- 2024暑期兼職科研助理服務(wù)合同3篇
- 機械工業(yè)銷售工作總結(jié)
- 2024民政離婚合同書官方指導(dǎo)版下載版
- 2024版企業(yè)股權(quán)收購并購重組方案合同3篇
- 2024AIGC創(chuàng)新應(yīng)用洞察報告
- 統(tǒng)編版2024-2025學(xué)年三年級上冊語文期末情景試卷(含答案)
- 2024北京通州初三（上）期末數(shù)學(xué)試卷（含答案解析）
- 市場營銷習(xí)題庫（附參考答案）
- 2024年馬拉松比賽項目合作計劃書
- 2024年演出經(jīng)紀(jì)人資格《思想政治與法律基礎(chǔ)》考前必刷必練題庫500題（含真題、必會題）
- 苗圃購銷合同范本
- 《二十四節(jié)氣融入幼兒園教育活動的個案研究》
- 麻醉與舒適醫(yī)療
- GB/T 44899-2024商品條碼散裝和大宗商品編碼與條碼表示
評論
0/150
提交評論