Photoshop CS3 & Dreamweaver CS3: Integration
Boyut: 671.52 Mb
Approximate Run Time: 172 minute

With Adobe® Photoshop® CS3 and Adobe® Dreamweaver® CS3, creating an Internet site from scratch has never been easier! Rafael “RC” Concepcion ­ NAPP education and curriculum developer and regular contributing writer for Layers magazine ­ shows you how in this easy-to-follow DVD.
As many pros will tell you, designing a website that effectively communicates with your audience can be harder than it appears. Some websites are attractive, but hard to use ­ while others are easy to navigate, but visually boring. In this DVD, RC shows you how the newest and most powerful features in Adobe Photoshop CS3 and Adobe Dreamweaver CS3 can help you build stunning, fully functional websites with absolutely no programming involved.

In this DVD you\\\’ll discover:
* The newest features in Photoshop CS3 and Dreamweaver CS3
* Fundamentals of designing eye-catching splash pages in Photoshop CS3
* Saving and exporting Photoshop CS3 documents into Dreamweaver CS3
* How to define an Internet site using Dreamweaver CS3
* Simple techniques for creating files and folders
* Tips for creating Flash Web galleries using Adobe Media Gallery
* How to FTP your new website
* Techniques for establishing a smooth, efficient Web design workflow

Created for art directors, Web designers, site developers, and design students, Adobe Photoshop CS3 and Adobe Dreamweaver CS3: Creative Integration gets you on your way to designing pro-quality Web pages that will thrill and astound your clients.

Download from FileFactory
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15

Or
Download from Easy-Share
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15

Posted by Nuh | No Comments »

Çizim Araçları

Serbest Çizim Aracı : Bu araç bir kalem kullanır gibi ekranda çizim yapmanızı sağlar. Aracın seçeneklerine ulaşmak için Araç kutusu üzerindeki simgeye çift tıklayıp çizim aracınızın tipini ve ayarları değiştirebilirsiniz. Siz değiştirene kadar son ayarlarınız geçerli olacaktır.

Serbest Çizgi Tipleri : Araç kutusu üzerindeki simgeye çift tıklayıp çizim aracınızın tipini ve ayarlarına gelin burada üç seçenek vardır.

1- Freehand
2- Variable stroke
3- Calligraphic pen

1- Freehand : standart kalınlıkta serbest çizimler yapmak için kullanılır. Mausla sayfa üzerinde konumlanıp, mausa basılı tutarak sürükleyin, çiziminiz bittiğinde elinizi maustan çekerseniz çiziminizi tamamlamış olursunuz. Çizim sırasında yanlış çizdiğiniz bölümü parmağınızı fare tuşundan çekmeden Command tuşuna basıp çizgi üzerinde geri gelerek silebilirsiniz. Çiziminizi sürdürmek için Command tuşunu bırakarak devam edebilirsiniz. Çizim sırasında kullanabileceğiniz iki tuş daha var. Shift ve Option. Parmağınızı maustan çekmeden Option tuşuna basarsanız, sürüklediğiniz yöne doğru çizginin düz bir hat üzerinde takip ettiğini göreceksiniz.

Eğimin 45-90 gibi derecelerde olmasını isterseniz aynı zamanda Shift tuşuna basın. Eğer çizime serbest elle devam edecekseniz önce elinizi Option tuşundan sonrada Shift tuşundan çekin ve maustan parmağınızı kaldırmadan çizime devam edin.

2- Variable Stroke : Bilgisayarınıza basınç duyarlı bir tablet bağlı ise kullanabileceğiniz seçenektir. Bu seçenekte alt bölümde yer alan Minimum alanına çizginin alabileceği en ince değeri, Maksimum’a ise en kalın değeri yazarsınız. Bu şekilde kalemi tablet üzerinde değişik kuvvetlerde bastırarak gezdirdiğinizde aynı çizgi üzerinde değişik kalınlıklar oluşur. Sayfa üzerinde oluşan çizgi artık kapalı bir çizimdir. Tabletiniz yoksa çizgi kalınlığını çizim sırasında klavyeden 1 ve 2 tuşlarına basarak ayarlayabilirsiniz.

1 tuşu çizgi kalınlığını 1/8 oranında inceltir,
2 tuşu ise aynı oranda kalınlaştırır.

3- Calligraphic Pen : Serbest çizimi kesik uçlu bir kalemle yapabilmenizi sağlar. Fixed [Sabit kalınlık] ya da Variable [Değişken kalınlık] olarak kullanabilirsiniz. Alt taraftan vermiş olduğunuz kalınlık ve açı sayesinde kaligrafik çizimler oluşturabilirsiniz. Penceredeki Tight Fit seçeneği çizimlerin daha esnek yapılmasını sağlar. Bu seçenek işaretli iken çok hassas el titremeleriniz bilgisayar tarafından algılanmaz ve daha düzgün çizimler yapmanızı sağlar. Draw dotted line seçeneği çizim yaparken oluşacak şekli tarama tipinde gösterir. Auto remove overlap seçeneği çizimde üst üste gelen bölgelerin kesişim çizgilerinin silinmesini sağlar.

