CSS İle Menü Oluşturma

display : inline : Kullandığımız nesneleri yanyana sıralar. block : Kullandığımız nesneleri alt alta sıralar. none : Kullandığımız nesneleri göstermez. Genellikle JavaScript methodlarında kullanılır.

Padding: İçeriğin elementin sınırlarına olan uzaklığını belirlemek için kullanılır.Örneğin "padding:4px;" şeklindeki bir deklerasyon içeriğin sınırlara (alt,üst,sağ ve sol) olan uzaklığının 4 pixel olacağını söyler. Margin: Elementin komşu elementlere olan uzaklığını belirtmek için kullanılır.Örneğin "margin:4px;" şeklindeki bir deklerasyon elementin komşularının sınırlarına (alt,üst,sağ ve sol) olan uzaklığının 4 pixel olacağını söyler. Aşağıdaki şekilde padding ve margin seçeneğini gösterir.

CSS’de birimleri 4 gruba ayırabiliriz. · Uzunluk Birimleri · Yüzde Birimleri · Renk Birimleri · Url Birimleri

Uzunluk Birimleri CSS’de 8 farklı uzunluk birimi vardır Uzunluk Birimleri CSS’de 8 farklı uzunluk birimi vardır. Bunların 3′ü relative (göreceli) 5′i ise absolute (kesin) uzunluklardır. Sayfa ölçeğinin değişmesi veya çıktısının alınması gibi durumlarda göreceli uzunluk birimleri avantaj sağlar. Her kullanıcının bilgisayarı özellik olarak farklılıklar gösterebilir.Özellikle kullanılan monitörlerin farklı ebatlarda-özelliklerde olması bu birimleri kullanışsız kılmaktadır.Misal, 15inc’lik bir monitörde gayet hoş görünen bir metin, 19inc bir monitörde kötü görünebilir.

Göreceli uzunluk birimlerini · em: Elementin fontunun yüksekliğidir.1 em, 16 pixele karşılık gelmektedir. CSS’de “em” uzunluk birimini kullanmak isteyenler için pixel olarak dönüşüm yapmak oldukça zordur. · ex: Metnin küçük “x” harfinin yükseklik değeridir.Ortalama olarak 1ex, 8 pixele karşılık gelmektedir.Her fontun “x” karakteri farklı boyutlarda olduğundan, her font için bu uzunluk birimi farklı sonuçlar çıkaracaktır. ·

Göreceli uzunluk birimlerini · px: Pek yabancı olmadığımız, sıklıkla kullanılan bir ölçü birimidir.Bir resmi yeterince büyütürseniz, çok küçük kutucuklardan oluştuğunu görürsünüz.İşte bu kutuların her biri 1 pixele karşılık gelmektedir.Aynı mantık monitörlerde de vardır.Eğer monitörünüze çok takından bakarsanız ızgara şeklinde kutuculardan oluştuğunu görürsünüz.Bu kutucukların da her biri 1pixeldir.Bu da her monitöre göre farklı değerler demektir. CSS: #deneme {font-size: 22px;}

Kesin uzunluklar ise, gerçek hayatta kullanılan kati ölçü birimleridir. · in (inch): 1in, 2,54cm’e karşılık gelmektedir.TopStyle Lite programında 1in, 96px e karşılık gelmektedir.Bu dönüşümleri Photoshop ile de test edebilirsiniz.Ancak 1in=72px’e karşılık gelecektir.CSS ile uğraştığımıza göre TopStyle Lite’daki değeri kullanabiliriz. · cm (santimetre): Günlük hayatta kullandığımız değerdir. TopStyle Lite’da 1cm, 38px’e karşılık gelmektedir.

