搜尋
Close this search box.

03_[實作]設計「首頁」版型與內容

索引
全文

前言

學習頁面設計的最好方式,就是拿一個網站來「模仿」,有人手把手帶你從首頁開始,把每一頁都模仿做一遍,進步就很快,成效會很明顯且很有成就感。

首頁,有時候是最後才設計的,為何?因首頁一般會把其它各頁面的資料「摘要」一些置入首頁,以達到「入口頁」的作用,故有時候會等其它頁面完成後才來設計首頁。

模仿對象

準備工作

後台安裝免費圖庫外掛 : Instant Images

實作

第1區塊:Banner區 

▍ 使用元素工具 :

標題、內容編輯器。

▍ 設計提示 :

  • 容器:外層全寬100%,並替容器設定適當高度。
  • 背景圖 :挑選可左右滿版的大圖背景的寬度至少要3000px以上為佳。
  • 替元素加上載入動畫。

第2區塊:最新消息 

▍ 使用元素工具 :

標題、內容編輯器、分隔線、圖示列表。

▍ 設計提示 :

  • 容器: 切版起手式,外層全寬100%,內層80%,以做出左右留白。
  • 背景:大容器設定純白色背景。
  • 切版:從80%容器再切左右兩欄。
  • 最新消息標題:標題,用絕對定位讓它壓在框線上。
  • 最新消息內容:新手練習用純文字(內容編輯器),進階學習時用Post載入列表標題
  • 簡介標題:用分隔線做出標題+線條。
  • 簡介內容:用純文字(內容編輯器)。
  • 保證標題:用分隔線做出標題+線條。
  • 保證內容:用圖示列表
  • 背景文字:標題填上Interior Design ,再用絕對定位(用%控制)、z-index調-1。(新手覺得太難可略過)

第3區塊:服務項目與流程

▍ 使用元素工具 :

標題、分隔線、圖示、媒體輪播、內容編輯器、錨點

▍ 設計提示 :

  • 容器: 切版起手式,外層全寬100%,內層80%,以做出左右留白。
  • 背景:大容器設定淺灰色背景。
  • 切版:80%容器再製一個,則會有2個80%容器上下垂直排列。
  • (上)主要服務內容:用水平排列數個小容器,再置入圖示標題
  • (下)細切:從下方80%容器中再切左右兩欄, 左30%右70%。
  • 服務流程步驟:右邊會有兩個區塊,兩個區塊中各自再切小容器並置入標題內文編輯器(加上左框線)
  • 主選單錨點:加上「服務項目」的錨點連至本區塊。

第4區塊:精選案例

▍ 使用元素工具 :

標題、內容編輯器、媒體輪播、按鈕。

▍ 設計提示 :

  • 容器: 切版起手式,外層全寬100%,內層80%,以做出左右留白。
  • 背景:大容器設定白色背景。
  • 置入2個媒體輪播。
  • 按鈕:連結至「作品集」之頁面;加上陰影效果。

第5區塊:影片動畫

▍ 使用元素工具 :

內容編輯器、按鈕。

▍ 設計提示 :

  • 容器: 外層全寬100%,內層600px。
  • 外容器設「背景影片」(  youtube.com/watch?v=RkZSyUBu2xU  ) 。
  • 外容器設定垂直置底、水平靠右,即可把內容器置於右下角。
  • 內容器背景設置微透明黑色、弧角。
  • 內容器置入內容編輯器、按鈕。

第6區塊:心得見證

▍ 使用元素工具 :

標題、評分、內容編輯器、見證輪播。

▍ 設計提示 :

  • 容器: 切版起手式,外層全寬100%,內層80%,以做出左右留白。
  • 內層容器置入標題、評分、內容編輯器、見證輪播等元素。

第7區塊:常見問題

▍ 使用元素工具 :

標題、切換、按鈕。

▍ 設計提示 :

  • 容器: 切版起手式,外層全寬100%,內層80%,以做出左右留白。
  • 內層容器再切成左右兩欄。

總結

以上的實作,可以發現切版很重要,如果版型切不出想要的排列區塊,就無法置入元素,另也可以發現我們常用的元素工具就那幾個在交替,但只要運用得宜,就能排列出有質感、客製化的版型,就不必仰賴套版主題那種改不太動又不知怎麼改的瓶頸。

有問題嗎?歡迎於下方發問

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

下一首

每日登入可以累積學習幣!

Line的不良影響

我個人並不很喜歡用Line,因當我一句訊息回覆後,馬上對方又一句回來,如此往返下去則半小時、一小時就過去了,我無法專心工作,除非是正式諮詢或安排會議的討論,才適合這種模式

有時候對方的問題很多很雜,一傳就是十幾封訊息,這就是訊息轟詐了,我就不知從何回起,我就會只回最後一封的訊息。

有時候對方的問題很多還加上數張截圖,因Line無法條列式呈現,我也無法增加腦力去判斷哪張圖要對應哪則訊息,所以我就會只回最後一封的訊息。

另我不喜歡私人Line被直接來電,因我常常在國道開車需要導航,有時因加班在補眠,這些都會不良干擾。

不是正式會議的討論階段,請您用Email,Email可以條列方式呈現多則問題與截圖,也可以讓我先已讀後再慢慢思考怎樣回覆,避免我自己不小心已讀不回造成對方不佳的感受。🙏 - Wiktionary, the free dictionary

哈囉,在加Line好友之前請先確認一下幾點 :

1、若您是上課的學員或讀者,請直接用Email發問或在該篇文章留言發問,盡量不要直接加Line發問,因我平常很忙,無法守在Line前與您一句一句訊息對答,若每一期 + 每個學員都加Line課後詢問,我短時間內回不完這麼多訊息也會回得很慢喔 ,請見諒。(用Email發問,我會仔細條列說明,你會得到更完整的圖文回覆,甚至還會附上小影片解說。)
Email : [email protected]

2、若是網站外包詢價相關,您再加Line,因我可能需要與您語音會議或遠端連線。

3、補充說明 : Line的不良影響

以上。

目前線上有 4 個使用者: 0 個成員2 個訪客2 個檢索機器人

線上同時最多使用者人數為 121 個使用者,發生於 2024-05-1419:40

2 個訪客 正在線上

#1 – 訪客 於 2024-11-2013:17
架站勤拿手找不到符合條件的頁面 - 架站勤拿手 [網址] [參照連結網址]

#2 – 訪客 於 2024-11-2013:17
架站勤拿手找不到符合條件的頁面 - 架站勤拿手 [網址]

2 個檢索機器人 正在線上

#1 – Google 於 2024-11-2013:21
架站勤拿手 » 03_[實作]設計「首頁」版型與內容 - 架站勤拿手 [網址]

#2 – MJ12bot 於 2024-11-2013:21
架站勤拿手找不到符合條件的頁面 - 架站勤拿手 [網址]