Как создать графическую рамку?
Продолжаем работу начатую в уроке: Создаем рамку для блока информации со скругленными углами. Мы рассмотрим один из способов создания рамок со скругленными углами вокруг блоков с информацией для сайтов или блогов.
Конечно же рамку вокруг текста можно создать и обычными средствами HTML или CSS, но согласитесь что возможности здесь несколько ограничены. Ниже Вы видите пример графической рамки вокруг блока с информацией, точнее рамки вокруг: текстового блока, картинки и ссылки. Такой графический блок мы и будем делать в этом уроке.
Урок № __. Создание электронных книг в формате PDF.
Продолжительность урока: 18:24 мин. Формат урока: Видео.
Из этого урока Вы узнаете:
Как подготовить материал для электронной книги формата PDF? Что можно вставлять и добавлять в документы формата PDF?
Что такое виртуальный принтер? Что значит «напечатать PDF документ»? Почему появились такие необычные названия?
Как видите в такой блок можно добавлять не только текст, но и картинки и ссылки и все что угодно. Контент (содержание) блока взято условно, просто для примера. Размеры блока также могут быть абсолютно любые и соответственно подобный блок можно использовать в любом месте сайта и для любых целей.
Теперь давайте разбираться как сделать такую графическую рамку. В прошлом уроке: Создаем рамку для блока информации со скругленными углами, мы создали заготовки, графические файлы из которых и будет состоять рамка. Т.е. обрамление блока - это графические файлы (картинки). Следовательно задача разбивается на две части:
Шаг 1-й. Подготовка графических заготовок. Эту задачу мы выполнили в прошлом уроке.
Шаг 2-й. Написание кода, позволяющего выводить единую цельную рамку.
Шаг 1-й. Создаем графические заготовки для рамки.
Напоминаю, мы уже создали 3 вот таких графических файлика (картинки):
Первый файлик: (верхний) top.jpg - будет обрамлять верхнюю часть блока. Второй файлик: ser.jpg - будет растягиваться на всю длину блока, т.е. длина блока может быть абсолютно любая. Третий файлик (нижний) bot.jpg - будет обрамлять нижнюю часть блока.
Ширина блока у нас будет фиксированная и ее нужно будет задать еще на первоначальном этапе при работе в Photoshop, в нашем примере я взял ширину условной: 350 px. А Вы задаете ее самостоятельно, в зависомости от того, где будет располагаться такой блок на Вашем сайте.
Длина может быть абсолютно любая и будет подстраиваться под содержимое блока. Не буду тратить Ваше время, изучите как выполняется первая часть задачи здесь.
Переходим к выполнению второй части задачи:
Шаг 2. Пишем код позволяющего выводить графическую рамку.
Теперь нам нужно правильно прописать код отображения графического блока на web-странице.
Для того, чтобы корректно совместить все нарезанные файлики, удобнее всего воспользоваться таблицей: табличной формой отображения данных. Конечно можно все это описать и тегами <div> </div>, но в этом случае нужно будет прибегнуть к помощи CSS. К тому же в таблице гораздо легче жестко прописать положение каждой из частей нашего блока (каждой картинки). Общая ширина таблицы будет равна 350 пикселей, т.е. ширине созданных картинок.
Кроме того, для размещения текста и другого наполнения блока используется вложенная таблица шириной 300 пикселей.
Весь код вывода графического блока Вы видите в Листинге 1:
Листинг 1.
<!--Начало текстового блока--> <DIV align=center> <TABLE border=0 cellSpacing=0 cellPadding=0> <TBODY> <TR> <TD><img border=0 src= "Путь к файлу/top.jpg" width=350 height=25 ></TD> </TR> <TR> <TD background= Путь к файлу/ser.jpg > <DIV align=center> <TABLE border=0 cellSpacing=0 cellPadding=0 width=300 > <TBODY> <TR> <TD><div align="justify"> <p><em><strong>Урок № __. Создание электронных книг в формате PDF. </strong></em></p> <p>Продолжительность урока: <strong>18:24 мин.</strong><br> Формат урока: <strong>Видео.</strong></p> <p align="center"><img src= "Путь к файлу/pdf.jpg" width="214" height="191" ></p> <p><strong>Из этого урока Вы узнаете:</strong></p> <p><strong>Как подготовить материал для электронной книги формата PDF? Что можно вставлять и добавлять в документы формата PDF?</strong></p> <p>Что такое виртуальный принтер? Что значит «напечатать PDF документ»? Почему появились такие необычные названия?</p> <p><strong><a href="http://www.luksweb.ru/view_post.php?id=77" target="_blank">Все подробности здесь >>></a></strong></p> </div> </TD> </TR> </TBODY> </TABLE> </DIV> </TD> </TR> <TR> <TD><IMG border=0 src= "Путь к файлу/bot.jpg" width=350 height=25 > </TD> </TR> </TBODY> </TABLE> </DIV> <!--Конец текстового блока-->
Копируете код Листинга 1 и подставляете свои реальные значения вместо значений выделенных красным цветом.
Значения выделенные красным цветом, подгоните под свои требуемые параметры, это у нас пути до графических файлов (пропишите свои реальные пути) и размеры (ширина и высота) картинок блока (у Вас также будут свои размеры картинок).
Конечно же добавьте свое содержание блока (контент).
Далее откорректировнный код вставляете в нужное место своей web-страницы, сохраняете и обновляете файл на сервере. Вот собственно говоря и и всё.