DREAMWEAVER GİRİŞ.

... konulu sunumlar: "DREAMWEAVER GİRİŞ."— Sunum transkripti:

1 DREAMWEAVER GİRİŞ

2 TASARIMA NASIL BAŞLANMALI ?
 Web sitesinin tasarımına başlamadan önce site içerisinde kullanacağınız dokümanları oluştur­manız gerekiyor. Web sayfaları içerisinde kullanacağınız ses, resim, film ve metin dosyalarını önceden hazırlamanız, hatta hangi dosyayı hangi sayfada kullanacağınızı kağıt üzerinde tasarlamanız, sitenin oluşturulması esnasında size ışık tutacaktır. Dreamweaver’ı nereden temin edebilirim Dreamweaver ticari bir yazılım oluo belli bir ücret karşılığında lisans esaslı satışı yapılmaktadır. Dreamweaver’ı nereden satın alabileceğiniz konusunda daha kapsamlı bilgiyi adresinden alabilirsiniz. İnternet üzerinde bir çok alışveriş sitesinin sanal vitrinlerinde Dreamweaver’ı bulmanız da mümkün. Dreamweaver ve birçok Adobe ürününün deneme sürümlerini adresinden temin edebilmeniz de mümkün.

3 Genel Dreamweaver Ara Yüzü

4 Dreamweaver Neler Yapabilir ?
Dreamweaver; başta HTML düzenleme olmak üzere bir web tasarımcının ihtiyacı olan hemen her konuda ihtiyaçlarına cevap verebilecek donatılara sahiptir. Örneğin basit HTML olayları olarak nitelendirebileceğimiz, tablo, resim, metin flash (swf) ve aklınıza gelebilecek her türlü HTML bileşenini sayfalarımıza görsel bir ara yüz ile ekleyebilme imkanından başka, bu standart HTML bileşenlerine w3c inisiyatifleri içerisindeki geçerli yöntemlerle hükmedebilme, biçimlendirebilme ve sıfırdan yapılandırabilme imkanı sağlamaktadır. Sözgelimi CSS (Cascading Style Sheet) ler ile sayfalarınızdaki elemanları konumlandırabilir renklendirebilir ve biçim düzenlemesi yapabilirsiniz. Bu işin HTML tarafı. Dreamweaver ayrıca Behaviors veya Commands olarak adlandırılabilen ve extensions olarak tabir edilen eklentiler sayesinde sınırı olmaksızın genişleyebilen JavaScript başta olmak üzere güçlü araçlara sahiptir. Bu bahsi geçen araçlar ile sayfalarınızda kolayca açılır menülerden (pop-up menu) fare ile üzerine gidildiğinde değişen resimlere (rollower images) her türlü JavaScript aksiyonunu yapabilmemiz mümkündür.

5 DREAMWEAVER TEMELLERİ
Dreamweaver (DW) ara yüzü belli başlı parçalardan oluşmakta. Bunlar; Insert panel (Ekle paneli) Document toolbar (Doküman araç paneli) Document window (Doküman penceresi) Panel groups (Panel grupları) Properties Inspector (özellik yönetgeci) Tag selector (etiket seçici)

