Основы работы с HTML шаблонами

Что внутри HTML шаблона?

После того, как вы скачали архив шаблона и распаковали его* на диске создались новые папки.

• screenshots — содержит скриншоты шаблона, те же картинки, что видели перед покупкой.
• site — содержит HTML файлы и файл style.css (версия шаблона сайта без флеша)
  • images — содержит картинки, используемые в HTML файлах и стилях;
• site_flash — эта папка входит в комплект шаблона при условии, что шаблон включает флеш элементы, например, главное меню в шапке сайта создана с использование флеш-анимации. В папке содержатся HTML файлы и дополнительные файлы, как таблицы стилей или js — JavaScript.
  • flash — содержит файлы формата флеш, что используются в. HTML файлах.
  • images — содержит картинки, используемые в HTML файлах и стилях;
• sources* — содержит исходные файлы
  • clipart_library — содержит PSD файлы с разными полезными мелочами.
  • flash — содержит исходник флеш файлов (FLA), при условии, что шаблон включает флеш-элементы.
  • fonts — содержит все шрифты, используемые в PSD и FLA файлах.
  • psd — содержит PSD (Adobe Photoshop) файлы, необходимые для внесения изменений в графику HTML версии сайта.

* — не забудьте распаковать файл sources_xxx.zip, для чего понадобится пароль (номер транзакции) из полученного письма.

Редактирование HTML шаблона

Для внесения изменений в HTML шаблон могут понадобится программы двух типов

1. редактор html файлов. Если для вас эти слова звучат кошмарно, предпочтительно использовать какой-либо визуальный html-редактор, например, Adobe Dreamweaver. Они позволят работать с содержимым страницы, не сложнее чем с документом в Word`е: выделил фрагмент текста — отформатировал, нажал  кнопку — выбрал картинку из списка — вставил. В этом случае совсем не обязательно владеть языком разметки HTML, знать и понимать его команды. Другой класс редакторов, скорее подойдет профессиональным веб-мастерам, но им незачем тратить время на прочтение этого текста.
2. Adobe Photoshop для изменения графических элементов. В прилагаемых PSD-файлах все элементы расположены на слоях, что позволяет вносить любые произвольные изменения. После завершения редактирования, необходимо сохранить все измененные фрагменты общей картинки в существующие файлы. Есть два пути решения это задачи.Первый — воспользоваться системой Slices. Практически все исходные PSD-файлы, входящие в шаблоны, уже имеют разметку, по которой «нарезались» картинки для вставки в html-код. Можно повторно сохранить все графические изображения на диск и, затем, выбрать и заменить нужные (скопировать их в папку images).
   Второй — найти на диске требуемые файлы и заменить их содержимое. Удобно это делать так: открыть нужный файл в формате jpeg / gif / png вставить в него изменный фрагмент, совместив сохранившиеся (общие) части изображения, сохранить файл в том же формате. В этом случае не будет сделана ошибка ни с размером картинки, ни с названием файла. Обратите внимание, что Photoshop иногда любезно меняет пробелы на черточки.

Автор Редакция 02/09/10. в разделе Редактируем HTML. Вы можете следить за ответами на эту запись в RSS 2.0. Вы можете оставить отзыв на эту запись ниже