Когато проектирате сайтове, често трябва да решавате основен въпрос: какво ще бъде поведението на страницата, когато тя се отваря с различни резолюции на екрана? Тук има две опции - „гумени“(разтягащи се) страници на сайта или статични. Ще бъде обсъден първият вариант. Независимо от предпочитанията ви за оформление, основният принцип на стреч дизайна е относителната мащабируемост.
Необходимо е
- - познаване на HTML;
- - програма за редактиране на html-код.
Инструкции
Етап 1
Изберете основния файл за шаблона на вашия сайт, който ще отразява основната маркировка. Това може да бъде файл index.html или index.php. Един от най-добрите софтуери за редактиране на визуални сайтове е Macromedia Dreamweawer. Необходимото редактиране ще бъде направено въз основа на тази програма.
Отворете файла на шаблона или създайте нов чрез команда "Файл" - "Нов", категория - "Основна страница" - "HTML" или категория "Динамична страница" - "PHP". Тук разглеждаме общия случай, когато структурата на сайта е записана точно в един от двата файла.
Стъпка 2
Отдавна не е тайна, че има различни видове оформление - на таблици, на div-блокове и комбинирани (таблици и блокове едновременно). Тагът html отговаря за оформлението на таблицата
Посочете процент (100%) за всяко свойство. Това ще постигне ефекта от автоматично разтягане на клетките на масата върху екрани с всякаква геометрия. Това може да бъде 19-инчов монитор или смартфон - всеки от тях ще възпроизведе правилно съдържанието.
Стъпка 3
Ако трябва да посочите точно съответствието между клетките на таблицата, използвайте следния пример:
| … … съдържанието на клетка 1. … | … … съдържанието на клетка 2. … |
Тук ще видите, че една от клетките е посочена с ширина 30% от всичко, което е определено за самата таблица. Едно просто изчисление показва, че 100% -30% = 70% остава за втората клетка. Не забравяйте, че в този случай една от клетките на таблицата не трябва да има зададен атрибут width. Браузърът ще направи всички изчисления самостоятелно и правилно ще разтегне таблицата с клетки. Съдържанието в таблиците също ще се разтяга и свива правилно на различни екрани.
Стъпка 4
В ситуация с оформление на div, блоковете с маркери са опънати по подразбиране до пълната ширина на екрана и следват един след друг отляво надясно, отгоре надолу. За да прецизирате геометрията им, създайте CCS клас или идентификатор (ID), в който посочвате например атрибутите и / или за категорията размер и позиция на полето (Box). Не забравяйте да свържете посочения стил с файла за маркиране на сайта и да свържете класа (ID) с желания маркер. Обикновено се поставя в самото начало на скрипта, дефинирайки цялата бъдеща геометрия на сайта:
… … съдържание на сайта. …
Или по този начин:
… … съдържание на сайта. …
Кодът за правилото CSS ще бъде както следва:
… Моят клас {
ширина: 30%;
височина: 50%;
}
#myID {
ширина: 30%;
височина: 50%;
}
