eBay по русски

8 февраля 2010 г.

Меню главной страницы

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

<div id='foxmenucontainer'>
<div id='foxmenu'>
<ul>
<li class='page_item current_page_item'><a href='http://www.btemplate.ru'>Ссылка 1</a></li>
<li class='navlinks'><a href='YOUR-LINK-HERE'>Ссылка 2</a></li>
<li class='navlinks'><a href='YOUR-LINK-HERE'>Ссылка 3</a></li>
<li class='navlinks'><a href='YOUR-LINK-HERE'>Ссылка 4</a></li>
<li class='navlinks'><a href='YOUR-LINK-HERE'>Ссылка 5</a></li>
</ul>
</div>
</div>

Код может несколько отличаться, в зависимости от того, какие пункты имеются в установленном Вами шаблоне и как оно оформлено (я для примера взял шаблон "Charcoal2"), но большой разницы быть не должно. Поймете, что делать с этим шаблоном - разберетесь и с любым другим.
Если Вы не хотите, чтобы меню Вашего сайта вело на сайт Btemplate.ru, надо вырезать и удалить строчку (строчки), выделенные красным цветом. Сохраните изменения и просмотрите страницу. Первая ссылка меню с вашего сайта исчезла.
Теперь прикиньте, сколько Вам нужно пунктов в главном меню и сколько их там (с соответствии с Вашим шаблоном) может уместиться. Не знаете? Вернитесь в редактор HTML скопируйте строчку
<li class='navlinks'><a href='YOUR-LINK-HERE'>Ссылка 2</a></li>
и несколько раз вставьте в код, чтобы их стало не четыре, а 5, 6, 8... После каждой вставки сохраняйтесь и смотрите страницу. Как только меню подошло к краю страницы, остановитесь. Вышло за край или перешло на вторую строчку - уберите лишние строки.
Теперь в каждую такую строчку вместо слов YOUR-LINK-HERE вставляете полный адрес (с http://) нужной страницы Вашего сайта, а вместо Ссылка 2 - название пункта меню. Сохраните отредактированный шаблон. Ну, вот, Ваше меню готово.
В следующий раз мы попробуем несколько расширить его функции, установить свой favicon и, возможно, сделать еще что-нибудь...
Удачи! Пока.

5 февраля 2010 г.

Однообразное разнообразие

Читая сегодняшнюю запись, можно слегка расслабиться - сегодня не надо будет что-то понимать или в чем-то разбираться. Мы просто порассуждаем о том, как, сохранив единое оформление всех страниц нашего сайта, сделать их разнообразными по содержанию, причем не только основного текста, но и боковых колонок. Итак, что же нужно для того, чтобы, казалось бы, совсем разные страницы нашего сайта воспринимались посетителем как единое целое?
О главном условии этого единого стиля мы уже говорили - в основе оформления всех страниц сайта должен лежать один и тот же шаблон. Это безусловно, необходимое, но не единственное условие внешнего однообразия страниц. Например, представляется совершенно естественным, чтобы все пункты главного меню на всех страницах совпадали (пару-тройку раз встречал сайты, где на разных страницах в меню были разные ссылки). Я уже молчу о том, что это неудобно для перемещения по сайту, но это же просто некрасиво и сразу бросается в глаза. Типы, размеры и цвета шрифтов также должны быть одинаковыми, по крайней мере неразличимы невооруженным взглядом.
Кстати, о взгляде... Человек, резко переходя от одного изображения к другому, не в состоянии сразу охватить взглядом все изображение, особенно если на нем есть какие-то резко контрастирующие с общим фоном зоны, месторасположение которых резко отличается от месторасположения таких же контрастных зон на предыдущем рисунке. Ну, а если, к тому же, и фон у изображений примерно одинаков, то при резкой смене таких изображений, например, на экране монитора, глаз, а следом - и мозг человека - будет испытывать откровенный дискомфорт. Во избежание этого сменяемые рисунки надо подбирать таким образом, чтобы те их элементы, которые в силу своей яркости и контрастности сразу привлекают внимание, располагались на всех рисунках примерно в одном месте. Оптимальный вариант такого подбора должен привести к тому, что человек при смене изображения в первый момент вообще не заметит разницы.Часть этой работы за нас уже сделали разработчики шаблона, но и мы можем внести в это дело свою лепту. Предположим, на страницах Вашего сайта установлен яркий, броский информер часов или погоды (или любой другой гаджет, не несущий информации, важной именно для той страницы, на которой установлен). Установите их в одном и том же месте на каждой странице и переход с одной странице на другую станет заметно комфортнее. Если Вы, как на моем сайте используете новостные блоки, Установите их примерно, а лучше, точно в одном месте, пусть они даже и называться будут по другому. То же самое и с блоками контекстной рекламы и с баннерами, особенно большими и контрастными с основным фоном (впрочем, это, признаюсь, спорно - когда при входе на страницу рекламный баннер бросается в глаза, оказавшись в том месте, где только что ничего не было, это, наверное не так уж и плохо, на то он и баннер). Хочу уточнить - все сказанное особенно важно для верхней части страниц, ведь именно они сменяют друг друга на экране монитора. Не лишним будет и установить на все страницы сайта собственный фавикон - маленькую иконку слева от названия сайта в адресной строке или панели закладок.
Когда мы перейдем к оформлению отдельных страниц, мы поговорим об этом подробнее, а пока я хочу, чтобы те из Вас, кто совершенно ничего не понимает в HTML-кодах, прочитали бы хотя бы об основах разметки web-страниц, например, вот здесь (очень просто и понятно, по-моему), чтобы хоть в общих чертах, примерно, как я, представлять, что такое теги, параметры, атрибуты, как они обозначаются в HTML-разметке и как эта разметка вообще выглядит. В следующий раз мы с Вами полезем в настройки шаблона и начнем менять в своих интересах его HTML-код. Пока. Удачи!