6 Insert panel DW’ın beklide en çok kullanılan ve önem verilmesi gereken ara yüz bileşenidir. Sayfamıza ekleyeceğimiz her türden içeriği bu panel yardımı ile sayfamıza eklememiz mümkündür. Oldukça iyi kategorize edilmiş bir yapısı olmakla beraber, isterseniz sizde kendi araç panelinizi oluşturarak kişiselleştirebilirsiniz. Document toolbar Panel üzerinde çalıştığımız doküman ile ilgili daha doğrusu doküman penceresi ile ilintili değişiklikleri hızlı bir biçimde yapmanıza olanak sağlıyor. Show Code View: Kod görünümüne geçmeyi sağlar. Show Code and Design: Hem tasarım hem de kod görünümünü aynı anda görebilme imkanı tanır. Show Design: Tasarım görünüme geçmeyi sağlar. Server Debug: Dinamik sayfalar ile çalışırken tarayıcı ile localhost üzerinden sayfayı kontrol etmektense Server debug düğmesine tıklayarak gerçek zamanlı veritabanından gelen kayıtların ve kodların çıktılarının nasıl bir sonuç verdiğini görmenize olanak tanır. Oldukça kullanışlı bir özellik. Document window Burası adından da anlaşılacağı üzere doküman penceresi yani çalışma alanızı ifade etmekte. Document toolbar’dan Code, Split ve Design düğmeleri ile çalışma alanımızı kod görünüm yada tasarım görünümü arasında değiştirmek de mümkün. Ben genelde Split i kullanırım. Tasarımla uğraşırken zaman zaman koda müdahale etmek de gerekebiliyor.

7 DREAMWEAVER PANEL GRUPLARI
Bu paneller Dreamweaver’ın (DW) temel ara yüz bileşenlerini oluşturmakla beraber hepsinin kullanımı birbirine oldukça benzemektedir. Bu nedenle bunların çalışma ve işleyiş prensiplerini kavradığınız takdirde DW’ı kullanmak çocuk oyuncağından farksız olmakta. Artık bir standart halini alan bu paneller sürümden sürüme farklılık gösterse dahi temelde aynı mantığı korumaya devam etmektedir. Örneğin aynı panel bir önceki sürümde farklı bir panel grubuna dahil iken bir sonraki sürümde sadece yeri değişmiş fakat işlevinde herhangi bir değişme olmamıştır. Panellerin sağ üst köşelerindeki simgelere tıkladığımızda açılan Panel menülerinden ilgili panele ait tüm işlemleri yapabilmemiz mümkün. Örneğin CSS Styles paneli menüsünden Yeni bir stil yaratabilir ya da var olanları yönetebiliriz. Yine aynı Panel menüleri sayesinde “Group CSS styles with…” seçeneği ile bu panelin başka bir panel gurubu altında yer almasını sağlayabiliriz. Aynı şekilde panelleri sol üst köşelerinden tutup istediğiniz bir yere sürükleyerek çalışma ortamınızı kendinize göre düzenlemeniz de mümkün.

8 CSS Styles Paneli

9 Files Bu panel standart olarak 3 sekmeden daha doğrusu 3 ayrı panelden meydana gelmektedir. Eğer siz sonradan bir panel grup değişikliği yapmadıysanız bunlar: Assets Snippets Her biri değişik işlevlere sahip bu panelleri incelemek istersek:

10 Assets Assets kelime anlamı itibariyle mal varlığı manasına geliyor. Aslında DW yapımcıları bu panelin ne işe yaradığını çok güzel anlatan bir isim seçmiş. Tanımlı bir sitede çalışırken o site içerisinde kullandığınız her türlü resim, CSS tanımlarken kullandığınız renkler, linkler, flash dosyaları ve şablon kütüphanesi objeleri (Library) dosyaları gibi site içeriğinin oluşturulmasında görev alan tüm elemanları bu panel üzerinden tek bir liste halinde görmek mümkün.

11 Snippets Bu panel daha çok hazır kod parçalarını barındıran bir kod kütüphanesi gibi düşünülebilir. DW ile standart olarak birçok hazır script ve örnek kod bulunmakta: Öte yandan kendi yazdığınız kodlarla veya fonksiyonlar sayesinde de kendi kütüphanelerinizi oluşturmak mümkün. Böylece özellikle kod yazan arkadaşlar her an elinin altında kod kütüphanelerini kullanabilmekte.

