Побудуйте ваших качок в ряд – Макет сторінки і керування вмістом, HTML, XML, DHTML, Інтернет-технології, статті

Peter de Pradines, пров. Олександр Климов
AKWProject

Одна справа збудувати качок в ряд, і зовсім інша – зробити те ж саме, коли вони відображаються на HTML-сторінці.

Можливо, найбільш часто задаються питання про дизайні веб-сторінок: “Як я можу зробити відступи в тексті? “або” Як я можу зробити колонки? “. Це ті речі, для яких мова створення веб-сторінок, HTML, не був спочатку призначений.

Веб-сторінка – це не газетний лист

Вам не доведеться багато читати про веб-дизайні для того, щоб помітити схожість між веб-сторінкою та сторінкою друкованої. Багато результати, досягнуті в друкованому справі, добре переносяться на веб-дизайн. Наприклад, перевернута піраміда стилю письма і хороша друк. Але є один, який ніколи не переноситься добре і вимагає особливої ​​уваги для правильного застосування – макет сторінки.

Відвідувачі дивляться веб-сайти так, як якщо б вони читали газету або журнал. Вони не читають їх від початку до кінця, як книгу. У газетах давно зрозуміли, що колонки тексту не повинні бути дуже широкими. В кінці кожного рядка очей повинен легко повертатися до початку наступної. Найкраще сприймаються прямі колонки тексту шириною в 6 слів.

В газетах кордону і відступи на протязі довгого часу використовуються для виділення абзаців і заголовків. Текстові блоки і винесення (однорядкові цитати з основного тексту, поміщені збоку від нього) спокушали вас прочитати текст цілком, є широковживаних і ефективними інструментами редактора макета будь-якого друкованого видання.

Веб-майстрам важче

На перший погляд, веб-майстри позбавлені цих корисних інструментів макетування тексту. HTML (мова розмітки гіпертексту) є лише тим, про що говорить його назва, – мовою розмітки. Це простий набір команд, які називаються тегами, які обмежують об’єкти (текст чи малюнки) і говорять браузеру, як ці об’єкти повинні відображатися на екрані комп’ютера.

Він був створений без урахування вимог до макетування друкованих публікацій, і, тому, будь-яка спроба створити точний макет в HTML вимагає різних вимог. Нові версії HTML обіцяють виправити це становище, але відмінність реалізації в браузерах залишиться проблемою.

Веб-майстри добре знають, що гарний макет сторінки – основа створення привабливою і зручною для читання веб-сторінки. Новачки, особливо ті, які зайнялися створенням веб-сторінок після довгої роботи в світі друкованих видань часто бояться відкрити, що їх текст і графіка розташовуються на сторінці по-різному в Залежно від розміру або форми монітора.

Вміст веб-сторінки не має точної позиції, як в газеті. Скоріше, вся сторінка ‘розтікається’ як молоко по тарілці, прагнучи заповнити доступне простір. Монітори для PC – короткі і широкі, для Макінтошів – високі і вузькі. Ви можете собі уявити, що це означає для уважно зробленого макета.

Що ж робити – розробляти одну версію веб-сторінки для PC, а іншу для Макінтошів? Це суперечить основної концепції інтернету, який об’єднує різні системи. Чи залишати управеніе макетом або дозволити вмісту сторінки розташовуватися як завгодно на екрані читача?

Таке бажання є, але для тих, хто готовий трохи потрудитися, є кілька методів вирішення практично всіх проблем макетування веб-сторінки. Додаткова робота приносить результати.

Починаємо

Немає єдиного методу вирішення всіх наших проблем, але використовуючи їх разом, ми можемо впоратися з більшістю ситуацій. Наш ‘головний помічник ‘- використання таблиць. ‘Маленькі помошники ‘, але не менш сильні – прозорий однопіксельний GIF і неотображаемий пробіл. Це невидимі помічники, які таємно працюють на нас.

