Ten poradnik pokaże Ci, w jaki sposób napisać swój pierwszy, według mnie najprostszy jaki może być szablon strony internetowej przy użyciu CSS. Nie do pomyślenia jest, abyś szablon strony wykonywał na podstawie tabel - te czasy już dawno minęły.
W poprzednich poradnikach pisałem jaka jest struktura HTML i jak umieścić arkusz stylów CSS w pliku HTML - będzie to koniecznie, byś napisał swój pierwszy szablon.
Krok 1
Pierwsze co musisz zrobić to napisać strukturę strony i umieścić CSS w pliku HTML. Nie będę tłumaczył jak to zrobił, można o tym przeczytać w moich wcześniejszych poradnikach.
Krok 2
W tym kroku należy w pliku HTML napisać strukturę divów, które posłużą jako cegiełki szablonu. Czym jest div? Jest to element blokowy, który stosuje się głównie do tworzenia struktury strony. Chcemy by nasza strona składała się z miejsca gdzie będzie logo, z lewego menu, z treści oraz ze stopki. Przykładowy projekt wygląda tak:
Struktura szablonu znajdowała się będzie pomiędzy znacznikami <body> </body> i będzie wyglądała następująco:
W zamieszczonym przykładzie stworzyliśmy div o id=kontener. Będzie to miejsce, w którym umieszczać będziemy wszystkie divy.
Krok 3
Teraz odwołamy się do naszych divów, które napisaliśmy w pliku HTML. Przechodzimy do pliku style.css i zapisujemy każdego z divów, które stworzone zostały wcześniej. Wygląda to tak:
Można teraz przejść do ustalania odpowiednich wartości dla każdego diva. Będzie to wyglądało w ten sposób:
<
Opis poszczególnych właściwości:
width - szerokość.
height - wysokość.
margin - margines (ustawiony na wartość 0 auto;, by wyrównać diva do środka).
background-color - kolor tła.
float: left; - ustawienie tej wartości przenosi diva na lewą stronę. Ustawiliśmy tą wartość dla #menu i #tresc, ponieważ sprawi to, że divy będą obok siebie.
clear:both; - usuwa formatowanie float, dzięki czemu reszta divów poniżej nie będzie już przesuwania do lewej strony - było to konieczne by stopka pojawiła się na dole strony.
Skomplikowane czy może banalnie proste? Kluczową rolę w posługiwaniu i uczeniu się języka CSS jest znajomość języka angielskiego, bo wszystkie wartości są właśnie w języku angielskim.
Szablon sklepu internetowego Start. Pakiet idealny dla początkujących Klientów.
OdpowiedzUsuńSolidnie napisane. Pozdrawiam i liczę na więcej ciekawych artykułów.
OdpowiedzUsuńFaktycznie można samodzielnie tworzyć strony www, jednak ja się na tych rzeczach kompletnie nie znam. Właśnie w takiej sytuacji zdecydowanie najlepszym rozwiązaniem było zgłoszenie się do firmy https://haiku.com.pl/ gdyż moim zdaniem wykonują oni profesjonalne strony internetowe.
OdpowiedzUsuńNie jest to nic aż tak trudnego, no ale też zależy czego oczekujecie od strony internetowej. Tu firmie https://seomamut.pl/tworzenie-stron-internetowych-puck/ znajdziecie usługi tworzenia profesjonalnych stron www.
OdpowiedzUsuń