《為網(wǎng)頁添加文本(模塊二)》由會員分享，可在線閱讀，更多相關(guān)《為網(wǎng)頁添加文本(模塊二)（44頁珍藏版）》請在裝配圖網(wǎng)上搜索。

1、,單擊此處編輯母版標(biāo)題樣式,單擊此處編輯母版文本樣式,第二級,第三級,第四級,第五級,*,*,單擊此處編輯母版標(biāo)題樣式,單擊此處編輯母版文本樣式,第二級,第三級,第四級,第五級,*,*,單擊此處編輯母版標(biāo)題樣式,單擊此處編輯母版文本樣式,第二級,第三級,第四級,第五級,*,*,模塊二 為網(wǎng)頁添加文本,主講老師：付建新,Dreamweaver CS3,網(wǎng)頁制作任務(wù)實訓(xùn)教程,學(xué)習(xí)目標(biāo),掌握添加普通文本、空格、水平線、日期及活動字幕的方法,掌握設(shè)置字體格式的操作,掌握設(shè)置段落格式的操作,熟悉創(chuàng)建各種列表的方法,任務(wù)一,制作“公司介紹”網(wǎng)頁的文本,任務(wù)目標(biāo),為新建的空白網(wǎng)頁添加文本等各種元素，完成后的

2、最終效果如圖,2-1,所示。,“公司介紹”網(wǎng)頁中的內(nèi)容以及活動字幕滾動顯示的效果,任務(wù)一,制作“公司介紹”網(wǎng)頁的文本,操作思路,（,1,）輸入網(wǎng)頁中的所有文本。,（,2,）對文本進(jìn)行分段和換行，并通過插入不換行空格調(diào)整文本。,（,3,）在文本中插入日期并在標(biāo)題下插入水平線。,（,4,）通過輸入代碼的方式添加活動字幕。,制作“公司介紹”網(wǎng)頁文本的操作思路,操作一,添加文本并換行,（,1,）新建“公司介紹,.html”,網(wǎng)頁文件。,（,2,）切換至合適的中文輸入法，輸入相關(guān)文本信息，如圖所示。,輸入文本內(nèi)容,操作一,添加文本并換行,（,3,）將文本插入點定位到開始處的“公司介紹”文本后面，按“,E

3、nter”,鍵強(qiáng)制分段，效果如圖所示。,（,4,）將文本插入點定位到“美學(xué)價值”文本后面，按“,Shift+Enter,”,鍵使文本換行，效果如圖所示。,分段文本,換行文本,操作一,添加文本并換行,（,5,）用相同方法在“營銷體系”文本后進(jìn)行換行操作，如圖所示。,（,6,）將文本插入點定位到第,2,段文本開始處，選擇,【,插入記錄,】【HTML】【,特殊字符,】【,不換行空格,】,菜單命令，如圖所示。,換行文本,選擇命令,操作一,添加文本并換行,（,7,）此時在“博瑞”文本左側(cè)將插入一個空格符號，如圖所示。,（,8,）用相同方法或按“,Ctrl+Shift,+,空格”鍵快速插入另外,7,個不換

4、行空格符號，效果如圖所示。,插入不換行空格,插入多個不換行空格,操作一,添加文本并換行,（,9,）選擇插入的,8,個不換行空格符號，按“,Ctrl+C,”鍵進(jìn)行復(fù)制操作，然后分別在下方的各段落開始處按“,Ctrl+V,”鍵進(jìn)行粘貼，完成調(diào)整文本的操作，效果如圖所示。,復(fù)制不換行空格,操作二,添加日期和水平線,（,1,）將文本插入點定位到標(biāo)題下第,1,段文本中“成立于”文本后面，然后選擇,【,插入記錄,】【,日期,】,菜單命令，如圖所示。,（,2,）打開“插入日期”對話框，在“日期格式”列表框中選擇“,1974,年,3,月,7,日”格式選項，單擊“確定”按鈕，如圖所示。,插入日期,選擇日期格式,

