Створюємо графічну рамку навколо текстового блоку
Продовжуємо роботу, розпочату в уроці:Створюємо рамку для блоку інформації із округленими кутами. Ми розглянемо один із способів створення рамок із округленими кутами навколо блоків з інформацією для сайтів чи блогів.
Звичайно ж рамку навколо тексту можна створити і звичайними засобами HTML або CSS, але погодьтеся, що можливості тут дещо обмежені. Нижче Ви бачите приклад графічної рамки навколо блоку з інформацією, точніше рамки навколо текстового блоку, картинки та посилання. Такий графічний блок ми й робитимемо у цьому уроці.
Урок №__. Створення електронних книг у форматі PDF.
Тривалість уроку:18:24 хв. Формат уроку:Відео.
З цього уроку Ви дізнаєтесь:
Як підготувати матеріал для електронної книги PDF? Що можна вставляти та додавати до документів PDF?
Що таке віртуальний принтер? Що означає «надрукувати PDF-документ»? Чому з'явилися такі незвичайні назви?
Тепер давайте розбиратися, як зробити таку графічну рамку. У минулому уроці:Створюємо рамку для блоку інформації з округленими кутами, ми створили заготовки, графічні файли з яких і складатиметься рамка. Тобто. обрамлення блоку – це графічні файли (картинки). Отже завдання розбивається на дві частини:
Крок 1-й. Підготовка графічних заготовок. Це завдання ми виконали у минулому уроці.
Крок 2-й. Написання коду, що дозволяє виводити єдину цільну рамку.
Крок 1-й. Створюємо графічні заготовки для рамки.
Нагадую, ми вже створили 3 ось таких графічних файлів (картинки):
Перший файлик:(верхній)top.jpg - обрамлятиме верхню частину блоку. Другий файлик:ser.jpg - розтягуватиметься протягом усього довжину блоку, тобто. Довжина блоку може бути абсолютно будь-яка. Третій файлик (нижній)bot.jpg - обрамлятиме нижню частину блоку.
Ширина блоку у нас буде фіксована і її потрібно буде задати ще на початковому етапі під час роботи у Photoshop, у нашому прикладі я взяв ширину умовної:350 px. А Ви задаєте її самостійно, в залежності від того, де буде розміщуватись такий блок на Вашому сайті.
Довжина може бути будь-яка і буде підлаштовуватися під вміст блоку. Не витрачатиму Ваш час, вивчіть як виконується перша частина завданнятут.
Переходимо до виконання другої частини завдання:
Крок 2. Пишемо код, що дозволяє виводити графічну рамку.
Тепер нам потрібно правильно прописати код відображення графічного блоку на веб-сторінці.
Для того, щоб коректно поєднати всі нарізані файли, найзручніше скористатисятаблицею : табличною формою відображення даних. Звичайно, можна все це описати і тегами
Крім того, для розміщення тексту та іншого наповнення блоку використовуєтьсявкладена таблиця шириною300 пікселів.
Весь код виведення графічного блоку Ви бачите уЛістингу 1 :
Лістинг 1.
| "Шлях до файлу/top.jpg" w >> |
Урок №__. Створення електронних книг у форматі PDF. Тривалість уроку:18:24 хв. Формат уроку:Відео. "Шлях до файлу/pdf.jpg" w > З цього уроку Ви дізнаєтесь: Як підготувати матеріал для електронної книги PDF? Що можна вставляти та додавати до документівформату PDF? Що таке віртуальний принтер? Що означає «надрукувати PDF-документ»? Чому з'явилися такі незвичайні назви? |
| "Шлях до файлу/bot.jpg" w >> |
Копіюєте кодЛістінга 1 і підставляєте свої реальні значення замість значень виділених червоним кольором.
Значення виділені червоним кольором, підганяйте під свої необхідні параметри, це у насшляхи до графічних файлів (пропишіть свої реальні шляхи) тарозміри (ширина та висота) картинок блоку (у Вас також будуть свої розміри картинок).
Далі коригувальний код вставляєте в потрібне місце своєї web-сторінки, зберігаєте та оновлюєте файл на сервері. Ось, власне, і все.
Ще поясню один момент. Рядок коду:
Усього Вам доброго.
Читайте також інші наші матеріали.
Поділіться цією інформацією зі своїми друзями!