Картинка
Программа:
~ Photoshop
1. Ищем фон для картинки. Я взяла скриншот моей Шаси
2. Открываем ФШ и делаем по ширине картинку равную от 850px до 800px
3. Берем инструмент "Прямоугольник" и рисуем окошки
4. Получилось одноцветное пятно с каемочкой по краю. Так не пойдет! Правой кнопкой мыши кликаем по слою. Выбираем "Растрировать слой". Каемка исчезла. Теперь слой можно красить кистью, карандашом, стирать и производить другие действия
5. До сих пор окошко - большое одноцветное пятно. Уменьшим непрозрачность, изменим цвет, добавим необычности. Кликаем два раза левой кнопкой мыши по слою.
6. Берем инструмент "Линия" и чертим на краю окошка полоску для заголовка. Линию делаем нужной вам ширины. Для того, чтобы линия была прямой, зажимаем Shift. Опять же растрируем слой, выбираем цвет и непрозрачность.
7. Объединяем окошко и полоску (по желанию, для удобства)
8. Создаем дубликат слоя. Потом выбираем "Кисть", зажимаем Ctrl и двигаем слой в нужное место. Это второе окошко
9. Теми же способами добавляем нужное кол-во окошек.
10. Пишем заголовки окошек. Сначала горизонтально, потом поворачиваем текст вертикально. Для точности держим Shift
11. Добавляем еще надписи и ставим копирайт.
Код
Программа:
~ Microsoft FrontPage
Лень писать самой, поэтому сопру все с лоwади из вт. Урок by ©Hoult
1.Открываем Microsoft FrontPage
Сразу выбираем внизу "С разделением". У нас два окна: В верхнем окне сам код, в нижнем картинка.
Стираем ВСЕ, что в верхнем окне.
2.Нажимаем значок "Добавить таблицу" и делаем таблицу 2х2. Наше верхнее окно автоматически заполняется нужным кодом.
3.В верхнем окне слева на серой вертикальной полосе идет нумерация строчек. В первой строчке после слов <table нажимаем "пробел" на клавиатуре. Автоматически выпадает окно функций.
Выбираем "background", ставим после него знак = и вставляем ссылку на фон презентации. Его вы можете получить, загрузив картинку на http://www.radikal.ru или http://savepic.su/index.php и скопировав первую ссылку.
4.Щелкните мышкой в любом месте в _нижнем_ окне, чтобы активировать его. Появится ваша картинка. Но не полностью. В чем же дело?
Щелкните по нижнему краю картинки и не отпуская чуть потяните вниз. Отпустите. В первой строчке кода появится слово "height". После загрузки картинки в "Радикал-фото" сверху показываются ее параметры: "ширина" и "высота". В «SavePic» эти параметры показываются под картинкой.
В коде эти параметры написаны в _первой_ строчке.
Сотрите все, что написано в кавычках после этих слов и напишите параметры своей картинки 
5.Теперь ваша картинка видна полностью. Самое время заняться окнами.
Полупрозрачные полосы на картинке - это границы для окон. Их можно добавлять и стирать.
Зажав курсором мышки полосы, переместите их так, чтобы они образовывали границы для окон. Горизонтальная полоса будет служить ограничителем для окон сверху или снизу. А вертикальная - справа или сверху.
Нам нужно добавить полосы, чтобы они образовывали прямоугольники.
Для этого нажимаем кнопку "Нарисовать таблицу" справа от нижнего окна. И прямо на картинке рисуем новые границы. Их так же можно перетаскивать.
6.Теперь пишем код для окон. Отключите рисование таблицы, снова щелкнув по значку "Нарисовать таблицу". Щелкните внутри границ готового окна, в верхнем окне код автоматически выделит нужное место.
Вставлять код нужно вместо " " перед </td>
Выглядит код так:
<div style="OVERFLOW: auto; WIDTH: 216px; HEIGHT: 296px" align="center">
<font face="Times New Roman"><u><i><font size="4" color="#CC3300">
<strong>Text</strong></font></i></u><span style="COLOR:#3e0c0c"><br>
</span><i><font color="#663300">Text text text</font></i><span style="COLOR:#3e0c0c"><br>
</span>
</font></div>
-------
<font face="Times New Roman"> - шрифт текста
<u>-подчеркивание
<b>-жирный текст
<i>-курсив
<font size="4" - размер шрифта
<span style="COLOR:#3e0c0c" - цвет текста
Эти элементы называются тегами, служат они для задания внутренней структуры, то есть дополнительных параметров отображения. В нашем случае текста.
Вы можете добавлять, менять и удалять эти параметры на свое усмотрение.
Здесь вы можете посмотреть основные теги языка HTML
http://scriptic.narod.ru/html/teg.htm
Коды для выбора цвета текста
7.Снова щелкните по картинке в нижнем окне, чтобы появились изменения.
С помощью точек нужно подтянуть окно так, чтобы не растягивались границы.
Ту же процедуру с 6 пункта повторяете для всех имеющихся окон.
8.В первой строке найдите "border="1"". Вместо "1" напишите "0" 
9.Презентация готова! Можете вместо "С разделением" щелкнуть "Просмотр", чтобы увидеть результат своей работы.
10.Чтобы вставить презентацию на свою страницу нажмите значок «Изменить», который находится над окном презентации.
Затем щелкните по кнопке справа «Режим HTML»
11.Вставьте свой код в окно и щелкните по значку под окном «Сохранить презентацию».
12.Вы так же можете изменять настройки презентации на самой странице. Для этого щелкните по значку «Параметры».
В появившемся окне вы можете изменить высоту своей презентации, от которой будет зависеть наличие вертикальной прокрутки и ширину презентации, от которой будет зависеть наличие горизонтальной прокрутки. 
Чтобы не было горизонтальной прокрутки:
Максимальная ширина для маленькой презентации 560 пикселей
Максимальная ширина для большой презентации 830 пикселей
Чтобы не было вертикальной прокрутки, высота презентации должна быть на 10 пикселей меньше, чем высота, которую вы установили в параметрах. Так, если у вас установлена высота 600 пикселей, в коде презентации в первой строке должно быть height="590". Это значит, что вы должны учитывать размеры фоновой картинки для презентации.
Спасибо за внимание.