文章彙整

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

首頁  /  標籤含 "網頁設計"的文章

Magento2.3Recatcha設定教學

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

透過繪圖方式製作Facebook 3D Photo照片

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

Github的branch權限設定 – Required signed commits

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

6個網頁設計靈感來源分享

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

利用多邊形圖層,絕對定位和置中呈現Landing Page

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

用下載代替嵌入 Google fonts 使用小技巧

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

KnockoutJs 系列(1)-observableArray

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

Clippy – 輕鬆利用 CSS 實踐多邊形設計

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

Chrome瀏覽器插件 “Full Page Screen Capture”分享響應式網頁設計版面截圖

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

如何改善使用者體驗以提高顧客忠誠度

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

IconFont(圖示字型)網頁Icon的最佳解

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

SVG邊框動畫提升網頁質感(上)

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

在controller裡面建立layout block

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

強大的前端框架工具Bootstrap 3介紹

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

如何利用 Z-pattern 模型 做出更好的佈局設計

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

如何針對 F-Pattern 做出更好的佈局設計

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

網頁設計的開始,版面設計–把消費者的視線留在你的核心內容

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

Axure RP 8版本-38個免費又實用的Widget Libraries

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

原型設計AXURE RP 8 專為企劃提案人員而設計的網頁模擬工具

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

打造PHP7與PHP5共存環境(Ubuntu)

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

Magento 2 結帳流程的優化與設計準則

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

使用Google Fonts 向 “新細明體” 說再見

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

讓你的Bootstrap下拉選單可以支援多層選單

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

購物網站設計趨勢(四):輕鬆找到商品,選單就是篩選器!

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

如何使用 Sass 開發專案

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

如何設計 Magento佈景主題 (2) – 使用sass開發

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

如何設計 Magento佈景主題 (1) – 開發前的準備動作

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

使用SelectBoxIt.js自訂你的下拉選單

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

Photoshop 教學【CC 影片編輯】影片遮罩效果

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

使用bootply測試您的Bootstrap 網頁

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

Photoshop教學:【CC好好用】響應式設計好幫手Device Preview

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

Photoshop教學【CC 影片編輯】分割影片

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

當只有一張圖片的時候、隱藏Bootstrap Carousel 的箭頭和按鈕

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

設計網站時,你是否考量過Ad Blockers的情況?

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

Photoshop教學【CC 影片編輯】圖層樣式動畫

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

Photoshop教學:【影片編輯】透明度動畫

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

如何解決網站圖片在iPad和iPhone上方向不正確的問題

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

SASS: 如何幫產生的css指定編碼為UTF-8

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

購物網站設計趨勢(三)-手機版網頁首頁設計

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

Photoshop教學【CC 影片編輯】調整影片色調

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

幫你的sass專案加上Autoprefixer功能

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

購物網站設計趨勢(二)-電腦網頁選單設計

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

SASS的二種註解方式 /* */ 與 //

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

網頁版面快速調整工具:快速移動瀏覽器物件

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

Sass的註解功能,讓除錯工作變得更簡單

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

如何修改Sass的輸出樣式

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

如何使用XENU查找網站的失效連結

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

幫Contact Form 7(WordPress外掛)聯絡表單 加上 Google event事件追蹤碼

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

修改設定,隱藏版本提高伺服器安全性

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

使用adapt.js快速將您的網站變成響應式網站

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

調整系統設定,再進一步增進Magento效能

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

Centos-PHP環境下設定Mssql連線功能與啟用

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

利用htaccess設定301 redirect

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

如何設計優良的行動網站 Part 1 – 首頁和網站導覽

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

利用Javascript,自製清理網頁元素工具

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

設定Meta tag,管理你的網站可見度

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

歐斯瑞的工具百寶箱大解密

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

純CSS的下拉式選單

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

網頁使用者互動設計(interactive design)與視差設計(parallax design)分享

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

CSS 濾鏡特效

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

滿版背景圖的製作方法- CSS & jQuery

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

8個免費工具幫助簡化前端開發的工作

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

12個結帳頁面的設計技巧

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

在您的網頁中新增 Google+ 追蹤按鈕

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

新一代多螢電商解決方案:響應式設計(RWD)

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

如何用CSS自訂網站反白文字?

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

如何使用css來隱藏placeholder文字?

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

使用響應式網頁設計的優點是什麼?

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