Web Tasarımı Dersleri – 4

Volkan Bilgin

16 Aralık 2005

Ana sayfa /

Yazarımız bu bölümde, kod temizleme, Dreamweaver’da eklenti yönetimi, siteyi değişken nesnelerle zenginleştirme, CSS ekleme ve Flash video denetimi konularını ele alıyor.

:: Özel Karakterler Eklemek

Dreamweaver’da klavyemiz ile ekleyemeceğimiz bazı karakterler var. Bu karakterleri ise Insert menüsünden belgemize ekleyebiliriz. (Örn:Yen işareti, Ticari Marka ibaresi vb. gibi) Bu karakterleri belgemize Insert > HTML > Ekleyeceğimiz Karakter yolunu izleyerek ekleyebiliriz.

Eğer istediğiniz simge bu menüde yoksa daha fazla simge görüntülemek için Insert > HTML > Other komutunu tıklayın.

:: Command Recording

Photoshop kullanıcılarının aşina olduğu bir işlem olan Command Recording (Kendi adıyla Actions) Dreamweaver’de de var. Ard arda yapmanız gereken işlemler için bu komutu kullanabilirsiniz. Yapacağımız işlemleri kaydetmek için Commands > Start Recording yönergesini izleyelim. Yapacağınız işlem bitene kadar faremiz ile belgemize tıklamayacağız. Tıkladığımız taktirde kayıt işlemi otomatik olarak iptal edilecektir.

Örneğin bir tabloda satır satır bir metnin rengini değiştirmeniz gerekiyor. Rengini değiştireceğiniz tablonun ilk satırına gelin ve Commands > Start Recording yönergesini izleyerek kayıt işlemini başlatın. Sonra ise kaydedilmesini istediğimiz işlemi yapacağız; metnin rengini Properties panelinden değiştirelim. Yaptığımız işlem kaydedildi. Şimdi ise kayıt işlemini durduralım, bunun için Commands > Stop Recording yönergesini izleyeceğiz. Daha sonra ise bu kaydı uygulayacağımız metni seçelim ve Commands > Play Recorded Command yönergesini izleyelim. Bu yöntemle ard arda yapacağınız işlemleri sıkıcı olmaktan çıkarabilirsiniz.

:: HTML Kod Temizliği

Belgemizi farklı HTML editörleri ile düzenlediğimizde veya Office programlarından birinden HTML çıktısı aldığımız zaman gereksiz bir yığın kod sayfamızda yer alır. Bu kodların okunması da zaman aldığı için sayfamız yüklenirken zaman kaybederiz. Bu sorunu sadece bir komut ile halledebiliriz. Clean Up Word HTML

Bu işlemi daha iyi görmek için Word’de bir tablo oluşturun ve Web Sayfası olarak kaydedin. Clean Up Word HTML komutunu kullandıktan sonraki, kullanmadan önceki hallerini kıyaslayabilmek için bu belgenin bir kopyasını oluşturun. Asıl belgeyi Dreamweaver MX 2004’te açın. Commands > Clean Up Word HTML yönergesini izleyin.

Office sürümünüz seçin ve sekmeleri varsayılan halleriyle bırakarak OK butonuna basın. Son adımda ise belgemizi kaydedelim. Belgemizi ve kopyasını notepad ile açalım. Asıl belgedeki kodun satır sayısına ve kopyadaki kodun satır sayısına bakalım ve de Browserimize yüklediğimiz gereksiz yük görelim. İşlem bittiğinde verilen rapordan da bunu daha rahat görebiliriz.

:: Web Fotoğraf Albümü Oluşturmak

Web sitenize dolaşım çubuğu olan bir fotoğraf albümü yapmak istiyorsunuz ama çok uğraşmak gerektiği için bir türlü eliniz değmedi. Commands > Create Web Photo Album komutu tıklayın, sizinde foto albümünüz olsun 🙂

Photo album title: Albümün adını buraya yazacağız.
Subheading info: Albümün adının altına yazı ekler.
Other info: Buraya ek bilgileri girebilirsiniz.
Source images folder: Büyük resimlerin olduğu klasör.
Destination folder: Resimlerin taşınacağı klasör.
Thumbnail size: Küçük resimlerin boyutları.
Columns: Resimlerin gösterileceği sütun sayısı.
Thumbnail format: Küçük resimlerin biçimi.
Photo format: Büyük resimlerin biçimi.

Show filenames sekmesini işaretlediğimizde resimlerin adları altlarında yazacaktır, Create navigation page for each photo sekmesini işaretlediğimiz taktirde de her resim için ayrı bir gezinme çubuğu oluşturulacaktır.

Ok butonuna bastığımızda foto albüm hazır olacaktır. Vatana millete hayırlı olsun 🙂

:: Extension Manager ve Extension’lar

