Bir önceki dersimizde Fireworks programınde kullanılan panelleri ve araçları kısaca tanıttık. Bu dersimizden itibaren araçlar panelini (araçlar çubuğu) bölüm bölüm daha detaylı olarak inceleyeceğiz. Bu panelde yer alan ve sıklıkla kullanacağımız araçlarımızın ne işe yaradıklarını ve nasıl kullanıldıklarını göreceğiz. Araçlarımızın kullanımı ile ilgili resimli örnekleride yazılarımızın devamında bulabilirsiniz.

Fireworks Taşıma araçları ( Select tools) : Fireworks ‘ de 2 adet taşıma aracımız bulunur. Bunlar işaretçi Aracı (V) ve Alt seçim aracı (A)’ dır.

Fireworks programında çalışma alanımız üzerindeki herhangi bir grafik yada katmana bir efekt, filtre vb. bir etki yapmak istediğimizde ilk olarak mutlaka işaretçi aracıyla o grafik yada katmanı seçili hale getirmeliyiz.  İşaretçi aracıyla üzerine tıkladığımızda etrafında beliren mavi çizgiler o grafiğin seçili hale geldiğini gösterir. Aynı zamanda işaretçi aracı yardımıyla belgemizdeki grafiklerin yerini değiştirip, taşıyabiliriz. İşaretçi aracıyla bir grafiğe tıklamadan önce klavyeden alt tuşuna basarsanız tıkladığınız seçili bir kopyasını oluşturup onu almış olursunuz. Bu durumda fareyi hareket ettirdiğinizde kopyaladığınız katmanında hareket ettiğini görürsünüz.

Araçlar panelindeki bazı araçların yanında aşağı doğru küçük siyah bir ok olduğunu göreceksiniz. Bu ok işareti o aracın yanında gizli durumda bulunan benzer araçlarında olduğunu belirtir. Bu araçları görüntülemek için yanında ok işareti bulunan araçlardan herhangi birisinin üzerindeki iken farenin sol tuşu ile 2sn kadar basılı tutmanız yeterli olacaktır. Ölçek aracının olduğu bölümde resimde de görüldüğü ölçek aracı dışında 3 tane daha benzer aracımızın gizli durumda olduğunu görebiliyoruz. Şimdi bu araçların ne işe yaradıklarına bakalım.

Ölçek aracı : Fireworks resmimiz seçili iken ölçek aracına tıkladığımızda aşağıdaki resimde görebileceğimiz gibi resmimizin etrafında 8 farklı nokta belirir. Bu noktalara tıklayarak resminizin genişlik, yükseklik değerlerini değiştirerek bir anlamda resmimizin ölçeğini değiştirmiş oluyoruz.

Eğriltme Aracı : Resmimiz seçili durumda iken eğriltme aracına tıkladığımızda resmimizin etrafında yine 8 nokta belirecektir. Bu noktaları kullanarak resmimiz üzerinde doğrusal olarak eğriltme işlemleri yapabiliriz. Yani resmimizi geometrik olarak yamuk yada türevi şekillere sokmak istersek bu araç işimize yarayabilir. Aşağıda eğriltme aracı ile yaptığım değişikliği görebilirsiniz.

Deformasyon Aracı : Eğriltme aracından farklı olarak resmi daha esnek bir yapıda eğriltmemizi sağlıyor. Yani eğriltme aracında sadece ekranda beliren noktalar arasında bir daraltma genişletme yapabiliyorken, deformasyon aracı yardımıyla köşelere doğruda eğriltme işlemi uygulanabilmektedir. Deformasyon aracının kullanım örneğinide aşağıda görebilirsiniz.

9 Dilimli Ölçekleme Aracı : Sanırım fireworks’ te kullanımı ve anlatması en zor araç 9 dilimli ölçekleme aracıdır. Resmimiz seçili iken bu araca tıkladığımızda isminde de olduğu gibi resmimizi 9 eşit parçaya bölüyor. Ölçek aracında olduğu gibi bu araçtada resmin etrafında oluşan noktalar yardımıyla resmin genişliğini ve yüksekliğini değiştirebiliyoruz. Fakat bu araçta farklı olarak örneğin orta sağdaki nokta yardımıyla resmin genişliğini azalttığımızda resmin sadece orta sütunundaki 3 kareyi küçültüyor. Sağ ve sol sütundaki kareleri ise hiç birşekilde değiştirmiyor. Böylece resmin sadece bir bölümünü ölçekleyip, geriye kalan diğer bölümlerini ise orjinalinde olduğu gibi bırakmış oluyoruz. Örneğimiz aşağıda :

