WEB EDİTÖRÜ TEMEL ARAÇLARI İÇİNDEKİLER Web Editörü Açılış Ekranı Çalışma Alanı Araç Çubukları Paneller Menüler Dosya İşlemleri Dosya Oluşturma WEB EDİTÖRÜ Yrd. Doç. Dr. Serkan YILDIRIM HEDEFLER Bu üniteyi çalıştıktan sonra; Web editörlerinin kullanım amaçları hakkında bilgi edinebilecek programının açılış ekranını kullanabilecek, programının çalışma alanını kullanabilecek, programınde dosya oluşturabileceksiniz. ÜNİTE 1
GİRİŞ İnternet; bilgisayar, tablet, telefon vb. çok farklı platformlar üzerinden kullanıcılarına hizmet veren yapısıyla günlük yaşantımızın vazgeçilmezleri arasındaki yerini çoktan almıştır. İnternet kullanıcıları hava durumundan gezilip görülecek yerlere, aile ve sevdikleri ile iletişimden alışverişe kadar geniş bir yelpazede ihtiyaç duydukları her türlü bilgi ve kaynak için internetten faydalanmaktadırlar. Genel olarak insanların, ihtiyaç duydukları bu tür bilgilere ulaşmaları için çeşitli web hizmetlerinden faydalanmaları gerekmektedir. İnternet ortamında sunulan hizmetlerinin tamamına yakını web sayfaları üzerinden sağlanmaktadır. Bu nedenle web sayfaları internet kullanıcılarının sıklıkla ziyaret ettiği ortamlar olarak öne çıkmaktadır. Kısacası web sayfaları internetin vitrini olarak tanımlanabilir. Web sayfalarına erişimde web adresleri kullanılmaktadır. Örneğin; Atatürk Üniversitesinin öğrencileri üniversitenin yapmış olduğu duyuruları, sınav sonuçlarını, üniversitede gerçekleştirilen sosyal etkinlikleri vb. birçok bilgiyi üniversitenin web sayfasından öğrenebilirler. Bunun için internetteki web sayfalarına erişim imkânı sağlayan herhangi bir internet tarayıcısının arama çubuğuna www.atauni.edu.tr adresini yazmaları ve ilgili bağlantıları kullanmaları yeterli olmaktadır. Böylece istedikleri bilgiye ulaşmak mümkün olmaktadır. İnternet kullanıcıları genel olarak hazırlanmış web sayfalarından hizmet almaktadırlar. Bunun için kullanıcıların ihtiyaç duydukları konulara, ilgilerini çekecek aktivitelere, öğrenme sağlayacak uygulamalara kadar farklı amaçlı birçok web sayfasının hazırlanması gerekmektedir. Bu dersin kapsamında internet ortamında hizmet veren web sayfalarının nasıl tasarlanacağına değinilecektir. İnternet ortamında kullanılan web sayfalarını tasarlamak için Web Editörü olarak isimlendirilen programlar kullanılmaktadır. Çok farklı amaçlara hizmet eden faklı özelliklere ve yeteneklere sahip web editörleri bulunmaktadır. Bu dersin kapsamında internet ortamında hizmet verecek web sayfalarını tasarlamak için tasarımcılar tarafından en çok tercih edilen web editörlerinden biri olan Adobe anlatılacaktır. Atatürk Üniversitesi Açıköğretim Fakültesi 2
WEB EDİTÖRÜ Web editörleri internet ortamında hizmet veren sayfaların tasarlanmasında kullanılan yazılımlardır. Web editörleri internet ortamında hizmet veren web sayfalarının tasarlanması, geliştirilmesi ve organize edilmesinde kullanılan yazılımlardır. Web sayfalarının hazırlanmasında gereken birçok araç web editörlerinde bulunmaktadır. Ayrıca çeşitli tasarım şablonları, hazır yapılar veya görsel bileşenler web editörlerinin sunduğu özellikler arasında yer almaktadır. Web sayfaları, tasarımcının yazdığı çeşitli ifadelerden oluşmaktadır. Yazılan bu ifadeler, web tarayıcıları veya sunucular tarafından derlenmekte ve kullanıcılar istedikleri sayfaları tarayıcılar üzerinden görüntülemektedir. İçerisinde çeşitli şairlerin şiirlerinin yer aldığı basit bir sayfadan binlerce kullanıcının ziyaret ettiği devasa boyutlu portallara kadar birçok site web editörlerinin ürünleri arasında yer almaktadır. Genel olarak web editörleri, internet ortamında web sayfası oluşturmada kullanılan HTML, CSS, PHP, Javascript vb. birçok dilin aynı anda kullanımına imkân veren bir yapıya sahiptir. Örneğin; tasarımcı web editörlerini kullanarak web sayfasındaki metinlerin görsel organizasyonunu sağlayabileceği (renk, boyut, yazı tipi vb.) gibi kullanıcıların bilgilerini veri tabanı vasıtasıyla saklayan bir formu da oluşturabilir. Web editörü programlarının temel amacı aynı olmakla birlikte özellikleri yapıları birbirlerinden farklılıklar göstermektedir. Bu programlar arasında özellikleri, kullanım yapısı, sunduğu kolaylıklar ve destek hizmetleri açısından en üst sıralarda yer alan yazılımlardan biri Adobe firması tarafından geliştirilen Dreamweaver programıdır. Çok köklü bir geçmişe ve büyük bir kullanıcı kitlesine sahip olan Dreamweaver web editörü programının en güncel sürümü Adobe Dreamweaver 2013 tür. Dreamweaver, diğer web editörü rakiplerine nazaran güncelliğini koruyan ve geliştirilen yeni teknolojilere hızlı bir şekilde ayak uyduran yapısı ile tasarımcıların dikkatini çekmektedir. Kolay erişilebilir olması ve kullanıcı dostu arayüzü ile basit web sayfalarından profesyonel düzeydeki çok gelişmiş web sayfalarının oluşturulmasına kadar geniş bir yelpazede rahatlıkla kullanılabilen özellikleri ile geniş kitlelere hitap etmektedir. Bu dersin kapsamında Dreamweaver programının en son sürümü olan programı anlatılacaktır. Atatürk Üniversitesi Açıköğretim Fakültesi 3
KARŞILAMA EKRANI programının açılış ekranı, yeni bir belge oluşturmaya veya çeşitli konular hakkında hazırlanmış yardım dosyalarına erişime imkân tanır. programı çalıştırıldığı zaman program penceresi aktif olmadan önce karşılama ekranı görüntülenmektedir. Karşılama ekranı; son ögelerden birini aç, yeni oluştur, en popüler ve yardım konuları olmak üzere dört temel bölümden meydana gelmektedir (Şekil 1). Bu pencereden Dreamweaver ile tasarlanabilecek belgeleri hızlı bir şekilde oluşturmak, daha önceden hazırlanmış projeleri açmak, çeşitli yardım konularına ve bilgilendirmelere erişmek mümkündür. Karşılama ekranında görüntülenemeyen popüler bilgilendirmeler veya oluşturulabilecek diğer belgelere ulaşabilmek için listelerin altında yer alan Daha Fazla... seçeneği kullanılabilir. Karşılama ekranı programı her açıldığında görüntülenmektedir. Bu ekranı görüntülememek ve doğrudan programı çalıştırmak için karşılama ekranının sağ alt köşesinde yer alan Bir daha gösterme seçim kutusunu işaretlemek gerekmektedir. Şekil 1. Karşılama Ekranı Atatürk Üniversitesi Açıköğretim Fakültesi 4
ÇALIŞMA ALANI 1 3 2 5 14 4 9 10 6 11 13 12 Şekil 2. Programının Çalışma Alanı programının genel görünümü Şekil 2 de yer almaktadır. programının menü bileşenlerinin, tasarım yapılan alanların, çeşitli tasarım panellerinin ve tasarım araçlarının yer aldığı pencere gruplarının tamamı Çalışma Alanı olarak isimlendirilir. Çalışma alanında; 1 Menü Çubuğu 8 Tasarım Ekranı 2 Uygulama Çubuğu 9 Ekle Paneli programının tüm özelliklerini görüntüleyen pencere çalışma alanı olarak isimlendirilir. 3 4 5 6 Çalışma Alanı Menüsü Doküman Sekmesi Doküman Araç Çubuğu Kodlama Araç Çubuğu 10 11 12 13 CSS Stilleri Paneli Dosya Paneli Özellik Denetçisi Durum Çubuğu 7 Kod Ekranı 14 Standart Araç Çubuğu Yer almaktadır. Çalışma alanının yerleşimi, kullanıcıların alışkanlıkları göz önünde bulundurularak tasarlanmıştır. Bazı küçük değişiklikler olsa bile genel olarak önceki Atatürk Üniversitesi Açıköğretim Fakültesi 5
versiyonların yapısına paralellik göstermektedir. programının etkin kullanımı için çalışma alanının iyi bilinmesi oldukça önemlidir. Bu bölümde programının kullanımı için önemli görülen çalışma alanı bileşenlerine değinilecektir. 1 Menü Çubuğu programının en sık kullanılan araçlarından biri menü çubuğudur. Menü çubuğu, programın özelliklerini kullanmayı sağlayacak tüm araçları üzerinde barındıracak şekilde tasarlanmıştır (Şekil 3). Herhangi bir menü içerisinde yer alan bir bileşen farenin sol tuşu yardımı ile kullanılabilmektedir. Yine fare işaretçisi kullanılarak menüler arasında geçiş yapılabilmektedir. Şekil 3. Menü Çubuğu Menü çubuğunda; dosya, düzen, görünüm, ekle, değiştir, format, komutlar, site, pencere ve yardım menüleri yer almaktadır. Menü çubuğunu oluşturan menülerin genel özellikleri şöyledir; Dosya Menüsü: Bu menü programının en çok kullanılan bölümlerinden biridir. Yeni belge oluşturma, mevcut belgeleri açma, kaydetme, içe ve dışa aktarım işlemlerini gerçekleştirme gibi dosyalara yönelik birçok işlem bu menü üzerinden gerçekleştirilmektedir. Düzen Menüsü: Kes, kopyala, yapıştır, geri al gibi araçlar bu menüde yer almaktadır. Ayrıca belge içerisinde düzenleme yapmaya yönelik birçok araç bu menüde bulunmaktadır. Görünüm Menüsü: programının pencere yapısını organize etmek için kullanılan araçları barındırır. Bu menü vasıtasıyla araç çubukları aktif/pasif hâle getirilebilir, pencereler boyutlandırılabilir, çalışma alanını görünümü değiştirilebilir vb. birçok işlem gerçekleştirilebilir. programının çalışma alanındaki bileşenlerin yerleşimi görünüm menüsü kullanılarak organize edilebilir. Ekle Menüsü: Geçerli belgeye resim, tablo, link, form araçları, şablon, widget, spry, JQuery gibi görsel ve yazılımsal bileşenlerin eklenmesini sağlayan araçları barındırmaktadır. Değiştir Menüsü: Geçerli belgede çeşitli değişiklikler yapmak için gerekli araçları barındırır. Değiştir menüsü ile CSS yapıları, fontlar, sayfa özellikleri, tablolar, şablonlar, kitaplıklar vb. farklı yapılar organize edilebilmektedir. Format Menüsü: Format menüsü; belgede yer alan metinlerin hizalanması, listelerin standardize edilmesi, paragraf ayarlanın yapılması, CSS stillerini Atatürk Üniversitesi Açıköğretim Fakültesi 6
belirlenmesi gibi belgenin görsel yapısının organize edilmesini sağlayan araçları barındırmaktadır. Komutlar Menüsü: Bu menü geçerli belgenin kodlarına eklemeler yapılmasına, birden fazla dil vasıtasıyla yazılan kodların ayıklanmasına ve yazım hatalarının giderilmesine yönelik araçları barındırmaktadır. Site Menüsü: Site menüsü; ile yeni site oluşturulmasına ve mevcut sitelerinin yönetiminin yapılmasına olanak sağlayan araçları içermektedir. Pencere Menüsü: Pencerelerin görüntülenmesini veya pasif hâle getirilmesini sağlayan araçları barındırmaktadır. Bu menüde listelenmiş pencereler, aktif hâle getirildiği zaman panel grubu içerisinde görüntülenmektedir. Yardım Menüsü: Yardım menüsü; programının kullanımına yönelik yardım uygulamalarını barındırır. Bunun yanısıra programının desteklediği programlama bileşenlerine yönelik yardım uygulamalarına bu menü vasıtasıyla ulaşılabilmektedir. Ayrıca programı için çıkarılan güncelleştirmeler bu menü vasıtasıyla takip edilebilmektedir. 2 Uygulama Çubuğu Uygulama çubuğu programında sıklıkla kullanılan araçların yer aldığı çubuklar arasında yer almaktadır. Uygulama çubuğu, 3 bileşenden meydana gelmektedir (Şekil 4). Yönetimsel bileşenleri barındıran bu çubuk menü çubuğunun yanında konumlandırılmıştır. 1 3 2 programındaki çalışma alanı menüsü, program menüleri, paneller ve diğer ögelerin yerleşimi için gerekli seçenekleri barındırır. Uygulama çubuğunda yer alan bileşenler ve bu bileşenlerin özellikleri şöyledir; 1 Şekil 4. Uygulama Çubuğu Mizanpaj: Mizanpaj aracı; çalışma alanının yerleşimine ve aktif çalışma alanının belirlenmesine olanak sağlamaktadır. Özellikle çalışma alanının organizasyonunda kod veya tasarım görünümünün çeşitli alternatiflerini kullanmak için mizanpaj aracı kullanılmaktadır. 2 3 Dreamweaver ı Genişlet: Extension Manager, Widged Browser ve Diğer Dreamweaver Eklentilerine Gözat seçenekleri bu araç vasıtasıyla görüntülenmektedir. Bu araç ile daha gelişmiş sayfalar oluşturmada kullanılan bazı program ve nesnelere erişim sağlanabilmektedir. Site: Bu bileşen yeni site oluşturma ve mevcut siteleri yönetmek için gerekli araçların görüntülenmesini sağlar. Atatürk Üniversitesi Açıköğretim Fakültesi 7
3- Çalışma Alanı Menüsü: Bu menü çalışma alanının görsel organizasyonunun yapılmasını sağlar. Her bir menü bileşeni, programındaki menü bileşenleri, çalışma alanı, paneller vb. bölümlerin farklı şekilde yerleştirilmesini sağlamaktadır (Şekil 5). Bu menü bileşenleri sayesinde kullanıcılar istedikleri şekilde çalışma alanını, menüleri ve panellerin yerleşimini değiştirebilmektedirler. programının çalışma alanı görünüm ayarı varsayılan olarak Tasarımcı seçilidir. Bu tercih çalışma alanı menüsündeki diğer seçenekler kullanılarak değiştirilebilir. Ayrıca çalışma alanını yönetmek veya yeni çalışma alanı oluşturmak için gerekli alternatifler bu menüdeki seçenekler arasında yer almaktadır. 4 Doküman Sekmesi Şekil 5. Çalışma Alanı Menüsü programındaki doküman sekmesi geçerli belgenin görüntüleme alternatiflerini belirlemede kullanılır. programı üzerinde oluşturulan belgenin görüntülendiği bölümdür. Bu sekmede hazırlanan web sayfalarının kodlarını veya tasarımını görmek mümkündür. programında geçerli belge görüntülenirken sekme yapısı oluşur. Sekme yapısı birden fazla belgenin aynı anda görüntülenmesini sağlar. Böylece aktif sekmedeki belge görüntülenir, belgeler arası geçişler sağlanabilir ve istenirse kapatma düğmesi kullanılarak belge kapatılır. Doküman sekmesi, geçerli belgenin gösterimi için farklı görüntüleme seçeneklerine sahiptir. Bu seçenekler tasarımcıların ihtiyaçlarını karşılamak için geliştirilmiştir. Doküman sekmesinin sunduğu görünüm seçenekleri şu şekilde sıralanabilir; Tasarım görünümü: Hazırlanan sayfanın görsel tasarımını yapacak şekilde belge görüntülenmektedir. programının belge tasarımı için sunmuş olduğu araçlar bu görünüm yapısı kullanılarak belgeye eklenebilir. Kod görünümü: HTML, Javascript veya diğer dillerde kodlama yapmaya yönelik araçların görüntülendiği görünüm yapısıdır. Kod görünümünde tasarımcılar el ile kodlama yapabilmektedirler. Atatürk Üniversitesi Açıköğretim Fakültesi 8
Kod ve tasarım görünümü: Bu görünüm yapısında hem kod hem de tasarım görünümünün aynı anda aktif hâle getirilmesi sağlanmaktadır. Canlı görünüm: Tasarım görünümüne benzer bir yapısı vardır. Bu görünüm şeklinde hazırlanan belgenin tarayıcılarda nasıl görüntüleneceğini görmek mümkündür. Canlı görünüm yapısında, tasarımın görünümünden farklı olarak belgede yer alan linkler ve diğer etkileşimli yapılar çalıştırılabilmektedir. Canlı görünüm penceresinde belgeyi düzenlemek mümkün değildir. Canlı kod görünümü: Canlı görünüm seçiliyken aktif hâle getirilebilen bu görünüm şekli, tarayıcının sayfayı çalıştırırken kullandığı gerçek kodu görüntülemede kullanılır. Canlı kod görünümünde sayfa ile kurulan etkileşimlere göre dinamik değişimler gerçekleşir. Değişimlerin yansımalarını canlı kod görünümü vasıtasıyla görmek mümkün olmaktadır. Ayrıca canlı kod görünümü aktif iken yapılan değişiklik ve düzenlemelerin belgeyi etkilemediği unutulmamalıdır. 5 Doküman Araç Çubuğu Doküman araç çubuğu, doküman sekmesinin görünümünü organize edecek seçenekleri ve üzerinde hazırlanan belgelerin web tarayıcılarında görüntülenmesini sağlayacak seçenekleri barındırmaktadır. Doküman araç çubuğu, temelde geçerli belgenin farklı görünümleri arasında hızlı 2 4 6 8 10 12 1 3 5 7 9 11 Şekil 6. Dokuman Araç Çubuğu geçişler yapılmasına olanak sağlamaktadır (Şekil 6). Dokuman araç çubuğunun bileşenleri ve bu bileşenlerin özellikleri şu şekildedir. programındaki doküman araç çubuğu doküman sekmesinin etkin kullanımına yönelik araçları barındırır. 1 2 3 4 Kod görünümünü göster: Doküman sekmesinde geçerli belgenin kodlarının görüntülenmesini sağlar. Kod ve tasarım görünümünü göster: Doküman sekmesinde geçerli belgenin hem kodlarının hem de görsel tasarımının görüntülenmesini sağlar. Tasarım görünümünü göster: Geçerli belgenin, tasarım görünümü seçeneği vasıtasıyla görüntülenmesini sağlar. Canlı görünüm: Doküman sekmesindeki geçerli belgenin, bu pencere içerisinde web tarayıcısında olduğu gibi görüntülenmesini ve belgedeki etkileşimlerin kullanılmasını sağlar. Atatürk Üniversitesi Açıköğretim Fakültesi 9
5 6 7 8 9 10 11 12 Çoklu Ekran: Ekranların ve panellerin farklı boyutlarda görüntülenmesini sağlar. Standart cihazları destekleyen ölçülerde çalışma alanının görüntülenmesinde oldukça etkilidir. Örneğin; bu ekran kullanılarak akıllı telefon, tablet vb. cihazların standart ölçülerine göre görüntüleme yapılabilir. Tarayıcıda önizleme/hata ayıklama: Geçerli belgenin, bilgisayarda kurulu tarayıcılar vasıtasıyla görüntülenmesini sağlar. Dosya yönetimi: Dosya yönetimine yönelik seçeneklerin yer aldığı açılır menüyü görüntülemede kullanılır. W3C doğrulama: Geçerli belgeyi veya seçili olan bir etiketin kodlama yapısı açısından doğrulanması için gerekli seçeneklerin görüntülenmesini sağlar. Tarayıcı uyumluluğunu denetle: Hazırlanan CSS kodlarının farklı tarayıcılara uyumluluk düzeyinin denetlenmesinde ve gerekli yardımların alınmasında kullanılan seçeneklere erişimi sağlar. Görsel yardımcılar: Sayfa tasarımında kullanılan görsel yardımcıların aktif veya pasif hale getirilmesi için gerekli seçenekleri görüntüler. Tasarım görünümünü yenile: Belge penceresindeki geçerli belgede kod tabanlı yapılan değişikliklerin etkilerini görmek için tasarım görünümünü yenilemede kullanılır. Belge başlığı: Geçerli belgenin tarayıcının başlık çubuğunda görüntülenecek belge başlığının görüntülenmesini sağlar. 6 Kodlama Araç Çubuğu Kodlama araç çubuğu, web sayfalarının kodlanması esnasında kullanılan bazı araçları barındırmaktadır. Bu araç çubuğunda yer alan bileşenler ile kod blokları daha rahat bir şekilde idare edilebilmekte ve hiyerarşik kod yerleşimleri yapılabilmektedir. Kod bölümünün sol tarafında yer alan bu araç çubuğu Şekil 7 de yer almaktadır. Kodlama araç çubuğu sabit bir yapıya sahiptir. Taşınması mümkün olmayan bu araç çubuğu istenirse gizlenebilmektedir. 7 Kod Ekranı Şekil 7. Kodlama Araç Çubuğu Kod ekranı geçerli belgenin kod yapısının görüntülenmesini sağlar. Bu ekrandan kodlama araç çubuğunu kullanarak mevcut kodlar organize edilebilir. Ayrıca ekle gibi çeşitli panellerde yer alan araçları kullanarak belgenin kodlanması bu pencere üzerinden gerçekleştirilmektedir. 8 Tasarım Ekranı programının sunmuş olduğu görsel tasarım araçları ile belgenin oluşturulduğu ekrandır. Bu ekranda görsel tasarım yapılabilir. Tasarım ekranında geçerli belgenin tasarımında kullanılan bileşenler ve bilgiler yer Atatürk Üniversitesi Açıköğretim Fakültesi 10
almaktadır. Bununla birlikte bu ekran, belgenin tarayıcılarda nasıl görüntüleneceği hakkında net bir bilgi vermemektedir. Kısacası tasarım ekranında belgenin görsel tasarımında kullanılacak araçlarla çalışmak mümkün olurken, belgenin web tarayıcılarında görüntülenecek halini görmek veya belgedeki bağlantıları kullanmak mümkün olmamaktadır. 9 Ekle Paneli Web tasarımı gerçekleştirilirken birçok görsel bileşen, sayfayı oluşturan belgelerde yerini almaktadır (Şekil 8). Temel olarak bu bileşenleri web sayfasının tasarlandığı dil ile kodlamak mümkün olmaktadır. Bununla birlikte programı tasarımcıların işini kolaylaştırmak amacıyla bu tür görsel bileşenleri çeşitli araçlar altında toplamış ve kullanıma sunmuştur. Ekle paneli belge içerisine çeşitli nesnelerin eklenmesinde kullanılmaktadır. Web sayfalarının yapısal özelliklerini oluşturan bileşenlerden, form bileşenlerine kadar birçok farklı özellikteki bileşeni kullanmayı sağlayan araçlar bu panelde yer almaktadır. Ekle panelde yer alan araçları, çift tıklama veya sürükle bırak yöntemini kullanarak belgelere eklemek mümkündür. programındaki ekle panelinde, görsel tasarım ve kodlama için gerekli birçok araç bulunmaktadır. Paneller üzerindeki bazı kategorilerde yer alan menü bileşenlerinin birden fazla eylemi Şekil 8. Ekle Paneli gerçekleştirme özelliği vardır. Bu bileşenler, aracın isminin yanında bulunan aşağı yönlü ok işareti ile istenilen eylemi gerçekleştirecek şekilde organize edilebilir. Örneğin; Şekil 8 de görüntülenen Ortak kategorisindeki görüntüler, ortam gibi araçlar bu özelliği taşımaktadırlar. Ekle panelinde Ortak, Mizanpaj, Formlar, Data, Spry, JQuery Mobile, InContext Editing, Metin ve Sık Kullanılanlar kategorileri yer almaktadır. Her bir kategoride ilgili kategori başlığında işlemler yapmayı sağlayacak birçok bileşen bulunmaktadır. Örneğin; Ortak kategorisinde yer alan köprü bileşeni ile başka sayfalara veya web sitelerine erişimde kullanılan bağlantılar oluşturulabilmektedir. Ekle panelinde yer alan kategorilerin genel özellikleri şu şekildedir; Ortak Kategorisi: Bu kategoride belgeye eklenebilecek görsel bileşenleri ve tablo gibi sık kullanılan yapıları kullanmaya imkân tanıyan araçlar yer almaktadır. Mizanpaj Kategorisi: Geçerli belgeye tablo, tablo bileşenleri ve diğer bazı tasarımsal bileşenleri eklemeye imkân tanıyan araçları içermektedir. Atatürk Üniversitesi Açıköğretim Fakültesi 11
Formlar Kategorisi: Geçerli belgeye form bileşenlerini eklemede kullanılan araçlar bu kategoride yer almaktadır. Data Kategorisi: Veri tabanı vasıtasıyla yapılacak işlemler için gerekli araçların yer aldığı kategoridir. Spry Kategorisi: Spry temelli sayfalar oluşturmada kullanılan araçlar bu kategori altında toplanmıştır. JQuery Kategorisi: Mobil araçlara yönelik web sayfalarının oluşturulmasında ihtiyaç duyulan araçlar bu kategoride yer almaktadır. InContext Editing: Sayfa içerisinde düzenlenebilir ve yenilenebilir alanlar oluşturmada kullanılan araçlar bu kategoride bir araya getirilmiştir. Metin Kategorisi: Metinlere yönelik html etiketlerinin ve çeşitli metin biçimlendirme araçlarının yer aldığı kategoridir. Sık Kullanılanlar Kategorisi: Tasarımcının en çok tercih ettiği araçları bir araya toplamasına imkân tanıyan kategoridir. 10 CSS Stilleri Paneli programında geçerli belgenin CSS ayarları CSS Stilleri paneli üzerinden organize edilebilir. CSS sitilleri paneli geçerli belgenin CSS kodlamalarını görmek, sayfa tasarımı için gerekli görülen yeni CSS kurallarını oluşturmak veya mevcut CSS kurallarını değiştirmek için kullanılmaktadır. Bu panelde iki farklı mod bulunmaktadır. Bunlar; Tümü ve Geçerli olarak (Şekil 9) isimlendirilmektedir. Tümü bölümü, belgedeki bütün CSS kurallarının görüntülenmesini sağlarken geçerli bölümü geçerli belge üzerinde seçilen bölümün CSS kurallarını ve özelliklerinin görüntülenmesini sağlamaktadır. Şekil 9. CSS Stilleri Paneli Atatürk Üniversitesi Açıköğretim Fakültesi 12
11 Dosyalar Paneli Dosyalar paneli üzerinden hazırlanan belgenin veya üzerinde çalışma yapılan sitenin dosyalarının yer aldığı disk alanına erişimi sağlamaktadır. Ayrıca bu bileşen üzerinden disk üzerindeki diğer tüm dosyalara erişmek mümkün olmaktadır. Bu panel, dosya yönetim işlemlerine ve site dosyalarına hızlı bir şekilde erişim için oldukça etkilidir. Şekil 10. Dosyalar Paneli 12 Özellikler Denetçisi programındaki Özellikler Denetçisi alanı geçerli belgede aktif olan nesnenin özelliklerini görüntülemek ve gerekli ayarları yapmak için kullanılmaktadır. Özellik denetçisi dinamik bir bileşendir. Web sayfalarının tasarımında kullanılan her bir nesnenin (resim, ses, video, tablo, vb.) çeşitli özellikleri bulunmaktadır ve bu özellikler her bir nesne için farklılık göstermektedir. Özellik denetleyicisi, geçerli belge üzerinde seçilen nesnenin özelliklerini görüntülemekte kullanılır. Ayrıca bu bölüm vasıtasıyla seçilen nesnenin özelliklerini değiştirmek mümkündür. Şekil 11. Özellikler Denetçisi Atatürk Üniversitesi Açıköğretim Fakültesi 13
13 Durum Çubuğu programında geçerli belgenin hakkında bilgi almak için durum çubuğundan faydalanılır. Durum çubuğu çalışma alanının altında yer almaktadır (Şekil 12). Geçerli belge hakkındaki bilgilere bu çubuğu kullanarak erişmek mümkündür. Durum çubuğunda yer alan bileşenler şöyledir; 1 3 5 2 4 6 7 8 9 Şekil 12. Durum Çubuğu 1 2 3 4 5 6 Etiket seçici: Geçerli belgede yapılan seçime göre etiketlerin hiyerarşisini görüntülemede kullanılır. Seçme aracı: Seçim işlemlerinde fare işaretçisinin kullanımına olanak sağlamaktadır. El aracı: Sürükle bırak yöntemi ile belgelerin veya nesnelerin organize edilmesini sağlamaktadır. Yakınlaştırma aracı: Belgenin görüntülenme oranını, yakınlaştırma veya uzaklaştırma yaparak ayarlamayı sağlar. Büyütme ayarla: Belgenin görüntüleme oranının yüzde cinsinden ayarlanmasını sağlar. Pencere Boyutu: Önceden tanımlanmış boyutlarda belgenin görüntülenmesini sağlar. a. Cep telefonu boyutu: Cep telefonu boyutunda görüntüleme yapmayı sağlar. b. Tablet boyutu: Tablet boyutunda görüntüleme yapmayı sağlar. c. Masaüstü boyutu: Masaüstü boyutunda görüntülemeyi sağlar. 7 8 9 Pencere boyutu: Çeşitli ölçeklemelere göre hazır tanımlı pencere boyutlarını ve çözünürlüğü belirlemede kullanılmaktadır. İndirme boyutu / İndirme süresi: Geçerli belgenin ve diğer multimedya bileşenleri gibi belge ile ilgili tüm dosyaların boyutunun öğrenilmesini sağlar. Ayrıca bu belgelerin tahmini indirilme süreleri yine bu bileşen yardımıyla öğrenilebilir. Kodlama biçimi: Geçerli belge için kullanılan metin kodlama standardını belirtir. Atatürk Üniversitesi Açıköğretim Fakültesi 14
14 Standart Araç Çubuğu programının standart araç çubuğunda; kes, kopyala, yapıştır gibi tasarımcıların sıklıkla kullandıkları araçlar bulunmaktadır. Standart araç çubuğu programında en çok kullanılan araç çubukları arasında yer almaktadır (Şekil 13). Bu araç çubuğu vasıtasıyla kes, kopyala, yapıştır gibi belge üzerinde en sık yapılan işlemleri gerçekleştirmek mümkündür. 2 4 6 8 10 1 3 5 7 9 11 Şekil 13. Standart Araç Çubuğu Standart araç çubuğunda yer alan araçlar ve özellikleri şöyledir; 1 2 3 4 5 6 7 8 9 10 11 Yeni: Yeni belge oluşturma penceresinin görüntülenmesini sağlar. Bu pencereden özellikleri ayarlanmamış yeni boş bir belge oluşturulabildiği gibi mizanpajı ve boyutları önceden belirlenmiş birçok şablon ve sayfa yapısı arasında seçim yaparak yeni belge oluşturmak mümkündür. Aç: Disk üzerine kayıtlı olan belgeleri açmak için aç penceresinin görüntülenmesini sağlar. Bridge İçinde Tara: Adobe Bridge CS6 yazılımı kullanılarak belgelerin taranmasını ve açılmasını sağlar. Kaydet: Geçerli belgenin kaydedilmesini sağlar. Tümünü Kaydet: Açık olan tüm belgelerin kaydedilmesini sağlar. Baskı Kodu: Yazdır penceresinin görüntülenmesini sağlar. Kes: Seçilen metin veya diğer tasarım ögelerinin kesilmesini sağlar. Kopyala: Seçilen metin veya diğer tasarım ögelerinin kopyalanmasını sağlar. Yapıştır: Kesilen veya kopyalanan metin veya diğer tasarım ögelerinin yapıştırılmasını sağlar. Geri Al: Yapılan en son işlemin iptal edilmesini sağlar. Yenile: Geri al işleminin iptal edilmesini sağlar. Atatürk Üniversitesi Açıköğretim Fakültesi 15
DOSYA İŞLEMLERİ programı farklı dilleri desteklemekte ve bu dillerin ihtiyaç duyduğu dosya sistemlerini kullanabilmektedir. programının desteklediği dosya türleri; HTML, CSS, XML, ASP Javascript, ASP VBScript, ASP.NET C#, ASP.NET VB, PHP, Javascript şeklinde sıralanabilir. programında yeni bir belge oluşturmak için Ctrl + N tuş kombinasyonu kullanılabilir. DOSYA OLUŞTURULMASI programında yeni bir dosya oluşturmak oldukça kolaydır. Yeni bir dosya oluşturmak için izlenebilecek yollar şu şekilde sıralanabilir; 1. Dosya menüsü Yeni seçeneği 2. Standart araç çubuğu Yeni düğmesi 3. Ctrl + N klavye kısa yolu Bu üç yol ile yeni bir dosya oluşturmak için görüntülenen Yeni Belge penceresi aktif hâle gelmektedir (Şekil 14). Şekil 14. Yeni Belge Oluştur Penceresi Yeni penceresinden programının desteklediği tüm dosya türleri oluşturulabilmektedir. Ayrıca, çeşitli mizanpaj tercihlerini sunarak tasarımcıların daha kolay yeni belge oluşturmasını sağlamaktadır. 4. Yeni belge oluşturma işlemi belgenin özelliklerinin belirlenmesinin ardından oluştur düğmesinin kullanımıyla gerçekleşmektedir. Oluşturulan belge çalışma alanında görüntülenmektedir. Yeni bir belge oluşturulduğu zaman bu belge aktif hâle gelir ve doküman sekmesinde görüntülenen diğer belgeler pasif olur. Atatürk Üniversitesi Açıköğretim Fakültesi 16
Özet İnternet ortamında hizmet veren web uygulamaları, web sayfaları olarak isimlendirilmektedir. Bu uygulamalar web tasarımı ile uğraşan kişiler tarafından hazırlanmaktadır. Web ortamında hizmet verecek web sayfalarının tasarımında kullanılan yazılımlar web editörü olarak tanımlanmaktadır. Web editörleri HTML, CSS, Javascript vb. dillerin web sayfalarında kullanımı için çeşitli araçları barındıran yazılımlardır. Ücretli veya ücretsiz olarak erişilebilen bu yazılımların yetenekleri web sayfalarının kolay ve hızlı şekilde tasarlanmasına olanak sağlamaktadır. programı tasarımcılar arasında en çok tercih edilen web editörleri arasında yer almaktadır. Adobe firması tarafından geliştirilen bu program güçlü yönleri ve kolay kullanımı ile öne çıkmaktadır. programının en sık kullanılan bileşenleri şu şekilde sıralanabilir; Menü Çubuğu Uygulama Çubuğu Doküman Sekmesi Dokuman Araç Çubuğu Kodlama Araç Çubuğu Kod Ekranı Tasarım Ekranı Ekle Paneli CSS Stilleri Paneli Dosya Paneli Özellik Denetçisi Durum Çubuğu Standart Araç Çubuğu programı birçok dosya formatını desteklemektedir. programında yeni bir belge oluşturmak için; Dosya menüsü Yeni seçeneği Standart araç çubuğu Yeni düğmesi Ctrl + N klavye kısa yolu kullanılabilir. Atatürk Üniversitesi Açıköğretim Fakültesi 17
Öneri Güncel Dreamwaver programının kurulumunu öğrenmek için Ek Ünite 1'i okuyabilirsiniz. programında site oluşturmak için gerekli süreçleri öğrenmek için Ek Ünite 2'yi okuyabilirsiniz. Atatürk Üniversitesi Açıköğretim Fakültesi 18
Değerlendirme sorularını sistemde ilgili ünite başlığı altında yer alan bölüm sonu testi bölümünde etkileşimli olarak cevaplayabilirsiniz. DEĞERLENDİRME SORULARI 1. Aşağıdakilerden hangisi web sayfalarının tasarımında kullanılan yazılımların genel adıdır? a) Kelime işlem b) Web editörü c) Sunum d) Hesap tabloları e) Veri tabanı 2. Aşağıdakilerden hangisi karşılama ekranının görevleri arasında yer almaz? a) Son kullanılan belgeleri açma b) Yeni belge oluşturma c) Yardım konularına erişim sağlama d) Kullanılan versiyonun özelliklerinin tanıtma e) Son kullanılan belgeleri silme 3. I. Ekle paneli II. Menü çubuğu III. Durum çubuğu Yukarıda listelenen bileşenlerin hangisi veya hangileri çalışma alanında yer alır? a) Yalnız I b) Yalnız II c) I ve II d) II ve III e) I, II ve III 4. Aşağıdakilerden hangisi düzen menüsünde yer almaz? a) Aç b) Kopyala c) Yapıştır d) Geri al e) Kes 5. Mizanpaj aracı hangi araç çubuğunda yer alır? a) Ekle b) Dosya c) Uygulama d) Site e) Yardım Atatürk Üniversitesi Açıköğretim Fakültesi 19
6. Aşağıdakilerden hangisi doküman sekmesindeki görüntüleme seçeneklerinden biri değildir? a) Canlı Kod b) Tasarım c) Kod d) Tasarım ve Kod e) Canlı Tasarım 7. I. Kodlama araç çubuğundan belgeye resim eklenebilir. II. Kodlama araç çubuğu gizlenebilir. III. Kodlama araç çubuğundan kod blokları takip edilebilir. Yukarıdaki ifadelerin hangisi veya hangileri doğrudur? a) Yalnız I b) Yalnız II c) I ve II d) II ve III e) I, II ve III 8. programında tanım siteleri oluşturan belgelere ulaşmak için hangi panel kullanılır? a) Ekle b) Dosya c) Özellikler d) CSS e) Doküman 9. Belgede ekli bulunan resim, video, tablo vb. nesnelerin özelliklerinin organize edilmesi için hangi Dreamweaver ögesi kullanılır? a) Özellikler denetçisi b) Ekle paneli c) CSS stilleri d) Dosya paneli e) Durum çubuğu Atatürk Üniversitesi Açıköğretim Fakültesi 20