Textpattern більше, ніж просто блог
Інструменти, які нам знадобляться
Adobe Dreamweaver будь-якої не дуже старої (скажімо, шостої або нижче) і не обов'язково найновішої версії (CS3, якою я і користуюся). Можна брати і менш «наворочений» NVU або інші, безкоштовні інструменти.
Adobe Photoshop), GIMP (для Linux), Paint.NET і все що завгодно, будь-яких версій, але Photoshop все ж краще, оскільки найбільше «заточений» для роботи з Web.
«Платний» не синонім слову «професійний», але користувачі зі стажем зауважують, що працювати в платній програмі (в trial-режимі) часто куди зручніше, ніж у freeware-. Втім, звикнути можна до всього, а стосовно Linux заперечень взагалі немає. GIMP, зі знижкою на безкоштовність, - повноцінна альтернатива Photoshop, і сумніватися в цьому, дивлячись на приклади виконаних у ньому робіт, не доводиться.
Textpattern: Оформлення
У попередньому номері ми розібрали лише розділ налаштувань, і той мигцем. Зачіпати решту налаштувань особливої потреби поки немає, оскільки вони ніяк не впливають на відображення стартової сторінки сайту, та ще й у тестовому режимі… Найбільше нас зараз цікавить розділ «Оформлення», в ньому ми «застрягнемо» надовго. Почнемо з першої вкладки.
Розділ Сторінки: структура секції. Загалом, це проста веб-сторінка без оформлення, «скелет», який згодом облагороджується за рахунок стильової оболонки (CSS + графіка). Більшість коду може бути скорочено до мінімуму за рахунок тегів TXP і форм (див. наступний розділ). В результаті ж, після парсингу сторінки TXP сервер видає браузеру звичайний HTML.
Родзинка в тому, що в наших шаблонах код буде дуже компактним завдяки формам, в яких буде неодноразово вживанийфрагмент коду. Наприклад можна взяти будь-яку форму TXP , наприклад, «article_heading».
Мова тегів TXP також має XML'ешну структуру, що робить його легкочитаним і легкоредагованим. На сайті www.textbook.com ви можете завантажити мануал з цієї мови, ось тільки навряд чи вам захочеться сидіти та заучувати ці теги. Цей довідник краще використовувати хіба що як «шпору». Важко собі уявити людину, яка вивчила цю мову від і до ... Втім, це я себе до таких не відношу:)
Головну сторінку дизайн. Нам ескіз не потрібен
Ми не робитимемо макет сторінки. Навіщо ускладнювати завдання перенесенням дизайну? Будемо верстати одразу :). Якщо ми працюємо з дизайном, що складається з кількох колонок (multi-column layout), наш код може і повинен складатися з блоків div. Кожен div – це область сторінки, що має власний ID і власне ім'я.
Згодом, при створенні файлу CSS, кожному div'у ми призначаємо свій стиль і розміри. Так, ще раз нагадую, що сайт ми верстаємо у зв'язці XHTML + CSS. Зупинимося докладніше цих поняттях.
XHTML (EXtensible HyperText Markup Language) — розширена мова розмітки гіпертексту, що має більш чітку структуру коду, ніж HTML. У цьому він схожий на XML, на якому, власне, і базується. Іншими словами, XHTML - це HTML, записаний відповідно до синтаксичними правилами XML. На мій погляд, така структуризація коду робить його наочнішою, тому помилки наочні і знаходяться швидко. У цьому ви переконаєтесь на практиці самі.
DTD (The Document Type Definition) – вказує тип документа, опис розміщених у ньому атрибутів, символів та елементів. Цей рядок надто важливий, щоб його пропустити. Кожен стандарт має свої правила, хоча ранні версії HTML і пізні XHTML багато в чому схожі. Якщо не вказувати DTD,велика можливість того, що браузер неправильно сприйме версію документа і видасть неправильно сприйнятий код. В принципі, валідація (перевірка правильності коду) – річ не обов'язкова, але дуже бажана, і коли помилки в коді все ж таки є, краще їх виправити і тим самим уникнути конфліктів з «правильними» браузерами.
CSS – оформлення сайту, точніше, елементів, що містяться у XHTML-документі та на сторінці. Якщо у випадку з HTML, у табличній верстці ми всі властивості вказували в самій таблиці, то у випадку з DIV ми лише вказуємо черговість і, якщо один елемент знаходиться в іншому, їхнє взаєморозташування. Оформлення – це не лише шрифти та колір фону, але ще й розмір DIV-елементів, форм, кнопок. Тема CSS буде розкрита пізніше.
Сторінка default
Спочатку ми зверстаємо першу – головну – сторінку: це будуть посилання на форми та деякі теги (яких небагато). Отже, заходимо до розділу Оформлення – Сторінки. Відкриваємо сторінку default і заповнюємо її як описано далі. Коментарі позначені як , переписувати їх необов'язково :).
Чи має значення послідовність тегів? Так. Справа в тому, що всі ці теги обробляються і виводять HTML-код, для якого характерний суворий порядок коду. Сторінка парситься зверху донизу. Також слід пам'ятати, що синтаксис XHTML чутливий до регістру. Потрібно сказати, браузери нечутливі до багатьох «нестрогих» помилок коду XHTML, але все одно верстати потрібно правильно, чи не так? Немає гарантії, що конкретний браузер коректно проігнорує помилку. А браузер ігнорує помилки лише тому, що його розробники не бачать сенсу робити "прискіпливий" до коду браузер.
Порада. На кожній сторінці, будь вона головна або якась інша, є постійні теги. У нас є варіант: вставити або впоточну сторінку, чи одну форму. Питання у лаконічності. Якщо будь-яка форма буде повторюватися на іншій сторінці, краще помістити в неї і теги, що повторюються, щоб зайвий раз не «захаращувати» код.
Форма head
Найзручніше повністю оформити за допомогою форм першу сторінку, а потім на її основі змінювати решту — так буде наочніше. Почнемо з форми head. Для створення нової форми натисніть посилання «Створити нову…» і знизу введіть назву та тип – за бажанням.
Для початку ми прописуємо стандарт документа, DOCTYPE, під який ми пишемо код, робимо HEAD, заголовок, імпортортуємо стильовий файл (його виносимо назовні, для зручності редагування), вказуємо шлях до іконки сайту, робимо посилання на стрічки, закриваємо HEAD. Div-класи wrapper_bg та wrapper потрібні для розтягування сайту, його фіксації. Це запобігатиме проблемі некоректного відображення в «правильних» браузерах на кшталт MS Internet Explorer 7. Header – це область логотипу.
Форма content
Будь-яка вступна інформація
За виведення статей відповідає тег, де 5 - це кількість статей на сторінку. - Тег, який обробляється за умови відкриття розділу "tag". Він реалізує виведення «модної» хмари тегів.
Форма sidebar
Хмара тегів
Бічна панель у мене відображається у кожному розділі сайту. Мій сайдбар міститиме ще й вставки javascript, необхідні для роботи фреймворку Mootols, який у свою чергу забезпечує роботу плагіна cbs_live_search. AJAX , чи бачите! До речі, до фреймворків та Аяксу ми ще повернемось обов'язково, але вже ближче до завершення роботи над сайтом :).
Форма top