Bu bölümde son olarak kırpma aracını ve onun altında gizli olarak yer alan alanı dışa aktarma araçlarını inceleyeceğiz.

Kırpma Aracı : Kırpma aracı ile resminizin üzerinde bir alanı belirliyoruz. Seçili olan bu alan üzerinde çift tıkladığımızda resmin seçili alan dışında kalan kısmını siliyor, geriye sadece seçili olan bölümünü bırakıyor. Aşağıdaki 2 resimde bu iki adımı görebilirsiniz.

Buradaki seçili olan alan üzerine çift tıkladığımızda ise aşağıdaki resimdede görüldüğü gibi diğer alanların silindiğini göreceksiniz.

Alanı dışa aktarma aracı : Bu bölümde yer alan son aracımız alanı dışa aktarma aracı. Bu araç ise resmin üzerindeki istediğimiz herhangi bir alanın fotoğrafını çekip bize ayrı bir dosya olarak kaydetme imkanı sunar. Böylece resmin orjinali değiştirmemiş ve kaybetmemiş oluruz. Resmin üzerinde istediğiniz bir alanı işaretleyip, seçili bölge üzerinde çift tıkladığınızda, açılan pencere ile belirleyeceğiniz dosya formatında ve istediğiniz isimde dışa aktarabilirsiniz.

ÖDEV : Son olarak bu derste öğrendiğimiz araçları kullanarak aşağıdaki reklam panosu içerisine kendi resminizi eklemeyi deneyebilirsiniz.

Bu ödevle ilgili benim elde ettiğim örnek çalışma ise aşağıda : )

İlk dersimizde kullanacağımız programları ve sıklıkla bahsedeceğimiz kelimelerin açıklamalarını yapmıştım. Kişisel web sayfası hazırlama ile ilgili bu ikinci dersimizde de dreamweaver ve fireworks programlarına başlamadan önce temel web tasarımı bilgilerini vermenin faydalı olacağını düşünüyorum. Bu derste html üzerinde duracağım. Her ne kadar sonraki derslerde html ile sürekli kod yazmayacak olsakta yaptımız sayfaların nasıl oluştuğunu, arka plandaki kodların ne anlama geldiğini bilmenizde yarar var. Yeteri kadar html bildiğini düşünen arkadaşlar bu dersi atlayabilirler. Özellikle html’ yi ilk defa duyan arkadaşlar içeri buyursunlar.

Birçok kaynakta html ‘ nin bir programla dili olduğu söylensede Html aslında bir işaretleme dilidir. Etiket (tag) denilen kod parçacıklarının bir araya gelmesi ile ziyaret ettiğimiz web sayfaları ortaya çıkar. Yani aslında her web sayfasının arka planında kodlar vardır.

Html dilinin yetersiz kaldığı durumlarda imdadına php, asp, java script, css vb. diller yetişir. Ama hepsinin temelinde ve öncesinde html olduğunu unutmamız gerekiyor. Web sitelerinin atası diyebiliriz : )

Html ‘ nin eksik tarafı ise html ile hazırlanan sayfalarda sadece yazıları biçimlendirmemize ve resimler eklememize izin verir. Yani sadece html ‘ yi kullanarak tanıtım sayfasının ötesinde ziyaretçi defteri, anket, forum gibi sayfalar hazırlayamazsınız. Bu özellikleri sitesinde görmek isteyen web master adayı arkadaşların html’ den sonra asp yada php’ den birisini seçmesi gerekecek.

Html dili kişisel web sayfası hazırlarken ne işimize yarayacak?

Biz dreamweaver programını kullanacağımız için bu program html kodlarını kendisi oluşturacak. Ama css yada java script kodlarını sayfamızın içerisine gömmemiz gerektiğinde yada dreamweaver programının olmadığı bir bilgisayarda sayfamızı güncellemek istediğimizde html çok fazla işimize yarayacaktır. O zaman içinizden bana bir teşekkür etseniz yeter : )

Bir html sayfası oluşturmak için dreamweaver, frontpage gibi gelişmiş özellikleri olan tasarım programlarını kullanabileceğimiz gibi windows’ un not defterinide kullanabilirsiniz. Biz bu dersimizde küçük bir uygulama ile not defterinde temel bazı bilgileri vereceğiz. Zaten tek bir sayfadaki bu kısa yazı ile html uzmanı olmanız söz konusu olamaz. Eğer html konusunda detaylı bilgi almak isterseniz yada html komutlarının kullanımını ve örneklerini ayrıntılı olarak görmek isterseniz buraya tıklayarak daha önce hazırlamış olduğum html eğitim cd’ sini bilgisayarınıza indirerek görüntülü olarak oradan çalışabilirsiniz.

Basit bir html sayfası oluşturmak için masaüstünde sağ tıklayın, açılan menüden Yeni > Metin Belgesi diyerek not defterini masaüstüne getiriyoruz. Şimdi not defterini açarak sayfamızı kodlamaya başlayabiliriz.

İlk olarak not defterine aşağıdaki kodları yazalım.

	<html>
        <head>
	  <title>İlk web sayfam - www.nuriavci.com</title>
	</head>

        <body>
	Kişisel Web Sayfama Hoşgeldiniz...
	</body>
	</html>

Sonrasında Dosya > Farlı kaydet menüsünden dosyamıza index.html ismini verelim. ( Buradaki html uzantısı çok önemli.) Şimdide html uzantılı dosyayı nereye kaydettiysek çift tıklayarak açalım ve ilk web sayfamızı görüntüleyelim.

Son olarak sayfamızdaki temel html kodlarını açıklayalım. Buradaki < ve > işaretleri arasına yazılan her bir komuta etiket dediğimizi bir kez daha hatırlatalım.

<html> – Bütün html sayfaları bu etiket ile başlar. web sayfasının başladığını işaret eder.

<head> – Head etiketi sayfanın baş bölümünü işaret eden etiketdir. Sayfa ile ilgili açıklayıcı bilgiler burada yer alır.

<title> – Başlık etiketidir. Buraya yazdığınız yazılar tarayıcının en üstünde görüntülenecektir.

</title> – Başlık etiketi kapatmak için kullanırız. Üstteki başlık etiketinden farkı önündeki / işaretidir. Açılış ve kapanış başlık etiketleri arasına yazılan yazı tarayıcının en üstünde görüntülenir. Google tarafından title etiketi çok büyük öneme sahiptir.

</head> – Baş etiketini kapatır.

<body> – Sayfa içerisinde görüntülenecek olan yazılar ve resimler bu etiketten sonra eklenir. Sayfanın gövde bölümünü oluşturur.

</body> – Sayfadaki gövde bölümünün bittiğine işaret eder.

</html> – Web sayfasının bittiğini işaret eder. Bütün sayfalar bu etiket ile sonlanır.

Yukarıdaki açıklamalar ilk seferde kısa ve karışık gelebilir. Ama genel hatlarıyla web sayfalarının <html> etiketiyle başlayıp </html> etiketiyle bittiğini bilmeliyiz. Ayrıca sayfamızı baş ve gövde olmak üzere iki bölüme ayırıyoruz. Baş bölümünü <head> ve </head> etiketleri arasına yazdıklarımız oluşturur. Sayfanın başlığıda <title> ve </title> etiketleri arasında baş bölümünde yer alır. Sayfaların görünen yüzü ise <body> ve </body> etiketleri arasında yer alan kısmıdır.

Bu açıklama soru işaretlerini biraz azalttı ise sayfamızdaki kodları tekrar görebilmek için html uzantılı dosya üzerinde sağ tıklayıp birlikte aç diyerek not defterini seçelim. Böylece kodlarımıza tekrar ulaşmış olduk. İstediğiniz düzenlemeyi yapıp dosyadan kaydet dedikten sonra sayfayı yeniden açtığınızda değişikliklerin sayfaya yansıdığını göreceksiniz.

