Dreamweaver, web sitesi ve sayfalarını oluşturmayı ve yönetmeyi sağlayan bir programdır.

Transkript

1 Dreamweaver nedir? Ne işe yarar? Dreamweaver, web sitesi ve sayfalarını oluşturmayı ve yönetmeyi sağlayan bir programdır. Dreamweaver da yapmış olduğumuz işlemler HTML kodları ile kodlanır. Photoshop, Flash, Fireworks programlarıyla entegre edilebilir. Dreamweaver ı çalıştırmak Dreamweaver ı çalıştırdığımızda karşımıza açılış penceresi gelir. İlk önce Sitemizi tasarlayacağımız, Dosyalarımızı saklayacağımız, konumu belirliyoruz. Dreamweaver Site Site Name : Yeni sitemiz Local Site Folder-Browse Yeni Klasör oluştur Yeni sitemiz OK 1

2 Daha sonra resimlerimizi konumlandıracağımız dosyamızı tanımlıyoruz. Local Info Default Images Folder ( Browse ) Yeni Klasör oluştur resimler Kaydet Save Tanımladığımız sitenin konumu sağ taraftaki files (Dosyalar) panelinde yer alır. 2

3 Create New alanından HTML seçeneğine tıklayarak bir doküman açalım. Dosya ismi (Untitled-1) başlık çubuğunda belirecektir (Windows ta dosya adı, belge penceresinin üst kısmında bir sekmede gösterilir). Varsayılan durumda bu sayfa başlan gıçta Belge araç çubuğundaki Başlık, metin alanında gösterildiği gibi Untitled-1 ( Başlıksız-1 ) olarak adlandırılır. Sayfamıza metin ya da resim yerleştirmeyi beklemeden, yeni belgeleri açar açmaz sayfalarımızı kaydedelim. Dosyamızı zamanında kaydedersek, resim ya da başka medya elemanları aktardığımızda bu elemanların sitemizdeki konumlarını gösteren bütün yollar düzgün olarak oluşturulacaktır. File Save File Save ı:index Kaydet 3

4 Dosya ismi üstteki başlık çubuğunda index.html olarak belirecektir. Dreamweaver Penceresi Dreamweaver da üç tane görünüm modu mevcuttur: Kod (Code), Böl(split) ve Tasarım(Design). Code (Kod) görünümü : Sayfamızı oluştururken Dreamweaver otomatik olarak HTML kodlarını oluşturur.code görünümüne geçerek kodlarda değişiklik yapabilir veya yeni kodlar ekleyebiliriz. Split (Böl) görünümü : Çalışma alanı dikey olarak iki pencereye ayrılır ve sol tarafta Kod görünümü ve sağ tarafta Tasarım görünümü birlikte yer alır. Design (Tasarım) görünümü : Sayfamızın görsel bir görünümü yer alır. Üst kısımda çalışma alanı değiştirme penceresinden istenilen çalışma alanını seçeriz. Burada en fazla kullanılan çalışma alanı Classic seçeneğini seçelim. Insert (Ekle) araç çubuğunda tiplerine göre ayrılmış yedi grub yer alır: Common (Ortak), Layout (Mizanpaj), Formlar, Data, Spry, İnContext Editing, Text (Metin), Favorites (Sık Kullanılanlar). 4

