類似http://nilssvensson.com/這類簡潔的攝影師個人網站如何搭建?是基於WordPress嗎?
本人對網站後台不太了解,但是這類網站應該結構非常簡單
http://nilssvensson.com 這樣的不能叫「簡潔」,而只能叫「簡單」,從設計的角度來說,並不成功。
這個網站並非基於WordPress搭建,而是手寫的HTML+CSS,從技術的角度來說,也只是」簡單「而已。
類似的版式,看兩個適合攝影或個人作品集主題。
Crush - ThemeForest 賣得最好的作品集(Portfolio)類網站主題之一
LENS - ThemeForest上賣得最好的攝影類網站主題之一
優質WordPress網站的起點是切題專業的WordPress主題。
謝邀請,下面是搭建一個WordPress博客的過程,文章非常詳細,僅針對純白讀者,勿噴,謝謝。
準備工作:
一:域名註冊
一般域名盡量要短一些,然後含義通俗易懂,盡量不要把0o和il1放在一起,國內建議使用阿里雲,國外域名可以使用Godaddy,Name等
二:虛擬主機
購買主機的時候要注意自己的域名是不是已經ICP備案,如果沒有備案不能選擇大陸的主機,建議用香港的,畢竟與日韓美比地理位置相對於大陸較近比。這裡演示用的主機公園的香港虛擬主機,如果你的域名備案了可以選擇大陸的主機,比如阿里雲,騰訊雲都可以
三:博客系統
本文用使用比較廣泛的WordPress做演示,當然如果使用typecho,emlog,discuz 等請參考這個教程如何安裝WordPres?(GIF動態教程)
WordPress地址:China 簡體中文 (請注意大陸訪問會很慢甚至無法載入)
博客搭建:
一:域名解析
Godaddy域名解析請看如何解析域名?(GIF動態教程)
這裡已經購買了 主機公園 的香港虛擬主機,購買完成後會把IP發到我郵箱,我們把域名解析到這個IP即可
二:安裝WordPress
進入用戶中心,產品詳情,登入cPanel
找到圖中所示的SoftaCulou
找到WordPress 並安裝
直接添加基本的管理員信息,不用手動上傳文件,創建資料庫
安裝很快,基本上1分鐘不要,如果你在這步出錯,有可能是因為自己手動創建了資料庫或者上傳了WordPress文件,刪除即可
安裝完成
訪問測試,如果熟悉的話,也就是數分鐘博客就上線了
另外WordPress自帶了國外的服務,被強,在大陸訪問速度很慢,需要優化一下可以到 好奇貓社區 查看更多
wordpress是肯定可以實現的,有大量的免費模板可以下載使用,稍懂網頁知識就能很快搭出高大上的個人主頁來。
但簡單的個人頁面其實也可以直接寫靜態頁面,加內容的需求不大,直接在代碼上改即可個人網站完全不需要花錢啊,HEXO+github就能搭建了,如果想要個性域名可以去買一個唄,再設置一下dns解析就好了。
我的網站類似這個,wordpress搭建,很簡單,theme我用了個免費的。
可以在http://whatwpthemeisthat.com查詢到大部分網站是否由wordpress搭建,以及部分使用的主題和插件信息。
你好,你可以關注下我們的建站系統,目前可以建各種移動網站,我們的網址是:
http://www.coolwebmake.com/mobile_make.php
WordPress + Expositio主題
Expositio — Free Responsive Horizontal Portfolio Theme For Photographers
或者可以使用另一個CMS程序: Indexhibit
Introduction : Indexhibit
覺得麻煩的話可以用這種專業的服務,小貴,不過效果很好。
Square Space http://www.squarespace.com/
Behance Prosite Online Portfolio Sites from Behance || Prosite
Format Portfolio websites for creative professionals. Try it free
我試著仿製了下這個頁面,這是我仿製的該網頁。
這是我的代碼 Html5+CSS內部樣式表
&
&
&
&
&
&
&
&
&
&Nils Svensson Photography&
&
&
&Home&
&
&Tumblr&
&
&Contact&
&
&
&Latest Work&
&
&Trocadéro Days&
&
&
&Projects.html&
&
&Camp vibes&
&
&Format Perspective&
&&&
&
&
首先是標題
對應出來就是
然後這串代碼是使用內部樣式表
& 標籤定義超鏈接,用於從一張頁面鏈接到另一張頁面。
& 元素最重要的屬性是 href 屬性,它指示鏈接的目標。
&
是空行符
然後給每一個標籤定義單獨id,讓它可以單獨和CSS內部樣式表進行單獨的交互。
如果只是以上的字元那實現出來字體大小受影響還有下劃線 而且字體有的初細不一 還有格式也會有微小的不同
所以用CSS內部表進行定義和微調。
其中a定義所有a標籤內的元素
其中&
然後是單獨定義,畢竟不是每個標籤都是黑色的 也不是每個標籤都是13個像素點大小。
所以前面說的id就顯示出了作用,可以單獨對不同id進行定義 比如Home,它是藍色字體。Head Latest Projeckt的字體大小比其他的略大
#Home{color:cornflowerblue} ID「Home」使用藍色字體
#Head Latest Projeckt{font-size:15px}這三個ID大小變為15px比13大兩個像素
最後那張圖片用div布局進行定位 給其id為crew
&img是引入圖片 src是指引圖片所在。
然後對應其設置的id「crew」進行定義
方位設置為絕對方位 &&
&
然後就是圖1中那個首頁了。寫完答案才發現看錯題了。。。我只能從前端的角度來解析一下。- -.
推薦閱讀: