BilginSayar, bilginsayar.tr.gg, Html Kodlar, Fbml Kodları, Css Tasarımlar, İceblue, Tasarımlar, Java Kodlar, Sitene Kod

Dreamweaver Hakkında Genel Bilgiler

GENEL BİLGİLER

HTML kodları kullanarak web sayfası oluşturmanın zahmetli bir iş olduğunu düşünenler ya da kısa sürede mükemmel web sayfaları hazırlamak isteyenler için iyi bir haberimiz var. Macromedia Dreamweaver' la kodlar arasında boğulmadan çok kısa sürede web sayfaları hazırlayabileceksiniz. Görsel web tasarım editörleri kategorisinde inceleyeceğimiz Dreamweaver "benzeri programlar içinde kullanımı en kolay olanı" desem abartmış sayılmam. Görüntünün kalabalığına bakıp sakın ürkmeyin. Tasarım programlarını değerlendirenlerin Dreamweaver' da tek eksi olarak gösterebildikleri yerleşik olmayan araç çubuklarıdır. Ama bütün bu pencereler, araç çubukları tamamen sizin kontrolünüzde. İstediğiniz pencereyi kapatabilir, istediğinizi yeniden aktif hale getirebilirsiniz.
Daha rahat çalışmak için düzenlediğimiz bu ekranı kullanarak tasarımlarımızı çok kısa sürede oluşturabileceğiz. Bunun yanında Dreamweaver da "illâ HTML kodlarında da çalışmak istiyorum" diyen kullanıcılar için istedikleri zaman kodlara müdahale edebilecekleri kod penceresi seçeneği mevcuttur. Ayrıca hem kod penceresi hem de tasarım pencerelerini aynı anda görerek sayfaları tasarlamakta mümkün. Bizde kitabımız boyunca HTML kodları üzerinde işlem yapmaya gerek kalmadan sayfa tasarlanabileceğini göstermek açısından tasarım penceresini kullanacağız. Şunu da hemen belirtmemizde fayda var; yukarıdaki cümleleri sarf ederken bizim HTML kodlarını kullanarak site tasarlayanlara karşı olduğumuz düşünülmesin. Bizim kitabımıza konu olarak aldığımız Dreamweaver görsel bir editör olduğundan işlemlerimizde tamamen görsel olacaktır. Ayrıca Dreamweaver WYSIWYG (What You See Is What You Get- Ne görüyorsan onu elde edersin) özelliğinde olduğundan tasarım penceresinde ne hazırladıysak sonuç olarak da onu elde edeceğiz demektir.

ARAÇ ÇUBUKLARI ve DİĞER ELEMANLARI TANIYALIM

TASARIM PENCERESİ

Oluşturacağımız web sayfaları için tasarım ekranını kullanacağımızı belirtmiştik. Bu pencereyi kullanmak bir kelime-işlemci programını kullanmaktan daha zor ve karmaşık değil. Kelime-işlemci programlarında olduğu gibi sayfalarımıza resimler ekleyebilir, yazılarımızı istediğimiz gibi biçimlendirebilir, medya eklentileri (animasyonlu gifler, sesler, vb.), tablolar oluşturabiliriz. Ayrıca ileriki konularda anlatılacak hareketler ve zaman çizelgeleri gibi nesneleri de kullanarak sıra dışı web sayfaları oluşturabileceğiz.
Tasarım penceresi üzerinde başlık çubuğu, mönüler, belirteç göstergeci pencere boyutunu ayarlayabileceğimiz kısım, sayfanın KB cinsinden kapladığı alan ve internetteyken yüklenme süresini gösterir kısım ile hızlı erişim mönüsü bulunur. İsterseniz bu pencereler ve açıklamaları üzerinde kısaca duralım:

Başlık Çubuğu
Başlık çubuğunda o an aktif olan sayfanın başlığı yer alır. Biz de sayfalarımıza değişik yollar kullanarak başlıklar verebiliriz. Sıralayacak olursak
1. Araç çubuğu üzerinde yer alan Title alanını kullanarak
2. Modify mönüsünden Page Properties seçeneğini kullanarak
3. CTRL+J kısa yol tuşları kullanılarak
4. Tasarım penceresindeyken boş bir yerde farenin sağ tuşuna basıp açılan mönüden Page Properties komutunu seçerek.
Bu yollardan hangisi kullanılırsa kullanılsın açılacak diyalog kutusu aynıdır. Bu diyalog kutusunun Title sekmesinde yazılacak metin Dreamweaver' ın başlık çubuğunda görüntülenecek metindir. Ayrıca başlık çubuğunda ( ) parantezleri içinde sayfanın tam olarak konumu da yazılır.
Oluşturulan web sayfası tarayıcı kullanılarak açıldığında tarayıcı penceresinin başlık çubuğunda tarayıcı ismiyle beraber bu metin yan yana gösterilir.

Menü Çubuğu
Menü çubuğunda File, Edit, View, Insert, Modify, Text, Commands, Site, Window ve Help alt mönüleri bulunur. İlgili mönü başlığına tıklandığında o mönü içinde yer alan komutların sıralandığı bir pencere açılır. Bu mönü pencerelerinde yer alan komutlar ya üzerine gelip tıklanarak ya da o komutun -varsa- kısa yol tuşuna basılarak çalıştırılır.

HTML Belirteç Göstergeci

Dreamweaver' da o an hangi belirteç üzerinde işlem yapılıyorsa burada gösterilir.

Window Size

Tasarım penceresinin o an aktif olan boyutlarını gösterir. Kullanıcı isterse aktif pencere boyutlarını değiştirebilir.Bu kısımda farenin sol tuşuna basarsa değişik ekran boyutlarının listelendiği açılır liste kutusu görüntülenir. İstenilen pencere boyutu seçilerek sayfanın değişik ekran boyutlarındaki görünümü kontrol edilebilir.
Burada belirtilen ölçüler pixel (nokta) cinsindendir. Örneğin 640X480 ölçüsü ekranın 640 sütun 480 satıra bölündüğünü gösterir. Bu satır ve sütunların kesişmesinden oluşan noktalarla da ekrandaki görüntü oluşur. 1024X768 ölçüsü ise ekrandaki görüntünün 1024 sütun ve 768 sütundan oluştuğunu gösterir. Yukarıdaki açıklamalardan da tahmin edebileceğiniz gibi aynı ekranda 640X480 ile 1024X768 ölçülerinin meydana getirdiği nokta sayıları farklıdır. Buradan çıkacak sonuç şudur: Aynı ekranda daha fazla noktayla oluşan görüntüler daha net olurlar.

Yüklenme Hızı

Bu kısım, üzerinde çalıştığımız sayfanın KB cinsinden kapladığı toplam alanı ve internetteyken sayfanın yüklenme süresini gösterir. Toplam alan derken buna sayfa içinde kullandığımız bütün nesneler (resimler, yazılar, tablolar vb.) dahildir. Burada aklınıza "Dreamweaver sayfanın yüklenme hızını neye göre yazıyor? Benim modemim yavaş/hızlı olabilir ya da internete direk kablo ile bağlanıyor olabilirim." gibi bir soru gelebilir. Tabi ki bu hız Dreamweaver' ın ayarlarında gösterilen "varsayılan bağlantı hızı" na göre yazılır. Bu bağlantı hızını değiştirmek mümkündür. Bunun için Edit mönüsü içinde yer alan Preferences komutu daha sonra açılan diyalog kutusundan Status Bar grubu seçilir. Bu ekranda Connection Speed sekmesinde yer alan açılır mönüden istenilen bağlantı hızı seçilir.

Hızlı Erişim Araç Çubuğu

Bu kısım Dreamweaver' da kullanacağımız değişik nesnelerin birlikte bulundukları yerdir. Hızlı erişim işlemleri tasarım penceresi üzerinden kullanılabileceği gibi ayrı bir araç çubuğu olarak masaüstünde de bulundurulabilir. Bunun için Shift+F4 tuşuna basmak yeterlidir. Hızlı erişim çubuğu üzerinde yer alan herhangi bir öğeye tıklandığında onunla ilgili pencere açılır. Tekrar basıldığında kaybolur. Mesela Site öğesine tıklanırsa o an aktif olan siteye ait bütün dosya ve alt dizinler bir pencere içinde gösterilir. Ya da behaviors öğesine tıklandığında seçili durumda bulunan nesneye ait -varsa- oluşturulan hareketler bir pencere içinde gösterilir.

Hızlı erişim çubuğunda yer alan öğelere ulaşmak için alternatif olarak Window mönüsü kullanılabilir. Ya da ilgili öğe kısa yol tuşuna basılarak aktif hale getirilebilir. Ya da aktifse pasifize edilebilir.
Hızlı erişim çubuğunda yer alan öğeler de isteğe bağlı olarak değiştirilebilir. Bunun için yine Edit menüsü içinde yer alan Preferences komutu kullanılır. Bu komut çalıştırıldığında ekrana aşağıdaki pencere gelecektir. Bu pencere üzerinde yer alan Panels grubu seçilmeli ve Show in Launcher kısmında istenilen öğe grupları eklenip çıkarılmalıdır.

Cevap : Dreamweaver Hakkında Genel Bilgiler

ÇALIŞMA ORTAMININ AYARLANMASI

Sisteminize kurduğunuz Dreamweaver' ı kendi isteklerinize göre kişiselleştirmek istediğinizde Edit mönüsü içinde yer alan Preferences ayarları üzerinde bir miktar işlem yapmanız gerekecektir. Burada yapacağınız ayarlar bir dahaki değiştirme zamanınıza kadar aktif olacak ayarlardır. Ayrıca burada yaptığınız değişiklikler, üzerinde çalıştığınız tüm siteler için geçerli sayılacaktır. Edit mönüsünden Preferences seçildiğinde ekrana aşağıdaki diyalog kutusu gelir. Bu resimde de görüleceği gibi diyalog kutusu Category ve category kısmından seçilecek alt gruba göre açıklama kısmının yer aldığı iki kısımdan oluşur. Category kısmında birbirinden farklı 16 grub vardır. Bu gruplardan herhangi biri seçildiğinde sağ parçada o grupla ilgili yapılabilecek işlemlerin yer aldığı diyalog kutusu açılır.

GENERAL PREFERENCES

Category listesinden General grubunu seçelim. O zaman Özellikler diyalog kutusunun görünümü aşağıdaki gibi olacaktır.

File Options Kısmı:
Show Only Site Window on Startup : Dreamweaver başlatılırken Tasarım penceresi açılmadan sade site yönetici penceresinin açılmasını istiyorsanız bu seçeneği aktif hale getirmelisiniz. Böylelikle program çalıştırıldığında sitenize ait dosyaları site pencerenizde görebilir üzerinde çalışmak istediğiniz dosyayı buradan seçebilirsiniz. Ancak dreamweaver bu özelliği kullanıcıların kendi isteklerine göre düzeltmelerini istediğinden pasif bırakmıştır.

Open Files in New Window : Her açılan dosyayı farklı farklı pencerelerde görüntülemek için bu seçenek kullanılır.

Warn when Opening Ready-Only Files: Sadece okunabilir özelliğindeki dosyaları açarken programın sizi ikaz etmesini istiyorsanız bu özelliği aktif hale getirmeniz gerekecek.

Add Extension when Saving: Kaydedeceğiniz dosyalara uzantı olarak ne vermek istiyorsanız buradan belirtmelisiniz. Varsayılan değeri ".htm" dir. Siz ".html" yapabilirsiniz.

Show Dialog when Inserting Objects: Web sayfalarınıza bazı nesneleri eklemek istediğinizde karşınıza o nesneyle ilgi yapmanız gereken ayarlamaları gösteren bir diyalog penceresi gelir. Örneğin tablo eklemek istediğinizde karşınıza tablonun satır, sütun sayılarını gireceğiniz, tablonun genişliğini ve diğer özelliklerini belirleyeceğiniz bir pencere gelir. İşte bu gibi nesne ekleme işlemlerinde bu diyalog kutularının çıkmasını istemiyorsanız bu özelliği pasifize etmeniz gerekir. Böylelikle eklemek istediğiniz nesneler için varsayılan özellikler neyse o şekilde bir nesne eklenmesi sağlanmış olur.

Faster Table Editing (Deffered Update): Bu özellik seçiliyken satır ve sütun genişlikleri sabit kalır. Ta ki girilen bilgiler hücreyi tam olarak kaplayana kadar. Bilgiler hücre sınırına dayandığında hücreler, yazılan bilgiye göre otomatik olarak genişletilir. Bu özellik iptal edilirse ilk yazılan karakterle birlikte hücre sınırları genişlemeye başlar.

Rename Form Items when Pasting: Bu özellik web sayfalarınıza eklediğiniz form nesneleri için aktif olan bir özelliktir. Bilirsiniz! formlarda her bir nesnenin ismine göre işlem yapılır. İşte bu isimlerin aynı olması problem çıkaracağından her kopyala-yapıştır işleminden sonra isimlerin elle değiştirilmesi de vakit alacaktır. Bu seçenek aktif haldeyken Dreamweaver bu işi bizim yerimize yapar.

Enable Double-Byte Inline Input: Tasarım penceresinde Japonca gibi farklı bir karakter formatı kullanan dillerle de işlem yapmak istediğinizde bu seçeneğin aktif yapılması gerekir. Tabii bunun için öncelikle Preferences penceresine ait Font/Encoding ayarlarını da buna göre düzenlemeniz gerekir.

Maximum Number of History Steps: Dreamweaver' da yapılan işlemler Dreamweaver çalıştığı sürece hafızada kalırlar. İşte burada belirteceğimiz sayıya göre işlemler en son yapılandan başa doğru History palette saklanırlar. Örneğin buraya girdiğimiz sayının 30 olduğunu varsayalım. Dreamweaver en son yapılan işlemden başa doğru 30 işlemi hafızasında saklayacaktır demektir.

Update Links
Linklerin silinmesi, taşınması ya da değiştirilmesi gibi durumlarda Dreamweaver' ın ne yapmasını istiyorsanız Update Links kısmından belirtmelisiniz. Liste mönüsünde yer alan 3 seçenekten birini seçmelisiniz. Eğer Dreamweaver her link güncellemesinde sizi haberdar etsin istiyorsanız Prompt seçeneğini, her güncellemeyi size sormadan otomatik olarak yapmasını istiyorsanız Always seçeneğini ya da güncelleme yapılmasını istemiyorsanız Newer seçeneğini seçmelisiniz.

Object Panel
Tasarım penceresinde kullandığımız Nesneler araç çubuğunun görünümünü buradan ayarlayabiliyoruz. Eğer "Icons Only" seçilirse sadece simgeler, "Text Only" seçilirse Nesnelere ait açıklama yazıları, "Icons and Text" seçilirse hem simge hem de açıklama yazıları yan yana görüntülenecektir.

Spelling Dictionary
Dreamweaver' da oluşturulan metinlerin imla kurallarına uygunluğunu denetlemek istiyorsanız burada yer alan sözlüklerden birini seçmelisiniz. Ancak Dreamweaver' da Türkçe sözlük söz konusu olmadığı için bu seçeneği kullanmanız bir anlam ifade etmeyecektir.

Cevap : Dreamweaver Hakkında Genel Bilgiler

CODE COLOR
Kod penceresinde aktif olarak gösterilecek renklerin belirlendiği gruptur. Bu renkleri isteğinize göre düzenleyebilirsiniz. Hatta her bir belirteç için ayrı ayrı renkler de atayabilirsiniz. Tabii böyle bir şeyi yapabilmek için bol bol vakit ve sabrınızın olması gerekir.

CODE FORMAT
Burada da yine HTML Kaynak Kod Penceresi"nde geçerli olacak ayarlamalar yapılır. Yani :
Indent: Yazılan kodların birbirlerinden rahatça ayrılabilmelerini sağlamak için indent özelliğinin aktif olması gerekir. Özellik aktif hale getirildiğinde Dreamweaver tarafından oluşturulan kodlar girintili çıkıntılı yazılacak, kullanıcının daha rahat dolaşımı sağlanacaktır.
AutoWrap: Bu seçenek aktif hale getirilirse yani kutucuğa tik işareti konulursa After Column kısmında belirtilen sütun değerinden sonra işlemin bir alt satırdan devam etmesi sağlanır.
Line Breaks: Satır kesmelerini hangi çalışma ortamına göre olacağı buradan belirlenir. Burada 3 seçenek vardır. "CR LF (Windows)", "CR (Macintosh)", "LF (Unix)"
Case for Tags: "HTML Kaynak Kod Penceresi" nde yazılacak belirteçlerin büyük harflerle mi yoksa küçük harflerle mi yazılacağı buradan belirlenir.
<UPPERCASE> seçilirse belirteçler büyük harfle
<lowercase> seçilirse belirteçler küçük harfle oluşturulur.
Case for Attributes: Belirteçlere eklenecek parametrelerin nasıl yazılacakları buradan belirlenir. İki seçenek vardır:
lowercase= "value" ya da
UPPERCASE= "value"
Centering : Oluşturulan nesnelerin ortalanması söz konusu olduğunda iki seçenek söz konusudur. Bunlardan DIV sekmesi 3.X ve üstü tarayıcılarda görüntülenebilen bir belirteç olduğu için daha küçük sürümlü tarayıcılarda görüntülenmeyecektir. Ama buna rağmen genelde tasarımcıların tercih ettiği ortalama komutu DIV' dır. Çünkü : DIV hem İnternet Explorer hem de Netscape Navigator tarayıcıları tarafından desteklenen bir komut olduğundan kullanılması da mantıklıdır.

