docTworzenie stron internetowych 2
download 
Reklamacja Transkrypt
Tworzenie stron internetowych 2
Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, JavaScript, CSS3 i jQuery Łukasz Bartczuk Moduł 2 Tworzenie układu strony Agenda • Podstawy tworzenia układu strony • Tworzenie układu z wykorzystaniem tabel • Tworzenie układu z wykorzystaniem CSS Podstawy tworzenia układu strony • Podstawowe informacje • Projektowanie układu Projektowanie układu Stopka strony Artykuł Reklamy Nawigacja Nagłówek strony Tworzenie układu z wykorzystaniem tabeli NIE ROBIMY TEGO Tworzenie układu z wykorzystaniem CSS • Stworzenie struktury strony • Przygotowanie odpowiedniego stylu Stworzenie struktury strony (1) <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="styl.css" /> </head> <body> <div id="naglowek" class="wiersz"></div> <div id="zawartoscGlowna" class="wiersz"> <div id="nawigacja" class="kolumna"></div> <div id="artykuly" class="kolumna"></div> <div id="reklamy" class="kolumna"></div> </div> <div id="stopka" class="wiersz"></div> </body> </html> Stworzenie struktury strony (2) <div id="naglowek"><!-- tu będzie zawartość nagłówka strony --> </div> <div id="naglowek" class="wiersz"> <h1> Przykładowa strona </h1> <div id="wersjeJezykowe"> <ul> <li><a href="#" class="wersjaJezykowa">PL</a></li> <li><a href="#" class="wersjaJezykowa">EN</a></li> <li><a href="#" class="wersjaJezykowa">ES</a></li> <li><a href="#" class="wersjaJezykowa">DE</a></li> </ul> </div> </div> Stworzenie struktury strony (3) <div id="nawigacja"><!-- tu będzie zawartość nawigacji strony --> </div> <div id="nawigacja"> <ul> <li><a href="#" class="menu">Podstrona <li><a href="#" class="menu">Podstrona <li><a href="#" class="menu">Podstrona <li><a href="#" class="menu">Podstrona </ul> </div> 1</a></li> 2</a></li> 3</a></li> 4</a></li> Stworzenie struktury strony (4) <div id="reklamy"> <!-- tu będą reklamy --> </div> <div id="reklamy"> <div class="reklama"> <a href="#"><img src="podfre.jpg" />Tekst 1</a> </div> <div class="reklama"> <a href="#"><img src="podfre.jpg " />Tekst 2</a> </div> <div class="reklama"> <a href="#"><img src="podfre.jpg " />Tekst 3</a> </div> <div class="reklama"> <a href="#"><img src="podfre.jpg " />Tekst 4</a> </div> </div> Stworzenie struktury strony (5) <div id="stopka"> <!-- tu będzie stopka strony --> </div> <div id="stopka" class="wiersz"> <p>Wszelkie prawa zastrzeżone © 2013</p> </div> Stworzenie struktury strony (6) <div id="artykuly"> <!-- tu będą główne artykuły strony --> </div> <div id="artykuly"> <div class="artykul"> <h2>Nagłówek artykułu</h2> <h3>środa, 14 września 2013</h3> <p> <img src="Obrazy/podfre.jpg" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse bibendum risus scelerisque arcu porttitor venenatis. Quisque id libero nec augue tempus lobortis ac non ipsum. Pellentesque vulputate adipiscing leo, at luctus diam mollis ultricies. </p> </div> <div class="artykul"> <!-- kolejny artykul --> </div> </div> DEMO Przygotowanie odpowiedniego stylu
