DREAMWEAR WEB SAYFASI NASIL YAPARIZ? Gülin ÜTEBAY Bilgisayar Mühendisi

... konulu sunumlar: "DREAMWEAR WEB SAYFASI NASIL YAPARIZ? Gülin ÜTEBAY Bilgisayar Mühendisi"— Sunum transkripti:

1 DREAMWEAR WEB SAYFASI NASIL YAPARIZ? Gülin ÜTEBAY Bilgisayar Mühendisi

2

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ı yazar 3.Yazı rengini buraya tıklayarak değiştirebilirsiniz. 4.Yazı büyüklüğünü değiştirir 5.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 özellikleri 10. Paragrafı içeri almak yada sola almak. Sayfada yazdığınız yazıların renk, boyut, font ve daha birçok özelliğini değiştirmeniz mümkün. Bu değişiklikleri Properties panelini kullanarak yapabilirsiniz. Tabiki özelliklerini değiştireceğiniz yazıyı önce fare ile seçmeniz gerekiyor. aşağıda properites panelini yazı ile ilgili özellikleri gösteren hali ile ve burada hangi işlemleri nereden yapabileceğinizi görüyorsunuz.

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. Sayfanın arkaplan(background) rengini değiştirmek yada arkaplana resim koymak. Sayfanın arkaplan rengi Dremweaver MX te default olarak beyazdır. Bu rengi değiştirmek için Page Properties penceresini açmak gerekir. Bunun için ya Modify menüsünden yada sayfaya sağ tuşla klikleyerek Page Properties penceresini açın

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.)? Burada biz html sayfaları oluşturacağımız için No ile başlayan seçeneği seçiyoruz zaten default olarak No seçilidir.  Eğer herhangi bir klasör seçmezseniz Dreamweaver MX site isminiz ile bir klasör

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 Karşımıza gelen pencerede ki combo box'ta default olarak None seçeneği seçili olabilir biz buradan FTP seçeneğini seçiyoruz. FTP seçeneğini seçtiğimiz anda pencere değişecektir. Bu penceredeki alanları yandaki gibi kendi bilgilerinizle doldurmanız gerekiyor. sonrasında Next butonunu tıklıyoruz.

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ız daki 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ün den 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 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ı linkler 2-İnternette bir siteye link (mesela yahoo yada hotmail sayfasına) 3-Ziyaretçinin size mail gönderebilmesi için linkleri 4-Sayfa içi linkler

13 1-Site içinde sayfalar arası linkler
Yandaki şekle dikkatli bir şekilde bakarsak index.htm 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 gizli. Bir ana sayfaya alt sayfaların bağlantısını yapmak. Tabi ki alt sayfalardan ana sayfaya yada daha alt sayfalara bağlantı yapmak da mümkün. Bu işlemi  My Computer den Localdisk C' yi seçerek oradan da sembolüne tıklayarak veya 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. Ama biz işi fazla karmaşılaştırmadan bu şekildeki gibi bir bağlantıyı nasıl yapacağımızı görelim. Ö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, bunu site tanımlama adımında anlatmıştık. Ama site tanımlamadan da web sitesi yapmak isteyebilirsiniz bu durumuda yeni bir klasör oluşturmakla işe başlamak gerektiğini hatırlatmış olduk. Bu arada şunuda söylemek lazım ana sayfamız olacak olan giriş sayfasının ismi mutlaka index olmalı.Alt sayfalar için böyle bir şart yok ama alt sayfaların ismi içinde uyulması gereken bazı kurallar var. 1-Dosya isimlerinde küçük harf kullanılmalı 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.

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 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 Eklemek Sayfamızda 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 Gönderin gibi) ve bu yazıyı fare ile seçtikten sonra properties panelinde link kutucuğuna gibi adresimizi yazıyoruz ve enter tuşuna basıyoruz İkinci 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 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 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 çıkartmak için klavyeden Alt Gr tuşu ile birlikte 3 tuşuna basınız.)Şimdi sayfamızı kaydedip İnternet Explorer 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. 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. 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 Üç 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 tablonun sol ü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ğiniz bir sitili seçin... Tablonuzun yada herhangi bir hücrenin arka planı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ğimizi belirlemeye 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
Ş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 ne kadar 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