CSS STYLES
HTML her yönüyle tamamlanmış bir yapı değildir. Eksik kaldığı, bazı yöntemlerle eksikliklerinin giderilmeye çalışıldığı ortada. Bu eksikliklerin giderilmesi için kullanılan yöntemlerden biri de CSS'ler. CSS'leri "bazı kısa tanımlamalarla bütün sayfalarda geçerli olabilecek düzenlemeler yaptırabilen stiller" olarak tanımlayabiliriz. Örneğin:
Web sayfası üzerinde 'siyah' olan yazı rengini 'kırmızı' ile, 'verdana' olan yazı tipini 'times new roman' ile değiştireceğinizi düşünelim. Eğer bahsettiğimiz sayfa sayısı 1 tane ise problem yok, el ile değiştirmek pek de problem gözükmüyor. Ancak bu işlemi onlarca web sayfası için yapmamız gerektiğini düşünecek olursanız asıl problem o zaman çıkıyor. Kaybolan zamanı ve bozulan sinirleri tahmin edersiniz! İşte CSS'ler burada imdadımıza yetişiyor. Yapacağımız küçük tanımlamalarla hiç vakit kaybetmeden, yorulmadan istediğimiz değişiklikleri hızlıca yapabileceğiz.
Gelelim Preferences üzerindeki 'CSS Styles' grubuna.
CSS'ler eski tip tarayıcıların (IE 4.0'dan önceki, Netscape 4.0'dan öncekiler) desteklemediği biçimlendirmelerdir. İnternette -hala- bu tip tarayıcılar kullanarak dolaşanlar olduğunu varsayarsak tanımlamış olduğumuz CSS tanımlamalarının bu tip tarayıcılarda görülemeyeceğini ve bazı problemlere sebep olabileceği ortada. İşte bu tip tarayıcılarda da hazırlamış olduğumuz düzenlemelerin geçerli olabilmesi için bu kısmı kullanabileceğiz.

FILE TYPES / EDITORS
Dosya uzantılarına göre program ataması yapabileceğiniz bu grub üzerinde yer alan öğeleri incelemeye başlayalım.
Open in Code View: Burada belirteceğiniz uzantıdaki dosyaların kod penceresinde açılmasını sağlarsınız.
External Code Editor: Eğer Dreamweaver'ın kod penceresinin dışında aşina olduğunuz kullanmak istediğiniz bir editörünüz varsa bu alanda belirtiyorsunuz. Editörünüzün konumunu belirttikten sonra Edit mönüsü içinde yer alan Edit with .......... komutunu kullanarak editörünüzü aktif hale getirebilirsiniz.
Reload Modified Files: Dahili editörlerle yapılan düzenlemelerin Dreamweaver' a dönüşte uygulanıp uygulanmayacağını buradan belirleyebiliriz. Eğer:
Prompt seçilirse yapılan değişikliklerin aktif hale getirilip getirilmeyeceği sorulurken
Always seçilirse yapılan bu değişiklikler sorulmadan aktif hale getirilir.
Never seçilirse düzenlemeler güncellenmeden editörden çıkılır.
Save on Launch: Burada da HTML editörleriyle değişiklikler yapıldıktan sonra Dreamweaver' a dönüşte bu değişikliklerin dosyaya kaydedilip kaydedilmeyeceği belirlenir. Yine burada da:
Prompt seçilirse yapılan değişikliklerin kaydedilip kaydedilmeyeceği sorulurken
Always seçilirse yapılan bu değişiklikler sorulmadan kaydedilir
Never seçilirse düzenlemeler kaydedilmeden editörden çıkılır.
Extensions: Bu kısımda değişik programlara ait dosya uzantılarının listesini,
Editors: kısmında ise aktif olan uzantılara ait dosyaların hangi programlarla açılacağını belirtiriz.

Cevap : Dreamweaver Hakkında Genel Bilgiler

FONTS/ENCODING
Bu category grubunda oluşturacağımız web sayfalarında geçerli olacak dil tanımlamasını yapacağız. Eğer hazırladığınız sayfaların Türkçe dil kurallarına göre sorunsuz çalışmasını istiyorsanız biraz hayal kırıklığı yaşayacaksınız. Çünkü Dreamweaver' ı geliştirenler Türkçe dil grubunu bu kısma eklememişler. Bizde Türkçe karakter setini dolaylı olarak Dreamweaver' a tanıtacağız. Bunun için yapılması gereken işlemler sırasıyla şöyle:
Default Encoding kısmından Other seçeneğini,
Font Settings kısmından yine other seçeneğini,
Daha sonra font listesinin sıralandığı Proportional Font kısmından herhangi bir Türkçe fontu,
Fixed Font kısmından da yine bir Türkçe fontu,
En son adım olarak da HTML Inspector kısmından istediğimiz Türkçe fontu seçerek işlemi tamamlıyoruz.
Burada yapmış olduğumuz ayarların sorunsuz olarak çalışması için Dreamweaver' ı kapatıp yeniden başlatmamız gerekecektir. Ancak other seçenekleriyle belirlemiş olduğumuz dil grubu esas Türkçe tabanlı grup olmadığı için problem olabileceğinden meta satırındaki değeri "Head objects" penceresinde yer alan ikonunu tıklayarak aşağıdaki şekilde değiştiriyoruz.

HIGHLIGHTING
Hazırladığınız Template ve Library dosyalar üzerinde aktif olacak seçeneklerdir.
Editable Regions: Template kullandığınız çalışmalarınızda serbest kullanabileceğiniz alanlar bu renkle çerçevelenir.
Locked Regions: Template'inizin sınırlarını belirler. Böylelikle hangi alanların templateiniz içinde yer alandığını görebilirsiniz.
Library Items: Tanımladığınız library çalışmalarını templatelerinize ya da normal web sayfalarınıza
eklediğinizde libraryi oluşturan alan bu renkte görüntülenir.
Third-Party Tags: Bildik HTML belirteçlerine ek olarak kendimizde belirteçler tanımlayabilir; bu belirteçleri sayfalarımızda kullanabiliriz. Bunun için yapmamız gereken işlem aşağıdaki satırları tamamen boş (bütün HTML belirteçlerinden arındırılmış) bir sayfa içine yazıp .XML uzantısı ile kaydetmek olacaktır.
<tagspec tag_name="gez" tag_type="nonempty" render_contents="false"
content_model="marker_model" icon="gez.gif" icon_width="30"
icon_height="30"></tagspec>
Daha sonra bu çalışmamızı
C:Program FilesMacromediaDreamweaver 4ConfigurationThirdPartyTags klasörüne
istediğimiz bir isimle kaydedelim.
İsterseniz bu örnekte yer alan kodları ve paramettrelerini daha yakından inceleyelim:
tag_name: Oluşturucağınız belirtecin ismi ne olacaksa bu alandan belirtiyorsunuz.
tag_type: Burada belirtebileceğiniz iki değer var "nonempty" ve "empty". "nonempty" belirtecin çiftiyle kullanılmasını sağlar. Yani belirtecin çalışması için <gez> yazdıktan sonra kapatma belirteci olan </gez> belirtecinin kullanılması gerekir. "empty" parametresi ise belirtecin yalnız kullanılmasını sağlar.
render_contents: Belirtece atadığımız ikonun görünüp görünmemesini belirler. Alabileceği iki değer vardır. "True" yazarsanız ikon görünmeyecek, "false" yazarsanız ikonunuz görüntülenecektir.
content_model: Bu parametreye ekleyebileceğiniz 4 farklı seçenek vardır. Bunları sırasıyla yazacak olursak:
"marker_model": Dreamweaver derleyicisi bu parametre ile tanımlanmış belirteçleri göz ardı eder. Ancak bu belirteçler içinde belirtilmiş değerler aynen korunur.
"block_model": Layerlar, paragraflar gibi block belirtilen durumlarda kullanılır.
"head_model": Web sayfanızın head alanında bir belirteç kullanacaksanız parametreyi head_model olarak belirlemeniz gerekecek.
"script_model": Dreamweaver bu parametre ile oluşturulmuş belirteçleri gördüğünde içeriğinin hepsini göz ardı eder.

INVISIBLE ELEMENTS
Dreamweaver tasarım penceresinde eklemiş olduğunuz nesneleri temsil eden küçük ikonların görüntülenmesini istiyorsanız burada yer alan öğelerin başında bulunan kutucuklara tik işareti koymak ya da iptal için tekrar tıklamak yeterlidir.

LAYERS
Katmanlarda kullanılacak "varsayılan ayarlar" ı buradan değiştirebiliriz. Görünürlük durumu, eni, yüksekliği, arka plan rengi ya da arka plan resmi gibi değerler buradan belirtilir. Kullanıcı Insert mönüsünden Layers komutunu çalıştırdığında burada belirtilen ebat ve özelliklerde bir katman oluşturulacaktır.

LAYOUT VIEW
Dreamweaver 4 sürümünde programa dahil olan Layout View ile ilgili ayarlar burada yapılır.
Autoinsert Spacers: Tasarım ekranınıza (layout view görünümündeyken) eklediğiniz tablolarınızın özelliğini "autostrech" olarak ayarladıysanız herhangi bir hücre oluşturmak istediğinizde hücrenin belirlediğiniz boyutlarda sabit kalmasını sağlamak için "When Making Autostrech Tables" seçeneğini aktif yapmalısınız. Eğer "Never" seçeneğini aktif hale getirirseniz ekleyeceğiniz hücre 10X10 ebatlarında küçük bir hücre dahi olsa bu hücrenin boyutları da otomatik olarak tablo boyutuna göre büyütülüp küçültülecektir.
Space Image: For Site kısmından hangi site için boşluk resmi tanımlayacağınızı belirtirsiniz. Aksini belirtmediğiniz sürece üstünde çalıştığınız site burda da gösterilir. Boşluk resmini belirlemek için de Image File: kısmını kullanmalısınız.
Cell Outline: Tablolarınızda belirtiğiniz hücrelerin dış çerçeve renklerini buradan ayarlayabilirsiniz.
Cell Highlight: Fare göstergecinin hücre üzerine hangi renkle değişmesini istiyorsanız buradan beliryebilirsiniz.
Table Outline: Tablo çerçevesinin rengi
Table Background: Tablonuzun zemin rengini ise buradan belirleyebilirsiniz.

