[erdinç]

Merhaba,

web tasarımı bana yabancı bir konu. Her konudan kendime yetecek düzeyde biraz birşeyler öğrenme alışkanlığım olduğu için bu konulara biraz bulaştım. FrontPage kullanarak ve tablo yöntemi ile bu siteyi kurdum. Dikkat ederseniz sitedeki menu bile tablodan oluşuyor.

Şu anki amacım bundan daha iyisini yapmak. Yalnız benim istediğim şey database içeren herhangi bir sistem değil. O nedenle CMS içeren (Wordpress, Joomla vs.) herhangi yola sapmak istemiyorum. Kesinlikle Wordpress veya Joomla içeren öneriler yapmayın.

Benim amacım statik, birkaç sayfalık web siteleri kurabilmek. Bunlar sürekli sayfa eklenmeyen siteler olacak.

Front page ile tablo kullanarak site kurmak birinci adım olursa ikinci adım ne olmalı?

A. CSS öğrenip CSS ile menü kurmak ve sayfa tasarımlarında tablo yerine div (container) kullanmak.
B. JavaScript ile menü kurmak ve JavaScript konularında ve frame kullanımında tecrübemi arttırmak. Sayfa tasarımlarında yine yer yer tablo kullanımına yer vermek.
C. ???

Şu an karşılaştığım problemler şu şekilde:
Bir site kurmak için front page başına geçince aklıma şöyle sorular takılıyor:

Yine mi tablo kuracağım?

Menüyü ve sayfanın geri kalanını aynı tablonun parçaları olarak mı yapsam, üstte bir tablo altta başka bir tablo mu yapsam veya şu menüyü tablo dışında başka birşey mi yapsam?

Ana sayfadan başka bir sayfaya geçince sayfanın tamamı (menü dahil) yenileniyor. Menü yerinde kalsa ve sayfanın diğer kısımları değişse daha iyi olur ama bunu frame kullanarak mı yapıyorlar acaba?

Menü yaratırken sanırım grafik kullanmak yaygın bir yöntem. Dreamwever'da gezinirken böyle bir özellik gördüm. Mouse over için başka, tıklama için başka grafik koyuyorsun. Nasıl olsa istediğim grafikleri yaratacak düzeyde illustrator kullanabiliyorum. Acaba menüyü bu şekilde mi oluştursam?

CSS menüler konusuna biraz baktım. Alt alta sıralanmış bir listeyi yatay menüye çevirecek kadar kod öğrendim. div kullanımı, #navigation, ul, li, a gibi parametrelerle bazı CSS stilleri yaratıp basit bir menü oluşturmak çok zor olmuyor. Acaba menüyü bu şekilde mi yapsam?

Dreamweaver'ın karışık yapısı canımı sıkıyor. Acaba FrontPage'e geri dönüp tablo ve JavaScript menü ile benim için daha kolay tasarımlar mı yapsam? Bir de hiç bilmediğim frame kullanımını tecrübe etmiş olurum arada.

web tasarımı konuları engin bir deniz gibi. İşin içine girdikçe daha çok kayboluyorsun. Bu konularla yıllarca uğraşmış, çok sayıda site kurmuş arkadaşların yorumlarını bekliyorum.

[kindarmarti]

Selamlar az önce uzunca yazmıstım ama "tırnak" yerine esc basınca uçtu gitti hepsi=)

Öncelikle sitene daha öncede girdim ve acıkcası domain sitesi için bence rahatsız etmeyen ve oldukcada kullanımı rahat bir site eğer yetiyorsa web işine girmemeni öneririm;
bir adım ilerisi için..

Eğer webmaster&designer olmayacaksan bulaşmamanı öneririm "dan brown" romanlarının ilk sayfasını karıstırıken bir bakmışsın kitabı ortalamışsındır, eğer hep daha iyisini yapabilirim gibi bir dusturun varsa bu kuyudan cıkamazsın,temel HTML, biraz CSS, ucundan flash, bir de uyelik sistemi için ASP,PHP derken bakmışsın akıp geçmiş zaman..

