戰國策 24 小時客服專線 4499319(手機請加02)
27 1 月 2020

2020更新資訊,一篇輕鬆掌握WordPress網站架設大小事

wordpress網站說到網頁設計,許多人首先閃過腦海的都是WordPress網站架設,因為WordPress在現今網頁設計的世界當中,對於許多不是那麼熟悉網站架設語法的網頁設計人來說,可說是一大利器,因為WordPress不僅讓網站架設更加便利輕鬆,也幫忙免去了許多煩雜的語法設定,同時還結合了許多WordPress外掛程式以及電商功能,讓整體的網站架設更為簡單易上手。

 

WordPress網站範例

wordpress網站提到WordPress的厲害之處,從許多知名大網站都是使用WordPress網站來架設就不能看出,包括國際知名的雜誌Vogue、跨國電腦軟體Adobe的部落格、著名Walt Disney的官方網站、美國音樂龍頭Sony Music等等,都是使用WordPress網站架設而成的。

 

WordPress後台教學wordpress網站

圖片來源:維基百科

想要在WordPress網站架設專屬於自己的網頁其實並不困難,只需掌握簡單的幾個步驟,就可以架設好一個簡單的網站

1. 購買網址

架設往這的第一步,你需要西擁有一個專屬自己的網址,當然你也可以使用WordPress內建的免費網域,但如果想要專業點的,建議可以上像是戰國策集團購買網域。

2. 申請主機

擁有自己的網址後就要來申請主機,主機決定了網站整體的速度以及穩定度,網路上有許多提供免付費虛擬主機的服務,然而往往不穩定或是表現不甚理想,導致網站後續問題層出不窮,因此在挑選主機時千萬別為了金額而因小失大,應該挑選像戰國策集團這種擁有不同成功案例,口碑評價良好的主機供應商,才能取得合理價格,以及有一定的水準表現的速度與穩定度。

3. 設定網頁外觀

在有了自己的網址以及主機後,就可以開始進入網站內部設定,WordPress網站中提供許多不同類型的模板,有免付費以及付費的樣式,讓使用者可以根據自身的需求以及喜好選擇相對應的樣式,此外,也可以透過上傳的方式,將自己喜歡的主題樣式上傳到WordPress網站進行修改。換好了喜愛的樣式之後,也別忘記為自己的網頁設定專屬的logo,以上這些都可以在WordPress網站的「外觀」功能中進行修該以及調整。

4. 熟悉網站後台

在WordPress網站後台中,左方欄內有需多不同的設定功能,在欄位中你可以選擇你想要操作的功能,像是新增文章、上傳媒體、設定頁面、新增外掛、設定彈跳視窗等等,建議新手使用者可以一個一個點開去試試不同的功能,在摸索的過程中往往能獲得許多不同的經驗以及驚喜。

5. 新增內容

當基本設定都設定完成後,最重要的就是為你的網站加上你想呈現的內容,不論是部落格的文章或者是新的商品頁面、作品集等等,此外也可以設定網站專屬的頁首以及頁尾,內容新增完畢後,一個基本的網站就已經完成了!

6. 新增外掛

在WordPress網站中提供了許多免付費以及付費的外掛程式給使用者,從支援電商設定的woocommerce到幫助WordPress網站備份以及搬家的All-in-One WP Migration,許多不同功能的外掛程式都能在後台左方欄中的「外掛」選單中搜尋的到,使用者可以根據不同的需求進行關鍵字搜尋,也可以先在網路上做好功課後,選定欲下載的外掛工具,直接在搜尋列中進行搜尋。

 

WordPress外掛

Elementor Page Builder

wordpress網站

Elementor Page Builder是WordPress上一個網頁編輯器的外掛,它的操作介面直接不繁瑣、提供多元的擴充功能還可以即時預覽以及更新,此外Elementor Page Builder也支援繁體中文,讓使用者可以輕易藉由搭配Elementor Page Builder的使用,就在WordPress網站上建立出一個具有設計質感的網頁。更方便的是,Elementor Page Builder也提供了許多不同的設計模板給使用者使用,使用者只需要透過幾個按鍵的編輯以及拖拉,就可以快速建立區塊創建出網頁。

