"November, 2014" 有20篇文章

首頁  /  2014  /  November

4個SEO優化不容錯過的設定!

有許多方法可以提升網頁自然排名,加強SEO優化。今天Astral Web要從網頁架構的角度來看SEO,和大家介紹4種優化設定,首先我們以在Google搜尋Magento 台灣,看看自然排名結果,詳見下圖。 接著來到第一名搜尋結果的網頁,檢視該網頁的原始碼。 上圖為網頁原始碼截圖,可看到幾個seo優化不容錯過的設定,接下來就讓我們逐一介紹吧! 一、宣告網頁內容的語言 這裡指的是網站的內容是英文、中文,還是日文。 <meta http-equiv=”content-language” content=”zh-Hant-TW”> 或

SEO小技巧─讓搜尋引擎愛上你!

想要提升網頁的自然排名,卻不知道怎麼做嗎?今天Astral Web要分享一些SEO技巧,利用免費資源和簡單的設定,就能大幅提升SEO,優化網頁排名! 使用關鍵字規劃工具,找出大眾最常使用的關鍵字 在編寫網頁內容時,是不是絞盡腦汁、毫無頭緒呢?為了讓搜尋引擎喜歡你,關鍵字是重要的辨識方法,但一個詞彙會有不同的解釋方式,像Responsive Design就有響應式設計和互動式設計這兩種說法。推薦你使用Keyword

網頁設計【認知篇】:網頁美工、設計師如何協助SEO搜尋引擎優化?

設計往往會追求美感,具有美感的東西容易吸引大眾注目,卻不見得會是「合適、友善」的設計。因此,我們通常會把設計美感當作基礎,將強化網頁、提升SEO搜尋引擎優化為首要目標。為了在美感與SEO中間找到平衡點,Astral Web要和大家分享網頁設計的經驗,希望能幫助大家找到方向! 在製作客戶網站時,「導航功能」是最重要的設計項目,最好要有清楚的視覺圖文設計,以加強網站導航,方便使用者瀏覽。美感的設計可以給予使用者較好的視覺形象。 有些網站會藉由發表文章增加瀏覽人次,設計師可協助製作文章圖片吸引使用者,還能將繁雜的文字變成淺顯易懂的資訊圖表(例如:說明圖、流程圖),幫助讀者了解內容。

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

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

Photoshop教學:【基礎篇】實用的建立剪裁遮色片

使用Photoshop有許多變化的小技巧,今天Astral Web要介紹的是「剪裁遮色片」,快速做出框架效果,還能編輯、調整主要圖片,若未來需要修改也能輕鬆編輯! 接下來就請跟著我們一起操作吧! 1. 開啟檔案。 2. 使用矩形工具。 3. 拉出一個框框當作背景。 4. 在矩形的圖層中點擊縮圖2下。 5. 更改想要的顏色。 6. 建立新的圖層。 7. 使用筆刷工具。 8. 選擇一個不同型態的筆刷。 9. 調整筆刷大小。 10. 用筆刷畫出一個可放置照片的區塊。 11. 置入一張照片。 12. 對著照片圖層點選右鍵,選擇 。 13. 可任意調整位置與大小。 14.

兩種方法:解決Magento無法使用WYSIWYG上傳圖片問題

在Magento中,我們很常使用WYSIWYG管理內容,例如首頁、產品頁面、客製化版塊、客製化網頁等,也常會上傳圖片來美化網站頁面,但如果遇到無法上傳圖片的問題時,該如何解決呢?本篇文章將提供你兩種解決方法,希望能幫助大家順利上傳圖片,美化版面! 使用WYSIWYG上傳圖片: 情況 1.:資料夾權限 假如在上傳圖片時,出現了類似上方圖示,或關於資料夾權限的警告,可以試著使用下列步驟解決: 1. 檢查 “Magento所在目錄/media/” 權限是否為755,若不是請修正為755。 2. 檢查 “Magento所在目錄/media/WYSIWYG” 資料夾是否存在,若不存在請建立該資料夾。

Google Adwords出價方式─以點擊計費的CPC(單次點擊出價)

Google Adwords關鍵字廣告提供多種出價方式,包含下列三種方式: CPC:單次點擊出價 CPM:千次曝光出價 CPA:單次轉換出價 今天我們要介紹的是CPC─單次點擊出價,其意義為每次點擊廣告的費用,可說是最常用的出價方式。選用CPC,曝光並不需支付任何費用,而是有人點選才會收費。實際收取的費用會經過Google Adwords計算,通常會低於最高單次點擊出價(商家願意支付的最高金額)。

