Доброго дня шановні початківці веб-майстра. Сьогодні поговоримо про те, як зробити резиновим веб-сайт у Рівному. Прочитаємо поради для веб-майстрів та програмістів, що займаються створенням та розробкою веб-сайтів.
У цій частині ми розглянемо, як створюється блоковий каркас сайту, засобами html і СSS, а так само напишемо кілька варіантів коду каркаса сайту. Для цього, розробка сайтів Рівне має мати базу для початку роботи в інтернеті. Слід повідомити відразу, що ми робимо та вчимось резиновий сайт запрограмувати під інтернет. Тож почнемо. Для окресленої мети відкриємо редактор Нотепад ++ (або інший подібний), і створимо наступну html конструкцію, на основі якої і будемо створювати каркас сайту.
Для тих, хто ще не представляє де пишеться код, і як переглянути те, що відобразить браузер, спочатку необхідно прочитати статтю Як створити каркас сторінки, і встановити Нотепад ++.
Тепер, в таблиці стилів, задаємо цим блокам попередні параметри. Підключимо стилі глобальним способом, в тіло тега head, за допомогою тега style.
Оболонці “wrapper” прописуємо ширину (висота в міру заповнення збільшується автоматично), тимчасову рамку, внутрішній відступ, і вирівнювання по центру сторінки.
Для шапки задаємо висоту, фоновий колір, і зовнішній відступ знизу, для того, щоб наступні блоки не притиснулися до нього впритул.
Для блоків “sidebar”, “content”, і “footer” – висоту, і відступ знизу, задамо поки такі ж, як і у “header”, а фоновий колір дамо, тимчасово, кожному свій, щоб вони різнилися.
Ось таке вийшло початок. Всі блоки однакової висоти розташувалися один під одним і оболонка розсунулася і укладає їх у собі.
Тепер задаємо сайдбарі належну йому ширину, приблизно в 200 пікселів, і зміщуємо на звичний правий край, задавши зовнішній відступ зліва в 700px, оскільки загальна задана ширина становить 900пкс
Сайдбар зайняв своє місце і готовий до подальших перетворень
І ось тепер прийшов час познайомитися з ще однією чудовою властивістю CSS, яке називається float (напливаніе).
Прописуємо його в селектор “sidebar”, і відбувається наступне: блок сайдбар, як би пріподнімется, і звільнить місце для інших блоків, які тут же його займуть, а сайдбар, як би напливёт на них. У значенні у «float» ставимо «right» (праворуч), так як сайдбар знаходиться справа.