Нарезка шаблона сайта

Урок — 4

Режим шаблон на части

Ну вот, наш шаблон почти готов! Теперь всё наше творчество необходимо перевести в HTML. Для начала сделаем это на фотошопе, а дальнейшие настройки и доработки надо делать в html-редакторе. Можно для этого использовать любой редактор, но более удобным считается Adobe Dreamweaver, а почему, я потом объясню.

Чтобы шаблон быстро загружался в интернете, он не должен иметь больших графических изображений. Поэтому надо порезать шаблон на более мелкие части. Делаем это в программе фотошоп. Для резки проведём дополнительные направляющие, как показано на рисунке:

Для резки выберите в панели инструментов инструмент «раскройка». Далее проводите этим инструментом в каждом прямоугольнике с левого верхнего угла в правый нижний угол и отпускаем, как показано на рисунке.

Инструментом работать аккуратно и точно. Если вдруг неточно провели линию, то зайдите в меню и отмените этот шаг — «Редактирование — шаг назад». Всего получилось восемь частей

Теперь идём в меню «файл — сохранить для Web и устройств…», откроется окно оптимизации, где в установках выставите необходимые параметры. Нажимаете «сохранить» и сохраняете в предварительно ранее созданной папке, а в настройках сохранения выставите следующие параметры:

Теперь в папке Вашего будущего сайта будет файл index.html и папка images с изображениями. Можете посмотреть в браузере, как примерно будет выглядеть Ваш сайт, открыв файл index.html.

На этом основная работа в фотошопе закончилась, но далеко фотошоп не откладывайте, он еще будет нужен. Дальше будем дорабатывать сайт в редакторе Adobe Dreamweaver, поскольку это только получилась заготовка сайта. На всякий случай сохраните копию шаблона в PSD-файле, может пригодиться.