Bezigon Çizim Aracı : Bu araç, mausla tıkladığınız ilk nokta ile ikinci tıkladığınız nokta arasında düz çizgiler oluşturmanıza yarar. Her tıkladığınız nokta düz nokta olarak oluşur. Eğer Option tuşu basılı olarak tıklarsanız yönlendirme çubuklu nokta oluşur. Açılan yönlendirme çubuklarını daha sonra ok aracı yardımı ile yönlerini değiştirebilirsiniz. Kontroltuşu basılı olarak tıklarsanız bağlantı noktası oluşur. Shift tuşu basılı tıklarsanız noktalar arasındaki çizgilerin eğimini Constrain değerine göre oluşturur

Divit Ucu ve Nokta Yönetimi : Sayfa üzerinde oluşturacağımız çizimlerde düz ve eğri çizgileri oluşturmak için kullanılır. Tüm eğri ve düz çizimlerde kullanılan temel araç olan Divid uç, sayfa üzerinde mausla tıklama yöntemi ile çalışır.

Yönlendirme Çubukları : Divit ucunu kullanırken Maus yoluyla tek tıklama çizimdeki (E) Düz noktaları oluşturur. Eğri çizgi oluşturmak için fare ile sayfa üzerine tıklayıp (D) sürükleme yaparız. Birinci tek tıklama ile ikinci tıklama (D) sürükleme ile elde edilen çizimin iki nokta arasındaki(A) çizgiye Path (İz) adı verilir. Eğri çizgi oluştururken ortaya çıkan çift taraflı çubuklara (B) Yönlendirme Çubukları adı verilir. Bu çubukların görevi bir önceki ve bir sonraki çizginin eğriselliğini kontrol etmektir. Düz çizgiler ise noktaların yerini belirtmek amacıyla tek bir tık ile çizilir. Divit ucu ile oluşturulan iki nokta düz bir çizgi ile birleştirilir. Noktalar üç çeşittir.

1- Eğri Nokta, noktadan önceki veya sonraki İz’in (Path) eğriselliğini eşit (terazinin iki kefesi gibi) kontrol eden Yönlendirme çubuklarına sahiptir.
2- Köşe Nokta, noktadan önceki veya sonraki İz’in (Path) eğriselliğini ayrı ayrı kontrol eden yönlendirme çubuklarına sahiptir.
3- Bağlantı Noktası, düz bir çizginin eğri bir çizgiyle bağlantı kurmasında birleştiği nokta olarak kullanılır.

Örnek Çalışmalar :

1- Sadece tıklayarak bir önceki nokta ile tıkladığımız nokta arasında düz bir çizgi oluşur.
2- Tıklayıp fare tuşunu basılı tutarak sürüklediğinizde, bir önceki ve sonraki noktaya bağlı çizgilerin eğriselliğini ayarlayan yönlendirme çubukları oluşur. İstediğiniz eğriliği elde ettikten sonra parmağınızı fare tuşundan çekin.
3- Noktayı oluştururken Option tuşuna basılı olarak sürükleme yaparsanız, oluşan yönlendirme çubuğu sadece kendisinden sonra gelen noktanın çizgisinin eğriselliğini belirler.
4- Eğri çizim oluştururken parmağınız hala fare tuşundayken Option tuşuna basılı tutarak devam ederseniz, birbirinden bağımsız hareket eden yönlendirme Çubukları elde edersiniz.
5- Ctrl tuşuna basılı olarak tıklayıp sürüklediğinizde belli bir açıya oturmuş tek yönlendirme çubuğu oluşur. Bu nokta bir bağlantı noktası olur.
6- Bir eğri çizgiyi takip eden düz bir çizgi oluşturmak istiyorsanız, yönlendirme çubuklarının boşta kalan uzantısını yok etmeniz gerekir. Bunun için çift taraflı yönlendirme çubuklarına sahip nokta üzerine bir kere tıklamanız yeterlidir. Tıkladığınız bir sonraki noktayla bu nokta arasında düz bir çizgi oluşur.
7- Çizim sırasında noktanın yerini değiştirmek istiyorsanız, fare tuşu basılı iken Command tuşuna basılı tutup noktayı sürükleyin. Command tuşundan parmağınızı çektiğinizde noktanın sayfa üzerindeki yeri sabitleşir.
8- Oluşturmuş olduğunuz bir köşe noktasına yönlendirme çubukları ekleyerek çizgiyi eğriselleştirmek isterseniz. Divit Ucu aracı ile o nokta üzerine gelip Option tuşuna basılı tutarak sürükleyin.
9- Bir çizginin eğriselliğini yönlendirme çubuklarıyla ayrı ayrı oynamadan değiştirmek istiyorsanız, önce çizgi üzerine gelip fare tuşunu basılı tutun, sonra Option tuşunu basılı tutarak sürükleyin. Önce Option tuşuna basıp sonra fare tuşuna basarak sürükleme yaparsanız, çiziminizin bir kopyasını çıkartmış olursunuz.

