請注意，這篇文章是針對初來乍到的行業(yè)，而不是經(jīng)驗豐富的設(shè)計師和開發(fā)人員。點的文章，是有意義的，面向未來的友好的網(wǎng)站建設(shè)的今天，包括策略，技術(shù)和工具，大多數(shù)網(wǎng)頁設(shè)計師到今天提供一般指引。

很久以前，在一個星系很遠(yuǎn)很遠(yuǎn)......一個年輕的設(shè)計師踏上史詩般的旅程布滿了危險的布局的挑戰(zhàn)，不斷的拖沓，狡猾的jQuery錯誤和致命的IE瀏覽器錯誤。這是一個成年禮，所有設(shè)計者必須采取以驕傲的挺立與他們的同齡人在這個廣闊的世界中，我們調(diào)用Web。是的，我在談?wù)摻⒆约旱耐顿Y組合網(wǎng)站。

我最近重新設(shè)計自己的投資組合網(wǎng)站。這是一個具有挑戰(zhàn)性的，但愉快的經(jīng)驗，我真的學(xué)到了很多東西。我的目標(biāo)是創(chuàng)造一種獨特的在線存在，代表我的個性和顯示我的詳細(xì)設(shè)計工作，當(dāng)然作為一個宣傳媒介獲得更多的曝光和業(yè)務(wù)。

看看我的設(shè)計和開發(fā)工作流程的幕后

收到一堆電子郵件，問我關(guān)于我的網(wǎng)站的重新設(shè)計過程中我做了設(shè)計決策后，我決定寫這篇文章給我的旅程和一些我一路上學(xué)到的東西偷看。我將討論在現(xiàn)代Web設(shè)計的好實踐，并在整個設(shè)計和開發(fā)的工作流程，我也跟著建立我的網(wǎng)站，從最初的規(guī)劃階段到最后的直播網(wǎng)站，包括以下步驟：

• 項目規(guī)劃，
• 品牌，
• 線框
• 響應(yīng)式設(shè)計和靈活的電網(wǎng)，
• LESS和上海社會科學(xué)院
• 高清晰度的屏幕，
• 靈活的圖像，
• 內(nèi)容的動畫，
• WordPress的開發(fā)，
• 測試和分析。

我希望這有助于激勵其他設(shè)計師那里誰正在尋找創(chuàng)造自己獨特的產(chǎn)品組合網(wǎng)站。我們已經(jīng)得到了很多打通，讓我們開始吧。

計劃項目

定義你的簡介

任何項目我做的第一件事是弄清楚正是我想要實現(xiàn)的，我把它寫下來。該項目的目的是什么呢？我試圖解決什么問題？我的目標(biāo)是創(chuàng)建一個在線的配置文件，以促進(jìn)我的設(shè)計工作，并獲得更多的曝光。我需要能夠?qū)懳恼拢故疚业脑O(shè)計工作和人我很容易聯(lián)系。我也希望它是獨特而難忘的，代表我的個性。

在這一點上，我們需要弄清楚我們的最終目標(biāo)，我們并不擔(dān)心，我們將如何到達(dá)那里。寫下你的目標(biāo)，并回頭看他們在項目的后期階段，以確保你的軌道上。

初步研究與設(shè)想生成

做一些初步研究，獲得源源不斷的創(chuàng)意。靈感可以來自任何地方，可以隨時罷工，往往當(dāng)你在床上入睡（當(dāng)然，不是一個筆記本電腦在視線）瀕臨。有時你可能想看看在其他網(wǎng)站的靈感，但有時不看其他設(shè)計師們做的是最好的，因為一旦你見過它，想著自己的想法可能很難。

相反，一杯茶，找一個舒服的地方，集思廣益自己的解決方案，以手頭上的問題。在這個階段，所有你需要的是一支筆，一個速寫本，你的想法。希望，你會拿出創(chuàng)新的東西，還沒有做過。您可以采用很多方法產(chǎn)生的想法。有一個覺得你的個性是什么讓你作為一個設(shè)計師獨特的。你的興趣是什么？你是如何不同？你有一個特定的設(shè)計風(fēng)格？你專注于某一方面設(shè)計？你有沒有特別大的耳朵？那代表著你的角度和集成到你的設(shè)計。

賈斯汀·阿吉拉爾在他的投資組合中，說明了他的工作空間。

孟要得到他的案例研究開門見山。

