0 Пользователей и 1 Гость просматривают эту тему.

*

Оффлайн djekinsАвтор темы

  • ****
  • 70
  • +2/-0
[div align=\"center\"]Создание Web-страниц[/div]

На предыдущем занятии мы создадили эскиз страницы сайта в Adobe Photoshop. И пока, мысленно, представили каким образом макет нашего сайта может быть представлен в табличном виде. Теперь мы займемся расстановкой направляющих на эскизе нашей страницы в Adobe Photoshop. Те кто уже скачал файл ОТСЮДА ( Вы не можете просматривать ссылки. Регистрация или Вход ) и не поленился его открыть, увидели вероятно, что там направляющие уже расставлены. Их можно не трогать - правильно они там стоят ... Для работы над данным уроком РАБОТАЙТЕ С КОПИЕЙ ФАЙЛА. Храните где-то оригинал, чтоб не пришлось скачивать еще раз.

А зачем мы расставляем эти самые направляющие? А затем, что по этим самым линиям мы будем разрезать нашу страницу на отдельные кусочки - картинки чтобы потом вставить их в ячейки таблицы которую мы создадим в Macromedia Dreamweaver. А теперь - как и почему именно так проставлялись направляющие на эскизе. И какими соображениями мы при этом руководствовались.


1. Вот так выглядит наш эскиз в Adobe Photoshop (если убрать направляющие).

2. Выбираем инструмент Move Tool (V)

[div align=\"center\"]Вы не можете просматривать ссылки. Регистрация или Вход[/div]

3. Теперь выключаем слои Text и Banner

[div align=\"center\"]Вы не можете просматривать ссылки. Регистрация или Вход[/div]

4. Объединяем (сливаем вместе) видимые слои. Идем в пункт меню Layer - Merge Visible (Shift+Ctrl+E)

[div align=\"center\"]Вы не можете просматривать ссылки. Регистрация или Вход[/div]

5. Начинаем расставлять направляющие. Включаем если не включен режим Rulers. Пункт меню View - Rulers ( Ctrl+R). Что это такое - смотрите на рисунок выше. Кто не знает направляющие расставляются так: подводим выбранный нами ранее инструмент Move Tool (V) туда примерно куда указывает оранжевая стрелочка (на саму линейку белого цвета), нажимаем и удерживая левую кнопку мыши двигаем ее (мышь) следом потянется линия. Это направляющая и есть.

[div align=\"center\"]Вы не можете просматривать ссылки. Регистрация или Вход[/div]

Данная направляющая кстати даст нам возможность вырезать для вставки в таблицу картинку - футер

6. Теперь ставим направляющие для меню и хедера. Ставьте направляющие точно по краям рисунков! Увеличьте рисунок и затем расставляйте. В конце концов все должно выглядеть так, как на картинке ниже. Всмотритесь - отдельные части нашего макета находятся как бы в таблице, разделительными линиями которой, являются расставленные нами направляющие.

[div align=\"center\"]Вы не можете просматривать ссылки. Регистрация или Вход[/div]

7. Приступаем наконец то к нарезке картинок! Копируем отдельные области макета, и вставляем их в новые отдельные файлы. Вот примерно так все должно выглядеть. Когда вы разрежете, скопируете и вставите ....

[div align=\"center\"]Вы не можете просматривать ссылки. Регистрация или Вход[/div]

8. Теперь создайте для картинок которые мы будем сохранять в форматах gif и jpg ОТДЕЛЬНУЮ ПАПКУ и назовите ее используя ЛАТИНСКИЕ БУКВЫ (например imgsite). Сохранять файлы нужно так: File - Save For Web !

9. Сохраняем Header.psd - как header.jpg в уже созданную нами ОТДЕЛЬНУЮ ПАПКУ, Footer.psd - как footer.gif туда же.

10. Закрываем файлы Footer.psd и Header.psd. и сам эскиз. А вот с меню мы еще поработаем.

11. Расставим направляющие и сохраним кусочки меню общим числом 6 штук в ту самую ОТДЕЛЬНУЮ ПАПКУ в формате gif (например home.gif, about.gif, и.т.д)

[div align=\"center\"]Вы не можете просматривать ссылки. Регистрация или Вход[/div]

Вот так результаты нашего урока выглядят у меня. Нечто подобное должно было получиться и у вас.

[div align=\"center\"]Вы не можете просматривать ссылки. Регистрация или Вход[/div]
« Последнее редактирование: 09 Февраль 2007, 13:36:47 от djekins »