Bilgi Paylaştıkça Çoğalır Dr.Hakkı Öcal Dreamweaver MX 2004 Uygulama Kitabı

Transkript

1 Mustafa Rıdvan Özdemir Bilgi Paylaştıkça Çğalır Dr.Hakkı Öcal Dreamweaver MX 2004 Uygulama Kitabı İstanbul - Denizli / Haziran 2005

2

3 BÖLÜM 1 Menülere Genel Bir Bakış File Edit View Insert Mdify Text Cmmand Site Windw Help BÖLÜM 2 MX 2004 te Paneller ve Özellikleri Prperties Insert Design CSS Layer Cde Snippets Refference Applicatin Databases Bindings Server Behavirs Cmpnents Tag Inspectr Attributes Behavirs Relevant CSS Files Files Assets

4 BÖLÜM 3 Dreamweaver MX 2004 Uygulamaları Sayfaya Media ve Nesne Ekleme Yeni Belge Açmak Belgenin Arkaplan Rengini Ayarlamak Resim Eklemek Rllver Image Flash Web Albümü Oluşturmak Htspt Kullanımı Flash Filmi Eklemek Vide Eklemek Flash Butnlar Eklemek Tabl Oluşturmak Tablya Dışarıdan Veri Çağırmak Layerlar ve Özellikleri Bağlantısı Eklemek Named Anchr Yatay Çizgi Eklemek Frameler iframe Kullanmak Özel Karakterler Eklemek Cmmand Recrding HTML Kd Temizliği Web Ftğraf Albümü Oluşturmak Extensin Manager ve Extensinlar Frm Nesneleri ve İşlevleri Text Field Textarea Buttn Chechk Bx Radi Buttn List/Menu File Field Image Field Radi Grup Jump Menu Frm Mail Uygulaması Stiller/CSS Yeni Bir Stil Belgesi Oluşturmak Stil Belgesi Atamak Behavirs İşlemleri Brwser Versiyn Kntrlü Plugin Kntrlü Shckwave ve Flash Film Kntrlü URL Yönlendirme Liste Menü Yeni Pencere Aç

5 Ses Dsyası Çağır Pp-up Mesaj Durum Çubuğunda Mesaj Yazdırma Sürüklenebilen Nesneler Oluşturmak Ms Menu / Shw Pp-up Menu Layer Gizle-Göster Resim Değiştir Adres Kntrlü Shw Events Özelliği

6 BÖLÜM 1 Dreamweaver MX 2004 Menüleri File / Dsya Yeni bir belge açmak (New), kaydedilmiş belgeleri açmak (Open, Open Recent), belgelerimizi kaydetmek (Save, Save As), belgelerimizi tanımladığımız lkal server klasörüne kaydetmek (Save t Remte Server) dışarıdan veri getirmek (Imprt), dışarıya veri vermek (Exprt), aktif belgemizi sınamak (Preview in Brwser) gibi işlemleri gerçekleştirmek için bu menüyü kullanacağız. Edit / Düzen Edit menüsü prgramımız ve üzerinde çalıştığımız belgemiz ile ilgili ayarlar yapabileceğimiz menüdür. Kısaca özetlemek gerekirse; yaptığımız işlemleri geri almak (Und), clipbarda kpyaladığımız bir nesneyi yapıştırmak (Paste, Paste HTML, Paste TXT), nesne kpyalamak (Cpy, Cpy HTML), gelişmiş arama işlemi yaptırmak, prgramın kısayl tuşlarını değiştirmek (Keybard Shrtcuts), prgramın görsel ve işlevsel ayarlarını yapmak (Preferences) için bu menüyü kullanacağız. Ayrıca belgelerinizin içerisinde kullandığınız nesneleri ayrı bir prgram ile düzenlemek isterseniz bunun için de Edit with External Editr kmutunu tıklamanız yeterli lacaktır. Edit menüsünde ise bu kmut ile hangi uzantılı nesneleri hangi prgramın düzenleyeceğini belirtebileceksiniz. Tag Libraries kmutunu tıklayarak Taglerin kullanım şekillerine de erişebilirsiniz. View / Görünüm Prgramın ve unsurlarının görünümlerini kişiselleştirebileceğiniz kmutları bu menü altında bulabilirsiniz. Çalışma sırasında hem kd sayfasını hem de tasarım sayfasını görmek istiyrsak Cde and Design kmutunu, görünümler arasında geçiş yapmak için ise Switch Views kmutunu tıklamalıyız. Yine bu menünün altındaki kmutlar ile sayfaya cetvel ekleyebilir (Ruler), görünüme ızgara ekleyip düzenleyebilir (Grid, Shw Grid, Grid Settings), panelleri kapatabilir, görünmesini istediğimiz araç çubuklarını aktif hale getirebiliriz. Insert / Ekle Sayfamızı luştururken kullanacağımız nesnelerin tümünü bu menü yardımı ile ekleyebiliriz. Resim, layer, tabl, ses dsyaları, scriptler, ft albüm, Flash butn, frmlar ve frm nesneleri bu menüdeki kmutlar ile sayfamıza ekleyebileceğimiz nesnelerden sadece birkaçı. Uygulamalarımızda bu işlemlere ayrıntıları ile değineceğiz. Mdify / Değiştir Mdify menüsü ile nesnelerimize köprüler (Make Link) atayabilir ve köprünün hedefini (_blank, _parent...) ayarlayabiliriz. Bunlara ilave larak eklediğimiz tablları, resimleri ve frameleri düzenleyebilir, katmanları hizalayabilir ve de temalar ile ilgili işlemleri yürütebiliriz. Text / Metin