Her butona tıklandığında yeni sayfada açılması pek rahatsız etmez genelde, ama eder dersen evet dediğin gibi "iframe" mantığı ile yapılıyor,ve çok kasacak bir durumuda yok.
Biraz daha aktif menü konusunda ise çok başarılı hazır scriptler var onları kullanmanı öneririm,yazmak önce kalem tutmayı gerektirir , buna ayıracak zamanın yoksa hazır scriptler tam sana göre.
Çoğu tasarımcı siteyi önce Photoshop ta tasarlar "slice tool" ile keser ve "save as web" seceneği ile .HTML e cevirir. Sonra gerekli aşamalara tabi tutar çalışmasını.

Bu şekilde tabloları senin yerine Photoshop ayarlar,ama daha sonra bu tablo ayarlarını değiştirmek hayli yorar.
gerekli kaynak sayfaları aşağıda belirteceğim umarım işine yarayacak bilgilerdir..

dhtml için : dynamicdrive önde gelen bir sitedir.
JavaScript vediğer scriptleriçin: Hot scripts hatırı sayılır sitedir.
CSS için kaynak bir site

iframe için bir forumdan alıntı yapıyorum.

Spoiler:

Boş bir HTML sayfası oluştur. body tagının içine <iframe yazınca otomatik olarak özellikleri geliyor. Bunlardan en önemlileri name,src,height,width,frameborder,scrolling,align.

name : iframe adı (mesela : alan)
src : kaynak dosya (deneme.HTML yada herneyse)
height : yükseklik (pixel olarak) (400)
width : genişlik (500)
frameborder : border olacak mı olmayacak mı (1 ya da 0)
scrolling : scroll tipi (auto,yes ya da no)
align : konum (bottom, left,right, top...)

Şimdi name iframenin adı. Bir linkin iframede açılmasını istiyorsan linkin target kısmına iframenin adını yazarsın

<a href="test.HTML" target ="alan">TEST</a>

Sana bir iframe örneği

<iframe name="alan" align="left" frameborder="0" height="400" scrolling="300" src="test.HTML" width="500"></iframe>

Kuracalarsan bu ve diğer değişkenlerin ne işe yaradığını bulursun.

saygılarımla
.onur

[kuduk]

ihtiyacı karşıladığı müddetçe bence deraya girmeden frontpage ve tablolar ile yetinmek en iyisi. hatta bir çok sitede pdf dokümanlar bile tasarıma ayrılan süreden daha fazla trafik çekmenize sebep olabiliyor. metrik değerler olmasa da sanki arama motorlarının pdf dokümanlarını daha ayırt edici bulduğunu sezinliyorum. çalışmalarımda tasarım gibi çok su götürür konuya girmeden kazanç kaynağından uzaklaşmamayı benimsiyorum. bir programcı isem benim için web sitesi yapmak ancak amatör anlamda kozmetik kaygılardan uzak tamamen işin fonksiyonelliğidir. menu ya da tablo gibi düzenlemeleri ise frontpage veya diğer tasarım araçlarının içlerinde yer alan template lerden veya örnek tasarımlardan alarak değiştirmek bana zaman kazandırıyor bu sayede eleştirenlerin bana +5 puan vermesi yerine sitenin 5 dolar kazandırmasını tercih ediyorum.

CSS, XML, wap, dhtml, ASP.net, PHP gibi araçlar size bir işi bir amaca ulaşmak için sunulmuş araçlardır(yerseniz pazarlamacılar bunları teknoloji olarak adlandırıyorlar). esasen bunlar size işin nasıl yapacağınz konusunda bilgi vermez ve kolaylıkla moore yasasının kardeşleri sayesinde ilk 2 senede geçerliliklerini yitirirler. o nedenle bunları öğrenmek yerine bildiğim araç ile o işi en kısa zamanda halletmeyi amaçlarım.

ben web sitesi veya masaüstü yazılımların taslaklarını powerpoint ile hazırlarım . en hızlı üretimi powerpoint ile yaparım. tasarım netleştirkten sonra bu tasarımı frontpage ile HTML diline çeviririm(olduğu kadar). elbette bu tasarım w3 onayından geçmez, tablolardan müteşekkildir. hower efekti yeni moda değildir. flash la yapılmış göz boyayıcı geçişler yoktur. özetle şaheser değildir. fakat 50 işgünü yerine 50 iş saatinde bitmiştir. optimum başarıyı sağlayarak potansiyel kullancıları memnun eder. tasarımın eski moda oluşu ile eleştirildiğimde de amatörlüğümü kabul ederim -bu tür tasarımların da yerli piyasa da müşterinin talebini karşıladığı müddetçe şaheserlerle aynı fiyata satıldığına da sıklıkla şahit oluyoruz. -. eğer ki ciddi bir tasarım gerektiren işe soyunacak olursam da bunu konusunda uzman bir profesyonele bırakmayı tercih ederim.

