Радио-флеш Радио-флеш от Novprospekt
Обзор шрифтов. - (0)Обзор шрифтов. Случайно наткнулась в сети,очень удобная штука! Решила поделиться! Внизу в ок...
Друзья, прошу молитв за нашу подругу Тамарочку - (11)Друзья, прошу молитв за нашу подругу Тамарочку Здоровье - это главное богатств...
Tutorial by Nara Pamplona " Seduction" - (0)Делаем в ФШ коллаж Seduction ДЕЛАЕМ КОЛЛАЖ В ФШ Делаем в ФШ коллаж Seduction ...
Tutorial by Suizabella "Orange" - (0)Перевод урока для корела "Orange" Перевод урока для корела"Orange" Спасибо автору за прекрасны...
Рамка от СВЕТИК-ЧУЖАЯ |
|
Метки: рамки |
Одной тебе... |
|
Метки: стихи о любви /авт. александр блок/ |
Как летней иногда порою |
|
Метки: стихи о любви /авт. федор тютчев/ |
Рамка от Ната_ль_я |
|
Метки: рамки |
Я век себе по росту подбирал |
|
Метки: стихи /авт. арсений тарковский/ |
В РАЮ |
|
Метки: стихи /авт. марина цветаева/ |
Таблицы. Часть 2-я :) |
Создадим таблицу 4 строки 2 колонки
В первой строке текст размещен слева, в последней строке - справа, а в централной строке - посредине
Первая строка. Текст1 | Первая строка. Текст2 |
Последняя строка. Текст1 | Последняя строка. Текст2 |
Текст1 | Текст2 |
Добавим заголовок к нашей таблице. Для этого используем тег . Для этого тега есть два параметра align - задает выравнивание заголовка и valign - определяет вверху таблицы или внизу будет выводится заголовок.
допустим только внутри тега сразу после открывающего тега.
Вид заголовка в зависимости от align будет отличаться в разных браузерах.
Первая строка. Текст1 | Первая строка. Текст2 |
Последняя строка. Текст1 | Последняя строка. Текст2 |
Текст1 | Текст2 |
Если задать align="bottom" то заголовок будет внизу таблицы
Первая строка. Текст1 | Первая строка. Текст2 |
Последняя строка. Текст1 | Последняя строка. Текст2 |
Текст1 | Текст2 |
Тег предназначен для создания одной ячейки таблицы, которая обозначается как заголовочная.
Текст в такой ячейке отображается браузером обычно жирным шрифтом и выравнивается по центру.
Располагается этот тег только внутри тега
Таблица с заголовками
Заголовок1 | Заголовок2 |
---|---|
Текст1 | Текст2 |
Тег задает ширину и другие атрибуты одной или нескольких колонок таблицы. При наличии этого тега браузер начинает показывать содержимое таблицы, не дожидаясь ее полной загрузки. Тег можно использовать совместно с тегом , который задает группу колонок, обладающих общими параметрами.
Текст1 | Текст2 |
Текст3 | Текст4 |
Объеденим несколько ячеек таблицы. Для этого в теге нужно указать colspan - объеденяет горизонтальные ячейки, rowspan - вертикальные
Объеденим 2 ячейки первой строки в одну ячейку
Текст1 | |
Текст2 | Текст3 |
Объеденим 2 ячейки первого столбца в одну ячейку
Текст1 | Текст2 |
Текст3 |
И последнее. Параметры тега cellpadding - отступ от рамки до содержимого ячейки и cellspacing- расстояние между ячейками.
Текст1 | Текст2 |
Текст3 | Текст3 |
Вот собственно и все :))
Метки: уроки ли.рушнику |
Таблицы |
Построим простейшую таблицу, состоящую из одной строки и двух столбцов.
Текст1 | Текст2 |
Добавим рамку к нашей таблице. Для этого нужно в тег добавить border="1" ( Этот параметр определяет ширину рамки таблицы ), если нужна рамка толщиной 1 пиксель то можно написать border без параметров
Текст1 | Текст2 |
Рамка появилась, но она какая то мрачная :) Попробуем разукрасить рамку, добавив еще один параметр bordercolor который определяет цвет рамки. Сделаем нашу рамку ядовито-красного цвета :).
Вот наша таблица с красной рамкой
Текст1 | Текст2 |
Теперь изменим цвет фона таблицы. Для этого добавим bgcolor
Вот как выглядит наш пример
Текст1 | Текст2 |
Сделаем нашу таблицу с фоновым рисунком
Для этого зальем фоновый рисунок в черновик
Код нашего фонового рисунка
Теперь добавим к нашей таблице параметр background и укажем ссылку на наш фоновый рисунок
Наша таблица теперь выглядит повеселее :)
Текст1 | Текст2 |
Попробуем теперь использовать для фона таблицы рисунок сравнительно больного размера. Например вот такой веселый цветочек
Код рисунка
Код таблицы будет таким
Текст1 | Текст2 |
Фоновый рисунок есть, но он обрезан по размеру таблицы. Что бы это исправить нужно добавить ширину width и высоту height таблицы. Ширину и высоту таблицы сделаем такими же как и ширина и высота фонового рисунка
Вот как будет выглядеть наша таблица
Текст1 | Текст2 |
Наша таблица размещается на странице слева, разместим её посредине страницы добавив параметр align. Допустимы значения этого параметра left - слева, right - справа, center - разместить по центру
Вот как это будет выглядеть
Текст1 | Текст2 |
Текст с ячейках таблицы расположен слева и по центру вертикали. Оставим первую ячейку без изменения, а во второй ячейке таблицы разместим текст в верхнем правом углу. Для этого добавим к ячейке 2 параметра align - выравнивание по горизонтале и valign - выравнивание по вертикале.
Текст1 | Текст2 |
Если расположение текста в ячейках одинаковое то можно добавить тег . Этот тег позволяет задавать вид одной или несколько строк таблицы.
Обратите внимание что значения align и valign теперь прописаны в теге .
Теперь в обеих ячейках таблицы текст располагается вверху и по центру.
valign может принимать значения top - вверху. middle - по центру, bottom - внизу
Текст1 | Текст2 |
Рамка таблицы теперь портит весь вид. Уберем её и окончательно получим такую таблицу
Текст1 | Текст2 |
Пожалуй пока все. В следущий раз расскажу о других возможностях вывода таблиц
Метки: уроки ли.рушнику |
Делаем открытку со стихами |
Сделаем открытку со стихами. Ввиду того что я ленивый и мне лень искать для примера фоны и текст стихов, я позаимствовал все это у inmira с её поста http://www.liveinternet.ru/users/inmira/post99542587/.
- Фон для рамки - Фон для текста и картинки - Картинка.Коды картинок ( видны при редактировании черновика или поста )
Размеры картинок уменьшены что бы они не занимали много места в посте
Сделаем рамку для открытки. Для этого построим таблицу 1х1 - одна строка, один столбец. Для таблицы пропишем background.
В background укажем ссылку на фоновую картинку для рамки
Что бы получилась рамка нужно "лишнее" пространство залить фоном для текста и рисунка.
Что бы это сделать нужно указать background для ячейки тяблицы
Получилось не совсем то что мы хотели. Это потому что мы "забыли" указать отступ от границы таблицы до ячейки таблицы.
Исправим это дописав в тег <table> параметр cellspacing
И все равно ничего не получилось. Все это потому что в дневнике, для таблицы в глобальных стилях указано border-collapse: collape и из-за этого cellspacing игнорируется
Что бы это исправить нужно к <table> добавить стиль style="border-collapse: separate;"
Ура! У нас есть рамка :). Все что нам осталось это вставить в ячейку таблицы рисунок и текст стихов
Весь год, не соврав никому ни на грошь, Мы ждем, как небесную манну, Тот день, когда можно удариться в ложь, Невинно придаться обману! Набрав арсенал завиральный идей, С кощунственным трепетом в теле Мы ловим доверчивых честных людей, Забывших о первоапреле. И мы их находим, смиренных ягнят, Простецки развесивших уши. И стрелы обмана со свистом летят В их светлые, чистые души. Но первоапрельский веселый обман - Сердечная наша потеха. И стрелы не кровь высекают из ран, А добрые искорки смеха. О, как же он весел и как же хорош, Пришедший на смену метелям, Тот праздник, во смех превращающий ложь! Сограждане, с первым апреля! |
Не все так просто :). Во первых текст расположен не справа от рисуна, а под ним. Во вторых текст нечитаемый из-за того что цвет текста черный и размер шрифта маленький.
Что бы текст располагался справа от рисунка добавим в код рисунка align="left" в этом случае рисунок будет располагаться слевой стороны ячейки, а текст будет "обтекать" его справа.
Что бы изменить цвет текста и размер шрифта добавим к <td> стиль style="color: #fffcfc; font-size: 18px;". Цвет текста #fffcfc, размер шрифта 18px.
Весь год, не соврав никому ни на грошь, Мы ждем, как небесную манну, Тот день, когда можно удариться в ложь, Невинно придаться обману! Набрав арсенал завиральный идей, С кощунственным трепетом в теле Мы ловим доверчивых честных людей, Забывших о первоапреле. И мы их находим, смиренных ягнят, Простецки развесивших уши. И стрелы обмана со свистом летят В их светлые, чистые души. Но первоапрельский веселый обман - Сердечная наша потеха. И стрелы не кровь высекают из ран, А добрые искорки смеха. О, как же он весел и как же хорош, Пришедший на смену метелям, Тот праздник, во смех превращающий ложь! Сограждане, с первым апреля! |
Уже лучше :) Но есть недоработка. Текст заползает под рисунок. Что бы этого не было поместим рисунок текст стихов в тег <div>. со стилем style="float: left" для рисунка и style="float: right" для текста.
Я приведу пример сокрашенного кода что бы было понятнее
Весь год, не соврав никому ни на грошь,
Мы ждем, как небесную манну,
Тот день, когда можно удариться в ложь,
Невинно придаться обману!
Набрав арсенал завиральный идей,
С кощунственным трепетом в теле
Мы ловим доверчивых честных людей,
Забывших о первоапреле.
И мы их находим, смиренных ягнят,
Простецки развесивших уши.
И стрелы обмана со свистом летят
В их светлые, чистые души.
Но первоапрельский веселый обман -
Сердечная наша потеха.
И стрелы не кровь высекают из ран,
А добрые искорки смеха.
О, как же он весел и как же хорош,
Пришедший на смену метелям,
Тот праздник, во смех превращающий ложь!
Сограждане, с первым апреля!
|
Получили практически то что хотели. Осталось привести текст стихов в "божеский" вид. Можно установить галочку "Сохранять переводы строк в тексте.", но я лучше уберу это галочку и добавлю еще один тег <pre>. Все что находится внутри этого тега будет выводится со всеми пробелами и переносами строк.
Вот мы и получили то что хотели.
Весь год, не соврав никому ни на грошь, Мы ждем, как небесную манну, Тот день, когда можно удариться в ложь, Невинно придаться обману! Набрав арсенал завиральный идей, С кощунственным трепетом в теле Мы ловим доверчивых честных людей, Забывших о первоапреле. И мы их находим, смиренных ягнят, Простецки развесивших уши. И стрелы обмана со свистом летят В их светлые, чистые души. Но первоапрельский веселый обман - Сердечная наша потеха. И стрелы не кровь высекают из ран, А добрые искорки смеха. О, как же он весел и как же хорош, Пришедший на смену метелям, Тот праздник, во смех превращающий ложь! Сограждане, с первым апреля! |
Метки: уроки ли.рушникам |
Изображения в дневнике |
Разместим изображение в дневнике. Для этого просто прикрепим файл изображения к сообщению
Код солнышка:
Сделаем всплывающую подсказку к рисунку. Для этого допишем в код рисунка title.
Теперь при наведении мышки на рисунок будет появляться подсказка с нашим текстом
Есть еще один параметр рисунка который можно использовать для удобства при редактирования постов с рисунками. Это alt. Alt - Это текст который будет виден вместо картинки, если невозможно её показать.
Изначально в нем прописан размер рисунка, но этот текст можно изменить на любой другой. Например можно подписать рисунок.
width и height это ширины и высота рисунка. Можно показать рисунок другого размера просто указав в коде width и height
Мы получили рисунок уменьшеного размера, но реальный размер рисунка не изменился! Вы можете в этом убедиться если сохраните рисунок у себя на компьютере и посмотрите его
Рисунки можно использовать и в ссылках. Для примера загружу уменьшиную копию солнышка
Код маленького солнышка:
Для того что бы картинка была ссылкой сделаем вот такой код ( код я показал в сокращенном виде для простоты чтения)
Сделаем код что бы видно было маленькое солнышко, а при клике на нем в новом окне выводилось солнышко в полном размере.
Для этого веред кодом маленького солнышка вставим код <a href="сслыка на большое солнце">, а после кода маленького солнышка - </a>
Обратите внимание на то что title прописан в коде ссылки, а не рисунка и на параметр ссылки target="_blank"!
Target Указывает где открывать ссылку. _blank - открыть в новом окне, Если вы не укажите target то ссылка откроется в текущем окне
Метки: уроки ли.рушнику |