1. kutu modeli

Anlama web sitesi yapısı

Bu sayfadaki tüm elemanlar içinde diğer blokları (aka "Kutu Modeli") tüm taşlarıdır. Web elemanları sürüklerken, bir blok sürükleyin ve başka içine bırakın. HTML nasıl çalışır!

Süper PLANI

75 $ / mon

20 veya daha fazla çalışanı olan herhangi bir iş için idealdir.

500GB depolama
1 Milyon Sayfa Görüntüleme
20 İşbirlikçiler
50 Sosyal Ağlar
Prim Desteği

Ne görüyorsun

Not: Aşağıdaki kavramları ile böyle bir şey tasarlamak için nasıl anlayacaksınız.

Ne Blokları Bu yapılmış oluyor

Div Blok

H2 Başlık süper PLANI

Metin Blok 75 $ / mon

Paragraf 20 veya daha fazla çalışanı olan herhangi bir iş için idealdir.

Liste

Liste Öğesi
500GB depolama
Liste Öğesi
1 Milyon Sayfa Görüntüleme
Liste Öğesi
20 İşbirlikçiler
Liste Öğesi
50 Sosyal Ağlar
Liste Öğesi
Prim Desteği

kendiniz deneyin

Bu paragrafı sürükleyin ...

Sınırlama olmadan tüm özellikleri. Tüm yiyebileceğin. (Bu paragraf öğesidir)

İPUCU: tıklayın yukarıdaki Paragraf elemanı sürükleyin ve sağdaki fiyat altında bırakın. Ayrıca (alt tutarak) sürüklerken kopyalama, kopyala ve yapıştır (ctrl + c, ctrl + v) gibi kısayolları kullanmak ve (anahtar silme) silebilirsiniz.

Mor blok içine ...

Süper PLANI

75 $ / mon

BILGI: Bu HTML ve web yapısı nasıl işliyor - elemanları birbirlerine altına veya birbirlerinin içine yığını. Yani bir akışkan ve duyarlı web sitesi oluşturmak için en iyi yoldur.

2. YERLEŞİM ELEMANLARI

Temel düzen elemanları

Sol üst köşedeki [+] simgesine tıklayarak web sitenize öğeleri ekleyin. Bölümler, konteyner ve sütunlar - Aşağıda en temel web tasarım yapı elemanlarının bazılarıdır.

Bir Kesit Eğer Vücut (bir web sitesinin tuval) eklemek durumunda tarayıcı penceresinin genişliğinin% 100 kaplıyor.
Bu bir web sitesinin büyük yatay kesitler için harika.

Bölüm Eleman

Bir kap tarayıcı ortasında merkezli bir 960 piksel x bloktur. Genellikle çoğu web sitesi içeriği o merkezli oluyor böylece Konteyner içinde ilave edilir. Kaplar genellikle Gövde veya bölüm elemanı eklenir.

Konteyner Eleman

Ekleme Sütunlar benzersiz bir web sitesi düzeni oluşturmak için en hızlı yoldur. Farklı cihazlarda istediğiniz kaç sütun düzenlemek için, sadece eleman ayarlarına erişmek için sağ üst köşedeki Dişli simgesine tıklayın.

Duyarlı Sütunlar

3. CSS ile Tasarımı

Senin elemanları styling

Bir öğe seçin ve sağ tarzı panelinde (Fırça Simgesi) bir sınıf ekleyin. Bu panelde metin ve yazı tipi rengi, satır yüksekliği, degradeler, sınırlar, gölgeler, ve daha fazlası gibi grafik stilleri ekleyebilirsiniz. Görsel web tasarım doğru kodlama yolu daha eğlenceli?

düğme tasarımı örneği

Sepete ekle ➜

Kendiniz Stil

Düğme Metni ➜

İPUCU: Bu düğme zaten bazı temel stilleri ile sınıf "Düğme" vardır. Tüm stil panelini kullanarak - düğmesini seçin ve degrade, sınır eklemeyi deneyin, köşeleri, iç / dış gölgeler, vurgulu stilleri için devlet stilleri ve geçiş hover yuvarlanır.

'düğmesine' sınıfı uygulamak

Oluşturduğunuz Ne

Düğme Metni ➜

Düğme Metni

İPUCU: Birçok unsurları bir sınıf uygulayabilirsiniz web tasarımında onları aynı görünmesi için. Eğer bu sınıfı bulmak için "Button" Stil panelinin üst kısmında [+] tıklayarak ve yazarak yukarıdaki linke tarz "Düğme" sınıfı uygulayın.

Form Tasarım örneği

Teşekkürler!

Sizin kaya benim çorap!

