Добавил:

Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.

Вуз:

Московский государственный университет им. М.В. Ломоносова

Предмет:

[НЕСОРТИРОВАННОЕ]

Файл:

sait.docx

Скачиваний:

Добавлен:

01.03.2025

Размер:

4 Мб

Скачать

☆

<<< < Предыдущая 12 / 92 3 4 5 6 7 8 9 > Следующая >>>

Раздел 2: как стать счастливым

Для того чтобы стать счастливым, нужно использовать каждую минуту...

Раздел3: как быть здоровым

Для того чтобы быть здоровым нужно много заниматься физкультурой...

А можно сделать ссылку на почту?

Конечно можно. Вот пример ссылки на е-mail сайта zvirec.com .

<a href="mailto:admin@zvirec.com">Написать письмо админу zvirec.com</a>

В браузере будет выглядеть:

Написать письмо админу zvirec.com

Как вы видите, используется mailto потом двоеточие и емаил получателя. При нажатии на ссылку запустится почтовая программа-клиент с заполненным полем имени получателя.

Парочка дополнительных атрибутов:

TARGET - указывает где открывать страницу на которую ведет html ссылка. По умолчанию она открывается в том же окне. Если хочется чтобы открывалась в новом, следует написать target ="_blank".

TITLE - указывает заголовок ссылки, который появляется при наведении на нее.

Смотрите пример:

<a href="http://www.zvirec.com" target="_blank"> Это ссылка на сайт zvirec.com, откроется в новом окне </a> <br> <br> <a href="http://www.zvirec.com" title="Учебник создания сайта "> Эта - тоже на zvirec.com. При наведении появится заголовок. </a>

Смотрите на результат:

Это ссылка на сайт zvirec.com, откроется в новом окне Эта - тоже на zvirec.com. При наведении появится заголовок.

Ну вот в принципе и всё. Можете сильно не зацикливаться, в программе Adobe Dreamweaver любая ссылка делается одним нажатием мышки. Главное для Вас, понять что к чему, а зазубривать не обязательно...

А можно ли изменить цвет ссылок?

Конечно можно. Чтобы изменять цвет ссылок во всем документе, существуют специальные атрибуты элемента BODY .

LINK - цвет просто ссылок.

ALINK(Active Link) - цвет активных ссылок (активная означает в момент нажатия на нее)

VLINK(Visited Link) - цвет уже посещенных ссылок

Все цвета задаются либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов.

К примеру если при открытии тела документа, элементу body прописать:

то все ссылки в данном документе станут красными, уже посещенные ссылки станут зелеными а ссылки в момент нажатия будут белыми.

А если нужно чтобы в каком -то месте ссылка имела другой цвет? например по всему документу красные, а именно в одном месте зеленая?

Тогда нужно внутри html ссылки прописать уже знакомый элемент font с атрибутом цвета:

<a href="http://www.zvirec.com"><font color="black">Черная ссылка</font></a>

Если сделать так, то данная ссылка будет черной.

Урок 7: Работаем с изображениями

Изображения - это неотъемлемая часть любого сайта в сети интернет. Они используются везде, поэтому давайте разберемся что к чему. Есть три типа файлов изображений, которые можно вставить на ваши страницы:

GIF (Graphics Interchange Format)
JPG / JPEG (Joint Photographic Experts Group)
PNG (Portable Network Graphics)

Пара слов о форматах: GIF - использует всего 256 цветов и соответственно лучше подходит для рисунков с малым кол-вом оттенков. Этот формат поддерживает прозрачность изображений. JPEG - формат изображений, который использует до миллиона цветов. Обычно используется для фотографий и качественной графики(с огромным количеством оттенков). PNG - сравнительно новый формат . По многим параметрам превосходит JPEG и GIF: миллионы цветов и эффективное сжатие. Также поддерживает прозрачность.

В каком формате брать изображения - дело Ваше, однако старайтесь добиться максимального качества при минимальном размере .

Вставить изображение на страницу очень просто. Вот пример если оно лежит в той же папке что и страница.

<img src="pchela.jpg">

В результате мы увидим:

Что нам понадобилось: элемент IMG не имеющий закрывающего тега и атрибут SRC (сокращение от source - положение) который указывает где находится изображение. Вы легко можете вставлять изображения, размещенные в других папках или на других сайтах. Просто укажите правильный путь (примерно так как при созданиии ссылок).

Вот еще несколько примеров с комментариями:

 <img src="images/pchela.jpg">  <img src="http://www.zvirec.com/pchela.jpg">  <img src="http://www.zvirec.com/images/pchela.jpg">

Вот еще очень необходимые атрибуты:

ALIGN - определяет способ выравнивания картинки по горизонтали. Очень полезное свойство при обтекании картинки текстом. Обычно используют LEFT(выравнивание по левому краю, текст будет обтекать справа) и RIGHT(выравнивание по правому краю, текст обтекает слева) .Если на странице есть текст, то это обязательное свойство.

HSPACE и VSPACE - отступы в пикселях по горизонтали и по вертикали от картинки до других обьектов документа. Легко запомнить название если взять и просто перевести с английского. HSPACE - Horizontal Space - горизонтальный отступ и VSPACE - Vertical Space - вертикальный отступ.

HEIGHT и WIDTH - высота и ширина изображения в пикселах. Золотое правило web-мастера – всегда явно задавать размеры картинки в атрибутах HEIGHT и WIDTH, резервируя тем самым место в окне браузера еще до загрузки изображения. В противном случае документ при загрузке каждой картинки будет заново перерисовываться. А на медленных машинах (или при подключении к сети через модем) это смотрится просто отвратительно. Но в принципе, можно и не задавать размеры, просто будет дольше загружаться. И еще, не советую Вам искажать реальные размеры картинки.

Ладно, лучше все смотреть на примерах:

 <p align="justify"> <img src="pchela.jpg" width="65" height="59" hspace="15" vspace="15" align="left"> Любой Интернет бизнес немыслим без сайта. Так что первым делом не мешало бы научиться создавать сайты. В данном случае фраза "научиться создавать сайты" будет означать - знать на хорошем уровне язык гипертекстовой разметки HTML и каскадные таблицы стилей CSS, которые значительно расширяют возможности HTML и позволяют создавать действительно стильные и качественные сайты.</p>  <p align="justify"> <img src="pchela.jpg" width="65" height="59" hspace="15" vspace="15" align="right"> Любой Интернет бизнес немыслим без сайта. Так что первым делом не мешало бы научиться создавать сайты. В данном случае фраза "научиться создавать сайты" будет означать - знать на хорошем уровне язык гипертекстовой разметки HTML и каскадные таблицы стилей CSS, которые значительно расширяют возможности HTML и позволяют создавать действительно стильные и качественные сайты.</p>  <p align="justify"> <img src="pchela.jpg" width="65" height="59" align="left"> Любой Интернет бизнес немыслим без сайта. Так что первым делом не мешало бы научиться создавать сайты. В данном случае фраза "научиться создавать сайты" будет означать - знать на хорошем уровне язык гипертекстовой разметки HTML и каскадные таблицы стилей CSS, которые значительно расширяют возможности HTML и позволяют создавать действительно стильные и качественные сайты.</p>

Вот результат браузере:

А есть ещё атрибуты, которые нам необходимы?

Вот еще пара полезных атрибутов - ALT и TITLE . ALT - определяет текст, отображаемый браузером на месте изображения, если браузер не может найти файл с изображением или включен в текстовый режим. В качестве значения задается текст с описанием изображения. Смотрите пример:

<img src="pchela1.jpg" alt="пчела мая!!!" width="65" height="59">

В результате увидим:

Как видите, я поменял название файла, и браузер не смог его найти, поэтому показал текст, который указан в атрибуте ALT .

TITLE - Определяет заголовок картинки, т.е. при наведении на картинку высветится надпись с текстом из атрибута title . Ну вот например:

<img src="pchela.jpg" width="65" height="59" title="Пчела мая!!! " >

Попробуйте навести указатель на изображение:

А как можно изображение сделать ссылкой?

Для этого просто вместо текста ссылки, вставляете изображение. Вот например:

Вот результат:

Что еще за border="0" спросите Вы, а дело в том, что когда делаешь изображение ссылкой, вокруг него появляется некрасивая рамка(border) и чтобы ее убрать пишут дополнительный атрибут border .

Ну вот впринципе и все с изображениями, как видите ничего сложного нет.

Урок 8: Цвет фона и текста

Мы уже знаем как менять цвет текста, но для этого нам нужно было заключать его в теги font , а это не всегда удобно. Иногда, лучше задать цвет текста для всего документа. Также, можно задать и фоновое изображение.

Вот необходимые атрибуты:

BACKGROUND – определяет изображение для "заливки" фона. Значение задается в виде полного URL или имени файла с картинкой в формате GIF или JPG.

BGCOLOR – определяет цвет фона документа.

TEXT – определяет цвет текста в документе.

Все они прописываются для элемента BODY. Значения цветов задаются либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов.

Пример1:

 <body bgcolor="#FFF8D2" text="red"> <p> Этот текст будет красный, потому что мы изменили цвет текста в теге БОДИ и теперь весь текст на странице по умолчанию будет красный </p> <font color ="green"> <p> В этом абзаце текст будет зеленый, потому что мы заключили его в теги font и придали соответсвующий цвет </p> </font> <p> Теперь текст снова будет красный </p> </body>

Результат в браузере: Пример 2:

 <body background="fon.jpg" text="red"> <p> Этот текст будет красный, потому что мы изменили цвет текста в теге БОДИ и теперь весь текст на странице по умолчанию будет красный </p> <p>Теперь тут тоже красное и только <font color ="green"> эти слова зеленые </font> </p> <p> Тут как вы поняли текст тоже красный</p> </body>

Результат в браузере:

Ничего сложного нет. Эксперементируйте, практикуйтесь и все получится!

Урок 9: Разберемся с таблицами в html

Html таблицы - полезная штука . Обычно их используют не только для отображения таблиц как таковых, но и для создания невидимого каркаса страницы, помогающего расположить текст и изображения должным образом. Раньше все сайты имели табличную структуру, сейчас все большую популярность приобретает структура на дивах (с помощью <div> и CSS ). Вот классический пример табличной структуры:

Шапка сайта(логотип и все такое)

Ссылка 1

Ссылка 2

Ссылка 3

Ссылка 4

Ссылка 5

Основное содержание

Реклама и все такое

Блок копирайта

Давайте разбираться как построить простейшую таблицу. Для этого нам понадобятся как минимум три элемента .

TABLE - Элемент для создания html таблицы. Обязательно должен иметь начальный и конечный теги. По умолчанию html таблица печатается без рамки, а разметка осуществляется автоматически в зависимости от объема содержащейся в ней информации. Сразу скажу, что здесь есть атрибут BORDER который задает толщину рамки таблицы в пикселах.

TR (Table Row) - Создает новый ряд таблицы. Закрывающий тег обязателен.

TD (Table Data) - Начинает и заканчивает каждую ячейку ряда html таблицы. Обязателен закрывающий тег.

Давайте попробуем создать таблицу из двух рядов и двух столбцов:

<table border="1"> <tr> <td>ряд 1 ячейка1</td> <td>ряд1 ячейка2</td> </tr> <tr> <td>ряд 2 ячейка 1</td> <td>ряд 2 ячейка 2</td> </tr> </table>

Вот как это будет выглядеть в браузере:

ряд 1 ячейка1	ряд1 ячейка2
ряд 2 ячейка 1	ряд 2 ячейка 2

Разобрались? Т.е. таблица начинается с <table>, затем идёт <tr>, указывающий на начало нового ряда. В ряду вставлены две ячейки: <td>ряд 1 ячейка1</td> и <td>ряд1 ячейка2</td>. Ряд закрывается </tr>, и сразу начинается новый ряд <tr>. В новом ряду также две ячейки. Таблица закрывается </table>. Все довольно логично

А как можно объединить ячейки?

Для этого существуют данные атрибуты.

COLSPAN – определяет количество столбцов, на которые простирается данная ячейка. По умолчанию имеет значение 1.

ROWSPAN – определяет количество рядов, на которые простирается данная ячейка. По умолчанию имеет значение 1.

Пример 1:

<table border="1"> <tr> <td colspan="2">ряд 1 ячейка 1+2</td> </tr> <tr> <td>ряд 2 ячейка 1</td> <td>ряд 2 ячейка 2</td> </tr> </table>

Получим в браузере:

ряд 1 ячейка 1+2
ряд 2 ячейка 1	ряд 2 ячейка 2

Пример 2:

<table border="1"> <tr> <td rowspan="2">Ячейка 1, ряд 1+2</td> <td>ряд1 ячейка2</td> </tr> <tr> <td>ряд 2 ячейка 2</td> </tr> </table>

Получим в браузере:

Ячейка 1, ряд 1+2	ряд1 ячейка2
	ряд 2 ячейка 2

Ничего сложного нет. Присмотритесь внимательно к трем примерам и все станет ясно.

Вот еще полезные атрибуты:

CELLPADDING – определяет расстояние (в пикселах) между рамкой каждой ячейки html таблицы и содержащемся в ней материалом.

CELLSPACING – определяет расстояние (в пикселах) между границами соседних ячеек таблицы html.

WIDTH – определяет ширину таблицы html. Ширина задается либо в пикселах, либо в процентном отношении к ширине окна браузера. По умолчанию этот атрибут определяется автоматически в зависимости от объема содержащегося в таблице материала.

HEIGHT – определяет высоту таблицы. Высота задается либо в пикселах, либо в процентном отношении к высоте окна браузера. По умолчанию этот атрибут определяется автоматически в зависимости от объема содержащегося в html таблице материала.

Пример 1:

<table border="1" cellpadding="10"> <tr> <td>ряд 1 ячейка1</td><td>ряд1 ячейка2</td> </tr> <tr> <td>ряд 2 ячейка 1</td> <td>ряд 2 ячейка 2</td> </tr> </table>

Результат в браузере:

ряд 1 ячейка1	ряд1 ячейка2
ряд 2 ячейка 1	ряд 2 ячейка 2

Пример 2:

<table border="1" cellspacing="10"> <tr> <td>ряд 1 ячейка1</td><td>ряд1 ячейка2</td> </tr> <tr> <td>ряд 2 ячейка 1</td> <td>ряд 2 ячейка 2</td> </tr> </table>

Результат в браузере:

ряд 1 ячейка1	ряд1 ячейка2
ряд 2 ячейка 1	ряд 2 ячейка 2

Пример 3:

<table border="1" width="400" height="100"> <tr> <td>ряд 1 ячейка1</td><td>ряд1 ячейка2</td> </tr> <tr> <td>ряд 2 ячейка 1</td> <td>ряд 2 ячейка 2</td> </tr> </table>

Результат в браузере:

ряд 1 ячейка1	ряд1 ячейка2
ряд 2 ячейка 1	ряд 2 ячейка 2

И наконец последние четыре атрибута:

ALIGN – определяет способ горизонтального выравнивания html таблицы или содержимого ячеек. Возможные значения: left, center, right. Значение по умолчанию – left.

VALIGN – должен определять способ вертикального выравнивания таблицы или содержимого ячеек таблицы .Возможные значения: top, bottom, middle.(прижать к верху, прижать к низу,и установить посередине).

BGCOLOR – определяет цвет фона ячеек таблицы. Задается либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов.

BACKGROUND – позволяет заполнить фон таблицы рисунком. В качестве значения необходимо указать URL рисунка.

Примечание: можно хоть каждой ячейке таблицы задать свой цвет фона или фоновый рисунок. Но: если вы задаете фоновый цвет (или рисунок) в базовом элементе TABLE то во всех ячейках будет этот фон(рисунок), и если вы захотите в какой-то ячейке поменять, пропишите соответсвующий атрибут именно для этой ячейки.

Приведу пример:

 <table width="400" height="100" border="1" align="center" bgcolor="#FFF8D2"> <tr>  <td>ряд 1 ячейка1</td>  <td align="center" valign="top">ряд1 ячейка2</td> </tr> <tr>  <td align="center" valign="bottom">ряд 2 ячейка 1</td>  <td align="right" valign="middle" bgcolor="#33FF99">ряд 2 ячейка 2</td> </tr> </table>

Результат в браузере:

ряд 1 ячейка1	ряд1 ячейка2
ряд 2 ячейка 1	ряд 2 ячейка 2

Еще один пример:

<table width="400" height="100" border="1" bgcolor="#FFF8D2"> <tr>  <td align="center"> ряд 1 ячейка1 </td>  <td align="center" background="pchela.jpg"> ряд1 ячейка2 </td> </tr> <tr>  <td align="center"> ряд 2 ячейка 1 </td>  <td align="center" bgcolor="#33FF99">ряд 2 ячейка 2</td> </tr> </table>

Результат в браузере:

ряд 1 ячейка1	ряд1 ячейка2
ряд 2 ячейка 1	ряд 2 ячейка 2

Если картинка меньше чем ячейка, то она будет дублироваться, как показано в примере. Если больше - то будет отображаться та часть которая влезет :) .

НУ вот впринципе и всё по таблицам. Если не получилось запомнить не расстраивайтесь. С практикой все запомнится(как говорят главное знать, где подсмотреть!). В программе Adobe Dreamweaver все делается очень просто.

Урок 10: Что такое html формы и зачем они нужны.

Html формы - это наверное самая сложная часть языка html. Так что наберитесь терпения и давайте потихоньку начинать.

Что такое html формы? Вот смотрите, ниже приведена html форма заказа обучающего диска. По окончании обучения, вы тоже сможете сделать такую.

Начало формы

Введите ФИО: Введите пароль: Какой диск вы хотите получить?

CD DVD

Какие обучающие курсы вы хотите видеть на диске?

Курсы по Фотошопу Курсы по Adobe Dreamweaver Курсы по PHP

Выберите способ доставки:

Введите адрес для доставки:

Конец формы

Здесь все работает, кроме отправки данных, можете поклацать :)

Ну как видели такое? вот-вот, сейчас везде такое, так что давайте разберемся:

html форма - это всего лишь каркас, созданный при помощи языка html, т.е. мы можем указать браузеру где у нас будет какое поле и что написано на той или иной кнопке. Но для того, чтобы при нажатии на кнопку ваш комментарий добавился в гостевую книгу или данные заказа полетели в офис - нужна иная технология - программа, скрипт, который привязывается к форме. Обычно такие программы делаются на php . Но не расстраивайтесь раньше времени, я дам Вам простейший обработчик для тренировки, а более сложные можно найти в интернете или самому написать.

Давайте рассмотрим все элементы формы из примера выше по-порядку:

Любые элементы формы находятся как бы в теле формы. Т.е. у любой формы есть каркас, а уже внутри него вставляются различные элементы формы, и пишется html код.

Пример 1:

<form>  </form>

Как видите здесь два базовых тега : открывающий <form> и обязательный закрывающий тег </form> .

Но в этом выше, как бы голый каркас, т.е. без атрибутов. А теперь рассмотрим более реальный каркас html формы:

Пример 2:

<form name="forma zakaza" method="post" action="obrabotchik.php">  </form>

Атрибуты:

NAME – определяет имя формы, уникальное для данного документа. Используется только , если в документе присутствует несколько форм.

ACTION – обязательный атрибут. Указывает путь к скрипту( или программе) сервера, обслуживающему данную форму.

METHOD – определяет способ отправки содержимого html формы. Возможные значения GET (по умолчанию) и POST.

Пару слов о методах передачи:

Метод GET используется для передачи различных переменных , или очень коротких сообщений. Информация передается в явном виде через строку браузера , т.е. ее можно перехватить. Например если вы видите в строке набора браузера нечто вроде http://adress.com/lessons.php?rub=28 это значит что передается значение переменной rub равное 28. В html формах обычно не используется. Метод POST создан специально для передачи текстовых сообщений. Почти всегда применяется в формах. Передает информацию в скрытом виде.

Пока все понятно? тогда давайте начнем разбирать элементы формы:

<form name="primer1" method="post" action="obrabotchik.php"> Введите ФИО: <br> <input type="text" name="fio" size="30"> <br> Введите пароль:<br> <input type="password" name ="pass"> </form>

В результате получим:

Введите ФИО: Введите пароль:

Что мы видим в исходном коде? а мы видим следующее:

Элемент INPUT - создает поле html формы (кнопку, поле ввода, чекбокс и т.п.), Элемент не имеет конечного тега.

Основные атрибуты :

TYPE - определяет тип поля для ввода данных. По умолчанию – это "text". В данном примере еще используется тип "password" который указывает на то, чтоб информация показывалась звездочками.

NAME - определяет имя, используемое при передаче содержания данной html формы на сервер. Если Вы собираетесь куда-нибудь передавать информацию из формы, то обязательно вводите имя.

SIZE - определяет размер поля в символах. По умолчанию имеет значение равное 24. Т.е. если этот атрибут не писать то длина будет равна 24 символа.

Есть еще и такой полезный атрибут как MAXLENGTH , который определяет максимальное количество символов, которые можно ввести в текстовом поле. Оно может быть больше, чем количество символов, указанных в атрибуте SIZE. По умолчанию количество символов не ограничено.

Ну вот например:

<form name="primer2" method="post" action="obrabotchik.php"> Введите пароль(максимум шесть символов):<br> <input type="password" name ="pass" maxlength="6"> </form>

Результат:

Введите пароль(максимум шесть символов):

Ну как работает? А вы попробуйте ввести больше шести символов :)

Еще есть атрибут VALUE который определеят что будет по умолчанию написано в поле для ввода.

Смотрите пример:

<form name="primer3" method="post" action="obrabotchik.php"> Введите свой e-mail: <br> <input type="text" name="e-mail" size="35" value="пример: admin@zvirec.com"> </form>

Результат:

Введите свой е-mail:

Теперь рассмотрим следующий элемент формы:

<form name="primer4" method="post" action="obrabotchik.php"> <p> Какой диск вы хотите получить?</p> <p> <input name="disc" type="radio" value="cd" checked> CD<br> <input name="disc" type="radio" value="dvd"> DVD </p></form>

Результат:

Какой диск вы хотите получить?

CD DVD

