網頁設計筆記

網頁設計進階筆記

作業練習

【作業02】header/nav/LOGO設計與導覽列設定/main/table

作業02範例。 。期中作業範例

本單元是期中作業的前置階段,主要設定header中的LOGO設計與導覽列設定,以及main區塊內table表格的基本設定

準備:

  1. 設計一一頁式網頁(OnePage),自行設定主題,針對內容,設定配色及相關風格。
  2. 準備圖與文,需要設計logo、視覺主圖、以及其他頁面內容需要的圖文資料,需要原創或取得授權。
  3. footer請設定個人的專屬版權聲明,並註明『本網頁為作業之用,如有侵權敬請告知』字樣。

學習目標

  1. header/nav/LOGO設計與導覽列設定
  2. main主圖的設定
  3. 表格的設定
  4. article的設定
  5. 錨點連結
  6. footer版權說明設定

【作業二】步驟與學習重點:

  1. 網站基本架構認識
  2. 先認識網網站的基本架構。以下分別就是視覺圖及架構圖來說明:


  3. 步驟一:開新檔案/建立作業二資料夾與新增index.html
  4. 本次練習共有一個html檔案,一個css檔案,一個放置圖檔的資料夾,分別命名為:
    index.html、style.css以及命名為img的資料夾,皆放置於hw02-學號的資料夾內。
    網頁作品相關檔案,皆需放置於同一資料夾內


  5. 步驟二:認識head表頭資訊設定
  6. 用來作為網頁的描述,不會出現在網頁內容頁。

    網頁資料html語法/放置於html最前端


  7. 步驟三:於header置入LOGO圖檔
  8. 網頁內容body最開始,放置自己設計的logo圖檔,請自行設計LOGO圖檔,存成png格式,記得儲存英文檔名,寬度設定約300-400px間,可適當調整大小。
    加入圖片的語法,也可以簡化為

    html語法


  9. 步驟四:導覽列設定/錨點連結
  10. ✱透過CSS,以清單 ul 及 li 製作網頁導覽列

    導覽列對於網頁設計來說,是一個非常重要的部分,敘述網站的導覽架構,並讓瀏覽者一眼看到並能認知到是可點選的導覽按鈕。 在整個網頁設計中,肩負著重要資訊的描述以及視覺注視的任務,不能搶過主要的視覺焦點,卻要能醒目及兼具設計質感,達到網頁設計的平衡。
    以往許多類似的做法,有用表格table製作,或用圖片製作,各有其優缺點: 以表格製作雖然看似架構簡單,但表格本身實際內容複雜(包含TR TD),以CSS設定會更為繁瑣。 以圖片來製作雖然變化較多,但修改不易(例如只是修改文字內容,整張圖片或一組圖片就需重作)。
    ★以清單 ul 及 li 製作網頁導覽列則是目前設計的趨勢,既簡潔又富設計感,修改也容易。例如修改按鈕的背景顏色只需在CSS中作一次的設定,但圖片則要整組重作(有時數目可能非常多)

    範例
    1.透過CSS,以項目清單製作網頁導覽列
    (1).滑入僅文字變色的導覽列
    (2).滑入底色變色及文字置中的導覽列
    (3).無底色,僅文字變色的導覽列(本範例)
    2.以圖片按鈕製作的導覽列
    圖片導覽列

    本範例導覽列html語法


  11. 步驟五:導覽列設定/錨點連結/CSS設定
  12. 因為nav以class(類別)命名為navigation,類別在css裡,前面會以 . 呈現。
    .navigation ul 代表導覽列整體設定
    .navigation ul li 代表導覽列各別文字按鈕設定
    .navigation ul li a 代表導覽列各別文字按鈕的超連結效果設定
    .navigation ul li a:hover 代表導覽列各別文字按鈕的超連結滑鼠滑過效果設定

    導覽列CSS語法


  13. 步驟六:視覺主圖設定
  14. 加入main標籤,設定主要內容,並在開頭,放置一視覺主圖,尺寸設定為width="1800" height="600",可大於但不要小於1800px,高度可自行設定
    並以class類別命名為mainvisual的div包覆起來,以方便設定CSS:div class="mainvisual"

    ✏視覺主圖html語法


  15. 步驟七:視覺主圖CSS設定
  16. 以class類別命名為mainvisual的div包覆起來,類別在css裡,前面會以 . 呈現。

    ✏視覺主圖CSS語法


  17. 步驟八:訊息公告/article區塊設定
  18. article是HTML 5 的新標籤。article元素可用於表示頁面上某塊具有一定獨立性的內容,這個內容可以是一篇文章、論壇上的一個帖子/評論、一篇部落格等。
    在本範例,接下來的單元分類將以article作區塊分類,每一個區塊皆以id命名
    緊接著視覺主圖後面,加入article區塊,設定最新消息區

    ✏article區塊設定html語法


  19. 步驟九:訊息公告/article區塊CSS設定
  20. ✏article區塊CSS語法


  21. 步驟十:訊息公告/表格設定
  22. 表格是網頁中常出現的元素,在傳統的網頁設計中表格除了有整理資料的功能外,還常被使用為整個頁面排版的工具,但是在CSS逐步展開WEB標準設定後,表格逐漸不再擔任重要的版面配置任務,而以DIV取代,但表格仍然在整理資料上,扮演重要的角色,本單元也以CSS搭配表格,講述如何以表格整理資料,並同時展現美感的部分,包含:色彩、標題、邊框、背景等。

    表格
    標籤 屬性及說明
    < table > < /table > 表格:< table >是用來標示表格的開頭和結尾。包含許多屬性,可用來設定整張表格的格式,以下是這些屬性的簡介:
    • align:用以設定表格相對於視窗的水平位置
    • border:指定表格外框線的寬度
    • cellpadding:用以指定儲存格內,文字與框線之間的距離
    • cellspacing:用以指定表格內框線(儲存格與儲存格之間)的寬度
    • width:表格的寬度,以像素值或視窗百分比為單位
    • bgcolor:用以設定表格的背景顏色
    < caption > < /caption >
    • 表格標題:< caption > 標籤定義表格的標題。
    • < caption > 標籤必須直接放置到< table > 標籤之後。
    • 每個表格只能規定一個標題。
    • 通常標題會居中顯示在表格上方
    < tr > < /tr > < tr >標籤是用以指示瀏覽器將文字顯示為一行表格列
    < td > < /td > < td >代表表格資料(Table Data),用以指定表格內某一儲存格的內容
    < th > < /th >
    • < th > 定義HTML表格中的表頭單元格。
    • th 元素中的文本呈現為粗體並且居中
    • td 元素中的文本是普通的左對齊文本。

    表格各部分示意圖
    表格示意範例



    ✏本範例完整表格html語法


  23. 步驟十一:訊息公告/表格CSS設定
  24. ✏本範例表格CSS語法


  25. 步驟十二:footer頁尾設定
  26. 在main標籤之後,加入footer標籤

    footer頁尾標籤,通常放置版權聲明、聯絡資訊等,如有使用其他網站之圖文請取得授權,並註明如有侵權敬請告知等字樣。
    並於頁尾設定為到首頁的文字按鈕連結

    ✏頁尾html語法


  27. 步驟十三:本範例完整語法

  28. html語法

    CSS語法


  29. 步驟十三:CSS語法解析
  30. 請參照完整CSS語法,並對照CSS筆記之CSS屬性表


  31. 教學影音
  32. (一)【作業02解析】(一) header/nav/LOGO設計與導覽列設定/main/table-初步設定 https://youtu.be/gGTm3UYMzqE


    (二)【作業02解析】(二)header/nav/LOGO設計與導覽列/MAIN視覺主題設定 https://youtu.be/sMvXYqIzhjI


    (三)【作業02解析】(三)輯/區塊單元article區塊/table表格設定 https://youtu.be/sMvXYqIzhjI


作業連結區

  1. 【作業00】網頁設計課前準備與基本認識
    A班。 。B班
  2. 【作業01】html-css基礎概念練習-歌詞篇/基本架構/換行/標題/超連結
    歌詞範例107-2A班作業連結。 。107-2B班作業連結
  3. 【作業02】header/nav/LOGO設計與導覽列設定/main/table
  4. 範例。 。A班。 。B班
  5. 【期中作業】onepage/main/article/section/圖文編排區塊單元/錨點連結/
  6. 期中作業範例。 。A班。 。B班
  7. 【作業03】期末作業首頁設計/table練習/圖文編輯
  8. 範例。 。A班。 。B班
  9. 【作業04】次頁設計/圖文列表練習
  10. 範例
  11. 【期末作業】多頁專題網站設計
  12. 期末作業範例