斯蒂芬·伯吉斯是一個開發(fā)者，但以他獨特的網(wǎng)站上顯示了一個偉大的設(shè)計和UX的理解。

一些初步的研究之后，我寫了一些想法和元素在我的投資組合包括：

• 我的技能是一個混合的編碼和設(shè)計，我想這是突出的。
• 我是一個大風(fēng)扇，簡約的設(shè)計，要堅持主要是黑色和白色的調(diào)色板，讓設(shè)計彪炳。
• 我想用我自己的照片作為一個英雄形象注入到網(wǎng)站的一些個性。
• 我喜歡看到動畫的經(jīng)驗，因為我向下滾動頁面。
• 我從來沒有喜歡的方式，在其中一個網(wǎng)頁的抽搐到另一個，所以我想我的過渡是平滑的。
• 我喜歡大方量的白色空間和全寬度的布局。
• 手機和平板電腦用戶獲得好體驗，也有對我很重要，因為我想響應(yīng)。
• 我希望我的案例研究，講一個故事，關(guān)于我的設(shè)計過程中，而非僅僅是沒有上下文的隨機圖像畫廊。

創(chuàng)建時間軸

一旦你的想法，你知道哪個方向前往，得出一個粗略的時間表。我不是說嚴(yán)格的期限或什么，但更多的指南，以幫助您組織的任務(wù)和保持生產(chǎn)力和動機。簡單地列出你需要做的任務(wù)，并估計所需的時間，每個人將采取。這會給你一個粗略的估計，該項目將采取多久，以及創(chuàng)建一個任務(wù)列表工作。當(dāng)然，你的一些估計可能有點過，但你可以調(diào)整時間軸，當(dāng)你去。組織的一位很長的路要走，所以進(jìn)入這個習(xí)慣。

設(shè)計

設(shè)計你的品牌

你的品牌是基本的視覺語言來描述你是誰，決定別人怎么看你。我想傳達(dá)一個干凈，時尚和最小的外觀和感覺。我一直很簡單的事情，并決定創(chuàng)建一個標(biāo)志，從我的首字母縮寫，使用最少的黑色和白色的調(diào)色板。我勾勒了一些想法，并決定最終的標(biāo)志（我畫在Adobe Illustrator）之前嘗試排版和字母的排列。如果你有麻煩來了一個標(biāo)志，你可能想讀“ 標(biāo)志設(shè)計的系統(tǒng)方法?！?/p>

我的最終標(biāo)志設(shè)計

作為我的品牌，我也想為我的網(wǎng)站和各種社會化媒體平臺的設(shè)計頭像。那就需要我作為一個設(shè)計師和開發(fā)人員的代表，而獨特而難忘的。經(jīng)過無數(shù)小時的頭腦風(fēng)暴（更像拖沓），我終于有了一個想法是有道理的。當(dāng)時的想法是，我的臉拍一張照片，并把它的一半。我一面描繪創(chuàng)意的設(shè)計師，而其他會顯示我的邏輯編碼端。經(jīng)過無數(shù)次的草圖，并在Photoshop中擺弄了很多，我終于高興的理念。我用粉彩，垃圾風(fēng)格的畫筆和口罩，以達(dá)到美觀的，我是后。

創(chuàng)建內(nèi)容

許多設(shè)計師離開內(nèi)容創(chuàng)作，直到結(jié)束，因為他們更感興趣的布局和美學(xué)（有趣的東西）。早在項目創(chuàng)建內(nèi)容，因為這將決定設(shè)計。你需要什么樣的信息傳達(dá)給游客？想想你想要說什么，怎么說。給定的點應(yīng)該寫成簡單的文字，或?qū)⑺鳛閳D像或圖表更有意義嗎？

簡潔，友好的，在您的副本。我喜歡寫的第一人，使其感覺更加人性化。打破成小塊，以提高可讀性和可掃描副本。我的內(nèi)容，我寫了一個草案，并打破它分解成六個主要部分組成：主頁介紹一下我，被我的地方，我的設(shè)計工作，我的博客，我的聯(lián)系方式。

顯示你的工作

你的工作是最重要的一塊內(nèi)容，在投資組合中，因為它是大多數(shù)游客都進(jìn)來看看。收集你最好的項目，背后都有解釋的過程和工作流程。沒有什么是比隨機圖像沒有上下文或解釋的一個模糊的組合。只包括你正在尋找的工作類型做多，而不是所有的工作，將幫助您針對正確的客戶。

