建立表格在DREAMWEAVERCS3编写HTML原始码.pptVIP

* * * * * * * * * * * * * * * * * * * * * * Dreamweaver CS3 與PHP5 MySQL資料庫網站實作 Chapter 04、網頁設計的基礎編輯速成 章節大崗 在DREAMWEAVER CS3編寫HTML原始碼 預覽編寫的HTML網頁的成果 設計易讀而美麗的網頁文字 不可或缺的網頁圖片 為文字及圖片加上超連結 建立表格 在DREAMWEAVER CS3編寫HTML原始碼 DREAMWEVER CS3預設的編輯模式為設計師模式，若希望在編輯網頁的過程插入HTML原始碼，則必須DREAMWEAVER CS3的編輯區域，切換編輯模式至「程式碼（Code）」。 點選「程式碼（Code）」。 在DREAMWEAVER CS3編寫HTML原始碼 「程式碼（Code）」編輯模式。 在DREAMWEAVER CS3編寫HTML原始碼 如果希望在編寫HTML原始碼的過程，能夠立即的看見輸出的結果，則可以在DREAMWEAVER CS3的編輯區域，切換編輯模式至「分割（Split）」模式。 點選「分割（Split）」。 在DREAMWEAVER CS3編寫HTML原始碼 「分割（Split）」編輯模式。 預覽編寫的HTML網頁的成果 當編寫HTML網頁後，若要在瀏覽器預覽輸出的結果時，則可以直接在DREAMWEAVER CS3編輯區域，點選 ? 圖示，並且直接在下拉式選單點選「預覽於IExplore」。 點選「預覽於IExplore」。 預覽編寫的HTML網頁的成果 執行預覽的參考畫面。 設計易讀而美麗的網頁文字 段落對齊、凸排與縮排 ：段落對齊不僅可以運用在文字段落上，表格、水平線、圖片…等物件都可以套用！ 設計易讀而美麗的網頁文字 項目清單與編號清單 ：為了讓瀏覽者能夠清楚並快速的掌握內容重點，會將內容條列顯示出來，我們可以在條列文字前面加上項目符號或編號讓瀏覽者更加清楚的看到。 設計易讀而美麗的網頁文字 插入特殊符號 ：我們有時候需要在網頁文字中使用一些特殊符號，例如版權符號 ?，這些特殊符號在 Dreameaver 視窗上方的「文字」工具列便可以找到。 不可或缺的網頁圖片 插入影像：要加入圖片之前，提醒各位先定義一個網站資料夾，這樣 Dreamweaver 才知道要把圖檔放到哪個位置 ( 因為圖檔若不在網站資料夾中，瀏覽時會發生連結問題 )，不要將網頁檔案放在網站資料夾外，並且一定要養成把圖檔集中放置的習慣，最好將網站的圖片全部放在網站資料夾下的 images 資料夾裡。 不可或缺的網頁圖片 插入影像預留位置：編輯網頁內容，有時圖檔尚未製作完成缺需要先排版時，你可以插入「影像預留位置」，讓網頁版面先空出一個範圍，待網頁版面排列出一個大致的輪廓時，將圖片製作完成後，直接取代影像預留位置，不影響版面配置。 不可或缺的網頁圖片 製作影像地圖：影像地圖是網頁超連結功能中最常見的技巧，可以在圖片中設定一個以上的連結，瀏覽者在圖片上的不同位置按下滑鼠左鍵，連結到不同的地方。 不可或缺的網頁圖片 設定網頁背景圖片：雖然網頁背景圖片只是壓在網頁最底下的襯底，卻是不可或缺的角色。 不可或缺的網頁圖片 加入滑鼠指標變化圖片：「滑鼠變換影像」按鈕也是很常見的超連結應用，只要游標滑鼠移到網頁圖片上，便立即變化圖片，製造出按鈕的效果，在 Dreamweaver 中提供了簡單的介面來製作。 為文字及圖片加上超連結 指定目標視窗：如果網頁有切割頁框的設計，必須指定超連結連結開啟在哪個頁框中。刪除超連結的方法非常的簡單，只要選取其設定超連結的文字或圖片，然後直接刪除「屬性」檢視窗中「連結」欄位的 URL 即可。 為文字及圖片加上超連結 電子郵件超連結：電子郵件信箱超連結除了與網友互動外，對於商業網站來說是不可或缺的，不僅可以是瀏覽者提供意見的管道，還能提供產品服務，甚至週邊行銷活動…等等。一個網站可能會有好多個電子郵件信箱連結，在連結電子郵件超連結時設定「主旨」，這樣便可以輕鬆又清楚的將郵件分類！ 為文字及圖片加上超連結 連結到網頁特定位置 ：超連結裡還有個「錨點」功能，可以跳到同一網頁頁面中指定的位置，或是連結到其他網頁中指定的位置。 建立表格 編輯表格屬性：建立表格後，以游標滑鼠點選表格，可以從「屬性」檢視窗中各欄位的設定，亦可對表格列、欄、邊框、儲存格作調整，如：邊寬顏色、表格背景影像…等等。 建立表格 編輯儲存格屬性：儲存格也有屬性設定，只要將滑鼠游標移到儲存格內，就可以利用「屬性」檢視窗來更改其屬性，仔細對照下會發現與網頁文件的「屬性」檢視窗內容是相同的，這是因為儲存格中的空間就如同網頁空間編輯一樣，皆可以放置圖、文甚至表格等任何網頁元件，因此在儲存格中的編