На рис. 5.2 показано, як буде відображатися сторінка, описана в лістингу 5.2, в вікні браузера Internet Explorer. Сторінка розділена на чотири області лініями чорного кольору, за що відповідає атрибут bordercolor = "# 000000".
Мал. 5.2. Приклад управління кордонами фреймів
Варто відзначити, що змінювати кордон одного з фреймів можна. Якщо ж вказати атрибути, керуючі кордоном фреймів, в елементі FRAME (наприклад, ), То браузер не проігнорує це повідомлення, а кордони кожного фрейма непередбачувано зміняться (рис. 5.3).
Мал. 5.3. Спроба змінити межі окремого фрейма
5.3. смуги прокрутки
• yes - завжди викликає поява смуг прокрутки, незалежно від обсягу інформації;
• no - забороняє появу смуг прокрутки;
• auto - смуги прокрутки відображаються при необхідності (за замовчуванням).
Розглянемо приклад сторінки, в якій використана конструкція, описана вище (рис. 5.4).
Мал. 5.4. Приклад управління смугами прокрутки
5.4. Посилання всередині фреймів
У більшості випадків при переході по посиланню у вікні браузера поточний документ замінюється новим. При використанні фреймів схема завантаження документів відрізняється від стандартної. Головна відмінність - можливість завантажувати документ в обраний фрейм з іншого. Для цього застосовується атрибут target елементу А. Як значення використовується ім'я фрейма, в який буде завантажуватися документ, зазначений атрибутом name.
У лістингу 5.3 приведений приклад HTML-документа, де деяким фреймам присвоєні імена.
Лістинг 5.3. Код головної сторінки
На рис. 5.5 зображений HTML-документ (лістинг 5.3), в четвертий фрейм якого завантажується сторінка, що містить посилання на інший документ: інша сторінка.
Мал. 5.5. Четвертий фрейм містить посилання на інший документ
Якщо користувач клацне кнопкою миші на цим посиланням, то новий документ завантажиться в другому фреймі, на що вказує атрибут target = "frame2» (рис. 5.6).
Мал. 5.6. У другій фрейм завантажився новий документ
Варто також відзначити, що ім'я фрейма має починатися з цифри або латинської літери. Наступні імена використовуються в якості зарезервованих:
• target = "_ blank" - документ завантажиться в новому вікні;
• target = "_ self" - документ завантажиться в поточний фрейм;
• target = "_ parent" - якщо документ з гіперпосиланням знаходиться у вкладеному наборі фреймів, то документ завантажується в батьківське вікно або набір фреймів;
• target = "_ top" - скасовує всі фрейми і завантажує документ в повне вікно браузера.
Використовуючи фрейми, не варто забувати і про особливості гіперпосилань. Якщо атрибут target не вказано, то цільової документ завантажується за замовчуванням в той же фрейм. Якщо вказано неіснуюче ім'я фрейма, то відкривається нове вікно браузера, отримуючи при цьому задане ім'я. Для зовнішніх посилань слід задавати значення атрибута target або _top, або _blank, щоб чужі сайти не відображалися в ваших фреймах, а займали повне вікно.
Не варто зловживати ім'ям «_blank», тому що часто користувачі не помічають, що відкрилося нове вікно. Незакриті вікна накопичуються, і користувач може заплутатися в них.
5.5. Зміна розмірів фреймів
За замовчуванням розміри фреймів можна змінювати за допомогою покажчика миші. Необхідно просто навести покажчик на кордон між фреймами і, затиснувши ліву кнопку миші, перемістити кордон вліво або вправо, вгору або вниз (рис. 5.7).
Мал. 5.7. Зміна розмірів фрейма покажчиком миші
Для того щоб заблокувати можливість зміни користувачем розмірів фреймів, слід скористатися атрибутом noresize елемента FRAME.
Атрибут noresize не вимагає ніяких значень. Для сторінки з двома фреймами цей параметр можна вказати лише в одному місці. Природно, якщо у одного фрейму не можна змінювати розміри, то у довколишнього до нього розміри також не змінюватимуться.
5.6. плаваючі фрейми
Браузери останніх версій дозволяють використовувати плаваючі фрейми, що додаються за допомогою елемента IFRAME. Плаваючий фрейм знаходиться всередині звичайного
документа, що не містить тегів
, і дозволяє додавати на сторінку будь-які інші незалежні документи. В елементі I FRAME можна вказувати ті ж атрибути, що і в елементах, що описують звичайні фрейми. Крім того, можна використовувати такі атрибути: width, height, hspace, vspace, align, значення яких збігаються зі значеннями відповідних атрибутів елемента IMG..
5.7. Управління простором усередині фрейму
За замовчуванням браузер відображає фрейми з смугою чистого простору (полями) між вмістом і кордоном фрейму, що дорівнює 10 пікселів. Керувати цим простором фрейма можна за допомогою атрибутів marginheight і marginwidth. Атрибут marginwidth визначає висоту вільного простору зліва і праворуч від вмісту фрейма, а marginheight - зверху і знизу відповідно. Ставлячи величини полів, треба використовувати обидва атрибути, так як браузер може автоматично скоротити розміри тих полів, які ви не вказали, до найменшого значення. Значення цих атрибутів завжди повинні вказуватися в абсолютних значеннях (пікселах), а мінімальне значення дорівнює одному пікселю.
Розглянемо приклад HTML-документа, який містить всього два фрейми (лістинг 5.4). Змінимо поля першого фрейму, а поля другого залишимо за замовчуванням. Щоб різниця була помітна неозброєним поглядом, в кожен фрейм завантажимо зображення.
Лістинг 5.4. Зміна полів фрейму
HTML-сторінка, описана вище, зображена на рис. 5.9. Відповідно до кодом сторінки поля першого фрейму значно відрізняються від полів другого, які ми залишили за замовчуванням.
Мал. 5.9. Приклад управління полями фрейму
Варто також відзначити, що значення полів необхідно вказувати для кожного фрейму окремо. Якщо використовувати запис frameset marginheight = 45 marginwidth = 1>, то браузер просто проігнорує значення атрибутів, а не визначить їх для всіх фреймів.
5.8. Переваги та недоліки фреймів
Оскільки навколо фреймів існує багато розмов про їх необхідність, розглянемо їх достоїнства і недоліки, щоб можна було самостійно вирішити, чи варто використовувати їх на своєму сайті.
Переваги фреймів наступні.
• Простота - за допомогою фреймів HTML-сторінка розмежовується на дві області, які містять навігацію по сайту і його контент. Механізм фреймів дозволяє відкривати документ в одному фреймі за посиланням, натиснутою в абсолютно іншому фреймі. Такий поділ HTML-сторінки на складові інтуїтивно зрозуміло і логічно обумовлено.
• Швидкість - для верстки без фреймів характерне розміщення на одній сторінці і навігації, і змісту. Це збільшує обсяг кожної сторінки і в сумі може суттєво вплинути на обсяг завантажується з сайту інформації. Оскільки фрейми використовують розділення інформації на частини, сторінки з ними будуть завантажуватися швидше.
• Розміщення - фрейми надають унікальну можливість - розміщення інформації точно в потрібному місці вікна браузера. Так, можна помістити фрейм внизу браузера, і, незалежно від прокручування вмісту, ця область не змінить свого положення.
• Зміна розмірів областей - можна змінювати розміри фреймів «на льоту», чого не дозволяє зробити традиційна верстка HTML.
Недоліки фреймів такі.
• Погана індексація пошуковими системами - пошукові системи погано працюють з фреймової структурою, оскільки на сторінках, які містять контент, немає посилань на інші документи. Якщо ви хочете отримувати відвідувачів з пошукових систем, забудьте про фрейми.
• Несумісність з різними браузерами - параметри фреймів мають властивість абсолютно по-різному відображатися в різних браузерах. Причому протиріччя між ними настільки явне, що одні й ті ж параметри інтерпретуються браузерами абсолютно по-своєму.
У цьому розділі ви познайомилися з фреймами, які є одними з основних об'єктів HTML. Ви навчилися створювати їх і управляти окремими їх елементами. Крім того, ви дізналися, в яких цілях ефективно використовувати фрейми і які вони мають переваги і недоліки в своєму використанні.
Однак в середовищі веб-майстрів використання фреймів традиційно вважається поганим тоном. На те є багато серйозних підстав, про які говорилося вище. Хоча в деяких випадках використання фреймів дає такі переваги, що відмовлятися від них просто нерозумно. У фреймів поряд з недоліками є і гідності, які не дозволяють відкинути цю технологію як безперспективну. Використовувати або не використовувати фрейми на сайті - вирішувати саме вам.
глава 6
конструювання форм
6.1. елемент FORM
6.2. Створення полів форми
Що головне в Інтернеті? Його інтерактивність. Можна спілкуватися з відвідувачами сайту і отримувати від них відгуки про роботу - така взаємодія завжди корисно і цікаво. Творці сайту дізнаються, наскільки він цікавий відвідувачам, і можуть змінити його на краще, а відвідувачі отримують можливість брати участь в житті сайту, спілкуватися один з одним і з його творцями.
Головне при створенні форм - стежити за тим, щоб запропоновані вами поля були зручні для відвідувачів і прийнятні для відповідей на ваші питання.
Технічно форми передають дані від користувача віддаленого сервера. Це дозволяє створювати системи реєстрації користувачів, форуми, гостьові книги. Для отримання і обробки даних форм використовуються мови веб-програмування (PHP, Perl), але ми не торкаємося їх в цій книзі. Хоча і доведеться розглянути моменти, що мають відношення до програмування, сконцентруємося на тих особливостях і можливостях форм, які стануть в нагоді дизайнеру, щоб грамотно і зручно розставляти їх на сторінці.
Представлений фрагмент твору розміщений за погодженням з розповсюджувачем легального контента ТОВ "ЛітРес" (не більше 20% початкового тексту). Якщо ви вважаєте, що розміщення матеріалу порушує чиї-небудь права, то дайте нам знати.
Читаєш книги? Заробляй на цьому!
Пишіть адміністратору групи - Сергію Макарову - написати