點擊W可返回到儀表板,並創建一個新的網站!
所以,你是新來的Webflow,不是嗎?讓我們深入研究。

可視化網頁設計指南

這種視覺指南將引導您完成重要的響應式網頁設計概念,以及如何在視覺上實現它們的內部Webflow的。 

#1盒模型

了解網站的結構

所有這些頁面上的元素都是塊內的其它塊(又名“盒狀模型”)。當拖動網頁元素,從一個街區將它們拖動它們拖放到另一個。這就是HTML工作!

拖動這款...

超計劃

$ 75個/月

適合有20個或更多的員工任何業務。 

  1. 500GB存儲
  2. 1百萬  瀏覽量
  3. 20合作者
  4. 50社交網絡
  5. 高級支持
你看到什麼
注意:  您將了解如何設計這樣的事情與下面的概念。
是什麼  阻止  它由
DIV塊
DIV塊

H2標題超計劃

文本塊 $ 75個/月

最適用於20個或更多的員工任何業務。 

名單
  • 列表項
    500GB  存儲
  • 列表項
    1百萬  瀏覽量
  • 列表項
    20  合作者
  • 列表項
    50  社交網絡
  • 列表項
    高級  支持
DIV塊
DIV塊

H2標題超計劃

文本塊 $ 75個個/月

最適用於20個或更多的員工任何業務。 

名單
  • 列表項
    500GB  存儲
  • 列表項
    1百萬  瀏覽量
  • 列表項
    20  合作者
  • 列表項
    50  社交網絡
  • 列表項
    高級  支持
走進紫塊...

自己嘗試一下

提示:  點擊並拖動上面的段落元素,並將其放在合適的價格下。您也可以使用像複製和粘貼(Ctrl + C,CTRL + V)的快捷鍵,同時拖動(按住ALT)複製和刪除(刪除鍵)。 

所有不帶局限性的功能。所有你可以吃。(這是一個段落元素)

超計劃

$ 75個/月
信息:  這就是HTML和網狀結構工程-元素在對方或對方的內部疊加。這是建立一個流體並響應網站的最佳方式。
#2佈局元素

基本佈局元素

通過點擊在左上角的[+]圖標添加元素到你的網站。下面是一些在網頁設計的最基本結構元素的 - 部分,容器和列。 

按鈕文本

A科佔用,如果你把它添加到機構(一個網站的畫布)瀏覽器窗口的寬度為100%。
這是偉大的一個網站的大水平段。

科元

Container是960px塊集中在瀏覽器的中間。通常大多數網站的內容是一個容器,這樣它的中心裡面添加。容器通常添加到身體或部分元素。

容器元素

添加列是要建立一個獨特的網站版面的最快方法。編輯要在不同的設備上多少列,只需點擊齒輪圖標的右上角訪問元素的設置。

響應列
#3設計的CSS

風格化的元素

選擇一個元素,並在合適的款式面板(畫筆圖標)添加一個類。在此面板中,您可以添加文字和圖形樣式,比如字體顏色,行高,漸變,邊框,陰影等。可視化網頁設計是比編碼權更有趣?

按鍵設計實例
加入購物車➜
自己的風采吧
按鈕文本➜
提示:  此按鈕已經有一類“按鈕”的一些基本款式。選擇按鈕,並嘗試添加漸變,邊框,圓潤的邊角,內/外陰影,懸停狀態的風格,和過渡懸停樣式-全部使用樣式面板。
你創造了什麼
按鈕文本➜
應用“按鈕”類
按鈕文本
提示:  在網頁設計中,你可以一類適用於許多元素,使它們看起來是一樣的。應用您點擊[+]在樣式面板的頂部,鍵入“按鈕”找到該類風格的鏈接上面的“按鈕”類。 
表單設計實例

謝謝!

你搖滾我的襪子!