· mm (milimetre): Yine günlük hayattan tanıdığımız bir ölçü birimi · mm (milimetre): Yine günlük hayattan tanıdığımız bir ölçü birimi.Bilindiği üzere 10mm, 1cm’e karşılık gelmektedir.Bu da 10mm=38px demektir. · pt (point): Standart baskı birimidir.100pt, 133pixele karşılık gelmektedir.Ufak bir bilgi, Photoshop programında 1px=1pt alınmıştır. · pc (pica): Bu da bir baskı ölçü birimidir.1pc, 16px’e karşılık gelmektedir.

Yüzde Birimleri : Yüzde değerleri her zaman diğer elementlere göre göreceli değerlerdir. CSS: h4 { line-height: 150% } böyle bir kod, metnin font büyüklüğünün %150 kadarı bir satır yüksekliğini ifade eder. CSS: p { text-indent: 10% } böyle bir kod ise metnin soldan satır genişliğinin %10'u kadar içerden başlayacağını ifade eder.

Renk Birimleri : CSS'de renklerin İngilizce isimleri kullanılarak tanımlama yapılır.Design ile ilgilenen arkadaşlarımız varsa, RGB kavramı pek yabancı gelmeyecektir onlara.Bu mod Red(Kırmızı), Green(Yeşil), Blue(Mavi) renklerinin başharfleri ile tanımlanmaktadır. 5 Çeşit renk belirleme özelliği vardır. 1- İlgili renk özelliğine HTML tablosundaki renklerden birinin isminin direk olarak atanması yöntemi.Misal, Aşağıdaki kodlar 12px font büyüklüğünde açıkyeşil renkte bir yazıyı karşılamaktadır.

CSS: #deneme { font-size: 14px; color: LightGreen; } gibi.

2-Kısa RGB kodu ile renk atama yöntemi : Kırmızı (R), Yeşil (G) ve Mavi (B) renkler ayrı ayrı 0,...,F arası tek basamaklı heksadesimal değer alabilirler. En fazla renk değeri : #FFF (Önceki yöntemlere göre = White) 'dir. Aşağıdaki kodlar 12px font büyüklüğünde beyaz renkte bir yazıyı karşılamaktadır. CSS: #deneme { font-size: 12px; color: #FFF; }

3-RGB kodu ile renk atama yöntemi : Kırmızı (R), Yeşil (G) ve Mavi (B) renkler ayrı ayrı 00,...,FF arası iki basamaklı heksadesimal değer alabilirler. En fazla renk değeri : #FFFFFF (Önceki yöntemlere göre = #FFF = White) Aşağıdaki kodlar 12px font büyüklüğünde yeşil renkte bir yazıyı karşılamaktadır. CSS: #deneme { font-size: 12px; color: #9ACD32;}

