整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          代碼小白的網頁制作神器

          代碼小白的網頁制作神器

          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é)點,這些節(jié)點是有關系的,具體關系如下所示:

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

          二、html文件的樹狀結構

          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é)點
          • 文本節(jié)點
          • 屬性節(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é)點。

          四、課后練習:

          畫出融職教育首頁的網頁樹狀結構,下圖為參考答案。要求如下:

          • 寫出所有元素節(jié)點和文本節(jié)點
          • 適當標注出class屬性節(jié)點,為后續(xù)添加樣式做準備。

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

          【融職教育】在工作中學習,在學習中工作

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

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

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

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


          主站蜘蛛池模板: 无码丰满熟妇一区二区| 无码一区二区三区亚洲人妻| 中文字幕在线看视频一区二区三区 | 国产99精品一区二区三区免费 | 国产日韩一区二区三区在线播放| 国产日本一区二区三区| 国内精品视频一区二区八戒| 精品一区二区三区视频在线观看| 国产综合无码一区二区三区| 亚洲蜜芽在线精品一区| 国产精品成人99一区无码| 国产在线不卡一区二区三区| 国产精品合集一区二区三区 | 国产亚洲福利精品一区| 韩国理伦片一区二区三区在线播放| 日本一区二区三区日本免费| 精品久久一区二区三区| 女女同性一区二区三区四区| 中文字幕精品亚洲无线码一区| 亚洲一区二区三区高清不卡| 国产精品主播一区二区| 日本免费一区二区在线观看| 国产精品毛片一区二区| 欧美一区内射最近更新| 日本一区二区免费看| 国产一区中文字幕| 精品一区二区三区东京热| 一区二区不卡久久精品| 中文字幕AV无码一区二区三区| 99久久精品国产免看国产一区| 国产乱码精品一区二区三区四川人 | 丰满岳乱妇一区二区三区| 久久久精品人妻一区二区三区蜜桃 | 偷拍精品视频一区二区三区| 激情内射亚洲一区二区三区爱妻 | 91视频一区二区| 国模无码人体一区二区| 日韩一区二区三区在线精品| 亚洲大尺度无码无码专线一区 | 久久久精品人妻一区二区三区蜜桃 | 99精品国产一区二区三区|