Шапка сайта Переход на главную страницу сайта

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

Рубрика: Учебные статьи -> Интернет
Метки: |
Воскресенье, 7 февраля 2010 г.
Просмотров: 24286
Настроение: Уставше-довольное
В колонках звучит: Ария - Следуй за мной
Подписаться на комментарии по RSS

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

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

Я опишу процедуру замены шапки с Adobe Dreamweaver CS4, (скачать русскую и английскую версию можно здесь, подробнее об установке тут), хотя, безусловно, можно обойтись и без него, и этот процесс я тоже опишу. Целью описания сего действа именно с ДримУивером является знакомство с этой программой - одной из лучших на сегодняшний день программы для вебразработчика и дизайнера.

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

Начало процедуры подключения к серверу

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

В результате появится окно "Настроить сервер", в которое требуется вписать данные Вашего хостинга. Подробнее об этом можно прочесть тут. Могу добавить только, что в поле "Имя" вписывается любое значение - если у вас много сайтов, к которым вы подключаетесь с помощью ДримУивера, это поле здорово облегчит вам жизнь, так как под этим именем вы будете видеть тот или иной сайт. В поле "Каталог на сервере" следует вписать путь к папке на сервере хостинга, в котором хранится ваш сайт. К примеру, в моём случае этот путь выглядит так: "/public_html/iarbest.ru" Вписав всё, что надо, нажимаете мышью кнопку "OK" или на клавиатуре ентер.

Ввод данных для подключения к серверу
После этого появился список всех сайтов, в котором выбираете только что добавленный и нажимаете кнопку "Готово"

Выбор нужного проекта

Теперь нам надо найти тот файл, который отвечает за оформление шапки сайта. В правой нижней части программы появилось окно с папками и файлами вашего сайта. Идём в папку шаблона (если у вас стоит шаблон по умолчанию, то /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". Это вас предохранит от возможных проблем в будущем.


Файл, отвечающий за отображентие шапки сайта в виде css-кода

Осталось только нажать "Файл" - "Сохранить" или же 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" в новой папке шаблона, и который отображается при выборе шаблонов.

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


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

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

twitter.com facebook.com vkontakte.ru odnoklassniki.ru mail.ru ya.ru blogger.com livejournal.ru google.com bobrdobr.ru

Комментариев: 11

  1. 2010-02-08 в 01:21:46 | Артур

    Я всегда к твоим услугам, Друг.tongue wink

  2. 2010-03-01 в 04:33:21 | Антон

    Спасибо за детальное разжовывание темы как оформить сайт. Аможно еще попросить написать так же детально как сделать кнопки на сайте иих оформить? Сайт в закладках уже давно))).

  3. 2010-03-01 в 05:29:21 | Яр Бест
    ]]>]]>

    Спасибо. Рад, что понравилось. Вы говорите про кнопки перехода по рубрикам?

  4. 2010-03-04 в 09:18:00 | Антон

    Хотелось бы покрасивее оформить сайт.

  5. 2010-03-04 в 20:51:52 | Яр Бест
    ]]>]]>

    Постараюсь в ближайшее время что-то написать на интересующую Вас тему.

  6. 2010-03-26 в 04:56:35 | Комментатор 4
    ]]>]]>

    Уважаемый, я так понимаю, что вы хорошо во всём этом разбираетесь.

    question Подскажите как реализовать чтобы шапка сайта прогружалась только один раз, т.е. при переходе по ссылки на своем же контенте естественно, не происходила перезагрузка шапки.

    (контент динамический).

    Заранее буду благодарен за ответ.

  7. 2010-03-26 в 06:36:22 | Яр Бест
    ]]>]]>

    Я попросил ответить на Ваш вопрос модератора форума поддержки MaxSite Wave (wave.fantregata.com). Вот его ответ:

    На своём же контенте — имеется в виду на своём сайте, внутри сайта? Или в пределах одной страницы?

    Варианты начиная с кэширования на стороне клиента — картинки у нормально настроенного посетителя должны кэшироваться в любом случае и не перезагружаться на каждый чих. И заканчивая... А собственно, практически ничего сделать больше нельзя. Разве что сделать сайт на ajax — но это не для средних веб-мастеров.

  8. 2010-05-20 в 20:39:20 | SvetlichokDom

    Может посоветуете как часто нада блог обновлять чтоб результат хороший был?

  9. 2010-05-21 в 05:09:40 | Яр Бест
    ]]>]]>

    SvetlichokDom, к сожалению, чего-то определённого посоветовать не могу, однако многие рекомендуют ни реже 2-ух раз в неделю.

  10. 2010-08-09 в 00:57:53 | Girinovskiy

    хотели бы предложить вашему блогу сотрудничество, подробнее в лычке.

  11. 2010-08-09 в 01:32:46 | Яр Бест
    ]]>]]>

    Girinovskiy и в какой же лычке?

Оставьте комментарий!

Не регистрировать/аноним

Используйте нормальные имена.

Если вы уже зарегистрированы как комментатор или хотите зарегистрироваться, укажите пароль и свой действующий email.
(При регистрации на указанный адрес придет письмо с кодом активации и ссылкой на ваш персональный аккаунт, где вы сможете изменить свои данные, включая адрес сайта, ник, описание, контакты и т.д.)



grin LOL cheese smile wink smirk rolleyes confused surprised big surprise tongue laugh tongue rolleye tongue wink raspberry blank stare long face ohh grrr gulp oh oh downer red face sick shut eye hmmm mad angry zipper kiss shock cool smile cool smirk cool grin cool hmm cool mad cool cheese vampire snake excaim question

(обязательно)