Данный тип элементов html формы называется радиопереключатель(переключает: либо одно значение, либо другое - два одновременно быть не может). Поэтому атрибут type имеет значениеtype="radio". Раз мы выбераем между CD и DVD то радиопереключателя у нас два, поэтому два раза пользуемся элементом INPUT. Как видите у них одинаковое имя -name="disc" и разные значения value . Почему это так? давайте подумаем логически:

Нас интересует какой диск хочет получить клиент, CD или DVD . Поэтому у нас одинаковое значение имени name="disc" и разные значение ( value="cd" иvalue="dvd"). Т.е. если мы выбираем первый вариант, то переменная disc примет значение cd а если второй- то dvd. Логично? по другому и быть не может...

Если вы хотите сделать, чтобы по умолчанию у Вас радиопереключатель был установлен на каком-либо варианте, то просто допишите атрибут-флагchecked(включен).

Примечание:в радиопереключателе обязательно должен присутствовать атрибут value иначе ничего работать не будет.

Последний элемент в этом уроке:

<form name="primer5" method="post" action="obrabotchik.php"> <p>Какие обучающие курсы вы хотите видеть на диске?</p> <input type="checkbox" name="fotoshop" value="yes" checked> Курсы по Фотошопу <br> <input type="checkbox" name="dreamweaver" value="yes"> Курсы по Adobe Dreamweaver <br> <input type="checkbox" name="php" value="yes">Курсы по PHP </form>

Результат:

Какие обучающие курсы вы хотите видить на диске?

Курсы по Фотошопу Курсы по Adobe Dreamweaver Курсы по PHP

Данный тип элементов html формы называется checkbox и отличается от радиопереключателя тем, что здесь можно выбрать несколько вариантов. Как видите type="checkbox" означает что тип элемента - Чекбокс, атрибут nameнужен для того, чтобы обработчик мог идентифицировать данное поле и наконецvalue - определяет тот параметр, который будет отправлен при поставленной галочке.

В данном элементе, атрибут value не является обязательным, в отличие от радиопереключателя. Если мы его не поставим, то при поставленной галочке,как значение переменной в обработчик полетит текст который написан рядом с галочкой.

Остальные элементы формы мы разберем в следующем уроке. Пока поэксперементируйте и придумайте свои формы.

Урок 11: Заканчиваем разбираться с формами

Нам осталось разобрать три элемента формы. Давайте по-порядку:

<form name="primer6" method="post" action="obrabotchik.php"> <p>Выберите способ доставки:</p> <p> <select name="dostavka" size="1"> <option value="srochnaya" > Срочная </option> <option value="ne srochnaya" selected> Не срочная </option> <option value="kurierom"> Курьером </option> </select> </p> </form>

Результат:

Выберите способ доставки:

Базовым элементом здесь является SELECT(выбор) . У него обязательно должен быть закрывающий тег! Внутри него содержатся элементы OPTION(опции выбора) . Как вы поняли, без элементов option элемент select потеряет смысл, т.к. выбирать будет не из чего :)

Как видите, у элемента SELECT есть уже знакомый нам атрибут name , а у элементов OPTION тоже знакомый нам атрибут value (в элементе select это не обязательный атрибут) . Они нужны для того, чтобы обработчик мог идентифицировать выбранный вариант.

Например мы выбираем способ доставки - Срочная. Тогда переменная dostavkaпримет значение srochnaya. Если б не было значения value="srochnaya" то переменная dostavka приняла бы значение Срочная (т.е. значение текста заключенного в элемент option).

Атрибут SIZE задает количество одновременно видимых пунктов меню. В нашем случае это 1.

Атрибут флаг SELECTED означает что данное значение, будет выбрано по умолчанию.

Можно также сделать, чтобы имелась возможность выбора нескольких пунктов меню при удержании клавиши Ctrl. Для этого используется атрибут-флагMULTIPLE .

<form name="primer7" method="post" action="obrabotchik.php"> <p>Выберите способ доставки:</p> <p> <select name="dostavka" size="3" multiple > <option value="srochnaya" > Срочная </option> <option value="ne srochnaya"> Не срочная </option> <option value="kurierom"> Курьером </option> </select> </p> </form>

Результат:

Выберите способ доставки:

В теории это не сильно хорошо излагается, так что просто внимательней анализируйте приведенные примеры и будет Вам счастье :)

Давайте разберем следующий элемент:

<form name="primer8" method="post" action="obrabotchik.php"> Введите адрес для доставки:<br> <textarea name="adress" cols="45" rows="5"></textarea> </form>

Результат:

Введите адрес для доставки:

Для создания больших текстовых полей используется элемент TEXTAREA, который даже так и переводится - текстовая площадь. У этого элемента обязательно наличие закрывающего тега.

Какие атрибуты у него есть? да знакомый нам атрибут name который поможет идентифицировать заполненное поле на сервере. Как видите здесь нигде нету параметра value, т.к. в качестве значения обработчику посылается текст, который мы введем в текстовое поле.

Атрибуты COLS и ROWS определяют ширину и высоту поля. К примеру cols="45" rows ="5" означает что ширина будет 45 колонок, а высота 5 рядов. Колонки и ряды естественно формируются из символов. Т.е. ширина 25 колонок, означает ширину в 25 символов, разобрались? думаю , что да.

И наконец мы добрались до кнопок:

Результат:

Для создания кнопок используется уже знакомый нам элемент INPUT . Если необходимо создать кнопку, которая будет отправлять данные обработчику, то пишем type="submit"(тип-отправить), а если хотите чтоб кнопка выполняла функцию сброса то type="reset" . Вот и все!

Атрибут value указывает на то, что будет написано на кнопке. Вас еще может напугать строка - это 6 пробелов подряд(это так называемые специальные символы html) я просто их поставил чтобы разделить кнопки! Все спец. символы есть у меня на сайте.

Теперь Мы всё умеем! следующий урок будет последним. там я дам вам обработчик для тренировки и расскажу как пользоваться.

Урок 12: Смотрим форму в действии

В этом уроке я, как и обещал, дам вам простейший обработчик и расскажу как протестировать форму.

Будем тестировать вот такую форму.

Начало формы

Введите ФИО: Введите пароль: Какой диск вы хотите получить?

CD DVD

Какие обучающие курсы вы хотите видеть на диске?

Курсы по Фотошопу Курсы по Adobe Dreamweaver Курсы по PHP

Выберите способ доставки:

Введите адрес для доставки:

Конец формы

Исходный html код формы:

<form name="zakaz_diska" method="post" action="obrabotchik.php"> <p> Введите ФИО:<br> <input type="text" name="fio" > </p> <p> Введите пароль:<br> <input type="password" name="pass"> </p> <p> Какой диск вы хотите получить? </p> <p> <input name="disc" type="radio" value="CD" checked> CD<br> <input name="disc" type="radio" value="DVD"> DVD </p> <p> Какие обучающие курсы вы хотите видеть на диске? </p> <p> <input type="checkbox" name="photoshop" value ="Да" checked> Курсы по Фотошопу <br> <input type="checkbox" name="dreamweaver" value ="Да"> Курсы по Adobe Dreamweaver <br> <input type="checkbox" name="php" value ="Да"> Курсы по PHP </p> <p>Выберите способ доставки:</p> <p> <select name="dostavka" size="1"> <option selected> Срочная </option> <option > Не срочная </option> <option > Курьером </option> </select> </p> <p> Введите адрес для доставки:<br> <textarea name="adress" cols="45" rows="5"></textarea> </p> <p> <input type="submit" value="Сделать заказ" width="20"> <input type="reset" value="Отмена "> </p> </form>

Пожалуйста разберитесь в исходном коде, все это Вы уже знаете и там нет ничего сложного. Как видите я сделал промежутки между различными типами элементов в исходном коде, чтобы Вам легче было разобраться.

Разобрались? теперь давайте протестируем Вашу форму, чтоб вы лучше поняли принцип.

Для этого Нам понадобится локальный сервер - это специальная программа, которая позволяет обрабатывать скрипты . Она нужна для отладки сайтов которые делаются на php(и других языках) у себя на локальном компьютере(а не на сервере в интернете). Поэтому не помешает научиться ее устанавливать если дальше собираетесь делать серьезные сайты.

Скачайте эту программу, запустите и следуйте инcтрукциям установщика. Единственное, по ходу установки нужно будет выбирать между первым и вторым режимом. По умолчанию идет первый, но мой Вам совет - используйте второй режим. После установки, у Вас на рабочем столе должны появится три ярлыка - Start Denwer, Stop Denwer, Restart Denwer(запуск, остановка и перезапуск сервера).

Запустите сервер (Start Denwer) . После этого должен создаться виртуальный дискZ . Если Вы создавали во втором уроке свою первую страничку так, как я говорил, то у Вас должна быть папка obuchenie_html а внтури папка www, а внтури нее страничка index.htm в которую вы наверное уже вставили форму приведенную выше(не забудьте, что форма должна быть в теле документа!). Однако во втором уроке, мы работали с html, тут же мы будем работать с php, поэтому ситуация немного меняется. Чтобы php 100% работал, нужно обязательно нашу страничку с формой вставить в Z:\home\localhost\www т.е. на диск Z, в папку www , которая находится в папке localhost.

В итоге, у нас должно получиться следующее: папка obuchenie_html , внутри которой лежит файл с формой . Причем папка obuchenie_html лежит внутри папки www , которая в свою очередь лежит внутри папки localhost. Вот как выглядит путь : Z:\home\localhost\www\obuchenie_html\index.html , где index.html файл с формой.

Теперь осталось скачать здесь архив с обработчиком. Этот архив самораспаковывающийся, т.е. его надо просто запустить и он сам распакуется. Внутри него будет лежать файл обработчика obrabotchik.php. Его мы тоже копируем и помещаем в ту же папку где и наша страничка с формой.

Теперь запускаем локальный сервер (Start Denwer) и в строке браузера пишем:http://localhost/obuchenie_html . Появиться наша форма, которую можно заполнить и проверить.

Это самый простой обработчик, который просто выводит на экран данные заказа. Это чисто чтоб вы поняли как все происходит. После заполнения всех полей формы и нажатия кнопочки заказа , должно появиться что-то типа:

Т.е. данные из одного документа полетели в другой и это наглядно видно. Так же само, можно сделать чтоб обработчик сразу отсылал данные о заказе на е-маил, или записывал их в базу данных и.т.д.

Надеюсь что Вам понятен основной принцип работы с формами!

Урок 13: Пару слов про голову документа

Все это время мы говорили про тело документа и уже научились делать свои страницы. Поговорим теперь про голову документа.

В первом уроке я говорил, что голова документа открывается тегом <HEAD> и закрывается тегом </HEAD> . Какие основные элементы содержатся в голове док-та?

Ну во-первых это название документа - элемент TITLE . У этого элемента обязательный закрывающий тег. Это очень важный элемент.

Информация из элемента TITLE показывается в окне браузера(вверху слева), и поэтому это очень важный и информативный элемент для посетителей сайта.

Если в TITLE написать например:

<title>Как создать сайт самому. Написать сайт самому. Сайтостроение</title>

Получим:

Тем более, первые 70 символов из TITLE показываются при поиске в Гугле и других поисковых системах. Обычно там используются ключевые слова по которым хотят раскручивать сайт.

