網頁設計與制作_第04章_頁面設計.ppt

頁面設計 南海學院計算機系制作 2 網頁的風格1 搜狐 的主頁的內容很豐富 色彩鮮艷并有許多大幅廣告和浮動廣告欄 3 網頁的風格2 微軟中國的主頁 內容比較專一 內容非常有條理 欄目突出 沒有凌亂的感覺 4 網頁的風格3 黑白音樂 是一個個人主頁 它看起來更簡單 色彩也不夠豐富 但感覺非常清新 5 本章要點 設置網頁屬性頁面布局使用框架布局層的使用使用CSSCSS屬性 6 網頁標題 如果文檔工具欄沒有顯示 使用菜單 查看 工具 文檔 可打開其顯示 7 頁面設置 1 外觀2 鏈接3 標題4 標題 編碼5 跟蹤圖像 8 文件頭設置 1 METAMETA設置自定義的一組網頁屬性的描述 2 關鍵字關鍵字設置網頁網站的一組關鍵字 許多搜索引擎和網站關聯性統計是通過關鍵字搜索網頁的 3 描述設置對網頁的一些描述 一般是網頁內容的概述 供其它開發(fā)者參考 9 4 刷新刷新定義網也調入后延遲一段時間的動作 5 基礎設置網頁的基準地址 6 鏈接鏈接用于設置需要鏈接的CSS等外部文件的地址和類型 文件頭設置 10 網頁布局實例1 11 網頁布局實例2 12 網頁布局實例3 標題正文型結構的頂端是網站標識和標題 下面是網頁正文 內容非常簡單 13 網頁布局實例4 14 網頁布局實例5 15 網頁布局實例6 16 網頁的版面布局 1 確定顯示分辨率 2 版面布局的模式 1 T型結構布局 2 口型布局 3 三型布局 4 對稱對比布局 5 POP布局 17 畫出網頁布局草圖 18 表格布局 1個實例使用表格對課本74頁的網頁進行布局 19 操作步驟 1 插入一個3行1列的表格a a760 420邊框為0 填充 間距為0 對齊方式居中 2 在表格a的第3行插入1條水平線 寬度為70 居中 文字 3 在表格a的第1行中插入1個2行1列的表格b 寬度100 其余0 4 在表格b的第1行插入一個1行2列的表格c 寬度100 20 5 在表格b的第2行插入一個1行5列的表格d 寬度100 6 在表格a的第2行插入一個1行2列的表格e 寬度100 7 在表格e的第1列插入一個2行1列的表格f 寬度100 8 在表格e的第2列插入一個2行1列的表格g 寬度100 9 在表格g的第2行插入一個1行3列的表格h 寬度100 21 使用擴展模式布局 在工具欄上單擊擴展表格模式按鈕 既可切換到 擴展表格模式 擴展模式下并不是所見即所得的效果 最好不要在單元格中添加內容 只進行頁面設計操作 22 使用布局模式布局 用表格布局的頁面 往往給人一種過于整齊的排列效果 而使用 布局模式 則可以是網頁中的元素快速 靈活地定位 在 插入 工具欄單擊 布局 按鈕 進入布局模式 23 使用布局模式布局 繪制布局表格繪制布局單元格 24 使用框架布局 一個實例 25 框架與框架集的概念 單個框架是指在網頁上定義的一個區(qū)域 而框架集則記錄了同一網頁上多個框架的布局 鏈接和屬性信息 利用框架可以把瀏覽器窗口劃分為多個區(qū)域 每個區(qū)域可以添加任意網頁元素 也可分別顯示不同的網頁 框架集與框架之間的關系是包含與被包含的關系 多個框架就組成了框架集 框架集包含了框架1 框架2和框架3共3個框架 26 框架與框架集的概念 用框架布局網頁時有如下的技巧和規(guī)則 創(chuàng)建好框架或框架集后可對其屬性進行設置 每個框架就是不同的HTML網頁 我們需要分別保存每個框架文件和框架集文件 確保文件中的每個鏈接都正確 27 使用框架布局 框架集網頁 1 創(chuàng)建一個新的框架集網頁 創(chuàng)建框架網頁前先要讓框架邊框顯示 在 文檔 工具欄的最右邊單擊視圖選項按鈕 在彈出的菜單中選擇 可視化助理 框架邊框 使得框架邊框被選中 28 創(chuàng)建一個新的框架集網頁的方法保存設置框架集編輯框架結構 29 父框架和子框架 該圖的框架就是先分成上下框架 再把下框架分成左右框架 一般把下框架稱為左右框架的父框架 則左右框架是下框架的子框架 右下框架占最大的區(qū)域 用來顯示主要的網頁內容 稱為主框架 30 設置框架與框架集的屬性 設置框架屬性設置框架集屬性 31 設置框架屬性 框架名稱 文本框 源文件 文本框 滾動 下拉列表框復選框 邊框 下拉列表框 邊框顏色 下拉列表框 邊界寬度 文本框 邊界高度 文本框 32 設置框架集屬性 選擇需設置屬性的框架集 框架集 屬性 面板中各設置參數含義和框架 屬性 面板中的基本相同 不同的是在 行 或 列 文本框中可設置框架的行或列的寬度 在 單位 下拉列表框中選擇單位后即可輸入所需數值 33 框架鏈接的目標 1 設置網頁元素的鏈接目標 2 設置網頁的缺省顯示區(qū)域 blank 打開一個新窗口顯示目標網頁 parent 目標網頁的內容在父框架窗口中顯示 self 目標網頁的內容在當前所在框架窗口中顯示 top 目標網頁的內容在最頂層框架窗口中顯示 使用菜單 插入 HTML 文件頭標簽 基礎 打開 基礎 對話框 在目標中可選擇此網頁中超鏈接的默認顯示窗口 Href中設置默認查找的網絡路徑 34 一個實例 利用框架為 書香盈袖 網頁布局頁面 并為其添加網頁元素 35 36 層的使用 在網頁中插入層 1 新建一個層 1 打開要創(chuàng)建層的網頁 2 將 插入 工具欄切換到 布局 模式 3 單擊描繪層按鈕 鼠標移動到編輯窗口時變成十字形狀 可以在網頁中的任意位置拖動繪制一個層的邊框 4 在層的邊框中可以插入各種網頁元素 如文字 圖片 表格等 37 層的基本操作 對層可進行選擇 移動 調整大小和對齊等操作 這些操作大多數都可在 層 面板中進行 38 層的基本操作 顯示 層 面板層的選擇層的拖動層的對齊層的大小調整應用舉例 利用層布局頁面 39 顯示 層 面板 選擇 窗口 層 命令或按F2鍵顯示 層 面板 層 面板用于對層進行管理和操作 當前網頁中的層都會顯示在 層 面板的列表中 嵌套層以樹狀結構顯示 40 層的選擇 要對層進行操作和設置需先將其選擇 單個層和多個層的選擇方法不同 41 1 單個層的選擇 選擇單個層有如下幾種方法 單擊所需層的邊框 在 層 面板中單擊所需層的名稱 按住Shift Ctrl鍵在所需層中單擊 選擇層后 在 層 面板中會以反白方式顯示該層名稱 42 2 多個層的選擇 選擇多個層可按住Shift鍵后依次在層中或層邊框上單擊 也可按住Shift鍵后依次在 層 面板中單擊層的名稱 43 層的拖動 選擇需移動的層 將光標移到層邊框上 按住鼠標左鍵將其拖動到需要的位置后釋放鼠標即可 44 層的對齊 在設計網頁過程中經常需要將層對齊 對齊層的操作比較簡單 選擇需對齊的層 選擇 修改 對齊 菜單中的相應子命令即可 層的對齊有左對齊 右對齊 對齊上緣 對齊下緣幾種方式 45 層的大小調整 在網頁制作過程中 通常創(chuàng)建的層大小都不符合要求 需對其進行大小的調整 單個層和多個層調整大小的方法不相同 46 單個層的大小調整 調整單個層大小只需進行如下任一操作即可 選擇層 在 屬性 面板的 寬 高 文本框中輸入所需的寬度和高度值 再按Enter鍵 將光標移至層的邊緣 將其拖動到所需大小后釋放鼠標 按住Ctrl鍵再按鍵盤上的方向鍵 可以移動層的右邊框和下邊框 每次調整1個像素的大小 按住Shift Ctrl鍵的同時再按鍵盤上的方向鍵可每次調整10個像素的大小 47 多個層的大小調整 選擇需調整大小的多個層 然后選擇 修改 對齊 菜單中的 設成寬度相同 或 設成高度相同 命令 則所有選擇的層將設置為最后選擇層的寬度或高度 也可在 屬性 面板的 寬 高 文本框中輸入所需的寬度和高度值 再按Enter鍵 選擇的所有層將調整為設定的大小 48 設置層的屬性 在網頁中的層的邊框上單擊可選中這個層 設置其屬性 拖動邊框上的8個控制點可改變層的大小 將鼠標放在層邊框上除控制點的其他位置 此時鼠標變成十字箭頭形狀 拖動鼠標可移動層的位置 49 層的疊加和嵌套 1 層的疊加 使用菜單 窗口 層 打開層面板組 2 層的嵌套 在一個已有的層中描繪新層時按住 Alt 鍵可繪制現有層的嵌套層 如果不按住 Alt 鍵繪制的是連個重疊的層 在層面板中按住 Ctrl 鍵將一個層拖動到層列表的另一個層上 可將其變?yōu)楹笳叩淖訉?50 層與表格的互相轉換 1 將層轉換成表格 選中要轉換的層 使用菜單 修改 轉換 層到表格 打開轉換層為表格對話框 2 將表格轉換成層 選中要轉換為層的表格 使用菜單 修改 轉換 表格到層 打開轉換表格為層對話框 51 使用層實現圖文混排1 使光標出現在編輯區(qū)中 移動鼠標指針到 插入 面板的 常用 選項卡中 單擊描繪層按鈕 在網頁編輯區(qū)中拖動鼠標 畫出一個區(qū)域 該區(qū)域即為插入層的大小 注意 每插入一個新層 在網頁頂端就會增加一個層標記 52 使用層實現圖文混排2 重復上述操作 再次插入兩個新層 這樣在該單元格中共插入三個層 我們將圖片移到在左上方的層中 文字移到右上方和下面的層中 單擊該標記可以選中其所對應的層 單擊層的外圍框線 選中層 將鼠標指針移動到框線上 拖動鼠標 更改層的大小為圖像大小 調整文字的字號和字體 以及層的位置 實現圖文混排 53 使用CSS CSS基礎 1 什么是CSS CSS CascadingStylesheet 是1996年出現的有關網頁制作的技術 中文叫做級聯風格頁或層疊樣式表 使用CSS定義的網頁風格可以控制HTML語言標志的一些諸如字體 邊框 顏色與背景等屬性 也可以通過定義外部風格文件實現整個網站頁面風格的統一 54 CSS的作用 1 將格式和結構分離 2 更容易控制頁面的布局 3 可以制作出體積更小下載更快的網頁 4 可以更快更容易地維護及更新大量的網頁 5 良好的瀏覽器兼容性 55 編輯 首選參數 常規(guī) 使用CSS實例1第一段文字大小24 顏色紅色 第2段文字設置為大小12 顏色綠色 加粗 選中第3段文字 大小style1選中第4段文字 大小style2對style1進行重命名 名稱為redbig試刪除一個樣式選中一個樣式 將其加上背景 56 CSS代碼將試圖切換到代碼狀態(tài) 認識 CSS樣式 面板選擇 窗口 CSS樣式 命令可在浮動面板組打開 CSS樣式 面板 57 新建樣式 1 新建樣式 1 在屬性面板樣式的樣式菜單中選擇 管理樣式 在打開的編輯樣式表對話框中單擊 新建 按鈕 2 使用菜單 文本 CSS樣式 新建 3 使用菜單 文本 CSS樣式 管理樣式 在打開的編輯樣式表對話框中單擊 新建 按鈕 4 使用菜單 窗口 CSS樣式 打開 設計 面板組中的 CSS樣式 面板 單擊下面的新建CSS樣式按鈕 5 在編輯窗口中單擊右鍵 在彈出的菜單中選擇 CSS樣式 下的 管理樣式 或 新建 58 重定義標簽的外觀新建樣式 選擇器類型 標簽使用類定義樣式新建CSS樣式 選擇器類型 類使用偽類定義超級鏈接的樣式新建CSS樣式 選擇器類型 高級a link a visited a hover a active 59 實例2將超級鏈接文字的樣式設置為 超級鏈接文字無下劃線 鼠標移過時出現下劃線 訪問過的超級鏈接文字與超級鏈接文字樣式相同 60 使用ID定義樣式新建CSS樣式 選擇器類型 高級 ID 61 附加樣式表文件樣式定義代碼的3種存放方式 存放在HTML標簽的屬性中 如 存放在文件頭的 標簽的 存放在一個外部文件中 這個文件稱作樣式表文件 62 保存起來的樣式表文件可以應用到任意網頁中 執(zhí)行 鏈接 直接鏈接到外部樣式表文件導入 將外部樣式表文件導入到當前網頁的頭部 63 使用內置的CSS樣式 DreamweaverMX2004提供了方便的CSS屬性操作和應用功能的同時 還提供了大量現成的CSS應用模板 可以在制作網頁時直接使用 64 CSS網頁文件 新建 頁面設計CSS 65 CSS文件模板文件 新建 CSS樣式表 66 設置CSS屬性 使用樣式屬性對話框通過管理或新建樣式使用面板組執(zhí)行窗口 CSS樣式使用窗口 標簽檢查器 CSS屬性面板CSS屬性面板可以設置樣式面板中的8類屬性 67 CSS屬性 類型 1 字體 font family 2 大小 font size 3 粗細 font weight 4 樣式 font style 5 變量 6 行高 line height 7 大小寫 text transform 8 顏色 color 9 修飾 text decoration 68 背景 1 背景顏色 background color 2 背景圖像 background image 3 重復 background repeat 4 附件 background attachment 5 背景圖片位置 background position 69 區(qū)塊 1 字母間距 letter spacing 2 字詞間距 word spacing 3 垂直對齊 vertical align 4 文本對齊 text align 5 文本縮進 text indent 6 空格 white space 7 顯示 display 70 方框 1 寬 width 和高 height 2 漂浮 float 和清除 clear 3 填充 padding 4 邊界 margin 71 邊框 1 樣式 border style 2 寬度 border width 3 邊框顏色 border color 列表 1 類型 list style type 2 項目符號圖像 list style image 3 位置 list style position 72 定位 定位屬性包括類型 溢出 Z軸 寬 高 位置 剪輯的等 其作用和前面介紹的層的定義相同 事實上 在對層的屬性進行定義時 就是在層代碼行中加入了CSS代碼 73 實例3 采用絕對定位 指定元素blockDiv距離窗口左邊180px 頂部50px花生 74 擴展 1 分頁 page break 2 光標