Cevap : Dreamweaver Hakkında Genel Bilgiler

PANELS
Always on Top: Bu bölümde yer alan araç çubukları aktif hale getirildiklerinde kapatılana kadar pencere üzerinde görünür halde kalmalarını istiyorsanız bu kutucukların hepsini işaretlemelisiniz (zaten varsayılan ayarları bu şekilde) . Yok eğer başka bir pencere üzerinde çalışmaya geçince pencerenin otomatik olarak gizlenmesini istiyorsanız da ilgili öğenin önündeki kutucuğu boşaltmanız gerekecektir.
Show in Launcher: Hızlı erişim araç çubuğu üzerinde görüntülenmesini istediğiniz öğeleri buradan belirleyebileceğiz. İstediğiniz öğeyi iptal edebilir ya da listede olmayan bir başka öğeyi bu araç çubuğuna ekleyebilirsiniz.

PREVIEW IN BROWSER
Hazırlamış olduğunuz sayfaları tarayıcıda görmek için F12' ye bastığınızda Dreamweaver burada belirtilen ayarlara bakar. Varsayılan tarayıcı hangisi ise sayfa o tarayıcı ekranında görüntülenir. Burada kullanıcı ikinci bir tarayıcıyı tanımlamak istediğinde düğmesine basarak açılan pencereden eklemeyi düşündüğü tarayıcının konumunu Dreamweaver' a belirtir. Hazırlanan sayfaları ikinci tarayıcı ekranında görmek içinse CTRL+F12 tuşları kullanılmalıdır. İstenirse tarayıcıların varsayılan ya da ikinci tarayıcı durumları Defaults kısmında belirtilir. Yani kullanıcı birinci tarayıcı aktifken primary Browser sekmesine tıklarsa birinci tarayıcı varsayılan tarayıcı olur. İkinci tarayıcı aktifken primary browser seçeneği seçilirse bu kez ikinci tarayıcı varsayılan tarayıcı olur.
Eğer sistemizde kurulu bir serveriniz varsa bu server ayarlarıyla görüntülenmesini istediğinizde de "Preview Using Local Server" komutu aktif hale getirilmelidir.

QUICK TAG EDITOR
Apply Changes Immediately While Editing: sekmesine tik konursa "Quick Tag Editor" penceresinde yapılan değişiklikler kaynak koda da eklenir.
Enable Tag Hints: ise "Quick Tag Editor" penceresinin Delay kısmında belirtilen süre geçtikten sonra gizlenmesini sağlar.
Çalışmalarınızda Quick Tag Editor'ünü aktif hale getirmek için
Properties diyalog kutusu üzerinde yer alan ikonuna tıklayabilir,
Klavyeden CTRL+T kısayol tuşunu kullanabilir
Modify mönüsü içinde yer alan "Quick Tag Editor" komutunu çalıştırabilirsiniz.

SITE
Always Show: Site yöneticisi penceresi açıkken hangi dosyaların hangi parçada görüntüleneceği buradan belirtilir. Yukarıdaki resim üzerinde açıklayacak olursak:
"Kullanıcı bilgisayarındaki siteye ait dosyaların (Local Files) sürekli sağ parçada görüntülenmesini istiyormuş". "Local Files" kısmında ikinci bir seçenek olarak "Remote Files" da vardır. Bu da sitemizi upload yaptığımız serverdaki dosyalarımızı temsil eder. Taraf olarak da 'sağ' seçeneğinden başka 'sol'u da seçebilirsiniz.
Dependent Files: Bağlı dosyaları gönderirken de "Prompt on Get/Check Out" alırken de "Prompt on Put/Check In" karşılaştırmak için bu seçenekler kullanılır.
FTP Connection: FTP bağlantısını belirteceğiniz süre kadar bekledikten sonra kesecektir.
FTP Time Out: Zaman aşımı süresi olarak ne belirttiyseniz o kadar süre işlem yapılmadığında FTP bağlantınızı iptal edecektir.
Firewall Host: Host adresinizi belirteceğiniz yerdir. Eğer böyle bir durum söz konusu değilse burayı boş bırakabilirsiniz.
Firewall Port: Bağlanacağınız port numarası buradan belirtilir. Varsayılan değeri 21'dir.
Put Options: Aktif hale getirirseniz dosyaları upload yapmaya başlamadan önce açık olan dosyalarınızda yapmış olduğunuz son işlemlerin kaydedilmesini sağlar.
Define Sites: Üzerinde çalıştığınız siteyi buradan da değiştirebilirsiniz.

STATUS BAR
Durum çubuğunda görüntülenecek parçaların düzenlemelerini buradan yapabiliriz. Örneğin tasarlanan sayfaların deneme ekran boyutları buradan belirtilebilir. Bağlantı hızı ve hızlı erişim çubuğunun durumunu da buradan ayarlayabiliriz.
Window Size: Sayfaların deneneceği pencere boyutları buradan düzenlenir.
Connection Speed: İnternete bağlantı hızınızı buradaki listeden seçebilirsiniz.
Launcher: Hızlı erişim çubuğunun durum çubuğunda görüntülenip görüntülenmeyeceği buradan ayarlanır. Kutucuğa tik işareti konursa görüntülenir. Aksi halde hızlı erişim çubuğu görüntülenmeyecektir.

RENK DÜZENİ TANIMLAMALARI
Dreamweaver' da her zaman için beyaz zemin üzerine siyah yazıyla yazmak çok cazip gelmeyebilir. Değişik renk kombinasyonları denemek isteyebilirsiniz. Ne de olsa nette sadece beyaz zeminli, ya da siyah yazılı siteler yok. İşte bunu düşünen Dreamweaver geliştiricileri sayfalarınızda kullanmanız için hazır renk düzeni tanımlamalarında bulunmuşlar. Bu renk düzenlerini görmek ve sayfalarınıza uygulamak için Command mönüsü içinden Set Color Scheme... komutunu çalıştırmalısınız. Ekrana bir pencere gelecektir.
Bu pencere üzerindeki Background alanından sayfalarınızın zeminine döşeyeceğiniz zemin rengini, Text and Links kısmındanda yazı ve linkleriniz için sunulan alternatif renk tanımlamalarından birini seçebilirsiniz. Sizin belirlemiş olduğunuz zemin rengi, yazı ve link renklerine göre örnek çalışma yine aynı pencerenin sağında görüntülenecektir.

METİN İŞLEMLERİ
Başlıklar
Web sayfalarına ait gövde içinde zaman zaman başlıklar kullanmak isteyebiliriz. İşte bu gibi durumlarda HTML kodlarıyla uğraşanlar <HX>..</HX> belirtecini kullanırlar. Burada belirtilen X yerine 1' den 6' ya kadar sayı yazılabilir. <H1> başlıkların en büyüğü, <H6> en küçüğüdür.
"Pekii Dreamweaver' da kodlarla uğraşmadan biz bu işi nasıl yapacağız?" diye soruyorsanız hemen belirtelim : Properties diyalog kutusunu kullanacağız. Bu diyalog kutusunun Dreamweaver' da varsayılan değerinin metin modu olduğunu önceki bölümlerde söylemiştik. Metni yazmaya başlamadan aşağıdaki diyalog kutusunda yer alan Format kısmını açarsak burada değişik Heading seçeneklerinin olduğunu görürüz. Buradan istediğimiz başlık büyüklüğünü seçerek başlık metnimizi oluştururuz.
Eğer tasarım penceresinde daha önce yazılmış bir metne başlık uygulanacaksa metin seçildikten sonra yine Properties diyalog kutusundan başlık uygulanabilir.

Cevap : Dreamweaver Hakkında Genel Bilgiler

Paragraflar
Web sayfalarında tek düze baştan sona aralıksız yazılmış yazıları okumak sıkıcı olduğundan ya da geçen her dakikanın maliyet olduğu internette bu külfete katlanmak istenmediğinden yazı yüklü siteler geniş bir kitleye ulaşamadan diskalifiye edilebilirler. Oysa çok basit Dreamweaver işlemleriyle yazılarınız daha okunaklı hale gelebilir. HTML kodu üretenler paragrafları birbirinden ayırmak için <P>...</P> belirteçlerini kullanırlar. Dreamweaver' da ise bir paragrafın bittiğini bir başka paragrafa başlandığını belirtmek için sadece ENTER tuşuna basmak yeterlidir. Böylelikle Dreamweaver paragrafları aralarına bir satır boşluk bırakarak ayırmış olur.