你的潛在客戶會希望看到你的工作中盡可能詳細(xì)，所以不縮小到一個小尺寸的。我決定保留的實際尺寸，如果可能的話，很容易讓游客快速瀏覽我的工作。我也決定說說我遇到的挑戰(zhàn)，以及如何我試圖解決這些問題。設(shè)計是解決問題，所以讓游客知道為什么設(shè)計的外觀和它的運作方式是非常有用的，它也給你一個機會，以反映你的工作和你的設(shè)計過程，并可能會提高它下一次。請記住，你講一個故事，所以它一直對我很重要，有趣和翔實盡可能。

軟門面漂亮，深入的案例研究。

現(xiàn)在想通了，我們的內(nèi)容，我們可以移動到繪制線框圖。

素描線框

是簡單而有效的方法，我采取線框，和所有你需要的是一支鋼筆和速寫本。我先列出所有的元素，包括一個Web頁面上。然后，我組相關(guān)的元素，優(yōu)先考慮這些群體之前，根據(jù)重要性。這里是我接觸頁面的元素列表。

我的聯(lián)系方式頁面的元素列表

一旦該頁面的內(nèi)容分為優(yōu)先級，安排他們在頁面上會容易得多。對頁面頂部放置更重要的元素，并使用白色空間來創(chuàng)建分組。我把桌面的方法，因為我想專注于細(xì)節(jié)的大屏幕上顯示我的工作。當(dāng)我們來到以后寫CSS，我們將移動第一種方法，這將簡化代碼（我們將在不久）。我通常用鋼筆和紙繪制我的線框，但您可以使用Balsamiq甚至是Photoshop或Illustrator 工具如。下面是我的聯(lián)系方式線框。它并不需要看起來很漂亮-它只是一個工作計劃的一個網(wǎng)頁。

聯(lián)系頁面線框

響應(yīng)式設(shè)計和靈活的網(wǎng)格

我想，以我的網(wǎng)站響應(yīng)，以確保獲得好體驗，臺式機，平板電腦和手機上的游客。在設(shè)計網(wǎng)站時，我喜歡用一個網(wǎng)格，因為它提供了結(jié)構(gòu)基礎(chǔ)，同時使開發(fā)過程更加容易和高效。約書亞莫爾丁總結(jié)了電網(wǎng)相當(dāng)不錯：

想想它像一所房子的基礎(chǔ)。有了一個堅實的基礎(chǔ)，房子是穩(wěn)定的，并且它的建筑是很容易的。有了堅實的電網(wǎng)，你的設(shè)計可以很容易地調(diào)整以適應(yīng)任何變化隨之而來。

有些設(shè)計師找到一個網(wǎng)格限制，但它確實取決于設(shè)計。我覺得這會導(dǎo)致在一個整潔的和更有組織的設(shè)計。我的設(shè)計是相當(dāng)簡單的，所以我使用了一個定制的12列靈活的網(wǎng)格，但16列的網(wǎng)格會給更多的定義和準(zhǔn)確性。我還定義了一個大寬度為1040像素，以確保設(shè)計看起來并不大屏幕上拉伸。

使用靈活的網(wǎng)格（而不是三個獨立的固定寬度為手機，平板電腦和臺式機），使一個網(wǎng)站，動態(tài)擴展，以適應(yīng)任何設(shè)備寬度。下面是我響應(yīng)電網(wǎng)的CSS，但覺得免費創(chuàng)建自己的設(shè)計，以適應(yīng)。所使用的工具，如Gridpak，響應(yīng)電網(wǎng)系統(tǒng)，金網(wǎng)格系統(tǒng)和Responsify創(chuàng)建自己的響應(yīng)電網(wǎng)。我從幾個這些工具來創(chuàng)建自己的自定義靈活的網(wǎng)格思想。

