Bir site tasarlamak, geliştirmek, genellikle herhangi bir belirli bir düzen önce son bir site ne gibi görünebilir size göstermek için (ücretsiz bir alternatif istiyorsanız),Adobe Photoshop veya Paint.NET gibi bir grafik uygulaması ile bir mock-up oluşturmak veya HTML kodlama.
Mock-up, sonra kodlama ile devam etmek için bir karar verebilirsin çeşitli modeli, kullanıcıların, test ve yöneticileri, etrafında bu gösterebilir. Gösteren Şekil-1 de gösterildiği gibi, basit bir resim oluşturabilirsiniz
içerik nasıl sayfanın çeşitli alanlarda ortaya konulan olacaktır.
Bu bir başlık ve altbilgi, tipik bir iki sütun düzeni.Düzeni kabul olur, gerçek grafik ve HTML ile yeniden oluşturmanız gerekir. Ortalama olarak, gerçek HTML yerine bu mock-up, görüntü olarak üretmek için bir grafik tasarımcı için daha az zaman alır, çünkü grafik programı bunu yapın sayfaları. Sonra, istemci mock-up Nihai olarak onaylanmış, grafik tasarımcı, mock-up görüntü bir HTML sayfası kullanabileceğiniz küçük parçalar halinde kesebilirsiniz.
Mock-up oluşturma, doğası gereği çok sanatsal olmayanlar bizler için her zaman kolay değildir.Başkasının, profesyonel bir grafik tasarımcı, grafik tasarım oluşturmak için, geliştiriciler (bizim gibi) ve daha sonra uygulama etrafında inşa edecek olması nedeniyle genellikle orta veya büyük ölçekli bir şirket için bu bir sorun değildir. Bu ara yüz tasarımı konusunda uzmanlaşmış bir kişi bulmak önerilir; genellikle yerel bir üniversitede veya yazılım geliştiricileri ile grafik tasarımcıları bir araya getiren uzman pek çok web sitesi biri üzerinde bir grafik tasarımcı bulabilirsiniz. Bir ön uç düzeni gelişmekte olan veritabanı oluşturma ve iş katmanı çengel başlatmak için çekinmeyin, çünkü görsel olarak çekici bir web sitesi düzeni oluşturmak için bir grafik tasarımcı aslında bize daha üretken yapar. Genellikle, tasarımı ile bitmiş ve biz görünümüne denetleyicisi çengel, iş mantığı,ya da MVC durumda web sitesinin düzeni uygulamaya başlamak için hazır zaman yönetim tarafından onaylanmış oldu.
Ancak, bazen kendiniz grafik tasarım oluşturma ile karşı karşıya iseniz ve bir grafik tasarımcı kiralamak için kaynakları yoksa bir şablon mağaza yardımı yararlı ve ucuz olabilir. Bu kitapta ele alınan web sitesi oluşturmak amacı için, biz, bir başlangıç noktası olarak kullanabilirsiniz, iyi görünümlü bir site tasarım oluşturmak için Free CSS Templates (www.freecsstemplates.org) kullanılır. Başlamak için gerekli tüm HTML ve PNG dosyaları ile CSS tabanlı bir düzen sağladı.Daha sofistike bir tasarım tercih ederseniz Template Monster (www.templatemonster.com) denemek isteyebilirsiniz. PSD dosyaları (Photoshop ile açılacak), gerekli görüntü dosyaları ve görüntüleri zaten kesilmiş ve CSS kullanarak yerleştirilmiş bazı HTML sayfaları olarak tasarım içerir. Biz kendi stilleri oluşturmak ve HTML biçimlendirme özelleştirmek için istedim, ama görsel bir şablon ile başlamak çok yararlı oldu çünkü önceden oluşturulmuş HTML sayfalarını birebir kullanmak mümkün olmadığını bulundu. Bu site tasarım uygun kişilere satmak yardımcı olabilir erken oyunda profesyonel hissediyorum.
Tasarım Uygulamak İçin Kullanılan Teknolojiler
Ancak, ASP.NET, kullanıcının bilgisayarında çalıştırmak değildir, bunun yerine,dinamik bir tarayıcı sayfasını oluşturmak için kullandığı unsurlarını oluşturur. Tarayıcıya indirdik Bu unsurlar, HTML, resimleri, JavaScript ve HTML Document Object Model (DOM) çeşitli öğeleri, renkler, boyut, ve ittifaklarının sağlayan Cascading Style Sheets (CSS) oluşur. HTML, çeşitli şekillerde tanımlanmıştır.Visual Studio kontrolleri form üzerine düşmesi görsel form tasarımcısı kullanabilirsiniz ve bu HTML kodunu otomatik olarak oluşturur; Ancak, bu yöntem ASP.NET MVC HTML biçimlendirme üzerinde kontrol odağı ve vurgu, çünkü daha az yararlıdır. Ya da, el-editörü yazar kendi HTML kodunu daha sıkı, daha profesyonel hissediyordur; HTML bakmak bakımı, bu kodlama stilleri ve alışkanlıkları içine dış kullanıcılar iç görü biraz verecektir.
ASP.NET 1.x modeli "arkasında kod" kullandı: HTML (ve bazı sunum odaklı C # kodu) bir aspx dosyası koymak ve uygulama C # kodu tarafından miras olacaktır ayrı bir dosya içine gideceğini aspx dosya.Görsel web sayfası tanımlanır çünkü. Aspx dosyası "sayfa" diyoruz. Bu sunum kodu ve ilgili uygulama kodu arasında bir ayrım sağladı. Bir sorun bu model ile, form tasarımcısı tarafından oluşturulan otomatik olarak oluşturulan kod geliştirici kendi kodu için kullandığı aynı dosyaları yerleştirilmiş olacağını. Bu. NET Framework kısmı sınıfları olarak adlandırılan yeni bir özellik kullanılan ASP.NET 2.0 code-behind modeli, biraz düzeldi. Fikir basittir: bir sınıfın birden fazla dosya span izin. Visual Studio kontrolleri ilan ve olayları kayıt zamanı kodu otomatik üretecek vedaha sonra bu kullanıcı tarafından yazılmış bir kod ile bir araya getirecektir; Sonuç, tek bir sınıf. aspx sayfası tarafından miras. @ Page direktifi ilan etti. Aspx sayfası kullanıcı tarafından yazılmış bir kod. Cs kod arkasında dosya referans CodeFile niteliğini kullanır.
ASP.NET MVC kod ayrılığı kavramı, arkasında kullanıcı arabirimi veya görmek için dosyaları kodu kullanmak gereksiz yaparak bir adım daha ileri götürüldü. İle etkileşim görünümü denetleyicileri taşındı kod; bu şimdi görüşlerini sürmek için kullanılan temel kodu, kopyalama veya değiştirme gerek kalmadan kolayca takas ve yerine farklı bir tür olması sağlar harika bir ayrılık görünümü.
CSS Kullanarak Stil Sayfaları Tanımlayın
Cascading Style Sheets (CSS) bu kitapta ayrıntılı bir açıklama yapmak mümkün değildir, ancak bazı genel kavramları ele alacağız. CSS ile ilgili tüm ayrıntılar için başka kaynaklardan danışmalısınız.
Amacı, CSS, HTML etiketleri, yazı tipi boyutu, renk, hizalama, vb gibi çeşitli üslup unsurları belirterek CSS tarafından görsel belirtmek için kullanılır. Bu stilleri HTML etiketleri nitelikler olarak dahil olabilir, ya da ayrı ayrı saklanır ve sınıf veya ID tarafından sevk edilebilirler. Bazen, HTML dosyaları, aşağıdaki örnek olarak HTML etiketleri, kendileri kodlanmış stilleri:
<div style=”align: justify; color: red; background-color: yellow; font-size: 12px;”>some text</div>
Tüm HTML dosyalarını ve CSS öznitelikleri için avcılık içine gitmeden bu üslupöğeleri değiştirmek için zordur, çünkü bu çok kötü. Bunun yerine, her zaman ayrı bir stil tanımları koymak gerekir
sayfalık bir uzantısı css dosyası tarzı veya bir HTML dosyası içinde stilleri de dahil olmak üzere ısrar ederseniz, en azından bir <style> bölümünde HTML dosyasının üstündeki bunları tanımlamak gerekir.
Birlikte ne zaman grup CSS stilleri, sözdizimsel sınıflar ve işlevler C # benzeyen küçük sınıflar oluşturabilirsiniz.Onları sınıfta= özniteliğini başvurulan izin vermek, HTML etiketleri onlara bir sınıf adı ya da kimlik atayabilirsiniz.
Stil sınıfları kullanmak ve bu sınıfın kullanan tüm HTML etiketleri yazı tipi boyutunu değiştirmek isterseniz, sadece bu tip birçok görsel HTML öğeleri değiştirmek için bu sınıfı bulmak ve bu tek olay değiştirmek gerekir.
Aslında, tüm sayfa boyunca bu basamaklı stilleri CSS ilk iki harfi nereden geldiğini. Stil sayfası ayrı bir dosya olarak tanımlanmış olması durumunda tek bir dosya değişecek ve sayısınız bilmediğimiz sayfaları buna göre kendi görünümünü değiştirmek için, bu yaklaşım daha fazla yararlanacaktır.
CSS kullanarak birincil faydaları stilleri korumak ve ortak bir görünüm uygulamakve birçok sayfa arasında hissetmek için gerekli olan geliştirme çabası en aza indirmek için. Ancak bunun ötesinde, CSS, HTML kodu ve genel site için güvenlik sağlar. İstemci zaten üretimin içinde bir site bazı stilleri değiştirmek istediğini varsayalım. Sayfanın HTML öğeleri kodlanmış stilleri ettiyseniz, değiştirmek için stilleri bulmak için çok sayıda dosya bakmak olurdu ve tüm bunları bulmak olmayabilir, ya da yanlışlıkla başka bir şey değişebilir - bu bir şey kırılmasına neden olabilir! Ancak, CSS dosyaları ayrı bir yerde saklanan stil sınıfları olsanız bile,değiştirilmesi gereken sınıfları bulmak için kolay ve HTML kodu bakir ve güvenli olacak.
Ayrıca, CSS dosyaları ayıran bir site daha verimli hale getirmek ve bant genişliği maliyetlerini azaltmaya yardımcı olabilir. Tarayıcı bu kez indirmek ve sonra onu yakalamaya (sunucu CSS dosyası önbelleğe tarayıcı söylemek doğru ayarlanmış olduğundan emin varsayarak). Önbelleğe alınmış css dosyası için bir başvuru sayfaları, CSS dosyasını yeniden indirmek zorunda değil, isteği çok daha küçük olacak ve bu nedenle daha hızlı indirmek için. Bazı durumlarda bu, bir kullanıcının tarayıcısı web sayfalarını yükleme ve oluşturma önemli ölçüde hızlandırabilir.
İşte size stil.css adlı ayrı bir dosyada saklayarak daha önce gösterilen DIV nesne stili yeniden nasıl bir örnek:
.benimstilim {
align: justify;
color: red;
background-color: yellow;
font-size: 12px;
}
Sonra aspx veya html sayfası olarak, aşağıdaki gibi HTML, CSS dosyası bağlantısı:
<head> <link href="/Content/stil.css" text="text/css" rel="style sheet" /> <!-- other metatags... --> </head>
Son olarak, HTML bölümü etiketi yazmak ve bunu kullanmak istediğiniz CSS sınıf belirtin:
<div class="benimstilim">some text</div>
Tarzı ne zaman ilan edildi, biz sınıf adı (.) Önek nokta kullanılan unutmayın.Bu, bu tarzı bir sınıf ve bu sınıfın içeren herhangi bir öğe uygulanabilir stilleri vermektedir tarayıcı gösterir. Tüm özel stil sınıfları için bunu yapmak zorunda.
Eğer belirli bir tür (örneğin, tüm <p> paragrafları, hatta sayfa <body> etiketi) tüm HTML nesnelere uygulanacak bir stil tanımlamak istiyorsanız, stil dosyasında aşağıdaki özellikleri yazabilirsiniz:
body {
margin: 0px;
font-family: Verdana;
font-size: 12px;
}
p {
align: justify;
text-size: 10px;
}
Bu, tüm vücut etiketlerinin varsayılan stil ve tek bir yerde (paragraf) etiketleri <p>ayarlar.Ayrıca bu etiketleri açık bir sınıf adı belirten bazı paragraflar için farklı bir stil belirtebilirsiniz.
Kimliği göre bir stil sınıfı bir HTML nesnesi ilişkilendirmek için başka bir yol.Aşağıdaki gibi, # öneki ile sınıf ismini belirtiyoruz:
#ustKisim {
padding: 0px;
margin: 0px;
width: 100%;
height: 184px;
background-image: url(resim/ustKısım.gif);
}
Sonra HTML, CSS, HTML etiketinin id özniteliği kullanabilirsiniz.Örneğin, bu bir HTML bölümü etiketi nasıl tanımlamak ve bunu # başlık stili kullanmak istediğinizi belirtin:
<div id="ustKisim">some text</div>
Genellikle tek nesneler için bu yaklaşım, üstbilgi, altbilgi, kısım sol, sağ ve merkezi sütun gibi kullanımı, ve vb. Bu demektir ki, sen, bir sayfada aynı adı sadece bir kimlik tag var, aynı sayfada tarzı birden fazla etiket izin verilir, daha önce tartışılan sınıf ve eleman stilleri farklı. Yani sadece bir üstbilgi, altbilgi ve kimliği kullanarak diğer adlı elemanları HTML sözdizimi altında izin ve birden fazla varsa, bir hatadır; referans bu kimliği, CSS ve JavaScript ile sorunlara neden olabilir.
Ayrıca çeşitli yaklaşımlar karıştırın. Bölümde vücut sınıfı ile bir kap içine bağlantılar bölüm başlığı sınıfı ile bir kısım, ve diğer bazı stilleri içine tüm bağlantılar için belirli bir stil vermek istediğiniz varsayalım. Bunu bu şekilde yapabilirsiniz:
Css dosyası
.KisimBasligi a {
color: yellow;
}
.Kisimicergi a {
color: red;
}
.cshtml / .html Dosyası
<div class="KisimBasligi"> some text <a href="http://www.karayeltasarim.com">Karayel Tasarım</a> some text </div> <div class="KisimIcerigi"> some other text <a href="http://www.karayeltasarim.com">Karayel Tasarım</a> some other text </div>
Son olarak, belli sınıflar tarzı bazı unsurları istediğiniz özel durumlarda hedef için çeşitli yaklaşımların bir arada, hatta iki sınıf bir arada kombinasyonu. Yukarıdaki kod, gibi birçok unsuru olarak yakalamak için büyük bir net döküm gibi, aşağıdaki kodu, bazı köşe durumlarda hedef izin veren tersidir. Sadece sınıf bölüm başlığı ve bölüm başlığı ve ilk derece sınıfları içeren bağlantılar için farklı bir tarza sahip bağlantılar için belirli bir stil vermek istediğiniz varsayalım:
Css dosyası
a.kisimbasligi {
color: yellow;
}
a. kisimbasligi.first-instance {
color: red;
}
.aspx / .html Dosyası
<a class==" kisimbasligi first-instance"
href="http://www.karayeltasarim.com"> Karayel Tasarım </a>
some other text
<a class==" kisimbasligi" href="http://www.karayeltasarim.com"> Karayel Tasarım </a>
some other text
<a href="http://www.karayeltasarim.com"> Karayel Tasarım </a>
some other text
İlk bağlantı kırmızı renk olarak işlemek, ikinci bağlantı rengi sarı olarak işlemek ve üçüncü sayfa üzerindeki bağlantı normal hale getirecektir.
HTML Tabloları Kullanımlarından Kaçınmak
Bazen geliştiricileri, bir web sayfasındaki diğer öğeler konumlandırma kontrol HTML tabloları kullanabilirsiniz. Bu CSS geliştirilen önce standart bir uygulama olarak, ama pek çok geliştirici bugün hala bu yöntem kullanıyor. Bu çok yaygın bir uygulama olmasına rağmen, W3C resmi söyleyerek,(www.w3c.org/tr/wai-webcontent) etmemektedir:
" Tablolar gerçekten tablo bilgileri ("veri tabloları") işaretlemek için kullanılmalıdır.İçerik geliştiriciler ("düzen tabloları") sayfaları düzenlemek için bunları kullanmaktan kaçınmak gerekir.Herhangi bir kullanım için masalar ekran okuyucuları kullanıcıları için özel sorunlar da mevcut. "
Diğer bir deyişle, HTML tabloları sayfanın tüm düzen inşa etmek için değil, bir tablo gibi, sayfadaki tablo verileri görüntülemek için kullanılmalıdır. Bunun için, muhtemelen, ayrı bir <style> bölüm veya ayrı bir CSS dosyası kullanmak suretiyle, kısım elemanları (örneğin DIV'leri gibi) ve kendi stili özniteliği kullanmalıdır. Bu nedenlerle bir dizi için idealdir:
- Görünüm ve konumunu tanımlamak için DIV'leri ve ayrı bir stil sayfası dosyası kullanıyorsanız, sitenizin her sayfası için, tekrar tekrar bu tanımı tekrar etmek gerekmez.Bu her iki geliştirmek için daha hızlı ve bakımı daha kolay olan bir site yol açar.
- Bu site, son kullanıcılar için, çok daha hızlı yüklenmesini olacak! Stil dosyası sunucu üzerinde değişene kadar sadece bir kez müşteri tarafından indirilen ve daha sonra sonraki sayfa istekleri için önbellek yüklenen olacağını unutmayın.Eğer tabloları kullanarak HTML dosyası içinde düzenini tanımlamak. Eğer istemci yerine tüm sayfayı indirerek daha uzun bir zaman gerektirir ve size bant genişliği daha fazla mal olacak bu sonuç, her sayfa için tablonun düzeni indirmek, ve böylece daha fazla bayt indirmek olacaktır.Tipik olarak, bir CSS odaklı düzeni% 50 kadar indirilen bayt kırpabilir ve bu yaklaşımın avantajı hemen belirginleşir.Ayrıca, bu tasarruf, ağır yüklü bir web sunucusu üzerinde büyük bir etkiye sahip her kullanıcı için daha az bayt göndererek iletişim web sunucu tarafında eşzamanlı kullanıcı sayısı ile çarpılarak toplam tasarruf belirlemek için olabilir.
- Ekran okuyucular, kör ve görme engelli kullanıcılar için sayfa metin ve diğeri içeriğin okuyabilirsiniz yazılım, tablolar, sayfa düzeni için kullanıldığında çok daha zor bir iş var. Bu nedenle, boş bir masa düzeni kullanarak, sitenin erişilebilirlik artırabilir.Bu, kamu yönetiminin ve devlet kurumları için bu gibi sitelerin belirli kategoriler için çok önemli bir koşuldur.Birkaç şirket, bu gibi basit konular üzerinde tüm kullanıcı gruplarının yazmak için istekli.Körler için ekran okuyucu sitenizi nasıl okuyacaktır görebilmek için kolay bir şekilde web sitenizin tüm stil sayfaları kaldırmak için.Traight aşağı akamaz ve içerik bölüme kadar kırık varsa, onlar, içeriği önemli ve nasıl okunacağı olduğu bulmaktan zor bir zaman olacak.
- CSS stilleri ve DIV'leri tabloları daha fazla esneklik sağlar.Örneğin, sayfa üzerinde çeşitli nesneler için farklı görünümlere ve konumlarını tanımlamak farklı stil sayfasını dosyaları olabilir.Bağlantılı stil sayfasını değiştirerek, tamamen içerik sayfaları kendi başlarına hiçbir şeyi değiştirmeden, sayfa görünümünü değiştirebilirsiniz.Ve bu sadece renk ve yazı tipi bir konu değil - CSS dosyaları,nesneler için pozisyonlar da belirtmek ve böylece sayfanın sol üst köşesinde menü kutusu yerleştiren bir dosya üzerine koyar başka bir sağ alt köşede.Kullanıcılar mevcut temalardan bir listeden en sevdikleri stilleri almak içinizin istiyorum, çünkü, bu özellikle önemli bir nokta.
- CSS hatta yazıcı için belirli bir düzen oluşturmak için olanak sağlar.Bu, çok önemli bir noktadır, çünkü kullanıcı sadece sayfa içerik ve tarayıcı sunulan kenar çubuğunu ve giriş bilgilerinizi baskı genellikle ilgi.Yazdırılan sayfanın bu elementleri kolaylıkla CSS ile görüntülenir ayarlanabilir.Ayrıca, sadece mürekkep kullanmak istiyorsunuz koyu arka plan renkleri çok beyaz mürekkep maliyeti son kullanıcı biraz para kazanmak için, koyu arka plan değiştirebilir ve hala kontrol eden bir şekilde web sitenizin baskı var.
- CSS, HTML, PDA'lar ve akıllı telefonlar gibi mobil cihazlar gibi gerektirmeden bazı durumlarda cihazların farklı sınıflar hedef sağlar.Kendi kısıtlı ekran boyutu nedeniyle, bu içeriği de küçük ekran uygun ve kolay okunabilir, böylece onlar için çıkış uyum için gerekli.Bazı kapların boyutu ve konumu değişir (diğer altına yerleştirerek, yerine dikey sütun) belirli bir stil sayfası ile bunu, ya da onları tamamen gizlemek.Örneğin, afiş için kısım, anketler, büyük bir logo ile başlık gizlemek olabilir. Deneyin tabloları kullanıyorsanız, bunu yapmak için çok daha zor olacaktır.Özel bir ara yüz mekanizması hakkında düşünmek gerekir, ve farklı düzenler tanımlamak ayrı bir sayfa yazmak gerekir, bu, sadece yeni bir CSS dosyası yazmak çok daha eseridir.