5、操作二,添加日期和水平線,（,3,）此時將在文本插入點處插入當(dāng)前操作系統(tǒng)中顯示的日期文本，且處于選中狀態(tài)，效果如圖所示。,（,4,）將插入的日期文本根據(jù)實際需要進(jìn)行修改，方法與在,Word,中修改文本相同，這里修改為“,2001,年,1,月,28,日”，效果如圖所示。,插入的日期,修改日期文本,操作二,添加日期和水平線,（,5,）將文本插入點定位到標(biāo)題文本后面，然后選擇,【,插入記錄,】【HTML】【,水平線,】,菜單命令，如圖所示。,（,6,）此時即可在標(biāo)題段落下方插入默認(rèn)格式的水平線，如圖所示。,選擇命令,插入的水平線,操作三,添加活動字幕,（,1,）將文本插入點定位到文本最后，按“,En

6、ter,”鍵分段，如圖所示。,（,2,）單擊文檔工具欄中的“代碼”按鈕，在第,14,行“,”下輸入如圖所示的代碼（包括,15,行,17,行的內(nèi)容），保存設(shè)置后按,【F12】,鍵即可預(yù)覽效果。,分段文本,輸入代碼,任務(wù),二,制作“天府美食”網(wǎng)頁的文本,任務(wù)目標(biāo),在網(wǎng)頁中輸入相應(yīng)文本，并進(jìn)行適當(dāng)?shù)奈谋靖袷胶投温涓袷皆O(shè)置，完成后的最終效果如圖所示。,設(shè)置“天府美食”網(wǎng)頁文本格式后的效果,任務(wù),二,制作“天府美食”網(wǎng)頁的文本,操作思路,（,1,）在網(wǎng)頁中輸入具體的文本內(nèi)容。,（,2,）分別對各段落的文本格式進(jìn)行設(shè)置。,（,3,）設(shè)置段落的對齊方式和縮進(jìn)距離。,制作“天府美食”網(wǎng)頁文本的操作思路,操作一

7、,輸入文本,（,1,）新建空白網(wǎng)頁，并在其中輸入具體的文本內(nèi)容，如圖所示。,（,2,）利用“,Enter,”鍵和“,Shift+Enter,”鍵對文本進(jìn)行分段和換行設(shè)置，其中前兩段為分段操作，后,4,段為換行操作，效果如圖所示。,輸入文本,分段與換行設(shè)置,操作二,設(shè)置文本格式,（,1,）單擊屬性檢查器中“字體”下拉列表框右側(cè)的下拉按鈕，在彈出的菜單中選擇“編輯字體列表”命令，如圖所示。,（,2,）打開“編輯字體列表”對話框，在“可用字體”列表框中選擇需添加的字體，這里選擇“方正準(zhǔn)圓簡體”選項，單擊該列表框左側(cè)的“添加”按鈕，如圖所示。,選擇命令,選擇字體,操作二,設(shè)置文本格式,（,3,）此時所

8、選字體將添加到“選擇的字體”列表框中，完成后單擊“確定”按鈕，如圖所示。,（,4,）拖動鼠標(biāo)選擇標(biāo)題中的“天府美食”文本，單擊屬性檢查器中的“字體”下拉列表框右側(cè)的下拉按鈕，在彈出的菜單中選擇前面添加的“方正準(zhǔn)圓簡體”選項，如圖所示。,添加字體,應(yīng)用字體樣式,操作二,設(shè)置文本格式,（,5,）此時所選文本將應(yīng)用字體樣式，保持文本的選中狀態(tài)，在屬性檢查器的“大小”下拉列表框中選擇“特大”選項，設(shè)置所選文本的字號大小，如圖所示。,（,6,）繼續(xù)保持文本的選中狀態(tài)，在屬性檢查器的“大小”下拉列表框右側(cè)單擊顏色色塊，在彈出的列表中選擇編碼為“,#FF0000,”的顏色選項，如圖所示。,設(shè)置字體大小,設(shè)置

9、文本顏色,操作二,設(shè)置文本格式,（,7,）拖動鼠標(biāo)選擇除標(biāo)題外的所有文本，在屬性檢查器中的“大小”下拉列表框中選擇“,18,”選項，如圖所示。,（,8,）保持文本的選中狀態(tài)，通過屬性檢查器中的顏色色塊將文本顏色設(shè)置為“,#003399,”所對應(yīng)的顏色，如圖所示。,設(shè)置字體大小,設(shè)置文本顏色,操作二,設(shè)置文本格式,（,9,）選擇“特點”文本，將其顏色設(shè)置為“,#FF0000,”對應(yīng)的顏色，如圖所示。,（,10,）保持文本的選中狀態(tài)，單擊屬性檢查器中的“加粗”按鈕，加粗所選文本的外觀，如圖所示。,設(shè)置文本顏色,加粗文本,操作二,設(shè)置文本格式,（,11,）按設(shè)置“特點”文本格式的方法，依次對“調(diào)味方

