Итак. Вы уже нарисовали макет и собираетесь приступить к вёрстке. Для объяснения всего я тоже буду верстать шаблон, но только для примера, а потому и простейший.
Как видите, макет двух колоночный, фиксированной ширины.
Сначала нужно нарезать ваш макет. В зависимости от его устройства, это делается по-разному. Мой макет вообще можно не резать, а задавать все цвета, рамки и прочее кодом, т.к. на моём нет графики. Но всё-таки нарежем его. У меня получились такие куски: шапка сайта, футер, шапка блока и основа блока. В полноценных макетах обычно частей больше, но от этого суть не меняется.
Не забывайте оптимизировать ваши изображения при сохранении. Для этого сохраняйте их в фотошопе через Файл -> Сохранить для 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, ну хуже от него точно не будет.
[TITLE] – зарезервированный код uCoz, система сама ставит заголовок. Там где - указание котировки, - ссылка на css. Далее
Остаётся только один небольшой кусок кода – описание всплывающих окон (окна ЛС, профиля и пр). Код добавляется в конце документа, уже после , и для него так же зарезервированы коды [TITLE] и [BODY]. В нашем шаблоне код будет выглядеть так:
