文章專區

最新網頁設計文章

 上回介紹了flex-container(容器)可使用的屬性,這次來介紹flex-items(子項目)可操作的屬性。 一樣先來張flexbox盒子模型圖複習一下(來源:MDN)   關於flex-items可操作的屬性,有以下幾項: order可以決定項目的排列順序。   例:下面兩圖僅差在是否加入了order,若未加order指定順序的話會如右圖所示。左圖則是已加入order。   flex-grow可設定項目們在容器內的比例。 例:每個項目在容器內的比例是2:1:3:2   flex-shrink與flex-grow相反,當項目將容器擠爆時,flex-shrink會把項目們縮小設定的比例。會根據flex-shrink設定的值來決定縮小的倍數。   下圖的縮小倍數比:1:2:3:4:5   flex-basis項目的基本大小,有點類似min-width,算是代替width用的,優先權比width高,但若兩者其中之一為auto,會以沒設auto的為優先。 關於flex-grow、flex-shrink、flex-basis此三項屬性,這邊有更詳細的解釋     flex由flex-grow、flex-shrink、flex-basis三個屬性組成,例:.flex{flex:2 1 300px;}   align-self可以指定某個項目的行為,會覆蓋容器align-items的設定。 auto:預設值,繼承容器的align-items屬性,若沒有則為stretch flex-start:對齊容器最上面的cross start flex-end:對齊容器最下面的cross end center:垂直置中 stretch:將flex項目撐開至容器的高度 baseline:以所有flex項目的基線作為對齊標準 例:下圖本來將容器設align-items: flex-start(靠齊最上方)。然而在第三項與第四項分別設了align-self: center(垂直置中)與align-self: flex-end(靠齊最下方),覆蓋了容器align-items: flex-start的設定。
       在先前我們分享了瞭解網站轉址與301轉址後,可以知道網站在進行更新甚至要改版的狀況時,如果要將網站更換至新網址,我們可以透過301轉址的語法來進行,將舊有的網站頁面權重進行轉移到將要使用的新網址頁面,就能保留以往所努力經營的頁面權重及搜尋引擎排名,但301轉址的轉址其實代表的是將舊網站權重"永久轉移"至新的網頁,如果您是要捨去舊有的網站與網址時,這是適合的做法。但如果是要暫時修改及保全舊有網站與網址的同時,要另外使用替代網址與網站狀況下,就並不適用301轉址。       要在維持舊有網站與網址的頁面權重時,也能使替代網站不失重要流量的方法便是使用302轉址,有別於先前介紹的301轉址,同樣都是會將頁面權重進行轉移,但是302轉址主要為"暫時性轉移",用於舊網站進行更新與改版時將頁面內容與權重轉至替代的網站與網址來提供瀏覽服務與維持原有排名及權重,於轉址後舊有網站並不會失去原有的頁面權重和排名,舊網站進行更新與改版後便可以同時取回替代網站所持續經營舊有的頁面權重。302轉址的語法放置在要轉址的頁面文件中,常見語法請參考以下:     HTML 302轉址   <head> <meta http-equiv=refresh content="0;url=http://host.yourdomain.tld/path/to/"> </head>     JavaScript 302轉址   <script language="JavaScript"> <!--   window.location.href = "http://host.yourdomain.tld/path/to/"; //--> </script>       PHP 302轉址   <?php   header("Location: http://host.yourdomain.tld/path/to/"); ?>     ASP 302轉址   <% Response.Redirect("http://www.yourdomain.com") %>
