Temel Öğeleri Bu dersimizde dreamweaverin temel öğelerini tanıyacağız ve basit bir web sayfası oluşturmayı öğreneceğiz. Bu işlem için öncelikle Dreamweaver'ın arayüzünü ve ilk etapta kullanacağımız panelleri tanıyalım Eğer Word kullanmayı biraz biliyorsanız Dreamweaver' da temel yazı yazma ve nesne ekleme işlemlerini yapacağımız beyaz ekran sizi fazla şaşırtmayacaktır. İlk sayfamızı bu alana birkaç text yazarak ve bu textin rengini büyüklüğünü değiştirerek yapacağız yani tamamen word teki işlemler ile aynı. Burada gördüğünüz gibi ana bir ekran ve iki adet panel görmektesiniz. bu panellerin yanındaki açıklamalardan da anlaşılacağı gibi birisi Properties(özellikler) ve diğeri de Object(nesneler) paneli. Pencerenin en üst kısmında da Title yazan alana sayfamızın başlığını yazıyoruz.  Eğer Object ve Properties panellerini kaybederseniz Window menüsünden tekrar yandaki gibi aktif hale getirebilirsiniz. Veya bu panellerin seçili olduğu halde ekranda görünmemeleri gibi bir durum ile karşılaşırsanız Window menüsünün altlarında göreceğiniz Arrange Panels butonuna basmanız panellerinizi geri kazanmanız için yeterli olacaktır. Diğer karşılaşacağınız bir problem de Türkçe harfleri yazamamak olacaktır bu sorunu çözmek için yapmanız gereken ise edit menüsünden Preferences butonuna basmak ve aşağıdaki adımları takip etmek olacaktır.Bu ayarlamaları yaptıktan sonra Dreamweaverden birkez çıkıp tekrar girmeniz sorunu çözmek için yeterli olcaktır.  Bu problemi de çözdükten sonra sıra geldi bir web sayfası yapmaya.... bu iş için önce sayfanıza bası yazılar yazın mesela bu benim ilk web sayfam hoşgeldiniz gibi. bu yazıları yazdıktan sonra Özellikler panelini kullanarak yazımızın rengini büyüklüğünü ve fontunu değiştirelim. Hizalama butonlarını kullanalım veyazımızı istediğimiz tarafa yaslayalım. Bu işlemden sonra sıra sayfamızın arkaplan rengini değiştirmeye geldi tabiki illada benim sayfam beyaz olacak demiyorsanız. bu iş için iki yol var ya ekranda boş biryerde farenin sağtuşuna tıklayarak karşınıza çıkan menüden Page Properties'i yda Modify menüsünden Page Prorerties'i tıklayın sonuç aynı yere çıkacaktır. Buradan da sayfanızın başlığını değiştirebileceğininzi fark etmişsinizdir sanırım. Ayrıca bu resimde şimdilik anlamını bilmediğimiz bazı şeyler var ama önemli değil zamanı geldiğinde öğreneceğiz. Bütün bu işlemlerden sonra sayfamızı kaydedelim ve internet explorer dan bir görelim. Eğer bir problem yoksa sıra şimdi de sayfamıza resim eklemeye geldi ki bu dersimizin son konusu bu. Önce Object panelinden yandaki gibi insert image butonunu tıklayalım. Karşımıza aşağıdaki pecere çıkacaktır. Bu pencere bizim sayfaya ekleyeceğimiz resimi seçmemize yardımcı olan ve resmi görmemizi de sağlayan bir penceredir. Resmimizi seçelim ve Select butonuna basalım. Burada dikkat etmemiz gereken iki husus var; 1.Ekleyeceğimiz resim kaydettiğimiz web sayfası ile aynı klasörde olmalı 2.Resim ekleyeceğimiz sayfa önceden mutlaka kaydedilmiş olmalı Eklediğimiz resmin özerine fare ile birkez tıklayarak resmi seçebilir sonrada resmimizin boyutlarını kenarlardaki siyah karecikleri kullanarak değiştirebiliriz. Resmi seçtiğimizde aynı zamanda Properties yani özellikler panelimizin görünümü değişecektir. Şimdi bu paneli kullanarak resmimize çerçeve ekleyebilir yada fare üzerine geldiğğinde resim hakkında bilgi veren açıklama yazısı ekleyebiliriz. Yine yazılarda olduğu gibi sağa sola yaslama ve ortalama işlemeleri de yapabiliriz. Linkler Linkler yani bağlantılar bir web sitesi oluşturabilmek için bilinmesi gereken en önemli konudur. Bildiğiniz üzere geçen dersimizde sadece tek bir web sayfası yamıştık. Taktir edeceğiniz gibi internetteki siteler sadece bir sayfadan ibaret omuyor bazen onlarca bazen yüzlerce bazende binlerce sayfadan oluşan sitelere rastlamanız mümkün. Bu kadar sayfayı ana bir çatı altında toplamak ve bu sayfalar arasında geçişler yapabilmek için linkleri iyi bir şekilde öğrenmek gerekiyor. biz linkler konusuna girerken daha çok kendi sitemiz içerisinde başaka bir sayfaya bağlantı yapma meselesi üzerine konuştuk ama işin daha başka boyutları olduğunu hatıratmak lazım sanırım. Mesela sayfanızda intenetteki bir siteye link vermek isterseniz farklı bir method yada size e-mail gönderebilmeleri için bir link yapmak isterseniz başka bir metod veya sayfanız içinde bir bölümden başka bir bölüme link vermek isterseniz yine başka birmetod kullanmanız gerekecektir. Site içinde sayfalar arası linkler Yandaki şekle dikkatli bir şekilde bakarsak index isimli bir ana sayfa ve buna bağlı diğer üç sayfa bulunduğunu göreceğiz. İşte site içi linklerin temel mantığı bu resimde gzli. Bir ana sayfaya alt sayfaların bağlantısını yapmak. Tabiki alt sayfalardan ana sayfaya yada daha alt sayfalara bağlantı yapmak da mümkün. Ama biz işi fazla karmaşılaştırmadan bu şekildeki gibi bir bağlantıyı nasıl yapacağımızı gösterelim isterseniz. Öncelikle ilk yapmanız gereken sitenizi oluşturacağınız ve tüm resim ve dosyalarınızın içinde bulunacağı bir klasör oluşturmak. Bu işlemi sembolüne tıklayarak yada File menüsünden New Folder ifadesini seçerek sonra karşımıza gelen şeklindeki yeni klasörün ismini şeklinde kendi ismimizde yada istediğimiz bir isimde değiştirerek yapacağız. Bu işlem bittikten sonra sitemizde kullanacağımız tüm resimleri bu klasörün içerisine kopyalamamız lazım. Daha sonra da sitemizin ana sayfasını ve alt sayfalarını teker teker oluşturarak aynı klasörün içerisine kaydetmemiz gerekiyor.Bu işemleride tamamladıysanız sıra geldi sayfaları birbirine bağlamaya. Bu arada şunuda söylemek lazım ana sayfamız olacak olan giriş sayfasının ismi mutlaka index.html şeklinde olmalı.Alt sayfalar için böyle bir şart yok ama lat sayfaların ismi içinde uyulması gereken bazı kurallar var. 1-Dosya isimleri küçük harfle oluşturulmalı 2-Dosya isimlerinde ş,ı,ç,ğ,ü,ö gibi türkçe karakterler kesinlikle kullanılmamalı 3-Dosya isimleri birden fazla kelimden oluşuyorsa kelimeler arasında boşluk bırakılmamalı bu kurallara uymanız linklerin sağlıklı bir şekilde çalışması için gereklidir. sayfalarımızı yandaki gibi tek tek oluşturup kalsörümüze kardettiysek index.html sayfasını Dreamweaver da açalım.Daha sonra link vermek istediğimiz yazıyı aşağıdaki gibi seçelim. sonra yine aşağıdaki şekilde olduğu gibi özellikler panelinde Link yazısının karşısındaki klasör resmine birkez tıklayalım Şimdi karşımıza "Selcet File" isimli bir pencere gelecek gelecek bu pencereden bağlantı yapmak istediğimiz dosyayı aşağıdaki gibi seçelim. ve enter tuşuna basalım. Link verdiğimiz yazının rengi değişecek ve altı çizilecektir. Aynı şekilde diğer link vermek istediğimiz yazıları da tek tek seçip aynı işlemleri tekrarlayalım. Tüm linkleri yaptıktan sonra alt sayfalarımızı Dreamweaver'da açarak sayfaların en altına yazmış olduğumuz ana sayfaya dönüş yazısını seçerek index.html dosyasına link verelim. Link verilen yazıyı seçtiğinizde özellikler penceresinde yandaki resimde gördüğünüz gibi link vermiş olduğumuz dosya nın adı ve uzantısını görürsünüz. Eğer linkinizde herhangi bir hata varsa bu yazıyı silerek link işlemini tekrarlayınız. Daha sonra da linklerin çalışıp çalışmadığını test etmek için My Computer'den Hard diski oradan da Klasörünüzü seçin klasörün içinden de index.html. isimli dosyayı seçip Enter tuşuna bastığınızda sayfanız Internet Explorer da gösterilecektir burada linklerinize tıklayarak test ediniz. Linklerinizi düzgün yaptıysanız yazının üzerine geldiğinizde fare imleci el şeklini alacaktır. Bu bu yazıda bir link olduğu anlamıdan gelir. Şimdi fareyi tıkayın ve link verdiğiniz sayfaya gidin buradan da ana sayfaya dönüş için yaptığınız linke tıklayarak ana sayfaya dönün. evet bu iş bu kadar....Sıra geldi diğer linklere... Site Dışı Linkler Web sayfamızdan internetteki bir sayfaya link vermek istediğimiz sitemiz dışına bir bağlantı yapmamız gerekir. bu tür bir bağlantı yapmak için link vereceğimiz sitenin ismini sayfamıza yazalım. Sonra bu yazıyı fare ile seçerek properties yani özellikler panelinde Link yazısının karşısındaki kutucuğa sitenin tam adresini yazalım. Burada dikkat etmemiz gereken bir husus var, Örneğin Fatih Üniversitesi'ne link vermek istersek link kısmına www.fatih.edu.tr yazmanız yeterli olmayacak ve linkiniz çalışmayacaktır. Adresi tam olarak http://www.fatih.edu.tr şeklinde yazmamız gerekiyor. yandaki örneğe bakarsanız bunu daha iyi anlayabilirsiniz. bu örnekte dikkatinizi çekmesi gereken bir nokta daha var bu da "Target : _blank " ifadesi. Eğer verdiğiniz linkin yeni bir sayfada açılmasını istiyorsanız target olarak _blank'i seçmeniz lazım. Bu genellikle internete verilen linklerede sık kullanılan bir özelliktir. E-mail Linkleri Web sayfalarında görmüşsünüzdür sayfayı tasarlayan kişi genellikle " E-mail Gönderin, Bize Yazın, Görüşlerinizi yazın vb." şeklinde yazılar ile kendisine e-mail atılmasını ister ve siz bu linke tıkladığınızda bilgisayarınızda Outlook programınız çalışır ve gönderilecek kişi kısmında o kişinin e-mail adresi yazar bu hemen hemen herkesin başına gelmiştir sanırım. İşte bu şekilde linklerin nasıl yapıldığını bu bölümde öğrenmeye çalışacağız. Sayfamızda e-mail linki oluşturmanın iki yolu var birinci yol; aynı internette bir siteye link verdiğimiz zaman yaptığımız gibi link vereceğimiz yazıyı yazıyoruz (mesela E-mail Gönderin gibi) ve bu yazıyı fare ile seçtikten sonra properties panelinde link kutucuğuna mailto:mbasti@fatih.edu.tr gibi adresimizi yazıyoruz ve enter tuşuna basıyoruz. Aynı aşağıdaki şekilde gördüğünüz gibi... İkinci e-mail linki ekleme metodu iste object panelini kullanmak.Bu daha kolay bir yöntem. Bunun için sayfada herhangi bir yazı yazmıyoruz sadece mail linkini vermek istediğimiz yere fareyi konumlandırıyoruz sonra object panelinden insert E-mail link butonuna basıyoruz. buradan da karşımıza aşağıdaki pencere gelecek bu pencerede üst tarafa linkin yazısını alt tarafa da email adresimizi yazıyoruz. Ve enter tuşuna basıyoruz. Sayfa İçi Linkler Bazen web sayfalarımız çok uzun olabilir bu gibi durumlarda sayfamızın kolay kullanılabilir olamsını sağlamak için sayfada bir bölümden diğer bir bölüme, sayfanın sonundan başına link vermemiz gerekir.(örneğin bir bu sayfada bu teknik kullanılmıştır.) Bunun için yapmamız gereken önce object panelimizin görünümünü değiştirmek olacaktır. Sonra sayfada link vereceğimiz bölümlere işaret koymamız gerekiyor. İşaret kyacağımız yere fareyi konumlandırdıktan sonra çapa işaretine tıklıyoruz karşımıza aşağıdaki gibi bir pencere gelecektir. Bu pencerede Name yazan yere bir isim vermemiz gerekiyor bu isimde türkçe karekter kullanmamaya dikkat edelim.sonra da yine enter... Şimdi işaret koyduğumuz yere sayfanın istediğimiz yerinde link verebiliriz. Link vermek için link yazısını seçelim (biz sayfanın sonunda başına link verdiğimizi varsayıyoruz.) Properties panelinde link kutucuğuna şeklinde diyez ve sonrasında da az önce çapaya verdiğimiz ismi yazıyor ve enter tuşuna basıyoruz. (diyez işaretini çıkartmak için klavyeden Alt Gr tuşu ile birlikte 3 tuşuna basınız.) Şimdi sayfamızı kaydedip internet explorer da test edebilirz.. Web Sayfasında Tablo Kullanımı WEB SAYFASINDA TABLO KULLANIMI Web sayfanıza yeni bir tablo eklemek için yapmanız gereken objects (nesneler) panelinden insert table butonuna birkez tıklamak... Bu işlemden sonra karşımıza ekleyeceğimiz tablonun özelliklerini belirtmemiz gereken aşağıdaki gibi bir pencere çıkacaktır . bu pencerede tablomuzun satır ve sütun sayısı gibi bilgileri girdikten sonra ok tuşuna basalım. Tablomuz sayfamıza eklenecektir. Şimdi sıra eklediğimiz tablonun özelliklerini değiştirmeye daha doğrusu geliştirmeye geldi. Tablomuzun özelliklerini değiştirmeden önce sayfaya niçin tablo ekleriz konusuna gelelim. Bir web sayfasında tablo iki amaç için kullanılır; 1.) Word ve Excel de ne amaçla kullanıyorsanız onun için. Yani sayfamızda tablo şeklinde gösterdiğimizde daha kolay anlaşılacak olan bir veri var ise bunu tablo kullanarak gösteririz.Örneğin aşağıdaki tablo gibi... Sanırım buna benzer tabloları word te de kullanmışsınızdır.eğer bu tür hiç tablo görmediyseniz kendinizi fazla yormayın ve vakit erken iken siz bu web tasarımı işinden vazgeçin:-)) 2.) Tabloların ikinci kullanılış amacı ise web sayfalarının dizaynını kolaylaştırmak ve tabloyu bir dizayn aracı olarak kullanmaktır. Mesela bir web sayfasında resimleri ve yazıları aynı anda yan yana kullanmak istiyorsunuz bu gibi durumlarda tablolar en büyük yardımcılardır. Ama burada dikkat edilmesi gereken en önemli nokta bu tabloların border’larının (çerçeve) sıfır olmasıdır. Aşağıda bu tür tablolara bir örnek görüyorsunuz... Bu tablonun çerçevelerine dikkat ederseniz kesik çizgilerden oluştuğunu görürsünüz. Bu çizgiler İ. Explorer da görünmez. Çünkü Border değeri (çerçeve) sıfırdır. Şimdi de sıra tablomuzun üzerinde değişiklik yapmaya geldi(mesela satır sayısını değiştirmek hücrelerin genişliklerini değişitirmek hücrelerin arka plan renkleri ile oynamak vb) değişiklik yapmak için önce tabloyu seçmeniz lazım. Tabloyu seçmek için tablonunsol üst köşesine gelin ve fare dört taraflı ok işareti şeklinde iken tıklayın. aşağıdaki gibi bir özellikler pencereniz olacak.... Bu penceredeki her değeri teker teker değiştirin ve tablonuzdaki değişiklikleri gözlemleyin... Burada tablonuz ile ilgili yapamayacağınız değişiklik yoktur... Bütün bu işlemlerden sonra sayfanızı kaydedip internet tarayıcınızdan görebilrisiniz... Not - 1: Tablonuzun özelliklerini aynı word te olduğu gibi AutoFormat özelliğini kullanarak değiştirebilirsiniz. Bunun için tabloyu seçin ve Commands menüsünden Format seçeneğini tıklayın ve buradan beğendiğiniz bir sitili seçin... Not - 2:Tablonuzun yada herhangi bir hücrenin arkaplanına resim ekleyecekseniz önce sayfanızın kaydedilmiş olması gerektiğini unutmayınız.. Frameler WEB SAYFASINDA FRAMELER (Çerçeveler) Web sayfalarında frameler bir browser penceresinde (yani internet explorer vb.) birdan fazla web sayfasını aynı anda göstermektir. Daha önce girdiğiniz web sayfalarında muhakkak görmüşsünüzdür bazı web sayfalarının bazı bölümleri sürekli sayfada sabit olarak durur özellikle sayfanın menü kısmı ve üstte bulunan reklam banner kısmı buna en güzel örnektir. İşte bu tür bazı yerleri hiç değişmeyen sayfalar oluşturmamnın yolu sayfada frame kullanmaktan geçer. Web sayfanızı framelere ayırmak için yapmanız gereken objects (nesneler) panelinden Common yazısının hemen yanındaki aşağıya doğru küçük ok işaretine bir kez tıklamak... Bu ok işaretine tıkladığınızda karşınıza bir menü gelecek buradan "Frames" seçeneğini seçin. Frames seçeneğini seçtiğimizde karşımıza hangi tür bir frame seçeceğimizibelirlemeye yarayan pencere gelecektir. Burada tek yapmanız gereken size uygun bir frame çeşidini seçmek.Frame çeşidini seçtiğinizde sayfanız hemen framelere ayrılacaktır. Bu işlemden sonra DW ekranında gördüğünüz her bir çerçeve ayrı bir web sayfasıdır aslında. Şimdi bu sayfaların teker teker bd color larını değiştirirseniz hepsinin bir birinden bağımsız sayfalar olduğunu daha iyi anlarsınız. Şimdi sıra geldi sayfamızı kaydetmeye. Eğer siz eğer üç parçadan oluşan bir frame modeli seçtiyseniz görünen 3 adet ve de görünmeyen bir adet olmak üzere toplam 4 web sayfası kaydetmeniz gerekir. (Görünmeyen dediğimiz sayfa bu frameset dediğimiz kontrol sayfasıdır. Bu üç sayfa görünen üç sayfanın ekranda nekadar yer kaplayacağını ayarlayan ve bu sayfaları birarada tutan sayfadır.) Kaydetme işlemi için File menüsünden Save All Frames demek sayfayı ilk defa kayıt ediyorsak en mantıklı yoldur. DW size o anda handi sayfayı kaydettiğini kaydettiği sayfayı çerçeve içerisine alarak gösterecektir (ilk önce kontrol sayfası, sonra mainframe, ...) buna göre sayfalara mantıklı isimle vererek kayıt işlemini tamamlayın. Sayfamızı tasarladıktan sonra sıra geldi linklerimizi vermeye... Link vermek için önce link verebileceğimiz sayfaların ve frameli sayfanın menü için kullanacağımız frame' inde linkin yazılarının hazır olması lazım. Yazıyı seçtikten sonra link verip sonrada link yazısının hemen yanındaki "Target " bölümünden "main frame" seçeneğini seçerseniz linkin ana pencerede açılmasını sağlarız bu işlemi yapmazsanız linkiniz menünün bulunduğu pencerede açılacaktır ki buda hiç hoş olmayan bir görünüm ortaya çıkarır. Target bölümünden _blank parametresi linki yeni bir pencere olarak açar _parent paremetresi de linkimizi ana pencerede (yani frameler kabolur onun yerinde) açmaya yarar... Frameler arsındaki çerçevelerin kalınlığı ve framelerin geneşliği ile ilgili ayarlama yapmak içinde sayfada frame çerçevelerinden birisine tıkladığınızda properties paneli aşağıdaki şekli alır buradan çerçevenizin ve çerçeve arasındaki çizgilerin özelliklerini değiştirebilirsiniz...