看著上面的CSS后，你可能會想知道如何[^類=“山坳” CSS選擇器的工作原理。它實際上是被稱為一個子串匹配的屬性選擇器，它是所有選擇的任何類的字符串開始山坳。您還可以使用串匹配選擇其他屬性與某些字符串，甚至是那些含有某些字符串。串匹配是一個方便的方法來創(chuàng)建更復(fù)雜，更強大的CSS選擇器，并且他們很好的支持，也早在Internet Explorer 7的。

HTML是相當(dāng)簡單的，太多，很象一個表的行和列組成。下面是一個簡單的兩列響應(yīng)電網(wǎng)，我在我的網(wǎng)站上使用。左欄跨越五列，而右側(cè)立柱跨越七個。

設(shè)置邏輯斷點

當(dāng)你設(shè)計一個負(fù)責(zé)任的網(wǎng)站，在一定寬度的布局將打破或文本將成為壓扁，難以閱讀（45至75個字符是一個舒適的，每行的長度）。這些特殊的寬度被稱為斷點，他們往往設(shè)置，如常見的設(shè)備寬度為移動320至480像素，768到1024像素的片，和1024像素，高為臺式機。問題是“常見的”寬度真的不存在了，越來越多的設(shè)備，因此這個解決方案不能很好地擴展。

內(nèi)容，而非設(shè)備寬度的基礎(chǔ)上設(shè)置斷點，是一個更具擴展性的解決方案。例如，而不是一味地寬768像素，為平板電腦設(shè)置一個斷點時，我不是看著我的內(nèi)容，發(fā)現(xiàn)它看起來很好，直到它得到了擠壓下600像素。因此，我設(shè)置一個斷點，改變布局，以確保內(nèi)容依然清晰可辨低于這個寬度在600像素。是的，你需要優(yōu)化您的網(wǎng)站的介紹各種設(shè)備，但你的內(nèi)容應(yīng)始終確定斷點所在。這些都是我需要為我的設(shè)計：320，600，1024和1140像素的四個斷點。

在編寫CSS媒體查詢我的網(wǎng)站時，我拿了一個移動優(yōu)先的方法。這基本上意味著編寫手機的樣式首先是作為我的基地，平板電腦，然后在桌面樣式。手機款式一般都是比臺式風(fēng)格簡單，所以寫他們首先是有道理的。它們構(gòu)成了你的風(fēng)格的基礎(chǔ)，更寬的屏幕，然后，我們可以添加更復(fù)雜的樣式。層疊樣式表以這種方式保持清潔和干燥你的代碼（“ 不重復(fù)自己“）。

下面是我使用的媒體查詢：

/ *手機樣式先走，沒有媒體的質(zhì)疑。* /@媒體只有屏幕（的min-width：321px）{/ *較大的移動樣式（寬度大于320像素）* /}@媒體只有屏幕和后（的min-width：600px的）{/ *的平板樣式（寬度大于600像素）* /}@媒體只有屏幕（的min-width：1024px）{/ *大筆記本電腦樣式（寬度大于1024像素）* /}@媒體只有屏幕（的min-width：1140px）{/ *桌面樣式（寬度大于1140像素）* /}

定義的斷點，我可以勾畫的平板電腦和移動線框。有時，小型設(shè)備上隱藏或省略的內(nèi)容是有道理的，但我想盡可能在所有設(shè)備上提供盡可能多的內(nèi)容。移動用戶為什么要錯過有價值的內(nèi)容？人們習(xí)慣于在手機上滾動，無論如何，所以首先想到之前刪除或隱藏內(nèi)容。最簡單的解決方案并不總是最好的之一。

設(shè)計高保真樣機的

一旦在桌面和移動線框勾勒，我搬進(jìn)了Photoshop和嘲諷更詳細(xì)的網(wǎng)站。我不喜歡花太多時間，因為它減緩了發(fā)展過程，在Photoshop中。不要過分擔(dān)心創(chuàng)建一個像素好的設(shè)計，你就會有時間來完善它在編碼過程。相反，簡單地模擬了主要的頁面模板，以及與其他任何你需要的設(shè)計元素和資產(chǎn)。我嘲笑頁眉和頁腳，以及“關(guān)于我”頁面下方的基本要素，以確保與審美，我很高興。

“關(guān)于我”頁面樣機

同樣，我也沒有嘲笑任何手機或平板電腦的設(shè)計在Photoshop，因為我發(fā)現(xiàn)，簡單的編碼這些基于線框更快。然而，我沒有，花一些時間，如圖標(biāo)和紋理細(xì)節(jié)，在波蘭的最后網(wǎng)站，它可以使一個很大的區(qū)別。

開發(fā)

現(xiàn)在我們的網(wǎng)站策劃和準(zhǔn)備去我們的形象資產(chǎn)，是時候開始編碼。所以，讓你的耳機和喜愛的文本編輯器！我的文字編輯器的選擇是崇高的文本。很簡單，速度快，功能強大且易于使用。如果你是一個Windows用戶，我建議你記事本+ +。

我通常從Web頁面的頂部，并逐一建立的每個元素。讓我們開始與標(biāo)題導(dǎo)航。我喜歡寫出來的HTML元素，然后再移動到的CSS。請記住，我們實際上是在創(chuàng)建移動版本，首先減少代碼膨脹。根據(jù)項目的復(fù)雜性，你可以從頭代碼，或使用HTML5樣板，基金會或指南針這樣的框架。

CSS預(yù)處理器（扣除/薩斯）

如果您還不熟悉CSS預(yù)處理器如和薩斯，肯定熟悉他們，因為他們會為您節(jié)省了很多的時間和精力，將簡化你的CSS。預(yù)處理器給你更多的權(quán)力，使您能夠使用面向?qū)ο缶幊痰氖址▽懽黠L(fēng)格時，CSS編碼時。