5 Etkin grubun ismi menüde görüntülenir. Default (Varsayılan) durumda Common (Ortak) grubu etkindir. Menüyü kullanarak farklı bir nesne grubuna geçebiliriz. Bu gruplardaki farklı nesnelerin çoğunun ilâve araçlar, seçenekler ve ilişkili diğer nesnelerle birlikte kendi özel menüsü vardır. Sayfamızın altında, kullandığımız nesneler ve metinlerle ilgili özellikleri değiştirebileceğimiz Properties (Özellikler) panelini görebiliriz. Oluşturduğumuz her HTML belgesinin bir başlığı olmalıdır. Bu başlık öncelikle belgenin tanınması için kullanılır. Web tarayıcısının başlık çubuğunda görüntülenir, sayfanın içeriğini gösterir ve Sık Kullanılanlar (Favorites) listelerinde isim olarak görünür. Başlık (Title) bölümünde Başlıksız Belge olarak görünür. Bu başlığı sayfamıza uygun bir başlıkla (örneğin ana sayfa olarak) değiştirelim ve kaydedelim. WEB SAYFALARI İLE ÇALIŞMAYA BAŞLAMAK Boş yeni bir web sayfası açmak : File New Blank Page HTML none Create Boş yeni bir Şablon Oluşturmak : File New Blank Template HTML template none Create Oluşturulan şablon sayfasında tasarımlar yapıp şablon olarak kaydedelim. File Save As Template Save as : sablon Save 5

6 Artık doküman bir Template dir(şablon dur).adı sablon.dwt dir. Template (Şablon nedir)? Ne işe yarar? Template (Şablon), temel olarak kullanılan sayfadır. Web sitesi oluştururken bir çok sayfada aynı yapı kullanılır. Her sayfada aynı şeyleri yapmak hem zaman alıcı hem de sıkıcıdır. Oysa bir şablon oluşturup bu şablonu kullanarak aynı işlemleri tekrar tekrar yapmaktan kurtuluruz. Şablonda yapılan değişiklikler otomatik olarak güncellenir ve değişiklikler diğer sayfalara yansır. Şablonlar bir web sayfası gibidir. Bütün ögeleri ( metin,tablo,resim v.s.) kullanabiliriz. Şablon kaydedildiğinde.dwt şeklindedir. Site klasöründe Template klasöründe kaydedilir. Şablon 0luşturmak : öncelikli olarak boş bir HTML sayfası oluşturmalı ve bu sayfayı Şablon olarak kayıt etmeliyiz File Save as Template Site :Sablonlar Save as : sablon save update links evet Kaydedince FİLES paneline dikkat edersek Dosyamızın içinde Templates adında bir klasör oluşturulduğunu görürüz. Artık şablonumuz sitemize eklendi ve.dwt uzantısıyla Templates klasörüne kaydedildi. 6

7 Şablon ögeleri : Locked Region ( Kilitli Bölge ) : Değişiklik yapılamayan bölge. Editable Region ( Düzenlenebilir Bölge ) : Kilitli olmayan düzenleme yapılabilen bölge. Editable Region ( Düzenlenebilir Bölge ) oluşturmak için : Şablon sayfasında düzenleme yapmak istediğimiz hücreyi seçiyoruz.hücre seçili iken Insert Template Objects Editable Region Açılan pencerede name : duzenlenebilirbolge OK 7

