架站勤拿手

如何做出滾動滑鼠時，整個段向上滑出消失？(1)

				
					
<script>
( function($) {
$(window).load(function() {
//============================  
$(window).scroll(function(){
if( $(this).scrollTop() > 0){
$("#sec01").slideUp(1000); 
}
else{
  $("#sec01").slideDown(1000);   
}
});
//======================================
}); //end load
})(jQuery);
</script>
				
			

01_頁面規劃思考

要思考什麼？

1、每一頁

每一頁的內容量多寡，『主選單』中若每一選項代表每一頁，而這每一頁中我所準備要用到的文案、圖片、素材的「量」，夠我單獨製成一頁而不空洞嗎？

2、首頁

首頁該放什麼？可以考慮放以下的內容 :

(1)標語(slogan) : 一般是在首頁剛載入時會呈現形象圖+標語。

(2)主選單中每一頁的「前幾個項目」置入首頁，再放個「更多」讓訪客連過去。

例如 :

• 最新消息
• 作品集
• 服務項目

(3)把主選單中，文案、素材、內容量太少的頁面內容，都放到首頁去，並把該項目做成「選單錨點」置入主選單中即可。(選單錨點就是「空連結+id」的運用，也是一頁式網頁常用的方式)

文案、素材不多的頁面不一定要單獨設計一頁，都可以放在首頁來呈現就好，常見的有 :

• 關於我們(品牌故事)
• 服務項目
• 心得見證、成功案例
• 常見問題、QA

(4)首頁版型要切幾塊？

首頁要放啥，大概心裡有數後，就可以規劃要切出幾個大區，每個大區塊再按實際素材文案量再細切小區塊。

PS : 都學到此了，就別再想找套版主題來做了，想要放什麼資料就切什麼區塊，這樣才有效率。

總結

以上是初步可幫助思考的方向，也可以多觀察不同網站，參考他們選單架構的每一頁都是怎樣規劃、怎樣呈現的。

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

前言

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

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

模仿對象

• https://ex-interior-design.smallway.com.tw/

準備工作

後台安裝免費圖庫外掛 : 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%，以做出左右留白。
• 內層容器再切成左右兩欄。

總結

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