Ziyaret ettiğiniz bir sayfanın html kodlarını görmek isterseniz sayfa üzerinde sağ tıklayarak kaynağı görüntüle diyebilirsiniz. Not defteri ile birlikte sayfa kodları karşınıza çıkacaktır. Ziyaret ettiğiniz sayfaya göre bu kodların çokluğu sizi şaşırtabilir hatta bazılarınızı korkutabilir : )

Eğer bu satıra kadar geldiyseniz, izninizle size küçük bir ödev vermek istiyorum : ) Aşağıdaki etiketleri <body> ve </body> etiketleri arasına yazdığınız bir paragraf yazının aralarına ekleyin. Bakalım ne gibi değişiklikler göreceksiniz. Etiketlerin hepsinde kapanış bölümü olmak zorunda değil, eğer varsada doğru şekilde kullanmaya özen gösterin.

<br>

<b>……..</b>

<u>…….</u>

<i>……..</i>

<font color=”red”>…….</font>

<font size=”20″>…….</font>

<font color=”red” size=”20″>…….</font>

<center>…….</center>

<h1>…… </h1> bu etiketi h6 ya kadar kullanabilirsiniz. Ama açılış ve kapanış bölümlerinin aynı olmasına dikkat edin.

Şu ana kadar işin sıkıcı kısmını geride bıraktığımızı bilmenizi isterim. Ödevde bittiğine göre artık bir sonraki derste görüşmek üzere.

Kişisel web sitesi hazırlamayla ilgili küçük ipuçları vermesi açısından daha önce (geçen Mayıs’ ta) bir yazı yazmıştım. Bu yazı ile ilgili hergün bir çok soru geliyor. Aynı yada benzer iletileri tekrar tekrar cevaplamak zorunda kaldığım için kişisel bir web sayfasını sıfırdan nasıl hazırlayacağınızı 5-6 bölümlük bir yazı dizisi ile anlatmaya çalışacağım. Bu yazı dizisi sonunda daha önceden hiçbir web bilginiz olmasa bile bir kişisel web sayfası sahibi olacağınıza inanıyorum. En azından ben bunun için elimden geleni yapacağım : ) Kişisel web sayfası hazırlamaya geçmeden önce yazımızın devamında, sitemizi hazırlarken kullanacağımız programların isimlerini ve kullanım amaçlarına değineceğiz.

1- Macromeadia Dreamweaver : Dreamweaver programını sayfalarımızı tasarlamak için kullanacağız. Bir çok alternatifi olmasına rağmen bana göre tartışmasız en iyi tasarım programıdır. Word programını kullanır gibi dreamweaver’ da sayfalarınıza resimleri, yazıları, linkleri (bağlantıları) ekleyebileceksiniz. Ben dreamweaver’ in 8 versiyonunu kullanacağım. Anlatımlarımıda buna göre yapacağım. Alt yada üst versiyonlarında menüler farklılık gösterebilir. Bu durumda yorum alanına mesaj yazarsanız alternatif yöntemleride yazımıza eklemiş oluruz.

2- Macromedia Fireworks : Sitemizde kullanacağımız grafikleri düzenlemek için Macromedia Fireworks programını kullanacağız. En büyük rakibi tabiki Photoshop. Ben fireworks ‘ ün hergeçen yıl aradaki farkı kapattığına inanıyorum. Resimlerimizi küçültmek, biçimlerini değiştirmek, gerektiğinde animasyonlar hazırlamak, logo, banner, resim galerisi hazırlama gibi uygulamalarda fireworks’ ü rahatlıkla kullanabilirsiniz. Bizde zaten sitemizi hazırlarken bu saydığım özelliklerin bir çoğunu kullanmak zorunda kalacağız.


3- FileZilla :Web sitemizi hazırladıktan sonra yayınlamak için bir ftp programına ihtiyacımız olacak. Bu noktada açık kaynak kodlu file zilla programını kullanacağız. Buraya tıklayarak programı bilgisayarınıza indirebilirsinsiz.