8 Name kutusuna girdiğimiz isim seçilen bölgenin üst kısmında görülür. Bu, bu bölgenin düzenlenebileceğini gösterir. Optional Region ( İsteğe Bağlı Bölge ) : Insert Template Objects Optional Region tıkla name : istegebaglibolge OK Repeating Region ( Tekrarlanan Bölge ) : Editable Optional Region ( Düzenlene bilirliği İsteğe Bağlı Bölge ) : Repeating Table ( Tekrarlanan Tablo ) : Şablonları Kullanmak : Şablon temelli yeni bir doküman oluşturmak için : File New Blank Template HTML Template Bir şablonun oluşturulmasında ikinci adım, bu şablonu temel alarak oluşturulan belgelerde düzenlenebilir durumda olması gereken alanları tanımlamaktır. (Düzenlenebilir alanlar, belgenin şablon temel alınarak oluşturulan sayfalardaki değiştirilebilen bölümleridir.) Kural olarak, bir şablondaki bütün alanlar başlangıçta kilitli durumdadır. Şablonu kullanan sayfalardaki bilgileri değiştirmek istiyorsak, düzenlenebilir alanlar ya da bölgeler (Editable Region) oluşturmamız gerekir. Birçok Web sitesinde, bu bölgeler genellikle içerik alanlarıdır. Şablonda açıkça düzenlenebilir olarak tanımlanmayan her şey, şablonu temel alan sayfalarda kilitli durumdadır. Orijinal şablonu düzenlerken hem düzenleyebilir, hem de kilitli alanlarda değişiklik yapabiliriz; ama şablon kullanılarak hazırlanmış olan bir sayfada sadece düzenlenebilir bölgelerde değişiklik yapabiliriz. Bir şablona düzenlenebilir alan eklemek için şablon içinde içerik geliştiriciler tarafından düzenlenebilir alana imlecimizle tıklamamız yada bu bir tablo yada hücre ise bu nesneyi seçmemiz gereklidir. Bu seçimi yaptığımız alan düzenlenebilir alan olarak atandığında şablondaki değişikliklerden etkilenmeyecektir. Sadece bu alanın dışındaki bölgeler orijinal şablon değiştiğinde değişecektir. İstediğimiz alanı seçtikten sonra yapmamız gereken common (Ortak) sekmesinden Templates (Şablonlar) butonu altındaki Editable Region 8

9 (Düzenlenebilir Bölge) butonuna basmaktır. Böylece imlecimizin bulunduğu yer yada tablo artık düzenlenebilir bir alan olarak kullanılacaktır. Düzenlenebilir alanlarımıza anlamlı bir isim verirsek sonraki aşamalarımızda işimiz kolay olacaktır. Düzenlenebilir alan başlıkları görünmez nesnelerdir yani ziyaretçiler tarafından görünmezler. Varolan Dökümana Şablon Uygulamak Bir sayfa açıp içine bir şeyler yazalım ve kaydedelim(uygulanacaksayfa.html).bunu, var olan şablonun düzenlenebilir bölgesine eklemek için: Sağdaki Assest panelindeki Templates düğmesine tıklayıp sitede kullanılabilecek şablon listelerini görüntüleyelim. Listeden istediğimiz şablonu seçip Sağ tıklayıp açılan pencerede Apply Karşımıza çıkan pencerede sayfa içeriğimizin hangi bölgede yer almasını istiyorsak onu seçiyoruz OK 9

10 Artık sayfamız şablon uygulanmış bir sayfadır. Sayfa içeriğimiz şablonun düzenlenebilir bölgesinde yer alır. Burada düzenleme yapabiliriz, ancak diğer bölgeler kilitli olduğu için bir şey yapamayız ve sayfamızın adı yeni şablona göre uyumlaştırılmıştır. Not : İnternetten hazır siteyi almak için; html indir masa üstüne klasör açıp içine kaydediyoruz ( indirilen site ) bu klasörü Dream weaver de açıyoruz siteyi tanımlıyoruz örü seç kaydet images Browse sss images kaydet sitemiz alındı,şimdi artık sitemizi değiştirebiliriz index.html aç Şablonumuzdan Sayfalar Üretmek Şablonumuzu yaptık. Bu şablonu internette yayınlayamayız. Çünkü (.html) uzantılı dosyalar internette yayınlanıyor. Bunun için bunu index.html ye dönüştürmeliyim. File New Page from Template Yeni site sablonumuz create 10

11 Soru : Optional region örneği,1 sütun 3 satırlık tablo yapıyoruz. Yazı tipi : Ravie 18px.Alt satır Editable region olacak,sayfanın BG rengi olacak,hücrelerin ayrı ayrı rengi olacak ve bunu template olarak kaydedeceğiz. Modify page properties istenen özellikler verilir. File save as template save as:basliksiz save Resim, Ana Sayfa da ve Hakkımızda sayfasında gözüksün,iletişim sayfasında gözükmesin. Şablonda resmi tıklayıp etkinleştiriyoruz insert template objects obtional region Name:derininfotografi OK 11

