DERS 4: WEB SAYFASI TASARLAMAK

 

Ders sonunda yapabilecekleriniz:

 

Bir Web sayfası tasarımının temellerini öğrenmek.

 

I. WEB SAYFASI OLUŞTURMAK

FrontPage ile bir Web sayfası oluşturmak için önceki derslerde ele aldığımız kolaylıkları gördünüz. Ancak boş bir sayfa açıp üzerinde her şeyiyle size ait bir Web sayfası oluşturabilirsiniz. Bu durumda FrontPage araçlarını kullanarak bir Web sayfasını tasarlamak esastır.

 

Bir Web sayfası metinlerden oluşur. Gereksiniminize göre Web sayfasında yer alacak metinleri hazırlayın. Metinlerin yanı sıra köprüleri (hyperlink) tasarlayın. Bunun dışında FrontPage araçlarını kullanarak biçimleme işlemlerini yapmanız yeterli. Bu derste bir Web sayfasını oluşturmanın temellerini ele alacağız.

 

A. BİR SAYFA YARATMAK

Yeni bir sayfa yaratmak için File menüsünden New Page komutunu seçin. Yaratacağınız Web sayfasına sayfa1.htm olarak adlandırın.

 

Sayfanın içeriğinde yer alacak metin, köprü ve biçimlemelerin yanı sıra sayfa özelliklerini düzenlemek için File menüsünden Page Properties’i seçin.

 

Page Properties iletişim kutusunda, hazırladığınız Web sayfanın özelliklerini düzenleyebilirsiniz. Bu iletişim kutusunda sayfanın yeri, arka plan rengi, sınırları vb özelliklerini düzenleyebilirsiniz.

 

Yine bu iletişim kutusunda sayfanıza bir arka plan resmi verebilirsiniz. Eğer bir resmi sayfanızı arkasında fon olarak istiyorsanız, Background (Arka Plan) sekmesini kullanabilirsiniz.

 

Sayfaya gerekli metinleri ekleyin:

 

Örneğin şirketimizi tanıtan yazılar.

 

Sayfaya köprü (hyperlink) eklemek için Insert menüsünde Hyperlink komutunu seçin. Bu düzenleme ile yarattığınız sayfadan diğer Web sayfalarına ve Web sitesi adreslerine (URL- http://www.farukcubukcu.com gibi) bağlantı ekleyebilirsiniz.

 

B. BAŞLIKLAR

Web sayfalarında daha etkin bir biçimleme yaratmak için başlıklar (headers) ve alt başlıklar (footers) kullanılır. FrontPage’de Heading1’den başlamak üzere altı düzey başlık stili hazır olarak bulunur.

 

Metinlerin içinde başlıkları, Formatting araç çubuğundan Başlık stilini seçerek uygulayabilirsiniz.

 

C. HİYERARŞİK YAPI

Web siteleri içinde yer alan Web sayfaları hiyerarşik bir yapıdadır. Bu hiyerarşik yapıda bir ana sayfa (home page), ve altında yer alan çok sayıda detay sayfaları yer alır.

 

Örnek şirketimizi tanıtan bir ana sayfanın altında çok sayıda detay sayfası, şirketin ürünlerini, yine her bir ürünün altında çok sayıda detay sayfası yer alabilir.

 

Bu hiyerarşik düzeni, sitenizin içeriğini planlarken yapacağınız bir çalışmayla oluşturabilirsiniz. Örneğin Romen rakamlar ya da desimal sistemle kodlayarak içeriği hiyerarşik hale getirebilirsiniz.

 

D. GRAFİKLER

Web sitelerinde ve Web sayfalarında grafiklerin önemi büyüktür. Bu grafik içerik resimlerle sağlanır. Bu anlamda, GIF, JPEG resim dosyalarıyla Web sayfalarını uygun biçimde süslemek gerekir.

 

Peki grafikler nereden gelecek?

 

FrontPage içinde Insert menüsünden ClipArt komutuyla FrontPage içinden ve dışarından alınacak resim dosyaları Web sayfalarına eklenebilir.

 

Web sayfasına dışarıdaki bir dosyadan ClipArt eklemek:

 

1. Insert, Picture menüsünden From File’ı seçin.

2. Belirtilen yerden dosyayı seçin.

 

E. RESİMLERİ KIRPMAK VE BOYUTLANDIRMAK

FrontPage’de resim kullanmanın önemini vurgulamıştık. Bu konuda da resimlerin özelliklerini bozmadan küçültülmesi (kırpılması) ve boyutlarının değiştirilmesini öğreneceğiz:

 

Resmi kırpmak için, resim seçilir. Image araç çubuğundan Crop düğmesi tıklanır. Resmin dört kenarında oluşan kulplar aracılığıyla resim kesilir.

 

Resmi boyutlandırmak için ise Crop aracı kullanılmaz. Bu işlem için resim seçilir. Ardından fare ile resmin köşelerinden kavranarak resim boyutlandırılır.

 

F. RESMİN KONUMU

Resimlerin sayfa içindeki yerini düzenlemek, iyi bir görünüm bakımından oldukça önemlidir. Seçilen resmin sayfa içindeki konumunu düzenlemek için Format menüsünden Position komutu kullanılır.

 

Konum iletişim kutusunda resim yeri, ayrıca katmanı seçilir.

 

G. BİR GRAFİĞE LİNK ATAMAK

Web sayfası üzerinde, bir resmin tamamı ya da bir kısmı link olarak kullanılabilir. Bu işlem için önce resim seçilir. Ardından araç çubuğundan Create Hyperlink (Köprü Oluştur) komutu seçilir.

 

 

 

II. UYGULAMA

 

Şirketiniz için ya da bir şirket için bir Web sayfası oluşturun. Bu sayfa ana sayfa olsun. Örneğin: Yılmaz Gıda A.Ş. Gıda ürünleri üreten bir şirket. Ürünleri, adresi vb. bilgilerini bu sayfaya yazın. Ardından diğer ek sayfalara bağlantısı için köprüler (hyperlink) ekleyin.

 

III. GÖZDEN GEÇİRME

1. Bir Web sayfası tasarımının bir Word dokümanı yazmaktan farkı nedir?

2. Frontpage, Web sayfasının görünümü etkilemek için hangi araçlara sahiptir?