Home JQuery Animasyonlu Portfölyo Sitesi
Animasyonlu Portfölyo Sitesi

Animasyonlu Portfölyo Sitesi

240
11

Merhaba Arkadaşlar,

Sizlere hazır bir portfölyo sitesi sunacağım, beğeneceğinizede inanıyorum. Aşağıdaki  linkten  indirip ve herhangi bir editör programıylada burda anlattıklarımı uygularsanız hiçbir sorununuz kalmayacaktır. JQuery Portfölyo sitesi bildiğiniz gibi kişisel bir site türüdür. Bu uygulamayla kendi sayfanızdaki ürünleri veya yaptığınız web sitelerin tanıtımlarınızı yapabilirsiniz. Animasyonlu olmasıda daha kullanılmasını dahada  cazipleştiriyor.İnşallah hoşunuza gider.

İndirdiğiniz rarlı dosyanın içinde 3 adet klasör 3 adet resim( arkaplanda kullanılan resimler) ve index.html dosyası bulunmaktadır. İmages klasörü tahmin ettiğiniz gibi sitede kullanılan resimlerin bulunduğu klasördür. Bu klasörün içinde 3 adet daha klasör bulunmakta. Large  (resmin en büyük hali ve resmin boyutları 600×500) klasörü, Medium ( orta boyutlu resimlerin olduğu klasör, resmin boyutları 360×300) klasörü ve birde thumbs( en küçük resimlerin bulunduğu klasör , resmin boyutları 160×133) klasörüdür. Burdaki resimler sitede kullanılan resimlerdir her birinin içeriğini kendi resimlerinizle doldurmanız gerekmektedir. Bununla birlikte her klasörün içindeki resimde aynı sayıda ve aynı isimde olmalı. Tabi html kodlama bilen arkadaşlar kendileri istediği şekilde düzenleyebilirler.

index.html dosyasınıda editör programı ile açtığımızda düzenleyeceğimiz yerler ilk önce ;

<div>
<div id="pg_title">
<h1 style="display:block;top:25px;">omerbozalan.com</h1>
<h1>Summer of Love</h1>
<h1>Smashing Multimedia</h1>
<h1>Design Studio Project</h1>
<h1>Graphpedia Blog Innovative Solutions</h1>
<h1>My Portfolio Project</h1>
<h1>1st Webdesigner</h1>
<h1>Workspace Tools Conference</h1>
</div>

Yukarıdaki <h1> … gibi başlık kodlarının içeriğindeki yazılar sol tarafta çıkan resimlere tıkladığınızdaki resimlerin başlıklarıdır. İmages klasörünün içinde 8 adet resim olduğundan onlara ait 8 adet başlığı daburdan değiştirebiliyorsunuz.

sonrasında ;

 

<div style="display:block;left:250px;"> <h2>Project Description</h2> <p>A collection of textile samples lay spread out on the table - Samsa was a travelling salesman - and above it there hung a picture that he had recently cut out of an illustrated magazine and housed in a nice, gilded frame.</p> </div>

……

yukarıda  yer alan kısım ise o başlığa ait yazılardır. Burdan istediğiniz şekilde resmin altında yazacak yazıyı değiştirebiliyorsunuz. Bu kadar basit…

 

(240)

omerbozalan 1981 doğumluyum. Üniversite eğitimimi, Sakarya Ünv. Elektronik ve Bilgisayar Öğretmenliğini bitirerek tamamladım. Ayrıca C Sınıfı İş Sağlığı ve Güvenliği Uzmanıyım. 2014 Nisan ayında Adobe Dreamweaver CS6 Kitabımı yayınlayarak tüm bildiklerimi sizlerle paylaşmak istedim. Kendimi Web Tasarım, Grafik Tasarım, Donanım konusunda hâlâ geliştirmekteyim.

Yorum(11)

  1. selam hocam her konuya çok güzel cözümler buluyor ve yayınlıyorsunuz hocam meta etiketlerini düzenlemeyi de bizlere gösterirseniz seviniriz

    1. Gokhan kardesim gerçi Ömer kardesime sormussun ama ben cevaplayayim yalnisim varsa Ömer kardesim beni duzeltsin simdi head taglarindan önce veya script taglarin sonra da olabilir ( head’den önce olmasi sart) Su kodlari yaziyoruz:

      Burada description 2-3 kelimeyle siteyi tanimlaman
      content ise içerigi kapsar. Bunu cogaltabilirsin istedigin kadar.

      O zaman Google’da ararken kolayca siten cikaro ortaya.

  2. Kodlar cikmamis
    meta name=”description” content=”JQuery ile hazırlanmış ve kendiniz düzenleyebileceğiniz bedava portfolyo sitesi. Güle güle kullanın.”

    meta name=”keywords” content=”jquery, jquery porfolyo site tasarımı, jquery site yapma, porfolyo site

    bunlari tabiki ilk basta acip sonrada kapatmalisin

  3. meraba ömer bey

    ben bu portfolyo içeriğini artırmak istiyorum 8 le kalmasını istemiyorum

    bunu nasıl yapabilirim

  4. Merhaba, içerikteki her ürüne ayrı dışarıdan link vermek istiyorum ancak nasıl link verebilirim. Hepsi tek index sayfasında kodlanmış durumda. Link ile gelen kişiyi sürekli ilk ürüne değil belki 3. ürüne yönlendirmeliyim. Bunu nasıl yapabilirim umarım sorumu anlatabilmişimdir ?

      1. Dışarıya değil. Mesela bu kod ile yaptığımız sayfada 5 ürün bulunacak. Ben başka bir sitede bu ürünlerden 3.sune link vermek istiyorum ya da 2.sine bunu nasıl yapabilirim diye soruyorum. Sonuçta tüm linklerde ..com/index olacak bu kod daki her ürünün sayfası aynı. Ürünleri ayrı linklere nasıl atayabilirim gibisinden. Böyle anlatılması zor bir soru oldu o nedenle 🙂

        1. Altay arkadaşım, slider tarzında olduğu için malesef veremezsin. Lakin asp veya php ile kodlasaydık Id numarasına göre ayarlayabilir ve linke yönlendirebilirdik.

  5. Her şablonunuzu beğeniyle indiriyorum ancak ne yazık ki uygulayamıyorum 🙁 baya eksik kalıyorum

Yorum bırakın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Bu site, istenmeyenleri azaltmak için Akismet kullanıyor. Yorum verilerinizin nasıl işlendiği hakkında daha fazla bilgi edinin.