99 篇文章標籤含"網頁設計"

Magento的reCAPTCHA 功能可以在後台輕鬆設定，也就是不需要工程師協助編碼動作，即可讓你的網站開啟使用reCAPTCHA，但是v3設定雖然一樣，還是需要請工程師做一些JavaScript

大家知道要怎麼透過繪圖的方式來建立Facebook 3D

這次介紹的protected branch的一項功能是 Required signed commits，這項功能的用途是用來驗證commit 的作者與github上的使用者是否符合，簡單來說就是做身分驗證，可避免身分被有心人士冒用，接來來馬上來介紹如何設定 Required signed

打造一個品牌，在視覺上給人的形象與感覺是很重要的，是使用者第一眼對網站的印象。網站顏色搭配、Logo

今天要介紹的是用css打造一個Landing Page中 header部分，利用多邊形圖層，絕對定位和置中呈現；本教學大概會用到製造效果的css包括：background-image:

在撰寫Sass

Google Fonts 會依照瀏覽器的字型格式需求回傳相應的字型檔，這可能會使網頁加載變慢，或讓display-font屬性無法順利使用，將Google

Knockout 是一個JavaScript函式庫，它使用一種清晰的資料模型協助您建立更豐富的使用者互動介面（UI）.任何時間您需要動態的更新您UI的部分,例如當使用者執行了一個動作或外部資料來源有所異動，『KO』

現在的 UI 設計中隨處可見各種不規則的形狀元素，現在將介紹 CSS3 中的 clip-path 屬性，

若網頁處於前端開發階段，希望分享實際的網頁截圖，可以使用Google Chrome的擴充套件“Full Page Screen Capture” (全頁截圖)

一個高水準網站除了擁有好的商品外，另一個主要原因便是使用者體驗。   Why？ 在這個資訊與技術蓬勃發展與進步的時代，現代人們大多透過網站或商店門市與商家、公司進行互動。

Icon已是網頁上不可或缺的元素，除了可以提供乾淨的UI外，也少不了簡潔易懂的UX在裡面。 以往在Icon的使用上，不外乎就是由客戶、設計師提供或者是使用Font Awesome、Flaticon等等這類免費與開源素材網站上尋找符合需求的圖案來使用。  

這次要為大家介紹一個好用的 JS plugin -

正常的情況下 要設定layout 對應的block以及templates，只要在extension裡面的layout的xml檔案設定就可以了；但是偶爾還是會遇到需要在controller裡面做設定的情況，例如下面的例子:  

Astral Web使用Bootstrap 3作為我們的前端框架基礎，以簡化我們的工作且提高開發效率，並在前端和後端開發人員之間進行溝通。 Bootstrap

呈上篇文章；更多內容介紹請參考: 網頁設計的開始，版面設計–把消費者的視線留在你的核心內容 理想情況下，我們希望使用者首先查看最重要的信息，再次查看第二個重要的信息。因此，重要的元素應該沿著掃描路徑放置，訪客應在正確的時間被提供正確的信息。這點無論是使用任何一種模型都是無庸置疑的。   網頁動線是至關重要的

呈上篇文章；更多內容介紹請參考: 網頁設計的開始，版面設計–把消費者的視線留在你的核心內容 針對您的網頁排出優先順序 了解您的網頁的目的，將想放置的內容將重要且希望傳達的訊息排在使用者視線經常停留的位置。另外網頁的頂端往往是視覺停留的重點，所以盡量將最核心的內容放置在頁面頂端。這也是為何標題和導航欄總是很重要 針對快速瀏覽而設定

每次開始一個新的網頁設計專案的時候，會不會有那麼一個瞬間：「這個專案的網頁要從哪裏着手呢？」隨着這種問題而來的，設計網頁佈局時是不是有一些規則可循? 其實網頁佈局在很多時候都是相似的，甚至可以說，有些佈局模式是歷久不衰的。身處在資訊爆炸和科技日新月異的時代，造成瀏覽網頁行為的改變。如何有效吸引使用者的注意力?讓資訊傳遞、行銷達到事半功倍的效果。   歐瑞斯特別針對標準使用者行為，整理了3

Axure 的 widget libraries 包括免費及市售兩種，以下是我們最喜歡的38個免費widget程序列表(和幾個模板)，由於某些Library已經不正式支持Axure RP 8，部分功能可能無法完全正常運行，

  一個新的原型標準 紙、筆、圖形編輯器和智慧原型應用程式。 隨著不斷發展的設計標準，客戶對網站和應用程序要求更先進、更複雜的界面設計。

現在處於PHP5跟PHP7的交換時代，所以很多人在煩腦不想要裝二個系統，一個是給php5使用一個是給php7使用，當然docker或是vmware可以很解決這些問題，那有沒有更簡便的方式呢，那就是小編現在介紹的方式，請照下面的指定做，就可以無腦處理這個問題了。          新增repository

