wygląd strony - Kurs HTML i CSS
Szablon strony na DIV-ach / Płynny szablon...sensu, gdyż często zawiera ustalone wąskie elementy (odnośniki nawigacyjne). Poza tym dzięki stałej szerokości kolumny menu podanej w pikselach jej wygląd staje się niezależny od rozdzielczości ekranu, a w tym przypadku jest to mocno wskazane. Cały czas jedynie stylizując niezmienny kod HTML przedstawiony na wstępie, sprawimy, że kolumna treści dopasuje się do rozmiarów okna przeglądarki, a więc również do rozdzielczości ekranu (wszystkie przykłady w skali 1:2, czyli dwukrotnie...
- Dobre praktyki / Przykazania webmastera
...Uświadom sobie, że choćby oprawa graficzna Twojego serwisu była niezwykle estetyczna, a sama witryna bardzo funkcjonalna, rażące błędy ortograficzne wyglądają po prostu nieprofesjonalnie. Twoi potencjalni czytelnicy mogą wtedy z góry ocenić, że prawdopodobnie nie masz nic ważnego do przekazania i od razu opuszczą stronę. Używaj polskich znaków diakrytycznych Zrozumiałym może być, że SMS-y szybciej się pisze bez polskich liter. Podobnie nikt raczej nie będzie miał do Ciebie wielkich...
- Media CSS / Zapytania mediów
...Nie należy jednak myśleć, że jest to przydatne jedynie kiedy tworzymy stronę na urządzenia mobilne. Bez trudu można wyobrazić sobie specjalny wygląd dokumentu, dopasowany do wyświetlania na telewizorze o proporcjach ekranu 16:9. Dodatkowe możliwości możemy uzyskać również w przypadku sterowania wyglądem strony wyświetlanej na ekranie tradycyjnego monitora komputerowego. Na przykład jeśli użytkownik ma ustawioną wyższą rozdzielczość ekranu, możemy wyświetlić mu dodatkową kolumnę treści...
- Szablon strony na DIV-ach / Semantyczny szablon strony
...zyskać jeszcze więcej, projektując całą stronę w ten sam sposób: Wyobraź sobie, że po roku działalności strony zechcesz całkowicie odmienić jej wygląd, np. przenosząc kolumnę menu z lewej na prawą stronę. Dzięki CSS to tylko jedna linijka w arkuszu stylów, zamiast żmudnej modyfikacji być może setek powstałych dotychczas podstron serwisu! Bez trudu wprowadzisz okolicznościowe wersje wyglądu swojej witryny - np. z okazji Nowego Roku. Chcesz przygotować zestaw skórek dla Twojej strony? Z...
HTML5 / Napisy do filmów <track>...siebie oddzielone pustą linijką. Choć być może brzmi to nieco skomplikowanie, tak naprawdę jest bardzo intuicyjne. Najprostszy plik napisów mógłby wyglądać następująco: WEBVTT 00:00:01.000 --> 00:00:05.000 Ten napis wyświetli się między pierwszą a piątą sekundą filmu. 00:00:05.000 --> 00:00:10.000 Ten napis wyświetli się między piątą a dziesiątą sekundą filmu. 00:00:20.000 --> 00:00:30.000 Ten napis wyświetli się między dwudziestą a trzydziestą sekundą filmu. Czasy wyświetlania napisów...
- Szablon strony na DIV-ach / Responsywny szablon
...częściej niż tradycyjne komputery stacjonarne czy laptopy. Cechą wspólną tego typu urządzeń zwykle jest mniejszy ekran. W końcu trochę dziwnie by wyglądało taszczenie pod pachą dwudziestocalowego "mobilnego" monitora do naszego smartfona 😉 Dla twórców stron internetowych oznacza to jedno: konieczne jest takie projektowanie serwisów, aby wyglądały dobrze, były czytelne i wygodne w użytkowaniu również na urządzeniach przenośnych. Jak to jednak zrobić? Istnieje kilka strategii. Powiększenie...
Skórki...Podstawowe zasady tworzenia odsyłaczy Style CSS, a zwłaszcza zewnętrzne arkusze stylów Niektóre serwisy pozwalają swoim użytkownikom zmienić wygląd stron, poprzez wybór jednego spośród przygotowanych specjalnych szablonów, które często nazywa się skórkami (ang. skins). Choć na pierwszy rzut oka operacja zmiany wyglądu wydaje się być dość skomplikowana, tak naprawdę absolutnie nie ma potrzeby budowania drugiej wersji strony dla każdej kolejnej skórki. Z pomocą przychodzą style CSS...
Dla nauczycieli / Scenariusz lekcji informatyki dla liceum i technikum...tekstu CSS Czcionka CSS Wyrównanie tekstu CSS Przebieg 5 min - Wprowadzenie do tematu Co to jest CSS, jak działa, dlaczego warto oddzielać wygląd od struktury. 10nbsp;min - Wstawianie stylów CSS Omówienie trzech sposobów dodania CSS (zewnętrzny, wewnętrzny, inline), nacisk na <link rel="stylesheet">. 10 min - Składnia CSS Selektory, bloki deklaracji (właściwości, wartości). Przykłady formatowania całej strony i pojedynczych elementów. 15 min - Praktyczne ćwiczenia...
- Dla nauczycieli / Scenariusz lekcji informatyki dla szkoły podstawowej
...podstawy programowej Lekcja 1 - Wprowadzenie do HTML i struktury dokumentu Lekcja 2 - Wstawianie obrazków i linków Lekcja 3 - Dostosowanie wyglądu strony i podsumowanie Zadanie końcowe / projekt Podsumowanie Wstęp Poniżej znajdziesz scenariusz cyklu lekcji oparty na podstawie programowej dla klas IV-VIII szkoły podstawowej z zakresu informatyki oraz materiałach ze strony HTML dla zielonych. Lekcje zostały rozplanowane na 3 spotkania po 45 minut, z pracą domową i elementami...
- Wykaz skryptów / Pozostałe skrypty
Aktywne przyciski Przyciski które zmieniają wygląd, po wskazaniu ich myszką (przydatne przy tworzeniu menu). Data aktualizacji strony Automatyczne wyświetlenie daty ostatniej aktualizacji strony. Aktualna data Wyświetlenie na stronie aktualnej daty. Nowość Sygnalizowanie nowości bezpośrednio w spisie treści lub na każdej ze stron, poprzez wyświetlenie specjalnego obrazka albo napisu. System newsów Automatyczny system wiadomości na stronie WWW, które są wyświetlane tylko przez określony...