,


Наш опрос
Нравиться ли вам рубрика "Этот день год назад"?
Да, продолжайте в том же духе.
Нет, мне это надоело.
Мне пофиг.


Показать все опросы
Other

Как называется настольный футбол .

Курсы валют


Курсы наличного обмена валют в Украине

Внешний вид


Верстаем новости
+12
Верстаем новости

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

Единицы длины.

В языке веб-вёрстки используется несколько ключевых единиц длины. Среди них -- пиксели, множители, проценты, и некоторые другие.

Пиксели -- абсолютная мера длины, обозначается px. К примеру, ширина, равная трёмстам пикселям (какая-нибудь картинка) будет обозначена так:
width: 300px;

Множитель -- относительная мера длины, обозначается дробным числом + ключевое слово em, и применяется, как правило, к шрифтам.
Множитель показывает, во сколько раз больше или меньше должен быть шрифт относительно значения по умолчанию в браузере. К примеру:
font: 1.2em 'Times New Roman';
Названия шрифтов настоятельно рекомендую брать в одинарные кавычки.

Проценты -- относительная единица длины, обозначается %.
Содержимое веб-страницы всегда располагается в т.н. контейнерах. Для содержимого ширина этих контейнеров (их называют "родительскими") всегда принимается за 100%. Таким образом, если мы захотим расположить какой-то свой контейнер внутри родительского контейнера, мы можем указать ему длину в процентах.
К примеру, ширина зелёной полоски будет всегда относиться к ширине красной, как 80% к 20%:

100%
80%
20%


Цвета.

Цвета обозначаются двумя способами: словесным и шестнадцатеричным.
Словесный прост, как три рубля: red, orange, yellow, green... "ключевых" цветов ОЧЕНЬ много, с таблицей можно ознакомиться здесь.
Шестнадцатеричный получается комбинацией красного, зелёного и синего (см. RGB), и пишется через знак диеза: #RRGGBB (всегда шесть цифр!). К примеру, чистый зелёный:
color: #00FF00;
Напоминаю, в шестнадцатеричной записи диапазон значений -- от нуля до F.
"FF" в десятичной записи равно 255.

Шестнадцатеричный код цвета легко получить при помощи графических редакторов:

Азы программирования.

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

В дальнейшем, мы будем повсеместно использовать ключевое слово style, посредством которого будем описывать стиль используемых нами элементов вёрстки.
Выглядеть это будет приблизительно так:
style="width: 400px; border-radius: 5px; font: 1.2em 'Times New Roman', 'Arial'; overflow: hidden; "
Обращаю Ваше пристальное внимание на то, что все свойства стиля идут через точку с запятой, разделены пробелом (он стоит даже в конце строки), и заключены в двойные кавычки.
Названия шрифтов перечисляются через запятую с пробелом и заключены в одинарные кавычки, дабы браузер воспринимал написанное, как единое целое.

Текст.

Красивое и аккуратное оформление предполагает наличие текста, который нужно оформить.
В примерах к статье я буду использовать раздел 1.10.32 трактата Цицерона "О пределах добра и зла" от 45 года н.э. (более известный, как "Lorem ipsum dolor").

В бой!

Перейдём к конкретным примерам.
Итак, у меня есть кусок текста:
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
И я хочу, чтобы словосочетание "ipsum dolor" было в полтора раза больше остальных, отбрасывало красную тень, и под него выделялось 50 пикселей вертикальной развёртки. И чтобы шрифт был Georgia или Arial, если у читателя нету шрифта Georgia.

Nam a justo diam. Fusce laoreet orci ac massa consectetur eu imperdiet nunc posuere. Donec feugiat, dui ac venenatis commodo, arcu augue feugiat ipsum, id ornare nisl nisl quis ligula.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam facilisis ultrices erat sed rutrum. Quisque porta dui non augue egestas sed semper metus lobortis.
Как видим, места под текст гораздо больше, чем высота шрифта.

Мы использовали для выделения словосочетания тэг SPAN, а в описании его стиля указали шрифт (font: ...), его размер и вертикальную высоту (1.5em/50px), названия ('Georgia', 'Arial').
Также мы использовали свойство text-shadow, которое добавляет тексту красную тень радиусом 4px, со сдвигом 2px вправо и 3px вниз (red 2px 3px 4px).

Но нам этого мало!
Теперь я хочу оформить два абзаца так, чтобы шрифт был Times New Roman или ЛЮБОЙ с засечками, чтобы высота строки была 25px и каждый абзац начинался с отступа в 10px.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a justo diam. Fusce laoreet orci ac massa consectetur eu imperdiet nunc posuere. Donec feugiat, dui ac venenatis commodo, arcu augue feugiat ipsum, id ornare nisl nisl quis ligula. Aliquam facilisis ultrices erat sed rutrum. Quisque porta dui non augue egestas sed semper metus lobortis. Integer lectus quam, semper vel placerat tempor, gravida eleifend lorem. Sed adipiscing consequat fermentum. Suspendisse congue ante ut arcu tempor nec egestas turpis iaculis. Duis pretium malesuada tincidunt. Aliquam pharetra euismod nulla sed aliquet.


