Sunum yükleniyor. Lütfen bekleyiniz

Sunum yükleniyor. Lütfen bekleyiniz

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

Benzer bir sunumlar


... 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 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. Sayfaya yazdığımız Yazıların Ayarları

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 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.)? Dreamweaver MX'te Site Tanımlama İşlemi

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

9 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 Dreamweaver MX'te Site Tanımlama İşlemi

10 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. Dreamweaver MX'te Site Tanımlama İşlemi

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 linklerSite içinde sayfalar arası linklerİnternette bir siteye link (mesela yahoo yada hotmail sayfasına)Ziyaretçinin size mail gönderebilmesi için linkleriSayfa 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.

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 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. Eklemek

17  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. Sayfa İçi Linkler

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. Üç satır ve üç sütundan oluşan tablomuz yukarda ki gibi ekrana gelmiştir

20 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.. 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....

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


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

Benzer bir sunumlar


Google Reklamları