Makale Dünyası

Merhaba arkadaşlar. Bu makale ile web sitenizin ağırlığını baya bir azaltacaksınız J Html,Php,Asp ya da Asp.Net kullanarak web sitesi yaparken kullandığınız tablolardan kurtulman bir yolu aslında. Photoshop’da hazırlamış olduğunuz web sitesi tasarımının çıktısını Html olarak alabiliyoruz. Birde bunu CSS ile almayı öğreneceksiniz.

CSS ile çıktısını almak ne demek? Normalde Photoshop’da yaptığımız bir tasarımı Save For Web yaparak Html çıktısını alırız yani sitemizin html olarak çalışır halde kullanmaya ve düzenlemeye başlarız. Html ile sitenin çıktısını aldığımızda tararımımızdaki bütün resimleri bir tablo içerisine alarak Html moduna çeviriyor. Css ile çıktı almak ise tasarımımızın tablolardan arınarak çıktısını almaktır. Yani sitemizde tablolar olmayacak ve sadece Css komutları ile sitemizdeki bütün resimler felan görünecektir.

Şimdi bunu nasıl yapacağız ondan bahsedelim. Söylediğim adımları sırasıyla yapınız ve uygulayınız. Kesin net bir sonuç alacağınızdan eminim

Photoshop’u açın ve File > Open (Ctrl + O) diyerek hazırlamış olduğunuz tasarımı açın.
File > Edit in ImageReady seçeneğine tıklayın.
ImageReady programına geçtikten sonra Tools menüsünden Slice Tool (K) sekmesine tıklayın ve tasarımını uygun parçalara ayırın. Aşağıdaki gibi.

File > Outpu Settings > Slices seçeneğine tıklayın.

Karşınıza çıkan pencereden Generate CSS Seçeneğini seçin her şeye ok diyerek pencereleri kapatın.

File > Save Optimized As seçeneğine tıklayın.

Karşınıza çıkan pencereden sadece Kayıt türünü HTML and Images seçeneğini seçin ve Kaydet’e tıklayın.

İşlemimiz tamamlandı. Şimdi kaydettiğiniz html dosyasını açın ve kodlarına bakın. Css tabanlı olduğunu göreceksiniz.

Herkese iyi çalışmalar…