Меняем шапку сайта и делаем активную область с Adobe DreamWeaver'ом и без

Как я и обещал в статье про официальное открытие блога, в этой статье я опишу подробнее, какие я сделал настройки у себя на блоге. 

Перво-наперво я решил немножко поменять внешний вид сайта. Чтобы это сделать надо немножко покопаться в шаблоне. Так как по умолчанию стоял шаблон "Default" (читается "дифолт", в данном случае это слово обозначает "по умолчанию", то есть, настройка (опять же, в данном случае имеется ввиду шаблон), которая стоит до того, как кто или что-либо его не изменит. К примеру, экран монитора по умолчанию чёрный, пока кто-то его не включит или не покрасит), то мы меняем настройки в нём. Дабы не наделать делов с размерами шапки, я взял шапку сайта, использующуюся в шаблоне - ведь нужно менять изображение которое совпадает по размерам с оригиналом, не то, если размер будет различаться по длине и/или высоте, это может обернуться несостыковками в шаблоне или ещё чем похуже.

Итак, вначале делаем в ФотоШопе, Пэйнте или любой другой программе шапку сайта. Затем запускаем ДримУивер. В верхней части находим и нажимаем кнопку "Веб-Сайт" и выбираем в появившемся окне вариант "Управление веб-сайтом".



В появившемся окне нажимаете "Создать", затем в выпадающем меню нажимаем "FTP & RDS Server"

Теперь нам надо найти тот файл, который отвечает за оформление шапки сайта. В правой нижней части программы появилось окно с папками и файлами вашего сайта. Идём в папку шаблона (если у вас стоит шаблон по умолчанию, то /application/maxsite/templates/default, если другой, то вместо папки default идём в папку шаблона, что у вас стоит) и находим там файл main-start.php - именно в нём и хранятся настройки шапки сайта и верхней его части.

Между делом хочу обратить ваше внимание на три кнопки в верхней части экрана - "Код", "Разделение", "Дизайн". С их помощью вы можете управлять вариантами отображения открытой страницы - вы можете увидеть только код страницы, только то, как она будет выглядеть (к сожалению, DreamWeaver не может отобразить все элементы страницы сайта на MaxSiteCMS, но того, что он отображает, вполне достаточно) или же разделённый экран - на одной половине код, на второй половине визуальное представление. Также хочу чтобы вы обратили внимание на кнопку, находящуюся слева от поля поиска. По умолчанию там написано "Дизайнер". Нажатие на эту кнопку меняет позволяет выбрать наилучший вариант компоновки панелей инструментов для определённых типов людей. Скажем, если вы больше занимаетесь визуальным дизайном, то вам больше всего подойдёт вариант "Дизайнер" или "Дизайнер +", а если копание в коде вам милее, то к вашим услугам другие варианты.  Там же можно создать свою компоновку ("Создать рабочее простраство"), восстановить компоновку по умолчанию и пр.

Нажимаем Вставка - Изображение или Control + Alt + I. Выбираем нужное изображение с компьютера и кликаем два раза на него.

Выбираем нужное изображение и подтверждаем выбор любым из доступных способов (нажимаем на нужный файл два раза левой кнопки мыши или нажимаем один раз на нужный файл и нажимаем ентер, либо выделяем левой кнопкой мыши нужный файл и нажимаем той же кнопкой ОК, либо переходим кнопкой Tab на клавиатуре в окно выбора файла, выделяем нужный файл и нажимаем ентер, или правой кнопкой мыши на нужным файле... А ещё можно нажать ОК переходом на него с помощью кнопки tab и нажатием пробела. В общем, способов действительно много. Иной раз даже поражаешься - создатели windows так вроде продумали некоторые вещи, а иные сделаны у них через пень-колоду. Но это уже другой вопрос).



На вопрос, копировать ли файл в папку с сайтом, отвечаем "Да", иначе, если изображение будет только на вашем компьютере, ни откуда, кроме с вашего компьютера и/или компьютера, имеющего такую же структуру папок как у вас, изображения не будет видно.



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



Теперь вам предложат ввести в поле "Замещающий текст" так называемый альтернативный текст для изображения. Его увидят те, у кого либо не загрузилось изображение, либо те, у кого в браузере отключён показ картинок. Ещё его смогут прочесть с помощью специальных программ те, кто плохо видят или вообще не видят. Вы, конечно, можете не заполнять это поле, но я всё же рекомендую вам написать там предназначение этой картинки.



В результате у вас в основном окне появилось ваше изображение. Переместите это изображение в аккурат после третьего значка "php". Если хотите увидеть всё ли вы верно сделали - нажмите Control (Ctrl) + S для сохранения файла и зайдите в браузере на свой сайт. Если Вы всё верно сделали, то на сайте должны отображаться две шапки одна под другой - новая, а под ней старая.



