教學(xué)課題:創(chuàng)業(yè)在線網(wǎng)頁
教學(xué)目標(biāo):1、了解超鏈接的概念
2、熟練掌握創(chuàng)建文本超鏈接的方法
教學(xué)重點:創(chuàng)建文本超鏈接的方法
教學(xué)難點:超鏈接概念的理解
教學(xué)方法:任務(wù)驅(qū)動法、小組合組學(xué)習(xí)法。
教學(xué)課時:2節(jié)
教學(xué)過程:
1、導(dǎo)入:略
2、講解新課
演示案例1:創(chuàng)業(yè)在線網(wǎng)頁
【需求分析】:網(wǎng)站匯集了大量創(chuàng)業(yè)項目,在網(wǎng)頁設(shè)計布局上要清晰合理,導(dǎo)航設(shè)計簡單醒目。
【技能要點】
- 插入文本鏈接
- 設(shè)置文本鏈接狀態(tài)
【操作步驟】
步驟1:選擇“文件”-“打開”命令,將“Ch05\創(chuàng)業(yè)在線網(wǎng)頁\index.htm”文件打開,如圖5-2
圖5-2
步驟2:選中頁面右下角的文字“聯(lián)系我們”,如圖5-3所示。在“插入”面板的“常用”選項卡中的單擊“電子郵件鏈接”按鈕 ,在彈出的對話框中進行設(shè)置,如圖5-4所示。單擊“確定”按鈕,文字的下方出現(xiàn)下劃線,如圖5-5所示。
圖5-3
圖5-4
圖5-5
步驟3:在“屬性”面板中單擊“頁面屬性”對話框,在“分類”列表框中選擇“鏈接”選項,將“鏈接顏色”選項設(shè)為白色,“交換圖像鏈接”選項設(shè)為藍色(#3F96A9),“已訪問鏈接”選項設(shè)為灰色(#626262),“活動鏈接”選項設(shè)為黑色,在“下劃線樣式”選項的下拉列表中選擇“始終無下劃線”,如圖5-6。單擊“確定”按鈕,文字效果如圖5-7所示。
圖5-6
說明:一個未被訪問過的鏈接文字與一個被訪問過的鏈接文字在形式上是有所區(qū)別的,以提示用戶鏈接文字所指示的網(wǎng)頁是否被看過。
步驟4:選中頁面下方的文字“職場物語”,如圖5-7所示。在“屬性”面板中單擊“鏈接”選項右側(cè)的“瀏覽文件”按鈕,如圖5-8所示,在彈出的對話框中選擇“Ch05\創(chuàng)業(yè)在線網(wǎng)頁\images\職場物語.rar”文件,單擊“確定”按鈕,將文件鏈接到文本框中,在“目標(biāo)”選項的下拉列表中選擇“_blank”,如圖5-9所示。
圖5-7
圖5-8
圖5-9
步驟5:保存文檔,按<F12>鍵預(yù)覽效果,如圖5-10所示。單擊“聯(lián)系我們”,彈出郵件窗口,如圖5-11所示。
圖5-10
圖5-11
步驟6:單擊“職場物語”,如圖5-12所示,彈出“文件下載”對話框,提示打開或保存文件,如圖5-12所示。
圖5-12
4、【知識鏈接】
(1)超鏈接概念:是將物理上無序的內(nèi)容組成一個有機的統(tǒng)一體,超鏈接對象上存放某個網(wǎng)頁文件的地址,當(dāng)用戶將鼠標(biāo)指針移到文字或圖像上時,鼠標(biāo)指針會改變形狀或顏色,單擊此鏈接對象,打開相應(yīng)的網(wǎng)頁文件。
(2)創(chuàng)建文本鏈接:選中作為鏈接對象的文本,在鏈接文本的“屬性”面板中指定鏈接文件。方法有三種:如圖5-13所示 。
圖5-13
一是在鏈接文本框中直接輸入要鏈接文件的路徑和文件名,如圖5-14所示
圖5-14
二是單擊鏈接選項右側(cè)的了瀏覽文件按鈕 ,選擇要鏈接的文件。
三是拖曳“指向文件”圖標(biāo) 指向右側(cè)站點窗口內(nèi)的文件,松開鼠標(biāo)左鍵,“鏈接”選項被更新并顯示出所建立的鏈接。
當(dāng)完成鏈接文件后,“屬性”面板中的“目標(biāo)”選項變?yōu)榭捎?,下拉個選項作用如下:
“_blank”:將鏈接文件加載到未命名的新瀏覽器中。
“_parent”:將鏈接文件加載到包含該鏈接的父框架集或窗口中。如果包含鏈接的框架不是嵌套的,則鏈接文件加載到整個瀏覽器窗口中。
“_self”:將鏈接文件加載到鏈接所在的同一框架或窗口中。此項是默認的。
“_top”:將鏈接文件加載到整個瀏覽器窗口中,并由此刪除所有框架。
3、作業(yè):
上機練習(xí)1,打開“Ch05\咖啡銷售網(wǎng)頁\index.htm”文件,將“聯(lián)系我們”設(shè)置為“電子郵件鏈接”,將“圖片下載”設(shè)置為站點下“\images\咖啡圖片.zip”文件,將“鏈接顏色”設(shè)置為白色,“交換圖像鏈接”設(shè)置為淺褐色(#BB8E65),“已訪問鏈接”設(shè)置為灰綠色(#9DB198),“活動鏈接”設(shè)置為黃色,“下劃線樣式”為“始終無下劃線”,完成咖啡銷售網(wǎng)頁。
上機練習(xí)2,打開“Ch05\車行天下網(wǎng)頁\index.htm”文件,使用“輸入鏈接”地址制作外部鏈接效果,使用“電子郵件鏈接”制作電子郵件鏈接效果,使用“瀏覽文件鏈接”為文字制作下載文件鏈接效果,完成車行天下網(wǎng)頁。
教學(xué)課題:戀之語素材模板網(wǎng)頁
教學(xué)目標(biāo):1、熟練掌握制作鼠標(biāo)經(jīng)過圖像鏈接的方法
2、掌握創(chuàng)建熱點鏈接的方法
教學(xué)重點:1、鼠標(biāo)經(jīng)過圖像
2、熱點鏈接
教學(xué)難點:熱點鏈接
教學(xué)方法:任務(wù)驅(qū)動法、小組合組學(xué)習(xí)法。
教學(xué)課時:2節(jié)
教學(xué)過程:
1、導(dǎo)入:略
2、講解新課
演示案例1:戀之語素材模板網(wǎng)頁
【需求分析】:為影樓公司制作的模板下載網(wǎng)頁,幫助用戶設(shè)計出精美的照片或電子相冊。主要提供婚紗模板、寫真模板、兒童模板、樣片相冊、親子相冊、影視教學(xué)等內(nèi)容。要求界面時尚美觀,布局合理搭配。
【技能要點】
- 制作鼠標(biāo)經(jīng)過
- 創(chuàng)建熱點鏈接
【操作步驟】
步驟1:選擇“文件”-“打開”命令,將“Ch05\戀之語素材模板網(wǎng)頁\index.htm”文件打開,將光標(biāo)置入空白單元格中。如圖4-2
圖5-18
步驟2:單擊“插入”面板中“常用”選項卡中“鼠標(biāo)經(jīng)過圖像”按鈕 ,彈出“插入鼠標(biāo)經(jīng)過圖像”對話框,如圖5-19所示。
圖5-19
步驟3:單擊“原始圖像”選項右側(cè)的“瀏覽”按鈕,彈出“原始圖像”對話框,選擇“\images\1-a.jpg”文件,單擊“確定”。
步驟4:單擊“鼠標(biāo)經(jīng)過圖像”選項右側(cè)的“瀏覽”按鈕,彈出“鼠標(biāo)經(jīng)過圖像”對話框,選擇“\images\1-b.jpg”文件,單擊“確定”,如圖5-20所示。
圖5-20
步驟5:用相同的方法為其它單元格插入圖像,效果如圖5-21所示。
圖5-21
步驟6:選中網(wǎng)頁下方的圖像,如圖5-22所示,調(diào)出“屬性”面板,如圖2-23所示,選中“橢圓形熱點工具”按鈕
圖5-22
圖5-23
步驟7:將光標(biāo)放置在文字“模板1”右側(cè)的圖像上繪制圓形熱點,如圖5-24所示。在“屬性”面板“鏈接”選項右側(cè)的文本框中輸入鏈接地址,在“替換”選項右側(cè)的文本框中輸入“兒童模板(2-4歲)”,如圖5-25所示。
圖5-24
圖5-25
說明:熱點鏈接就是在一個圖片設(shè)定多個鏈接。通過設(shè)定熱點鏈接,在單擊圖像的一部分時可以跳轉(zhuǎn)到所鏈接的網(wǎng)頁文檔或網(wǎng)站。
“指針熱點工具” :用于選擇不同的熱區(qū)。
“矩形熱點工具” :用于創(chuàng)建矩形熱區(qū)。
“圓形熱點工具” :用于創(chuàng)建圓形熱區(qū)。
“多邊形熱點工具” :用于創(chuàng)建多邊形熱區(qū)。
步驟8:同樣方法,將光標(biāo)放置在文字“模板2”右側(cè)的圖像上繪制圓形熱點,在“屬性”面板“鏈接”選項右側(cè)的文本框中輸入鏈接地址“MB2-4.html”,在“替換”選項右側(cè)的文本框中輸入“兒童模板(5-7歲)”,如圖5-26示。
圖5-26
步驟9:保存文檔,按<12>鍵預(yù)覽效果,如圖5-27。
圖5-27
3、作業(yè):上機練習(xí),打開“Ch05\家具特賣網(wǎng)頁\index.htm”文件,成時尚家居網(wǎng)頁。
教學(xué)課題:網(wǎng)購鮮花網(wǎng)頁
教學(xué)目標(biāo):掌握錨點鏈接的方法
教學(xué)重點:錨點鏈接
教學(xué)難點:創(chuàng)建錨點鏈接
教學(xué)方法:任務(wù)驅(qū)動法、小組合組學(xué)習(xí)法。
教學(xué)課時:2節(jié)
教學(xué)過程:
1、導(dǎo)入:略
2、講解新課
演示案例1:網(wǎng)購鮮花網(wǎng)頁
【需求分析】:使用“錨記”鏈接制作從文檔底部移動到頂部的效果。
【技能要點】
- 創(chuàng)建錨點
- 建立錨點鏈接
【操作步驟】
步驟1:選擇“文件”-“打開”命令,將“Ch05\網(wǎng)購鮮花網(wǎng)頁\index.htm”文件打開,將光標(biāo)放在頁面的開始地方。
步驟2:單擊“插入”面板中“常用”選項卡中“命名錨記”按鈕 ,彈出“命名錨記”對話框,如圖5-30所示。
圖5-30
步驟3:在“錨記名稱”選項中輸入“top”,單擊“確定”按鈕建立錨記標(biāo)記,如圖5-31所示。
圖5-31
步驟4:將光標(biāo)置入文檔底部的空白單元格中,插入圖像文件“ch05\網(wǎng)購鮮花網(wǎng)頁\images\top.png”,如圖5-32所示。
圖5-32
步驟5:選中文檔底部的圖片,在“屬性”面板“鏈接”選項的對話框中輸入“#top”,如圖5-33所示。
圖5-33
步驟6:保存文檔,按<12>鍵預(yù)覽效果。