為網(wǎng)頁添加文本(模塊二).ppt

模塊二 為網(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-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）將文本插入點定位到開始處的“公司介紹”文本后面，按“Enter”鍵強制分段，效果如圖所示。 （4）將文本插入點定位到“美學(xué)價值”文本后面，按“Shift+Enter”鍵使文本換行，效果如圖所示。,分段文本,換行文本,操作一 添加文本并換行,（5）用相同方法在“營銷體系”文本后進(jìn)行換行操作，如圖所示。 （6）將文本插入點定位到第2段文本開始處，選擇【插入記錄】【HTML】【特殊字符】【不換行空格】菜單命令，如圖所示。,換行文本,選擇命令,操作一 添加文本并換行,（7）此時在“博瑞”文本左側(cè)將插入一個空格符號，如圖所示。 （8）用相同方法或按“Ctrl+Shift+空格”鍵快速插入另外7個不換行空格符號，效果如圖所示。,插入不換行空格,插入多個不換行空格,操作一 添加文本并換行,（9）選擇插入的8個不換行空格符號，按“Ctrl+C”鍵進(jìn)行復(fù)制操作，然后分別在下方的各段落開始處按“Ctrl+V”鍵進(jìn)行粘貼，完成調(diào)整文本的操作，效果如圖所示。,復(fù)制不換行空格,操作二 添加日期和水平線,（1）將文本插入點定位到標(biāo)題下第1段文本中“成立于”文本后面，然后選擇【插入記錄】【日期】菜單命令，如圖所示。 （2）打開“插入日期”對話框，在“日期格式”列表框中選擇“1974年3月7日”格式選項，單擊“確定”按鈕，如圖所示。,插入日期,選擇日期格式,操作二 添加日期和水平線,（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）將文本插入點定位到文本最后，按“Enter”鍵分段，如圖所示。 （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)頁文本的操作思路,操作一 輸入文本,（1）新建空白網(wǎng)頁，并在其中輸入具體的文本內(nèi)容，如圖所示。 （2）利用“Enter”鍵和“Shift+Enter”鍵對文本進(jìn)行分段和換行設(shè)置，其中前兩段為分段操作，后4段為換行操作，效果如圖所示。,輸入文本,分段與換行設(shè)置,操作二 設(shè)置文本格式,（1）單擊屬性檢查器中“字體”下拉列表框右側(cè)的下拉按鈕，在彈出的菜單中選擇“編輯字體列表”命令，如圖所示。 （2）打開“編輯字體列表”對話框，在“可用字體”列表框中選擇需添加的字體，這里選擇“方正準(zhǔn)圓簡體”選項，單擊該列表框左側(cè)的“添加”按鈕 ，如圖所示。,選擇命令,選擇字體,操作二 設(shè)置文本格式,（3）此時所選字體將添加到“選擇的字體”列表框中，完成后單擊“確定”按鈕，如圖所示。 （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è)置文本顏色,操作二 設(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)味方法”、“烹調(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ù)三 制作“汽車銷售”網(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段，效果如圖所示。,輸入文本內(nèi)容,為輸入的文本分段,操作一 輸入文本并創(chuàng)建編號列表,（3）拖動鼠標(biāo)選擇后3段文本，單擊屬性檢查器中的“編號列表”按鈕 ，如圖所示。,創(chuàng)建編號列表,操作一 輸入文本并創(chuàng)建編號列表,（4）此時所選的文本段落將變?yōu)榫幪柫斜淼男问健１３侄温涞倪x中狀態(tài)，在其上單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇【列表】【屬性】菜單命令，如圖所示。 （5）打開“列表屬性”對話框，單擊“樣式”下拉列表框右側(cè)的下拉按鈕，在彈出的下拉列表中選擇大寫羅馬字母對應(yīng)的選項，如圖所示。,設(shè)置編號列表屬性,選擇編號樣式,操作一 輸入文本并創(chuàng)建編號列表,（6）設(shè)置了編號樣式后單擊“列表屬性”對話框中的“確定”按鈕，如圖所示。 （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)轫椖苛斜淼娘@示。保持所選對象的選中狀態(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”分段，并按照前面相同的操作新增列表內(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è)置為“字體-方正粗倩簡體、大小-特大、顏色-#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）在第一段文本下面插入水平線，并設(shè)置其寬度為“1000”、高度為“3”。 （3）選擇最后4段文本，將其創(chuàng)建為項目列表，并更改項目符號的樣式為正方形。 （4）設(shè)置標(biāo)題文本的格式為“字體-方正古隸簡體、大小-80、居中對齊、顏色-#990033”。 （5）設(shè)置其他文本的格式為“大小-80、加粗、顏色-#990033”。,制作“產(chǎn)品介紹”網(wǎng)頁文本的操作思路,實訓(xùn)二 制作“聽讀看”網(wǎng)頁文本,實訓(xùn)目標(biāo) 通過創(chuàng)建定義列表的方式制作出如圖所示的網(wǎng)頁文本效果。,“聽讀看”網(wǎng)頁文本效果,實訓(xùn)二 制作“聽讀看”網(wǎng)頁文本,實訓(xùn)分析 （1）新建網(wǎng)頁，并設(shè)置定義列表的輸入模式（即在當(dāng)前文本插入點處