網頁設計相關文章

近年來，隨著大眾對於網路的使用度跟熟悉度增加，一化科技發現，對於客製化網站和套版網站，以上兩者的區分，每每在與客戶溝通時，許多客戶們已不再像早年那般，對於不同網站製作的差異處那樣陌生。   一化科技用最容易區別的六個要項，來做兩者的比較。而這兩種網站製作方式的比較六個重點，一化科技將其命名為兩種不同類別網站製作的[PERMIT理論](即準許理論或是允諾理論)。 即：花費價格(Price)、全專屬化(Exclusive)、瀏覽動線(Route)、結合行銷(Marketing)、畫面呈現(Image)以及製作時間(Time)等等。   客製化的網站，在上述的各項指數上，可說是都要比套版網站來得高。現就字義上作簡略說明，如下： 花費價格(Price)，客製化網站因為溝通製作，都極為仔細費時，是一種最有效的網站整合製作，所以製作成本，自然而然的要高出一般簡易的套版網站製作成本許多。   全專屬化(Exclusive)，套版網站可視為由開發者或是代理商，提供幾個網站的版型，由客戶挑選後，局部更換些圖片，再於固定的頁面位置放上文字，如此便完成了一個網站，所以不乏有撞衫的尷尬，識別差異性低。   瀏覽動線(Route)，客製化網站在規畫起始，便會細心了解客戶網站，要如何提供友善的瀏覽界面，與愉快的瀏覽體驗。所以，整體網站上的動線，一化科技皆不斷更新最新的網站製作語法技術，並結合深厚經驗的來規畫，以其收到最大的效果。   結合行銷(Marketing)，網站的選項主題，該如何適切的規劃出諸如促銷訊息的發佈機制？以及當網站製作完成後，該如何讓該網站的搜尋排名，可以排在前面，這是行銷該網站的一個重要工作，甚至是非常必要的工作，客製化網站，在此方面，可謂遠遠勝出套版網站。   畫面呈現(Image)，因為是完全客製化的網站，所以每個頁面，每個畫面，以及每個圖面，都需貼合不同客戶所需。一化科技了解畫面會傳遞訊息的重要，力求將每個頁面細節，都儘量做到賞心悅目，而這是套版網站無法做到的。   製作時間(Time)，如果製作時間非常急迫，對於功能與畫面，以及網站的潛力價值等因素，均可忽略的話，此時或可選擇套版網站，但客製化網站，如上述所陳述，可說是精雕細琢。   所以，在製作時間上，必定是要多出一些；不過，一化科技知道每位客戶，都希望網站可以趕緊上線，以便帶來無盡的商機，所以一化科技會用最有效率的方式，來濃縮內部製作時間，期盼更快的完成委製客戶，一個嶄新且有效傳遞訊息的網站。

客製化網頁設計所架構出的網站，因為是完全貼合不同客戶的實際需求與特色，通盤溝通了解後，再進行網站的製作。如用類似近年某些產業中，常提到的[匠人手作]概念，來比喻在客製化網頁設計，有許多相同的共通點。因為客製化網站製作的起始通盤設計規畫上，從要表達的意像與整體連結界面，便以客製化的細心規畫，來做好最妥善的設想，再由一化科技公司內部專業人員，進行網站前端視覺的設計。如有自行管理網站功能的需求時，則搭配同樣為專屬客製，可供客戶自行管理更新的後端平台，讓網站的裡、外與前、後，都可讓不同客戶，擁有其專屬最合用的設計。不同的客戶們，也不用擔心會發生與不同客戶版型撞衫的尷尬。   客製化網站的設計風格，將充分表現出不同客戶的特色，客戶完全無須受限於所謂套版網站的先天上限制，讓客戶的想法與創意，可恣意釋放出來。另外，是在設計之始，便以最貼近搜尋引擎原理的方式製作網站，並預留需要做網站行銷的準備與彈性，可立即搭配網站優化的設定，使搜尋結果排名，盡量有效的往前提昇。在此，提出套版網站的缺點做說明，即整體版型受限，畫面、圖面及文字，均難以達到真正的高標要求，網站製作後，常常沉於茫茫網海中，被搜尋的排名，難以跳脫出來，所以難以被潛在的受眾看到，加上畫面勢必較粗糙，所以，並沒有辦法發揮出一個真正有效網站，所該有的功能。而製作一個真正有效、可帶來無限商機的網站，即為客製化網頁設計的最大宗旨與特色。  