12 DREAMWEAVER VE METİNLER
HTML içerisinde <FONT> tagı ile metinlerimizi biçimlendirmemiz mümkün. DW'da ise işin kod kısmına geçmemize hiç gerek yok. DW'ın bizlere sunduğu kullanışlı biçimlendirme araçları ile en kolay yoldan sonuca ulaşmak mümkün. W3C font tagını kullanımdan kaldırmış ve bu tagı kullanan web sayfalarını demode ve geçersiz kod yapısına sahip sayfalar olarak nitelendirmiştir. Biçimlendirme seçeneklerinizde font yerine CSS kullanmak size daha sağlıklı sonuçlar vereceği aklınızdan bulunması gereken önemli bir noktadır. 

13 Text & HTML İlk önce HTML içerisindeki metin ve biçim kavramlarına biraz deyinelim. HTML de kullanılan başlıca metin biçimleri şunlardır.

14 Paragraph: Paragraflarımız oluşturan <P>
Paragraph: Paragraflarımız oluşturan <P> ....</P> tagları arasında yer alan biçimdir. Heading: Başlık anlamına gelir 6 farklı heading türü vardır. (Heading 1, Heading Heading 6) Türüne göre <H1>...</H1> yada <Hx>....</Hx> biçiminde kullanılır. Heading 1 en büyük, Heading 6 en küçük başlıktır. Preformated: <PRE>....</PRE> tagına karşılık gelen biçimlendirme türüdür. Bu biçimde metin çıktısı olduğu gibi verilir. Yani fazladan boşluklar doğrudan ekrana yansıtılır, Enter'a basılan yerler (n) alt satıra kaydırılır, tablar, sekme biçiminde görüntülenir vs. Bunlar en temel HTML metin etiketleri idi. Birde HTML stil olarak isimlendirilen ve HTML içinde standart olarak tanımlı gelen ve her Tarayıcı tarafından tanınan standart stiller mevcuttur. DW içinde bu stillere Text / Style menüsü ile ulaşabilirsiniz.

15 Metin Biçimlendirmek Format: HTML biçimleri olarak anlattığımız Heading, Paragraph.... Kısmı. .(Text / Paragraph Format) Link: Bu ise seçili durumdaki metin veya metin grubuna bir link atamaya yarar. Buraya direk adres veya dosya ismi yazarak yada yanındaki klasör simgesine tıklayarak (Browse/Gözat) link ile bağlanacak dosyayı seçebilirsiniz. Bu kısmı doldurduktan sonra yanındaki Target alanı da aktif hale gelecektir. Target ise Frameler ile çalışan tasarımcılar için bağlanan linkin hangi frame içinde açılacağını belirtmeye yarayan "hedef" kısmıdır. (Insert / Hyperlink) Font: Bu drop down menü ile HTML içinde en uyumlu yazı tiplerinin tanımlı olduğu bir menüye ulaşabilirsiniz. Buradan Sayfamıza eklediğimiz metinin yazı tipini belirliyoruz. (Text / Font) Size: Metnimizin yazı tipi büyüklüğünü belirtir. 1 ile 7 arasında bir rakam olabilir. .(Text / Size)

16 Color: Metnimizin rengini belirler
Color: Metnimizin rengini belirler. Tıklayarak rengi siz seçebileceğiniz gibi bir grafik programında kopyaladığınız renk kodunu direk yapıştırarak da rengi belirleyebilirsiniz. DW aynı zamanda ekrandaki bir bölgeden renk kodu çalabilmektedir.(Text / Color...) Unordered list: Madde imi işaretleri kullanarak liste yaratmaya yarar. Basılan her Enter da yeni bir liste öğesi oluşturulur. .(Text / List / Unordered) Ordered list: Numaralandırma yaparak liste yaratmaya yarar. Basılan her Enter da yeni bir liste öğesi oluşturulur. .(Text / List / Ordered) Text Outdent: Paragrafı bir sekme (Tab) dışarı kaydırır. .(Text / Outdent) Text Indent: Paragrafı bir sekme (Tab) içeri kaydırır. .(Text / Indent) Bold: Kalın yazmak için kullanılır. .(Text / Style / Bold) Italic: Eğik yazmak için kullanılır. .(Text / Style / Italic) Align Left: Sola hizala. .(Text / Align / Left) Align Center: Ortaya hizala. .(Text / Align / Center) Align Right: Sağa hizala. .(Text / Align / Right) Justify: İki yana hizala.(Text / Align / Justify)

