WEB TASARIM FRONT PAGE.

... konulu sunumlar: "WEB TASARIM FRONT PAGE."— Sunum transkripti:

1 WEB TASARIM FRONT PAGE

2

3

4

5

6

7

8 Şimdi bir web sayfası tasarımı nasıl yapılır onu görelim.
Bir web sayfası tasarımını editörde oluşturmaya başlamadan önce kağıt üzerinde bir şablon hazırlamalıyız veya bir web sayfasını örnek almalıyız. Bu hazırlık aşamasında, web sayfamız kaç alt sayfadan oluşacağı, sayfalarda ne tür resimler ve animasyonların kullanılacağı, doküman, resim, logo gibi yardımcı elemanların hazırlanmasında kullanılacak programların hazır olması gerekir. Burada, öncelikle Front Page Edito unun şablon tasarım seçeneğini kullanalım. Daha sonraki aşamada yukarıda anlatılan yöntemdeki gibi (önce ana sayfanın hazırlanması, sonra diğer alt sayfaların hazırlanması) sayfa tasarımını görelim.

9

10

11

12

13

14

15

16 Eğer istenirse Seçeneği işaretliyken, bu seçeneğin altında sıralanmış olan “Theme” lardan beğeninize uygun düşen bir tanesi seçilir. Olumlu veya olumsuz seçiminizden sonra pencerenin altın bulunan Apply(uygula) komutu tuşlanır ve tekrar pencerenin üst tarafında bulunan Show Front Page Editor tuşlanarak çalışma sayfasına dönülür. Çalışma sayfasına dönüldüğünde, sayfanın temasının değiştiğini veya temasız bir sayfanın oluştuğunu göreceksiniz. Yalnız temasız bir sayfa tercih etmişseniz, burada karşınıza kenarlıklar (Borders) çıkacaktır. Aşağıdaki şekil bunu göstermektedir.

17

18

19

20 Şekildeki pencereden de görüleceği üzere daha önceden oluşturduğumuz dosyalar görülmektedir. Bu dosyalardan hangisini “Resimlerim” dosyası olarak seçmek istiyorsanız (örneğin, sayfa1, sayfa2, sayfa3-1, vb.) fareyle onun üzerine bir kere tıklamanız yeterli olacaktır. Bu işlemi taptığımızda “URL” kutucuğunda ilgili dosyanın ismi görünecektir. Ve son olarak işlemi onaylamanız gerekir(OK). Tüm diğer sayfaları ana sayfayla linkleyebileceğiniz gibi diğer sayfaları da kendi aralarında linkleyebilirsiniz. Ek olarak, Sayfa linklerinin yanında Web Link (web de mevcut sayfalar) işleminide aynı yöntemle yapabiliriz. Yalnız, burada adresleme sayfa linkinden farklı olacaktır. Yani, yukarıdaki şekilde görülen “URL” kısmına tercih edilen adres tam adıyla girilir ( gibi). Sayfamız için tercih ettiğimiz kendimize ait bir tema söz konusu ise, bu tema resminin önceden oluşturduğumuz “Resimler” klasörüne konulmuş olması gerekir. Eğer böyle bir tema resmimiz varsa bu temanın sayfa fonu olarak kullanılması için yapılması gerekenler şunlardır.

21

22

23

24

25

26

27

28 Bulara ek olarak, sık kullanılacak komutlardan biri de FrontPage Editor'ünün en üstünde menüler kısmındaki “Table” dır. “Table” menüsünde yer alan araçların özellikleri kullanılarak; Hücre Ekleme(Insert Cell), Tablo Ekleme(Insert Table), Satır veya Sütun Ekleme(Insert Rows or Columns), iki hücreyi birleştirme(Merge Cell) veya hüçre içi hücreler (Split Cell) oluşturma, Hücreyi Silme(Delete Cell), gibi işlemler yapılabilir. Cell Properties tablosunun sol üst kısmında Layout başlığı altındaki özellikler, hücre içindeki yazıların konumlarını belirler.

29

30

31 Sayfaya Counter (Sayaç) Ekleme
Sayfanızın kaç kişi tarafından ziyaret edildiğini bilmeniz için, sayfanıza bir sayaç eklemeniz gerekecektir. FrontPage bize böyle bir olanak sunuyor. Ancak bu sayacın çalışması için sayfanızın bulunduğu server'ın sayacı desteklemesi gerekecektir. FrontPage sayacının yanı sıra internette bedava sayaç sunan yerler de mevcuttur. Sayaçlar her zaman ana sayfada ve genelde de alt veya üst köşelerde yer alır. Örneğin, sayaç yeri olarak sayfanın en altında bir yer seçilsin.

32