LESS和Sass CSS預(yù)處理器

我們都希望，我們可以在CSS中使用變量，定義，而無需不斷地復(fù)制和粘貼功能和重用代碼片段。CSS預(yù)處理器使您能夠做到這一點，要多，而你的風(fēng)格保持清潔和有組織的。小于或薩斯代碼，然后編譯和輸出作為常規(guī)CSS。

我用我的網(wǎng)站創(chuàng)建的CSS。LESS和Sass都嘗試后，我覺得，薩斯更強大，所以我會從現(xiàn)在開始堅持它?？死锼笴oyier 比較LESS和Sass都顯示了兩者之間的微妙而重要的差異。對我來說是決定性的因素，它采用了羅盤，使您可以訪問庫的有用和維護良好的混入少不。隨時看你喜歡自由發(fā)揮。

逐步加強與MODERNIZR的

Modernizr的是一個JavaScript庫，在用戶的瀏覽器的HTML5和CSS3功能檢測，并增加了這些功能類在元素。我們都希望利用最新的CSS3和HTML5功能，但舊的瀏覽器不支持他們發(fā)生了什么？Modernizr的基本上告訴我們，哪些功能是在訪問者的瀏覽器的支持，讓我們寫條件對每一種情況的CSS和JavaScript。因此，我們可以很容易地逐步提高，每個人都具有的基本功能，同時增強了經(jīng)驗，為那些與現(xiàn)代的瀏覽器。

創(chuàng)建靈活的圖像

靈活的圖像是一個簡單而重要的組成部分，任何響應(yīng)網(wǎng)站。為了讓您的圖片靈活，只需將它們放置在響應(yīng)網(wǎng)格容器，并添加下面的CSS樣式表。插入使用的標(biāo)簽，雖然有很多方法來實現(xiàn)靈活的圖像使用CSS背景圖像，太。如果你想獲得更多的技術(shù)和服務(wù)于不同的圖像，根據(jù)正在使用的設(shè)備（例如，服務(wù)小影像手機，以節(jié)省帶寬），你可以看看某些技術(shù)服務(wù)真正具有響應(yīng)性的圖像和避免重復(fù)下載圖像。

IMG{大寬度：100％;高度：自動重要;}

使用CSS圖片精靈

我們都知道我們的圖標(biāo)和圖像資產(chǎn)組合成CSS精靈，而不是把多個單獨的圖像加載此起彼伏。這將減少加載時間，使您可以輕松編輯和維護映像文件后。我通常創(chuàng)建一個網(wǎng)站的不同部分的幾個精靈。例如，一個包含了所有我的精靈我的圖標(biāo)，而另一個包含全局元素（包括徽標(biāo)，頭圖標(biāo)，導(dǎo)航背景和頁腳圖標(biāo)）。

創(chuàng)建精靈時，想想你的網(wǎng)站將如何加載。如果一堆圖標(biāo)僅用于在單一頁面上的網(wǎng)站，然后將他們從主精靈。這將確保他們只在需要時才加載，同時保持你的主精靈小。使用精靈也將使其更容易準(zhǔn)備您的圖像高清晰度屏幕后。這個過程可以是麻煩，所以使用一個方便的工具，如雪碧?？焖?，輕松地創(chuàng)建它們。您還可以使用Sass和指南針的組合，從單獨的圖像自動生成精靈。

迎合高清晰度屏幕

