[Resimli] XARA WebStyle ile web sitesi yapımı

[casparov2]

"Bu anlatım [Only registered and activated users can see links] sitesinden alıntıdır."
Ders1. Xara Webstyle ve Macromedia Dreamweaver ile Web tasarım uygulamasına giriş

[Only registered and activated users can see links] ([Only registered and activated users can see links])
Biz burada Webstyle ve Dreamweaver yazılımları ile web sayfası hazırlanmasını uygulamalı olarak göstereceğiz.Webstyle yazılımını tek başına veya Dreamweaver içinden çalıştırmak mümkündür.

Uygulama Adımları :

Öncelikle Dreamweaver yazılımı çalıştırılır ve boş bir sayfa oluşturulur. ve bu sayfa daha önceden belirlediğimiz bir dizin ("Dersler") içine "index.html" olarak "save as" seçeneği ile kayıt edilir.Web sayfasında ilk açılacak sayfaya kural olarak "index.html" adı verilir ve diğer sayfalar bu sayfayla linkler kuarak ilişkilendirilir.

oluşturduğumuz boş sayfanın özelliklerini tanımlamak için "modify" menüsünden "page properties" sayfa özellikleri seçilir. ve burdaki "title - başlık" kısmına web sitemizde görünecek sayfamızın adı verilir (örneğin : xaraturk.com ürünler).Yine web sayfamızın arka plan rengini veya dokusunu belirlemek için "Backgound - arka plan" veya "Backgound İmaj- arka plan doku" bölümlerine istediğimiz rengi veya imajı koyabiliriz.Yazı karakterlerimizin Türkçe görünmesi için "document encoding" bölümü için "Turkish (windows 1254)" seçeneğini işaretleriz.İsteğimiz doğrultusunda sayfamızı "left margin" bölümünden sağa sola "top margin" bölümünden aşağı veya yukarıya kaydırabiliriz.

1) "index.html" olarak kaydettiğimiz sayfanın sol üst köşesini faremizle işetleriz

2)"insert" bölümünden "table - tablo" seçeneğini işaretleriz

3)ve iki satır ve sütundan oluşan tabloyu ekleriz. burda amaç içiçe veya biribirinden bağımsız tablolar eklemek ve bu tabloların içine yazılar,resimler, banner lar, vb. koymaktır. "insert table" menüsünde görünen "cell padding" ve "cell spacing" bölümlerine hücre değeri olarak sıfır değeri koyarız ve tablomuzun dış sınırlarını ve hücre boşluklarını sayfamızda göstermeyiz

4) Yine oluşturduğumuz tablo hücrelerinden birini işaretleriz

5) ve bu hücreyi, üç satırdan oluşan yeni hücrelere böleriz.

6) seçtiğmiz tabloyu veya bu tablo içindeki hücrelerin rengini boyutunu aşağıdaki özellikler penceresini kullanarak değiştirebiliriz.

7) Menüden "Bg Color" - arka plan rengini işaretleriz ve karşımıza gelen "color - renk" menüsünden istediğimiz bir rengi(açık mavi) seçer ve "custom color" bölümündeki boş kutucuklardan birine bu seçtiğimiz rengi atarız ve "ok" tuşuyla işlemimizi tamamlarız.

8) Şimdi web sayfamız için en önemli ve gerekli unsurlar olan "navigasyon barlar" ve "menüleri" oluşturacağız ve web sayfamıza ekleyeceğiz. Faremizle menülerimizi koyacağımız yeri işaretleriz.Programın "insert" bölümünde yazı, resim, tablo vb. objeler bulunmaktadır.

9) "İnsert" bölümünden "Xara Webstyle 4 " yazılımını işaretleriz ve
burada karşımıza bu programa bağlı alt menüler çıkacaktır.

Bu menüler :
• 3D başlıklar (3D headings) - örnekler
• Banner ads (Reklam çubukları)- örnekler
• Bullets - örnekler
• Butonlar - örnekler
• Dividers (Ayraç) - örnekler
• Başlıklar (Headings) - örnekler
• Logolar - örnekler
• Yön Çubukları (NavBar) & DHTML menüler - örnekler
• Fotolar Örnekler

10) Alt Menüden "Nav Bar / Menu" seçeneği işaretlenir ve otomatik olarak Xara Webstyle4 programı açılır. Bkz Ders2



Önemli not : Dreamweaver ile oluşturduğunuz web sayfası üzerinde yaptığınız değişiklikleri görmek istiyorsanız F12 tuşunu kullanmanız yeterlidir.

[casparov2]

Ders2. Webstyle ile Navigasyon Barlar ve Menülerin Oluşturulması
[Only registered and activated users can see links] ([Only registered and activated users can see links])
Ders 1 de Dreamweaver "insert" menüsü içinden "Xara Webstyle4" ve alt menüden "NavBar / Menu" seçeneğini işaretlemiştik ve karşımıza yandaki program arayüzü geldi
.Webstyle 4 programı bilgisayarımızın ekran çözünürlüğüne bağlı olarak ekranı kaplamaktadır.

Program içinde oluşturacağımız menülerin içeriği,rengi,yazı vb. özellikleri aşağıdaki butonları kullanarak yapılacaktır. Bu butonlar

Designs (tasarımlar) : burda seçebileceğimiz yüzlerce yatay ve dikey hazır menüler bulunmaktadır. ÖRNEKLER >>

Text (yazı) : Menüler içindeki yazıların font, büyüklük vb. özellikleri tanımlanır.

Background (arka plan) : Menülerin arkaplan renk veya dokuları tanımlanır.

Bevel : Menülerin kabartma ile ilgili tanımları yapılır.

Shadow (gölgeleme): Menüler ile ilgili gölgeleme özellikleri tanımlanır.

Size (büyüklük): Menülerin piksel olarak genişilikleri tanımlanır.

Menus (menüler) : Menülerin ve bu menülere bağlı alt menülerin özellikleri, linkleri ve içeriği tanımlanır.

Save (kaydet) : Değişikleri kaydetmek için kullanılmaktadır.


Uygulama Adımları :
1 "Designs - Tasarımlar" içindeki yüzlerce hazır menülerden herhang birini seçeriz.

2."Menus - Menüler" seçilir ve "Buton Properties - Buton Özellikleri" başlığı altındaki menülere istediğimiz isimleri veririz. Örneğin ilk menüyü "Ana Sayfa" olarak değiştirdik ve link olarak da "[Only registered and activated users can see links]" sayfasını verdik.Burda "Target - hedef" menüsünün sağ tarafında "Alt Text" menüsü içine "Ana Sayfa" menüsü üzerinde görmek istediğimiz açıklamayı yazabiliriz.Biz burada "Alt Text" içine menü ile aynı adı taşıyan "Ana Sayfa" ifadesini giriyoruz.

3. "Ana Sayfa" menüsünün yanındaki menüyü "Ürünler" olarak değiştiriyoruz ve bu menünün alt menülerini oluşturmak için menülerin altındaki "Double - click to add - eklemek için çift klikle" yazısının üzerine geliyoruz ve alt menü adlarını ve ilgili linkleri giriyoruz. Örneğin : "Ürünler" menüsü altında "XaraX" ve "webstyle" alt menülerini oluşturuyoruz.

İlave menüler ve alt menüler eklemek için "Add - ekle" butonunu kullanacağız.

"Spacing - Boşluklar" butonu ile menülerin arasındaki boşlukların büyüklüğünü tanımlarız.

"Delete" ile oluşturduğumuz menü ve alt menü başlıklarını seçerek silebiliriz.

"Add Separator" ile menu butonları arasında boşluk yaratabiliriz.