電商趨勢─「一頁結帳 One Page Checkout」,快速結帳的關鍵!

好的購物網站往往重視消費者取向,網站設計越符合消費者喜好,就越能引起消費興趣。在時間就是金錢的時代裡,網路購物興起的一部份就是「省時方便」,不必出門(交通時間)、不必排隊結帳(等待時間),就能買到想要的東西。因此,購物網站的結帳頁面越簡短快速,就越能獲得消費者青睞。 為了加快結帳速度,購物平台發展出「一頁結帳 One page checkout」的模式,客戶不必跳轉頁面或多次點選下一步,就能快速完成結帳。 今天我們將以客戶網站(川川流真皮包包購物網站)為範例來介紹「一頁結帳 One page checkout」,讓大家了解一頁結帳的優點。 改版前:

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

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

塑造網站視覺風格,應該注意什麼?

架設網站需要考量的地方相當多,包括版面配置、是否使用響應式設計,功能操作有沒有符合使用者經驗等;其中最易影響使用者對網站的第一印象,就是網站的整體視覺風格。當使用者第一次造訪網站,最先看到的就是網站呈現的視覺形象,是清新的藍色、綠色系,還是甜美的粉色系。每種色系根據其訴求的形象又大不相同,例如主色調為黑色的網站,有可能是搖滾風格,也可設計成時尚、質感的網站。在塑造網站的視覺形象時,往往需要商家與設計公司良好的溝通,才能達成符合公司形象又帶有美感的網站。 今天Astral Web想和大家分享在設計網站視覺風格時,應該注意什麼地方,讓商家在個人喜好與使用者觀感中,找到最適合網站的形象。

如何更改Magento預設的姓名格式?(英文→中文)

由於Magento購物車系統的預設介面是英文,在訂單信件、會員後台等處的姓名格式會和中文相反,當客戶輸入資料、或是收到信件時,出現在後面的會是名字,例如 會顯示成 ,這是因為外國人的姓是放在後面。 所以在把Magento中文化之後,會遇到一些關於姓名格式的問題,這時候該如何解決呢? 要解決這個問題有許多方式,但今天我們要介紹的方法相當簡單,不需改寫程式碼就能完成。 上圖是中文姓名格式與外國姓名格式的比照圖,供大家參考。 First Name的中文是名字;Last Name則是姓氏之意,所以Magento網站在顯示名稱時,會變成 ,並不符合台灣的用語;那要如何變成 呢? 那就是把  

使用Keyword Tool(關鍵字工具),了解使用者的搜尋方向!

網路上有許多免費又好用的工具,今天我們要推薦大家一個查詢關鍵字的網站,只要輸入關鍵字,就可找出使用者在搜尋此關鍵字時,最常輸入的相關字串。幫助你了解客戶需求,進而改善網站內容。 首先請至Keyword Tool(關鍵字工具)網站:http://keywordtool.io/ 進入網站可看到關鍵字搜尋器;請先選擇你欲搜尋的網域,在此我們以台灣作示範,選擇 。 接著選擇搜尋語言,我們選擇 。 再來輸入搜尋關鍵字,我們以 為關鍵字,進行搜尋只要按右方的放大鏡即可。 接著,會出現使用者輸入關鍵字

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

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

Photoshop教學:【概念篇】如何正確選擇檔案尺寸?

Photoshop(以下簡稱PS)的運用範圍廣大,不論是設計印刷品、網頁或視訊影片等,都是PS的應用範圍。但不同領域會有不同的尺寸需求,要如何開啟適當的尺寸來設計呢?今天Astral web要帶大家認識開啟檔案尺寸的基礎,希望大家在進行不同設計時,更能清楚得知尺寸設定。 開啟PS後,可以先選擇檔案>開啟檔案。 接著會出現新增視窗,下列為欄位簡述: 名稱:請輸入檔名 預設集:選用PS已預設好的各類型與尺寸 尺寸:選擇預設類型中的尺寸 高度寬度:輸入畫面寬度/單位調整 解析度:輸入畫面解析度/單位調整 色彩模式:選擇色彩類型 背景顏色:開啟時畫面底色

如何使用CSS的「text-overflow: ellipsis;」屬性限制內容字數?

