İlk olarak web sitemizi yapmak için dreamweaver programını çalıştırıyoruz ve aşağıdaki gibi bir ekran karşımıza geliyor.
Burada hangi programlama diliyle program yazacaksak (html, php, javascript, asp, coldfusion vb.) onun üzerine tıklıyoruz . Biz html site yapacağımızdan html yazısının üzerine tıklıyoruz ve aşağıdaki ekran açılıyor.
Evet şimdi web sitemizi yapmaya başlıyoruz. İlk olarak yapacağımız web sitesini kaydediyoruz ve anasayfası olsuduğunda adını index.html olarak kaydediyoruz.
Dosya menüsünden save seçeneğine tıkladığımızsa yukarıdaki ekran karşımıza gelecektir. Burada dosya adına index.html yazıp kaydet butonuna tıklıyoruz ve web sayfamızı kaydetmiş oluyoruz.
Şimdi arkaplan rengini veya istersek resimini ayarlayalım. Bu işlem için aşağıdaki adamları izleyebilirsiniz.
İlk olarak alt taraftaki properties penceresinden page properties butonuna tıklıyoruz.
Burada ise background color ile arkaplan rengini background image seçeneği ilede arkaplanda bulunmasını istediğimiz resmi seçebilir. Bu işlemleri yaptıktan sonra OK butonuna tıklayarak yaptığımız değişiklikleri onaylıyoruz.
Evet işte sayfamız yukarıdaki hali aldı şimdi ise sayfamızda bulunacak olan linklerin özelliklerini değiştirelim. Bu işlem için yine page properties botununa tıklıyoruz.
Daha sonra ise açılan pencerede sağ tarafta bulunan menlerden ikinci sırada olan links yazısında tıklıyoruz ve yukarıdaki ekran açılıyor.
Burada;
Link Font : Web sitemizdeki linklerin fontlarını seçmemizi sağlar.
Link Color: Sitede bulunan linklerin rengini belirler.
Visited Links : Daha önceden ziyaret edilmiş olan linklerin rengi.
Rollever Links : Üzerine tıkladığımzda linkin alacağı renk.
Active Links : Üzerine geldiğimizde linki alacağı renk.
Underline Style Şeçeneği ise;
Always Underline : Linkler her zaman altı çizgili olsun.
Never Underline : Linkler hiçbir zaman altı çizgili olmasın.
Show Underline only on rollever : Sadece Mouse üzerine gelince altı çizgili olsun.
Hide Underline on rollever : Normalde altı çizgili olsun üzerine gelince çizgi kalksın.
Bu bilgileri kendi web sitemize uygun olarak dolduruyoruz ve OK butonuna tıklıyoruz.
Şimdi ise web sitemizin başlığını belirleyelim.
Evet üst kısımda gördüğünüz title boşluğuna sitenizin başlığını ekleyebilisiniz.
Şimdi web sayfasındaki yazıların fontlarını belirleyelim.
Bu işlem için yine page properties e giriyoruz ve en üstteki page font seçeneğinden istediğimiz yazı tipini şeçiyoruz. Seçtikten sonra ise OK butonuna tıklıyoruz.
Şimdiye kadar arkaplan rengi, link özellikleri, yazı tipleri ve site başlığı gibi web sayfamızın bazı özelliklerini yatık. Şimdi ise web sayfamızın tasarım kısmına geçiyoruz.
Web sayfamızı tablolarla yapacağımızdan ilk olarak sitemizin logosu ve banneri koymak için bir 1 sütun ve 1 satırlık bir tablo oluşturuyoruz.
Tablomuza eklemek için common seçeneğinden table iconuna tıklıyoruz. Ve aşağıdaki pencere açılıyor.
Rows : Oluşturacağımız tablodaki satır sayısı.
Colomns: Oluşturacağımız tablodaki sütun sayısı.
Table width: Tablo genişliği (pixels veya percent)
Border thickness: Tablo kenarlığının pixels cinsinden değeri.
Cell padding : Hücre ile içerik arasındaki mesafe.
Cell spacing : Hücreler arası mesafe.
Bu ayarlamaları yatıktan sonra OK butonuna tıklayarak yaptığımız değişiklikleri kaydediyoruz. Bu arada şuna söyleyelim cell padding ve cell spacing değerlerini boş bırakırsanız çalıştırdığınız tarayıcı onları kendi varsayılan değeri olarak algılayacaktır.
Oluşturduğumuz tablo sayfamızda bu şekilde görüntüleniyor. Şimdi ise tabloyu sayfamızda ortalayalım.
Bu işlem için ilk olarak ortalamak istediğimiz tabloyu Mouse yardımıyla seçiyoruz ve properties panelinde aling seçeneği altındaki center ı seçiyoruz ve tablomuz sayfada ortalanmış oluyor.
Tablonun içine resmimizi atmak için eğer site tanımlamışsak sağ tarafta bulunan files panelinden istediğimiz resmi mouse yardımıyla seçip tablonun içine sürekleyip bırakmalıyız.
Ve artık banner koyma işlemini tamamladık şimdi ise menülerimizi yapalım. Bunun için yine tablolardan yararlanacağız.
Bu sefer ise 1 satır ve 5 sütundan oluşan bir tablo ekledik. Siz kaç tane menü kullanmak istiyorsanız o kadar sütun ekleyebilirsiniz. Bu ayarlamaları yaptıktan sonra OK butonuna tıklıyoruz. Dikkat ederseniz cell padding ve cell spacing değerlerini girmek ve sonucu nasıl olduğunu isterseniz bir bakalım.
Dreamweaver’ın design kısmından baktığımızda böyle bir görüntü elde ediyoruz. Şimdi menülerimizi yazalım.
Şimdi ise menülerimizi yazalım.
Tablo içine bir şey yazmak için yazacağımız alanın üzerine bir kez tıklıyoruz ve istediğimiz yazıyı yazıyoruz. Şimdi tablonun alanlarının arkaplanını değiştirelim.
Tabloda arkaplanını değiştirmek istediğimiz alanları ilk olarak mouse yardımıyla şeçiyoruz ve properties panelinden bg seçeneğinden istediğimiz rengi seçiyoruz. Tablo arkaplanını da değiştirdik şimdi sitenin son halini bir görelim..
Şimdi ise menulerde yazdığımız yazılara link verelim..
Menülere link vermek için önce link vermek istediğimiz yazısı mouse yarmıyla seçiyoruz ve altta properties panelinden link seçeneğine adresi yazıyoruz enter tuşuna basıyoruz. Bu işlemi diğer menüler içinde tekrarlıyoruz. Göreceksiniz ki yazıların rengi değişmiş. Bu onların link olduğunu gösteriyor. Hangi renk olması gerektiğini daha önce ayarlamıştık.
Şimdi bir tablo daha ekleyelim ve buraya ise sitemizin içeriği ve copyright bölümü olsun.
Bu sefer ise 2 sütun ve 2 satırdan oluşan ve kenarlığı (border) 1 olan bir tablo ekledik.
Şimdi son satır olan copyright bölümü olacağından 2’ye ayrılması gerekmektedir.Onları birleştirelim.
Bu işlem için yine mouse ile birleştirmek istediğimiz alanları seçiyoruz ve properties panelinden merges selected cells usign spans şeçeneğine tıklıyoruz.
Tablo içine yazı yazmak istediğimizde o alanın ortasından yazmaya başlıyor. Oysa ki biz en baştan yazmasını mı istiyoruz. O zaman;
Bu işlem için yazıyı yazmak istediğimiz alanın içine bir kez tıklayarak properties panelindeki vertical dan top şeçeneğini seçiyoruz.
Yazacağımız yazıların tablo duvarıyla bitişik olmasını mı istiyoruz. O zaman;
Bu işlemi yapmak istediğimiz tabloyu seçiyoruz ve yine properties panelinden CellPad seçeneğine ne kadar uzaklaştırmak istiyorsak o değeri yazıyoruz ve enter tuşuna basıyoruz.
Şimdi içeriğimizi yazmaya başlayalım. İçerik yazarken başlıları tanımlamamış gerekir.
Bu işlem için başlığımızı yazıyoruz ve mouse yardımıyla seçiyoruz. Daha sonra ise properties panelinden format seçeneği altındaki Heading değerlerinden uygun olanını seçiyoruz. Heading değeri büyüdükçe yazının büyüklüğü küçülür. Yani çok büyük bir başlık yapmak istiyorsak Heading 1, çok küçük bir başlık yapmak istiyorsak ise Heading 6 yı seçmeliyiz.
Şimdi ise yazımıza bir resim eklemek istiyoruz nasıl mı ? İşte..
Eklemek istediğimiz resmi files panelinden mouse ile tutup tablonun içine bırakıyoruz.. Şimdi bu resmi ekledik ama başlığımızsa aşağıya indi nasıl düzelteceğiz derseniz. İşte..
Resmimizi seçiyoruz ve properties panelinden align şeçeneği var ordan right (sağ) veya left (sol) seçenekleri var onlardan hangisini istiyorsak seçiyoruz ve resmi sağa/sola çekmiş olduk.Şimdi ise içeriğimizi doldurmaya devam ediyoruz.
Web sayfamızın son halini bir görelim bakalım ne yapmışız.
İçeriğide yaptıktan sonra şimdi copright bölümüne geçelim. İlk olarak bu alanın arkaplan rengini deiştiriyoruz.c
Bu işlemi daha önce menülerin arkaplanını değiştirirken de anlatmıştık. Arkaplanını değiştirmek istedeğimiz alanı seçiyoruz ve properties panelinden bg şeçeneğinden rengimizi seçiyoruz. Şimdi yazımızı yazalım.
Copyright yazısındaki © ifadesini veya ona benzer ifadeler eklerken resimdeki text seçeneğinden en sondaki icon’un yanındaki ok’a tıklıyoruz ve ordan istediğimizi seçiyoruz.
Şimdi copyright’da Rize tanıtım yazısına ana sayfanın linkini verelim. Link nasıl verilir daha önce anlatmıştık o yüzden bu kısmı geçiyoruz.
Yazdığımız copyright yazısını ortalayalım.
Bu işlem için yazımızı şeçiyoruz ve properties panelinden resimdeki align right seçeneğini şeçiyoruz.
Şimdi ise anasayfadaki son işlem olan sağ tarafta faydalı linkler kısmını yapalım. Bunu daha önce söylemiştik ama tekrar edilim.
Faydalı linkleri yapmak için ilk olarak başlığımızı yapıyoruz. Heading olmasına dikat edelim. Sonrasında ise altına link vermek istediğimiz sitenin adını yazıp bu yazıyı mouse yardımıyla şeçiyoruz ve properties panelinden link kısmına gitmesi istediğimiz adresi yaptık enter tuşuna basıyoruz.
Anasayfamız bitti son olarak nasıl olduğunu bir görelim daha sonra devam ederiz.
Şimdi anasayamız bitti diğer sayfaları yapmaya başlayalım.
Bu işlem için diğer sayfalarıda anasayfa gibi teker teker yapmak pek de anlamlı olmaz. O yüzden yaptığımız anasayfayı farklı kaydedip isimlerini tarihce.html , iletisim.html gibi isimler veriyoruz. Burada tek yapmamız gereken işlem sadece içerik kısmını o sayfanın içeriğiyle değiştirmek olacaktır.