"Menu Properties - Menü Özellikleri" içinde oluşturduğumuz menülerin yazı karakterlerini, büyüklüklerini , yönlerini, animasyon vb. tanımlayabileceğimiz özellikler bulunmaktadır.
Bu özellikler :
[Only registered and activated users can see links] ([Only registered and activated users can see links])
Font : Menü yazı başlıklarının fontlarını tanımlamada kullanılır.

Font Size : Menü yazı başlıklarının font büüklüklerini tanımlamada kullanılır.

Spacing (boşluk): Yazılar arasındaki boşlukları tanımlamada kullanılır.

Border (sınır) : Menü sınırlarının büyüklüğü rakamsal olarak tanımlanır.

Trasparency(geçirgenlik) : Menülerin şeffaflık değeri yüzde olarak tanımlanır.

B : menülere ait yazıları kalınlaştırır

I : Menülere ait yazıları yan yatırır

Bu derste oluşturduğumuz menüleri içindeki özelliklerin rengini değiştirmek için DERS 2.1 >>

[casparov2]

Ders 2.1 Navigasyon Barlar ve Menülere ait renklerin tanımlanması.
[Only registered and activated users can see links] ([Only registered and activated users can see links])
Uygulama Adımları :

Bir önceki derste menüler oluşturmuştuk. Bu derste menüler içinde yer alan özelliklerin renklerini tanımlayacağız.

1) Yanda yer alan butonlardan "colors - renkler " işaretlenir ve karşımıza menü içindeki özellikler ve renkler paleti çıkar.

Bu özellkleri işaretleyerek renk paletinden seçtiğimiz renkleri atayabiliriz.. Örneğin "Page background - sayfa arka plan" özelliğini seçeriz ve renk paletinden açık mavi rengi işaretleriz. Böylece menülerin arka plan rengi açık mavi veya (R:32.2, G:70.2 ve B:79.6) olarak tanımlanır.Renk paletindeki renkleri "0-255" veya "%" olarak veya "Hex" olarak tanımlayabiliriz.

2) "Panel Off" seçeneğini ve açık yeşil rengi işaretlediğimizde menünün rengini açık yeşil olarak değiştiririz.

3) "Text" seçeneğini işaretlediğimizde menü içinde yer alan yazıların rengini sıyah olarak tanımlarız.

"Border" özelliğini işaretleyerek menü nün dış sınır renklerini değiştirebiliriz.

"Menü" özelliğini işaretleriz ve kırmızı rengi atarız. Böylece alt menülerimiz kırmızı olarak görünecektir.

"Menu Text" özelliğini seçerek alt menülerin yazı renklerini tanımlamış oluruz. Örneğin "ürünler" e ait "xarax" ve "webstyle" alt menülerin renkleri beyaz olarak atanmıştır.

"Menu Over" özeliğini işaretleriz ve turuncu rengi atarız. Faremizle alt menüler üzerinde hareket ettiğimiz zaman alt menülerin rekleri kırmızı iken turuncu olarak değişecektir.

"Menu Text (over)" özelliğini seçeriz ve sarı rengi atarız.Faremizle alt menülerdeki yazıların üzerinde hareket ettiğimiz zaman alt menülerdeki yazıların renkleri beyaz iken burda sarı olarak değişecektir.

Daha önce oluşturduğumuz renkleri "My colors - renklerim" butonunu işaretleyerek saklayabiliriz ve tekrar kullanabiliriz.


Menüler üzerindeki diğer değişiklikleri yapmak ve sonuçları kaydetmek için lütfen Bkz DERS2.2 >>

[casparov2]

Ders 2.2 Navigasyon Barlar ve Menülere ait yazı, arka plan ve ebatlarının tanımlanması.
[Only registered and activated users can see links] ([Only registered and activated users can see links])
Uygulama Adımları :

1) "Text" butonunu işaretleyerek daha önce oluşturduğumuz menülerin başlıklarına ait yazı özelliklerini değiştirebiliriz.