Satır Sonları
Paragrafı oluşturan satırların sonlarında kesme işareti kullanılmazsa oluşturulan paragraflar değişik tarayıcı boyutlarında değişik şekillerde görüntülenirler. Yani kesmelerle ayrılmamış satırlar ekran boyutuna göre kayarlar. Bunun için özenerek hazırladığınız metinlerin aynı biçimde tarayıcıda da görüntülenmesini istiyorsanız satır sonlarında <BR> belirtecini kullanmalısınız. Dreamweaver' da satır sonlarını belirtmek için Insert mönüsünden Line Break komutu seçilebilir. Böylelikle Dreamweaver imlecin bulunduğu konuma satır kesmesi koyacaktır. Ayrıca Objects penceresinin Character grubundan ikonuna tıklayarak ya da klavyeden SHIFT+ENTER tuş çiftine basarak da satırlarınıza kesme ekleyebilirsiniz.
Böylelikle satırlar sizin kesme eklediğiniz yerlerde bitecek ve yazma işlemi yeni bir satırdan devam edecektir. Eğer Edit mönüsü içinde yer alan Preferences diyalog kutusunda yer alan Invisible Elements alt grubundan Line Breaks sekmesine tik işareti konursa her kesmenin bulunduğu konuma bir ikon eklenecektir. Böylelikle satır kesmelerini nerelere koyduğunuzu görebileceksiniz.

Yatay Çizgi
Oluşturulan sayfalarda birbirinden farklı konulara deyiniliyorsa bu farklı konuları birbirinden ayırmak siteyi ziyaret edenler için daha anlaşılır bir dolaşım sağlayacağından bölüm çizgileri koymak yerinde olacaktır. Bunun için:
Objects penceresinin Common grubunda yer alan ikonuna tıklamak ya da
Insert mönüsünden Horizontal Rule komutunu seçmek yeterlidir.

W (Width): Bu alanı kullanarak çizginin boyunu belirleyebiliriz. İki seçenek söz konusudur. Birincisi pixels, ikincisi de percent. Pixels çizginin nokta cinsinden uzunluğunu belirtirken, percent ise çizginin tarayıcı ekranında yüzdelik olarak kaplayacağı alanı belirtir. Eğer uzunluk belirtilmezse varsayılan çizgi uzunluğu % 100' dür.
H (Height): Buradan çizgi kalınlığını girebiliriz.
Align: Çizginin sayfadaki konumunu (sağa hizalı, sola hizalı, ortalı) buradan belirleriz.
Shading: Çizgiye gölge verilip verilmeyeceği buradan belirlenir. Shading sekmesine tik işareti konursa çizgi gölgeli olarak düzenlenir.

Kelimeler Arasında Birden Fazla Boşluk Bırakma
Tasarım penceresindeyken yazdığımız kelimeler arasına birden fazla boşluk bırakamazsınız. HTML Kaynak kod penceresi'nde kelimeler arasında birden fazla boşluk bıraksanız bile bu boşlukların tarayıcı ekranından görüntülenmediğini biliyor olmalısınız. Burada aklımıza "o zaman birden fazla boşluk koymak istediğimizde ne yapacağız?". Yine bu işlem için de Dreamweaver' da değişik alternatifler mevcut. Kodlarla uğraşmaya gerek kalmadan bu yollardan herhangi birini kullandığınızda kelimeler arasında istediğiniz kadar boşluk bırakabildiğinizi göreceksiniz:
Insert mönüsü içinde yer alan Non-breaking Space komutu seçilerek yada
Klavyeden CTRL+SHIFT+SPACE tuşlarına basarak.

Metin Biçimlendirmeleri
Dreamweaver' da üzerinde en çok işlem yapacağımız pencere Properties diyalog kutusudur. Dreamweaver' ı kurduğumuzda karşımıza varsayılan Properties penceresi olarak aşağıdaki pencere gelir. Bu pencere yazacağımız metin üzerinde biçimlendirmeler yapabilmemiz için hazır haldedir.

Format
Bu kısımda None, Paragraph, Heading 1 ile 6 arasında başlık türleri ve Preformatted seçeneği bulunur.
None: Dreamweaver'ın varsayılan olarak kabul ettiği yazı modunda işlem yapılacağını belirtir.
Paragraph: yeni bir paragraf oluşturmak için kullanılır.
Heading: Heading satırları ile sayfalarımızda kullanacağımız başlık boyutlarını ayarlayabiliriz.
Preformatted: ise yazılan metnin olduğu gibi alınmasını sağlar. Diyelim ki sizler web sayfanızda HTML anlatacaksınız. HTML komutlarını ve parametrelerini kullansanız bile bunların kod olarak değil de normal yazıymış gibi algılanmasını sağlamak için bu seçeneği seçmek gerekiyor. Eğer bu gibi parçaları Preformatted seçeneğini kullanmadan yazacak olursanız o belirteçler işleme dahil edilecek sanki sayfaya ait kodlarmış gibi işlem yapılacaktır. İşte bunu engellemek için bu seçenek kullanılmalıdır. Bu özellik sayesinde hazırladığınız metinler olduğu gibi görüntülenecektir.

Font
Oluşturacağınız web sayfalarında tarayıcı ekranından görüntülenmesini istediğiniz yazı tipi listesini Default font listesinden seçebilirsiniz. Sayfaları tasarlarken her türlü yazı tipinden biraz kullanmak yerine hemen bütün bilgisayarlarda olabilecek yazı tipleri tercih edilmelidir. Aksi halde bizim bilgisayarımızdaki yazı tipleriyle mükemmel görünen sayfalar, başka bir bilgisayarın tarayıcı ekranında çok berbat görünebilir. Bu yazı tipi takımını belirlerken PC ve MAC tabanlı bilgisayarları ayrı ayrı göz önünde bulundurmalıdır. Örneğin "Arial" yazı tipi PC tabanlı bilgisayarlar için standart bir yazı tipiyken MAC bilgisayarlarda bulunmazlar. Aynı şekilde "Helvetica" yazı tipi de MAC bilgisayarlar için bir standarttır. O zaman biz font takımımızı belirlerken şöyle bir sıralama yapabiliriz.
"Arial, Helvetica, sans-serif".
Bu listeyi tanımlayacak olursak;
"Ben oluşturduğum sayfada yazacağım yazıların arial yazı tipinde görüntülenmesini istiyorum. Eğer bu yazı tipi yoksa o zaman helvetica yazı tipini dene. Eğer bu yazı tipi de yoksa bu fontlara benzeyen yazı tipleri grubu olarak tanımlayabileceğimiz sans-serif cinsinden bir yazı tipiyle görüntüleyebilir-sin."
Bu listeden Edit Font List... komutu çalıştırılırsa fontları isteğimize göre gruplandırabileceğimiz bir pencere açılır. Buradan istediğimiz yazı tiplerini öncelik sırasına göre sıralayabiliriz.

Cevap : Dreamweaver Hakkında Genel Bilgiler

Font Color
Font Color kavramı üzerinde biraz durmakta fayda var. Web sayfalarında kullanılan renkler 16' lık sayma sistemine göre yani hekzadesimal sisteme göre kodlanırlar. Kullanılacak renklerin genel tanımlaması "#RRGGBB" şeklindedir. Burada belirtilen her bir harf bir rakam yerine geçer. ilk 2 rakam kırmızının tonunu, ikinci iki rakam yeşilin tonunu ve üçüncü iki rakam da mavinin tonunu oluşturur. Bu sistem kısaca "RGB Formatı" olarak adlandırılır.
R ingilizce Red kelimesini karşılar, türkçe anlamı kırmızıdır.
G ingilizce Green kelimesini karşılar türkçe anlamı yeşildir.
B ingilizce Blue kelimesini karşılar türkçe anlamı mavidir.
Şimdi gelelim renkleri oluşturmaya:
Öncelikle şunun bilinmesinde fayda var. Diyelim ki 3' lük sayma sistemine göre bir sayının 3'e bölümünden kalan en fazla 2 olabilir. 7' lik sayma sistemine göre bir sayının 7' ye bölünmesinden kalan en fazla 6 olabilir. Buna göre 16' lık sayma sistemine göre de bir sayının 16' ya bölümünden kalan en fazla 15 olabilir. Hekzadesimal sayma sisteminde 10 ve 10' dan büyük kalanlar için harflendirme söz konusudur. Yani bir sayının 16' ya bölümünden kalan :
10 ise A
11 ise B
12 ise C
13 ise D
14 ise E
15 ise F harfiyle temsil edilir. O zaman biz renkleri oluştururken renklerin en saf halini elde etmek için F' yi kullanacağız. Örneğin kırmızı rengi "#FF0000" ile, yeşil rengi "#00FF00" mavi rengi de "#0000FF" ile göstereceğiz. Buradaki FF rengin saflığını belirtmekle birlikte bunların yerine başka değerlerde kullanılsa yine ait olduğu rengi verir. Ancak aynı rengin farklı tonları elde edilmiş olur.
"#FF0000" kırmızıdır.
"#BD0000" da kırmızıdır. Ancak ton farkı vardır.
Güneş ışığı beyaz olarak kabul edilir. Beyaz ışık prizmaya tutulduğunda bütün ana ve ara renklerin oluştuğu görülür. Bu işlemin tersi de doğrudur. Yani bütün ana ve ara renkler prizmadan geçirilecek olsa beyaz renk elde edilir. Yani kırmızı yeşil ve mavi renklerin eşit miktarda karışımı bize beyaz rengi verir. O zaman beyaz renk için "#FFFFFF" kodunu yazabiliriz. Resimle ilgilenen sanatçıların çoğuna göre siyah renk değildir. O zaman siyahı elde etmek içinde renk kullanmamıza gerek yok demektir. Yani siyah içinde "#000000" kodunu yazabiliriz. Son olarak renklerin farklı miktarlarda karıştırılmasından farklı renkler oluşur. Mesela sarı renk için kırmızı ile yeşili karıştırmak gerekir.