Во-вторых это описание страницы сайта. Первые 170-200 символов видны при поиске в гугле поэтому оно тоже очень важно (на скриншоте выше описание это "Хотите создать и раскрутить сайт......")

<META NAME="Description" CONTENT="Хотите создать и раскрутить сайт в сети интернет ..... и.т.д.">

Здесь используется элемент META не имеющий закрывающего тега, c атрибутами NAME(определяет имя мета-записи в данном случае это описание - description ) и CONTENT (определяет содержимое мета-записи).

В-третьих это набор ключевых слов. Сейчас это уже не актуально и нигде не используется. Поэтому можете даже и не применять. Раньше, эти слова учитывались поисковыми системами . Ну для общего развития смотрите как это делается:

<META NAME="Keywords" CONTENT="Сайт, интернет, htm, css">

Т.е все то же самое, только другое имя мета-записи NAME="Keywords" (от слова ключевые слова).

НУ вот например как может выглядеть голова документа:

<head> <title>Как создать свой сайт</title> <meta name="Description" content="Если хотите научиться делать свои сайты, тогда вы попали по адресу!"> <meta name="Keywords" content="Сайт, интернет, html, css"> </head>

Ну, что еще сказать, также в голове документа прикрепляются таблицы стилей, но об этом уже поговорим в курсе CSS .

Урок 14: Завершение...

Вот Мы и закончили учебник по html . Надеюсь Вам все понятно, а если вдруг по ходу обучения возникают вопросы, пожалуйста задавайте их на форуме.

Как следующий шаг, Вам необходимо разобраться с технологией CSS , это очень интересная и нужная вещь. В этом нелегком деле Вам поможет мой учебник по css .

Удачи и успехов Вам в обучении...

CSS

Введение

Рад, что вы решили разобраться с этой интереснейшей технологией CSS(Cascading Style Sheets). Каскадные таблицы стилей открывают совершенно новые возможности в веб-дизайне. Сделать качественный дизайн без их использования очень проблематично.

Но самое важное то, что используя CSS вы экономите себе уйму времени. Ведь с помощью одного маленького файла стилей, вы можете управлять дизайном сотни,тысячи и даже миллиона страниц, и это очень увлекает…

Это не справочник, здесь все написано скорее разговорным языком :) Этот учебник поможет Вам с изучением таблиц стилей. Только учтите, что изучать CSS без знания HTML практически невозможно, и поэтому если вы еще не знакомы с ним, прочитайте для начала учебник html .

Примеры в учебнике построены следующим образом: я показываю только код таблицы стилей, а сам исходный код html файла не показываю. ЭТо делается потому, что иначе обьем учебника будет слишком огромный. Так что если вам нужно, смотрите исходный html код просто нажав на примере правой кнопкой мыши и выбрав пункт - Просмотр html-кода .

Что понадобится нам для обучения?

Для обучения нам понадобятся браузер(в котором вы просматриваете веб-страницы) и обычный блокнот ( можно найти здесь :Пуск-программы-стандартные-блокнот). Есть конечно и более автоматизированные программы (Dreamweaver, FrontPage и др.) но они подходят больше для работы, а не для обучения, и могут только навредить…

Какие еще будут советы?

При обучении, уделяйте больше времени практике. Работайте с примерами, просто возьмите и наберите вручную(а не копировать-вставить!) текст такой же, как в примере и посмотрите на свой результат! Так и интересней будет, и толку гораздо больше… Ну что ж, давайте потихоньку начинать!

Урок 1: Что такое CSS ?

В этом уроке мы с вами разберемся что такое CSS и с чем его едят :)

Стиль - это набор параметров, задающий внешнее представление некоторого объекта в той или иной среде.

CSS - это сокращение от Cascading Style Sheets - в переводе Каскадные таблицы стилей. Уникальное изобретение человечества, значительно облегчающее создание веб-сайтов. CSS работает со шрифтами, полями, таблицами, отступами, картинками и др. и представляет значительно более широкие возможности, чем простой html.

А чем CSS отличается от HTML ?

Дело в том, что изначально html использовался исключительно для разметки содержимого документа. Т.е. с его помощью указывалось мол это параграф, а это таблица, а это - картинка.

Что было дальше? С каждым месяцем количество пользователей интернет росло. Выдвигались все более серьезные требования к дизайну, т.е. внешнему оформлению страниц. Вскоре разработчиками были изобретены новые теги , такие как <font> , <strong> , <italic> и др. которые определяли уже не структуру, а внешний вид. Таких тегов появилось очень много. И все бы хорошо, НО! большая доля этих тегов поддерживалась только одним видом браузеров. Обычным явлением, при попытке просмотра того или иного сайта стала ошибка : "Вам необходим браузер X для просмотра этой страницы". Специально для исправления этой ситуации был создан CSS . Он предоставил возможность точного дизайна, поддерживаемого всеми браузерами.

Вот еще пример отличия css от html :

Допустим перед нами стоит задача сделать сайт о природе из 100 страниц. Как вы понимаете, по правилам хорошего тона, весь сайт необходимо выполнить в одном стиле, к примеру, зеленый фон, шрифт Verdana 14 размера , ссылки красного цвета. Если мы делаем такой сайт на чистом html, то на каждой новой странице нужно указывать зеленый фон, указывать чтобы ссылки были красного цвета, каждому новому параграфу указывать шрифт 14 размера. Т.е. каждой странице нужно как-бы заново создавать стиль. Теперь сделаем тоже самое на CSS . В отдельном файле создаем стиль одинаковый для всех страниц. И в каждой странице пропишем единственную строчку подключающую этот стиль. Вот и все!

Ну и чем же это круче? А Вы представьте, что в один прекрасный день вы захотели поменять дизайн всего сайта. В случае с чистым html , Вам придется заходить на каждую страницу и менять все параметры на другие, представьте сколько это займет времени. Но в случае использования CSS вы просто поменяли эти параметры в файле стилей и на всех 100 страницах дизайн обновился! чувствуете разницу?

Тем более с помощью CSS можно делать такие вещи, которые на html сделать вообще нереально. По ходу обучения Вы сами увидите это.

Подведем итоги

основные преимущества CSS :

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

Урок 2: Синтаксис и принцип работы CSS

Как и любой другой язык программирования, CSS имеет строго определенный синтаксис, т.е. правила по которым создаются таблицы стилей. Запомните, в CSS в отличие от HTML нет ни элементов, ни атрибутов, ни тегов. Основной структурной единицей здесь является правило, которое определяет, как будет выглядеть тот или иной элемент в документе.

Рассмотрим структуру правила:

Как видно из рисунка выше, сначала записывается так называемый селектор, показывающий к какому html тегу(тегам) применяется то или иное свойство. Более подробно о типах селекторов в CSS мы поговорим в 8 уроке, т.к. Вы уже будете знать базовые свойства CSS и с легкостью поймете меня.

Далее, непосредственно за селектором, пишется блок объявления стилей, который обязательно заключается в фигурные скобки.

Каждое объявление в свою очередь состоит из свойства и его значения. После свойства ставится двоеточие. Правило может содержать в себе несколько объявлений. В таком случае они должны быть отделены друг от друга точкой с запятой(см.рисунок) причем после последнего объявления точку с запятой можно не ставить.

Показанное выше правило указывает на то, что все заголовки первого уровня в документе будут голубого цвета с размером шрифта 14 пикселей.

Между HTML и CSS много общего, и поэтому запомнить свойства CSS Вам будет очень просто.

Как подключить CSS таблицу к HTML документу?

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

Но для этого нам нужно подключить внешнюю таблицу стилей ко всем страницам html, дизайном которых мы хотим управлять. Давайте по-порядку:

Внешняя таблица стилей это просто текстовый файл с расширением .css. Допустим у нас есть таблица стилей style.css и несколько страниц html, и причем все это расположено в одной папке. Тогда в каждом документе который мы хотим подключить, в голове документа(между тегами <head> и </head>) необходимо прописать строчку:

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

Эта строка указывает браузеру, что он должен использовать правила отображения HTML-файла из CSS-файла.

Теперь попробуйте сами:

Откройте Блокнот(или другой редактор) и создайте с помощью него два файла находящихся в одной папке: CSS файл - style.css и HTML файл - index.htm . Напомню для тех , кто забыл как это делать: просто открываете блокнот, выбираете "Файл" затем "сохранить как" и в поле имя файла пишите style.css . Аналогично для index.htm .

Файлы примерно следующего содержания:

index.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Работаем со стилями</title> <link rel="stylesheet" type="text/css" href="style.css" > </head> <body> <h1>Это моя первая таблица стилей, и если все работает, то несмотря на то, что это заголовок первого уровня, он отобразится высотой всего лишь 14 пикселей и будет голубого цвета</h1> </body> </html>

style.css

h1{color:blue;font-size:14px}

Если вы все сделали правильно, то запустив в браузере файл index.htm увидите :

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

Можно располагать правила стилей непосредственно в голове документа:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Работаем со стилями</title> <style type="text/css"> h1{color:blue;font-size:14px} </style> </head> <body> <h1>Это моя первая таблица стилей, и если все работает, то несмотря на то, что это заголовок первого уровня, он отобразиться высотой всего лишь 14 пикселей и будет голубого цвета</h1> </body> </html>

Также, можно задавать стиль с помощью атрибута style . Например:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Работаем со стилями</title> </head> <body> <h1 style="color:blue;font-size:14px">Это моя первая таблица стилей, и если все работает, то несмотря на то, что это заголовок первого уровня, он отобразиться высотой всего лишь 14 пикселей и будет голубого цвета</h1> </body> </html>

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

Надеюсь Вам все понятно. Уже в следующем уроке, мы начнем изучение основных свойств CSS .

Урок 3: Цвет и фон в CSS

Этот урок мы посвятим такому важному моменту как цвет и фон в CSS . Вы увидите, как прикольно, и насколько эффективнее чем в html, все это работает!

Запомни: цвета в CSS указываются так же, как и в html. Т.е. можно указывать шестнадцатиричное значение, например #ff3355, либо же название цвета (red, green, blue и др.)

Основными свойствами цвета и фона в CSS являются:

color
background-color
background-image
background-repeat
background-attachment
background-position
background

А теперь подробнее, и по-порядку:

Свойство COLOR

Задает основной цвет(цвет переднего плана) того или иного элемента. Например, если мы хотим сделать цвет всех заголовков первого уровня красным, а цвет текста параграфов зеленым, то таблица стилей будет выглядеть так:

H1 { color: red ; } P { color: green ; }

Смотреть пример

Для удобства восприятия я выделил свойства и их значения разными цветами.

Свойство BACKGROUND-COLOR

Задает фоновый цвет элемента. В отличие от html, в котором фоновый цвет можно использовать только для страницы или ячейки таблицы(т.е. имеющих атрибут bgcolor ) в CSS , фоновый цвет можно задавать для чего угодно: для таблиц, заголовков, параграфов, ссылок и др. Тут главное правильно определить что нам нужно.

Ну вот например, чтобы изменить фоновый цвет всей страницы, нужно задать это свойство элементу BODY - т.к. именно он отвечает за тело документа , т.е. за всю страницу.