WooCommerce

wordpress網站WooCommerce是一個WordPress網站上的電子商務外掛,操作簡單、設定容易的特性,讓他在推出後,就受到許多商業網站的喜愛。

All-in-One WP Migration

wordpress網站All-in-One WP Migration讓使用者可以輕鬆的按幾個按鍵,就能完整匯出WordPress網站,從所有的內容、設計、媒體庫、佈景主題到外掛等等都可以一鍵下載下來,此外,匯出的檔案格式也根據使用者需求提供了不同的匯出檔案格式,讓要將網站搬移到另一個虛擬主機的網頁使用者免去了不少的麻煩。

 

雖看看似透過簡單的幾個步驟就可以使用WordPress網站架設出一個初步的網站,然而WordPress的功能以及設定一直不斷更新進化,對於有些不熟悉網頁架設或是沒有多餘時間摸索的人來說,還是有些困難,這時,適時的尋求像戰國策集團這類,針對不同的客戶需求提供不同網頁設計方案的網站架設公司,也可以獲得不少的幫助!

 

Share this
26 1 月 2020

RWD入門,2020最新攻略,響應式網頁設計一篇全搞懂

RWD

RWD,英文全名Responsive Web Design,中文譯作響應式網頁設計,顧名思義是一種前端網頁設計師或是後端工程師在設計網頁時,會運用到的一種技術做法,讓其網頁設計可以針對不同的裝置(例如桌電、筆電、平板、手機等等),而呈現出不同的瀏覽方式以及最適合的解析度,讓使用者在操作時,可以免去許多縮放或是捲動等行為。

 

RWD觀念

隨著近年來,行動網路與行動裝置的普及,使用者有越來越多的裝置可做為上網的選擇,從手機平板到桌機筆電,就算是在同種裝置分類中,也有許多不同的大小尺寸,為了因應這樣的趨勢,許多網頁設計師,開始針對不同的行動裝置以及尺寸做出不同的網頁版本,有的甚至會開發出手機APP,為了就是讓使用者有更好的使用體驗,然而在這樣龐大的做工下,同時也需要花費許多的人力、心力、時間以及預算成本去做維護。

 

RWD寫法

要設定網頁RWD,不外乎以下幾個步驟:

1. 設定HTML檢視區

所謂的檢視區(viewport)指的就是當使用者在瀏覽頁面時,顯示內容的畫面範圍。而不同的使用裝置,有不同的顯示範圍,這時為了讓網頁可以因應不同的螢幕裝置大小,就會在HTML的head中設定檢視區,來完成RWD的設定。

舉例來說:為了適合手機使用者的最佳閱讀解析度,W3C特地為手機版網頁制定了專屬的HTML檢視區語法:<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

 

2. 決定RWD外觀設計模式

RWD設定完HTML檢視區後,接著需要設定在不同的檢視區範圍下,網頁該如何配置以及呈現方式,目前RWD主要的五大外觀設計模式為:主體流動(Mostly Fluid)、欄內容下排(Column Drop)、版面配置位移(Layout Shifter)、微小調整(Tiny Tweaks)以及畫布外空間利用 (Off Canvas)。

 

3. 使用 CSS3 Media Queries

設定頁面的版面配置是CSS的主要工作之一,因此為了在RWD中可以針對不同瀏覽器的寬度,提供最合適的頁面樣式,就需要使用CSS3 Media Queries。舉例來說,當我們要針對「螢幕尺寸在 400 – 500px間,針對 <p> 設定字體大小為 20px 」:

<style>

   <!– 當螢幕大小在 400 – 500px 間時使用 –!>

 @media (min-width: 400px) and (max-width: 500px) {

  p {

    font-size: 20px;

  }

}

</style>