為了確保您的網(wǎng)站看起來清晰高清晰度（或“視網(wǎng)膜）屏幕上，盡可能使用CSS進(jìn)行演示。請記住，一些新的CSS樣式將不會呈現(xiàn)在老的瀏覽器 - 這是漸進(jìn)增強有道理。在大多數(shù)情況下，你將不能夠完全建立的網(wǎng)站，從CSS，你需要的圖像。幸運的是，準(zhǔn)備您的圖像的高清晰度屏幕并不難。

基本上，你需要創(chuàng)造更大的版本，您的圖片上使用的高清晰度畫面。因為我們的圖像中包含的一個精靈，所有我們需要做的是創(chuàng)建另一個版本的精靈，這正是大兩倍。比方說，我們的精靈名為sprite.png的，我們將命名為高清晰度精靈sprite@2x.png的。為了減少加載時間（尤其是在移動設(shè)備上），壓縮您的圖像JPEGmini，TinyPNG或者，如果你在Mac上，ImageOptim。

只需創(chuàng)建另一個圖像高清設(shè)備的原始大小的兩倍。

一旦你創(chuàng)建了較大的圖像，只需使用媒體查詢，高清晰度屏幕上顯示的圖像。要小心，因為媒體查詢的iPhone是不是唯一的高清設(shè)備此刻周圍。還有其他的手機，以及采用Retina iPad和MacBook Pros筆記本電腦。我用兩個高清晰度的媒體在我的網(wǎng)站上查詢：第一個高清晰度的移動設(shè)備，平板電腦和筆記本電腦的第二個。

下面是針對高清晰度屏幕媒體查詢：

@媒體只有屏幕（-webkit的最小設(shè)備像素比：1.5）只有屏幕（最小 - 萬盎司設(shè)備像素比：1.5）只有屏幕和（分設(shè)備像素比：1.5）{/ *目標(biāo)的所有高清晰度的屏幕。* /}@媒體只有屏幕（的min-width：600px的）和（-webkit的最小設(shè)備像素比：1.5）只有屏幕（的min-width：600px的）（最小 - 萬盎司設(shè)備像素比：1.5）只有屏幕（的min-width：600px的）（分設(shè)備像素比：1.5）{/ *目標(biāo)超過600個像素寬屏幕高清設(shè)備。* /}

那豈不是巨大的，如果我們能完全消除需要媒體的查詢和獨立的高清晰度圖像？一個更好的方法，以滿足高清晰度的屏幕是使用向量的圖像，這將擴展，以適應(yīng)任何屏幕尺寸，并期待在任何設(shè)備上清脆。您可以繪制你的圖像或圖標(biāo)在Illustrator和它們導(dǎo)出為可伸縮矢量圖形（SVG）文件。SVG文件基本上是由基于XML的代碼，它描述了圖像瀏覽器。

另一種聰明的方式來獲得清脆的高清設(shè)備上的可伸縮矢量圖標(biāo)看起來是使用圖標(biāo)的字體，如從IcoMoon和字體真棒。我沒有在我的網(wǎng)站上使用這些方法，主要是因為我沒有太多的圖標(biāo)或矢量圖像。但是，如果你打算使用矢量圖像和圖標(biāo)在您的網(wǎng)站更嚴(yán)重，那么這些技術(shù)將派上用場。

頁面轉(zhuǎn)換

我從來沒有去過的粉絲突然的方式，一個Web頁面跳轉(zhuǎn)到另一個。當(dāng)用戶點擊一個鏈接時，通常都會有大幅上升，其次是圖像笨拙加載頁面上沒有特定的順序。我想，創(chuàng)造一個平穩(wěn)過渡，從一個網(wǎng)頁到訪問者瀏覽網(wǎng)站的方式來控制我的內(nèi)容出現(xiàn)。當(dāng)訪問者點擊一個鏈接到另一個頁面，當(dāng)前頁面應(yīng)該淡出白色之前翻頁負(fù)載。下一頁將一個白色背景，從內(nèi)容到頁面上會順利動畫。這使得一個愉快的和一致的用戶體驗。

要實現(xiàn)這一過渡的效果，我需要使用一個jQuery的預(yù)加載插件，如jPreLoader或QueryLoader2的。這確保了圖像之前加載到頁面上的動畫（否則，動畫會出現(xiàn)圖像加載之前）。當(dāng)談到Web開發(fā)jQuery插件不應(yīng)該是您的第一選擇，因為你依靠的jQuery和它是一個性能命中。它總是一個更好的主意，更輕巧，單一用途的JavaScript庫和搜索，而不是使用它們。在某些情況下，你也可以使用CSS過渡。

