Прежде чем создавать дизайн Web-проекта, а уж тем более начинать работать над отдельными страницами в Macromedia Dreamweaver, необходимо разработать его структуру. Допустим, мы решили сделать небольшой учебный сайт о нефти, ее составе, технологиях переработки и пр. Структуру такого сайта удобно представить в виде многоуровневого списка. К одному уровню будут относиться главная страница и, например, страница с краткой информацией о проекте и его создателях, к другому — пункты главного меню, т. е.
Структура сайта "Нефть: что мы знаем о ней?"
Использование двух-трех уровней меню позволяет оптимально распределить даже очень немалые объемы информации по сайту, сделав доступ к его страницам простым и удобным для пользователей. Меню более старшего уровня скорее всего уже осложнят структуру проекта. Кроме того, необходимо отметить, что в меню первого уровня не стоит включать более семи-восьми пунктов, иначе это также затруднит навигацию.
Утвердив структуру проекта, создадим для него отдельную папку — ), в которых мы и будем впоследствии размещать Web-страницы.
Для названий папок были выбраны английские слова: oil — нефть; about — о (в данном случае — о проекте); composition — состав; environmental — относящийся к защите окружающей среды, экологии; atmosphere — атмосфера; hydrosphere — гидросфера; fuels — топливо; petrochemistry — нефтехимия; refining — переработка; companies — компании; fractions — фракции; refineries — нефтеперерабатывающие заводы
(рис 2.1) Система папок, отражающая структуру проектаКогда структура проекта создана, самое время переходить к дизайну
Эскиз главной станицы создается в растровом графическом редакторе — как правило, в уже известном нам .
(рис 2.2) Эскиз главной страницы сайтаТакие элементы, как эмблема, силуэты капель в верхней части страницы, контуры иллюстраций с трубами и листьями, темно-синий кран внизу, имеющие, очевидно, векторный характер, создавались отдельно в редакторе Adobe Illustrator и затем экспортировались в Adobe Photoshop, масштабировались и размещались на эскизе.
Ширина эскиза составляет 900 пикселей. Эта величина была выбрана исключительно из тех соображений, что при разрешении монитора 1280x1024 пикселей (а такое разрешение установлено у большинства современных мониторов) в развернутом на весь экран окне ).
(рис 2.3) Эскиз главной страницы сайта, открытый в редакторе Adobe PhotoshopОтсутствие горизонтальной полосы прокрутки при масштабе изображения 100 % — важное преимущество: мы имеем перед глазами целостную картину дизайна, можем обнаружить и затем исправить некоторые неточности, которые с меньшей вероятностью обратили бы на себя внимание, будь на экране только часть эскиза.
Процесс превращения эскиза непосредственно в Web-страницу называется версткой. В нашем проекте мы рассмотрим верстку с помощью таблиц — наиболее простую и распространенную ее разновидность. Идея такой верстки заключается в следующем: необходимо представить Web-страницу в виде нескольких таблиц с невидимыми границами, так, чтобы каждый блок, будь то фрагмент текста, изображение, пиктограмма и т. д., располагался в какой-либо из ячеек таблицы.
Обратимся к рис 2.2, где изображен эскиз
первая строка — так называемая "шапка" сайта, включающая эмблему, название проекта, пиктограммы "домик" и "письмо";
вторая строка — главное меню;
третья строка — текстовый фрагмент о том, что представляет собой нефть;
четвертая строка — фрагменты статей о заводах и загрязнителях;
пятая строка — текстовый фрагмент об истории нефти;
шестая строка — нижняя часть страницы: авторские права, электронная почта, ссылка на раздел "О проекте".
Далее будем называть эту таблицу основной.
Итак, создадим в (рис 2.4) ). В появившемся окне установим необходимые параметры таблицы: 6 строк ) и нажмем Ok.
(рис 2.5) Окно добавления таблицыВ языке HTML таблица имеет следующий формат: сначала открывается тег ):
(рис 2.6) Структура таблицы в языке HTMLТаким образом, создав таблицу 6x1, мы получили следующий фрагмент html -кода:
<table width=quot;100%quot; border=quot;0quot; cellspacing=quot;0quot; cellpadding=quot;0quot;>
<tr>
<td>nbsp;</td>
</tr>
<tr>
<td>nbsp;</td>
</tr>
<tr>
<td>nbsp;</td>
</tr>
<tr>
<td>nbsp;</td>
</tr>
<tr>
<td>nbsp;</td>
</tr>
<tr>
<td>nbsp;</td>
</tr>
</table>
Очевидно, что пока ни в одной из ячеек ничего нет; в этом случае Dreamweaver автоматически расставляет в ячейках пробелы, т. е. символы ).
Далее поместим курсор в область первой строки и создадим в ней еще две таблицы, чтобы впоследствии расположить в их ячейках название и эмблему сайта, надпись "— что мы знаем о ней?" и пиктограммы "домик" и "письмо". Первая будет состоять из одной строки и двух столбцов (рис 2.7а), вторая — из двух строк и одного столбца и располагаться во второй ячейке первой (рис 2.7б).
(рис 2.7) а (сверху), б (снизу). Создание таблиц в верхней строке основной таблицы Первая строка основной таблицы имеет высоту 210 пикселей; такую же высоту следует задать для младшей из таблиц, т. е. второй (рис 2.7б) — тогда автоматически растянется и вся строка. Для этого выделим вторую таблицу, нажав на любую из ее границ. Другой способ выделить таблицу — поместить курсор в любую из ее ячеек, а затем выбрать нужный пункт в ).
(рис 2.8) Меню структуры Web-страницыКогда вторая таблица выделена, введем число 210 в поле ) и нажмем клавишу Enter.
(рис 2.9) Установка высоты таблицыПоследнее, что осталось сделать, — установить выравнивание по нижнему краю во всех ячейках, поскольку этого требует эскиз: на нем слово "Нефть" и надпись "— что мы знаем о ней?", а также обе пиктограммы находятся на одном уровне (рис 2.10).
(рис 2.10) Фрагмент эскиза главной страницыДля этого установим курсор в нужную ячейку таблицы или снова воспользуемся меню структуры Web-страницы, выбрав соответствующий пункт ).
(рис 2.11) Установка выравнивания по вертикалиТеперь, когда первая строка основной таблицы готова к размещению всех элементов, необходимо вырезать с эскиза
Затем кадрируем выделенный фрагмент: — красный), далее возьмем пробу цвета где-то посередине изображения и скопируем ( ).
(рис 2.13) Выделение фрагмента на эскизе(рис 2.12) Взятие пробы цветаПосле этого покинем меню выбора основного цвета, сделаем невидимыми слои с белым фоном (Background) и серой подложкой (Подложка) и сохраним изображение с помощью меню ). Наконец, нажмем кнопку Сохранить и сохраним изображение в папку ), дав ему название из латинских букв или цифр, например logo.gif.
(рис 2.14) Сохранение изображения для использования на Web-страницахМы сохранили название и эмблему в формате .gif, поскольку это изображение будет находиться на фоне подложки-градиента: ее цвет, как видно на эскизе, изменяется от светло- к темно-серому, а формат .gif поддерживает прозрачность. То же самое необходимо сделать и с двумя пиктограммами: сначала выделить их на эскизе, затем кадрировать и сохранить в папку graphics. В дальнейшем, если изображение не предполагается помещать на фоне градиента, можно использовать формат .jpg, который не поддерживает прозрачность, однако позволяет хранить миллионы цветов, в то время как .gif — не более 256.
Итак, после того как все изображения подготовлены, можно вставить их в соответствующие ячейки, воспользовавшись пунктом ) панели добавления объектов (рис 2.15).
Далее в нижней ячейке второй таблицы напишем фразу "—что мы о ней знаем?". В области редактирования Web-страница будет выглядеть так, как показано на рис 2.16. Тире, а также четыре неразрывных пробела между пиктограммами добавим с помощью уже известного меню Text панели добавления объектов.
(рис 2.16) Добавление изображений на Web-страницу(рис 2.15) Web-страница с добавленными элементамиЗавершив работу над первой строкой основной таблицы, перейдем ко второй, где располагается главное меню сайта. Для него создадим таблицу из одной строки и пяти столбцов; в каждой ячейке напишем соответствующий заголовок и сделаем его гиперссылкой: сначала выделим, затем воспользуемся пиктограммой
в конце поля ). Вертикальное выравнивание ячеек установим по верхнему краю, разноцветные полоски перед каждым из пунктов меню добавим позже.
(рис 2.17) Добавление гиперссылкиВ появившемся окне выберем пока пустую папку composition, в поле Имя файла впишем index.html и нажмем Ok. То же самое проделаем с остальными пунктами меню.
В третьей строке основной таблицы создавать дополнительные таблицы не будем, а просто добавим текст про нефть.
В четвертой строке создадим таблицу из двух строк и трех столбцов (рис 2.18).
(рис 2.18) Четвертая строка основной таблицыДобавим текст и иллюстрации с трубами, растением и красной полоской, предварительно сохраненные в формате ).
Число выделено полужирным: это говорит о том, что пропорция рисунка нарушена. В случае однотонной красной полоски такое нарушение вполне допустимо, в то время как для более сложных иллюстраций — фотографий, эмблем, декоративных надписей — нет. Вернуть изображению его первоначальные размеры позволяет пиктограмма
(рис 2.19) .
Добавим ссылки в текстовые фрагменты: с фразы "нефтеперерабатывающие заводы" — на файл refining\refineries\index.html, со слова "загрязнители" — на файл environmental\index.html, аналогично тому, как делали это с пунктами главного меню.
В пятой строке создадим таблицу из одной строки и двух столбцов: в левой ячейке разместим фотографию нефтяной вышки, в правой — первый абзац текста. Выравнивание правой ячейки установим по нижнему краю. Оставшиеся абзацы пустим после таблицы: для этого выделим ее одним из двух описанных выше способов, а затем просто нажмем на клавиатуре сначала клавишу Вправо, а затем Enter. Теперь курсор стоит под таблицей, и можно продолжать наполнение ячейки текстом.
В шестой строке создадим таблицу из одной строки и четырех столбцов: в первой ячейке разместится рисунок с краном, во второй — текст с указанием авторских прав и электронной почты, в третьей — ссылка "О проекте" ( about\index.html ) и в четвертой — желтая полоска. Чтобы сделать фрагмент текста ссылкой на адрес электронной почты, например, aboutoil@gmail.com, необходимо на панели свойств в поле Link ввести следующую конструкцию:
mailto:aboutoil@gmail.com
Все упомянутые ячейки должны быть выровнены по верхнему краю, а последняя — еще и по правому краю; для этого на панели свойств в списке Horz (сокращенно от horizontal — горизонтальный ) выберем позицию Right (правое).
Основная таблица полностью заполнена, т. е. вся необходимая информация уже размещена на главной Web-странице. Осталось поставить на пиктограмму "письмо" ссылку на адрес электронной почты — такой же, как и в нижней части страницы: выделим пиктограмму и воспользуемся полем ).
(рис 2.20) Отображение Web-страницы в браузере Microsoft Internet ExplorerТеперь нам осталось навести "косметический ремонт": установить отступы, цвет, размер и начертание шрифта для каждого текстового фрагмента, подложку верхней части страницы. Этому будет посвящен следующий урок.
В заключение вырежем из эскиза изображения, необходимые для подложки. Вернемся в редактор ).
(рис 2.21) Выделение фрагмента на эскизеЗатем выделим фрагмент, расположенный левее капель, причем ширина такого выделения может быть совсем небольшой: 10-15 пикселей. Также кадрируем и сохраним его.
Таким образом, в папке graphics должно находиться 11 изображений.
Прежде чем создавать дизайн Web-проекта, а уж тем более начинать работать над отдельными страницами в Macromedia Dreamweaver, необходимо разработать его структуру. Допустим, мы решили сделать небольшой учебный сайт о нефти, ее составе, технологиях переработки и пр. Структуру такого сайта удобно представить в виде многоуровневого списка. К одному уровню будут относиться главная страница и, например, страница с краткой информацией о проекте и его создателях, к другому — пункты главного меню, т. е.
Структура сайта "Нефть: что мы знаем о ней?"
Использование двух-трех уровней меню позволяет оптимально распределить даже очень немалые объемы информации по сайту, сделав доступ к его страницам простым и удобным для пользователей. Меню более старшего уровня скорее всего уже осложнят структуру проекта. Кроме того, необходимо отметить, что в меню первого уровня не стоит включать более семи-восьми пунктов, иначе это также затруднит навигацию.
Утвердив структуру проекта, создадим для него отдельную папку — ), в которых мы и будем впоследствии размещать Web-страницы.
Для названий папок были выбраны английские слова: oil — нефть; about — о (в данном случае — о проекте); composition — состав; environmental — относящийся к защите окружающей среды, экологии; atmosphere — атмосфера; hydrosphere — гидросфера; fuels — топливо; petrochemistry — нефтехимия; refining — переработка; companies — компании; fractions — фракции; refineries — нефтеперерабатывающие заводы
(рис 2.1) Система папок, отражающая структуру проектаКогда структура проекта создана, самое время переходить к дизайну
Эскиз главной станицы создается в растровом графическом редакторе — как правило, в уже известном нам .
(рис 2.2) Эскиз главной страницы сайтаТакие элементы, как эмблема, силуэты капель в верхней части страницы, контуры иллюстраций с трубами и листьями, темно-синий кран внизу, имеющие, очевидно, векторный характер, создавались отдельно в редакторе Adobe Illustrator и затем экспортировались в Adobe Photoshop, масштабировались и размещались на эскизе.
Ширина эскиза составляет 900 пикселей. Эта величина была выбрана исключительно из тех соображений, что при разрешении монитора 1280x1024 пикселей (а такое разрешение установлено у большинства современных мониторов) в развернутом на весь экран окне ).
(рис 2.3) Эскиз главной страницы сайта, открытый в редакторе Adobe PhotoshopОтсутствие горизонтальной полосы прокрутки при масштабе изображения 100 % — важное преимущество: мы имеем перед глазами целостную картину дизайна, можем обнаружить и затем исправить некоторые неточности, которые с меньшей вероятностью обратили бы на себя внимание, будь на экране только часть эскиза.
Процесс превращения эскиза непосредственно в Web-страницу называется версткой. В нашем проекте мы рассмотрим верстку с помощью таблиц — наиболее простую и распространенную ее разновидность. Идея такой верстки заключается в следующем: необходимо представить Web-страницу в виде нескольких таблиц с невидимыми границами, так, чтобы каждый блок, будь то фрагмент текста, изображение, пиктограмма и т. д., располагался в какой-либо из ячеек таблицы.
Обратимся к рис 2.2, где изображен эскиз
первая строка — так называемая "шапка" сайта, включающая эмблему, название проекта, пиктограммы "домик" и "письмо";
вторая строка — главное меню;
третья строка — текстовый фрагмент о том, что представляет собой нефть;
четвертая строка — фрагменты статей о заводах и загрязнителях;
пятая строка — текстовый фрагмент об истории нефти;
шестая строка — нижняя часть страницы: авторские права, электронная почта, ссылка на раздел "О проекте".
Далее будем называть эту таблицу основной.
Итак, создадим в (рис 2.4) ). В появившемся окне установим необходимые параметры таблицы: 6 строк ) и нажмем Ok.
(рис 2.5) Окно добавления таблицыВ языке HTML таблица имеет следующий формат: сначала открывается тег ):
(рис 2.6) Структура таблицы в языке HTMLТаким образом, создав таблицу 6x1, мы получили следующий фрагмент html -кода:
<table width=quot;100%quot; border=quot;0quot; cellspacing=quot;0quot; cellpadding=quot;0quot;>
<tr>
<td>nbsp;</td>
</tr>
<tr>
<td>nbsp;</td>
</tr>
<tr>
<td>nbsp;</td>
</tr>
<tr>
<td>nbsp;</td>
</tr>
<tr>
<td>nbsp;</td>
</tr>
<tr>
<td>nbsp;</td>
</tr>
</table>
Очевидно, что пока ни в одной из ячеек ничего нет; в этом случае Dreamweaver автоматически расставляет в ячейках пробелы, т. е. символы ).
Далее поместим курсор в область первой строки и создадим в ней еще две таблицы, чтобы впоследствии расположить в их ячейках название и эмблему сайта, надпись "— что мы знаем о ней?" и пиктограммы "домик" и "письмо". Первая будет состоять из одной строки и двух столбцов (рис 2.7а), вторая — из двух строк и одного столбца и располагаться во второй ячейке первой (рис 2.7б).
(рис 2.7) а (сверху), б (снизу). Создание таблиц в верхней строке основной таблицыПервая строка основной таблицы имеет высоту 210 пикселей; такую же высоту следует задать для младшей из таблиц, т. е. второй (рис 2.7б) — тогда автоматически растянется и вся строка. Для этого выделим вторую таблицу, нажав на любую из ее границ. Другой способ выделить таблицу — поместить курсор в любую из ее ячеек, а затем выбрать нужный пункт в ).
(рис 2.8) Меню структуры Web-страницыКогда вторая таблица выделена, введем число 210 в поле ) и нажмем клавишу Enter.
(рис 2.9) Установка высоты таблицыПоследнее, что осталось сделать, — установить выравнивание по нижнему краю во всех ячейках, поскольку этого требует эскиз: на нем слово "Нефть" и надпись "— что мы знаем о ней?", а также обе пиктограммы находятся на одном уровне (рис 2.10).
(рис 2.10) Фрагмент эскиза главной страницыДля этого установим курсор в нужную ячейку таблицы или снова воспользуемся меню структуры Web-страницы, выбрав соответствующий пункт ).
(рис 2.11) Установка выравнивания по вертикалиТеперь, когда первая строка основной таблицы готова к размещению всех элементов, необходимо вырезать с эскиза
Затем кадрируем выделенный фрагмент: — красный), далее возьмем пробу цвета где-то посередине изображения и скопируем ( ).
(рис 2.13) Выделение фрагмента на эскизе(рис 2.12) Взятие пробы цветаПосле этого покинем меню выбора основного цвета, сделаем невидимыми слои с белым фоном (Background) и серой подложкой (Подложка) и сохраним изображение с помощью меню ). Наконец, нажмем кнопку Сохранить и сохраним изображение в папку ), дав ему название из латинских букв или цифр, например logo.gif.
(рис 2.14) Сохранение изображения для использования на Web-страницахМы сохранили название и эмблему в формате .gif, поскольку это изображение будет находиться на фоне подложки-градиента: ее цвет, как видно на эскизе, изменяется от светло- к темно-серому, а формат .gif поддерживает прозрачность. То же самое необходимо сделать и с двумя пиктограммами: сначала выделить их на эскизе, затем кадрировать и сохранить в папку graphics. В дальнейшем, если изображение не предполагается помещать на фоне градиента, можно использовать формат .jpg, который не поддерживает прозрачность, однако позволяет хранить миллионы цветов, в то время как .gif — не более 256.
Итак, после того как все изображения подготовлены, можно вставить их в соответствующие ячейки, воспользовавшись пунктом ) панели добавления объектов (рис 2.15).
Далее в нижней ячейке второй таблицы напишем фразу "—что мы о ней знаем?". В области редактирования Web-страница будет выглядеть так, как показано на рис 2.16. Тире, а также четыре неразрывных пробела между пиктограммами добавим с помощью уже известного меню Text панели добавления объектов.
(рис 2.16) Добавление изображений на Web-страницу(рис 2.15) Web-страница с добавленными элементамиЗавершив работу над первой строкой основной таблицы, перейдем ко второй, где располагается главное меню сайта. Для него создадим таблицу из одной строки и пяти столбцов; в каждой ячейке напишем соответствующий заголовок и сделаем его гиперссылкой: сначала выделим, затем воспользуемся пиктограммойв конце поля ). Вертикальное выравнивание ячеек установим по верхнему краю, разноцветные полоски перед каждым из пунктов меню добавим позже.
(рис 2.17) Добавление гиперссылкиВ появившемся окне выберем пока пустую папку composition, в поле Имя файла впишем index.html и нажмем Ok. То же самое проделаем с остальными пунктами меню.
В третьей строке основной таблицы создавать дополнительные таблицы не будем, а просто добавим текст про нефть.
В четвертой строке создадим таблицу из двух строк и трех столбцов (рис 2.18).
(рис 2.18) Четвертая строка основной таблицыДобавим текст и иллюстрации с трубами, растением и красной полоской, предварительно сохраненные в формате ).
Число выделено полужирным: это говорит о том, что пропорция рисунка нарушена. В случае однотонной красной полоски такое нарушение вполне допустимо, в то время как для более сложных иллюстраций — фотографий, эмблем, декоративных надписей — нет. Вернуть изображению его первоначальные размеры позволяет пиктограмма(рис 2.19) .
Добавим ссылки в текстовые фрагменты: с фразы "нефтеперерабатывающие заводы" — на файл refining\refineries\index.html, со слова "загрязнители" — на файл environmental\index.html, аналогично тому, как делали это с пунктами главного меню.
В пятой строке создадим таблицу из одной строки и двух столбцов: в левой ячейке разместим фотографию нефтяной вышки, в правой — первый абзац текста. Выравнивание правой ячейки установим по нижнему краю. Оставшиеся абзацы пустим после таблицы: для этого выделим ее одним из двух описанных выше способов, а затем просто нажмем на клавиатуре сначала клавишу Вправо, а затем Enter. Теперь курсор стоит под таблицей, и можно продолжать наполнение ячейки текстом.
В шестой строке создадим таблицу из одной строки и четырех столбцов: в первой ячейке разместится рисунок с краном, во второй — текст с указанием авторских прав и электронной почты, в третьей — ссылка "О проекте" ( about\index.html ) и в четвертой — желтая полоска. Чтобы сделать фрагмент текста ссылкой на адрес электронной почты, например, aboutoil@gmail.com, необходимо на панели свойств в поле Link ввести следующую конструкцию:
mailto:aboutoil@gmail.com
Все упомянутые ячейки должны быть выровнены по верхнему краю, а последняя — еще и по правому краю; для этого на панели свойств в списке Horz (сокращенно от horizontal — горизонтальный ) выберем позицию Right (правое).
Основная таблица полностью заполнена, т. е. вся необходимая информация уже размещена на главной Web-странице. Осталось поставить на пиктограмму "письмо" ссылку на адрес электронной почты — такой же, как и в нижней части страницы: выделим пиктограмму и воспользуемся полем ).
(рис 2.20) Отображение Web-страницы в браузере Microsoft Internet ExplorerТеперь нам осталось навести "косметический ремонт": установить отступы, цвет, размер и начертание шрифта для каждого текстового фрагмента, подложку верхней части страницы. Этому будет посвящен следующий урок.
В заключение вырежем из эскиза изображения, необходимые для подложки. Вернемся в редактор ).
(рис 2.21) Выделение фрагмента на эскизеЗатем выделим фрагмент, расположенный левее капель, причем ширина такого выделения может быть совсем небольшой: 10-15 пикселей. Также кадрируем и сохраним его.
Таким образом, в папке graphics должно находиться 11 изображений.
Для получения официальных документов о завершении программы дополнительного профессионального образования (удостоверения о повышении квалификации, дипломов о профессиональной переподготовке и MBA) необходимо предоставить:
Внимание! Вы можете не заказывать доставку бумажной версии официального документы, а скачать его в электронном виде и распечатать самостоятельно. Информация о выданном документе в течение 1 месяца загружается в Федеральную информационную систему «Федеральный реестр сведений о документах об образовании и (или) о квалификации, документах об обучении» - ФИС ФРДО.
Доступ на новый сайт осуществляется с использованием адреса электронной почты, который был указан вами при регистрации на "старом". Мы постарались перенести все ваши данные с прежнего ресурса, однако не исключена вероятность потери части информации.
При возникновении проблемы со входом, воспользуйтесь функцией сброса пароля
Если вы обнаружите несоответствия, пожалуйста, сообщите нам.