Extension Manager, Macromedia’nın eklenti programıdır ve Dreamweaver’le birlikte bilgisayarınıza kurulur. Dreamweaver’in belki de işlevsellik konusunda sağ koludur. Web sitesi tasarlarken sıkıştığınızda başvurabileceğiniz en büyük kaynaktır.

Örnek: Bir haber paneli yapmak istiyorsunuz. Bunun için JavaScript bilmeliyiz veya daha kolayı eklentilerden haberdar olmalısınız. Bu işlemi satırlarca kod yazmak yerine Macromedia.com ‘dan gerekli eklentiyi indirip iki tık ile yapmak daha kolay olacaktır.

Eklentilerle kolayca layer animasyonları, browser işlemleri, navigasyon işlemleri, metin efektleri, browser iletileri yapabilirsiniz. Extension örneklerine ve Extension’lar konusuna gelecek sayılarımızda genişçe yer vereceğiz.

Form Nesneleri ve İşlevleri

:: Text Field

Insert > Form > Text Field yönergesini izleyerek belgenize ekleyebilirsiniz. Web’de gördüğünüz formların ana unsurudur. Kullanıcı adı, parolası, yaş, adres vb. gibi bir çok veri bu yolla alınır. Text Field’i ekledikten sonra bir kez tıklayalım ve Properties panelinde özelliklerini belirleyelim.

Text Field: Formu Web üzerinden göndereceğimiz zaman mail programları bu kutucuğa yazılan isme göre veriyi adlandırırlar. Bu kutucuğa “email” yazdığınız taktirde bu kutucuktan girilen verinin başlığı ”email” olacaktır.
Char width: Text kutusunun kaç karakter uzunluğunda olacağını belirtebilirsiniz.
Max chars: En fazla kaç karakter girileceğini belirleyebilirsiniz.
Type: Formun tipini seçmek için 2 seçenek var. Single ve Multi Line.
Single line: Tek satır veriler içindir. Örneğin yaş, isim, mail adresi vb. gibi.
Multi line: Uzun veriler içindir. Örn: kurumumuz hakkındaki düşünceleriniz. Bu konuyu insanlardan bir satırda anlatmasını bekleyemeyiz. Bunun için Multi Line seçeneğini seçeceğiz. Bu seçeneği seçtiğimiz Text Field’in Textarea’ya dönüştüğünü göreceksiniz.
Password: Eğer bu formdan alacağınız veri bir şifreyse bu seçeneği seçin. Bu seçeneği işaretlediğinizde metin kutusuna girdiğiniz veri noktalar şeklinde görünecektir.
Init val : Eğer formun varsayılan halinde içinde birşeyler yazmasını istiyorsak bu metin kutusunu kullanacağız.
Class: Form için bir CSS atadıysak buradan seçeceğiz veya Properties panelinden biçimlendireceğiz.

:: Button

Web sayfalarında kullandığımız Gönder, Ok, İptal, Sil benzeri butonlardır. Insert > Form > Button yönergesini kullanarak ekleyelim ve bir kez tıklayıp Properties paneline gelelim, butonumuzun özelliklerini ayarlayalım.

Button name: Butonumuzun ismi.
Label: Etiketi.
Action: Butonumuzun işlevi.
Submit form: Onay butonu. Ok, Gönder, Tamam tarzı olumlu işlevler yapcaksanız bu seçeneği işaretleyin.
Reset form: İptal, Reset, Sil gibi olumsuz işlevleri yapmak için Reset form seçeneğini işaretleyin. Bu butona tıkladığımızda formun içeriği silinecektir.
None: Bu işlevlerin haricinde butona script atayacaksanız, Behaviors panelinden yönlendirecekseniz None seçeneğini işaretleyin.
Class: Eğer bu formu biçimlendirmek için CSS hazırladıysanız bu menü yardımıyla belgeye ekleyebilirsiniz ve Properties panelinden biçimlendirebilirsiniz.

:: Check Box

Bu form unsuruna örnek vermek istersek; ücretsiz mail hesabı sağlayıcılara üye olduğunuzda üyelik adımlarından birinde başka hangi hizmetlerimizden faydalanmak istersiniz gibi bir soru ile karşılaşırsınız. Bunlar resimde de göreceğiniz gibi haber listesine ekle, güncellemeleri haber ver vb. gibi konular olabilir. Sizde istediklerinizi işaretlersiniz. Birden fazla seçeneği işaretleyebilirsiniz.

CheckBox name: CheckBox ismi.
Checked value: Formu Web üzerinden göndereceğimiz zaman mail programları bu kutucuğa yazılan isme seçeneği işaretler. Bu seçeneği haber listesine kişi eklemek için kullanacaksak adı haberdarEt olabilir.
Initial state: Formumuzun varsayılan halidir.
Checked: İşaretlenmiş haldir. Resimde 2 Güncellemelerden Haberdar Et.
Unchecked: İşaretlenmiş haldir. Resimde 1 Haber Listesine Ekle.
Class: Eğer bu formu biçimlendirmek için CSS hazırladıysanız bu menü yardımıyla belgeye ekleyebilirsiniz ve Properties panelinden biçimlendirebilirsiniz.

