電子商務(wù)網(wǎng)頁(yè)制作04課件

1、主編：謝嶸在我們所知道的網(wǎng)頁(yè)中，有著豐富的內(nèi)容，其中文字是必不可少的。在看這些文字的過(guò)程中，大家會(huì)發(fā)現(xiàn)，網(wǎng)頁(yè)上的有各種各樣的文字，大的、小的、紅的、藍(lán)的、粗的、細(xì)的等等，這些不同樣式的文字，使得原本很單調(diào)的文本內(nèi)容豐富了起來(lái)，人們?cè)陂喿x的時(shí)候，對(duì)著不同的文字，有著不同的心態(tài)。那么這些不同的文字是如何做出來(lái)的呢？本項(xiàng)目從文字方面入手，介紹了文本添加的方式以及對(duì)添加的文本如何來(lái)進(jìn)行編輯。 項(xiàng)目4 美化網(wǎng)頁(yè)文本 項(xiàng)目導(dǎo)學(xué) 體驗(yàn)活動(dòng)一：在網(wǎng)頁(yè)中添加“本站信息”頁(yè)面文本活動(dòng)任務(wù)：在網(wǎng)頁(yè)中直接輸入文本信息；粘貼其他文本中已經(jīng)存在的文字信息到網(wǎng)頁(yè)中；導(dǎo)入外部文檔。活動(dòng)指導(dǎo)：文字是從什么地方來(lái)的呢？第一種，可

2、以通過(guò)直接在網(wǎng)頁(yè)上輸入文字來(lái)獲得；另外，還可以通過(guò)復(fù)制其他文本信息（如 Word、記事本和 Excel 等），然后粘貼在網(wǎng)頁(yè)中來(lái)添加“本站信息”頁(yè)面文本；除了以上兩種插入文本信息之外，還可以通過(guò)直接導(dǎo)入已經(jīng)存在的Word文檔信息來(lái)輸入網(wǎng)頁(yè)內(nèi)容。 項(xiàng)目4 美化網(wǎng)頁(yè)文本 體驗(yàn)活動(dòng)一：在網(wǎng)頁(yè)中添加“本站信息”頁(yè)面文本 活動(dòng)步驟：?jiǎn)?dòng)Dreamweaver CS4軟件。新建一個(gè)HTML網(wǎng)頁(yè)，在“設(shè)計(jì)”頁(yè)面中直接鍵入中文內(nèi)容。將其他應(yīng)用程序（如Word）中的文本內(nèi)容進(jìn)行復(fù)制，然后在“設(shè)計(jì)”頁(yè)面中將復(fù)制的內(nèi)容進(jìn)行粘貼。 項(xiàng)目4 美化網(wǎng)頁(yè)文本 體驗(yàn)活動(dòng)一：在網(wǎng)頁(yè)中添加“本站信息”頁(yè)面文本 活動(dòng)步驟：在“設(shè)計(jì)

3、”頁(yè)面中，點(diǎn)擊“文件”菜單，選擇“導(dǎo)入”，在出現(xiàn)的下一級(jí)菜單中選擇“Word文檔”。在彈出的“導(dǎo)入Word文檔”對(duì)話(huà)框中，選擇需要添加的一個(gè)Word文檔，然后點(diǎn)擊“打開(kāi)”，即可將文檔導(dǎo)入到網(wǎng)頁(yè)中。 項(xiàng)目4 美化網(wǎng)頁(yè)文本 體驗(yàn)活動(dòng)一：在網(wǎng)頁(yè)中添加“本站信息”頁(yè)面文本 活動(dòng)步驟：最終效果，如圖所示。 項(xiàng)目4 美化網(wǎng)頁(yè)文本 活動(dòng)小結(jié)在完成了以上體驗(yàn)活動(dòng)后，根據(jù)體驗(yàn)后的感受，寫(xiě)出以下三種文檔分別選擇哪種插入方式，填寫(xiě)下表 項(xiàng)目3 用表格布局網(wǎng)頁(yè) 三種文字的插入方式從網(wǎng)頁(yè)上找出的某段信息單獨(dú)一行文字已經(jīng)存在的Word中的個(gè)人日志體驗(yàn)活動(dòng)二：設(shè)置“本站信息”中的文字的樣式活動(dòng)任務(wù)：設(shè)置字號(hào)、字體顏色和顯示

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

