Отправляет email-рассылки с помощью сервиса Sendsay

Основы самостоятельного сайтостроения

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Работа в сети Интернет" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Декабрь 2008   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
rohviktor

Статистика

632 подписчиков
-1 за неделю
←   Все выпуски   →

Основы самостоятельного сайтостроения Выпуск №11


Выпуск No11  Основы самостоятельного сайтостроения.  2008-12-25 

 

Доброго времени суток, уважаемые подписчики.

С Вами Виктор.

Перед тем как приступить к изучению сегодняшнего урока, хочется всех поздравит с Рождеством и Новым Годом. Желаю Вам исполнения всех Ваших задуманных идей! И чтобы 2009 год принес Вам массу положительных эмоций и высоких результатов в учебе.

Также в данном выпуске я бы хотел поделиться с Вами некоторыми новостями.

Как Вы знаете, мы с моим другом Андреем работаем над проектом webformyself. Мы купили хостинг в зоне .com, НО в связи с некоторыми юридическими моментами, нам придется переехать в зону .by.

Поэтому, когда мы запустим свой сайт и dvd продукт, мы будем на http://www.webformyself.by!

Что ж, теперь переходим непосредственно к нашему уроку.

Сегодня Вам будет предложено 2 версии урока. Одна в текстовом виде – ее Вы видите перед своими глазами, а вторая ВИДЕО – ее Вам нужно будет скачать.

Ссылка на видео версию урока:

 http://www.webformyself.com/cgi-bin/counter/download.pl?file=lesson11.zip

На наш взгляд видео версия Вам будет более понятна.

Итак, передаю слово своему коллеги Андрею.

Всем привет!

 Очередной выпуск рассылки будет про дополнительные элементы HTML.

Сейчас поймете.

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

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

И так, это тэги <div></div> и <span></span> .  Какая между ними разница, если используются они для одного и того же?      

<div></div> - это блочный тэг, и в нем могут быть любые нам известные тэги (списки, картинки, таблицы…).

<span></span>  - это строчный тэг, и он применим исключительно к тексту (выделить фрагмент текста другим цветом).

Стили, которые применимы к данным тэгам – это все нами изученные стили. Ограничений на применение каких-либо стилей нет.   

 

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

Первое с чего хотелось бы начать это с позиционирования элементов. Это свойство:

position- устанавливает или определяет позицию элемента.

                        Значения:

static - По умолчанию. Позиция объекта определяется текущей разметкой HTML по стандартным правилам.
absolute - Позиция объекта определяется относительно позиции родительского объекта или отностительно объекта body.                                                      relative - Позиция объекта определяется смещением от позиции, в которой он появился по умолчанию.

left/top  - Устанавливает или определяет позицию элемента относительно левого/верхнего края.

                        Значения:

                        x– число в процентах или пикселях.

                        auto- значение по умолчанию.

 

Рассмотрим  пример:

                        <div style=""xposition:relative;" top:350px; left:200px; width:300px;">   

                        Любое содержимое блока!!!      

</div>

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

Следующее важное свойство:

margin – величина отступа от нашего блока до соседних объектов с четырех сторон.

                        Значения:

                        margin-top - Задает величину верхнего отступа объекта

                        margin-left - Задает величину левого отступа объекта

                        margin-right - Задает величину правого отступа объекта

                        margin-bottom - Задает величину нижнего отступа объекта

Пример:

            <div style=""" margin-top:30px; margin-left:30px; margin-bottom:30px; margin-right:30px;">           

                        Любое содержимое блока!!!

            </div>

Мы создали блок с отступами вокруг него по 30px от всех его сторон.

 

Над чем хотелось бы остановиться еще:

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

                        Значения:

                        padding-bottom - Задает величину пространтства, вставляемого                                                                                                                                          между объектом его нижней границей.

                        padding-left - Задает величину пространтства, вставляемого между объектом его левой границей.

                        padding-right - Задает величину пространтства, вставляемого между объектом его правой границей.

                        padding-top - Задает величину пространтства, вставляемого между объектом его верхней границей.

Пример:

            <div style=""" padding-bottom:30px; padding-left:30px; padding-right:30px; padding-top:30px;">

                        Любое содержимое блока!!!

            </div>

Мы создали блок с отступами по 30px от содержимого до всех его сторон.

И рассмотрим пример с использованием тэга <span></span>:

Допустим, у нас есть конструкция вида:

<p>Любой  текст ! </p>

Мы хотим сделать слово текст на желтом фоне синими буквами. Для этого заключим его в тэг <span></span> и применим соответствующие стили.

<p>Любой <span style=""background-color:#FFFF66;" color:#000066;">текст</span> ! </p>

Еще раз повторюсь, что все рассмотренные стили применимы не только к рассмотренным двум тэгам, но и ко всем нами известным тэгам!

 

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

http://www.webformyself.com/cgi-bin/counter/download.pl?file=lesson11.zip

E-mail: andreybern@mail.ru

contact@webformyself.com

P.S. Мы пока еще в зоне .com, но скоро будем в зоне .by

С наступающим Вас!!!

 

  

 
В избранное