(min-width: 400px) and (max-width: 500px) 即是篩選條件,表示當螢幕大小在 400 – 500px 間時的 CSS 內容都包含在此範圍中。當我們使用Media Queries時,就能在你所預想設定的範圍下,呈現給使用者不同的畫面,包括字體大小、顏色、圖片大小等等。

另外,必須注意的是,一般在設定Media Queries時,內容的寬度、大小等等建議使用相對寬度而非絕對寬度,例如:min-width、max-width、min-height 和 max-height 等屬性,這樣才能讓在設定煩為下的檢視區達到最佳的RWD效果。

 

4. 使用相對比例的多媒體大小

最後,需要為不同的裝置,設定不同的多媒體(包含圖片、影片)顯示解析度,以符合不同的瀏覽模式,與設定Media Queries相同,建議使用相對寬度而非絕對單位。

 

RWD開發工具

RWD

對於不熟習撰寫語法或是初次接觸RWD設定的網頁設計人來說,在面對這些密密麻麻的文字以及不同的規定時,總需要能夠有一兩個實用的小工具來輔助,像是BootstrapZURB FoundationPure.css等等。這些工具內往往包含大部分在為網頁設定RWD時,會需要使用到的CSS工具以及語法,像是下拉式選單、表格、按鈕、格線等等。

如果有了小工具的輔助,還是覺得一頭霧水,不妨試試尋找專業的網頁設計公司來操刀,舉例來說戰國策集團,針對不同的客戶需求而制定不同的網頁設計方案,為網站提供更全面、專業的RWD設定。

 

順應當今的時代潮流以及使用者使用習慣的改變,RWD早已成為當今網頁設計不可或缺的重要一環,擁有設計精美的頁面早已不再是贏的使用者芳心的首要條件,而是針對不同使用者需求以及使用環境,提供不同的瀏覽方案。然而在眾多的使用裝置中,該如何通過最少的設定方式,滿足最多元的瀏覽頁面,這便是RWD設定誕生的原因,讓每個不同使用頁面大小,都能擁有最佳的使用體驗。

Share this
30 12 月 2019

2020 最新,網頁設計你不可不知的大小事

在網路世界當道的世代,許多企業開始投入愈來愈多的資源與心力在建立官網上,也因此促成了網頁設計軟體、課程相關以及像是戰國策集團這類提供網頁設計服務公司的蓬勃發展。然而看似直白的網路設計,卻暗藏了許多「眉角」,舉凡HTML 語法設定、CSS 設計、JavaScript、SEO 設定、使用者體驗、視覺設計、RWD 網頁設計等等,全都包含在了網頁設計中,環環相扣。

網頁設計範例

  1. 蘋果官網

    網頁設計範例相信大家對蘋果官網都不陌生,簡單俐落的風格,整齊的頁面排版和清楚的產品圖示,一目瞭然,搭配上巧妙的動畫設計,讓每次的瀏覽都是一次令人期待的視覺饗宴。

  2. Nike 商品頁

    網頁設計範例在Nike 的商品頁面中,針對每一項產品都有給出清楚的商品名稱、預覽圖、價格,以及可供選擇的顏色。左邊的側邊欄中,根據不同的消費者需求,給出了不同的篩選條件,大幅提高了使用者體驗的分數。

  3. Dropbox

    網頁設計範例Dropbox在使用RWD 響應式網頁設計上表現得非常出色。從電腦轉移到行動設備時,字體顏色以及大小不僅會根據不同的背景顏色做更改,連帶的圖片也會更改方向。此外Dropbox 也根據不同的瀏覽裝置,而制定不同傻用者體驗,例如,為了防止使用者疑惑,在電腦介面上有一個小箭頭符號,導引桌面使用者向下滾動以查看更多內容。然而當使用者是透過具有觸摸屏功能且可上下滾動的行動裝置時,小箭頭則會消失。

網頁設計軟體推薦