5、選擇字體大小為“24”號(hào)字，并點(diǎn)擊“居中”按鈕。最終顯示效果如圖所示。 項(xiàng)目4 美化網(wǎng)頁(yè)文本 體驗(yàn)活動(dòng)三：處理表格中的數(shù)據(jù)活動(dòng)任務(wù)：用表格工具處理數(shù)據(jù)，對(duì)數(shù)據(jù)進(jìn)行排序操作?；顒?dòng)指導(dǎo)：學(xué)習(xí)新的新建頁(yè)面的方法和打開(kāi)方法。在實(shí)際工作中，利用“文件”面板來(lái)完成這樣的工作更便于對(duì)頁(yè)面的管理，不容易造成頁(yè)面保存路徑的出錯(cuò)。 項(xiàng)目4 美化網(wǎng)頁(yè)文本 體驗(yàn)活動(dòng)三：處理表格中的數(shù)據(jù)活動(dòng)步驟：選中需要編輯的段落，點(diǎn)擊鼠標(biāo)右鍵，在彈出的對(duì)話(huà)框中選擇“段落格式”，在下一級(jí)菜單中選擇“標(biāo)題1”。選中需要編輯的段落，按照上面的方法，在彈出的“段落格式”中，選擇“標(biāo)題2”。 項(xiàng)目4 美化網(wǎng)頁(yè)文本 體驗(yàn)活動(dòng)三：處理表格中的數(shù)據(jù)

6、活動(dòng)步驟：在第二段文字后，按shift+enter鍵，換行輸入以下文字，可以看出，換行和段落相比，換行的間距比段落小很多。也可以使用“文本”工具欄中的“BR”來(lái)進(jìn)行換行。將光標(biāo)插入到需要換行的文字前面。 項(xiàng)目4 美化網(wǎng)頁(yè)文本 體驗(yàn)活動(dòng)三：處理表格中的數(shù)據(jù)活動(dòng)步驟：在彈出的下拉列表中，選擇“換行符”。最終效果，如圖所示。 項(xiàng)目4 美化網(wǎng)頁(yè)文本 體驗(yàn)活動(dòng)四：在網(wǎng)頁(yè)中添加特殊字符活動(dòng)任務(wù)：在網(wǎng)頁(yè)上引用特殊字符?；顒?dòng)指導(dǎo)：我們?cè)跒g覽網(wǎng)頁(yè)的時(shí)候，可以看到網(wǎng)站上有一些特殊的符號(hào)，那這些符號(hào)又是怎么來(lái)的呢？ 項(xiàng)目4 美化網(wǎng)頁(yè)文本 體驗(yàn)活動(dòng)四：在網(wǎng)頁(yè)中添加特殊字符活動(dòng)步驟：在需要插入特殊字符的地方點(diǎn)擊鼠標(biāo)左鍵

7、，然后點(diǎn)擊菜單“插入”中的“HTML”在下一級(jí)菜單中選擇“特殊字符”。按照上面的方法，試一下其他的每一種特殊字符。 項(xiàng)目4 美化網(wǎng)頁(yè)文本 體驗(yàn)活動(dòng)五：設(shè)置“本站信息”內(nèi)容為列表樣式活動(dòng)任務(wù)：在網(wǎng)頁(yè)中使用列表?；顒?dòng)指導(dǎo)：在網(wǎng)頁(yè)內(nèi)容中，為了將主題或數(shù)據(jù)與文檔分開(kāi)，一般采用列表來(lái)區(qū)分它們。 項(xiàng)目4 美化網(wǎng)頁(yè)文本 體驗(yàn)活動(dòng)五：設(shè)置“本站信息”內(nèi)容為列表樣式活動(dòng)步驟：項(xiàng)目列表。選中需要進(jìn)行區(qū)分的文檔，點(diǎn)擊右鍵，選擇“列表”，在出現(xiàn)的下一級(jí)菜單中選擇“項(xiàng)目列表”。按照上面的方式，在“列表”彈出的下一級(jí)菜單中，選擇“編號(hào)列表”。 項(xiàng)目4 美化網(wǎng)頁(yè)文本 體驗(yàn)活動(dòng)五：設(shè)置“本站信息”內(nèi)容為列表樣式活動(dòng)步驟：最終

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

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