14 EYLÜL 2011, ÇARŞAMBA

16 - İfade Web 4 Öğretici Giriº

Ve hi tekrar hoşgeldiniz Bizim son video biz üst gezinti alanında önde ve form etti ve bizim örnek proje gerçek bir tasarım görünümünde ama eğer görmezsiniz biz Bir tarayıcı bu kadar açık Eğer biz burada başardık görebilirsiniz Şimdi bu alanda yapmak istediğimiz sonraki şey Bay Area evinde şeklidir ve bizim sayfanın altbilgi içerik alanları şimdi ana afiş burada tam olarak görünmesini istediğiniz şekilde bu yüzden ilgisi gerçekten var Biz daha sonra bir video eklemek için gidiyoruz Aslında soluk oluşturur komut Burada etkisi fade out ama şimdi bu tam olarak biz bu istiyoruz yoludur görünm

ek bu yüzden biz burada bizim alt ayı alanda çalışmak gerekiyor böyle görünüyor böylece biz de bizim içerik alanı üzerinde çalışmak gerekir ve kenar ve son olarak en vurucu uh go ahead ve bu% yapalım yani ilk altbilgi O

minimize burada giysiler gibi bölge ve biz içine buraya geri geleceğiz Bizim CSS ve yine biz yapacağız ayı yalnız bırakmak sup orada biz sadece çok koyarak konum Birkaç basit stilleri yapmam gereken i

“Bu Microsoft Expression Web öğretici video size düzen ve afiş alanları, içerik ve sağ kenar çubuğu alanı ve sayfa altbilgisi biçimlendirmek için kurulum CSS Micro...”
Joshua Kywn

lk şey burada Çoğunlukla diğer elementlerle yaptığım gibi kırbaç belirtilen bir % uh bu eleman ve olacak Yüzde 100 beni go ahead ve arka plan rengini değiştirmek izin sadece orta gri renk için hangi Ben burada bu renk seçtiniz O altı ulaştığından emin olmak için biraz zor gitmek Orada aynı sayı aslında öncesinde var ve koyun padding arka plan rengini orada ne kadar biraz 10 piksel üst ve alt için iyi bir şey bu n0 ayrıldı ve sadece benim üst nihayet doğ

16 - İfade Web 4 Öğretici Giriº Resim 1 16 - İfade Web 4 Öğretici Giriº Resim 2 16 - İfade Web 4 Öğretici Giriº Resim 3 16 - İfade Web 4 Öğretici Giriº Resim 4

ru ve vermek Ben önde gideceğim slacked ediyorum taşma: Zaten gizli taşma: gizli özellik her şeyi olmasını istediğiniz şekilde gösterir emin olmak için ve girdiğiniz vurmak devam etmek isteyebilirsiniz sadece ne olduğunu tutmak için sadece iki bu yüzden biz gidip orada tüm üstünde bir satır var görebilirsiniz suree yakın duymak kapanış desteğini kazanmak ve o yüzden söylemek ve bu olacak bu görünmesi nasıl görelim K yüzden burada bir başlangıç ​​var Nixon aslında ben yok çünkü içeriği biçimlendirmek yapmanız gereken B

