DREAMWEAR

1. DREAMWEAR WEB SAYFASI NASIL YAPARIZ? Gülin ÜTEBAY Bilgisayar Mühendisi Email:utebay@aku.edu.tr

3. 1.Insert (Ekle) Paneli: Web sayfamıza eklemek istediğimiz hertürlü nesneyi(resim, tablo, flash. vb) bu panel yardımı ile ekleriz. Gizlemek istediğinizde Insert yazısı üzerine tıklayarak paneli gizleyebilir ve yine aynı şekilde gösterebilirsiniz. Paneli kapatmak için Window menüsünden Insert yazısının üzerine tıklamak yeterlidir yine aynı şekilde açabilirsiniz. • 2.Properties (Özellikler) Paneli: Bu panel web sayfanız eklediğiniz nesnelerin özelliklerini gösterir ve bu özellikleri değiştirmenize izin verir. Gösterip gizlemek için ve kapatıp açmak için aynı Insert Panelindeki işlemleri yapmanız gerekmektedir. Bu panel her seçilen nesneye göre şekil değiştiren bir paneldir default değeri ise yazıların özelliklerini değiştirecek şekildedir. • 3.Diğer Paneller: Bu paneller Window menüsündeki diğer panellerdir. Bunları gösterip gizlemek için resimde 6 numara ile gösterilen yere tıklamanız yeterlidir. Kapatıp açılmaları için ise Window menüsünü kullanınız. Bu panellerin görevleri ilerideki derslerde yeri geldiğinde anlatılacaktır. • 4.Document (Belgeler) Paneli: Bu panel kapatılamaz ve gizlenemez sadece bulunduğu yerdenbaşka bir yere taşınabilir. Bu panelde kod ve tasarım görünümü ayarlamaları, sayfa başlığı ve yardım gibi temel öğeler bulunmaktadır. • 5.Bu bölüm açık olan sayfalar içinde gezinti yapabileceğiniz bölümdür.

4. Dreamweaver MX'te Sayfaya İçerik Eklemek -Dremweaver MX' te bir yazı yazdınız ve Enter tuşunu bastığınızda bir satır boşluk verecektir, siz boşluk vermek istemiyorsanız Shift tuşu ile birlikte Enter turşuna basın.-Dremweaver MX' te Space (boşluk) tuşuna bastığınızda sadece bir boşluk verebilirsiniz, birden fazla boşluk vermek için Ctrl + Shift + Space tuşlarına birlikte basmanız gerekmektedir.İsterseniz bu iki olayıda panellerden gerçekleştirebilirsiniz. Bunun için Insert panelinden Caracters buradan da aşağıdaki resimde gördüğünüz düğmelere basmanız gerekiyor.

5. Sayfaya yazdığımız Yazıların Ayarları 1. Sağa, sola, ortaya yada iki yana hizalama işlemlerini yapar.2.Bold ve Italik (kalın ve yatık) yazı yazar3.Yazı rengini buraya tıklayarak değiştirebilirsiniz.4.Yazı büyüklüğünü değiştirir5.Yazı fontunu değiştirmeye yarar.6.Hazır sitillerden kullanabilirsiniz.7.Yazıya link vermek isterseniz buradan verebilirsiniz.8.Link in açılacağı yer buradan ayarlanabilir.(hedef)9.Madde imleri ve numaralandırma özellikleri10. Paragrafı içeri almak yada sola almak.

6. Sayfanın Arka Plan Ayarları 1.Sayfanın başlığını değiştirmeye yarar 2.Arka plana resim yerleştirmek için kullanılır 3.Arka plana düz bir renk vermek isterseniz burayı kullanmanız gerekiyor.Burada bilmeniz gereken eğer arka plana bir resim yerleştirirseniz arka plan rengi artık gözükmez 4.Dikkatinizi çekti ise yeni açılan bir Dremweaver MX sayfasında yazılar default olarak siyah yazılır fakat siz yeni yazdığınız yazının farklı bir renkte olmasını istiyorsanız buradan bir renk belirtmeniz yeterlidir.

7. Dreamweaver MX'te Site Tanımlama İşlemi 1.Adım: Site menüsünden New Site seçeneğini seçin. 2.Adım:Siteye istediğiniz bir isim verin ve sonra Next butonuna basın. 3.Adım: Oluşturacağınız sitede server teknolojileri kullanacakmışsınız (asp, php, asp.net vb.)?

