KaBaDaYı
19.06.07, 13:18
DERS 1
Xara Webstyle ve Macromedia Dreamweaver ile Web tasarım uygulamasına giriş
http://img8.echo.cx/img8/3756/ders15ql.gif (http://www.imageshack.us/)
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.
DERS 2
Ders2. Webstyle ile Navigasyon Barlar ve Menülerin Oluşturulması
http://img8.echo.cx/img8/1584/ders24dc.gif (http://www.imageshack.us/)
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 xxxx
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 "http://dersler/index.html" 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 :
http://img8.echo.cx/img8/1664/menuoz28ux.gif (http://www.imageshack.us/)
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 xxxx
(alıntı)
Xara Webstyle ve Macromedia Dreamweaver ile Web tasarım uygulamasına giriş
http://img8.echo.cx/img8/3756/ders15ql.gif (http://www.imageshack.us/)
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.
DERS 2
Ders2. Webstyle ile Navigasyon Barlar ve Menülerin Oluşturulması
http://img8.echo.cx/img8/1584/ders24dc.gif (http://www.imageshack.us/)
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 xxxx
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 "http://dersler/index.html" 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 :
http://img8.echo.cx/img8/1664/menuoz28ux.gif (http://www.imageshack.us/)
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 xxxx
(alıntı)