17 DREAMWEAVER VE TABLOLAR
Sayfanıza yeni bir tablo eklemek için: Insert / Table (CTRL+ALT+T) menüsünü kullanabilir ya da "Insert" (Eski adı ile Object Panel) panelindeki Common ve Layout başlıkları altında yer alan "Table" düğmesine tıklayabilirsiniz. 

18 Tablo Ekleme İletişim Penceresi

19 Rows: (Satırlar) Tablomuzun satır sayısı.
Columns: (Kolonlar) Tablomuzun kolon sayısı. Table Width: (Genişlik) Tablomuzun genişliği. Border: (Çerçeve) Tablomuzu ve hücrelerimizi çevreleyen çerçevenin piksel cinsinden kalınlığını belirtir. 0 (Sıfır) Olarak kullanılması halinde çerçeve kalkar. Cell Padding: Bu hücre içindeki materyalin duvarlarına olan uzaklığı olarak yorumlanabilir. Piksel olarak işlenir. 0 girildiği takdirde resim, yazı gibi içerik hücre duvarlarına bitişik bir durumda görünür. Cell Spacing: Piksel cinsinden hücreler arası boşluğu ifade eder. Header: Tablomuzun ilk satırını yada ilk sütununu yada hem satır ve sütununu başlık olarak ayarlayarak, içeriğimizin daha kolay anlaşılır bir hal almasını sağlayabiliriz. Caption: Tablomuzun başlığı diyebiliriz. Örneğin üyelerin isimlerinin listelendiği bir tabloya başlık olarak üyeler yazabiliriz. Align Caption: başlığın ne tarafa hizalanacağını belirtir.

20 Tabloları Sıralama Bir tabloyu seçtikten sonra Commands / Sort Table menüsü ile tablo içeriği sıralama için kullanılacak araca ulaşabilirsiniz. Bu açılan diyalog penceresinden ise sıralamanın kriterlerini giriyoruz. Alfabetik ya da nümerik olarak sıralama yapabileceğimiz gibi ikincil sıralama kriterleri de belirleyebilirsiniz.

21 DREAMWEAVER VE RESİMLER
Image Placeholder nedir? Resim yüklenmeden önce sayfada görüntülenen ve resmin boyutlarını ve yerini belirten bir yer belirteci diyebiliriz. Ziyaretçiye resim hakkında bir ön fikir vermek için kullanılabilecek bu özellik ile resimlerin yeri daha sayfa yüklenmeden belli olacaktır. Böylece ziyaretçi sayfanın tamamının yüklenmesini beklemek zorunda kalmayacaktır.

22 Insert paneldeki Image düğmesi ile sayfanıza resim ekleyebilirsiniz.

23 Resim ekleme iletişim penceresi ile resim dosyamızın nerede olduğunu seçiyoruz.

24 DREAMWEAVER İÇERSİNDE FORM KULLANIMI
Form kavramı : Formlar HTML'in ayrılmaz ve vazgeçilmez parçalarından biridir. Bu yazıda işin biraz teorik kısmına deyineceğiz. Formlar HTML kodlarında <form> </from> tagları ile belirtilir. Bu iki tag arasına yazılan tüm form elemanları bu formun bir üyesidir ve bu form elementleri genelde kullanıcı odaklı veri girişleri için kullanılır. Zaten formun genel amacı da içindeki elemanlara girilen verileri ilgili noktaya (ACTION) iletmektir. Konuyu şematik olarak anlatmak gerekirse; Formların çalışma prensibi genel anlamda bu şekilde. Kullanıcı kendine sunulan formu doldurur ve formu web sunucuya gönderir. (Submit işlemi) Bu aşamadan sonra sunucuda bu formdan gelen veriyi karşılayan ve yakalayan bir program vardır. Bu program formun ACTION kısmında belirtilen ve kodlama dili sunucu taraflı bir dil olan (PHP, ASP, JSP ya da ColdFusion gibi) bir script'tir. Sunucu tarafından bu program ile işlenen ve gerekli yerlere ulaştırılan (veritabanı gibi) bilgiler işlendikten sonra kullanıcıya işlemin sonucu ile alakalı bir HTML çıktısı gösterilir.