今天歐斯瑞要來談談Magento 2結帳流程頁面，相較Magento 1.9設計上有哪些優化呢?在設計時需要注意哪些事情? 一起來看看吧!

  想讓網站看起來不一樣嗎，其中文字就佔了很大的比例。不想再用預設的字型，但搜尋出來的結果卻多到不知所措。亦或是還在開wold一個一個試嗎？使用Google Fonts簡單的解決這個問題！ Google貼心地準備了很多有趣及具特色的字體提供大家使用。透過Google

Bootstrap 3.x 的下拉選單只支援到第二層、如果您需要多層選單的話、可以試試加上底下這支

歐斯瑞今天要與大家談談有關網頁選單結合篩選器，並分享一些案例，看看他們快速找到商品的方式，一起來看看吧！ 當商品到達一定數量或商品類型不同時，就會需要將商品作分類，讓使用者可以依照分類來選擇，商品篩選器可以幫使用者繼續過濾當下不想要的商品，也就是透過一層層分類，來選出想要的商品。根據不同的商品數量、類型和客戶群等，所制定的分類方式與所使用的篩選器也就有所不同，要注意讓使用者的操作過程越輕鬆，越能讓你的商品賣出去！我們在前面文章中提過關於選單設計趨勢的多樣性，以設計的角度來看，選單的選擇方式其實就是一種篩選機制，今天先從幾個選單與篩選結合的案例作分享，看看這些品牌利用選單達到篩選的效果。

今天來談談如何用Sass來開發專案，包含開發前的安裝作業。 開發前我們大概了解一下為什麼要用Sass開發 Sass是一套生成CSS的工具，支援變數、函數、繼承等功能，讓我們更輕鬆地組織及維護CSS樣式表。比起用傳統的CSS慢慢撰寫，用SCSS開發真的可以節省掉很多時間。  

上一篇 我們教大家把 Magento佈景 主題的基本環境設定好了，今天來談談如何使用sass來開發

歐斯瑞準備了一系列「如何開發 Magento佈景主題 」的文章，這一篇文章首先要帶著大家一起進行正式開發前的第一步 ー

CSS無法影響下拉選單展開的選項，如果希望自訂選項的樣式，我們需要使用一些外掛來改變下拉選單的結構，SelectBoxIt.js就是其中的一個選擇。SelectBoxIt.js

今天astralweb要與大家分享使用 Photoshop CC 2015來做影片遮罩效果，一起來看看如何製作吧!

您正在學習 Bootstrap 嗎？或是需要測試某個 Bootstrap

在設計響應式設計時，我們會需要放在裝置上來看看實際上的大小是否合適，而Photoshop CC 提供一個在裝置上即時預覽功能，一起來看看吧! 1.

今天astralweb要與大家分享使用Photoshop CC 2015來做分割影片，一起來看看如何製作吧! ※本教學使用版本Adobe

現今有許多網站都會使用輪播圖片的方式來傳達訊息，網頁瀏覽者也可自行左右移動圖片，但如果在圖片只有一張的情況下，多餘的箭頭或按鈕只會混淆瀏覽者，這時候我們就可以將他們隱藏起來。 <div id="myCarousel" class="carousel

Smashing Magazine統計指出,有75%使用者都安裝了廣告阻檔軟體(Ad Blockers) 當你網站使用廣告區塊,卻被阻擋掉時,是否考慮過畫面會變成怎麼樣呢?

今天astralweb要與大家分享使用Photoshop CC

今天astralweb要與大家分享使用Photoshop CC 2015製作透明度動畫,一起來看看如何製作吧! ※本教學使用版本Adobe

您有沒有遇過這樣的情況、上傳到網站的照片明明在各種裝置都能正常顯示、偏偏在iPad和iPhone上就是倒的。 當我們使用數位裝置拍攝照片時、會同時在圖片中存入EXIF資訊、其中包含了相機的製造商及型號、快門光圈、照片的方向等。之所以會有照片只在iPad和iPhone上倒置的情況出現、原因就是因為在判斷照片方向性的這個資訊上，Apple的裝置和其他裝置得到了不一樣的結果。最簡單的解決方法就是先清除掉照片的EXIF資訊再上傳。  

font-family: Arial, '微軟正黑體'; 如果您的css檔案跟上面一樣使用了「中文名稱」字型，為了讓瀏覽器正確辨識字型名稱，我們必須要在css檔案的最前面指定編碼為UTF-8編碼

我們之前談過手機購物網頁設計的趨勢與重要性，今天歐斯瑞要談談手機版的購物網站首頁設計，並分享一些案例，一起來看看吧! 現今設計趨勢   頁首高度縮小，並將頁首或選單保持在畫面上方

