|
|
 Отложенных дизайнов – 0 |
|
|
 |
 |
|
 |
Шаг 2.8:Нарезка и создание web-страницы
На этом шаге Вы узнаете, что такое направляющие, как их создать и отредактировать.
Вы нережете .psd-картинку для получения HTML-страницы, которую Вы сможете просматривать в броузере.
В отличие от картинок, которые состоят из одной части, web-страница состоит из большого количества элементов, связанных между собой языком разметки HTML. Каждая картинка на web-странице представляет собой отдельный файл. Несмотря на то что эти картинки могут иметь различный формат и размер, в момент отображения страницы в броузере они производят эффект целой картинки.
HTML-код будет сформирован автоматически, если Вы воспользуетесь возможностью Photoshop для получения такого эффекта.
Вам необходимо лишь обозначить какие части шаблона должны быть сконвертированны в отдельные картинки, другими словами сделайте нарезку.
- Выберите инструмент "Slice Tool"
 и нарисуйте квадрат вокруг кнопки "company". Вы можете изменять границу этого квадрата после создания. Для этого Вам необходимо будет использовать инструмент "Slice Select"  .
- Кликните правой кнопкой мыши на вновь созданный элемент нарезки (slice) и выберите из выпавшего меню "Edit Slice Options".
Поле "URL" предназначено для адресса web-страницы, которая откроется при клике на эту кнопку.
- Сделайте другой slice вокруг текста под приветствием. Вы замените эту картинку форматированным текстом, для того чтобы страница грузилась быстрее.
- Выберите "File>Save For Web...". Это диалоговое окно позволит Вам установить опции оптимизации для каждого slice.
После этого Вам необходимо поработать с полученным .html-файлом. На следующих шагах предполагается, что Вы используете Macromedia Dreamweaver 4.0 HTML-редактор. В других HTML-редакторах расположения и названия кнопок могут отличаться.
- Откройте полученный .html при помощи Dreamweaver. Проверьте, что открыто окошко Properties. Если его нет, то выберите Window>Properties, для того чтобы оно отобразилось.
- Кликните мышкой на кнопке "Company" на Вашей странице и внимательно посмотрите на окно свойств (Properties). Вы можете редактировать поле "Link" для изменения ссылки (URL), которая будет открываться при нажатии на эту кнопку.
- Выделите область с текстом под приветствием. Выберите "Window>Code Inspector" для редактирования HTML. Тег <img...> автоматически подсветится (он будет выглядеть примерно так <IMG SRC="images/edited_TEMPLATE_07.jpg" WIDTH=424 HEIGHT=161 ALT="">. Замените этот тег своим текстом. Закройте окно редактора кода. Для форматирования текста используйте свойства из окна "Properties".
- Вы можете использовать "back.gif" из папки RESOURCE как фон для этой ячейки.
- Сохраните Вашу работу и посмотрите, что у Вас в итоге получилось. Это можно сделать, выбрав "File>Preview in Browser>".
Это окончание самого большого Шага 2: Редактирование шаблона. Перейти на Шаг 3: Размещение Вашего сайта в Сети.
|
|
 |
 |
 |
|
|
 |
|
|
|
2004-2010 © Infobridge. Все права защищены.
Узнайте подробности об использовании материалов с этого сайта
Изготовление веб-сайтов по готовым шаблонам. Создание интернет-сайтов. Разработка веб-сайтов.
Templater.Ru. Официальный представитель Templatemonster
|
|
|
|
|