.

Дизайн главной и внутренней страниц

Как уже упоминалось ранее в данном разделе, для каждого варианта дизайна нужно разработать две страницы: главную и внутреннюю Ди )айн главной страницы представляет особую важность, так как это первая страница, которую видит пользователь, попадая на ваш сайт. Внутренняя страница важна потому, что она показывает, как элементы дизайна главной страницы позволяют перейти на страницы более низкого уровня. Это дает возможность пользователям “прочувствовать” навигацию по сайту, что немаловажно и помогает заказчику сделать осознанный выбор.

Обычно я начинаю проектирование макетов Web-страниц в программе Fireworks или Photoshop, создавая новый файл такого же размера, как будущая Web-страница. Лучше всего выбрать размер 800x600 пикселей —- это видимая область большинства браузеров. Задайте цвет фона будущей Web-страницы. Имейте в виду, что каждый вариант дизайна может быть выполнен с использованием разного цвета фона. Это небольшое изменение может коренным образом повлиять на восприятие дизайна.

Ваши макеты страниц должны выглядеть как можно более реалистично — даже графические изображения HTML-компонентов. Лучше создавать макеты Web- страниц с помощью программ редактирования изображений, нежели сразу в HTML-коде, так как в графику можно гораздо быстрее внести какие-либо изменения и увидеть их результат. Таким образом, ваша задача состоит в разработке как можно большего количества вариантов дизайна. Не стоит тратить время на наладку работы Web-страницы в HTML-коде, так как в итоге заказчик может и не одобрить этот вариант дизайна.

Для автоматической генерации частей HTML-кода я использую специально предназначенные для этого программы, например Dreamweaver. Эта программа позволяет вставлять уже готовые графические элементы на свою страницу, заменяя лишь некоторые их свойства. Поэтому в Dreamweaver легко создаются кнопки и поля с правильными надписями и нужных размеров. Результат получается очень быстро еще и благодаря тому, что я делаю лишь отдельные элементы (например, кнопки), а не всю страницу. После создания необходимых HTML-элементов можно снять копии экрана (скриншоты). А затем просто вставить эти копии экрана в макет. Ниже подробно описано, как это сделать.

1. Запустите программу Dreamweaver.

2. Для создания нового документа (Web-страницы) воспользуйтесь командой File^New (ФайлОСоздать). Выберите пункт Basic Page (Главная страница) в поле Category (Категория), а в поле Basic Page — значение HTML. Щелкните на кнопке ОК.

3. Задайте цвет фона.

Если цвет фона макета Web-страницы отличается от белого, то в Dreamweaver необходимо задать соответствующие настройки. Для этого выполните команду меню Modify1^ Page Properties (Изменить1^ Свойства страницы). На экране появится диалоговое окно. Щелкните на образце цвета рядом с надписью Background, а затем выберите цвет из раскрывающейся палитры (рис. 11.3). В данном примере я оставила в качестве фонового белый цвет, который задан по умолчанию.

4. Вставьте текстовое поле.

С помощью раскрывающегося меню слева на главной панели инструментов смените набор инструментов Common (Стандартный) на Forms. Для вставки текстового поля на вашу страницу в разделе Forms (рис. 11.4) выберите инструмент Text Field. В появившемся диалоговом окне щелкните на кнопке ОК, чтобы подтвердить настройки, заданные по умолчанию. Для добавления тега еще раз щелкните на кнопке ОК. В документе появится новое поле.

5. Вставьте новый элемент формы.

Создание Web-страницы в программе Dreamweaver напоминает работу с текстовым процессором. В окне с основным документом один раз щелкните на текстовом поле. После чего вы увидите мигающий курсор мыши. Нажмите клавишу <Enter> для перехода на новую строку, куда вы можете добавить новый элемент формы.

Вернитесь к панели инструментов при выбранном наборе Forms и щелкните на значке Insert Button (Вставить кнопку). В открывшемся диалоговом окне щелкните на кнопке ОК. и в документе появится кнопка с заданной по умолчанию надписью “Submit (рис. 11.5).

6. Настройте изображение формы.

Обычно по умолчанию открыт инспектор свойств. Это длинная тонкая панель, показанная 11.6, которая предназначена для упорядочения и настройки каждого элемента вашего документа. Если эта панель не отображается, воспольз}йтесь командой Window^ Properties.

Внутри документа щелкните на текстовом поле, чтобы выделить его. В инспекторе свойств в поле Char Width введите значение 10. Нажмите клавишу

