Писане на PHP стилови таблици
Ето. Имаме работещ сайт. Сега можете да се върнете няколко урока назад и да продължите да работите върху сайта в реда, в който трябваше да го направите. Ако си спомняте малко форсирах визуализацията за да не умрете от кеф.
Сега ще се върнем малко назад и ще преминем през още една подготвителна стъпка - създаване на стилов лист (CSS).
Няма да навлизаме дълбоко в CSS, просто ще изградим ядрото на стиловия лист, за да можем да го използваме правилно.
Какво е CSS? Това е набор от правила за показване на браузъра, които са зададени за всеки стандартен html обект: шрифт, слой, таблица или елемент на формуляр и т.н.
Това би било моята воля - бих забранил използването на браузъри, които не знаят как да показват правилно CSS правилата. CSS има много възможности в сравнение със стандартните възможности за форматиране на езика html.
Няма да говоря за синтаксиса и правилата за създаване на CSS, вече има много написано за това: всяка търсачка ще ви даде много статии и уроци за CSS. Днес ще се съсредоточим върху нещо друго, върху планирането.
Когато създаваме текстов дизайн, целият ни арсенал от визуални инструменти е: размери, цветове и отстъпи. И тук CSS няма равен. За да можем да променим изцяло или частично дизайна, трябва правилно да поставим използването на различни CSS класове в html кода. Освен това трябва да планираме и опишем тези класове.
Да видим как се прави.
Нека се опитаме да изброим всички основни елементи, които се открояват на една html страница.
На първо място, това са ЗАГЛАВКИ. Заглавията могат да бъдат основни (цяла страница), могат да бъдат заглавия, раздели, менюта, таблици и т.н.
След това сме избралиизбран текст. Тойможе би ние също се открояваме в различни ситуации и по различни начини.
А масите? Таблиците също могат да имат различни цветове и размери на клетки, колони, рамки и подложки. Мълча за елементите на формата (формата).
Какво да правя? Изглежда, че не може да се вземе предвид всичко, че е по-лесно да се опише един или друг елемент от кода на място.
Теорията на CSS казва, че всеки елемент наследява своите свойства от своя родител, като променя само това, което е изрично променено. Тези. CSS е също толкова OOP, колкото нашия PHP код. Така че нека го използваме според нуждите си.
Предлагам първото ниво на класовете да бъде разделено на:
1. Основен текст 2. Таблици 3. Форми
И за всеки опишете свойствата на текста, фона и други неща, които искаме.
От своя страна текстът може да бъде разделен на:
1. Заглавие (заглавие) 2. Основен (нормален) 3. Спешно 4. Ярко (грешка) 5. Малък (малък) 6. Много малък (мъничък)
Ако тези шест не са ни достатъчни, ще добавим по-късно.
Именно от тези два списъка ще съставим нашия CSS.
Предлагам да създадете основен набор от имена и всеки от вас може сам да си играе с имотите, като избира най-подходящите за себе си.
Ето какво предлагам, за да започнете.
Ето какво измислих.
-
Това е _много_ далеч от добър и правилен CSS, но засега ще имаме достатъчно. Освен това не обичам да изучавам възможностите на CSS, въпреки че съм сигурен, че възможностите му са наистина безкрайни.
За тези, които не знаят разликата междуptиpx, ще ви кажа, че pt танцува от инч или друга реална мярка за дължина, а px от точка, видима на екрана. Следователно 10pt на всички монитори ще има еднакъв физически размер, а 10px ще преминат от невидим текст при огромни разделителни способности до масивни букви при ниски разделителни способности.
Нека сега преработим една от нашите страници като пример. Например /admin/cat/add.php
Ето как изглежда тя сега:
ОСНОВНО МЕНЮPATH_INC."/menu_main.inc");?>
PATH_INC."/navigator.inc"); включване($my->PATH_INC."/adv_top.inc"); включване ($my->PATH_INC."/bottom.inc"); $my->sql_close(); ?>
http://php.kurepin.ru/step/146/admin/cat/add.php - беше (въпреки че беше много по-лошо, защото дори тук, чрез заглавката, взехме контрол върху шрифта и размера на шрифта).
И за това просто трябваше да добавим няколко към някои от таговете на нашата страница.
Отсега нататък ще се опитаме да присвоим клас на всеки видим елемент. Това ще ни позволи да променим външния вид на сайта във всяка посока без много проблеми: поне по размер, поне по шрифтове, поне по цветове.
И още една страхотна възможност отплава право в ръцете ни. Познайте!
Факт е, че сега не ни струва нищо да направим индивидуален дизайн за клиента. Ако този клиент има лошо зрение или LCD монитор, който излъчва отровно стандартни цветове или някакво друго отклонение от стандарта - какво ни пречи да му позволим да избере различен комплект дисплей на сайта или да направи корекции на съществуващия?
Може би ще направим това някой ден. А за нетърпеливите ще обясня накратко как се прави:
1. Свързваме CSS директно към текста на всяка страница, за което замествамеtop.incвъв файла
И във файла style.inc заместваме променливите елементи (цветове, размери ии т.н.) са обикновени променливи, които могат да бъдат повлияни както пожелаем.
Потребителят ще избере вида на дизайна или неговия стандартен размер, а ние ще запомним това в неговите собствени бисквитки или в нашата база данни. Клиентът винаги може да се върне на нашия сайт, след като е получил дизайна, с който е свикнал.