7 Paragrafın frmatını, hizalamasını, fntun seçimini, rengini, puntsunu, stilini, stil dsyalarını bu menü ile ayarlayabiliriz. Ayrıca hazırladığımız listelerdeki simgeleri de bu menüden düzenleyebilmekteyiz. Cmmand / Kmutlar Kmutlar menüsünde ftğraf albümü, kmut kayıtları, extensin yönetimi, renk şeması yapacak kmutları bulabilirsiniz. Ayrıca Dreamweaver in gizli kalmış fakat çk işlevsel bir kmutu da bu menüde. HTML belgelerinizdeki gereksiz kd satırlarını silebileceğiniz bu kmut ile belgelerinizin byutunu küçültebilirsiniz (Clean Up Wrd HTML). Site / Site Dreamweaver de lkal bir site tanımladıysanız sitenizi yöneteceğiniz kmutları bu menüde bulabilirsiniz. Site tanımlama, silme, raprlama gibi işlemleri bu menüdeki kmutlar ile yapabilirsiniz. Windw / Pencere Bu menü ile ise Dreamweaver in panellerini yönetebilirsiniz. Panelleri kedi istediğiniz şekilde kişiselleştirebilir, varsayılan panel düzenine geri dönebilir ve belgelerinizin arasında geçiş yapabilirsiniz. Prgramdaki bütün paneller bu menüden yönetilebilmektedir. Help / Yardım Sn larak bu menüden de prgram hakkındaki gerekli bilgileri alabilir, yardım dsyaları içersinde derdinize deva arayabilirsiniz. Offline larak derdinize deva bulamadıysanız Macrmedia yardım merkezine de bu menüden tek tıkla ulaşabilirsiniz. BÖLÜM 2 MX 2004 te Paneller ve Özellikleri Prperties Paneli Dreaweaver de yaptığımız bütün işlemlerin özelliklerini bu panel yardımı ile ayarlayabilmekteyiz. Eğer nesnemiz bir resim ise alternatif metnini, köprüsünü, hizalamasını, dış kenarlığını, resmin byutlarını, parlaklığını, htsptunu bu panelden düzenleyebiliriz. Eğer nesnemiz bir metin ise fntunu, puntsunu, fntun rengini, köprüsünü, hizalamasını bu panel ile düzenleriz. Kısaca belgemize eklediğimiz bütün nesnelerin özelliklerini bu panel ile düzenleyeceğiz. Insert Paneli

8 Bu panelimizin içeriği de adı gibi Insert menüsüyle aynıdır. Tablları, katmanları, Flash butnları, resimleri, frm nesnelerini vb. nesneleri bu menüden ekleyebiliriz. Macrmedia bu paneli iki stilde tasarlamış. İlki, web sayfalarında gördüğümüz drp-dwn menü stilinde, ikincisi ise bir araç çubuğu stilinde. Bu işlem için Insert yazısının üzerine sağ tıklayın ve Shw as Tabs kmutunu tıklayın. Bu işlemden snra Insert panelimiz tek satır halinde bütün nesneleri gösterecektir. Eğer varsayılan stile geri dönmek istiyrsanız tekrar Insert panelinde sağ tıklayıp Shw as Menu kmutunu tıklamanız yeterli lacaktır. Bu panelde göze çarpan asıl özellik ise istediğiniz nesneleri seçerek bu paneli kişiselleştirebilmenizdir. Bu işlem için panelin üzerinde sağ tıklayalım. İkinci adımda ise Custmize Favrites kmutunu çalıştıralım. Çıkan pencereden sık kullandığınız kmutları sağ tarafa ekleyin ve OK butnuna basın. Belirlediğiniz kmutların simgelerinin bu panelde Favrites başlığı altında tplandığını göreceksiniz. Design Paneli CSS Styles Sayfalarımızda kullanacağımız CSS belgelerini bu panel yardımıyla tasarlayacağız. Yeni stil tasarlamak, var lan bir stili belgemize çağırmak, var lan bir stil üzerinde değişiklik yapmak gibi işlemleri CSS Styles panelinde yapacağız. Layers Belgemizde yer alan bütün katmanları bu panel üzerinde görebiliriz. Ayrıca belgemizde birden fazla katman kullandıysak ve bu katmanların bir biri üzerine gelmesini istemiyrsak bu panelden Prevent Overlaps sekmesini tıklamalıyız. Cde Paneli