今天astralweb要與大家分享使用Photoshop CC

  Autoprefixer是一個自動幫CSS加上前輟詞的工具，如果你習慣使用compass 來watch你的sass專案，你可以用底下的方式來幫你的sass專案加上Autoprefixer功能。 Step

購物網站選單的呈現方式不盡其數，透過之前分享的內容，我們了解手機購物網頁選單設計的趨勢，今天歐斯瑞要談談電腦版的購物網站選單設計，了解一些大品牌是如何呈現的，

SASS的註解方式有二種：多行註解及單行註解   多行註解 使用多行註解時，註解起來的訊息會在一併輸出在CSS上

今天astralweb要與大家分享快速更改網頁上物件的位置，可以省去PS的時間，也很快速，一起來看看如何使用吧!   在某些情況下，我們只需要對網頁上的物件位置做調整時，但我們只是想要看看結果如何時，不仿考慮使用這種方式來節省時間吧。但僅限運用在物件位置移動，而縮放、刪除、裁切等，它是做不到的喔! 對於一般民眾不需要使用影像處理軟體，即可做修改，對於網頁設計師來說，省去捕捉畫面、開啟PS、去背、裁切、存檔等步驟，快速做修改。

如果Sass生成的CSS檔案、不如你所預期的，你要怎麼知道是哪邊出問題了呢？Sass有一個註解功能、這個註解功能的預設狀態是開啟的。 在註解功能開啟的情況下、生成的CSS檔會長得像這樣： /* line

在網站的開發階段、我們通常會將CSS樣式表展開、方便查找代碼。但是當網站要正式上線的時候、我們又要將CSS檔案最小化、減少檔案大小。在以往單純使用CSS開發時、我們也許會使用一些線上工具幫忙轉檔，現在我們使用SASS開發、只要修改專案的設定、馬上就能變更輸出的樣式。   Sass 共有四種輸出樣式

當您需要檢查網站失效連結的時候，可以使用免費工具 -

Contact  Form 7 是一個相當愛歡迎的 Wordpress 的表單外掛，這篇文章要教您如何幫Contact  Form 7 的表單加上 Google

之前有提到有關如何設定META

響應式網站是目前建站的趨勢，但如果您原本已經有個網站了，又暫時還不打算另外建立新站，您可以考慮使用adapt.js快速將您的網站轉換成響應式的網站。 adapt.js 的作用是依據螢幕的寬度載入不同的CSS檔案，藉此讓網站達到響應式的效果。原理與media queries相同，都是依螢幕寬度判斷使用不同的樣式(CSS)，不同的地方在於：adapt.js將不同的設定寫在不同的檔案內，再依螢幕寬度載入不同的CSS檔案；media

之前提到的Magento設定優化，是在Magento系統中已整合好的設定功能，因此我們可以簡單的通過後台設定的改變，輕鬆的做到校能的優化。   如果今天網站的規模龐大，那些設定已經不足以負荷時，還有別的方式可以調整設定，只是建議大家在進行此類的設定變更前，務必進行設定檔案的備份，不小心改壞了設定還可以還原。 1.Enhancing

  在預設的PHP環境下，是沒有對microsoft sql server支援連線功能的，因此我們需要進行套件的安裝與啟用。

有時網站會有舊站翻新、舊的內容移除，想要讓使用者轉移去瀏覽新的內容。 這時我們可以簡單的透過設定.htaccess檔案，告訴Apache幫你轉移網址到想要的網頁。 程式碼(.htaccess檔案) ...

行動裝置與一般桌機最大的不同點在於螢幕尺寸的大小、行動裝置因為螢幕尺寸較小，能夠呈現的資訊有限，因此在內容的規劃上必須更為精簡。目前市面上常見的行動裝置最小的螢幕寬度是320px，iPhone 4 及 Sony

相信不少的網頁工作者，都會有類似的經驗，尤其是在需要重新整理網頁內容，或是重構網站時，看到一堆過去的網頁程式碼，元素其中不乏各種css，class，id，甚至是bgcolor，width一類的行內屬性，這時就可以利用這個工具來清理掉這些元素屬性，還原成最乾淨的html網頁程式碼。 不過，先提醒一下，此工具並沒有特別處理例外，例如說img的src屬性也是一併會被清除的。 直接來看程式碼(重點執行清除功能的是藍字的程式部分)： <html>

當我們做好一個網站，且讓他上線時，如果我們的網站並不想要被搜尋引擎收集資訊，我們可以透過設定Meta tag的robots，告訴搜尋引擎哪些資料不要蒐集，來管理網站的可見度。 例如說，比較常見到的： <meta

  網頁設計百寶箱 歐斯瑞的有許多夥伴們都是網頁製作高手，一個一個吸引人駐足逗遛的網站就在在他們的巧思跟精湛的技術下誕生出來。 工欲善其事，必先利其器；這些亮眼的網站當然不是設計師跟工程師們變魔術變出來的，而是歐斯瑞的夥伴們依照設計跟製作的流程、使用各種適合的工具製作出來的。我們依照設計跟程式製作的流程把這些好用的工具分類好；接下來，就為各位歐斯瑞的好朋友介紹這些工具。

以往我們要實現下拉式選單大多會使用Javascript或者是Flash，不過現在我們有更簡單的選擇。今天我們要跟大家分享如何單純使用CSS及HTML製作互動式的下拉選單。底下就是我們完成的選單效果截圖。   首先我們先把第一層的按鈕做出來。 HTML

行動裝置發展快速與HTML5技術攀升，也影響網頁設計的形態改變，以往會使用Flash來製作網頁動態效果，但由於支援性、SEO等問題，讓多數企業都走向新形態的設計方式，HTML5越來越成為一種趨勢，現今沒有酷炫的Flash動態效果，網頁總不能死版版的，HTML5難道就不能做出酷炫效果嗎？其實是可以的，今天要與大家分享幾個範例，以及運用這些技術該注意的事。 KFC Kentucky Fried

CSS 濾鏡是一個讓我們實現各種視覺效果的工具，我們可以利用CSS濾鏡來幫網頁加上一些視覺效果。

今天我們要跟大家分享幾個製作滿版背景圖的方法。 現在先來確定一下我們的需求： 圖片必須剛好填滿瀏覽器不能留有縫細，也不能因為圖片太大而出現捲軸。 圖片可以隨著瀏覽器尺寸自動縮放。

Google

本文將介紹幾個前端開發的工具：Chrome 開發人員工具、Brackets、Sublime Text 3、Koala、Online CSS prefix tools、CSS Sprite Generator、Picpick、Just Color Picker。

  網路購物是個在現代社會裡絕佳的購物模式，不必離開家裡便能快速比較、瀏覽所有商品，當你要挑選購買的商品時，如果網站設計的並不理想，在商品下單介面你可能不覺得更方便，反而有了一次很糟的購物體驗。 我們來看看普遍在購物網站結帳頁面上設計的詬病： 結帳前要先填寫表單，然後再告知您此商品已缺貨，還要等上數天→回覆→再次下訂，又一次循環…。其實只需要花些時間對你的結帳過程做一點點的調整和研究使用者的體驗，網站就會獲得更多滿意的回饋，並且有效的增加銷售額；小編在這裡提供了12個技巧來幫助購物網站做到這一點：

Google+ 追蹤按鈕可在您的網頁上新增一個簡單小型的條件按鈕，讓訪客可將您的個人資料或專頁快速加到他們的社交圈中。如要在您的網站上顯示 Google+ 追蹤按鈕，只要加入一行

電子商務瞬息萬變，要如何搶攻多螢幕電商市場，掌握桌機、平板電腦和智慧型手機的網購商機呢？根據Google 2014年的調查，台灣有54%的人上次購物是使用智慧型手機，其比率高於韓國38%、美國26%和日本15%等，位居世界第一，可見台灣人的行動商機不容小覷。為了把握這廣大的行動商機，許多電商業者常做的方式是開發行動購物APP(例：MOMO購物網、Yahoo超級商城)，或者另外架設行動網站(例：Lativ網站)。 其實，還有一個台灣尚未普及，但在國外相當流行的Responsive Web

如果來到Astral Web歐斯瑞的網站，按下左鍵選取文字(反白)時，出現的不是預設的背景色，而是鐵灰色，讓使用者可以可以更清楚瀏覽文字。這種手法在網站上很常見，今天我們就來和大家介紹如何設定！ 方法很簡單，只要利用css3 的selection選擇器就可以了！

設計表單的輸入欄位時、常用placeholder來做提示文字，在預設的狀況下、placeholder的文字只有在輸入資料後才會消失、如果我們希望在點選輸入欄位後，placeholder的文字會立即消失，一般常用的方法就是利用 onfocus 和 onblurl來達成。

由於行動裝置的發展迅速，越來越多人注意到響應式設計的重要性，尤其是注重轉換率的購物網站。可能會有人想問：為什麼同樣的網站在不同裝置上，要有不同版面大小、編排呢？理由很簡單─為了改善使用者經驗(User Experience)。讓我們想像一下，假設今天你在手機上收到A網站正在特價某產品，正好就是你想要買的東西，於是你進入A網站想要了解產品內容，卻發現網頁跑版、難以瀏覽，必須試著放大、縮小來看清楚內容，想點選購物卻無法正確選到選項，在難以操作的環境下你還會想立即購買嗎？