Как создать свой сайт бесплатно? Как сделать сайт своими руками? Как заработать в Интернете? Создание сайтов на заказ.

Запрос должен быть не менее 4-х символов.

RSS-лента

Сегодня:        Добавить в Избранное       Написать Автору        Обмен валют        Оплата сервисов

Создаем графическую рамку вокруг текстового блока

Автор: Андрей Краснокутский

Дата: 2012-03-29

Как создать графическую рамку?

Продолжаем работу начатую в уроке: Создаем рамку для блока информации со скругленными углами. Мы рассмотрим один из способов создания рамок со скругленными углами вокруг блоков с информацией для сайтов или блогов.

Конечно же рамку вокруг текста можно создать и обычными средствами 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">Все подробности здесь &gt;&gt;&gt;</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-страницы, сохраняете и обновляете файл на сервере. Вот собственно говоря и и всё.

Еще поясню один момент. Строка кода: <TD background=Путь к файлу/ser.jpg>за счет значения background "растягивает" вертикальную часть (высоту) нашего блока вниз на нужную длинну, здесь просто повторяется файлик ser.jpg нужное количество раз. Именно поэтому нам не важно какой высоты будет наш блок, в любом случае он будет автоматически подгоняться под имеющийся контент и "самостоятельно растянется" на нужную высоту.

Всего Вам доброго.

 

Читайте так же другие наши материалы.

Таблицы. Часть 1. Теория.

Таблицы. Часть 2. Практика.

Как зарегистрироваться в качестве индивидуального предпринимателя (ИП)

JavaScript, создающий эффект перетаскивания изображений в любое место экрана

"Прячем" счетчики с помощью CSS.

Обучающий Видео Курс по созданию сайтов.

 

Просмотров: 8410


Поделитесь этой информацией со своими друзьями!


Комментарии к этой статье (уроку):

Комментарии добавил(а): Александр
Дата: 2012-03-30

Спасибо!

Комментарии добавил(а): Олег
Дата: 2012-03-31

Спасибо, Андрей! Не знаю, как новичкам. Но мне, конечно, всё ясно и понятно. Урок нужный. И, пожалуй, средствами CSS - нельзя создать качественной рамки со скругленными углами. Всё-таки, твой вариант - будет лучше!

Добавить Ваш комментарий:

Введите сумму чисел с картинки:
Введите сумму чисел

GudzonPartner.com

Новости сайта


05.08.2014
Новый раздел! Платежные системы Интернета. Все о платежных системах и сервисах.

09.08.2013
Новинка! Обзор и Анализ реальных способов заработка. Как и Сколько можно заработать в Интернете? Цифры. Факты. Комментарии.

28.05.2013
Обновилась Партнерка сайта! Зарабатывайте вместе с нами! "Новые товары и рекламные материалы"

25.05.2013
Видео Курс! "Как создать свой Информационный Бизнес в Интернете" Зарабатывайте: от 30000 ++ рублей.

Почтовая рассылка! Бесплатные электронные книги из серии: "Секреты создания сайтов"


Почтовая рассылка

Новинка!
Как реально заработать
в Интернете?
"Обзор видов и способов заработка."

Специальный Отчет:

Специальный Отчет: Как и сколько можно реально заработать в Интернете? Рельные цифры, факты и анализ различных способ заработка в Интернете

В подарок всем подписчикам!

SmartResponder.ru
Ваш e-mail: *
Ваше имя: *

Полный список наших почтовых рассылок!

Домены

Сервис мгновенной регистрации Доменов

Google Adsense



Навигация

Уроки HTML

CSS уроки

Статьи

Инструменты

Шаблоны сайтов

Книги

Украшения

Сайт от А до Я

Заработать в Интернете

Обман в Интернете

Охрана труда

МОДУЛЬНЫЕ КАРТИНЫ

PHP УРОКИ

Услуги

Скрипты

Почтовая Рассылка

SEO

jQuery

Специальная оценка условий труда (СОУТ) - АРМ

Платежные системы Интернета

УРОКИ ФОТОШОП

Секретный раздел

Видео Курсы

Видео Курс по созданию собственного Информационного Бизнеса в Интернете
Как заработать деньги в Интернете?
Создай свой ИнфоБизнес


Хотите заработать?
2-х Уровневая
Партнерская программа!

Присоединяйтесь.


Последние заметки

Модульная картина: Роскошь красного бархата

Модульная картина абстракция: Энергия солнца

Модульная картина: Синие розы

Модульная картина: Водопад

Модульная картина: Орхидеи

Новости сайта

RSS Лента Новостей сайта www.LuksWeb.ru

Наши новости в Твиттере

Архив

2016 год:

2015 год:

2014 год:

2013 год:

2012 год:

2011 год:

2010 год:

2009 год:

2008 год:

Сайты друзей

Регистрация доменов

ООО "ПК "ЛюксСтрой"

Деревянные дома от СПК "Ванда"

Наши ссылки

Если Вам понравился
наш сайт, установите
Нашу ссылку, и
Получите подарки!!!

QR код сайта www.LuksWeb.ru

Наши Аттестаты


Проверить аттестат

 

Аттестован системой Z-PAYMENT
Проверено Z-PAYMENT