[12th 鐵人賽] 從響應式的那個東西說起 Day 6 Sep 20, 2020 6 min read RWDAWDMedia QueryITHome鐵人賽2020 很久很久以前 想當年 Photoshop 可以把圖片輸出成網頁用的東西的時候,你會發現有兩種模式,
[12th 鐵人賽] 從內容開始看格線系統 Day 5 Sep 19, 2020 10 min read CSSMedia QueryITHome鐵人賽2020Grid LayoutGrid System 內容為王 > 如果以現在的趨勢來看,應該叫「廣告為王」。 當然我不會設計,所以也就不會設計廣告。網站主要的目的,是要傳達內容,所以關於文件流、斷點、區塊設計這些事情,在整個版面上才會這麼重要。至於你說那些內容農場,基本上都屬於廣告為王的範疇,我就不討論了。如果對於文件設計很有經驗的人,基本上可以跳過這一天沒有關係。 那麼,由於設計我不會,那這邊還是有幾件事情可以跟各位前端工程師分享。主要的前置作業,我們還是會回到前幾天所說的,與 viewport, @media 跟基本格線系統有關。 * viewport 能不能改? * @media 怎麼設計? * 那個 rem 單位設計。
[12th 鐵人賽] 給我一個 Box Day 4 Sep 18, 2020 6 min read ITHome鐵人賽Media QueryGrid LayoutGrid System 區塊 我們在開天闢地的時候,網頁就是從區塊開始。 這三個屬於比較基本的切分方式,接著比較複雜的東西由 來呈現。通常在 裡面,比較時髦一點的網頁我們稱之為 SPA( Single-page application [https://en.wikipedia.org/wiki/Single-page_application] ),裡面就會有更多的區塊,包含內容、內容、內容、內容還是內容。 通常,一開始會有一個主視覺,可能會像是這個樣子, Hello World Read Now Read Later By: Hina Chen [12th 鐵人賽] 我是誰,我在哪裡 Day 3 Sep 17, 2020 10 min read 2020ITHomeGrid LayoutGrid System鐵人賽 回到未來 網頁在很久很久以前,是使用 HTML 來製作的,約莫過了 20 幾個年頭 [https://en.wikipedia.org/wiki/HTML] ,現在的網頁還是 HTML 製作的。只是版本號的推演進度比較慢,目前來到 HTML5 [https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5] [12th 鐵人賽] 那個網頁設計 Day 2 Sep 16, 2020 6 min read ITHome鐵人賽2020Media QueryGrid LayoutGrid System 網頁有什麼 粗略上來看,目前市面上瀏覽器打開的那個「畫面」,就屬於我們俗稱的「網頁」或是「網站」。而且不難發現每次去到各種網站,最常見的大概就是廣告。上方廣告橫幅、下方廣告橫幅、蓋版廣告、文章內容背景捲動廣告、看影片先看 10 秒廣告、Download 本身是廣告(下載按鈕在下面用小字)、點站外連結先幫你檢查(看)是(一)否(下)是(聯)惡(播)意(網)連( Newer Posts Page 9 of 16 Older Posts
[12th 鐵人賽] 我是誰,我在哪裡 Day 3 Sep 17, 2020 10 min read 2020ITHomeGrid LayoutGrid System鐵人賽 回到未來 網頁在很久很久以前,是使用 HTML 來製作的,約莫過了 20 幾個年頭 [https://en.wikipedia.org/wiki/HTML] ,現在的網頁還是 HTML 製作的。只是版本號的推演進度比較慢,目前來到 HTML5 [https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5]
[12th 鐵人賽] 那個網頁設計 Day 2 Sep 16, 2020 6 min read ITHome鐵人賽2020Media QueryGrid LayoutGrid System 網頁有什麼 粗略上來看,目前市面上瀏覽器打開的那個「畫面」,就屬於我們俗稱的「網頁」或是「網站」。而且不難發現每次去到各種網站,最常見的大概就是廣告。上方廣告橫幅、下方廣告橫幅、蓋版廣告、文章內容背景捲動廣告、看影片先看 10 秒廣告、Download 本身是廣告(下載按鈕在下面用小字)、點站外連結先幫你檢查(看)是(一)否(下)是(聯)惡(播)意(網)連(