BODY { background-color : #FFEE8C ; } H1 { color: red ; background-color :blue ; } P { color: green ; }

Смотреть пример

Точно так же, можно было бы задать фоновый цвет и для параграфов. Для закрепления материала попробуйте поэкспериментировать.

↑ Наверх ↑

Свойство BACKGROUND-IMAGE

Данное свойство используется для задания фонового изображения. В примере ниже, я укажу фоновое изображения для всей страницы, т.е. для элемента BODY.

BODY { background-color : #FFEE8C ; background-image : url(smile.png) ; } H1 { color: red ; background-color :blue ; } P { color: green ; }

Смотреть пример

Как видите, в качестве значения свойства, указывается путь к изображению, но немного не так как в html. В начале пишется URL а затем сразу, Без пробелов!!! в круглых скобках положение картинки. Если она находится в той же папке, то пишем просто название картинки, как в примере выше. Если допустим в подпапке img , то пишем так url(img/smile.png) , ну Вы поняли...

Фоновое изображение в CSS можно задавать для любого элемента, не только для таблиц и всей страницы. Вверху, две картинки смайлика - большая и маленькая. Попробуйте сохранить их себе на компьютер и потренироваться. Большой смайлик поставьте на фон всей страницы, а маленький - на фон заголовков первого уровня.

Кто не знает, чтобы сохранить изображение просто наведите на него указатель, клацните правой кнопкой и выберите "Сохранить рисунок".

↑ Наверх ↑

Свойство BACKGROUND-REPEAT

Вы наверное заметили, что фоновое изображение по-умолчанию повторяется начиная с верхнего левого угла, как по вертикали , так и по горизонтали, , пока не заполнит весь экран. Так вот, с помощью свойства background-repeat мы можем контролировать эти повторения. Это свойство может принимать четыре значения:

Background-repeat: repeat-x ;	повторение по горизонтали	Смотри пример
Background-repeat: repeat-y ;	повторение по вертикали	Смотри пример
Background-repeat: repeat ;	по вертикали и по горизонтали(значение по-умолчанию)	Смотри пример
Background-repeat: no-repeat ;	не повторяется	Смотри пример

Это очень полезное свойство, и аналогов ему в html нет.

Пример записи стиля:

BODY { background-image : url(smile.png) ; background-repeat: repeat-x; }

Смотреть пример

Если вы вообще не укажете это свойство, то будет использоваться его значение по умолчанию, т.е. фоновое изображение будет повторяться как по вертикали, так и по горизонтали.

↑ Наверх ↑

Свойство BACKGROUND-ATTACHMENT

При наличии фонового рисунка, это свойство устанавливает, будет ли фоновое изображение прокручиваться с содержимым страницы, или будет заблокировано, т.е. неподвижно. Может принимать два значения: SCROLL - фон прокручивается вместе с содержимым; FIXED - фон строго зафиксирован.

BODY { background-image : url(smile.png) ; background-repeat: no-repeat; background-attachment: scroll ; }

Смотреть пример

BODY { background-image : url(smile.png) ; background-repeat: no-repeat; background-attachment: fixed ; }

Смотреть пример

Значение по умолчанию - scroll , т.е. если вообще не писать это свойство, то фон будет прокручиваться вместе с содержимым, как в первом примере.

Ну как разобрались? здесь нет ничего сложного, экспериментируйте. Попробуйте сделать так, чтобы фон например размножался по вертикали, и был строго зафиксирован.

↑ Наверх ↑

Свойство BACKGROUND-POSITION

Задает позицию фонового изображения. Значения можно задавать в процентах, в единицах длины и при помощи ключевых слов. Отсчет как обычно ведется из левого верхнего угла браузера, где и располагается фоновое изображение по умолчанию. На рисунке приведены примеры позиционирования(точка это типа изображение, а то что под ней - приблизительные координаты)

В начале указываем координату по горизонтали (по оси Х), затем через пробел координату по вертикали (по оси Y ). Координату можно задавать в процентах от ширины окна браузера, также в пикселях. Можно задавать и в сантиметрах, но не советую.

Также положение можно задавать специальными словами: left - лево, right - право, center -центр, top - верх, bottom - низ . Смотрите рисунок:

Примеры стилей:

BODY { background-image : url(smile.png) ; background-repeat: no-repeat; background-position: top right; }

Смотреть пример

BODY { background-image : url(smile.png) ; background-repeat: no-repeat; background-position: 300px 500px ; }

Смотреть пример

BODY { background-image : url(smile.png) ; background-repeat: no-repeat; background-position: 75% 25%; }

Смотреть пример

↑ Наверх ↑

Сокращенная форма записи - BACKGROUND

Свойство BACKGROUND служит для сокращенной записи всех выше расмотренных свойств.

Порядок свойств этого элемента таков:

background-color_background-image_background-repeat_background-attachment_background-position

Т.е. просто записывается пять значений свойств через пробел.Рассмотрев пример ниже Вам станет все понятно:

То что записано так:

BODY { background-color:#ffee8c ; background-image : url(smile.png) ; background-repeat: no-repeat; background-attachment: fixed; background-position: top right; }

Можно записать одной строчкой:

BODY { background: #ffee8c url(smile.png) no-repeat fixed top right ; }

Как видите, пишем значения свойств через пробел. Если какое либо свойство не указать, то ему автоматически присвоится значение по- умолчанию.

Ничего сложного здесь нет. Попрактикуйтесь, и Вы все запомните!

Урок 4: Шрифты в CSS

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

Так вот за шрифты в CSS отвечают следующие свойства:

font-family
font-style
font-variant
font-weight
font-size
font

Свойство FONT-FAMILY

Данное свойство определяет гарнитуру шрифта. Вообще FONT-FAMILY с англ. означает семейство шрифта. Дело в том, что шрифты по тем или иным признакам, объединяются в семейства. Я рассмотрю три основных семейства: Serif - шрифты с характерными "засечками", наиболее яркий представитель - "Times New Roman"; Sans-serif - шрифты рубленые, без засечек, например Arial или Verdana ; Monospace - моноширинные шрифты (с одинаковым расстоянием между символами, наподобие печатной машинки), такие как "Courier New";

На рисунке ниже изображены названия основных, используемых на практике, шрифтов, сгруппированные по семействам. Причем отображены они именно так, как выглядят на самом деле, например название "Times New Roman" отображено шрифтом "Times New Roman" , ну вы поняли....

Может Вам интересно, почему некоторые шрифты мы заключаем в кавычки? А дело в том, что есть такое правило: "Если в названии шрифта встречаются пробелы, то его следует заключать в кавычки" .

h1 {font-family: verdana, arial, sans-serif;} p {font-family: "Times New Roman", serif;}

Смотреть пример

Т.е. в начале пишется самый приоритетный шрифт, затем менее приоритетный, а затем желательно писать имя семейства. Надпись из примера выше - h1 {font-family: verdana, arial, sans-serif;} означает, что все заголовки первого уровня будут отображаться шрифтом verdana. Если по каким либо причинам этот шрифт не установлен на компьютере, то браузер подставит шрифт arial, а если и его нет, то браузер подставит любой доступный шрифт из семейства serif . Вот так.

↑ Наверх ↑

Свойство FONT-STYLE

Данное свойство задает стиль шрифта. Может принимать три значения:

normal - обычный;
italic - курсивный;
oblique - наклонный;

У вас может возникнуть вопрос: "чем отличается курсивный от наклонного?" , - дело в том, что значение italic означает использование встроенного в шрифт курсивного начертания. Ведь почти каждый шрифт включает в себя все символы и буквы в нормальном исполнении, в полужирном исполнении и в курсивном. А значение oblique - это искусственно созданный курсив, т.е. созданный наклоном стандартных букв на определенный угол.

h1{ font-family: verdana, arial, sans-serif; font-style:normal; } h2{ font-family: verdana, arial, sans-serif; font-style:italic ; } h3{ font-family: verdana, arial, sans-serif; font-style:oblique; }

Смотреть пример

↑ Наверх ↑

Свойство FONT-VARIANT

Это свойство используется для выбора варианта написания букв нижнего регистра. Может принимать два значения:

normal - значение по умолчанию, текст отображается обычным образом. small-caps - буквы нижнего регистра отображаются как уменьшенные заглавные.

Т.е. как видите большие(заглавные буквы) остаются без изменений, а маленькие - представляют собой полную копию заглавных букв, только слегка меньшего размера.

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

Пример записи стиля:

h1{ font-family: verdana, arial, sans-serif; font-variant:small-caps; } h2{font-family: verdana, arial, sans-serif;}

Смотреть пример

Думаю тут все понятно, поехали дальше...

↑ Наверх ↑

Свойство FONT-WEIGHT

Это свойство определяет насыщенность шрифта, т.е. с его помощью можно сделать шрифт жирным. Основные значения: normal - обычный и bold - жирный. Некоторые браузеры поддерживают числовые значения: 100, 200,300,400,500,600,700,800,900. Для справки: 400 равносильно normal, а 700 - bold . Но я не советую вам пользоваться числами!

P {font-family: arial, verdana, sans-serif;} DIV { font-family: arial, verdana, sans-serif; font-weight: bold; }

Смотреть пример

↑ Наверх ↑

Свойство FONT-SIZE

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

Давайте прикольнемся над заголовками:

h1 { font-family: arial, verdana, sans-serif; font-size: 18px; } h2{ font-family: arial, verdana, sans-serif; font-size: 36px; color: red; }

Смотреть пример

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

↑ Наверх ↑

Сокращенная запись. Свойство FONT

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

При этом нужно записывать значения всех свойств через пробел, в такой последовательности:

font-style_ font-variant_font-weight_font-size_font-family

Ну вот например:

P{ font-style: italic; font-variant: normal ; font-weight: bold; font-size: 30px; font-family: arial, sans-serif; }

А теперь то же самое в краткой форме:

P{ font : italic normal bold 30px arial,sans-serif; }

Еще раз обратите внимание, на то, что все значения указаны в нужной последовательности, и ЧЕРЕЗ ПРОБЕЛ. Если какое-либо свойство не указать, ему присвоится значение по умолчанию.

НУ что, теперь попрактикуйтесь, и можно приступать к следующему уроку.

Урок 5: Текст в CSS

В этом уроке мы рассмотрим основные свойства CSS отвечающие за форматирование текста.

text-align
text-decoration
text-indent
text-transform
letter-spacing
word-spacing

Свойство TEXT-ALIGN

Свойство выравнивания текста, аналогичное атрибуту ALIGN используемому в html. Может принимать четыре значения:

left - выравнивание по левому краю(значение по умолчанию); right - выравнивание по правому краю; center - выравнивание по центру; justify - выравнивание по ширине(по правому и левому краям одновременно).

Тут все очень просто, ну вот например:

h1{ text-align:center;} h2 {text-align:left;} h3 {text-align:right;} p {text-align:justify;}

Смотреть пример

Свойство TEXT- DECORATION

Позволяет оформлять текст определенным образом. Рассмотрим четыре основных значения данного свойства:

none - значение по умолчанию. Дополнительного оформления не происходит; underline - текст подчеркивается снизу; overline - текст надчеркивается сверху; line-through - текст перечеркивается;

h1 { text-align:center; text-decoration:underline; } h2 { text-align:center; text-decoration:overline; } h3 { text-align:center; text-decoration:line-through; }

Смотреть пример

Это свойство частенько используется при задании оформления ссылок, к примеру для того, чтобы при наведении на ссылку убиралось подчеркивание. Подробнее о ссылках в следующем уроке.

↑ Наверх ↑

Свойство TEXT-INDENT

Это свойство пригодится нам для создания отступов первой строки, другими словами абзацев. Значение лучше задавать в пикселах, это универсальный способ.

h1{text-align:center;} p { text-indent: 40px; }

Смотреть пример

Однако можно задать и в процентах от общей длины базовой строки(строки без отступа)

h1{text-align:center;} p { text-indent: 20%; }

Смотреть пример

Как видите, все очень просто, а в html это сделать гораздо сложнее.

↑ Наверх ↑

Свойство TEXT-TRANSFORM

C помощью этого свойства, можно видоизменять текст, а именно менять большие буквы на маленькие или наоборот. Может иметь такие значения:

capitalize - меняет регистр первых букв каждого слова так, чтобы они были заглавными. Например:"создайте сайт сейчас" станет "Создайте Сайт Сейчас". Частенько это свойство используется при написании рекламных текстов, это больше привлекает внимания!

uppercase - делает из всех букв заглавные. Например: "текст в css " станет " ТЕКСТ В CSS "

lowercase - делает из всех букв маленькие. Например: "TRANSFORM" cтанет "transform".

none - не производит смены регистра; это значение используется по умолчанию.

↑ Наверх ↑

Свойство LETTER-SPACING

C помощью этого свойства можно изменять расстояние между буквами. Значение лучше указывать в пикселях.

h1 { letter-spacing: 10px;} p{ letter-spacing :4px; }

Смотреть пример

В примере выше для заголовков установлен интервал между буквами в 10 px, а для параграфов в 4px;

Свойство WORD-SPACING

Позволяет изменять расстояние между словами. Значение также лучше задавать в пикселах.

h1 { word-spacing: 20px;} p{ word-spacing :10px; }

Смотреть пример

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

Вот мы и закончили изучение основных свойств из этого урока. Поверьте, дальше будет гораздо интересней. В следующем уроке мы поговорим о списках. Но не спешите идти дальше, сначала хорошенько закрепите пройденный материал!

Урок 6: Списки в CSS

В этом уроке мы рассмотрим основные свойства CSS , отвечающие за внешний вид списков. Их совсем чуть-чуть, так что урок будет коротким, но полезным!

list-style-type
list-style-position
list-style-image
list-style

Запомните: Все эти свойства универсальны, т.е. могут применяться как к упорядоченным спискам, так и к неупорядоченным. В этом то и прикол CSS , что можно из неупорядоченного списка, сделать упорядоченный и наоборот :)

Свойство LIST-STYLE-TYPE

Позволяет определять вид маркера элементов списка. Это могут быть цифры, буквы, квадратики, кружочки и др. Ниже приведены основные значения этого свойства:

disk - маркер в виде закрашенного круга;
circle - маркер в виде незакрашенного круга;
square - маркер в виде закрашенного квадрата;

decimal - обычные десятичные числа , например 1,2,3,4,5 и т. д. ;
upper-roman - большие римские цифры, типа I, II, III, IV, V и т.д. ;
lower-roman - маленькие римские цифры типа i, ii, iii, iv, v и т.д.
upper-alpha - большие буквы A, B, C, D, E и так далее;
lower-alpha - малые буквы типа a,b,c,d,e и т.д.;

none - маркер списка отсутсвует;

Переделаем, для прикола, упорядоченный список в неупорядоченный, т.е. элементу OL( упорядоченый список) напишем square, а элементу UL(неупорядоченный) тип upper-roman;

ol {list-style-type:square;} ul {list-style-type: upper-roman;}

Смотреть пример

Результат на лицо! если не верите, посмотрите исходный html код примера:)

↑ Наверх ↑

Свойство LIST-STYLE-POSITION

Это свойство определяет положение маркера. Может принимать два значения:

outside - за пределами основного блока элемента списка;
inside - внутри основного блока списка.

Т.е. если мысленно обвести прямоугольником основной блок списка, получится примерно следующее:

Только учтите, это свойство уже устарело, и сейчас, в новых версиях браузеров может уже и не работать!

↑ Наверх ↑

Свойство LIST-STYLE-IMAGE

Это наверное самое интересное свойство в списках. Оно позволяет поставить вместо маркера любое изображение. В качестве значения указывается ключевое слово url и затем в круглых скобках путь к изображению. В некоторых устаревших версиях браузеров, работает неккоректно.

ul {list-style-image: url(galka.gif);}

Смотреть пример

Не забывайте, что url(galka.gif) означает что изображение galka.gif лежит в той же папке, где и css -файл. Если у вас изображение не там, соответственно и путь указывайте другой!

Сокращенная форма LIST-STYLE

Перечисленные выше свойства можно записать более компактно. Для этого существует сокращенный вариант list -style;

Такой вариант из трех строк:

ul { list-style-type:square; list-style-position: inside; list-style-image: url(galka.gif); }

Рациональнее заменить таким:

ul {list-style:square inside url(galka.gif) }

Свойства указываются через пробел и последовательность в данном случае роли не играет.

Если какое-либо свойство не указать, ему присвоится значение по умолчанию.

Ну вот и все по спискам! теперь Вам осталось попрактиковаться, и можете переходить к следующему уроку.

Урок 7: Ссылки в CSS

Наверное Вы не раз замечали на различных сайтах, как при наведении на ссылку меняется ее внешний вид. Ну например исчезает подчеркивание или меняется цвет. Это делает как-раз CSS , а именно за это отвечают псевдоклассы - классы, способные учитывать те или иные условия , при определении свойств html элемента.

Как применить псевдокласс к ссылкам?

Записываем для начала элемент А, к которому мы будем применять псевдокласс, затем ставим двоеточие и указываем имя псевдокласса, а уже потом в фигурных скобках указываем нужный стиль.

А : ИМЯ ПСЕВДОКЛАССА { ...стиль ...}

Ну вот для ссылок например бывает четыре псевдокласса:

A:link { ... стиль оформления обычной ссылки... } A:active { ... стиль оформления ссылки в момент нажатия... } A:visited { ... стиль оформления посещенной ссылки... } А:hover { ... стиль оформления ссылки, на которую наведен указатель мыши ... }

Ну теперь давайте я приведу вам некоторые примеры для лучшего понимания. Для начала, посмотрите, как выглядят ссылки по умолчанию:

Видите, только посещенная ссылка отличается от других, а так в принципе все одинаково. Да и цвета не очень. Попробуем создать свой стиль:

a:link { color: blue ; } a:visited { color:gray; } a:hover { color:red ; text-decoration:none; } a:active { color:green; text-decoration:none; }

Смотреть пример

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

Вообще вариантов оформления ссылки может быть множество, и каждый делает под конкретный дизайн что-то свое. Вот еще примерчик:

a:link { color: blue ; } a:visited { color:gray; } a:hover { color:red ; text-decoration:none; font-weight:bold; } a:active { color:green; text-decoration:none; text-transform:uppercase; }

Смотреть пример

Бывают случаи, когда мы не хотим вообще чтобы ссылка визуально выделялась на фоне текста. Решение опять же в CSS:

a:link { color: black ; text-decoration:none; } a:visited{ color: black ; text-decoration:none; } a:hover { color: black ; text-decoration:none; } a:active { color: black ; text-decoration:none; }

Смотреть пример

Если для всех псевдоклассов стиль одинаковый, как в примере выше, то это можно записать и короче:

a:link, a:visited, a:hover, a:active {color:black; text-decoration:none;}

А можно и вовсе без использования псевдоклассов:

a {color:black; text-decoration:none;}

Ну вот и все по ссылкам в CSS. Следующий урок будет очень нужным и интересным, там мы рассмотрим очень важный момент, который я советую Вам хорошенько выучить, без него дела не будет :)

Урок 8: Типы селекторов в CSS

Ну для начала, скажу что селектор служит для того, чтобы однозначно определить элемент в html документе, к которому мы хотим применить тот или иной стиль CSS .

Селектор по элементу;
Селектор по классу;
Селектор по id;
Контекcтный селектор;

Селектор по элементу

До этого момента, мы с вами работали именно с этим селектором.Т.е. в качестве селектора использовалось непосредственно имя html элемента , к которому мы хотели применить данный стиль. Т.е. написав класс например для параграфа(Р) , все параграфы на странице приобретали стиль данного класса.

P { font-family: arial, verdana, sans-serif; font-size: 12px }

А теперь представьте ситуацию, когда необходимо сделать первый параграф в одном стиле, второй в другом, третий в третьем и.т.д. Тут нам на помощь придетселектор по классу.

Селектор по классу

Давайте разберем как создать универсальный класс в CSS . А сделать это очень просто: сначала ставим точку, затем сразу, без пробела,пишем имя класса, ну а затем в фигурных скобках стиль. Ну например:

.green { font-family: arial, verdana, sans-serif; font-size: 12px; color:green; }

Как применить данный стиль?

Допустим мы хотим применить данный стиль к определенному параграфу в документе. Вот как это будет выглядеть в html:

<P class ="green"> ... текст параграфа ... </P>

Как видите используется атрибут class со значением названия стиля. Понятно? вот вам еще примерчик:

html:

<p>Это обычный параграф , для него используется селектор по элементу</p> <p class="green"> Этот параграф зеленый, т.к к нему применили класс</p> <p class ="big_red" >А этот параграф большего шрифта и красный </p> <p>Этот параграф снова обычный, по классу селектора элемента </p>

css:

p { font-family:arial,verdana,sans-serif; font-size:18px; } .green {color:green;} .big_red{ font-size:28px; color:red; }

Смотреть пример

Указываем сначала базовый стиль для всех параграфов(селектор по элементу), а потом уже, если хотим в каком-либо параграфе что-то изменить, создаем для него специальный стиль (селектор по классу) и присваиваем его этому параграфу. Когда мы создаем этот самый специальный класс, мы должны писать туда только те свойства, которые хотим добавить, или изменить, по отношению к базовому стилю для этого элемента.

Классы из примера выше, можно применить не только к параграфу, но и например к заголовкам, или например к ячейке таблицы, или ко всей таблице, короче они могут применяться везде, где они могут на что-то повлиять (в данном случае везде, где есть параметр цвет, и текст).

Сделать так, чтобы класс действовал только на определенный элемент(например параграф) можно указав название элемента перед точкой:

P.green {color:green;}

Теперь класс green не будет действовать ни на что другое, кроме элемента P.

↑ Наверх ↑

Селектор по id

Данный селектор применяется если необходимо выделить один единственный элемент , уникальный,отличный от всех остальных в документе. К примеру, выделим первый заголовок на странице определенным образом:

html- часть:

<Н1 id="firstheader"> Первый заголовок на странице </Н1>

css - часть:

H1#firstheader { color: red; font-weight: bold; text-align: center }

Смотреть пример

Как видите в html-части вместо атрибута class здесь употребляется атрибут id , а в css - вместо точки употребляется знак #.

В принципе, то же самое можно сделать и с использованием селектора по классу, это уже кому как больше нравится :)

