HTML kā uzstādīt savu dizainu lapai no cita dabūta dizaina

Вы скачали готовый шаблон, но не адаптированный к системе Юкоз (да даже и адаптированный). Нашли в архиве кучу непонятных файлов и папок. Давайте попробуем разобраться, что делать.

А. Шаблон из статических HTML страниц. Самый лёгкий случай.

1. Должна быть папка с графикой или файлы-картинки. Файл index.htm или index.html. Ещё может быть файл или в текстовом формате или style.css. Ну или с таким расширением.

2. Заливаем картинки на сайт. Или через Файловый менеджер или по ftp, если файлов много. Лучше всего создавать для картинок отдельную папку. Или закачать прямо папкой, если она была в архиве.

3. Работаем с Конструктором шаблонов. Вставляем в форму для редактирования код из файла index.html и добавляем в него юкоз-коды по правилам написанным внизу под формой. Не забываем периодически отсматривать результат и сохранять каркас. Содержимое файла стилей пока вписываем прямо в шаблон непосредственно перед тегом </head> заключаем в теги <style></style>

Перед этим устанавливаем в Общих настройках дизайн наиболее подходящий по цветовой гамме к нашему шаблону.

4. После того как каркас готов, убираем из него все стили из head в CSS. Добавляем сразу после раздела /* General Style */



B. Шаблон состоит из файла в формате PSD. Тяжёлый случай.

Процедура адаптации подробно изложена в сообщении http://forum.ucoz.ru/forum/31-1831-274965-16-1216159265


C. Шаблон адаптирован к Юкозу.

Установка написана в сообщении http://forum.ucoz.ru/forum/31-1831-382825-16-1233307991


D. Шаблон для DLE. Кому как.

Адаптация описана в сообщении http://forum.ucoz.ru/forum/31-1831-382825-16-1233307991 (вторая часть).


E. Шаблон для порталов написанный на php. Для маньяков.

1. Разбираетесь где там картинки. Закачиваете их на сайт в одну папку или сколько вам надо.

2. Выцарапываете из файлов шаблонов нужные вам куски html кода. Сносите всё в Конструктор шаблонов. Собираете там в одно целое и вставляете туда юкоз-коды.

3. Разбираетесь с таблицей стилей и меняете в юкозовских стилях параметры у классов описывающих те же элементы.

И последний случай - вам понравился дизайн, но вы не можете достать от него шаблон. Предупреждение: Буквальный (один к одному) рип дизайна считается нарушением авторских прав.

1. Открываешь страницу сайта в режиме просмотр ХТМЛ кода.

2. Помещаешь этот код в ХТМЛ-редактор. Желательно ДримВьювер или ФронтПейдж.

3. Открываешь Фотошоп и перерисовываешь ЛОГО.

4. Вставляешь в положенные места коды Юкоза (вида $KOD$) и перерисованное ЛОГО.

5. Переносишь переделанный шаблон из редактора на сайт.

6. Подгоняешь таблицы стилей (CSS).

7. Любуешься результатом.

UPD! Для всех желающих уроки по адаптации и настройке сторонних шаблонов сайтов под систему uCoz:

http://rucoz.com/forum/71-9216-1

Автор: RuCoz.com

А также на сайте http://ps-studio.info/

Более подробноя инструкция, надеюсь поможет:

1) Идем на сайт бесплатных шаблонов, там качаем понравившийся. Для того чтобы облегчить себе задачу, желательно, чтобы шаблон отдаленно хотя бы напоминал шаблоны стандартные (допустим имел место под модули ит.д.). Скачанный файл скорей всего будет в формате PSD, что расшифровывается как Photo Shop Document, тоесть документ ФотоШопа (Photo Shop это программа для обработки и создания компьютерной графики) следовательно там наш шаблон мы и будем изменять. Если вы не знаете КАК это сделать - нет ничего проще! Идем сюда: http://photoshop.demiart.ru и учимся...

2) После того как ваш дизайн в фотошопе примет соответствующий вид, вам нужно будет его cверстать чтобы затем создать html шаблон в программе под страшным названием Dreamweaver. Верстка представляет собой разбиение большого рисунка с вашим дизайном на множество маленьких его фрагментов для последующей сборки в таблицы. Сайт представляет из себя как бы тетрадный лист в клетку. Когда все клеточки на своем месте - лист выглядит нормаьно, но если их перемешать или сдвинуть - всё нарушится. При растяжении листа некоторые клетки будут дублироваться, некоторые оставаться неизменными. Выдолжны сделать так, чтобы при растяжении в разные стороны ваш сайт отображался нормально. к концу этого шага вы уже должны освоить Photoshop, Dreamweaver и худо бедно знать html.

3) Сервис Ucoz использует своеобразную систему построение страниц сайта - 1 единственный (грубо говоря) графический шабон на который накладывается разная текстовая информация. Тоесть почти для всех страниц шаблон по умолчанию будет один и тот же. Для того чтобы информация выводилась корректно вам надо в вашем шаблоне правильно разместить условные коды. Их список достаточно велик. Для того чтобы представить себе как это выглядит - зайдите в панель управления вашим сайтом - конструктор шаблонов - пример стандартного каркаса. Вы увидите страницу с самым простым стандартным расположением модулей. Переключайтесь между вкладками визуального вида страницы и кода и сопоставляйте код и то, что отображается в итоге. Всё достаточно просто - вот тут то вам и поможет форум тех поддержки - там много топиков по вопросу размещения кодов в шаблоне. но и это ещё не всё!

4) Вроде бы всё уже сделано, ан нет! Остались ещё каскадные таблицы стилей или попросту CSS - это такая страничка - которая содержит в себе все основные стиливые настройки вашего сайта, как то цвет и размер шрифтов, таблиц, фонов и так далее... Она редактируется в специальном разделе конструктора шаблонов. Проще всего взять страницу стилей одного из стандартных дизайнов и изменить её под свой сайт.

5) Осталось всё впихнуть на сайт. Страницу CSS и код каркаса вставляем в соответствующие поля в конструкторе шаблонов. Не забудьте про код копирайта - без него система не даст сохранить каркас. Готово! Правдо прозвучало это всё сложновато... Надеюсь я вас не испугал)