Dreamweaver中的文本格式設(shè)置與使用ppt課件

1、1. Dreamweaver 中的文本格式設(shè)置與運(yùn)用第一步：采用框架設(shè)計(jì)整體框架 由5.3節(jié)我們曾經(jīng)學(xué)到，框架即多窗口頁面，也稱為“幀，是將一個(gè)閱讀器窗口分成多個(gè)小頁面，每個(gè)頁面顯示一定的內(nèi)容。它是頁面排版的重要表現(xiàn)方式。本實(shí)訓(xùn)中，需求把頁面分成左右兩部分，左邊部分為菜單列表，右邊部分為主顯示頁面。 翻開Dreamwaver 2004，新建一個(gè)空白頁面，然后運(yùn)轉(zhuǎn)菜單“插入HTML框架左方，頁面就會被分割成左右兩個(gè)部分，如圖1所示。.圖1 框架效果圖 第一步：采用框架設(shè)計(jì)整體框架.插入框架后，設(shè)置框架的屬性，我們需求框架的邊框?yàn)?，顏色為紅色，左邊寬度為110像素，所以框架的屬性面板如圖2所示。

2、圖2 框架屬性面板第一步：采用框架設(shè)計(jì)整體框架.設(shè)置完后的框架頁面如圖3所示。圖3 設(shè)置完成后的框架效果圖第一步：采用框架設(shè)計(jì)整體框架.如今我們曾經(jīng)按照需求設(shè)置了框架屬性，其HTML代碼如圖4所示。圖4 框架HTML代碼第一步：采用框架設(shè)計(jì)整體框架.第一步：采用框架設(shè)計(jì)整體框架在這個(gè)框架頁面上，其實(shí)包含了三個(gè)頁面：框架頁面、左邊子頁面、右邊子頁面，Dreamwaver 2004給這三個(gè)文件分別命名為：UntitledFrameset-1.htm、UntitledFrame-1.htm、Untitled-1.htm。所以在保管的時(shí)候，選擇“文件保管全部，Dreamwaver 2004會順序彈出三

3、個(gè)窗口，來分別保管上面的三個(gè)文件，如圖5圖7所示。.圖5 框架保管窗口 第一步：采用框架設(shè)計(jì)整體框架.圖6 右邊子頁面保管窗口 第一步：采用框架設(shè)計(jì)整體框架.圖7 左邊子頁面保管窗口 第一步：采用框架設(shè)計(jì)整體框架.第一步：采用框架設(shè)計(jì)整體框架在本實(shí)訓(xùn)中，上面三個(gè)文件，分別采用文件名index.htm，woaiwojia.htm，left.htm。左邊窗口的名字為leftFrame，右邊窗口的名字為mainFrame。我們可以隨意更改這兩個(gè)名字，對顯示效果沒什么影響，在javascript編程中才會用到，在后面我們設(shè)置左邊子窗口中的超級鏈接的時(shí)候也能用到。 .到此為止，框架頁面曾經(jīng)做完了，經(jīng)過D

4、reamwaver 2004中的“文件在閱讀器中預(yù)覽iexplore，就可以看到框架的效果如圖8所示。圖8 框架最終顯示效果圖第一步：采用框架設(shè)計(jì)整體框架.第二步：left.htm的設(shè)計(jì)在Dreamwaver 2004中，點(diǎn)擊上面這個(gè)框架頁面紅色框架左邊的空白區(qū)域，他會發(fā)現(xiàn)Dreamwaver 2004的窗口最上面顯示的文件名曾經(jīng)變成left.htm，這時(shí)候，就可以對left.htm進(jìn)展編輯了。 .第二步：left.htm的設(shè)計(jì)本網(wǎng)站是斐斐的個(gè)人網(wǎng)站，所以最好在醒目的位置標(biāo)示這個(gè)信息，left.htm頁面頂端就是最適宜的位置，在本實(shí)訓(xùn)中，采用紅色的大字體“斐斐小屋來闡明，假設(shè)您喜歡，也可以在這

