Projektując strony często trzeba odpowiedzieć sobie na fundamentalne pytanie: jak będzie się zachowywać strona, gdy zostanie otwarta z różnymi rozdzielczościami ekranu? Dostępne są tutaj dwie opcje - "gumowe" (rozciągane) strony witryny lub statyczne. Pierwsza opcja zostanie omówiona. Bez względu na preferencje dotyczące układu, główną zasadą projektowania rozciągliwego jest względna skalowalność.
Czy to jest to konieczne
- - znajomość HTML;
- - program do edycji kodu html.
Instrukcje
Krok 1
Wybierz główny plik szablonu witryny, który będzie odzwierciedlał główny znacznik. Może to być plik index.html lub index.php. Jednym z najlepszych programów do edycji szablonów witryn wizualnych jest Macromedia Dreamweawer. Niezbędna edycja zostanie wykonana na podstawie tego programu.
Otwórz plik szablonu lub utwórz nowy poleceniem "Plik" - "Nowy", kategoria - "Strona bazowa" - "HTML" lub kategoria "Strona dynamiczna" - "PHP". Rozważamy tutaj ogólny przypadek, w którym struktura witryny jest zapisana dokładnie w jednym z dwóch plików.
Krok 2
Od dawna nie jest tajemnicą, że istnieją różne rodzaje układu - na stołach, na blokach div i łączonych (tabele i bloki jednocześnie). Za układ tabeli odpowiada tag html
Określ procent (100%) dla każdej właściwości. Osiągnie to efekt automatycznego rozciągania komórek tabeli na ekranach o dowolnej geometrii. Może to być 19-calowy monitor lub smartfon – każdy z nich poprawnie odtworzy treści.
Krok 3
Jeśli chcesz dokładnie określić zgodność między komórkami tabeli, użyj następującego przykładu:
| … … zawartość komórki 1. … | … … zawartość komórki 2. … |
Tutaj zobaczysz, że jedna z komórek jest określona z szerokością 30% wszystkiego, co jest zdefiniowane dla samej tabeli. Proste obliczenie pokazuje, że dla drugiej komórki pozostaje 100% -30% = 70%. Pamiętaj, że w tym przypadku jedna z komórek tabeli nie może mieć ustawionego atrybutu szerokości. Przeglądarka sama wykona wszystkie obliczenia i poprawnie rozciągnie tabelę z komórkami. Treści wewnątrz tabel będą się również prawidłowo rozciągać i kurczyć na różnych ekranach.
Krok 4
W sytuacji z układem div bloki znaczników są domyślnie rozciągane na całą szerokość ekranu i następują jeden po drugim od lewej do prawej, od góry do dołu. Aby doprecyzować ich geometrię, utwórz klasę CCS lub identyfikator (ID), w którym określisz np. atrybuty i/lub kategorię rozmiaru i położenia pudełka (Box). Nie zapomnij połączyć określonego stylu z plikiem znaczników witryny i powiązać klasę (ID) z żądanym znacznikiem. Zwykle umieszcza się go na samym początku skryptu, definiując całą przyszłą geometrię witryny:
… … zawartość witryny. …
Lub tak:
… … zawartość witryny. …
Kod reguły CSS będzie wyglądał następująco:
… moja klasa {
szerokość: 30%;
wzrost: 50%;
}
#mój dokument tożsamości {
szerokość: 30%;
wzrost: 50%;
}
