settingsGiriş | Kayıtsettings
Menüyü Göster

Tek Sayfa Tasarımını Html Css Olarak Nasıl Yapıyoruz?

0 oy
Arkadaşlar merhaba, şu linkteki

http://www.launchfactory.org/#aboutfactorytitle

 gibi tek sayfalık bir tasarımı responsive olarak yapmak için herhangi özel bir durum varmıdır ? Adı yada bir uygulama şekli gibi, yoksa bildiğimiz web sitesini tek sayfada mı çıkarıyoruz? Birde menülerden herhangi birine tıklayınca aşağıda ilgili linke gidiyor o nasıl yapılıyor?

Parallax bundan farklı bir durum mu?

şimdiden tşk ederim.
12, Aralık, 2014 Webmaster kategorisinde Tolga Oz (37 puan) tarafından soruldu

3 Cevaplar

0 oy

Aslında çok basıt olduğu kadar da bir o kadar da zor. Örnek dediğin sayfaya bakalım. HTML5 ile kodlanmış. CSS ler html ye gömülmüş Şu kodla. 

<!-- CSS concatenated and minified via ant build script-->
<link rel="stylesheet" href="http://sorucevap.webtekno.com/yonlendir?to=css%2Fstyle.css" target='_blank'>
<link rel="stylesheet" href="http://sorucevap.webtekno.com/yonlendir?to=css%2FqueryLoader.css" target='_blank'>
<!-- end CSS-->
 
Ondan sonrada javascripte geçmiş. Şu kod ile ;
 
<script src="js/modernizr2.js"></script>
 
Daha sonra div komutlarıyla css de olan tabloları çağırmış.
<div class="container">
ve logoyu fırlatmış.
<img id="logo" src="images/logos/launchfactory.png" alt="Launch Factory" />
sonra css den menü tablosunu çağırmış. "mainNav"
<nav id="mainNav">
sonra aşağıdaki kodlarla sana tıklarlarsa intronun olduğu yeri göster millete demiş.
<a href="http://sorucevap.webtekno.com/yonlendir?to=%23introarea" target='_blank'>Home</a>
<a href="http://sorucevap.webtekno.com/yonlendir?to=%23aboutfactorytitle" target='_blank'>About</a>
<a href="http://sorucevap.webtekno.com/yonlendir?to=%23processfactorytitle" target='_blank'>Process</a>
<a href="http://sorucevap.webtekno.com/yonlendir?to=%3Ca+href%3D" target='_blank'http://www.webtekno.com" rel="nofollow">http://www.webtekno.com">Events</a>
<a href="http://sorucevap.webtekno.com/yonlendir?to=%23applyfactorytitle" target='_blank'>Apply</a>
</nav>
</div><!-- end container -->

yani anlican CSS kodlamalar ve hareketlilik içinde javayı kullanmış. Bazı yerlerde yatersiz kalabilirim. Ama mantığı bu mantığı çözmek işin yarısıdır. Bundan sonra kodlamalar ile konuşmak gerek. :)

14, Aralık, 2014 KayıpDerviş (16,950 puan) tarafından cevaplandı
0 oy
bootstrap kullanabilirsin. çok gözde bir frameworktür kendisi.

linke tıklatıp sayfanın aşagı gitmesi selection ile yapılıyor. kayarak inmesi ise jqurey ile.

bootstrap i buradan http://getbootstrap.com/
jquery i uygulamalı olarak http://try.jquery.com/ buradan öğrene bilirsin.
26, Ocak, 2015 OnurAKSOY (71 puan) tarafından cevaplandı
0 oy
Tasarımı responsive olarak yapmanın farkı yok. Tek sayfada görüntülenecek sonuç olarak. Link kısmını #link olarak verirsin. Daha sonra o linke tıklayınca sayfanın neresine gitmesini istiyorsan ki genelde div dir bu divin idsine de id='link' dersen linke tıklandığında o divin olduğu kısıma gidecekti sayfa.
10, Şubat, 2015 byersoy (127 puan) tarafından cevaplandı

İlgili sorular

0 oy
4 cevap
23, Haziran, 2015 Yazılım kategorisinde burakalasoy1 (49 puan) tarafından soruldu
0 oy
1 cevap
15, Eylül, 2015 Webmaster kategorisinde SinirliOyuncu (5,740 puan) tarafından soruldu
+1 oy
1 cevap
26, Aralık, 2014 Webmaster kategorisinde Ahmet Şenlik (39 puan) tarafından soruldu
0 oy
1 cevap
15, Aralık, 2014 Yazılım kategorisinde mrtylmaz__ (17 puan) tarafından soruldu
0 oy
0 cevap
28, Aralık, 2015 Webmaster kategorisinde Agreatmad (23 puan) tarafından soruldu

Bu Ayın En Aktif Üyeleri

    Soru sor cevap bul

    40,392 soru

    115,076 cevap

    50,012 yorum

    56,422 kullanıcı

    Günün Haberleri
    ...