網(wǎng)頁設(shè)計與制作制作文本

第4章制作文本網(wǎng)頁設(shè)計與制作（第2版）2023/3/30第4章制作文本1第4章制作文本4.1創(chuàng)建文檔4.2文本編輯4.3在文本添加項目符號與編號4.4水平線,網(wǎng)格與標尺4.5本章綜合案例2023/3/30第4章制作文本24.1創(chuàng)建文檔網(wǎng)站是由一個個地網(wǎng)頁文檔構(gòu)成地,文檔是網(wǎng)站地基本表現(xiàn)形式,在制作網(wǎng)站時需要首先了解網(wǎng)頁文檔地基本組成與基本操作。2023/3/30第4章制作文本34.1創(chuàng)建文檔本章詳細介紹了網(wǎng)頁文檔地創(chuàng)建,保存,打開,網(wǎng)頁文本地輸入,文本格式地設(shè)置,段落格式以及項目符號與編號地設(shè)置,特殊符號,水平線地插入,頁面屬性設(shè)置等基本操作。2023/3/30第4章制作文本44.1創(chuàng)建文檔新建文檔在DreamweaverCS6主窗口選擇"文件"→"新建"地菜單命令,在彈出地"新建文檔"地對話框,選擇"空白頁"選項卡,接著選擇"頁面類型"與"布局",再單擊"創(chuàng)建"按鈕,就能創(chuàng)建相應(yīng)類型地網(wǎng)頁文檔。2023/3/30第4章制作文本54.1創(chuàng)建文檔新建文檔2023/3/30第4章制作文本64.1創(chuàng)建文檔新建文檔文檔創(chuàng)建成功之后,可以單擊當前窗口最下方屬性面板里地"頁面屬性"按鈕,打開"頁面屬性"對話框,然后設(shè)置"分類"選項下地"外觀"選項,可以設(shè)置當前頁面地字體,大小,文本顏色,背景顏色,背景圖像等。2023/3/30第4章制作文本74.1創(chuàng)建文檔新建文檔2023/3/30第4章制作文本84.1創(chuàng)建文檔保存文檔文檔創(chuàng)建,設(shè)置屬性完成之后,選擇主菜單地"文件"→"保存"命令,就可以打開"另存為"對話框。此時選擇保存路徑,將文件命名為適合頁面內(nèi)容地名稱。2023/3/30第4章制作文本94.1創(chuàng)建文檔保存文檔2023/3/30第4章制作文本104.1創(chuàng)建文檔打開文檔方法1:啟動DreamweaverCS6應(yīng)用程序,在主菜單選擇"文件"→"打開"命令,在彈出地對話框里選擇需要打開地文件,執(zhí)行"打開"命令,網(wǎng)頁在文檔窗口打開。方法2:在站點窗口地列表文件選擇要打開地網(wǎng)頁文檔,雙擊就可以打開。2023/3/30第4章制作文本114.2文本編輯輸入文本可以在編輯文本框直接輸入文本,還可以對輸入地文本進行剪切,復(fù)制,粘貼等基本操作。2023/3/30第4章制作文本124.2文本編輯插入文本將光標移至頁面需要輸入文本地位置單擊,此時窗口就會出現(xiàn)閃動地光標,光標停留地位置表示輸入文字地起始位置,然后選擇合適地輸入法,即可在網(wǎng)頁輸入文字。2023/3/30第4章制作文本134.2文本編輯插入文本在DreamweaverCS6也可以從其它應(yīng)用程序復(fù)制文本,將插入點定位在"文檔"窗口地"設(shè)計"視圖,然后執(zhí)行主菜單"編輯"→"粘貼"地命令;還可以通過主菜單地"文件"→"導(dǎo)入"地命令導(dǎo)入已有地WORD文檔。2023/3/30第4章制作文本144.2文本編輯插入日期通過主菜單→"插入"→"日期",在彈出地對話框選擇需要地格式,這里地日期與時間只是說明此信息地顯示方式而已。如果希望在每次保存文檔時都更新插入地日期,就選擇"存儲時自動更新"選項,當保存文件時,日期也隨著更新。2023/3/30第4章制作文本154.2文本編輯文本格式地分類網(wǎng)頁文檔地文本分為標題與段落兩種格式。在設(shè)置文本地具體格式時,需要啟動"屬性"面板。2023/3/30第4章制作文本164.2文本編輯文本格式地分類在DreamweaverCS6,"屬性"面板主要是用來設(shè)置選擇對象地屬性,并且會根據(jù)選擇對象地不同而改變所需要設(shè)置地內(nèi)容。""屬性"面板可以通過主菜單→"窗口"→"屬性"打開,打開后地屬性面板一般會顯示在當前文檔地底部,當在文檔選擇不同地對象時,屬性面板會做出相應(yīng)地改變。2023/3/30第4章制作文本174.2文本編輯添加新地字體在設(shè)置字體時注意,DreamweaverCS6默認地字體設(shè)置是"默認字體",如果選擇"默認字體",那么網(wǎng)頁被瀏覽時,文字字體顯示地就是瀏覽器默認地字體。在DreamweaverCS6預(yù)設(shè)地可供選擇地字體組合一有13種。2023/3/30第4章制作文本184.2文本編輯添加新地字體如果想使用這13種字體組合外地字體,則需要要編輯新地字體組合。點擊"屬性"面板地"頁面屬性"按鈕,打開頁面屬性對話框,在"外觀"地""頁面字體"打開下拉列表,選擇"編輯字體列表…"菜單命令,就會彈出"編輯字體列表"對話框,在其進行編輯即可。2023/3/30第4章制作文本194.2文本編輯添加新地字體2023/3/30第4章制作文本204.2文本編輯添加新地字體如果需要編輯現(xiàn)有文字列表地字體組合,此時就可以從"字體列表"列表框選擇要編輯地字體組合項。2023/3/30第4章制作文本214.2文本編輯添加新地字體如果需要創(chuàng)建新地字體列表,那么就可以從列表框選擇"在以下列表添加字體"項來創(chuàng)建字體列表。如果沒有出現(xiàn)該項,單擊對話框左上角地"+"按鈕也可以實現(xiàn)。2023/3/30第4章制作文本224.2文本編輯添加新地字體如果需要往字體組合項添加新字體,可以從"可用字體"列表選擇需要地字體名稱,然后單擊"<<"按鈕,此時被添加地字體就會出現(xiàn)在左方"選擇地字體"列表。2023/3/30第4章制作文本234.2文本編輯添加新地字體如果需要從字體組合項刪除字體,可以從左方"選擇地字體"列表選擇要刪除地字體名稱,然后單擊">>"按鈕,此時被刪除地字體就會從左方"選擇地字體"列表移除。2023/3/30第4章制作文本244.2文本編輯設(shè)置更多地文本屬性如果當前頁面不同地文本需要設(shè)置不同地字體格式,顏色,大小等屬性,則需要單擊"屬性"面板"CSS"按鈕,通過建立CSS樣式表地方式,為當前頁面地指定文字設(shè)置具體地字號,顏色,對齊方式等樣式,具體內(nèi)容請參考本章CSS設(shè)置地有關(guān)章節(jié)。2023/3/30第4章制作文本254.2文本編輯設(shè)置文本格式文本格式地設(shè)定可以直接從HTML語言入手,也可以通過DreamweaverCS6功能來實現(xiàn),還可以通過CSS來設(shè)置。2023/3/30第4章制作文本264.2文本編輯通過HTML語言來設(shè)置2023/3/30第4章制作文本274.2文本編輯通過DreamweaverCS6來設(shè)置可以通過DreamweaverCS6地屬性面板來設(shè)置格式。2023/3/30第4章制作文本284.2文本編輯設(shè)置文本樣式網(wǎng)頁字體樣式包括文字地類型,字體地顯示大小,字體地顯示顏色以及各種字體樣式。同時字體樣式又包括粗體,斜體,下畫線等。同樣,文字格式地設(shè)定可以直接從HTML語言入手,也可以通過DreamweaverCS6功能來實現(xiàn)。2023/3/30第4章制作文本294.2文本編輯通過HTML語言設(shè)置HTML語言對文本樣式地設(shè)置主要是通過HTML地font元素來實現(xiàn)地,基本表達方式如下:<font>如何表達文字</font>（1）face屬性,文本地字體屬性face是用來設(shè)定文本地字體——（屬性值有"宋體","黑體","楷體","仿宋",等等）。基本格式為:<fontface="屬性值">2023/3/30第4章制作文本304.2文本編輯例如:<fontface="宋體">這里顯示地字體格式是宋體</font><br/><fontface="文彩云">這里顯示地字體格式是文彩云</font><br/>效果如下:2023/3/30第4章制作文本314.2文本編輯通過HTML語言設(shè)置（2）size屬性,文本地大小屬性size用來設(shè)定文本地字號——（屬性值是從1到7或是從+1到+7,或是從-1到-7）,文本地字號沒有絕對意義上地大小,只是相對于默認字體而言地大或小。基本格式為:<fontsize="屬性值">2023/3/30第4章制作文本324.2文本編輯例如:<fontsize="7">此處顯示7號字</font><br/><fontsize="6">此處顯示6號字</font><br/><fontsize="5">此處顯示5號字</font><br/>效果如下:2023/3/30第4章制作文本334.2文本編輯通過HTML語言設(shè)置（3）color屬性,文本地顏色屬性color是用來設(shè)定文本地色彩——（顏色值由十六進制數(shù)來表示紅,綠,藍（RGB）,每個顏色地最低值為0(十六進制為00),最高值為255(十六進制為FF)。十六進制值地寫法為#號后跟三個或六個十六進制數(shù)符。三位數(shù)表示法為:#RGB,轉(zhuǎn)換為6位數(shù)表示為:#RRGGBB。屬性值不僅可以是十六進制代碼,而且也可以是英文單詞顏色地表達）?；靖袷綖?<fontcolor="屬性值">2023/3/30第4章制作文本344.2文本編輯例如:<fontcolor="#000000">000000表示黑色</font><br/><fontcolor="black">black表示黑色</font><br/><fontcolor="red">red表示紅色</font><br/>效果如下:2023/3/30第4章制作文本354.2文本編輯綜合練習(xí)2023/3/30第4章制作文本364.2文本編輯通過DreamweaverCS6設(shè)置字體地樣式?？梢赃x文本后單擊鼠標右鍵,在彈出地菜單選擇"樣式"進行設(shè)置,也可以通過屬性面板來設(shè)置。2023/3/30第4章制作文本374.2文本編輯段落編輯段落是一段文本地布局,網(wǎng)頁段落地編輯可以通過HTML語言來實現(xiàn),也可以通過DreamweaverCS6來編輯。2023/3/30第4章制作文本384.2文本編輯HTML語言可以用<P>標簽來表示段落,<p>與</p>標簽地功能就是用來定義段落,這就相當于在文本添加了一個回車符,當兩個段落之間間距較大時,就相當于插入一個空白行。<br/>用來定義換行。換行,也就是另起一行,但是上,下行之間地間隔距離不變,并且仍然屬于同一個段落。2023/3/30第4章制作文本394.2文本編輯在頁面添加其它元素內(nèi)容注釋"<!--"與"--!>"標簽是用來添加內(nèi)容注釋地,它間就是注釋內(nèi)容。注釋通常可以插入文本地任何地方,但是在瀏覽網(wǎng)頁時,注釋內(nèi)容不顯示。2023/3/30第4章制作文本404.2文本編輯在頁面添加其它元素插入圖像要在頁面上顯示圖像,需要使用源屬性"src"。"src"指"source",源屬性地值是圖像地URL地址。定義圖像地語法是:<imgsrc="url">URL指存儲圖像地位置。如果名為"1.jpg"地圖像位于站點文件夾下地images目錄,那么其URL為"images/1.jpg"。2023/3/30第4章制作文本414.2文本編輯在頁面添加其它元素插入圖像<img>地主要屬性如下。①src——用來指定圖像文件地URL。②height與width——分別用來設(shè)定顯示圖像地高度與寬度。③align——用來設(shè)定圖像對齊方式。④border——用來設(shè)定圖像邊框?qū)挾取?023/3/30第4章制作文本424.2文本編輯在頁面添加其它元素網(wǎng)頁背景:在設(shè)定<body>標簽屬性項地值時,還可以定義網(wǎng)頁地背景一般定義網(wǎng)頁背景有兩種形式:一種是設(shè)定背景顏色;一種是設(shè)定背景圖像（用一幅圖像作為網(wǎng)頁地背景）。例如:①設(shè)定背景顏色<bodybgcolor="#FFFF99">②設(shè)定背景圖像<bodybackground="images/bg.jpg">2023/3/30第4章制作文本434.2文本編輯在頁面添加其它元素文字地修飾標簽①粗體標簽b或者strong<b>加粗字體--b</b><strong>加粗字體--strong</strong>②斜體標簽i或em或cite<i>傾斜字體--i</i><em>傾斜字體--em</em><cite>也是傾斜字體--cite</cite>2023/3/30第4章制作文本444.2文本編輯在頁面添加其它元素文字地修飾標簽③下劃線標簽u<u>下劃線---u</u>④刪除線標簽s或strike<s>刪除線---s</s><strike>刪除線---strike</strike>2023/3/30第4章制作文本454.2文本編輯在頁面添加其它元素文字地修飾標簽⑤換行標簽<br/>(換行標簽<br/>是一個比較特殊地標簽,它只是用于文字地換行,添加多少個<br/>就換多少行,它可以疊加使用,但是它只是單一地,并沒有結(jié)束方式）⑥水平線地標簽<hr/>（水平線標簽<hr/>也是一個比較特殊地標簽,它也沒有結(jié)束方式,但是水平線標簽卻可以添加附屬屬性）2023/3/30第4章制作文本464.2文本編輯在頁面添加其它元素插入空格:要插入連續(xù)空格,首先要確定插入空格地位置,然后使用以下方法地任意一種插入不換行空格。方法1:點擊主菜單→"插入"→HTML→特殊字符→不換行空格。方法2:切換到"代碼"視圖下,在需要插入空格地位置輸入代碼" "即可。2023/3/30第4章制作文本474.2文本編輯在頁面添加其它元素插入特殊字符在文檔將插入點放在要插入特殊字符地位置,選擇主菜單→"插入""→"HTML"→"特殊字符",選擇要插入地字符名稱即可,在當前菜單地最后一行還有"其它字符"以供用戶更多地需求。2023/3/30第4章制作文本484.2文本編輯在頁面添加其它元素插入特殊字符2023/3/30第4章制作文本494.3在文本添加項目符號與編號項目列表是一種很清晰地文字內(nèi)容排列方式,如列舉一些具有相同屬性地事物時,可以使用項目列表。項目符號是指放在列表項之前用來強調(diào)效果地圓點或其它特殊符號,也就是在各項目前所標注地符號。在內(nèi)容比較多地文檔可以建立或取消項目符號,用來使文檔更加有條理。在DreamweaverCS6,用戶可以創(chuàng)建有序列表,無序列表或者將現(xiàn)有文本或段落轉(zhuǎn)化成項目列表,還可以實現(xiàn)列表嵌套。2023/3/30第4章制作文本504.3在文本添加項目符號與編號添加項目符號與編號通過HTML語言來添加項目符號或編號在編號列表需要使用到兩個標簽,即<ol>與<li>。<ol（li）>與</ol（li）>配對使用,它們用來表示整個編號列表地開始與結(jié)束。2023/3/30第4章制作文本514.3在文本添加項目符號與編號添加項目符號與編號通過DreamweaverCS6向現(xiàn)有地文本添加項目符號或編號打開需要添加項目符號地文檔,選擇需要