flexbox是CSS3裡較為特殊的排版方式,相較於一般常使用的float、position等屬性更為彈性,可以更有效率地做出一般方式所不易達成的效果。隨著響應式布局的興起,排版彈性大的flexbox使用率也頻繁了起來。 flexbox盒子模型如下圖(圖片來源:MDN),不同於其他一般的CSS屬性,它有專屬於自己的一些屬性和概念,flexbox具有水平的起點與終點(main start、main end)、垂直的起點與終點(cross start、cross end)、水平軸與垂直軸(main axis、cross axis)。   總體來說分為flex container(容器)與flex item(子項目)兩大類。 如何使用flexbox的功能呢? 只要在容器內加上display:flex或是display:inline-flex,容器和其內的項目就會直接套用flexbox的設定喔! display:flex與display:inline-flex的差別 就跟display:block與display:inline-block差不多   此章先介紹flex container(容器)可用的屬性,有以下幾項: flex-direction為容器內項目的排列方向 可用的值有: row (從左到右,再從上到下) row-reverse(row的顛倒順序) column(從上到下,再從左到右) column-reverse(column的顛倒順序)   flex-wrap決定flex項目是否換行 可用的值有: nowrap:不換行(預設值),不管有多少項目都會放在同一行內(寬度會自動調整) wrap:換行,會依照內容或寬度自動換行。 wrap-reverse:換行,但順序相反   flex-flow是  flex-direction與  flex-wrap屬性的縮寫,就跟 「border-width:1px;border-style:solid; border-color:#000」等於「 border:1px solid #000」是一樣的道理 flex-direction | flex-wrap 例:.box{flex-flow: row wrap}   justify-content決定flex項目與容器的水平對齊設定 flex-start:預設值,flex項目對齊最左邊的main start(水平起點) flex-end:flex項目對齊容器最左邊的main end(水平終點) center:水平置中 space-between:平均分配  flex項目,最左與最右的flex項目會與main start及main end貼齊。 space-around:平均分配  flex項目,間距也是平均分配。   align-items與justify-content相反,決定的是flex項目與容器的垂直對齊設定。 flex-start:預設值,對齊容器最上面的cross start(垂直起點) flex-end:對齊容器最下面的cross end(垂直終點) center:垂直置中 stretch:將flex項目撐開至容器的高度 baseline:以所有flex項目的基線作為對齊標準   align-content align-items是針對內容為單行的項目進行處理,但若是多行的項目,就要使用align-content此屬性。 flex-start:預設值,對齊容器最上面的cross start(垂直起點) flex-end:對齊容器最下面的cross end(垂直終點) center:垂直置中 space-between:第一行與最後一行分別貼齊最上方與最下方 space-around:行距平均分配 stretch:將flex項目撐開至容器的高度   以上便是flex container(容器)可用的屬性,下次將介紹flex item(子項目)。
    瞭解網站轉址與301轉址,在網站經營與維護中,相信大家能瞭解一個用心經營,內容豐富、時常更新資訊的網站來說,網站頁面對搜尋引擎的權重比例越高與排名越好就是一個很好的肯定,而對於已長期經營的網站來說我們將可能會遇到網站更新甚至改版的狀況,要如何在穩定網站排名且不失去搜尋引擎積分權重下的方式讓我們將網站更進一步的提升呢?這時候就需要用到"網站轉址或301轉址"。       網站轉址的技術層面其實包含非常的廣泛,在此將以本議題的基礎篇301轉址開始介紹起,由單一頁面來說,在開方網頁時應用不同的程式語言,所以撰寫的方式也有些許的不同,舉例來講,我們可以將301轉址的語法放置在要轉址的頁面文件中,常見語法請參考以下:     HTML 301轉址 <meta http-equiv="refresh" content="0;url=http://yuordomain.com" />     PHP 301轉址  <? Header( “HTTP/1.1 301 Moved Permanently" ); Header( “Location: http://yuordomain.com" ); ?>   Javascript 301轉址 <script>document.location.href="http://yuordomain.com";</script>     ASP 301轉址 <%@ Language=VBScript %> <% Response.Status="301 Moved Permanently" Response.AddHeader “Location","http://yuordomain.com/" %>       ASP.NET 301轉址 <script runat="server"> private void Page_Load(object sender, System.EventArgs e) { Response.Status = “301 Moved Permanently"; Response.AddHeader(“Location","http://www.yuordomain.com"); } </script>       JSP 301轉址 <% response.setStatus(301); response.setHeader( “Location", “http://www.yuordomain.com/" ); response.setHeader( “Connection", “close" ); %>