u sevgili biz önde gitmek gerekir ve renk Merkezi'ni değiştirmek dışarı biraz da boşluk onu oldukça değil yani yani compaq var ve o yüzden go ahead bizim stilleri bakalım o CS Üzgünüm en önde gidelim ve bizim ana şüphesiz HTML bakmak ediyorum ve burada bizim HTML kodu ve Burada is alt bölüm ve bu bir olduğunu görebilirsiniz Bazı önde gitmek için Submariner içinde h3 etiketi ve buraya sağ tıklayın ve aidat alt afiş h3 ve bu rengini değiştirmek beyaz ve ben önde gideceğiz ediyorum ve 16 piksel yazı tipi boyutunu değiştirmek doğa yapar aynı oldukça kendini açıklayıcı olmalıdır Seni emin olun beş kendilerini Orada kalın ve ben önde gitmek istiyorum ve merkezde metni hizalama Biri Text acı bir çok kullanırım mülkiyet ve merkezi seçmek Bunun için bir değer ve iyi bir Kapat kıvırcık braket var biz en kontrol go ahead ve bu nasıl görelim yapmak istediğiniz bir başka şey var seyir Orada biz oldukça güzel gitmek bizim tamamlanan projede baktığımız zaman ama biz görebilirsiniz çizgiler burada biraz dışarı aralıklı şu yani aslında ben de gitmek önde yaşıyorum ve burada bir daha stil eklemek ve bir daha özellik değeri tablosu vardır Ben devam line-height demek istiyorum: Bu aralık önce değil hatırlıyorum veya nesnenin sonra o line-height var: nesne ve ben de go ahead ve ah bir yüz seksen yüzde% olmalıdır söyleyeceğim Normal ve ben istiyorum go ahead Aslında uzay şey daha vermek biraz olan benim 15 piksel satmak ya da 15 piksel verebilir Bir padok ve şimdi en arıyorum önde gidelim Orada biz o arıyor görebiliyorum gitmek Neredeyse tam olarak bizim are gibi Örnek Proje hakkı Ben on beş belirtti beri biraz daha büyük aslında olabilir piksel Yapmak istediğimiz önümüzdeki hafta bu içerik alanını biçimlendirmek istediğiniz bir ve burada bu kenar çubuğu alanı ve yine tabii ki saç örnek proje arıyor içerik alanı daha küçük bir alana kısıtlı olmuştur ve daha sonra sol ve yan çubuk alanı için süzülüyor Burada bu alana kadar taşındı sağa itti olmuştur İçerik yukarı alanı seviyorum bu yüzden şimdi önde gidelim ve ilk şey go ahead ve yapmak istiyorum Bu içeriğin kurulur Onlar buraya geliyorlar bölüm biz bazı ekstra ayrıntılar kullanarak değildi olsun örneğin içerik için rapçi tarafı yapmamışlar sol Biz bu tüm bazı dinsiz yapar kullanmak için gidiyoruz değil yapacağız burada sağ tarafını ve içerik gerek Ben biraz burada sağ tarafını hareket edebileceğiniz gibi ben yapabilirim ne zaman her şey güzel olacak şekilde içeriği aşağıda ve sipariş bu unsurların görünür sırasını dole Bomba atmak sen hiç aslında sırasını önemli değil onlar görünür Onlar eğer ama güzel sıralı Gününüzü bizim olduğu aynı sırayla Gerçek HTML kodu sadece düz şeyleri tutmaya yardımcı olur kafanızda bu yüzden önde ve edeceğim benim içerik alanı için gitmek akışını demek sol Ben istiyorum çünkü kenar çubuğu açık içine hareket edebilmek için Alan ve ben go ahead ve bu belirttiğiniz edeceğim 650 olduğu için ya da olmak 650 piksel genişliğinde Ansel söylemek ve en bir göz atalım ve bu şekilde görmek O kenar çubuğunu görebilirsiniz şimdi görünen güzel dışarı taşındı Oradaki konuma ve benim içerik kısıtlı olmuştur Bu alana ama biz önde biz go ahead ve bazı eklemek istediğiniz isimli yapacağım gidecek Biz bunun için istemiyorum çünkü burada bir vardı Sağ kenar sabah karşı devam aslında sağ tarafa aynı şeyi yapmak Alan burada tekrar kendimizi vererek biraz daha fazla alan içerik yani tarzı devam edin ve dolgu yapmak üzerine 20 piksel Ben tüm yol etrafında yüzden öylece kullanacağım bir değer olduğumu istiyorum Hayvan Eğer Paddick 20 piksel şey ve o olacak hem de tüm yol sağ tarafında dolaşmak var ve şimdi tamam diyebiliriz bu bir göz atın Şimdi ben gerçekten bir şey güzel burada olacak var ve ben kendinize bu unsurlar arasında biraz daha fazla yer gibi olabilir değilim Bu etrafında oynayacak kadar kenar çubuğundaki marjı kullanarak sağ buraya ve en aslında şu anda bunu ileriye gidelim Ben gidip önde ve burada sağ siteye geliyorum ve ben de go ahead ve marj çizgi hakkı söyleyeceğim Üzgünüm marj çizgi kaldım ve 675 olacak piksel ve haydi bakın nasıl boşluk şeyler dışarı Hava biz şeyleri biraz şimdi gitmek Daha iyi ve alt kenar çubuğu içeriği Walt Bu yayılacaktır için üzerine düştü Buraya yanı sıra bölge Şimdi biz burada asıl içerik için bazı stilleri go ahead ve oluşturmanız gerekir Bu yaş almak bakımı teheran bu yaş için Bizim paragraflar için yanı sıra eden görüntüler yüzden benim tarzı haline geri geliyor Burada alan Ben önde ve ilk biçimi gitmek değilim Benim h1 onun ve yine orada bir seçiciler kullanıyorum bu yüzden ben de go ahead ve ben de o kadar ilk ben şey go ahead konur demek kulüpler Bazı marj Bu ve marj ben diyecektim ben Sağdaki üst 0 0 Soldaki alt ve 0 20 piksel ve ben de istiyorum bir üst ve alt kısmında biraz koymak evet ama şu an için en bakmak ve görelim Bu marj bu h1 etkiliyor ve orada bazı güzel görebilirsiniz dolgu uygulamak şimdi aralık biz aslında burada bu bakmak çünkü Eğer ilk canlı orada büyük yazı tipi biraz yapılmış görebilirsiniz ama burada da bir sınır var bu yüzden önde gidelim ve burada bu iki şey Ben devam ediyorum ve benim CSS geri dönmek ve ben de go ahead ve yazı tipi boyutunu söyleyeceğim bir olacak 32 piksel olacak ve o olacak büyük emin olun ki ve sonra ben de devam edin ve bir alt sınır koymak ediyorum ne devam edin ve bir alt sınır koymak gonna var Bir sınır çizgi dibe yazlar ve bu konuda bir piksel olacak orta gri SolidWorks Katı sınır söylemek ve en o nasıl göründüğüne bakalım ve orada biz orta gri olmadığını aslında gitmek yeterince karanlık bizi bu yüzden devam edin ve bir şey değiştirmek edeceğim görmek için orada biz gitmek biraz daha koyu Şimdi ben orada o alt sınır görebilirsiniz ama sınır sağa yukarı ISH görebilirsiniz karşı iletişim ve tekrar düşünüyorum marjı ve dolgu arasındaki fark bu dolgu nesnesi hatırlıyorum Sınır ve sonra marj işte altında bu boşluk marjı var ve biz herhangi bir doldurma belirtilmemiş beri ve bu sınırın dışında reset zeroed her şeyi doğru karşı olduğunu iletişim yüzden buraya gelmek gerekir ve ben bu konuda biraz Biti yanı sıra bir doldurma uygulamak gerekir bu yüzden ben de devam edin ve dolgu söyleyeceğim 20 piksel alt ve üst olacak ve 0 piksel sol ve sağ ve şimdi gördüğünüz yanı itti kenardan uzak sınır kendi itme benim Biraz daha böylece orada görebiliyorum aşağı başlık yani orada biraz daha açık alan olsun Sonraki şey kullanıcılar burada yazmak için bu paragraf biçimlendirmek sağlar bir şey daha benim CSS gelip tekrar hedefleme ediyorum İçerik alanı olarak özellikle am alanında paragraflar ve ben bir kaç şeyler yapmak istiyorum benim paragraf kadar yapmak istediğim ilk şey Kendime biraz boşluk vermek istiyorum Yukarıda ve benim paragraflar aşağıda ben önde olacak gidiyorum yani ve benim paragrafları marjı amis söylemek ve ne kadar ben bir yer kazandı yapmak onların biz gerçekten kullanmak kalacağız diyeceğim Ben 10 piksel üst edeceğiz ve alt n0 piksel sola ve sağa ve en go ahead ve görebileceğiniz seyir bu biraz görelim dışarı bu öğeleri aralıklı yolu belki biraz daha Seni devam edin ve bunu % uh 16 piksel Ben tasarıyı seviyorum, çünkü oraya gidip Benim satırlar bir metin olması biraz daha Devam edin ve line-height kullanmak gonna biraz daha az yoğun açmak: özelliği Bu da birilerine go ahead ve hat çizgi hi yapmak bu arada mesafe hatırlamak Bizim hayatımızı hayatımızın arasındaki in boşluk olacak: ve i line-height söyleyebilirim gitmek istiyorum 160 civarında ve o dışarı boşluk olduğunu kadar aralıklı çocuğu görebilirsiniz Evet boşluk dışarı sadece küçük biraz Orada ormanlar tamam şimdi en önde gidelim ve burada aşağı doğru başlık bu ikinci seviyesinin biçimlendirmek eller go ahead ve kol yapmak İçerik h2 ve ben de devam edin ve söylemek olduğumu marjı aralığı üstünde 20 piksel olacak ama om sağda alt ve sol olacak 0 piksel olacak ve en uzay dışarı olduğunu görelim ve orada biz biraz orada yıkar o itme ile gitmek Şimdi görüntüler de bazı biçimlendirme ihtiyacım vardır Biz bakarsak burada görüntü elimizde olan Biz orada bazı sınırında bazı marjı ve bazı dolgu görebilirsiniz onun bu görüntüler etrafında ve vergi hiç yapmak zor olurdu var Biz bu yapıyorum sınırları içinde marj doldurma tahmin yeraldığını ve biz sadece hedef gerekiyor bu yüzden ben de olduğumu devam edin ve içeriği demek her zaman bir var ben je Greg görüntü te duyuyorum Sürekli alanda bu istediğim budur go ahead ve ben önde gitmek istiyorum yapmak ve çevresindeki bazı dolgu tüm yol koymak Benim görüntüler ve ben yapacağım bunu olacak bir piksel söylüyorlar Ben tüm yol etrafında olmak istedim çünkü ve ben sadece bir değeri kullanın Benim görüntüleri etrafında bir sınır için onları ben sınırlanmıştır do yorgun değilim bu yüzden border-bottom: border-left: border-right: onlardan biri Ben tüm yol etrafında olmak istiyorum çünkü ben öylece sınır yapmak ediyorum ve ben bunu istiyorum, bir tek piksel sınır olmak istiyorum % uh gri renk birileri go ahead ve gri o gölge belirtin ve sonra ben de devam edin ve sağlam bir yalan olacak diyeceğim ve sonra nihayet ben de biraz Biti etrafında bir marj istiyorum kulüpler yani sınırları doğru birbirlerine karşı itme olduğunu yani yine bir marj olacak özledim 8 Piksel tüm yol etrafında ve sonra bir kıvırcık braket ile benim tarzımı kapatmanız gerekir ve biz bu görüntüleri biçimlendirme şeklini görebilirsiniz ve en go ahead ve herşeyi iyi gösteren olduğundan emin olalım yani orada bir tarayıcıda Google Chrome'da olduğu Eğer benzer görünüyor görmek ve en sıra Internet Explorer'da bunu deneyelim yapabilirsiniz ve orada ben içine çalıştırmak tek sık problem gitmek Ben şeyleri koymak ve ne zaman onlara bakmak olduğunu Chrome ve Firefox ve Safari'de her şey mükemmel görünüyor ancak Internet Explorer daha çok görüntü olabilir biraz üzerinde bir şeyler pompalayacak rap aşağı bazen numarası ile bir taksi oyun olsun görmek Bunu bakmak istiyorum bu seyir aynen almak Şimdi burada kenar çubuğu kafa travması da önde gidelim ve orada bulunan paragraflar ve yine biz önde gitmek istiyorum burada koduna bakmak ve ben devam edeceğim, benim kenar çubuğu bakmak ve bu h2 olduğunu görebilirsiniz kimin ya da ben yaptım beri h2 kullanarak Sağ taraftaki ölüm Pek çok gelip yapmak Sağ taraftaki boşluk h2 Devam edin ve marj olacak söylemek istiyorum ve sağ taraf h2 Üst 0 solda 20 piksel en altta 10 piksel ve 0 piksel diyelim o dışarı kapatmak için gidiyor sağda ve sağ tarafta ve daha sonra görüntüleri aynı şeyi ve onların üzerinde konum paragraflar ve Ben aslında go ahead orada onların put alanı uydurmak olabilir ve ben devam edin ve yine sadece burada bir biraz bir marj koymak edeceğim belki beş piksel veya latte piksel üst ve alt 0 sol ve sağ ve go ahead line-height yapacağım: Sadece bir boşluk benim metin dışarı Hunterdon yüzde altmış Sadece biraz daha go ahead söylemek ve en bakalım ve nasıl Bu aslında arıyor ve orada bir tarayıcıda test ne o var Google Chrome ve görebilirsiniz Bu çıkacağını yolu aslında ekstra bir paragraf var bizim orijinal ile karşılaştırın Orada metin aslında biraz daha metin o aşağı iterek neden böyle bir nedeni senin sütunlarda içerik miktarını dengelemesi Burada hep ben sadece yer tutucu metin kullanarak olduğumda bir meydan okuma olacak hiç de zor Aslında burada bir şeyler yazıyoruz zaman biraz fazla olabilir sorunsal Burada altbilgi olduğu ile şimdi biz kalacaksın basit olduğundan ve yine altbilgi basit görünüyor arka plan rengini değiştirmek Center metni Ben dolgu seviyorum ve aynı zamanda temizler emin olun onu biraz vermek Burada bu şamandıra Biri devam edin ve benim tarzı haline gel o ve yine ben emin ve sol şamandıra da temizler yapmak gerekir bu yüzden doğru görünüyor ve tüm tarayıcılar hem açık tuzların Ben arka plan rengi bir değişiklik değilim siyah ve ben de olduğumu devam edin ve bakımı üzerinde biraz bir dolgu uygulamak Padania kolu en 10 piksel alt ve üst diyelim ki 0 sol ve sağ hey Şuna altbilgi şimdi bir göz atın demek önde gidelim Bizim savaşçı orada vergi ile bir şeyler yapmak gerek şimdi açıkça var ve bu metin gölgelik etiketi aslında bu yüzden devam edin ve Yapacağımız flutter anahtar ve ben farklı bir paragraf stili var burada görebilirsiniz benim sağ tarafında benim içerik alanı için benim de çarpıntı olarak bu beni özellikle hedef sağlar Davut söylediklerini dayanan eleman cümle seçmen gerçekten önemli olduğunu, böylece anlıyorum ben mülkiyet olduğumu şimdi biz tekstil kullanılmak üzere bizim metnini gönderdi teşekkür Orada gerekli am merkezi gibi bir eşek yazı rengini değiştirmek sadece böyle beyaz demek ve en ona bir göz atalım ve şimdi gösteren yol görebilirsiniz ve bir final zaman en önde gidip Chrome'da bu önizleme izin her şey çalışıyor ve burada iyi bakıyor ve en go ahead ve internet explorer önizleme izin ve yine her şey iyi görünüyor aralık ve aslında tekrar bozukluğu göstermek size fark farklı tarayıcılarda ve neden iğne gerçekten göz kulak işler Burada Internet Explorer var alan miktarını bakmak ve bunu alan miktarına göre izlemek Burada Google Chrome aynı web sitesi içinde ve bana Amana tekrar devam burada bu küçük yapalım ve aşkın bu kaldırmak gördüm ve ben tür biraz burada bu dengelemek lazım Onların önce ve kitaplar Oldukça üzgün değil orada biz gidip görebilirsiniz Oradaki tek Pratap yapmak o bazı ne Bu konuda üzgünüm Biz orada üçüncü fıkra var oraya gitmek Benim son paragraf benim görüntüleri ve onların orada ama burada görebilirsiniz Hatta bu sanatçısını olsa ve gerçekten gerçek çok iyi bu göremiyorum Beni go ahead burada burada biraz bu kadar geçelim ve Expression Web minimize bu Şimdi gitmek orada çerçeve üzerinde var Eğer cehennem burada görebilirsiniz Benim başlıkları burada benim görüntüleri yanar sıraya benim İkinci paragraf kendi hatları ancak cehennem görebilirsiniz Burada bu var çok fazla alan karga sonra internet explorer var Burada biraz üzerinde kaydırma eğer ve gördüğünüz bu bakmak ama burada sorun kenar çubuğunda değil Bu aslında bir daha aşağı çarpmış olduğu Metin bir daha satır aşağı hareket ettirmek olduğunu Bu iki kelime sempre ve aşağı bütün bu bölgeyi zorluyor Chrome'da Inc aralığı ise biraz farklı Internet Explorer'da gerçekten sitenize bakmak zorunda Farklı tarayıcılar bunu nasıl bakmak için gidiyor nasıl görmek için sizin özellikle yüksek sütunlar dengelemek için gidiyoruz dışarı ve en önde gidelim ve haber konumlandırmak önümüzdeki video için bunları kullanın böylece bu yüzden oldukça iyi biçimlendirme kadar bu sayfayı bitirdik ne şimdi ileriye gitmek için hazırsınız ve do Aslında siteyi kendisi oluşturmaya başlayacak biz sadece çalıştığım bu noktaya kadar hatırlıyorum Bu Maingot HTML sayfaları gerçek ürünleri servis ve kişi ile ilgili bizim ana sayfasına endeksi biz sonraki video yapmak için gidiyoruz ne yani bok kadar yapılmış değil Biz sayfa şablonu oluşturmak için gidiyoruz olduğunu bizim ana o HTML ve sonra biz bireysel site oluşturmak için bu şablonu kullanmak için gidiyoruz sayfalar dizin oluşturmak için ürünler yaratmak için yaklaşık oluşturmak için hizmetler tüm iyi Baylar temas şeyler bu kadar Sonraki video biz aslında devam edin ve şablonları oluşturmayı öğrenmek Expression Web ve sonra bizim site için ayrı sayfalar oluşturmak Ben sonraki video görürsünüz.

