Как разрезать шаблон?
Хорошие веб-дизайнеры разрабатывают шаблоны своих сайтов в мощных графических редакторах, например Adobe Photoshop. В результате появится файл с изображением, который и предоставляется заказчику. Но для того, чтобы извлечь готовый дизайн, то есть сверстать веб-страницу, необходимо разрезать шаблон.
Для этого откройте файл в программе Adobe Photoshop. В меню выберите пункты File и Open или нажмите комбинацию Ctrl+O. В диалоге, которое появится, перейдите в директорию с файлом, выделите его и нажмите «Открыть».
Выберите нужный масштаб просмотра изображения шаблона. Используйте инструмент Zoom Tool или пункты контекстного меню. Нужно выбрать такой масштаб, чтобы он позволял позиционировать курсор очень точно, до одного пикселя. Это нужно для точной установки опорных линий. Теперь сформируйте набор линий над картинкой шаблона. Если еще не включено, то включите отображение линеек в окнах документа. Чтобы это сделать, нажмите Ctrl+R или выберите пункты View и Rulers.
Для того, чтобы добавить горизонтальные опорные линии, направьте курсор мыши к верхней части линейки. Нажмите и удерживайте левую кнопку мыши. Теперь двигайте курсором вниз, к области изображения. Аналогично, если использовать правую линейку, то можно таким образом добавить горизонтальные линии.
Добавьте нужное количество опорных линий позиционируйте их по границам разделения. Линии должны проходить через те места, где нужно разрезать шаблон. Они должны заключать все картинки, логотипы, горизонтальное и вертикальное меню, шапку сайта и все то, что будет представлено на веб-странице.
Теперь активируйте инструмент Slice Tool, который находится на вертикальной панели инструментов. При помощи этого инструмента создайте нужное количество областей для разрезания. При помощи мышки задавайте границы нужных областей. Направляющие линии, которые были добавлены раньше, обеспечат четкое позиционирование границ объектов, которые вы создаете. Потом, если нужно, скорректируйте области при помощи инструмента Slice Select Tool. Измените, если нужно, свойства областей разрезания. Для этого в инструменте Slice Select Tool кликните правой клавишей по требуемой области. В появившемся меню выберите Edit Slice Options. Теперь в диалоге Slice Options выберите тип области, режим заполнения фона и, если надо, уточните имя, содержимое атрибута alt, целевой URL и другие значения. Подтвердите операцию.
теперь можете разрезать шаблон. Для этого выберите в меню пункты File и Save for Web & Devices или нажмите комбинацию клавиш Shift+Ctrl+Alt+S. В окне Save for Web & Devices уточните формат сжатия изображений, на которые будет разрезаться шаблон, и их параметры. Нажмите Save. Потом появится диалог Save Optimized As. В списке «Тип файла» выберите HTML and Images (*.html), а в пункте «Имя файла» напишите имя того файла, куда будет помещена HTML-разметка шаблона. В пункте Slices выберите All Slices. Укажите там директорию для новых данных и нажмите «Сохранить». В целевом каталоге сохранится HTML-файл, который представляет собой готовый шаблон веб-страницы. В подкаталоге images будет помещен набор изображений, которые получились после разрезания шаблона.