12 Resmin görülmesini istemediğimiz sayfaya, Örneğin İletisim.html sayfasına gidiyoruz. Üst menüden Modify template properties show derininfotografi yazısının tikini kaldıracağız Soru : Resmin kalktığı yerde başka bir resim gözüksün. İlk önce basliksiz.dwt adlı şablon sayfamızda, Optional Region yapacağımız yere resimleri ekliyoruz. 12

13 1nci resmi (Derin) seçip insert Template Objects Optional region 2nci resmi (Enis) seçip insert Template Objects Optional region Save All dedikten sonra iletişim.html sayfasını açıp Modify Template Properties Enis show Derin don t show Save all Düzenlenebilir Bölgeyi silmek için,şablonda Editable Region a tıklayıp Del tuşuna basıyoruz. STİLLER İLE ÇALIŞMAK Sayfamızdaki metinleri stiller ile düzenleyip hepsine birden uygulayabiliriz. Gerektiğinde stilde değişiklik yaparak tüm metinlerin biçimlendirmesi değiştirilebilir.bir stil, bir dokümandaki metin, grafik, başlık, tablo v.s. ögeleri kontrol eden biçimlendirme özellikleri grubudur. CSS (Casceding-Basamaklı / Stil / Sheets ) aynı anda bir çok dokümanı kontrol etmek için kullanılır. CSS kodları <head> kodları arasında açılır CSS stillerini kullanmak aşağıdaki kolaylıkları sağlar : Stilin bir özelliğini değiştirmek, aynı anda stilin uygulandığı tüm metin gruplarında görülebilir. HTML stiline göre CSS stili birden fazla dokümana bağlanabilir. Bir CSS stili değiştirildiğinde, bu stili kullanan tüm dokümanlarda otomatik olarak güncellenir. SAYFAMIZIN STİLİ Modify (Değiştir) Page Properties(Sayfa Özellikleri) Category -Appearence(CSS) :Buradan sayfamızın genelinde kullanılacak yazıların fontu, büyüklüğü, yazıların rengi, yazıların arka plan rengi v.s. gibi özellikleri düzenleyebiliriz. 13

