{"id":380,"date":"2010-06-24T09:32:18","date_gmt":"2010-06-24T09:32:18","guid":{"rendered":"http:\/\/www.erbugkaya.com\/?p=380"},"modified":"2014-01-16T23:52:16","modified_gmt":"2014-01-16T23:52:16","slug":"expression-webde-imaj-islemleri","status":"publish","type":"post","link":"http:\/\/erbugkaya.com\/?p=380","title":{"rendered":"Expression Web’de \u0130maj \u0130\u015flemleri"},"content":{"rendered":"

25\/4\/2007<\/em>
\nSayfaya imaj girmek :<\/p>\n

Tasar\u0131m\u0131n\u0131z\u0131n gerekli\u011fine g\u00f6re baz\u0131 yerlere imaj girmek durumunda kal\u0131r\u0131z. Bu bir table ya da div tag\u0131n\u0131n i\u00e7i olabilir. Bu makalede bir projeye dahil olmayan bo\u015f bir sayfa \u00fczerinde imaj i\u015flemlerini yapaca\u011f\u0131z.<\/p>\n


\n\u0130maj eklemenin \u00e7e\u015fitli yollar\u0131 bulunmaktad\u0131r.<\/p>\n

Insert>Picture>From File<\/p>\n

Bunun yan\u0131nda direk kameradan veya taray\u0131c\u0131dandan imaj eklemenizde m\u00fcmk\u00fcn.<\/p>\n

\"\"<\/a><\/p>\n

Resmi bu \u015fekilde girince, eri\u015filebilirlik \u00f6zellikleri ile ilgili bir pencere gelmektedir. Alternate text\u2019i doldurman\u0131n etik olarak iyi bir al\u0131\u015fkanl\u0131k oldu\u011funu bilmenizde yarar var. Engelli kullan\u0131c\u0131lar, eski browser kullananlar, t\u00fcm g\u00f6rselleri kapatarak s\u00f6rf yapanlar i\u00e7in \u00f6nemli bir \u00f6zellik.<\/p>\n

\"\"<\/a><\/p>\n

\u0130maj eklemenin bir di\u011fer yolu da s\u00fcr\u00fckle b\u0131rakt\u0131r. Tool box\u2019dan ya da Folder List\u2019ten.<\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/p>\n

Veya toolbar\u0131n\u0131zdaki \u201cinsert picture from file\u201d butonunu kullanabilirsiniz.<\/p>\n

\u0130maj \u00d6zellikleri<\/p>\n

General Tab\u2019\u0131<\/p>\n

\u0130maj ikonuna sa\u011f klik yap\u0131p, Picture Properties\u2019i a\u00e7\u0131yoruz.<\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

Browse\u2019u kullanarak girmek istedi\u011fimiz resmi bulup i\u015flemi tamaml\u0131yoruz.<\/p>\n

\u015eimdi bu kutuyu inceleyelim.<\/p>\n

Resim eklendikten sonra \u201cPicture File Type\u201d butonu etkin hale gelmektedir. EW bu ba\u015far\u0131l\u0131 \u00f6zelli\u011fi ile imaja format de\u011fi\u015fikli\u011fi uygulayabilmektedir.<\/p>\n

\"\"<\/a><\/p>\n

\u00dcst barda bu de\u011fi\u015fikliler sonucu imaj\u0131n yeni boyu EW taraf\u0131ndan hesaplan\u0131p bildiriliyor.<\/p>\n

Bu pencerede GIF ve JPEG formatlar\u0131 i\u00e7in \u00f6zelliklerde ayarlanabiliyor. JPEG se\u00e7iliyken \u201cUse image as is\u201d se\u00e7imini iptal ederek bu \u00f6zelliklerin aktif hale gelmesini sa\u011fl\u0131yoruz.<\/p>\n

\u0130maj tipi \u00fczerinde oynad\u0131\u011f\u0131m\u0131zda bir uyar\u0131 gelmiyor fakat \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131z sayfay\u0131 kaydetmek istedi\u011finizde imajla ilgili bir pencere a\u00e7\u0131l\u0131yor.<\/p>\n

\"\"<\/a><\/p>\n

Bu pencerede yeni imaj i\u015flemi i\u00e7in ne yapmak istedi\u011finiz soruluyor. Ben \u00f6rnekte bir JPEG resmi PNG-24\u2019de \u00e7evirdim. \u0130simde ya da klas\u00f6rde de\u011fi\u015fiklik yapmadan, EW ayn\u0131 isimde, ayn\u0131 klas\u00f6rde bir ba\u015fka imaj yaratt\u0131.<\/p>\n

\u0130maja alternatif yaz\u0131, uzun tan\u0131m eklemek, imaj\u0131 linklemek; imaj \u00f6zellik kutusuyla olduk\u00e7a kolay.<\/p>\n

<a href=”default.htm”> <img alt=”deneme olarak yaz\u0131lm\u0131\u015f yaz\u0131” src=”witch_by_TheCryBaby.jpg” width=”500″ height=”720″ ><\/a><\/p>\n

\"\"<\/a><\/p>\n

Appearance Tab\u2019\u0131 :<\/p>\n

Bu tab\u2019da ise imaj\u0131n genel olarak yerle\u015fim ayarlar\u0131 bulunmaktad\u0131r.<\/p>\n

\"\"<\/a><\/p>\n

\u201cWrapping Style\u201d; imaj\u0131n\u0131za etraf\u0131na yaz\u0131 bindirmesi yapman\u0131z\u0131 sa\u011flayan CSS kural\u0131n\u0131 haz\u0131rlayan b\u00f6l\u00fcmd\u00fcr.<\/p>\n

\u201cLayout\u201d ise imaj\u0131n\u0131z\u0131n bord\u00fcr kal\u0131nl\u0131\u011f\u0131, marjinleri, yerle\u015fimi gibi \u00f6zelliklerin belirlendi\u011fi b\u00f6l\u00fcmd\u00fcr.<\/p>\n

\u201cSize\u201d ise imaj\u0131n\u0131z\u0131n boyuyla ilgili b\u00f6l\u00fcmd\u00fcr. \u201cSpecify size\u201d daki i\u015fareti kald\u0131rarak imaj\u0131n boyunun de\u011fi\u015ftirilebilmesini engelleyebilirsiniz. \u201cKeep aspect ratio\u201d ise imaj boyunda yap\u0131lan de\u011fi\u015fiklerde oran\u0131n korunmas\u0131n\u0131 sa\u011flar.<\/p>\n

\u0130maja yaz\u0131 bindirme<\/p>\n

Geli\u015fen web teknolojilerinde kar\u015f\u0131la\u015f\u0131lan t\u00fcm ihtiyac\u0131 kar\u015f\u0131lamas\u0131 d\u00fc\u015f\u00fcn\u00fclerek haz\u0131rlanm\u0131\u015f Expression Web imaja yaz\u0131 bindirme konusunda da kolayl\u0131k sa\u011flam\u0131\u015f.<\/p>\n

\u0130lk yapman\u0131z gereken imaj\u0131n\u0131z\u0131n ve yaz\u0131lar\u0131n\u0131z\u0131n durumunu belirlemek. Bu \u00f6rnekte imaj\u0131 sa\u011fa yasl\u0131 olarak d\u00fc\u015f\u00fcn\u00fcyoruz.<\/p>\n

\"\"<\/a><\/p>\n

\u015eimdi yaz\u0131m\u0131z\u0131 ekleyelim.<\/p>\n

\"\"<\/a><\/p>\n

Dikkat etmeniz gereken konu, yaz\u0131 ve imaj\u0131n ayn\u0131 tag\u2019\u0131n i\u00e7inde yer almas\u0131d\u0131r.<\/p>\n

\"\"<\/a><\/p>\n

S\u0131rada yaz\u0131n\u0131n imajdan a\u00e7\u0131lmas\u0131 var. Bunun i\u00e7in Picture Properties penceresinde Appearance tab\u2019\u0131n\u0131 a\u00e7\u0131yoruz. Horizantal ve Vertical Margin\u2019leri 30px yap\u0131yoruz.<\/p>\n

\"\"<\/a><\/p>\n

Sonu\u00e7<\/p>\n

\"\"<\/a><\/p>\n

Bu i\u015flemi yaparken EW \u015fu kodlar\u0131 bast\u0131.<\/p>\n

<img alt=”” src=”witch_by_TheCryBaby.jpg” width=”500″ height=”720″ style=”float: right” \/>
\n<style type=”text\/css”><\/p>\n

.style1 {
\nmargin: 30px;
\n}
\n<\/style><\/p>\n

Projelerinizde imaja yaz\u0131 bindirme i\u015fleminizi bu \u015fekilde \u00e7\u00f6zmek yerine CSS yazman\u0131z\u0131 tavsiye ederim. E\u011fer bu projede bir CSS dosyas\u0131 tan\u0131mlam\u0131\u015f olsayd\u0131k. class\u0131m\u0131z \u015fu \u015fekilde olacakt\u0131.<\/p>\n

.bindirme{
\nfloat:right;
\nmagrin:30px
\n}<\/p>\n

Bu sitili imaja uygulayacakt\u0131k.<\/p>\n

<img alt=”” src=”witch_by_TheCryBaby.jpg” width=”500″ height=”720″ \/><\/p>\n

Bu \u015fekilde haz\u0131rlanm\u0131\u015f bir CSS kural\u0131n\u0131z\u0131 her defas\u0131nda istedi\u011finiz imaja uygulayabilirsiniz.<\/p>\n

Picture ToolBar :<\/p>\n

\"\"<\/a><\/p>\n

\u0130maj\u0131n \u00fcst\u00fcne sa\u011f klik \u201cShow Pictures Toolbar\u201d a t\u0131kl\u0131yoruz.<\/p>\n

Soldan Sa\u011fa;<\/p>\n

Insert Picture from file : \u0130maj girmemizi sa\u011fl\u0131yor.<\/p>\n

Auto Thumbnail: Orijinal resme linkli thumbnail yaratman\u0131z\u0131 sa\u011fl\u0131yor. Bu iyi d\u00fc\u015f\u00fcn\u00fclm\u00fc\u015f bir \u00f6zellik olmu\u015f. Resim se\u00e7iliyken butona basarsan\u0131z, EW sizin i\u00e7in resmin k\u00fc\u00e7\u00fck versiyonunu b\u00fcy\u00fck resme linkli olarak haz\u0131rl\u0131yor. Sayfay\u0131 kaydetti\u011finizde ise bu thumbnail resmi nereye, hangi formatta kaydetmek iste\u011finizi soran ileti\u015fim penceresi geliyor.<\/p>\n

Tools>Page Editor Options\u2019daki Autothumbnail tab\u2019\u0131 ile olu\u015fturaca\u011f\u0131n\u0131z thumbnaillerinizin \u00f6zelliklerine karar verebilirsiniz.<\/p>\n

\"\"<\/a><\/p>\n

Bring Forward, Send Backward: \u0130maj\u0131n z-indexlerini ileri geri de\u011fi\u015ftiren butonlar.<\/p>\n

Rotate Left 90\u00b0\u00a0– Rotate> Right 90\u00b0 : \u0130maj\u0131n\u0131z\u0131 saat y\u00f6n\u00fcn\u00fcn tersine ve saat y\u00f6n\u00fcnde 90\u00b0 \u00e7eviren butonlar.<\/p>\n

Flip Horizontal, \u00a0Flip Vertical : \u0130maj\u0131n\u0131z\u0131 yatay ve dikey \u00e7eviren butonlar.<\/p>\n

More Contrast,\u00a0Less Contrast, More Brightness, Less Brightness : Kontrast ve \u0131\u015f\u0131k ayarlar\u0131n\u0131 yapan butonlar.<\/p>\n

Crop : \u0130maj\u0131n\u0131z\u0131 k\u0131rpman\u0131za yarayan buton.<\/p>\n

Crop butonuna t\u0131klay\u0131p, imaj\u0131n\u0131z\u0131n istedi\u011finiz b\u00f6l\u00fcm\u00fcn\u00fc se\u00e7ip, enter\u2019a bas\u0131nca crop i\u015flemini tamamlam\u0131\u015f oluyorsunuz.<\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

Sayfay\u0131 kaydetti\u011finizde bu k\u0131rp\u0131lm\u0131\u015f imaj\u0131 nereye, hangi formatta kaydetmek iste\u011finizi soran ileti\u015fim penceresi geliyor.<\/p>\n

Set Transparent Color : \u0130maj\u0131n\u0131z\u0131 EW ile transparan GIF haline getirmeniz m\u00fcmk\u00fcn. Butonu se\u00e7ip imaj\u0131n\u0131zdaki yok etmek istedi\u011finiz arka plan rengine t\u0131klay\u0131p, dosyay\u0131 kaydetti\u011finizde yeni olu\u015fan imaj i\u00e7in gelen ileti\u015fim penceresindeki i\u015fleminizi de tamamlay\u0131nca; transparan GIF\u2019iniz haz\u0131r oluyor.<\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

Color: \u0130maj\u0131n\u0131z\u0131 siyah beyaz ve silik bir hale getirmenize sa\u011flayan buton.<\/p>\n

Bevel: \u0130maj\u0131n\u0131za Bevel uygulayabilen buton.<\/p>\n

Resample : \u0130maj\u0131n fiziksel boyunu ve pixel boyutlar\u0131n\u0131 art\u0131r\u0131p azaltan buton.<\/p>\n

Select, Rectangular Hotspot, Circular Hotspot, Polygonal Hotspot, Highlight Hotspots: \u0130majlar\u0131n \u00fcst\u00fcnde b\u00f6lgesel link vermenizi sa\u011flayan butonlar.<\/p>\n

Toolbar\u2019\u0131 en \u00e7ok kullanman\u0131za sebep olacak b\u00f6l\u00fcm olacakt\u0131r. Tasar\u0131mlar\u0131n\u0131zda bazen navigasyon imaj\u0131n\u0131 tek par\u00e7a halinde \u00e7\u0131karmak zorunda kalabilirsiniz. Bu durumlarda hot spot\u2019lar i\u015finizi \u00e7ok kolayla\u015ft\u0131racakt\u0131r.<\/p>\n

Mapleyece\u011finiz imaj\u0131 se\u00e7ip istedi\u011finiz \u015fekli kullanarak hot spotu belirtiyoruz. Mouse b\u0131rakt\u0131\u011f\u0131m\u0131zda spot\u2019un nereye linklenece\u011fini belirtmemizi isteyen pencere a\u00e7\u0131lacak. Linkimizi verip i\u015flemi tamaml\u0131yoruz.<\/p>\n

\"\"<\/a><\/p>\n

Farkl\u0131 \u015fekil se\u00e7enekleriyle, farl\u0131 hot spotlar yaratabiliyoruz.<\/p>\n

\"\"<\/a><\/p>\n

Select butonu ile hot spotlar\u0131m\u0131z\u0131n \u00f6zellikleri ile istedi\u011fimiz zaman oynayabiliyoruz. Yerlerini, \u015fekillerini de\u011fi\u015ftirebiliyoruz.<\/p>\n

\"\"<\/a><\/p>\n

Highlight Spot butonu ile yaratt\u0131\u011f\u0131m\u0131z hot spotlar\u0131 kolayca g\u00f6rebiliyoruz.<\/p>\n

\"\"<\/a><\/p>\n

Restore: Bu buton sayfay\u0131 kaydedene kadar yapt\u0131\u011f\u0131n\u0131z imaj i\u015flemlerini geri al\u0131r.<\/p>\n

Bu makalede Microsoft Expression Web\u2019de imaj i\u015flemlerini anlatt\u0131m.<\/p>\n

\u0130yi \u00e7al\u0131\u015fmalar.<\/p>\n","protected":false},"excerpt":{"rendered":"

25\/4\/2007 Sayfaya imaj girmek : Tasar\u0131m\u0131n\u0131z\u0131n gerekli\u011fine g\u00f6re baz\u0131 yerlere imaj girmek durumunda kal\u0131r\u0131z. Bu bir table ya da div tag\u0131n\u0131n i\u00e7i olabilir. Bu makalede bir projeye dahil olmayan bo\u015f bir sayfa \u00fczerinde imaj i\u015flemlerini yapaca\u011f\u0131z.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[29],"class_list":["post-380","post","type-post","status-publish","format-standard","hentry","category-teknik-yazi","tag-expression-web"],"_links":{"self":[{"href":"http:\/\/erbugkaya.com\/index.php?rest_route=\/wp\/v2\/posts\/380","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/erbugkaya.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/erbugkaya.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/erbugkaya.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/erbugkaya.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=380"}],"version-history":[{"count":4,"href":"http:\/\/erbugkaya.com\/index.php?rest_route=\/wp\/v2\/posts\/380\/revisions"}],"predecessor-version":[{"id":2552,"href":"http:\/\/erbugkaya.com\/index.php?rest_route=\/wp\/v2\/posts\/380\/revisions\/2552"}],"wp:attachment":[{"href":"http:\/\/erbugkaya.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=380"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/erbugkaya.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=380"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/erbugkaya.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=380"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}