Çizim Tanımı : Sayfanız üzerindeki noktalardan oluşan bir çizimi Ok (Pointer) ile bir kere tıklayarak obje olarak seçebilirsiniz. Çizimi seçtikten sonra Inspector üzerindeki Eleman Tanım düğmesine tıklarsanız, çizim tanımını elde edersiniz. Points bölümü seçmiş olduğunuz çizimin sahip olduğu nokta sayısını belirtir. Even/odd Fill kapalı bir şeklin üst üste binen bölümlerinin şeffaf olmasını sağlar. Closed seçeneğini işaretleyerek, çizimin açık olan uç noktalarının otomatik olarak birleşip kapalı bir şekle dönüşmesinin sağlayabilirsiniz. Flatness bölümü ise çizimi sadeleştirmek için kullanılır. Flatness bölümüne verdiğiniz değeri ekranda göremezsiniz. Ancak baskı sırasında etkisini gösterir.

Noktaları Seçmek : Bir noktayı seçmek seçili bir çizimin üzerindeki nokta üzerine konumlanın. Ok (Pointer) ile bir tıklayın, birden fazla nokta seçmek için Shift tuşuna basılı tutun ardından sırayla noktalar üzerine tıklayın. Seçili objenizin nokta tanımlarını, Inspector paletindeki Eleman Tanım düğmesini tıkladıktan sonra elde edebilirsiniz. Point type bölümünde üç tip nokta bulunur. Bağlantı noktası düz bir çizginin eğri bir çizgiyle birleştiği noktadır. Seçili bir noktanın tipini bu düğmeleri tıklayarak değiştirebilirsiniz. Araç Kutusundaki Ok (Pointer) aracını seçin, çiziminizin üzerine konumlanıp istediğiniz noktayı seçin, Point type bölümüne gelin, Point type bölümündeki değiştirmek istediğiniz nokta biçiminin üzerine bir kere tıklayın değiştirdiğiniz nokta biçimini istediğiniz gibi yönlendirin. Handles bölümündeki iki düğme seçili noktanın yönlendirme Çubuklarını yok etmek için kullanılır. Nokta seçili durumda iken, yok etmek istediğiniz yönlendirme çubuğunun yönüne göre veya simgesini bir kere tıklayın. Automatic seçeneği ise, nokta tipini değiştirdiğinizde gerekli yönlendirme çubuklarınınç yerleştirilmesini, veya yok edilmesini sağlar. Araç Kutusundaki Ok (Pointer) aracını seçin, çiziminizin üzerine konumlanıp istediğiniz noktaları seçin, Point type bölümüne gelin, Point type bölümündeki değiştirmek istediğiniz eğri nokta biçiminin üzerine bir kere tıklayın. Handles düğmelerinin altındaki Automatic’i onaylayın. Point location bölümündeki x ve y değerlerini kullanarak noktanın sayfa üzerindeki konumunu ölçülü olarak belirleyebilirsiniz.

Gruplu ve Grupsuz Çizimler : Dörtgen ve elips aracıyla oluşturulan bütün objeler standart olarak grupludurlar. Diğer çizim araçları ile oluşturulan çizimler ise grupsuzdur. Grupsuz bir çizim objesinin her bir noktasını seçerek değişiklik yapabilirsiniz. Bir çizimi herhangi bir çizgisi üzerine tıklayarak seçtiğiniz zaman tüm objeyi seçmiş olursunuz. Tüm noktaları seçili objeyi çizgi üzerinden tutup taşıyabilirsiniz. Daha sonra bu çizim üzerinde yer alan bir noktanın üzerine tıklayıp o noktayı seçebilirsiniz. Seçilmiş bir noktayı taşıdığınızda sadece o noktaya bağlı çizgi parçaları hareket eder. Dörtgen ve Elips aracı ile oluşturulmuş objelerin noktalarına ulaşmak ve değiştirmek için ise, önce ilgili şekli seçip Modify menüsünden Ungroup [Grubu Boz] komutunu vermek zorundasınız. Ok (Pointer) aracı ile objenizi seçin, Modify>Ungroup komutu verin, Grubu çözülen objenizin herhangi bir noktasını seçin, Mausa basılı tutarak sürükleyin.

Çizime Nokta Eklemek ve Çizimden Nokta Silmek : Nokta eklemek, Herhangi bir çizgi üzerine nokta eklemek istiyorsanız, çizgiyi ok ile seçin. Divit ucunu araç kutusundan seçin. Çizgi üzerinde istediğiniz yere gelip fareyi tek kere tıklayın. Eklemiş olduğunuz noktayı ok aracı ile seçin ve istediğiniz yere taşıyın. Eğer eklediğiniz noktanın eğri noktası olmasını istiyorsanız, farenin tuşuna bastıktan sonra, parmağınızı kaldırmadan sürüklemeniz gerekir. Nokta Silmek için, çizgiyi ok ile seçin. Çizgi üzerinden silmek istediğiniz noktayı seçin. Klavyeden Silme tuşuna basın.