10、法”、“烹調(diào)方法”和“代表菜”文本進(jìn)行相同格式設(shè)置，如圖所示。,設(shè)置其他文本格式,操作三,設(shè)置段落格式,（,1,）拖動鼠標(biāo)選擇標(biāo)題“天府美食”文本，單擊屬性檢查器中的“居中對齊”按鈕，如圖所示。,（,2,）將文本插入點定位到第,2,段文本的開始處，按,7,次“,Ctrl+Shift+,空格”鍵調(diào)整文本位置，如圖所示。,設(shè)置段落對齊方式,添加多個不換行空格,操作三,設(shè)置段落格式,（,3,）選擇最后,4,段文本，單擊屬性檢查器中的“文本縮進(jìn)”按鈕，增加所選文本的縮進(jìn)距離，如圖所示。,（,4,）將網(wǎng)頁以“天府美食”為名進(jìn)行保存，最后在,IE,瀏覽器中預(yù)覽效果即可。,設(shè)置段落縮進(jìn)距離,任務(wù)三,制作“汽

11、車銷售”網(wǎng)頁的文本,任務(wù)目標(biāo),在網(wǎng)頁中輸入相應(yīng)文本，并創(chuàng)建各種文本列表，然后對文本進(jìn)行適當(dāng)格式設(shè)置，完成后的最終效果如圖所示。,設(shè)置“汽車銷售”網(wǎng)頁文本后的效果,任務(wù)三,制作“汽車銷售”網(wǎng)頁的文本,操作思路,（,1,）在網(wǎng)頁中輸入具體的文本內(nèi)容。,（,2,）為輸入的文本創(chuàng)建編號列表并設(shè)置編號樣式。,（,3,）在編號列表下進(jìn)一步創(chuàng)建項目列表。,（,4,）對文本和段落進(jìn)行適當(dāng)格式設(shè)置并美化網(wǎng)頁背景。,制作“汽車銷售”網(wǎng)頁文本的操作思路,操作一,輸入文本并創(chuàng)建編號列表,（,1,）新建空白網(wǎng)頁，在其中輸入如圖所示的文本內(nèi)容。,（,2,）利用“,Enter,”鍵將輸入的文本內(nèi)容分為,4,段，效果如圖所示

12、。,輸入文本內(nèi)容,為輸入的文本分段,操作一,輸入文本并創(chuàng)建編號列表,（,3,）拖動鼠標(biāo)選擇后,3,段文本，單擊屬性檢查器中的“編號列表”按鈕，如圖所示。,創(chuàng)建編號列表,操作一,輸入文本并創(chuàng)建編號列表,（,4,）此時所選的文本段落將變?yōu)榫幪柫斜淼男问?。保持段落的選中狀態(tài)，在其上單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇,【,列表,】【,屬性,】,菜單命令，如圖所示。,（,5,）打開“列表屬性”對話框，單擊“樣式”下拉列表框右側(cè)的下拉按鈕，在彈出的下拉列表中選擇大寫羅馬字母對應(yīng)的選項，如圖所示。,設(shè)置編號列表屬性,選擇編號樣式,操作一,輸入文本并創(chuàng)建編號列表,（,6,）設(shè)置了編號樣式后單擊“列表屬性”對

13、話框中的“確定”按鈕，如圖所示。,（,7,）此時創(chuàng)建的編號列表的樣式將顯示為設(shè)置的大寫羅馬字母編號，如圖所示。,確定設(shè)置,更改編號樣式后的效果,操作二,創(chuàng)建項目列表,（,1,）在“乘用車”文本后單擊鼠標(biāo)定位文本插入點，然后按“,Enter,”鍵，效果如圖所示。,（,2,）在新增的列表段落中輸入如圖所示的文本內(nèi)容。,增加列表段落,輸入列表內(nèi)容,操作二,創(chuàng)建項目列表,（,3,）用相同方法繼續(xù)輸入如圖所示的列表內(nèi)容。,（,4,）選擇新增列表段落，單擊屬性檢查器中的“項目列表”按鈕，如圖所示。,添加列表內(nèi)容,選擇新增的列表,操作二,創(chuàng)建項目列表,（,5,）此時編號列表將變?yōu)轫椖苛斜淼娘@示。保持所選對象

