2. Редактор для css

Для редактирования CSS, в отличие от HTML (см. 3.1), использование какого-нибудь специализированного редактора даже приветствуется. Впрочем, если вы хорошо владеете CSS, то обычный текстовый редактор тоже сгодится.

Существует несколько редакторов для CSS, наиболее известный из которых – TopStyle. Каждый веб-разработчик вправе сам решать какой редактор ему использовать для CSS, если это не противоречит политике компании.

3. Photoshop

Большинство готовых дизайнов, с которыми веб-разработчику приходится иметь дело, выполнены в Adobe Photoshop, и соответственно, предоставляются в его родном формате PSD. В связи с этим, мы рассмотрим несколько тем, касательно верстки HTML используя версию Photoshop CS.

1. Настройка рабочего места в Photoshop

Прежде чем приступить к верстке готового дизайна в Photoshop, необходимо настроить ваше рабочее место. Начать следует с удаления всех ненужных окон (табов) в панелях справа. Это делается путем перетаскивания ненужного таба за пределы окна Photoshop. Целесообразно оставить табы Info, Layers и History.

Далее, выбираем опцию Move Tool в панели слева. Вверху появится бар дополнительных настроек. Необходимо поставить галочки в чекбоксах Auto Select Layer и Show Bounding Box.

Затем выбираем опцию меню Edit -> Preferences -> General и постранично ставим нужные настройки.

Для страницы настроек General, указываем History States равное 40, это позволит иметь больший запас для отмены действий в случае необходимости. Для группы настроек Units & Rulers необходимо поставить значение pixels для Rulers и Type. В настройках Guides, Grid & Slices в качестве цвета для Guides следует указать Light Red. Этот цвет более заметный по сравнению с цветом по умолчанию. В группе Grid поставить значение 10 для Gridline every. А также значение 10 для Subdivisions. В разделе настроек Plug-Ins & Scratch Disks необходимо указать другие диски, если таковые имеются, для хранения файла подкачки Photoshop. Это повысит стабильность работы программы. В разделе Memory & Image Cache нужно указать значение 8 для Cache Levels. Такие настройки позволят избежать многих неприятностей в дальнейшем, при работе с готовым дизайном.

Настройка рабочего места закончена. Теперь нужно сохранить изменения. Для этого нужно выбрать пункт меню Window -> Workspace -> Save Workspace. Определите какое-нибудь имя для сохраненного файла, чтобы можно было его использовать в дальнейшем.

Одной из основных задач, стоящих перед веб-разработчиком, при работе с дизайном, является выделение нужного изображения и его сохранение в виде файла, пригодного для Интернет формата: GIF, JPEG или PNG. Существует два основных способа сделать это. Один касается работы с подготовленным плоским изображением и использованием инструмента выделения. Второй заключается в использовании инструмента вырезки или так называемых слайсов. Для того чтобы разобраться о чем идет речь, нужно рассмотреть следующие два раздела о слоях и слайсах.