我不是一個風(fēng)扇一般預(yù)加載，因為用戶要等到頁面加載，什么都看不到，但使用是必要的，以達(dá)到我想要的效果。我要去嘗試隱藏預(yù)加載頁面時，快速載入，并介紹它，只在長頁面加載。這意味著，大多數(shù)人只看到一個頁面無縫褪色下，沒有被顯示預(yù)加載。我很希望聽到任何其他的方法來實現(xiàn)，而不需要預(yù)加載的頁面過渡。

下面是一個簡單的jQuery功能淡出當(dāng)訪問者點擊一個鏈接的頁面：

/ **功能動畫離開頁面* /$。FN。leavePage=功能（）{點擊（函數(shù)（事件）{/ /不要去到下一個頁面。事件的preventDefault（）;linkLocation=。HREF;/ /淡入淡出此頁$（'身體'）。淡出（500，（）{/ /然后去到下一個頁面。窗口位置=linkLocation，}）;}）;};/ **調(diào)用的leavePage功能鏈接后，點擊“轉(zhuǎn)型”類* /$（'過渡'）。leavePage（）;

我想的leavePage動畫發(fā)生當(dāng)訪問者點擊我的網(wǎng)站鏈接到另一個頁面，所以我只是說一個過渡類的適當(dāng)鏈接。當(dāng)訪問者點擊任何鏈接的過渡類，的leavePage動畫被觸發(fā)。這個例子很簡單，但你可以建立更復(fù)雜的動畫。

因此，用戶點擊一個鏈接，當(dāng)前頁面淡出，他們已經(jīng)降落下頁?，F(xiàn)在發(fā)生了什么？我們的jQuery預(yù)加載需要照顧的休息。預(yù)加載基本上是一個覆蓋顯示，因為它涵蓋了頁面加載。加載完成后，覆蓋消失，以顯示該頁面。當(dāng)然，你也可以創(chuàng)建自己的自定義動畫更有趣的方式在頁面上的動畫內(nèi)容。

我不會進(jìn)入太多細(xì)節(jié)，因為有很多方法到頁面上的動畫內(nèi)容。你可以滑動的內(nèi)容，在從側(cè)面看，后另一種元素，或淡入元素從頂部到底部?；旧夏阒恍枰帉懸粋€函數(shù)，動畫內(nèi)容到頁面上，然后調(diào)用這個函數(shù)一旦頁面完全加載。幸運的是，上述兩個jQuery的預(yù)加載器，使您能夠調(diào)用動畫功能頁面完全加載后的回調(diào)函數(shù)。

防止無樣式內(nèi)容的FLASH

其中最惱人的問題，我面對的在努力實現(xiàn)頁面之間的平穩(wěn)過渡jQuery的預(yù)加載之前無樣式內(nèi)容（FOUC）的閃光燈，甚至開始。它并不總是存在，但每一個現(xiàn)在，然后我看到了一些內(nèi)容到頁面上閃爍的動畫前，甚至開始。幸運的是，我發(fā)現(xiàn)了一個干凈和簡單的方式，以防止FOUC好的作品。

動畫內(nèi)容滾動

我愛的想法，包括訪客微妙的動畫滾動下來的頁面。它已經(jīng)成為最近的一個趨勢位，而且我認(rèn)為它改善了用戶體驗，并增添了一絲雕琢。我用一個簡單但功能強大的jQuery插件稱為航點創(chuàng)建滾動動畫。它使您能夠在不同的頁面滾動距離觸發(fā)動畫。

如果你正在尋找一種簡單的方法做更復(fù)雜的動畫滾動，然后檢查出jQuery插件SuperScrollorama。

自定義WORDPRESS的發(fā)展

我決定建立在WordPress我的網(wǎng)站，主要是因為我很熟悉它，希望博客功能。能夠輕松地安裝插件添加功能也是一個不錯的節(jié)省時間。安裝WordPress的服務(wù)器上，并把靜態(tài)的HTML頁面到WordPress的主題是一個非常簡單的過程。如果你不熟悉的WordPress，你總是可以使用另一個平臺，如Drupal的。還是覺得自由只是建立在PHP從頭（取決于網(wǎng)站的復(fù)雜性）。