8. Dreamweaver MX'te Site Tanımlama İşlemi 4.Adım:Sitenizin dosyalarının bulunacağı klasörü belirleyin. 5.Adım:Sitemizi internette yayınlamak için FTP bilgilerinin girilmesi

9. Dreamweaver MX'te Site Tanımlama İşlemi 6. Adım: Siteyi tasarlayan kişi sayısı birden fazla ise her seferinde Server'dan diğer kişi yada kişilerin yaptığı değişikleri bilgisayarınızdaki site ile karşılaştırma özelliği, biz burada yine No seçeneğini seçiyoruz. 7.Adım: Site tanımlama işlemini bitirmek

10. Dreamweaver MX'te Site Tanımlama İşlemi Bazen tanımladığınız sitede değişiklikler yapmak isteyebilirsiniz. O zaman yapmanız gereken ya Site menüsünden yada Files panelindeki Site bölümünden Edit Site seçeneğini seçmek. Buradan değişiklik yapmak istediğimiz siteyi seçiyor ve Edit butonuna tıklıyoruz. yukarıdaki anlattığımız site tanımlama adımları karşınıza sırasıya geliyor. Tabiki önceden girdiğiniz bilgilerle beraber. burada istediğiniz değişikliği yaptıktan sonra Done diyerek işlemi bitiriyorsunuz.

11. Dosyaları İnternete Göndermek • Sitenizi internette yayınlayabilmek için önce Server bilgisayara bağlanmanız gerekir.Bunun için Files panelinden Site bölümündeki connect butonuna tıklayarak bağlantıyı kurmanız gerekir. Sonra dosyaları gönderebilmek için aynı yerden Expand / Collpase tuşuna tıklayın. Karşınıza aşağıdaki pencere gelecektir. • Burada sol taraf Server sağ taraf ise kendi bilgisayarınızdır. İnternete yüklemek istediğiniz dosyaları seçip Put files butonuna tıklayın.Dosyalar internete yüklenecektir. İnternetten dosya indirmek içinde get files butonunu kullanabilirsiniz. İşiniz bittiğinde tekrar Expand / Collpase butonuna tıklayarak normal Dreamweaver MX ekranına dönebilirsiniz.

12. Dreamweaver MX'te Linkler • Linkler yani bağlantılar bir web sitesi oluşturabilmek için bilinmesi gereken en önemli konudur. Bildiğiniz gibi internette ki siteler sadece bir sayfadan ibaret olmuyor bazen onlarca bazen yüzlerce bazen de 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 gerekir.       Biz linkler konusuna girerken daha çok kendi sitemiz içerisinde başka bir sayfaya bağlantı yapma meselesi üzerine konuştuk ama işin daha başka boyutları olduğunu hatırlatmak lazım sanırım. Mesela sayfanızdan internette ki bir siteye link vermek isterseniz farklı bir metot yada size e-mail gönderebilmeleri için bir link yapmak isterseniz başka bir metot veya sayfanız içinde bir bölümden başka bir bölüme link vermek isterseniz yine başka bir metot kullanmanız gerekecektir. 1-Site içinde sayfalar arası linkler2-İnternette bir siteye link (mesela yahoo yada hotmail sayfasına)3-Ziyaretçinin size mail gönderebilmesi için e-mail linkleri4-Sayfa içi linkler

13. 1-Site içinde sayfalar arası linkler Yandaki şekle dikkatli bir şekilde bakarsak index.htm isimli bir anasayfa ve buna bağlı diğer üç sayfa bulunduğunu göreceğiz. İşte site içi linklerin temel mantığı bu resimde gizli. 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.

14. Sayfalarımızı yandaki gibi tek tek oluşturup klasörümüze kaydettiysek index.htm sayfasını Dreamweaver da açalım.Daha sonra link vermek istediğimiz yazıyı yada resmi aşağıdaki gibi seçelim. sonra yine yandaki ş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ı yandaki gibi seçelim. Sonra Select butonuna yada klavyeden 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 gerçekleştiriyoruz yada linkleri klasörden seçmeyip link vereceğimiz yeri yukarıdaki gibi seçip Link yazan yere elle de yazabiliriz

15. Site Dışı Linkler Web sayfamızdan internettki 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 Afyon Kocatepe Üniversitesi'ne link vermek istersek link kısmına http://www.aku.edu.tr yazmanız yeterli olmayacak ve linkiniz çalışmayacaktır. . Eğer verdiğiniz linkin yeni bir pencerede açılmasını istiyorsanız target olarak _blank'i seçmeniz lazım