↑ Наверх ↑

Контекстный селектор

Это очень полезная вещь. Допустим у нас есть страничка с таблицами и параграфами текста, причем и в таблице, и в параграфах встречаются выделенные жирным шрифтом(strong) слова. И вот, нам резко понадобилось сделать так, чтобы слова, в параграфе, которые выделены жирным стали зеленого цвета. Так вот:

p strong {color:green }

Т.е. в начале P затем пробел, затем STRONG а уже потом стиль. Читается эта строчка примерно так: Если внутри элемента P имеется элемент STRONG то элементу strong присвоить стиль зеленого цвета.

Вложенность может быть любого уровня. Вот еще пример: "Если вдруг внутри ячейки таблицы (td) , встретится параграф (P) , внутри которого будет слово выделенное жирным (STRONG) то пусть это слово станет красным! "

td p strong {color:red;}

Смотреть пример

Ну теперь я думаю Вам все уже понятно. Эксперементируйте, создавайте свои стили, и будет вам счастье...

Урок 9: Блоковая модель в CSS

Давайте разберемся что значит эта самая блоковая модель, для этого вспомним немного html.

Дело в том, что в html различают элементы блочные и строчные. Причем блочные элементы это как бы отдельная структурная единица, которая всегда отделяется абзацными отступами. Т.е. нельзя расположить два блочных элемента на одной строке. Примером блоков в html могут служить элементы H1-Н6, Р, DIV. А строчные элементы не создают как-бы отдельной структурной единицы, не отделяются абзацными отступами, и например два строчных элемента могут без проблем расположиться на одной строке. Примером могут быть элементы strong ,EM , I.

