Создать сайт самостоятельно Печать E-mail
(6 голоса, среднее 4.33 из 5)
Создание статического сайта - Самостоятельное создание сайта html

Этап 3. Создание CSS - каскадных таблиц стилей.

На этом этапе наша основная задача выяснить для чего применяются каскадные таблицы стилей CSS, в чём их основные преимущества, как их подключать к документам. Давайте напишем небольшую фразу «Создать сайт самостоятельно» во внутреннюю таблицу, т.е. в область контента и попробуем поменять цветовые и стилевые параметры данного текста.

 

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="150" height="105"> </td>
<td width="750">Создать сайт самостоятельно</td>
</tr>
</table>

Внутренняя таблица стилей.

Зададим нашей фразе такие параметры: синий цвет и жирное начертание. За стилевые особенности текста отвечает тег <font>. Используя его, получаем:

<td width="750"><font style="color:#00C; font-weight:bold">Создать сайт самостоятельно</font></td>

Создать сайт самостоятельно

А теперь представьте, что каждому отдельному фрагменту текста придётся таким образом задавать стили, или Вы решите поменять дизайн своего сайта. В общем понятно, что так использовать стили нерационально.

Внешняя каскадная таблица стилей CSS.

Вот мы и подошли к созданию CSS – каскадных таблиц стилей.

Командуем в горизонтальном меню Adobe Dreamweaver Файл – Создать …

Создать CSS

В секции Пустая страница выбираем CSS и нажимаем кнопку Создать.

Откроется документ, в котором прописана используемая кодировка и комментарий в стиле языка Си, говорящий о том, что это CSS документ.

@charset "windows-1251";

/* CSS Document */

Стили задаются с помощью классов. К примеру, класс задаётся так:

.blue {color:#00C; font-weight:bold;}

Создание класса в CSS

Сохраняем этот документ с именем style.css в папку с создаваемым сайтом.

Откроем документ index.html  и заменим стилевое описание классом, который мы только что создали.

<font>Создать сайт самостоятельно</font>. Надеюсь, что здесь всё понятно. Теперь достаточно зайти в файл каскадных таблиц стилей и заменить цвет, стиль, начертание, … для того чтобы изменения произошли во всех фрагментах, использующих данный класс.

Кроме всего следует связать файлы index.html и style.css. Делается это следующим образом, пропишем в блоке тегов <head> </head> следующую строку:

<link rel="stylesheet" href="/style.css" type="text/css">.

Запустите сайт в браузере и убедитесь, что результат остался прежним.

Создать сайт самостоятельно

Предлагаю самостоятельно создать какое-то количество классов и поэкспериментировать.

Удачи!!!

Обновлено 09.03.2011 06:51
 
Rambler's Top100
Main page Contacts Search Contacts Search