9 Snippets Dreamweaver ın sağladığı klaylıklardan biri de Snippets paneli. Hazır kd arayanlar için tasarlanmış bu panelin içeriğinde Javascript kdları, navigasyn çubuğu örnekleri, brwser scritlerini ve hazır frm elemenların bulabilirsiniz. Yapmanı gereken tek şey istediğiniz kdu seçip çift tıklamak ve Snippets metin alanından kpyalayıp scripti belgenize eklemek. Refference Bu panelde ise PHP, SQL, ASP.NET, HTML, JAVASCRIPT gibi prgramlama dillerinin kullanım kılavuzu var. Bu dillerdeki kmutların, fnksiynların nasıl kullanıldığı anlatılmış. Applicatin Paneli Databases Adından da anlaşılacağız gibi veritabanı ile ilgili işlemleri Applicatin panelinden yöneteceğiz. Databases bölümünde ise veritabanı bağlantıları için Cnnectin tanımlayacağız. Tabi öncelikle bir sanal site tanımlamamız gerekecek. Veritabanı uygulamaları bölümünde (BÖLÜM 4) bu işlemleri ayrıntılarıyla ele alacağız.. Bindings Veritabanımız için kayıt setlerini (Recrdset), değişkenleri (Sessin Variable, Applicatin Variable, Request Variable) ve veritabanımızın SQL ile işlenmesini (Cmmand) bu panelden yöneteceğiz. Server Behavirs Hiç bir prgramlama bilgisine sahip lmadan bu panel yardımıyla üyelik sistemleri, veritabanına kayıt girişi, kayıt silme, bilgi güncelleme gibi işlemleri yürütebilirsiniz. İleriki uygulamalarımızda da bu paneli sık sık ziyaret edeceğiz.. Cmpnents

10 Bu panelde ise ASP.NET C#, ASP.NET VB, Macrmedia CldFusin MX, JSP gibi diller için Web Servisi bulunmaktadır. Tag Inspectr Attributes Bu tarz bir paneli Visual Basic 6 dan hatırlayacaksınız. Değişkenleri girerek nesnelerinizi böyle bir menü yardımıyla işleyebiliyrdunuz. Dreamweaver de ise bu panel yardımıyla nesnelerinizin özelliklerini düzenleyebiliyrsunuz. Eğer nesne bir resimse alternatif metnini, byutları, kaynağını, nesne Flash filmi ise byutlarını, eğer bir stil dsyası atayacaksanız atama işlemini vb. gibi işlemleri bu panel yardımıyla yapabilirsiniz. Behavirs İşte Dreamweaver in harikalar yarattığı panele geldik. Hiç bir prgramlama bilgisine sahip lmadan, drp-dwn menüleri swap imageları, tarayıcı işlemlerini, tarayıcı mesajlarını, ses dsyası çalıştırmayı, katman animasynlarını bu panelden yöneteceğiz. Sizinde en sık kullanacağız panelin bu lacağını görür gibiyim. Relevant CSS Revelant CSS paneli de işlevsel larak Attributes paneli ile aynı mantıkta çalışıyr. Fakat bu panel Attributes ten farklı larak sadece CSS Stil Dsyalarının özelliklerini değiştirebiliyr. Eğer bir CSS dsyanız varsa Design panelinden seçin, Revelant CSS nin etkinleştiğini göreceksiniz. Stiller knusunu uygulamalarımıza daha geniş ele alacağız.

11 Files Paneli Files Daha önceden tanımlamış lduğumuz sanal sitemizi yöneteceğimiz panel ise Files Paneli. Bu panel yardımıyla yeni bir sanal site tanımlayabileceğimiz gibi tanımlanmış bir siteyi de yönetebiliriz. Dallanmış görünüm sayesinde sitenizdeki dsyaların tümüne bu panelden erişebilirsiniz. Sanal site tanımlamayı ve yönetmeyi Uygulamalar bölümümüzde ele alacağız.. Assets Belgelerinizin içindeki sık kullandığınız nesnelerinizi aynı Internet Explrer daki gibi Favrites bölümüne gönderebilirsiniz. Bu işlem için Dreamweaver de Assets panelini kullanacağız. Eğer nesnelerinizden birini bu panele göndermek istiyrsanız, nesnenin üzerinde sağ tıklayın ve (resim dsyası için geçerli) Add t Image Favrites kmutunu tıklayın. Örneğin aynı yöntemle bir metin için Favrites Clr belirlediniz. Bu rengi tek tıklamayla herhangi bir metin içinde kullanabilirsiniz. Bunun için ilgili metni seçelim. Assets paneline gelelim ve Clrs butnunu tıklayalım. Sn larak Favrites e eklemiş lduğumuz rengin üzerinde sağ tıklayıp Apply diyelim. Favrite Clr ın seçili metne uygulandığını göreceksiniz.

12 BÖLÜM 3 Dreamweaver MX 2004 Uygulamaları Sayfaya Media ve Nesne Ekleme Yeni Bir Belge Açmak Dreamweaver da yeni bir belge açmak için birden çk seçeneğimiz var. Sırasıyla gözden geçirelim. İlk larak en çk bilinen yöntemi kullanalım. CTRL + N veya File > New Categry panelinden nrmal statik bir belge mi yksa dinamik bir belgemi kullanmak istediğimizi belirteceğiz. Snraki adımda ise belgemizin dil prblemini çözeceğiz. Bunun için Preferences butnuna basalım ve Default Encding menüsünden Türkçe (Windws) seçeneğini tıklayalım. Artık yeni bir belgemiz var ve Türkçe karakter srunu yaşamayacağız. İkinci yöntem ise Dreamweaver i ilk kurduğumuzda açılışta karşımıza çıkan erişim aracı. Bu aracı kullanmak hem daha pratik hem de bu aracın yukarıda görüşmüş lduğunuz pencereden daha estetik lduğu tartışılmaz bir gerçeklik. Dn t Shw Again sekmesini işaretlemezsek bu menü prgramı her çalıştırdığınızda karşımıza çıkacaktır. Belgenin Arkaplan Rengini Ayarlamak Yeni bir belge açmıştık. Şimdi ise arkaplan rengini değiştirmek istiyruz. Bu işlem için belgemizde sağ tıklayalım ve Page Prperties kmutunu çalıştıralım ve bu pencereyi biraz tanıyalım.

13 Page Fnt : Belgede kullanılacak fnt. Size : Fntun puntsu (büyüklüğü) byutunu. Text Clr : Fntun rengi. Backgrund Clr : Belgemizin arkaplan rengini bu menüden değiştirebilirsiniz. Backgrund Image: Belgenize aynı masaüstünde lduğu gibi duvar kağıdı atamayı bu menüden yapabilirsiniz. Bunun için Brwse butnuna basalım ve bir kullanacağımız resmi seçelim ve OK butnuna basalım. Resmin duvar kağıdı şeklinde döşendiğini göreceksiniz. Left Margin : Sldan bşluk kalacak pay. Right Margin : Sağdan bşluk kalacak pay. Tp Margin : Üstten bşluk kalacak pay. Bttm Margin : Alttan bşluk kalacak pay. Linklerinizin renkleriyle ilgili ayarları da Links menüsünden yapabilirsiniz. Resim Eklemek Belgemizin arkaplanını da ayarladık. Bu aşamada ise sayfamıza bir resim ekleyeceğiz. Bunun için iki yl kullanacağız. Birinci yl Insert > Image yludur. İkinci yl ise Insert panelinden Insert Image butnuna tıklayıp Image seçeneğini seçmek ve belirlediğimiz resmi bulup sayfamıza eklemektir. Belirlediğimiz resim sayfamıza eklemiş lacaktır. Bu statik bir resim. Şimdi ise dinamik hareketli bir resim ekleyeceğiz ve bu resme link vereceğiz.

14 Rllver Image Bu yöntemi Web sayfalarınıza butn eklemek için uygulayabilirsiniz. Eklediğimiz resimlerden önce 1 numaralı lanı görünecek fare butnumuzun üstüne geldiğinde ise ikinci resim aktif lacaktır. Bundan nasıl yararlanabiliriz. Örneğin ilk butndaki renk biraz kyu lur ikinci butnda ise renk ilkine nazaran biraz daha açık lur. Fare butnun üzerine geldiğinde resim değişimi çk hızlı lacağından butnumuzun üzerinde parlama etkisi görünecektir. Insert > Image Object > Rllver Image yönergesini izleyerek Rllver Image ekleyebilirsiniz. Şimdi işlim uygulayacağımız pencereyi tanıyalım. Image Name : Resmimizin ismi. Original Image : Butnumuzun ilk resmini seçmek için Brwse butnuna basarak. 1 numaralı butnumu bulalım ve OK butnuna basalım. Rllver Image : Aynı işlemi 2 numaralı butnumuz için yapalım. Prelad Rllver Image : Bu sekmeyi işaretlerseniz Rllver Butn yani bizim 2 numaralı butnumuz Web de yüklenen kadar 1 numaralı butnumuz görüntülenmeye devam edecektir. Alternate Text : Web de resmimiz yüklenene kadar resim yer tutucular kırmızı çarpı şeklinde resmimizin yerini belli ederler. Yükleme süresi içerisinde ziyaretçiye kırmızı çarpıları izletmek pekte hş lmaz. Bu metin kutusuna yazacağınız metin resmimiz yüklenen kadar kırmızı çarpıların yerinde duracaktır. Bu sayede ziyaretçi en azından hangi resmin ne lduğunu görebilecektir. Ama dğru lan butnlarımızın byutunu iyi ayarlamak, büyük byutta fntlar kullanmamaktır. When clicked, G t URL : Butnumuza tıklandığında gidilecek Internet adresini de bu satıra yazıyruz. Belgemizi kaydedelim ve sınayalım. Fare ile üzerine geldiğimizde butnların hareketlendiğini göreceksiniz. Tıkladığınızda ise belirttiğimiz adrese gidecektir. Flash Web Albümü Oluşturmak Küçük bir ftğraf arşiviniz var ve siz bunu Internet üzerinden yayınlamak istiyrsunuz. Tabi güzel ftğraflar iyi bir şekilde yayınlanmalı. Fakat iyi bir navigasyn aracı luşturacak vaktinizde yk. Uğraşmayın, açın Dreamweaver ı ve Insert > Media > Image Viewer ylunu izleyin. Elinizdeki ftğrafların güzelliğine yaraşır bir navigasyn aracı luşturun. Image Veiwer kmutunu tıkladıktan snra karşımıza SWF çıktısını nereye kaydetmek istediğimizi sran bir pencere çıkacak. Dreamweaver bu aracı Flash nesnesi larak çıktı verecektir. Kaydedeceğimiz klasörü belirleyin ve KAYDET butnuna basın.