當有兩個div重疊時，可以發現當滑鼠滑到重疊的區域時，會無法對下層的div進行點擊或hover的動作。 如下圖範例，藍色區塊(box01)設定了hover，只要滑入該div就會變色，但是當滑到重疊區塊時，壓在底下的box01設置的hover屬性會無法實現。 See the Pen KEeXqK by Ya (@bok770) on CodePen.   此時可以應用CSS的屬性「pointer-events」，它是針對滑鼠事件的屬性，預設值為auto，若設定值為none時，則可以穿越該元素。也就是說，原本滑鼠無法點擊的下層div，設定為pointer-event: none的話，可以讓鼠標直接穿越上層div，對下層div進行動作。 範例： See the Pen ywEzxO by Ya (@bok770) on CodePen.   我們可以發現，原本壓在底下的box01，就算鼠標滑到重疊區域內，也可以觸發hover了。

近來CSS有不少新增的屬性，然而各個兼容性不一，我們可以用@support標記來檢測該瀏覽器是否有支援。 基本用法： @supports (該CSS屬性規則) { div {該CSS屬性規則} } 範例： @supports (display: flex) { div { display: flex; } } 意思是當瀏覽器支援display: flex時，即套用該屬性。   我們可以用not來設定該屬性不支援時的替換CSS，來應付不支援時的情況。 範例： @supports not(display: flex) { div { display: inline-block; } } 意思是當瀏覽器不支援display: flex時，改為display: inline-block   你也可以使用or或and串接多個CSS設定 範例： @supports (display: -webkit-flex) or           (display: -moz-flex) or           (display: flex){     div{     display: -webkit-flex;             display: -moz-flex;             display: flex          } } @support可以針對舊型和新型瀏覽器設定不同的CSS規則，大多時候用來支援較舊式的瀏覽器，並在使用更新的瀏覽器時，套用新屬性，提升用戶體驗。

在網頁設計上，用float排版若不清除浮動，會造成父元素塌陷的問題，不然就是改用display:inline-block或flexbox解決。 而現在CSS有一個新屬性display:flow-root，可以讓你不用再特地清除浮動囉！ 範例： See the Pen rozENw by Ya (@bok770) on CodePen.   display:flow-root 的生效條件 1. float的值不是none 2. overflow的使用值不是visible 3. display的值為table-cell、table-caption、inline-block或inline-table 4. position的值既不是static也不是relative 5. block-progression的值為lr或rl，其父框的block-progression 的值為tb 6. block-progression ' tb的值為' '，其父框的block-progression的值為 lr或 rl   由於是新屬性的關係，在瀏覽器的兼容性尚有待加強，只可支援firfox 53+、chrome58+、opera45+ 而可以使用@supports功能來進行增強漸進處理或是優雅降級處理 @supports(display:flow-root){} @supports not (display:flow-root){}   範例： @supports(display:flow-root){ display: flow-root; } 若瀏覽器支援display:flow-root，會啟用該屬性   @supports not (display:flow-root){ display: inline-block; clear:both; } 若瀏覽器不支援，則會啟用display: inline-block;  clear:both;

