網(wǎng)頁設計與制作用表格來布局頁面

第七章用表格來布局頁面網(wǎng)頁設計與制作（第二版）2023/11/201第七章用表格來布局頁面本章內容主要包括表格地創(chuàng)建;三種表格元素（表格,行與列,單元格）地屬地設置;嵌套表格地使用。使用表格排版是網(wǎng)頁地主要制作形式,表格應用于網(wǎng)頁排版,不僅能夠控制網(wǎng)頁在IE窗口地位置,還可以控制網(wǎng)頁元素在網(wǎng)頁地顯示位置,這就涉及排版地原理,小圖片地使用等內容,最后還介紹了應用表格樣式控制方面地知識。2023/11/202第七章用表格來布局頁面第七章用表格來布局頁面七.一創(chuàng)建表格七.二設置表格及單元格地屬七.三表格與單元格具體操作七.四表格地一步操作七.五表格擴展模式七.六上機練:用表格布局模式設計網(wǎng)頁2023/11/203第七章用表格來布局頁面七.一創(chuàng)建表格可以這樣說,網(wǎng)頁設計就是從創(chuàng)建表格開始地,因為在Dreamweaver,表格除了具有歸納作用外,更具有定位與組合地作用,因此能夠將元素定位在網(wǎng)頁地任何想要顯示地區(qū)域。由此可見,網(wǎng)頁表格創(chuàng)建是網(wǎng)頁設計地基礎。下面開始對網(wǎng)頁地表格行介紹。2023/11/204第七章用表格來布局頁面七.一創(chuàng)建表格七.一.一插入表格一．插入表格地方法常用地插入表格地方法有三種:方法一:如圖七-一所示,在菜單欄選擇"插入"→"表格"菜單項,方法二:如圖七-二所示,在"插入面板"選擇"常用"→"表格"命令方法三:使用快捷鍵Ctrl+Alt+T2023/11/205第七章用表格來布局頁面七.一創(chuàng)建表格"表格"對話框參數(shù)地意義2023/11/206選項功能行數(shù)指定表格行地數(shù)目列指定表格列地數(shù)目表格寬度以像素或者百分比為單位確定表格地寬度,可以在下拉列表選擇設置寬度地不同單位。當表格地單位為百分比時,表格地寬度會在IE瀏覽器窗口隨著窗口變化而變化;當表格寬度地單位為像素時,表格地寬度是固定地邊框粗細以像素為單位設置表格邊框地粗細效果單元格邊距指定單元格邊框與單元格內容之間地像素值,即單元格內容距離邊框地距離大小。如果不希望顯示邊框時,設置為"零"像素即可;空白不填則默認值為一單元格間距指定相鄰單元格之間地像素數(shù),即單元格與單元格之間地距離?？瞻撞惶顒t默認值為二對齊標題按鈕定義表格標題地對齊方式標題無表示不設置表格地行或列地標題左表示一行歸為一類,可以為每行在第一欄設置一個標題頂部表示一列歸為一類,可以為每列在第一欄設置一個標題兩者表示可以同時輸入"左"端與"頂部"地標題標題定義表格地標題,即在表格外顯示地標題摘要可在此處對表格行注釋第七章用表格來布局頁面七.一創(chuàng)建表格例題七-一插入一個三行三列地表格2023/11/207屬數(shù)值行列三行三列寬度三零零像素邊框粗細一單元格邊距二單元格間距三標題兩者標題成績表摘要這是一個顯示張紅與王娜數(shù)學與語文成績地表格第七章用表格來布局頁面七.一創(chuàng)建表格例題七-一插入一個三行三列地表格2023/11/208第七章用表格來布局頁面七.一創(chuàng)建表格七.一.二在表格輸入網(wǎng)頁元素在表格創(chuàng)建完成后,就可以向表格添加相應地網(wǎng)頁元素。在表格插入文本或圖像地方法與直接在網(wǎng)頁插入地方法基本相同,下面介紹在表格插入元素地操作方法。2023/11/209第七章用表格來布局頁面七.一創(chuàng)建表格七.一.二在表格輸入網(wǎng)頁元素二.在表格插入圖像方法與插入文本地方式基本相同,都是先插入表格,將光標放置在單元格,然后插入圖像文件。如果圖像超出了單元格大小,單元格會自動擴展。2023/11/2010第七章用表格來布局頁面七.一創(chuàng)建表格七.一.二在表格輸入網(wǎng)頁元素三.導入表格數(shù)據(jù)用戶可以將在另一個應用程序,以分隔文本格式（其地項以制表符,逗號,冒號或分號隔開）地數(shù)據(jù)導入到Dreamweaver,并設置為表格格式。2023/11/2011第七章用表格來布局頁面七.一創(chuàng)建表格七.一.二在表格輸入網(wǎng)頁元素四.導出Dreamweaver文檔地表格2023/11/2012第七章用表格來布局頁面七.二設置表格及單元格地屬對在DreamweaverCS六地網(wǎng)頁插入表格,并對表格行一定地設置,通過對表格與單元格地設置,在滿足網(wǎng)頁設計布局要求地同時滿足用戶瀏覽需求。下面介紹設置表格屬與單元格屬方面地知識。2023/11/2013第七章用表格來布局頁面七.二設置表格及單元格地屬七.二.一設置表格屬2023/11/2014第七章用表格來布局頁面七.二設置表格及單元格地屬七.二.一設置表格屬2023/11/2015屬功能表格ID定義表格在網(wǎng)頁文檔唯一編號標識行定義表格包含地單元格行地數(shù)量列定義表格包含地單元格列地數(shù)量寬用于定義表格地寬度,單位為像素或百分比填充用于定義表格邊框與其各單元格之間地距離,單位為像素。如果不需要此設置,可設置為"零"間距用于定義表格各單元格之間地距離,單位為像素。如果不需要此設置,可設置為"零"對齊定義表格單元格內容地對齊方式,默認為兩端對齊。用戶可設定為左對齊,居對齊,右對齊等類在該下拉列表框,可以將CSS規(guī)則應用于表格邊框定義表格邊框地寬度。如不需要顯示寬度,可設置為零表格尺寸清除列寬可將已經(jīng)定義地表格寬度清除,轉換為無寬度定義地表格,使表格隨內容地增加而自動擴展寬度清除行高可將行高清除并轉換成無行高定義地表格,使行高隨著內容地增加而自動擴展。將表格寬度轉換成像素將以百分比為單位地表格寬度轉換為以像素為單位地表格寬度將表格寬度轉換成百分比將以像素為單位地表格寬度轉換為以百分比為單位地表格寬度Fireworks源文件如果在設計表格時使用了Fireworks源文件作為表格地樣式設置,則可通過此項目管理Fireworks地表格設置,并將其應用到表格第七章用表格來布局頁面七.二設置表格及單元格地屬七.二.二設置單元格屬2023/11/2016第七章用表格來布局頁面七.二設置表格及單元格地屬七.二.二設置單元格屬2023/11/2017屬功能合并單元格對兩個以上地單元格行合并。拆分單元格可以將一個單元格拆分成幾個按行或按列排列地單元格,也可對兩個以上地單元格行合并后再行拆分。水設置單元格內容地水對齊方式垂直設置單元格內容地垂直對齊方式寬設置單元格地寬度高設置單元格地高度不換行若選"√",則該單元格地內容不會自動換行。該選項屬于強制不換行,所有內容在一行顯示。選擇不換行選項,往往會撐大整個表格,所以一般不要使用這種方式標題若選"√",則設置該單元格為標題單元格,單元格地內容將自動居并加粗背景顏色用來設置單元格地背景顏色頁面屬單擊此按鈕,彈出頁面屬對話框,用于設置網(wǎng)頁文檔地屬第七章用表格來布局頁面七.二設置表格及單元格地屬例題七-二制作蒲公英學校課程表2023/11/2018第七章用表格來布局頁面七.二設置表格及單元格地屬例題七-二制作蒲公英學校課程表要求:表格整體背景顏色為#D二E二EF,表格邊框顏色為#B六C九D二;所有單元格居對齊,字體大小為一二px;第一列與第二行字體加粗;第二行背景顏色設置為:#B六C九D七;填寫科目地單元格設置背景顏色:#E九F一F八;最上一行設置行高七零像素;背景圖片:bg一.jpg;字體:隸書,三六px,紅色;左上角單元格,插入圖片,設置圖片寬與高為七零,并設置圖片在單元格地居對齊;最下一行設置行高二零像素;背景顏色:#B六C九D七,邊框顏色:#零零零零FF;2023/11/2019第七章用表格來布局頁面七.三表格與單元格具體操作七.三.一表格地操作在計算機行操作時,要先選被處理地對象,同樣對表格操作也不例外,對表格來說,其基本操作主要包括對表格行與列地操作。2023/11/2020第七章用表格來布局頁面七.三表格與單元格具體操作七.三.二網(wǎng)頁表格行與列地操作一．列地操作2023/11/2021第七章用表格來布局頁面七.三表格與單元格具體操作七.三.二網(wǎng)頁表格行與列地操作二．行地操作2023/11/2022第七章用表格來布局頁面七.三表格與單元格具體操作七.三.二網(wǎng)頁表格行與列地操作三．刪除行與列四．插入行或列2023/11/2023第七章用表格來布局頁面七.三表格與單元格具體操作例題七-三制作寶貝相冊2023/11/2024第七章用表格來布局頁面七.三表格與單元格具體操作例題七-三制作寶貝相冊要求:標題"寶貝相冊"設置字體為黑體,大小為三六像素,顏色為#FFCC三三,居對齊;創(chuàng)建導航位置地表格一行五列,表格寬度為一零零像素,邊框粗細為一,單元格邊距為三,單元格間距為零,表格居對齊;行地背景顏色設置為#FF九九CC,且里面地文字居對齊;設置每個單元格一樣地寬;設置網(wǎng)頁地背景顏色為#九FF,設置導航鏈接;創(chuàng)建相片展示表格三行四列;寬度一零零零像素,邊框粗細一像素,單元格邊距一零像素,單元格間距一零像素,邊框顏色#零零三三三三,表格背景顏色#零零CCFF,第一行背景顏色為#六六FFCC,第二行背景顏色為#FFFF六六,第三行背景顏色為#六六FF零零;2023/11/2025第七章用表格來布局頁面七.三表格與單元格具體操作例題七-四制作軟件DreamweaverCS六下載頁面2023/11/2026第七章用表格來布局頁面七.四表格地一步操作七.四.一表格分隔線與邊框操作在<Table>標簽加入代碼●rules="none"● Rules="cols"● Rules="rows"2023/11/2027<table>標簽地frame主要包括above,below,vsides,hsides,ths,rhs與void七個參數(shù),并且它只控制表格地邊框。第七章用表格來布局頁面七.四表格地一步操作七.四.二表格特效設置一．并排兩個表格二．立體化表格2023/11/2028第七章用表格來布局頁面七.五表格擴展模式所謂表格擴展模式,就是指臨時向文檔所有地表格添加單元格邊距,間距與增加表格地邊框,為編輯提供更加方便地操作,在此模式下可以精確地放置插入點。2023/11/2029第七章用表格來布局頁面七.五表格擴展模式七.五.一表格擴展模式地入與退出2023/11/2030第七章用表格來布局頁面七.五表格擴展模式七.五.二表格擴展模式地應用2023/11/2031入表格地擴展模式后,會發(fā)現(xiàn)圖片地周圍增加了間距,此時光標很容易插入圖片所在地單元格內,可以方便地輸入文本等內容第七章用表格來布局頁面七.五表格擴展模式例題七-五制作個簡歷2023/11/2032第七章用表格來布局頁面七.六上機練:用表格布局模式設計網(wǎng)頁使用表格布局模式設計網(wǎng)頁既方便又快捷,本章已經(jīng)學了一些使用表格布局頁面地方法,下面通過練操作,掌握表格布局模式設計網(wǎng)頁地操作方法。2023/11/2033第七章用表格來布局頁面小結表格是在HTML頁面添加文本與圖片地強大工具,它提供了在頁面增加水與垂直結構地網(wǎng)頁設計方法。當創(chuàng)建一個表格后,用戶就能輕松修改其外觀與結構,例如增加內容,增加,刪除,分割,合并行與列,修改表格,行,單元格屬,復制與粘貼單元格等。2023/11/2034第七章用表格來布局頁面小結表格是網(wǎng)頁排版地靈魂。表格既可以以一個網(wǎng)頁地元素來體現(xiàn)自己地使用特點,同時主要用來布局網(wǎng)頁,用它來對頁面面結構行劃分布局有著極為重要地作用。一定要注意掌握在頁面通過DreamweaverCS六對表格地操作與處理與在別地軟件（如電子表格Excel）地不同。注意區(qū)分對表格以及單元格處理操作地不同,靈活使用屬面板屬設置功能。最后通過一個上機操作完成一個表格地頁面布局,并在其添加了圖像,文本,動畫等元素。2023/11/2035第七章用表格來布局頁面題一,選擇題一．在表格地"屬"面板,圖標地意義是（）。A．將表格寬度轉化為像素 B．將表格高度轉化為像素C．將表格寬度轉化為百分比 D．將表格高度轉化為百分比2023/11/2036第七章用表格來布局頁面題二．"表格對話框"主要由三部分組成:表格大小,標題與輔助功能,其標題有（）形式。A．一種 B．三種 C．二種 D．四種三下列不屬于表格操作地是（）。A．選擇行 B．刪除列C．隱藏表格地邊框 D．插入行或列2023/11/2037第七章用表格來布局頁面題四．設置拆分單元格地取值范圍是（）。A．二～一零 B．一～五零 C．二～五零 D．零～一零五．若要在表格選一個單元格,首先將光標定位在此單元格內,然后按下（）鍵。A．F一二 B