<Enter>, чтобы уменьшить размер поля. Теперь в поле можно ввести только 10 символов (букв и цифр). Кстати, в инспекторе свойств можно задать настройки таким образом, что текстовое поле станет многострочным и появится полоса прокрутки. Для этого нужно выбрать переключатель Multi Line.

Далее в вашем документе выберите кнопку Submit. В инспекторе свойств в поле с надписью Label замените заданную по умолчанию надпись Submit на Войти или любую надпись, которая подходит по смыслу для вашего макета.

7. Создайте копию экрана.

Щелкните справа от вашей новой кнопки Войти на любом свободном месте документа и нажмите клавишу <Enter>, что позволит снять выделение элементов. Таким образом, вокруг элементов перестанут отображаться линии выделения.

Для того чтобы сделать копию экрана, пользователям Мае нужно нажать комбинацию клавиш <8£+Shift+4>. Появится указатель мыши в виде перекрестья. Щелкните и перетащите указатель мыши для выделения нужной вам области. Когда вы отпустите кнопк) мыши, услышите звук затвора камеры. На жестком диске появится новый файл Picture 1, сохраненный на рабочем столе.

Пользователям операционной системы Windows для создания копии экрана нужно нажать клавишу <Print Screen>. При этом копия экрана сохраняется в буфере обмена (в оперативной памяти). Из буфера обмена следует вставить копию экрана в любую программу для работы с графикой, а затем вырезать те элементы, которые вам нужны.

8. Вставьте копию экрана на макет Web-страницы.

Откройте любую программу для работы с графикой (Fireworks, Paint Shop Pro или Photoshop). Создайте новый файл, выполнив команду FileONew (Файл1^ Новый). В большинстве программ для работы с графикой на экране появится диалоговое окно, где можно задать настройки для нового файла. Например, создайте файл размером 600x400 пиксе тей с разрешением 72 dpi. Рассмотрим, как можно вставить копию экрана с вашими кнопками в новый файл.

• Пользователям Мае следует выбрать команду File^Open и найти на жестком диске файл Picture 1 (имена файлов копий экрана всегда создаются последовательно: Picture 1, Picture 2 и т.д.).

• У пользователей Windows копия экрана содержится в буфере обмена. Поэтому для размещения копии экрана на макет достаточно просто выбрать команду Edit11? Paste (ПравкаОВставить). В буфере обмена Windows одновременно может храниться только одно изображение. Поэтому вам придется переключаться между окнами программы для создания Web- элементов (при создании копий экрана) и программой рс щктирования графики (вставляя эту копию).

После того как вы откроете или вставите элементы формы в свой макет, возможно, вам захочется избавиться от белого или цвегного фона вокруг изображения. В обе- \УУУ их программах (как в Fireworks, так и в Photoshop) есть инструмент Magic Wand (Волшебная палочка), который позволяет выделить и удалить цвет фона. В любой из этих программ выберите данный инструмент и до того, как его применить, отрегулируйте допустимое отклонение от образца (Tolerance). Установите значение допуска равным 0 (по умолчанию используется значение 32) и сбросьте флажок сглаживания (Anti-alias). Параметр Tolerance определяет, насколько близкий по тону цвет нужно выделить, когда вы щелкаете на элементе какого-либо цвета. Когда значение допуска равно 0, программа выделяет только один цвет. После того как вы выполни ш соответствующие настройки, щелкните указателем мыши на фоне, который вы хотите удалить. Нежелательный цвет фона будет выделен. Для его удаления нажмите клавишу <Delete> или <Backspace>.

Теперь, когда вы разработали несколько вариантов дизайна, ваша следующая задача состоит в творческом поиске того, как лучше представить ваш труд заказчику. Как мне кажется, лучше сделать и электронную, и печатную презентации. Электронная презентация позволяет заказчику увидеть, как различные варианты дизайна смотрятся в окне браузера. Другой вид презентации — это набор распечаток, закрепленных аккуратно на досках, что дает потрясающий эффект. Печатный вариант вашей презентации позволяет заказчику быстро уловить разницу между разными вариантами дизайна. В общем случае комбинация обоих видов презентаций дает отличный результат.

В данном разделе описывается создание электронной презентации. Создание печатной презентации обсуждается ниже в данной главе.



Hosting Ukraine
Hosting Ukraine


Предложить

Дата Окончане проекта

Сумма проекта

×