Web Tasarımı.

Web Tasarımı

Web sayfasının yapısı Web sayfası <html> etiketi ile başlar ve </html> ile biter. İki bölümden oluşur. <head> …. </head>: Bu bölümde sayfa ve sayfayı hazırlayan kişi vb. konularda bilgi verilir. Burada yazdıklarımız sayfanın görünümünü etkiler, ancak sayfada görüntülenmez. Örneğin; <meta http-equiv="Content-Type" content="text/html; charset=iso "> koduyla sayfasının karakter kodlamasının hangi dil ile olacağını belirtmiş oluruz. (“iso ” ve “windows-1254” sayfanın Türkçe karakterlerle görüntüleneceğini belirtir.) <title>…</title> etiketi de web tarayıcısının başlık çubuğunda görüntülenecek metni belirler. <meta name="author" content="Hazırlayan"> Sayfayı hazırlayan veya sahibi olan kişi veya kuruluşu belirtir. <body>…</body>: Sayfada görüntülenecek metin, resim, tablo vb. nesnelerin bulunduğu bölümdür.

Basit bir web sayfasının görünümü şöyledir:
<html> <head> …. (Sayfayı tanımlayan kodlar.) </head> <body> … (Sayfanın içeriği: metin, resim vb.) </body> </html>

HTML HTML HyperText Markup Language kelimelerinin ilk harflerinden oluşur. Hipermetin İşaretleme Dili diye Türkçeleştirilebilir. HTML de web tarayıcısına tag (etiket) denilen komutlarla istekler bildirilir. Etiketlerle verilen komutlar web tarayıcısı tarafından yorumlanır ve görüntü oluşturulur. Etiketlerin yapısı şöyledir: <etiket özellik1(Parametre1)= "değer" özellik2="değer" özellik3="değer">… </etiket> Etiketler genelde <etiket …> şeklinde açılıp </etiket> şeklinde kapatılır. Ancak kapatılmayan etiketler de vardır. Etiketleri bir örnekle açıklayacak olursak: <otomobil marka="tofaş" model="dogan" uretim_tarihi="2003" renk="beyaz"> Bunlarla “2003 yılında üretilmiş, doğan model beyaz renkli tofaş bir otomobil istiyorum” demiş oluruz. Gerçek bir örnek verecek olursak: < font face="verdana" size="4" color="red" align="center">Paragrafın içerdiği metin</font> Bu kodlarla da şunu demiş oluruz: “Yazacağım metnin yazıtipi verdana , boyutu 4, rengi kırmızı olsun ve ortaya hizalansın.”

Başlıca HTML etiketleri
Metin Etiketleri 1 b Metni kalın yapar. 2 i Metni italik yapar. 3 strike Metni üstü çizili yapar. 4 u Metni altı çizili yapar. 5 strong 6 font Aldığı face, size, color vb. parametrelerle metnin yazıtipi, boyut, renk gibi özelliklerini belirler. 7 sub Metni alt simge olarak gösterir. 8 sup Metni üst simge olarak gösterir.

Blok Etiketleri 9 blockquote Metnin sol girintisini artırır. 10 center Metni ortalar. 11 div Sayfa içinde ayrı bir katman oluşturur. 12 span Div etiketi gibidir. Ancak div ile oluşturulan katman metni satır olarak alır, span ile ise metin kelime bazında da bölümlere ayrılabilir. 13 p Paragraf oluşturur. 14 h1, h2, h3… Başlık oluşturur.

Liste Etiketleri 15 ol Numaralandırma oluşturur. Bu numaralandırmanın, type parametresini kullanarak A, a, I, i biçimlerinde olması sağlayabiliriz. 16 ul Madde işaretleri oluşturur. 17 li Liste öğelerini belirtir.

Tablo Etiketleri 18 table Tablo oluşturur. 19 tr Tabloya satır ekler. 20 td Tabloya hücre ekler. 21 th Tabloya başlık metni içerecek hücre ekler.

Form Etiketleri 22 form Sayfaya form ekler. 23 input Type parametresine göre tek satırlık metin kutusu, buton, onay kutusu vs. oluşturur. 24 textarea Birden çok satır yazılabilen metin kutusu oluşturur. 25 select Açılır form alanı oluşturur. 26 option Select etiketi ile oluşturulan açılır form alanında seçenekleri belirtir.

Çeşitli Etiketler 27 html Web sayfasının bütününü içine alır. İki bölümden oluşur: head ve body. 28 head Sayfanın dil kodlaması, başlığı gibi özelliklerini belirleyen etiketleri içerir. Burada yazılanlar sayfada görüntülenmez. 29 body Web sayfasının görüntülenen içeriğinin bulunduğu bölümdür. 30 a Başka bir dosyaya link (Köprü) oluşturur. 31 br Boş bir satır oluşturur 32 hr Yatay çizgi oluşturur. 33 script Sayfaya Javascript vb. web programlama dilleri ile yazılan script’leri ekler. 34 style Sayfaya Cascading Style Sheet komutlarını ekler 35 title Web tarayıcısının başlık çubuğunda görüntülenecek olan sayfa başlığını belirtir. 36 img Sayfaya resim ekler.

Örnek Uygulamalar

Metin Biçimlendirme

Yukarıdaki listeyi oluşturmak için aşağıdaki kodlar yazılmalıdır.
Liste Oluşturma Yukarıdaki listeyi oluşturmak için aşağıdaki kodlar yazılmalıdır. Yukarıdaki kodlarda <ol> sıralı, <ul> sırasız bir liste oluşturulacağını belirtir. “type” parametresi ise oluşturulacak listedeki liste belirtecinin ne olacağını (a, A, i, I, kare, içi dolu daire, içi boş daire vb.) belirler. <li> listeye öğeler ekler.)

Tablo Oluşturma Bir haftalık ders programı hazırlayacağımızı varsayalım. Tablomuzda 6 sütun ve 7 satır bulunmaktadır.