Bold: Bu özellik metni kalın yazmak için kullanılır.
Italic: Bu özellik metni eğik yazmak için kullanılır.
Alignment: Paragrafı hizalamak için kullanılan kısımdır. Eğer paragraf sola hizalanacaksa ikonuna, ortalanacaksa ikonuna, sağa hizalanacaksa ikonuna basılır. Eğer paragraf Microsoft Word' de olduğu gibi her iki yana da hizalı yazdırılmak isteniyorsa Dreamweaver' ın Properties penceresinin desteklemediği ancak CSS ile ya da "HTML Kaynak kod penceresi"nde yazabileceğimiz "justify" parametresi söz konusudur. Aşağıdaki kodlara bakabilirsiniz:
<P ALIGN= "justify">
.......................
......................
</P>

Paragraf Girintileri
Web sayfalarında kullanılan paragraf girintilerinden daha fazla girinti kullanmak istendiğinde ikonu, girintiyi azaltmak içinde ikonu kullanılabilir.

Extra Yazı Biçimlendirme İşlemleri
Dreamweaver' da özellikler penceresinde bulunan araçların dışında bu pencereye sığmayan bir dizi araç gereç Text Mönüsü içinde yer alan Style komutunda yer alır. İlgili mönüye giderek ya da metin üzerinde farenin sağ tuşuna basıp açılan mönüden yine Style komutunu seçerek buradan istediğimiz diğer araçları kullanabiliriz.

LİSTELER
Sırasız Listeler
Oluşturacağınız listelere sıra numarası vermenin bir önemi yoksa bu tip listeleri kullanabilirsiniz. Dreamweaver' da sırasız listeler oluşturmak için Properties diyalog kutusundan ikonuna tıklamalısınız. Böylelikle sırasız listeleri oluşturmaya başlamış olursunuz. Her bir liste elemanını belirtmek için ENTER tuşuna bastıkça Dreamweaver sizin belirttiğiniz işaretçiyle düzenlenmiş listeyi oluşturacaktır. Her bir liste elemanını diğerinden ayırmak için kullanılan satır başındaki madde işaretçileri isteğe bağlı olarak değiştirilebilirler. Bunun için Properties diyalog kutusunun List Item düğmesine tıklayarak Liste özelliklerini belirtebileceğiniz aşağıdaki pencerenin açılmasını sağlamalısınız.
Varsayılan sırasız liste işaretçisi olmasına rağmen isterseniz bu işaretçiyi işaretçisi ile değiştirebilirsiniz. O an aktif olan işaretçiyle başlayan yeni bir satıra geçtikten sonra düğmesine tıklarsanız işaretçinin içi boş yeni bir daireyle değiştirildiğini görebilirsiniz.

Cevap : Dreamweaver Hakkında Genel Bilgiler

Açıklamalı Listeler :
Bu tür listeler genellikle birden fazla başlığı olan ve her başlığın kendisine ait açıklama satırları olması gerektiği durumlarda kullanılır. Açıklamalı liste türünde başlıklar normal sayfa düzeninde yazılırlarken açıklama satırları biraz içerden başlarlar. Eğer sizde sayfalarınızda açıklamalı listeler oluşturmak istiyorsanız bunun için :
Text mönüsü içinde yer alan List alt başlığından Definition List seçeneğini seçerek,
Tasarım ekranı üzerinde herhangi boş bir yerde sağ tuşa basıp açılan kısa yol mönüsünden List/Definition List komutu çalıştırılarak,
Modify mönüsünüden List/Definition List komutu çalıştırılarak başlatılabilir.
Listeye ait başlık tanımlandıktan sonra açıklama satırı için ENTER tuşuna basmanız gerekir. Her ENTER tuşu kullanımda yeni bir açıklama başlığı ve açıklama satırı oluşturulmuş olur.

BAĞLANTILAR
"İnternetin internet olmasını sağlayan yapılardan belki de en önemlisi bağlantılardır" diyebiliriz. İnternet kullanıcıları bağlantılar sayesinde bir sayfadan bir başka sayfaya, oradan bir başkasına hatta bir bilgisayardan diğerine, bir ülkeden bir başka ülkeye rahatlıkla geçebilmekte istediği an istediği bağlantıyı tercih edebilmektedir. İşte internetin bugünkü konumunda çok önemli paya sahip bağlantılar konusunu bu bölümümüzde inceleyeceğiz.
Dreamweaver kullanarak her şey çok kolay ve seri yapılabildiği gibi bağlantılarda hemence oluşturulabilecek kadar basittir. İsterseniz öncelikle bağlantı çeşitlerini ve bu bağlantı çeşitlerinin muhteviyatlarını birlikte inceleyelim. Temelde bağlantıları 3 gruba ayırmak mümkün. Bunlar:
Sayfa içi Bağlantılar
Sayfalar arası Bağlantılar
Siteler arası Bağlantılar

Sayfa içi Bağlantılar
Web siteleri genelde birden fazla sayfadan oluşmasına rağmen tek sayfa halinde yayınlanan sitelere de rastlanır. Tek sayfa halinde yayınlanan sitelerde verilmek istenen şeylerin hepsi tek sayfada toplandığından sayfanın hacmi baya geniş olacaktır. Hatta tarayıcı ekranınızda yer alan kaydırma çubuklarını küçülmüş olarak göreceksiniz.
Eğer sizlerde böyle geniş içerikli fakat tek sayfa halinde siteler oluşturma niyetindeyseniz ve sitenizi ziyarete gelen insanların kaydırma çubuklarıyla uğraşmalarını istemiyorsanız sayfanızın değişik konumlarına bağlantılar oluşturmanız gerekecek demektir. Çünkü sitenizi ziyarete gelen her kullanıcı kaydırma çubuklarıyla aşağı-yukarı, sağa-sola kaymayı sevmeyebilir. O zaman bu gibi kullanıcıları göz önüne alarak siteyi tasarlarken sayfanızın değişik konumlarına bağlantılar oluşturmanız gerektiğini unutmayanız.
Eğer yukarıdaki paragrafı okuduktan sonra "Evet benim istediğimde buydu!. Ben de sayfa içi bağlantı vermek istiyordum" diyorsanız devam edelim.

Öncelikle sayfalarınızın istediğiniz yerlerinde ziyaretçilerin geleceği, dinleneceği duraklar oluşturulması gerekiyor. Bunun içinde:
Insert mönüsünden Invisible Tags/Named Anchor komutunu,
Objects penceresinin Invisibles alt grubundan [IMG]file:///C:/DOCUME%7E1/ADMINI%7E1/LOCALS%7E1/Temp/msohtml1/01/clip_image001.gif[/IMG]ikonuna tıklayarak
CTRL+ALT+A kısa yol tuşlarına basarak aşağıda gösterilen pencerenin açılmasını sağlarız.

Buraya yazacağımız isimle biz durağımızın ismini belirlemiş oluyoruz. Ancak burada bir şeyi belirtmekte fayda var. İsmi yazarken boşluk ya da türkçe karakterler kullanmamak gerekiyor. Eğer illa da birkaç kelimeden oluşan durak isimleri kullanmak istiyorsanız kelimeleri birbirinden ayırmak için _ (alt çizgi) kullanabilirsiniz. İsim verme işlemi bittikten sonra OK düğmesine basarak tekrar tasarım penceresine döndüğümüzde [IMG]file:///C:/DOCUME%7E1/ADMINI%7E1/LOCALS%7E1/Temp/msohtml1/01/clip_image002.gif[/IMG]ikonunun dikkatinizi çekiyor olması lazım.
Dikkat ederseniz bu ikon üzerinde gemilerde kullanılan çapa resmi var. Zaten Anchor kelimesinin türkçe karşılıklarından biri de "gemi demiri, çapa". Bu ikon durağımızın konumunu belirliyor. İsterseniz bu ikonu fareyle sürükleyerek bir başka yere taşıyabilirsiniz. Artık sayfa içi durağımızı konumlandırdıktan sonra sıra geldi bu durağa gidecek bağlantıyı oluşturmaya. Bunun içinde tasarım ekranında bağlantı oluşturacağımız metni, resmi ya da resmin bir alanını seçtikten sonra Properties diyalog kutusunun Link alanına # işareti ile birlikte durak ismini yazıyoruz.
Örneğimizde anchorumuzun isminin "top" olduğunu varsayarsak aşağıdaki şekilde bir bağlantı oluşturmamız gerekir.
Böylelikle sayfa içi bağlantımız oluşturulmuş oldu. Diyelim ki ziyaretçiyi bir bağlantı yardımıyla sayfanın en başından en dibine gönderdik. Geri nasıl gelecek? Bunun içinde çözüm olarak sayfa içinde durak belirttiğimiz konumların her birinin hemen yanında da sayfanın en başına gelecek bir link eklemek yerinde olur.