哎呀!同時提交表單出事了:(

自己的風采吧

謝謝大家!您提交的內容已收到!

哎呀!同時提交表單出事了:(

提示:  首先創建類的文本框和按鈕(應用相同的類兩個字段)。然後改變邊框樣式,背景顏色和懸停和按下狀態添加樣式。不要忘了風格的“成功”狀態的表單元素,在設置面板(齒輪圖標的右上角)發現。 
印刷術的例子

萊克伍德斯托特

萊克伍德,科羅拉多州的黑啤酒

傳說中的粗壯誕生出了山的男人和自己最心愛的東西,在科羅拉多州萊克伍德市的美麗的婚姻。山上的人也愛他的斧頭,他的單桿雷明頓槍,但沒有那麼多,因為他愛他的城市。他夢見她flowy河流和雄偉的山脈中。於是,他她的名字命名他最大的粗壯。這樣的輝煌是粗壯了生產經歷的一座大山把人的心臟的。

“我製作的這個光榮的啤酒,以表達我永恆的愛為我美麗的城市。”

- 山人

自己的風采吧

萊克伍德斯托特

萊克伍德,科羅拉多州的黑啤酒

傳說中的粗壯誕生出了山的男人和自己最心愛的東西,在科羅拉多州萊克伍德市的美麗的婚姻。山上的人也愛他的斧頭,他的單桿雷明頓槍,但沒有那麼多,因為他愛他的城市。他夢見她flowy河流和雄偉的山脈中。於是,他她的名字命名他最大的粗壯。這樣的輝煌是粗壯了生產經歷的一座大山把人的心臟的。

“我製作的這個光榮的啤酒,以表達我永恆的愛為我美麗的城市。”

- 山人

提示:  來吧,添加自定義版式和樣式的背景。酷提示:如果您添加的排版樣式父塊,它的所有兒童的文本元素將繼承這些文本樣式。在CSS這種行為被稱為“級聯”。 
#4佈局與CSS

構建網絡佈局與CSS

類似於添加的風格元素,改變一個元素的位置首先添加一個類,然後編輯位置屬性。您將了解的margin,padding,顯示,浮動,溢出和位置。 

保證金和填充的例子
最新新聞

聯邦探員突襲Gunshop,查找武器

店老闆史蒂夫Witmere先前涉嫌黑市火箭筒交易。承認自己捲入俄羅斯黑手黨。

其中在gunshop發現眾多火箭炮是數以萬計的價值至少為$ 10,000個非法獲得的畫作。那是一個沉重的代價,這些愚蠢的畫作。

說明 :margin 和padding可以在樣式面板的位置面板中找到。加入餘量將增加空間的塊之外,並且增加填充將增加一個塊的內部空間。
添加間距自己
最新新聞

聯邦探員突襲Gunshop,查找武器

店老闆史蒂夫Witmere先前涉嫌黑市火箭筒交易。承認自己捲入俄羅斯黑手黨。

其中在gunshop發現眾多火箭炮是數以萬計的價值至少為$ 10,000個非法獲得的畫作。那是一個沉重的代價,這些愚蠢的畫作。

提示:  首先,在主灰塊(父元素)的四周添加填充。然後添加下邊距到各個文本元素(子元素)之間添加間距。提示:在使用保證金/填充控制,適用於所有各方和ALT也適用於對側按住SHIFT鍵。
“顯示:塊”的例子

這個標題設置為display:block

本款被設置為display:block。使其充滿父窗口的寬度和堆疊在其它塊的頂部。 

按鈕顯示:塊與顯示按鈕:可以關閉此連接設置為display:block 這個鏈接設置為display:block
說明:  設置元素的顯示設置,以阻止會使他們對彼此頂部堆疊並填寫100%其父塊的寬度。大多數元素實際上是在默認情況下此設置。 
讓他們“顯示:塊”自己
這是一個按鈕這是一個按鈕鏈接是顯示:內聯默認鏈接都顯示:內聯默認
提示:  選擇這些元素(有些是直插塊,有些是內聯),並使其顯示:塊,使他們對彼此頂部堆疊。 
“顯示:inline-block的”的例子
說明:  設置元素的顯示設置為inline-block的會使塊的寬度順應它裡面的內容的寬度。這意味著,如果它們的含量足夠小它們可以堆疊彼此相鄰。您可以複製粘貼上面的按鈕和編輯中的文本,看看它是如何工作的。
讓他們inline-block的自己
下載編輯
提示:  所以他們旁邊堆到對方inline-block的:選擇上面的元素,讓他們顯示。你會看到圖像疊加旁邊的按鈕。提示:刪除按鈕和圖像轉換成單獨的事業部塊將使他們對彼此的頂部堆疊(因為股利塊都顯示:在默認情況下阻止)。
浮法例子

加入我們的通訊

謝謝大家!您提交的內容已收到!

哎呀!同時提交表單出事了:(

說明:  設置顯示:inline-block的或浮動(本例中)是並排堆疊單元一側的最常見的方式。在這個例子中,我會告訴你如何漂浮的東西。 
自己浮起來

加入我們的通訊

謝謝大家!您提交的內容已收到!

哎呀!同時提交表單出事了:(

提示:  首先選擇的文本字段,使其浮動:左,並給它一個百分比寬度(例如:60%)。然後設置按鈕浮動:左,以及和其它設置寬度的百分比(如40%),因此它們都加起來為100%。這是一個人工的方式來強迫任何元素並排堆放的一面。 
絕對位置示例

我的喬杯

這是一個照片的標題文字。

說明:  如果一個元素設置位置為絕對,你就可以在其母公司塊內的任意位置來定位。要選擇哪一方的內部定位,設置父元素的立場相對。注意:當元素是絕對定位它們漂浮在其他元素。
款式吧自己

我的喬杯

這是一個照片的標題是我最喜歡的一杯咖啡。

提示:  首先選擇形象包裝元素,並將其定位為相對。接下來選擇標題,將其拖動到圖像設置它的位置,以絕對和選擇7預設。要定位精選徽章到正確的位置選擇第二預置和手動定位。
#5  樣式層疊

利用層疊樣式

可以通過在彼此的頂部添加額外的類和在這些類中添加不同的樣式容易地創建一個元素的變體。看看下面,我們有一個按鈕的不同變化的例子。 

分享按鈕樣式的例子
普通按鈕
綠色按鈕
紅色按鈕
普通按鈕
自己設計的按鈕
綠色按鈕
紅色按鈕
提示:  選擇第二個按鈕,然後點擊[+]旁邊類中添加其他類。你可以稱之為“綠色”。然後給它不同的風格。這些樣式將覆蓋基本樣式一流的。然後創建紅色按鈕。 
#6媒體查詢

設計用於不同設備

在Webflow的第一次設計你的網站的桌面設備,然後讓移動設備(接入設備圖標,在最上面一欄)的變化。添加樣式中的移動設備將覆蓋桌面樣式。 

響應標題的例子

這是獲取移動設備較小的一些標題文本。

說明:  這個標題在桌面上真正的大,但我們希望它是在移動設備較小。點擊在頂欄的設備看到,文本大小和行高度下降。
修復它自己

讓這個大標題的文字變得越來越小的移動設備。

提示:  選擇此標題的平板設備上,使字體大小和行高度。執行相同的手機橫向和縱向電話設備。你可以看到, 
響應按鈕的例子
按鈕文本
說明:  此按鈕,就是要在小屏幕的桌面,因為它很容易點擊鼠標光標。我們成功了較大的移動設備上,這樣更容易挖掘用手指
按鈕文本
修復它自己
提示:  進入平板設備,提高了按鈕的填充。當你這樣做,這將覆蓋舊風格的桌面設置,並逐級下到下面的平板的所有設備。 
響應列例子

第1欄

這是一個div塊裡面的一些文字。

第2欄

這是一個div塊裡面的一些文字。

第3欄

這是一個div塊裡面的一些文字。
說明:  列元素的Webflow可以定制為每個設備。通過默認列堆疊彼此相鄰上桌面和堆疊在彼此的頂部上的移動設備。 

第1欄

這是一個div塊裡面的一些文字。

第2欄

這是一個div塊裡面的一些文字。

第3欄

這是一個div塊裡面的一些文字。
修復它自己
提示:  選擇一列或行元素以上(你也可以使用底部的痕跡導航欄或導航器面板的右側找到它),進入元素的設置(齒輪圖標右上角),並確保列堆疊在移動設備上。
#7資源

需要更多幫助?

你猜對了!有成千上萬的人學習的Webflow和網頁設計的每一天。一個偉大的地方,開始是視頻教程。然後頭部到支持中心或社區論壇。 

(您可以點擊上面的鏈接通過進入預覽模式 - 在左上角的眼睛圖標)