4- Alan Adı ( Domain ) : Eğer alan adı ve domain kelimelerinden bir şey anlamadıysanız web sitenizin adresi olarakta açıklayabiliriz. Web sitenizi hazırladıktan sonra yayınlamadan önce bir alan adına ihtiyacınız olacak. Alan adlarının yıllık olarak yaklaşık 10-15 TL civarında bir maliyeti vardır.

Alan adınını alırken com, net veya org uzantılarından birisini tercih etmeye özen gösterin. Çünkü dünya genelinde en çok kullanılan ve buna bağlı olarak en akılda kalıcı site uzantıları bunlardır.

.COM 83,141,100 adet.
.NET 12,535,348 adet.
.ORG 7,863,451 adet.
.INFO 5,361,486 adet.
.BIZ 2,011,663 adet.
.US 1,581,658 adet.
.MOBI 944,758 adet.
.NAME 234,011 adet.
.TEL 222,813 adet.
.ASIA 214,247 adet.
.TRAVEL 136,032 adet.
.PRO 41,501 adet.
.AERO 16,353 adet.
.COOP 5,812 adet.

TOPLAM 114,310,233 adet domain kayıtlı.
Bu bilgiler ENOM tarafından yayınlanan bilgilerdir.

Ayrıca adresinizin değişken olan kısmınında akılda kalıcı ve kısa olmasına özen gösterin. Yani bilgisayarogretmeninuriavci.com yada nuriavci.us alan adının yerine ilk akla gelen ad ve soyadınızdan oluşan www.nuriavci.com gibi bir alan adı seçebilirsiniz. Size ulaşmak isteyecek insanlar zaten ilk olarak arama motorlarında ad ve soyadınızı yazacaklardır. Yazı dizimiz sadece kişisel sayfa hazırlamaya yönelik olacağı için alan adı tavsiyeleri için sadece ad ve soyad kombinasyonu üzerinde duruyorum. Aksi durumda alan adı alırken dikkat edilmesi gereken daha birçok ince nokta var Belki onlarıda başka bir yazıda işleriz.

Alan adınızı kontrol edebileceğiniz ve alabileceğiniz bir kaç site adresi tavsiye etmek istiyorum. Bunlar arasından birisini seçebilirsiniz. Yada internette başka şirketleri araştırabilirsiniz.

www.kebirhost.net
www.isimtescil.net
www.turkticaret.net
www.godaddy.com

5- Hosting (Web Alanı) : Hosting hizmeti hazırlamış olduğunuz web sayfanızın dosyalarının internet üzerinde barındırılma hizmetidir. Yani internete bağlı bir server bilgisayardan 100Mb kadar bir web alanı kiralamanız gerekecek. Bunun içinde hizmeti alacağınız şirkete göre 20 TL-50TL arasında yıllık bir ücret ödemeniz gerekecek. Hosting hizmetinide yine yukarıdaki adreslerden birisinden alabilirsiniz. Hatta mantıklı olan ikisini tek seferde aynı yerden almak olabilir. Ama ben size maliyeti azaltmak adına bir fikir vereyim :

http://www.hostbul.net web sitesinden Türkiye’ de host hizmeti veren hemen hemen bütün şirketlerin bilgilerine ulaşabilirsiniz. Hatta kullanıcı yorumlarına bakarak değerlendirebilirsiniz.

Ama benim bu siteyi tavsiye etmemin asıl sebebi siteye üye olarak host şirketlerinin görebileceği bir mesaj yazabilirsiniz. Mesajınızda web tasarıma yeni başladığınızı ve ücretsiz olarak size web hizmeti verebilecek bir şirket aradığınızı yazarsanız en az 8-10 şirketten size mesaj gelecektir. Tabi bu şirketlerden host hizmeti almanız sorun olmayabilir ama domain alırken dikkatli olun. Herşeye rağmen domain alırken yukarıda verdiğim 4 adresteki gibi büyük ve tanınmış şirketleri tercih etmeye çalışın.

