Тема 5 кадровий web дизайн
Документи змісту (content) призначені заповнення інформацією кожної з областей (frame) і оформляються автономно з повним дотриманням синтаксису HTML.
Як відомо, типова Web сторінка сайту Internet вітрини має структуру подібну до наступної:
У цій структурі очевидно проглядається фреймова конструкція. Наведений нижче приклад інформаційного сайту також може бути реалізований з використанням фреймової організації.
Як результуючий документ у цій роботі потрібно отримати засобами фреймового дизайну сторінку Internet вітрини подібну до відомої за попередньою темою:
Підготовка документа розкладкиВеб-сторінки.
Розкладка документа має п'ятивіконну структуру:
Текстова реалізація установки фреймових вікон виглядатиме так:
Початкові !значення можна вибрати так: n = "35", m = "5", z = "80", c = "25".
У тезі frameset можна (має!) керувати наявністю рамок. Для їх усунення слід встановлювати параметриborder=”0”frameborder=”0”
Для успішної організації та зручності роботи з даними необхідно завести папкуФреймовий дизайн, усередині якої створити дві папки:малюнки_крісел– для зберігання всіх графічних образів, таindex– для зберігання всіх HTML документів.
Використовуючи наведений вище текст як шаблон, зробити початкову розмітку сторінки, замінивши буквені позначення необхідними числовими величинами.Слід мати на увазі, що при розміщенні інформації в окремих фреймах доведеться змінювати ці пропорції!
Зберегти результат як у текстовому, так і у html форматі під ім'ям index у папці з однойменною назвою -index.
Створення та редагування графічних елементів сторінокinternetвітрини.
Для заповнення вікон інтернет-вітрини знадобляться веб-сторінки, що містять відповідну інформацію, або графічну, наприклад банер, або текстову, як елементи меню навігатора.
Всі графічні елементи, необхідні для формування веб-сторінок, знаходяться в папціМалюнки для фреймів, яка розміщена в папці ІРМ на серверному диску. Скопіюйте їх у свою папкумалюнки_кріселдля подальшої обробки.
Принципи обробки зображень в Adobe Photoshop були розглянуті раніше. Найпростіші прийоми отримання та перетворення малюнків із використанням Paint розглянемо нижче.
Для зміни розмірів або повороту зображення слід використовувати відповідний рядок меню інструментаМалюнок.
Для вирізування частини малюнку, копіювання, вставок тощо. слід використовувати інструментвиділенняз лівої палітри.
У цій же палітрі розташовані інструменти для формування рамок, виділення, витирання частини малюнка, заливання тощо.
Для отримання довільного графічного фрагментапоточного екрануза допомогою Paint, слід скопіювати поточний екран у буфер, для чого достатньо натиснути загальновідому клавішуPrtSc. Далі активізувавши Paint, вставити це зображення на його полі для подальшого редагування та збереження.
Формування вмісту графічних сторінок кадрів
Для заповнення віконbannerтаaddressнеобхідно створити відповідні веб-сторінки з викликом необхідної інформації у відповідні фрейми. Доцільно їх зберегтисаме під цими іменами !
Привиклику сторінок слід враховувати їхнє взаємне розташування в межах каталогу. Так, якщо сторінка знаходиться в цій же папці, достатньо вказати тільки її ім'я. У випадку, коли сторінка, що викликається, розташована в "сусідній" папці, слід вказувати фрагмент шляху до неї з поточної точки каталогу. Наприклад, якщо йде з папкиindexвиклик малюнка, який розташований у папцімалюнки_крісел, то шлях до нього буде“../малюнки_крісел/ім'я малюнка“!
Розглянутим вище способом створити ще один файл з посиланням на малюнок address.jpg, зберігши його під його ім'ям:
Викликати та відредагувати файлindex,вставивши як імена кадрів у верхній рядок, створені в п.3.1 та п.3.2 веб-сторінки.
Активізувати файлindexта оцінити результат. Зверніть увагу, що під час підведення курсору до меж кадрів вони можуть бути пересунуті !
Закріпіть межі вікон banner та address, використовуючи опціюnoresizeдля цих кадрів.
Засобами, оголошеними в п.2 п.2 відредагувати графіку так, щоб вона займала відведені їй вікна і не спотворювала загальної картини сайту.
Для заповнення вікнаcontentстворити та зберегти веб-сторінку з ім'ям content, що є таблицею з 2 рядків і 4 стовпців. Осередки таблиці заповнитивідредагованимизображеннями крісел із папки малюнків.
Викликати та відредагувати файлindex,вставивши ім'я кадру content в потрібний рядок документа розкладки.
Активізувати файлindexта оцінити результат.
Відредагувати габарити малюнків, щоб вони не порушували загальну картину сайту.
Збережіть поточний стан усіх файлів.
Створення текстових веб-документів
Для представлення кадруnavigatorорганізуйте рядок з текстом таким чином, щоб за кожною назвою (словом) можна було організувати гіперпосилання.
Результат має виглядати так:
Для представлення кадруcatalogнеобхідно його вміст оформити у вигляді таблиці, для того, щоб за кожним найменуванням (словом) можна було організувати гіперпосилання. Обидва ці кадри призначені саме для цих цілей.
Результат для каталогу має виглядати так:
Для вказівки розмірів клітинок таблиць необхідно використовувати атрибути width (ширини) та height (висоти), для вказівки кольору фону – bgcolor.
Розмір шрифту визначається за допомогою атрибута .
Коди кольорів наведено в таблиці, яка знаходиться в папці ІРМ на сервері.навігатор
Створіть веб-сторінкуnavigator.
Створіть веб-сторінкуcatalog.
Впишіть імена цих файлів як імена кадрів у файлindex.
Перевірити результат, активізувавши файлindex.
Організація гіперпосилань на сайті-вітрини
При створенні гіперпосилань важливим моментом є можливість виклику веб-сторінки в потрібну область екрана (потрібний кадр). Для цього використовуються атрибути, за допомогою яких можна датиім'ябудь-якому кадру!
Така конструкція виглядає так:
Коли іменування кадрів здійснено, виклик в цю область здійснюється за допомогою атрибуту target:
ТутІМ'Я -елемент, який використовується для виклику гіперпосилання. Як елемент виклику може бути будь-який графічний елемент.
Відкрийте у блокноті веб-сторінкуcatalog.
Організуйте гіперпосилання за словомкріслаз викликом по ній в область content веб-сторінки сontent.
Збережіть зміни та перевіртепрацездатність заслання.
Аналогічним чином організуйте виклик на полі сontent розширеної інформації по кріслі aragon, використовуючи як гіперпосилання малюнок цього крісла (aragon.jpg) у таблиці на сторінці content.
Як розширену інформацію з крісла слід взяти малюнок aragon_big, що знаходиться в папцімалюнки_крісел.Очевидно, що фрагмент, що викликається за цим гіперпосиланням, повинен бути оформлений як html-документ.
Перевірте працездатність посилання.
Для коректності навігації слід дотримуватися правила повернення , тобто.завждимає бути можливість повернутися за зворотним гіперпосиланням до попереднього стану!
Реалізуйте це правило, організувавши гіперпосилання на малюнку aragon_big з викликом веб-сторінки сontent в область content .
Перевірте роботу всіх посилань.
Створіть веб-сторінку з текстом (і за необхідності) малюнками, що інформує відвідувача про основні завдання та цілі діяльності компанії.
Видаліть усі кадри з екрана.
Перевірте роботу всіх посилань.
Для закріплення навичок, здобутих під час виконання п.п. 3,4,5 доопрацюйте сайт-вітрину. Організуйте можливість виклику на полі content товарну інформацію про дивани, за аналогією з тим, як це було організовано для крісел.
При оформленні цього сайту використовуйте малюнки товарів з сайтів відповідно до вашого номера у списку:
№1 за списком http://gold-meb.ru,
№2 за списком http://www.homeme.ru,
№3 за списком http://www.mebel-moda.ru,
№4 за списком http://ladya.ru,
№5 за списком http://www.stolplit.ru,
№6 за списком http://www.good-mebel.com,
№7 за списком http://www.britannica.su,
№8 за списком http://www.mebelniyostrov.ru,
№9 за спискомhttp://www.domosti.ru,
№10 за списком http://www.angagement.ru
Малюнки, необхідні для наповнення області соntent, можна отримати, використовуючи технологію п.2. Для одного із зразків диванів організувати виклик розширеної інформації. Малюнки диванів доцільно розмістити в окремій папцімалюнки_диванів.
Виконання цієї частини роботи має призвести до того, що з поля каталогу з'явиться можливість виклику в область сontent інформації принаймні про дві групи товарів даного напрямку (меблів). Аналогічно, використовуючи рядки каталогу, можна організувати виклик інформації про інші товари, а за елементами навігатора здійснити виклик потрібних для відвідувача сайту відомостей.
По завершенні роботи збережіть всі напрацьовані папки на диску.
Калькулятор
Сервіс безкоштовної оцінки вартості роботи
- Заповніть заявку. Фахівці розрахують вартість вашої роботи
- Розрахунок вартості прийде на пошту та по СМС
Номер вашої заявки
Зараз на пошту прийде автоматичний лист-підтвердження з інформацією про заявку.