代碼小白的網(wǎng)頁制作神器

014-07-23 10:36:28 作者：

話說網(wǎng)站就是項目的門面，如何為自己的創(chuàng)業(yè)項目做出一個高級又炫酷的網(wǎng)站，能夠完整展示出產(chǎn)品功能，在吸引用戶的同時也引來投資者的青睞，就成了創(chuàng)業(yè)者的一個需求。

對于技術(shù)小白而言，做一個自己的網(wǎng)站看起來很高深的樣子。就算團(tuán)隊中有相關(guān)成員，也需要 UI 與前端密切配合，可能會耗費大量精力在上面。如果你不是處女座，對你的網(wǎng)站沒有精細(xì)到像素的需求，那么可以考慮試試 Generator。

Generator 讓你能夠「簡單粗暴」地做出一個網(wǎng)站，正如網(wǎng)站的官方簡介所說，「不用很麻煩就能為你的創(chuàng)業(yè)項目做登陸頁面」。

設(shè)計網(wǎng)頁的步驟特別簡單，只要經(jīng)過以下三步：

從左側(cè)庫中按分類選出合適的模塊，將它拖拽到右邊，建立簡略的頁面層級結(jié)構(gòu)；
與團(tuán)隊成員共同討論頁面設(shè)計方案；
查看頁面元素，將其轉(zhuǎn)化為 HTML、CSS 或者 LESS 語言。大功告成！

Generator 可謂極其貼心，模塊庫中包含了一般網(wǎng)頁設(shè)計中會涉及的部分，包括 Header、主體內(nèi)容、產(chǎn)品價位、相關(guān)項目、聯(lián)系我們、創(chuàng)業(yè)團(tuán)隊、項目博客與頁腳等多個模塊，基本滿足了大多數(shù)項目的需求。

Generator 為用戶提供了豐富的模版庫，方便即時預(yù)覽各種風(fēng)格的界面，不同模塊之間還可以隨意拖拽調(diào)整順序。遺憾的是，導(dǎo)出到 HTML/CSS 功能暫時只支持 Startup Framework 的付費用戶使用。

Generator 與 Startup Framework 都是 Designmodo 團(tuán)隊旗下產(chǎn)品之一，后者為設(shè)計師提供網(wǎng)頁模板、VI、UI Kit 與相關(guān) mockup。Designmodo 主要專注于網(wǎng)頁設(shè)計與開發(fā)，上面有許多高質(zhì)量的文章與教程。如果你對 Generator 感興趣，在 Twitter、Facebook、Google+ 和設(shè)計師集聚地 Dribbble都可以找到 Designmodo 的身影。

、樹狀結(jié)構(gòu)

樹狀結(jié)構(gòu)概述

在學(xué)習(xí)網(wǎng)頁布局之前，我們需要先了解樹狀結(jié)構(gòu)的基本概念。

在生活中，家譜就是一個最常見的樹狀結(jié)構(gòu)，一個人可以有多個兒子，但是兒子只能有一個父親，隨著整個家庭一代代繁衍，整個家譜樹也越來越根深葉茂。我們先看一個家譜的例子。我們電腦的目錄結(jié)構(gòu)也是一個樹狀結(jié)構(gòu)，如下所示：

├─我的電腦
│    ├─c:
│    ├─d:
│    │   ├─游戲
│    │   ├─電影
│    ├─e:
│    │   └─教學(xué)視頻
│    │   │   └─html教學(xué)視頻
│    │   └─電子書
│    │   │   └─JavaScript電子書
│    │   └─學(xué)習(xí)文檔
│    │   └─學(xué)習(xí)筆記

節(jié)點間的關(guān)系

我們還是以家譜為例，家譜中的每一個人我們都可以稱他為樹狀結(jié)構(gòu)的節(jié)點。司馬懿是一個節(jié)點，司馬炎同樣也是一個節(jié)點，這些節(jié)點是有關(guān)系的，具體關(guān)系如下所示：

根節(jié)點：每一個樹狀結(jié)構(gòu)都有一個沒有父級的節(jié)點，他被稱作根節(jié)點。
父級節(jié)點：司馬防是司馬懿的父級，司馬懿是司馬師的父級。
子級節(jié)點：司馬師是司馬懿的子級，司馬懿是司馬防的子級。
同級關(guān)系：有相同父級的節(jié)點就是同級關(guān)系，司馬懿和司馬朗是同級，司馬昭和司馬亮是同級。（這里需要注意的是，司馬炎和司馬熙不是同級，因為他們沒有相同的父級。）

二、html文件的樹狀結(jié)構(gòu)

html文件的結(jié)構(gòu)和上面的家譜一樣，也是樹狀結(jié)構(gòu)，例如下面的html代碼。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8     <h1>水果列表</h1>
 9     <ul>
10         <li id="banana">香蕉</li>
11         <li>蘋果</li>
12         <li>鴨梨</li>
13     </ul>
14 </body>
15 </html>

轉(zhuǎn)換成樹狀結(jié)構(gòu)如下所示，這里不考慮文檔聲明標(biāo)簽：

├─html
│    ├─lang="en"
│    ├─head
│    │   ├─meta
│    │   │   └─charset="UTF-8"
│    │   ├─title
│    │   │   └─Document
│    ├─body
│    │   └─h1
│    │   │   └─水果列表
│    │   └─ul
│    │   │   └─li
│    │   |   │  └─id="banana"
│    │   |   │  └─香蕉
│    │   │   └─li
│    │   |   │  └─蘋果
│    │   │   └─li
│    │   |   │  └─鴨梨

html標(biāo)簽是最外層的標(biāo)簽，沒有父級，所以他是整個樹狀結(jié)構(gòu)的根節(jié)點，body標(biāo)簽中有h1標(biāo)簽和ul標(biāo)簽，所以body是h1的父節(jié)點，h1是body的子節(jié)點，h1與ul是兄弟節(jié)點，又叫同級節(jié)點。