Otomatik Çizim Aracı [Trace Tool] : Taranmış resimlerinizi veya logolarınızı File menüsündeki Import komutuyla FreeHand sayfanıza aktarabilirsiniz. Özellikle TIFF veya EPS formatındaki bu görüntüleri Freehand’in Otomatik Çizim Aracı ile renkli veya renksiz vektörel çizimlere dönüştürebilirsiniz. Otomatik Çizim Aracı, FreeHand’in araç kutusunda yer alan otomatik çizim Aracını kullanmak için önce taranmış bir görüntüyü [EPS veya TIFF] Import komutunu kullanarak sayfanıza yerleştirin. Otomatik çizim aracını araç kutusu üzerinden tıklayarak seçin. Sayfaya getirmiş olduğunuz görüntünün üzerine gelip, istediğiniz bölgeyi içine alacak şekilde, bu araçla bir dörtgen alan oluşturun. Fare tuşunu bıraktığınız zaman bu bölgenin vektörel çizimini elde edersiniz. Amacınıza yönelik olarak Otomatik Çizim Aracının seçeneklerini değiştirebilirsiniz. Bunun için aracın simgesi üzerine gelip çift tıklayın. Aracın seçeneklerini gösteren iletişim kutusu karşınıza gelecektir. Color Mode, otomatik olarak oluşacak çiziminizin renkli veya gri değerli olması bu menüden yaptığınız seçeneğe bağlıdır.

Eğer görüntünüz renkli bir resim ise menüden Colors seçerek oluşan çizimin de renkli olmasını sağlayabilirsiniz. Grays seçeneği ise resminiz renkli bile olsa çizimin gri değerli olarak oluşmasını sağlar. Resolution, Bu menüde High, Normal ve Low olmak üzere üç seçenek bulunur. High seçeneği görüntü üzerindeki daha fazla detayı yakalar ve çizer. Bu daha çok bellek gerektirir ve daha çok çizim noktası oluşturur. Low seçeneği ise en az detayla çizimi yapar. Normal bu iki seçeneğin ortasıdır. Trace Layers, Bu menüden hangi katmanlardaki görüntülerin çizileceğini belirleyebiliriz. All bütün ön ve arkaplan katmanlardaki görüntüleri çizer. Bunun yanı sıra Foreground seçeneği ile sadece önplan katmandaki veya Background seçeneği ile sadece arkaplan< katmandaki görüntüleri çizdirebiliriz. Örneğin bir logoyu tarayıp FreeHand’e yerleştirdik diyelim. Eğer bu görüntüyü Arkaplan [Background] katmanına alırsak ve Otomatik Çizim Aracının seçeneklerinde Background işaretlersek arkaplandaki resmi baz alarak önplan katmanında oluşturulan çizimi de düzenleyebiliriz. Path Conversion, Bu bölümdeki seçenekler FreeHand’in orijinal grafikten çizgileri nasıl oluşturacağını belirler. Bu menüdeki seçenekleri inceleyecek olursak;

Outline : FreeHand çizgileri orijinal görüntü veya grafiğin dış sınırlarını baz alarak çizer. Oluşan çizimler kapalı ve dolgulu çizimlerdir. Logo ve bitmap görüntüleri çizdirirken Overprint seçeneğini işaretlemeyin. Fotografik görüntüleri çizdirirken bu seçeneği işaretli tutmak daha verimli sonuçlar verir.

Centerline : Orijinal tarama veya grafiğin konturlarının merkezini baz alarak çizim yapar. Teknik çizimler için idealdir. Uniform lines seçeneği işaretli ise oluşan çizimin çizgi kalınlığı sabit olarak 1 puntodur. Bu seçenek işaretsiz olursa taranmış görüntü üzerindeki kontur kalınlıklarına uygun kalınlıklarda çizgiler oluşur.

Centerline/Outline : Her iki metodun karışımıdır. Open paths below …. pixels bölümüne girmiş olduğunuz piksel sayısından daha ince konturlar için merkez bazlı çizgiler, bunun üzerindeki kalınlıkta konturlar için ise Outline stilinde kapalı çizimler oluşturur.

Outer edge : Orijinal görüntünün sadece en dış konturunu çizer. Bu çizimi daha sonra orijinal görüntüyü içine yapıştıracağınız bir dekupe olarak kullanabilirsiniz.

Trace conformity : Oluşturulan çizimin orijinal görüntüye ne derece yakın olacağını belirleyeceğiniz sürgüdür. 10 değeri orijinale en yakın çizimi oluşturur. fakat çok nokta içerir. 0 değeri ise orijinal görüntünün etrafından çizim yaparken fazla hassas davranmaz, fakat çok hızlı biçimde ve az noktayla çizim yapar.

Noise tolerance : Kötü tarama sonucunda orijinal görüntü üzerinde kırıklıklar görünebilir. Bu sürgü ile bunların ne kadarının FreeHand tarafından görüleceğine karar verebiliriz. Yüksek değerler bu tür piksellerin çizim sırasında göz ardı edilmesine neden olur. Düşük değerler bu piksellerin de çizilmesini sağlar.