15 Bu aşamada dikkat etmemiz gereken durum resimlerin ylunun Image Veiwer e dğru tanımlamaktır. Tag Inspectr paneline geçelim ve resim göstericimizin ince ayarlarını yapalım. bgclr captinclr captinfnt captinsize frameclr frameshw framethickness imagecaptin imagelinks imagelinktarget imageurls shwcntrls slideautplay slidedelay slidelp title titleclr titlefnt titlesize transitinstype : Arkaplan rengi. : Başlık Rengi : Başlık Fntu : Fntun Puntsu : Kenarlık Rengi : Kenarlığı Göster / Gizle : Kenarlık Byutu : Resimlerin Başlıkları : Resimlere Verdiğimiz Köprüler, Linkler. : Linklerin Hedefleri. : Resimlerin Bulunduğu Klasörün Ylu. : Kntrl Panelini Göster / Gizle : Slayt Düzeninde Oynat. : İki Oynatım Arasındaki Zaman Aralığı. : Slayt Snsuz Döngüde : Etiket : Etiket Rengi : Etiket Fntu : Fntun Puntsu : Geçiş Efektleri Göstericinin arkaplan rengini bgclr kutusundan ayarlayabilirsiniz. Gösterimin başlığını Image Captin, başlığın rengini captinclr, fntunu ve puntsunu sırasıyla captinfnt, captinsize kutularından düzenleyebilirsiniz. Göstericimizin sırasıyla kenarlık rengini, kenarlık gösterilip gösterilmeyeceğini, kenarlık kalınlığını frameclr, frameshw, framethickness kutularından düzenleyeceğiz. imagelinks kutusundan resimlerimize link vereceğiz. imagelinktarget kutusundan ise verdiğimiz linklerin yeni sayfada mı açılacağını, hangi framede açılacağını vb. yani hedefini belirteceğiz. imageurl kutusundan resimlerimizin bulunduğu klasörü belirteceğiz. shwcntrls kutusu aktifken resim göstericimizin dlaşım çubuğu aktif lacaktır. Yani butnlar yardımıyla resimlerimiz arasında gezinebileceğiz. slideautplay kutusu aktif ise sayfa

16 yüklendikten snra ynatım tmatik larak başlayacaktır. slidedelay kutusuna gireceğiniz değer iki resim gösterimi arasında kaç saniye lacağını belirleyecektir. slidelp kutusundaki değer eğer Yes ise gösterim bittikten snra tmatik larak baştan başlayarak tekrar gösterime devam edecektir ve bu snsuz bir döngü şeklinde ynatım sürekli başa alınacaktır. Gösterimimizin etiketini, adını title kutusuna yazacağız. Sırasıyla etiketimizin yazı rengini, fntunu, fntun puntsunu titleclr, titlefnt, titlesize kutularından belirleyeceğiz. İki resim arasındaki geçiş efektlerini de transitinstype kutusundan ayarlayacağız. Uygulamamızın başında Image Veiwer e eklemiştik. İnce ayarlarımızı da yaptık şimdi resimlerimizi ekleyelim. + butnuna basıp ve çıkan sarı klasör simgesine tıklayalım. Eklemek istediğiniz resimleri seçelim ve OK butnuna basalım. Bu işlemi eklemek istediğimiz her resim için uygulayacağız. Belgemizi kaydedelim ve klavyemizden F12 tuşuna basarak sınayalım. İşte size hızlı ve kullanışlı bir resim gösterici. Htspt Kullanımı Sayfalarınıza eklediğiniz resimlerin istediğiniz herhangi bir nktasına link verecek bir prgramsa aradığını bu işlevi uzaklarda aramayın. Çünkü Dreamweaver in Prperties panelinde. Grafik editörlerinden herhangi birisi ile üzerinde BYTE Eylül, BYTE Ekim, BYTE Kasım yazan bir resim luşturalım ve sayfamıza Insert > Image yönergesini izleyerek ekleyelim. Prperties panelin aktif hale getirelim. Eğer aktif değilse Windw > Prperties yönergesini izleyerek aktif hale getirebilirsiniz. Sayfamıza ekledikten snra bir kez tıklayıp resmi seçelim. Resmimizin üzerinde Htspt vereceğimiz alan köşeli, çember veya rastgele bir şekil labilir. İstediğimiz seçeneği Prperties panelinden seçelim ve resim üzerindeki BYTE