設計版面時,為了讓網頁更整齊,常需要限制文字的字數,當文字超過限制時會自動顯示”…”的刪節號。今天Astral Web要介紹如何限制字數,讓版面更整齊順眼;但這部分會用到程式碼較為複雜,需要有程式背景的人進行操作。 首先,單純使用CSS時,我們可以利用text-overflow: ellipsis; 這個屬性達到這個效果。 STEP 1: 先準備HTML <div class="box"> <p class="ellipsis">Astral

用Post-it app,在手機上管理你的便利貼!

很多人習慣用便利貼記下自己靈光一現的想法,但是到處貼的便利貼難免因為黏性減低而遺失,太多的便利貼也不方便管理,今天我們就用Post-it原廠出的App來管理便利貼吧! (以下以I Phone作示範) 1. 首先到App Store 下載Post-it Plus App。 2. 開啟App 3. 點下面的黃色圖示進入拍照畫面 4. 點選便利貼圖示拍下你的便利貼們,記得要連按兩秒鐘才會拍攝喔! 5. App會自動辨識每張便利貼。 6. 你可以幫這些便利貼命個名。 7.接下來可以用手指拖放每張便利貼進行分類。 8.完成! 以上就是我們今天的分享,希望能幫助大家順利使用便利貼應用程式,記住大小事喔!

教你設定Google Analytics自動報表,定期寄至指定信箱!

Google Analytics是Google提供的免費網頁分析,能記錄網站相關資訊,將資料數據化,以利管理員了解網站。如果你也和我們一樣藉由Google Analytics來檢視網站流量、熱門網頁等,有個小撇步要分享給你,只要在查閱的項目中做個簡單的設定,Google Analytics就會自動定期將流量報表寄到指定信箱,不怕使用者因為忙碌而忘記查看報表喔! 我們每個禮拜都會檢視有多少人造訪歐斯瑞官網,查看流量是否有成長,審視網站需要改善的地方。因此我們就以「所有流量」作設定示範。 首先請至左方選單的 → ,會看到網站的所有流量報告;請點選左上角的 進行設定。 接著設定相關資訊:

PhotoShop教學導覽,幫助使用者快速找到相關教學!

為了方便學習PhotoShop的朋友,Astral Web整理了一系列的教學導覽,希望能讓大家快速找到相關教學。教學導覽以修圖效果分門別類,可根據學習需求參考。 我們會陸續更新在點這裡→New!Photoshop 教學導覽 (每周更新)歡迎需要的朋友善加利用喔! 基本去背: PHOTOSHOP教學:【入門篇】使用筆型工具標準去背 PHOTOSHOP教學:【入門篇】使用魔術棒工具快速去背與限制 美化修飾: PHOTOSHOP教學:【入門篇】使用汙點修復筆刷工具快速修圖 PHOTOSHOP教學:【入門篇】讓你年輕20歲的除皺修圖技巧! PHOTOSHOP教學:【基礎篇】如何修飾張嘴的照片?

Photoshop教學:【進階篇】使用Photoshop自動對齊圖層工具合併全景照!

許多人喜歡用全景模式來拍攝風景,可以捕捉風景的全貌,展現景色的壯觀與氣勢。目前市面上的智慧型手機或相機已有全景模式的功能,但如果你想要更專業的全景照,可以使用數位相機或單眼來拍攝,再用PhotoShop來合成。雖然較為麻煩,但畫質會高出許多,並可降低重疊失敗的區塊。 今天Astral Web要和大家介紹如何合成全景照,展現風景的壯麗感喔!   步驟 1. 請先選取拍好的第一張全景照。 步驟 2. 置入Photoshop當中。 步驟 3. 此時就會開啟這張照片原本的尺寸。 步驟 4. 接著選取其餘的照片。 步驟 5. 將所有照片丟入在第一張圖的檔案中。 步驟 6.

Magento教學:如何在訂單信件增加產品圖片?

歡迎使用Magento購物車系統,今天Astral Web要和大家分享如何在訂單信件中,加入購買商品的圖片。一般來說,使用Magento預設的訂單信件,僅會顯示訂單資訊,不會有商品圖片;今天我們要教大家置入一段程式碼,即可在訂單信件中顯示購買商品的圖片,方便客戶確認訂單。由於此教學將會使用程式碼,因此適合有程式背景的朋友參考,以免操作不慎影響網站喔! 教學影片: . 首先請看Magento預設的訂單信件,範例如下: 可看到訂單信件有詳細的詳細內容,也有本次購買的商品資訊,卻沒有商品的圖片,客戶難以辨識。若能增加商品圖片,可以讓信件內容更豐富,方便客戶確認購買資訊。