5、兒放置一個(gè)適宜的圖片。在“斐斐小屋的下面，依次插入四行字：“我愛我家，“青春寄語，“攝影欣賞，“友誼鏈接，然后設(shè)置這四行字的鏈接如圖9圖12所示。.圖9 “我愛我家鏈接設(shè)置第二步：left.htm的設(shè)計(jì)圖10 “青春寄語鏈接設(shè)置圖11 “攝影欣賞鏈接設(shè)置圖12 “友誼鏈接鏈接設(shè)置 .左邊頁面得最終效果如圖13所示。圖13 left.htm頁面效果圖 第二步：left.htm的設(shè)計(jì).第三步：woaiwojia.htm葉面的設(shè)計(jì)該頁面用來顯示斐斐的小狗“笨笨的一組圖片，為了陳列圖片，所以需求運(yùn)用表格進(jìn)展排版。由5.2我們可知，表格可以用來明晰地顯示列表的數(shù)據(jù)。實(shí)踐上表格的作用遠(yuǎn)遠(yuǎn)不止顯示數(shù)據(jù)，它在

6、網(wǎng)頁定位上不斷起著重要的作用。.第三步：woaiwojia.htm葉面的設(shè)計(jì)首先運(yùn)轉(zhuǎn)“插入表格 或者點(diǎn)工具欄上的 ，彈出表格屬性設(shè)置對話框，如圖14所示。圖14 表格插入對話框.表格的屬性窗口包括三部分，即表格大小、頁眉、輔助功能。在此例中，我們插入一個(gè)3行，3列，寬度為200像素，邊框?yàn)?的表格。由于我們的表格只是用來進(jìn)展頁面規(guī)劃，所以不需求表頭，因此選擇無。在本實(shí)訓(xùn)中，不需求標(biāo)題，因此標(biāo)題欄不填任何內(nèi)容。 第三步：woaiwojia.htm葉面的設(shè)計(jì).第三步：woaiwojia.htm葉面的設(shè)計(jì)表格插入后，如圖15所示。虛線為表格的邊框，表格下面的綠線是表格的標(biāo)尺，顯示表格的寬度和每列的寬

7、度，假設(shè)點(diǎn)擊每列對應(yīng)的標(biāo)尺中間的小箭頭，就會彈出一個(gè)有關(guān)列操作的快捷菜單，這也是2004新添加的功能。當(dāng)把鼠標(biāo)挪動到虛線上時(shí)，鼠標(biāo)就會變成程度或者垂直拖動的圖標(biāo)，這個(gè)時(shí)候可以按下鼠標(biāo)左鍵，并進(jìn)展拖動來改動表格的大小，這就是“所見即所得的設(shè)計(jì)方式。 .圖15 插入后的表格第三步：woaiwojia.htm葉面的設(shè)計(jì).第三步：woaiwojia.htm葉面的設(shè)計(jì) 假設(shè)點(diǎn)擊表格的虛線部分，是表格處在選中形狀，在Dreamweaver MX 2004編輯區(qū)域的下方屬性顯示區(qū)域，就會出現(xiàn)表格的屬性，如圖16，經(jīng)過該窗口，可是設(shè)置表格的各種屬性，包括大小，對齊方式，背景顏色等，在本實(shí)訓(xùn)中，表格對齊方式為居

8、中對齊，寬為564像素，高為356像素。圖16 表格屬性設(shè)置窗口 .第三步：woaiwojia.htm葉面的設(shè)計(jì)根據(jù)需求，遷延表格到適宜的大小，如圖17所示。圖17 調(diào)整后的表格.第三步：woaiwojia.htm葉面的設(shè)計(jì) 然后設(shè)置單元格的屬性，四個(gè)大的單元格的程度對齊方式和垂直對齊方式都設(shè)為居中對齊，單元格屬性設(shè)置如圖18所示：圖18 單元格屬性設(shè)置 .表風(fēng)格整好后，就可以在四個(gè)大的單元格中插入圖片了，運(yùn)轉(zhuǎn) “插入圖片，依次插入圖片“小狗-2.png，“小狗-6.png，“小狗-8.png，“小狗-9.png，當(dāng)然您也可以插入您本人喜歡的圖片。圖片屬性設(shè)置如圖19所示。在您將圖像插入 Dr

9、eamweaver 文檔時(shí)，Dreamweaver 自動在 HTML 源代碼中生成對該圖像文件的援用。為了確保此援用的正確性，該圖像文件必需位于當(dāng)前站點(diǎn)中。假設(shè)圖像文件不在當(dāng)前站點(diǎn)中，Dreamweaver 會訊問您能否要將此文件復(fù)制到當(dāng)前站點(diǎn)中。第三步：woaiwojia.htm葉面的設(shè)計(jì).圖19 圖片屬性設(shè)置 第三步：woaiwojia.htm葉面的設(shè)計(jì).最后woaiwojia.htm的效果如圖20所示。圖20 woaiwojia.htm效果圖 第三步：woaiwojia.htm葉面的設(shè)計(jì).第四步：qingchunjiyu.htm設(shè)計(jì) 該頁面包含一首詩歌，但是為了方便排版，需求把該詩放在表