her nekadar Joomla dan uzak dursanda çok bu felsefeyi temsil eden bir çalışmamı Joomla üzerinde aşağıdaki adreste görebilirsin:

http://www.stoktakipprogrami.com

özetle; bu felsefeyi "basit düşün, kolay yap" -think simple, make easy- sözünde topluyorum. Joomla çok karmaşık bir içerik yönetim sistemi olsa da eğer amaç içeriğin değerini kullanmak ise; basit bir içerik yönetim sistemini esas alıp kullanmak ve bu konuda ekstra zaman harcamamak sureti ile sizin ihtiyaçlarınızı -forumda takip ettiğim kadarı ile - karşılayacaktır.

[erdinç]

Selamlar Onur,

Bahsettiğin Photoshop yöntemi ilgi çekici bir yöntem. Eğer doğru anladıysam, bütün sayfanın (menüler ve sayfa düzeni dahil) görüntüsü oluşturuluyor ve ardından içerik eklenecek kısımlar kesiliyor, ayrıca menü işlevsel hale getiriliyor. Sonuçta ortaya çıkan şey bütün sayfayı kaplayan ve üzerinde delikler olan bir resim sanırım.

Bu yöntemle ilgili sorun şu ki photoshoptan hiç anlamıyorum. Birkaç şekil çizip onları düzenlemek bile mümkün değil benim için. Gerçi illustrator bilgim iyi sayılır. Belki onun faydası olur. En azından illustratorde görüntüyü oluşturup Photoshop'a aktarabilirim.

Bugünlerde Dreamweaver'da CSS ile sayfa tasarımı konusunda bir video izledim. Oluşturulacak sayfanın görüntüsü arka plana taslak olarak yerleştirilip üzerine divler çiziyordu. Bu yöntem de senin bahsettiğin photshop yöntemi gibi görsel yönü kuvvetli olan bir yöntem olduğu için benim anlamam kolay olabilir.

Aslında birkaç sayfalık bir site bulup farklı yöntemlerle aynısını yaratmaya çalışsam iyi olacak.

Selamlar Kuduk,
Aynı zamana denk geldiği için senin mesajını geç fark ettim. Senin söylediğin gibi CMS veya template kullanarak pek çok site kurmak mümkün ancak ben biraz eski kafalıyım. Ne oluyor, nasıl oluyor anlamaya çalışıyorum. Bir de aslında birşeyler tasarlamak hoşuma gidiyor. Her şeyi hazır alıp kullanmak keyifli değil. sorun şu ki konunun kodlama kısmı benim hiç ilgimi çekmiyor. O nedenle mümkün olduğunca kodlama içermeyen veya az içeren yöntemler üzerinde duruyorum.

Bu arada joomlanın benim kullandığım frontpage-tablo yönteminden daha kolay olduğunu düşünmüyorum. En azından benim için daha kolay değil. Database ile ilgili problem çıktı mı bu sefer hiç öğrenmek istemediğin teknik ayrıntılarla uğraşmam gerekecek. Bir defasında Wordpress ve MySQL 4.0'da Türkçe karakter sorunu çıktı. Çok uğraştırıcı bir durum oldu.

Benim istediğim şey birkaç sayfalık statik bir web sitesini güzel bir şekilde kendim yaratabilemek.

[kindarmarti]

Merhaba..

Photoshop'da piksel tabanlı olduğu için bazı tasarımlarda flu'laşma olabiliyor web e aktardınğında, ama ilistrator vektorel gibi programlardan aktarırsan daha net görüntü elde edebilirsin..
Photoshop'a aktardığın dosyayı "slice tool" ile kesmek yöntemlerden biri, eğer ayrıntılı bilgi istersen p.m. at yardımcı olabilirim..