16. Email Eklemek 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 Bana E-mail Gönderin gibi) ve bu yazıyı fare ile seçtikten sonra properties panelinde link kutucuğuna mailto:destek@aku.edu.tr gibi adresimizi yazıyoruz ve enter tuşuna basıyoruz İkinci e-mail linki ekleme metodu iste Insert 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 Insert panelinden Common bölümünden 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 veya Ok 'e basıyoruz.

17. Sayfa İçi Linkler • Bazen web sayfalarımız çok uzun olabilir bu gibi durumlarda sayfamızın kolay kullanılabilir olmasını sağlamak için sayfada bir bölümden diğer bir bölüme, sayfanın sonundan başına link vermemiz gerekebilir Bunun için önce sayfada link vereceğimiz bölümlere işaret koymamız gerekiyor. İşaret koyacağı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 karakter kullanmamaya dikkat edelim.sonra da yine enter tuşu yada OK.

18. Şimdi işaret koyduğumuz yere sayfanın istediğimiz yerinden link verebiliriz. Link vermek için link vereceğimiz yazıyı seçelim Properties panelinde link kutucuğunaşeklinde kare ve sonrasında da az önce çapaya verdiğimiz ismi yazıyor ve enter tuşuna basıyoruz. (kare işaretini çıkartmakiçin klavyeden Alt Gr tuşu ilebirlikte 3 tuşuna basınız.)Şimdi sayfamızı kaydedip İnternetExplorer da test edebilirsiniz..

19. TABLO KULLANIMI • Web sayfanıza yeni bir tablo eklemek için yapmanız gereken objects (nesneler) panelinden insert table butonuna bir kez 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. Üç satır ve üç sütundan oluşan tablomuz yukarda ki gibi ekrana gelmiştir

20. Tablomuzun üzerinde değişiklik yapmaya geldi(mesela satır sayısınıdeğiştirmek hücrelerin genişliklerini değiştirmek 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.... 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ğinizbir sitili seçin...Tablonuzun yada herhangi bir hücrenin arkaplanına resim ekleyecekseniz önce sayfanızın kaydedilmiş olması gerektiğini unutmayınız..

21. FRAMELER (Çerçeveler) 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şturmanın yolu sayfada frame kullanmaktan geçer. 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

22. Ş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...

23. Frameler arsındaki çerçevelerin kalınlığı ve framelerin geniş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...

24. ŞABLON EKLEMEK Bir web sayfasında aynı yazıları arka planları farklı sayalarda sık sık kullanırız bunu her sayfada tek tek tanımlamak yerine şablonları kullanabiliriz.Şablonları kullanmak için yeni bir html sayfası açıp bunu FILE Menüsünden Save As Template komutunu çalıştırıyoruz. Ekrana aşağıdaki gibi bir diyalog penceresi geliyor Save as bölümüne bir isim verip kaydedip çıkıyoruz şablonumuz hazır Şimdide bu şablonu diğer sayfalarda nasıl kullanacağız hazırlamış olduğumuz şablon Site içinde Templates adında bir klasörün oluşmuş olarak görebilirsiniz.Burdan çift tıklayarak .dwt uzantılı şablonumuzu açıp değişiklik yapmak istediğimiz yere imlecimizi koyuyoruz ve mause sağ tuşuna basarak TEMPLATES –NEWEDITABLE REGIGON komutunu çalıştırarak gelen menü ye değiştirilebilir alan diye bir başlık tanımlıyoruz bu alan browserımız da çerçevelenmiş olarak görebilirsiniz, ve bu alana istediğiniz veriyi girdikten sonra sayfanıza isim verip kaydetmeniz yeterli.

25. CSS EKLEMEK CSS sayfalarda birden çok font ve renk ayarı yapmamk için bir css tanımlar bütün sayfalarda kullanabiliriz,Bunun için de No CSS Style üzerine gelip sağ tuşa tıklayarak New CSS Style yaptığımızda yandaki gibi bir pencere açılıyor açılan pencereye css için bir ad tanımlıyoruz( yalnız verdiğimiz ismin başında nokta olması gerekiyor )ve kaydediyoruz Daha sonra açılan pencerede font ,renk…vb gibi ayarları tanımlaya bilirsiniz.

26. Css Nasıl Çalışır? Yan resimde Gördüğünüz gibi bir font isminde css tanımlanmış yapmanız gereken browserımızdan Bu ayarları uygulayacağınız metni seçip font.css ,Üstüne çift tıklamak yeterli artık düzenlemiş olduğumuz font.css metnimiz üzerine aktarmış oluyoruz