Kurumsal Site Örneği | Hazır Css-Html site
Merhaba arkadaşlar sizler için yaptığım çalışmalara hızlıca devam ediyorum. Bunlardan bir tanesi de sizinle paylaşacağım kurumsal site örneği. Site , html ve css ile yapılmış olup ayrıca sitede jquery ile yapılmış bir slider bulunmaktadır. Hiç düzenlemeden sadece içerik girerek kullanabileceğiniz şekilde düzenledim. Bunun yanında sizlere iletişim sayfası da özel olarak tasarlanmış ve php dosyası da içerisinde teslim ediyorum. 🙂 İnşallah işinizi görecek… özellikle yorumlarınızı bekliyorum.
Açıklamalar
Jquery slider düzenlemede yapmanız gereken bazı işlemler var. Bunlardan birtanesi slider resimlerini images klasörüne atmak ve index.html sayfasında resimlerinizi tanımlamak olacaktır, tabi resimlerin boyutu 980 x 357 olmalı . Eğer başka bir boyut olmasını istiyorsanız css bilginiz ön plana çıkacaktır.
“NOT: Css konusu çok önemli olduğundan internetten css dersleri diye aratırsanız en azından biraz bilgiye sahip olursunuz.”
Aşağıda index.html dosyasında slider bölümü yer almaktadır.
<div id=”pitch”>
<div class=”pitch-gallery”>
<div class=”pitch-gallery-holder” id=”gallery-pitch-holder”>
<div class=”pitch-gallery-div”>
<img src=”images/pitch-1.jpg” alt=”Pitch 1″ />
<div class=”infoline”>xxx Metal …</div>
</div>
<div class=”pitch-gallery-div”>
<img src=”images/pitch-2.jpg” alt=”Pitch 2″ />
<div class=”infoline”>xxx<strong>Metal</strong> slogan gelecek…</div>
</div>
<div class=”pitch-gallery-div”>
<img src=”images/pitch-3.jpg” alt=”Pitch 3″ />
<div class=”infoline”>slogan gelecek….</div>
</div>
<div class=”pitch-gallery-div”>
<img src=”images/pitch-4.jpg” alt=”Pitch 4″ />
<div class=”infoline”>Slogan gelecek….</div>
</div>
yukarıdaki kısım slider resimlerinin kısmıdır. images klasörüne resimlerinizi attıktan sonra , resimlerinizi yukarıda kırmızı ile tanımlanan yerleri klasörün içindeki resimlerin adlarını yazarak düzenleyeceksiniz. Slogan gelecek yazıları ile resmin altında yazan yazılardır. Slider daki resimleri artırmak istiyorsanız ;
<div>
<img src=”images/xxx.jpg” alt=”Pitch 4″ />
<div>Slogan gelecek….</div>
</div>
yukarıdaki kısmı en son ki slider resminin altına kopyalamanız gerekmektedir.
Sorularınız olursa yorum kısmında iletişime geçebilirsiniz. Kolay gelsin.
EN ÇOK BEĞENİLEN ÜCRETSİZ TASARIMLAR
DİĞER ÜCRETSİZ WEB SİTE TEMALARI
(11193)
Yorum(36)
Yorum bırakın Yanıtı iptal et
Bu site, istenmeyenleri azaltmak için Akismet kullanıyor. Yorum verilerinizin nasıl işlendiği hakkında daha fazla bilgi edinin.
Ömer bey öncelikle güzel paylaşımlarınız için teşekkürlerimi sonsuz borç bilirim. Bu kurumsal site örneğinde iletişim bölümü ile ilgili sorum olacak size forumdan gelen bilgiyi ben php dosyasında istediğim meail adresine gelmesini istiyorum bunun için hangi kod kısmını değiştirmem lazım gerekiyor acaba yardımcı olursanız çok sevinirim.
$to = $_POST[’email’]; bulup email kısmına kendi emailinizi yazmanız gerekmektedir.
omer bey dediğniz satırı değiştirdim ama herhangi bir değişiklik olmadı. Bu örneğin çalışması için benim wamp server kurmama gerek var mı ?
localhostta böyle şeyler çalışmaz:) hostingte denemeniz gerekmektedir.
Turan arkadaşım yukarıdaki mesaj kutucuklarında bir arkadaşa cevap verdim. Okursanız görebilirsiniz?
mehmet arkadaşım. bu hafta içi inşallah sorununuza bakacağım. dediğiniz gibi olmuyorsa . başka bir iletisim.php dosyası deneyeceğiz
Ömer bey merhaba;
Bende maille ilgli aynı sıkıntıları yaşıyorum bu konuyla ilgili bir değişiklik yaptınızmı acaba?
bilal arkadaşım işlerim bittiğinde bu konuyla ilgili geri dönüş yapacağım. kolay gelsin
Ömer bey tekrar merhaba;
Rahatsız ediyorum ama dört gözle bunu bekliyorum.
Acaba bir gelişme varmıdır.
Saygılarımla.
o degılde css6 da bunları acınca sadece css bölumu acılıyor neen tasarım bölumunu acamıyorum onlar kapalı sadece css olarak işlem acık yardım lütfen
göremıyorum resımlerı falan sadece kodlar acık tema üserınde islem yapamıyormuyuz
Erol arkadaşım kodlar açık herşey ortada 🙂 tabiki de tema üzerinde değişiklik yapabiliyorsun. CSS bilmen yeterli
Ben hakkımızda bölümüne hersey yazcam link verdiğimde baska sayfada acılıyo aynı iletişim linki gibi nasıl yapabiliirm bu konuda biraz acemiyim yardım ederseniz sevinirim
Ersin ne demek istediğini hiç alamadım., yüklemi kısa olan cümleler seçersen sevinirim.
Öncelikle merhaba , PhpMyAdmin kullanarak Dreamwiever’a resim göndermek istiyorum. Örneğin bir e-ticaret sitesinde telefonları sıralamak gibi yanlız şöyle bir sorunum var. Varchar,Int vb. gibi değerlerden hangisini seçeceğim ?
yani eğer resimleri veri tabanında sıralamak istersen int ile sıralaman gerekli. yani yapacağın işleme göre değer atamalısın.
ömer abi dreamweavedemi düzenlicez siteyi ?
Safa tabikide dreamweaver ile düzenleyebilirsin veya ona benzer herhangi bir web editör programıyla da yapabilirsin. Kolay gelsin
Ömer hocam bende bu paylaşamınızdaki gibi iletişim formunu mail adresime yönlendirmede sıkıntı yaşıyorum yardımcı olursanız sevinirim.Ayrıca sitenizi çok faydalı buldum.İyi çalışmalar.
sinan arkadaşım. En iyisi iletişim sayfasını host firmana gönderip onun düzenlemesini istemen.Senin için daha iyi olacaktır.
hocam peki bu paylaştığınız sitede sendContact.php de maile gönderme de sıkıntı var ona bakma imkanınız oldumu.Şimdiden cevabınız için teşekkürler.
merhaba ömer bey bir sorum olaktı mümkünse
ben bu css ile bir site kurmaya çalışıyorum ama sorunum var pitch-gallery-div
slide a 4 resim koyabiliyorum 5.yi koyduğum zaman 2 adet slider oluyor ve alt alta oluyorlar ben 10 adet resim koymak istiyorum bildiğiniz bir kod varsa cevap verirseniz sevinirim.
Berk arkadaşım main.css dosyasını düzenlemeniz gerekiyor. Aşağıdaki kodu main.css dosyasında buluyorsunuz.
.pitch-gallery-holder { width: 3920px; position: relative; top: 0; left: 0; }
witdh değerini koyacağın resim sayısı çarpı resim boyutuyla çarpacaksın. yani resmin boyutu 980px resim sayısı 5 adet olacaksa yukarıdaki width alanına 980*5=4900px değerini gireceksin. Kolay gelsin.
sa ben e mail kısmına yardım istiyorum yarın siteyi teslim edicem ama hala e mail gelmiyor email kısmını değiştiriyorum rasgele biyerde domain aldım denedim yine gelmedi yardım ederseniz sevinirim
k. bakmayın cevabı buldum
bilmeyenler için
http://www.youtube.com/watch?v=vUUGI-YXtaQ
Merhabalar hocam. bu sliderimize 980*357 boyutundaki resim haricinde daha büyük mesela atıyorum 1543*970 boyutundaki daha büyük bir resim yüklediğimizde sayfa büyüyor aşağı yukarı açılıo bunu nasıl ayarlıya bilirim ? bu slidere ayarlıyamazsak, kendisi otomatik olarak hangi boyutta atarsam atıyım standart boyutlarda resimlieri slayt yapıcak bir slider öneriniz varmı ? yardımlarınız için teşekkürler.
Yusuf arkadaşım resimleri slider’ın değiştirmesi çok saçma olur. Çünkü resimlerin asıl boyutlarını değiştirmesi demek bozulması demektir. Bu da site yapmak değildir. şablonu değiştirebilmen için CSS bilmelisin. Bence bu konuda kendini geliştirmelisin. CSS klasörünün içinde main.css dosyası var. o dosyayı incelersen kendin tekrar düzenleyebilirsin. Kolay gelsin.
Düzenlenen siteler İnternet explorer de hata veriyor ama google chrome da sıkıntı yok. Sebebi ne olabilir. ? Teşekkürler.
Sitelerde sorun yoktur. Explorer sürümünü yükseltmeniz veya sunucuya atmanız durumunda siteyi görebilirsiniz. Hatadan kasıt nelerdir daha iyi anlatırsanız cevap veririm. Tabi öncelikle sunucuya atarak denemenizi tavsiye ederim
Yakup arkadaşım, Malesef; kişisel işler uzun sürdüğü için vaktim yok. Şöyle bir şey söyleyebilirim. Menunun bulunduğu div’in kodlarının bulunduğu css’in içine z-index:9999; yazıp denemeni Tavsiye ederim.
Yapamazsan z-index konusunu google da araştır.
Merhaba
ekteki dosyaları hosta attım .iletişim sayfasında değiştirdiğim yerler aşağıda mevcuttur.iletişim formu mail adreslerini yazınca taslak çalışırmı sitedeki.
$from = “gmail adresimi yazdım”;
$from_name = “DesignHQ”;
$subject = “Contact Form”;
$to = $_POST[‘gmail adresimi yazdım’];
Mesaj gönderildi demesine rağmen mail gelmedi.
Değiştirilecek başka yer varmı?
Uğur arkadaşım bu dosyaların çalışabilmesi için birincisi hostunuz linux olmalı. İkincisi sitenizin SMTP (mail sunucusu) sunucusunun port numarasını bilmelisiniz. VS… Bunların yardımını host firmanızdan sağlamalısınız. Kolay gelsin.
ömer bey öncelikle paylaştığınız için teşekkürler . ben otomatik geçişli resim koymak istiyorum siteme fakat bir türlü olmuyor bana mailden ulaşıp otomatik resim kodunu atsanız olur mu
Merhaba omer bey bu tasarımınızı kullanıyorum ben suan ve tasarımın mobıl uyumlulugu yok bu konuda bana bır destek verırmısınız mobıl uyumu var ıse bır yol gosterırmısınız.
merhabalar bu siteyi kendime göre dünzenleyip interete açık bir şekilde sunmak istiyorum bu sizin için bir sorun çıkartımı izniniz varmı
Arkadaşım istediğin gibi kullanabilirsin.