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

  1. bilgibaz - 180 puan
  2. tariksahin - 140 puan
  3. Onurdurgut - 140 puan
  4. clowneryisasin - 140 puan
Soru sor cevap bul

40,392 soru

115,060 cevap

50,008 yorum

56,165 kullanıcı

Günün Haberleri
...