17 Eylül yazını kapsayacak genişlikte bir alan çizelim. Prperties paneli değişecek ve Htspt un özelliklerini gösterecektir. Link : Htsptumuza vereceğimiz linki Link metin kutusuna yazacağız. Target : Verdiğimiz linkin hangi hedefte açılacağını belirteceğiz. Alt : Faremizin resmin üzerine geldiğinde görünecek lan metni bu kutuya yazabilirsiniz. Class : Eğer bir CSS dsyası kullandıysanız ve bu işlemde de geçerli lmasını istiyrsanız bu menüden seçebilirsiniz. (CSS eklemeyi ve kullanmayı ileriki uygulamalarımızda birlikte ele alacağız.) BYTE Eylül le Htspt verirken yaptığımız işlemleri BYTE Ekim ve BYTE Kasım içinde yapalım. Klavyenizden F12 tuşuna basarak belgenizi sınayabilirsiniz. Flash Filmi Eklemek Insert > Media > Flash yönergesini izleyerek sayfanıza Flash nesnesi ekleyebilirsiniz. Flash nesnemizin arkaplan rengi, byutu (örn:450x250), kalitesini Prperties penceresinden belirleyebilirsiniz. Vide Eklemek Vide eklemek için Insert > Media > Plugin yönergesini izleyeceğiz. Açılan pencereden ekleyeceğimiz vide dsyasını seçelim ve OK butnuna basalım. Sayfamıza bir plugin eklenecektir. Özelliliklerini ayarlamak için bir kere tıklayalım ve Prperties paneline gelelim. Videmuz belgemize 32 X 32 byutlarında eklenecektir. Videmuzun gerçek byutunu W ve H metin kutularına gerekli değerleri girerek belirleyelim.

18 İnce ayarlar için ise Tag Inspectr panelini kullanacağız. Filmimizin, sayfa açılır açılmaz başlamasını istemiyrsanız autstart metin kutusundaki değer false lmalı, bu seçenek işaretliyken önce sayfa açılır snra ziyaretçinin filmi fare ile tetiklemesiyle film ynatılır. Eğer filmimizin bittikten snra tmatik larak tekrar başlamasını, bir döngü luşturmasını istiyrsanız lp seçeneği true lmalı. Eğer bu knudaki cevabınız hayır ise bu metin kutusuna da false değerini gireceğiz. Flash Butnlar Eklemek Insert > Media > Flash Butn ylunu izleyelim. Bu yönergeyi izlediğimizde karşımıza bu işlemi yapabilmek için önce belgemizi kaydetmemiz gerektiğini belirten bir mesaj kutusu çıkacak. Tamam butnuna basalım ve belgemizi File > Save yönergesini izleyerek kaydedelim ve tekrar Insert > Media > Flash Butn yönergesini izleyelim.

19 Sample : Bu pencereden örnek butnları görebileceğiz. Stye : Örnek butnların lduğu pencere. Buttn text : Butnumuzun üzeride yazmasını istediğimiz metni buraya yazacağız. Fnt : Fntumuzu bu menüden seçeceğiz. Size : Fntumuzun byutu, puntsu. Link : Butnumuza vereceğimiz link, köprü. Target : Linkimizin hedefi. Bg clr : Butnumuzun arkaplan rengi. Save as : Butnumuzun adı. Brwse butnuna basarak butnu istediğiniz herhangi bir klasöre kaydedebilirsiniz. OK butnuna basalım. Sayfamıza butnların eklendiğini göreceksiniz. Eğer daha farklı şekillerde butnlar istiyrsanız Get Mre Styles butnuna basarak macrmedia.cm dan dwnlad edebilirsiniz.

20 Tabl Oluşturmak Insert > Table yönergesini izleyelim ve çıkan pencereden tablmuzu biçimlendirelim. Tablmuzdaki satır sayısını belirten değeri Rws metin kutusuna, sütun sayısını Clumns metin kutusuna, tablmuzun dış kenarlığının kalınlığını Brder Thickness metin kutusuna, hücrelerimizin büyüklüğünü Cell Padding metin kutusuna, hücreleri luşturan çizgilerin birbirine lan uzaklığını belirleyen değeri ise Cell Spacing metin kutusuna gireceğiz. Captin metin kutusuna ise luşturduğumuz tablya bir başlık atayabilirsiniz. OK butnuna basalım. İstediğimiz özelliklerde tabl eklenmiş lacaktır. Tablya Dışarıdan Veri Çağırmak Bir metin belgesinde 1 den 90 a kadar ekran kartı fiyatlarını sıraladınız ve bunu Web de yayınlayacaksınız. Bu verileri bir tablya girmek gerekiyr fakat bu kadar veriyi işlemek te çk uzun zamanımızı alacak. İşte size bir anahtar daha. Imprt Tubular Data. Bu kmut ile sıralı metinlerinizi bir tablya tmatik larak aktarabilirsiniz. Bu işlem için Insert > Table Object > Imprt Tubular Data yönergesini izleyeceğiz.