網頁設計軟體工欲善其事必先利其器,想要架設一個好的網站,首先你需要先有一個簡單上手、方便使用的網頁設計軟體,以下將分別推薦適合初學者或是進階使用者所使用的網頁設計軟體,以及不熟悉語法的使用者所適合採用的網頁設計網站。

  1. FontPage

    圖形化的網頁設計軟體,使用簡單,基本功能完善,適合網頁設計的初學者做使用。但其進階功能上卻稍嫌不足,因此比較少專業網頁設計者會使用。

    FontPage 主要由三個部分組成,分別是頁面製作的編輯頁、HTML 語法編輯器以及網頁預覽頁。而FontPage 的導覽模式以及所提供的版型,都能讓初學者在初期使用時,更清楚也更容易上手。

  2. Adobe Dreamweaver

    針對HTML 語法已經有一定了解以及基礎的使用者,Adobe Dreamweaver 將會是一個最佳的選擇。與FontPage 同樣採圖形化的設計,介面友善,使用門檻也不高。

    Adobe Dreamweaver 支持了許多不同的程式軟體,包括JavaScript、Java、Flash、ShockWave、Dynamic HTML 等等,因此在設計頁面時,不需安裝其他的外掛,大幅減少了許多繁複得步驟。另外值得一提的是。Adobe Dreamweaver 也支援Roundtrip HTML,因此當網頁設計者在使用時,可以自由在Adobe Dreamweaver 以及HTML 語法編輯器兩者間自由作切換,而不影響HTML 的語法結構,這讓網頁設計者能夠在不改變編輯習慣的條件下,就能享受視覺編輯器所帶來的優勢!

  3. WordPress

    對於不熟悉程式碼的使用者而言,Wordpress 即是首選。

    WordPress 功能多樣、完善且提供高度的自由以及彈性,不論是初學者到進階的專業使用者,都能選擇用Wordpress 作為網頁設計的工具。

    對於初學者而言,只要進入Wordpress 網頁,就可以跟著導覽的步驟,套入內建版型、安裝所需的外掛,輕鬆完成基本的網頁設計。而對於進階的專業者來說,Wordpress 也提供了許多非常專業的功能以及可塑性。

網頁設計教學網站

  1. W3CSchools

    網頁設計教學W3CSchools 是一個內容豐富、資料完整的網頁教學平台。W3CSchools 從基本的HTML、CSS 語法教學,到jQuery等等,都有提供完整的網頁技術教學。W3CSchools 也有提供中文版的教學網站,讓語言不會成為網頁設計者的一道門檻。

  2. jQuery

    網頁設計教學jQuery 是一套跨瀏覽器的的JavaScript Framework,在官網的資料庫中,針對了每個不同的屬性,都提供了詳盡的解說以及教學範例。

  3. SASS

    網頁設計教學SASS 是CSS 的一種擴充,可以幫助在編寫CSS 時更方便也更有效率,在SASS 的網站中,提供了許多有關SASS 編輯方式以及寫法規則的相關資訊。

  4. Node.js

    網頁設計教學在Node.js 官網上,針對如何建置Node.js 環境以及寫法規則都有詳細的解說,讓網頁設計者可以將JavaScript 變成一個後端的語言,而不再只是瀏覽器才能理解的前端語言。

網頁設計課程推薦

現今不論是坊間線上、線下或是政府機構,都有許多針對不同需求以及設計者程度所開設的網頁設計課程,舉例來說,巨匠電腦與行政院勞委會職訓局合作的政府補正案Hahow 好學校線上課程飛肯設計學苑或是台灣大學資訊系統訓練班等等。設計者可以根據自己想要加強的網頁設計技能去做選擇,也可以選擇比較彈性且上課時間地點自由的線上課程。

除了網頁設計課程之外,對於沒有任何經驗以及時間去學習和規劃一個完整的網頁設計企劃的公司來說,直接選擇一個擁有專業網頁設計服務的公司,相對會是一個更省時省力的方案,而目前也有須多提供這類服務的公司,像是戰國策集團等等,針對不同的客戶需求,提供不同的方案。

結論

