電子商務網頁制作04課件

1、主編：謝嶸在我們所知道的網頁中，有著豐富的內容，其中文字是必不可少的。在看這些文字的過程中，大家會發(fā)現，網頁上的有各種各樣的文字，大的、小的、紅的、藍的、粗的、細的等等，這些不同樣式的文字，使得原本很單調的文本內容豐富了起來，人們在閱讀的時候，對著不同的文字，有著不同的心態(tài)。那么這些不同的文字是如何做出來的呢？本項目從文字方面入手，介紹了文本添加的方式以及對添加的文本如何來進行編輯。 項目4 美化網頁文本 項目導學 體驗活動一：在網頁中添加“本站信息”頁面文本活動任務：在網頁中直接輸入文本信息；粘貼其他文本中已經存在的文字信息到網頁中；導入外部文檔?；顒又笇В何淖质菑氖裁吹胤絹淼哪兀康谝环N，可

2、以通過直接在網頁上輸入文字來獲得；另外，還可以通過復制其他文本信息（如 Word、記事本和 Excel 等），然后粘貼在網頁中來添加“本站信息”頁面文本；除了以上兩種插入文本信息之外，還可以通過直接導入已經存在的Word文檔信息來輸入網頁內容。 項目4 美化網頁文本 體驗活動一：在網頁中添加“本站信息”頁面文本 活動步驟：啟動Dreamweaver CS4軟件。新建一個HTML網頁，在“設計”頁面中直接鍵入中文內容。將其他應用程序（如Word）中的文本內容進行復制，然后在“設計”頁面中將復制的內容進行粘貼。 項目4 美化網頁文本 體驗活動一：在網頁中添加“本站信息”頁面文本 活動步驟：在“設計

3、”頁面中，點擊“文件”菜單，選擇“導入”，在出現的下一級菜單中選擇“Word文檔”。在彈出的“導入Word文檔”對話框中，選擇需要添加的一個Word文檔，然后點擊“打開”，即可將文檔導入到網頁中。 項目4 美化網頁文本 體驗活動一：在網頁中添加“本站信息”頁面文本 活動步驟：最終效果，如圖所示。 項目4 美化網頁文本 活動小結在完成了以上體驗活動后，根據體驗后的感受，寫出以下三種文檔分別選擇哪種插入方式，填寫下表 項目3 用表格布局網頁 三種文字的插入方式從網頁上找出的某段信息單獨一行文字已經存在的Word中的個人日志體驗活動二：設置“本站信息”中的文字的樣式活動任務：設置字號、字體顏色和顯示

4、位置。活動指導：設置標題“本站信息”為黑體，紅色，24號字，居中顯示；在以下講解的設置中，如果彈出創(chuàng)建CSS的對話框，在“選擇器類型”下拉菜單中，選擇“類（可應用任何HTML元素）”，而“選擇器名稱”的下拉菜單中，輸入“.style”，然后點擊確定。 項目4 美化網頁文本 體驗活動二：設置“本站信息”中的文字的樣式活動步驟：選中“本站信息”，在“屬性”頁面，點擊“字體”的下拉列表，選擇“編輯字體列表”。在彈出的“編輯字體列表”中，選擇“黑體”，添加到“選擇的字體”中。 項目4 美化網頁文本 體驗活動二：設置“本站信息”中的文字的樣式活動步驟：在“顏色”下拉菜單中，選擇紅色，在“大小”選項框中，

5、選擇字體大小為“24”號字，并點擊“居中”按鈕。最終顯示效果如圖所示。 項目4 美化網頁文本 體驗活動三：處理表格中的數據活動任務：用表格工具處理數據，對數據進行排序操作?；顒又笇В簩W習新的新建頁面的方法和打開方法。在實際工作中，利用“文件”面板來完成這樣的工作更便于對頁面的管理，不容易造成頁面保存路徑的出錯。 項目4 美化網頁文本 體驗活動三：處理表格中的數據活動步驟：選中需要編輯的段落，點擊鼠標右鍵，在彈出的對話框中選擇“段落格式”，在下一級菜單中選擇“標題1”。選中需要編輯的段落，按照上面的方法，在彈出的“段落格式”中，選擇“標題2”。 項目4 美化網頁文本 體驗活動三：處理表格中的數據

