Snippets Paneli Ve Araçları

Snippets paneli ve araçları
Dreamweaver MX programinin kurulumu sirasinda dosya yükleme islemleri bittikten sonra Workspace Setup isimli bir pencere açilir.
Bu pencere yardimiyla biz Dreamweaver MX’in çalisma alanini degistirebiliriz. Daha dogrusu Dreamweaver 4 ve Dreamweaver 3 programlarindakinden daha farkli bir çalisma alani seçebiliriz.
Ilk kurulum sirasinda bu pencere açildiginda “Dreamweaver MX Workspace” seçilidir.
style2>Dreamweaver MX’i kurduktan sonra bu pencereye Edit>>Preferences menüsüyle ulasilan Preferences penceresinin General kategorisindeki Change Workspace… dügmesi ile ulasabiliriz.
Açilan bu pencerede 3 farkli görünüm seçebiliriz. Bunlardan ilki Dreamweaver MX’le gelen geçerli görünüm. Bir digeri bu geçerli görünüm seçiliyken “Homesite/Coder-Style” seçenegi isaretlendiginde seçilen daha çok kod yazmak için uygun olan görünüm bir digeri ise “Dreamweaver 4 Workspace” seçenegi seçildiginde elde edilecek Dreamweaver 4’ten asina oldugumuz görünümdür.
Bu 3 farkli görünümün hangisini seçeceginiz sizin hangisiyle daha kolay çalisacaginiz ve Dreamweaver’i kod yazmak için mi yoksa daha çok görsel olarak site tasarlamak için mi kullanacaginiz belirler.
Style src=”http://www.webdersleri.com/web-internet/dreamweaver/site/ornek/dwhomesiteworkspace.gif” width=1024 name=dwhomesite>
Dream Weaver Download Linkini Download Bölümüde Bulabilirsiniz.
Dreamweaver MX programini anlatirken biz Dreamweaver MX görünümünü kullanacagiz. Bu görünümün en önemli özelliklerinden biri daha önceki sürümlerde yer alan pencerelerin artik paneller ve panel gruplari içerisinde yer almasidir.
Resme tiklayarak daha büyük halini görebilirsiniz.
Bu derste amacimiz panellerin içerdikleri özellikleri tanimaktan ziyade panellerin ne oldugu, nasil görünür hale getirilip sakli hale getirildigini göstermektir. Bu sebeple eger daha önce hiç incelemediyseniz bu ders kilavuzlugunda bahsedilen bütün panelleri incelemenizi tavsiye ederiz.
En üstte menüler yer alir.
Hemen onlarin altinda insert araç çubugu yer alir.
insert araç çubugunun altinda da Document araç çubugu yer alir.
Document araç çubugu altinda Document Window(Belge Penceresi) yer alir. Belge penceresinin sol altinda Tag selector(Im Seçici) yer alir. Sag altinda ise pek çok panel grubunu tek tikla açmamizi ve kapamamizi saglayan Launcher Bar yer alir. Launcher Bar pek çok küçük dügmeden olusan düzenlenebilir bir yapiya sahiptir.
Launcer Bar’in solunda Yükleme Göstergesi yer alir.
Yükleme Göstergesi
Bu bölümde gözüken ilk deger sayfanin K (Kilobayt) cinsinden boyutudur, ikinci deger sayfanin seçilen modem hizina göre sec(saniye) cinsinden yüklenme süresidir.
Yüklenme Göstergesinin solunda ise Window Size menüsü vardir, bu menü tasarladigimiz sayfa için bir boyut belirlememizi saglar.
Window Size menusu
Bu iki bölüm ile ilgili ayarlamalariPreferences iletisim kutusundaki Status Bar kategorisinden yapabiliriz.
Properties paneli(Penceresi) Document Window’un altinda yer alir. Properties penceresinde o an seçili elemana ait özellikler görünür.
En altta ise Results panel grubu vardir. Bu panelin içerisinde Search, Validation, Target Browser Check, Link Checker, Site Reports, FTP Log ve Server Debug panelleri yer alir.
Dreamweaver MX görünümünde pencerenin sag tarafinda panel gruplari ve paneller yer alir. Panel gruplari, içerisinde birden fazla panel barindiran panellerdir.
Design paneli bir panel grubudur ve içerisinde CSS Styles, HTML Styles ve Behaviors panelleri bulunur.
Code paneli de bir panel grubudur ve Tag Inspector, Snippets ve Reference panellerini içerir.
Application panel grubu Database, Binding, Server Behaviors, Components panellerini içerir.
Files panel grubu Site ve Assets panellerini içerir.
Answers paneli tek bir paneldir.
Panellerin herhangi birini görünür kilmak için Window menüsünü kullanabiliriz. Window menüsünde isminin sol yaninda bir seçim isareti olmayan bir panel görünür durumda degildir. Açik olanlarin sol yaninda ise seçim isareti vardir.
Window menüsündeki Hide Panels ile bütün panelleri gizleyebiliriz. Tekrar görüntülemek için paneller gizliyken ayni menüde yer alan Show Panels’i seçmemiz yeterlidir.
Bir panelin isminin üzerine gelip 1 kez tikladigimizda toplanir, eger toplanmis haldeyse ismin üzerine bir kez tikladigimizda açilir.
Panelin toplanmis hali Panelin açilmis hali
Bir paneli kapatmak için isminin yer aldigi baslik çubugunda sag tiklayip açilan menüden Close Panel group’u seçmek yeterlidir.
Not: Dersler sirasinda Properties paneli yerine Properties penceresi de denmistir. Her iki sekilde de seçili elemanin özelliklerinin görünür hale geldigi Properties paneli kastedilmistir.
Site Tanimlama
Dreamweaver MX’te çalismaya baslamadan önce, yapacagimiz çalismalarin derli toplu olmasi için bir site tanimlamasi yapmakta fayda vardir. Dreamweaver MX gerek sayfalarimizi kaydederken gerekse sayfalarda kullandigimiz resim, stil veya animasyonlar için bize kaydetmek istedigimiz dosyalarin ait oldugu siteyi soracaktir. Bir site için dosyalar tasarliyor olmasak da tanimlanmis bir sitemizin olmasi isimize yarayacaktir.
Site tanimlamak için Site>>New Site… menüsünü kullaniriz. Bu menü ile içerisinde Basic ve Adavanced sekmeleri bulunan Site Definition for Unnamed Site 1 penceresine ulasiriz.
Bu dersimizde biz Basic sekmesini tiklayarak bu sekmeyi kullanarak site tanimlamayi ögrenecegiz.
Basic sekmesinde ilk olarak “What would you like to name your site?” sorusunun altindaki metin alanina sitemizin ismini yazmamiz gerekir. Ben DWTurk yaziyorum. Next dedigimizde karsimiza ColdFusion, JSP, PHP veya ASP gibi bir server teknoloji kullanip kullanmayacagimiza dair bir seçim yapmamizi gerektiren asagidaki ekran gelir.
Server tipi seçimi
Biz su an için html uzantili sayfalar tasarlayacagimiz için ilk seçenek olan “No, I do not want to use a server technology” seçiyoruz.
Tekrar next dedigimizde sitenin yapim asamasinda dosyalarla nasil çalisacagimizi seçmemiz istenir. Burada asagida görülen 3 seçenek vardir.
Çalisma Süreci
Biz dosyalarimizi tasarladiktan sonra web alanina yükleyecegimiz için ilk seçenegi seçiyoruz.
Ikinci seçenek olan “Edit directly on server using local network” dosyalara yerel bir ag üzerindeki bir makineden ulasarak islem yapmak için, üçüncü seçenek ise site dosyalarina FTP ya da RDS kullanarak ulasmak içindir.
Bu ekranda “where on your computer do you want to store your files?” sorusu altindaki metin alaninda site dosyalarimizi saklayacagimiz bir klasör belirtmemiz istenir. Bunun için dügmesine tiklariz ve açilan pencerede site dosyalarimizi saklayacagimiz dizini seçeriz.
Next diyerek ulastigimiz bir sonraki asamada sitemizi barindiracagimiz sunucuya erisim yöntemimizi seçmemiz istenmektedir. Biz simdilik dosyalarimizla bilgisayarimizda islem yapacagimiz için ilk seçenek olan “None”i seçeriz.
Son asamada ise karsimiza yaptigimiz seçimlerin yer aldigi “Summary” kismi gelir.
Done tusuna tikladigimizda sitemizi olusturmus oluruz ve Site penceresi açilir.
Not: Site penceresi Dreamweaver MX Workspace görünümünde pencerenin saginda yer alan Files panelinin içerisindeki Site sekmesinde açilir. Bu sekmeyi panelden disariya sürüklediginizde yukaridaki resimde görülen pencere haline dönüsür.
Site Tanimlama 2
Site Tanimlamak 2
style=”align: left”>
style=”MARGIN-LEFT: 10px; MARGIN-RIGHT: 10px”>
Daha önceki derste Site Tanimlama sihirbazi ile bir site tanimlamistik. Bu defa Advanced sekmesini kullanarak bir site tanimlayacagiz. Fakat sitemiz yine bilgisayarimizda çalisan lokal bir site olacak.
Site>>New Site.. menüsü ile Site Definition pencersine ulasip Advanced sekmesini tiklariz. Karsimiza ilk kategori olan Local Info kategorisinin içerigi gelir. Sirayla buradaki alanlari taniyalim ve Cizik Roman sitesini olusturmak için kullanalim.
LocalInfo kategoris özellikleri
Site Name: Buraya sitemizin adini yazariz. Bu ad Site panelinde görüntülenecek addir.
Local Root Folder: Sitemize ait dosyalarimizi saklayacagimiz ve sitemizin Root Folder(Kök Dizin)’i olacak dizini seçtigimiz yerdir. Bu dizin bilgisayarimizda yer alan bir dizin olacagindan yolunu dogrudan yazabilecegimiz gibi Folder(Dizin) ( Folder Ikonu ) simgesini tikladigimizda açilacak olan Choose Local Root Folder for Site pencersinden bir dizin seçebiliriz.
Örnegin asagidaki resimde görüldügü gibi CizikRoman dizini benim kök dizinimdir.
Choose Local Root folder for Site CizikRoman penceresi
“Refresh Local File List” seçenegi isaretliyken kök dizinimize ekledigimiz ya da kök dizinden çikarttigimiz her dosya/dizin Dreamweaver tarafindan kaydedilir ve Site panelinde ekledigimiz her dosyayi/dizini ekledigimiz an görebiliriz.
Sitemizdeki dosyalari daha kolay takip edebilmemiz de bu seçenegin isaretli olmasinin faydasi vardir 😉
Default Images Folder metin kutusuna sitemizdeki resimleri sakladigimiz dizinin adresini yazariz. Metin kutusunu yanindaki Folder simgesini tikladigimiz da açilan Choose Local Image Folder for Site penceresinden de klasörümüzü seçebiliriz.
Bu klasörü belirtmenizde söyle bir yarar vardir. Örnegin sayfaniza kök dizin disinda bir dizinden resim ekledigimizde ve sayfamizi kaydetmek istedigimizde eklediginiz resmin kök dizin disarinda oldugu ve kök dizin içerisine kaydetmek isteyip istemedigimiz soran bir mesaj kutusu çikar ve eger biz resimlerimiz için bir dizin tanimlamissak, resmin bir kopyasi belirledigimiz dizin içerisine kopyalanir. 🙂
HTTP Address metin kutusuna sitemizin web adresini yazariz. Ben http://www.cizikroman.net yaziyorum.
Cache etiketi yanindaki “Enable Cache” seçenegi sitemiz için bir Cache(Önbellek) olusturmamizi saglar. Bu seçenegin seçili olmasi çok önemlidir. Bu seçenek sayesinde Dreamweaver MX sizin için bütün baglara ait bir index olusturur. Herhangi bir bagi degistirdigimizde, bir dosya adini degistirdigimizde sitedeki bu bagi ya da dosyayi kullanan dosyalrimizda otomatik olarak güncellemeler yapar.
Örnegin A.htm doyasindan B.htm dosyasina bir bag tanimlamissak, B.htm doyasinn adini C.htm yaptigimizda bize “Siz a.htm’den B.htm dosyasina bag tanimlamistiniz, bu bagi C.htm’e dönüstürmek ister misiniz?” diye sorar.
Yine A.htm ve B.htm sayfalarina yerlestirigimiz Kaplum.gif resminin adini kaplumbik.gif olarak degistirdigimizde bize “Kaplum.gif dosyasini yerlestiriginiz A.htm ve B.htm dosyalarinin Kaplum.gif yerine Kaplumbik.gif resmini kullanmasini istermisiniz?” diye sorar.
Bütün bu islemler sonrasinda Tamam dedigimizde eger “Enable Cache” seçenegini isaretlemissek karsimiza asagidaki mesaj kutusu çikar.
Bütün bu islemler sonrasinda Tamam(OK) diyerek sitemizi tanimlamis oluruz.
Preferences 1 (General)
style=”align: left”>
style=”MARGIN-LEFT: 10px; MARGIN-RIGHT: 10px”>
Preferences iletisim penceresinde pek çok kategori yer alir. Bunlardan ilki General kategorisidir.
Preferences iletisim penceresi, General kategorisi
Bu bölümdeki özelliklerin bazilari eger hiç Dreamweaver kullanmadiysaniz size pek bir anlam ifade etmeyebilir. Bu sebeple bu dersten daha iyi faydalanabilmek için Tablolar, Site penceresi, History paneli, Metin özellikleri konusunda bilgi sahibi olmanizin faydasi olabilir. Bu konular hakkinda Tasarim bölümünde bilgi bulabilirsiniz.
Document Options bölümünde su özellikler yer alir,
“Show Only Site Window on Startup” seçenegi isaretlendiginde Dreamweaver programing açtigimizda sadece Site penceresi açilir. Eger Dreamweaver MX görünümünde çalisiyorsak sadece Site paneli açik olur.
“Open Files in New Window” seçenegi seçilirse açtigimiz her yeni sayfa yeni bir pencerede açilir. Aksi taktirde mevcut sayfa kapanip yeni bir sayfa açilir.
“Warn when Opening Read-Only Files” seçenegi sadece okunabilir bir dosya açtigimizda bir uyari görüntülenmesini saglar.
update Links when Moving Files çekme menüsünde 3 seçenek yer alir.
Always : Dosyalarin yeri degistiginde onay almaksizin bu dosya ile baglantili tüm baglarda degis**lik yapilir.
Never : Dosyalar tasinirken baglarda bir güncelleme yapilmaz.
Prompt : Dreamweaver programinin, biz bir dosyanin yerini degistirirken bu dosyayi kullanan sayfalardaki baglari güncellemeyi isteyip istemedigimizi soran bir mesaj kutusu görüntüler.
Bu özellik site penceresini kullanarak dosya tasirken sayfalarimiz arasindaki baglarin bozulmasini önlememizi saglar.
Change Workspace… dügmesi çalisma alani görünümünü degistirmemizi saglayan iletisim kutusuna ulasmamizi saglar. Bu özelligin kullanimi için Çalisma Alani Seçimi dersini inceleyebilirsiniz.
Editing Options bölümünde ise su özellikler yer alir
“Show Dialog when inserting Objects” seçenegindeki isaret kaldirilirsa bir nesne eklerken açilan iletisim kutularinin görünmemesi saglanir.
Örnegin insert Table ( insert Table dugmesi ) dügmesine tikladigimizda insert Table iletisim kutusu açilir. Bunun sebebi bu seçenegin seçili olmasidir. Aksi taktirde insert Table iletisim kutusu çikmadan tablo dogrudan sayfaya eklenir.
“Faster Table Editing (Deferred update)” bu seçenek seçiliyken, örnegin bir tablo hücresinin içerisinde yazi yazarken normalde alt satira geçiyorsa ve tablo yaziya göre biçimlenmiyorsa Ctrl + Space tus kominasyonuna bastigimiz da tablo hücresi genisleyerek yaziya göre biçim alir. Eger bu seçenek seçili degilse biz yazimizi yazdikça metnin bulundugu hücre genisler ve diger hücreleri daraltmaya baslar.
“Enable Double-Byte Inline Input” seçenegi karakterleri 1 bayttan büyük olan karakterler içeren metinleri dogrudan Document Window içerisine yazabilmemezi saglar. Bu özellik latin harfleri haricinde harfler, semboller kullanilarak yazilan dillerde yazimi kolaylastirmak içindir.
“Switch to Plain Paragraph After Heading” seçenegi seçiliyse biz bir paragrafta bir paragraf biçimi seçtigimiz de (Text properties kutusundaki Format çekme menüsündeki H1, H2 gibi.) ve o paragrafin bitiminde Enter’a bastigimizda yeni paragrafta özellikler sifirlanir. Daha önce yazi yazdigimiz paragrafin özellikleri yeni paragrafa tasinmaz. Düz özelliksiz bir paragrafa baslamis oluruz.
Eger biz bu seçenegi seçili hale getirmezsek, örnegin bir paragrafta H2 biçimini seçip metnimiz yazip enter ile yeni paragrafa geçtigimizde o paragrafinda biçimi H2 olacaktir.
“Allow Multiple Conseutive Spaces” seçenegi geçerli olarak seçili degildir. Geçerli ayarlarda Dreamweaver’in tasarim görünmünde(Desing View) bir kelimeden sonra bir bosluk tusuna bastigimizda 1 bosluk kalir. Bosluk tusuna sürekli bassak da bosluk olusturamayiz. Bosluk olusturmak için Ctrl + Shift + Space* tus kombinasyonuyla bosluk olusturabiliriz. 🙂
Eger bu seçenegi seçili hale getirirsek space tusuna her bastigimizda bir bosluk olustururuz. Tabi bu bosluk Non Breaking Space türü bir bosluktur.
“Use and in place of and ” seçenegi Bold ( Bold dugmesi ) ve Italic ( Italic dugmesi ) dügmelerine bastigimizda HTML sayfamiza eklenecek imleri ayarlamak içindir.
Eger bu seçenek seçiliyse biz bir metni kalinlastirmak için kullandigimiz Bold dügmesine tikladigizida bu metin imleri içerisine alinir. Egik yapmak için Italic dügmesine tikladigimizda ise imleri içerisine alinir.
Eger bu seçenek seçili degilse imi yerine imi, imi yerine imi kullanilir.
Maximum Number of History Steps metin kutusu History panelini kullanarak kaç islemi geri alacagimiza dair bir sayi belirlememizi saglar. Örnegin 60 yazarsak en son yaptigimiz islemde dahil 60 islem geriye dönebiliriz.
insert Panel çekme menüsü insert paneli içerisindeki insert araç çubugunda yer alan dügmelerin görünümlerini ayarlamak içindir. Üç seçenek vardir.
Icons and Text: Dügme sembollerinin yaninda dügme isimlerininde görüntülenmesini saglar.
Icons Only: Sadece dügme sembollerinin görüntülenmesini saglar.
Text Only: Sadece dügme isimlerinin görüntülenmesini saglar.
Asagida sirasiyla bu farkli görünümden ayrintilar vardir.
insert araç çubugunun Icons and Text görünümü
nsert araç çubugunun Icons Only görünümü
nsert araç çubugunun Text Only görünümü
Spelling Dictionary çekme menüsünde maalesef henüz Türkçe yer almiyor 🙂
Preferences 2 (Code Format )
style=”align: left”>
style=”MARGIN-LEFT: 10px; MARGIN-RIGHT: 10px”>
Preferences penceresinde yer alan Code Format kategorisi, kod yazdigimiz alanla ilgili bazi düzenlemeler yapmamizi saglar.
“Indent” onay kutusu girinti olusturmak için kullanilir. Sayfamiza bir eleman ekledigimizde bu elemana ait kodun girintili bir sekilde kod sayfasinda yer almasini istiyorsak bu seçenegi seçili hale getirmeliyiz.
Use çekme menüsünden girintinin Spaces(bosluk) mu Tabs(sekme) mi kullanilarak birakilacagini belirler.
Indent Size metin kutusu girintinin ölçüsünü belirler.
Asagida yer alan resimlerde olusturulan bir tabloya ait HTML kodlari görülmektedir. Soldaki resimde Indent Size degeri 2 dir. Sagdaki resimde Indent Size degeri 5 tir.
Tab Size metin kutusu kodlama sirasinda klavyedeki Tab tusuna bastigimizda kaç karakter bosluk birakilacagini belirlememizi saglar.
“Automatic Wrapping” onay kutusunu isaretledigimizde kod yazarken belirli bir karakter sayisindan sonra biz alt satira geçmesek de otomatik olarak alt satira geçilmesi saglanir.
After Column metin kutusu ise kaçinci sütun/karakter sonrasi alt satira geçilecegini gösterir.
Line Break Type çekme menüsü HTML sayfalarimizin yer alacagi sunucu tipine göre bir satirbasi tipi seçmemizi saglar. Üç seçenek vardir. Bu üç seçenek Unix, Macintosh ve Windows içindir.
Default Tag Case çekme menüsü HTML imlerimizin büyük ya da küçük yazilacagini belirlememiz içindir.
Code Inspector(Kod Denetçisi)’da bir imin bir kaç harfini yazdigimizda kendiliginden tamamlanmasini saglayan bir özellik vardir. Burada harflerin büyük ya da küçük olmasini buradan ayarlayabiliriz.
Ayrica biz sayfamizi görsel olarak tasarlarken olusan kodda yer alan imlerin de büyük harflerden mi yoksa küçük harflerden mi olusacaginida bu özellikle belirleriz.
Eger Default Tag Case çekme menüsünde seçenegini seçersek imler küçük harflerle yazilir.
Eger seçenegini seçersek büyük harfle yazilir.
Default Attribute Case çekme menüsü ise imlere ait niteliklerin tipki imlerde oldugu gibi büyük harfle mi yoksa küçük harfle mi yazilacagini belirlememizi saglar.
Override Case Of: bölümünde 2 onay kutusu yer alir. Ilk onay kutusu olan “Tags”i isaretlersek Dreamweaver ile açtigimiz bir HTML sayfasindaki bütün imler(Tags) bizim yaptigimiz seçime göre büyük ya da küçük harfe çevrilir.
Yani eger biz Default Tag Case çekme menüsünde ‘i seçtiysek açtigimiz HTML dosyasindaki büyük harfle yazilmis tüm imler küçük harfle yazilmis hale döner.
“Attributes” onay kutusuda ayni sekilde imlere ait niteliklerin yazim seklinin bizim belirledigimiz sekle dönüsmesini saglar.
Centering bölümünde 2 seçenek dügmesi yer alir. Bu dügmeler bir metni ya da elemani ortalamak için hangi imlerin kullanilacagini seçmemiz içindir. Biz ekledigimiz bir metni ortala dedigimizde sayfamiza Div imi eklenmesini istiyorsak “Use DIV Tag” seçenegini isaretlemeliyiz. Eger Center imi eklenmesini istiyorsak “Use CENTER Tag” seçenegini isaretlemeliyiz.
Preferences 3 (File Types/Editors )
style=”align: left”>
style=”MARGIN-LEFT: 10px; MARGIN-RIGHT: 10px”>
Bu dersimizde Preferences penceresindeki File Types/Editors kategorisini inceleyecegiz.
Preferences File Types/ Editors Kategorisi
Open in Code View metin kutusu içerisinde bir dizi dosya uzantisi vardir. Burada yer alan dosyalari Dreamweaver ile açtigimiz da dosyalar tasarim görünümünde degil kod görünümden açilir. Örnegin .js uzantisi JavaScript dosyalarinin uzantisidir ve biz bir js uzantili dosyayi açtigimiz da tasarim Code Inspector ya da Code View bölümünde dosya içerigini görürüz.
External Code Editor metin kutusunda kod düzünleme için Dreamweaver harici kullanacagimiz programi seçmemizi saglayan bir Browse dügmesi vardir. Browse dügmesiyle açilan pencerede örnegin NotePad programini seçtigimiz de bu bölümdeki metin kutusunda NotePad.Exe dosyasinin adresi görünür.
Seçtigimiz harici düzenleyiciyi Edit>>Edit With [Seçtigimiz Program] menüsüyle çalistirabiliriz.
Reload Modified Files çekme menüsü Dreamweaver harici bir programlari Dreamweaver’la sayfa tasarlarken kullandigimiz bir dosyayi düzenledigimiz de Dreamweaver’in nasil bir davranis sergileyecegini ayarlariz.
Yukaridaki tanimin karmas** olmasi dolayisiyla örneklemekte fayda var 🙂
Örnegin bir resmi harici bir düzenleyiciyle (Örnegin Macromedia Fireworks) ile düzenledikten sonra ve dosyayi kaydedip Dreamweaver’a geri döndügümüzde Dreamweaver bu dosya üzerindeki islemi kabul edip etmemesi konusunda ayarlama yapmamizi saglar.
Reload Modified Files çekme menüsünde Always seçenegini seçersek dosyayi düzenleyip Dreamweaver’a geri döndügümüz de Dreamweaver degis**ligi dogrudan kabul eder ve dosyamizin son halini alir.
Never’i seçersek Dreamweaver harici düzenleyici ile yaptigimiz degis**ligi gözardi eder ve düzenledigimiz dosyayi sayfamiza tekrar eklememiz gerekir.
Promt’u seçersek dosya üzerinde yaptigimiz degis**lik dosyaya uygulansin mi, uygulanmasin mi? seklinde bize bir soru sorar. Bizim verecegimiz karara göre degis**lik uygulanir ya da uygulanmaz.
Save on Launch çekme menüsünde üç seçenek yer alir.
Always seçenegini seçersek biz herhangi bir harici düzenleyici ile bir dosyayi düzenlemeyi kalkistigimiz an üzerinde çalisitigimiz sayfa kaydedilir.
Never’i seçersek sayfa kaydedilmeden harici düzenleyici açilir.
Promt’u seçersek harici düzenleyiciyi çalistirdigimiz an sayfamizi kaydetmeyi isteyip istemedigimizi soran bir iletisim kutusu ile karsilasiriz ve seçim hakki bizim olur.
External Modified Files ve Save on Launch çekme menülerinde geçerli olarak Promt seçilidir ki Promt’un seçili olmasinda fayda vardir.
Ve son bölüm.
Yan yana iki adet liste menü vardir.
Liste/Menüler
Soldaki Extensions liste/menü’de dosya tiplerine ait uzantilar yer alir.
Sagdaki Editors Liste/menü’de ise bu dosya üzerinde islem yapmak için kullanilan programin adi yer alir.
Asagidaki resimde görüldügü üzere ben Extensions liste/menüsünde .gif uzantisini seçtigim de Editors Liste/menüsünde iki program adi beliriyor.
Bunun nedeni bu tür dosyalari düzenlemek için mevcut iki programimin olmasi fakat ben sayfama bir .gif uzantili resim ekledigimde ve Properties panelindeki Edit Edit Dugmesi dügmesine bastigimda ekledigim dosyayi düzenleyebilmem için Adobe Photoshop programi açilir.
Eger Editors listemizde birden çok program varsa birincil olmasini istedigimiz programi seçip Make Primary ( Make Primary Dugmesi ) dügmesine tikladigimizda seçtigimiz programin yaninda (pirimary) yazisi belirecektir.
Dreamweaver MX’i kurdugumuz da sistemimizdeki düzenleyicileri bularak bu listeye kendiliginden ekler. Eger biz bu listelerde yer almayan bir programi kullanmak istersek Editors liste/menüsünün üzerindeki Ekle ( Add Dugmesi ) dügmesini tikladigimizda açilan select External Editor iletisim kutusunu kullanarak yeni bir programi listeye ekleyebilir ve hatta birincil düzenleyici yapabiliriz. Bir programi listeden silmek için ise programin adini seçip Sil ( delete Dugmesi ) dügmesine basmamiz yeterlidir.
Extensions liste/menüsünde belli basli pek çok resim/medya dosyasi mevcuttur. Fakat burada bulunmayan bir dosya tipi eklemek istersek Extensions liste/menüsün üzerinde yer alan Ekle ( Add Dugmesi ) dügmesini kullanarak dosya tipimizin uzantisini yazmamiz yeterlidir. Daha sonra Editors liste/menüsünde de bu dosya tipini düzenlemek için bir program belirleriz.
Herhangi bir doya tipini listeden silmek için ise listeden dosya uzantisini seçtikten sonra Sil ( delete Dugmesi ) dügmesine tiklamamiz yeterli olacaktir.
Bu bölümde belirledigimiz düzenleyici programlari resim/medya dosyalarina ait Properties panelinde yer alan Edit ( Edit Dugmesi ) dügmesine tiklayarak çalistiririz
Preferences 4 ( Invisible Elements )
style=”align: left”>
style=”MARGIN-LEFT: 10px; MARGIN-RIGHT: 10px”>
Invisible Elements (Görünmez Ögeler) web sayfamizi tasarlarken ekledigimiz bazi neslere ait isaretçilerdir. Örnegin bir Layer(Katman) ekledigimizde katmana ait bir Görünmez Öge’de sayfamiza eklenir. Ayni sekilde sayfamiza ekledigimiz bir JavaScript kodu da bir görünmez öge ile sayfa üzerinde belirtilir.
Bu isaretçilerin ismi Görünmez Ögeler(Invisible Elements) olsa da aslinda bu isaretçilerin görünür olup olmamasi bizim elimizdedir 🙂
Bu ögelerin hangi durumlarda ne ise yaradiklarina style2>Tasarim bölümünde sirasi geldikçe deginecegiz. Bu derste sadece Preferences iletisim penceresindeki Invisible Elements kategorisine deginecegiz. Bu kategorideki özellikler Görünmez Ögelerimizin görünüp görünmeyecegine karar vermemizi saglayan yerdir 😉
Preferences Invisible Elements Kategorisi
Yukaridaki iletisim penceresine Edit>>Preferences… menüsü ile ulastigimiz Preferences iletisim penceresinin Invisible Elements kategorisine tiklayarak ulasiriz. Dreamweaver MX’i ilk olarak kurdugumuzda yukaridaki resimde görülen ögeler seçilidir.
Simdi kisaca Show bölümünde bulunan bu her ögenin iliskili oldugu elemani/özelligi açiklayalim.
Anchor Point ElementNamed Anchors: Web sayfamiza bir Named Anchor(Adlandirilmis Çapa) ekledigimizde ortaya çikar. Çapayi ekledigimiz yerde görünür.
Scripts Element Scripts: Web sayfamiza ekledigimiz VBscript ya da JavaScript’in yerini isaret eder. Üzerine tiklandiginda scripte ait özellikler Properties penceresinde belirir(Yani script’e ait properties penceresi görünür).
CommentsComments: HTML sayfasina ekledigimiz Comment(Yorum)’leri belirtmek için kullanilir. Üzerine tiklandiginda web sayfamiza ekledigimiz yorum Properties penceresinde görünür.
Line Breaks ElementLine Breaks: Sayfalarimiza ekledigimiz her satir basi için ( imi ) için bir tane bu isaretçiden eklenir.
Client-Side Image Maps ElementClient-Side Image Maps: Istemci-Tarafli Resim Haritalari ekledigimizde sayfamizda görünür olurlar. Tabi tasarim asamasinda. Buradaki her isaretçi sadece tasarim asamasinda görünürdür.
Embedded Styles ElementEmbedded Styles: <Body> imleri arasina yerlestirilmis CSS’lere ait isaretçidir. <Head > imi içerisine yerlestirilen stiller için bu isaret görüntülenmez.
Hidden Form Fields ElementHidden Form Fields: Gizli Form Alanlari eklendigin de olusan isaretçidir.
Form Delimiter ElementForm Delimiter: Sayfamiza bir form ekledigimizde bu form alaninin etrafinda bir sinir çizgisi/çerçeve olusmasini saglanir. kirmizi kes** çizgilerden olusan bu çerçeve formuzun görsel olarak yerini görmemezi saglar. Böylece form içerisine daha kolay eleman ekleriz.
Anchor Points for Layers ElementAnchor Points for Layers: Sayfamiza ekledigimiz katmanlar(layers) için olusan isaretçidir. Bu isaretçiyi faremiz ile tutarak istedigimiz yere sürükleyebiliriz. Böylece katmanimiz istedigimiz yere yerlesmis olur. Ayrica bu isaretçiyi fare ile tiklayarak temsil ettigi katmanin görülür/seçili hale gelmesini saglariz.
Anchor Points for Aligned Elements ElementAnchor Points for Aligned Elements: Aling özelligine sahip resim, tablo gibi HTML elemanlarinin aling özelligini belirtmek için kullanilir. Örnegin bir resmin aling özelligini Right olarak belirledigimizde, yerlestirildigi konumdan oldukça uzak bir alana konumlanirsa bu isaretçi belirir.
Visual Server Markup Tags ElementVisual Server Markup Tags: Görsel Sunucu Biçimleme Imlerinin eklendikleri yeri isaret etmek için kullanilir.
NonVisual Server Markup Tags Element NonVisual Server Markup Tags: Görsel Olmayan Sunucu Biçimleme Imlerinin eklendigi yeri isaret etmek için kullanilir.
Show Dynamic Text As: Çekme menüsünden sayfamiza ekledigimiz Dynamic Text nesnesinin görünümünü ayarlayabiliriz. Eger Dynamic Text’imizin içerigi tasarim görünümüne zarar verebilecek uzunlukta ise Dynamic Text alanlarinin sadece bir parantezden ibaret olarak görünmesini saglayabiliriz. Bunun için sadece parantezlerden olusan seçenegi seçmeleyiz.
Show Dynamic Text As Çekme Menüsü
Türkçe Karakter Gösterimi
style=”align: left”>
style=”MARGIN-LEFT: 10px; MARGIN-RIGHT: 10px”>
Türkçe karakterlerin görünmesini saglayan karakter kodlari, Mac ve Windows için ayridir.
Meta Imleri
Yaptigimiz sayfanin Machintosh’da sorunsuz görünebilmesi için, iso kodunu önce yazmaliyiz. Windows kullanicilari, zaten 8859-9 setini göremeyecekleri için otomatik olarak 1254’e geçecektir. Ancak 1254 önce yazilirsa, Mac’de (Turkish Windows) olmadigi için sorun yasanmaktadir.
Dreamweaver MX’te Türkçe karakterleri göremiyorsaniz, Viev>>Preferences menüsüyle ulasacaginiz Preferences penceresindeki Fonts kategorisinde yer alan ayarlari asagidaki resimdeki gibi yapin. (crtl+u)
Preferences Penceresi, Fonts Kategorisi Ayarlari
Ayrica ayni penceredeki New Document kategorisinde yer alan Default Encoding çekme menüsünden Turkish(windows-1254)’ü seçin.
Ayrica bir sayfa ile çalismaya baslamadan önce modify>>Page Properties… menüsüyle ulasacaginiz Page Properties penceresinde Document Encoding çekme menüsünden Turkish(Windows-1254) seçenegini seçin, tabii eger seçili degilse(Bu seçenek çekme menüde yoksa nasil ekleyeceginizi konu sonundaki Not bölümünden ögrenebilirsiniz.). Bu sekilde Türkçe karakterleri Dreamweaver MX üzerinde göreceginiz gibi, sayfanizi kaydedip kapattiktan sonra tekrar açtiginizda metniniz bozulmayacaktir.
Page Properties Penceresi, Document Encoding Ayari
Sayfada metin girisini mutlaka, yukaridaki meta kodlarini ekleyip, Encoding ayarindan sonra gerçeklestirin. Bu islemlerden önceki metin girislerinde, encoding (harflerin karsiliklarini kodlama) islemi sorunlu olacaktir ve tarayicida Türkçe karakter görünmeyecektir.
View>>Head menüsüyle sayfamizdaki standart Meta’yi görebiliriz.
Head Content Penceresi
Buradaki meta simgelerine tikladiginizda Properties penceresinde o metanin içerigi görüntülenir. Properties penceresinden meta üzerinde degis**lik yapabilirsiniz.
Properties Penceresi
**Not**
Dreamweaver MX (6.0 ve 6.1) içeriginde dil kodlamasi bulunmayan sayfalari geçerli olarak Western Latin(1) Dil kodlamasini kullanarak görüntülemektedir. Türk alfabesindeki bazi karakterler bu kodlamayla görülemedigi için sayfalariniza mutlaka bir dil kodlamasi eklemeniz gerekmektedir.
Sayfalariniza Page Properties penceresindeki Document Encoding çekme menüsünü kullanarak Türkçe dil kodlamasi ekleyebilmek için www.abi.com.tr sitesi tarafindan yayimlanan asagidaki bagi tiklayarak indireceginiz Extension’i kullanabilirsiniz.
Page Properties 1
style=”align: left”>
style=”MARGIN-LEFT: 10px; MARGIN-RIGHT: 10px”>
Bir sayfa ile çalismaya baslamadan önce o sayfaya ait bazi özellikleri önceden belirlememiz de fayda vardir. Dreamweaver’da bunu yapmak için modify>>Page Properties… menüsü ile ulastigimiz Page Properties penceresini kullaniriz. Bu pencere ile zemin rengi, sayfa basligi, kenar girintileri gibi pek çok özelligi ayarlayabiliriz.
Page Properties Penceresi
Title: Yaptigimiz sayfanin bir tarayicida görüntülendiginde o tarayicinin baslik çubugunda (Title Bar) bir isim görünmesini istiyorsak bu bölüme görünmesini istedigimiz basligi yazariz. Eger bu bölümü bos birakirsak, yaptigimiz sayfayi bir tarayicida görüntüledigimiz de baslik çubugunda “Untitled Document” yazar.
Background Image: Yaptigimiz sayfaya bir artalan resmi eklemek için bu bölümü kullaniriz. Metin alaninin yanindaki Browse dügmesini tikladigimizda açilan pencerede artalan resmi olarak kullanmak istedigimiz resmi seçeriz. Artalan resimleri sayfa içerisinde diger resimler gibi düzenlenemez. Ayrica burada seçtigimiz resim kendisini tekraralayarak sayfamizin tüm zeminini kaplar.
Artalan resmi olarak kullanacagimiz resimlerin küçük boyutlu dosyalar olmasi sayfalarimizin daha kisa sürelerde görüntülenmesini saglar.
Background: Üzerinde çalistigimiz sayfanin artalan rengini belirlemek için kullaniriz. Renk seçim dügmesini ( Renk Secim dugmesi ) tikladigimizda açilan renk paletinden bir renk seçebilecegimiz gibi renk paletinin sag üst kösesinde yeralan System Color ( System Color ***ker Dugmesi )dügmesine tikladigimizda açilan Renk(Color) penceresindeki özellikleri kullanarak da renk seçebiliriz.
Burada belirleyecegimiz rengi seçmek için renk seçme dügmesinin yanindaki metin kutusunu da kullanabiliriz. Bu alana seçecegimiz rengin onaltili koddaki degerini yazarak rengi belirleyebiliriz. Asagida bazi kod degerlerinin hangi renklere karsilik geldigi görülmektedir.
Beyaz #FFFFFF Kirmizi #FF0000 Mavi #0000FF
Yesil #00FF00 Siyah #000000 Gri #666666
Artalan resmi yerlestirdigimiz bir sitede artalan rengi görüntülenmez. Kullandigimiz resim tüm zemini kaplayacagi için belirledigimiz renk resmin altinda kalacaktir.
Fakat bu Page Properties penceresini kullanarak artalan resmi belirlerken geçerlidir. Page Properties penceresinde belirledigimiz artalan resimleri dogrudan sayfa zeminine dösenecektir. Fakat CSS kullanarak bir arkplan resmi belirledigimiz de arkplan resminin tekrarlanmadan sadece 1 kez görüntülenmesini saglayabiliriz. Bu durumda resmin kaplayamadigi sayfa zeminindeki alana verecegimiz artalan rengi görünür olacaktir. CSS kullanarak artalan resmi belirlemeyi daha sonraki derslerde anlatacagiz.
Text: Sayfa içerisine yerlestirdigimiz metinler biz özel olarak bir belirleme yapmadikça tarayici tarafindan görüntülendiginde tarayicinin geçerli metin rengi ile görüntülenecektir. Bir degis**lik yapilmadigi sürece bu renk genellikle siyahtir. Metin rengini arkaplan renginde oldugu gibi renk seçme dügmesini ya da metin kutusunu kullanarak degistirebiliriz.
Links: Sayfada yer alacak köprülerin rengini bu özellikle degistirebiliriz.
Visited Links: Daha önce ziyaret edilmis bir sayfaya giden baglarin ya da bir web sitesinde ulasmis oldugumuz sayfalara giden baglarin renkleri genellikle farklidir. Visited Links özelligi ile bu köprülere istedigimz rengi verebiliriz.
Active Links: Bir baga tikladiginizda eger bir pencere açiliyorsa eger dikkat ettiyseniz tikladiginiz köprü genellikle diger köprülerden daha farkli bir renk alir. Baska bir baga tikladigimizda ise o köprü eski rengine döner, baska bir renk alir veya ayni renkte kalir. Iste aktif olan köprülerin farkli renkte görünmesini istiyorsak buradan bu rengi seçebiliriz.
Page Properties 2
style=”align: left”>
style=”MARGIN-LEFT: 10px; MARGIN-RIGHT: 10px”>
Page Properties penceresinde yer alan özellikleri incelemeye devam ediyoruz.
Left Margin: Sayafaya ait yatay marj degeri belirlememizi saglar. Netscape Navigator’in 7.0 sürümü öncesindeki sürümlerinde bu bölümde belirtilen degerler göz önüne alinmaz.
Internet Explorer’da sol ve sag marj degerleri geçerli ayarlarda 10 pikseldir. Eger biz sayfa elemanlarimizin tam olarak köselere bitis** olmasini istiyorsak bu bölüme 0 degerini yazmamiz gerekir.
Top Margin: Sayfaya ait dikey marj degeri belirlememizi saglar. Bu özellik de Left Margin özelligi gibi Netscape Navigator’in eski sürümlerinde desteklenmeyen bir özelliktir.
Asagida Left Margin degeri 30, Top Margin degeri 0 olan bir sayfaya yerlestirilmis bir resim vardir. Resmin sol tarafinda fazlaca bosluk kalmasinin nedeni Left Margin degerinin 30 olmasidir.
Margin Width: Yatay marj ayarlarinin belirlenmesinde kullanilir. Bu özellik Internet Explorer tarafindan desteklenmeyen bir özelliktir. Netscape Navigator ve Mozilla gibi tarayicilar tarafinda desteklenir ve sayfaya belirttigimiz ölçüde marj degerleri verilir.
Margin Height: Sayfaya ait dikey marj degeri belirlemimizi saglar. Internet Explorer tarafindan desteklenmeyen bu özellik Netscape Navigator tarafindan desteklenir.
Asagidaki resimlerde Margin Width ve Margin Height degeri sifir olarak belirlenmis bir sayfanin sirasiyla Netscape Navigator 7.02, Mozilla 1.2, Opera 6.05 ve Internet Explorer 6.0 ile görüntülenmis halini görmekteyiz.
Netscape Navigator 7.02 Görünümü Mozilla 1.2 Görünümü
Opera 6.05 Görünümü Internet Explorer 6.0 Görünümü
Internet Explorer tarafindan Margin Height ve Margin Width özelligi desteklenmedigi için üst ve sol kenarda bosluklar kalmistir.
Bu sebepledir ki eger marj degerlerinin sayfamizi görüntüleyen ziyaretçilerin pek çogu tarafindan bizim belirledigimiz sekilde görülmesini istiyorsak Left Margin, Top Margin, Margin Width ve Margin Height özelliklerinden dördünüde kullanmaliyiz.
Document Encoding: Sayfada kullanacagimiz dili burada belirttigimiz taktirde sayfaya, yaptigimiz seçime göre uygun bir HTML kodu eklenmesini saglariz.
Bu özellikten Site bölümü altinda yer alan Türkçe Karakter Gösterimi dersinde ayrintili olarak bahsedilmistir.
Tracing Image: Sayfamiz için bir taslak resmi eklemimizi saglar. Sadece sayfamizi tasarladigimiz asamada sayfamizin arkasinda görebilecegimiz, ama sayfamizi kaydettigimizde sayfamizda yer alamayacak bir resimdir Tracing Image (Taslak Resmi).
Tracing Image konusunda Püf Noktasi ana basligi altindaki Tracing Image dersinde daha ayrintili bilgi bulabilirsiniz.
Transparency: Tracing Image’in transparaligini belirlemek için kullanilir. 0% ile 100% degerlerini alabilir. Yüzde degeri arttikça resmin seffafligi azalir.
Document Folder: Üzerinde çalistigimiz sayfa eger kaydedilmisse, hangi dizin içerisinde kayitli bulundugunu burada görebiliriz.
Site Folder: Üzerinde çalistigimiz sayfanin hangi siteye ait dizinde oldugunu burada görebiliriz. Örnegin biz DWTurk sitesi ile çalisiyorsak ve DWTurk sitesi için “Root Folder” olarak c:dwturk dizinini belirledigimiz için bu bölümde c:dwturk degerini görürüz.
Code Inspector / Kod Denetçisi
style=”align: left”>
style=”MARGIN-LEFT: 10px; MARGIN-RIGHT: 10px”>
Dreamweaver bir WYSIWYG*(What You See Is What You Get) web sayfasi olusturma programi oldugu için olusturacagimiz sayfalarin HTML kodlarini görmeden tasarlayabiliriz. Tabi bir yere kadar 🙂
Görsel düzenleyicide yapamayacagimiz isler için ya da HTML kodlarini kod yazarak düzenlememiz için Dreamweaver’in Code Inspector(Kod Denetçisi)’i vardir. Kod Denetçisi’ne ulasabilmek için Window>>Code Inspector menüsünü kullaniriz.
Code Inspector’a bu yolla ulastigimizda Document pencerisi haricinde Code Inspector isimli bir pencere açilmis olur. Fakat DreamWeaver MX, bize HTML kodlarini Document penceresi içerisinde görüntüleme imkani verir. Document penceresinin sol üstünde asagidaki gibi 3 tus vardir.
Bunlardan ilki pencerede sadece kodlarin görünmesini, ikincisi pencereyi ikiye bölerek hem kodlarin hem görsel düzenleyicinin görünmesini, üçüncüsü ise sadece görsel düzenleyicinin görünmesini saglar.
Kod Denetçisine ait özellikleri View>>Code View Options menüsü yardimiyla ya da Kod Denetçisi penceresinde yer alan View Options ( View Options Dugmesi ) dügmesi ile ulasilan menü ile düzenleriz. View Options’ta su seçenekler vardir.
Word Wrap: Sözcük kaydirma, kod satirlarinin uzumasi halinde satirin devaminin alt satirdan devam etmesini saglar.
Line Numbers: Satir numaralari, satirlarin basinda satir numaralarinin gözükmesini saglar.
Highlight Invalid HTML: Yanlis yazilmis HTML kodlarinin etrafinda sari renkli bir kutu olusmasini saglar.
Syntax Coloring: HTML kodlarinin diger kod ve yazilardan farkli renkte olmasini saglar. Böylece HTML kodlari ile sayfanizda yer alan metin ya da scriptleri birbirinden ayirmaniz daha kolay olur.
Auto Indent: Otomatik girintileme, görsel düzenleyicide eklenen nesnelere ait kodlarin kendiliginden girintili olarak yazilmasini saglar. Örnegin bir tablo eklediginizde bu seçenek isaretli degilse tabloya ait bütün kodlar sola yasli olur. Eger bu seçenek isaretliyse asagidaki resimdeki gibi bir girintileme yapilir. Bu, sayfalara ait kodlar incelenirken büyük kolaylik saglar.
Dreamweaver derslerinin devaminda uzun süre daha bu pencereyi kullanmayacagiz. Yine de yerinin bilinmesinde fayda var 😉
*Ne Görürsen Onu Alirsin seklinde Türkçeye çevirilebilir.
Rulers & Grid / Cetveller ve Izgara
style=”align: left”>
style=”MARGIN-LEFT: 10px; MARGIN-RIGHT: 10px”>
Dreamweaver’da baslangiçta File>>New ile bir dosya açtigimiz da beyaz bir çalisma alanimiz vardir. Bu alandaki nesneleri yerlestirirken konumlarini belirlemek için genellikle Properties panelini kullaniriz.
Bunun yaninda Dreamweaver’in hizalama ve konumlandirma islemlerinde bize yardimci olacak görsel araçlarida vardir.
Gerçek hayatta uzunluk ve mesafe ölçümü için kullandigimiz cetveller Dreamweaver bünyesinde de yeralir. Cetveller(Rulers) View>>Rulers>>Show menüsü ile görünür hale getirilir.
Cetvel için seçebileceginiz 3 ölçü birimi vardir. Bu üç ölçü birimini Rulers menüsün altinda görebiliriz. Web için döküman hazirlanirken genellikle piksel kullanilir. Fakat eger istersek inç ya da santimetreyi de kullanabiliriz.
Cetveller ilk görüntülendiginde sifir noktalari sayfanin sol üst kösesindedir. Yapacagimiz sayfa tasarimi için sifir noktasini degistirmek istersek bu durumda yatay ve dikey cetvelin kesistigi yerdeki sifir noktasina fare ile sol tiklayip, farenin tusunu birakmadan istedigimiz yere tasiyip birakabiliriz. Artik yeni bir sifir noktamiz vardir.
Eger sifir noktasini ilk konumuna döndürmek istersek View>>Rulers>>Reset Origin menüsünü kullanabiliriz ya da faremizle sifir noktasina iki kez tiklariz 😉
Düzen için kullanilacak bir diger araç Izgara(Grid)’dir. View>>Grid>>Show Grid menüsü ile Izgara’yi görünür hale getiririz.
Bu islem sonrasi sayfamiz üzerinde bir izgara belirir. Bu izgaranin özelliklerini degistirmek için Grid Settings penceresini kullaniriz. Bu pencereye View>>Grid>>Edit Grid… menüsünden ulasilir.
Color: Izgara çizgilerinin rengini degistirmemizi saglar.
Show Grid: Seçenegini seçersek izgara görünür hale gelir.
Snap to Grid: Bu seçenegi seçtigimizde sayfamiza yerlestirdigimiz katmanlar(Layers) izgara çizgilerine kenetlenir.
Spacing: Buradaki sayi degeri ile izgaranin çizgilerinin araligini degistirebilirsiniz. Ayrica bu aralik degeri için piksel, inç ya da santimetre gibi birimler belirleyebiliriz.
Display: Izgara baslangiçta düz çizgilerden olusur. Bunun sebebi baslangiçta Lines seçeneginin seçili olmasidir. Eger izgara çizgilerinin noktali çizgilerden olusmasi istenirse Dots seçeneginin isaretlenmesi gerekir.
Asagidaki ilk resim mavi renkli ve 20 piksel aralik degeri olan noktali bir Izgara’nin görünümüdür. Ikinci resim ise açik yesil renkli, 10 piksel aralik degeri olan düz çizgili bir izgaranin görünümüdür.
Izgara çizgisi ve cetveller sadece tasarim asamasinda görüntülenen elemanlardir. ortaya çıkartilan Html sayfasina yansimazlar.
Prewiev In Browser / Önizleme Seçenekleri
style=”align: left”>
style=”MARGIN-LEFT: 10px; MARGIN-RIGHT: 10px”>
Yapacagimiz sayfalarin Dreamweaver MX çalisma alanindaki görünümü bazen tarayicidaki görünümünden farkli olur. Ayrica animasyonlar, roll over image efekti ve scriptlerin olusturdugu etkiler çalisma alaninda görülemez. Bu sebeple sayfalarimizi tasarlarken her defasinda kaydedip bir tarayici ile açmak yerine F12 tusuna basarak önizleme yapariz. F12 tusuna bastigimizda üzerinde çalistigimiz sayfamiz, seçmis oldugumuz tarayicinin açilmasiyla bu tarayicida görüntülenir. Peki biz bu tarayiciyi nasil seçeriz?
Iste bu tarayiciyi seçmemizi saglayan Edit>>Preferences… menüsü ile ulastigimiz Preferences penceresindeki Preview in Browser kategorisidir.
Prewiev in browser
Bu pencere ilk açtigimizda geçerli web tarayicimiz görülür. Windows kullanicilari için bu Internet Explorer’dir çogunlukla. 🙂 Fakat eger istersek baska tarayicilarida bu listeye ekleyebiliriz.
Yeni tarayici eklemek için Browsers: etiketinin yanindaki Arti dügmesine tikladigimizda Add Browser penceresi açilir. Bu pencerede Name metin alanina seçecegimiz tarayici(browser)nin hangi isimle görünmesini istiyorsak onu yazariz. Application metin alaninin yanindaki Browse… dügmesini tiklayarak önizleme için kullanacagimiz tarayiciyi seçeriz. Ben bilgisayarimda kurulu bulunan Netscape Navigator’i seçiyorum.
Add Browser penceresinde Defaults: etiketli bölümde 2 seçenek vardir. Bunlar seçilen tarayicinin birincil ya da ikincil tarayici olarak seçilmesine olanak tanir. Ben ekledigim Netscape Navigator’in birincil tarayicim olmasini istedigim için “Primary Browser” seçenegini isaretliyorum.
Add Browser
Bu islemi yapip tamam dedigimde Tarayicilarin listelendigi pencerede Netscape.exe ismi yaninda F12 yazar. Bu önzileme yapmak için kullanilan kisayol tusudur. Birincil tarayici olarak Netscape Navigator’i seçtigimden baslangiçta Internat Explorer yaninda olan F12 yazisi kaybolmustur. Bu durumda Internet Explorer’i ikincil tarayici olarak belirlememiz için Internet Explorer’i seçip Edit… dügmesine tiklayarak bunu yapabilecegimiz gibi tarayicimizin ismi liste/menü alaninda seçiliyken Defaults: etiketli bölümden “Secondary Browser” seçeneginide seçebiliriz.
Edit Browser
Edit… dügmesini tikladigimizda açilan Edit Browser penceresi Add Browser penceresi ile ayni görünüme sahiptir. Açilan Edit Browser penceresesinde “Secondary Browser” seçenegini seçip tamam dedigimizde tarayicilarin adlarinin bulundugu liste/menü alaninda iexplorer alani yaninda Ctrl F12 yazisi görülür. Ctrl F12 kisayol tuslari üzerinde çalistigimiz sayfayi ikincil tarayici ile önizlememizi saglar.
Edit Browser penceresini kullanarak mevcut bir tarayiciya ait isim ve dosya konumunu da seçebilirsiniz.
Mevcut tarayicilardan herhangi birini listeden silmek istedigimizde Eksi dügmesini kullaniriz.
Arti dügmesini kullanarak daha pek çok tarayici ekleyebiliriz bu listeye. Fakat eklediginiz tarayicilardan sadece ikisini kisayol tuslari ile çalistirabilirsiniz. Üzerinde çalistigimiz bir sayfayi birincil ve ikincil olan tarayicilar haricindeki bir tarayici ile önizlememiz için Document araç çubugundaki Prewiev/Debug in Browser dügmesine tikladigimizda açilan menüden seçebiliriz.
Son olarak Preferences penceresinin Prewiev in Browser kategorisinde Options: etiketli bölümde “Prewiev Using Temporary File” diye bir seçenek vardir.
Bu seçenegi seçili ise çalistiginiz dosyayi kaydetmeseniz de yaptiginiz degis**likleri önizleme yaptiginizda görebilirsiniz çünkü Dreamweaver MX yaptiginiz degis**liklerinde yer aldigi geçici bir dosya olusturur ve biz önizleme yaptigimizda bu dosyayi görürüz. Eger bu seçenek seçili degilse yaptigimiz degis**likleri görmek için her önizleme isleminden önce sayfamizi kaydetmemiz gerekir. Kabul etmek gerekir ki bu da büyük bir zaman kaybina neden olur 😉
Not:
Netscape Navigator programini www.netscape.com sitesinden ücretsiz olarak indirebilirsiniz.
Mozilla web tarayicisini programini www.mozilla.org sitesinden ücretsiz olarak indirebilirsiniz.
Opera 7.0 web tarayicisi ücretli bir program olmasina karsin, shareware sürümü içerisinde yer alan bir reklam banneriyla birlikte süresiz olarak kullanilabilmektedir. Opera ‘yi www.opera.com sitesinden indirebilirsiniz.
Alıntıdır : http://www.aspsitem.com/Forum.asp?forum=oku&msgid=27644&yanilik=1
Semih Kütük

Yazılım | Programlama | İnceleme

Just another WordPress site