Posted by Nuh | No Comments »

Web Sayfasında Tablo Kullanımı

Web sayfanıza yeni bir tablo eklemek için yapmanız gereken objects (nesneler) panelinden insert table butonuna birkez tıklamak… Bu işlemden sonra karşımıza ekleyeceğimiz tablonun özelliklerini belirtmemiz gereken aşağıdaki gibi bir pencere çıkacaktır. Bu pencerede tablomuzun satır ve sütun sayısı gibi bilgileri girdikten sonra ok tuşuna basalım. Tablomuz sayfamıza eklenecektir. Şimdi sıra eklediğimiz tablonun özelliklerini değiştirmeye daha doğrusu geliştirmeye geldi. Tablomuzun özelliklerini değiştirmeden önce sayfaya niçin tablo ekleriz konusuna gelelim.

Bir web sayfasında tablo iki amaç için kullanılır;

1- Word ve Excel de ne amaçla kullanıyorsanız onun için. Yani sayfamızda tablo şeklinde gösterdiğimizde daha kolay anlaşılacak olan bir veri var ise bunu tablo kullanarak gösteririz. Sanırım buna benzer tabloları word te de kullanmışsınızdır.eğer bu tür hiç tablo görmediyseniz kendinizi fazla yormayın ve vakit erken iken siz bu web tasarımı işinden vazgeçin:-))

2- Tabloların ikinci kullanılış amacı ise web sayfalarının dizaynını kolaylaştırmak ve tabloyu bir dizayn aracı olarak kullanmaktır. Mesela bir web sayfasında resimleri ve yazıları aynı anda yan yana kullanmak istiyorsunuz bu gibi durumlarda tablolar en büyük yardımcılardır. Ama burada dikkat edilmesi gereken en önemli nokta bu tabloların border’larının (çerçeve) sıfır olmasıdır.

Şimdi de sıra tablomuzun üzerinde değişiklik yapmaya geldi(mesela satır sayısını değiştirmek hücrelerin genişliklerini değişitirmek hücrelerin arka plan renkleri ile oynamak vb) değişiklik yapmak için önce tabloyu seçmeniz lazım. Tabloyu seçmek için tablonun sol üst köşesine gelin ve fare dört taraflı ok işareti şeklinde iken tıklayın. Bu penceredeki her değeri teker teker değiştirin ve tablonuzdaki değişiklikleri gözlemleyin. Burada tablonuz ile ilgili yapamayacağınız değişiklik yoktur. Bütün bu işlemlerden sonra sayfanızı kaydedip internet tarayıcınızdan görebilrisiniz.

Not

1- Tablonuzun özelliklerini aynı word te olduğu gibi AutoFormat özelliğini kullanarak değiştirebilirsiniz. Bunun için tabloyu seçin ve Commands menüsünden Format seçeneğini tıklayın ve buradan beğendiğiniz bir sitili seçin.

2- Tablonuzun yada herhangi bir hücrenin arkaplanına resim ekleyecekseniz önce sayfanızın kaydedilmiş olması gerektiğini unutmayınız.

Posted by Nuh | No Comments »

Frameler (Çerçeveler)

Web sayfalarında frameler bir browser penceresinde (yani internet explorer vb.) birdan fazla web sayfasını aynı anda göstermektir. Daha önce girdiğiniz web sayfalarında muhakkak görmüşsünüzdür. bazı web sayfalarının bazı bölümleri sürekli sayfada sabit olarak durur özellikle sayfanın menü kısmı ve üstte bulunan reklam banner kısmı buna en güzel örnektir. İşte bu tür bazı yerleri hiç değişmeyen sayfalar oluşturmamnın yolu sayfada frame kullanmaktan geçer. Web sayfanızı framelere ayırmak için yapmanız gereken objects (nesneler) panelinden Common yazısınınhemen yanındaki aşağıya doğru küçük ok işaretine bir kez tıklamak. Bu ok işaretine tıkladığınızda karşınıza bir menü gelecek buradan “Frames” seçeneğini seçin.

Frames seçeneğini seçtiğimizde karşımıza hangi tür bir frame seçeceğimizi belirlemeye yarayan pencere gelecektir. Burada tek yapmanız gereken size uygun bir frame çeşidini seçmek.Frame çeşidini seçtiğinizde sayfanız hemen framelere ayrılacaktır. Bu işlemden sonra DW ekranında gördüğünüz her bir çerçeve ayrı bir web sayfasıdır aslında. Şimdi bu sayfaların teker teker bd color larını değiştirirseniz hepsinin bir birinden bağımsız sayfalar olduğunu daha iyi anlarsınız.