Ben web tasarıma ilk başladığımda hostbul.net sitesine mesajımı yazdım ve yaklaşık 1 yıl boyunca ücretsiz olarak host hizmeti aldım. Zaten sizde o sürede yeterince tecrübe kazanmış olursunuz.

Şimdilik bu kadar. Alan adı ve host işlemlerini siteyi hazırladıktan sonrayada bırakabilirsiniz. Siteyi tamamlamanız belki 1 hafta belki 1 ay sürer. O sürede site için boşuna para vermiş olursunuz

Üniversite 2.sınıfta iken almış olduğum ilk domain adresim 1 yıl dolduğunda tecrübesizliğimin neticesinde boşa düşmüştü. Otomatik olarak alınan domain adresimin tekrar boşa düşmesi için 3 yıl bekledim : ) Geçen yıl geri aldığım domain adresini fırsat bulup değerlendirememiştim. Geçtiğimiz hafta itibari ile yine wordpress alt yapısını kullanarak web sitesine yayına koydum. Bilişim, Bilgisayar, İnternet, Script, Template, Web Tasarım, Grafik… vb konularda yazıların yer alacağı web adresine gitmek için burdan buyurun.

Hergün web sayfama google arama motorundan “kişisel web sitesi örnekleri”, “kişisel web sitesi nasıl yapılır?” gibi kelime kombinasyonları ile giriş yapıldığını görüyorum. Bunun üzerine bende sizlere belki fikir verir düşüncesiyle beğendiğim kişisel site örneklerini ve bu siteleri nasıl hazırlayabileceğinizi anlatan bir yazı hazırlamaya karar verdim.

Burada kişisel bir sitenin nasıl hazırlanacağını sıfırdan sonuna kadar anlatmam mümkün olmayacağı için size sadece hazırlamak ıstediğiniz site yapısına göre başlangıç noktası hakkında fikir verebilirim. İlk olarak kişisel web sitenizde neye yer vereceksiniz onu belirlemeniz gerekmektedir.

Örneğin sadece otobiyografi, iletişim bilgileriniz gibi düz yazılar ve resimlerinizden oluşan bir sayfa yapmak isterseniz windows’ un not defteri programı bile size yetebilir. Tabi bunun için html bilgisine ihtiyacınız var. Eğer ki html bilmiyorsanız ve yinede basit yapıda statik yani kullanıcı etkileşiminin olmadığı bir sayfa hazırlamak istiyorsanız çözüm olarak size web page maker’ i önerebilirim.

( Web Page Maker Programının 15 günlük deneme sürümünü indirmek için tıklayınız )
Bu programı kullanarak şablonları kullanarak hızlı bir şekilde web sayfalarınızı oluşturabilir, bu sayfalara resim, animasyon ve yazılarınızı ekleyebilir ve son olarak sayfaları linkler aracılığıyla birbirine bağlayarak sitenizi yayına hazır hale getirebilirsiniz. Bu program ile sitenizi nasıl hazırlayacağınızı ve web page maker ile hazırlanmış kişisel site örneklerini internette kolaylıkla bulabilirsiniz.

Eğer ki sitenizde yönetici paneli , anket, forum, üye girişi, yorum ekleme, haber ekleme vs. olsun isterseniz (ki bu tür web sayfalarına dinamik sayfalar denir) bu durumda php yada asp uzantılı bir sayfa hazırlamanız gerekir. Eğer sayfayı oturup kendim hazırlayacağım diyorsanız uzun bir yol sizi bekliyor demektir. Önce html, sonra asp yada php den birisini seçerek onu öğreneceksiniz. Bu programların dışında grafiklerinizi düzenlemek için fireworks yada photshop, sitenizi kodlarını düzenlemek için de not defterinden çok daha gelişmiş olan tasarım programlarından birisini (dreamweaver, frontpage) öğrenmeniz gerekecektir. Uzun bir yol demiştim