25 Formlar ve ziyaretçi ile sunucu arasındaki iletişimin işleyiş mantığı.

26 DREAMWEAVER VE FRAMELER
Frame Kavramı : Türkçeye çevirdiğimizde "çerçeve" olarak karşımız çıkıyor fakat HTML içerisinde Frame dediğimizde bir ana sayfanın (_parent) birden fazla parçaya ayrılarak farklı HTML dosyalarını bünyesinde barındırması olayı diyebiliriz. Örnek ile anlatmaya çalışırsak web'de sıklıkla gördüğümüz yan veya üst kısımdaki navigasyon menüsünün sabit kalması ve sadece içeriğin olduğu kısmın yüklendiği sayfalarda kullanılan teknik; Framedir. Frame ile hazırlanmış sitelere örnek olarak Ekşi Sözlük'ü gösterebiliriz. (eksizoluk.com) DW içerisinde Frameler oldukça geniş bir desteğe sahiptir. Özellikle WYSIWYG'in en güzel uygulandığı konulardan biri olan Frameleri DW içinde yönetmek diğer editörlere göre çok daha kolaydır.

27 <HTML> <HEAD> <TITLE>Örnek Frame Sayfasy</TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset="iso ""> </HEAD>  <FRAMESET ROWS="*" COLS="172,*" FRAMESPACING="0" FRAMEBORDER="NO"  BORDER="0"> <FRAME src="frame_sol.htm" NAME="leftFrame" FRAMEBORDER="YES" SCROLLI NG="NO" NORESIZE BORDERCOLOR="#FFFFFF"> <FRAME src="frame_main.htm" NAME="mainFrame"> </FRAMESET>  <NOFRAMES> <BODY> </BODY> </NOFRAMES> </HTML>

28 Target Kavramı Target HTML içerisinde Frameler ile kullandığımız bir kavramdır. Tabi önce Frameset'e bir açıklık getirmek gerekir. Her Frameset içerisinde bu framesetin sahip olduğu framelerin bilgileri tutulur. (topFrame'in border'ı olsun, leftFramein kaynak adresi main.htm'dir vs vs...) Standart tanımlı Targetları şunlardır; _blank: Yeni ve boş bir pencere anlamına gelir. (linki yeni bir tarayıcı penceresinde açar) _parent: Frameset bilgisinin olduğu Parent Frame'i belirtir. _self: Linkin içerisinde bulunduğu frame'i gösterir. Link yine bu frame içerisinde açılacaktır. _top: Sayfayı o an açık olan tarayıcı penceresi içerisinde açar. mainFrame, leftFrame... : Bunlar ise sizin sayfaya eklediğiniz ve özel olarak isimlendirdiğiniz yada DW'ın otomatik olarak isimlendiği frameleri belirtir. Konuyu toparlarsak örneğimizde yer alan sol menüdeki bir linke tıklandığında sadece sağ tarafın değişmesi için bu linkin Target'ı olarak mainFrame seçmeliyiz.

29 BENİ DİNLEDİĞİNİZ İÇİN TEŞEKKÜR EDERİM.
ÖZLEM ÖZER BENİ DİNLEDİĞİNİZ İÇİN TEŞEKKÜR EDERİM.