拋開節(jié)點之間的關(guān)系，我們再給html節(jié)點分類，可以分成下面三類：

元素節(jié)點
文本節(jié)點
屬性節(jié)點

在上面的代碼中，每一個元素都是原始節(jié)點，第一個li中的“香蕉”兩個字就是文本節(jié)點，id就是屬性節(jié)點。

三、網(wǎng)頁布局

觀察設(shè)計稿

畫出樹狀結(jié)構(gòu)

├─html
│    ├─div
│    │   ├─h2
│    │   │   └─精選手冊
│    │   │   ├─a
│    │   │   │ └─查看更多>
│    ├─div
│    │   └─ul
│    │   │   └─li
│    │   |   │  └─div
│    │   |   │  │  └─img
│    │   |   │  └─div
│    │   |   │  │  └─h3
│    │   |   │  │  └─span
│    │   |   │  │  └─a
│    │   │   └─li
│    │   |   │  └─div
│    │   |   │  │  └─img
│    │   |   │  └─div
│    │   |   │  │  └─h3
│    │   |   │  │  └─span
│    │   |   │  │  └─a

每一個區(qū)域（盒子）都使用div標(biāo)簽包裹起來，這樣可以讓我們的布局思路更清晰，將網(wǎng)頁中出現(xiàn)的問題用一個個div隔離開。

但是缺點也是有的，那就是網(wǎng)頁會多出很多沒有必要的div。但是對于初學(xué)者來說，制作網(wǎng)頁的過程，多兩個div不是問題，結(jié)構(gòu)混亂才，不容易調(diào)試才是最大的問題。

為了讓樹狀結(jié)構(gòu)更簡潔，在上面的樹狀結(jié)構(gòu)中未添加屬性節(jié)點。

四、課后練習(xí)：

畫出融職教育首頁的網(wǎng)頁樹狀結(jié)構(gòu)，下圖為參考答案。要求如下：

寫出所有元素節(jié)點和文本節(jié)點
適當(dāng)標(biāo)注出class屬性節(jié)點，為后續(xù)添加樣式做準(zhǔn)備。

我們將會在第10節(jié)完成此設(shè)計稿的重構(gòu)。

【融職教育】在工作中學(xué)習(xí)，在學(xué)習(xí)中工作

匯報訊(記者黃啟哲) 基于逾3萬余種館藏的家譜檔案，上海圖書館在近日推出“家譜知識服務(wù)平臺”，市民可以登錄相關(guān)網(wǎng)站，踏上尋根問祖的傳統(tǒng)文化之旅。新春佳節(jié)里家人團(tuán)聚一堂，聽長輩梳理家族歷史，重溫家風(fēng)家訓(xùn)是一項“保留節(jié)目”，而那些長輩無法告訴我們的答案，說不定可以在上海圖書館的家譜查詢系統(tǒng)中找到答案。

上海圖書館相關(guān)負(fù)責(zé)人介紹，家譜是館藏的優(yōu)勢資源，收藏量位居全球第一，僅僅依托數(shù)字信息化，將家譜從紙質(zhì)資源轉(zhuǎn)化為可以檢索的互聯(lián)網(wǎng)信息還不夠，如何讓其背后的傳統(tǒng)文化“活起來”? 互聯(lián)網(wǎng)最新的“關(guān)聯(lián)數(shù)據(jù)”技術(shù)就是一種新的嘗試。從家譜文獻(xiàn)檔案開始，整合多種文獻(xiàn)檔案信息，橫跨時空，串聯(lián)起多部家譜，梳理出家族的遷徙圖，從而使資源價值最大化。

比如，胡適祖上并非姓胡，而是李唐宗室后裔。在“家譜知識服務(wù)平臺”，詳細(xì)梳理了其家族的脈絡(luò)，據(jù)胡適所屬的“上川明經(jīng)胡氏家族”顯示，他的宗祖胡昌翼原不姓胡，而是姓李，是唐昭宗皇子，因避亂從洛陽遷出，被托于徽州人士胡三公，后隨義父改姓掩人耳目，隨后永久定居于安徽考川。登錄“華人家譜總目”網(wǎng)頁，左側(cè)列出百家姓氏，點擊某個姓氏，便能在右側(cè)獲取姓氏概況、先祖名人、相關(guān)家譜等信息。此外，用戶還可以通過地圖、時間等為時空坐標(biāo)，進(jìn)一步檢索相關(guān)家譜信息，針對專業(yè)學(xué)者和愛好者，網(wǎng)頁也標(biāo)注了家譜的館藏信息以供進(jìn)一步的研究。

值得一提的是，考慮到互聯(lián)網(wǎng)的開放共享特性，此次的家譜服務(wù)不僅滿足普通用戶尋根問源的樂趣。上海圖書館還是全國首家推出關(guān)聯(lián)數(shù)據(jù)開放的圖書館，專業(yè)人士不僅可以對數(shù)據(jù)進(jìn)行調(diào)用、修正，互聯(lián)網(wǎng)開發(fā)人員和機構(gòu)還可以基于家譜數(shù)據(jù)集研發(fā)相關(guān)的App應(yīng)用和游戲，提升家譜等文獻(xiàn)資料的應(yīng)用范圍。接下來，上圖還計劃將館藏的17萬余種盛宣懷檔案資源進(jìn)行數(shù)據(jù)整理和加工，利用該技術(shù)進(jìn)一步實現(xiàn)數(shù)字人文服務(wù)。

在線咨詢

上一篇：這是你想要的國外商城系統(tǒng)訂單信息管理嗎？
下一篇：Adobe Flash 浮沉錄（下）

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商