14 Modify (Değiştir) Page Properties(Sayfa Özellikleri) Category- Appearence(HTML) : CSS panelinin altındaki yeni CSS kuralı (New CSS Rule) butonuna basalım. Karşımıza yeni stil oluşturma penceresi çıkacaktır. Dremaweaver içinde kullanabileceğimiz 4 çeşit stil vardır. Bunlar Class (Sınıf) :Herhangi bir HTML ögesine özel bir stil uygulamak içindir. Class lar, başlarına konan nokta işaretiyle gösterilirler. Örneğin h1 başlığı için bir stil tanımlanmış olsun. Ancak bazı h1 başlıklarına farklı stil uygulamak istiyoruz. Bu durumda Class stili tanımlanır ve farklı stil uygulanmak istenen h1 başlıkları seçilerek, tanımlanan stil uygulanır. ID (Kimlik) : Belirli bir niteliği içeren stil uygulamak için kullanılır. Bir diyez işaretiyle (#) gösterilirler. Tag (Etiket) : Bu seçici tipi, stil tarafından yeniden tanımlanacak olan bir eleman olarak bir HTML etiketinin görsel özelliklerini belirlememizi sağlar. Etiketin varsayılan görünümü stil tarafından değiştirilir. Compound (Bileşik) : Bu seçici tipi, özel etiket birleşimleri için kullanılan stiller oluşturmanızı sağlar (bağlamsal seçiciler). Bu seçici tipi ayrıca ID ler oluşturmamızı sağlar ve önemli bir istisna dışında Class lara benzerler: ID ler belirli bir elemanı benzersiz bir şekilde tanımlama 14

15 yöntemi olarak sayfa başına sadece tek bir kez kullanılabilirler. Benzersiz yapılarından ötürü ID ler genellikle script yazma amacıyla kullanılır ve bir diyez işaretiyle (#) gösterilirler. Class türü bir stil oluşturmak için aşağıdakileri yapalım: Sadece dahili bir stil oluşturacaksak o zaman açılan pencere içinde This document only (Sadece bu belge) seçeneğini seçmeliyiz. Ad alanına bu stile vermek istediğiniz ismi yazmalıyız. Yazmış olduğumuz ismin başına bir. nokta koyarak ismi yazabiliriz. Nokta işaretini koymasak da Dreamweaver bunu bizim için koyacaktır. Eklediğimiz Stilleri Kullanmak Stil olarak eklediğimiz Class ları sayfamızın içinde kullanmak için onların etki edecekleri metinleri seçmeliyiz. Bu işlem için sayfamızın içinde bir metni ya da başka bir nesneyi işaretlemeli ve ona oluşturmuş olduğumuz stili seçerek yeni görünümünü vermeliyiz. Yazıyı işaretledikten sonra PROPERTİES panelindeki Stil penceresinden eklemiş olduğumuz bu stili seçmeliyiz. Bu stili CSS panelinde değiştirdiğimizde sayfa içinde uygulandığı her yerde değişecektir. 15

16 Bir Stili Değiştirmek Stilde değişiklikler yapmak için: CSS STYLES panelinden değişiklik yapmak istediğimiz stile tıklayıp onu seçiyoruz.daha sonra Edit Rule düğmesine tıkladığımızda karşımıza Css Rule Definition iletişim kutusu gelir.bu kutuyu kullanarak istediğimiz değişikliği yapabiliriz. Bir Tag (Etiket) İçin Stil Oluşturmak Eğer sayfamızın içinde bir Tag ın (etiketin) geçtiği yerlerdeki özelliklerini bir seferde düzenlemek istiyorsak o zaman, o etiket için bir stil tanımlayabiliriz. Bunu yapmak için yeni stil ekleme butonuna bastıktan sonra tag (Etiket) seçeneğini seçmeli ve buradan hangi etiket için işlem yapacaksak onun seçili olduğundan emin olmalıyız. Örneğin dokümanlarınızın içindeki tüm paragrafların bizim seçtiğiniz şekilde gözükmesini istiyorsak o zaman açılan menüden p etiketini seçmeliyiz. Örnek: tüm linklere css uygulayalım ve linklerin altındaki çizgi kalksın. New CSS Rule Tag a OK Category Type Text-decoration none OK Örnek : Yeni bir sayfaya arka plan rengi vereceğiz New CSS Rule Tag body OK Back ground color Line height : Hücre içindeki satırlar arası genişlik. Text transform : tamamı küçük,büyük,başlıklar büyük yazılar. Upper case : tamamı büyük Lower case : tamamı küçük Capitalize : Sadece ilk harfler büyük Not : free iconlar,flash lar v.s. 16

17 Not : Resmi görüntüde sabitleyip, sayfa yukarı aşağı indirilip çıkarılsa bile resim Back Ground da hep aynı yerde çakılı kalması için New CSS Rule Bg image Browse resim seçiyoruz Background-attachment : fixed Apply OK Block kategorisi : Word spacing : kelimeler arası boşluk. Letter spacing : harfler Vertical align : dikey hizalama Text align : Hücre içindeki yazıyı ortalar,sağa sola yaslar Resim ekleyince yanına yazılacak yazının yerini belirlemek için resme CSS uyguluyoruz. Resmi seç New CSS Rule ı:resim vertical align : ne istiyorsak Box kategorisi : Padding : Hücre içinin dış kenarlığa uzaklığı Margin : hücrenin dışarıdaki nesnelere olan uzaklığı Div in üst taraf sıfırlaması için body nin tag ini sıfırlamalıyız. Div i sayfaya ortalamak için margin right : auto ; left : auto 17