文章專區

最新網頁設計文章

在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

3

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    
在網頁設計上,icon設計與應用是相當常見的, 而使用上除了將icon存成圖片以外,還可以將之作成ICON Font。   那麼到底什麼是ICON Font呢? ICON Font是指將繪製好的向量圖檔轉存為文字檔, 並以css設定成字型來取代原有的圖片物件,在使用上只需輸入該icon對應的代碼或class, 就能夠輕鬆地產生一個小icon。     ICON Font的優缺點如下: 優點: 1.將小圖示(icon)轉為字體後,可減少原本輸出成圖片的檔案大小,降低圖片的使用率。 2.可透過css設定文字大小和文字顏色、陰影來達成效果。 3.修改時只需透過css修改樣式即可,不需再重複做修改圖片的工作。 4.因為是向量文字,相對在放大縮小時,解析度不受影響。   缺點: 1.由於文字形式只能設成單色,因此icon只能為單色或為css3的漸變色。 2.需借助專業的工具生成文字檔,製作方法可參考IcoMoon-將icon轉成Font的平台   綜合以上優缺點,使用ICON Font,不論是在檔案大小或修改的方便性來說,還是略佔優勢, 除了可自行設計以外,也可利用網路搜尋到不少免費的ICON Font資源,讓icon應用上更省力。   那麼該從哪裡下載免費的ICON Font呢? 除了上述的IcoMoon以外,這裡提供幾個主要的平台 Font Awesome:可參考Font-Awesome-簡單又好用的icon素材網 ,只要一行字即可直接使用! Fontello WE LOVE ICON FONTS 其實這些網站的ICON Font使用方式都差不多,首先都需先載入他們網站所提供的css, 然後輸入你要使用的icon所對應的代碼即可。   隨著扁平化設計逐漸普及,ICON Font在網頁設計上越來越常見, 而豐富的網路資源也能夠提高網站開發的速度,提升工作效率,不妨多加使用。  
  在網站架設的步驟中,建置伺服器是一項較為基礎的應用技術,雖然網站伺服器有許多不同種的系統環境,但從在最普遍的微軟(Microsoft)Windows 環境當中,安裝開啟「IIS管理員工具」進行設定後,就能夠使大眾一般文書作業電腦瞬間成為站台伺服器,並存放運行網頁內容。   在 Windows 10 環境當中,透過安裝IIS管理員服務並進行幾項簡單的設定就能將電腦轉變為網站伺服器。   由控制台當中選取:程式集   再選擇:開啟或關閉windows功能   並找到Internet Information ServicesàWorld Wide Web服務à應用程式開發功能à選擇(ASP、ASP.NET 3.5、ASP.NET 4.7)選項   經過開啟功能,我們再回到控制台進入"系統及安全性"部分   進入"系統管理工具"   就能看見Internet Information Services (IIS) 管理員   開啟後就能進入(IIS) 管理員 功能介面   也可以在瀏覽器當中輸入:http://localhost/ 或是 http://127.0.0.1/ 就能看到站台伺服器成功架設的歡迎畫面  
 HTML button按鈕的應用相當廣泛, 設定值有以下: Type:按鈕的類型,有 button(單純按鈕)、reset(清空表單)、submit(送出表單) value:就是按鈕的値 name:按鈕的名稱 <input type="button" value="按鈕值" name="按鈕名稱" style="按鈕樣式"> 範例: See the Pen gQbbWR by Ya (@bok770) on CodePen.   樣式可以透過CSS做調整,按鈕如下   若要消除預設樣式,CSS可以設定border:0 (去除邊框) 和background-color:none (去除背景),或是將這兩個屬性另外設CSS。 範例: See the Pen vQEEjm by Ya (@bok770) on CodePen.    接下來便可以自由套用CSS設計按鈕,也可以活用:hover讓鼠標接觸按鈕時會有不同的樣式變化。 範例: See the Pen wQBBEX by Ya (@bok770) on CodePen.  
在網站的搜尋優化當中,關鍵字是扮演著舉足輕重的一個重要角色,先前介紹過"初識熱門網站搜尋關鍵字"是希望讓大家都能初步瞭解關鍵字與網站的相互關係,從大眾主要使用的 Google搜尋引擎也推出了"Google Trends熱門關鍵字工具"來幫助站台們優化的情況可以明白,關鍵字的主要應用對搜尋引擎的收錄推薦有很大的引響,但面對眾多站台產業日新月異、彼此競爭的情況下,關鍵字的抉擇與設立,也成了網站優化的重點,因此本次將分享更多應用、分析層面的熱門關鍵字分析工具。   除了 Google搜尋引擎本身推出的Google Trends熱門關鍵字工具之外,坊間也有許多探討不同層面關鍵字的分析推薦應用工具,以下分享兩種免費的析推薦應用工具。     Keyword Tool 在關鍵字工具當中,這項工具主要依照您所輸入的詞彙進行相關分析,並推薦出相似且熱門的其他熱門關鍵字進行設定應用,但由於多數推薦工具皆需要付費,所以本款工具在不註冊會員的情況下,只提供相似熱門關鍵字的參考,較適合對產業關鍵字較沒頭緒的應用參考。     Term Explorer 相較前項熱門關鍵字工具,本項所以提供的功能較為全面,在註冊完會員後,可以在免費應用1千個關鍵字內的服務。 當中包含了:相似熱門關鍵字的列表、單一關鍵字的應用評比分析、指定網址的連結與關鍵字等數量資訊分析。 相較於許多工具來說,分析的層面與資訊更為完整。