Спочатку розберемося з HTML-таблицями. Я вважаю, що це не перша ваша зустріч з таблицями. Якщо це не так, то перед подальшим читанням вам буде корисно провести коротке знайомство з їх основами. В інтернеті хороші керівництва можна знайти за адресами www.geocities.com/Wellesley/1001/tutorial/tables.html або www.stars.com/Quadzilla/Tables/index.html.

Ті ж, хто зустрічався з таблицями раніше, знають, що ручне їхнє створення може стати неприємним і важким, особливо, якщо таблиці вкладені друг в одного. Я дуже раджу всім, у кого немає мазохістських схильностей, робити таблиці в WYSIWIG-редакторах, таких як FrontPage, HotMetal Pro або будь-якому іншому з пари дюжин. Якщо ви хочете вибрати кращий, то використовуйте Dreamweaver.

Існує як мінімум один великий спір навколо створення HTML-сторінок – безстрашне меншість, що робить таблиці ‘руками », і інші, використовують складні редактори. Звичайно, у кожного з підходів є свої плюси і мінуси, інакше не було б суперечки.

На мій погляд, треба використовувати обидва методи. Ви ніколи не отримаєте доброго управління, яке іноді потрібно, навіть від самих складних редакторів. Але люди, які вручну створюють багаторівневі вкладені таблиці повинні сильно напружувати голову.

Однак, як би ви їх не створювали, таблиці – фундаментальна складова макета веб-сторінки. Розмір елементів таблиці може бути заданий двома способами – у відсотках від ширини сторінки або фіксований розмір в пікселях. Другий спосіб дає вам чудовий засіб управління макетом веб-сторінки – розташувати елементи в заданій точці сторінки.

Один розмір підходить скрізь

Постійні читачі згадають, що для нормального перегляду на практично всіх дисплеях, ми повинні обмежити ширину нашої сторінки максимум шістьмастами пікселями (зараз вже можна збільшити її до 740 – прим. перекладача). Якщо вам треба освіжити це в пам’яті, прочитайте www.4sitejournal.com/archives/art080300.htm.

Ми можемо легко зробити це, створивши головну таблицю усередині тега body нашої сторінки, використовую наступний код:

<body>
<table width="600"
border="0"><tr><td>&nbsp;</td></tr></table>
</body>

Зверніть увагу на між тегами TD. Це спеціальний код, званий неотображаемим або нерозривним пропуском. Його сенс полягає в приміщенні в клітинку таблиці для того, щоб вона не згорнулася або не зникла. Більш докладно це питання буде розглянуто далі.

Зараз сконцентруємося на тому, що дає нам простий код таблиці. У нас є таблиця, розширюється вниз при заповненні інформацією (у таблиці не вказана висота), але вона обмежена по ширині величиною, яку, як ми знаємо, можуть відобразити всі монітори.

Ми позначили ліву і праву кордону нашої сторінки – встановили простий контейнер для нашої інформації. Якщо ми встановимо властивість border рівним нулю, наш контейнер буде невидимий для глядачів.

Перед тим, як рухатися далі, звернемо увагу на один естетичний питання. Якщо додати до таблиці тег

, то наша інформація шириною 600 пікселів буде розташована по центру моніторів з великою роздільною здатністю.

Насправді, ми можемо розташувати нашу таблицю ліворуч або праворуч на екрані користувача. Це справа особистих переваг, більшість людей воліє стандартне розташування зліва.

Усередині головної сторінки ми можемо помістити інші, в них ще й так далі. Можна контролювати ширину і висоту кожної клітинки. Користуючись цим, ми можемо створити ‘клаптиків ковдру ‘з комірок, кожна з яких буде точно розташована і мати задані розміри. У цих осередках ми розташуємо ті частини нашою інформацією, які побажаємо.

Якщо ширина і висота задані в пікселях, то ми зафіксуємо наші дані в необхідному положенні. Ми можемо досягти навіть більш вражаючих успіхів в макетуванні сторінки, ніж ті, які доступні в зрілої області звичайної друку.

Можна подивитися приклад?