Далее нам нужно создать так называемую активную область изображения, то есть область, при нажатии на которую пользователя будет перекидывать, куда нам надо. В моём случае, если на шапке изобрадена эмблема сайта, то логично бы было бы её сделать ссылкой, которая будет возвращать пользователя на главную (основную) страницу сайта. В правой части страницы (напоминаю - мы работаем с комопновкой "Дизайнер" находите кнопку справа от которой написано "Изображения" и нажимаем на стрелочку между изображением кнопки и текстом. Появится подменю, из которого мы выбираем "Нарисовать прямоугольную активную область"

Выделяем тот фрагмент рисунка, который мы хотим сделать активным с помощью левой кнопки мыши. Нажимаем "OK" в окошке, которое советует нам прописать альтернативный текст для слабовидящих людей. После прочтения этого окна я ещё сильнее стал уважать эту программу и её разработчиков. В нижней части окна вписываем необходимые параметры. "Ссылка" - сюда мы вписываем адрес, по которому будет перенаправлен человек, нажавший эту ссылку. В поле "Замещающий текст" вписываем альтернативный текст - нельзя делать работу, не уделив достаточного внимания всем, кому можно - людям с ограниченным траффиком и финансами, что они вынуждены экономить на этом самом траффике или, тем, кому ещё хуже - людям, что плохо видят или не видят совсем. Если же вы ошиблись с областью - не беда - её можно изменить путём перетаскивания прямоугольников по углам этой самой области

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

<?php
if ( $h2 = mso_get_option('image_header', 'templates', '') )
$h2 = 'style="background: url(' . getinfo('stylesheet_url') . 'images/' . $h2 . ') no-repeat;"';
?>
<div id="header2" <?= $h2 ?> >
<div>
<h1><a href="<?= getinfo('siteurl') ?>" style="<?= mso_get_option('h1_header', 'templates', '') ?>"><?= getinfo('name_site') ?></a></h1>
<h2><span style="<?= mso_get_option('h2_header', 'templates', '') ?>"><?= getinfo('description_site') ?></span></h2>
</div>

</div><!-- div id="header2" -->

Так же рекомендую найти строку 

<img src="/../../h2.jpg" alt="Шапка сайта" width="910" height="211" border="0" usemap="#Map" />

(у вас, разумеется, будет нечто похожее на это, но не точно так же) и вместо относительного пути "img src="/../../h2.jpg" прописать прямой путь "img src="/h2.jpg". Это вас предохранит от возможных проблем в будущем.

Осталось только нажать "Файл" - "Сохранить" или же Control + S и всё - то, что мы хотели, сделано.

Теперь остаётся только рассказать, как сделать это же без помощи Adobe DreamWeaver.

Открываете файл main-start.php Ищите код

<?php if (!mso_hook_present('main_menu')) { ?>

<div id="MainMenu">

<div id="tab">

<ul>

<?php

$def_menu = t('/ | Главная_NR_about | О сайте_NR_comments | Комментарии_NR_contact | Контакты_NR_sitemap | Архив_NR_feed | RSS', 'templates');

if ( $menu = mso_get_option('top_menu', 'templates', $def_menu) )

echo mso_menu_build($menu, 'selected', true);

?>

</ul>

</div><!-- div id="tab" -->

</div><!-- div id="MainMenu" -->

<?php } else mso_hook('main_menu'); ?>

<img src="/h2.jpg" alt="Шапка сайта" width="910" height="211" border="0" usemap="#Map" />

<map name="Map" id="Map">

<area shape="rect" coords="270,9,609,164" href="" alt="Переход на главную страницу сайта" />

</map>

Подробнее о некоторых тегах и о правилах написания тегов вообще вы можете прочитать здесь, а в данной статье я только в двух словах разъясню что к чему:

img src - адрес изображения. За ним идут теги, описывающие параметры этого изображения - альтернативный текст, ширина и пр.

usemap="#Map" - указание использовать карту активного изображения с именем "Map". Обратите внимания, что перед именем должен стоять знак диеза "#".

map name="Map" id="Map" - начало карты активной области. Map name - имя карты (их может быть и несколько). 

area shape="rect" - указание, что активная область имеет форму прямоугольника.

coords - координаты левого верхнего и правого нижнего угла активной области.

href - куда ведёт нажатие на эту самую область.

Затем удаляете тот фрагмент текста, что я указал выше, сохраняете и всё. Кончено, если вы знаете как это сделать, вручную это сделать быстрее, но с ДримУивером вы в какой-то мере защищены от ошибок, а если вы ещё и не знаете как это делается, то вручную отнюдь не лучший вариант создания активной области.

Вот так мы придали нашему сайту ещё одну отличительную особенность. Осталось только скопировать содержимое этой папки в другую в папку "/application/maxsite/templates". Это надо сделать для того, чтобы при обновлении движка случайно не затереть то, что мы сделали. При желании, можно переделать файл "screenshot.jpg" в новой папке шаблона, и который отображается при выборе шаблонов.

В одной из следующих статей я вам расскажу про свой выбор плагинов и виджетов на момент написания статьи. Следите за анонсами

P. S. Хочу поблагодарить Артура за его помощь в изготовлении активной области шапки моего сайта. Без него части этой статьи про активную область не было бы.

Сообщите об этой статье друзьям и знакомым - и вы этим поблагодарите автора.