Açıklama

Bu Microsoft Expression Web öğretici video size düzen ve afiş alanları, içerik ve sağ kenar çubuğu alanı ve sayfa altbilgisi biçimlendirmek için kurulum CSS Microsoft Expression Web'i kullanacaktır. Www.timothywebtemplates.net Bunlar isteğe bağlıdır, biz gitmek gibi kodu yazmanız ve tamamlamak için kendi kaynaklarını kullanabilirsiniz: Eğer videoları ve şablon koleksiyonunda kullanılan eğitim materyallerinin almakla ilgilenen varsa, en öğrenebilirsiniz bu proje. Etki ve webhosting üzerinde Godaddy bizim web tasarımcıları indirim almak için, lütfen ziyaret edin: http://timothywebtemplates.net/godaddy/godaddy.html

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

Joshua Kywn

Joshua Kywn

Dreamweaver, Expression Web, PHP / MySQL, JavaScript ve WordPress Web Tasarım Öğreticiler PHP ve JavaScript serisi üzerinde çalışıyorum. İndirim Kodu Hosting Domain Tescil ve - etiketli "Domain & Hosting İndirim" aşağıdaki bağlantıyı kullanabilirsiniz

YORUMLAR



9.5/10

  • 95
    Olumlu
  • 5
    Olumsuz
  • 19
    Yorum
  • 39324
    Gösterim

SPONSOR VİDEO

Rastgele Yazarlar

  • David Tedeyev

    David Tedeye

    20 AĞUSTOS 2011
  • jonathepianist

    jonathepiani

    31 Temmuz 2008
  • Shon Gonzales

    Shon Gonzale

    5 EKİM 2014

ANKET



Bu sayfa işinize yaradı mı?