Donec posuere rhoncus ullamcorper. Sed porttitor arcu id eros adipiscing nec tincidunt odio pellentesque. Donec eleifend metus sed ipsum scelerisque laoreet. Ut elementum tristique nulla, eu malesuada enim iaculis vitae. Phasellus aliquam arcu quis turpis ornare facilisis. Donec et enim metus, vel imperdiet eros. Suspendisse potenti. Pellentesque condimentum aliquam enim, in molestie quam luctus vitae.


Для маркировки абзацев мы использовали блочный тэг P ("paragraph"). Любой блочный тег после себя переводит каретку на новую строку, поэтому в приведенном примере между абзацами ДВА перевода каретки: тот, что дал тег параграфа, и тот, что мы набрали сами.
Свойство text-indent задаёт отступ первой строки в содержимом тега P (10px). Мы также использовали свойство margin, которое задаёт отступы от блока до его окружения. Если его убрать, сверху и снизу у каждого абзаца появится отступ в 15px (так задано в шаблоне по умолчанию).

Любые отступы задаются в последовательности "сверху, справа, снизу, слева", либо все одновременно. Запись
margin: 1px 2px 3px 4px;
даёт отступ 1px сверху, 2px справа, 3px снизу и 4px слева.
Запись
margin: 5px;
даёт отступы 5px отовсюду.

Отступы.

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

В качестве контейнера в подавляющем большинстве случаев используется DIV. Выглядит это приблизительно так:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a justo diam. Fusce laoreet orci ac massa consectetur eu imperdiet nunc posuere. Donec feugiat, dui ac venenatis commodo, arcu augue feugiat ipsum, id ornare nisl nisl quis ligula. Aliquam facilisis ultrices erat sed rutrum. Quisque porta dui non augue egestas sed semper metus lobortis. Integer lectus quam, semper vel placerat tempor, gravida eleifend lorem. Sed adipiscing consequat fermentum. Suspendisse congue ante ut arcu tempor nec egestas turpis iaculis. Duis pretium malesuada tincidunt. Aliquam pharetra euismod nulla sed aliquet.

Что мы имеем?
У нас есть два контейнера, вложенные один в другой.
Внешний контейнер имеет красную границу (border) толщиной в 1px, вида "прямая линия" (solid). Его фон (background-color) жёлтого цвета.
Внутренний контейнер имеет фон белого цвета, цвет шрифта (color) -- чёрного. Его граница зелёная, имеет вид точек (dotted), в толщину 5px.
Внутренний контейнер имеет внешние отступы (margin) по 10px со всех сторон, и внутренние (padding) отступы 15px сверху и снизу и 10px справа и слева соответственно.

Таким образом, у нас на вооружении теперь есть контейнеры.

На примере: я хочу контейнер жёлтого цвета, с зелёной тонкой границей, чёрным шрифтом. Я хочу, чтобы мой контейнер висел посередине статьи и занимал 50% её ширины.
А ещё я хочу, чтобы у него были скруглённые углы и шрифт Arial внутри (или любой без засечек). И чтобы у него были внутренние отступы по 5px.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a justo diam. Fusce laoreet orci ac massa consectetur eu imperdiet nunc posuere. Donec feugiat, dui ac venenatis commodo, arcu augue feugiat ipsum, id ornare nisl nisl quis ligula. Aliquam facilisis ultrices erat sed rutrum. Quisque porta dui non augue egestas sed semper metus lobortis. Integer lectus quam, semper vel placerat tempor, gravida eleifend lorem. Sed adipiscing consequat fermentum. Suspendisse congue ante ut arcu tempor nec egestas turpis iaculis. Duis pretium malesuada tincidunt. Aliquam pharetra euismod nulla sed aliquet.

Мы использовали свойство width для задания ширины и border-radius для скругления границы.
Остальное без комментариев.

Внимание!
Любые характеристики элементов веб-страницы имеют свойство наследоваться от "родителей". Таким образом, если Вы не укажете цвет шрифта в Вашем контейнере, то он будет таким же, как и во всей остальной статье. Будьте бдительны! На тёмном шаблоне сайта шрифты светлые, и наоборот!

Практика.

Рассмотрим несколько практических примеров, а с ними -- ещё несколько полезных свойств контейнеров DIV.
Итак, у нас есть некоторая статья с изображением, и мы хотим её вот так сверстать:

Верстаем новости
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a justo diam. Fusce laoreet orci ac massa consectetur eu imperdiet nunc posuere. Donec feugiat, dui ac venenatis commodo, arcu augue feugiat ipsum, id ornare nisl nisl quis ligula. Aliquam facilisis ultrices erat sed rutrum. Quisque porta dui non augue egestas sed semper metus lobortis. Integer lectus quam, semper vel placerat tempor, gravida eleifend lorem. Sed adipiscing consequat fermentum. Suspendisse congue ante ut arcu tempor nec egestas turpis iaculis. Duis pretium malesuada tincidunt. Aliquam pharetra euismod nulla sed aliquet.

Donec posuere rhoncus ullamcorper. Sed porttitor arcu id eros adipiscing nec tincidunt odio pellentesque. Donec eleifend metus sed ipsum scelerisque laoreet. Ut elementum tristique nulla, eu malesuada enim iaculis vitae. Phasellus aliquam arcu quis turpis ornare facilisis. Donec et enim metus, vel imperdiet eros. Suspendisse potenti. Pellentesque condimentum aliquam enim, in molestie quam luctus vitae. Sed vitae neque dui. Aenean aliquam feugiat nunc, et vestibulum nisi sagittis in. Proin adipiscing ultricies dolor, at tristique justo placerat tincidunt. Etiam scelerisque auctor bibendum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer libero elit, eleifend in pellentesque non, laoreet vel odio. Maecenas neque sem, semper ac tincidunt et, gravida vel dui.