:: Radio Button

ÖSS sürekli aklımızda, online deneme sınavları yine kapıda demektir. Ne alakası var demeyin, bu sınavların temeli olan şıklar, Radio Button ile yapılmaktadır. Check Box’tan farkı sadece bir seçeneğin işaretlenmesidir. Insert > Form > Radio Button yolunu izleyerek belgemize ekleyebiliriz.

Radio Button: Radio Buton ismi.
Checked value: Bu form online olarak gönderildiği zaman Checked value metin kutusuna gireceğiniz değer gönderide görünecektir. Örn C şıkkı ise bu alana C yazacağız ve giden gönderide C şıkkının işaretlendiği anlaşılacaktır.
Initial State: Formumuzun varsayılan halidir.
Checked: İşaretlenmiş haldir.
Unchecked: İşaretlenmiş haldir.
Class: Eğer bu formu biçimlendirmek için CSS hazırladıysanız bu menü yardımıyla belgeye ekleyebilirsiniz ve Properties panelinden biçimlendirebilirsiniz.

:: List / Menu

Web sitelerinde görmüşüzdür, “bizi destekleyen siteler” şeklinde ibareler vardır. Ve bu bir liste menü halinde sayfaya eklenir, listedeki her nesneye link verilir. İşte bu form unsuru ile bizde listeli menüler hazırlayacağız. Insert > Form > List/Menu yönergesini izleyerek belgemize ekleyelim.

List/Menu: List / Menu adı.
Type: Formumuzun tipi.
Menu: Menü biçiminde form.
List: Liste biçiminde form.
Height: List Menünün büyüklüğü.
Selection: Seçim.
Allow Multiple: Bu sekmeyi işaretlediğiniz taktirde menü bir kaydırma çubuğu ile yönlendirilecektir.
Initial selected: Formun varsayılan halinde hangi değerin en üstte olacağını buradan seçerek belirleyebilirsiniz.
List Values: Listemize ekleyeceğimiz değerleri bu butona tıkladıktan sonra gelen pencere yardımıyla ekleyeceğiz.
Class: Eğer bu formu biçimlendirmek için CSS hazırladıysanız bu menü yardımıyla belgeye ekleyebilirsiniz ve Properties panelinden biçimlendirebilirsiniz.

+ butonuna basarak değer ekleyebilir, – butonu ile de değer silebilir ve yön tuşları ile listedeki değerlerin dizilim sıralarını değiştirebiliriz.

:: File Field

Web’de bir dosya upload ederken kullandığımız File Upload formunu Insert > Form > File Field yönergesini izleyerek belgemize ekleyebiliriz.

FileField name: Formun ismi.
Char width: Text kutusunun kaç karakter uzunluğunda olacağını belirtebilirsiniz.
Max chars: En fazla kaç karakter girileceğini belirleyebilirsiniz.
Class: Eğer bu formu biçimlendirmek için CSS hazırladıysanız bu menü yardımıyla belgeye ekleyebilirsiniz ve Properties panelinden biçimlendirebilirsiniz.

:: Image Field

Görüntü alanı. Insert > Form > Image Field yönergesini izleyerek ekleyebilirsiniz. Özeliklerini Properties panelinden düzenleyebilirsiniz.

:: Radio Group

Name: Formun ismi.
Radio buttons: + butonu ile ekleyebilir – butonu ile de öğe silebiliriz.
Label: Şıkların Web sayfasında görünen metnini yazacağız.
Value: Seçeneğin gönderide(mail, text vs.gibi) görünecek olan hali.
Lay out using: Seçenekler nasıl dizilsin?
Line breaks: Aralarında boşluk bırakılarak.
Table: Tablonun içinde.

:: Jump Menu

Daha önceden yapmış olduğumuz List/Menu formunun javaScript ile işlenmiş biçimini bir başka ad altında göreceğiz. Insert > Form > Jump Menu yönergesini izleyerek belgemize ekleyebiliriz.

Menu items: Menüdeki öğeler. + butonu ile öğe ekleyebilir, – butonu ile de öğe silebilirsiniz.
Text: Menüdeki öğeleri yazacağımız metin kutusu.
When selected, go to URL: Öğelerin gideceği adresler.
Open URLs in: Linklerin açılacağı hedef.
Menu name: Menümüzün ismi.
Insert go button after menu: Menüye go butonu ekle.
Select first item after URL Change: İlk öğe seçildikten sonra adrese git.

– – –

Önceki Web Tasarımı Dersleri’ne ulaşmak için tıklayın. Tasarım derslerimiz devam edecek.

M. Rıdvan Özdemir
SDN Serbest Yazarı

Yorum Ekleyin