網頁設計是一門非常寬廣的學問,從前端頁面到後端設定,要學完一套完整地網頁設計技能,往往需要耗時數年。此外,網頁設計的軟體以及功能日新月異,每隔一段時間就會有不同的變化,因此平時除了可以多瀏覽其他品牌的網站作為參考之外,也可以定期更新自己對網頁設計的知識,以便讓你可以在網頁設計這巨大的洪流中,可以如魚得水,悠游自得。

 

Share this
24 9 月 2019

行銷人該懂的跨部門數據

網路時代的崛起開啟行銷人的新世代,眾多新媒體、社群等行銷模式推陳出新,只要能完整吸引到顧客的眼球,在資訊量龐大的網路世界裡,行銷人就等於建穩了向上蓋樓的基底,從小部分的用戶開始,一步步向外推廣將用戶群體持續擴大。許多行銷人被看作是創意的源頭,但更多人不知道的是,行銷並非光有創意即可,優秀的行銷人不只懂得行銷專業,還必須熟知企業內用得上的跨部門數據,因為擁有這些數據,可以幫助行銷策略更加精準,將拳頭往對的地方伸出去。

read more

Share this
10 9 月 2019

雲端網站,效能最大化

雲端網站,透過將資料放在雲端上,網站得以擁有大量的資訊,同時完整地記錄顧客的個人訊息與消費歷程,在網路越趨發達的今日,用戶的網路的依賴感強烈,許多企業不再只用線下的方式進行宣傳,而更有效地利用雲端科技帶來的便利,將雲端與線上行銷做良好的整合運用,其中,雲端網站的建置與設計就是最重要的一環。
read more
Share this
20 4 月 2019

選擇低價網頁設計(程式開發)廠商的風險

選擇低價網頁設計(程式開發)廠商的風險

很多客戶在選擇接案廠商時往往會以價格作為選擇的考量,在台灣的網頁製作公司良莠不齊,所以挑選專業技術成熟的網頁設計公司也是十分重要,根據戰國策多年的經驗以下是必須考量的注意事項!

1.結案能力的風險
一位好的設計師成本約4~6萬/每月,一個專案若要1位設計師+1位專案經理要在1個月完成專案,製作成本至少要10~30萬元以上,如果網站報價為2~3萬元,當月必須至少同時接4個以上的專案才有辦法獲利或採用低薪的設計師來承做,任何公司都須獲利,報價過低的案件沒有合理的利潤,往往常發生製作品質及無法結案的問題,造成業主的金錢及時間上的損失。

2.設計水平的好壞與豐富的製作經驗
而選擇廠商要考量的重點: 廠商成立的時間?曾經接案的數量? 服務過專案結案滿意度? 承接案子的複雜與大小? 團隊的成員數及專業能力? 能否提供案例及後台? 好的設計能讓貴公司在競爭的層次領先與同業有差異化,並且讓貴公司擁有較好的報價優勢。

3.後續維護的風險
用低價接案的廠商往往利潤不夠造成虧損倒閉無法繼續經營,當初為業主所開發的程式或網站容易變成孤兒,或又沒有取得原始的程式碼或以封閉式程式或系統開發必須支付一筆費用,未來都容易發生後續維護及更新的風險。

4.發票的合法取得與合約在法律上的保障
很多個人或工作室由於未成立公司所以沒有發票,當業主需要發票核銷時,往往要透過買發票的方式取得,對於國稅局未來在查帳及金流稽核上會造成業主一定的稅務風險,另外很多接案者以是個人或工作室的身分在簽約上的法律效益不如和大公司簽約來的有保障。

5.製作中追加費用或必須快速結案,否則違約罰款
很多廠商以低價吸引客戶簽約製作,在後續的製作過程中以各種名目開始追增加費用,導致費用越加越多,進退兩難造。成業主在金錢上的損失。

Share this
20 4 月 2019

感謝法鉑馬賽黑肥皂選擇戰國策網頁設計服務

感謝法鉑馬賽黑肥皂選擇戰國策網頁設計服務
 