21 Brwse butnuna basalım, içerisinden verileri çağıracağımız metin belgesini seçelim. Şimdi ise tablyu biçimlendireceğiz. Eğer tablmuzun hücrelerinin verilerle rantılı bir biçimde şekillenmesini istiyrsak Fit t Data seçeneğini işaretleyeceğiz. Cell padding metin kutusuna hücrelerimizin büyüklüğünü belirten değeri, Cell spacing metin kutusuna hücrelerimizi luşturan çizgilerin birbirine uzaklığını belirten değeri, Brder metin kutusuna ise tablmuzun çizgilerinin kalınlığını belirten değeri gireceğiz. Frmat tp rw menüsünden de tablmuzdaki metni biçimlendirebiliriz. Ok butnuna basalım ve klavyemizden F12 yi tuşlayarak belgemizi sınayalım. Layerlar ve Özellikleri Layerlar için, Web dünyasında yüzyılın icadı desek hiçte abartı lmaz. Grafik prgramlarında ve Web editörlerinde estetik görünüm yükü sırtlayan yegane unsurdur layerlar. İstediğiniz nesneyi istediğiniz yere knumlandırabilmeniz, çeşitli menü şekilleri luşturabilmemiz, sayfamızdaki nesneleri saklayabilmesi layerların bize sağladı imkanlardan başlıcaları. Insert > Layut Objects > Layer yönergesini izleyerek layerlerin dünyasına ilk adımımızı atalım. Eklediğimiz layerı seçelim ve Prperties panelinde gelelim. Layer ID : Katmanın adı. Overflw : Katmanın içeriğinin byutunu aştığı zaman katmandaki nesnenin görünüp görünmeyeceğini bu seçenek ile belirleyeceğiz. Visible seçeneği seçilmiş ise katman içeriğe göre byutlanacak, Hidden seçeneği seçilmiş ise nesnenin katmana sığmayan kısmı görünmeyecek, Scrll seçili ise katmanda kaydırma çubukları çıkacak, Aut seçeneği seçilmiş ise de bu işleme gerek duyulduğunda kendiliğinden gerçekleşecektir. L : Katmanın, belgenin sl tarafına uzaklığı. T : Katmanın, belgenin üst tarafına uzaklığı. W : Katmanın genişliği. H : Katmanın yüksekliği. Clip : Katmanın istenilmeyen bölgesini göstermez. L, T, R, B : Sırasıyla sldan, üstten, sağdan ve alttan kaç piksel gösterilmeyeceğini belirleriz.

22 Z-Index : Katmanlarımız üst üste geldiği zaman bu metin kutusundaki sayısal değeri en büyük lan katman en üstte görünecektir. Vis(ibility) : Katmanların görünebilirlik ayarlarıdır. Hidden katmanlar gizlidirler, görünmezler. Inherit katmanlar kendisini kaplayan katmanın görünebilirlik özelliklerini alırlar, Visible katmanlar ise görünür katmanlardır. Bg image : Katmanlara aynı masaüstü (desktp) gibi arkaplan resmi atayabiliriz. Bg clr : Arkaplan rengi. Class : Still hazırlamışsanız bu menüden seçip uygulayabilirsiniz. Bağlantısı Eklemek Insert > Link yönergesini izleyelim. Text metin kutusuna görünecek metni, metin kutusuna da mailin gönderilmesini istediğimiz adresi yazacağız. OK butnuna basalım, linkimiz eklenmiş lacaktır. Herhangi bir metne bağlantısı eklemek istiyrsak metni seçtikten snra Prperties panelinden Link metin kutusuna mailt:mridvan@htmail.cm şeklinde adresi girmeliyiz. Metinlere bu ylla da adres link atayabilmekteyiz. Named Anchr Web sayfalarında görmüşsünüzdür, uzunca bir liste vardır bu listeyi de gruplayan butnlar vardır. Bu butnlara tıkladığımızda bizi sayfanın çapa atılan satırına götürür. Başka bir örnek vermek istersek uzun metinlerin lduğu web sayfalarında, sayfaların en altında Sayfa Başı şeklinde bir ibare bulunur. Bu linke tıkladığımızda sayfanın en başına döneriz. Biz de bu işlemi uygulayacağız. Bu işlem için yeni bir belge açalım. Belgemizin ilk satırına Mustafa yazalım. Belgemizde aşağılara kadar ENTER a basılı tutarak inelim. Ve ilk satıra yazdığımız ismi bir kez daha yazalım. (Mustafa) İkinci kez ismi yazdığımız satırın en başına gelelim ve Insert > Named Anchr yönergesini izleyerek çapamızı atalım. Şimdi ise çapamıza isim vereceğiz. Mustafa yazıp OK butnuna basalım. Çapamıza mustafa ismini verdik. Şimdi belgemizin ilk satırına gelelim ve daha önceden yazmış lduğumuz Mustafa ismini seçelim. Prperties panelinden Link metin kutusuna ise bu çapanın adresini yazacağız. Adresi #çapaismi şeklinde tanımlayacağız. Bizde adresimizi #mustafa larak girelim. Sayfamızı kaydedelim ve klavyemizden F12 ye basarak test edelim. Sayfamızın en başındaki Mustafa linkine tıkladığımızda sayfamızın en altındaki Mustafa yazısına indiğimizi göreceksiniz.

