Разместите эти файлы в одной папке. Не забудьте сохранить файлы с правильными расширениями (".css" и ".htm")
Откройте default.htm в вашем браузере и вы увидите, что страница имеет красный фон.
Рассмотрим теперь более сложные примеры работы с CSS.
Создание "каркаса" страницы.
2. Создание "каркаса" страницы.
При разработке страницы следует обратить внимание не терминологию. Есть понятия макет и шаблон. Макет создается на основе готового дизайна, с применением различных приемов макетирования: таблицы, листы стилей и др. шаблон – это макет webстраницы, который может подойти под большинство дизайнерских решений.
Существует несколько способов разметки страницы. Это при помощи таблицы, фреймов и блочная разметка. В настоящее время фреймы практически не используются. А на смену разметки при помощи таблиц приходит блочная верстка.
Мы сначала рассмотрим разметку страницы, при помощи таблицы. Для макетирования страниц можно применять фиксированные и динамические страницы. В фиксированных страницах для задания ее размеров используются фиксированные числа. В этом случае таблицу необходимо подгонять под разрешение монитора. Динамические страницы способны автоматически расширяться в зависимости от свободного пространства.
Создать документ, содержащий таблицу со следующей структурой:
Мы подробно рассмотрим технологию такой верстки, чтобы html-страница:
не зависимо от разрешения экрана, браузера (возьмем самые популярные: IE, Firefox, Opera), темы оформления Windows и настроения вебмастера, выглядела бы одинаково - как на макете;
была "читаемой" даже при отключенной графике;
имела легкий, удобный для редактирования html-код;
растягивалась на полную ширину экрана.
При форматировании webстраницы мы будем использовать каскадные таблицы стилей. Это означает, что все форматирование и оформление страницы будет вынесено в отдельный файл. Главным преимуществом такого подхода является то, что во многом облегчается код страницы и если все страницы оформлены в одном стиле и необходимо поменять их оформление достаточно изменить один файл, отвечающий за оформление, а не исправлять все страницы. Входящие в проект.
Для создания нам необходимо.
Создать таблицу. Сохранить файл с именем «*.htm»(создается самостоятельно)
Создать файл, который будет содержать данные о форматировании таблицы и каждой из ее ячеек style.css
Файл *.htm в заголовке должна быть ссылка на файл таблицы стилей: <link href="style.css" rel="stylesheet" type="text/css">
Создадим файл содержащий оформление проекта.
Файл style.css должен содержать следующую информацию:
table.main { <!--В таких скобках указываются атрибуты, относящиеся к одному элементу-->
width: 100%; <!-- table.main имя таблицы, в основном файле в теге table должна содержаться ссылка на данное форматирование. <table class="main" border="1"> -->
height: 100%;
}
td.top { <! -- Формат верхней строки, пока здесь пусто-->
}
td.search { <! -- Формат соответствующей ячейки, пока здесь пусто-->
}
td.topmenu { <! -- Формат соответствующей ячейки, пока здесь пусто-->
}
td.news {
width: 30%; <! -- Формат соответствующей ячейки, указан размер, в процентах от общей ширины окна-->
}
td.text {
width: 70%; <! -- Формат соответствующей ячейки, указан размер, в процентах от общей ширины окна-->
height: 100%;
}
td.copyright { <! -- Формат соответствующей ячейки, пока здесь пусто-->
}
td.bottommenu { <! -- Формат соответствующей ячейки, пока здесь пусто-->
}
Сама страница, содержащая разметку должна иметь следующий код:
Заголовок страницы
Ссылка на созданный ранее файл таблицы стилей, который содержит форматирование.
Тело документа
Таблица
Первая строка, содержит одну ячейку, задается ее название «top», по которому в файле style.css определяется стиль ячейки.
Вторая строка, состоит из двух ячеек.
Третья строка, состоит из двух ячеек.
Четвертая строка, состоит из двух ячеек.
По умолчанию рамка таблицы имеет некоторую ширину, поэтому нам необходимо задать параметры так, чтобы данной рамки не было. Для этого внесем изменения в файл, отвечающий за стилевое оформление нашей страницы.
1) Чтобы не было промежутков между таблицей и границами экрана, пишем:
html, body {
margin:0px;
padding:0px;
}
2) Чтобы убрать зазоры между ячейками, добавляем в свойства таблицы border-collapse: collapse (это аналог html-параметра cellspacing="0").
table.main {
border-collapse: collapse;
}
3) Чтобы убрать отступы внутри ячеек, пишем:
td {
padding: 0px;
}
Также нужно прописать несколько общих параметров, которые будут использоваться по умолчанию:
5) Цвет фона для и элементов форм. Когда фон белый, об этом часто забывают. Тогда у пользователей, установивших какую-нибудь экзотическую тему оформления Windows, некоторые ячейки могут оказаться, например, зелеными.
6) Когда большая часть текста будет написана одним шрифтом (в нашем случае, напимер - Tahoma 11px, черный), имеет смысл указать его сразу для всех ячеек и элементов форм.
7) По умолчанию текст и изображения располагаются (вертикально) в середине ячейки. Обычно удобнее, чтобы они подтягивались к верхнему краю. Для этого нужно указать vertical-align: top для всех ячеек.
