WTK204U-WEB YAYINCILIĞI ARAÇLARI
Ünite 5: Lisanslı Web Yayıncılık Araçları
Giriş
Yaşadığımız bilgi toplumunda bilginin paylaşımında dijitalleşmenin önemli katkısı bulunmaktadır. Her geçen gün internet teknolojisinde yaşanan gelişmeler ile internet erişimindeki kolaylık ve hızında yaşanan artış, bilgi toplumunun bireylerini biraz daha dijital dünyanın içine almaktadır. Artık dijital dünyayla ilgili bir işlem dijital dünyada sunulan olanaklardan yararlanarak yine dijital dünyadaki bilgiyle gerçekleştirebilmektedir.
Özellikle web yayıncılığı açısından konu ele alındığında; 1990’ların başında geliştirilen hipermetin işaretleme dili (Hyper Text Markup Language-HTML) ve bu dille oluşturulmuş sayfaların görüntülenebildiği web tarayıcılarıyla birlikte web, bilginin üretildiği ve paylaşıldığı ana mecralardan biri konumuna gelmiştir. Geliştirilen HTML dili sayesinde birbirleriyle iletişim kurabilen bilgisayarlar kullandıkları işletim sistemlerinden bağımsız olarak içerik üretilmesinin ve diğer kullanıcıların bu içerikleri görüntüleyebilmesinin önü açılmıştır. Daha sonraki yıllarda gelişen web teknolojileri ve araçları sayesinde web içeriği üretim sürecinde farklı alternatifler ve yollar geliştirilmiştir.
Bu ünitede, web yayıncılığında kullanılan lisanslı yazılımlardan Adobe Dreamweaver CC ve Microsoft Expression Web 4 yazılımları incelenecektir. Öncelikle her iki yazılımın edinimiyle ilgili bilgiler verildikten sonra yazılımların arayüzleri tanıtılacaktır.
Adobe Dreamweaver CC
Adobe Dremweaver yazılımı masaüstü, dizüstü, tablet, akıllı telefon gibi farklı platformlara yönelik web içerikleri oluşturmak ve düzenlemek amacıyla geliştirilen oldukça güçlü özelliklere sahip görsel bir tasarım editörüdür.
Adobe Dreamweaver yazılımı ile hem HTML kodları ile hem de HTML kodlarını kullanmadan sadece görsel araçlar yardımıyla web içerikleri oluşturulabilmektedir. Bir başka ifadeyle, Adobe Dreamweaver yazılımı ile web sayfasını oluşturan HTML kodlarını yazmak yerine görsel nesneleri sayfaya ekleyerek web sayfaları oluşturulabilmektedir. Yazılım, eklenen ve özelliği ayarlanan her görsel nesneye ait HTML kodunu otomatik olarak kendisi oluşturur. Bu yönüyle Adobe Dreamweaver yazılımı web sayfasının tasarım sürecini kullanıcıya bırakırken HTML kodlarının oluşturulması sürecini kendisi üstlenmektedir. Böylelikle kullanıcılar bir metin editöründe çalışıyor gibi web sayfalarını görsel olarak tasarlayabilir.
Adobe Dreamweaver CC Yazılımın Edinimi ve Arayüzü
Adobe Dreamweaver CC yazılımı lisanslı bir yazılım olduğu için kullanıcıların ürünü satın alarak ya da kısıtlı süreli deneme sürümünü kullanması gerekir. Yazılım için farklı özelliklerde ve farklı kullanım amaçları için oluşturulmuş çeşitli planlar ve fiyatlar bulunmaktadır. Kullanıcılar kendilerine sunulan planlardan uygun olanı en kolay bir biçimde Adobe hesabı ile Adobe Mağazası üzerinden satın alabilir. İsteyen kullanıcılar Adobe
Dreamweaver CC yazılımını Adobe resmi bayileri veya telefonla satış platformu üzerinden de edinerek lisanslama işlemlerini yapabilir.
Adobe Dreamweaver CC yazılımını bilgisayara yükleyebilmek için kullanıcıların Creative Cloud Desktop uygulamasını yükledikten sonra uygulama içerisinden Dreamweaver uygulamasını bulması ve bunu satın alması gerekir. Satın alma işlemi tamamlandıktan sonra Dreamweaver uygulaması bilgisayara yüklenir. Kullanıcılar yazılımı bilgisayarlarına yükledikten sonra yazılımı çalıştırdığında karşılarına bir açılış ekranı gelmektedir. Bu ekranda kullanıcılar, daha önceden oluşturulmuş bir HTML, CSS, XML gibi belgeleri açabilir, farklı web teknolojileri için farklı türdeki (HTML, CSS, JavaScript, PHP; XML vb.) yeni belgeler oluşturabilir ya da yardım seçeneğini kullanarak Adobe firması tarafından oluşturulan çevrimiçi destek sayfasına ulaşabilir. Özellikle yazılım üzerinden oluşturulan veya üzerinde çalışılan son çalışmaların listesi bu ekranda görünür. Böylelikle kullanıcılar çalıştıkları belgeye kaldıkları yerden devam etmek için çalışmalar listesinden çalışmak istedikleri belgeyi seçebilmektedir. Ayrıca yazılım tarafından sunulan şablonlar arasından istenilen bir şablon seçilerek tasarım sürecine sunulan şablonlar üzerinden devam edilebilir.
Adobe Dreamweaver CC yazılımının arayüzünün üst kısmında menüler, çalışma alanı yerleşim seçenekleri (Standart, Geliştirici) ile pencere araçları (simge durumu, önceki boyut/ekranı kapla ve kapat) bulunur. Dreamweaver yazılımında yapılacak işlemlere göre kategorize edilmiş dokuz adet menü bulunur ve menüler yardımıyla yazılımdaki tüm işlemler gerçekleştirilir.
Arayüz ekranının üst kısmındaki çalışma alanı mizanpaj seçenekleri ise Dreamweaver yazılımında kullanılan panellerin yerleşimine göre oluşturulmuş çalışma alanlarının gösterildiği seçeneklerdir. Dreamweaver yazılımı varsayılan olarak “Standart” çalışma alanı mizanpaj seçeneğine göre açılır. Bu çalışma alanı mizanpaj seçeneğinden başka “Geliştirici” olarak tanımlanan ve farklı panellerle oluşturulmuş çalışma alanı mizanpaj seçeneği de bulunmaktadır. Çalışma alanı mizanpaj seçeneklerinden hangisi seçilirse tanımlı olan paneller arayüz ekranının farklı yerlerinde görüntülenir.
Arayüz ekranının üst kısmındaki menülerin altındaki “Belge” araç çubuğu üzerinde üç adet yerleşim seçeneği bulunur. Bunlar; “Kod”, “Böl” ve seçilen duruma göre “Canlı” veya “Tasarım” yerleşim seçeneğidir. Bu yerleşim seçenekleri kullanıcıların web tasarımı sürecinde tercih ettikleri tasarım seçenekleridir.
Arayüz ekranının sol kısmında “Ortak” araç çubuğu görüntülenir. Bu araç çubuğu ile belgeler arası geçiş ve dosya yönetim işlemleri yapılmaktadır. Bu alanın yan tarafında ise tasarım işlemlerinin gerçekleştirildiği belge penceresi bulunur. Belge penceresi, web tasarımı için açılan tüm sayfaların görüntülendiği penceredir. Kullanıcılar web
tasarımı sürecinde açtıkları tüm belgeleri bu pencere altında görüntüler.
Arayüz ekranın sağ tarafında ise tasarım sürecinde yararlanılan paneller görüntülenir. Dreamweaver yazılımında tüm işlemler menüler altındaki seçenekler yardımıyla yapılabileceği gibi açılır kapanır paneller ve araç çubuklarında yer alan seçenekler yardımıyla da yapılabilir. Bu nedenle farklı işlemler için tasarlanmış birçok panel bulunur.
Adobe Dreamweaver CC ile Web Tasarımı
Web tasarımı sürecine başlamadan önce web sayfalarının, web ağına bağlı bilgisayarların web tarayıcıları tarafından görüntülenen hipermetin belgeleri olduğu unutulmamalıdır. Bu nedenle bir web sitesi oluşturularak web ağında yayınlanabilmesi üç unsurun bir araya getirilmesi gerekir. Bunlar; web sitesine ait domain (alan adı) alınması, web sitesine ait tüm dosyaların oluşturulması ve oluşturulan tüm dosyaların hosting (kiralama) hizmeti alınan bir web sunucusu üzerine aktarılmasıdır. Bu işlemler tamamlandıktan sonra tasarımı yapılan web sitesi web ağı içerisinde görüntülenebilir. Bu nedenle oluşturulacak web sitesinin adresinin bir başka ifadeyle alan adının alınması ve web sunucusu kiralama işleminin tamamlanması web tasarım süreciyle birlikte yapılması önerilir. Domain ve hosting hizmeti alındıktan sonra sıra web sitesinin tasarımına gelmektedir.
Web tasarımı sürecinde öncelikle sürecin problemsiz tamamlanması için tasarım planlarının oluşturulması gerekir. Tasarlanacak web sitesinin kime hitap edeceği, bu siteye neden gereksinim duyulduğu, site için ne tür içeriklerin (metin, ses, resim, video, animasyon vb.) olması gerektiği, site içerisindeki belgelerin birbirleriyle bağlantısını gösteren site ağaç yapısının nasıl olacağı, ne tür stil yapısının kullanılacağı, site klasör yapısının nasıl olacağı, web sayfalarının taslak çizimleri gibi tasarım planları tasarım sürecine başlamadan hazırlanmalıdır. Bu işlemlerden sonra tasarım sürecine başlanarak tasarım planları doğrultusunda web sayfalarının geliştirilme aşamasına başlanmalıdır. Tasarım sürecinin ardından sitenin teknik açıdan, içerik açısından ve bağlantılar açısından test edilmesi gerekmektedir. Bu işlemler tamamlandıktan sonra web sitesini oluşturan tüm dosyalar kiralanan web sunucusuna aktarılarak web tasarım süreci tamamlanmalıdır.
Adobe Dreamweaver CC ile Örnek Uygulama
Kitabın 145. sayfasında yer alan şekil 5.12’de gösterildiği gibi kişisel bir web sitesi hazırlamak istediğimizi düşünelim. Bunun için öncelikle site yapılandırılmasının yapılması gerekir. “Site” menüsünden “Yeni site” seçeneği seçildikten sonra ekrana gelen penceredeki site adı kısmına “kisiselsayfa.com” yazılır ve yerel site klasörü olarak masaüstünde oluşturulan “WWW” isimli klasör seçilir. Böylelikle hazırlayacağımız web sitesine ait tüm dosyaların yazılımın yüklü olduğu bilgisayarın masaüstünde bulunan “WWW” klasörünün içerisine kaydedilmesi ve tasarım
sürecinde tanımlanan tüm URL’lerin doğru çalışması sağlanır.
Daha sonra hazırlayacağımız kişisel web sitesinin ana sayfası için bir HTML belgesi oluşturalım. Bunun için “Dosya” menüsünden “Yeni” seçeneğini seçerek yeni bir HTML belgesi oluşturalım. Oluşturulan belge üzerinde çalışmaya başlamadan önce site yapılandırması yaptığımız yerel site klasörüne oluşturulan belgeyi “index.html” ismiyle kaydedelim. Belge kaydedildikten sonra web tarayıcısında görüntülenecek belgenin adı için “Özellikler” panelinde bulunan “Belge Başlığı” seçeneğine “Kişisel web siteme hoşgeldiniz...” yazalım. Son olarak hazırlanacak sayfanın arka plan rengini ayarlamak için “Özellikler” panelinde bulunan “Sayfa Özellikleri” seçeneğine tıkladıktan sonra “Görünüm (HTML)” seçeneğindeki “Arka Plan” renk değerini #f2f2f2 yapalım. Ayrıca “Sol kenar boşluğu” ve “Üst kenar boşluğu” seçeneklerine 0 (sıfır) değerini girelim.
Kitabın 145. sayfasında yer alan şekil 5.12’de gösterildiği gibi tasarlanacak HTML belgesindeki sayfa içi ögelerin yerleşimi için bir tablo kullanalım. Sayfa tasarımı için üç satır ve dört sütundan oluşan bir tablo oluşturalım. Bunun için “Ekle” panelinden “Table” seçeneği seçildikten sonra ekrana gelen penceredeki “Satırlar” seçeneğine 3, “Sütunlar” seçeneğine 4 değerini yazalım, tablo genişliğini %100 yapalım ve kenarlık kalınlığına ve hücre boşluğuna 0 değerini yazalım. Tüm ayarlar bittikten sonra “Tamam” düğmesine basalım.
Tablo oluşturma işlemleri bittikten sonra veri girişini yapmak için tablonun ilgili hücrelerine kitabımızın 145. sayfasındaki şekil 5.12’de gösterilen metinleri yazalım. Belge içindeki tüm biçimlendirmeleri tek bir dosyada toplayarak belgeyle ilişkilendirmek için “CSS Tasarımcısı” panelindeki “Kaynaklar” seçeneğinden “Yeni Bir CSS Dosyası Oluştur” seçeneğini seçelim. Açılan “Stil Sayfası Dosyasını Farklı Kaydet” penceresinde görünen yerel site klasörü olan WWW içinde “CSS” isimli bir klasör oluşturarak bu klasörün içerisine “styles.css” isimli dosyayı oluşturalım. Artık oluşturduğumuz tüm stiller bu dosyanın içerisine kaydedilecektir. Sayfa içinde kullanılan metinler için istenilen sayıda CSS kuralı tanımlayalım.
CSS kuralları oluşturulduktan sonra her bir metni seçerek “Özellikler” panelinde bulunan “Sınıf” seçeneğini kullanalım ve tanımlanan CSS kuralını uygulayalım. Sıra bağlantıları oluşturmaya geldi. “Ana Sayfa” yazısına Anadolu Üniversitesi’nin ana sayfasına, “Özgeçmiş” yazısına yerel site klasöründeki “ozgecmis.html” sayfasına ve “İletişim” yazısına Anadolu Üniversitesi Açıköğretim Fakültesi’nin e-Posta adresine bağlantı oluşturalım. Bunun için “Ana Sayfa” metni işaretlendikten sonra “Özellikler” panelinde bulunan “Bağ” seçeneğine “https://www.anadolu.edu.tr”, “Özgeçmiş” metni işaretlendikten sonra “ozgecmis.html” ve “İletişim” metni işaretlendikten sonra “mailto:[email protected]” yazalım.
Son olarak sayfamıza Anadolu Üniversitesi’nin tanıtım videosunu ekleyelim. Videoyu yerel site klasöründen değil, video paylaşım platformu üzerinden ekleyelim. Bunun için oluşturulan tablonun ikinci satırında bulunan metinden sonra yeni bir paragraf oluşturarak “Ekle” panelinde yer alan “Eklenti” seçeneğini seçelim. Sayfaya eklenen eklentinin özelliklerini “Özellikler” paneli yardımıyla ayarlayalım. “Gen” değerini 400, “Yük” değerini 200 olarak ayarlayalım ve “Kaynak” bölümüne “https:// www.youtube.com/embed/FIK-Aerotf4” yazalım. Video ekleme işlemi bittikten sonra Dreamweaver arayüzünde bulunan durum çubuğu üzerindeki önizleme seçeneklerini kullanarak web tarayıcısında nasıl görüntülendiğini kontrol edelim.
Microsoft Expression Web 4
Microsoft Expression Web yazılımı farklı platformlara yönelik web içerikleri oluşturmak ve düzenlemek amacıyla geliştirilen çok dili bir başka tasarım editörüdür. Microsoft firmasının 1996 yılında Windows işletim sistemleri için HTML düzenleyicisi olarak sunduğu ve uzun yıllar Microsoft Office paketinin bir parçası olan Frontpage yazılımının sonraki sürümü olarak ele alınmaktadır.
İlk sürümü Mayıs 2006 yılında piyasaya sürülen Microsoft Expression Web yazılımı zengin dijital medya içeriklerinin oluşturulması amacıyla kullanılan lisanslı bir yazılımdır. 2012 yılı itibariyle Microsoft Visual Studio adlı platformun parçası olarak hizmet sunmaktadır. Yazılımın farklı sürümleri olmasına karşın 2022 yılı itibariyle bağımsız olarak yayınlanan en güncel sürümü 2010 yılında piyasaya sürülen Microsoft Expression Web 4 sürümüdür. Güncel sürümüyle farklı aygıtlar için PHP, HTML/XHTML, CSS, JavaScript, ASP. NET veya ASP.NET AJAX kullanan modern, standartlara dayalı web siteleri oluşturabilmektedir. Yazılımın Türkçe dil desteği bulunmamaktadır.
Microsoft Expression Web 4’ün Edinimi ve Arayüzü
2012 yılı itibarıyla Microsoft Visual Studio adlı platformun parçası olarak hizmet sunan ve yakın zamana kadar Microsoft firmasının resmi sitesinde ücretsiz olarak yayınlanan Microsoft Expression Web yazılımı artık bağımsız olarak yayınlanmamaktadır. O nedenle bu bölümde yazılımın bağımsız olarak yayınlanan son sürümünün kullanımı anlatılmaktadır.
Microsoft Expression Web 4 yazılımı bilgisayara yüklendikten sonra yazılım çalıştırıldığında ekrana kitabın 148. sayfasında şekil 5.13’te gösterildiği gibi bir arayüz gelmektedir. Microsoft Expression Web 4 arayüzünde kullanıcı tercihlerine göre özelleştirilebilen menüler, araç çubukları ve paneller bulunmaktadır. Microsoft Expression Web 4 yazılımının arayüz ekranının en üstünde yazılımdaki tüm işlemlerin gerçekleştirildiği 12 adet menü bulunur.
Menülerin hemen altında “Common” araç çubuğu görüntülenir ve bu araç çubuğu üzerinde yapılabilecek işlemlere ait çeşitli simgeler bulunur. “Common” araç çubuğu içerisinde dosya işlemleri için kullanılan araçların
yanında biçimlendirmeyle ilgili araçlar da bulunmaktadır. Araç çubuklarının altında ise varsayılan olarak açılan paneller ve belge penceresi görüntülenir. Belge penceresi, web tasarımı için açılan tüm sayfaların görüntülendiği penceredir. Kullanıcılar çalıştıkları tüm belgeleri bu pencere altında görmektedir.
Belge penceresinin alt kısmında ise, Dreamweaver yazılımında olduğu gibi üç adet yerleşim seçeneği bulunur. “Design” yerleşim seçeneği ile görsel nesnelerle web tasarımı yapılabilirken, “Code” yerleşim seçeneği ile HTML kodlarıyla web tasarımı yapılabilir. “Split” yerleşim seçeneği ise belge penceresinde tasarım ve kod yerleşim seçeneklerini bir arada gösterir. Kullanıcılar bunları kullanarak tercihlerine göre web tasarımında istedikleri yerleşim seçeneğine geçiş yapabilir. Belge penceresinin sağ ve sol tarafında açık olan paneller görüntülenir. Paneller, başlık kısmının sağ üst tarafında bulunan kapat sembolü tıklanarak kapatılabilir, başlığından tutup sürüklenerek arayüz ekranında hareket ettirilebilir ve istenirse arayüz ekranındaki tanımlı bölgelere sabitlenebilir.
Arayüz ekranının en altında ise durum çubuğu yer alır. Durum çubuğu üzerindeki seçenekler yardımıyla hata durumu, çalışılan belgeye ilişkin sürüm ve çözünürlük bilgileri görüntülenir.
Microsoft Expression Web 4 yazılımının arayüzünde varsayılan olarak “Designer” olarak tanımlanan çalışma alanı mizanpaj seçeneği görüntülenir. Bunların dışında arayüz ekranında farklı panellerin farklı yerlerde gösterildiği “Developer” ve “Reporting” olarak tanımlanan çalışma alanı mizanpaj seçenekleri de bulunmaktadır.
Microsoft Expression Web 4 ile Web Tasarımı
Expression Web yazılımı ile web sitesi oluşturma sürecinde öncelikle site yapılandırılmasının yapılması gerekir. Böylelikle oluşturulacak web sitesine ait yerel site klasörü tanımlanarak tasarım sürecinde üretilen tüm dosyaların ve kullanılan diğer dosyaların yerel site klasörüne kaydedilmesi sağlanır. Expression Web yazılımı ile site yapılandırılması menüler yardımıyla yapılabileceği gibi araç çubuklarındaki seçenekler yardımıyla da yapılabilir. En kolay biçimde “Site” menüsü altındaki “New Site” seçeneği seçildikten sonra ekrana gelen pencere kullanılarak site yapılandırılması yapılır. Kitabın 149. sayfasındaki şekil 5.14’te gösterildiği gibi bu pencerede yer alan seçenekler ile oluşturulacak web sitesinin adı ve oluşturulacak web sitesine ait yerel site klasörünün tanımlaması yapılır. Site yapılandırılması yapıldıktan sonra istenirse web sitesinin barındırılacağı sunucuya ait bilgiler girilerek uzak sunucu bağlantısı yapılabilir.
Expression Web yazılımında metinleri kullanmaya başlamadan önce ise yazılım üzerinden boş bir HTML belgesi oluşturulmalıdır. Bunun için “File” menüsünde “New” seçeneği ve bu seçeneğin alt seçeneği olan “Page” seçeneği seçildikten sonra belge türü (HTML, ASPX, ASP, PHP, CSS vb.) seçilerek “Ok” düğmesine basılır. Oluşturulan belgenin yerel site klasörüne kaydedilmesi için
“File” menüsünden “Save” seçeneğine tıklanır. Açılan pencereden dosyanın kaydedileceği yerel site klasöründeki konum, dosyanın adı ve uzantısı belirlenir. Ayrıca pencerenin altında bulunan “Page title” seçeneği ile oluşturulan web sayfasının tarayıcıdaki ismi “Özgeçmişim” olarak düzenlenir ve “Save” düğmesine basılır. Böylelikle web tasarımı için kullanılacak bir HTML belgesi oluşturulur.
Expression Web yazılımında metinler, metin editörlerinde olduğu gibi paragraflar ve satırlar halinde girilebilir. Klavyede bulunan tüm karakterler metin olarak kullanılabilir. Girilen metinlerin biçimlendirilmesinde HTML etiketlerinin özellikleri kullanılabileceği gibi CSS kuralları da kullanılabilir. Expression Web yazılımı Microsoft firmasının metin editöründe olduğu gibi biçimlendirme yapılmasına izin vermektedir. Metin biçimlendirme işlemine başlamadan önce hangi metin biçimlendirilecekse öncelikle o metin seçilmelidir. Daha sonra araç çubuklarında bulunan biçimlendirme seçenekleri yardımıyla veya “Format” menüsündeki “Font”, “Paragraph” ve “Bullets and Numbering” seçenekleriyle biçimlendirme işlemleri yapılır.
Microsoft Expression Web 4 ile Örnek Uygulama
Kitabın 158. sayfasında yer alan şekil 5.22’de gösterildiği gibi daha önceki örnek uygulamada oluşturulan kişisel web sitesinde kullanılacak özgeçmiş sayfasını yapalım. Bunun için “Site” menüsü altındaki “New Site” seçeneği seçildikten sonra ekrana gelen penceredeki “Name” kısmına “kisiselsafa.com” yazalım ve “Location” kısmına yerel site klasörü olarak masaüstünde oluşturulan “WWW” isimli klasörü seçelim. Tüm işlemler bittikten sonra “Ok” düğmesine basalım. Site yapılandırılması tamamlandıktan sonra oluşturacağımız özgeçmiş sayfası için yeni bir HTML belgesi oluşturalım. Bunun için “File” menüsünden “Page” seçeneğini seçelim ve ekrana gelen belge türlerinden HTML’yi seçerek “Ok” düğmesine basalım. Tasarım işlemlerine başlamadan önce oluşturduğumuz belgeyi yerel site klasörüne “ozgecmis.html” ismiyle kaydedelim.
Oluşturulan belgenin web tarayıcısında görüntülenecek başlığını yazmak için “File” menüsünden “Properties” seçeneğini seçelim. Ekrana gelen sayfa özellikleri penceresindeki “Title” bölümüne “Özgeçmişim...” yazalım. Son olarak oluşturulan sayfa görüntülenirken arka plan müziği çalınması için yine aynı pencerede bulunan “Background sound” seçeneğinden bir müzik dosyası seçelim.
Sayfa içi tasarım sürecine başlamadan önce bir önceki örnekte oluşturduğumuz “styles.css” isimli dosyayı HTML dosyasıyla ilişkilendirelim. Bunun için arayüz ekranında bulunan “Manage Styles” isimli paneldeki “Attach Style Sheet” seçeneğine tıklayarak açılan penceredeki “Browse” seçeneğinden yerel site klasörüne kaydettiğimiz “styles.css” isimli CSS dosyasını seçelim ve “Ok” düğmesine basalım. Böylelikle sayfa tasarımı sürecinde oluşturulan tüm stil kuralları “styles.css” dosyasına kaydedilebilecek ve daha önceki tasarım için tanımladığımız stil kuralları,
oluşturduğumuz yeni belgede de kullanılabilecektir. Daha sonra sayfa tasarımı için sayfa 159’daki yedi adet stil kuralı tanımlayalım.
Stilleri oluşturduktan sonra tasarlanacak HTML belgesindeki resim ve yazıların yerleşimlerini ayarlayabilmek için tablo kullanalım. Bunun için sayfaya dört satır ve dört sütundan oluşan bir tablo oluşturalım. Bunun için “Table” menüsünden “Insert Table” seçeneği seçildikten sonra ekrana gelen penceredeki “Rows” seçeneğine 4, “Columns” seçeneğine 4 değerini yazalım.
Ayrıca hücreler arasındaki boşluğu artırmak için “Cell spacing” seçeneğine 3 değerini yazalım. Tüm ayarlar bittikten sonra “Ok” düğmesine basalım. Daha sonra oluşturulan tablonun sütun genişliklerini ve satır yüksekliklerini “Tag Properties” panelinde bulunan genişlik için “Width”, yükseklik için “Height” seçeneklerini kullanılarak yapalım.
Veri girişinde kitabın 158. sayfasındaki şekil 5.22’de görülen verileri ilgili hücrelere girelim. Daha sonra “Özgeçmişim” yazısını işaretledikten sonra “Common” araç çubuğunda bulunan başlık stili olarak “Heading 1” seçelim. Aynı işlemi “Eğitim Bilgileri” ve “Yetenekler” yazıları için yapalım ve başlık stili olarak “Heading 3” seçelim. Ayrıca menü olarak görüntülenecek olan “Ana Sayfa”, “Özgeçmiş” ve “İletişim” yazılarını işaretlendikten sonra “Manage Styles” panelinde listelenen “.menu_yazi” stil kuralı üzerinde sağ tuşa basalım ve çıkan menüdeki “Apply Style” seçeneği ile stil kuralını uygulayalım.
Sıra bağlantıları oluşturmaya geldi. “Ana Sayfa” yazısına Anadolu Üniversitesi’nin ana sayfasına ve “İletişim” yazısına Anadolu Üniversitesi Açıköğretim Fakültesi’nin e-Posta adresine bağlantı oluşturalım. Bunun için “Ana Sayfa” metni işaretlendikten sonra “Insert” menüsünde bulunan “Hyperlink” seçeneğine basalım. Ekrana gelen penceredeki “Address” seçeneğine “https://www. anadolu.edu.tr” yazalım.
Ayrıca oluşturulan bağlantıyı yeni pencerede açmak için “Target Frame” seçeneğinden “New Window” seçeneğini seçelim. “İletişim” metni işaretlendikten sonra ise yine “Insert” menüsünde bulunan “Hyperlink” seçeneğini seçelim. Ekrana gelen penceredeki “Link to” bölümünden “e-Mail Address” seçeneğini seçelim ve “e-Mail address” bölümüne “mailto:[email protected]” yazalım. Tüm işlemler bittikten sonra sayfayı kaydedelim ve “File” menüsünde bulunan “Preview in Browser” seçeneği altındaki farklı tarayıcılardan nasıl görüntülendiğini kontrol edelim.