法鉑皂廠百年來皆延用法王路易十四於1688年所欽定的古法製作馬賽手工皂, 五個合計約有80噸容量的鍋爐每年可生產1,000公噸的法鉑馬賽肥皂,行銷至全球各地;經過百年歷史傳承,擁有法國唯一肥皂博物館,向全世界展示法國馬賽肥皂的工藝歷史。
1900 年,Marius Fabre先生在法國馬賽城外的Salon-de-Provence小鎮建造了他的第一座皂廠,開啟了法鉑馬賽手工皂的歷史。1927年,法鉑先生將皂廠搬遷至現址的19世紀建築物,目前由孫女Marrie-Helene與其夫婿共同經營者,現在大家所使用的法鉑系列商品皆出自這座百年皂廠。
法鉑馬賽黑肥皂
https://www.marius-fabre.com.tw/
 
戰國策網頁設計服務的五大服務優勢:
優勢一、提供全年無休服務
優勢二、提供網頁設計終身保固服務
優勢三、擁有近萬家的網站製作經驗
優勢四、一站式服務及豐富的主機管理維運經驗
優勢五、提供完整的網路行銷服務提升網站業績
 
關於戰國策
以主機服務為核心技術起源,多年深耕資訊市場成為亞洲主機服務的領導品牌,藉此優勢延伸多元化資訊服務,提供雲端服務,電子商務,行動商務,服務領域擴及全台、兩岸及亞洲市場。
 
免付費諮詢電話:0800-003-191
LINE ID:@119m
戰國策官網:https://www.nss.com.tw
圖片及文案取自客戶官網
Share this
20 4 月 2019

以WordPress架設網站被植入木馬造成無法運作 需本公司修復需處理公告

親愛的客戶您好:
若貴公司網站是以WordPress所架設(或一般網站)且被植入木馬造成網站無法使用或被google列為不安全網站
由於處理網站被植入木馬需專業人員且耗時處理 若需本公司修復我們需另收費處理費用是:
1.非本公司網頁設計客戶:20000元/每次(含裝網站防護木馬掃毒程式)
2.本公司網頁設計客戶:15000元/每次(含裝網站防護木馬掃毒程式)
 
提醒您應經常性更新網站(WordPress)系統安全程式漏洞或購買本公司網站防護服務
https://hb.nss.com.tw/index.php?/cart/-site-lock-/&step=0
Share this
20 4 月 2019

近期各企業委託戰國策改版中的網站製作前後的比較

好的設計能為企業多增加30%以上的業績,同時能比競爭對手報價多20%利潤
近期各企業委託戰國策改版中的網站製作前後的比較:

漢士公司改版前網站
http://www.carlife.tw/index.php
委由戰國策設計改版後網站(製作中)
http://carlife.31app.tw/

法寶企業改版前網站
http://www.fapolu.com.tw/
委由戰國策設計改版後網站(製作中)
http://fapolu.n9s.com/

台灣節能膜公司改版前網站
http://www.greenfilm.tw/index.html
委由戰國策設計改版後網站(製作中)
http://greenfilm.31app.tw/

日本知名的紅帽子喜餅改版前網站
http://www.highhat.com.tw/Stores_1.htm 
委由戰國策設計改版後網站 
http://new-highhat.31app.my/

Share this
20 4 月 2019

戰國策網頁設計服務收費自4/1起調漲通知

戰國策網頁設計服務收費自4/1起調漲通知

近日因本公司網頁設計服務案件量增加,為顧及本公司客戶專案服務之品質及製作水準,以及聘請更優秀的設計製作團隊,替客戶打造一流的企業官網,好的設計能為企業多增加30%以上的業績,同時能比競爭對手報價多20%利潤,因此我們將自4/1起調漲網頁設計服務之收費,感謝您的體諒與支持 !

戰國策集團
網站規劃免付費諮詢電話: 0800-003-191
官方網站 https://www.nss.com.tw
EMAIL:sales@nss.com.tw
LINE ID:@119m

Share this
Click Me