Ten tutorial został napisany w celach edukacyjnych, dla osób, które rozpoczynają zabawe z XHTML + CSS. Dowiecie się z niego jak stworzyć stonę taką jak Sunny Design
Jak wygląda kod XHTML dla tej strony?
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-
<html xmlns="http://www.w3.org/1999/xhtml">
-
<head>
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
<title>Untitled Document</title>
-
</head>
-
-
<body>
-
-
<div id="container">
-
<div id="header"></div>
-
-
<div id="lewo">
-
<div id="menu">
-
<div class="menu"></div>
-
<ul id="mainmenu">
-
<li class="home"><a href="#">home</a></li>
-
<li class="ofirmie"><a href="#">o firmie</a></li>
-
<li class="portfolio"><a href="#">portfolio</a></li>
-
<li class="oferta"><a href="#">oferta</a></li>
-
<li class="news"><a href="#">news</a></li>
-
<li class="kontakt"><a href="#">kontakt</a></li>
-
</ul>
-
</div>
-
<div id="ramka">
-
<div class="zaufali"></div>
-
<ul id="navlist">
-
<li id="active"><a href="#" id="current">Schering Polska</a></li>
-
<li><a href="#">Schering Polska</a></li>
-
<li><a href="#">Schering Polska</a></li>
-
<li><a href="#">Schering Polska</a></li>
-
<li><a href="#">Schering Polska</a></li>
-
</ul>
-
<div class="more"><a href="#">zobacz wiecej >></a></div>
-
</div>
-
</div>
-
-
<div id="prawo">
-
<div id="gora">
-
</div>
-
-
<div id="dol">
-
<div class="gradient"></div>
-
<div class="ostatnie"></div>
-
<div class="obrazek"><img src="images/palma.jpg" alt="palma"/></div>
-
<div class="opis">
-
<h1 class="naglowek">Palms Design</h1>
-
Nunc sed erat eu massa lobortis convallis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc porttitor. Ut dictum aliquet neque. Vestibulum scelerisque mattis dui. Suspendisse tempor pharetra lorem. Nullam varius tortor quis nibh. Vivamus quis dui scelerisque leo dapibus varius. Nulla justo enim, vulputate at, semper vitae, ultricies ac, est. Nullam tincidunt eros quis diam.
-
<div class="ostatnie_more"><a href="#">czytaj wiecej >></a></div>
-
</div>
-
</div>
-
</div>
-
-
-
<div id="footer">
-
<div class="footer">Page created by Water Design © all rights reserved</div>
-
</div>
-
-
</div>
-
-
</body>
-
</html>
Co do czego służy?
<div id="container">
Jest to div, w którym znajduje się cała zawartość strony – taki div musi być, ale nazwać go można dowolnie – podobnie jak wszystkie inne divy, spany, h1, h2 etc.
<div id="header">
Za pomocą tego diva tworzymy nagłówek strony.
<div id="lewo"> i <div id="prawo">
Te dwa divy dzielą stronę na dwie kolumny – lewą i prawą.
<div id="menu">
W tym divie znajduje się menu, które oparte jest na liście.
<div id="ramka">
W tym divie znajdują się linki z działu “zaufali nam”.
<div id="gora">
Ten div jest w kodzie pusty, ponieważ za pomocą wybranego skryptu nawigacyjnego będzie się w nim pojawiała zawartość podstron widocznych w menu.
<div id="dol">
Jest to ta część strony umieszczona pod divem o klasie gora. Zawartość jej jest sztywna i znajduje się w głównym kodzie strony (index.html).
<div class="gradient">
Ten div mimo, że wydaje się pusty to za pomocą stylu CSS zawiera w sobie tło – linie odzielającą divy:
<div id="gora"> i <div id="dol">
<div id="footer">
W tym dive znajduję się stopka strony – tło oraz tekst.
Styl CSS
Na początek powinniśmy w stylu wyzerować wszystkie marginesy wewnętrzne (paddingi) oraz marginesy zewnętrzne (marginy), aby dla wszystkich przegladarek nasze późniejsze wartości były takie same:
-
* {
-
padding:0;
-
margin:0;
-
}
To samo musimy zrobić dla obrazków, aby nie mialy obramowania nadanego automatycznie przez przegladarki (Firefox i IE)
-
img {
-
border:0;
-
}
W body musimy nadać następujący styl
-
body {
-
text-align:center;
-
background:url(images/pasek.jpg) repeat-x #FFF;
-
}
Dzięki text-align:center; nasza strona będzie wyśrodkowana w przegladarce IE 5.
A dzięki background nadajemy tło – w tym przypadku w body widzimy szary i niebieski pasek (http://sunnydesign.glt.pl/images/pasek.jpg), który powtarza się w linii poziomej.
Aby wyśrodkować stronę w pozostałych przegladarkach, nalezy dodać margin:0 auto
-
#container {
-
width:764px;
-
margin:0 auto;
-
text-align:left;
-
background:url(images/tlo.jpg) repeat-y;
-
font:11px Tahoma, Arial, Helvetica, sans-serif;
-
}
0 oznacza że margin z góry i z dołu ma 0px a auto, że prawy i lewy margin są dostosowywane automatycznie, są takie same po obydwu stronach.
text-align:left; – powoduje tutaj, że tekst w zawarttości wyrównany jest do lewej strony.
Aby zdefiniować rodzaje użytych czcionek i wielkość używamy na przykład takiego skrótu: font:11px Tahoma, Arial, Helvetica, sans-serif;
Jeżeli chcemy nadać divowi o identyfikatorze header tło musi napisać:
-
#header {
-
background:url(images/head.jpg) no-repeat;
-
width:764px;
-
height:195px;
-
}
W taki sytuacjach koniecznie należy podać wysokość (height) i szerokość (width) obrazka, którego chcemy użyć w tle. No-repeat za lokalizacją obrazka oznacza, że tło to nie może się powtrzać ani w pionie ani w poziomie.
Teraz przechodzimy do stylizowania kolejnych dwóch ważnych divów, w których zamieszczać będziemy zawartość strony <div id="lewo"> i <div id="prawo">.
Aby każda kolumna ustawiła się prawidłowo należy podać im szerokość oraz float (sprawia, że element zaczyna pływać i można go za pomocą odpowiednich atrybutów ustawić w odpowiednim miejscu), czyli:
Lewa kolumna ma płynąć do lewej strony – float:left;
-
#lewo {
-
width:200px;
-
float:left;
-
color:#173E5F;
-
}
-
A prawa kolumna ma płynąć prawej strony – float:right;
-
#prawo {
-
width:550px;
-
float:right;
-
color:#173E5F;
-
margin:0 0 25px 0;
-
}
Zajmijmy się teraz głównym menu. Jest ono oparte na liście. Jak wiadomo każda lista składa się z:
-
<ul>
-
<li></li>
-
<li></li>
-
<li></li>
-
</ul>
Na standardzie przy każdym <li> pokazuje się punktator – kropeczka. My musimy się tutaj pozbyć i zastosować jako punktatory małe ikonki.
-
/*Za pomocą list-style:none; pozbywamy się punktatorów, line-height:22px; określa wysokość między poszczególnymi < li >*/
-
#mainmenu
-
{
-
padding:0;
-
list-style: none;
-
font-size:13px;
-
color:#173E5F;
-
line-height:22px;
-
margin:0 0 0 30px;
-
}
-
-
/*A za pomocą tych dwóch opcji ustalamy kolor czcionki w odnośnikach utworzonych w każdym < li > oraz to czy ma być podkreślenie czy nie*/
-
#mainmenu a {
-
color:#173E5F;
-
text-decoration:none;
-
}
-
-
#mainmenu a:hover {
-
color:#54B4E5;
-
text-decoration:none;
-
}
Jeżeli chcemy aby kazde <li> miało inny obrazek, musimy każdemu <li> nadać inną klasę, a następnie podać odpowiedni background (tło), aby tekst nie nachodził na obrazek najlepiej w kazdej pozycji podać taką samą wartość paddinga (0 .2em), np:
-
#mainmenu li.oferta
-
{
-
padding-left: 25px;
-
background: url(images/oferta.gif) no-repeat 0 .2em;
-
}
-
-
#mainmenu li.home
-
{
-
padding-left: 25px;
-
background: url(images/home.gif) no-repeat 0 .2em;
-
}
-
-
#mainmenu li.portfolio
-
{
-
padding-left: 25px;
-
background: url(images/portfolio.gif) no-repeat 0 .2em;
-
}
-
-
#mainmenu li.kontakt
-
{
-
padding-left: 25px;
-
background: url(images/kontakt.gif) no-repeat 0 .2em;
-
}
-
-
#mainmenu li.oferta
-
{
-
padding-left: 25px;
-
background: url(images/oferta.gif) no-repeat 0 .2em;
-
}
-
-
#mainmenu li.ofirmie
-
{
-
padding-left: 25px;
-
background: url(images/ofirmie.gif) no-repeat 0 .2em;
-
}
-
-
#mainmenu li.news
-
{
-
padding-left: 25px;
-
background: url(images/aktualnosci.gif) no-repeat 0 .2em;
-
}
Ramka niżej jest skonstruowana w bardzo podobny sposób – w tym miejscu dodaliśmy jedynie color tła oraz obramowania pola w którym znajduje sie lista z linkami:
-
#navlist
-
{
-
margin:0 0 0 30px;
-
padding:0;
-
list-style: none;
-
}
-
-
#navlist li
-
{
-
padding:0 0 0 13px;
-
background: url(images/arrow.gif) no-repeat 0 .5em;
-
}
-
-
#navlist li a {
-
text-decoration:none;
-
font-size:12px;
-
color:#173E5F;
-
}
-
-
#navlist li a:hover {
-
color:#54B4E5;
-
text-decoration:none;
-
}
-
-
#ramka {
-
width:170px;
-
background:#F0F0F0;
-
border:1px #4BC6DD solid;
-
margin:0 0 0 30px;
-
padding:10px 0 10px 0;
-
line-height:18px;
-
}
-
-
.zaufali {
-
background:url(images/zaufali.jpg) no-repeat;
-
width:104px;
-
height:21px;
-
margin:0 0 10px 15px;
-
}
Stopka strony zawiera w sobie obrazek oraz tekst.
Tekst został wypozycjonowany z lewej strony za pomocą margin. Tag clear:both; w stopce służy można powiedzieć do zamknięcia wcześniej uzytych float:left; oraz clear:right; i dzięki temu stopka jest częścią zamykającą całą stronę. Nie oznacza to oczywiscie, że pod nią nie można utworzyć kolejnych częsci strony. clear:both; może byc też używany w innych częściach kodu, tam gdzie jest potrzebny w tym samym celu co w tym.
<div id="footer">
<div class="footer">Page created by Water Design © all rights reserved</div>
</div>
-
#footer {
-
-
background:url(images/footer.jpg) no-repeat;
-
-
width:764px;
-
-
height: 26px;
-
-
clear:both;
-
-
}
-
-
-
-
.footer {
-
-
margin:0 0 0 450px;
-
-
padding:6px 0 0 0;
-
-
color:#173E5F;
-
-
}
I tak skonstruowana jest część główna strony.
Podstrony zbudowane sa na podobnej zasadzie. Możecie to zobaczyć po wejściu do źródła kazdej podstrony. Ich format jest zależy tylko od waszego zapotrzebowania i fantazji.
Trzeba pamietać, że najważniejsze jest to, aby strona poprawnie była wyświetlana w każdej przeglądarce. Nie można właściwie żadnej lekceważyć, bo w ten sposób lekceważy się również gości naszej strony, którzy korzystają z innej przegladarki niż my.
Dlatego jeżeli chcemy sami zrobić sobie stronę musimy mieć co najmniej 3 podstawowe przeglądarki internetowe (Opera, Firefox, IE) aby móc od razu poprawiać błedy, które wychodzą w trakcie pisania kodu. Niestety nasz kod przez np. IE może być inaczej czytany niż przez Operę czy Firefoxa.
Życzę miłej nauki.
Tutorial stworzony dla serwisu: Vivee.info
Cześć Agressiva,
Na poczatek powiem że, to świetny i pomocny tutorial!
Jednak to moje poczatki z CSS czy moge liczyc na pomoc z twojej strony? Nie wiem co zrobic aby po kliknieciu w wybrane menu ladowala sie strona, jak podpiac strony pod menu. TZN. mam pliki index.html i css ale nie wiem jak utworzyc i dodac inne strony.Zupełnie nie mam o tym pojęcia. Pozdrawiam,
Angelica
Sama znajomość Cssa i Htmla nie pomoże do tego aby strona zaczęła żyć,
jednym ze sposobób na zmiene zawartości treści strony jest system zarządzania treścią, który można podlaczyc pod skrojony szablon orientując się w działaniu wybranego silnika.
Jest także możliwość zastosowania skrypu php (include), który jak nazwa wskazuje będzie inkludował odpowiednie treści ze wskazanych plików do części content strony.
Można również stworzyc kilka osobnych (indywidualnych) szablonów w html i w linkach podawac do nich odsyłacze, ale jest to metoda bardzo prymitywna, aczkolwiek na sam początek nauki może być skuteczna.
Dzięki za odpowiedź. Na razie jestem na początku drogi ale od czegoś trzeba zacząć. Liczę na dalsze podpowiedzi w temacie i pozdrawiam
Ile czasu zajęła Ci nauka webmasteringu? O ile mogę zapytać…
Zaczęłam się tym powoli bawic w LO, teraz jestem na 4 roku studiów, wiec nieco czasu już minęło.
Moja znajomość tego wszystkiego była wystarczająco dobra ponad 3 lata temu, kiedy zaczęłam udzielac się “zawodowo” i robic stronki na zlecenia.
Byłam na kursie “Programy graficzne i projektowanie stron www”, niestety kurs był bardzo słaby i niskich lotów. Jednak zaciekawił mnie ten temat. Tak wiec, co musi umieć typowy webmaster? Czy znajomość css, html, xhtml i podstawy php wystarcza? Czemu obecnie zaciera się granice miedzy grafikiem a webmasterem, w sumie wszyscy chcą mieć jedną osobę do wszystkiego…
Typowy webmaster wg wieeelu firm z klasy agencji reklamowych najlepiej, żeby umial wszystko a nawet jeszcze wiecej… niestety tak to się przedstawia.
Osobiscie jestem na podwójnym stanowisku “grafik komputerowy / webmaster”, co musialam umieć? obsługa photoshopa, corela (czasami przydaje się illustrator), kodowania czyt xhtml/css do tego moja podstawowa znajomość JS zahacza już o pozycje programisty. Mowiąc krótko – robię prawie wszystko poza pisaniem autorskiego firmowego cmsa i nie podłączam stron pod niego (gdybym jeszcze miala się tym zajmować, to resztę pracowników można by było spokojnie wyrzucić). Oczywiście nie jest to dla mnie zbyt wesoła sytuacja, bo momentami uważam, że robię zbyt dużo tym bardziej, że jestem jedynym grafikiem na posterunku…
Tak czy siak – jeżeli chcesz być tylko webmasterem – musisz znać podstawy photoshopa, jeżeli chcesz być grafikiem to musisz znać się na (x)html/css…. Tak jak mówisz, te dwie osobne jakby się wydawało specjalizacje bardzo mocno się zatarły i jeżeli umiesz więcej niż musisz to jesteś spokojna.
Niestety, dopiero się tego ucze…
Cześć!Jak stworzyć galerię na własnej stronie? W jakich programach, najlepiej łatwych.Potrzebuję paru wskazówek…
To zależy,
czy masz stronkę opartą na cmsie czy tez nie…
- jeżeli masz na wordpressie to nie ma tutaj większej zabawy – jedziesz z NextGen Gallery i wszystko się samo generuje.
- jednak jeżeli stronkę masz prostu – htmlową, to musisz niestaty robic miniarutki z obrazków ręcznie wrzucac je w tresc strony jako
Dla lepszego efektu otwieranych zdjęc mozesz podpiac Jquery ligthbox plugin (http://vivee.info/2007/12/21/zastosowanie-jquery-lightbox-plugin/) lub np Fancybox (ostatnio bardzo go polubiłam – http://fancy.klade.lv/).
To jeszcze ja, dzięki za pomoc! właśnie działam w jquery-lightbox-plugin. Chce Cię zapytać jaką wielkość powinny mieć zdjęcia żeby nie obciążać strony skoro moja galeria będzie mieć około 10-15 zdjęć.
Już jestem i odpowiadam
Co do wagi zdjęcia – osobiście, aż tak bardzo się tym nie przejmuję ze wzgledu na darmowy serwer + dość mocne łącza internetowe, jakie mogą ludzie już posiadać, ale generalnie jak coś wrzucam na stronę (np. portfolio fotograficzne) to staram się aby nie dawać fotki większej niż 1000px wysokości lub szerokość (zależy w jakiej płaszczyźnie jest wykonane). Niektóre skrypty takie jak jquery lightbox plugin nie potrafią skalować fot do wielkości okna przegladarki (co jest jest wygodne przy ogladaniu fot mających 3000px szerokości).
Cześć, w jakich programach pracujecie? Byłam kiedyś 3 tyg w takiej firmie pracującej na własnych kreatorach i było tam dziwnie…
Jeżeli chodzi o programy graficzne to oczywiście Adobe Photoshop (CS4) oraz Corel, zdarza mi się czasami coś zrobic w Illustratorze.
Koduję stronki w Dreamweaverze.
To jest podstawowy ‘sprzęt’.
Wielkie dzięki i ponownie ja:) z pytaniem. Chciałabym podpiąć galerie z jquery. Mam taki zapis, ale nie wyświetla strony ze zdjeciami Galeria nie bardzo wiem co powinnam tu zmienić…
Najlepiej to podaj linka, czasami hasłowo nie potrafię sobie każdej sytuacji wyobrazić
Chętnie ale ile razy go wpisze nie ukazuje się zapis…w html
Siema,
Co do tutka to powiem tak.
Sam zajmuję się stronami, ale nie jestem wielkim profesjonalistą jednak coś tam umiem.
Teraz właśnie zmieniam theme do swojej strony więc teraz jest brzydko, ale będzie ładnie
Przejdźmy do rzeczy.
Zanim zabierzecie się za kodowanie strony musicie mieć gotowy layout bo nie wyobrażam sobie aby ktoś robił obrazki na bieżąco!
Najpierw trzeba zrobić layout w photoshopie a potem wyciąć wszystkie obrazki w odpowiedni sposób aby wszystko sobie ułatwić
Ja robię w extreme-fusion więc po wycięciu laya należy przygotować szablon HTML (najprościej), a potem za pomocą PHP (w pliku theme.php) i css (w pliku style.css) dostosować wszystko tak aby działało pod EVIV.
Zresztą dużo tłumaczyć.
Zapraszam na http://www.tubyllink.pl
Tam stawiałem swoje pierwsze kroki.
Poszukajcie na forum dział
HOW TO MAKE A THEME
tam jest kilkanaście filmików z komentarzem jak to zrobić od początku.
Edit. przepraszam, że wycięłam adres, ale nie przyjmuje reklam tego typu serwisów/ A.
Jezeli pliki mozesz wrzucic na jakis serwer to chyba nie powinno byc problemu?
Szkoda to wrzucać bo to dopiero początek mojej strony. Nie znałam wcześniej zasad css (wyobraź sobie, że nawet na kursie robienia stron www tego nie było, uczyli nas stron w oparciu o ramki).
Może popróbuje naprawić to sama bo na razie nic tam jeszcze szczególnego nie ma.
Oj no bez kitu, przecież jak tylko będę potrafiła pomóc to pomogę… jak nie chcesz tu wrzucać linka to podaj go na maila – http://agressiva.poprostuja.pl/kontakt/
Tylko nie obiecuje, że dziś napiszę, bo mam sporo roboty
Cześć! Widziałam zmiany już wczoraj. Gratuluje:) PS.Cześćiowo poradziłam sobie z galeria ale odezwę się do Ciebie po porady oj, odezwę
Ciesze się, że kolejny redesign mojej strony przypadł do gustu
Jasne, jak coś tylko to pisz
Pozdr.
Zmieniam stronę www szkoły. Będę korzystała z gotowego szablonu xhtml/css. Jaki jest według Ciebie prosty cms do zarządzania witryną ? Czy możesz coś polecic? Do tej pory wszystko uaktualniałam za pomocą Dreamweavera. Chciałabym to jakoś usprawnic. Testowałam Joomlę 1.5 ale rzuciłam ze względu na pojawiające się błędy.
Nie trudno jest zauważyć do jakiego cmsa mam najwiekszą słabość, oczywiscie polecić mogę wordpressa. Prosty przejrzysty, nie potrzeba byc tutaj wybitnym programistą aby nawet wlasną skórę podpiąć pod silnik. A samych gotowców również jest od groma, wystarczy nawet poprzegladać wpisy na moim blogu – troszkę rzeczy o tym można znaleźć.
Na pewno zajrzę do wordpressa. Mam takie pytanie jeśli przygotuję stronę w xhtml/css z szablonu to później mogę doinstalowac wordpressa i podpiąc do niego strony, które chcę zmieniac przez jakiś prosty edytor tekstu podobny do worda? Widziałam w internecie szablony typowo do wordpressa i zastanawiam się czy po zrobieniu strony będę mogła z niego korzystac? Tak orientacyjnie ile czasu potrzeba żeby się z nim zapoznac?
Zmieniam stronę www szkoły. Będę korzystała z gotowego szablonu xhtml/css. Jaki jest według Ciebie prosty cms do zarządzania witryną ? Czy możesz coś polecic? Do tej pory wszystko uaktualniałam za pomocą Dreamweavera. Chciałabym to jakoś usprawnic. Testowałam Joomlę 1.5 ale rzuciłam ze względu na pojawiające się błędy.;. All the best!!
Witam
Świetny blog, fajna grafika.
Chciałbym się dowiedzieć od czego zacząć naukę tworzenia stron.
Na razie robię samą grafikę. Od niedawna zacząłem tworzyć layouty.
Dreamweaver? xhtml/css? Od czego zacząć abym mógł sam robić coś prostego na początek?
Z góry dzięki.