Font Awesome網站提供許多好看的icon可以免費下載使用,原理為將icon以文字型式(fonts)表現,在應用上比起將設計的icon切成圖片使用來得更加便利。 首先進入Font Awesome的網站http://fontawesome.io/ 下載套件   解壓縮後,若只是需要css的話只需將css與font的資料夾複製到目的地。   在<head>與</head>之間加入css語法 例如: <link rel="stylesheet" href="font-awesome/css/font-awesome.css"> 若要使用只需在html裡加入欲選擇的icon語法即可 例:<i class="fa fa-camera" aria-hidden="true"></i>   若要更改大小的話可以依自己需求在原始碼裡加上fa-lg、fa-2x、fa-3x等。 例: <i class="fa fa-camera fa-lg" aria-hidden="true"></i> <i class="fa fa-camera fa-2x" aria-hidden="true"></i> <i class="fa fa-camera fa-3x" aria-hidden="true"></i> <i class="fa fa-camera fa-4x" aria-hidden="true"></i>   <i class="fa fa-camera fa-5x" aria-hidden="true"></i>   另外因為Font Awesome的icon是文字型式,所以也可用文字設定的css來改變大小 例:font-size:14px   Font Awesome提供的icon可減少特地設計icon和切版所需花費的時間,設計上又簡單實用,為網頁設計師可善加利用的好工具。
    在網頁設計程式開發時,SQL Server 與 My SQL 都是在Windows較常見的資料庫,由於兩種語法較為貼近相似,所以在選擇上比較常拿來比較,大多數人都會覺得My SQL是免費型的資料庫,但這僅適用於個人網站或是小型簡易網站的應用,在商業性及進階的網站整合功能上,目前My SQL還是需要付費商業性的授權。       瞭解其實在完整的商業開發上,兩套資料庫都是需要授權上的費用後,我們可以由介面的友善及功能對應的完整性進行考量,由於SQL Server較其他資料庫不同的地方是,它只對應Windows系統,不能應用在其他如Linux或UNIX等的系統上,而Windows也是目前大眾較常習慣接觸使用的介面,所以在開發上它較能符合一般人的操作習慣,因此假設是在不熟悉Linux或UNIX等其他的系統時,會比較建議使用SQL Server,如果有考慮使用不同作業系統時便可以考慮 My SQL。       在架設網站類型時,可以參考網站的用途或內容方向來配合使用的語法與資料庫,普遍架設個人網站或較小型網站時訪間有許多PHP對應My SQL的開發模型及相關教學範例可以參考架設,所以架設基礎較為簡易開放,而考量使用在較商業化的網站開發時,需要較多元性的功能,大多是會使用.NET語法與SQL Server資料庫來配合功能較為複雜及多元的需求,SQL Server在安裝後其實有包含非常多的工具可以應用,如:報表、資料轉換(ETL)、商業智慧(BI)等,幾乎一應具全,這或也就是大多數人喜歡SQL Server的原因之一。       SQL Server 與 My SQL,兩套資料庫在語法上有較相近的與法與操作,也有適合不同層面的開發應用,因此在選擇資料庫的同時可以先瞭解架設時的需求及目標進行選擇使用。
CSS的背景屬性background-position,主要用來定位背景圖片的位置。 background-position的數值分成三種表示方式:關鍵字、像素、百分比 關鍵字:background-position:top left; 值有top、bottom、left、right、center 像素:background-position:0px 0px; 百分比:background-position:0% 0%; 前兩者指定的是背景圖片左上角相對於容器左上角的位置。(百分比的情況較特殊,後面會解釋。)   EX: background-position: 10px 20px; 第一個數值(10px)指的是水平位置;第二個數值(20px)指的是垂直位置 也就是說從左上角算起,將背景圖往右移10px、往下移20px   background-position: top center; 背景圖設定在從容器左上角算起最上方並中間的位置   百分比表示: background-position: 背景圖本身(x% y%)的那個點會與容器(x% y%)的那個點重合 例: background-position: 20% 40%; 背景圖本身(20% 40%)的那個點會與容器(20% 40%)的那個點重合   若以px或%表示時,數值可以用負的。 如: background-position: -10px -30px; 從左上角算起,背景圖會往左移10px、往上移30px 註:因為背景圖片只能在容器內顯示,所以超出的部分會被切掉。   1. 數值與百分比是可以一起用的。(如:background-position:15px 60%;) 2. 數值/百分比與關鍵字是無法混用的。(如:background-position:center 20%;) 3. 若只輸入一個數值,會隨數值改變的只有水平位置。
     根據資策會及許多具有公信力的網路平台、廣告公司等,都發表了關於行動裝置在網路中實際測量所佔有流量比例逐年攀升的相關文獻,在眾多數據下的舉證中,我們能明白,使用行動裝置漸漸地已經占據了我們每日生活的一部分,甚至超越了看電視、使用傳統電腦的2至3倍時間。       從使用習慣和數據統計上的改變可以瞭解到,現今人們人手一支的智慧型裝置能隨身、快速、方便的在網路上進行即時通訊、社群網站服務、收發電子郵件、地圖導航、行動搜尋、訂票、遊戲暢遊等等其他功能,其中了也包含了網站的搜尋與瀏覽,先前本站說明了許多關於網頁與智慧裝置配合的"響應式網頁設計(RWD)技術",而本技術便是因應行動裝置的網路使用量超越了傳統桌上型電腦時我們該注意的進步。       經由多方的數據下,我們其實可以清楚的瞭解到行動裝置已經取代傳統桌上型電腦大部分的流量,因此傳統網頁將面臨的考驗便是行動裝置的趨勢,會由使用者、搜尋引擎等使用條件因素開啟新的挑戰。       面對這項全新的挑戰與趨勢,您所設想建置的網站,甚至您目前已經擁有的網站是否能具備了這項優勢呢?這是所有網站擁有者該面臨的問題。關於設計一個具有競爭力符合趨勢的網站或是想闊斧改造傳統頁面都歡迎您與本站諮詢,本站擁有許多創新網站的開發,也服務過許多傳統網站改造,是您值得信賴的平台。    
