M TEGM
T.C.
MİLLÎ EĞİTİM BAKANLIĞI
BÜRO YÖNETİMİ
WEB EDİTÖRÜNDE TEMEL DÜZENLEMELER
BİLGİ SAYFALARI
Ankara, 2020
• Bu bireysel öğrenme materyali, mesleki ve teknik eğitim okul / kurumlarında uygulanan çerçeve öğretim programlarında yer alan kazanımların gerçekleştirilmesine yönelik öğrencilere rehberlik etmek amacıyla hazırlanmıştır.
• Millî Eğitim Bakanlığınca ücretsiz olarak verilmiştir.
• PARA İLE SATILMAZ.
AÇIKLAMALAR ... iii
GİRİŞ ... 1
ÖĞRENME FAALİYETİ–1 ... 2
1. WEB SİTESİ NASIL ÇALIŞIR ... 2
1.1. IP (Internet Protocol) Numarası ... 2
1.2. Alan Adı (Domain) ... 3
1.3. Hosting (Barındırma) ... 3
1.4. Web Sayfası Tasarım Editörü ... 4
1.5. Web Tasarım Editörü Temel İşlemler ... 5
1.5.1. Editör Ara yüz Yapısı ... 5
1.5.2. Çalışma Ekranları ... 6
1.5.3. Site Tanımlama ... 8
1.5.4. Ön İzlemede Kullanılacak Web Tarayıcının Seçilmesi ... 11
1.5.5. Paneller ve Araç Çubukları... 11
1.5.6. Web Sayfası Oluşturma ve Kaydetme ... 13
ÖLÇME VE DEĞERLENDİRME ... 16
ÖĞRENME FAALİYETİ–2 ... 17
2. METİN İŞLEMLERİ ... 17
2.1. Metin Türleri ve Özellikleri ... 18
2.2. Metin Girişi ... 18
2.3 Temel Metin Düzenleme İşlemleri... 20
2.3.1. Satır ve Paragraf İşlemleri ... 20
2.3.2. Karakter Biçimlendirme ... 21
2.3.3. Yazı Tipini Değiştirme ... 21
2.3.4. Metin Hizalama ve Metne Girinti Verme ... 23
2.4 Listeler ... 24
2.4.1. İç İçe Listele Oluşturma ... 24
ÖLÇME VE DEĞERLENDİRME ... 26
ÖĞRENME FAALİYETİ–3 ... 28
3. TABLOLAR ... 28
3.1 Tablo Düzenleme İşlemleri ... 29
3.1.1. Satır ve Sütun Ekleme-Silme ... 29
3.1.2. Satır ve Sütun Düzenleme ... 31
3.2 Tablo Expanded Modu ... 33
ÖLÇME VE DEĞERLENDİRME ... 35
ÖĞRENME FAALİYETİ–4 ... 36
4. RESİM İŞLEMLERİ ... 36
4.1. Resimlerle Çalışmak ... 36
4.1.1. Arka Plan Resmi Kullanma ... 36
4.1.2. Sayfaya Resim Ekleme ... 40
4.1.3. Asset Panelinden Sayfaya Resim Ekleme ... 41
4.1.4. Görüntü Yer Tutucu (Image Placeholder) Ekleme ... 42
4.1.5. Rollover Image Ekleme ... 43
İÇİNDEKİLER
i
4.1.6. Resim Düzenleme İşlemleri ... 45
ÖLÇME VE DEĞERLENDİRME ... 46
ÖĞRENME FAALİYETİ–5 ... 47
5. ÇOKLU ORTAMBİLEŞENLERİ ... 47
5.1 Animasyon Ekleme ... 47
5.1.1. Flash Animasyon Ekleme ... 47
5.1.2. Flash Video Ekleme ... 48
5.1.3. Ses Oynatıcısı Ekleme ... 49
5.1.4. Param Eklemek ... 50
DEĞERLER ETKİNLİĞİ ... 51
ÖLÇME VE DEĞERLENDİRME ... 52
ÖĞRENME FAALİYETİ–6 ... 53
6. Link (bağlantı) İşlemleri ... 53
6.1 Metinlere Bağlantı Ekleme ... 53
6.2. Bağlantı Özelliklerini Düzenleme ... 54
6.3. Bağlantı Adreslerinin Açılış Şekilleri ... 55
6.4. Resimlere Bağlantı verme ... 56
6.5. Etkin Resim Noktaları Oluşturma ... 56
6.6. Named Anchor (Çapa) Ekleme ... 58
6.7. E-Posta Bağlantıları ... 59
ÖLÇME VE DEĞERLENDİRME ... 60
CEVAP ANAHTARLARI ... 60
KAYNAKÇA ... 60
ii
AÇIKLAMALAR
ALAN Büro Yönetimi
DAL Yönetici Sekreterlği
MODÜLÜN ADI Web Editöründe Temel Düzenlemeler
MODÜLÜN SÜRESİ 40/36 MODÜLÜN AMACI
Bireye/öğrenciye; iş sağlığı ve güvenliği tedbirlerini alarak web editöründe temel düzenlemeler yapma ile ilgili bilgi ve becerilerin kazandırılması amaçlanmaktadır.
MODÜLÜN KAZANIMLARI
1. İş sağlığı ve güvenliği tedbirlerini alarak web sayfası tasarım editörünün temel araçlarını kullanır.
2. İş sağlığı ve güvenliği tedbirlerini alarak web sayfası tasarım editörünü kullanarak metin üzerinde işlemler yapar.
3. İş sağlığı ve güvenliği tedbirlerini alarak web sayfası tasarım editörü yardımıyla tablo oluşturur.
4. İş sağlığı ve güvenliği tedbirlerini alarak web sayfası tasarım editörü yardımıyla resimlerle çalışır.
5. İş sağlığı ve güvenliği tedbirlerini alarak web sayfası tasarım editörü yardımıyla flash nesneleri ve çoklu ortam nesnelerini ekler.
6. İş sağlığı ve güvenliği tedbirlerini alarak web sayfası tasarım editörü yardımıyla web sayfası içine yerleştirilen ögeler üzerinde bağlantılar oluşturur.
EĞİTİM ÖĞRETİM ORTAMLARI VE DONANIMLARI
Ortam: Atölye, laboratuvar, bilgi teknolojileri ortamı (internet) vb. kendi kendinize veya grupla alışabileceğiniz tüm ortamlar.
Donanım:
Web tasarım editör programını çalıştırabilecek
yeterlikte bilgisayar, yedekleme için gerekli donanım (CD yazıcı, flash bellek), raporlama için yazıcı, kâğıt ve kalem..
ÖLÇME VE
DEĞERLENDİRME
Bireysel öğrenme materyali içinde yer alan ve her öğrenme faaliyetinden sonra verilen ölçme araçları ile kendinizi değerlendirebileceksiniz.
AÇIKLAMALAR
iii
GİRİŞ
Sevgili Öğrenci,
Web editörü, bir web sitesi ve bunların sayfalarını yapmayı sağlayan bir programdır.
HTML kodlarının kullanımına izin veren bu programın en güzel özelliği HTML kod bilgisine sahip olmasanız bile web sitesi yapmanızı sağlar.
Bu modülle, web tasarım editörü kullanarak çok fazla kod bilginiz olmadan da basit bir web sitesi oluşturabileceksiniz.
GİRİŞ
1
ÖĞRENME FAALİYETİ–1 ÖĞRENME KAZANIMI
İş sağlığı ve güvenliği tedbirlerini alarak web sayfası tasarım editörünün temel araçlarını kullanır.
ARAŞTIRMA
Günümüzde yaygın olarak kullanılan web tasarım editörlerinin hangileri olduğunu araştırınız.
Bu web tasarım editörlerinin birbirilerine göre artı ve eksi yanlarının neler olduğunu sınıfta tartışınız.
1. WEB SİTESİ NASIL ÇALIŞIR
Kullanıcının, internet tarayıcısının adres çubuğuna bir internet sitesinin adresini yazdığında, ana sayfayı görene kadar hangi yollardan geçiyor, arka planda neler oluyor ve bazı önemli terimler açıklanacaktır. Bir web sitesi yapmadan önce ip, domain, hosting terimlerinin anlamlarını bilmek gerekmektedir.
Şekil 1.1 Bir web sitesine bağlanıldığında gerçekleşen işlemler
1.1. IP (Internet Protoco l) Numarası
Ip (Internet Protocol), bilgisayarların birbirileri ile iletişim kurmalarını sağlayan standart bir protokoldür. İnternet Protokol adresi, TCP/IP standardı kullanan bir ağda bulunan cihazların birbirileri ile iletişim kurmak ve veri alışverişinde bulunmak için kullandıkları benzeri olmayan bir numaradır. İki bilgisayar iletişim kurdukları zaman birbirlerini bulmak için Ip adresini kullanırlar.
ÖĞRENME FAALİYETİ– 1
2
IP numaraları A.B.C.D şeklinde bir yapıdır. Buradaki A,B,C,D ye karşılık 0-255 arası bir sayı gelmektedir. Örneğin 212.200.83.75 bir IP numarasıdır.
Bir kullanıcı internette bir siteye bağlanmak istediğinde kullanıcının bilgisayarı o sitenin bulunduğu bilgisayarın ip adresine bağlanır. Örneğin www.meb.gov.tr internet sitesinin ip adresi “212.174.189.120“ dir. Bu ip adresini kopyalayıp web tarayıcısına yapıştırıldığında yine www.meb.gov.tr yazıldığında açılan site açılacaktır.
1.2. Alan Adı (Domain)
Domainler; IP adresi diye tabir edilen, bilgisayarların birbirini görmesini sağlayan nümerik sisteminin daha kolaylaştırılmış ve rahatça girilebilmesi için kelimelerle ifade edilen hâlidir.
Yukarıda anlatıldığı gibi Milli Eğitim Bakanlığının web sitesi olan www.meb.gov.tr ismini mi akılda tutmak kolay yoksa domain adresinin bağı olduğu bilgisayarın ip adresi olan 212.174.189.120 ip adresini mi akılda tutmak kolaydır? Görüleceği gibi meb.gov.tr adresini akılda tutmak çok daha kolaydır.
1.3. Hosting (Barındırma)
Hosting veya Barındırma, bir web sitesinde yayınlanmak istenen sayfaların, resimlerin veya dokümanların internet kullanıcıları tarafından erişebileceği bir bilgisayarda tutulmasıdır.
Barındırma hizmeti web sitesinde bulundurulmak istenen içeriğin yüklendiği ve web sayfasının arka yüzüdür.
İnternette site yayınlamak için özel olarak üretilmiş, internet omurgasına çok hızlı bağlantısı olan, yüzlerce kullanıcıya aynı anda hizmet verebilecek bir bilgisayarda (sunucuda) yayınlamak istenen dosyaların saklanması gerekir. Web siteye ait dosyaları saklayan ve internet kullanıcılarının erişimine sunan bu bilgisayarlara web sunucusu (web server), bu veri saklama ve yayınlama işlemine de barındırma hizmeti denir.
Görsel 1.1 Hosting için kullanılan server (Sunucu) sistemi
3
1.4. Web Sayfası Tasarım Editörü
Web sitelerini tasarlamak için Html (Hypertext Markup Language), dili kullanılır. Html komutları herhangi bir metin (text) düzenleme editöründe yazılabileceği gibi çeşitli web tasarımı editörlerini kullanarak da oluşturulabilir.
Görsel 1.2 Bir web sitesinin web tarayıcısındaki görsel hâli
Görsel 1.3 Görsel 1.2’deki web sitesinin arka plandaki html kodlarının bir kısmı
4
Bir web tarayıcısı üzerinde örneğin chrome tarayıcısında Mouse’un sağ tuşu ile tıklandığından gelen menüden “sayfa kaynağını görüntüle” bölümü seçildiğinde o web sitesinin tasarımında kullanılan html komutlarını görülebilir. Eğer bu kodlar biliniyorsa herhangi bir programa ihtiyaç duymadan Notepad gibi bir text editöründe kodları yazılıp, dosya .html uzantılı olarak kaydedilerek bir web sayfası oluşturulabilir. Eğer kişi Html dilinde bir uzmanlığa sahip değilse web tasarım editörleri bu kodları oluşturabilir. Örneğin bir tablo yapılmak isteniyorsa Word programındaki gibi tablo görsel olarak seçilir ve web tasarım editörü tablo için gerekli html kodlarını oluşturur.
Günümüzde birçok web tasarım editörü bulunmaktadır. Biz piyasada en çok tercih edilen “Dreamweaver” programının kullanımı gösterilecektir.
1.5. Web Tasarım Editörü Temel İşlemler
Bu bölümde web tasarım editörünün pencere yapısını inceleyerek site tanımlama ve sayfa oluşturup kaydetme işlemlerini incelenecektir.
1.5.1. Editör Ara yüz Yapısı
Görsel 1.4 Web tasarım editörü karşılama ekranı
Web Tasarımı Editörü açıldığında zaman ekrana ilk olarak Görsel 1.4’de görünen karşılama sayfası gelir. Bu karşılama sayfasının 5 farklı özelliği incelenecektir.
5
Web tasarım editörü açılış ekranı bölümleri.
Son açılan belgeler listelenir. Web tasarım editörü ilk defa çalıştırılıyorsa bu bölüm boş gelir. Listede olmayan bir belgeyi açmak için Open (Aç) düğmesine tıklamak gerekmektedir. Buradan istenilen belge açılarak işlem yapılabilir.
Yeni dosya oluşturma seçenekleri görüntülenmektedir. Web tasarım editörü farklı dosya türlerini desteklemektedir. Buradan hangi tür dosya tipi ile çalışmak isteniyorsa o dosya tipini seçilir. Bu şekilde web tasarım editörü seçilen dosya tipine uygun ön işlemleri gerçekleştirir. Örneğin. Html dosya tipini seçildiğinde gerekli olan <html><title><body> gibi etiketleri otomatik olarak oluşturur.
Web tasarım editörünün yeni özellikleri ile ilgili eğitim videoları bulunmaktadır.
Web tasarım editörü ile ilgili hazırlanmış ayrıntılı yardım içeriğine ulaşılabilir.
Web tasarımı editörü ilgili haberlere, güncellemelere ve çeşitli ipuçlarına bu bölümden ulaşılabilir. Bu bölüm sayesinde son gelişmeler takip edilebilir.
1.5.2. Çalışma Ekranları
Web tasarım işiyle uğraşanlar web sitelerini tasarlarken farklı teknikler kullanırlar. İleri seviye kodlamacılar sitelerini genellikle kod yazarak yaparlar. Giriş seviyesindeki kullanıcılar genelde dizayn kısmından yaparlar. Bazı kullanıcılar ise dizayn ve kod bölümünü birlikte kullanmak isterler. Kullanmakta olduğumuz web tasarım editörünün çalışma ekranı bu 3 farklı kullanıcı eğilimine göre düzenlenebilir. Bu ekranları düzenlemek için uygulama çubuğundaki layout sekmesi kullanılır.
Görsel 1.5 Web tasarım editörünün çalışma ekranı seçimi
Code, Design, Code and Design ekranlarının nasıl göründüğü aşağıdaki şekillerde gösterilmiştir.
6
Design (Tasarım): Web sayfasının tasarım hâli görüntülenir.
Görsel 1.6 Web editörünün tasarım görünümü ara yüzü
Split (Böl): Web sayfasının tasarım görünümü ve kodları bir arada görüntülenir.
Görsel 1.7 Web editörünün tasarım ve kod kısmının bir arada göründüğü ara yüz
7
Code (Kod) : Web sayfasının sadece kodları görünür.
Görsel 1.8 Web tasarım editörünün kod kısmının göründüğü ara yüzü
1.5.3. Site Tanımlama
Site tanımlama bölümünü anlatmadan önce site tanımlamanın önemine değinilecektir.
Örneğin www.benimsitem.com isimli bir domain ve bu domain ismiyle web sitesini yayınlamak için bir hosting alanı alındığı farz edilsin. Domain adı, hosting alanında bir klasör gibi görünecektir.
Şekil 1.2 Domain adresinin hosting firması bilgisayarındaki durumu
www.benimsitem.com
8
Web sitesi tasarlanmaya başlandığında siteye D sürücüsünde resimler klasöründe bulunan bir resmin (D:\resimler\logo.jpg) eklendiği düşülsün. Web sayfası kişinin kendi bilgisayarında test edildiğinde siteye eklenen resim görünecektir. Fakat site internetteki hosting alanına yüklendiğinde resim görünmeyecektir. Çünkü www.benimsitem.com sayfası açıldığında web tarayıcısı resmi (D:\resimler\logo.jpg) şeklinde arayacaktır. Fakat hosting üzerindeki bilgisayarda böyle yol olmayacağından resim görünmeyecektir. Web sitesi tasarımına başlayanların en çok yaşadığı sorun budur.
Web tasarım editörü, site tanımlama özelliğini kullanarak internetteki hosting alanı gibi bir alan oluşturur. Böylelikle bilgisayarın farklı yerlerindeki resim, döküman, video gibi dosyaların siteye eklenmesi istendiğinde web tasarım editörü bu dosyaları bilgisayarda oluşturulan sanal hosting alanına taşıyacaktır. Böylelikle site gerçek hosting alanına yüklendiğinde hiçbir sorunla karşılaşmadan web sitesini yayına alınabilecektir.
1.5.3.1 Site Tanımlama
Web tasarım editöründe site tanımlama işlemi birden fazla yöntemlerle yapılabilir.
Uygulama araç çubuğundaki site düğmesinden yeni site seçeneği ile yeni bir site tanımlanabilir
Görsel 1.9 Araç çubuğundan site tanımlama
Ekranın üstünde yer alan site menüsündeki yeni site seçeneği ile yeni bir site tanımlanabilir.
Görsel 1.10 Menü üzerinden site tanımlama
9
Yukarıdaki yöntemleri biri ile New Site seçeneği tıklandığında ekrana aşağıdaki gibi bir pencere gelecektir.
Görsel 1.11 Site kurulum ekranı
Burada site adı yazan kısma siteye verilecek adı yazıyoruz. Yerel site klasörü kısmında ise Folder ( ) simgesi tıklanarak sitenin nereye kaydedeceği belirlenir. Burada çalışılacak klasör, hosting üzerindeki alan adına açılmış bir klasör gibi düşünülebilir.
Daha sonra Save düğmesine tıklandığında web sitesi için site tanımlama işlemi gerçekleştirilmiş olur. Şimdi sağ taraftaki files paneline bakıldığında kaydedilen sitenin bu panelde yer aldığı görülecektir.
Görsel 1.12 Files panelinde tanımlanmış site
Birden fazla site tanımlaması yapılabilir. Files Panelinden istenilen site seçilerek o siteye ait dosyaların görüntülenmesi sağlanabilir.
10
1.5.4. Ön İzlemede Kullanılacak Web Tarayıcının Seçilmesi
Tasarlanan sayfanın tarayıcıda nasıl göründüğü test edilmek istenebilir. Bunun için sitenin bulunduğu klasöre gidip oradan test edilmek istenen sayfa istenilen tarayıcıda açılır.
Web tasarım editöründe, web sitesini istenen tarayıcıda test etmek için Preview in Browser adında özellik bulunmaktadır.
Görsel 1.13 Web sayfalarının tarayıcıda test ayarlarının yapılması
Pencere içindeki Edit → Preferences’den açılan pencereden Preview in Browser sekmesinden ulaşılabilir. Gelen ekranda test etmek istenen tarayıcı seçilir. Daha sonra Primary Browser seçeneği işaretlenerek seçilen tarayıcı birincil test tarayıcısı olarak seçilmiş olur. Web sitesi test edilmek istendiğinde F12 tuşuna basılarak web sitesi seçilmiş olan tarayıcı üzerinden test edilebilir.
1.5.5. Paneller ve Araç Çubukları
Kullanılan web editöründe birçok farklı özelliğe sahip bir sürü panel bulunmaktadır. Bu panellerin bazıları ileri seviye kullanıcılara yönelik panellerdir. Bu yüzden en çok kullanılan panellere değinilecektir. İleriki konularda panellerin detaylarına yeri geldikçe değinilecektir.
11
Görsel 1.14 Web tasarım editörü çalışma sayfası
Web tasarım editöründe ilk açılışta default bazı paneller gelebilir. Gerek görülmeyen paneller kapatılabilir. Bunu yapmanın 2 yolu vardır.
İlk olarak kullanmak istenmeyen panel seçilip panel üzerinden bölümüne tıklanıp gelen menüden close alanı seçilerek kapatılabilir.
Görsel 1.15 Panellerin kapatılması 1. yöntem
12
Burada Close Seçeneği seçildiğinde Aktif olan Databases Panelini kapatır. Close Tab Group seçeneği seçildiğinde aynı panel grubunda bulunan Databases, Bindings ve Server Behaviors panellerini de kapatır.
İkinci yöntem olarak Window menüsünden istenilen panel gizlenip tekrar aktif hâle getirilebilir.
Görsel 1.16 Panellerin kapatılması 2. yöntem
Modül süresince Insert, Properties, Files, Application Bar panellerini aktif olarak kullanılacaktır. Diğer paneller ihtiyaç doğrultusunda aktif hâle getirilecektir.
1.5.6. Web Sayfası Oluşturma ve Kaydetme
Site tanımlama işlemi yapıldıktan sonra artık hazırlanacak web sitesinin sayfaları oluşturulabilir. Yeni bir sayfa oluşturmak için File menüsü altında bulunan New seçeneği tıklanmalıdır. Ekrana New Document penceresi gelecektir.
13
Görsel 1.17 Yeni bir sayfa oluşturma
New Document penceresinde Page Type bölümünde web tasarım editörünün desteklediği dosya tipleri gösterilmektedir. Eğer sayfa daha dinamik bir yapıda yapılmak isteniyorsa örneğin bir e-ticaret sitesi gibi burada programlama diline ihtiyaç olacaktır. Bu tip web siteleri ASP javascript–PHP arasındaki dosya tiplerini kullanılır. Bu giriş seviyesinde web sayfaları tasarımı anlatılacağı için Page Type listesinden HTML seçeneği seçilip Create düğmesine tıklanmalıdır. Daha sonra ekrana boş bir HTML sayfası gelecektir. Buraya, bu benim ilk sayfam yazıp Ctrl+S tuş kombinasyonu ya da File→Save menü yolu ile gelen ekrandan dosyaya bir isim verilerek kaydedilir.
Dosyayı isimlendirirken:
Türkçe karakter kullanılmaz.
Boşluk karakteri kullanılmaz. Onun yerine _ veya – işaretlerini kullanılır.
Tarayıcılar www.benimsitem.com yazıldığında k olarak index.html ya da default.html dosyasını arar. Bundan dolayı ana sayfanın ismi index ya da default olarak isimlendirilir.
14
Görsel 1.18 Yeni bir sayfa oluşturma
15
ÖLÇME VE DEĞERLENDİRME
Aşağıdaki cümlelerin başında boş bırakılan parantezlere cümlelerde verilen bilgiler doğru ise D, yanlış ise Y yazınız.
1. ( ) Web tasarım editöründe sadece tasarım ekranında çalışabiliriz.
2. ( ) Açık olan web sayfaları her zaman tasarım görünümünde görüntülenir.
3. ( ) Files panelinden yeni site tanımlama işlemini yapabilirsiniz.
4. ( ) Ön izlemede kullanılacak tarayıcıya ait tanımlamaları Edit→Preferences menüsündeki Preview in browser seçeneğinin altında bulunan Browsers Listesini Edit alanı tıklanmalıdır.
5. ( ) Oluşturduğumuz siteyi yeniden düzenleyemeyiz.
6. ( ) Domain bilgisayarların birbirileri ile iletişim kurmalarını sağlayan standart bir protokoldür.
7. ( ) Web siteye ait dosyaları saklayan ve internet kullanıcılarının erişimine sunan bu bilgisayarlara web sunucusu (web server) denir.
ÖLÇME VE DEĞERLENDİRME
16
ÖĞRENME FAALİYETİ–2 ÖĞRENME KAZANIMI
İş sağlığı ve güvenliği tedbirlerini alarak web sayfası tasarım editörünü kullanarak metin üzerinde işlemler yapar.
ARAŞTIRMA
Web sayfa tasarlarken metinleri biçimlendirmek ya da listeler oluşturmak ne gibi fayda sağlar, araştırınız.
2. METİN İŞLEMLERİ
Web sitesi tasarlamadan sitenin genel görünümü için çeşitli araştırmalar yapılıp örnek sitelere bakılır. Yapılacak sitenin tasarımı önce zihinde planlanmalıdır. Planlama yapıldıktan sonra site bir kâğıda çizilerek düşünce somutlaştırılmış olur. Daha sonra kâğıt üzerinde değişiklikler yapılarak tasarımın genel görünüm taslağı çıkarılıp site tasarımına geçilmelidir.
Çünkü kâğıt üzerinde yapılacak değişiklikler çok vakit almaz ama bir siteye başlandıktan sonra sitenin genel görünümü ile yapılacak değişikliler çok vakit alabilir. Bazen de işin içinden çıkılmayacak sorunlara neden olabilir. Tekrar baştan başlamak gerekebilir. Bu da kaybedilen kıymetli zaman anlamına gelir. Aşağıdaki şekilde örnek bir eskiz çalışması gösterilmiştir.
Şekil 2.1 Örnek bir tasarım çalışması
ÖĞRENME FAALİYETİ–2
17
2.1. Metin Türleri ve Özellikleri
Web tasarım editöründe metinsel veri girişi text editöründeki veri girişine benzer.
Metinler üzerinde renk, liste, tablo, paragraf başı, satır başı ve bunlar gibi farklı metin düzenleme işlemlerinde bazı farklılıklar olabilir. Çünkü daha öncede bahsedildiği gibi web tasarım editörünün en temel özelliği görsel olarak yapılan işlemleri arka planda html kodlarına dönüştürmesidir. Bu yüzden bir Word programında ki tasarım özgürlüğü burada biraz daha kısıtlıdır. Örneğin Word programında bir metin kutusu ile sayfanın istenilen alanına veri girişi yapılabilir fakat web tasarım editöründe bunu yapmak için belli bir plan dahilinde hareket etmek gerekir.
Bu öğretim faaliyetinde metin girişinin nasıl yapılacağı, metinler üzerinde düzenlemelerin neler olduğu ve liste metinler konularına değinilecektir.
2.2. Metin Girişi
Web tasarım editöründe metin girişleri çalışma sayfasına girilir. Buradaki Metin tipi ve özellikleri web tasarım editörünün ilk kurulumunda belirlenmiş default değerler ile girilir.
Aşağıdaki şekilde herhangi bir ek ayar yapılmadan web tasarı editörüne veri girişi yapılmıştır.
Görsel 2.1 Web tasarım editörüne metin girişi
18
F12 tuşu ile ilk web sayfasının tarayıcıda nasıl göründüğüne bakılabilir.
Görsel 2.2 ilk Web sayfasını web browser da görünümü
Metnin üzerinde temel düzenleme işlemleri yapılmak istenirse bunun 3 yolu bulunmaktadır.
1.Yol: Menü çubuğundaki Format menüsünden yapılabilir.
Görsel 2.3 Format menüsü 2.Yol: Insert panelindeki Text bölümünden yapılabilir.
Şekil 2.4 Metin düzenleme araç çubuğu
19
Eğer bu araç çubuğu hazırlanan web editöründe görünmüyor ise sağ üst taraftaki web tasarım editörünün görünüşünün değiştirildiği aladan Classic görünümü seçilir.
3.Yol: Properties panelinden metin düzenlemeleri yapılabilir fakat burada kullanılabilir metin düzenleme özellikleri daha azdır. Daha detaylı metin düzenlemeleri için ilk iki yol kullanılır.
Görsel 2.5 Properties panelinden metin düzenleme
2.3 Temel Metin Düzenleme İşlemleri
2.3.1. Satır ve Paragraf İşlemleri
Oluşturulan sayfa içinde metinler yazılıp Enter tuşuna basıldığında bir alt satır geniş bir boşluktan sonra başlamaktadır. Bu boşluğa paragraf boşluğu adı verilir. Satır boşluğu bırakmak için ise satır sonu oluşturulmalıdır.
Şekil 2.6 Paragraf ve satır boşluğu
Web tasarım editöründe satır boşluğu eklemek için bulunulan noktadan Shift tuşu ile birlikte Enter tuşuna basmak yeterlidir.
Not: Bundan sonraki konularda aşağıdaki metin üzerinde işlemler yapılacaktır.
Paragraf Boşluğu Satır Boşluğu
20
Görsel 2.7 Örnek veri
2.3.2. Karakter Biçimlendirme
Sayfa içinde bulunan metinleri biçimlendirme düğmeleri yardımıyla yapılabilir. Bu düğmeler yardımıyla seçilen metnin kalın ya da italik olmasını sağlanabilir. Şimdi bu tuşlar yardımı ile örnek verinin başlıkları biçimlendirilecektir.
Şekil 2.8 Karakter biçimlendirme düğmeleri
Şekil 2.10 Örnek verinin biçimlendirme düğmeleri ile düzenlenmesi
2.3.3. Yazı Tipini Değiştirme
Sayfa içindeki metinlere ait yazı tipini değiştirmek için değiştirilecek metin seçildikten sonra Mouse-Sağ Tuş gelen menüden Font bölümü seçilir. Gelen alt menüden istenilen font seçilir.
21
Görsel 2.9 Yazı tipi değiştirme
Bu seçim yapıldığında ekrana New CSS rule ekranı gelir. CSS kısaca web sayfasında girilen bilgilerin kullanıcıya daha okunaklı ve kullanışlı görünmesi için biçim ayarlarının yapıldığı bölümdür. İleriki konularda CSS ile ilgili detaylı bilgilere yer verilecektir. Bu gelen ekranda yapılmak istenen değişikliğe bir isim verilmelidir. Daha sonra başka metinlere de bu değişiklik uygulanmak istendiğinde önceden verilen isim seçilerek o özellikler seçili metne uygulanabilir.
Görsel 2.10 Font özelliğinin CSS kuralı olarak eklenmesi
22
Örnek:
Örnek verideki yazı metninin Arial, Helvatica, Sans-serif olarak değiştirilmesi:
Görsel 2.11 örnek veriye font özelliğinin eklenmesi
2.3.4. Metin Hizalama ve Metne Girinti Verme
Sayfaya eklenen metinleri hizalamak için Format menüsünde bulunan Align seçeneğinden yapılabilir.
Görsel 2.12 Metin hizalama seçenekleri
Metne girinti verme işlemleri için yine Format menüsünde bulunan Indent ve Outdent seçenekleri kullanılabileceği gibi Properties panelindeki tuşlar da kullanılabilir.
Örnek:
Örnek veride hizalama ve girinti oluşturma:
23
Görsel 2.13 Örnek veriye hizalama ve girinti verilmesi
2.4 Listeler
Oluşturulan sayfa içindeki metinler sıralı ya da sırasız şekilde listelenebilir, tercihe göre tanım listeleri oluşturulabilir.
Sıralı listeler (Ordered Listed); sayısal veya alfabetik olarak sıralanmış elemanlardan oluşmaktadır (i-ii-iii; 1-2-3; a-b-c ….).
Görsel 2.14 Sıralı liste örneği
Sırasız Listeler (Unordered Listed): Madde imli listeler olarak da adlandırılırlar.
Her liste elemanının önünde bir madde imi bulunmaktadır (•,-, ∙ …).
Görsel 2.15 Sırasız liste örneği
2.4.1. İç İçe Listele Oluşturma
Web tasarım editöründe çalışılan sayfa içinde iç içe listeler oluşturmak için 3 yol bulunmaktadır.
24
1.Yol: Liste elemanlarının üzerinde sağ tuşla tıklayarak açılan menülerden List seçeneğinin içinde bulunan Indent / Outdent seçeneklerini işaretlemek yeterlidir.
2. Yol: İmlecin olduğu yerde Tab tuşuna basılarak indent özelliğini uygulanır.
Shift+Enter tuşları ile outdent özelliği uygulanabilir.
3.Yol: Properties panelindeki tuşları kullanılarak iç içe liste yapısı kullanılabilir.
Görsel 2.16 İç içe liste örneği
25
ÖLÇME VE DEĞERLENDİRME
Aşağıdaki soruları dikkatle okuyarak doğru seçeneği işaretleyiniz.
1.
Yukarıda numaralandırılan menülerin anlamları sırasıyla aşağıdakilerden hangisinde doğru olarak verilmiştir?
A) Kod bölümü – dizayn bölümü- hem kod hem dizayn bölümü B) Dizayn bölümü- hem kod hem dizayn bölümü- kod bölümü C) Hem kod hem dizayn bölümü- dizayn bölümü- kod bölümü D) kod bölümü - hem kod hem dizayn bölümü- dizayn bölümü E) kod bölümü - dizayn bölümü- Hem Kod hem dizayn bölümü
2.Ekranda görünmeyen “insert” panelini görüntülemek için hangi
aşağıdakilerden hangi menü kullanılır?
A) View B) File C) Window D) Commands E) Modift
3.
Sayfadaki yazıları hizalamak için hangi menü yolu kullanılır?
A) Indent B) Outdent C) Align D) List E) Css
Aşağıdaki cümlelerin başında boş bırakılan parantezlere cümlelerde verilen bilgiler doğru ise D, yanlış ise Y yazınız.
4. ( ) Web tasarım editöründe satır sonu eklemek için Enter tuşuna basmalıyız.
5. ( ) Unordered Listed sadece alfabetik olarak sıralanmış elemanlardan oluşur.
6. ( ) Metinlere girinti verme işlemini sadece Properties penceresinden yapabiliriz.
7. ( ) Web tasarım editöründe Ctrl Shift ve boşluk tuşlarına birlikte basarak metinler arasına bölünmez boşluklar ekleyebiliriz.
8. ( ) İç içe listeler oluşturmak için tuşları kullanılır.
ÖLÇME VE DEĞERLENDİRME
26
DEĞERLENDİRME
Cevaplarınızı cevap anahtarıyla karşılaştırınız. Yanlış cevap verdiğiniz ya da cevap verirken tereddüt ettiğiniz sorularla ilgili konuları faaliyete geri dönerek tekrarlayınız.
Cevaplarınızın tümü doğru ise öğrenme faaliyeti geçiniz.
27
ÖĞRENME FAALİYETİ–3 ÖĞRENME KAZANIMI
İş sağlığı ve güvenliği tedbirlerini alarak web sayfası tasarım editörü yardımıyla tablo oluşturur.
ARAŞTIRMA
Tablo kullanarak web tasarımı yapmanın avantaj ve dezavantajlarını araştırınız.
3. TABLOLAR
Tablolar, temelde verileri daha anlamlı bir hâlde göstermek için kullanılır. Web sayfalarında tabloları temel anlamının dışında web sayfalarını satırlara/sütunlara bölmek amacıyla ya da resimlerin veya grafiklerin sayfada sabit bir noktada durması amacıyla kullanılabilecek en önemli araçlardan biridir. Kısacası sayfa içindeki elemanların yerleşimi konusunda söz sahibi olmanın en kolay yoludur.
Tablolar satır (row) ve sütunlardan (column) oluşmaktadır. Satır ve sütunların kesiştiği nokta ise hücre (cell) olarak adlandırılmıştır.
Tablo eklemek için Insert menüsünden Table seçeneği seçilir. Açılan pencereden gerekli düzenlemeler yapılır.
Görsel 3.1 Tablo ekleme penceresi
ÖĞRENME FAALİYETİ–3
28
Rows: Tablonun kaç satırdan oluşacağı belirlenir.
Columns: Tablonun kaç sütundan oluşacağı belirlenir.
Table width: Tablonun boyutu pixel ya da yüzde cinsinden belirlenir. Burada şuna dikkat edilmelidir. Yüzde seçildiğinde tablonun genişliği farklı çözünürlüklere göre farklılık gösterecektir. Örneğin 1366x768 çözünürlüklü bir bilgisayarda görünmesi ile 1920x1080 çözünürlüğe sahip bir bilgisayarda farklı olacaktır. Bazı tabloları yüzde bazılarını pixel olarak tanımlanırsa bu görüntü sorunlarına neden olabilir.
Border thickness: Tablonun kenar çizgisinin kalınlığı belirlenir.
Cell Padding: Hücrelerin boyutu belirlenir.
Cell Spacing: Hücrelerin birbirinden ve tablo kenarlığından uzaklığı belirlenir.
Header: Tablo başlığının nerede olacağı seçilir.
Caption: Tabloya başlık bilgisi eklenir.
Summary: Tablo içeriği hakkında açıklama yazısı eklenir.
Görsel 3.1’de görülen özellikler uygulandığı zaman aşağıdaki Görsel 3.2’deki gibi bir tablo oluşmaktadır. Tablonun içine veri girişi yapmak için ilgili hücrenin içine bir defa tıklandıktan sonra metin yazılır.
Görsel 3.2 Örnek tablo
3.1 Tablo Düzenleme İşlemleri
3.1.1. Satır ve Sütun Ekleme-Silme
Tabloya satır sütun eklemenin birden fazla yolu vardır. Bunlar:
29
Insert menüsündeki Table objects’e gelindiğinde açılan alt menü ile satır sütun işlemleri yapılabilir.
Görsel 3.3 Insert menüsünden satır sütun ekleme Insert Row Above: İmlecin bulunduğu hücrenin üstüne satır ekler.
Insert Row Below: İmecin bulunduğu hücrenin altına satı ekler.
Insert Column to The Left: İmlecin bulunduğu hücrenin soluna sütun ekler.
Insert Column to The Right: İmlecin bulunduğu satırın sağına sütun ekler.
Tablonun içinde değişiklik yapılacak yerde mouse ile sağ tıklanarak açılan menüden Table seçeneğinin altında bulunan özelliklerle satır/sütun eklenebilir.
Görsel 3.4 Mouse sağ tuşu ile açılan menüden satır sütun ekleme
Aynı zamanda bu menüden satır sütun silme işlemde yapılabilir.
Insert araç çubuğundaki Layout sekmesinde ki tuşlarla da satır/sütun ekleme işlemi yapılabilir.
Görsel 3.5 Insert araç çubuğundan satır/sütun ekleme tuşları
Tablonun en alt kısmın satır eklemenin bir diğer kısa yolu da tablonun en altındaki hücredeyken Tab tuşuna basılarak tablonun en alt kısmına yeni bir satır eklenebilir.
30
Görsel 3.6 Önek tablomuza satır sütun eklenmesi
3.1.2. Satır ve Sütun Düzenleme
Sayfadaki tabloda bulanan satır ve sütunlar üzerinde değişiklik yapılabilir. Tablo içinde bulunan hücreler birleştirilebilir ya da hücreleri satır/sütunlara bölünebilir. Bunun için
Properties penceresinde bulunan düğmelerden faydalanılabilir.
Hücreleri birleştirmek için ilgili hücreler seçildikten sonra Properties penceresinde bulunan Merge Cell Hücreleri böl ( ) düğmesi tıklanmalıdır.
Şekil 3.7 Hücreleri birleştirme
Hücreyi satır/ sütuna bölmek için ilgili hücre seçildikten sonra Properties penceresinde bulunan Split Cell hücreleri böl ( ) düğmesi tıklanmalıdır. Ekrana Split Cell penceresi gelecektir.
Görsel 3.8 Hücreyi bölme penceresi
31
Bu pencerede ilgili düzenleme yapıldığında hücrenin satır veya sütunlara bölündüğü görülecektir.
Görsel 3.9 Hücreleri bölme
Örnek:
Görsel 3.10 Örnek tablo
Şekil 3.10’da verilen örnek tabloyu yapınız.
İpucu: Bu tip tablo yapılarında en çok satır ve sütun sayısı temel alınarak tablo oluşturulursa işlem daha kolay olur. Bu örnekte 5 satır ve 4 sütun temel alarak tablo oluşturunuz.
Görsel 3.11 Örnek tablonun oluşturma aşama-1
32
Görsel 3.12 Örnek tablo oluşturma-2
Görsel 3.13 Örnek tablo oluşturma-3
Görsel 3.14 Örnek tablo oluşturma-4
3.2 Tablo Expanded Modu
Bir tablodaki tüm dolgu, hücre boşluğu ve kenarlıklar kaldırılırsa tabloları ve tek tek hücreleri seçmek zor olabilir. Yardımcı olmak için web tasarım editörü bir Expanded Table (Genişletilmiş tablo) modu sunar. Insert panelindeki Layout kategorisindeki Expanded düğmesini tıklatmak her tablo ve hücreye görünür kenarlıklar ekler ve ekrandaki hücre dolgusunu artırır. (View → Table Modu → Expanded Table aynı şeyi yapar.) Expanded Table modu hiçbir zaman gerçek sayfa kodunu değiştirmez. Yalnızca sayfanın tasarım görünümünde nasıl göründüğünü etkiler. Kılavuz kenarlıkları ve fazladan boşluk web tarayıcılarında görünmez.
33
Verileri görüntülemek için yalnızca tablo kullanılıyorsa muhtemelen Genişletilmiş Tablo moduna ihtiyaç duyulmaz ancak karmaşık tablo düzenleriyle oluşturulmuş eski web sayfaları düzenlenmek zorunda kalınırsa Expanded Table çok yardımcı olur.
Görsel 3.15 Expanded Table moduna geçiş
Görsel 3.16 Sol tarafta tablo kenar ve dolguları kaldırılmış tablonun sağ tarafta Expanded Table modunda görünüşü
34
ÖLÇME VE DEĞERLENDİRME
Aşağıdaki cümlelerin başında boş bırakılan parantezlere cümlelerde verilen bilgiler doğru ise D, yanlış ise Y yazınız.
1. ( ) Tablolar bir satır ve bir sütundan oluşur.
2. ( ) Satır ve sütunların kesiştiği noktaya hücre denir.
3. ( ) Tablo içinde birbirinden farklı yerlerdeki hücreleri seçmek mümkün değildir.
4. ( ) Tablo içinde birleştirdiğimiz hücreleri bir daha bölemeyiz.
5. ( ) Tablo içinde birbirinden farklı yerde olan hücreleri seçmek için Ctrl tuşuna basılı tutmalıyız.
6. ( ) Expanded görünüm modunda tablolar genişletilmiş hâlde görünecektir
7. ( ) Insert menüsündeki Table Objects seçeneğinin altında bulunan özeliklerle satır/sütunekleyebiliriz.
8. ( ) Tuşu ile tabloda seçili hücreleri birleştirebiliriz.
9. ( ) Insert tuşu ile tablonun alt kısmına yeni bir satır ekleyebiliriz.
10. ( ) Cell Spacing: Hücrelerin birbirinden ve tablo kenarlığından uzaklığı belirlenir.
DEĞERLENDİRME
Cevaplarınızı cevap anahtarıyla karşılaştırınız. Yanlış cevap verdiğiniz ya da cevap verirken tereddüt ettiğiniz sorularla ilgili konuları faaliyete geri dönerek tekrarlayınız.
Cevaplarınızın tümü doğru ise öğrenme faaliyetine geçiniz.
ÖLÇME VE DEĞERLENDİRME
35
ÖĞRENME FAALİYETİ–4 ÖĞRENME KAZANIMI
İş sağlığı ve güvenliği tedbirlerini alarak web sayfası tasarım editörü yardımıyla resimlerle çalışır.
ARAŞTIRMA
Web sayfalarında kullanılan resim türlerini ve bu resim türlerinin bir birlerinden farklılarını araştırınız.
Web tasarım editöründe kullanabileceğimiz resim düzenleme editörlerini araştırınız.
4. RESİM İŞLEMLERİ
Web tasarım editörü ile oluşturulan sayfalara resim eklenebilir ve bu resimler üzerinde istenen düzenlemeler yapılabilir.
4.1. Resimlerle Çalışmak
4.1.1. Arka Plan Resmi Kullanma
Arka plan resmi, hazırlanan sayfaya döşenen resimlerdir. Properties penceresinden Page Properties seçeneği tıklandığında ekrana gelen pencereden kategori sekmesinin altında bulunan görünüm sekmesinden sayfaya arka plan resmi eklenebilir.
Görsel 4.1 Page properties penceresi
ÖĞRENME FAALİYETİ–4
36
Page properties ekranında saya ayarlarını düzenlemek için Appearance (css) ve Appearance (htm) olmak üzere iki seçenek vardır. Web tasarım editörünü üreten firma ve uzmanlar işlemlerin appearance (css) kısmından yapılmasını önermektedir. Bu iki bölümün farkını şu şekildedir:
Appearance (css): Bu alanda sayfa üzerinde yapılan işlemler css koduna çevrilmektedir. Css etiketleri daha esnektir. Bu esneklik ile resimler üzerinde daha fazla özellik kullanılabilir fakat biraz daha karmaşıktır. Koda girmeden birçok şey tasarım ile yapılacağından bu karmaşıklık önemli değildir.
Appearance (html): Bu alanda sayfa üzerinde yapılan işlemler Html etiketleri hâline çevrilmektedirler. Resimler üzerinde kullanılacak özellikler sınırlıdır.
Daha kolaydır.
Biz sayfa özelliklerini tanımlarken Appearance (css) bölümünü kullanılacaktır.
Arka plan resmi seçeneğinin yan tarafında bulunan Browse seçeneği ile resim seçilebilir.
Görsel 4.2 Select image source penceresi
Browse seçeneği seçildiğinde Select Image Source penceresi ekrana gelecektir. Bu pencerenin özellikleri şöyledir:
Daha önce site tanımlaması yapıldıysa image source penceresi site tanımlamasında kullanılacak klasör üzerinde açılır. Bu klasör daha önce bahsedildiği gibi sahip olunan sanal hosting gibi düşünülebilir. Şu an klasör içerisinde herhangi bir resim ya da klasör bulunmamaktadır. Hazırladığımız web sitesinin daha düzenli olması için resimler, videolar,
37
dökümanlar site sayfalarından ayrı olarak sistematik bir şekilde ayrılırsa site büyüdüğünde karmaşıklığın önüne geçilmiş olunur. İmages adlı bir klasör oluşturulur.
Görsel 4.3 Select image source penceresi klasör oluşturulması
Daha sonra web sitesine eklenecek resim seçilir. Burada eklenecek resim masaüstünden seçilecektir.
Görsel 4.4 Select image source penceresi klasör oluşturulması
Image preview bölümünde seçilen resmin ön izlemesini görülebilir. Resim seçildikten sonra OK tuşuna basıldığında, aşağıdaki uyarı ekranı gelecektir.
38
Görsel 4.5 Seçilen resmin site klasörüne taşınması uyarı ekranı
Buradaki İngilizce uyarının açılımı şu şekildedir. “seçilen dosya sitenin kök klasörünün (buradaki kök klasörü benimsitem dir) dışında ve bu site yayınlandığı zaman (sitenin internet üzerinden yayınlanması anlamında) bu dosyaya erişemeyebilirsiniz. “Benimsitem”
klasörüne bu dosyanın bir kopyasının oluşturulmasını ister misiniz.” Burada Evet seçeneği seçildiğinde kopyanın kök klasör çerisinde nereye taşınacağı belirlenir. Burada resim benimsitem/images klasörüne taşınır.
Daha sonra OK tuşu ile resim seçilir. Seçilen resmin yolu Background image alanına gelir. Buradan yine Ok tuşu ile bu işlemin sayfaya uygulanması sağlanır.
Görsel 4.6 Seçilen arka plan resminin yolu
39
Görsel 4.7 Seçilen resmin arka plan olarak sayfamıza uygulanması
4.1.2. Sayfaya Resim Ekleme
Resim eklemek için öncelikle imleç, resmi eklenecek yerde olmalıdır. Daha sonra Common sekmesi içerisindeki image düğmesi tıklanarak açılan listeden Image seçeneği seçilmelidir.
Görsel 4.8 Sayfaya resim ekleme yolu
40
Açılan pencereden arka plan resmi ekleme aşamalarındaki gibi resim ekleme işlemi yapılır.
Görsel 4.9 Sayfaya resim eklenmiş hâli
4.1.3. Asset Panelinden Sayfaya Resim Ekleme
Assets paneli, birçok site bileşeninin web tasarım editörü içinden düzenlenmesini sağlamaktadır. Böylelikle sitenin kontrolü kolaylaşmaktadır.
Assets yardımıyla site içinde bulunan resim, renk, köprü, komut dosyaları, filmler, animasyon, şablonlar gibi birçok nesne kontrol edilebilir.
Assests paneli Files panel grubu içinde yer almaktadır. Bu panel yardımıyla resimlerin takibi, ön izlemesi ve site içine eklenmesi gerçekleştirilir.
41
Görsel 4.10 Assests paneli
Assets paneli yardımıyla ulaşılan resimler seçilip Insert düğmesine tıklanarak resimler sayfanın içine aktarılabilir.
4.1.4. Görüntü Yer Tutucu (Image Placeholder) Ekleme
Web tasarım editörü ile site oluşturulurken sayfalara ekleyecek resimler hazır olmayabilir. Bu durumda resimlerin yerine görüntü yer tutucu (image placeholder) eklenebilir.
Image Placeholder eklemek için web sayfası tasarımında resim ya da başka bir görsel nesnenin gelmesi istenen yere imleç getirildikten sonra Common menü grubu içindeki Images açılır listesinde bulunan Image Placeholder seçeneği seçilir.
Görsel 4.11 Image Place Holder ekleme paneli
42
Insert →Image Objects → Image Placeholder menü yolu ile de aynı ekleme işlemini yapılabilir.
Açılan Görüntü Yer Tutucu penceresinde yer tutucuya değerleri girildikten sonra Ok düğmesine tıklanır.
Name: Buraya Hatırlatıcı bir isim girilir. Örneğin Okulun Logosu gelecek.
Burada boşluk ve Türkçe karakter kullanılmaz.
Width: Burada girdiğimiz pixel değerlerine göre resim tutucunun büyüklüğü belirlenir. Bu büyüklük oraya eklemeyi düşünülen resim ile uyuşmalıdır. Yoksa ileride tasarım sorunları yaşanabilir.
Color: Aynı sayfada birden fazla yer tutucu kullanıyor ise farklı renkler verilerek akılda kalıcı bir yapı oluşturulabilir.
Alternate Text: Yine buraya daha sonra hatırlanması için resim yer tutucusu hakkında kısa bilgi girilebilir.
Görsel 4.12 Image Place Holder penceresi
Görsel 4.13 Image Place Holder eklenmesi
4.1.5. Rollover Image Ekleme
Rollover Image, web tasarım editör programında yapılan ve hazırlanan web sitesinde mouse ile resmin üzerine gelindiğinde başka bir resmin çıkması için yapılan bir işlemdir.
43
Rollover Image eklemek için Common menü grubu içindeki Images açılır listesinde bulunan Rollever Image seçeneği seçilir.
Görsel 4.14 Rollover Image ekleme yolu
Aynı işlem Insert →Image Objects →Rollover Image menü yolu ile de yapılabilir.
Menüye girildiğinde aşağıdaki Rollover Image penceresi gelecektir. Yapılacak örnekte açık ve kapalı bir kapı örneği kullanılacaktır. Normalde Kapalı kap Mouse üzerine gelince açılan kapı resminin gelmesi.
Görsel 4.15 Rollover Image penceresi
Image Name: Buraya resmin ismi yazılır.
Original image: Orjinal resim “Browse”den seçilir.
Rollever image: Üzerine gelince olması gereken resim “Browse”den seçilir.
Go to URL: Resmin üzerine tıklanınca gitmesi istenen adresi yazılır.
Görsel 4.16 Rollover Image uygulama örneği
44
4.1.6. Resim Düzenleme İşlemleri
Web tasarım editörü ile düzenlenen sayfalarda bulunan resimler harici bir resim düzenleme programı ile yapılabilir.
Bu işlem için Edit → Preferences → File Types/Editors menü yolu ile gelen ekrandan Sağ taraftaki Editors kısmından resimler hangi resim düzenleme araçları ile düzenlemek isteniyorsa seçilebilir. Üst kısımdaki + düğmesi ile farklı resim düzenleme programı da eklenebilir.
Görsel 4.17 Resim düzenlemek için editör seçimi
45
ÖLÇME VE DEĞERLENDİRME
Aşağıdaki cümlelerin başında boş bırakılan parantezlere cümlelerde verilen bilgiler doğru ise D, yanlış ise Y yazınız.
1. ( ) Sayfamıza hem arka plan rengi hem de arka plan resmi eklediğimizde sayfa yüklenirken öncelikle arka plan resmi gelecektir.
2. ( ) Assets paneli birçok site bileşeninin web tasarım editörü içinden düzenlenmesini sağlamaktadır.
3. ( ) Sayfamıza görüntü yer tutucu ile resim ekleme işlemini gerçekleştirebiliriz.
4. ( ) Sayfamızda bulunan resmi harici bir resim düzenleme editöründe düzenleyemeyiz.
5. ( ) Rollover Image eklemek için Common menü grubu içindeki Images açılır listesinde bulunan Rollever Image seçeneği seçilir.
6. ( ) Expanded görünüm modunda tablolar genişletilmiş hâlde görünecektir.
7. ( ) Insert menüsündeki Table Objects seçeneğinin altında bulunan özeliklerle satır/sütun ekleyebiliriz.
8. ( ) Assets paneli birçok site bileşeninin web tasarım editörü içinden düzenlenmesini sağlamaktadır.
9. Insert menüsündeki Table Objects seçeneğinin altında bulunan özeliklerle satır/sütun ekleyebiliriz.
ÖLÇME VE DEĞERLENDİRME
46
ÖĞRENME FAALİYETİ–5 ÖĞRENME KAZANIMI
İş sağlığı ve güvenliği tedbirlerini alarak web sayfası tasarım editörü yardımıyla flash nesneleri ve çoklu ortam nesnelerini ekler.
ARAŞTIRMA
Web Sayfasına ekleyebileceğiniz çoklu ortam bileşenlerini araştırınız.
5. ÇOKLU ORTAMBİLEŞENLERİ
Web tasarım editörü ile hazırlanan sayfaya film, animasyon, uygulama, ses dosyaları ve ActiveX komutları eklenebilir.
5.1 Animasyon Ekleme
5.1.1. Flash Animasyon Ekleme
Flash nesneleri Flash ya da benzer bir programla hazırlanır. Swf uzantılı dosyalar olarak web sitelerimizin içinde yer alırlar. Flash animasyonları web sayfasında görebilmek için Flash Player'in yüklü olması gerekmektedir. Flash animasyon ekleme işlemine web tasarım editöründe Insert → Media → SWF menü yolu ile ulaşılabileceği gibi Insert panelindeki araç çubuğu ile de ulaşılabilir.
Görsel 5.1 Flash animasyon ekleme
Ekrana gelecek SWF penceresi ile eklenecek olan animasyon dosyası seçilir ve Ok düğmesine tıklanır. Bu işlem sayesinde animasyon dosyası sayfanın içine aktarılmış olur.
ÖĞRENME FAALİYETİ–5
47
Eklenen animasyona ait boyut, renk gibi düzenlemeler Properties alanından yapılabilir.
Eklenen animasyonu oynatmak için de yine Properties panelinde bulunan Play düğmesi tıklanmalıdır.
Görsel 5.2 Flash animasyon düzenleme
Chrome gibi popüler tarayıcılar son versiyonlarında swf animasyon dosyalarına direkt destek vermemektedir. Flash player eklentisinin ilgili browser web mağazasından indirilip kurulması gerekmektedir.
5.1.2. Flash Video Ekleme
Sayfalara flash videolar eklemek için Insert → Media → FLV menü yolu ile ulaşılabileceği gibi Insert panelindeki Common menü grubu içerisinde yer alan media açılır menüsünden de ulaşılabilir.
Gösrel 5.3 Flash Video Ekleme Yolu
Flv seçeneği seçildiğinde Flv video ekleme ekranı gelecektir.
48
Görsel 5.4 Flash video ekleme ayar penceresi
Video Type: Video akışının nasıl olacağı seçilir.
URL: Yüklenecek olan videonun yolu belirtilir.
Skin: Video oynatıcının görünümü belirlenir.
Genişlik: FLV dosyasının piksel cinsinden genişliği ayarlanır. Dosyanın gerçek boyutu kullanılmak isteniyorsa boyutu algıla seçeneği seçilmelidir.
Height: FLV dosyasının piksel cinsinden yüksekliği ayarlanır. Dosyanın gerçek boyutu kullanılmak isteniyorsa boyutu algıla seçeneği seçilmelidir.
Constrain: FLV dosyasının genişliği ve yüksekliği arasındaki oranı korur.
Auto Play: Web sayfası açıldığında videonun otomatik oynatılıp oynatılmayacağı seçilir.
Auto rewind: Videonun oynatılması tamamlandığında otomatik geri sarar.
5.1.3. Ses Oynatıcısı Ekleme
Web tasarım editöründe sayfaya ses dosyaları eklenebilir. .wav, .midi ve .mp3 olmak üzere çeşitli ses dosyası türleri desteklenmektedir. Bunun için Common menü grubu içindeki Media açılır menüsünün altında bulunan Plugin düğmesine tıklamak yeterlidir.
49
Görsel 5.5 Flash video ekleme ayar penceresi
Ekrana “Select File” (Dosya seç) penceresi gelecektir. Burada eklenmek istenen ses dosyası seçilerek Ok düğmesine basıldığında ses dosyası sayfaya eklenmiş olacaktır.
5.1.4. Param Eklemek
Shockwave ve SWF dosyalarını, ActiveX denetimlerini ve Java uygulamalarını denetlemek için özel parametreler tanımlanabilir. Parametreler farklı nesne türlerine ait özel nitelikleri ayarlar. Object, embed ve applet etiketleriyle kullanılır.
Parametre eklemek için sayfada parametreler içerebilecek nesne (Shockwave filmi, ActiveX denetim) seçilir. Daha sonra Ortak menü grubu içinde yer alan Ortam açılır menüsünden Param seçeneği seçilir.
50
DEĞERLER ETKİNLİĞİ
İnternet bağımlılığı konusunda sekiz kriterden beşini yaşayanların internet bağımlısı olarak tanımlanmaktadır. Aşağıdaki maddeleri okuyarak internet konusundaki durumunuzu tespit ediniz. İnternette uzun süre vakit geçirmenin sorumluluklarımızı aksatması konusunda düşüncelerinizi arkadaşlarınızla paylaşınız.
1. Zihnin sürekli olarak internette olup bitene takılı kalması. Günlük aktiviteleri ve sorumlulukları aksatacak şekilde internet ile ilgili aşırı zihinsel uğraşı olması ve dikkati başka yere vermekte zorlanma.
2. İnternette kalma süresinin giderek artması ile daha fazla oranda internet kullanma ihtiyacı duyma.
3. İnternet kullanımını kontrol etme, azaltma ya da tamamen bırakmaya yönelik başarısız girişimlerin olması.
4. İnternet kullanımının azaltılması ya da tamamen bırakılması durumunda huzursuzluk, moral bozukluğu ya da sinirlilik, dikkat dağınıklığı, motivasyon düşüklüğü, isteksizlik, titreme, terleme gibi duygu durum değişikliği yaşama.
5. “Birkaç şeye bakacağım, 1 saati geçmez.” gibi düşünceler ile başlayıp internette kalma süresinin başlangıçta planlanandan daha uzun sürmesi.
6. Aşırı internet kullanımı nedeniyle aile, okul, iş ve arkadaş çevresiyle sorunlar yaşama.
İlişkilerin bozulması, sosyal hayattan uzaklaşma.
7. “Daha 1 saat bile olmadı, yeni başladım” gibi internette kalma süresi konusunda çevresindekilere yalan söyleme.
8. Aile, okul, ikili ilişkiler, maddi sorunlar, sorumluluklar gibi alanlarda yaşanan sıkıntılardan, problemlerden, olumsuz duygulardan uzaklaşmak için internette vakit geçirme.
DEĞERLER ETKİNLİĞİ
51
ÖLÇME VE DEĞERLENDİRME
Aşağıdaki cümlelerin başında boş bırakılan parantezlere cümlelerde verilen bilgiler doğru ise D, yanlış ise Y yazınız.
1. ( ) Shocwave’in uzantısı “.swf” dir.
2. ( ) Activex internette kullanılan bir video oynatıcısıdır.
3. ( ) Sayfamızda bulunan resmi harici bir resim düzenleme editöründe düzenleyemeyiz.
4. ( ) Web sayfasına ses dosyası eklemek için Common menü grubu içindeki Media açılır menüsünün altında bulunan Plugin düğmesine tıklarız.
5. ( ) Flash video dosyalarının uzantısı Jpg dir.
ÖLÇME VE DEĞERLENDİRME
52
ÖĞRENME FAALİYETİ–6 ÖĞRENME KAZANIMI
İş sağlığı ve güvenliği tedbirlerini alarak web sayfası tasarım editörü yardımıyla web sayfası içine yerleştirilen ögeler üzerinde bağlantılar oluşturur.
ARAŞTIRMA
Web sitesinde site haritasının ne olduğunu araştırınız.
6. LİNK (BAĞLANTI) İŞLEMLERİ
Bağlantılar sayesinde hazırlanan birçok sayfa birbirleriyle ilişkili hâle getirilebilir. Bir tıklama ile istenilen yere gidilebilir. Bu sayede tasarlamış olan sayfalar arasında ve sayfa içinde istendiği gibi dolaşılabilir. Link işlemleri 4 farklı kategoride toplanabilir.
Site içerisindeki farklı sayfalara link verme
Web sayfası içerisindeki farklı alanlara link verme
Site dışına link verme
E-mail adreslerine link verme
6.1 Metinlere Bağlantı Ekleme
Köprü oluşturmak için ilgili metin veya nesneyi fare ile seçtikten sonra Properties penceresindeki Link alanına adres girişi yapılması gerekir.
Görsel 6.1 Metne link verme
Link verilecek sayfanın ismi ve uzantısı buraya yazıldıktan sonra enter tuşu ile link verilmiş olur.
Hazırlanan web sitesi çok fazla sayfadan oluşuyor ve link verilecek sayfanın ismi hatırlanmıyor ise farklı yollarla da link verme işlemi yapılabilir.
1.Yol: Daha önceki konularda site tanımlama işlemini anlatılmıştı. Tanımlaması yapılan bir web sitesi tasarımında link verme işlemi oldukça kolaylaşmaktadır. Sağ tarafta
ÖĞRENME FAALİYETİ–6
53
bulunan panellerden files paneli web sitesinin tüm dosya yapısı tutulmaktadır. Buradan link vermek istenen sayfa link alanının üzerine getirilerek otomatik şekilde link verme işlemi yapılmış olur.
Görsel 6.2 Metne link verme yöntem-1
2.Yol: Link vermek için diğer bir yöntem de properties panelindeki Point-to-File aracı ile link verme işlemidir. Bunun için Point-to-File aracının üzerinde Mouse sol tuşuna basılı tutarak hareket ettirildiğinde Mouse imlecinin olduğu yere kadar bir ok işareti çıkar. Bu ok işaretini istenen dosyanın üzerine götürülüp bırakıldığında link verme işlemi otomatik gerçekleşmiş olur.
Görsel 6.3 Metne link verme yöntem-2
NOT: Eğer site dışında başka bir siteye link verilmek isteniyorsa yine Link alanına sitenin tam adresi yazılmalıdır. Örneğin, http://www.meb.gov.tr
6.2. Bağlantı Özelliklerini Düzenleme
Sayfadaki bağlara ait yazı tipi, renk ve stil düzenlemeleri Page Properties penceresinde bulunan Link (CSS) alanından yapılabilir.
Burada yapılan düzenlemeler sayfadaki tüm linkleri etkiler. Farklı linklere farklı özelikler vermek isteniyorsa ileriki konularda görülecek CSS kullanılarak özellik verilmelidir.
54
Görsel 6.4 Link(bağlantı) özelliklerini ayarlama penceresi
Link Font: Bağlantı verilen Text’lerin (metin) Font tipinin ayarlandığı bölümdür. Eğer burada farklı font vermek istenmiyorsa bu alan ve size alanı boş geçilebilir.
Link Color: Sayfa ilk yüklendiğinde ve verilen link henüz kullanıcı tarafından tıklanmadığında bağlantıların göründüğü renk.
Rollover Links: Kullanıcı imleci linkin üzerine getirdiğinde linkin alacağı renk.
Active Links: Kullanıcı linke tıkladığı anda linkin alacağı renk. Bu kısım genelde rollover link ile aynı renkte seçilir.
Underline Style: Varsayılan olarak, bir web tarayıcısında görüntülenen bağlantıların altı çizilidir. Çoğu tasarımcı, Never Underline’yi (Asla Altını Çizme) seçerek bağlantılı metin altında otomatik olarak görünen alt çizgiyi kaldırmayı tercih eder. Ziyaretçilere alt çizginin görsel ipucu verilebilir. Show underline only rollover (Linkin üzerine gelince altını çiz) en çok tercih edilen link verme şeklidir.
6.3. Bağlantı Adreslerinin Açılış Şekilleri
Web tasarım editörü ile oluşturulan sayfalardaki bağlar ile açılacak olan sayfanın
açılış şekli Properties penceresinde bulunan Target alanından belirlenebilir.
55
Görsel 6.5 Link (bağlantı) açılış tipleri
_blank: Bağlı sayfayı, yeni bir pencerede açar.
_parent: Bağlı sayfayı, köprünün bulunduğu sayfada açar.
_self: Bağlı sayfayı, köprünün bulunduğu çerçevede açar.
_top: Bağlı belgeyi tam büyüklükte bir pencerede açar
6.4. Resimlere Bağlantı verme
Sayfaya eklenen resimlere link verilebilir. Bunun için ilgili resim seçilip Properties penceresinde bulunan link alanında daha önce öğrenilmiş olunan link verme yöntemlerinden biri kullanılarak bağlantı verilebilir.
6.5. Etkin Resim Noktaları Oluşturma
Sayfada bulunan resimlere köprüler oluşturulabildiği gibi resimlerin üzerindeki belirli alanlara da köprüler atanabilir. Bu işlemi yapmak için resim üzerinde etkin resim noktaları oluşturmak gerekmektedir. Etkin resim noktaları dikdörtgen, daire ya da çokgen şeklinde oluşturulabilir.
Etkin resim noktası oluşturmak için ilgili resim seçildikten sonra Özellikler penceresinde bulunan daire, dikdörtgen ve serbest çizim araçlarından ( ) biri seçilerek resim üzerinde link verilecek alan çizilip bu alana link verilebilir.
Aşağıdaki örnekte harita üzerinde bir şehre link verilecektir. Önce Serbest çizim aracı seçilip Mouse tuşuna basılarak link verilecek noktalar bırakılır. Kapalı bir alan oluşturulur.
Eğer “Please describe the image map in the “alt” filed……” gibi bir uyarı mesajı gelir ise burada kast edilen şudur: Çizeceğiniz resmin ne olduğu ile ilgili alt başlıklı alana tanımlayıcı bir başlık giriniz. Alt kısma Elazığ yazıldıktan sonra çizime devam edilir.
56
Görsel 6.6 Örnek etkin noktası oluşturma
Eğer resim üzerinde birden fazla etkin nokta oluşturulduysa hotspot tool seçim aracı ile etkin noktalarını seçilebilir. Seçilen etkin noktanın bilgileri Properties panelinde görünür.
Görsel 6.7 Etkin resim noktası seçimi
57
6.6. Named Anchor (Çapa) Ekleme
Web tasarım editöründe hazırlamış olunan sayfa içerisinde farklı başlıklardan oluşan uzunca bir metin varsa ve tıklandığında ilgili bölüme gitmesi isteniyorsa bunun için named anchor (çapa) kullanılır.
Named Anchor’a insert → named anchor menü yolundan ya da insert panelinde yer alan common sekmesindeki çapa işaretine tıklanarak ulaşılabilir.
Görsel 6.8 Named Ancor (Çapa) ekleme
Çapa işlevinin daha iyi anlaşılabilmesi için sayfanın uzun olması gerekmektedir. Bunun için sayfanın en üst kısmına “Sayfa Başı” diye yazılır. Daha sonra yazının baş kısmına gelip çapa işaretine tıklandığında bu alana bir etiket verilmesini isteyen bir pencere gelecektir.
Buraya belirleyici bir etiket verilir. Boşluk ve Türkçe karakter vermekten sakınılır.
Görsel 6.9 Örnek Named Ancor (çapa) ekleme
Daha sonra sayfada kaydırma çubuğu görünene kadar enter tuşu ile imleç aşağı indirilir.
Bu kısma da “Sayfa Başına Git” yazılır. Yazılan yazı seçilip Link bölümüne daha önce verilen etiketin ismi yazılıp enter tuşu ile onaylanır. Burada dikkat edilmesi gereken kısım ismin başına # işareti getirilmesidir.
Görsel 6.10 Named Ancor (çapa) link verme
