網(wǎng)頁制作基礎(chǔ)操作

1、第二課：制作網(wǎng)頁的基本操作 一 、在網(wǎng)頁中添加文本1） 添加普通文本方法： A、直接輸入 （1）用鼠標單擊網(wǎng)頁編輯窗口中的空白區(qū)域，窗口中隨即出現(xiàn)閃動的光標，標識輸入文字的起始位置。 （2）選擇適當?shù)妮斎敕ㄝ斎胛淖?B、復(fù)制和 C、從其他文件導(dǎo)入2） 添加空格輸入法切換到半角狀態(tài)，按空格鍵只能輸入一個空格。如果需要輸入多個連續(xù)的空格可以通過以下幾種方法來實現(xiàn)： （1）菜單“插入記錄”-HTML-特殊字符-不換行空格 （2）直接按“Ctrl+Shift+Space”組合鍵（3）設(shè)置軟件首選參數(shù)-允許連續(xù)空格3）添加日期時間在文檔的最后一行插入形式如“Friday, 2006-07-14 9:47

2、 AM”所示的日期，且要求每次保存網(wǎng)頁時自動更新日期。具體操作過程如下： （1）切換到“常用”插入工具欄。（2）按Enter鍵，添加一空行，將光標放置在空行與正文對齊的最左端。 （3）單擊菜單【插入】【日期】，或者單擊“常用”插入欄的【日期】按鈕，將彈出 “插入日期”對話框。 （4）在“插入日期”對話框中，“星期格式”下拉表框中選取“Thursday,”，“日期格式”選取“1974-03-07”，在“時間格式”下拉列表框選取“10:18PM”，選中“儲存時自動更新”復(fù)選框，然后單擊【確定】按鈕，最后生成的日期效果為“Friday,2006-07-14 9:47 AM”的形式。（5）保存插入的日

3、期，且瀏覽網(wǎng)頁。 4 ) 插入水平線 （1）將“插入”工具欄切換到“HTML”類型。 （2）將光標放置到標題最后一個字符的右邊。 （3）單擊HTML插入工具欄的“水平線”按鈕，即可向網(wǎng)頁中標題與正文之間插入一條水平線。5）添加特殊字符（1）通過菜單【插入】【HTML】【特殊字符】插入 先將光標放置到需要插入特殊字符的位置，然后展開菜單【插入】【HTML】【特殊字符】，在【特殊字符】的級聯(lián)菜單中選擇需要插入的特殊字符。 （2）通過“文本”插入工具欄插入 先在Dreamweaver cs5的“插入”工具欄中選擇“文本”，顯示“文本”插入工具欄。將光標放置到需要插入特殊字符的位置，然后單擊工具欄中的

4、“文本”，單擊所需插入的特殊字符即可插入到網(wǎng)頁中。二、編輯文本1）網(wǎng)頁中輸入的文本可以像Word文檔一樣，進行編輯。 1. 拖動鼠標選中一個或多個文字、一行或多行文本，也可以選中網(wǎng)頁中的全部文本。 2. 按BackSpace鍵或Delete鍵實現(xiàn)刪除文本操作。3. 實現(xiàn)復(fù)制、剪切、粘貼等操作。 4. 實現(xiàn)查找與替換操作。 5. 實現(xiàn)撤消或重做操作。2）設(shè)置文本格式字體(通用性問題)、大小、顏色、風格注：CSS（Cascading Style Sheet，可譯為“層疊樣式表”或“級聯(lián)樣式表”）是一組格式設(shè)置規(guī)則，用于控制Web頁面的外觀。3）分段與換行分段按Enter回車鍵（隔一行）、換行按Sh

5、ift+Enter（不分段） 4）設(shè)置段落格式a.對齊方式b.列表編號 列表可以將文本段落用符號或序號標注起來，有兩種類型：項目列表和編號列表。 設(shè)置項目列表的操作過程如下: （1）選擇要添加列表的若干文本段落 （2）單擊屬性檢查器中的“項目列表”按鈕或“編號列表”按鈕 c.縮進5) 使用Html段落樣式三、在網(wǎng)頁中添加圖片1）網(wǎng)頁中常用的圖片格式使用圖片的原則：在保證畫質(zhì)的前提下盡可能使圖片的數(shù)據(jù)量小一些，這樣有利用戶快速的瀏覽我們的網(wǎng)頁。.GIF格式特點：它的圖片數(shù)據(jù)量小，可以帶有動畫信息，且可以透明背景顯示，但最高只支持256種顏色。用途：大量用于網(wǎng)站的圖標Logo、廣告條Banner及

6、網(wǎng)頁背景圖像。但由于受到顏色的顯示，不適合用于照片級的網(wǎng)頁圖像。 JPEG格式特點：可以高效地壓縮圖片的數(shù)據(jù)量。使圖片文件變小的同時基本不丟失顏色畫質(zhì)。用途：通常用于顯示照片等顏色豐富的精美圖像。 PNG格式 特點：是一種逐步流行的網(wǎng)絡(luò)圖像格式。既融合了GIF能做成透明背景的特點，又具有JPEG處理精美圖像的優(yōu)點。 用途：常用于制作網(wǎng)頁效果圖。 2）如何獲取網(wǎng)頁圖像 網(wǎng)上下載（我要素材網(wǎng) ）、購買素材光盤、使用圖像制作軟件創(chuàng)作3）插入圖像 插入圖像插入面板常用圖像直接將圖像文件拖入編輯區(qū)注意： 在插入圖像前應(yīng)先將網(wǎng)頁文件已保存，從而使所插圖像引用正確。 圖像插入網(wǎng)頁后，應(yīng)確定圖像文件已存入站點，否則在下次打開網(wǎng)頁時，會出現(xiàn)看不到圖像的情況。技巧：圖像的位置、替換文字 4）設(shè)置圖像的基本屬性 圖像設(shè)置的名稱 寬、高可縮小和放大圖片的顯示尺寸。 源文件圖片的路徑和名稱。 替代圖像的說明文字 邊框圖片是否要加邊框四、圖文混排 垂直邊距和水平邊距圖片四周突出的尺寸 對齊在一行中圖形和文本的對齊方式五、編輯圖像 裁切 銳化 對比度/亮度 重新采樣：當圖片的寬、高縮小后，重新生成更小的圖片。 優(yōu)化（為圖片瘦身）六、鼠標經(jīng)過更換圖片特效1）概念：是指在頁面中先顯示