因為一些我的網(wǎng)頁有相當(dāng)不同的布局，我需要一個自定義網(wǎng)頁模板。舉例來說，我不能用一個標(biāo)準(zhǔn)的WordPress頁面我的首頁設(shè)計，因為這是完全不同的。所以，我創(chuàng)建了一個自定義的主頁模板。在WordPress創(chuàng)建自定義頁面模板是很容易的。我也為我的投資組合項目頁面和聯(lián)系方式頁面創(chuàng)建自定義模板。

為了把我的投資組合項目從我的博客文章發(fā)表，我創(chuàng)建了一個自定義的類型后，特別是我的投資組合項目。你可能會得以脫身顯示你的投資組合項目，博客文章和分類 中的“組合”類別，將它們分開，從標(biāo)準(zhǔn)的博客文章。我需要一個自定義文章類型不同布局的靈活性。我不會得到任何更詳細(xì)的關(guān)于WordPress的開發(fā)，因為已經(jīng)有很多偉大的WordPress文檔。

檢測和分析

跨瀏覽器測試

我敢肯定，你都知道測試，以確保您的網(wǎng)站正確呈現(xiàn)各相關(guān)瀏覽器的重要性。你會注意到，我并沒有說“所有的瀏覽器，”因為你真的只需要確保您的網(wǎng)站為您的特定受眾正確呈現(xiàn)。如果你知道所有的訪問者將使用現(xiàn)代的瀏覽器，那么你不支持舊的，需要花費寶貴的時間和精力。

測試你的網(wǎng)站的主要瀏覽器。

那么，你怎么測試一個網(wǎng)站在所有相關(guān)的瀏覽器嗎？如果你像我一樣，然后在Mac上下載所有現(xiàn)代瀏覽器，包括Chrome瀏覽器，Safari瀏覽器，Opera和Firefox。但是，你如何測試一臺Mac上的Internet Explorer？一個簡單且免費的方式是建立一個虛擬機運行Windows。

您也可以使用IE瀏覽器，仿真器，如IE瀏覽器測試儀?；蜃缘姆?wù)，如勺子或BrowserStack，它允許你測試網(wǎng)站上所有主要的瀏覽器，包括IE瀏覽器6，7，8，9和10。而非休假跨瀏覽器測試，直到最后，在開發(fā)過程中，測試的網(wǎng)站，然后每一個現(xiàn)在。

谷歌分析

谷歌分析添加到您的網(wǎng)站收集有價值的統(tǒng)計游客。你就會知道訪問者的位置，無論他們是通過谷歌搜索到達(dá)，或參考網(wǎng)站。您的博客文章提到的另一個網(wǎng)站上，如果你沒有監(jiān)測你的流量來源，你甚至可能不知道它。分析還可以幫助你建立一個游客的檔案，包括他們國家的起源和瀏覽器。您可以使用這個數(shù)據(jù)的一個持續(xù)的基礎(chǔ)上進(jìn)行優(yōu)化的網(wǎng)站，供游人。在您的網(wǎng)站上設(shè)置了谷歌的Google Analytics（分析）是免費的，只需要幾分鐘的時間。只需注冊，小的JavaScript代碼片段復(fù)制并粘貼到您的網(wǎng)站的頁腳，你準(zhǔn)備好去！

啟動時間

所以，我們設(shè)計，建造和測試我們的新組合，我們終于準(zhǔn)備推出 - 高五！這是那些經(jīng)驗，你根本不應(yīng)該錯過了，作為一個設(shè)計師之一。創(chuàng)建我的網(wǎng)站，我有一個偉大的時間，在這個過程學(xué)到了很多東西。當(dāng)然，也有沿途的障礙，但是這不正是讓這么有趣的設(shè)計嗎？我很想聽到你的經(jīng)驗，建立自己的投資組合。

，希望聽到我的旅程將有助于激發(fā)您創(chuàng)建自己的網(wǎng)站或你已經(jīng)考慮過去幾年終于開始，重新設(shè)計，所以，你的耳機，屈從下來，開始推動這些像素。我希望你最好在你的史詩任務(wù)提前。祝你好運，可能的力量與你同在。

當(dāng)前標(biāo)題：開發(fā)網(wǎng)站和設(shè)計網(wǎng)站的工作流程
文章轉(zhuǎn)載：http://jinyejixie.com/news44/80194.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、App開發(fā)、網(wǎng)站建設(shè)、搜索引擎優(yōu)化、網(wǎng)站設(shè)計、關(guān)鍵詞優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)