电玩城游戏大厅app

書名： Dreamweaver CC網(wǎng)頁設(shè)計(jì)從入門到精通（微課精編版）
作者名：前端科技
本章字?jǐn)?shù)： 1966字
更新時(shí)間： 2019-12-09 14:39:28

3.3 定義文本格式

文本格式類型實(shí)際上就是定義文本所包含的標(biāo)簽類型，該標(biāo)簽表示文本所代表的語義性。在文本【屬性】面板中單擊【格式】下拉列表框可以快速設(shè)置，包括段落格式、標(biāo)題格式、預(yù)先格式化。如果在【格式】下拉列表框中選擇【無】選項(xiàng)，可以取消格式操作，或者設(shè)置無格式文本。

3.3.1 實(shí)戰(zhàn)演練：輸入段落文本

段落格式就是設(shè)置所選文本為段落。在HTML源代碼中是使用<p>標(biāo)記來表示，段落文本默認(rèn)格式是在段落文本上下邊顯示1行空白間距（約12px），其語法格式如下：

     <p>段落文本</p>

【操作步驟】

第1步，啟動(dòng)Dreamweaver CC，新建文檔，保存為test.html。

第2步，在編輯窗口中，手動(dòng)輸入文本“《雨霖鈴》”。

第3步，在【屬性】面板中，在【格式】下拉列表框中選擇【段落】選項(xiàng)，即可設(shè)置當(dāng)前輸入文本為段落格式，如圖3.6所示。

圖3.6 設(shè)置段落格式

技巧：在【設(shè)計(jì)】視圖下，輸入一些文字后，按Enter鍵，就會(huì)自動(dòng)生成一個(gè)段落，這時(shí)也會(huì)自動(dòng)應(yīng)用段落格式，光標(biāo)會(huì)自動(dòng)換行，同時(shí)【格式】下拉列表框中顯示為“段落”狀態(tài)。

第4步，切換到【代碼】視圖下，可以直觀比較段落文本和無格式文本的不同。

（1）輸入文本回車前：

     <body>
     《雨霖鈴》
     </body>

（2）輸入文本回車后：

     <body>
     <p>《雨霖鈴》</p>
     <p>&nbsp; </p>
     </body>

（3）輸入文本后選擇【段落】格式選項(xiàng)：

     <body>
     <p>《雨霖鈴》
     </p>
     </body>

第5步，按Enter鍵換行顯示，繼續(xù)輸入文本。以此操作類推，輸入全部詩句。則生成的HTML代碼如下，在【設(shè)計(jì)】視圖下可以看到如圖3.7所示的效果。

圖3.7 應(yīng)用段落格式

     <!doctype html>
     <html>
     <head>
     <meta charset="utf-8">
     <title></title>
     </head>
     <body>
     <p>《雨霖鈴》 </p>
     <p>柳永</p>
     <p> 寒蟬凄切，對(duì)長(zhǎng)亭晚，驟雨初歇。</p>
     <p>都門帳飲無緒，留戀處、蘭舟催發(fā)。</p>
     <p>執(zhí)手相看淚眼，竟無語凝噎。念去去、千里煙波，暮靄沉沉楚天闊。</p>
     <p>多情自古傷離別，更那堪冷落清秋節(jié)！</p>
     <p>今宵酒醒何處？</p>
     <p>楊柳岸、曉風(fēng)殘?jiān)隆?lt;/p>
     <p>此去經(jīng)年，應(yīng)是良辰好景虛設(shè)。</p>
     <p>便縱有千種風(fēng)情，更與何人說？ </p>
     </body>
     </html>

3.3.2 實(shí)戰(zhàn)演練：定義標(biāo)題文本

標(biāo)題文本主要用于強(qiáng)調(diào)文本信息的重要性。在HTML語言中，定義了6級(jí)標(biāo)題，分別用<h1>、<h2>、<h3>、<h4>、<h5>、<h6>標(biāo)記來表示，每級(jí)標(biāo)題的字體大小依次遞減，標(biāo)題格式一般都加粗顯示。

提示：實(shí)際上每級(jí)標(biāo)題的字符大小并沒有固定值，它是由瀏覽器所決定的，為標(biāo)題定義的級(jí)別只決定了標(biāo)題之間的重要程度，也可以設(shè)置各級(jí)標(biāo)題的具體屬性。在標(biāo)題格式中，主要的屬性是對(duì)齊屬性，用于定義標(biāo)題段落的對(duì)齊方式。

【操作步驟】

第1步，啟動(dòng)Dreamweaver CC，打開3.3.1節(jié)創(chuàng)建的網(wǎng)頁文檔test.html。下面將文檔中的文本“《雨霖鈴》”定義為一級(jí)標(biāo)題居中顯示，將文本“柳永”定義為二級(jí)標(biāo)題居中顯示。

第2步，在編輯窗口中拖選文本“《雨霖鈴》”，在文本【屬性】面板的【格式】下拉列表框中選擇【標(biāo)題1】選項(xiàng)。

第3步，選擇【格式】｜【對(duì)齊】｜【居中對(duì)齊】命令，則會(huì)設(shè)置標(biāo)題文本居中顯示，如圖3.8所示。

圖3.8 設(shè)置標(biāo)題格式

第4步，切換到【代碼】視圖下，可以看到生成的如下HTML代碼：

     <h1 align="center">《雨霖鈴》</h1>

第5步，把光標(biāo)置于文本“柳永”中，在文本【屬性】面板的【格式】下拉列表框中選擇【標(biāo)題2】選項(xiàng)，設(shè)置文本“柳永”為二級(jí)標(biāo)題格式。

提示：在上面操作中，沒有選中操作文本，這是因?yàn)槎温涓袷胶蜆?biāo)題格式作用文本上光標(biāo)插入點(diǎn)所在的一段，如果要將多段設(shè)置一個(gè)標(biāo)題，可以同時(shí)選中。如果按Shift+Enter快捷鍵或者用<br>標(biāo)記使文本換行，但上下行依然是一段，因此，標(biāo)題格式和段落格式同樣起作用。

第6步，選擇【格式】｜【對(duì)齊】｜【居中對(duì)齊】命令，設(shè)置二級(jí)標(biāo)題文本居中顯示，如圖3.9所示。

圖3.9 設(shè)置標(biāo)題格式效果

技巧：當(dāng)設(shè)置標(biāo)題格式后，按Enter鍵，Dreamweaver CC會(huì)自動(dòng)在下一段中將文本恢復(fù)為段落文本格式，即取消了標(biāo)題格式的應(yīng)用。如果選擇【編輯】｜【首選項(xiàng)】命令，在打開的【首選項(xiàng)】對(duì)話框中選擇【常規(guī)】分類項(xiàng)，然后在右側(cè)取消選中【標(biāo)題后切換到普通段落】復(fù)選框。此時(shí)，如果在標(biāo)題格式文本后按Enter鍵則依然保持標(biāo)題格式。