我們在瀏覽網站時，時常可以看到網頁的網址列上附有該品牌或是該公司企業的logo圖示，那麼該如何才能將icon加上去呢？   有兩個方法如下： 1.將圖片轉成ico格式，然後命名為favicon.ico，尺寸設16X16px，因為只是放在title上，占的範圍很小，所以圖檔不宜過大。 有不少將png、jpg等圖檔線上轉成ico的網站，可以直接將圖片上傳轉檔。 png轉ico：https://www.convertico.com/ 原始圖片支援jpg、png、gif：http://tw.faviconico.org/ 之後再將圖片放在網站的根目錄下即可。   第二個方法是在網頁的head裡放入 標題欄： < link rel="icon" href="/favicon.ico" type="image/x-icon" / > 收藏夾： < link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" / >   href裡可以放圖片的相對路徑或絕對路徑，所以不需放在網站的根目錄下，圖片名稱也不一定要取favicon.ico，可以自由命名。 例如： < link rel="icon" href="images/logo.ico" type="image/x-icon" / > < link rel="icon" href="https://www.webdesigns.com.tw/images/logo.ico" type="image/x-icon" / >  但還是建議使用ico檔案，因為相較於png、jpg等圖片，ico在瀏覽器的支援度更廣。

 在網頁設計中，若要將一張圖片作水平或是垂直翻轉，除了新製作一張翻轉過的圖片以外，還可以直接用CSS做到，這就要應用到CSS的transform屬性了。此屬性除了上次介紹的旋轉效果以外，也可以做翻轉，也就是鏡射效果。 寫法為以下： 水平翻轉： scale本為縮放效果，可以控制圖片的縮放倍率，如果設定值為scaleX(-1)，便可以呈現出鏡射效果。 See the Pen pqEWbO by Ya (@bok770) on CodePen.   垂直翻轉： 水平為scale(X)，反之垂直翻轉則是要設scale(Y) See the Pen ZVpXyP by Ya (@bok770) on CodePen.  

CSS的 transform 屬性可以讓網頁元素變形，呈現多種的特殊效果，其中之一便是旋轉效果，可以自由設定元素順時針或逆時針旋轉幾度。 寫法為rotate(θ) 指定元素以參考點為中心軸旋轉θ度。 θ 參數須有標示單位，例如： deg (角度)、rad (弧度) 、grad (梯度)  正數為順時針旋轉，負數反之為逆時針。   範例： transform:rotate(5deg)為指定元素以參考點為中心軸順時針旋轉5度。 See the Pen roNymy by Ya (@bok770) on CodePen. See the Pen yGLMza by Ya (@bok770) on CodePen.

 Html iframe為內嵌框架，用來在網頁內內置另一個網頁，像是常見的在部落格內嵌facebook專頁，可以直接在內嵌頁面上按讚或分享，是很常見的應用範例。 Iframe可以設定寬度、高度、外框參數、卷軸參數。 範例：   src便是輸入要嵌入的網頁，width 與 height 分別用來設定 iframe的寬度與高度，單位預設為px，所以若是px單位的話只寫數字即可，但如果是百分比%的話要明寫出來   frameborder用來設定 iframe 的邊框是否要顯示 frameborder="0" ──不顯示邊框 frameborder="1" ──要顯示邊框   scrolling 用來控制 iframe 的卷軸是否要顯示，有三種屬性可以設定：scrolling="yes" ──代表要顯示捲軸 scrolling="no" ──代表不顯示 scrolling="auto" ──則代表根據網頁大小自動顯示。 範例 ：   See the Pen dQarxX by Ya (@bok770) on CodePen.

預設的div區塊為方形，CSS的border-radius屬性可以幫div添加圓角的效果， 設定值為圓角的半徑值，例如：border-radius:5px 意思為圓角半徑為5px 我們可以依據自身需求為div的四個邊分別設定不同數值， 四個數值對應的方向為 border-radius:  左上 右上 右下 左下 範例： See the Pen xQJbqB by Ya (@bok770) on CodePen.   以上範例僅設了兩個圓角10px，分別為右下角和左下角，其他兩邊設成0，所以會是直角。   若只設一個數值，則全部的角皆會設成該值 範例： See the Pen ZmjYpo by Ya (@bok770) on CodePen.     若要設計圓形可以設border-radius: 99em 範例： See the Pen KrBwNy by Ya (@bok770) on CodePen.