Давайте наведемо приклад, для того, щоб роз’яснити, що може бентежити веб-майстра в початку. Після того, як ви подивіться один або два приклади, ідеї стануть вам повністю зрозумілі. Пам’ятайте, що хоча межа таблиці показана тут для того, щоб можна було побачити осередки, в цьому немає необхідності. Наша таблиця може бути невидимою, що зазвичай і робиться.

Подивіться на сторінку www.4sitejournal.com/tabledemo291100.htm. Ви побачите таблицю шириною в 600 пікселів з синім фоном. Всередині неї знаходяться ще п’ять таблиць, вкладених одна в іншу. Кожна таблиця розбита на осередки різних розмірів і форм.

Метою є демонстрація того, що ви можете створити структуру настільки складну або настільки просту, яку вам треба для фіксованого розташування чого завгодно і де завгодно. Код цієї сторінки можна подивитися, натиснувши праву кнопку миші і вибравши ‘view source “(” У вигляді HTML’) під спливаючому меню.

Переглянути приклад можна з трьох причин:

1. Він наочно демонструє складність коду, необхідного для створення таблиці – надалі для цієї роботи рекомендується використовувати WYSIWIG-редактор.
2. Ви помітите, що осередки заповнені з використанням.
3. Деякі читачі можуть захотіти створювати таблиці вручну, в прикладі показано, як це робиться. Удачи їм – якщо я буду робити цю роботу руками, то вона відверне мене від веб-дизайну на всю життя.

Добре, я сподіваюся, що цей короткий огляд переконав вас в наступному:

  • За допомогою таблиць ви можете створювати таку структуру табіци, яку захочете.
  • Якщо ви заховаєте кордону, то ніхто не побачить цю структуру.
  • Ви можете помістити інформацію туди, куди захочете.
  • Структура сторінки не зміниться на моніторах різного розміру.
  • І, можливо, найбільш важливе; використовуйте WYSIWIG-редактори для створення таблиць!

Найбільші з ‘маленьких помічників ‘

Основними браузерами є, без сумніву, Netscape Navigator і Microsoft Internet Explorer. Згідно відвідинам мого веб-сайту за останні кілька років, з використанням цих браузерів було переглянуто більше 98,75% сторінок. Ми не можемо задовольнити вимогам всіх браузерів, але буде краще, якщо зробити це хоча б для двох основних.

Ми можемо не хотіти поміщати інформацію в кожну комірку таблиці. Багато ‘будівельних блоків “у структурі таблиці можуть залишатися порожніми. На момент написання статті, всі версії Netscape’а схлопиваются порожні клітинки таблиці і не малюють тло в порожніх клітинках. Тому всі осередки повинні щось містити для того, щоб бути правильно відображеними.

Неотображаемий текст

Ми вже доторкнулися до одного методу створення неотображаемого тексту (), який використовувався в нашому прикладі. Зазвичай, додавання простого нерозривного пробілу або навіть розриву рядка (
) в клітинку досить для того, щоб осередок правильно відображалася в Netscape’е. Цей текст не видно, коли таблиця відображається в браузері, але залишають клітинку відкритою.

Однопіксельний GIF

Інший спосіб – помістити прозорий однопіксельний GIF в порожню комірку і встановити у нього атрибути WIDTH і HEIGHT. Якщо встановити тільки один з них, то багато браузери розтягнуть зображення пропорційно (в великий квадрат), що неприйнятно.

Цей метод має свої переваги і, звичайно ж, свої недоліки. Жоден з наших ‘маленьких помічників ‘не ідеальний – інакше вони були б’ великими ‘. Перевага полягає в тому, що GIF не зобов’язаний бути прозорим – він може бути кольоровим. Це дає той же результат, що і завдання кольору фону для комірки. Таким чином, для того, щоб поміняти колір фону в складній таблиці, вам треба змінити тільки один GIF, а не встановлення кольору фону в усіх осередках.