在作網頁設計時常常需要嵌入youtube影片,但一碰到RWD網頁時,影片就會遇上無法隨著螢幕縮放的問題!這是因為youtube供嵌入用的iframe原始碼已經是固定尺寸了,因此我們需要修改以讓影片能跟著RWD一同縮放。 步驟相當簡單: 1.首先在CSS列表中新增以下CSS .video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0;left: 0; width: 100%; height: 100%;} padding-bottom: 56.25%為影片高度與寬度的比例16:9計算得來,9除以16=0.5625換算高度比0.5625=56.25% padding-top: 30px:用於修正的高度,可用25px或30px 2.在youtube提供的iframe原始碼加入<div class="video-container"></div> EX: <div class="video-container"><iframe width="560" height="315" src="https://www.youtube.com/embed/9CjvlhJMkcc" frameborder="0" allowfullscreen></iframe></div>   影片實例: 可以縮放視窗看看實際效果唷! 以上,就可以使youtube影片100%自動縮放瞜!這是在RWD設計裡相當實用的基本技巧。
      PageSpeed(網站速度),面對廣大使用者的使用習慣與青睞性,眾家搜尋引擎越來越重視每個網站的實用內容與流暢性和讀取執行速度,隨著行動裝置的普及化,如今行動裝置瀏覽網站的頻率已經大幅超越傳統桌上型裝置,讓我們瞭解到大多數人在上網時都仰賴著手機或是平板等行動裝置,而在行動裝置上又受限於行動網路的頻寬與傳輸效率未能達到實體線路的穩定性,因此網站的執行讀取速度就成了搜尋引擎SEO重視的依據。         從大眾較常使用的搜尋引擎Google來觀察可以得知,Google針對網站優化SEO推出了許多實用的工具,其中就有針對網站執行速度做測試與建議的PageSpeed Tools工具,透過輸入網站的網址,我們可以經由測速工具來分析網站在面對使用者讀取執行時的友善性,分析方向一開始最大的類別就分成了行動版與電腦版的分類,由此我們可以得知,網站功能是否貼近行動裝置也是一項重大指標,而因應行動裝置瀏覽,網站使用RWD技術較偏向頁面設計技術,可以參考本站什麼是RWD (響應式網頁設計、回應式網頁設計)?文章,在這就不多加闡述。            回到側速工具測驗與建議的項目,其中包含有圖片最佳化、頁面傳送前的壓縮、減少伺服器回應時間、網站版面效果JavaScript與CSS和HTML技術壓縮等條件,在以上這些項目及未列出細項的檢測後,測速工具會針對還有改善空間及通過的檢核項目來告知我們如何改善與維持良好的連線品質。           在網際網路上其實不單只有Google有推出網頁測速工具,還有許多不同的測速工具,而眾多的側速工具開發的目的其實很單純,就是希望能回歸瞭解如何改善網站的執行讀取速度,進而提升使用者與搜尋引擎的青睞與信任,便是SEO的重要基礎之一。