Sırasıyla şunlar yapılmalıdır:
<table> yazarak bir tablo oluşturulacağı belirtilir. <tr> ile birinci satır oluşturulur. <td> ile birinci hücre oluşturulur ve </td> ile kapatılır. Yukarıdaki tabloya bakarsak her satırda altı hücre olduğu görülür. Bu nedenle yine aynı şekilde diğer 5 hücre oluşturulur. (Tablonun doğru görüntülenebilmesi için hücreler boş bırakılacak olsa bile boşlukla doldurulmalıdır. Boşluğun karşılığı ise “ ” dir.) Birinci satır bittiğinden </tr> ile kapatılır. Bu durumda görünüm şöyle olur:

2, 3 ve 4. maddedekiler altı defa tekrarlanarak diğer satırlar oluşturulur.
Tablo </table> ile kapatılır. Artık içlerini doldurabiliriz. İlk satırın 2-6 arası hücrelere günleri yazabiliriz. 2-7 arası satırların ilk hücrelerine de sayıları yazalım. Görünümün yukarıdaki örnek gibi olması için tablonun özellikleri üzerinde değişiklik yapmamız gerekir. <table border="1" bordercolor="black" cellspacing="0" cellpadding="0" width="500"> diyerek tabloya siyah renkli kenar çizgisi verelim. Hücre çizgileri arasındaki boşluk 0, hücre ile içindeki nesneler arasındaki boşluk da 1 olsun. Genişliğini de 500 piksel olarak belirtelim. Hücreler için genişlik belirtmediğimizden sütunların genişlikleri farklı görünecektir. “Width” etiketiyle hücrelere uygun genişlikleri verdiğimizde istediğimiz görüntüye ulaşabiliriz.

Resim Ekleme "images" klasörü içerisinde resim1.jpg adlı dosyayı sayfamıza eklemek istediğimizi varsayalım. Bunun için aşağıdaki kod yazılmalıdır: <img src="images/resim1.jpg" width="200" height="150" hspace="10" vspace="10" border="2" align="left"> (Yukarıdaki kodda “src” klasörün adresini, “width” genişliğini, “height” yüksekliğini, “hspace” resim ile çevresindeki nesneler arasında bırakılacak yatay boşluğu, “vspace” resim ile çevresindeki nesneler arasında bırakılacak dikey boşluğu, “border” resme verilecek kenar çizgisinin kalınlığını, “align” resmin sayfada hizalanacağı konumu belirtmektedir.)

Sonuç:

Çerçeve Oluşturma Yukarıdaki görüntüyü oluşturmak için aşağıdaki kodlar kullanılmalıdır:

CSS CSS web sayfasını biçimlendirmede HTML den daha geniş imkânlar sunar. Örneğin div etiketiyle bir katman oluşturabiliriz ama hizalama dışında başka bir özelliğini değiştiremeyiz. Ancak CSS ile katmanın sayfa içindeki konumu, arka plan rengi, kenarlık tipi, yazı rengi, kanlınlığı vb. pek çok özelliğini belirleyebiliriz.

CSS kullanım şekilleri
Style komutlarını üç yerde tutabiliriz: Ayrı bir metin dosyası olarak: Bu durumda head bölümüne CSS dosyasına bağlantı kurulur. (<link type="text/css" rel="stylesheet" href="style_dosyasi.css"> gibi) CSS kodlarını doğrudan head bölümüne yerleştirebiliriz. Örnek: <html> <head> <style> P {font-family:arial; font-size:12px;} </style> </head> .... CSS kodlarını HTML etiketlerinin içine yerleştirebiliriz. Örnek: <p style="font-family:arial; font-size:12px;font-color:black;">...</p>

Style komutları sadece bir yerde kullanılacaksa doğrudan etiket içinde kullanılması uygun olur. Ancak pek çok yerde aynı style özellikleri kullanılacaksa, tekrardan kaçınmak için şu metodlar kullanılabilir. Sınıf (class) tanımlanabilir: Style dosyasında etiket isminden ve . dan sonra sınıf adı yazılır ve {} işaretleri arasına style komutları yazılır. span.vurgulu {color:red; background-color:yellow;} Sayfa içinde kullanımı da aşağıdaki gibi olur: <p>Cümlede <span class="vurgulu">burası</span> çok önemli.</p> Görünüm aşağıdaki gibi olur.

id tanımlanabilir: Yukarıdaki gibidir. Ancak
id tanımlanabilir: Yukarıdaki gibidir. Ancak . yerine # kullanılır ve bir etiket ile ilişkilendirilmesi gerekmez. #vurgulu {color:red; background-color:yellow;} <p>Cümlede <span id="vurgulu">burası</span> çok önemli.</p> Bir etikettin tümü aynı özelliklere sahip olsun istiyorsak id ve class kullanmadan doğrudan etiketi yazabiliriz. b {font-family: arial; font-size: 9pt; font-weight: bold; color: blue;} Bu durumda bütün <b></b> etiketi içerisindeki metinlerin yazıtipi mavi, boyutu 9 punto, kalın ve rengi mavi olacaktır.

Başlıca CSS Komutları

BİÇİMLENDİRME font-family Tahoma, Comic Sans MS vs. Yazı tipini belirler.(Arial , Verdana gibi.) font-style normal italic oblique Yazının normal veya sağa eğik olmasını sağlar. font-variant normal small-caps Yazının, yazıldığı gibi veya tümünün büyük harflerden oluşmuş gibi görünmesini sağlar. İkinci durumda metnin ilk harfi de boyut olarak büyük gözükür. font-weight normal bold bolder lighter Yazının kalınlık-inceliğini belirler. font-size absolute-size (xx-small | x-small | small | medium | large | x-large | xx-large) relative-size (larger | smaller) px , pt, % Yazının büyüklüğünü

