Отправляет email-рассылки с помощью сервиса Sendsay
  Все выпуски  

Размышления об эффективном веб-дизайне - Выпуск 8. Домашняя страничка. Структура.


Служба Рассылок Subscribe.Ru

Да неиссякнет Ваш коннект, дорогие читатели!

Напоминаю, что оптимальным решением для просмотра рассылки
есть сохранение в файл и просмотр браузером Internet Explorer версии 5 или выше.


8. Домашняя страничка. Структура.


Обращение к читателям

Практикум мы будем делать насыщенным. То есть, будет "достаточно желанным" выполнение всех инструкций.

Есть, правда, два пути выполнения практикума:

1) Для тех, кто уже знает что-то и чувствует себя уверенно. Вы можете как угодно изменять приводимые мною примеры.

2) Для тех, кто ещё не уверен в себе. Попробуйте следовать моим рекомендациям. Если что-то у Вас не получается - буду стараться помочь.

Есть ещё одна заметка - без Вашего активного участия, господа, мало что получится из всего, запланированного мною к освещению в этом курсе. Я искренне надеюсь на Ваше понимание данного факта.

Философия

Итак, давайте продумаем структуру.

Сегментируем нашу страницу на несколько частей. Так будет удобнее всем: пользователю - воспринимать информацию, нам - модифицировать. Я предлагаю за основу взять структуру след. вида таблицы:

[ логотип ]
[ что-то умное, или баннер ]
[ содержание ]
[ контент ]
[ кто это всё делал - копирайты]

В виде HTML этот макет (с заголовками и т.д.) будет иметь вид:


<HTML>

 

<HEAD>

<TITLE>Моя домашняя страничка</TITLE>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">

</HEAD>

 

<BODY>

<table width="400" border="1" cellspacing="0" cellpadding="2" align="center">
  <tr bgcolor="#CCCCCC">
    <td>[ логотип ]</td>
    <td>
      <div align="right">[ что-то умное, или баннер ]</div>
    </td>
  </tr>
  <tr bgcolor="#CCCCCC">
    <td height="60">[ содержание ]</td>
    <td height="60">
      <div align="center">[ контент ]</div>
    </td>
  </tr>
  <tr bgcolor="#CCCCCC">
    <td colspan="2">
      <div align="center">[ кто это всё делал - копирайты]</div>     </td>

  </tr>

</table>

</BODY>

 

</HTML>


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

Обратите внимание на аттрибут colspan последнего тэга td. Данный атрибут указывает, сколько столбцов будут объединены в одну ячейку. Для объединения рядов существует аттрибут rowspan, действие которого аналогично. Зачем нам это? Допустим, что мы центрируем копирайт по странице, а не по ячейке таблицы. Следовательно, нам нужен копирайт в ширину таблицы - а это и есть наша ячейка.

Соответственно, такой шаблон HTML-странички будет более или менее сохраняться у нас на сайте. Это обеспечит достаточно приятный к восприятию интерфейс.

Обговорим же части данного шаблона.

Логотип. Предположительно - Вы захотите, чтобы пользователь знал, где он находится. Ему это подскажет логотип. Ведь цветовая гамма - не уникальна. Число цветов ограниченно и Вы не сможете создать уникальную гамму цветов. Пользователь же будет (в первую очередь) воспринимать Вашу страничку подсознательно, а потом уж рассматривать.

Содержание. Вероятно, у Вас сайт не из одной страницы. И с каждой страницы Вашего сайта должен быть доступ к другим его страницам, хотя бы - к основным (тем, которые содержат ссылки на второстепенные). Тут - место для деятельности. Так сказать, решайте сами, как всё будет здесь.

Что-то умное или баннер. Я не буду говорить об этой части в том плане, чего умного вписывать тудыть или какой баннер лепить - это дело каждого. Если не придумаете - пустая тоже ничего выглядит. Даже лучше, чем та, которая "не в тему".

Контент. Без комментариев. ;-)

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

Это - коротко о структуре сайта. Если я рассказываю слишком уж "прописные истины" - сообщите мне об этом. Но я продумал Вашу страничку, а потом решил помочь Вам в её создании. Один из самых частых комплексов - "Вот, я сделаю всё, размещу, а кто ко мне заходить будет?" - у нас просто не имеет смысла. Я думаю, всем будет интересно сравнить свои и чужие творения - кто и где что и как сделал. У нас же не проводят рейтинг! Не бойтесь споткнуться, сделав шаг, ибо, если Вы не сделаете этого шага, Вы не сдвинетесь с места - а тогда грош цена всему тому, что Вы читаете.

Форум

Форум будет тематический.

Что это значит? Очень просто - тема данного выпуска появится в форуме следующего и т. д. Будет также форум "общий", куда я буду складывать все вопросы, которые не подходят по теме к данному выпуску "Форума".

 

 

[!] URL'ы домашних страничек будут в секции примечаний.

 

Для того, чтобы задать вопрос, пошлите его сюда.
Отвечать будут: наша команда и читатели рассылки.

2 совета

Совет 8.1. (полезный)
О контурах и стилях, тексте и цветах.
Подойдите к этому вопросу прецизионно. Ведь совершенно не обязательно показать пользователю всю структуру "швами наружу". "Закрасить швы" можно элементарным указанием аттрибута border="0" в тэге таблицы (table). И ещё. Ваша таблица мала - заметили? Допишите в тэг таблицы аттрибуты высоты и ширины, например, так "<table ... width="100%" height="100%">" и наблюдайте разницу!

Совет 8.2. (полезный)
Кое-что о контенте, или просто подсказка.
Что указывать в контенте Вашего сайта? Очевидно, рассказать пользователю, что он тут найдёт - не всё, разумеется. Почему не всё сразу и в точности? Элементарно... В таком случае у Вашего посетителя не будет возникать интерес исследовать Ваш ресурс. А если и после такой "интриги" интерес не возникнет - не отчаивайтесь. Два-три случайных хита Вашей статистике "погоды не сделают".

Примечания

По данному шаблону (почти) построена дом. страничка ведущего рассылки, которая живёт тут. Посмотрите её и, если захотите, для себя оцените - доступность восприятия информации; структуризированность.

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


Напоминаем, впрочем - как и всегда, о том,
что материалы рассылки "Эффективный веб-дизайн"
готовятся командой [ Alex-N software ].

До новых виртуальных встреч!

Детально о рассылке читайте на нашем сайте.


http://subscribe.ru/
E-mail: ask@subscribe.ru
Отписаться
Убрать рекламу

В избранное