Sayfalar Arası Bağlantılar
Web siteleri genelde sayfalardan oluşmuşlardır. Sitelerde yer alan sayfaların birinden diğerine geçebilmek için sayfalar arası bağlantılar kullanılır. Web tasarımında en çok kullanılan ve bizimde kullanacağımız bağlantı biçimi sayfalar arası bağlantılardır. Yukarıda da belirtildiği gibi bağlantıları oluştururken sadece metinlere bağlantı vermeyiz. Metinlerden başka resimlere yada bir resmin herhangi bir alanına da bağlantı verebiliriz. Bağlantı oluşturulacak nesne seçildikten sonra bağlantı oluşturmak için 3 değişik yol kullanılabilir:
1- Properties diyalog kutusunun Link alanına bağlantı vermek istediğimiz dosyanın ismini direk olarak yazarak,
2- Link alanı yanında yer alan [IMG]file:///C:/DOCUME%7E1/ADMINI%7E1/LOCALS%7E1/Temp/msohtml1/01/clip_image003.gif[/IMG]ikonunu site penceresinde istenilen dosya üzerine sürükleyerek,
3-Ya da [IMG]file:///C:/DOCUME%7E1/ADMINI%7E1/LOCALS%7E1/Temp/msohtml1/01/clip_image004.gif[/IMG]ikonuna basıp açılan pencereden bağlantı verilecek dosya seçilerek.
Bu yollardan 3.sü ilk etapda bizim için daha kolay uygulayabileceğimiz yoldur.

Bu pencere üzerinde seçilecek dosyaya göre oluşturulan URL'nin "file:///C:/....." şeklinde olmamasına özellikle dikkat ediniz. Bu şekilde belirtilen linkler çalışmayacaktır. Ayrıca "Relative To" kısmında yer alan açılır liste kutusundan Document seçeneğinin aktif olmasına dikkat ediniz. Çünkü bu seçenek hazırlamış olduğunuz sayfalarınızın bağlantılarını site hiyerarşisini gözeterek oluşturur. Oysa Site Root seçeneğini seçmeniz durumunda oluşturulan bütün bağlantılar sitenize ait ana dizinin dışındaymışsınız gibi oluşturulur. Durumu daha iyi anlamak için örneklendirmekte fayda mülahaza ediyorum:
Diyelim ki bizim tasarladığımız sitenin Dreamweaver' daki adı "benimsitem" olsun. Bu sitenin dosyalarıda C:benimsitem klasörü içinde. Birde bu klasör içinde alt bölümlerin parça parça konulduğu alt klasörler var. Ve ben benimsitem klasörü içinde oluşturduğum bir bağlantı ile benimresmim klasörü içinde yer alan vesika.jpg dosyasına link vereceğim. Sonuçlar aşağıdaki gibi olacaktır.

Cevap : Dreamweaver Hakkında Genel Bilgiler

Siteler Arası Bağlantılar
Bir ziyaretçinin gezdiği dolaştığı sitelerden herhangi bir dosyaya ulaşabilmesi o dosyada istifade edebilmesi için bilmesi gereken 3 şey vardır. Bunlar:

1-Sitenin web üzerindeki adresini,
2-Aradığı dosyanın site üzerinde nerede bulunduğunu,
3-Dosyaya erişmek ve bilgileri almak için kullanılan protokolü

Bu bilgiler ışığında biz sitenin URL'sini ( Uniform Resource Locator ) öğrenmiş oluruz. Web sitelerinde hazırlanmış sayfaları tarayıcılarımızda görüntülemek için http (HyperText Transfer Protocol) kullanılmasına karşılık diğer protokollere de referanslar verebilirsiniz. Örneğin FTP ile ulaşılabilen bir dosyanın adresini sayfa içinde bağlantı olarak kullanabilirsiniz. URL tanımlamalarını şu şekilde genelleştirebiliriz:
Protokol://sitenin_adresi

ort/ulaşılacak_dosya
Web sitelerimizden başka sitelere bağlantılar oluştururken kullanabileceğimiz protokoller şunlardır :
FTP: Dosya Transfer Protokolü
Gopher: Gopher Protokolü
http: Hiper metin Transfer Protokolü
Mailto: Elektronik Posta Protokolü
News: Usenet haberleri
telnet: Uzaktan erişim oturumları
WAIS: Geniş alan bilgi sunucuları
File: Kendi bilgisayarımızdaki dosyalar

RESİM EKLEME
Uzman web tasarımcılarının çoğu; "oluşturulan sitelerin görsel tasarımından ziyade içeriğine önem verilmedir", "içerik kraldır", "tasarımın gücü basitliğindedir", "web'in tek kuralı basitliktir" gibi yaklaşımlar sergilerler. Bu gerçeği kabullenmekle birlikte bir siteye ilk defa gelen bir ziyaretçinin de içerikle birlikte görselliğe dikkat ettiği gerçeğini unutmamak lazım. Hâl böyleyken bizim görselliği ilk sıraya aldığımız, içeriği savsakladığımız düşünülmesin. Yerinde ve dozajında kullanılacak tasarım araçlarının siteye farklı bir hava vereceğini düşünüyoruz. İşte sizi farklılaştıracak bu tasarım araçlarının en önemlilerinden biri de resimler.
Web sitelerinizde kullanabileceğiniz resimler değişik biçimler arz etmekte. Çok farklı resim biçimleri olmasına rağmen sitelerinizde kullanabileceğiniz sınırlı sayıda biçim vardır. Bunlar GIF, JPG ve PNG' dir. Ne zaman hangi biçimdeki resimleri kullanmanız gerektiğine aşağıda yazılmış olan bilgileri okuduktan sonra karar verebilirsiniz.

RESİM BİÇİMLERİ
GIF Biçimli resimler
Graphics Interchange Format kelimelerinin kısaltılmışı olan GIF; Compuserve Information Servise tarafından geliştirildi. Bütün grafik tabanlı tarayıcı, resim düzenleme programları tarafından desteklenen bir biçim olduğundan şu an dünyada en çok kullanılan resim biçimidir diyebiliriz. GIF resim biçiminin günümüzde kullanılan 2 sürümü vardır:
GIF 87a: 1987 yılından bu yana kullanımdadır. GIF resimler LZW adı verilen özel bir sıkıştırma metodu kullanılarak görüntü kalitelerinden hiçbir şey kaybetmeden orijinal büyüklüklerinin yüzde 20 veya 25' ine küçültülebilirler. Küçük boyuttaki resimlerin yüklenmesi daha az ağ hızı gerektirdiğinden internetteyken yüklenmeleri de daha kısa sürede olur.
GIF 89a: Bu sürümün GIF 87a' dan farkı gif uzantılı resimlere saydamlık (transparent) özelliği verebilmesi ve gif uzantılı hareketli resimler oluşturmaya olanak sağlamasıdır. Böylelikle kullanıcılar tarayıcılarındaki zemin rengine uyum sağlayan resimler üretebilir, ya da animasyonlu resimler oluşturabilirler. Ayrıca bu sürümle resimlerin tarayıcı ekranından yüklendikçe görüntülenmesi, ya da ilk etapta resmi buğulu şekilde görüntüleyip yüklendikçe görüntüyü netleştirme özelliği de eklenmiştir.

GIF uzantılı resimlerin belki de en kötü özelliği 256 rengi desteklemesidir. Yapılacak çalışmalar GIF uzantılı kaydedilmek istendiğinde en fazla 256 renk kullanılabilir. Gerçi bu durum çoğu zamanda avantaj sağlayabilir. İnternette kullanılan resimlerin çoğu (düğmeler, başlıklar gibi) çok az sayıda renk kullanır. İşte bu gibi çalışmalar GIF biçiminde oluşturulursa hem daha az yer kaplayacak, hem de daha çabuk yüklenecektir.

PNG Biçimli resimler
Taşınabilir ağ grafiği (Portable Network Graphics) dosyası olarak tanımlanan, yeni bir bit mapped türü grafik biçimidir. LZW sıkıştırma teknolojisinin patentini elinde bulunduran Unisys, 1995 yılı başlarında GIF biçimi kullanan geliştiricilerden telif hakkı isteyince bu biçimi kullanan yazılım geliştiricilerinden çoğu alternatif olarak GIF 24 üzerinde çalışmaya başladılar. Diğer GIF sürümlerinin aksine 24 bit (16 milyondan fazla renk demek) rengi destekleyen bu sürümün PNG sıkıştırma tekniğini kullanması da bir çok yazılım geliştiricisini sevindirdi. Çünkü PNG formatının patenti ve lisansı ücretsizdi. Günümüz tarayıcılarında ancak plug-in ler vasıtasıyla görüntülenebilen bu format ilerde çokca kullanılacağa benziyor.