33 Resim Ekleme ve Ayarları:
Web sayfasına resim eklemek gerektiğinde yapılması gerekenler nelerdir? İnternette kullanılacak resimlerin uzantılarının "jpg" ve "gif" olmasına ve boyutlarının da büyük olmamasına dikkat edilmeli. Çünkü bağlantının yavaş olduğu ortamlarda resimlerin açılması oldukça zaman alıcı olmaktadır. Bu nedenle sayfaya resim konulması gerekiyorsa konulacak resmin boyutlarının küçük olmasına dikkat edilmeli. Resmin orijinal büyüklüğüne ulaşmak isteyenler için o resme ayrı bir link verilir. Web sayfasında kullanılacak resimler, bir resim editörü aracılığıyla düzenlenerek kullanıma hazır hale getirilir. Burada kullanılması önerilen editör "Photoshop" programı olacaktır. Web sayfasına eklenilmesi düşünülen resim amaca uygun olarak önceden hazırlanmış ve “Resimler” adlı çalışma klasörümüze kayıt edilmiş olmalı. Şimdi bu resmi web sayfasına taşımak için şunlar yapılmalı.

34

35

36 Pencerenin alt kısmında ise. bilinmesi gereken 2 şey vardır
Pencerenin alt kısmında ise. bilinmesi gereken 2 şey vardır. Birincisi Text bölümündeki resmin adı (Tarayıcıda, gerçek görüntüde resmin üzerine gelince resmin üzerine gidince çıkan yazıdır.). İkincisi ise Default Hyperlink kısmı olup resmin link bağlantısını gösteren kısımdır. Bu kısımdaki, eğer resme daha link verilmemişse Browse komutuna tıklanarak resme link yapılabilir(Resme link koyma yollarından birincisi). Resme link koymanın ikinci yolu ise resmi tıkladıktan sonra tuşuna tıklamaktır. Link koymada izlenilen yol bir yazının linklenmesiyle aynıdır. Dikkat edilecek olursa resme link verildiğinde, resmin çerçevesinde mavi bir şerit oluşur. Bunun giderilmesinin yolu Appearance. komutuyla sağlanır. Appearance. Bir resme link bağlantısı yapıldığında etrafında mavi border oluşmaktadır. Bundan kurtulmak için “Image Properties” başlıklarından “Appearance” kısmında ayarlama yapılır.

37

38 Resim üzerindeki değişiklikler ve Link oluşturma
Genellikle bir resim üzerinde birden fazla link eklemek gerekebilir. Bu durumlarda FrontPage'in en altında yer alan komutlar kullanılacaktır. Birden fazla link, genellikle birden fazla alt sayfa veya internet ortamında mevcut adreslerin linklenmesinde kullanılır. Ana sayfa, Resimler, Yararlı adresler gibi şıklar var ve her bir şık farklı bir sayfaya bağlanması gerekiyor.

39

40 Resim'deki komutlar FrontPage Editör de ancak bir resmin üzerine tıklandığında çıkacaktır. İlk tuş “ok işareti”, resmi sadece seçmeye yarayan tuştur. İkinci, üçüncü ve dördüncü tuşlar resme veya yazıya link vermeyle ilgilidir. Tuşlar, seçeceğimiz alanlara göre değişir. Kare ve dikdörtgen şeklindeki alanlar için ikinci tuşu, daire şeklindeki alanları için üçüncü tuşu ve sadece belli bölgelere link koymak için de üçüncü tuşu kullanılır. Bu üç tuşun kullanım şekli aynıdır. Link vermek istenilen alan üzerine çift tıklayarak Create Hyperlink penceresi açılacaktır. Bu menüden bağlantı yapmak istenilen dosya veya web sayfası adresi tanımlanır.  Resim üzerine yazı yazmak için araçlardan A harfine tıklanır ve resim üzerinde adresin yazılacağı yere tıklayarak linkle ilgili isim yazılır. Resmi değişik açılarda döndürme, resmin parlaklığını ayarlama, belli kısmını kesme, çerçeve kalınlığını ayarlama gibi uygulamalar Resim Araç Çubuğu’nda yer alan diğer komutlardandır.

41 Sayfanın yüklenmesi Artık kişisel web sayfası oluşmuş ve bunu web’e göndermek gerekiyor. Yapılması gereken iki şey var. kişisel Domain'i (tasarımın adı, Örnek: almak veya bedava web alanı sağlayan sitelere üye olup sayfayı buralardan yüklemektir. Bedava web sayfası yayınlatmak için, öncelikle sayfanın karşı tafra yüklenmesinde bir FTP programına ihtiyacınız olacak. FTP(File Transfer Protocol) internet üzerinde veri aktarmaya yarayan bir uygulamadır(Cute FTP). Bununla birlikte hizmet sağlayıcı sitelerin kendi, kendi dosya aktarım sağlayıcıları vardır. İstenilen bedava siteden adres alınırken kayıt sırasında kişisel adresiniz istenecektir ve adresinize Username ve Password'ünüz gönderilecektir. Gönderilen bu bilgilerle sitenize erişebileceksiniz. Örneğin, dan bir web alanı aldınız ve sayfanızın adı da . Adresinize FTP programıyla veya hizmet sağlayıcının kendi içinden bağlanmanız gerekecektir. Hizmet sağlayıcıya bağlanmadan önce adres “username” ve “password” sorulacaktır. Bu işlemler eksiksiz tamamlandıktan sonra web sayfanızla ilişkili tüm dosya, resim, animasyon ve dokümanlarınızı, size ayrılan kotayı aşmayacak şekilde transfer etmelisiniz. Transfer işlemleri tamamlandıktan sonra, artık web sayfanız yayındadır.

42