"Edit Text" içinde yer alan "Yükleme" menü başlığını seçeriz ve "Font" içinden "Arial Kalın" fontunu seçeriz ve menü içindeki yazılar "Arial Kalın" olarak tanımlanmış olur. Yazıların büyüklüğü "Size in points - nokta büyüklükler" ine rakamsal değer girerek değiştiririz.Diğer özelliklerlede oynayarak menü başlıklarının yazı özellikleri üzerinde istediğimiz değişiklikleri anlık olarak yapabilir ve menüler üzerinde görebiliriz.

2) Menülerin arka plan dokularını belirlemek için "Background - arka plan" butonu işaretlenir ve hazır bitmap dokular görüntülenir. Bu dokulardan herhangi birini seçebilir ve anında seçtiğimiz bitmap dokuyu arka plan olarak görebiliriz.Veya "Plain" seçeneğini işaretleyerek arka plan rengini bitmap olarak değil bir renk olarak tanımlayabiliriz.


3) Daha önce oluşturduğumuz menülerin ebatlarını "Size" butonunu işaretleyerek tanımlarız."Graphic Size - Grafik büyüklük" içinde yer alan "width - en " ve "height - boy" değerleri ile oynayarak menülerin boyutlarını piksel olarak ayarlarız."Buton width - buton genişliği" ile oynayarak menü içinde yer alan butonları genişletebilir veya daraltabiliriz

[casparov2]

Ders 2.3 Navigasyon Barlar ve Menüler üzerinde yapılan değişikliklerin kaydedilmesi ve menülerin web sayfası içine yerleştirilmesi

[Only registered and activated users can see links] ([Only registered and activated users can see links])
Menüler üzerinde yaptığımız değişiklikleri kaydettikten sonra Webstyle otomatik olarak kapanacak ve tekrar Dreamweaver yazılımına ve index.html olarak adlandırdığımız Web sayfamıza dönmüş olacağız.

Uygulama Adımları :

1) Değişiklikleri kaydetmek için "Save" butonu işaretlenir ve karşımıza yeni bi menü çıkar. burda "File Size - Dosya büyüklüğü" başlığı altında üç seçenek yer almaktadır. bu seçenekler

"Fast Download - Hızlı yükleme" seçeneği ile kaydedince oluşturduğumuz menülere ait imajlar az yer kaplar ve daha hızlı ekrana gelir.

"Good Quality - İyi Kalite" seçeneği ile kaydedince oluşturduğumuz menülere ait imajlar iyi kalitede ama nispeten daha fazla yer kaplar ve biraz daha uzun sürede ekrana gelir.

"High Quality - Yüksek kalite" seçeneği ile kaydedince oluşturduğumuz menülere ait imajlar yüksek kalitede ama diğer iki seçeneğe nazaran çok daha fazla yer kaplar ve daha uzun sürede ekrana gelir.

Biz burada birinci seçeneği yani "Fast Download" ve imaj olarakda GIF formatını seçtik.

"Save & Exit - Kaydet ve Çık" butonu ile menüler üzerinde yaptığımız bütün değişiklikleri kaydederiz ve Webstyle dan çıkarız.

2) Webstyle' dan çıktıktan sonra otomatik olarak Dreamweaver yazılımına ve index.html olarak adlandırdığımız web sayfasına geri döneriz.

Webstyle yazılımını kullanarak oluşturduğumuz menüler web sayfası içinde daha önce işaretlediğimiz (Bkz. Ders1) bölüm 8,9, 10 yere yerleşecektir.

3) Web sayfası üzerinde yapılan değişikleri , Webstyle ortamında oluşturulan menüleri görmek istiyorsak F12 tuşuna basarız ve Microsoft İnternet Explorer üzerinde web sayfamız görüntülenir.

Faremiz ile menü içinde bulunan "Ürünler" başlığı üzerine gelirsek otomatik olarak "XaraX" ve "Webstyle" alt menüler karşımıza çıkar.Ve yine faremizi alt menülerden "XaraX" üzerine getirirsek, menünün açık mavi olan rengi turuncuya dönüşür.

alıntıdır.

[anakonda]

teşekkürler