Szabloneria Emi

Tworzenie stron internetowych to niezwykle fajna sprawa. Otwierasz zwykły plik tekstowy np. WordPad nadajesz mu nazwę, a po nazwie robisz kropkę i nadajesz mu formę html

np. mój plik.html

i od tego momentu zaczyna się zabawa.

Mamy tutaj box z wyśrodkowanym napisem 'Hello World', aby takie coś zaistniało należy w naszym pliku HTML stworzyć coś co nazywa się stroną internetową. Przede wszystkim musimy określić w pliku jaki rodzaj języka określamy czyli HTML. Na zdjęciu poniżej mamy zapis

W części head zapisuje się np. Tytuł strony, który wyświetla się potem w części zakładki, faviconkę, dodatkowe fonty, scripty np.: java script, php i inne języki. I w końcu przechodzimy do części body, która jest treścią naszej strony. To ta część jest widoczna jako tekst, ale zawiera również kody, które określają funkcje na stronie. Mamy tu p, h1,h2,h3 itd, ale również div class, div id, td, ul, li, a, img, ol, input itp...(o tym w dalszej części). Za pomocą div określamy jakieś części wspólne - w tych div'ach można dodawać inne div'y o częściach wspólnych z innymi funcjami. Ale po kolei.

Tutaj użyłam prostego div class o nazwie 'box' i wpisu bez właściwości np. tytułu h1, poprostu między znacznikami >< wpisałam wpis Hello World. Sam ten wpis po otwarciu naszej strony internetowej pokazany byłby w postaci tekstu bez określenia jego wielkości czyli domyślnie, bez rodziny czcionki - przeważnie jest to sans-serif, bez jakiejkolwiek obróbki. 

Do określenia wyglądu potrzebny jest nam arkusz stylu tzw. CSS - jest to plik, który tworzony identycznie jak plik HTML, za pomocą np. WordPad, ale tym razem zmieniamy nazwę na style.css - ta nazwa jest najlepsza dla określenia tego pliku. Jednak język w nim zawarty jest zupełnie inny od tego z HTML. 

Pamiętacie div class w HTML ma nazwę 'box'.

W CSS div'y określamy znacznikami '#' '.'. div class to znacznik '.' i nazwa div'a czyli 'box'. Ten znacznik '#' to div id.

W związku z tym nasz div w CSS będzie wyglądał tak:

.box{}

Po co te nawiasy? W tych nawiasach będziemy zapisywać to co chcemy określić.

Na chwilę nie zwracajcie uwagi na body, ale wyłącznie na zwartość .box.

Jest tam określenie background. Brzmi znajomo, ale co oznacza? Jest to określenie tła, jego koloru lub może być zdjęcia lub grafiki.

Kolory można określać w różny sposób: 

• za pomocą nazw jak np. red, blue, black, white, orange itp
• za pomocą rgba, ale wtedy zapis wygląda np. tak: rgba(0,0,0,) tablice z kolorami można znaleźć w sieci po wpisaniu w google 'rgba'
• oraz rgb, wyglądają tak: #fff lub #666; te znaczniki kolorów są sześciocyfrowo-literowe, ale w momencie powtarzalności postępującej po sobie do dwóch np. #3322ff, można zapisać #32f - choć w przypadku np. #e3e3e3 trzeba zapisać go w całości.

W przypadku zdjęć i grafik, wcześniej zapisywało się wszystko oddzielnie tzn. był background-color:

background-img:

teraz zapisuje się background: #fff(color); lub background: url(#) (img-czyli zdjęcie);

Każdą funkcję w języku CSS kończymy ';' średnikiem - to jest jak enter czyli potwierdzenie tego co chcemy zrobić.

Odnośnie background jest jeszcze taka opcja, że można łączyć color i zdjęcie lub grafikę w zapisie:

background: #fff url(#) top center no-repeat;

co to oznacza? Nasze tło czyli background ma kolor #fff czyli biały i grafikę lub zdjęcie bez określonego przeze mnie linku, ale wiadomo, że jest. Określenie "#" w nawiasie odpowiada również za mającą się się tam pojawić - w późniejszym czasie stronę internetową.(w to miejsce wkleja się link prowadzący do grafiki)

Przyjrzymy się co mamy dalej w kodzie: width i height - co to takiego? Width - to szerokość określona w pikselach, a height - to wysokość. Ja raczej używam określeń pikselowych, ale ostatnio ze względu na różne rozdzielczości ekranów zaczęłam określeń procentowych, jeśli chodzi o spore kontenery - div'y.

Na samym końcu mamy text-align: center - jest to określenie w poziomie ustawienia tekstu: mamy left, center i right (po lewej, w centrum, po prawej). Nie mamy takiej wartości jeśli chodzi o pion i dlatego używa się line-height tutaj mamy wartość 200px tak jak wysokość i szerokość i na podstawie tej wartości wypośrodkowuje nasz napis.

PODSUMOWANIE: 

Sporo wiadomości jak na pierwszy raz, ale praktycznie to sama podstawa, co mamy już?:

1. Otwarcie dokumentu HTML i podstawowe polecenia;
2. Pierwszy zapis w div'ach i prosty tekst;
3. Zapisanie arkusza stylów CSS;
4. Określenie zapisu div w CSS;
5. Ustalanie kolorów i grafik;
6. Wielkości i szerokości kontenera;
7. Określenia położenia tekstu

Następnym razem zajmiemy się innymi funkcjami boxa 

Taki formularz wstawiłam na jednej z moich stron statycznych i wszystko byłoby ładnie i pięknie, gdyby nie fakt, że po prostu nie za bardzo znam język PHP. Myślę, że z tym kodem nie byłoby ciężko - gdybym wiedziała jakie dodatkowe parametry wstawić do kodu. Jestem totalnie zielona i niedouczona w tej kwestii, sama na siebie się wkurzam. Nie mam problemu z CSS i XHTML, ale java script i jego pochodne to dla mnie czarna magia. Jeszcze zdarzyło mi się coś takiego, że ...widzicie tą ramkę pod tą dużą z treścią wiadomości? Weszła mi do mojego html od strony admina.

Może ktoś ma ten etap za sobą - tak, właśnie proszę o pomoc.

Jeszcze dzisiaj, a jest już po północy i powinnam iść spać.

Stwierdziłam, że dobrze będzie Wam pokazać znajomy szablon, ale w nowej szacie.Jest zupełnie inny niż był, ale nie tylko za sprawą wizerunku, ale głównie kodu.

Kiedyś miałam duże problemy z pozycjonowaniem - nawet bardzo duże - dużo rzeczy robiłam na wyczucie, ale to nie zawsze współgrało. 

Czym się ten kod różni od innych - dostosowuje się do rozdzielczości ekranu. Nie mieliście wrażenia, że np. ten szablon nie jest zrobiony pod mój blog, bo..

np. niektóre elementy uciekają lub blog się rozjeżdża?

Na dzisiaj przygotowałam dla Was kilka stron z bardzo fajnym designem, ale i z efektami, które nie mogły ujść mojej uwadze. Możliwe właśnie, że było w zamyśle projektantów, ponieważ trafili w sedno. To co nas przyciąga do różnych zakątków sieci - to często interesujące tematy i wygląd.

Mam wrażenie, że efekty dźwiękowe raczej odstraszają niż przyciągają, ale wizualne wręcz przeciwnie.

Zapraszam Was do świata webdesign'u w najlepszym jego wydaniu.

Tym razem raczej bez flasha, ale równie fascynująco.