Немного о сайтах... - 6 Мая 2009 - Все для uCoz и не только

Немного о сайтах.

1) Оформление сайта и его структура пишутся на разных языках.
2) Информация, задающая стиль web страницы, определяющий ее внешний вид описывается в терминах языка css, а язык html формирует структуру страницы.
3) Сайт мы будем создавать на основе технологии css / xhtml.
4) Языки html и css очень похожи, мы уже знаем о том, что в языке html тэги заключаются в угловые скобки и правило языка html выглядит следующим образом:
<тэг>правило</тэг>

5) Теперь посмотрите, как выглядит формула правил языка css:
селектор{
параметры:размер;
}

6) Селектор - это структура, которая определяет, то, как элемент будет смотреться в браузере.
7) После имени селектора открывается фигурная скобка ({).
8) Параметры – это свойства, которые формируют селектор.
9) После параметра нужно ставить двоеточие (:).
10) Размер – это величина измерения параметра.
11) После размера нужно ставить точку с запятой (;).
12) В конце селектор закрывается фигурной скобкой (}).
13) Например, так может выглядеть правило CSS для элемента абзаца p:

p{
font-size:80%;
margin:20px;
}

Структура сайта

Что видит человек, который заходит на сайт? Он видит на своем экране красивую страницу, заполненную текстом и картинками. Давайте заглянем за кулисы и посмотрим, как выглядит обратная сторона web страницы.
Итак, рассмотрим от начала, с самой первой буквы, самой первой строки и до конца кодовой (гипертекстовой) разметки внутреннее строение сайта.

14) DOCTYPE «Тип документа», влияет на совместимость сайта с компьютерами посетителей сайта. На сегодняшний день использование для создания структуры сайта тип документа HTML 4.01 Transitional является самым оптимальным вариантом:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
15) <html> Тэг, открывающий «HTML-документ». Закрывающий тэг из этой пары будет самым последним на нашей веб странице.
16) <head> Тэг, открывающий все оглавление документа.
17) <title></title> Тэги, между которыми нужно написать название документа:
<title>Мой первый сайт</title>
18) <meta http-equiv> Непарный тэг, содержит код, определяющий тип и кодировку документа:

body {
Здесь пишем правило селектора body – «тела» документа.
}
#nav {
Здесь пишем правило селектора навигации, создающего и
определяющего вид кнопок навигации по страницам сайта.
}
#content {
Здесь пишем правило селектора контента.
В этом селекторе будет заключена практически вся основная
текстовая и визуальная информация доступная для
посетителей сайта.
}
p {
Здесь пишем правило для абзацев. Текстовая информация
выводится на экран компьютеров посетителей сайтов в виде
текстовых блоков – абзацев.
}
20) </style> Тэг, закрывающий «отделение стиля»;.
21) </head> Тэг, закрывающий «оглавление документа».

Теперь мы переходим к отделению, которое является «телом» документа, здесь заключается вся текстовая и визуальная информация, которую будут видеть посетители сайта:

<body> Тэг, открывает отделение «тела» документа, определяющего структуру web страницы. Кодовая запись осуществляется в терминах языка html. (Закрывающий тэг из этой пары </body> будет предпоследним на нашей веб странице).
<div id="content"> Тэг, открывающий «селектор контента». В этом селекторе будет заключен практически весь объем текстовой и визуальной информации, отображение которой увидят посетители сайта.
<div id="nav"></div> Тэги, между которыми находиться «селектор навигации». Этот селектор создает кнопки, с помощью которых вы можете путешествовать по сайту, например, с «Главной» страницы на страницу «Новости» и т.д.
<h1></h1> Тэги, между которыми пишем текст «главного заголовка» сайта. Всего можно задать и использовать только шесть стилей оформления заголовков:h1, h2, h3, h4, h5 и h6. На сайте может быть сколько угодно заголовков, просто к каждому заголовку нужно будет выбрать один из шести видов оформления. Стиль оформления любого текстового элемента - это: тип, размер, цвет и прочие параметры шрифта.
<p></p> Тэги «абзацев», между которыми пишем текстовую информацию сайта. На сайте может быть столько абзацев, сколько Вам необходимо. Остается только придумать заголовки для каждого абзаца, чтобы донести до посетителей главную мысль сайта.
</div> Тэг, закрывающий «селектор контента».
</body> Тэг, закрывающий отделение «тела» документа.
</html> Тэг, закрывающий «HTML-документ».

Вот и все устройство сайта, выучить его не сложнее, чем выучить таблицу умножения.

Итак, программа Dreamweaver запущена, файл basic.htm открыт, кнопка Код нажата.
Ставим курсор сразу после угловой скобки, которая закрывает тэг с кодировкой web страницы.

Нажимаем на клавиатуре компьютера клавишу Enter. Кодовое письмо сдвигается вниз на одну строку, при этом курсор оказывается в начале новой строки. Все как в Word.
Переводим регистр компьютера на английский язык.
Сейчас, я расскажу Вам о том, как можно использовать выскакивающее меню – Быстрого редактора тэгов, которое позволяет автоматически печатать на странице выбранный в этом редакторе тэг. Выскакивающее меню должно вызываться нажатием на клавиатуре компьютера клавиш Ctrl-T, но в русскоязычной версии программы Dreamweaver, при нажатии на эти клавиши меню не появляется. Поэтому необходимо более подробно осветить вопрос возможности использования выскакивающего меню Быстрого редактора тэгов в русской версии Dreamweaver.

Итак, курсор в начале свободной строки, которая находиться над строкой с тэгом </head>.

Печатаем открывающуюся угловую скобку (<). Появляется выскакивающее меню – Быстрого редактора тэгов.
Ищем с помощью полосы прокрутки и выделяем курсором в выскакивающем меню слово style и нажимаем на клавиатуре компьютера клавишу Enter. Слово style автоматически печатается на нашей странице.

Нажимаем на компьютере клавишу Пробел. Появляется еще одно выскакивающее меню. Опять выделяем курсором в выскакивающем меню, на этот раз, слово type и нажимаем на клавиатуре компьютера клавишу Enter. Слово type так же автоматически печатается на нашей странице и опять появляется следующее выскакивающее меню.

В очередной раз выделяем курсором в выскакивающем меню словосочетание text/css и жмем на Enter.

Словосочетание text/css напечатано.

Печатаем закрывающуюся угловую скобку (>), после чего должен автоматически напечататься тэг </style>, закрывающий данное правило.

В итоге всех этих манипуляций код страницы теперь должен выглядеть следующим образом:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Мой первый сайт</title>
<meta http-equiv="Тип-содержимое" content="text/html;
charset=windows-1251">
<style type="text/css"></style>
</head>
<body>
</body>
</html>
На Вашем компьютере код не должен отличаться от вышеизложенного кода.
Программа Dreamweaver похожа на Word. Вы можете при нажатой кнопке Код выделять курсором, копировать, вставлять или уничтожать практически любой текст.

Пишем правило для элемента body между тэгами:
<style type="text/css"></style>.
Параметры элемента body определяют, как «тело» документа (содержание страницы) будет отображаться на экране компьютера.