Для работы нам понадобится

• Adobe Photoshop или ImageReady для работы с макетом дизайна в формате .psd и для резки его на фрагменты
• Dreamweaver или любая другая среда, например TopStyle, Eclipse, PHPStorm, HomeSite для редактирования HTML и CSS
• Справочник по HTML, CSS, Javascript, библиотекам Javascript. Это может быть ресурс htmlbook.ru, может быть встроенная в среду помощь, либо любой другой удобный для вас источник информации
• браузеры FireFox, Opera, Chrome, Safary, а также программа IETester – всё последней версии – для проверки созданных страниц и для “отладки”
• FireBug или другой подобный
• редактор Javascript, в качестве которого может выступать одна из вышеописанных сред: Dreamweaver, Eclipse, PHPStorm

Рабочий процесс создания веб-страницы

В общем виде создание страницы из макета дизайна происходит в такой последовательности

• Создание статической части страницы
• Просмотр макета и определение блоков, из которых будет состоять страница.
  • Резка страницы на блоки и автоматическое создание каркаса страницы, состоящей из файлов .html и .css, содержащих основные, неизменные блоки страницы (ImageReady)
  • Резка страницы на детальные блоки (ImageReady) и наполнение каркаса страницы деталями с помощью HTML и CSS (DreamVeawer).
  • FireBug — для «отладки» готовой страницы прямо в браузере
• Создание шаблона CMS Joomla (может отличаться, если используется другая CMS)
  • Установка сайта на основе CMS
  • Копирование файлов шаблона в папку /templates/<имя_шаблона>/
  • Переименование файла со страницей в index.php
  • Настройка CMS на использование шаблона
  • Добавление в index.php всех необходимых элементов шаблона
  • Настройка вывода необходимых модулей для их последующего оформления в шаблоне
  • Оформление отображения модулей с помощью CSS в шаблоне
  • Создание установочного xml-файла для шаблона
• Создание эффектов анимации на странице
  • Поиск решения для анимации (как правило – использование JQuery и  дополнительных библиотек, либо создание своих)
  • Резка динамических элементов страницы и создание их представления в статическом виде с помощью HTML и CSS для последующей анимации
  • Вызов функций для анимации имеющихся элементов
• Создание динамического веб-интерфейса для ввода/вывода данных
  • Поиск и выбор решения для динамического интерфейса (как правило – использование JQuery + доп.библиотек, либо ExtJS, либо Dojo, Mootools, MochiKit, YUI, Prototype либо еще каких-то. Основные на наш взгляд варианты – JQuery и ExtJS.
  • Создание интерфейсов с помощью выбранной библиотеки, позволяющих выполнять необходимую интерактивность – ввод данных об определенных сущностях, редактирование, сохранение, поиск и вывод нужных данных
  • Создание кода по взаимодействию с сервером для получения-отправки данных, в частности с использованием AJAX и созданного ранее API обмена данными