- Dreamweaver+jQuery移動(dòng)網(wǎng)頁(yè)設(shè)計(jì)從新手到高手
- 張雪玲 劉琳
- 1406字
- 2020-09-18 10:26:13
2.5 設(shè)置文本屬性
文本屬性主要包括兩類:文字格式和段落格式。文字格式又包括文字的字體、字號(hào)、顏色以及文本的對(duì)齊方式等。
2.5.1 設(shè)置標(biāo)題段落格式
標(biāo)題經(jīng)常用來(lái)強(qiáng)調(diào)段落要表現(xiàn)的內(nèi)容,在HTML中共定義了6級(jí)標(biāo)題,從1級(jí)到6級(jí),每級(jí)標(biāo)題的字號(hào)依次遞減。
選中設(shè)置標(biāo)題段落的文本,執(zhí)行“窗口”|“屬性”命令,打開“屬性”面板,在“屬性”面板中單擊HTML選項(xiàng)卡按鈕,在該選項(xiàng)卡的“格式”下拉列表中選擇標(biāo)題樣式,如圖2-25所示。

圖2-25
★知識(shí)要點(diǎn)★
在“格式”下拉列表中可以設(shè)置以下段落格式。
· 段落:選擇該項(xiàng),將插入點(diǎn)所在的文字塊定義為普通段落,其兩端分別被添加<p>和</p>標(biāo)記。
· 預(yù)先格式化的:選擇該項(xiàng),則將插入點(diǎn)所在的段落設(shè)置為格式化文本,其兩端分別被添加<pre>和</pre>標(biāo)記。此時(shí),在文字中間的所有空格和回車等格式全部被保留。
· 無(wú):選擇該項(xiàng),則取消對(duì)段落的設(shè)置。
2.5.2 設(shè)置字體和字號(hào)
選擇一種合適的字體和字號(hào)是決定網(wǎng)頁(yè)美觀、布局合理的關(guān)鍵。在設(shè)置網(wǎng)頁(yè)時(shí),應(yīng)該對(duì)文本設(shè)置相應(yīng)的字體和字號(hào),具體操作步驟如下。
01選中要設(shè)置字號(hào)的文本,在“屬性”面板中選擇CSS選項(xiàng)卡,單擊“大小”右側(cè)的文本框,在彈出的下拉列表中選擇合適的字號(hào),或者直接在文本框中輸入相應(yīng)的字號(hào),如圖2-26所示。
02選中要設(shè)置字體的文本,在“屬性”面板的CSS選項(xiàng)卡中,單擊“字體”右側(cè)的文本框,在彈出的下拉列表中選擇合適的字體,如圖2-27所示。

圖2-26

圖2-27
2.5.3 添加新字體
字體對(duì)網(wǎng)頁(yè)中的文本來(lái)說(shuō)是非常重要的,Dreamweaver中自帶的字體比較少,但可以在Dreamweaver的字體列表中添加更多的字體,添加新字體的具體操作步驟如下。
01打開網(wǎng)頁(yè)文檔,在“屬性”面板的“字體”下拉列表中執(zhí)行“管理字體”命令,如圖2-28所示。
02在彈出的“管理字體”對(duì)話框的“可用字體”列表框中選擇要添加的字體,單擊按鈕添加到左側(cè)的“選擇的字體”列表框中,此時(shí),在“字體”列表框中也會(huì)顯示新添加的字體,如圖2-29所示。重復(fù)以上操作即可添加更多的字體,若要?jiǎng)h除已添加的字體,可以選中該字體并單擊
按鈕。

圖2-28
03完成一個(gè)字體樣式的編輯后,單擊按鈕可進(jìn)行下一個(gè)樣式的編輯。若要?jiǎng)h除某個(gè)已經(jīng)編輯的字體樣式,可選中該樣式后單擊
按鈕。
04完成字體樣式的編輯后,單擊“確定”按鈕關(guān)閉該對(duì)話框。
2.5.4 設(shè)置文本顏色
Dreamweaver還可以改變網(wǎng)頁(yè)文本的顏色,設(shè)置文本顏色的具體操作步驟如下。
01選中要設(shè)置顏色的文本,在“屬性”面板中單擊文本顏色按鈕,打開如圖2-30所示的調(diào)色板,在該調(diào)色板中選中所需的顏色。

圖2-29

圖2-30
02單擊即可選取該顏色,并設(shè)置文本的顏色,如圖2-31所示。

圖2-31
★知識(shí)要點(diǎn)★
此時(shí),也可以在調(diào)色板的對(duì)話框中直接輸入顏色代碼。
2.5.5 設(shè)置文本樣式
單擊“屬性”面板的“字體”文本框,在彈出的菜單中可以設(shè)置文字的粗體和斜體,如圖2-32所示。

圖2-32
2.5.6 設(shè)置文本對(duì)齊方式
在“屬性”面板中有4種對(duì)齊方式,每種對(duì)齊方式分別對(duì)應(yīng)一個(gè)按鈕,按鈕:左對(duì)齊,
按鈕:居中對(duì)齊,
按鈕:右對(duì)齊,
按鈕:兩端對(duì)齊,如圖2-33所示。

圖2-33
★提示★
為什么使一行字居中,其他行也會(huì)自動(dòng)居中?
在Dreamweaver中進(jìn)行居中、居右操作時(shí),默認(rèn)的區(qū)域是P、H1~H6、div等格式標(biāo)識(shí)符,如果語(yǔ)句沒有用上述的標(biāo)識(shí)符隔開,Dreamweaver會(huì)將整段文字都進(jìn)行居中處理,解決方法就是將居中文本用P隔開。
2.5.7 設(shè)置文本的縮進(jìn)和凸出
所謂“縮進(jìn)”就是相對(duì)于文檔窗口左端而言,將文字縮進(jìn),以表示與普通段落的區(qū)別。將光標(biāo)置于要縮進(jìn)的段落中,在“屬性”面板中單擊“內(nèi)縮區(qū)塊”按鈕,即可將當(dāng)前的段落縮進(jìn),如圖2-34所示。在“屬性”面板中單擊“刪除內(nèi)縮區(qū)塊”按鈕
,即可刪除當(dāng)前段落的縮進(jìn)設(shè)置。
- 安全之美
- Solaris 10系統(tǒng)管理
- Bootstrap從入門到項(xiàng)目實(shí)戰(zhàn)
- 中文版Dreamweaver CC基礎(chǔ)培訓(xùn)教程
- Kubeflow:云計(jì)算和機(jī)器學(xué)習(xí)的橋梁
- Dreamweaver+ASP動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)從新手到高手
- JavaScript+jQuery前端開發(fā)基礎(chǔ)教程(微課版)
- 網(wǎng)站說(shuō)服力
- Mastering SaltStack
- 數(shù)字化科研:e-Science研究
- 劍指云端:引領(lǐng)企業(yè)IT未來(lái)的最佳實(shí)踐
- ASP.NET Core與RESTful API 開發(fā)實(shí)戰(zhàn)
- Bootstrap 4 Web設(shè)計(jì)與開發(fā)實(shí)戰(zhàn)
- 網(wǎng)絡(luò)設(shè)備配置與管理實(shí)訓(xùn)教程
- Prometheus云原生監(jiān)控:運(yùn)維與開發(fā)實(shí)戰(zhàn)