10、格中，因此，首先運(yùn)轉(zhuǎn)“插入表格 或者點(diǎn)工具欄上的 ，彈出表格屬性設(shè)置對話框，如圖21所示。. 圖21 插入表格表示圖第四步：qingchunjiyu.htm設(shè)計(jì).設(shè)置表格的寬度和高度分別為280，212，對齊方式為居中對齊，單元格的程度對齊方式為左對齊，垂直對齊方式為頂端對齊。其屬性設(shè)置面板如圖22，圖23所示。圖22 表格屬性設(shè)置面板 圖23 單元格屬性設(shè)置面板 第四步：qingchunjiyu.htm設(shè)計(jì). 然后，在單元格中輸入這首詩： 云彩還在天空彷徨 青春之花卻毫不猶疑地 粲然開放了 有人說 收藏在人生冊頁中的青春花瓣 或許只是 一雙永不能忘的雙眸 一個(gè)令人心動的淺笑 我想說 青春的光

11、輝 在冉冉升起時(shí)會很亮堂 青春的花朵 在閱歷過風(fēng)霜雪雨后會熠熠生輝 青春的歷程 在不斷搏擊后才干譜寫絢麗篇章第四步：qingchunjiyu.htm設(shè)計(jì).Macromedia Dreamweaver MX 2004 提供了多種向文檔中添加文本和設(shè)置文本格式的方法。您可以插入文本、設(shè)置字體類型、大小、顏色和對齊屬性，以及運(yùn)用層疊款式表 (CSS) 款式創(chuàng)建和運(yùn)用您本人的自定義款式。第四步：qingchunjiyu.htm設(shè)計(jì).Dreamweaver 允許您經(jīng)過以下方式在 Web 頁中添加文本：直接將文本鍵入頁中，從其他文檔復(fù)制和粘貼文本，或從其他運(yùn)用程序拖放文本?？梢院喜⒌?Web 頁的文本內(nèi)容

12、的常見文檔類型有 ASCII 文本文件、RTF 文件和 MS Office 文檔。Dreamweaver 使您可以從這些文檔類型中的任何一種取出文本，然后將文本并入 Web 頁中。第四步：qingchunjiyu.htm設(shè)計(jì).Dreamweaver 中的文本格式設(shè)置與運(yùn)用規(guī)范字處置程序類似。您可以為文本塊設(shè)置默許格式化款式段落、標(biāo)題 1、標(biāo)題 2 等、更改所選文本的字體、大小、顏色和對齊方式，或者運(yùn)用文本款式如粗體、斜體和下劃線。在該實(shí)訓(xùn)中，詩歌字體屬性設(shè)置如圖24所示。圖24 文字格式屬性設(shè)置 第四步：qingchunjiyu.htm設(shè)計(jì).青春寄語效果圖圖25所示。 圖25 qingchun

13、jiyu.htm效果圖 第四步：qingchunjiyu.htm設(shè)計(jì).第五步：sheyingxinshang.htm頁面設(shè)計(jì)在攝影欣賞頁面上，有兩組圖片，人體藝術(shù)圖片和風(fēng)景圖片，與我愛我家頁面類似，也需求表格來進(jìn)展排版和定位。.首先運(yùn)轉(zhuǎn)“插入表格 或者點(diǎn)工具欄上的，彈出表格屬性設(shè)置對話框，如圖26所示。第五步：sheyingxinshang.htm頁面設(shè)計(jì).圖26 表格插入對話框第五步：sheyingxinshang.htm頁面設(shè)計(jì).插入后的表格如圖27所示。 圖27 插入后的表格設(shè)置表格的對齊方式為居中對齊，表格屬性面板如圖28所示。 圖28 表格屬性設(shè)置面板第五步：sheyingxinsh

