網(wǎng)頁制作技術(shù)教程 第2章 網(wǎng)頁制作

《網(wǎng)頁制作技術(shù)教程 第2章 網(wǎng)頁制作》由會員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫。

1、第2章網(wǎng)頁制作本章教學(xué)目的①掌握頁面的整體控制和頭部內(nèi)容設(shè)置的方法。②熟練掌握在網(wǎng)頁中輸入、設(shè)置標(biāo)題和正文文字的方法。③掌握在網(wǎng)頁中嵌入圖像、聲音、多媒體信息的方法。④掌握建立各種形式超級鏈接的方法。⑤熟練掌握網(wǎng)頁頁面布局的各種方法。⑥掌握制作表單的方法。⑦掌握在網(wǎng)頁中添加CSS的方法。⑧掌握網(wǎng)頁特效的制作方法。⑨掌握模板和庫的使用方法。⑩掌握行為的使用方法。目錄第一講文檔及文本操作第二講圖像及超級鏈接第三講媒體及表格第四講框架及圖層第五講表單、模板和庫第六講CSS樣式第七講行為第一講文檔及文本操作[教學(xué)內(nèi)容]1新建空白文檔

2、網(wǎng)頁2設(shè)置頁面屬性3保存文檔4文本的輸入及格式5列表、水平線等其他元素6在網(wǎng)頁中插入文件頭部內(nèi)容[教學(xué)重點(diǎn)和難點(diǎn)]網(wǎng)頁文件的建立、頁面屬性的設(shè)置、網(wǎng)頁中文本等元素的輸入以及文件頭部內(nèi)容的設(shè)置文檔及文本操作2.1文檔操作2.1.1新建空白文檔網(wǎng)頁2.1.2設(shè)置頁面屬性2.1.3保存文檔2.2文本操作2.2.1在網(wǎng)頁中輸入文本2.2.2設(shè)置文本屬性2.2.3文本換行2.2.4插入特殊字符和在字符之間添加空格2.2.5使用列表2.2.6在網(wǎng)頁中插入文件頭部內(nèi)容2.2.7插入水平線和時間2.1.1新建空白文檔網(wǎng)頁新建一個網(wǎng)頁文檔有兩

3、種方法：（1）如果您的Dreamweaver運(yùn)行后顯示起始頁，則在起始頁中直接選擇“創(chuàng)建新項目”下的HTML選項。（2）如果您的Dreamweaver運(yùn)行后不顯示起始頁，則選擇“文件”→“新建”命令，彈出“新建文檔”對話框，通過該對話框完成新建?！救蝿?wù)2-1-1】新建空白文檔網(wǎng)頁【操作要求】在站點(diǎn)根目錄（D:root）下建立一個名為index.html的網(wǎng)頁【操作步驟】（1）啟動Dreamweaver后，在文件面板中選擇“站點(diǎn)－我的站點(diǎn)”，如圖1所示。單擊文件面板中的按鈕，在“文件”的級聯(lián)菜單中選擇“新建文件”選項，如圖2

4、所示?！救蝿?wù)2-1-1】新建空白文檔網(wǎng)頁圖1圖2【任務(wù)2-1-1】新建空白文檔網(wǎng)頁（2）在文件面板的“站點(diǎn)－我的站點(diǎn)（D:root）”文件夾中出現(xiàn)了一個新文件，名稱為untitled.html，如圖3所示。將其重命名為index.html，如圖4所示。（3）在文件面板中，雙擊index.html即可在Dreamweaver的文檔窗口中打開該網(wǎng)頁，對其進(jìn)行編輯修改?！救蝿?wù)2-1-1】新建空白文檔網(wǎng)頁圖3圖42.1.2設(shè)置頁面屬性在制作網(wǎng)頁時，還需要對影響整個頁面的參數(shù)進(jìn)行必要的設(shè)置。選擇“修改”→“頁面屬性”命令，彈出“頁面

5、屬性”對話框，如圖5所示。1．設(shè)置外觀2．設(shè)置鏈接3．設(shè)置標(biāo)題4．設(shè)置標(biāo)題和編碼5．設(shè)置跟蹤圖像圖5【任務(wù)2-1-2】頁面屬性設(shè)置【操作要求】在文檔窗口中打開D:rootindex.html網(wǎng)頁，將網(wǎng)頁標(biāo)題設(shè)為“我的主頁”，文本字體為“仿宋”，大小為12像素，顏色為#00FF00?！静僮鞑襟E】（1）在文檔窗口中打開D:rootindex.html網(wǎng)頁，右擊窗口空白處，彈出一個快捷菜單如圖6所示，從中選擇“頁面屬性”命令，彈出“頁面屬性”對話框，如圖7所示。圖6圖7（2）在“分類”列表框中選擇“外觀”選項，單擊“頁面字

6、體”下拉列表框查找所需字體，在字體列表中無所需字體則選擇“編輯字體列表”，彈出“編輯字體列表”對話框。（3）在該對話框中的“可用字體”列表框中找到“仿宋”，單擊按鈕，則“仿宋”字體添加到了“選擇的字體”列表框中。（4）在“外觀”選項中，在“大小”下拉列表框中選擇12，在“文本顏色”文本框中輸入#00FF00，如圖8所示。（５）在“分類”列表框中選擇“標(biāo)題和編碼”選項，在標(biāo)題對話框中輸入“我的主頁”，單擊“確定”按鈕，操作完成。圖82.1.3保存文檔新建一個文件后，選擇“文件”→“保存”命令，彈出“另存為”對話框，在“另存為”

7、對話框選中保存路徑，給文件命名，選擇保存類型，然后單擊“保存”按鈕即可完成文件保存。2.2文本操作文本是網(wǎng)頁中不可或缺的元素，網(wǎng)頁中的文本用來傳達(dá)網(wǎng)頁包含的各種信息與提示。文本的信息量大且生成的文件小，容易被瀏覽器下載，不會讓瀏覽者用過多的時間等待，因此，不論網(wǎng)頁內(nèi)容如何豐富，文本始終都是網(wǎng)頁中的基本元素。同時掌握好文本的使用也是網(wǎng)頁制作的基本功。2.2.1在網(wǎng)頁中輸入文本在網(wǎng)頁中輸入文本的方法很簡單，單擊網(wǎng)頁中要插入文本的空白區(qū)域，窗口隨即出現(xiàn)閃動的光標(biāo)，選擇輸入法，輸入文字即可。也可以用復(fù)制方法將其他文本內(nèi)容粘貼過來。2

8、.2.2設(shè)置文本屬性文本的屬性主要通過文本的“屬性”面板來完成，如圖9所示。圖92.2.3文本換行（1）按Enter鍵可以換行，同時也就結(jié)束了一個段落，且可以使兩段之間多出一空行。（2）按Shift+Enter鍵，文檔在同一個段落中換行，兩行之間不產(chǎn)生空行。2.2.4插入特殊字符和在字符之