Div Çatılı sayfalar Oluşturmak
|
|
- Esen İnanç
- 7 yıl önce
- İzleme sayısı:
Transkript
1 Div Çatılı sayfalar Oluşturmak Çok değil birkaç yıl önce sayfa tasarımlarımızı yaparken ara yüz bileşenlerini tablolar kullanarak görünmez ızgaralar üzerine inşa ederdik. Bu durum; HTML yapı dilinin web tasarımcıları tarafından hatalı yorumlanmasının ve kullanılmasının bir sonucu idi. Tarayıcılar arası çekişmelerin ve tüm Internet alışkanlıklarımızı etkileyen tarayıcı savaşlarının bir sonucu olarak ortaya çıkmıştı. Fakat Web 2. 0 kavramının gündeme geldiği şu günlerde artık eski tasarım alışkanlıklarını bir kenara bırakıp modern tasarım ve web teknolojilerine cevap verecek web sayfaları tasarlamanın vakti geldi de geçiyor bile Modern tasarım süreçlerinin bazı yaptırımları vardır. Aslında bunlara "yaptırım" demek ne kadar doğru bilemiyorum ama geçerli bir sayfa yapmak için bunlara dikkat etmemiz gerekiyor. Makaleyi okuyan birçok arkadaş için sıkıcı bir konu olsa da bu hususları işin başından ele alarak ileride yaşanacak muhtemel hataları elimine edebilirsiniz. Bunlardan bazıları şu şekilde sıralanabilir Sayfalar doğru doküman türü tanımlamasına (DOCTYPE) sahip olmalılar Sayfa tasarım bileşenleri tablo hücreleri yerine DIV'ler içerisine yerleştirilerek konumlandırma ve hizalamalar tamamıyla CSS ile ve "CSS kutu modeli" (CSS Model) göz önüne alınarak yapılmalı. Kullanılan HTML (veya XHTML) ve CSS kodları geçerli ve W3C standartlarına uygun olmalı ve geçerleme motorlarından (validator) hatasız olarak geçebilmeli. Doğru DOCTYPE İlk madde olan doğru "DOCTYPE" bilgisinin seçilmesi konusuna ilgili makalede oldukça ayrıntılı bir biçimde deyinmiştik. Genel bir özet olarak şunları belirtmekte fayda var; eğer spesifik olarak XHTML'e ihtiyaç duymuyorsanız (sayfanız XML verisi içermiyorsa) ve standart olarak bir HTML sayfası tasarlıyorsanız, başka bir deyimle amacınız sayfanızı anlaşılabilir bir biçimde kullanıcılara sunmak ise kullanmanız gereken doküman türü "HTML 4.01 Strict" tanımlamasıdır. Doğru "DOCTYPE" tanımlaması sayfa tasarımlarımızda tarayıcılar arası kayma ve farklı görünüm sorunlarının aşılması açısından en önemli aşamalardan biridir. Eğer doküman türü doğru tanımlanmaz ise safta tarayıcı tarafından hatalı olarak, "Garip Mod" (Quirks Mod) adı verilen bir durumda yorumlanacak bu durum da sayfamızın hatalı görünmesine sebep olacaktır. CSS Kutu modeli (BOX model) CSS2 ile sıkça konuşulur olan bu CSS kutu modeli, sayfadaki tüm içerik alanlarını birer kutu gibi değerlendirir ve boyutlandırma ve konumlandırma işlemini özel bir algoritma ile algılar. Burada sözü geçen "kutular" içeriğimizi yerleştirdiğimiz HTML bileşenlerini ifade etmektedir. (Örneğin DIV, tablo, başlık ve/veya paragraflar) Eğer bir dokümanın "DOCTYPE" bilgisi doğru bir biçimde tanımlanmış ise modern tarayıcılar "Standart Mod" ile çalışıp bu içerik alanı bileşenlerinin boyutlarını hesaplarken şöyle bir yol izler; Bir objenin (kutunun) tüm genişliği; içerik (content area) + çerçeve kalınlığı (border) + kenar boşluları (padding) değerlerinin toplamına eşittir. Yani CSS'de "width: 300px" olarak belirtilen bir DIV etiketinin genişliği sadece içerik alanının (content area) belirtir. Eğer bu DIV etiketinin çerçeve kalınlığı 1 piksel ve içeriğin DIV sınırlarına olan uzaklık bilgisi (padding) de 10 piksel ise bu DIV etiketinin toplam kapladığı alan: sol çerçeve+sol boşluk+içerik+sağ boşluk+sağ çerçeve =322 pikseldir. CSS kutu modeli şematik görnümü Modern tarayıcılar Standart mod ile çalışırken bunu algılayıp yaptığınız biçimlendirmeleri buna göre yorumlarlarken, diğer taraftan Garip mod ile çalışırken eski tarayıcılar gibi yorumlarlar. Eski tarayıcılarda ise bu 300 piksellik genişlik DIV etiketinin toplam Div Çatılı sayfalar Oluşturmak 1
2 genişliğini bildirir ve içeriğin genişliği, kenar boşluları ve çerçeve genişliği bu değerden çıktıktan sonra kalan değere (300-22=278 piksel) eşittir. CSS kutu modeli hakkında daha detaylı bilgi için; Geçerli kodlar Bu konu, sayfalarımızın tarayıcılar tarafından daha kolay ve doğru yorumlanması ve yaptığımız hataları daha kolay algılayıp müdahale etmemizi sağlaması açısından oldukça önemli bir yere sahiptir. Web tasarımı ile ilgilenmeye başlayan birçok kullanıcı yaşadığı basit sorunların neden kaynaklandığını, sayfalarını geçerli hale getirmeye çalışırken görebilirler. Örneğin bir etiketi (HTML tag) kullanılmaması gereken bir yerde kullanıldığında bu standartlara uygun olmayan bir sayfadır ve muhtemelen tarayıcı tarafından hatalı yorumlanmaya sebep olan bir durumdur. Acemi kullanıcı bu geçerlilik kuralını sayfasına uyguladığında yaşadığı sorunu da halletmiş olacaktır. Bu geçerlilik kuralları web geliştiricilerin işlerini kolaylaştırmak ve standart bir kod yapısı ile uyumluluğu arttırmak amacı ile konmuşlardır. Neden sayfalarımızı geçerlememiz gerektiği ve bunun için yapabileceklerimiz hakkında daha detaylı bilgiyi Roger Johansson'ın "Web Standartlarını Kullanarak Geliştirmek" başlıklı nefis makalesinden alabilirsiniz. Sayfalarımızın standartlara uygun olup olmadığını W3C (web komisyonu) geçerleme motorundan kontrol ettirebilir hatalarımızı daha yakından görebiliriz. Evet, biraz uzun bir giriş oldu fakat yeni bir sayfa yapmaya başlamadan önce bunları göz önünde bulundurmamız gerekmektedir. Şimdi uygulamaya geçebiliriz. Sayfamızın tasarımını yaparken tablolar yerine CSS ve DIV kullanacağımızı belirtmiştik. Birçok yeni başlayan kullanıcının yaşadığı en büyük handikaplardan biri olan tasarımda istenilen objenin istenilen yere yerleştirilememesi ve hizalanamaması sorununu aşmak için CSS kullanacağız. Tabi bunun için en azından temel CSS bilgisine ihtiyacımız var. Bu makalede CSS bilgisine girip konuyu fazla dağıtmak istemiyorum. Genel olarak temel noktalara deyineceğim. Fakat burada bahsi geçen uygulamaları anlayabilmeniz için ilgili CSS kaynaklarından kendinizi geliştirmenizi şiddetle tavsiye edeceğim. Aksi takdirde söz ettiğimiz şeyler havada kalacaktır. İçinizde CSS Zen Garden'ı (ZG) görenleriniz olmuştur. ZG birçok web geliştiricin ilham kaynağı olmuş ve CSS'in sadece metinleri biçimlendirip rollover text-linkler yapmaktan öte tek başına bir web sayfasını baştan aşağı CSS ile biçimlendirilebileceğini bizlere göstermiştir. İncelediğinizde fark edeceğiniz üzere ZG'daki bütün tasarımların HTML kaynak kodları aynı olup değişen tek şey sayfaya bağlı olan ".css" dosyasıdır. Söz gelimi "bu" sayfa ile "şu" sayfanın kanyak kodlarına bakarsanız birebir aynı olduklarını görebilirsiniz :) Oldukça etkileyici değil mi? Bizde sayfamızı tasarlarken CSS'in bu güçlü özelliklerinden faydalanacağız. Bu makalede hazırlayacağımız örnek tasarım 2 veya 3 sütunlu standart blog ve portallerde görebileceğiniz sayfa düzenidir. Fatih Harioğlu'nun sayfasındaki bahsi geçen makaleyi temel alarak anlatıma devam edeceğim. Tasarımın aşağıda görüldüğü üzere sabit genişlikte bir dış çerçeve (#sayfa), başlık bölümü (#ustalan), sol sütun (#anamenu), içerik sütunu (#icerik) ve alt kısımdan (#altalan) oluşmaktadır. 2 sütunlu ve sabit genişlikli genel sayfa tasarımının şematik görünümü Div Çatılı sayfalar Oluşturmak 2
3 Sayfanın bitmiş halini görmek için buraya indirmek için ise buraya tıklayınız. Şimdi DW'da File / New menüsü ile yeni bir HTML dokümanı açın. Yeni dokümanı açarken "Document Type (DTD)" olarak "HTML 4.01 Strict" seçili olduğuna dikkat edin. Dokümanı oluşturup uygun bir konuma kaydedin. Yeni bir HTML dokümanı oluşturuyoruz Şimdi sayfaya, tüm tasarımı kapsayıp ve toparlayan çerçeve olan "sayfa" isimli bir DIV ekliyoruz. Bunun için "Insert" paneldeki "Layout" sekmesi altında yer alan "Insert Div Tag" düğmesini ya da Insert / Layout Objects / Div Tag menüsünü kullanabilirsiniz. Sayfaya bir DIV ekliyoruz Açılan iletişim penceresinden "ID" kısmına "sayfa" yazıyoruz. "Class" bilgisini şimdilik boş bırakıyoruz. Birazdan tüm DIV'ler için stil tanımlamalarını toplu olarak yapacağız. DIV ekleme iletişim penceresi Şimdi eklediğimiz "sayfa" isimli DIV etiketinin içine sırayla "ustalan", "anamenu", "icerik" ve "altalan" isimli 4 tane daha DIV ekliyoruz. Sayfanın DW içersindeki son hali şuna benzemelidir; Div Çatılı sayfalar Oluşturmak 3
4 Sayfanın son halinin DW içerisindeki görünümü "sayfa" DIV'inin içerisine diğer DIV'leri eklerken kolaylık olması açısından "sayfa" içerisinde "Content for id "sayfa" Goes Here" yazısını seçip bir defa ENTER (Return) tuşuna basarak yeni bir paragraf oluşturabilirsiniz. Bütün DIV'leri ekledikten sonra sondaki veya aralardaki fazla paragrafları silmeyi unutmayın. Gördüğünüz gibi sayfa ana iskeleti bu şekilde olacak. Hangi DIV'in nasıl boyutlandırılıp hizalanacağını ise CSS ile belirteceğiz. Sayfaya herhangi bir müdahale yapmadan "CSS Styles" panelini eğer açık değilse Window / CSS Styles menüsü veya Shift+F11 tuş kombinasyonu ile açıyor ve sağ üst köşedeki sembole tıklayıp açılan menüden "New..." seçeneğine tıklıyoruz. Yeni bir stil tanımlamaya başlıyoruz Açılan iletişim penceresinden "Selector type" kısmından "Tag (redefines the look of a spesific tag)" seçeneğini seçiyor, "Tag" kısmından "body" etiketini buluyor ve "Define in" bölümünden de "New Style Sheet File" seçeneğini seçiyoruz. "OK" diyerek "body" etiketi için stil tanımlaması yapmaya başlıyoruz. Bu stil yarattığımız ilk stil olduğu için DW yeni bir stil dosyası yaratacak ve bunu nereye kaydetmek istediğiniz soracaktır. Şuan çalıştığınız doküman ile aynı veya herhangi bir alt dizinde bir yere uygun bir isimle (örneğin stiller.css) stil dosyasını kaydedip işleme devam ediyoruz. Yeni stil oluşturma iletişim penceresi "body" etiketi HTML dokümanımızın ana gövde kısmını belirten bölüm olup sayfa arka fon rengi, kenar boşlukları, metin rengi ve boyutu gibi özellikleri tanımlamamıza yarar. Stil özellikleri iletişim penceresinden sayfamız ile ilgili ana biçim özelliklerini belirliyoruz. Bu örnekte arka fonu açık mavi olan ve kenar boşlukları olmayan bir sayfa tasarlayacağız. Bunun için neleri değiştireceğinizi bildiğinizi varsayarak bu kısmı hızlı geçiyorum. "body" için stil özellikleri şu şekilde olacak; Type Font: Verdana, Arial, Helvetica, sans-serif Size: 11 pixels Div Çatılı sayfalar Oluşturmak 4
5 Line height: 13 pixels Color: # Background Background-color: #E0F0F8 Block Text-align: center Margin: 0 pixels Body için stil özelliklerini belirtiyoruz "OK" dediğiniz anda dokümanın arka fon rengi açık mavi olacak ve sayfadaki tüm yazılar ortalanacaktır. Endişelenmeyin hep böyle kalmayacak. Metinleri ortalamamızın sebebi tasarımın tam ortada olmasını ve kullanıcının çözünürlüğü ne olursa olsu daima tarayıcının ortasında yer almasını sağlamaktır. "body" biçimlendirmesini de bu şekilde yaptıktan sonra DIV'leri biçimlendirmeye başlayabiliriz. Tekrar CSS Styles panelinden sağ üst köşedeki düğmeye tıklayıp "New..." diyerek yeni bir stil tanımlıyoruz. Açılan iletişim penceresinden "Selecto Type" olarak "Advanced (IDs, pseudo class selectors)" seçeneğini seçiyoruz. "Selector" olarak "#sayfa" yazıyoruz. #sayfa için stil tanımlaması yapıyoruz. İçinizde neden stil ismi olarak "#" ile başlayan bir isim girdiğimizi merak edenler olabilir. Bunu şu şekilde açıklayabiliriz; hatırlarsanız biraz önce "sayfa" ID bilgisine sahip bir DIV yaratmıştık. CSS tanımlamalarında "#" ile başlayan stiller birer ID tanımlamalarını belirtir ve sadece ilgili ID'ye sahip elemanları ve bu elemana bağlı alt elemanları kapsar. Tahmin edeceğiniz üzere de "#sayfa" isimli bir tanımlama "sayfa" ID'li DIV'i yani tasarımımızı çevreleyen ana DIV'i belirtmektedir. #sayfa "#sayfa" için stil özelliklerini tanımlayarak işleme devam edebiliriz. Ben özellikleri şu şekilde belirledim. Block Text-align: left width: 760 pixels Div Çatılı sayfalar Oluşturmak 5
6 Margin: Top: 0 pixels Right: auto Bottom: 0 pixels Left: auto Burada gördüğünüz üzere "sayfa" isimli DIV elemanının genişliğini 760 piksel olarak belirledik. Bu değer 800x600 çözünürlükte dahi tarayıcı ekranına sığabilen bir değerdir. Bu, "sayfa" DIV'i tüm tasarımı dışardan çepeçevre sardığından tasarımımızın maksimum genişliğinin 760 piksel olabileceği anlamına geliyor. Aynı zamanda sayfanın ortalanması içinde "margin" yani objenin diğer tasarım elemanlarına ve objelere olan mesafe bilgisinde sağ ve sol boşluk değerlerinin "auto" olarak belirtilmesi gerekiyor. Bu değer sayesinde "icerik" DIV'inin sağ ve sol kenarlara olan uzaklığı otomatik olarak ayarlanacak başka bir değişle her iki yana da eşit uzaklıkta olması (sayfanın ortasında) sağlanacaktır. Dikkat çekmek istediğim bir diğer nokta da "padding" yani içeriğin kenarlara olan mesafe bilgisinin 0 piksel olarak ayarlanmasıdır. Bu tür çok elemanlı sayfa tasarımlarında dış objelerin "margin" ve "padding" değerlerinin 0 olarak atanıp daha sonra iç DIV ve elemanların kendi değerlerinin belirtilmesi her zaman için daha pratik ve sağlıklı bir yöntemdir. Tabi dış objelerin de değişik değerlere sahip olduğu durumlar olabilir bu tamamen isteğinize ve gereksinimlerinize bağlı bir konudur. "#sayfa" stil tanımlamasını yaptığınız anda sayfa içeriği ortalanacak fakat metinler sola hizalı olacak şekilde konumlandırılacaktır. Evet, yavaş yavaş sayfamız biçimlenmeye başladı. #ustalan Tekrar yeni bir stil yaratıyoruz ve yine "Selecto Type" olarak "Advanced (IDs, pseudo class selectors)" seçeneğini seçiyoruz. "Selector" olarak "#sayfa #ustalan" yazıyoruz. Bu "ustalan" yani sitemizin üst kısmını temsil eden DIV'in biçimlendirilmesi anlamına geliyor. Bir CSS tanımlaması yaparken aralarında boşluk bırakarak yapılan isimlendirmeler, "element > alt element" şeklinde stil tanımlamaları yapmamıza olanak sağlar. Bu örnekte "sayfa" DIV'inin içindeki "ustalan" DIV'ini biçimlendirmek için "#sayfa #ustalan" yazıyoruz. Yine aynı şekilde "ustalan" DIV'inin içindeki "H1" başlık biçimini CSS ile biçimlendirmek için de "#sayfa #ustalan h1" yazmamız yeterlidir. "ustalan" için stil özellikleri; "#sayfa #ustalan" Background Background-color: #F36507 Width: 760 pixels Height: 75 pixels Margin: 0 pixels Border Bottom: Solid, 7 pixels, # Positioning Type: Relative "ustalan" ın genişliğini "icerik" ile aynı yani 760 piksel, yüksekliğini de 75 piksel olarak ayarladık. "margin" ve "padding" değerlerini 0 piksel olarak girdik. Hoş bir görünüm elde etmek için 7 piksellik bir alt çerçeve yaptık. İleride yapacağımız pozisyonlama belirtmelerinden etkilenmemesi için de "Positioning" bölümünden "Type" değerini "Relative" olarak ayarladık. #anamenu Aynı şekilde "anamenu" için stil özellikleri; "#sayfa #anamenu" Background Background-color: #FFFFFF Width: 200 pixels Float: left Margin: Top: 5 pixels Right: 0 pixels Bottom: 5 pixels Left: 0 pixels Dikkat ettiyseniz "anamenu" için genişliği 200 piksel girdik, "Float" değeri olarak da "left" verdik. Böylece sola hizalanmış 200 piksel genişliğinde bir sütunumuz oldu. (Objeleri hizalamak için CSS içerisinde "Float" özelliğini kullanmaktayız), "magrin" değerlerini de "Top" ve "Bottom" için 5 piksel diğerlerini ise 0 piksel olarak ayarladık. Böylece üst ve alt kısımda yani "ustalan" ile "anamenu" ve "altalan" ile "anamenu" arasında 5 piksellik bir boşluk elde etmiş olduk. Div Çatılı sayfalar Oluşturmak 6
7 #icerik "icerik" alanı için stil özellikleri; "#sayfa #icerik" Background Background-color: #FFFFFF Width: 560 pixels Float: right Margin: Top: 5 pixels Right: 0 pixels Bottom: 5 pixels Left: 0 pixels "anamenu" DIV'ini sola hizaladığımıza göre bu içerik alanını da sağa hizalıyoruz. "Float" değerini "right" vererek bu hizalama işlemini yapabiliriz. Aynı şekilde sadece üstte ve altta 5 piksellik mesafe vererek diğer "margin" değerlerini 0 piksel olarak giriyoruz. DIV'in genişliğini belirten "width" olarak da 560 piksel giriyoruz. Burada bu genişlik değeri oldukça önemli bir yere sahip. Hatırlarsanız CSS kutu modelinin işleyişinden bahsetmiştik. Tasarımımızı yaparken bunu aklımızdan çıkartmamamız gerekiyor. Basit bir matematiksel hesap ile şöyle bir sonuç elde edebiliriz. #anamenu: 200px #icerik: 560px Toplam: 760px "#sayfa" için genişliği 760 piksel olarak belirtmiştik. Yani "sayfa" DIV'inin içindeki tüm elemanlarının "margin", "padding", "border" ve genişlik değerlerinin toplamı 760'ı geçmemelidir. Aksi takdirde "Float" özelliğinin bir belirtimi olarak objeler genişlikleri ve hizalamaları ölçüsünde alana sığdırılmak için kaydırılırlar. Aynı matematik hesabını şu şekilde genişletebiliriz #anamenu: 200px = (1px sol çerçeve + 5px sol padding + 188px width + 5px sağ padding + 1px sağ çerçeve) #icerik: 560px = (5px sol padding + 550px width + 5px sağ padding) Toplam: 760px Genişlikleri girerken bunlara dikkat etmemiz halinde herhangi bir sorunla yaşamadan tasarım sürecini tamamlayabilirsiniz. Objelerin kutu modelinden nasıl etkilendiklerini görmek için "icerik" alanının genişliğini 561 piksel olarak girip sayfayı tarayıcıda deneyebilirsiniz. Sayfayı tarayıcıda açtığınızda "icerik" alanının "anamenu" ile aynı hizada olması gerekirken aşağıya kaydığını göreceksiniz. Gördüğünüz gibi 1 piksellik bir hata bile CSS kutu modelinden etkilenmektedir. Bu sorun birçok acemi kullanıcının anlam veremediği kaymaların başlıca sebebidir. Hesaba katılmayan ya da unutulan bir "padding" veya "margin" değeri bu tür kaymalara sebep olur ve geliştiriciyi çileden çıkarabilir. #altalan "altalan" için stil özellikleri "#sayfa #altalan" Type Size: 10 pixels Background Background-color: #B0D2E4 Width: 740 pixels Padding: 10 pixels Margin: 0 pixels Clear: both Genişliğin 740 piksel olduğu dikkatinizi cezp etmiş olsa gerek. Sebebinin 10 piksel olarak tanımlanan "padding" değerinden ileri geldiğini söylememize gerek yok sanırım. ( =760px) Diğer alanlardan farklı olarak "altalan" için "Clear" özelliğini "both" olarak tanımladık. "Clear" özelliği ile bir objeyi, kendinden önce gelen objelere uygulanan "Float" etkisinden kurtarmak mümkündür. Eğer "altalan" DIV'i için "Clear" tanımlamasını "both" olarak yapmasaydık, "altalan" DIV'i "icerik" DIV'i içerisindeki içeriğin altında kalacak idi. "Float" ve "Clear" ile ilgili açıklayıcı bir yazı için Fatih Hayrioğlu'nun makalesine göz atabilirsiniz. Div Çatılı sayfalar Oluşturmak 7
8 Dokümanın DW içerisindeki son görünümü Evet, tanımlamaları yaptıktan sonra dokümanınızı ve CSS stil dosyasındaki değişiklikleri kaydedip tarayıcınızda deneyerek nasıl bir sonuç elde ettiğimizi görebilirsiniz. Tasarımın tarayıcıdaki son görünümü Tasarımımızı ayağa kaldırdık sayılır. Şimdi birkaç püf nokta ve bazı temel bilgilerden bahsetmenin zamanı geldi. Şimdi içeriğin sayfada nasıl görüneceğini test etmek için "icerik" alanına birkaç paragraflık bir şeyler kopyalayıp yapıştırın ya da yazın. "anamenu" içine temsili bir şeyler yazın. "ustalan" içine de bir H1 başlığı ve onun altına slogan olacak bir şeyler yazın. "altalan" a da bir şeyler yazmayı unutmayın. Amacımız tasarımı test etmek. Şimdi kaydedip tarayıcıdan kontrol edin. Div Çatılı sayfalar Oluşturmak 8
9 Tasarımı test etmek için bir şeyler yazıyoruz Şimdi dikkatinizi çekecek bazı noktalar olmalı. Bunlardan biri "icerik" içerisindeki yazıların kenarlara çok yakın olduğu, ayrıca başlığında standart biçimde pek hoş görünmediği olabilir. "ustalan" içerisindeki başlığın bir kısmının dışarı taşması ve sloganın başlığa çok uzak olması da diğer sorunlar olarak göze çarpabilir. Şimdi bu sorunları nasıl çözeceğimize deyinelim. Öncelikle "ustalan" içerisindeki başlığı biraz biçimlendirip göze hoş görünür bir hal almasını sağlayalım. CSS Styles panelinden "New..." menüsü ile yeni bir stil tanımlamaya başlıyoruz. "Selecto Type" olarak "Advanced (IDs, pseudo class selectors)" seçeneğini seçip, "Selector" olarak "#sayfa #ustalan h1" yazıyoruz. ustalan için başlık tanımlaması yapıyoruz Başlık için stil özellikleri şu şekilde; Type Font: Georgia, Times, serif Size: 30 pixels Weight: Bold Color: #FFFFFF Top: 10 pixels Right: 0 pixels Bottom: 20 pixels Left: 0 pixels Margin: Top: 15 pixels Right: 0 pixels Bottom: 0 pixels Left: 25 pixels Positioning Type: Absolute Şimdide sloganı biçimlendirelim. "#sayfa #ustalan p" için stil özellikleri Type Font: Georgia, Times, serif Size: 11 pixels Weight: Bold Color: #FFBD91 Margin: Top: 50 pixels Right: 0 pixels Bottom: 0 pixels Left: 115 pixels Positioning Type: Absolute Üst kısmın biçimlendirmesi bitti gibi. Şimdide "icerik" ile ilgilenmeye başlayalım. Yeni bir stil yaratıyoruz. "Selector" olarak "#sayfa #icerik h1" yazıyoruz. İçeriğin başlığı için stil özellikleri şu şekilde; Type Font: Arial, Helvetica, sans-serif Size: 24 pixels Weight: Bold Color: #2981AF Div Çatılı sayfalar Oluşturmak 9
10 Padding: Top: 10 pixels Right: 0 pixels Bottom: 10 pixels Left: 0 pixels Margin: 5 pixels Border Bottom: Solid, 1 pixels, #2981AF Şimdide paragrafları biçimlendirelim. "#sayfa #icerik p" için stil özellikleri; Padding: 5 pixels Margin: 0 pixels Böylece içeriğin kenarlara çok yakın olmasını engellemiş olduk. Tabi bu sadece "icerik" içindeki paragraflar için geçerli. Aynı şekilde her eleman için "padding" ve "margin" ayarlamaları yaparak düzgün görünümlü içerikler elde edebilirsiniz. Son olarak "altalan" a göze daha hoş görünmesi için geçişli (gradient) bir arka fon resmi ekliyoruz. Stil özelliklerinde şu değişikliği yapmalısınız. Background Background-image: images/altalan_bg.gif Repeat: repeat-x Sonucu görmek için tüm belgeleri kaydedip tarayıcıdan kontrol edebilirsiniz. Tasarımın son halinin tarayıcıdaki görünümü Böylelikle CSS biçimlendirmenin gücünü kullanarak nasıl bir site ara yüz tasarımı yapabileceğimizi ve bunu geliştirebileceğimizi görmüş olduk. Bu örneğimizde iki sütunlu tasarımlar üzerinde durduk. Bu yaklaşımdan yola çıkarak 3 sütunlu tasarımların nasıl yapıldığını kendiniz de bulabilirsiniz fakat ipucu olarak şunu belirtmekte fayda var. Bu tür 2 den fazla sütunlu tasarımlarda bileşenleri kendi aralarında ikili gruplara ayırarak sağ ve sol "Float" özelliklerini kullanabilirsiniz. Div Çatılı sayfalar Oluşturmak 10
11 3 sütunlu tasarımın şematik görünümü Eğer sayfa tasarımının sabit bir değerde değil de kullanıcının ekran çözünürlüğü ve tarayıcı penceresinin genişliğine göre otomatik olarak boyutlandırılmasını sağlamak istiyorsanız; elastik tasarımlar (Liquid layout) kullanmalısınız. Hizalama teknikleri açısından herhangi bir fark içermeyen bu sayfalarda yapmanız gereken tek şey birimleri piksel yerine yüzde (%) olarak belirtmeniz gerektiğidir. Bu bakımdan "#sayfa" için "width" değerini 760 piksel yerine "95" olarak birimi de "%" girerseniz sayfa genişliği elastik olarak genişleyecektir. Tabi "#ustalan", "#anamenu", "#icerik" ve "#altalan" için de "width" değerlerini "%" cinsinden girmeniz gerekmektedir. Birimleri % olarak girmelisiniz Burada genişlikleri birbirine göre oranlamanız da mümkün tabiî ki. Örneğin "#anamenu" için "%25", "#icerik" için ise "%75" olarak girmelisiniz. Örneği görmek için tıklayınız. Elastik sayfanın tarayıcıdaki görünümü Div Çatılı sayfalar Oluşturmak 11
12 Birimleri "%" olarak kullanırken CSS kutu modelinin halen devrede olduğunu ve verdiğiniz bu "width" değerlerinin sadece içerik alanının genişliğini belirttiğini unutmamalısınız. Örnek sayfanın resmine bakarsanız "altalan" IV'inin diğer DIV'lerden daha geniş olduğunu göreceksiniz. Bu durum "altalan" için önceden tanımladığımız 10 piksellik "padding" değerinden kaynaklanmaktadır. Bu tür uygulamalarda "padding", "margin" ve/veya "border" değerlerini göz önünde bulundurarak "%" değerleri girmekte fayda vardır. Kaynak Div Çatılı sayfalar Oluşturmak 12
CSS ile Web Sayfası Oluşturma
CSS in en büyük avantajlarından biri ve en önemlisi başka bir koda(xhtml hariç) ihtiyaç duymaksızın sayfa iskeleti ve stilini oluştumamıza olanak sağlamasıdır.css 1996 dan beri kullanıla gelen bir standart
DetaylıHTML Bloklar. CSS Display özelliği
HTML Bloklar Tüm HTML etiketleri için varsayılan bir görünüm değeri vardır ve blok yada satıriçi olarak belirtilir. Blok tipindeki etiketler her zaman yeni bir satırda başlar ve tüm satır boyunca mümkün
Detaylı4 Ocak 2012 / Çarşamba. Renk uyumunu seçmek için google colorschemedesigner http://colorschemedesigner.com/ RGB ye tıklayınca bir pencere çıkıyor
4 Ocak 2012 / Çarşamba Renk uyumunu seçmek için google colorschemedesigner http://colorschemedesigner.com/ RGB ye tıklayınca bir pencere çıkıyor 1 O pencereye rengimizin kodunu girince ayarlar gözüküyor.örneğin
DetaylıÖnce başlıkları alt alta yazıyoruz ve bunları sırası liste (Unordered list) haline getirip her satıra ayrı ayrı link veriyoruz.
Show-hide Elements Show hide elements ile dreamweaver içerisinde kompleks uygulamalar yapmak oldukça kolay, şimdi bunu nasıl yapacağımızı göreceğiz; Örnek uygulama için tıklayınız Öncelikle yeni bir doküman
Detaylıİmleci yazıya getirip tıklayınca aşağıda hangi tag ler içinde olduğunu gösterir.
21 Aralık 2011 / Çarşamba Önce bir site tanımlayacağız, yani önce çalışacağımız klasörü oluşturacağız. Bunun içinde, bir de resim klasörünü oluşturacağız. Görünüm : Classic Site Manage Site sitede düzenleme
DetaylıCSS. 1. CSS nin Yapısı Sınıf (Class) Seçicisi
CSS CSS, açılımı (Cascading Style Sheet) olan ve dilimize Stil Şablonları olarak yerleşen bir işaretleme dilidir. Stil Şablonu HTML ögelerine (yazı, paragraf, kenar çizgisi, resim, bağlantı...) stil vermek
DetaylıBTP 207 İNTERNET PROGRAMCILIĞI I. Ders 5
BTP 207 İNTERNET PROGRAMCILIĞI I Ders 5 Stil Oluşturmak/CSS 2 CSS, Cascading Style Sheets = Katmanlı Biçim Sayfaları HTML nesnelerini biçimlendirmek için kullanılır. CSS Bileşenleri CSS yapısı 3 ana bileşenden
DetaylıAşağıdaki örnekte, aynı düzen tablosu ve hücreleri içerikle birlikte gösterilmektedir.
12 DÜZEN TABLOLARI Microsoft Office FrontPage 2003 programında düzen tabloları ve hücrelerini kullanarak, profesyonel görünümlü Web sayfası düzenleri oluşturabilirsiniz. Düzen tablosu, sayfa düzeni için
DetaylıBasamaklı Stil Şablonları (CSS) BIM206 Web Programlama
Basamaklı Stil Şablonları (CSS) BIM206 Web Programlama Basamaklı Stil Şablonları (CSS) CSS, bir HTML elemanının nasıl görüneceğini belirleyen kurallar tanımlamamızı sağlayar. Örneğin: Sayfanın arka planının
DetaylıDoç. Dr. İsmail Rakıp Karaş www.ismailkaras.com irkaras@gmail.com. Hazırlayan: İdris Kahraman
7. Doç. Dr. İsmail Rakıp Karaş www.ismailkaras.com irkaras@gmail.com Hazırlayan: İdris Kahraman Dreamweaver Dreamweaver en iyi web editör yazılımlarından biridir. Biz tasarım modunda çalışırken,dreamweaver
Detaylı7. Çerçeveler. Bu bölümü bitirdiğinizde,
7. Çerçeveler Bu bölümü bitirdiğinizde, Çerçevelerden oluşan bir WEB sayfası tasarlamayı, İç içe çerçeveler oluşturmayı ve Çerçeveleri isimlendirmeyi, Bağ kurulan dosyaları belirtilen çerçeve içerisinde
DetaylıWeb sayfalarında yapılan her çalışma ve düzenleme tablolar aracılığı ile yapılır. Dolayısıyla çoğu web sayfalarında tablo kullanmak zorunluluktur.
Yazı Tipi Stili HTML kodları 47 Kalın İtalik Altı Çizili 9.2.6 Metin yükseltme veya alçaltma 1. Sayfa görünümünde, belge penceresinin altındaki Tasarla düğmesini tıklatın. 2.
DetaylıHTML içerik oluşturmak için düşünülen bir işaret dilidir. Örnek
STİLLER CSS NEDİR? CSS (Cascading Style Sheet) Stiller, HTML elemanlarının nasıl gösterileceğini tanımlar. Stiller HTML de karşılaşılan bazı problemleri çözmek için HTML 4.0 a eklenmiştir. HTML, web
DetaylıBasamaklı Stil Şablonları (CSS) BIM206 Web Programlama
Basamaklı Stil Şablonları (CSS) BIM206 Web Programlama Basamaklı Stil Şablonları (CSS) CSS, bir HTML elemanının nasıl görüneceğini belirleyen kurallar tanımlamamızı sağlayar. Örneğin: Sayfanın arka planının
DetaylıSite Temizlik Projesi Kodları. Site Tasarım Çalışması -3
Site Temizlik Projesi Kodları Site Temizlik Projesi -2 nin kodları aşağıdadır. (İlgili site sayfasını önceki yazılarda bulabilirsiniz.) [crayon-5cacfb4a355c5785238607/] İndir (DOCX, 15KB) Site Tasarım
Detaylı4 Front Page Sayfası Özellikleri
4 Front Page Sayfası Özellikleri İsterseniz Frontpage penceresinin sağ tarafından, isterseniz araç çubuklarından faydalanarak yeni bir sayfa açın. Frontpage te çeşitli sayfa şablonları bulunmaktadır. Ancak
DetaylıWEB TASARIM. CSS, IFRAME, TEMPLATE, SLICE, INCLUDE(php komutu) Tarık ÖZEL
WEB TASARIM CSS, IFRAME, TEMPLATE, SLICE, INCLUDE(php komutu) Tarık ÖZEL İçindekiler Konular Sayfa Slice 2 Iframe 12 CSS 16 Include (php komutu) 20 1 Slice Fireworks te yapacağımız sitenin boyutuna göre
DetaylıSite Temizlik Projesi Kodları
Site Temizlik Projesi Kodları Site Temizlik Projesi -2 nin kodları aşağıdadır. (İlgili site sayfasını önceki yazılarda bulabilirsiniz.) [crayon-5c2acf77c2a0b746634170/] İndir (DOCX, 15KB) İlk Hafta Sunumu
DetaylıCSS(CASCADING STYLE SHEETS)
CSS(CASCADING STYLE SHEETS) CSS NEDİR NE İŞE YARAR? Sıralı Sitil Şablonları olarak bilinen CSS Web sayfalarının biçimsel özelliklerini düzenlediğimiz ve yönettiğimiz kodlar bütünüdür. CSS kodları ile sayfamızdaki
DetaylıÖnce Access açıp,masaüstü ne, vt.mdb adlı veri tabanı dosyasını oluşturuyoruz. Kayıt türünü 2002-2003 seçiyoruz
9 Şubat 2012 / Perşembe Önce Access açıp,masaüstü ne, vt.mdb adlı veri tabanı dosyasını oluşturuyoruz. Kayıt türünü 2002-2003 seçiyoruz 1) emlakkategorisi adlı tabloyu oluşturuyoruz 1 2) ilanlar adlı tabloyu
DetaylıYeni site açıp, masa üstündeki vt.mdb dosyasını sitemize ekliyoruz ve www.arifceylan.com a bağlanıp 1 Mart tarihli sayfayı açıyoruz
16 Mart 2012 / Cuma Yeni site açıp, masa üstündeki vt.mdb dosyasını sitemize ekliyoruz ve www.arifceylan.com a bağlanıp 1 Mart tarihli sayfayı açıyoruz Gridview içerisindeki verileri Excel dosyasına dönüştürmek
DetaylıHTML 5 ve CSS 3. Yrd. Doç. Dr. Murat Olcay ÖZCAN
HTML 5 ve CSS 3 Yrd. Doç. Dr. Murat Olcay ÖZCAN HTML HTML web sayfalarını tanımlayan bir işaretleme dilidir. HTML (Hyper Text Markup Language) açılımı Hiper Metin İşaretleme Dili HTML dosyaları HTML etiketleri
DetaylıDIV KAVRAMI <style> position: absolute
DIV KAVRAMI Div tag i katman oluşturmak için kullanılır. Div ler sayfanın komple bir satırını kaplarlar, bu yüzden tag i içerisinde şekillendirilip, boyutlandırılmaları gerekir. Aşağıdaki şekilde
DetaylıHTML Etiketleri Genel Özellikler (Global Attributes)
HTML Yorum Eklemek HTML kodunun içine tarayıcı tarafından gösterilmeyecek yorumlar şu şekilde eklenir. Hatırlatıcı notlar eklemek için de kullanılabilir. HTML Etiketleri Genel
Detaylı5. Tablo İşlemleri. Bu bölümü bitirdiğinizde,
5. Tablo İşlemleri Bu bölümü bitirdiğinizde, Tablonun nasıl oluşturulduğunu, Satır ve hücrelerin ne olduğunu ve nasıl oluşturulduğunu, Tablonun ve hücrelerin nasıl hizalandığını, Satır veya sütunların
DetaylıWindows form uygulamalarından alışık olduğumuz sabit piksel koordinatları, WPF ile son buldu. WPF uygulamaları farklı çözünürlüklerde çalışsalar bile
Windows form uygulamalarından alışık olduğumuz sabit piksel koordinatları, WPF ile son buldu. WPF uygulamaları farklı çözünürlüklerde çalışsalar bile görüntü kaybı olmamaktadır. Bu yüzden tasarım yapılarının
DetaylıÖrnek Ölçülü Site Kodları. Site Temizlik Projesi Kodları. İlk Hafta Sunumu ve Ön Test
Örnek Ölçülü Site Kodları [crayon-5c079862dff41089602577/] Site Temizlik Projesi Kodları Site Temizlik Projesi -2 nin kodları aşağıdadır. [crayon-5c079862e05c5626962251/] İndir (DOCX, 12KB) İlk Hafta Sunumu
Detaylı3. Metin ve Görünüm Etiketleri
3. Metin ve Görünüm Etiketleri Bu bölümü bitirdiğinizde, Metin biçimlendirme etiketlerinin neler olduğunu ve nasıl kullanıldığını, Yatay çizginin nasıl çizildiğini ve özelliklerinin neler olduğunu, Satır
DetaylıSite Tasarım Çalışması -3
Site Tasarım Çalışması -3 Aşağıda adresini verdiğim çalışmayı table kullanarak yapmaya çalışınız., Örnek site div ile yapıldığından bölümler tablo aynı hizada değildir. Sizler eşit bölmeli table kullanacaksınız;
Detaylı2-Hafta Temel İşlemler
2-Hafta Temel İşlemler * Html Komutlarının Yapısı * Açıklamalar * Htm Sayfasının Oluşturulması * Temel Html Komutları * Html Sayfalarının Düzenlenmesi * Html Sayfalarının İncelenmesi Html Komutlarının
DetaylıBMT 202 Web Tasarımı Bahar Dönemi. Yük. Müh. Köksal GÜNDOĞDU 1
BMT 202 Web Tasarımı 2016 2017 Bahar Dönemi Yük. Müh. Köksal GÜNDOĞDU 1 HTML 5 Yük. Müh. Köksal GÜNDOĞDU 2 HTML 5 Günümüzde kullanılan HTML 4.1 sürümü, CSS desteğiyle ne kadar düzenli ve sağlam bir yapıda
DetaylıLOGO PARTNER MEETING
LOGO PARTNER MEETING Aşağıda görseller ile desteklenen anlatım, logopartnermeeting.com web sitesinin kullanımı için hazırlanmıştır. Yukarıda gördüğünüz görselde bulunan işaretli alanlar aşağıda sırasıyla
DetaylıTEMEL BİLGİSAYAR. Ders Notları. Yrd. Doç. Dr. Seyit Okan KARA
TEMEL BİLGİSAYAR Ders Notları Yrd. Doç. Dr. Seyit Okan KARA Pencerenin ortasında bulunan beyaz sayfa, slayt tasarımında kullanacağımız sayfamızdır. Sol panelde bu slayt sayfasının küçültülmüş halde bir
DetaylıWEB TASARIMININ TEMELLERİ
WEB TASARIMININ TEMELLERİ Öğr. Gör. M. Mutlu YAPICI Ankara Üniversitesi Elmadağ Meslek Yüksekokulu Ders İzlencesi Hafta Modüller/İçerik/Konular 1. Hafta İnternet ve WEB Tanımları Html Temel Etiketleri
Detaylıİnternet,artık hayatımızın önemli bir parçası. Her gün interneti programlar aracılığı ile ya da internet siteleri aracılığı ile kullanıyoruz.
Mahmut BORA KARAKUŞ İnternet,artık hayatımızın önemli bir parçası. Her gün interneti programlar aracılığı ile ya da internet siteleri aracılığı ile kullanıyoruz. Peki internet nasıl çalışıyor ve internet
DetaylıArayüz Geliştirme Dokümantasyonu
Arayüz Geliştirme Dokümantasyonu Proje: İş: Müşteri: Nosab Web Sitesi Arayüz Geliştirme Aeronorm Index 1. Sayfalar 2. Renk Paleti 3. Tipografi 4. Kutu Modeli 5. Bileşenler 6. Kod ve Sayfa Yapısı 7. Responsive
DetaylıCSS (Stil Şablon) (Cascading Style Sheets) YRD. DOÇ. DR. ENGİN CEMAL MENGÜÇ
CSS (Stil Şablon) (Cascading Style Sheets) YRD. DOÇ. DR. ENGİN CEMAL MENGÜÇ 2 CSS, açılımı Cascading Style Sheet olan ve dilimize Stil şablonları olarak yerleşen basit ve kullanışlı bir işaretleme dilidir.
DetaylıKENDİ ÇİZİM PROGRAMIMIZI OLUŞTURALIM
1 Şimdi kendi çizim programınızı oluşturmaya ne dersiniz. Bunun için önce kedimizi silelim ve kalem kuklasını seçelim. Daha sonra kılıklar sekmesine gidip pencilb adlı kılığı silelim. 2 Biraz önceki alıştırmada
DetaylıVERİ TABANI NEDİR A. TABLO OLUŞTURMA
VERİ TABANI NEDİR Belli bir amaca dayalı ortak alanlara (ad soyad, ürün adı, fiyatı gibi) sahip kişilerin ve nesnelerin bilgilerinin tutulduğu, istendiğinde bu bilgiler için arama, düzeltme, silme, kayıt
DetaylıACCESS DERS 2. 1. Tablolarda Düzenleme
ACCESS DERS 2 1. Tablolarda Düzenleme Geçen notlarda en durumda Musteri, iller ve ilçeler isminde 3 tane tablomuz olmuştu. Şimdi bu tablolar üzerinde düzenlemeler yapacağız. İlk düzenlemeyi tablo ve tablo
Detaylı2. HTML Temel Etiketleri
2. HTML Temel Etiketleri Bu bölümü bitirdiğinizde, HTML ve etiket kavramlarının ne olduğunu, HTML komut yapısını, Örnek bir HTML dosyasının nasıl oluşturulduğunu, Temel HTML etiketlerinin neler olduğunu,
DetaylıMODÜL 3 HTML İLE STİL ŞABLONLARI
MODÜL 3 HTML İLE STİL ŞABLONLARI Bu modülü bitirdiğinizde; CSS kodlama standartlarına uyarak işlevselliği ve verimliliği artırmak için HTML kodları ile Stil şablonu (CSS) yapılandırmasını gerçekleştireceksiniz.
DetaylıAndroid Ders Notları
Android Ders Notları 1. Yeni Bir Proje Başlatma Android Studio programında yeni bir proje başlatıyoruz. İlk olarak karşımıza resim 1 deki gibi bir pencere gelecek. Burada Application name kısmına proje
DetaylıRadio butonları CSS ile makyajlamak
Radio butonları CSS ile makyajlamak 4 Ocak Cuma 13 (X)HTML, CSS ve JavaScript Dökümanları http://mfyz.com/radio-butonlari-css-ile-makyajlamak Bildiğiniz gibi bazı form elementlerine (radio butonlar, check
DetaylıGparted Kullanarak Disk Bölümü Oluşturma ve Biçimlendirme İşlemi
Gparted Kullanarak Disk Bölümü Oluşturma ve Biçimlendirme İşlemi Gparted diskimizi biçimlendirebildiğimiz,disk bölümlerinin boyutlarını belirleyebildiğimiz bir disk yönetim programıdır. Gparted programının
DetaylıASSAM YÖNERGESİNE EK-T ASSAM WEB SİTESİ YÖNERGESİNE LAHİKA-2 WEB SİTESİ MAKALE EKLEME KILAVUZU 8.4.2014. www.assam.org.tr ASSAM
YÖNERGESİNE EK-T ASSAM WEB SİTESİ YÖNERGESİNE LAHİKA-2 WEB SİTESİ MAKALE EKLEME KILAVUZU 8.4.2014 ASSAM İçindekiler Önsöz... 3 ASSAM Web Sitesinde Makale Yayınlamak... 4 ASSAM Web Sitesine Nasıl Girerim?...
DetaylıZoru Kolay Yapmak İçin...
Zoru Kolay Yapmak İçin... 3308 Mesleki Eğitim Okullarında Öğrenci Takip Programı KURULUM Programı http://www.cetasey.com/userfiles/file/setup.exe adresinden bilgisayarınıza indirip kurun. Daha sonra programın
Detaylı<html> <head> <title>sayfa Başlığı</title> </head> <body> Bu benim ilk sayfam <b>bu metin koyu</b> </body> </html>
HTML'e Giriş 1. HTML dosyası nedir? HTML'in açılımı Hyper Text Markup Language (Bunun tam Türkçe'si bulunmamakla beraber "çok yere açılan metin" denebilir. Bir HTML dosyası bir text dosyası olmakla beraber
DetaylıMetin İşlemleri, Semboller
Ankara Üniversitesi Nallıhan Meslek Yüksekokulu Metin İşlemleri, Semboller NBP108 - GRAFİK ANİMASYON il Öğr.Gör. Salih ERDURUCAN 1 / 13 3. METİN İŞLEMLERİ 3.1. Metin Aracı Animasyon yazılımı yazı yazmak
DetaylıLuca NET Kobi Ticari Yazılımında ilk yapılacaklar
Luca NET Kobi Ticari Yazılımında ilk yapılacaklar Luca MMP (Mali Müşavir Paketi) bilgileri ile Luca Üye girişinden sisteme giriş yapıldıktan sonra Luca Net Kobi Ticari Giriş butonuna basarak programa giriş
DetaylıKULLANIM KILAVUZU 1. İçindekiler. 2. Ürün İşlemleri
KULLANIM KILAVUZU 1. İçindekiler 1.1 TeknoPhar kısa tanıtım 1.2 Giriş ve şifreler 2. Ürün İşlemleri 2.1 Yeni ürün girişi 2.2 Ürün Fiyat düzeltme 2.3 İndirim/3 al 2 öde 2.4 Kampanya Alanı 3. Endikasyon
Detaylı11. STIL ŞABLONU (CSS) MENÜ İŞLEMLERİ
11. STIL ŞABLONU (CSS) MENÜ İŞLEMLERİ Bu bölümü bitirdiğinizde, Sekmeli menünün nasıl yapıldığını, Dikey menünün nasıl yapıldığını, Yatay menünün nasıl yapıldığını, Dikey açılır menünün nasıl yapıldığını,
DetaylıBu gün dersimizde değişik web kontrollerinin kullanımını gösteren birkaç web sitesi hazırlayacağız. Önce Visual Studio 2005 i açalım.
Bu gün dersimizde değişik web kontrollerinin kullanımını gösteren birkaç web sitesi hazırlayacağız. Önce Visual Studio 2005 i açalım. VS2005 den yeni bir web sitesi oluşturmasını isteyelim. Yeni bir ASP.NET
DetaylıZemin özellikleri Font özellikleri Kutu modeli özellikleri Tablo özellikleri Pozisyon özellikleri Liste özellikleri
Zemin özellikleri Font özellikleri Kutu modeli özellikleri Tablo özellikleri Pozisyon özellikleri Liste özellikleri Zemin Özellikleri Ögelere zemin (background) rengi vermek veya zemin resmi eklemek ile
Detaylıhttp://www.microsoft.com/visualstudio/eng/downloads
Visual Studio 2012'nin kurulumunu, Visual Studio'nun kullanımını ve Windows Store'da basit bir proje hazırlanmasını anlatacağım. Hepsinden önce Visual Studio ortamından biraz bahsedelim. Visual Studio
DetaylıWEB TASARIMI veprogramlama DERSİ CSS DERS NOTLARI
WEB TASARIMI veprogramlama DERSİ CSS DERS NOTLARI CSS BACKGROUND ÖZELLİKLERİ background-color Zeminin rengini belirler. #color Renk adı. transparent Zeminin saydam olmasını sağlar. background-image Zemine
DetaylıHTML Sayfaları. Bütün html sayfaları
HTML VİZE NOTLARI HTML Sayfaları Bütün html sayfaları tagıyla başlar ve tagıyla biter. tagları arasında ve tagları vardır. Örnek bir html boş sayfası kodları şu şekilde
DetaylıKENDİ ÇİZİM PROGRAMIMIZI OLUŞTURALIM
1 Şimdi kendi çizim programımızı yaratmaya ne dersiniz. Bunun için önce kedimizi silelim ve kalem kuklasını seçelim. Daha sonra kılıklar sekmesine gidip pencilb adlı kılığı silelim. 2 Biraz önceki alıştırmada
Detaylı4. Bağlantı (Köprü) Oluşturma
4. Bağlantı (Köprü) Oluşturma Bu bölümü bitirdiğinizde, HTML dosyalarında nasıl bağlantı oluşturulduğunu, Bağ etiketinin ne olduğunu, Yerel dosyalara nasıl bağlantı kurulduğunu, İnternet üzerindeki dosyalara
DetaylıBİLGİSAYAR PROGRAMLAMA. Yrd. Doç. Dr. Beytullah EREN beren@sakarya.edu.tr 0264 295 5642
BİLGİSAYAR PROGRAMLAMA Yrd. Doç. Dr. Beytullah EREN beren@sakarya.edu.tr 0264 295 5642 EXCEL DE GRAFİK UYGULAMA GRAFİKLER Grafikler, çok sayıda verinin ve farklı veri serileri arasındaki ilişkinin anlaşılmasını
DetaylıLESS ile hiyerarşik ve fonksiyonel css yazmak
LESS ile hiyerarşik ve fonksiyonel css yazmak 13 Kasım Pazar 11 (X)HTML, CSS ve JavaScript Dökümanları http://mfyz.com/less-ile-hiyerarsik-ve-fonksiyonel-css-yazmak LESS bir çeşit css derleyicisi ve aslında
DetaylıMS WORD 5. BÖLÜM. Şekil 3. 100. Sayfa Düzeni Sekmesi. Şekil 3. 101. Temalar Grubu
MS WORD 5. BÖLÜM Bölüm Adı: SAYFA DÜZENİ Bölümün Amacı: Sayfa yapısı ve düzenini değiştirmek. Neler Öğreneceksiniz? Bu bölümü bitiren kişi: 1. Ofis temalarını bilir. 2. Kenar boşluklarını, sayfa yönlendirmesini,
Detaylıwww.elektrikogretmenleri.com
DREAMWEAVER DA TABLOLAR KULLANARAK İNDEX SAYFASI HAZIRLAMAK Günümüzde web siteleri Frameset yapısı ve Tablo yapısı kullanarak yapılmaktadır. Frameset (Çerçeve) yapılı web sitelerinde index sayfaları oluşturulduğunda
DetaylıToplu Kayıt Kullanıcı Kitapçığı
OnSync Web Toplantı, Sanal Sınıf, Web ve Video Toplantı Servisi Toplu Kayıt Kullanıcı Kitapçığı 1 Öncelikle Etgi Grup u tercih ettiğiniz için teşekkür ederiz. OnSync sistemine giriş yapmadan önce toplu
DetaylıSamsun Çocuk Hizmetleri İ l Koordinasyon Sekretarya Birimi
Samsun Çocuk Hizmetleri İ l Koordinasyon Sekretarya Birimi Veri Giriş Sistemi Klavuzu Amaç Veri Giriş Sistemi, koruyucu ve destekleyici tedbir kararlarının takibinde ve uygulamasında ilgili kurumları daha
DetaylıCss Stillerinin Nesneyi Etkileme Yolları Ve Sırası, Diez, Nokta, Yıldız, Class Css De Neyi İfade Eder.
Ve Sırası, Diez, Nokta, Yıldız, Class Css Css stillerinin nesneyi etkileme yolları ve sıraları: (#), (.), (*), (class) CSS de nasıl kullanılır bu başlık altında bulabilirsiniz. Css Nedir? HTML bize metin
DetaylıWindows Paint ile Fotoğraf Düzenleme
Windows Paint ile Fotoğraf Düzenleme Düzenlemek istediğimiz fotoğrafımızı windows paint uygulaması ile açıyoruz Görünüm sekmesinden fotoğrafımızın tamamını görene kadar küçültüyoruz bunu yapmamızdaki amaç
DetaylıBİLGİSAYAR PROGRAMLAMA. Yrd. Doç. Dr. Beytullah EREN
BİLGİSAYAR PROGRAMLAMA Yrd. Doç. Dr. Beytullah EREN beren@sakarya.edu.tr 0264 295 5642 EXCEL DE DOĞRULAMA VE DENETLEME DOĞRULAMA Bir hücre grubuna veri girişi için doğrulama kriterleri (tamsayı, ondalıklı,
DetaylıTeknik Resim Çıkartılması
Teknik Resim Çıkartılması Open komutuna tıklayarak daha önce çizmiş olduğumuz D2-Revolved Feature isimli part dosyamızı açalım. New komutuna tıklayarak yeni bir Drawing dokümanı oluşturalım. Karşımıza
DetaylıVeri giriş formu yapmak
Veri giriş formu yapmak Bu işlem için DW'da iki seçeneğimiz var; bunlardan ilki formlarımızı kendimiz tasarlayıp daha sonra bu formun hangi veritabanı tablosuna hangi bilgiyi gireceğini belirtmek. İkinci
DetaylıCSS ile Sayfa Yerleşim Düzeni
CSS ile Sayfa Yerleşim Düzeni Katmanlar (Layers) Katmanların HTML kod karşılığı Div etiketidir.. ... Katmanların genel özelliklerini şöyle sıralayabiliriz: Katmanlara genişlik ve yükseklik
DetaylıArgox Yazıcılar İçin Bartender Programı Üzerinden Etiket Tasarımı Yardım Dosyası
Argox Yazıcılar İçin Bartender Programı Üzerinden Etiket Tasarımı Yardım Dosyası Doküman Versiyon : 1.01.01 Tarih : 18.08.2017 Copyright 2017 AKINSOFT 1 - Çalışma Şekli Hakkında Kısa Bilgi AKINSOFT WOLVOX
DetaylıJavaScript Örnekleri PDF
5 JavaScript örneği ve bu örneklerin çalışan uygulamaları JavaScript Örnekleri PDF www.yazilimbilisim.net.. İçindekiler Tablosu Javascript Text Kutusuna Sadece Sayı Girdirme... 2 PROGRAM KODU... 3 Javascript
DetaylıBTU 100 Bilgisayar Okuryazarlığı EXCEL BTU 100 BİLGİSAYAR OKURYAZARLIĞI. Excelde Formüller ve Grafik Biçimlendirme
EXCEL BTU 100 BİLGİSAYAR OKURYAZARLIĞI Excelde Formüller ve Grafik Biçimlendirme 1 EXCELDE FORMÜLLER VE GRAFİK BİÇİMLENDİRME İÇİNDEKİLER 1. Excelde Grafik Biçimlendirme... 2 1.1. Grafiğe Başlık Ekleme...
DetaylıMicrosoft FrontPage 2003. Web Sitesi Hazırlama. Ögr.Gör.N.Nilgün Çokça
Microsoft FrontPage 2003 Web Sitesi Hazırlama Ögr.Gör.N.Nilgün Çokça Microsoft FrontPage 2003 Web Sitesi Hazırlama Ikinci Bölüm İçindekiler İçindekiler i Microsoft FrontPage 2003 2 Atlama Menüsü Eklemek:
Detaylı1.1 Web Kavramlar. 1.1.1.3 URL terimini tanımlayınız ve anlayınız.
1.1 Web Kavramlar 117 Anahtar 7erim/er 1.1.1.1 Web ve Internet terimlerini tanımlayınız. Her birinin anahtar özelliklerini tanımlayınız. Web bir Internet hizmetidir. Web Internet üzerinde bağlantılı html
DetaylıMaltepe Üniversitesi Bilgisayar Mühendisliği Bölümü Internet ve Bilgi Teknolojileri (BİL 309) Dersi
Maltepe Üniversitesi Bilgisayar Mühendisliği Bölümü Internet ve Bilgi Teknolojileri (BİL 309) Dersi GENEL DERS BİLGİLERİ Öğretim Elemanı Ofis : MUH 312 : Öğr. Gör. Dr. T.Tugay BİLGİN Ofis Saatleri : Pazartesi:
DetaylıSilmek istediğiniz satır/sütun/hücre yi seçin ve aşağıdaki adımlardan birini takip edin:
Satır/Sütun/Hücre Ekleme Paket Programlar Not_04 Oluşturduğunuz tabloya satır, sütun ve hücre ekleyebilirsiniz. Bunun için ekleme yapacağınız hücreye tıklayın ve aşağıdaki adımlardan birini takip edin:
DetaylıİÇERİK YÖNETİM SİSTEMİ KULLANMA KILAVUZU
T.C. SÜLEYMAN DEMİREL ÜNİVERSİTESİ BİLGİ İŞLEM DAİRE BAŞKANLIĞI İÇERİK YÖNETİM SİSTEMİ KULLANMA KILAVUZU Hazırlayanlar Mahmut ÖZDEMİR Sezgin SERPEN Büşra TUNCER Yönetim Paneli Kullanımı Sistemin yönetim
Detaylı1. Bilgisayarınızda kullandığınız Web tarayıcı programını (Internet Explorer, Mozilla Firefox vb.) çalıştırınız.
VLAN Yapılandırma Değerli Müşterimiz, VLAN özelliği ile yerel ağınızı segmentlere ayırarak bölebilir ve aynı ağ geçidini kullanarak internete çıkabilen bu segmentlerin birbirlerine erişimlerini engelleyebilirsiniz.
DetaylıMEBİS Kullanım Kılavuzu. Öğretim Elemanı Yeni. 2013-2015 - İstanbul Medipol Üniversitesi
MEBİS Kullanım Kılavuzu Öğretim Elemanı Yeni 2013-2015 - İstanbul Medipol Üniversitesi İçindekiler 1. Uzem 1. Uzem mebis.medipol.edu.tr adresine girdiğinizde sol alt tarafta bulunan seçeneklerden "Muzem
DetaylıWEB TASARIMININ TEMELLERİ
WEB TASARIMININ TEMELLERİ Ankara Üniversitesi Elmadağ Meslek Yüksekokulu Ders İzlencesi Hafta Modüller/İçerik/Konular 1. Hafta İnternet ve WEB Tanımları Html Temel Etiketleri 2. Hafta Html Temel Etiketleri
DetaylıWeb Tasarımının Temelleri
1. Hafta Web Tasarımının Temelleri Öğr. Gör. Murat YAZICI www.muratyazici.com Artvin Çoruh Üniversitesi, Artvin Meslek Yüksekokulu www.artvin.edu.tr Listeleme Etiketleri Sıralı liste oluşturmak için
DetaylıCAMPUSIUM UZAKTAN EĞİTİM SİSTEMİ KULLANIM KILAVUZU
CAMPUSIUM UZAKTAN EĞİTİM SİSTEMİ KULLANIM KILAVUZU YÖNETİM PANELİ 1-Kategori Tanımlama: Sistemde öncelikle kategori eklemelisiniz. Kategori eklemek için işlemler menüsünden kategoriler sekmesini tıklayınız.
DetaylıBİLGİSAYAR 4 MOLEKÜLER BİYOLOJİ VE GENETİK BÖLÜMÜ YARD. DOÇ. DR. MEHTAP YALÇINKAYA 08.04.2011
BİLGİSAYAR 4 MOLEKÜLER BİYOLOJİ VE GENETİK BÖLÜMÜ HTML DERS NOTLARI 6. DERS YARD. DOÇ. DR. MEHTAP YALÇINKAYA 08.04.2011 HYPERLINKS - KÖPRÜ Sayfalara link (bağlantılar) oluşturmak için kullanılır.
DetaylıBilgisayar Programcılığı Ön Lisans Programı WEB EDİTÖRÜ. Öğr. Gör. Rıza ALTUNAY
CSS Ünite 7 Bilgisayar Programcılığı Ön Lisans Programı WEB EDİTÖRÜ Öğr. Gör. Rıza ALTUNAY 1 Ünite 7 CSS Öğr. Gör. Rıza ALTUNAY İçindekiler 7.1. CSS KULLANIM ALANLARI... 3 7.1.1. Yerel Kullanım Alanı...
Detaylıwww.elektrikogretmenleri.com
FIREWORKS (MENU OLUŞ TURMA) 1 Önce Başlat menüsü Programlar Adobe Web Premium CS3 Adobe Fireworks CS3 kısayol simgesi ile Fireworks programı açılır. 2 Fireworks programı açıldığında Karşımıza gelen Yeni
Detaylı1. Admin kullanıcı ile sisteme giriş yapınız. Ekranın sağ üstünde yer alan defter yaprakları ikonuna tıklayınız.
Luca Koza Ticari Paket ve Kurumsal Çözümler ürününe E-Fatura uygulaması çözümleri eklenmiştir. E-fatura uygulama çözümü 2 aşamada tamamlanmaktadır. 1. Luca Koza Ticari Paket ve Kurumsal Çözümler yazılımında
DetaylıFireBug eklentisini eklentiyi yazan sitesinden veya FireFox un eklentiler indirebilirsiniz.
Firebug Hakkında Firebug hakkında... Kod yazarken bir sorunla karşılaşırız ve sorunlarla uğraşmak her ne kadar güzel bir şey olmasa da bu işin olmazsa olmazıdır. Kod yazarken muhakkak bazı sorunlarla karşılaşacağız,
DetaylıCourse Online. Güncelleme: Haziran 24, 2013
Course Online Güncelleme: Haziran 24, 2013 Course Online, Campus Online ile birlikte hocaların kullanımına açık, verdikleri derslerle ilgili çeşitli değişiklikleri ve bildirimleri yapabilecekleri web tabanlı
DetaylıTASARIMIN TEMEL İLKELERİ
TASARIMIN TEMEL İLKELERİ Web Tasarımı ve Programlama İçerik Hedef Kitle Beklentileri Tasarım Renk Dengesi İşlevsellik Okunabilirlik Kullanılabilirlik Hizalama Uyumluluk Ses ve Görüntü Dosyaları 2 İçerik
DetaylıSet nav bar ımage, set text, show hide elements, swap ımage, swap ımage restore
Elements, Swap Image, Swap Image Set nav bar ımage, set text, show hide elements, swap ımage, swap ımage restore Navigation Bar kullanımı Sitenizde ziyaretçilerin kolayca dolaşabilmeleri ve aradıkları
Detaylı12 TBT / WEB TASARIM ve PROGRAMLAMA ( Not 3 )
12 TBT / WEB TASARIM ve PROGRAMLAMA ( Not 3 ) 25.09.2017 METİN VE GÖRÜNÜM DÜZENLEME ETİKETLERİ : etiketleri dökümana başlık eklemek için kullanılır. etiketinde ki x ifadesi 1 den 6 ya kadar
DetaylıMUĞLA SITKI KOÇMAN ÜNĠVERSĠTESĠ. BĠLGĠ ĠġLEM DAĠRE BAġKANLIĞI. AKADEMĠK PERSONEL KĠġĠSEL WEB SAYFASI KULLANIM KILAVUZU MUKWEB ĠÇĠNDEKĠLER TABLOSU
MUĞLA SITKI KOÇMAN ÜNĠVERSĠTESĠ BĠLGĠ ĠġLEM DAĠRE BAġKANLIĞI AKADEMĠK PERSONEL KĠġĠSEL WEB SAYFASI KULLANIM KILAVUZU MUKWEB ĠÇĠNDEKĠLER TABLOSU 1. GENEL BĠLGĠLER... 1 2. Ana Sayfa... 4 3. MukWeb Sayfaları...
DetaylıProje 1. Arayüz Tasarımı
Proje 1. Arayüz Tasarımı 1. Yeni bir android projesi oluşturalım. Proje ismi: ArayuzTasarimi ve aktivity adı: ArayuzTasarimi olarak yazalım. 2. Projejiyi oluşturduktan sonra bize hazır olarak gelen dosyalar:
Detaylı2014-2015 EĞİTİM-ÖĞRETİM YILI BİLİŞİM TEKNOLOJİLERİ VE YAZILIM DERSİ 6. SINIF 2. DÖNEM 2. SINAV ÇALIŞMA NOTLARI
2014-2015 EĞİTİM-ÖĞRETİM YILI BİLİŞİM TEKNOLOJİLERİ VE YAZILIM DERSİ 6. SINIF 2. DÖNEM 2. SINAV ÇALIŞMA NOTLARI İşletim Sisteminde Yapılan Uygulamalar Bir Bilgisayarda Hangi İşletim Sistemi Yüklü Olduğunu
Detaylı3- http://www.google.com/sites/help/intl/tr/overview.html
Merhaba değerli öğrencilerim, Son ödevin konusu : Kişisel web sitesi oluşturmak, siteyi düzenlemek, yayınlamak ve UKEY üzerinden bir dosya içerisinde kişisel web sitesinin adresini göndermek. Bunun için
DetaylıMacOSX'de Mail.app (Apple Mail) istemcisinde html imza ayarlamak
MacOSX'de Mail.app (Apple Mail) istemcisinde html imza ayarlamak 3 Temmuz Cuma 09 *nix ve MacOSX Dökümanları http://mfyz.com/macosxde-mailapp-apple-mail-istemcisinde-html-imza-ayarlamak Neden HTML İmza
Detaylı