JPG Biçimli resimler
Joint Photographic Expert Group tarafından geliştirilen, sabit görüntüler için hazırlanmış bir resim biçimidir. JPEG fotoğraf kalitesinde görüntü elde etmek istediğinden 24 bit rengi destekler. Bu kadar fazla renk kullanımında görüntünün oluşabilmesi için ekran üzerindeki her pixel için 24 bitlik bir bilgi ayrıldığından bu tip resimlerin fazla yer kaplamaları beklenir. Ancak bünyesinde kullandığı güçlü sıkıştırma teknikleri sayesinde resimleri yüzde 20 ye kadar sıkıştırabilir. Bu sıkıştırma sırasında resi üzerinde görüntü kayıpları olması kuvvetle muhtemeldir. Çünkü sıkıştırma esnasında birbirine yakın renkleri tek renk olarak kaydeder. Gerçi bu durumda resmin harddiskte kapladığı alan azalır ama kaliteden de ödün verilmiş olur. Az renkle oluşturulmuş resimlerin sıkıştırılmasında JPG, GIF kadar iyi değildir. Bu yüzden JPG kullanılarak sıkıştırılan görüntü GIF kullanılarak yapılan sıkıştırmadan daha fazla yer kaplar.
Ancak yinede kullanıcı sayfalarında kullanacağı resimleri hem GIF hem de JPG olarak kaydedip bakmalı. Hangisi daha az yer kaplıyorsa onu kullanmalıdır. Hem ayrıca kullanılacak resimler tarayıcı ekranlarında test edilmeli, sonuçta göze hoş gelen kullanılmalıdır.

RESİMLER ÜZERİNDE YAPILAN İŞLEMLER
V (Vertical) Space / H (Horizontal) Space:
Bu alanlara pixel cinsinden yazılacak değerlere göre resmin kenarlarından boşluklar bırakılır. Böylelikle resimle yazıların çok içli dışlı olmaları engellenmiş olur. Eğer resmin üstünden ya da altından boşluk bırakılmak isteniyorsa "V Space" alanına, soldan ya da sağdan boşluk bırakılacaksa "H Space" alanlarına değerler yazılır.
Target:
Bu özellik genelde çerçeveli sitelerde kullanılmasına karşın yine de kullanılabilecek özellikleri de vardır. İsterseniz bunları sırasıyla görelim:
_blank: Vermiş olduğunuz linkin boş bir tarayıcı ekranında açılmasını sağlar.
_parent: İç içe birden fazla çerçeve yapısı oluşturulmuşsa verilen bağlantının ait olduğu çerçeve seti içinde açılmasını sağlar. Eğer böyle bir yapı söz konusu değilse çalışması _self gibidir.
_self: Varsayılan bağlantı biçimi olan _self verilen bağlantının aynı pencerede veya çerçevede açılmasını sağlar.
_top: Oluşturulan sayfalar çerçeve içeriyorsa verilen linkin bütün çerçeveleri kapatarak tek sayfa halinde açılmasını sağlar. Eğer sayfalarda çerçeve yoksa _self gibi çalışır.

Low Src:
Oluşturmuş olduğunuz sitelerde kullandığınız yüksek yoğunluklu resimlere alternatif olarak düşük yoğunluklu resimler kullanmak istiyorsanız buraya bir resme ait yol belirtilmelidir.

Border:
Dreamweaver' da eklemiş olduğunuz resimlere link verirseniz, aksi belirtilmediği sürece program resme otomatik olarak varsayılan link renginde bir çerçeve ekler. Bu çerçeveyi kaldırmak istediğinizde değer olarak 0 girilmesi yeterlidir. Eğer bu değer arttırılırsa çerçeve kalınlığı artar, değer küçüldükçe de küçülür.

Map:
Resimlerin tamamına değil de sadece bir kısmına link verilmek isteniyorsa link alanları oluşturmak gerekecektir. Bunun için bu alanda oluşturacağımız link alanına hem isim verebilir hem de aşağıdaki 3 değişik çizim modundan birini seçerek istediğimiz alanı oluşturabiliriz.

Edit:
Resim üzerinde düzenleme yapmak istediğinizde bu düğmeye tıklayarak Dreamweaver' ın bu tür resim dosyalarıyla ilişkilendirdiği programı otomatik olarak açabilirsiniz. İstenirse resimleri düzenlemek için seçilen bu program bir başka resim düzenleme programıyla değiştirilebilir. Bunun için "Edit" mönüsü içinde yer alan "Preferences" penceresine ait "File Types/Editors" grubunun kullanılması gerektiğini Bölüm 2' de sayfa 7' de anlatmıştık.

Reset Size:
Resmin orijinal boyutları tasarım penceresi üzerindeyken değiştirildiyse Reset Size düğmesine basarak resmin orijinal halini alması sağlanabilir.

ARKA PLAN RESMİ
Oluşturduğunuz web sayfalarının arka planlarında resim görüntülenmesini sağlayabilirsiniz. Arka plan resimlerinin yüklenmeyi ağırlaştıracağı konusuna girmeden bu tip resimlerin sayfalarınızın daha göz alıcı olmalarını sağladığını söyleyebiliriz. Arka plana ebatları büyük tek bir resim atayabileceğiniz gibi küçük boyutlarda bir dosyada tanımlayabilirsiniz. Resim arka planı tam olarak kaplamazsa otomatik olarak döşeli hale getirilecektir.

DREAMWEAVER'da ARKA PLAN RESMİ EKLEME İŞLEMİ
Dreamweaver' da arkaplan resmi ekleme işi çok kolaydır. Bunun için :
Sayfa üzerindeyken boş bir yerde farenin sağ tuşuna tıklayarak açılan kısa yol mönüsünden Page Properties" komutu seçilebilir
Klavye üzerinden CTRL+J tuşları kullanılabilir,
Modify mönüsü içinde yer alan Page Properties komutu seçilebilir.
Bu yollardan herhangi biri kullanıldığında karşımıza aşağıdaki pencere gelecektir.
Buradan "Background Image" alanının hemen solunda yer alan "Browse" düğmesine tıklanarak sayfalarınız için arka plan yapacağınız resim dosyasını bulmalısınız. Örnek bir resim dosyası ve sayfaya uygulanmış halini diğer sayfada görebilirsiniz.

DİĞER RESİM İŞLEMLERİ
ÜZERİNE GELİNCE DEĞİŞEN RESİMLER OLUŞTURMA
Sayfalarınızda kullandığınız resimlerinize özellikle de linklerinizi oluşturan düğmeler üzerinde bir dizi işlem yaparak daha göz alıcı siteler oluşturabilirsiniz. Üzerine gelince değişen resimler oluşturmak bu yollardan biridir. Bu tür bir çalışma oluşturabilmek için:
Insert mönüsü içinden Interactive Image/Rollover Image komutunu ya da
Object penceresinin Common alt grubundan Insert Rollover Image düğmesini çalıştırmalısınız.
Ekrana aşağıdaki pencere gelecektir.

Bu pencere üzerinde yer alan öğeleri inceleyelim:

Image Name: Buraya oluşturacağımız resim tanımlamasının ismini yazıyoruz.
Original Image: Saya yüklendiğinde ekrandan görüntülenecek resmi buradan belirliyoruz.
Rollover Image: Fare göstergeci resmin üzerine gelince görüntülenecek resmi buradan belirliyoruz. Eğer Preload Rollover Image sekmesine tik işareti konarak bu özellik aktif hale getirilirse ilk etapda görüntülenmeyen, daha sonra fare hareketine bağlı olarak görüntülenecek olan gizli resimlerinde yüklenmesi sağlanır.

When Clicked, Go To URL: Bu satırdan da resim üzerine tıklandığında çağrılacak web sayfasının konumu belirlenir.

RESİMLERDEN GEZİNTİ ÇUBUĞU OLUŞTURMA
Bir önceki sayada üzerine gelince değişen resim oluşturmasını öğrendik. Şimdiki çalışmamızda da aynısı yapacağız. Ama bir farkla. O da birden fazla resim seti tanımlayıp bunları aynı düzlem üzerinde yatay ya da dikey olarak bir çubuk halinde görüntüleyeceğiz. Öncelikle :
Insert Mönüsü içinden Insert Images/Navigation Bar komutlarını ya da
Object penceresinin Common alt grubundan Insert Navigation Bar düğmesine tıklamalıyız.
Her iki yoldan biri seçilerek aşağıdaki pencerenin açılması sağlanır.
Nav Bar Elemets: Gezinti çubuğumuzda yer alacak düğme tanımlamaları burada listelenir.
Element Name: Yapacağımız her bir düğme takımı tanımlaması için bir element ismi vermeliyiz
Up Image: Sayfa yüklenince görüntülenecek resim.
Over Image: Fare göstergeci resmin üzerine gelince görüntülenecek resim.
Down Image: Fareye tıklanırken görüntülenecek resim.
Over While Down Image: Fareye tıklandıktan sonra bırakılırken görüntülenecek resim. Genelde işlemin daha karışık olmaması için Down Image ve Over While Down Image satırlarından girilecek resmin aynı olması daha düzenli bir çalışma ortamı sağlayacaktır.
When Clicked, Go To URL: Buradan resme tıklanınca açılacak sayfanın konumunu belirtiyoruz.
Options kısmında yer alan Preload Images komutu aktif hale getirilirse sayfa yüklenirken görüntülenmeyen fakat fare hareketiyle görünür hale gelecek olan gizli resimlerinde yüklenmesini sağlar. Bu durum sayfa içindeki dolaşımı kolaylaştıracaktır. Eğer sayfa her açıldığında Up image resmi değil de tıklandıktan sonra görünen resmin yani Down Image' ın görüntülenmesi isteniyorsa Show "Down Image" Initially sekmesine tik işareti konmalıdır.

Insert açılır mönüsünden Horizontally seçilirse yatay düzlemde bir çubuk oluşturulur. Bunun yerine Vertically komutu seçilirse dikey düzlemde bir gezinti çubuğu oluşturulur.