4-Tam sayı değer ile renk atama yöntemi : Kırmızı (R), Yeşil (G) ve Mavi (B) renkler ayrı ayrı 000,...,255 arası 3 basamaklı tam sayı değerleri alarak aşağıdaki örnekteki gibi belirtilirler. En fazla renk değeri : rgb(255, 255, 255) (Önceki yöntemlere göre = #FFFFFF = #FFF = White) Aşağıdaki kodlar 12px font büyüklüğünde beyaz renkte bir yazıyı karşılamaktadır. CSS: #deneme { font-size: 12px; color: rgb(255,255,255); }

5-Yüzde değeri ile renk atama yöntemi : Kırmızı (R), Yeşil (G) ve Mavi (B) renkler ayrı ayrı 000,...,100 arası kayar noktalı sayı değeri alarak gösterilir. En fazla renk değeri : rgb(100%, 100%, 100%) (Önceki yöntemlere göre = rgb(255,255,255) = #FFFFFF = #FFF = White) Aşağıdaki kodlar 12px font büyüklüğünde beyaz renkte bir yazıyı karşılamaktadır. CSS: #deneme { font-size: 12px; color: rgb(100%, 100%, 100%) }

URL Birimleri : Herhangi bir metnin,belirli bir alanın, arkaplanına veya etrafına yerleştirilen resmin gösteriliş şeklidir.Misal; Aşağıdaki kodlar 12px font büyüklüğünde beyaz renkte, arkaplanına benim atadığım style.css ile aynı dizinde olan images klasöründeki deneme.gif dosyasının gösterileceğini söyler. #deneme { font-size: 12px; color: rgb(100%, 100%, 100%) background: url("/images/deneme.gif“) }

Örnek 1: <html> <head>  <style type="text/css">  #coolmenu { border: 1px solid black; border-bottom-width: 0; width: 170px; background-color: #E6E6E6; }  

#coolmenu {width:164px;/*tablo sütün genişliği*/} #coolmenu a{ font: bold 13px Verdana; padding: 2px; padding-left: 4px; display: block; width: 100%; color: black; text-decoration: none; border-bottom: 1px solid black; }

#coolmenu a:hover{ background-color: black; color: white; }  </style>  </head>  <body>  <div id="coolmenu"> <a href="http://www.cssdrive.com">CSS Drive</a>  <a href="http://www.javascriptkit.com">JavaScript Kit</a>

<a href="http://www. javascriptkit. com/cutpastejava <a href="http://www.javascriptkit.com/cutpastejava.shtml">Free JavaScripts</a> <a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a> <a href="http://www.codingforums.com">Coding Forums</a> </div>  </body> </html>

Örnek 2: <html> <head> <style type="text/css">  #button { width: 150px; border-right: 1px solid #000; padding: 0 0 1em 0; margin-bottom: 1em; font-family: 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif; font-size: 90%; background-color: #90bade; color: #333; }

#button ul { list-style:none ; margin: 0; padding: 0; border: none; }  #button li { border-bottom: 1px solid #90bade; margin: 0; }  

#button li a { display: block; padding: 5px 5px 5px 0.5em; border-left: 10px solid #1958b7; border-right: 10px solid #508fc4; background-color: #2175bc; color: #fff; text-decoration: none; width: 100%; }

#button li a:hover { border-left: 10px solid #1c64d1; border-right: 10px solid #5ba3e0; background-color: #2586d7; color: #fff; }  </style> </head>

<body> <div id="button"> <ul> <li> <a href="#">e-dersler</a></li> <li> <a href="#">C/C++</a></li> <li> <a href="#">Pascal</a> </li> <li><a href="#">Java</a></li> <li> <a href="#">HTML</a></li> <li><a href="#">xhtml</a> </li> <li><a href="#">xml</a></li> </ul> </div> </body> </html>

Örnek 3: <html><head> <style> #navcontainer ul{ margin: 0; padding: 0; list-style-type: none; }   #navcontainer li { margin: 0 0 .2em 0;

#navcontainer a:hover{ display: block; color: #ffffff; background-color: #003366; width: 9em; padding: .2em .8em; text-decoration: none; } #navcontainer a:hover{ background-color: rgb(51,102,153); color: #ffffff; }

#active a { } </style> </head> display: block; color: #FFF; background-color: #600; width: 9em; padding: .2em .8em; text-decoration: none; } </style>  </head>

#active a { } </style> </head> display: block; color: #FFF; background-color: #600; width: 9em; padding: .2em .8em; text-decoration: none; } </style>  </head>

<body> CSS CODE HTML CODE <div id="navcontainer"> <ul><li><a href="#">Ankara</a></li>  <li id="active"><a href="#">İstanbul</a></li> <li><a href="#">İzmir</a></li> <li><a href="#">Adana</a></li> <li><a href="#">Erzurum</a></li> </ul></div></body></html>

Farklı Özellikler

KAYAN YAZILAR KAYAN, yuvarlanan, ters parende atarak ekrandan kaybolan yazılar insanların ilgisini daha çok çeker. Bu işlemler için Microsoft, <MARQUEE> tag'ını web tarayıcısının yorumlayıcısına eklemiş. Netscape ise Explorer 2.0'dan beri var olan bu tag'ı web tarayıcısına koymayı düşünmüyor. Yine de tag'ı kullandığınızda içerisinde var olan yazıların Netscape kullanıcıları tarafından 'normal yazı' olarak görüneceğini belirtelim. <MARQUEE BEHAVIOR=tip BGCOLOR=renk DIRECTION=yön HEIGHT=n HSPACE=n LOOP=n SCROLLAMOUNT=n SCROLLDELAY=n VSPACE=n WIDTH=n>

KAYAN YAZILAR <MARQUEE BEHAVIOR=tip BGCOLOR=renk DIRECTION=yön HEIGHT=n HSPACE=n LOOP=n SCROLLAMOUNT=n SCROLLDELAY=n VSPACE=n WIDTH=n> BEHAVIOR=tip: Metnin ekranda nasıl hareket edeceğini belirten bu ek SCROLL, SLIDE, ALTERNATE değerlerinden birini alabilir. Ek kullanılmadığında SCROLL değeri varsayılan olarak kabul edilir ve yazı, sınırın bir köşesinden belirerek diğer köşeden kayarak kaybolur. SLIDE eki ise yazının bir köşeden başlayarak diğer köşede donmasını sağlar. Metnin iki köşe arasında gidip gelmesi ise ALTERNATE ekiyle gerçekleştirilebilir.

KAYAN YAZILAR BGCOLOR=renk: Kayan yazının arkasındaki rengi belirler. ' renk' değeri 16'lık sayı düzeninde bir değer olabileceği gibi ' red' ,' blue' gibi renk isimlerinden biri de olabilir. DIRECTION=yön: Yazının kayma yönünü belirler. DIRECTION eki, LEFT veya RIGHT değerlerinden birini almalıdır. LEFT değeri yazının soldan sağa doğru kaymasını, RIGHT ise bunun tersini sağlar. HEIGHT=n: Kayan yazının sınırlarından ' yüksekliği' sağlar. N değeri sabit bir piksel sayısı olduğu gibi aynı zamanda bir pencere oranı olabilir. Oran değeri % işareti ile belirtilmelidir. HSPACE=n: Kayan yazının sınırlara ne oranda yaklaşacağını belirler. Bu ek özellikle arka plana bir renk verildiğinde daha da belirginleşir.

KAYAN YAZILAR LOOP=n: Yazıya verilen hareketin sınırlar içerisinde kaç kere tekrarlanacağını belirler. N değerine ' -1' veya ' INFINITE' verildiğinde hareket sınırsız olarak tekrarlanır. Tip olarak ' SLIDE' kullanıldığında bu işlem tek bir kez gerçekleşeceğinden LOOP ekini kullanmaya gerek yoktur. SCROLLAMOUNT, Kayan yazının bir defada kaç piksel hareket edeceğini, SCROLLDELAY ise yazının her bir hareketi arasında kaç milisaniye bekleyeceğini belirler. Yazının üst ve alt sınırdan ne kadar uzakta kalacağını VSPACE ile, yazının kayacağı toplam uzunluğu ise WIDTH ile ayarlayabilirsiniz. WIDTH değeri HEIGHT gibi bir yüzde alabilir. Örnek Kullanım: <MARQUEE DIRECTION=RIGHT BEHAVIOR=SCROLL SCROLLAMOUNT=10 SCROLLDELAY=200>Bu kayan bir yazıdır... :) </MARQUEE>

MULTİMEDİA ÖĞELERİ Seçiminize göre geri planda WAV, .AU veya MIDI ses dosyalarından birini çalmak için Internet Explorer'da BGSOUND tag'ını kullanabilirsiniz. <BGSOUND SRC=' deneme.mid' LOOP=5> Deneme.Avi adlı bir video görüntüsünü ekrana yerleştirmek için aşağıdaki gibi bir komut kullanmalısınız. Deneme.Gif dosyası görüntü yüklenene kadar sayfada yer kaplayacaktır. <IMG DYNSRC=' deneme.avi' SRC=' deneme.gif' LOOP=INFINITE >

ARAMA MOTORLARINA YARDIMCI OLUN Hazırlanan sitenin arama motorları sayesinde görülmesi için yapılamsı gereken bazı işlemler bulunmaktadır. Arama motorlarının kullandığı ' ajan'  programlar sitenize geldiklerinde ilk baktıkları şey bir takım tanımlardır. Aşağıda bu tanımları oluşturmak için gereken satırları göreceksiniz. Bu satırları <HEAD>...</HEAD> ifadeleri arasına girerseniz hedef kullanıcıya ulaşmanız daha kolay olacaktır. <META NAME="author" CONTENT="EMEL KAÇAR"> Kodu sayfanın tasarımcı kimliğini gösterir. <META NAME="Description" CONTENT="Sayfanızın kısa tanıtımını buraya yapın."> Kodu sayfanın kısa tanımı yapılmak için kullanılır.

ARAMA MOTORLARINA YARDIMCI OLUN <META NAME="keywords" CONTENT="Sitenizi arama motorlarında bulduracak siteniz ile ilgili kelimeleri buraya yazın."> Kodu sayfanın hangi kelimeleri içerdiğini gösterir.Burası arama motorları için çok önemlidir. <META http-equiv=”refresh” CONTENT=”5; URL=http://www.megep.meg.gov.tr”> Refresh ile sayfamız açıldıktan 5 saniye sonra belirtilen adresi otomatik olarak açacaktır. <META http-equiv=”expires” CONTENT=”Wed, 25 Feb 2007 12:00:00 GMT”> Expires GMT saat sistemine göre belirtilen saat ve tarihte sayfanın dosyası silinecektir.

ARAMA MOTORLARINA YARDIMCI OLUN <META http-equiv="Content-Type" CONTENT="text/html; charset=windows-1254"> Kodu sayfanızda ne tür bir metnin olduğunu (text/html yazmakla metnin düz yazı ve html belgesi olduğunu) ve karakterlerinin hangi kodlama (windows-1254 yazmakla) ile yapıldığını gösterir. <META http-equiv="Content-Language" CONTENT="tr"> Kodu sayfanızın dilinin Türkçe (istenirse değiştirilebilir.) olduğunu gösterir. <META http-equiv=”content-style-type” CONTENT=”text/css”> Content-typestyle belgemizde kullanılan CSS dosyamızın bir metin dosyası olduğunu belirtir.

ARAMA MOTORLARINA YARDIMCI OLUN <META NAME="copyright" CONTENT="© 2006 EMEL KAÇAR“> Kodu sayfanın telif hakkının kime ait olduğunu gösterir. <META name="GENERATOR" CONTENT="Microsoft FrontPage"> Kodu sayfanın hangi editörle yapıldığını gösterir. <META NAME="ROBOTS" CONTENT="ALL, FOLLOW, INDEX"> Kodu sayfanızı tüm arama motorlarının veritabanına kaydolabilme hakkının verilmiş olduğunu gösterir. <META NAME="RATING" CONTENT="GENERAL"> Kodu sitenizin hangi kategoride, sınıfta olduğunu gösterir. GENERAL yazmakla bütün katagoride olduğu belirtilmiş olur. Meta etiketi ile tanımlanan bilgiler kullanıcıya görüntülenmez.

PROFESYONEL WEB TASARIMI

Web Tasarımda Dikkat Edilecek Hususlar Kullanıcılar (okuyucular) uzun ve bitişik belgeleri nadiren bilgisayar ekranından okurlar. Çoğu insanlar özellikle aradığı belgeleri kısa, anlaşılır, referans bilgilerin bulunduğu sayfalardan aramayı ve aradıklarını bulduktan sonra uzun içerikli bilgileri yazıcıda bastırmayı tercih ederler. Küçük bölümler halinde anlatılmış belgeler, anlaşılabilir organizasyon şeması oluşturmak açısından önemlidir ve ayrıca web sitenizde hypertext bağlantılar kurmaya yardımcı olurlar. Kısa, şekilsel - organize belgeler bölümleri kullanıcıları sayfaya daha fazla çeker.

Web Tasarımda Dikkat Edilecek Hususlar Eğer okuyucu için temel tarama yapısına uygun bir site isteniyorsanız, belgeler; Uygun bölümlere ayrılmalı, Önem ve genelliğe bağlı olarak bir hiyerarşi içinde olmalı, Hiyerarşi bölümler arasındaki ilişkiyi yapılandırmada kullanılmalı, Sistemin işlevsel ve estetik başarısını analiz etmelidir. Şekil-WEB sitesi sayfa yerleşim taslağı.

Web Tasarımda Dikkat Edilecek Hususlar Sayfanızda ilk olarak öncelikli bilgileri sunarsanız, en önemliden veya en genel başlıklardan daha ilgili veya daha ayrıntılı bilgilere doğru bir hiyerarşik düzen kurabilirsiniz. Web’ de hiyerarşik organizasyonlar gereklidir. Çünkü çoğu ana sayfa ve bağlantı şemaları hiyerarşik bir düzene sahiptirler. Aşağıdaki sayfada da görüldüğü gibi ana sayfayı alt sayfalar ve içeriksel sayfalar izler Şekil- Ana sayfanın içeriğinin hiyerarşik düzeni

Sayfalar Arası İlişkiler Mantıklı bir site organizasyonu, kullanıcıların aradıklarını nerede bulabilecekleri hakkında doğru yönlendirmeler yapar. Eğer ilişkiler mantıklı yapılar halinde kurulmazsanız sayfa okuyucunu aklını karıştırmaktan başka işe yaramaz Şekil- . Düzensiz bir site örneği

Sayfalar Arası İlişkiler Çok geniş: Esas menü, birbirleriyle ilgisiz çok yayılmış,tekdüze bir yapı gösteriyor. Şekil- Geniş alana yayılmış site örneği

Sayfalar Arası İlişkiler Çok derin: Menü sayfaları gereksizce derinlere doğru uzanıyor, fakat içerik oldukça az. Yani başı ve sonu gelen sayfalar var. Sayfalar hem çok ince hem de çok uzun görünüyor. Şekil- Çok derin alana yayılmış site örneği

Sayfalar Arası İlişkiler İyi dengelenmiş: İyi dengelenmiş hiyerarşik bir ağaç yapısı oluşturmada amaç, okuyucunun sayfa yapısını kolay idrak edebilmesini ve sayfalar arasında kaybolmamasını sağlamaktır. Şekil- Dengeli yapıda bir site örneği

Sayfalar Arası İlişkiler Şekil- WEB sayfasına iyi bir örnek

Sayfalar Arası İlişkiler Bu örnekte; sayfanın alt ve üst kısmında görüntü haritaları kullanılmıştır. Sayfanın hangi siteye ait olduğu, belgelerin içeriği, konu başlıkları gibi temel bilgiler burada sabit bir düzen içinde verilerek aynı zamanda "ileri" "geri" düğmeleri eklenerek bir önceki ve bir sonraki sayfaya geçiş kolaylığı sağlanmıştır. Sayfanın sol yanında ayrılan bölüm ana sayfaya ve konunun alt başlıklarına bağlantı için kullanılmıştır. Okuyuculara sunulan bilgi bu sınırlandırma içinde, düzgün ve orantılı başlıklar altında metin ve grafik olarak gösterilmiştir. Belgelerin bütün sayfaları bu standart formata uygun halde hazırlanmıştır. Böylece, kullanıcılar ilk sayfayı inceledikten sonra diğer sayfalarda aradıkları bilgilerin nerede olduğunu tahmin edebileceklerdir

Bir Sayfa Hazırlanırken Dikkat Edilecekler Sayfada Grafik Kullanılırken Dikkat Edilecekler Grafiklerin güvenli bir şekilde görüldüğü alan, iki ayrıntıya göre belirlenir: 1. Günümüzde kullanılan en düşük ekran çözünürlüğü. 2. Web sayfalarının yazdırılacağı kağıdın boyutu. Ekran Boyutu Akademik olarak ve iş ortamında en çok kullanılan ekranlar 14- 17 inch’ lik olanlardır ve bu nispeten küçük olan ekranlar 640X480 veya 1024x780 nokta ekran çözünürlüğüne sahiptir. Bu ölçüleri aşan web grafiklerini görebilmek için kullanıcılar ekrandaki görüntüyü aşağı ve yana kaydırmak zorunda kalacaklardır.

Bir Sayfa Hazırlanırken Dikkat Edilecekler Sayfanın Yazdırılabilirliliği En küçük ekranlarda bile görülebilen grafikler bazen yazdırılma sırasında standard A-4 sayfasını aşmaktadırlar. Özellikle uzun metinler halinde hazırlanan web sayfalarının yazdırılabilirliliğine çok dikkat edilmelidir. Birçok okuyucu ekrandan okumak yerine bu sayfaları yazdırmayı tercih eder ve sayfalar fazla geniş hazırlanmış ise artan kelimeler yazdırılamayacaktır. Browser Yazılımlarına Dikkat Dünya çapında en çok kullanılan browser yazılımları Microsoft Internet Explorer ve Netscape Communicator yazılımlarıdır. Sitenizi oluştururken mutlaka ve mutlaka her ikisinde de test edin. Mümkünse bu testi sabit diskinizde değil siteniz server bilgisayarına yüklendikten sonra ağ üzerinden yapın.

Bir Sayfa Hazırlanırken Dikkat Edilecekler Sütunlar Bir gazete veya dergi satın aldığınızda yazıların belirli sütunlar halinde yerleştirildiğini görürsünüz. Asla ve asla yazılar dümdüz bir sıra halinde yazılmaz. Bunun amacı yazıların daha kolay okunabilir hale getirmek. insan gözü ancak 5 veya 6 kelimelik sütunları problemsiz olarak takip edebilir. Daha uzun yazları okurken, özellikle bir alt satıra geçerken yazının hakimiyeti kaybedilebilir ve zamanla göz yorulur. Bunun için sayfalarınıza metinler yerleştirirken mümkün olduğunca daha ince sütunlar kullanmaya çalışın. Böylece daha hoş görünümlü bir sayfa elde edersiniz. Aynı zamanda ziyarete gelenler sayfaları daha rahat okuyabilirler Paragraflar Uzun yazıları paragraflara ayırmak, onları çekici hale getirmenin bir yolu. Paragrafsız uzun yazılar, hem görünüm açısından kötü olur hem de okuyucu yazıyı takip etmekte zorlanır. Paragraflar ayrıca değişik konuları birbirinden ayırmak içinde iyi bir yöntemdir

Bir Sayfa Hazırlanırken Dikkat Edilecekler Klişe Görüntüler Web üzerindeki binlerce URL artık birbirinin kopyası haline geldi. Aynı zemin desenleri, butonlar, javascriptler vs. her sayfanın birbirine benzemesine sebep oluyor. Öncelikle kendinize özgü bir şeyler yapmalısınız. Eğer bir sayfada butonların yerleşimini beğendiyseniz ve bunu kullanmak istiyorsanız en azından butonlar oldukça farklı bir şekilde kendiniz dizayn etmeye çalışın. Çalışma Ortamı Bilgisayarınızla çalışırken hangi editörü kullanıyor olursanız olun birkaç yardımcı programa ihtiyaç duyacaksınız. Bu programların kısa yollarını kolay ulaşabileceğiniz yerlerde bulunsun.