網頁設計筆記

網頁設計進階筆記

作業練習

【作業01】html-css基礎概念練習-歌詞篇

歌詞範例

基本的網頁是由HTML與CSS所組成,『HTML負責建構網頁的基本架構』『CSS專門負責美化網頁的任務』

希望大家在進入Dreamweaver之前,能夠先對html與css有基礎的概念,所以我們的第一個網頁先由單純的html與css出發,希望大家回去能反覆練習,自己寫出html及css語法的簡單網頁,這樣未來在做網頁的時候,能更如虎添翼,舉一反三了! Let's go!!!大家一起加油吧!!!!

準備:

  1. 兩首歌的歌詞,以文字檔形式儲存。
  2. 針對歌詞所傳達之情緒,以配色設定整體版面意境。

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

  1. 步驟一:網站基本架構認識
  2. 先認識網網站的基本架構,看得到的部分body中:包含header(頂部表頭資訊)、main(主要內容)、footer(頁尾版權與聯絡資訊)。以及看不到的head中的標頭資訊設定。以下以架構圖來說明:


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


  5. 步驟三:開新檔案並儲存檔案
    • 於桌面建立一以 『 hw01-學號 』命名的資料夾
    • 開新檔案→選擇html形式→命名為index.html儲存於資料夾內
    • 網頁命名原則(含檔案、圖片、資料夾):
      1.只能取半形的英文、數字、-(中線) 、_(底線)。
      2.絕對不能出現中文和全行字 。
      3.index為首頁的內定命名(會自動判別為首頁),依序為index.html、index.php等。
      4.所以有網頁檔案必須儲存於某一網站專屬資料夾內,資料夾請以學號命名,每一個作業請依序以: hw01-學號,為資料夾名稱,若有圖檔,請於網站資料夾內另開圖檔專屬資料夾( img 或 images )。
    • 兩首歌詞完成後如下圖所示:

  6. 步驟四:輸入你的第一個內容
  7. ✏html語法


  8. 步驟五:header標題與內容設定
  9. 加入header開始與結束標籤,使標題放在標頭內容裡。

    ✏html語法


  10. 步驟六:顯示完整語法,輸入titlea名稱
  11. 顯示完整語法,並在title處打入歌詞名稱。

    ✏html語法


  12. 步驟七:加入main主要內容標籤
  13. 加入main主要內容標籤,放置歌詞內容。

    ✏html語法

    沒有換行及段落語法,無法成段落。


  14. 步驟八:main段落與換行
  15. 加入br換行及p段落語法,使歌詞內容層次分明

    ✏html語法


  16. 步驟九:超連結設定/內部檔案與外部網址連結
  17. 在歌詞尾端,加入a超連結語法,此處是加入外別連結,並開新頁

    a 超連結設定,需搭配href,後面加上『外部連結網址』,target="_blank 為開啟新視窗


  18. 步驟十:nav導覽列
  19. 在header標籤中加入nav導覽列標籤,導覽列內容以項目清單標籤ul與li所組成,這是目前做常使用的導覽列寫法

    在導覽列中,加入a超連結語法,此處加入的是『內部檔案連結』,需要注意的連結路徑不能錯誤。


  20. 步驟十一:footer頁尾設定
  21. 在main標籤之後,加入footer標籤

    footer頁尾標籤,通常放置版權聲明、聯絡資訊等


  22. 步驟十二:歌詞一完整語法

  23. html語法

    CSS語法


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


  26. 教學影音
  27. (一)HTML CSS基礎概念練習一 html架構與內容建置

    https://youtu.be/Uq011dmJkv8

    (二)HTML-CSS基礎概念練習(二) css視覺設定解析

    https://youtu.be/sqEV6TSnxDw

    (三) HTML-CSS基礎概念練習(三) 完成兩個檔案連結

    https://youtu.be/OKn71NJHvEQ

作業連結區

  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. 期末作業範例