23 Yatay Çizgi Eklemek Sayfalarınız bölümlemek için kullanabileceğiniz bir diğer yöntem ise kesme çizgisiyle ayırmaktır. Bunun için Insert > HTML > Hrizntal Rule yönergesini izleyelim. Çizgimizin uzunluğunu (W) ve genişliğini (H) Prperties panelinden düzenleyebiliriz. Eğer çizgimizin gölgeli lmasını istiyrsak Shading sekmesin işaretlemeliyiz. Tag Inspecr panelinden çizgimizin bütün özelliklerini düzenleyebilirsiniz. Rengini değiştirmek için de clr bölümünü kullanacağız. Frameler Bu yöntemle sayfalarınızı bir kaç parçaya bölebilirsiniz. Örn: bir adet sl sütun, bir adet sağ sütun ve bu iki sayfayı birlikte gösteren bir belge. Framelerin mantığı böyle çalışmaktadır. Hemen uygulamaya geçelim. Insert > HTML > Frames > Left yönergesini izleyerek sayfamızı framelere ayıralım.

24 1 numaralı bölüm sl frame, 2 numaralı bölüm sağ frame, 3 numaralı bölüm ise bu iki sayfayı aynı anda gösteren index sayfasıdır. Şimdi sayfamızı ayıran frame çubuğunu seçelim ve Prperties paneline gelelim. Brders : Sayfayı ayıran frame çizgisini görünmesini istiyrsak Yes istemiyrsak N seçeneğini seçeceğiz. Brder width : Frame çubuğunun kalınlığını bu metin kutusuna yazacağız. Brder clr : Frame çubuğunun rengi. Clumn : Units bölümünden iki sayfanın birbirine ranla görüneceği miktarı yazacağız. Eğer Pixel seçili ise sl bölümün kaç Pixel görüneceğini, Percent seçili ise sl tarafın yüzde kaç görüneceğini (örn:iki parçadan luşan belgemizin sl tarafının % kaç görüneceği) RwClSelectin : Sağ ve sl frameleri özelliklerini düzenlemek üzere bu menüden seçebiliriz. Sayfamız bir kaç parçadan luşuyr peki link verdiğimiz sayfalar hangi sayfada açılacak? Sağda mı slda mı? Bunu Prperties panelinden Target bölümünden belirleyeceğiz. _blank _parent _self _tp mainframe leftframe : Link verilen sayfa yeni pencerede açılır. : Tüm sayfayı kaplayacak şekilde açılır. : Sl taraftaki framede açılır. : Ortada açılır. : Sağ taraftaki framede açılır. : Sl taraftaki framede açılır. Farklı frame çeşitleri için farklı targetleri bulunmaktadır. Bu özellikler sadece iki parçadan luşan frameler için geçerlidir. iframe Kullanmak Diğer adı flating framedir, bu yöntemle sayfalarımızın içinde frameler açabiliriz. Bu işlemi Design View de kullanamamaktayız, kullanabilmek için Cde View e geçmemiz gerekmektedir. View > Cde yönergesini izleyerek kd görünümüne geçelim. Cde View e geçtikten snra Insert > HTML > Frames > Flating Frame yönergesini izleyerek ifame ekleyelim. Frame özelliklerini düzenlemek için Tag Inspectr panelinden Attributes bölümüne gelelim.

25 align : Frame hizası frame brder : Frame çerçevesi height : Yükseklik marginheight : üstten bşluk marginwidth : kenardan bşluk name : frame ismi scrlling : İçerik frame penceresini aştığı zaman, aşan kısmı kaydırma çubuğuyla gösterilmesi bu bölümden yapılabilir. İçerik taşsa da gösterilmesin diyrsak N, gösterilsin diyrsak Yes, eğer gerek duyulursa kaydırma çubuğu çıksın diyrsak Aut seçeneğini işaretleyeceğiz. src : Frame içerisinde görünecek sayfanın ylunu bu metin kutusuna gireceğiz. width : Genişlik. Nasıl link verip iframede sayfa göstereceğim? Uygulamamızda yaptığımız sayfa üzerinde çalışalım. Design View görünümüne geçelim urunler.htm ve uygulama.htm adında iki belge kaydedelim. Uygulama belgemize gelelim Ürünler ve Uygulamalar yazalım. Yazdığımız bu metne Prperties panelinden Link bölümünden link verelim. Target bölümüne framemizin adını yazacağız. Bu kısım çk önemli çünkü Target kısmına iframenin adını yazmazsak sayfamıza iframemizde açılmayacaktır. Özel Karakterler Eklemek Dreamweaver da klavyemiz ile ekleyemeceğimiz bazı karakterler var. Bu karakterleri ise Insert menüsünden belgemize ekleyebiliriz. (Örn:Yen işareti, Ticari Marka ibaresi vb. gibi) Bu karakterleri belgemize Insert > HTML > Ekleyeceğimiz Karakter ylunu izleyerek ekleyebiliriz. Eğer istediğiniz simge bu menüde yksa daha fazla simge görüntülemek için Insert > HTML > Other kmutunu tıklayın.