Şimdi sıra geldi sayfamızı kaydetmeye. Eğer siz eğer üç parçadan oluşan bir frame modeli seçtiyseniz görünen 3 adet ve de görünmeyen bir adet olmak üzere toplam 4 web sayfası kaydetmeniz gerekir. (Görünmeyen dediğimiz sayfa bu frameset dediğimiz kontrol sayfasıdır. Bu üç sayfa görünen üç sayfanın ekranda nekadar yer kaplayacağını ayarlayan ve bu sayfaları birarada tutan sayfadır. Kaydetme işlemi için File menüsünden Save All Frames demek sayfayı ilk defa kayıt ediyorsak en mantıklı yoldur. DW size o anda handi sayfayı kaydettiğini kaydettiği sayfayı çerçeve içerisine alarak gösterecektir (ilk önce kontrol sayfası, sonra mainframe, …) buna göre sayfalara mantıklı isimle vererek kayıt işlemini tamamlayın.

Sayfamızı tasarladıktan sonra sıra geldi linklerimizi vermeye… Link vermek için önce link verebileceğimiz sayfaların ve frameli sayfanın menü için kullanacağımız frame’ inde linkin yazılarının hazır olması lazım. Yazıyı seçtikten sonra link verip sonrada link yazısının hemen yanındaki “Target ” bölümünden “main frame” seçeneğini seçerseniz linkin ana pencerede açılmasını sağlarız bu işlemi yapmazsanız linkiniz menünün bulunduğu pencerede açılacaktır ki buda hiç hoş olmayan bir görünüm ortaya çıkarır. Target bölümünden _blank parametresi linki yeni bir pencere olarak açar _parent paremetresi de linkimizi ana pencerede (yani frameler kabolur onun yerinde) açmaya yarar…

Frameler arsındaki çerçevelerin kalınlığı ve framelerin geneşliği ile ilgili ayarlama yapmak içinde sayfada frame çerçevelerinden birisine tıkladığınızda properties paneli aşağıdaki şekli alır buradan çerçevenizin ve çerçeve arasındaki çizgilerin özelliklerini değiştirebilirsiniz.

Posted by Nuh | No Comments »

Link Verme

Linkler yani bağlantılar bir web sitesi oluşturabilmek için bilinmesi gereken en önemli konudur. Bildiğiniz üzere geçen dersimizde sadece tek bir web sayfası yamıştık. Takdir edeceğiniz gibi internetteki siteler sadece bir sayfadan ibaret omuyor bazen onlarca bazen yüzlerce bazende binlerce sayfadan oluşan sitelere rastlamanız mümkün. Bu kadar sayfayı ana bir çatı altında toplamak ve bu sayfalar arasında geçişler yapabilmek için linkleri iyi bir şekilde öğrenmek gerekiyor.

Biz linkler konusuna girerken daha çok kendi sitemiz içerisinde başaka bir sayfaya bağlantı yapma meselesi üzerine konuştuk ama işin daha başka boyutları olduğunu hatıratmak lazım sanırım. Mesela sayfanızda intenetteki bir siteye link vermek isterseniz farklı bir method yada size e-mail gönderebilmeleri için bir link yapmak isterseniz başka bir metod veya sayfanız içinde bir bölümden başka bir bölüme link vermek isterseniz yine başka bir metod kullanmanız gerekecektir.

Site içinde sayfalar arası linkler : Bir ana sayfaya alt sayfaların bağlantısını yapmak. Tabiki alt sayfalardan ana sayfaya ya da daha alt sayfalara bağlantı yapmak da mümkün. Ama biz işi fazla karmaşıklaştırmadan bağlantıyı nasıl yapacağımızı gösterelim isterseniz. Öncelikle ilk yapmanız gereken sitenizi oluşturacağınız ve tüm resim ve dosyalarınızın içinde bulunacağı bir klasör oluşturmak. Bu işlemi File menüsünden New Folder ifadesini seçerek sonra karşımıza gelen yeni klasörün ismini kendi ismimizde yada istediğimiz bir isimde değiştirerek yapacağız. Bu işlem bittikten sonra sitemizde kullanacağımız tüm resimleri bu klasörün içerisine kopyalamamız lazım. Daha sonra da sitemizin ana sayfasını ve alt sayfalarını teker teker oluşturarak aynı klasörün içerisine kaydetmemiz gerekiyor. Bu işemleride tamamladıysanız sıra geldi sayfaları birbirine bağlamaya.

Bu arada şunuda söylemek lazım. Ana sayfamız olacak olan giriş sayfasının ismi mutlaka index.html şeklinde olmalı. Alt sayfalar için böyle bir şart yok ama lat sayfaların ismi içinde uyulması gereken bazı kurallar var.

1- Dosya isimleri küçük harfle oluşturulmalı,
2- Dosya isimlerinde ş,ı,ç,ğ,ü,ö gibi türkçe karakterler kesinlikle kullanılmamalı,
3- Dosya isimleri birden fazla kelimden oluşuyorsa kelimeler arasında boşluk bırakılmamalı.

Bu kurallara uymanız linklerin sağlıklı bir şekilde çalışması için gereklidir. Sayfalarımızı tek tek oluşturup kalsörümüze kaydettiysek index.html sayfasını Dreamweaver da açalım. Daha sonra link vermek istediğimiz yazıyı seçelim. Sonra yine özellikler panelinde Link yazısının karşısındaki klasör resmine birkez tıklayalım. Şimdi karşımıza “Selcet File” isimli bir pencere gelecek. Gelecek bu pencereden bağlantı yapmak istediğimiz dosyayı seçelim ve enter tuşuna basalım. Link verdiğimiz yazının rengi değişecek ve altı çizilecektir. Aynı şekilde diğer link vermek istediğimiz yazıları da tek tek seçip aynı işlemleri tekrarlayalım.

Tüm linkleri yaptıktan sonra alt sayfalarımızı Dreamweaver’da açarak sayfaların en altına yazmış olduğumuz ana sayfaya dönüş yazısını seçerek index.html dosyasına link verelim. Link verilen yazıyı seçtiğinizde özellikler penceresinde link vermiş olduğumuz dosyanın adı ve uzantısını görürsünüz. Eğer linkinizde herhangi bir hata varsa bu yazıyı silerek link işlemini tekrarlayınız. Daha sonra da linklerin çalışıp çalışmadığını test etmek için My Computer’den Hard diski oradan da Klasörünüzü seçin, klasörün içinden de index.html isimli dosyayı seçip Enter tuşuna bastığınızda sayfanız Internet Explorer da gösterilecektir. Burada linklerinize tıklayarak test ediniz.

Linklerinizi düzgün yaptıysanız yazının üzerine geldiğinizde fare imleci el şeklini alacaktır. Bu bu yazıda bir link olduğu anlamıdan gelir. Şimdi fareyi tıkayın ve link verdiğiniz sayfaya gidin, buradan da ana sayfaya dönüş için yaptığınız linke tıklayarak ana sayfaya dönün. evet bu iş bu kadar.

Site Dışı Linkler : Web sayfamızdan internetteki bir sayfaya link vermek istediğimiz zaman sitemiz dışına bir bağlantı yapmamız gerekir. Bu tür bir bağlantı yapmak için link vereceğimiz sitenin ismini sayfamıza yazalım. Sonra bu yazıyı fare ile seçerek Properties yani özellikler panelinde Link yazısının karşısındaki kutucuğa sitenin tam adresini yazalım. Burada dikkat etmemiz gereken bir husus var, Örneğin Barbetto’ya link vermek istersek link kısmına www.barbetto.com yazmanız yeterli olmayacak ve linkiniz çalışmayacaktır. Adresi tam olarak http://www.barbetto.com şeklinde yazmamız gerekiyor. Eğer verdiğiniz linkin yeni bir sayfada açılmasını istiyorsanız target olarak _blank’i seçmeniz lazım. Bu genellikle internete verilen linklerede sık kullanılan bir özelliktir.

E-mail Linkleri : Web sayfalarında görmüşsünüzdür. Sayfayı tasarlayan kişi genellikle ” E-mail Gönderin, Bize Yazın, Görüşlerinizi yazın vb.” şeklinde yazılar ile kendisine e-mail atılmasını ister ve siz bu linke tıkladığınızda bilgisayarınızda Outlook programınız çalışır ve gönderilecek kişi kısmında o kişinin e-mail adresi yazar bu hemen hemen herkesin başına gelmiştir sanırım. İşte bu şekilde linklerin nasıl yapıldığını bu bölümde öğrenmeye çalışacağız.

Sayfamızda e-mail linki oluşturmanın iki yolu var irinci yol; aynı internette bir siteye link verdiğimiz zaman yaptığımız gibi link vereceğimiz yazıyı yazıyoruz (mesela E-mail Gönderin gibi) ve bu yazıyı fare ile seçtikten sonra properties panelinde link kutucuğuna mailto:info@tiannowebtasarim.com gibi adresimizi yazıyoruz ve enter tuşuna basıyoruz. İkinci e-mail linki ekleme metodu iste object panelini kullanmak. Bu daha kolay bir yöntem. Bunun için sayfada herhangi bir yazı yazmıyoruz sadece mail linkini vermek istediğimiz yere fareyi konumlandırıyoruz sonra object panelinden insert E-mail link butonuna basıyoruz. Buradan da karşımıza gelecek pencerede üst tarafa linkin yazısını alt tarafa da email adresimizi yazıyoruz ve enter tuşuna basıyoruz.

Sayfa İçi Linkler : Bazen web sayfalarımız çok uzun olabilir. Bu gibi durumlarda sayfamızın kolay kullanılabilir olamsını sağlamak için sayfada bir bölümden diğer bir bölüme, sayfanın sonundan başına link vermemiz gerekir.(örneğin bir bu sayfada bu teknik kullanılmıştır.) Bunun için yapmamız gereken önce object panelimizin görünümünü değiştirmek olacaktır. Sonra sayfada link vereceğimiz bölümlere işaret koymamız gerekiyor. İşaret koyacağımız yere fareyi konumlandırdıktan sonra çapa işaretine tıklıyoruz. Karşımıza aşağıdaki gibi bir pencere gelecektir. Bu pencerede Name yazan yere bir isim vermemiz gerekiyor bu isimde türkçe karekter kullanmamaya dikkat edelim. Sonra da yine enter…

Şimdi işaret koyduğumuz yere sayfanın istediğimiz yerinde link verebiliriz. Link vermek için link yazısını seçelim (biz sayfanın sonunda başına link verdiğimizi varsayıyoruz.) Properties panelinde link kutucuğuna şeklinde diyez ve sonrasında da az önce çapaya verdiğimiz ismi yazıyor ve enter tuşuna basıyoruz (diyez işaretini çıkartmak için klavyeden Alt Gr tuşu ile birlikte 3 tuşuna basınız). Şimdi sayfamızı kaydedip internet explorer da test edebiliriz.

Posted by Nuh | No Comments »

Temel Öğeler

Bu dersimizde Dreamweaver’ın temel öğelerini tanıyacağız ve basit bir web sayfası oluşturmayı öğreneceğiz. Bu işlem için öncelikle Dreamweaver’ın arayüzünü ve ilk etapta kullanacağımız panelleri tanıyalım.

Eğer Word kullanmayı biraz biliyorsanız Dreamweaver’da temel yazı yazma ve nesne ekleme işlemlerini yapacağımız beyaz ekran sizi fazla şaşırtmayacaktır. İlk sayfamızı bu alana birkaç text yazarak ve bu textin rengini büyüklüğünü değiştirerek yapacağız yani tamamen word teki işlemler ile aynı.

Burada gördüğünüz gibi ana bir ekran ve iki adet panel görmektesiniz. Bu panellerin yanındaki açıklamalardan da anlaşılacağı gibi birisi Properties(özellikler) ve diğeri de Object(nesneler) paneli. Pencerenin en üst kısmında da Title yazan alana sayfamızın başlığını yazıyoruz.

Eğer Object ve Properties panellerini kaybederseniz Window menüsünden tekrar aktif hale getirebilirsiniz veya bu panellerin seçili olduğu halde ekranda görünmemeleri gibi bir durum ile karşılaşırsanız Window menüsünün altlarında göreceğiniz Arrange Panels butonuna basmanız panellerinizi geri kazanmanız için yeterli olacaktır.

Diğer karşılaşacağınız bir problem de Türkçe harfleri yazamamak olacaktır. Bu sorunu çözmek için yapmanız gereken ise edit menüsünden Preferences butonuna basmak ve ayarları yapmanız olacaktır. Bu ayarlamaları yaptıktan sonra Dreamweaver’den birkez çıkıp tekrar girmeniz sorunu çözmek için yeterli olcaktır. Bu problemi de çözdükten sonra sıra geldi bir web sayfası yapmaya….

Bu iş için önce sayfanıza bası yazılar yazın. Mesela bu benim ilk web sayfam hoşgeldiniz gibi. Bu yazıları yazdıktan sonra özellikler panelini kullanarak yazımızın rengini büyüklüğünü ve fontunu değiştirelim. Hizalama butonlarını kullanalım veyazımızı istediğimiz tarafa yaslayalım.

Bu işlemden sonra sıra sayfamızın arkaplan rengini değiştirmeye geldi tabiki illada benim sayfam beyaz olacak demiyorsanız. Bu iş için iki yol var ya ekranda boş biryerde farenin sağtuşuna tıklayarak karşınıza çıkan menüden Page Properties’i yada Modify menüsünden Page Prorerties’i tıklayın sonuç aynı yere çıkacaktır. Buradan da sayfanızın başlığını değiştirebileceğininzi fark etmişsinizdir sanırım.

Bütün bu işlemlerden sonra sayfamızı kaydedelim ve Internet Explorer’dan bir görelim. Eğer bir problem yoksa sıra şimdi de sayfamıza resim eklemeye geldi ki bu dersimizin son konusu bu. Önce Object panelinden yandaki gibi insert image butonunu tıklayalım. Karşımıza pecere çıkacaktır. Bu pencere bizim sayfaya ekleyeceğimiz resimi seçmemize yardımcı olan ve resmi görmemizi de sağlayan bir penceredir. Resmimizi seçelim ve Select butonuna basalım. Burada dikkat etmemiz gereken iki husus var;

1.Ekleyeceğimiz resim kaydettiğimiz web sayfası ile aynı klasörde olmalı,
2.Resim ekleyeceğimiz sayfa önceden mutlaka kaydedilmiş olmalı.

Eklediğimiz resmin özerine fare ile birkez tıklayarak resmi seçebilir sonrada resmimizin boyutlarını kenarlardaki siyah karecikleri kullanarak değiştirebiliriz. Resmi seçtiğimizde aynı zamanda Properties yani özellikler panelimizin görünümü değişecektir. Şimdi bu paneli kullanarak resmimize çerçeve ekleyebilir yada fare üzerine geldiğinde resim hakkında bilgi veren açıklama yazısı ekleyebiliriz. Yine yazılarda olduğu gibi sağa sola yaslama ve ortalama işlemeleri de yapabiliriz.

Posted by Nuh | No Comments »