Краткое руководство по Flash шаблону

1. Разархивирование пакета шаблона

После распаковки пакета шаблонов появится 3 пакета: “screenshots”, “site”, “site_flash” и другой zip-Архив под названием “sources_############.zip”. Посмотрите следующие видео –уроки о том, как распаковать пакет шаблона:

Как распаковать шаблон (Windows OS)

Как распаковать шаблон (MAC OS)

Во время распаковки архива “sources_############.zip” нужно будет ввести пароль, который Вы найдете в Product Download Page/Страница скачивания продукта(откройте ссылку из е-мейла, которую получили от нашей компании) .

В общем у Вас сейчас должно быть 4 папки: “screenshots”, “site”, “site_flash”, “sources”

2. Общая информация и структура шаблона

 У типа шаблона есть две версии с одинаковым дизайном: одна с Flash (анимированым) макетом, а другая – с HTML (статическим) макетом. В зависимости от того, какую версию шаблона хотите использовать, следуйте соответствующим инструкциям, приведенным ниже:

• HTML версия (неанимированный макет)
• Flash версия (анимированный макет)

• screenshots/ – содержит скриншоты шаблона. Здесь нередактированные файлы
• site/ – содержит .HTML и .CSS файлы для неанимированной версии шаблона
• images – содержит все картинки, которые используются в .HTML файлах
• site_flash/ – содержит .HTML и .CSS файлы для анимированной версии шаблона
• flash – содержит .SWF flash видео, которое используется в файле .HTML
• images – содержит все изображения, используемые в .HTML файлах
• sources/ – содержит исходные файлы
• clipart_library – бонус-материалы, которые не относятся к дизайну шаблона
• flash – содержит Flash .FLA исходные файлы
• psd – содержит Adobe Photoshop .PSD файлы

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

  Если в дизайне шаблона используются нестандартные шрифты, которые используются в пакете шаблона.

После того как Вы распаковали пакет шаблонов, там будет находится файл “fonts_info.txt”, в котором Вы найдете название шрифта и ссылку для скачивания. Если вышеуказанный файл Вы не найдете, тогда, возможно, эти шрифты являются частью пакета шаблона. Откройте папку “sources” и найдите папку “fonts”. После того, как Вы скачаете/расположите шрифты, скопируйте их в директорию C:/Windows/fonts

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

Необходимое программное обеспечение: С помощью нижеуказанных ссылок Вы можете скачать пробные версии (на 30 дней)

Adobe Dreamweaver (или Microsoft Expression Web)
http://www.adobe.com/products/dreamweaver/
http://www.microsoft.com/expression/products/Web_Overview.aspx

Adobe Photoshop
http://www.adobe.com/products/photoshop/photoshop/

a) Редактирование контента HTML страницы
Все редактируемые HTML файлы находятся в папке “site” пакета шаблона (index.html, index-1.html,
index-2.html, и т д.) Каждый файл index-#.html представляет собой одну страницу шаблона.

Чтоб открыть .html файл при помощи программы Adobe Dreamweaver, кликните на файле правой кнопкой мышки, и в контекстном меню выберите Open with/Открыть с помощью -> Adobe Dreamweaver. Файл открыт и Вы можете приступать к редактировнаию.
Перейддите по ссылке, чтоб получить более детальную инструкцию по работе с Adobe Dreamweaver и .html файлами. Working with HTML

b) Photoshop файлы
Файлы Photoshop находятся в папке “sources/psd” и нужны для редактирования в шаблонах некоторых названий текстов, для создания которых использовались нестандартные шрифты. Взгляните, пожалуйста, на эти два скриншота

На первом скриншоте показан полный макет веб-шаблона, а на втором – то, что Вы увидите, когда откроете с помощью браузера файл “site/index.html”. Все элементы, “отсутствующие” на втором скриншоте (названия главного меню, названия баннеров и т.д.) отредактируйте/обновите через файлы .psd.

Нажмите, пожалуйста, на ссылку, чтобы посмотреть видео-урок о том, как работать с контентом файла .psd и сохранить его на вэб-страницеHow to save for web

Обратите также на этот видео-урок, который касается сохранения слоя, перекрытого другим, и больших слоев таких как фоны Photoshop. How to use bring to front feature

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

По умолчанию шрифты шаблона поддерживают только латинские буквы, для вложенных специальных букв (заостренный латинский, греческий, кириллица и т.д) нужна повторная компиляция javascript шрифта, предоставленного вместе шаблоном. О том как это можно осуществить Вы узнаете в следующем туториале
How to use cufon feature

5. Редактирование Flash версии шаблона

Необходимое программное обеспечение: С помощью нижеуказанных ссылок Вы можете скачать пробные версии (на 30 дней)

Adobe Dreamweaver (или Microsoft Expression Web)
http://www.adobe.com/products/dreamweaver/
http://www.microsoft.com/expression/products/Web_Overview.aspx

Adobe Photoshop
http://www.adobe.com/products/photoshop/photoshop/

Adobe Flash Professional
http://www.adobe.com/products/flash/

а) Редактирование Flash макета
Редактируемые flash файлы находятся внутри папки “sources/flash” пакета шаблона. Программой Adobe Flash откройте файл .fla и настройте его как Вам нужно. Если Вы ни разу не работали с Flash и Вы не знаете, как это делается, то перейди по этой ссылке:
Working with Flash

b) Файлы Photoshop
Описано в параграфе 4.b данного урока

6. Загрузка шаблона

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

• Если Вы настраиваете HTML (статическую) версию шаблона, загрузите все содержимое папки “site”
• Если Вы настраиваете Flash (анимированную) версию шаблона, загрузите все содержимое папки “site_flash”

В этом видео-уроке Вы увидите, как можно загрузить файлы на хостинг с помощью бесплатного программного обеспечения для управления FTP
FileZilla (можно использовать любую другую программу илизагрузить прямо через панель управления хостингом)
How to upload files to server