6、活動步驟：在第二段文字后，按shift+enter鍵，換行輸入以下文字，可以看出，換行和段落相比，換行的間距比段落小很多。也可以使用“文本”工具欄中的“BR”來進行換行。將光標插入到需要換行的文字前面。 項目4 美化網頁文本 體驗活動三：處理表格中的數據活動步驟：在彈出的下拉列表中，選擇“換行符”。最終效果，如圖所示。 項目4 美化網頁文本 體驗活動四：在網頁中添加特殊字符活動任務：在網頁上引用特殊字符。活動指導：我們在瀏覽網頁的時候，可以看到網站上有一些特殊的符號，那這些符號又是怎么來的呢？ 項目4 美化網頁文本 體驗活動四：在網頁中添加特殊字符活動步驟：在需要插入特殊字符的地方點擊鼠標左鍵

7、，然后點擊菜單“插入”中的“HTML”在下一級菜單中選擇“特殊字符”。按照上面的方法，試一下其他的每一種特殊字符。 項目4 美化網頁文本 體驗活動五：設置“本站信息”內容為列表樣式活動任務：在網頁中使用列表?；顒又笇В涸诰W頁內容中，為了將主題或數據與文檔分開，一般采用列表來區(qū)分它們。 項目4 美化網頁文本 體驗活動五：設置“本站信息”內容為列表樣式活動步驟：項目列表。選中需要進行區(qū)分的文檔，點擊右鍵，選擇“列表”，在出現的下一級菜單中選擇“項目列表”。按照上面的方式，在“列表”彈出的下一級菜單中，選擇“編號列表”。 項目4 美化網頁文本 體驗活動五：設置“本站信息”內容為列表樣式活動步驟：最終

8、顯示效果，如圖所示，由此可見，列表只能針對段落有效，而對換行的文字，是不能形成列表樣式的。 項目4 美化網頁文本 活動小結在完成了以上體驗活動后，根據體驗后的感受，填寫下表。 項目3 用表格布局網頁 設置字體包括1、字體顏色2、3、粗細4、設置段落格式有三種形式1、2、換行3、項目列表和編號列表的直觀區(qū)別：相關知識一、插入文本在網頁的制作過程中，文字信息必不可少，這里介紹了3中插入文字的方法：在網頁中鍵入文本；從其他應用程序（如 MS-Word、記事本和 MS-Excel 等）復制并粘貼文本；將 Word 文檔導入 Dreamweaver； 項目4 美化網頁文本 相關知識二、編輯文本在插入了文

9、本后，為了使文本更加生動，通常我們都會進行一定的修改，是文字呈現出不同效果。對文字的修改可以使用“常用”工具欄上的“文本”工具欄。 項目4 美化網頁文本 相關知識二、編輯文本修改字體設置： 一般情況下，輸入文字的字體都是設置為“默認字體”。若想要修改字體，選中需要修改的文字，點擊圖中“默認字體”的下拉箭頭“”，選擇其他的字體樣式。 項目4 美化網頁文本 相關知識二、編輯文本修改字體樣式： 默認設置的字體都是沒有樣式的，如果想要將標題文字加粗，先選中標題文字，然后點擊“B”，如果想使文字成為斜體，則點擊“I”鍵。 項目4 美化網頁文本 相關知識二、編輯文本修改字體樣式： 如果想要設置文字對齊方式，則點擊如圖所示的按鈕。 項目4 美化網頁文本 相關知識二、編輯文本修改字體大小和顏色： 用戶輸入文字的大小，一般是默認的大小，想將輸入的字體放大，選中需要放大的字體，點擊圖中“無”后的“”，選擇“24”，即可將字體設置為24號字，注意選擇后面的單位為“px”（像素）。 項目4 美化網頁文本 相關知識二、編輯文本修改字體大小和顏色： 想要改變字體顏色，需要先選中字體，然后點擊如圖所示的下拉按鈕，即可彈出色板，在色板中選擇自己喜歡的顏色即可。 項目4 美化網頁文本 相關知識二、編輯文本設置段落格式： 文本的段落有標題、換行和已編排格式三種，標題：一共有六級，