Full Site. Начальное руководство

1. Распаковка шаблона
2. Общая информация и структура шаблона
3. Редактирование статической версии шаблона
   • Необходимые программы для статической версии
   • Редактирование файлов HTML и CSS
   • Редактирование PSD файлов
   • Пользовательские шрифты
4. Редактирование анимированной версии шаблона
   • Программы для редактирования Flash-версии шаблона
   • Установка шрифтов
   • Редактирование FLA (исходный файл Flash)
5. Загрузка файлов на сервер

После распаковки шаблона, у Вас будут такие папки: "screenshots", "site", "site_flash" и архив "sources_############.zip", который также нужно распаковать.

Папка sources содержит все исходные материалы для шаблона. Данный ZIP файл защищен паролем, следующие туториалы показывают, как правильно разархивировать шаблон, используя WinZip (Windows OС) and StuffitExpander (MAC OС).

Данные программы доступны в качестве пробных версий:

• WinZip
• StuffitExpander

Во время распаковки файла «sources_############.zip» Вам будет предложено ввести пароль, которым является номер Вашего заказа (Вы можете найти его странице скачивания шаблона).

После распаковки у Вас будет 4 папки: "screenshots", "site", "site_flash", "sources"

HTML шаблоны (Full Site) включают две версии того же дизайна: анимированная (Flash) и статическая (только HTML). Ниже представлены описания этих версий:

1. HTML версия (статический хедер)
2. Flash версия (анимированный хедер)

Следующая схема показывает структуру шаблона.

• «screenshots» – содержит скриншоты шаблона.
• «site» – содержит .HTML и style.css файлы статической версии сайте
• — «images» – содержит изображения для .HTML файлов;
• «site_flash» – содержит .HTML и style.css файлы для анимированной версии шаблона.
• — «flash» – содержит .SWF — анимация для .HTML.
• — «images» – содержит все изображения для .HTML файлов.
• «sources» – содержит исходники
• — «flash» – исходные материалы для Flash — .FLA файл(ы).
• — «fonts» – содержит шрифты, использованные в .PSD и .FLA файлах – True Type (.TTF), Adobe fonts (PFB\PFM), или оба.
• — «psd» – содержит файлы .PSD.

Требования к программному обеспечению

Adobe Dreamweaver (скачать пробную версию). Используется для редактирования .HTML и .CSS файлов
Adobe Photoshop CS + (скачать пробную версию). Используется для редактирования .PSD файлов

Для работы сос статической версии Вам необходимы .html, .css и .psd файлы.

Редактирования HTML и CSS

Все редактируемые HTML файлы находятся в папке «site» (index.html, index-1.html,index-2.html, etc.) Каждый index-#.html — это отдельная страница шаблона.

Чтобы открыть HTML с помощью Adobe Dreamweaver, нажмите правой кнопкой на файле и из меню «Открыть с помощью…» выберите Adobe Dreamweaver. Файл открыт и можно начать его редактирование.

Adobe Dreamweaver позволяет редактировать файлы в режиме Design, который позволяет сразу же видеть изменения, который Вы производите, т.е. нет необходимости редактировать сам код в этом случае.

Детальные туториалы покажут, как правильно работать с HTML файлами, используя Adobe Dreamweaver

С помощью CSS файлов Вы можете редактировать стили шаблона (шрифт, его размер, цвет), фон, цвета, ширину и т.д. Следующие туториалы покажут, как работать в CSS файлами.

Редактирование PSD файлов

PSD файлы находятся в папке "sources/psd" шаблона. Они разделены на слои, поэтому Вы сможете легко отредактировать каждую часть сайта.

В PSD файлах Вы можете изменить изображения, которые используются в контенте шаблона.

Следующие туториалы более детально покажут, как работать с PSD файлами, используя Adobe Photoshop

Пользовательские шрифты

Некоторые шаблоны могут включать нестандартные шрифты. По умолчанию браузер рендерит страницу, используя шрифты, установленные в системе. Другими словами, если данных шрифтов нет на компьютере посетителя сайта, то данные шрифты отображаться не будут и дизайн не будет таким, как на демо. Поэтому веб-разработчики нашли некоторые альтернативные решения, как шрифты Cufon, основанные на Java Script, и Google Web Fonts (шрифты Google).

Шрифты Cufon

Cufon создается с использованием Java Script. И по умолчанию содержит только латиницу, поэтому если Вы хотите добавить другие символы, то ознакомьтесь со следующим туториалом, который покажет, как работать со шрифтами Cufon.

Google Web Fonts

Нестандартные шрифты можно также вставить в HTML, используя сервис Google Web Fonts. Для большей информации ознакомьтесь с туториалом, как работать с Google шрифтами.

Эти методы актуальны только к HTML версиям шаблона, но не в Flash-анимированным.

Программные требования для работы с Flash

Adobe Dreamweaver (скачать пробную версию). Используется для редактирования .HTML и .CSS файлов
Adobe Photoshop CS + (скачать пробную версию). Используется для редактирования .PSD файлов

Для работу в анимированной версией, Вам необходимо редактировать .html, .css, .fla и .psd файлы.

Разница между статической и анимированной версией во Flash-анимированном хедере. Все другие шаги по редактированию такие же, как и для редактирования статической версии. Поэтому для полной информации ознакомьтесь с частью этого туториала о Редактировании статической версии шаблона.

Установка шрифтов

Все нестандартные шрифты должны быть установлены в систему перед началом редактирования файлов.

Шрифты находятся в папке «sources/fonts» шаблона. Если у Вас нет этой папки, найдите файл fonts_info.txt в шаблоне. В нем есть ссылки на скачивания всех необходимых шрифтов.

Когда шрифты скачены, их нужно установить в систему, данный туториал покажет как.

Пользовательские шрифты в анимации рендерятся в SWF ролик. Поэтому будут отображаться без проблем на любом компьютере.

Редактирование FLA файла

После установки шрифтов Вы можете приступать к редактированию Flash. Следующие туториалы покажут, как работать с Flash правильно.

Чтобы отобрать сайт в Интернете, его нужно загрузить на хостинг-сервер. In order to make your site «live», you need to upload specific template files from your local computer to your hosting server.

В зависимости от редактируемой версии (Flash или HTML) Вам нужно загрузить контент соотвествующей папки.

• Для статической версии — это контент папки «site«
• Для Flash-аниморованной — «site_flash«

Если Вы загрузите папку полностью, то она будет отображаться как http://your_domain_name/site или http://your_domain_name/site_flash. Поэтому, чтобы сайт отображался сразу на Вашем сайте http://your_domain_name/ , нужно загрузить не саму папку, а только ее контент. Откройте папку Site — и загрузить весь контент в корневую папку на Вашем сервере.

Следующий туториал покажет, как загрузить файлы на сервер. Вы можете использовать любой FTP клиент, как FileZilla, либо файловый менеджер панели управления хостингом.

Пожалуйста, не загружайте папку sources на Ваш хоситнг-сервер.

Мы надеемся, что данный туториал был полезен Вам в инсталляции , редактировании и разрешении некоторых вопросв, связанных с шаблоном.

Больше инструкций Вы можете найти по следующим ссылкам:

• Инструменты разработчика
• Хостинг FAQ
• Работа с CSS
• Работа с Photoshop
• Работа с HTML
• Работа с файлами
• Работа с Flash
• Работа со шрифтами
• Работа с XML Flash