14、ang.htm頁面設(shè)計(jì).然后，合并左上角兩個(gè)單元格，用鼠標(biāo)在左上角單元格中點(diǎn)擊一下，然后按住鼠標(biāo)左鍵，向下拖動鼠標(biāo)，直到進(jìn)入第二個(gè)單元格，這時(shí)候，左上角兩個(gè)單元格處于選中形狀，如圖29所示。 圖29 選中單元格表示圖第五步：sheyingxinshang.htm頁面設(shè)計(jì).松開鼠標(biāo)左鍵，點(diǎn)擊右鍵，運(yùn)轉(zhuǎn)“表格合并單元格命令，兩個(gè)單元格就合并成一個(gè)了，如圖30所示。圖30 合并單元格后的表格 第五步：sheyingxinshang.htm頁面設(shè)計(jì).按照同樣的步驟，合并左下角兩個(gè)單元格，合并后的表格如圖31所示。 圖31 合并單元格后的表格 第五步：sheyingxinshang.htm頁面設(shè)計(jì).然后

15、，經(jīng)過拖動表格，調(diào)整表格到適宜大小，一切單元格的對齊方式設(shè)置為程度和垂直均為居中對齊，單元格的屬性面板如圖32所示。 圖32 單元格屬性設(shè)置面板 第五步：sheyingxinshang.htm頁面設(shè)計(jì).下面為了表達(dá)方便，用單元格x,y表示第x行，第y列的單元格。在單元格1，2，1，3，2，2，2，3中插入人體藝術(shù)圖片7_1286.jpg，7_1289.jpg，7_1311.jpg，7_1287.jpg。在單元格4，2，4，3，5，2，5，3中插入風(fēng)景圖片12.jpg，20.jpg，04.jpg，11.jpg。左上角單元格中輸入“人體藝術(shù)欣賞，左下角單元格中輸入“風(fēng)景圖片欣賞，都是每行一個(gè)字。最

16、后攝影欣賞頁面的效果如圖33所示。第五步：sheyingxinshang.htm頁面設(shè)計(jì).圖33 sheyingxinshang.htm效果圖第五步：sheyingxinshang.htm頁面設(shè)計(jì).第六步：youqinglianjie.htm頁面設(shè)計(jì)該頁面包含斐斐搜集的一些有用的鏈接，協(xié)助閱讀用戶根據(jù)需求，進(jìn)入適宜的網(wǎng)站，為了使鏈接陳列整齊，查找方便，依然需求借用表格進(jìn)展排版和定位。首先運(yùn)轉(zhuǎn)“插入表格 或者點(diǎn)工具欄上的 彈出表格屬性設(shè)置對話框，如圖34所示。.圖34 表格插入對話框第六步：youqinglianjie.htm頁面設(shè)計(jì).表格插入后，如圖35所示。圖35 插入后的表格 設(shè)置表格對齊

17、方式為居中對齊，邊框?yàn)?，表格屬性面板如圖36所示。圖36 表格屬性設(shè)置面板第六步：youqinglianjie.htm頁面設(shè)計(jì).好像攝影欣賞中合并單元格的步驟，合并單元格1，1，單元格2，1，單元格3，1為一個(gè)單元格，合并單元格4，1，單元格5，1，單元格6，1為一個(gè)單元格，合并單元格7，1，單元格8，1，單元格9，1為一個(gè)單元格。用鼠標(biāo)拖動表格到適宜大小，如圖37所示。第六步：youqinglianjie.htm頁面設(shè)計(jì).圖37 合并單元格后的表格第六步：youqinglianjie.htm頁面設(shè)計(jì).在左上角單元格中輸入“門戶網(wǎng)站，左邊中間單元格中輸入“專業(yè)網(wǎng)站，左下角單元格中輸入“其他，

18、每字一行，單元格程度和垂直對齊方式均為居中對齊；在單元格1，2，單元格2，2，單元格3，2，單元格4，2，單元格5，2，單元格6，2，單元格7，2，單元格8，2，單元格9，2中分別輸入文字“新浪網(wǎng)，“網(wǎng)易，“搜狐，“中國設(shè)計(jì)網(wǎng)，“設(shè)計(jì)在線，“視覺中國，“天涯論壇，“網(wǎng)易郵箱，“CSDN論壇，單元格程度對齊方式均為左對齊，相應(yīng)的鏈接分別為httpsina/，163/，sohu/，cndgn/，dolcn/，chinavisual/，tianyaclub/，mail.163/，/第六步：youqinglianjie.htm頁面設(shè)計(jì).為了讓閱讀用戶在進(jìn)入每個(gè)鏈接之前，就能知道每個(gè)鏈接的大體信息，所以有必要在每個(gè)鏈接上面加上一些解釋性文字，可以經(jīng)過層來實(shí)現(xiàn)這個(gè)功能。在本實(shí)例中，我們給每個(gè)鏈接都加上了一段解釋性文字，以“新浪網(wǎng)為例闡明如下：第六