文章專區

最新網頁設計文章

我們在瀏覽網站時,時常可以看到網頁的網址列上附有該品牌或是該公司企業的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在瀏覽器的支援度更廣。
先前我們介紹過"GA分析是什麼? (Google Analytics- Google分析)-看見網站績效",是Google針對網站經營所推出的友善管理功能,也是現今主流熱門的網站追蹤分析工具,分析層面多元且精細,其中Analytics還大方的囊括提供了 Google搜尋來源以外的廣告資訊追蹤分析功能,而 UTM(Urchin Tracking Module)參數就是提供給分析人員可以自訂寫入的連結標記模組。   透過 UTM參數產生工具,分析人員們可以自行根據Google搜尋引擎外的來源,如:Facebook 貼文連結、Facebook 廣告、Yahoo廣告、Bingn廣告、電子郵件廣告、Google AdWords 關鍵字廣告等,進行連結產生、統計、追蹤並在Analytics界面中分層別類進行縝密分析。   應用的方式: 來到"UTM參數產生工具"介面中,我們需要根據五種欄位定義規則進行層級的名稱輸入,依序是:   utm_source (來源) :帶來流量的網站名稱(其實就是您想放置這個連結給人點擊的網站),有可能是搜尋引擎或是社群網站等其他來源。(必填)   utm_medium (媒介) :這個連結將要應用的行銷或廣告的方式,如:單次點擊出價、電子郵件廣告、banner廣告等...。   utm_campaign (名稱) :這個連結的廣告活動的形式,或是產品、宣傳活動的名稱。   utm_term (廣告關鍵字) :付費關鍵字使用,如: Google 付費搜尋關鍵字廣告,使用的詞彙等...。   utm_content (內容) :在同一次的廣告行銷中,可能會同時使用2個或以上的不同方法,可以歸類成同次活動的多個,個別應用名稱,Ex:同一個網站不同的連結應用、同一封信件不同個產品連結。   參考設定:   在產生完成UTM連結後,我們便能將連結複製加以應用在需要推廣的平台,當使用者們透過此連結進入後,Google Analytics將會自動為我們統計各項應用資訊,達到有效的追蹤、分析總和。  
在行動裝置搜尋習慣大幅顛覆了桌上型裝置的查詢方式同時,Google由2016年時提出了網站"行動裝置優先收錄(mobile-first indexing)"的測試計畫,當時點出了:響應式網站(Responsive web design)、動態服務網站(Dynamic serving)、結構化標記,幾項有助於站台對應行動裝置瀏覽的友善技術,在經歷了一年半的左右的測試後,Google又在今年正式的宣布了"推出移動優先索引(Rolling out mobile-first indexing)",而這就意味著往後 Google 搜尋規則都將會根據適合行動裝置瀏覽的網頁站台進行優先抓取、收錄及評估排名!   過去許多人對於新開發或改版成為"響應式網站(Responsive web design)"的想法抱持半信半疑,但是在眾多的公開資訊與有利使用者操作條件之下,由搜尋引擎優化(SEO)的檢視角度來切入,這樣的網站新趨勢是必然需要面對實行的,畢竟友善的使用者體驗及內容豐富完整性一直都是Google最重視的收錄排序條件。   因此在這也建議不論是新開發亦或是原先只有桌上型瀏覽的舊網站都需要正視這些公開訊息與跟進現行趨勢技術,達到站台的永續經營及SEO的優良體現。 
 在網頁設計中,若要將一張圖片作水平或是垂直翻轉,除了新製作一張翻轉過的圖片以外,還可以直接用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.  
在IIS管理員工具中,安裝完成 "URL Rewrite轉址擴充功能"時,站台就能透過伺服器的判別程式進行自動轉址,先前我們介紹過在站台IIS設定檔案中,可以應用指令方式在"web.config檔案中進行轉址"設定,但其實在安裝完成URL Rewrite轉址擴充功能的同時,我們也是能夠透過IIS管理員工具介面中的URL Rewrite功能進行圖形化介面設定的。     進入URL Rewrite功能設定介面後,在右上方動作中,可選取"新增規則" 由新增規則視窗中,選擇空白規則 命名規則名稱,設定模式的判讀應用,並展開條件列表 從條件中,新增規則 輸入判讀網址條件,且在模式的部分填入我們要辦別的實際網址進行測試 從測試中輸入要測試的網址,可以從結果中看到是否正確 建立完規則後,選擇"重新導向"的動作的模式進行判別後的動作 再將需要導向前往的網址設定在重新URL,之後選擇導向的型態,一般都是永久(301)
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.

ARTICLE

7

HTML iframe框架

 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.
完成"IIS安裝│建置伺服器"與瞭解"新增站台│IIS設定"的步驟後,我們便可以開始著手網頁站台的經營與維護,在先前我們針對了網站改版維護轉址時,介紹過設定"IIS的轉址指令"資訊,但對於許多初識 IIS 需要使用到轉址功能的朋友們可能會感到疑惑,有了指令,也在web.config檔案中進行設定了,卻反而出現了錯誤資訊,原因其實出在於 IIS URL rewrite 功能需要額外加載!   在IIS 管理員介面當中,我們可以使用右方"取得新的網頁平台元件"進行擴充功能。   由擴充視窗的搜尋欄位中,我們鍵入"URL Rewrite"關鍵字並進行搜尋,便能找擴充功能進行新增安裝。   開始接受安裝資訊進行安裝   在完成後,切記一定要"重新開啟"IIS管理員工具,便能在功能中找到"URL Rewrite"的功能,這樣在web.config檔案中進行轉址設定後,便不會在出現轉址錯誤資訊。
預設的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.    
  在完成"IIS安裝│建置伺服器"的步驟後,我們將可以開始建立網頁站台,透過站台的開設,將網頁內容上架至網際網路。   我們可以在IIS管理員中,點擊右鍵選擇左方連線資訊管理欄位當中的「 站台」功能來新增網站。   在新增網站的欄位中,我們可以依序輸入:站台名稱、網站頁面存放的實體路徑資料夾、連接埠號(預設都是80,可以根據後續新增網站延伸ex:8001(1至655的數字))、主機名稱(網址名稱)   設定完後就可以看見剛剛在「站台」資訊下看見我們所新增的網頁站台   透過IIS管理員中右邊"瀏覽網站的選項"我們可以直接驗證網站是不是架設成功。     備註:如網站還處於測試階段,新增站台資訊中的"主機名稱(網址名稱)"欄位可以先不要填寫,網站一樣能用localhost/指定IP,搭配連接埠號來執行查看,Ex:http://localhost:8001