014-07-23 10:36:28 作者:
話說網站就是項目的門面,如何為自己的創(chuàng)業(yè)項目做出一個高級又炫酷的網站,能夠完整展示出產品功能,在吸引用戶的同時也引來投資者的青睞,就成了創(chuàng)業(yè)者的一個需求。
對于技術小白而言,做一個自己的網站看起來很高深的樣子。就算團隊中有相關成員,也需要 UI 與前端密切配合,可能會耗費大量精力在上面。如果你不是處女座,對你的網站沒有精細到像素的需求,那么可以考慮試試 Generator。
Generator 讓你能夠「簡單粗暴」地做出一個網站,正如網站的官方簡介所說,「不用很麻煩就能為你的創(chuàng)業(yè)項目做登陸頁面」。
設計網頁的步驟特別簡單,只要經過以下三步:
從左側庫中按分類選出合適的模塊,將它拖拽到右邊,建立簡略的頁面層級結構;
與團隊成員共同討論頁面設計方案;
查看頁面元素,將其轉化為 HTML、CSS 或者 LESS 語言。大功告成!
Generator 可謂極其貼心,模塊庫中包含了一般網頁設計中會涉及的部分,包括 Header、主體內容、產品價位、相關項目、聯系我們、創(chuàng)業(yè)團隊、項目博客與頁腳等多個模塊,基本滿足了大多數項目的需求。
Generator 為用戶提供了豐富的模版庫,方便即時預覽各種風格的界面,不同模塊之間還可以隨意拖拽調整順序。遺憾的是,導出到 HTML/CSS 功能暫時只支持 Startup Framework 的付費用戶使用。
Generator 與 Startup Framework 都是 Designmodo 團隊旗下產品之一,后者為設計師提供網頁模板、VI、UI Kit 與相關 mockup。Designmodo 主要專注于網頁設計與開發(fā),上面有許多高質量的文章與教程。如果你對 Generator 感興趣,在 Twitter、Facebook、Google+ 和設計師集聚地 Dribbble都可以找到 Designmodo 的身影。
在學習網頁布局之前,我們需要先了解樹狀結構的基本概念。
在生活中,家譜就是一個最常見的樹狀結構,一個人可以有多個兒子,但是兒子只能有一個父親,隨著整個家庭一代代繁衍,整個家譜樹也越來越根深葉茂。我們先看一個家譜的例子。我們電腦的目錄結構也是一個樹狀結構,如下所示:
├─我的電腦
│ ├─c:
│ ├─d:
│ │ ├─游戲
│ │ ├─電影
│ ├─e:
│ │ └─教學視頻
│ │ │ └─html教學視頻
│ │ └─電子書
│ │ │ └─JavaScript電子書
│ │ └─學習文檔
│ │ └─學習筆記
我們還是以家譜為例,家譜中的每一個人我們都可以稱他為樹狀結構的節(jié)點。司馬懿是一個節(jié)點,司馬炎同樣也是一個節(jié)點,這些節(jié)點是有關系的,具體關系如下所示:
html文件的結構和上面的家譜一樣,也是樹狀結構,例如下面的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>
轉換成樹狀結構如下所示,這里不考慮文檔聲明標簽:
├─html
│ ├─lang="en"
│ ├─head
│ │ ├─meta
│ │ │ └─charset="UTF-8"
│ │ ├─title
│ │ │ └─Document
│ ├─body
│ │ └─h1
│ │ │ └─水果列表
│ │ └─ul
│ │ │ └─li
│ │ | │ └─id="banana"
│ │ | │ └─香蕉
│ │ │ └─li
│ │ | │ └─蘋果
│ │ │ └─li
│ │ | │ └─鴨梨
html標簽是最外層的標簽,沒有父級,所以他是整個樹狀結構的根節(jié)點,body標簽中有h1標簽和ul標簽,所以body是h1的父節(jié)點,h1是body的子節(jié)點,h1與ul是兄弟節(jié)點,又叫同級節(jié)點。
拋開節(jié)點之間的關系,我們再給html節(jié)點分類,可以分成下面三類:
在上面的代碼中,每一個元素都是原始節(jié)點,第一個li中的“香蕉”兩個字就是文本節(jié)點,id就是屬性節(jié)點。
├─html
│ ├─div
│ │ ├─h2
│ │ │ └─精選手冊
│ │ │ ├─a
│ │ │ │ └─查看更多>
│ ├─div
│ │ └─ul
│ │ │ └─li
│ │ | │ └─div
│ │ | │ │ └─img
│ │ | │ └─div
│ │ | │ │ └─h3
│ │ | │ │ └─span
│ │ | │ │ └─a
│ │ │ └─li
│ │ | │ └─div
│ │ | │ │ └─img
│ │ | │ └─div
│ │ | │ │ └─h3
│ │ | │ │ └─span
│ │ | │ │ └─a
每一個區(qū)域(盒子)都使用div標簽包裹起來,這樣可以讓我們的布局思路更清晰,將網頁中出現的問題用一個個div隔離開。
但是缺點也是有的,那就是網頁會多出很多沒有必要的div。但是對于初學者來說,制作網頁的過程,多兩個div不是問題,結構混亂才,不容易調試才是最大的問題。
為了讓樹狀結構更簡潔,在上面的樹狀結構中未添加屬性節(jié)點。
畫出融職教育首頁的網頁樹狀結構,下圖為參考答案。要求如下:
我們將會在第10節(jié)完成此設計稿的重構。
【融職教育】在工作中學習,在學習中工作
匯報訊(記者黃啟哲) 基于逾3萬余種館藏的家譜檔案,上海圖書館在近日推出“家譜知識服務平臺”,市民可以登錄相關網站,踏上尋根問祖的傳統(tǒng)文化之旅。新春佳節(jié)里家人團聚一堂,聽長輩梳理家族歷史,重溫家風家訓是一項“保留節(jié)目”,而那些長輩無法告訴我們的答案,說不定可以在上海圖書館的家譜查詢系統(tǒng)中找到答案。
上海圖書館相關負責人介紹,家譜是館藏的優(yōu)勢資源,收藏量位居全球第一,僅僅依托數字信息化,將家譜從紙質資源轉化為可以檢索的互聯網信息還不夠,如何讓其背后的傳統(tǒng)文化“活起來”? 互聯網最新的“關聯數據”技術就是一種新的嘗試。從家譜文獻檔案開始,整合多種文獻檔案信息,橫跨時空,串聯起多部家譜,梳理出家族的遷徙圖,從而使資源價值最大化。
比如,胡適祖上并非姓胡,而是李唐宗室后裔。在“家譜知識服務平臺”,詳細梳理了其家族的脈絡,據胡適所屬的“上川明經胡氏家族”顯示,他的宗祖胡昌翼原不姓胡,而是姓李,是唐昭宗皇子,因避亂從洛陽遷出,被托于徽州人士胡三公,后隨義父改姓掩人耳目,隨后永久定居于安徽考川。登錄“華人家譜總目”網頁,左側列出百家姓氏,點擊某個姓氏,便能在右側獲取姓氏概況、先祖名人、相關家譜等信息。此外,用戶還可以通過地圖、時間等為時空坐標,進一步檢索相關家譜信息,針對專業(yè)學者和愛好者,網頁也標注了家譜的館藏信息以供進一步的研究。
值得一提的是,考慮到互聯網的開放共享特性,此次的家譜服務不僅滿足普通用戶尋根問源的樂趣。上海圖書館還是全國首家推出關聯數據開放的圖書館,專業(yè)人士不僅可以對數據進行調用、修正,互聯網開發(fā)人員和機構還可以基于家譜數據集研發(fā)相關的App應用和游戲,提升家譜等文獻資料的應用范圍。接下來,上圖還計劃將館藏的17萬余種盛宣懷檔案資源進行數據整理和加工,利用該技術進一步實現數字人文服務。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。