Ця запис написана мною в 2011 році. В ті часи дерева були високими, а долар коштував менше 40 рублів. З тих пір пройшло багато часу і багато чого змінилося. Враховуйте це, читаючи.

Ось я і дістався до написання другої і найголовнішої частини інструкції по створенню шаблону на uCoz. Сподіваюся, ви вже все прочитали першу частину .

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

Як бачите, макет двох стовпчик, фіксованої ширини.

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

Не забувайте оптимізувати ваші зображення при збереженні. Для цього зберігайте їх у фотошопі через Файл -> Зберегти для Web, далі вибираєте один з форматів (jpg, png, gif), що вимагає менше пам'яті при збереженні, але в якому якість зображення не псується (вага майбутнього файлу можна подивитися знизу).

Окрема тема - нарізка блоків, тому що блоки бувають різні. Є кілька способів верстки:

• Шапка блоку і основна частина блоку окремої картинкою. Тоді основна частина робиться пікселів 600 в висоту, і, при кодуванні блоку, контент блоку розташовується внизу картинки, а верх обрізається. Такий спосіб я і буду використовувати при верстці в цьому уроці, тому що він найбільш незрозумілий при усному поясненні.
• Блок ріжеться на 3 частини - верх, центр і низ. Тоді центр виявляється приблизно 20 пікселів у висоту і повторюється по вертикалі, а зверху і знизу до нього приєднуються інші 2 частини.
• і ще купа варіантів.

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

Називаємо ми наші картинки header.jpg

footer.png

blockhead.png

blockcontent.png (Зверніть увагу на blockcontent, його висота = 600 px)

Завантажуємо картинки на сайт в папку img за допомогою файлового менеджера або FTP (інструкція)

Відкриваємо ваш улюблений html редактор (я віддаю перевагу Notepad ++, також хороший Adobe Dreamweaver, можна відкрити просто блокнот) і приступаємо до кодування.

Перед цим на сайті, на якому ви будете перевірять шаблон, поставте # 971 стандартний шаблон. Все-таки не писати ж з 0 весь css файл, а візьмемо стандартний і переробимо його. Так набагато раціональніше і швидше.

Це самий початок нашого макета. Чесно сказати, я не знаю, що означає код <? $ META_DESCRIPTION $? >, Але він зустрічається в шаблонах і за назвою його можна подумати, що це щось пов'язане з метатегами. Мені здається, що це код ще не введеної функції uCoz, ну гірше від нього точно не буде. upd: Виявив, що сіё диво працює в інтернет магазині (ставить мета тег
DESCRIPTION). Більш ніде начебто не працювало.

[TITLE] - зарезервований код uCoz, система сама ставить заголовок. Там де <meta ...> - вказівка ​​котирування, <link type = "text / css» rel = "StyleSheet» href = "/ _ st / my.css»> - посилання на css.

Далі починається основна частина. Адмін бар, шапка ( як поставити випадкову шапку )

а в css пхає

<! - <header> -> і <! - <header> -> - вказівка ​​системі, де у нас код шапки.

Далі код центральній частині, разом з блоками.

TITLE і CONTENT - зарезервовані коди для блоків, а [BODY] - для основної частини сайту.

При такому шаблоні у вас буде працювати конструктор блоків.

У css додаємо ще кілька рядків:

в стилі .blockcontent, як бачите, картинка задана з параметром bottom. Це означає, що картинка притискається до нижнього краю блоку.

І майже остання частина коді - футер:

І знову пишемо в css:

Залишається тільки один невеликий шматок коду - опис спливаючих вікон (вікна ЛЗ, профілю та ін). Код додається в кінці документа, вже після, і для нього так само зарезервовані коди [TITLE] і [BODY]. У нашому шаблоні код буде виглядати так:

Усе! Макет готовий, ось його остаточний код:

Вітаю!