Недолік полягає в тому, що якщо з якихось причин цей GIF не завантажився, або у відвідувача відключено відображення малюнків у браузері, то в кожному осередку з’явиться ікона не завантаженою картинки – це не те, чого ми домагалися.

Використання

Осередки таблиці також можна залишити відкритими при плмощі тега , який явяется власним методом Netscape’а для додавання порожнього місця в веб-сторінки. Використання специфічного HTML-коду для різних браузерів має істотний недолік – ускладнення вашої життя веб-майстра. Його краще уникати, поки ви не станете професіоналом у веб-дизайні.

Тому, як ми могли побачити, якщо ви хочете зробити форматований сторінку, то доведеться трохи попрацювати. однак справа це варте й приносить свої плоди у вигляді добре виглядають сторінок.

Часта помилка в дизайні – приміщення великого тексту в маленький обсяг. Сторінка стає візуально дуже щільною і нерасполагающей до читання. Якщо ж текст розташований добре організованими блоками в окремих осередках таблиці з невидимими кордонами, він може бути чудово розподілений по сторінці.

Читачі можуть засвоювати вміст вашої сторінки поступово, читаючи кожен блок на своєму місці. У них не виникне враження, що просите їх проковтнути футбольний м’яч.

Вільний простір

Графіка в осередках таблиці може бути розміщена точно – а не бродити як загублена вівця навколо тексту, що вийде в разі ‘чистого’ HTML. З використанням одного з наших ‘маленьких помічників ‘порожнє місце на сторінці повністю переходить під наш контроль.

Численні елементи таблиці, що містять ‘маленьких помічників ‘, дозволяють вам створити вільний простір такого розміру, якого ви хочете. Використовуючи осередку разічного розміру (візуально порожні), ви можете отримати практично будь-яку форму – за винятком хіба що кривих. Хоча навіть вони можуть бути наближені при невеликому зусиллі.

По-справжньому вожно те, що якщо ви використовуєте таблицю шириною 600 пікселів ії менше для обмеження сторінки, то жоден з елементів вашого дизайну не зрушиться незалежно від дозволу екрану. Це найкращий спосіб досягти переваг друкованого макета.

Чи має це все сенс?

Будьте впевнені, має. Хоча здається, що роботи багато, і на початку дійсно потрібні деякі зусилля, але ви все одно опиняєтеся в виграші. Всі ваші сторінки будуть вигідно відрізнятися використанням однієї колірної схеми і одного макета, якщо, звичайно, немає вагомих причин зробити їх різними. Це виділить ваш сайт і внесе важливе відчуття єдності дизайну.

Створіть зразок таблиць для вашого стандартного макета. Вирішіть, що де буде розташовуватися: кнопки меню – зліва, текстові посилання – знизу, логотип – зверху в центрі, текст у дві колонки по середині сторінки. Виберіть колір фону і так далі.

Ви можете копіювати цей код в будь-яку нову сторінку. Залишиться тільки наповнити сторінку змістом.

Ура! Ви отримали послідовний дизайн і гнучкий макет сайту. Ми виглядаємо професійніше з кожною хвилиною, і це здорово!

Я це вам обіцяю 🙂


Переклад виконаний на основі права Ексклюзивна використання статті Олександром Клімовим. Передрук в будь-якій формі заборонено.


Peter de Pradines is owner and webmaster of
the HiperNet Group. An honours degree graduate in Computer Science with 30 years hands-on
experience, Peter lectures in Europe and holds winter workshops in the beautiful
Mediterranean island of Mallorca. Specializing in web design and promotion he may be
contacted at: mailto:hipernet@apdo.com or www.protiques.com


Peter de Pradines власник і веб-майстер компанії HiperNet Group. Peter володіючи наукового ступенем і маючи за плечима 30-ти річний досвід, читає лекції в Європі і проводить зимові заняття на прекрасних островах Мальорки. З приводу питань веб-дизайну та розкрутки сайтів можна звертатися: mailto:hipernet@apdo.com або www.protiques.com


Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*