Web розробки по моєму

Багато разів вестав сайти “з нуля” і кожного разу проходив однаковими етапами формування макету сторінки та стандартних стилів. В Інтернет можна знайти багато навчатьних статей про те як вестати (X)HTML+CSS сторінки, однак мені хотілося б зробити теоретичне узагальнення та описати базові принципи верстки (X)HTML сторінок в контексті цілого сайту.

Розпочавши писати статтю зістикнувся з проблемою відсутності української термінології по даній темі. Знайшов тільки одну і то слабенько перекладену статтю про верстку ВЕБ-сторінок. Прийшлося видумувати терміни самотужки, тому в цьому плані в мене суцільний суб’єктивізм.

Ще як приклад приводитиму інтерфейс сайту “Галицький фотоклуб” над яким я працював саме в такому контексті.

Багаторівневість структури сторінки

При написанні XHTML/CSS сторінок, всі елементи сторінки можна розбити на кілька умовних рівнів:

1. макет (layout)

2. наповнення (content)

3. елементи керування (controls)

Приведений список впорядкований за рівнем вкладеності елементів на сторінці. Коротко поясню поняття і терміни які я буду вживати.

Макет – це сукупність тегів (X)HTML коду що відповідають за позиціонування блоків інформації.

На більшості сторінок  є верхній та нижній колонтитули, бокові панелі, головний інформаційний блок. Сукупність всіх цих елементів формує макет сторінки.

Наповнення – це вміст інформаційних блоків розміщених на cторінці.

Сюди входять заголовки, абзаци тексту, зображення, вбудовані об’єкти (Flash, Java Applet, ActiveX) та елементи керування на яких думаю варто зупинитися більш детільніше.

Елементи керування  – це елементи сторінки з якими користувач може активно взаємодіяти.

Можна виділити багато груп елементів керування:

1. елементи керування форм (поля введення тексту, блоки вибору, кнопки, перемикачі, і т. д.)

2. зовнішні та внутрішні текстові посилання

3. елементи керування списками даних (посторінкова нумерація т. зв. “горталки”, сортування, фільтри)

4. меню, навігаційні ланцюги та інші елементи навігації

Робота над макетом

Макет сторніки можна робити фіксованої ширини або гнучкий.

Фіксований макет – задає фіксовану ширину області на якій буде розмішуватися інформація.

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

Гнучкий макет – макет сторінки з змінною шириною, який автоматично пристосувується до ширини зовнішнього блоку або вікна ВЕБ-оглядача.

Гнучкий (або гумовий) дозволяє краще використовувати площу сторінки рівномірно розподіливши наповнення по всій ширині вікна.

Кожен з двох підходів має право на життя і приблизно в однаковій мірі використовувався при розробці сайтів. Однак останнім часом кількість гнучких макетів значно перевищує частку фіксованих в зв’язку з новими популярними дизайнерськими віяннями на хвилі WEB 2.0 .

Фіксований та гнучкий макети не виключають одне одного а скоріше доповнюють, причому я розглядаю гнучкий макет як більш досконаліше рішення.

Зазвичай роблю гнучкий макет про всяк випадок, бо при потребі дуже легко можна задати йому фіксовану ширину

Фіксований макет має свої переваги:

• - менші затрати часу (найвагоміший аргумент на користь цього рішення)
• - простіший в плані навиків (X)HTML+CSS верстки
• - легше добитися позиціювання всіх елементі саме так як треба

Наприклад у випадку http://foto.te.ua фіксовану ширину було передбачено ще на етапі графічного дизайну. Можна було б зробити гнучкий макет і задати йому ширину але щоб зекономити час зробив просто фіксований макет.

Продовження в наступній статті…

This entry was posted on Пт, 12 Вер 2008 at 2:12 pm and is filed under Інші.