Технология стилей CSS также использует понятие блоков. Блоки в CSS представляют собой самостоятельную структурную единицу, имеющую форму прямоугольника. Каждый элемент в дереве элементов документа - самостоятельный блок. Из этого следует, что в CSS есть блоки, которые структурно отделены от остальных, а есть строчные блоки, которые могут находиться внутри структурных блоков. Но и те, и другие имеют одинаковую структуру:

Каждый такой блок обязательно имеет информационную часть, или содержимое, которым может быть текст, изображение или другая информация. Эта часть блока называется его контентом или содержимым. Например, для элемента Pсодержимым блока является текст абзаца.

Вокруг области контента могут быть пустые, не занятые содержимым области, называемые полями (margin). С точки зрения дизайна поля обеспечивают для содержимого блока эстетически более привлекательный вид. При наличии полей определенного размера текст не примыкает вплотную к границам блока. Можно провести аналогию с полями, устанавливаемыми при печати документов на бумаге. Если полей не было бы, то текст начинался бы прямо у края листа. При наличии полей имеются не занятые текстом области вдоль краев листа бумаги, и текст, напечатанный на листе, в этом случае читать приятнее и удобнее.

Непосредственно за полями проходит граница блока (border), которая может иметь определенную толщину и стиль линий. Ширина блока может быть произвольной - от нулевой (граница в этом случае не видна) до произвольно заданной в единицах измерениях длины. Стиль линий может быть различным, от простой линии до объемных вариантов. Кроме того, граница может иметь произвольный цвет.

Также блок может иметь отступы (padding), это дополнительное свободное пространство вокруг границы блока. Согласно спецификации CSS, поля, границы и отступы не входят в ширину блока. Таким образом, указывая ширину блока, вы задаете ширину лишь той части блока, которая отведена для содержимого.

Разобрались? тут нет ничего сложного. В следующем уроке мы детально рассмотрим свойство border позволяющее задать стиль рамки блоков, изображений, таблиц и др.

Урок 10: Рамки в CSS

Давайте в этом уроке поговорим о рамках. Основные свойства рамок в CSS следующие:

border-width
border-color
border-style
Сокращенная форма - border
Примеры

Свойство BORDER-WIDTH

Это свойство задает толщину рамки. Значение обычно указывается в пикселях, но также можно указывать ключевыми словами thin (2px) , medium(4px) и thick(6px). Для лучшего понимания, сколько это один пиксель, смотрите рисунок ниже:

На рисунке приведены значения ширины от 1 до 10 пикселей.

Свойство BORDER-COLOR

Как вы поняли данное свойство определяет цвет рамки. Значение цвета задается обычным образом, т.е. например: "#ff3344", или "gold".

Свойство BORDER-STYLE

Данное свойство определяет какого вида будет рамка. Ниже приведены 8 основных значений данного свойства. Все рамки в примере выполнены цветом gold и шириной 6 px .

SOLID	Рамка состоит из сплошной линии

DOTTED	Точечная рамка

DASHED	Пунктирная рамка

DOUBLE	Рамка из двойной сплошной линии

GROOVE	Рамка как бы из вдавленной линии, с имитацией объема

RIDGE	Рамка отображается выпуклой линией с имитацией объема

INSET	Рамка отображается так, что весь блок кажется вдавленным

OUTSET	Рамка отображается так, что весь блок кажется выпуклым

Примечание:минимальная ширина рамки типа double должна равняться 3 px, иначе она будет отображаться некорректно.

Вот пару примеров стилей:

h1 { border-width: 4px; border-style: dotted; border-color: red; } h2 { border-width: 18px; border-style: inset; border-color: red; } p { border-width: 2px; border-style: solid; border-color: blue; }

Смотреть пример

Или такой вариант:

h1 { border-width: 30px; border-style:outset ; border-color: red; } h2 { border-width: 20px; border-style: dashed; border-color: gold; } h3 { border-width: 16px; border-style: double; border-color: green; } p { border-width: 1px; border-style: dotted; border-color: blue; }

Смотреть пример

↑ Наверх ↑

Сокращенная форма - border

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

h1 { border:30px outset red; } h2 { border:20px dashed gold; } h3 { border: 16px double green; } P { border:1px dotted blue }

Смотреть пример

↑ Наверх ↑

Примеры:

Во всех перечисленных выше примерах, если добавить после слова border одно из ключевых слов (top, right, bottom, left) можно регулировать параметры рамки с разных сторон соответственно (верх, право, низ, лево). Ну вот например можно сделать так:

h1 { border-top-width: 30px; border-top-style:solid ; border-top-color: red; border-right-width: 20px; border-right-style:dashed ; border-right-color: gold; border-bottom-width: 10px; border-bottom-style:dashed; border-bottom-color: green; border-left-width: 40px; border-left-style:solid ; border-left-color: blue; }

Смотреть пример

Естественно намного красивее код будет выглядеть в сокращенном виде:

h1 { border-top: 30px solid red; border-right: 20px dashed gold; border-bottom: 10px dashed green; border-left: 40px solid blue; }

Смотреть пример

Можно также комбинировать перечисленные выше свойства, ну например так:

h1 { border: 30px solid red; border-bottom: 10px solid gold; } h2 { border: 30px solid red; border-bottom-color: green }

Смотреть пример

Думаю Вам все понятно, пора переходить к следующему уроку :)

Урок 11: Поля (margin) и отступы (padding)

Это очень простой, но в это же время и нужный урок. Давайте посмотрим, в чем отличие margin от padding. Для этого, еще разок вспомним блоковую модель в CSS.

MARGIN (Поля) - это расстояние от границы(рамки) блока, до ближайших элементов, или, если их нет, до краев документа.

PADDING (Отступы) - как бы внутреннее расcтояние, между границей(рамкой) и содержимым блока.

И давайте сразу посмотрим примерчик: создадим три стиля для трех разных параграфов, с различными значениями margin и padding и посмотрим на результат:

.p1 { background-color : #FFE446; border:1px solid red; margin:70px; } .p2 { background-color : #FFE446; border:1px solid red; padding:70px; } .p3 { background-color : #FFE446; border:1px solid red; margin:50px; padding:20px; }

Смотреть пример

Ну как разобрались? если читали текст внутри примера, то точно разобрались...

Добавляя уже знакомые нам ключевые слова: top, right, bottom, left можно регулировать отступы и поля соответственно сверху, справа, снизу, слева.

p { margin-top:50px; margin-right:50px; margin-bottom:50px; margin-left:150px; }

Смотреть пример

Тоже самое, только в более сокращенной записи:

p { margin:50px; margin-left:150px; }

Т.е. так как только левое поле отличается от остальных, мы просто записали общее поле, а потом дописали значение левого поля, и получили тот же результат что и в первом примере.

Возможен также такой вариант записи:

p { margin: 50px 50px 50px 150px; }

Т.е. значения записываются по часовой стрелке: верхнее, правое, нижнее, левое.

В каких случаях лучше пользоваться отступами, а в каких полями?

А это уже решать Вам, могу только дать несколько принципиальных отличий:

Отступы(padding) распологаются внутри блока, а поля(margin) - за их пределами;
Фон блока и фоновое изображение распространяются только на отступы, но не на поля. Поля всегда прозрачны, и сквозь них просвечивает фон родительского элемента.

Думаю тут нет ничего сложного, главное попрактикуйтесь, придумайте свои примеры, а уже потом можете двигаться дальше :)

Урок 12: Высота(height) и ширина(width) блоков

Как Вы уже наверное заметили, по умолчанию высота и ширина блоков определяются автоматически, т.е. чем больше текста(или другого содержимого) тем шире и выше блок.

Но, с помощью технологии CSS , мы можем сами задавать необходимую нам ширину и высоту блоков. Ну что ж, давайте начнем.

HEIGHT - свойство устанавливающее высоту блока;

WIDTH - свойство устанавливающее ширину блока;

Обычно, в качестве блоков в CSS используют элемент DIV. Однако свойство ширины и высоты можно применить и к параграфам, спискам и др.

Теория - теорией, но давайте практиковаться. Я создал 4 класса, и поочередно присвоил их одному и тому же боксу (в данном случае DIV) с текстом. Смотрите что получилось.