У нас есть довольно много текста, первый абзац оформлен в блок цитаты.
И буквы прилипают к картинке :-( Некрасиво!
Попробуем заключить картинку в контейнер так, чтобы он обтекался справа текстом, но при этом имел отступы.

Верстаем новости
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a justo diam. Fusce laoreet orci ac massa consectetur eu imperdiet nunc posuere. Donec feugiat, dui ac venenatis commodo, arcu augue feugiat ipsum, id ornare nisl nisl quis ligula. Aliquam facilisis ultrices erat sed rutrum. Quisque porta dui non augue egestas sed semper metus lobortis. Integer lectus quam, semper vel placerat tempor, gravida eleifend lorem. Sed adipiscing consequat fermentum. Suspendisse congue ante ut arcu tempor nec egestas turpis iaculis. Duis pretium malesuada tincidunt. Aliquam pharetra euismod nulla sed aliquet.

Donec posuere rhoncus ullamcorper. Sed porttitor arcu id eros adipiscing nec tincidunt odio pellentesque. Donec eleifend metus sed ipsum scelerisque laoreet. Ut elementum tristique nulla, eu malesuada enim iaculis vitae. Phasellus aliquam arcu quis turpis ornare facilisis. Donec et enim metus, vel imperdiet eros. Suspendisse potenti. Pellentesque condimentum aliquam enim, in molestie quam luctus vitae.Sed vitae neque dui. Aenean aliquam feugiat nunc, et vestibulum nisi sagittis in. Proin adipiscing ultricies dolor, at tristique justo placerat tincidunt. Etiam scelerisque auctor bibendum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer libero elit, eleifend in pellentesque non, laoreet vel odio. Maecenas neque sem, semper ac tincidunt et, gravida vel dui.


Мы использовали свойство float, которое заставляет наш блок "плавать" по левому краю (left). Кроме того, мы задали отступы до содержимого (padding) по 8px справа и снизу, заставив окружающий текст слегка подвинуться. В данном случае наш контейнер и окружающий текст наложились друг на друга, поэтому контейнер цитаты остался также прикрепленным к изображению, подвинулся только текст внутри.

Ещё один пример. У нас есть статья, в ней много текста. В этой статье присутствует небольшая фотография и подпись под ней.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a justo diam. Fusce laoreet orci ac massa consectetur eu imperdiet nunc posuere. Donec feugiat, dui ac venenatis commodo, arcu augue feugiat ipsum, id ornare nisl nisl quis ligula. Aliquam facilisis ultrices erat sed rutrum. Quisque porta dui non augue egestas sed semper metus lobortis. Integer lectus quam, semper vel placerat tempor, gravida eleifend lorem. Sed adipiscing consequat fermentum. Suspendisse congue ante ut arcu tempor nec egestas turpis iaculis. Duis pretium malesuada tincidunt. Aliquam pharetra euismod nulla sed aliquet.

Верстаем новостиDonec imperdiet lorem semper mi gravida tristique. Nunc eget leo erat. Nulla dictum nisl sit amet sapien egestas cursus. Nulla quis tortor eu nisl ullamcorper aliquet.
Donec posuere rhoncus ullamcorper. Sed porttitor arcu id eros adipiscing nec tincidunt odio pellentesque. Donec eleifend metus sed ipsum scelerisque laoreet. Ut elementum tristique nulla, eu malesuada enim iaculis vitae. Phasellus aliquam arcu quis turpis ornare facilisis. Donec et enim metus, vel imperdiet eros. Suspendisse potenti. Pellentesque condimentum aliquam enim, in molestie quam luctus vitae.

Sed vitae neque dui. Aenean aliquam feugiat nunc, et vestibulum nisi sagittis in. Proin adipiscing ultricies dolor, at tristique justo placerat tincidunt. Etiam scelerisque auctor bibendum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer libero elit, eleifend in pellentesque non, laoreet vel odio. Maecenas neque sem, semper ac tincidunt et, gravida vel dui.

Pellentesque sed justo ut ligula semper tincidunt sed et augue. Cras vitae aliquet nibh. Nulla facilisi. Mauris blandit viverra leo, eget scelerisque est tincidunt vel. Vivamus vitae libero vitae dui ultrices vulputate. Mauris venenatis mi a massa viverra convallis. Donec pellentesque est mattis ante imperdiet quis condimentum augue dictum. Aenean consectetur posuere felis nec commodo. Duis aliquet aliquam nisi, nec fringilla tellus sollicitudin sed. Phasellus ut elit est, et tincidunt neque. Nam aliquet viverra nibh, eget lacinia justo tincidunt vel. Aliquam sit amet nisi arcu, quis molestie arcu. Etiam augue tortor, aliquet quis scelerisque sit amet, fermentum sit amet dolor. Sed auctor porttitor odio vel hendrerit. Mauris erat lorem, rutrum vitae dapibus at, imperdiet vel enim. Vestibulum nec consequat ante. Etiam quis felis ac est pharetra dignissim et sit amet nunc. Aenean suscipit feugiat tortor, sed tincidunt mi aliquam a. Etiam dictum, neque id feugiat rutrum, lorem dui mollis mauris, eu ullamcorper enim sem placerat sem.


Мы ограничили наш контейнер шириной width в 200px (под стать изображению), и задали выравнивание текста внутри (text-align) по центру.
Остальное без комментариев.

И последний простой пример на сегодня.
У нас есть большая статья, в ней несколько изображений, одно из которых "висит" слева, другое имеет выравнивание по центру:

Верстаем новостиLorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a justo diam. Fusce laoreet orci ac massa consectetur eu imperdiet nunc posuere. Donec feugiat, dui ac venenatis commodo, arcu augue feugiat ipsum, id ornare nisl nisl quis ligula. Aliquam facilisis ultrices erat sed rutrum. Quisque porta dui non augue egestas sed semper metus lobortis. Integer lectus quam, semper vel placerat tempor, gravida eleifend lorem. Sed adipiscing consequat fermentum. Suspendisse congue ante ut arcu tempor nec egestas turpis iaculis. Duis pretium malesuada tincidunt. Aliquam pharetra euismod nulla sed aliquet.

Верстаем новости

Donec posuere rhoncus ullamcorper. Sed porttitor arcu id eros adipiscing nec tincidunt odio pellentesque. Donec eleifend metus sed ipsum scelerisque laoreet. Ut elementum tristique nulla, eu malesuada enim iaculis vitae. Phasellus aliquam arcu quis turpis ornare facilisis. Donec et enim metus, vel imperdiet eros. Suspendisse potenti. Pellentesque condimentum aliquam enim, in molestie quam luctus vitae.


Задача: сделать так, чтобы изображения не "пересекались". Для этого прямо перед второй картинкой мы вставляем тег переноса строки BR, который "обнуляет" все обтекания.
Верстаем новостиLorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a justo diam. Fusce laoreet orci ac massa consectetur eu imperdiet nunc posuere. Donec feugiat, dui ac venenatis commodo, arcu augue feugiat ipsum, id ornare nisl nisl quis ligula. Aliquam facilisis ultrices erat sed rutrum. Quisque porta dui non augue egestas sed semper metus lobortis. Integer lectus quam, semper vel placerat tempor, gravida eleifend lorem. Sed adipiscing consequat fermentum. Suspendisse congue ante ut arcu tempor nec egestas turpis iaculis. Duis pretium malesuada tincidunt. Aliquam pharetra euismod nulla sed aliquet.


Верстаем новости

Donec posuere rhoncus ullamcorper. Sed porttitor arcu id eros adipiscing nec tincidunt odio pellentesque. Donec eleifend metus sed ipsum scelerisque laoreet. Ut elementum tristique nulla, eu malesuada enim iaculis vitae. Phasellus aliquam arcu quis turpis ornare facilisis. Donec et enim metus, vel imperdiet eros. Suspendisse potenti. Pellentesque condimentum aliquam enim, in molestie quam luctus vitae.



На этом всё на сегодня.
По всем вопросам обращаться ко мне (-:
Jeorge Morpheus для Newzz.in.ua



Информация
Посетители, находящиеся в группе Гости, не могут видеть и оставлять комментарии к данной публикации.

Вверх