Joomla veya Wordpress hazır sistemler olduğu için birçok kolaylık getiriyor, özellikle "Wordpress","blogger" gibi sistemleri en populer yanı ise hali hazırda bulunan Page Ranking değerleri..

saygılarımla
.onur

[fatihturan]

Arkadaşlar ben bu konuda yeni başlayan veya başlamak isteyen kişilerin Frontpage veya Dreamweaver gibi WYSIWYG (what you see is what you get - ne görürsen onu alırsın) tarzı programlardan uzak durmaları gerektiğini düşünüyorum. Çünkü bu tür editörlerde çoğu işlem hazır düğmeler, menüler ve komutlar aracılığıyla yapılıyor. Dolayısıyla arkaplanda hangi kodların eklendiği veya ne işe yaradıkları bilinmeden kullanılıyor. Yani bana sorarsanız çalışmalarınızı Pspad, Aptana, Komodo Edit veya Notepad++ gibi kod düzenleyiciler kullanarak hazırlamak en mantıklısı. Sonuçta ne yaptığınızı biliyor olacaksınız.

Gelelim tablo/div meselesine. Bence şu anda tablo ile web sitesi hazırlamak hamallıkdan başka birşey değil. Bir sürü kod yazıyorsun ve karşında hantal bir çalışma çıkıyor. Örneğin World Cyber Games adlı siteye bir göz atın (alt sayfalarına da bakın). Bu site tablolarla oluşturulmuş ve sayfalar geç yükleniyor. Eğer kodlara bakacak olursanız onlar da tam bir salataya dönmüş vaziyette. Bu sitede değişiklik yapmak istediğinizi bir düşünün. Sizce o değişikliği yapana kadar kafayı yemez miydiniz?

Oysaki bu site tablo yerine div ve CSS ile hazırlanıp web standartlarına uygun olarak yapı, sunum ve davranış (structure, presentation, behavior) birbirinden ayrılsaydı böyle bir endişeye sahip olur muydum? Tabi ki hayır...

Ya aslında bir çok avantajı var web standartlarına bağlı olarak site tasarlamanın. Zaten bunlar yıllardır sağda solda tartışıldı duruldu. Tekrar bunlara değinmek istemiyorum. Bunları anlayabilmeniz için sadece Mehmet Doğan'ın bloguna bakıp web standartları ile ilgili yazıları okumanız bile yeterli.

Herneyse konumuza devam edelim. Size kısa bir reçete yazmak istiyorum. İlk önce w3schools veya xhtml sitesindeki xhtml referansları ve yine w3schools, stylegala, xhtml, cssref adlı sitelerden herhangi birinden CSS referanslarını açıp etiketlerin ne işe yaradığını ve nasıl kullanıldığını okuyup anlayın. Neyin nasıl yapıldığını bilmemiz için bu şart. Sonrasında çok iyi bir kaynak olan Web Design From Scratch adlı siteye girip baştan aşağı bütün konuları okuyun (eğer İngilizce bilginiz yeterli ise bunu yapabileceksiniz ). Hatta orada önerilen kitaparı da alıp okuyabilirsiniz. Bunların yanısıra tabi ki yerli yabancı konularla ilgili blogları takip etmek faydalı olacaktır.

Bence bu işe böyle başlanır. Ve unutmayın bir işe nasıl başlarsanız öyle gider. İleride yaklaşmakda olan web 3.0 gibi bir devir var ve bunu görerek semantik (anlamlı) web kuralları dahilinde çalışmalarımızı oluşturmalıyız.

Benden bu kadar. Nacizane görüşlerim bunlar. İsteyen bu yönde yani ileriye dönük çalışmalar üretir, istemeyen de geride kalıp ilkel tekniklerle çalışmalarını oluşturur.

[Joy]

Yeri gelmişken htmlplayground.com HTML taglarının kullanımını öğrenmek için güzel bir uygulama.

[Haydar]

erdinç tarafından gönderilen mesaj:

Benim istediğim şey birkaç sayfalık statik bir web sitesini güzel bir şekilde kendim yaratabilemek.