Oops! Form gönderme yaparken bir şeyler ters gitti :(

Kendiniz Stil

Teşekkür ederim! Sizin teslim alındı!

Oops! Form gönderme yaparken bir şeyler ters gitti :(

İPUCU: İlk (her iki alanlara aynı sınıf uygulanır) metin alanları ve düğme için sınıflar oluşturmak. Ardından sınır stilleri, arka plan rengini değiştirmek ve vurgulu ve preslenmiş devletler için stilleri eklemek. Ayarlar panelinde (Dişli Simgesi sağ üst) bulunan form elemanı için "Başarı" devlet stil unutmayın.

Tipografi örnek

Lakewood Stout

Lakewood, Colorado Karanlık Bira

Efsanevi şişman bir dağ adam ve onun en sevgili şey, Colorado Lakewood kentinin güzel evlilik dışında doğmuş. Dağ adam da baltasını ve onun tek-shot Remington tüfeği sevdi, ama onun şehri sevdi kadar değil. Onu flowy nehirler ve görkemli dağlar hayal. Bu yüzden onun peşinden onun en büyük stout adını verdi. Böylece şanlı şişman bir dağ adamın kalbi dışarı birthed edildi.

"Ben güzel şehir benim ölümsüz aşkını ifade etmek bu şanlı bira hazırlanmış."

- Mountain Man

Kendiniz Stil

Lakewood Stout

Lakewood, Colorado Karanlık Bira

"Ben güzel şehir benim ölümsüz aşkını ifade etmek bu şanlı bira hazırlanmış."

- Mountain Man

İPUCU: Devam edin ve arka özel tipografi ve stilleri ekleyin. Soğuk uç: Bir üst bloğuna tipografi stilleri eklerseniz, onun çocukları metin elemanlarının tüm bu metin stillerini devralır. CSS bu davranış "basamaklı" denir.

4. CSS ile Düzen

CSS ile Yapı web düzenleri

İlk bir sınıf eklemek bir elemanın konumunu değiştirmek ve sonra pozisyon özelliklerini düzenlemek için, bir öğeye bir stil katıyor benzer. Sen Marj, Dolgu, Ekran, Float, Overflow ve Pozisyon öğreneceksiniz.

Marj ve doldurma örneği

Son Dakika haberi

Federal Ajanlar Gunshop Raid, Silah bul

Mağaza sahibi Steve Witmere önce blackmarket bazuka ticaret tutuklandı. Rus mafyası karışmakla itiraf eder.

Gunshop bulunan çok sayıda roket atar arasında en az $ 10,000 değerinde yasal olmayan yollardan elde resimlerin onbinlerce idi. Bu aptal resimlerinde ödemek için ağır bir bedel bu.

Açıklama: Marj ve dolgu Stil panelinde Pozisyon paletinde bulunabilir. Ekleme Marj bir bloğun dışında yer katacak ve Geciktirme ekleyerek bir bloğun içinde yer katacak.

Kendinizi aralığı ekle

Son Dakika haberi

Federal Ajanlar Gunshop Raid, Silah bul

Mağaza sahibi Steve Witmere önce blackmarket bazuka ticaret tutuklandı. Rus mafyası karışmakla itiraf eder.

Gunshop bulunan çok sayıda roket atar arasında en az $ 10,000 değerinde yasal olmayan yollardan elde resimlerin onbinlerce idi. Bu aptal resimlerinde ödemek için ağır bir bedel bu.

İPUCU: Ana gri bloğu (ana öğe) her tarafta dolgu ekleyerek başlayın. Sonra tek metin elemanları (çocuk elemanları) arasındaki boşluğu eklemek için alt kenar ekleyin. İpucu: Ayrıca karşıt tarafa uygulamak için tüm tarafların ve ALT uygulamak için marj / dolgu kontrolünü kullanırken SHIFT tutun.

'Ekran: Blok' örnekler

Bu başlık görüntü ayarlanır: Block

Bu fıkra göster ayarlanır: Blok. Bu yüzden ana pencerenin genişliğini doldurur ve diğer blokların üstünde dizer.

Ekran Button: Blok Display Düğmesi: Blok Bu bağlantıyı göster ayarlanır: Blok Bu link Ekran ayarlanır: Block

Açıklama: Blok elemanların Ekran Ayarı onları birbirlerinin üstüne yığını yapmak ve% 100 üst bloğunun genişliğini dolduracaktır. Çoğu elemanları aslında varsayılan olarak bu ayara sahip.

Make onları 'Ekran: Blok' Kendinizi

Bu Button Bu Button Inline varsayılan göre: Linkler Ekran olan Linkler edilir Ekran: varsayılan satır içi

İPUCU: Bu öğeleri seçin (bazı Inline Block ve bazı Inline) ve onlara Ekran olun: Block birbirlerinin üstüne yığını böylece.

'Ekran: inline-block' örnek

İndir Düzenle Sil

Açıklama: Sıralı Blok elemanların Ekran Ayarı blok genişliği içindeki içeriğinin genişliği uygun hale getirecek. Bu onların içeriği yeterince küçük ise birbirlerine yanındaki yığını anlamına gelir. Yukarıdaki düğmeleri kopyalayıp yapıştırın ve nasıl çalıştığını görmek için içeri metni düzenleyebilirsiniz.

bunları kendiniz inline-blok yapmak

İndir Düzenle

İPUCU: Yukarıdaki unsurları seçip onları Ekran olun: inline-block birbirlerine yanındaki yığını böylece. Sen görüntüleri düğmelerinin yanında yığını olduğunu görürsünüz. İpucu: Ayrı Div Bloklar içine düğmeleri ve görüntüleri bırakarak (varsayılan olarak Blok Div Blokları Ekran çünkü) onlar birbirlerinin üstüne yığını yapacaktır.

Örnek Float

Teşekkür ederim! Sizin teslim alındı!

Oops! Form gönderme yaparken bir şeyler ters gitti :(

Açıklama: Ayar Ekran: Sıralı engelleme veya Floating (bu örnek) yan unsurlar yan yığını en yaygın yolu vardır. Bu örnekte nasıl bir şey yüzer göstereceğiz.

Kendiniz Float

Teşekkür ederim! Sizin teslim alındı!

Oops! Form gönderme yaparken bir şeyler ters gitti :(

İPUCU: Sol ve bir yüzdesi genişliği (örn:% 60) elde: İlk olarak Float yapmak, metin alanını seçin. Sol yanı sıra başka bir yüzdesi genişliğini (örn:% 40) ayarlayın: O Float için düğmeye ayarlayabilirsiniz böylece her ikisi de% 100 kadar ekleyin. Yani yan yana yığını için herhangi bir elemanı zorlamak için manuel bir yoldur.

Mutlak Pozisyon Örnek

Joe My Kupası

Bu bir fotoğraf başlık metindir.

Öne

Açıklama: Eğer bir eleman üzerinde Mutlak'a Konumunu ayarlarsanız, üst bloğu içinde her yerde onu konumlandırmak mümkün olacak. , Iç konumlandırmak Bağıl, ana elemanın Konumunu ayarlamak için hangi ebeveyn seçin. Not: elementler mutlak zaman onlar diğer unsurları üzerinde yüzer konumlandırılmış.

It Yourself Stil

Joe My Kupası

Bu Joe benim favori fincan için bir fotoğraf başlık olduğunu.

Öne

İPUCU: İlk Görüntü Sarıcı elemanı seçmek ve Akraba olan Konumunu ayarlayın. Ardından, başlık seçmek görüntü o Mutlak'a pozisyonu var set sürükleyin ve 7 hazır ayarını seçin. Doğru yere Seçme rozeti konumlandırmak için 2 hazır ayarı seçin ve elle konumlandırmak.

5. Stil Cascading

Basamaklı Stilleri kullanmak

Kolayca birbirinin üstüne ek derslere ekleme ve bu sınıfların farklı stilleri ekleyerek bir elemanın varyasyonları oluşturabilirsiniz. Biz bir düğmeye farklı varyasyonlarını sahip olduğu aşağıdaki örneği göz atın.

Paylaşılan düğme stilleri örnek

Düğmeleri kendiniz tasarlayın

YEŞİL Düğmesi

KIRMIZI Düğmesi

İPUCU: İkinci düğmesini seçin ve [+] Bir sonraki sınıfa başka bir sınıf eklemek için tıklayınız. Sen "Yeşil" diyebilirsin. Sonra o farklı stilleri verir. Bu stiller birinci sınıf taban stillerini geçersiz kılacaktır. Ardından kırmızı düğme oluşturabilirsiniz.

6. Medya sorguları

Farklı cihazlar için Tasarımı

WebFlow size ilk masaüstü cihazlar için web sitesi tasarımı ve daha sonra mobil cihazlar (üst çubuğunda Cihaz simgeleri erişmek) değişiklik yapma. Bir mobil aygıtta stilleri ekleme masaüstü stilleri geçersiz kılacaktır.

Duyarlı Başlık örnek

Bu mobil cihazlarda küçülüyor bazı başlık metindir.

Açıklama: Bu başlık masaüstünde gerçekten büyük, ama biz mobil cihazlarda daha küçük olmasını istiyoruz. Metin boyutu ve satır yüksekliği azalmış olduğunu görmek için üst çubuğunda cihazlarda tıklayın.

It kendinizi Fix

Bu büyük başlık metin mobil cihazlarda daha küçük olsun emin olun.

İPUCU: Tablet cihaz üzerinde bu başlığa seçip yazı tipi boyutu ve satır yüksekliği küçük yapmak. Telefon Peyzaj ve Telefon Portre cihazları için de aynı işlemi yapın. Bunu görebiliyorum

Duyarlı Düğme örneği

Düğme Metni

Açıklama: Bu düğme fare imleci ile tıklayın kolaydır çünkü Masaüstü ekranlarında küçük olması gerekiyordu. Parmağınızla dokunun daha kolay olduğunu bu yüzden biz mobil cihazlarda daha büyük yapılmış

Düğme Metni

It kendinizi Fix

İPUCU: Tablet cihazına gidin ve düğmeye dolgu artırın. Eğer Masaüstüne set önceki stillerini geçersiz kılar ve Tablet altındaki tüm cihazlara aşağı basamakla olacağını yaptığınızda.

Duyarlı Sütunlar örnek