14、的選中狀態(tài)，單擊屬性檢查器中的“文本縮進(jìn)”按鈕，如圖所示，使所選項目列表成為已經(jīng)創(chuàng)建的編號列表的嵌套列表。,（,6,）繼續(xù)保持所選對象的選中狀態(tài)，在其上單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇,【,列表,】【,屬性,】,菜單命令，如圖所示。,更改為項目列表,縮進(jìn)列表段落,操作二,創(chuàng)建項目列表,（,7,）打開“列表屬性”對話框，在“樣式”下拉列表框中選擇“正方形”選項，單擊“確定”按鈕，效果如圖所示。,（,8,）關(guān)閉對話框后，所選嵌套的項目列表的項目符號樣式即更改為正方形效果，如圖所示。,更改項目符號樣式,更改后的效果,操作二,創(chuàng)建項目列表,（,9,）在“商用車”文本后定位插入點，按“,Enter,

15、”分段，并按照前面相同的操作新增列表內(nèi)容，如圖所示。,（,10,）選中新增的列表內(nèi)容，將其更改為項目列表，如圖所示。,新增列表內(nèi)容,更改為項目列表,操作二,創(chuàng)建項目列表,（,11,）將更改的項目列表通過“文本縮進(jìn)”按鈕 更改為編號列表的嵌套列表，如圖所示。,（,12,）利用“列表屬性”對話框?qū)㈨椖苛斜淼捻椖糠柛臑檎叫螛邮?，如圖所示。,縮進(jìn)列表距離,更改項目符號樣式,操作二,創(chuàng)建項目列表,（,13,）按照相同的方法在“新能源汽車”編號列表下創(chuàng)建嵌套的項目列表，如圖所示。,新增項目嵌套列表,操作三,美化網(wǎng)頁文本,（,1,）選擇標(biāo)題“業(yè)務(wù)范圍”文本，將其文本格式設(shè)置為“字體,-,方正粗倩簡體、

16、大小,-,特大、顏色,-#660000”,，如圖,所示。,（,2,）選擇除標(biāo)題文本以外的所有文本段落，將其文本顏色設(shè)置為“,#003300,”，如圖所示。,設(shè)置標(biāo)題格式,設(shè)置文本顏色,操作三,美化網(wǎng)頁文本,（,3,）利用“加粗”按鈕 將編號列表的文本加粗顯示，如圖所示。,（,4,）選擇,【,修改,】【,頁面屬性,】,菜單命令或按“,Ctrl+J,”鍵，如圖所示。,加粗文本,選擇命令,操作三,美化網(wǎng)頁文本,（,5,）打開“頁面屬性”對話框，選擇“分類”列表框中的“外觀”選項，將右側(cè)的“背景顏色”參數(shù)設(shè)置為“,#99CCFF,”，單擊“確定”按鈕，如圖所示。,（,6,）完成頁面設(shè)置后將新建的網(wǎng)頁以“汽車銷售業(yè)務(wù)范圍”為名進(jìn)行保存，然后按,【F12】,鍵進(jìn)行預(yù)覽，如圖所示。,設(shè)置網(wǎng)頁背景顏色,預(yù)覽效果,實訓(xùn)一,制作“產(chǎn)品介紹”網(wǎng)頁文本,實訓(xùn)目標(biāo),綜合利用本模塊所講的相關(guān)知識，制作出如圖所示的網(wǎng)頁文本效果。,“產(chǎn)品介紹”網(wǎng)頁效果,實訓(xùn)一,制作“產(chǎn)品介紹”網(wǎng)頁文本,實訓(xùn)分析,（,1,）輸入網(wǎng)頁中需要的文本，進(jìn)行分段處理，并在第,2,段文本前面插入,8,個不換行空格。,（,2,）在第一段文本下面插