|
|
| |||||||
 |
| | Seçenekler |
|
#1
21-05-2008, 02:52
| |||
| | |||
Dreamweaver Kullanım Dersleri(alıntıdır)Common araç çubuğu ile temel işlemler Dreamweaver'da açtığımız boş sayfaya fare imleci ile bir kez tıkladıktan sonra tıpkı microsoft word'de yazı yazar gibi herhangi bir kelime yazın Yazdığınız bu kelimeye tıkladıklarında başka bir sayfaya gitmesini istiyorsak, bağlantı vermemiz gerekiyor.bunun için aşağıdaki adımları izlemelisiniz; * Sayfada bağlantı vermek istediğiniz kelimeyi seçili hale getirin * insert araç çubuğunda yer alan butona tıklayın (zincir gibi gözüken ) * Karşınıza gelen pencerede link eklemek için gereken herşey bulunuyor TexT  eçtiğimiz metinLink:Bu metine tıkladıktan sonra gitmelerini istediğimiz adres.Bu, başka bir web sayfası adresi olacağı gibi , hazırladığımız başka web sayfalarına da götürecek bir bağlantı olabilir. Daha önce hazırladığımız bir dosyaya gitmelerini istiyorsak Dosya gibi gözüken simgeye tıklayarak projeniz içerisinde yer alan bir diğer dosyayı seçebilirsiniz. Target:Bu bağlantıya tıklandığında açılacak olan yeni sayfanın, var olan sayfadamı yoksa yeni bir tarayıcı penceresindemi açılacağına bu alanda karar veriyorsunuz. "_blank" yeni bir sayfa demektir. Boş bırakırsanız , o sayfa içerisinde açılır. Title:Hazırladığımız bağlantının üzerine fare ile gelindiğinde çıkmasını istediğiniz yazıdır. OK butonuna bastığınızda yazınız, web sayfasındaki bir bağlantı gibi mavi renge dönüşecek ve altı çizili olacaktır. NOT: Üzerinde çalıştığınız sayfanın bir web sayfası olarak nasıl göründüğünü çalışma sırasında merak edebilirsiniz.Bu doğal isteğinizi yerine getirmek için klavyedeki "f12" tuşuna basmanız yeterli.Varsayılan tarayıcınız açılacak ve üzerinde çalıştığınız sayfayı , tarayıcıda izleme keyfine erişeceksiniz .İstediğiniz sayfayı elde etme konusunda ne kadar yol aldığınızı bu önizlemelerle ölçebilirsiniz. E-POSTA BAĞLANTISI VERMEK sAYFA İÇERİSİNDEN SİZE TEK TIKLAMADA ULAŞMALARINI SAĞLAMAK İÇİN E-POSTA ADRESİNİZİ KULLANABİLİRİSNİZ.bU BÖLÜM GENELDE SAYFANIN EN ALTINDA VEYA "iLETİŞİM" ADI ALTINDA HAZIRLADIĞINIZ BİR BAŞKA SAYFADA YER ALIR.BU ALANA YAZDIĞINIZ E-POSTA ADRESİNİZE TIKLADIKLARINDA DOĞRUDAN E-POSTA İSTEMCİSİNİN ÇALIŞMASINI SAĞLAYABİLİRSİNİZ. BU İŞLEM DE BİR YAZIYA BAĞLANTI VERME İŞLEMİNE ÇOK BENZİYOR.AŞAĞIDAKİ UYGULAMALARI GERÇEKLEŞTİRMENİZ YETERLİ; *SAYFA İÇERİSİNDE YER ALAN BİR YAZIYI SEÇİN VE MAİL RESİMLİ BUTONA TIKLAYIN *GELEN PENCEREDEKİ TEXT SATIRINA BAĞLANTI VERİLECEK OLAN YAZI GELECEKTİR.HEMEN ALTINDA YER ALAN E-MAİL YAZI ALANINA İSE E-POSTA GÖNDERİLECEK ADRESİ YAZIN VE DAHA SONRA OK BUTONUNA BASIN. *SAYFADA BELİRTTİĞİMİZ YAZININ BAĞLANTIYA DÖNÜŞTÜĞÜNÜ GÖRECEKSİNİZ WEB SAYFANIZA TABLO EKLEMEK web sayfanızı hazırlarken düşündüğünüz planı sayfaya aktarmak bazen imkansızmış gibi görünür. Mesela yazı yazmaya başladınız ama siz hazırladığınız yazının iki sütun halinde ve arasındada biraz mesafe olmasını istiyorsunuz. Microsoft Word veya Openoffice kullanırken bu işlem oldukça kolaydır. Ama iş, HTML sayfasına geldiği zaman kolay değil ama çok ta zor değil Tablolar kullanarak kendimize çok daha estetik sayfalar hazırlayabiliriz. Web sayfanıza tablo eklemek için Dreamweaver'da açık olan sayfada tablo (tablo resmi) eklemek istediğiniz bölüme tıkladıktan sonra COMMON araç çubuğunda yer alan 34.psd butonuna tıklayın (Tablo resmi) Gelen penceredeki terimlerin ne işe yarayacağına kısaca değineyim; Rows:satır sayısı Columns ütun sayısıTable Widht:Tablonun genişliği (piksel) Cell padding:Tablonun dış boşluğu Cell spacing:Tablonun iç boşluğu Header:Tabloda yer alacak olan başlıkların nasıl yerleşeceği Caption:Tablo adı Align caption:Tablonun nereye hizalanacağı Summary:Gizli özet Bu ayarları yaptıktan sonra ok butonuna bastığınızda tablonuzu web sayfanıza yerleştirdiğinğizi göreceksiniz.Bu tabloyu oluşturduktan sonra da değişiklikler yapabiliriz.. Microsoft Word'de tablo oluşturduysanız eğer ve nasıl değiştireceğinizi biliyorsanız burada da yabancılık çekmezsiniz. Aynı mantıkla tablo üzerine sağ tuş tıklayarak daha fazla seçeneğe ulaşabilir ve gerekli düzenlemeleri yapabilirsiniz. WEB SAYFANIZA RESİM EKLEMEK Web sayfalarının temel öğelerinden biridir resim. Dreamweaver'a resim eklemek de oldukça basit. O neden önce kullanacağımız resim dosyalarını hazırlamamızda fayda var.REsim dosyalarımızı hazırladıysak eğer , HTMl dosyasını kaydettiğiniz alana bu grafikleri yükleyin.Bu adım, önemlidir.Grafik dosyaları ile HTML dosyalarının alakasız klasörlerde olması sizi zor durumda bırakabilir.Bunun nedeni, hazırladığınız dosyaları olduğu gibi sunucuya yükleyecek olmanız. neyse şimdi resim nasıl eklenir? sorusuna cevap verim ; *Fare imlecini resim ekleyeceğimiz yere getirip bir kez tıklayın (Common araç çubuğundaki resim) *Açılan menüden image seçeneğini tıklayın *Gelen pencerede eklemek istediğiniz resim dosyasını seçin ve OK butonuna basın. *Seçtiğiniz resim dosyası web sayfanıza yerleşecektir REsim ile ilgili seçenekler üzerinde değişiklik yapmak için resim dosyasına bir kez tıkladıktan sonra Properties penceresi üzerindeki seçenekleri değiştirebilirsiniz. WEB SAYFANIZA FLASH DOSYALAR EKLEMEK Flash dosyalar da artık web sayfasının vazgeçilmezlerinden. Sayfaları daha estetik hale getiren ve kullanım kolaylığı sağlayan flash dosyaları web sayfanıza ekleyerek daha çekici bir web sitesine sahip olabilirsiniz.bunun için öncelikle flash dosyalarınızın hazır olması gerekmekte. Flash dosyaları eklemek tıpkı resim eklemek gibi. Aşşağıdaki işlemleri takip ederseniz ne kadar koaly olduğunu göreceksiniz. *COMMON araça çubuğu üzerinde Flash resmine (ücgen,kare,ve daire resmi) tıklayın. *Açılan menüden flash seçeneğine tıklayın. *Gelen pencerede sayfaya eklemek istediğiniz Flash dosyasını seçin. *Sayfanıza eklediğiniz Flash dosyasının yerini resim dosyasında yaptığım-nız gibi yerleşim yeri konusunda istediğiniz değişiklikleri gerçekleştirebilirsiniz. DREAMWEAVER İLE FLASH BUTON HAZIRLAMAK web sayfanızda yer alan butonları flash ile hazırlanmış şık ve kullanışlı butonlar olmasını istiyorsanız, aşşağıdaki adımları takip edin; *Sayfada butonları ekleyeceğiniz yere 1 kez tıkladıktan sonra COMMON araç çubuğunda (üçgen,kare,daire) resmine tıklatın *Açılan menüden Flash button seçeneğine tıklayın . Bu imkandan faydalanmak için üzerinde çalıştığınız web sayfasının kaydedilmiş olması gerekiyor. *Bu penceredeki bilgileri hazırlamak istediğiniz buton doğrultusunda doldurun. Flash button web sayfasına yerleşecektir (f12) tuşuna basarak web sayfanızda nasıl göründüğüne bakabilirsiniz. EKLENEN NESNELERİN ÖZELLİKLERİNİ DEĞİŞTİRMEK Şu ana kadar anlattığımız temel nesnelerin web sayfanıza nasıl eklendiğini açıkladık.Bu nesneleri ekledikten sonra üzerinde işlemler yapmak, oldukça basit. Bunun için size eşlik eden PROPERTİES araç çubuğu bulunuyor. Bu çubuk, tıkladığınız ve değişiklik yapacağınız nesneye göre değişiklikler göstererek size zaman kazandırıyor ve işlemlerinde kolayca yapılmasını sağlıyor. 1-) Bağlantı için özel seçenekler 2-)Tablo için özel seçenekler 3-)Resim için seçenekler SAYFA ÖZELLİKLERİ Hazırladığınız sayfanın türkçe olduğunu belirtmelisiniz. Bunun için (ctrl)+(j) veya PROPERTİES penceresinde yer alan PAGE PROPERTİES butonuna tıklayın. GElen pencerede hazırlamakta olduğunuz sayfanın temel özellikleri yer alıyor.Bunları kısaca açıklayayım; Appearance Page font: Sayfadaki yazıların fontu Size:Büyüklüğü Text Color:Yazı rengi Background Color:Arka plan rengi Background image:Arka plan resmi Repeat:Arka plandaki resmin tekrarı Left margin ol taraftaki boşlukRight margin ağ taraftaki boşlukTop margin:Üst boşluk Bottom margin:Alt boşluk Links Link font:bağlantıların fontu Size:büyüklüğü Link color:Bağlantı rengi Rollover links:Fare bağlantının üzerinde geldiğinde, fontun alacağı renk Visited links:tıklanmış olan bağlantı fontunun rengi Active links:Aktif olan bağlantı fontunun rengi Undeline style:Bağlantılarda kullanılacak olan alt çizgi Headings Sayfa başlıklarının yazı tipleri.1'den fazla tip belirlenebiliyor. Title/Encoding Title ayfanızın başlığı.Tarayıcının üst çubuğunda görünecek olan yazıDocument type:HTML standartı . Dokunmanıza gerek yok Encoding ayfanın kodlaması . Türkçe seçmelisinizTracing image Tracing image:Arka plandaki resmi seçmemize yarıyor. Transparency:Şeffaflık ayarı Sayfa görünümü Üzerinde çalıştığımız web sayfasının, hazırlanma aşamasında nasıl görüntüleneceğinede siz karar verebilirsiniz. Biraz daha açmak gerekirse, üç farklı seçenek var. Design; Sayfanızdaki nesneleri görürsünüz.Kodlar görünmez. Değişiklikleri sadece nesneler üzerinde yapabilirsiniz. Split; Sayfanızdaki nesneleri görmekle beraber aynı anda kodlarıda görürsünüz. SAyfada nesneler üzerinde bir değişiklik yaptığımız anda, bu değişiklik arka plandaki kodlarada yansır. Aynı şekilde değişiklikleri kodlar üzerindede gerçekleştirebiliyorsunuz. Code; Sayfanızın tasarımını sadece kodlarla görürsünüz. Bu seçenek daha çok , ASP veya PHP gibi sonucuda çalışan script'leri hazırlayanlar için kullanılır.Kullanımıda son derece kolaydır.Genelde pek sevilmeyen kodlar burada renklendirilmiştir.Buna ek olarak kod yazmaya başladığınızda Dreamweaver , size daha fazla yardımcı olmak için kodun ilk harfinden hemen sonra devamında yazılması muhtemel seçenekleri hemen yazının altında belirtir ve size sunar. DREAMWEAVER İPUÇLARI Biraz da ipuçlarından bahsedelim Sayfanızdaki html hataları web sayfanızı hazırlarken hatasız kodlar kullanmak istiyorsanız her satırı teker teker kontrol etmek yerine , dreamwevaer kullanarak kontrol işlemini otomatik gerçekleştirebilirsiniz.Üzerinde çalıştığınız sayfayı kontrol etmek için aşağıdaki adımları izleyin *Dreamweaver 'da iken (f7) tuşuna basarak properties araç çubuğunun hemen altında RESULTS araç çubuğunun açılmasını bekleyin *Gelen araç çubuğundaki VALİDATİON bağlantısına tıklayın *Sol tarafta yer alan yeşil butona basın ve açılan menüden VALİDATİON CURRENT DOCUMENT seçeneğine tıklayın *kısa sürede tüm kodlar denetlenecek ve hatalı olan kodlar size bildirilecektir. ROLLOVER BUTON HAZIRLAMAK Bazı web sitelerinde görmüşsünüzdür.Bir butonun üzerine geldiğinizde bu butonun üzeirndeki resim değişir.Fareyi üzerinde çektiğinizde tekrar eski haline döner. Bahsettiğimiz değişiklik Flash'la yapılmıyorsa Rolloverla yapacağız . Ancak bu uygulamayı yapmak için 2 adet resim dosyası hazırlamanız gerekiyor. Hazrılayacağınız ilk grafik ziyaretçiler fare ile butonun üzerinde gelmedikelri zaman görmeleriniz istediğiniz resim Diğer resim ise ziyaretçileriniz fare ile butonun üzerinde geldiklerinde görmek istedikleri resim. Bu iki resim grafikleri hazırsa şimdi yapmanız gerekenler; *Sayfada rollover buton eklemek istediğiniz yere tıklayın *Common araç çubuğundaki resim ekleme butonuna , orada açılan seçenekler içerisinden de rollover image yazan seçeneğe tıklayın Gelen penceredeki ifadeler şu anlama geliyor ; İmage name;rollover resminin adı original image;Bahsettiğimiz ilk resim Rollover image;Üzerine geldiğinde görünmesi istenen 2. resim Alternate test;Resim dosyası üzerinde beklendiği zaman görünmesi istenen tanıtıcı metin. When clicked,go to URL;bu butona tıklandığında gitmesi istenilen adres. Word BELGESİNİ HTML YAPMAK web sayfanızda olmasını istediğiniz yazıların bir word belgesinde olması muhtemeldir. Bunun için wordde hazırladığınız dosyayı farklı kaydet seçeneğiyle HTML olarak kaydedebilirsinizBunun için aşağıdaki adımları uygulayın; *Html dosyası olarak kaydettiğimiz dosyayı dreamweaver kullanarak açın *commands menüsündeki Clean up word html seçeneğine tıklayın *gelen pencerede ok butonuna basın DREAMWEAVER İLE FOTOĞRAF ALBÜMÜ HAZIRLAMAK web siteniz kişisel bir web sayfası olacaksa , en önemli bölümlerden biride fotoğral albümlerinizin yer aldığı bölüm olacaktır. Bu alanı hazrılarken ilk yapmanız gereken şey foto ları ahzırlamk olmalı. * Dreamweaver'da boş bir sayfa açın *commands menüsünden create web photo album seçeneğine tıklayın *gelen penceredeki bilgileri teker teker doldurun photo album title:Album adı Subheading info:alt başlık bilgisi Other info:albümle ilgili diğer bilgiler Source images folder: Fotoğrafların alınacağı klasör Destination folder:Albümün olacağı klasör Thumbnail size:Küçük fotoların ölçüsü Columns ütun sayısıThumbnail format:Yeniden boyutlandırılırken kullanılacak olan kalite standartı Photo format:Oluşturulacak albümdeki resimlerin biçimi *Bu bilgileri de girdikten sonra ok butonuna basın *Fotoğraf düzenleme yazılımınız çalışacak ve fotoğraf sayısına bağlı olarak albümünüzü otomatik olarak oluşturmaya başlayacaktır. Bu işlem sırasında fotolarınız yeniden boyutlandırılır, küçültülür ve web sayfasına yerleştirilir *(f12) tuşuna basarak sayfanın nasıl göründüğüne bakabilirisiniz. ALINTIDIR Umarım işinize yarar, ben çok beğendim ve sizinle paylaşmak istedim.Dreamweaver'i yeni kullanmaya başlayanlar için   |
| Girly™ için teşekkür eden üyeler: | ||
|
| Seçenekler | |
| |
Benzer Konular | ||||
| Konu | Konu Açanlar | Forum | Cevaplar | Güncel Mesajlar |
| Dreamweaver Dersleri | kadınca | Soru-Cevap | 3 | 06-09-2008 06:36 |
| Dreamweaver Dersleri - Rollover image ( İyi Bir Photoshop Dersi ) | Professionel | Photoshop | 1 | 22-11-2007 02:20 |
| Dreamweaver Dersleri - Tablolama ve Özellikleri | Professionel | Photoshop | 0 | 21-11-2007 02:31 |
| Dreamweaver 8 Dersleri - Pop-up Menü Oluşturmak | Professionel | Photoshop | 0 | 21-11-2007 02:30 |
| Javascript Dersleri(Giriş,Değişkenler,Kullanım Şekilleri) | aKaLes | Javascript | 1 | 27-09-2007 06:18 |
..........