RENK VE ARKAPLAN Color Renk adı veya RGB değeri (red veya #FF0000 gibi) Renk Background Color Renk adı | RGB değeri (red veya #FF0000 gibi) | transparent Arka plan rengi Background Image url(images/resimadi.gif) Arka plana yerleştirilecek resmin adresi Background Repeat repeat | repeat-x | repeat-y | no-repeat Arka plan resminin hangi yönde tekrarlanacağını belirler. Background Attachment scroll | fixed Sayfa kaydırma çubuğuyla hareket ettirildiğinde zeminin de hareket edip etmeyeceğini belirler. Background Position yüzde | boyut | top | center | bottom| left | center | right Zemindeki resmin sayfa üzerinde istenilen yere yerleştirilmesini sağlar.

Örnek Uygulamalar

Alt çizgisi olmayan linkler
a:link { font-family:tahoma; font-size:9pt; color:blue; text-decoration:none; } Sayfamdaki linklerin Yazıtipi tahoma Yazı boyutu 9 punto Rengi mavi olsun ve Altı çizili de olmasın. a:hover{ font-family:tahoma; font-size:9pt; color:red; text-decoration:none; } Üzerine gelindiğinde linklerin Rengi kırmızı olsun ve a:visited{ font-family:tahoma; font-size:9pt; color:grey; text-decoration:underline; } Ziyaret edilen linklerin ise Rengi gri olsun ve Altı da çizili olsun.

Katman

AÇIKLAMA: Burada: Position: Katmanın yerinin neye göre belirleneceğini (absolute, pencere esas alınarak belirlensin), Top: Pencereye göre kaç piksel aşağıda olacağını, Left: Pencereye göre kaç piksel solda olacağını, Width: Katmanın genişliğini, Height: Katmanın yüksekliğini, Background-color: Arkaplan rengini, Overflow: Taşan metnin durumunun ne olacağını (hidden, gizli kalsın, gösterilmesin), Z-index: Üstüste geldiğinde hangi sıra ile yerleştirileceğini (1. katmana 1 değeri verilmiştir, dolayısıyla en altta o gösterilecektir), Padding: Katmanın kenar çizgileri ile içindeki nesneler arasında bırakılacak boşluğu, Border: Kenar çizgilerinin kalınlık, kenarlık türü ve rengini belirtmektedir.

AÇIKLAMA: "list-style-image" parametresi listeye HTML ile veremeyeceğimiz bir özellik kazandırmakta ve liste simgesi olarak bir resmi kullanmamızı sağlamaktadır. "list-style" parametresi için verilebilecek alternatif değerler ise şunlardır: disc (Liste biçiminin disk (içi dolu daire) şeklinde olmasını sağlar.) circle (Liste biçiminin çember şeklinde olmasını sağlar.) square (Liste biçiminin kare olmasını sağlar.) decimal (Liste biçiminin rakamlardan oluşmasını sağlar.) lower-roman (Liste biçiminin i,ii,iii gibi küçük roma rakamlarından oluşmasını sağlar.) upper-roman (Liste biçiminin I,II,II gibi büyük roma rakamlarından oluşmasını sağlar.) lower-alpha (Liste biçiminin a,b,c şeklinde küçük harf olmasını sağlar.) upper-alpha (Liste biçiminin A,B,C şeklinde büyük harf olmasını sağlar.) none (Listenin simgesiz olmasını sağlar.)

WEB PROGRAMLAMA DİLLERİ
İnternette yaygın olarak kullanılan iki dil vardır. Javascript ve VBScript. Bunların kullanım alanları da ikiye ayrılabilir: İstemci üzerinde veya sunucu üzerinde çalışmaları. İstemci üzerinde çalıştığında kodlar genelde sayfanın <head> bölümüne <script></script> etiketleri içine yazılır. Sunucu üzerinde çalışmaları ise ASP veya PHP ile olabilir. Örneğin ASP de script kodları <% … %> işaretleri arasına yazılır ve sunucu tarafında çalışarak sonucu sayfa üzerinde istemciye ulaştırır.

WEB TASARIM PROGRAMLARI
Web tasarım programları görsel ve kod tabanlı olarak ayrılabilir. GÖRSEL: WYSIWYG (What you see is what you get / Ne görürseniz onu alırsınız) olarak nitelendirilen bu tür programlarda kullanıcı kendisi HTML kodu yazmaz, sayfa web browser’daki gibi görüntülenir, kullanıcılar Word’de yazı yazar gibi sayfayı oluştururlar, HTML kodları program tarafından oluşturulur. Bu tür programlara Microsoft Frontpage, Macromedia Dreamweaver vs. örnek verilebilir. (Bu programlar çoğu zaman kod tabanlı programların yeteneklerine de sahip olabilir.)

FrontPage Dreamweaver

KOD TABANLI: Kullanıcının kod yazarak sayfayı oluşturduğu programlardır. Macromedia HomeSite, HotDog Pro vb. Bu tür programlar genelde PHP, ASP, VBScript gibi dilleri otomatik tanırlar ve kod tamamlamayı önerme özelliklerine sahiptirler.

Hotdog Professional Homesite

DREAMWEAVER

Site tanımlamak Site menüsünden New site'ye tıklanır.
Site name başlıklı metin kutusuna sitenin adı yazılır. Local root folder başlıklı metin kutusuna sitenin yolu yazılır. (Bunun için simgesi kullanılabilir.) Default images folder başlıklı metin kutusuna resimlerin konulacağı klasör yazılır. İsteğe bağlı olarak da diğer bölümler doldurulabilir. Bundan sonra oluşturduğumuz her sayfa varsayılan olarak buraya kaydedilir.

Sitenin bulunuduğu klasörün dizin yapısını Window / Files (F8) menüsüne tıklayarak görebiliriz. Böylece istediğimiz dosyaya kolayca ulaşabilir, internete göndermeyi kolaylaştırabilirsiniz. Yeni dosya oluşturmayı da Dosya / New menüsünden veya site haritasına sağ tuş / New File menüsüne tıklayarak yapabiliriz. NOT: Dosyalara isim verirken aşağıdakilere dikkat edilmelidir: Dosyanın adı ve uzantısı küçük harflerden oluşmalı ve link verirken aynen, olduğu gibi yazılmalıdır. (resim.jpg ile resim.JPG linux server'lar için farklı dosyalardır ve olduğundan farklı yazıldığında doğru görüntülenmez.) Türkçe karakterler kullanılmamalıdır. (ı, İ, ş, ç, ğ, ö, ü) Kelimeler arasında boşluk birakılmamalıdır. (Boşlukların alt tire ile doldurulması gelenek halini almıştır. "resim adi.jpg" yerine "resim_adi.jpg" yazılabilir.)

Dökuman özelliklerini ayarlamak
Oluşturulan sayfanın özelliklerini değiştirmek için Modify/Page Properties (Ctrl+J) kullanılabilir.

Appearance bölümünde şu özellikleri değiştirebiliriz:
Page Font: Sayfada kullanılacak yazıtipi. Size: Yazının boyutu. Text Color: Yazı rengi. Background color: Arkaplan rengi. Background image: Arkaplana yerleştirilecek resim. Repeat: Arkaplan resminin hangi yönde tekrarlanacağı. Left Margin: Sayfa içindeki nesnelerin sol kenara uzaklığı. Right Margin: Sayfa içindeki nesnelerin sağl kenara uzaklığı. Top Margin: Sayfa içindeki nesnelerin üst kenara uzaklığı. Bottom Margin: Sayfa içindeki nesnelerin alt kenara uzaklığı.

Links bölümünde şu özellikleri değiştirebiliriz:
Link font: Sayfadaki köprülerin yazıtipi. Size: Sayfadaki köprülerin yazı boyutu. Link color: Sayfadaki köprülerin rengi. Rollover links: Fare ile üzerine gelindiğinde köprünün yazı rengi. Visited links: Ziyaret edilen sayfaları ait köprünün yazı rengi. Active links: Üzerine tıklandığında köprünün yazı rengi. Underline style: Köprünün alt çizgisinin olup olmayacağı.

Headings bölümünde başlıkların yazıtipi, boyut ve renkleri belirlenir.

Title/Encoding bölümünde şu özellikleri değiştirebiliriz:
Title: Sayfanın başlık çubuğunda görüntelecek metin. Document Type: Belge türü. Encoding: Dil kodlaması.

Tracing Image bölümünde şu özellikleri değiştirebiliriz:
Tracing image: Sadece dreamweaver içerisinde görünen ve tarayıcı içerisinde görünmeyen bir resim ekler. Transparancey: Bu resmin saydamlık ayarlarını yapar.

Metin Biçimlendirme Seçili metnin özelliklerini değiştirmek için Window/Properties (Ctrl+F3) kullanılır. Burada şu özellikler değiştirilebilir: Format: Seçili metnin başlık veya normal paragraf olacağı. Font: Yazıtipi Style: Önceden style tanımlanmışsa seçili metnin id'si veya mensup olduğu sınıf (class). Size: Boyutu. Link: Metne verilecek köprü. (Köprü oluşturmayı metni seçtikten sonra simgesine tıklayıp hedef dosyayı göstererek veya simgesini Files panelindeki hedef dosya üzerine sürükleyip bırakarak yapabiliriz.) Target: Hedef sayfanın ne şekilde açılacağı. (Yeni sayfada, ana çerçevede, kendisinin bulunduğu çerçevede vs.) : Metin hizalama (Sol, orta, sağ, iki yana yaslı) : Madde işareti, numaralandırma, girinti artır ve girinti azalt. : Kalın, italik. :Yazı rengi.

Çerçeve Çerçeveler: Çerçeveler aynı kodları her sayfada tekrarlamaktan bizi kurtarır. Çerçeve sayfası gerçekte iki bölümden oluşur. Ana sayfa ve çerçeveler. Ana sayfa çerçeve bilgilerinin tutulduğu sayfadır. Çerçeve sayısı kadar bölümlere ayrılır ve her bölümde ilgili sayfa gösterilir. Çerçeve Oluşturmak: Çerçeve oluşturmak için File/New/Framesets menüsünü kullanabiliriz. Açılan pencerede nasıl bir çerçeve oluşturabileceğimize yönelik bazı kalıplar sunulur. Burdan istediğimizi seçerek çerçevellerin oluşmasını sağlayabiliriz.

Var olan bir sayafaya çerçeve eklemek için ise Insert Araç Çubuğunda Layout seçilir. simgesine tıklanarak istenilen çerçeve seçilir.

Çerçeveler Üzerinde Düzenleme Yapmak:
Oluşturulan çerçevenin genişliklerini değiştirmek için çerçeve çizgilerini istediğimiz yöne çekebiliriz. ( ) Çerçevelerle ilgili ayrıntılı ayarlar için Window/Frames menüsünde açabileceğimiz Frames Paneli kullanılabilir.

Panel üzerinde hangi çerçeve üzerine tıklarsak Properties panelinde o çerçeve ile ilgili ayarlar açılacaktır. Eğer görünmeyen ana sayfa (frameset) üzerinde düzenleme yapmak istiyorsak dış çizgiye tıklamamız gerekir. Aynı işlem düzenleme yaptığımız alanda da yapılabilir.

Ana çerçeve seçili olduğunda Properties panelinde yapılabilecek düzenlemeler şunlardır:
Border: Kenarlığın olup olmayacağı (Yes, No, Default) Border width: Kenar kalınlığı Border color: Kenarlık rengi Row: Üst çerçevenin yüksekliği (Örnekte ekranın 80 pikselini üst çerçeve, geri kalanını da alt çerçeveler kaplamaktadır.)

Diğer çerçevelerden herhangi birisini seçtiğimizde yapabileceğimiz düzenlemeler de şunlardır:
Src: Çerçevenin adresi. Scroll: Kaydırmanın olup olmayacağı. (Yes, No, Auto, Default) Yes seçili olduğunda kaydırma çubukları her zaman görüntülenir, No seçili olduğunda kaydırma çubukları hiç bir zaman görüntülenmez, Auto olduğunda içerik taşarsa kaydırma çubuğu görüntülenir, yoksa görüntülenmez.) Borders: Kenar çizgisisinin olup olmayacağı (Default, Yes, No). Border color: Kenar çizginin rengi. No resize: Boyutlandırmanın yapılıp yapılamayacağı. Margin width: Çerçeve içindeki nesnelerin sol kenara uzaklığı. Margin height: Çerçeve içindeki nesnelerin üst kenara uzaklığı.

NOT: Herhangi bir çerçevede oluşturulan köprünün belirli bir çerçevede açılmasını istiyorsak iki yol tutabiliriz: Köprü seçili durumdayken Properties panelinde, Target başlıklı açılır kutudan hedef çerçevenin adı seçilir. Sayfanın <head>...</head> bölümüne <base target="cerceveadi"> kodunu eklemek. Böylece aksi belirtilmedikçe varsayılan hedef çerçevenin hangisi olacağı belirtilmiş olur. Bun da Insert/Tag/Page Composition/Base yolu takip edilerek yapılabilir.

Nesne eklemek

Liste Üç tür listeden söz edilebilir: Sıralı Liste (Numaralandırma)
Sırasız Liste (Madde İşareti) Tanımlama Listesi.

Sıralı Liste (Numaralandırma)
Sıralı liste oluşturmak için Text/List/Ordered List menüsü veya Properties panelindeki ( ) simgesi kullanılabilir. Alt maddeler oluşturmak için ( ) simgesine tıklanır. Yeniden üst maddeden devam etmek için de ( ) simgesine tıklarız. Oluşturulan listenin özelliklerini Window/Tag Inspector panelinden değiştirebiliriz. Properties panelinin üzerinde, üzerinde çalıştığımız metnin etiketlri sıralanır. Buradan sıralı listeyi ifade eden <ol> etiketine tıkladığımızda Tag Inspector panelinde liste ile ilgili ayarlara ulaşırız.

Compact: Listenin daha az yer kaplamasını sağlar.
Type: Listenin türünü belirler. (A, a, I, i, 1) Start: Listenin hangi karakterden başlayacağı. <li> etiketini seçili hale getirdiğimizde Tag Inspector panelinde seçili liste öğesi ile ilgili ayarlara ulaşırız.

<li> etiketini seçili hale getirdiğimizde Tag Inspector panelinde seçili liste öğesi ile ilgili ayarlara ulaşırız.

Sırasız Liste (Madde İşareti)
Madde İşareti oluşturmak için Text/List/Unordered List menüsü veya Properties panelindeki simgesi kullanılabilir. <ul> etiketine tıkladığımızda Tag Inspector panelinde liste ile ilgili ayarlara ulaşırız. Type parametresi; circle ( ), disc ( ), square ( ) değerlerini alabilir.

Tanımlama Listesi Bunun için Text/List/Definition menüsü kullanılabilir. Bu liste türü örneğin bir kavramı açıklarken kullanılabilir. Açıklanacak kavramı yazdıktan sonra Enter tuşuna bastığımızda metin bir miktar sağa kaydırılacak ve tanım için bir bölüm oluşturulacaktır. Yeniden Enter tuşuna bastığımızda ise metin yeni tanım için sola kaydırılacaktır.

Tablo Tablo eklemek için Insert/Table menüsünü veya ( ) simgesini kullanabiliriz.

Burada belirleyebileceğimiz tablo özellikleri şunlardır:
Rows: Satır sayısı. Columns: Sütun sayısı. Table width: Tablonun piksel veya yüzde olarak genişliği. Border thickness: Kenarlık kalınlığı. Cell padding: Hücrenin içindeki nesnelerle hücre çizgisi arasında bırakılacak boşluk. Cell spacing: Hücre çizgileri arasında bırakılacak boşluk. Header: Başlık metni içeren hücrelerin hangileri olacağı. Burada belirlenen hücreler varsayılan olarak kalın ve ortaya hizalanmış olarak görüntülenir. Caption: Başlık. Buraya yazılan metin tablonun üstünde görünür. Align caption: Başlığın nereye hizalanacağı. Summary: Özet.

Tablo üzerinde ayrıntılı ayarlar için Properties'i kullanabiliriz.
Tabloda herhangi bir hücrenin içine tıkladığımızda Properties panelinin üzerinde; seçili hücre, hücrenin bulunduğu satır ve tablonun kodları görünür. Buradaki <table> komutuna tıklayarak tabloyu seçili hale getirdiğimizde yeni özelliklere ulaşabilir, yukarıdakilerden farklı olarak: Tabloya sınıf (class) veya id atayabilir, Tablonun sayfada nasıl hizalanacağını (Align), Arkaplan rengini (Bg color), Arkaplana yerleştirilecek resmi ( Bg Image) Kenarlık rengini (Brdr color) belirleyebiliriz.

Soldaki simgeler ile de önceden belirlenmiş satır yükseklik ve sütun genişlik değerlerini temizleyebilir, piksel ile belirlenen değerleri yüzdeye, yüzde ile belirlenen değerleri piksele çevirebiliriz.

İstediğimiz hücreyi seçili hale getirdiğimizde ise Properties panelinin görünümü yukarıdaki gibi olur. Burada: Horz: Yatay hizalama, Vert: Dikey hizalama, W: Hücrenin genişliği, H: Hücrenin yüksekiği, No wrap: Metin kaydırma yapılıp yapılmayacağı, Header: Hücrenin başlık hücresi olup olmaycağı, Bg (Üstte): Arkaplan resmi, Bg (Altta): Arkaplan rengi, Brdr: Kenar çizgilerinin rengi belirlenebilir. simgesi ile seçili hücreler birleştirilebilir (veya sağ tuş/Table/Merge Cells ile), simgesi ile de hücre sütun veya satırlara bölünebilir (veya sağ tuş/Table/Split Cells ile).

NOT: Commands/Format Table ile otomatik tablo biçimi uygulayabilirsiniz.

Resim Sayfamıza resim eklemek için Insert/Image(Ctrl+Alt+I) veya Common araç çubuğundaki simgesini ( ) kullanabiliriz. Eklenen resmin özelliklerin değiştirmek için resme tıklayarak seçili hale getirmemiz gerekir. Bu durumda Properties paneli açılacaktır.

Burada resimle ilgili şu değişiklikler yapılabilir.
Soldaki başlıksız ilk metin kutusu resme isim vermek için kullanılır. W: Resmin genişliği. H: Resmin yüksekliği. Src: Resmin adresi. Link: Resme köprü verilecekse hedef dosyanın adresi. Alt: Fare ile resmin üzerine gelindiğinde görüntülenecek metin. Class: Resmin style'de tanımlanan sınıfı. Edit ( ) : Burada sırasıyla; seçili resmi Fireworks ile düzenle, Fireworks ile optimize et, Kırp, Yeniden örneklendir, Parlaklık ve karşıtlık, Keskinleştirme işlemleri yapılabilir. V Space: Resmin sağ ve sol kenarlarıyla çevresindeki nesneler uzaklığı. H Space: Resmin üst ve alt kenarlarıyla çevresindeki nesneler uzaklığı. Target: Resme link verilmişse açılacak sayfanın ne şekilde açılacağı (Yeni pencerede vs.) Low Src: Resim yüklenene kadar yerine konacak küçük resim. Border: Resmin kenar çizgisinin kalınlığı. Align: Resmin nereye hizalanacağı (Sola, sağa, üste, alta, ortaya vb.) ( ): Resmin nereye hizalanacağı. (Sola, ortaya, sağa. Bunun yukarıdakinden farkı burada metin kaydırma yapılmamasıdır.) Map: Resmi sanal parçalara bölerek herbiri için ayrı link verme vb. işler için kullanılır.

Köprü Linkleri (köprü) dört gruba ayırabiliriz:
Sitemizdeki başka bir dosyaya oluşturulan linkler. Aynı sayfa içinde başka bir satıra oluşturulan linkler. Sitemizin dışındaki başka bir web adresine oluşturulan linkler. Mail gönderilmesi için oluşturulan linkler. Sitemizdeki başka bir dosyaya köprü oluşturmak: Metin veya resim seçilir, Properties panelinde Link başlıklı metin kutusunda hedef dosya belirtilir. (Köprü oluşturmayı simgesini Files panelindeki hedef dosya üzerine sürükleyip bırakarak ya da simgesine tıklayıp hedef dosyayı seçerek de yapabiliriz.)

Aynı sayfa içinde başka bir satıra köprü oluşturmak:
Bunun için önce köpriye tıklandığında gidilecek satıra yer işareti olurturmamız gerekir. Hedef satıra gidip, Common araç çubuğundaki simgesine tıklayarak çıkan iletişim kutusunda işarete bir isim verdiğimizde imlecin bulunduğu yerde bir yer işareti oluşturmuş oluruz. Bundan sonra köprü verilecek metni seçerek Properties panelinde Link başlıklı metin kutusuna # işaretinden sonra, yer işaretine verdiğimiz ismi yazarız. (Köprü oluşturmayı simgesini yer işareti üzerinde sürükleyip bırakarak da yapabiliriz.) Sitemizin dışındaki başka bir web adresine köprü oluşturmak: Metin veya resim seçilir, Properties panelinde Link başlıklı metin kutusunda hedef dosya yada web sitesinin adresi belirtilir.

Mail gönderilmesi için köprü oluşturmak:
Metin veya resim seçilir, Properties panelinde Link başlıklı metin kutusuna başına "mailto:" getirilerek hedef mail adresi yazılır. NOTLAR: Başka bir dosyaya link oluşturmayı Common araç çubuğundaki simgesine tıklayarak da yapabiliriz. Burada text köprü oluşturulacak metni; link, hedef dosyayı; target, hedef dosyanın nerede açılacağını; title, fare ile üzerine geldiğimizde görüntülenecek metni; Access Key, alt+klavyeden bir tuş'a basılıp enter'a basıldığında bizi hedef dosyaya götürecek kısayol harfini; Tab index, tab tuşuna ardarda bastığımızda kaçıncı sırada seçili köprüye odaklanılacağını belirler.

Mail göndermek için köprü oluşturmayı Common araç çubuğundaki simgesine tıklayarak da yapabiliriz.
Target parametresinin beş değeri vardır: _blank: Hedef dosyayı yeni bir pencerede açar. _parent: Sayfa çerçevelerden oluşuyorsa, hedef dosyanın herhangi bir çerçevede değil ana pencerede açılmasını sağlar. _self: Sayfa çerçevelerden oluşuyorsa, hedef dosyanın köprünün bulunduğu çerçevede açılmasını sağlar. _top: Yer işareti oluşturmadan sayfayı, sayfanın en üstüne kaydırmayı sağlar. _cerceveadi: Sayfa çerçevelerden oluşuyorsa, hedef dosyanın adı verilen çerçevede açılmasını sağlar. ("cerceveadi", çerçeve oluştururken, çerçeveye verdiğimiz isimdir.)

Hedef dosyayı gösterirken adres göstermeyi iki şekilde yapabiliriz: Mutlak ve göreceli. Yukarıdaki köprüde hedef sayfanın tam adresi verilmiştir. Yukarıdaki köprüde ise hedef sayfanın adresi göreceli olarak verilmiştir. Yukarıdaki köprü ile browser'a şu anlatılmaktadır: Açılacak hedef dosya, şu an açık olan dosyanın bulunduğu yerde bulunan "dosyalar" klasörünün içindeki "hedefdosya.htm" adlı dosyadır. "../" ise bir üst klasörü ifade eder. "../dosyalar/hedefdosya.htm" anlamı ise şudur: Açılacak hedef dosya, şu an açık olan dosyanın bulunduğu yerden bir üst klasörde bulunan "dosyalar" klasörünün içindeki "hedefdosya.htm" adlı dosyadır.

Flash Nesnesi Sayfamıza flash nesnesi eklemek için Insert/Media menüsünü kullanabiliriz. Burada 6 seçenek kullanılabilir: Flash: Sayfaya flash dosyası (*.swf) ekler. Image Viewer: Flash web albümü oluşturur. Flash Text: Sayfaya hazır Macromedia Flash yazısı ekler. Flash Button: Sayfaya hazır Macromedia Flash butonu ekler. Flash Papper: Sayfaya .swf uzantlı flash paper ekler. Flash Video: Sayfaya .flv uzantlı flash video ekler.

Sayfaya flash eklemek Insert/Media/Flash menüsüne tıklanarak .swf uzantılı dosyanın yolu gösterilir. Seçili hale getirdiğimizde açılan Properties panelinden flash nesnesinin özelliklerini değiştirebiliriz. Autoplay: Otomatik oynat. V Space: Flash dosyasının sağ ve sol kenarları ile çevresindeki nesneler arasında bırakılacak boşluk, H Space: Flash dosyasınınüst ve alt kenarları ile çevresindeki nesneler arasında bırakılacak boşluk, Quality: Görüntü kalitesi, Scale: Ölçek, Align: Hizalama, Bg: Arkaplan rengi, Play: Çalıştır W: Genişlik, H: Yükseklik, File: Flash dosyasının (.swf) adresi, Src: Kaynak dosyasının (.fla) adresi. Edit: Düzenle, Reset Size: Boyutu sıfırla, Class: Mensup olduğu style dosyasında tanımlanan sınıf adı. Loop: Bittiğinde yeniden oynat,

Image Viewer Eklemek Insert/Media/Flash Image Viewer menüsüne tıklanır ve dosyaya ad verilerek kaydedileceği yer gösterilir. Sağda otomatik açılan Flash Element panelinde imgURLs ile slayt oluşturulacak resimler gösterilir. Yine aynı panel üzerinde showControls ile ileri, geri vb. kontrol düğmelerinin görüntülenip görüntülenmeyeceği, slideAutoPlay ile otomatik çalıştırılıp çalıştırılmayacağı, slideDelay ile resimler arasındaki gecikme, slideLoop ile gösteri bittiğinde baştan yeniden gösterilip gösterilmeyeceği vb. özellikler belirlenebilir.

Flash Text eklemek Insert/Media/Flash Text menüsüne tıklanır. Çıkan iletişim kutusunda yazı tipi, boyutu, rengi, üzerine gelince alacağı renk, metin, tıklanınca gidilecek hedef dosyanın adresi, hedef dosyanın nerede açılacağı, arkaplan rengi, oluşturulacak dosyanın adı vb. özellikleri belirtiriz. Sonuçta oluşacak flash metin aşağıdaki gibi olacaktır.

Flash Button eklemek Insert/Media/Flash Button menüsüne tıklanır. Burada butonun sitili, buton üzerinde görüntülenecek metin, yazıtipi, yazı boyutu, tıklanınca açılacak hedef dosyanın adresi, hedef dosyanın nerede açılacağı, arkaplan rengi, hangi dosya adıyla kaydedileceği belirtilir.

Flash Paper Eklemek Insert/Media/FlashPaper menüsüne tıklanır. Flash dosyasının adresi, yükseklik ve genişliği belirtilir.

Flash Video Eklemek Insert/Media/Flash Video menüsüne tıklanır. Burada video türü, videonun adresi, kullanılacak skin, videonun genişlik ve yüksekliği, boyutları orjinalinden farklı yazılacaksa boyutların orantılı olarak değiştirilip değiştirilmeyeceği, otomatik çalma, otomatik geri sarma işlemlerinin yapılıp yapılmayacağı belirtilir. NOT: Flv uzantılı flash video oluşturmak için Flash 8 Video Encoder kullanılabilir.

Video Eklemek Sayfamıza avi, mpg vs. uzantılarında video dosyaları eklemek için Insert/Media/Plugin menüsüne tıklanır ve video dosyası seçilerek OK tuşuna basılır. Sayfamızda şeklinde bir simge oluşacaktır. Bu simgesi seçili hale getirerek Properties veya Window/Tag Inspector panelinden özelliklerini belirleyebiliriz. Buradaki değerler sayfaya ses eklemek ile aynı olduğundan parametrelerin açıklamaları için ses ekleme slaydına bakılabilir.

Ses Eklemek Window/Behaviors menüsüne tıklanırve açılan Tag/Behaviors panelinde aşağıdaki işlemler yapılır: + işaretine tıklanır, Açılan menüde Play Sound'da basılır. Browse tuşuna basılarak ses dosyasını adresi belirtilir. Sayfa üzerinde şeklinde bir simge belirecektir. Aslında bu bilgisayarımızda yüklü olan varsayılan video oynatıcıdır (Genelde de Windows Media Player). Bu nesneyi seçili hale getirerek aşağıdaki özelliklerini değiştirebiliriz: W: Nesnenin genişliği. H: Nesnenin yüksekliği (0 değeri nesnenin sayfada görünmemesini sağlayacaktır). Src: Ses dosyasının adresi. Plg URL: İlgili plugin'in download adresi. Align: Hizalama Class: Mensup olduğu, style dosyasında oluşturulan sınıf adı. Play: Çalıştır. Border: Çerçeve kalınlığı.

Parameters tuşuna basarak diğer bazı özelliklere de ulaşabiliriz
Loop: Bitince yeniden başlatılıp başlatılmayacağı. Autostart: Otomatik çalıştırılıp çalıştırılmayacağı. Hidden: Gizli veya görünür olup olmayacağı. Aynı özelliklere Window/Tag Inspector panelinden de ulaşılabilir.

Image Map Eklemek İmage Map, resmin istenilen bölümlerine köprü oluşturmak için kullanılır. Yukarıdaki resimde hangi tuşa basılırsa, o tuşun işlevlerinin anlatıldığı sayfaya gidilsin istediğimizi varsayalım. Resmi seçili hale getirdiğimizde Properties paneli açılacaktır. Image map oluşturmak için buradaki Map bölümünü kullanırız.

Örneğimizde klavye tuşlarına köprü verileceğimiz için biz kare işaretleme aracını kullanacağız. simgesine tıkladıktan sonra resimde istediğimiz bölümü işaretleriz. İşaretlenmiş alana link vermek için, o alanı seçili hale getirdikten sonra Properties panelinde link başlıklı metin kutusuna hedef dosyanın adresi yazılır.

Kayan Yazı Eklemek Insert/Tag menüsüne tıklanır. Çıkan pencerede sırasıyla HTML Tags, Page Elements, Marguee, Insert'e tıklanır. Code görünümünde <marquee></marquee> etiketleri arasına istediğimiz metin yazılır. Özellikleri üzerindeki değişiklikleri, Window/Inpector'a tıklayarak açabileceğimiz Tag paneli üzerinden yapabiliriz. Burada değiştirebileceğimiz bazı özellikler şunlardır: Scrollamount: Yazının bir defada kaç piksel hareket edeceği. ScrollDelay: Yazının her bir hareketi arasında kaç milisaniye bekleneceği. Direction: Kayma yönü (Yukarı, aşağı, sağa, sola) Widht: Kayan yazı bloğunun genişliği. Height : Kayan yazı bloğunun genişliği. Loop: Kaç defa tekrarlanacağı. Varsayılan sürekli tekrarlanmasıdır. Behavior: Hareket şekli (Scroll seçildiğinde yazı, sınırın bir köşesinden belirerir, diğer köşeden kayarak kaybolur, Slide seçildiğinde yazı bir köşeden başlayarak diğer köşede donar, Alternate seçildiğinde ise metin iki köşe arasında gidip gelir.)

CSS Style ile ilgili işlemler için Window/CSS Styles menüsünden CSS panelini kullanabiliriz. Daha önceden style dosyası oluşturulmuşsa, oluşturulan dosyadaki kodların geçerli sayfa için de geçerli olması için sayfamıza eklememiz gerekir. Bunun için simgesine tıklar ve açılan iletişim kutusunda dosyanın adresini belirtiriz.

Yeni bir style dosyası oluşturmak için ise simgesine tıklarız
Yeni bir style dosyası oluşturmak için ise simgesine tıklarız. Bu durumda aşağıdaki iletişim kutusu açılacaktır. Burada "Selector Type" bölümünde class veya id seçicilerinin mi kullanılacağı, yoksa bir etiket için mi style tanımlamaları yapılacağını seçeriz. Class seçildiğinde bizden sınıf adı, Tag seçildiğinde style tanımlamaları yapılacak etiketin adı, Advanced seçildiğinde ise id adı istenir. "Define in" ile ise yeni bir style dosyasında mı yoksa geçerli sayfada mı style tanımlamalarının yapılacağı belirtilir. Yeni style dosyası oluşturmak için (New Style Sheet File) seçilir. Çıkan iletişim kutusunda dosya adı yazılarak kaydedilir.

Sonraki adımda oluşturduğumuz style için ayarları yapabileceğimiz bir pencere açılacaktır.
Burada istediğimiz değişiklikleri yapıp OK tuşuna bastğımızda CSS panelinde oluşturduğumuz tanımlamalar görünecektir.

Artık oluşturduğumuz style tanımlamasını sayfada kullanabiliriz
Artık oluşturduğumuz style tanımlamasını sayfada kullanabiliriz. Bunun için istenilen metin seçilir ve Properties panelindeki "Style" bölümünden class adı seçilir.

Şablon Kaydetme Gerçekte bir site oluştururken ilk yapmamız gereken bir arayüz, örnek bir sayfa hazırlamak olmalıdır. Sayfa tasarımı son haline gelince, yeni sayfalarda da aynı tasarımı kolayca kullanabilmek için şablon olarak kaydetmek gerekir. Ancak bunu yapmadan önce şablon olarak kaydedilecek sayfada düzenlenebilir alanlar oluşturmamız gerekir. Çünkü şablon olarak kaydettiğimizde düzenlenebilir alanlar dışındaki yerler düzenlenemez hale gelir. Bunun için imleci düzenlenebilir alan oluşturmak istediğimiz yere getirir ve Insert/Template Objects/Editable Region menüsüne tıklarız.

Çıkan iletişim kutusunda düzenlenebilir alan alan için bir ad yazarız
Çıkan iletişim kutusunda düzenlenebilir alan alan için bir ad yazarız. Sonuçta sayfada aşağıdaki gibi bir alan oluşacaktır. Örneğimizde düzenlenebilir iki alan oluşturulmuştur: Başlı ve metnin yazılacağı iç tablo. İleride bu şablonu kullanarak bir sayfa oluşturduğumuzda sadece bu iki alan üzerinde değişiklik yapabileceğiz. Oluşturduğumuz şablonu File/Save As Template menüsü kullanarak kaydedebiliriz.

Burada site tanımlanmışsa hangi site için şablon kaydedileceği, açıklaması ve şablonun adı bizden istenir. Daha önceden oluşturulan şablonlar da "Existing templates" bölümünde sıralanır. Kaydedilen şablon sitemizin bulunduğu klasöre Templates klasörü içine kaydedilir. Dreamweaver da ise Window/Assets panelinden şanlonlara ulaşabiliriz. Şablondan yeni bir sayfa oluşturmak için Window/Assets menüsünden ulaşabileceğimiz Assets panelinde gösterilen şablonumuza sağ tıklar ve çıkan menüden "New from Template" e tıklarız.

Resimde görüldüğü gibi düzenlenebilir alanlara istediğimizi yazabiliyoruz, ancak diğer alanlar düzenlenememektedir. NOT: Şablon üzerinde değişiklik yapıldığında o şablona bağlı tüm sayfalarda da aynı değişiklikler yapılır. Oluşturulan düzenlenebilir alnı silmek için Modify/Templates/Remove Template Markup menüsünü kullanabiliriz. Şablona bağlı bir sayfayı şablondan kurtarmak ve tümüyle düzenlenebilir hale getirmek için Modify/Templates/Detach From Template menüsü kullanılır.

KAYNAKLAR: Macromedia Dreamweaver MX 2004, Khristine Annwn Page, Medyasoft, 2006.

Web Tasarımı.

Benzer bir sunumlar

... konulu sunumlar: "Web Tasarımı."— Sunum transkripti:

Benzer bir sunumlar

Proje hakkında

Geri bildirim

Giriş

Sosyal ağ üzerinden giriş yapmak:

Web Tasarımı.

Benzer bir sunumlar

... konulu sunumlar: "Web Tasarımı."— Sunum transkripti:

Benzer bir sunumlar

Proje hakkında

Geri bildirim