Eğer dinamik içerik olmayacaksa, Photoshop ile parçalayıp onu HTML'ye dönüştürmek bence sizin amacınıza uygun basit ve pratik bir yöntem. Daha önce yazıldığı gibi böyle çalışılınca gereksiz bir sürü kalabalık da arka plana ekleniyor ama başlangıç aşmasında zaman kazandıracak iyi bir çözüm diye düşünüyorum. Ama unutmayın Photoshop web tasarımı için tek başına yeterli değil. İleride mutlaka editör de kullanmak zorunda kalacaksınız. Yeni başlayanlar için tavsiyem metin editörleri yerine Frontpage veya Dreamweaver gibi görsel yönü ağırlıklı programları kullanmak. Metin editörlere göre daha hızlı geliştirme yapabiliyorsunuz.

[erdinç]

kindarmarti,

Photoshop ile yaşadığım problem piksel tabanlı olmasından dolayı değil, menülerin karışık olmasından kaynaklanıyor. Ms Paint ile yapabildiğim basit bir işlemi bile Photoshop ile yapamıyorum. Photoshop'u her açtığımda o programı yaratanları anıyorum.

Bu arada, illustrator'de oldukça iyiyim. Belki illustratorde tasarımı hazırlayıp photoshopa export edip kesim yapabilirim. Bu yöntem bana uygulanabilir gibi geldi. Yakın zamanda bir denesem iyi olacak.

fatihturan,
Senin yazdıkların bu işlere yeni başlayan ama kalıcı olmak isteyen kişiler için iyi öneriler gibi duruyor. Sen şimdi Notepad++ ile web tasarımı yapmak deyince bildiğimiz notepad ile bu işi yapanlar aklıma geldi. Böyle kişiler varmış. Açıkçası bu kişiler konuyu tamamen aşmış olmalı. Ben o kadar kaptırmak istemem. Daha mütavazi ve tasarım yönü olan konular ilgimi çekiyor. Teknik ayrıntılara fazla dalmak istemiyorum. Zaten fazlasıyla teknik biri oldum. Bu iyi değil. Örneğin renk uyumu gibi konular daha çok ilgimi çekiyor.

CSS konusunda yazdıklarına ise katılıyorum. Kitaptan konulara çalışmak bana çok çekici gelmiyor. Onun yerine eğitim videoları izlemek daha iyi bir yöntem. flash kullanmayı kısa zamanda bu şekilde öğrendim. Elimde totaltraining.com'un Dreamweaver eğitim seti var. Tamamen CSS konularına ayrılmış ve çok ayrıntılı anlatıyor. sorun şu ki, dersleri anlatan kadına gıcık oldum. Kadın isterik biri.

Başka eğitim videoları bulmak için biraz araştırma yaptım. Lynda.com sitesi bu konuda fena değil. Aylık üye olup internet üzerinden izlemek veya dersleri CD olarak satın almak mümkün. Amazon'da cd'ler satılıyor. Şu an bu seçenek üzerinde duruyorum. CSS konusuna ağırlık vermeye karar verirsem bu yolu izlemek iyi olabilir.

haydar,
yeni başlayanlara front page tavsiye etme konusunda seninle hemfikiriz. Dreamweaver'a gelince, Adobe'nin bütün ürünleri gibi sinir bozucu bir program. Oysa frontpage öyle mi? Frontpage sanki Ms Word'ün web tasarım versyonu gibi. Ne yazık ki artık o program da tarih oluyor. Yeni versyonları üretilmeyecek.

Adobe acaba programlarını Mac kullanıcılarına göre mi yaratıyor? Bütün Adobe ürünlerinde mantıksızlık ve akıl dışı bir unsur var. Hiç bir şey olması gereken yerde değil. Keşke Photoshop ve dreamwever piyasaya hakim olan ürünler olmasaydı. Keşke macromedia Adobe ile birleşmeseydi ve onlara alternatif ürünler geliştirseydi.

Fireworks'tan hiç bahseden olmadı. Fireworks acaba web tasarımına yardımcı bir araç olarak kullanılabilir mi merak ediyorum.

[FikretAkın]

@erdinç bence fireworks ve Dreamweaver sana yetecektir ben genellikle bu ikisini kullanırım. Photoshop ta ise parçalama işi ve yapılan tasarıma canlılık vermek için kullanıyorum.

Fireworks ta photohop tan daha hızlı şekilde yaparsın ancak rekler Photoshop kadar canlı çıkmayabiliyor.