.box1 { width: 300px; border: 1px solid red; background: #FFE446; }

Смотреть пример

Как видите, ширина фиксированная и равна 300 пикселей, а высота устанавливается по умолчанию, в зависимости от содержимого.

.box2 { height: 300px; border: 1px solid red; background: #FFE446; }

Смотреть пример

Теперь, фиксированная высота, а ширина растягивается по содержимому.

.box3 { width: 300px; height: 600px; border: 1px solid red; background: #FFE446; }

Смотреть пример

Здесь фиксированная как высота, так и ширина.

.box4 { width: 300px; height: 300px; border: 1px solid red; background: #FFE446; }

Смотреть пример

А это пример того, как будет выглядеть бокс с фиксированной шириной и высотой, если содержимое не влазит туда :) Текст попросту выходит за рамки блока.

Примечание!

Как я уже говорил, в 9 уроке, согласно спецификации CSS, поля, границы и отступы не входят в ширину блока. Таким образом, указывая ширину блока, вы задаете ширину лишь той части блока, которая отведена для содержимого.

Ну вот мы и разобрались с шириной и высотой блоков. Можно смело двигаться дальше...

Урок 13: Позиционирование блоков

Технология CSS позволяет размещать что угодно, там где Вам угодно. Нужно просто указать координаты блока и все. Под блоком мы понимаем не только <div>, но и заголовки, параграфы, рисунки, списки, в общем все, что является блоковой моделью. Это помогает создать действительно прикольный, уникальный дизайн.

Рассмотрим две основные модели позиционирования:

Абсолютное позиционирование (POSITION:ABSOLUTE;)
Относительное позиционирование (POSITION:RELATIVE; )

Абсолютное позиционирование (POSITION:ABSOLUTE;)

Обычно для позиционирования применяют именно этот тип. В технологии CSS, свойство позиционирования обозначается как POSITION, а чтобы указать , что это позиционирование абсолютное, пишут значение ABSOLUTE. Затем используя ключевые слова top, right,bottom,left указывают необходимые координаты, которые отсчитываются от краев окна браузера.

Посмотрите на рисунок ниже. Я специально сделал рамку боксу, чтобы было более понятно, откуда отсчитываются координаты.

Огромный плюс абсолютного позиционирования в том, что бокс с абсолютным позиционированием располагается по заданным координатам, а из того места, где он должен был бы быть, он удаляется. Блин, на словах объяснить проблематично, так что давайте покажу на примере:

Рассмотрим, обычный документ с одним изображением, и обтекающим его текстом.

Смотреть пример

А теперь, спозиционируем изображение , для чего создадим класс, и присвоим его изображению. Код класса, выглядит примерно так:

.smile{ border: 1px solid red; position:absolute; top:100px; right:100px; }

Ну а с html думаю проблем у Вас не будет, чтобы применить класс к изображению, пишем типо <img class="smile"> .

Смотреть пример

Что мы видим? как я уже писал раньше, изображение удалилось из того места, где оно было(вместо изображения теперь там текст), и переместилось соответственно указанным координатам. В примере выше, я сделал красную рамку, чисто для того, чтобы было нагляднее понятно, что координаты отсчитываются правильно. А вообще, ее лучше не ставить :)

Обычно указываются только две координаты, т.е. привязка идет к любому из углов документа.

Вот еще пример стиля:

.smile{ position:absolute; bottom:300px; left:100px; }

Смотреть пример

Если необходимо зафиксировать блок, т.е. чтобы он не прокручивался вместе с основным содержимым, т.е. не скролился, то необходимо указать значение FIXED.

.smile{ position:fixed; bottom:300px; left:100px; }

Смотреть пример

↑ Наверх ↑

Относительное позиционирование (POSITION:RELATIVE; )

При относительном позиционировании, бокс смещается , но его прежнее место ничего не заполняет. Обозначается в как POSITION: RELATIVE;

Координаты в отличие от абсолютного позиционирования, отсчитываются от прежнего положения блока.

Вот пример простого документа с текстом и рисунком:

Смотреть пример

А вот пример, как будет выглядеть этот же документ, если изображение спозиционировать относительно.

Css код:

.smile{ border:1px solid red; position:relative; top:200px; left:100px; }

Смотреть пример

Т.е. как я уже говорил, прежнее место ничем не занимается, а координаты отсчитываются от первоначального положения блока.

Ниже Вы можете наблюдать скриншот из предыдущего примера, с пояснениями координат:

Ну вот мы и разобрали этот довольно сложный урок. Думаю Вам эта информация пригодится. И еще разок Вам напомню, что позиционировать можно не только изображения, а и все другие элементы.

Урок 14: Плавающие блоки(свойство float)

В этом уроке я вкратце коснусь такой вещи как плавающие блоки. Вообще , с помощью плавающих блоков можно создавать различные эффекты и даже дизайн страниц, т.н. блочный дизайн. Большинство современных сайтов строятся именно по блочному принципу. Поэтому, мне кажется , что очень важно разобраться как это работает!

Итак, Плавающие блоки в CSS определяются свойством float.

Свойства FLOAT

Данное свойство определяет, будет ли блок плавающим и в какую сторону он будет перемещаться. Свойство может принимать следующие значения.

left - структурный блок перемещается влево. Остальное содержимое документа будет выводиться вдоль правой стороны блока, начиная с самого верха.
right - структурный блок перемещается вправо. Остальное содержимое документа выводится вдоль левой стороны блока, начиная с самого верха.
none - блок не перемещается (значение по умолчанию).

Ну вот например, как будут располагаться по умолчанию ,три квадратных блока, со стороной в 200 пикселей.

html код :

<div class="box1">Первый блок</div> <div class="box2">Второй блок</div> <div class="box3">Третий блок</div>

CSS код :

.box1 { width:200px; height:200px; border:1px solid red; background-color:orange; } .box2 { width:200px; height:200px; border:1px solid red; background-color:orange; } .box3 { width:200px; height:200px; border:1px solid red; background-color:orange; }

Смотреть пример

Как видите, по умолчанию каждый следующий блок, находится под предыдущим.

Используя свойство float можно сделать так, чтобы каждый блок всплывал влево, т.е. это будет выглядеть так:

.box1 { width:200px; height:200px; border:1px solid red; background-color:orange; float:left; } .box2 { width:200px; height:200px; border:1px solid red; background-color:orange; float:left; } .box3 { width:200px; height:200px; border:1px solid red; background-color:orange; float:left; }

Смотреть пример

Вот как будет выглядеть, если блоки будут всплывать вправо:

.box1 { width:200px; height:200px; border:1px solid red; background-color:orange; float:right; } .box2 { width:200px; height:200px; border:1px solid red; background-color:orange; float:right; } .box3 { width:200px; height:200px; border:1px solid red; background-color:orange; float:right; }

Смотреть пример

Классический пример применения - это когда надо сделать чтобы текст выводился в колонках. Пусть колонки будет три.

CSS код:

.column1 { float:left; width: 33%; } .column2 { float:left; width: 33%; } .column3 { float:left; width: 33%; }

В html-коде просто заключим необходимый текст в соответствующие колонки, тегами DIV

<div class="column1"> <p>There is one universal truth in website making: To make a websitet...</p> </div> <div class="column2"> <p> If you're like the vast majority of people thinking ...</p> </div> <div class="column3"> <p>There is one universal truth in website...</p> </div>

Смотреть пример

Говоря о плавающих блоках, необходимо упомянуть также о свойстве CLEAR -специфическое свойство, позволяющее определенным образом позиционировать плавающие блоки.

left - блок должен размещаться ниже всех левосторонних плавающих блоков.
right - блок должен размещаться ниже всех правосторонних плавающих блоков.
both - блок должен размещаться ниже всех плавающих блоков.
none - никаких ограничений на положение блока относительно перемещаемых объектов не накладывается.

Ну допустим имеется два плавающих влево блока(float:left;), которые обтекает текст.

Смотреть пример

Если заключить весь текст в блок, и придать ему свойство CLEAR:BOTH т.е. чтобы он размещался ниже всех плавающих блоков, можно избавиться от обтекания блоков текстом.

html-код

<div class="box1">Первый блок</div> <div class="box2">Второй блок</div> <div class="box3"> <p>There is one universal truth in website...</p> </div>

CSS-часть

Смотреть пример

Заметьте, что в блоках может находится что угодно(картинки, списки,текст и др.)

Вот Вам еще один пример, когда один блок располагается под другим, и оба блока обтекаются текстом.

html-код

<div class="box1">Первый блок</div> <div class="box2">Второй блок</div> <p>There is one universal truth in website...</p>

css- часть

Смотреть пример

В общем вариантов применения может быть много. Экспериментируйте, если хотите.

Если хотите посмотреть, как использовать плавающие блоки для создания каркаса сайта, Вам сюда .

Урок 15: Слои в CSS

В этом уроке, поговорим о таком понятии как слой в CSS. Для тех, кто работал с графическими редакторами, это понятие должно быть знакомо, а для остальных постараюсь объяснить.

Создавая блок в CSS, мы всегда четко задаем его параметры, а также позиционируем его в определенное место на экране. Таким образом, любой блок имеет две координаты X и Y, которые определяют положение блока на плоскости экрана. Но в CSS есть еще и третья, пространственная координата Z, которая определяет номер слоя, на котором находится блок. Т.е. чем больше координата Z, тем выше этот слой находится по отношению к остальным. Например слой с номером 2 будет ближе расположен к пользователю, просматривающему вашу страницу, чем слой с номером 1. А слой с номером 1, будет располагаться выше, чем основной код страницы.

За создание слоя в CSS отвечает свойство Z-index, а принимаемые им значения, указывают номер слоя.

Например, можно сделать из карт знаменитую комбинацию Royal Flash.

Как видите, каждая карта, немного перекрывает другую. Вот как это выглядит в коде:

.desatka_buba { position: absolute; left: 200px; top: 200px; z-index: 1; } .valet_buba { position: absolute; left: 215px; top: 215px; z-index: 2; } .dama_buba { position: absolute; left: 230px; top: 230px; z-index: 3; } .korol_buba { position: absolute; left: 245px; top: 245px; z-index: 4; } .tuz_bubna { position: absolute; left: 260px; top: 260px; z-index: 5; }

Ну а в html коде , просто присваиваете рисункам соответствующие стили, типа: <img src="10buba.gif" class="10_buba"> ну и так далее, вы поняли...

Смотреть пример

Если хорошенько разобраться с этим простым методом, можно создавать довольно приличные вещи. Например размещать текст над изображением, или наоборот, создавать красивые заголовки , например с эффектом тени, также если поглубже изучить слои, можно создавать выпадающие меню , и многое другое...

В следующем уроке, я закончу учебник, и дам некоторые советы, по дальнейшему обучению...

Урок 16: Завершение...

Вот Мы и закончили учебник по CSS . Надеюсь Вам все понятно, а если вдруг по ходу обучения возникают вопросы, пожалуйста задавайте их на форуме.

Теперь, когда Вы уже ознакомлены с языком разметки html и технологией стилей CSS , как следующий шаг, я бы посоветовал Вам разобраться с программой Adobe Dreamweaver. Это просто незаменимый помощник, я не знаю, что бы я без него делал. Очень доходчиво и понятно излагаются основные принципы работы, в видеоучебнике по Дримвиверу, который можно скачать у меня на сайте бесплатно.

Также, нужно разобраться с применением всех полученных Вами знаний именно в построении сайтов. Ведь все начинается с разработки каркаса сайта. Поэтому дальше, советую Вам поближе познакомиться именно с этим.

Существуют каркасы(они же макеты) построенные на таблицах(табличные) и на дивах(блочные) . Конечно табличная верстка уже немного устарела, но все же имеет право на существование.

Урок о табличной верстке "Создаем универсальный табличный макет страницы"

Урок о блочной верстке "Что такое блочная верстка (div верстка) сайтов"

domen

<<< < Предыдущая 12 / 92 3 4 5 6 7 8 9 > Следующая >>>

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]

#
04.09.2019428 Кб3Sabrina_Farkhodzoda.doc
#
01.07.2025156 Кб0Sadman_Bradburn-extracts.doc
#
01.05.2025198 Кб0Sadykova_Alina - копия.docx
#
01.07.2025240 Кб0SAEU_Laboratornye_raboty.doc
#
01.07.20251 Мб1Safiullin_I_I.docx
#
01.03.20254 Мб2sait.docx
#
01.07.2025395 Кб0sakh-zaliv.doc
#
01.07.2025304 Кб2Sakl.doc
#
26.08.2019393 Кб2salafiya.doc
#
01.07.20252 Мб1salat_olivie (3).doc
#
01.04.2025158 Кб9Salat_po_stilistike.docx