Tabi bunun da kolay bir yolu var. Çok fazla html, php, asp ve program bilgisi olmadan da dinamik sayfalar hazırlayabilirsiniz. Bu da ingilizcesi Cms diye kısaltılan içerik yönetim sistemleri sayesinde mümkündür. İçerik yönetim sistemini her şeyiyle hazır olan bir web sitesi olarak düşünebilirsiniz. Cms siteyi kurduğunuzda anket, forum, üyelik, yönetici paneli, haber, yorum vs. otomatik olarak sitemize eklenecektir. Siz bu modüllerin üzerinde bazı değişiklikler yaparak sitelerinizi özgünleştirebilirsiniz. İçerik yönetim sistemlerine örnek olarak da Php nuke, drupal, joomla yı sayabiliriz. Bu saydıklarım açık kaynak kodlu, php ile hazırlanmış en yaygın cms sistemlerindendir.

Cms kullanmanızın avantajlarından biriside açık kaynak kodlu olduğu için 1000 lerce tema (site görünümü), 1000 lerce modül (site bileşeni) bulabilirsiniz. Bunları ayrı ayrı birleştirip aynı site alt yapısını kullanarak 100lerce farklı site yapabiliriz.

Kullanacağınız site alt yapısına karar verdiğinizde Türkiye’ deki destek sitelerinden ayrıntılı yardım alarak kurulumdan başlayıp geliştirme aşamasına kadar hazırlayabilirsiniz.

Sitenizi tam anlamıyla hazır hale getirdikten sonra, web sitenizi yayınlamak için bir domain (alan adı=adres), bir de web alanına (host) ihtiyacınız olacak. Bunlar için profesyonel bir hizmet almak için yıllık 30-50 tl gibi bir ücret ödemeniz gerekecektir. Parayı ödeyerek alacağınız ftp adresi, kullanıcı adı ve şifresi ile size sağlanan alana bağlanarak hazırladığınız dosyaları internete yüklediğinizde siteniz hazır olacaktır.

Buraya kadar anlattıklarımız genel anlamda yol göstermek içindi. Eğer ki bu anlattıklarım size çok karışık gelir işin içinden çıkamazsanız msn adresim : nuriavci ( at ) gmail.com

Kişisel Site Örnekleri:

http://www.caferkara.org

http://www.baranbayuk.com

Not : Kişisel web sitenizi yorum olarak eklerseniz bende buraya web sitenizi örnek kişisel web sitesi olarak ekleyebilirim. Yorumlarınızdaki siteler içerisinden sadece kişisel olanlarını buraya örnek olarak ekliyorum. (Diğer siteleride ziyaretçilerimiz, yorum gönderen ziyaretçimizin isminin üzerine tıklayarak görebilirler.) Böylece kişisel site örneklerini çoğaltmış oluruz. Hemde siz sitenizi tanıtma fırsatı bulmuş olursunuz.

Bu yazımızın devamında web sitelerimizde kullanmak üzere 780*140 px boyutunda basit iki banner hazırlayacağız.Banner örneğimiz için ilk olarak File menusunden New sekmesine gelerek 780 genisliginde, 140 yüksekliginde bir belge açıyoruz. Daha önceden buldugumuz resmimizin yüksekligi 140 olacak sekilde ayarlıyoruz. Bunun için Modify menusunden Canvas/image Size sekmesini kullanabilirsiniz. Daha sonra bu resmi kopyala yapıstır teknigi ile yada file menusunden import sekmesini kullanarak 780*140 boyutunda açmıs oldugumuz dosyaya ekliyoruz. Belgemizin arka plan rengini de properties panelindeki canvas sekmesinden ayarlayabiliriz. Canvas degerine tıkladıgımızda, fireworks mouse imlecini dokundurdugumuz yerdeki rengi arka plan rengi olarak ayarlanacaktır. Bu nedenle ekledigimiz resmimizi kullanarak uyumlu bir arka plan rengi ayarlayabilirsiniz. Resmimizin belge üzerinde daha güzel bir geçis olusturması için bir geçis efekti kullanacagız. Bunun için belgemizin üzerindeki resim seçili iken Commands / Creative / Fade image sekmesinden istedigimiz efekti ekleyebiliriz. Son olarak da text arac çubugunu kullanarak istediginiz renk, font ve boyutta yazılar ekleyip resminizi export menusunden kayıt edebilirsiniz. Resminizin formatını Optimize panelinden degistirebilirsiniz. Hazırladığımız bannerlerimiz :