Напоминаю, что оптимальным решением для просмотра рассылки есть сохранение в файл и просмотр браузером Internet Explorer версии 5 или выше.
8. Домашняя страничка. Структура.
Обращение к читателям
Практикум мы будем делать насыщенным. То есть, будет "достаточно желанным" выполнение всех инструкций.
Есть, правда, два пути выполнения практикума:
1) Для тех, кто уже знает что-то и чувствует себя уверенно. Вы можете как угодно изменять приводимые мною примеры.
2) Для тех, кто ещё не уверен в себе. Попробуйте следовать моим рекомендациям. Если что-то у Вас не получается - буду стараться помочь.
Есть ещё одна заметка - без Вашего активного участия, господа, мало что получится из всего, запланированного мною к освещению в этом курсе. Я искренне надеюсь на Ваше понимание данного факта.
Философия
Итак, давайте продумаем структуру.
Сегментируем нашу страницу на несколько частей. Так будет удобнее всем: пользователю - воспринимать информацию, нам - модифицировать. Я предлагаю за основу взять структуру след. вида таблицы:
[ логотип ]
[ что-то умное, или баннер ]
[ содержание ]
[ контент ]
[ кто это всё делал - копирайты]
В виде HTML этот макет (с заголовками и т.д.) будет иметь вид:
<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 ].