Создаем свой первый сайт

на страницах сайта 

www.electrosad.ru

Шаг первый

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

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

Но у Интернет и сайтостроения есть своя специфика. Она заключается в специфических требованиях к тексту и иллюстрациям, и самое главное к организации структуры сайта.

Первый Web проект

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

Все это составные части сайта.

Например:

1. Главная страница.
2. Раздел А
   1. Страница 1
   2. Страница 2
   3. Страница N
3. Раздел С
1. Страница 1
2. Страница 2
3. Страница N
4. Раздел Z
1. Страница 1
2. Страница 2
3. Страница N

Это уже набросок структуры сайта. И это оглавление можно будет использовать как его часть для страницы содержащей карту сайта.

Структура сайта

На основании подготовленного оглавления уже можно двигаться дальше и готовить его структуру. Сравните оглавление и рис.1. Это практически одно и то же.

Рисунок 1

 Примерная структура сайта показана на рисунке 1.

Главная страница сайта.

Заголовок это практически первая - главная страница сайта. Она подобна первой странице книги и содержит:

1. Название сайта.
2. Краткую информацию о нем, и если Вы захотите его реквизиты(автор, время создания, адреса для связи и другие)

Но она имеет и отличия.

При входе на Ваш сайт, посетитель должен получить представление о Вашем сайте, его тематике и содержимом. Поэтому первая страница должна содержать навигационные инструменты (меню), анонсы Ваших статей со ссылками на них и информацию для посетителей.  По умолчанию имя главной страницы index.htm.

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

Навигация по сайту. 

Навигация должна: 

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

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

Главная страница раздела.
На ней обычно кратко освещается содержание раздела и находится навигация по его страницам, в виде оглавления с краткими аннотациями материалов находящихся на страницах.

Статьи или стандартная страница.
Все рекомендации изложенные в разделе "В чем заключается специфика требований к содержанию страницы?" полностью можно отнести к стандартной странице.

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

 В чем заключается специфика требований к содержанию страницы?

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

Тут же можно изложить и требования к графике.

Применяемая на сайтах графика имеет три формата.

Для полутоновых рисунков используются рисунке в формате jpeg, этот формат отличается хорошим сжатием полутоновых рисунков. Причем их качество напрямую зависит от степени сжатия. Для размеров файла такого рисунка важен и его физический размер, от него тоже существенно зависит размер файла картинки. Поэтому при их сжатии необходимо оптимизировать как размер картинки, так и степень ее сжатия. И обратите внимание! Нет особой необходимости помещать на странице рисунок размером 2592х1944 px и потом с помощью HTML редактора определять ему размер 600х450 px. Такой рисунок только займет лишнее место на сервере и компьютере посетителя, это будет увеличивать трафик.

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

Формат png, говорят, совмещает в себе достоинства форматов jpeg и gif, но требует знаний при его применении, кроме того старые браузеры его не понимали, поэтому если Вы хотите, чтобы ваши материалы могли смотреть, в том числе, и посетители со старыми браузерами, придется пока отказаться от его применения.

Я бы рекомендовал, особенно на начальном этапе, использовать графические файлы размером до 15 Кб (6-12 Кб) и общим размером 75-100 Кб на страницу. Для того чтобы при сжатии не становилось нечитаемым изображение , перед сжатием необходимо его кадрировать выбирая значимые участки изображения. А применение оптимальных форматов (jpeg или gif) позволяет существенно снизить размер файла картинки, при сохранении ее читаемости.

Для примера и чтобы оценить Вашу усидчивость помочь Вам определиться с оформлением Вашего сайта, можно рекомендовать посмотреть страницы с описанием различных комплектующих и их исследований на Интернет порталах 3Dnews,  iXBT - Hardware и множество других. Большинство из них сами имея размер 50-150 Кб, еще несут на себе 200 - 600 Кб графики. Чтобы их посмотреть требуется ждать. Но это уважаемые порталы там мы вынуждены ждать. Но будут ли ждать наши посетители?

С размером рисунка Вы должны определиться сами, но можно рекомендовать размер по максимальный  стороне 400-600 px.

Цветовая гамма сайта.

Ваша цветовая гамма определяется Вами, но Вы не должны забывать о Ваших читателях. А сочетания цветов позволяющих без напряжения читать текст можно подобрать с помощью таблицы COLORS Игоря Васильевича Пустовалова. Поскольку автор не отвечает, поместил копию его страницы в виде RAR архива, ее можно скачать по ссылке.
Главное требование фон текста Вашей страницы - сайта должен быть мягкий светлых тонов. Я бы не рекомендовал использовать темный фон (черный или темные оттенки цветов) даже применяя светлые жирные шрифты размером более 12 pt. Хотите проверить - попробуйте, все что я не видел в Интернет производит отвратное впечатление. Тем более, что человеческому глазу более привычен темный текст на светлом фоне.

Примеры читаемости цветов показаны на рис.1 - это небольшой фрагмент таблицы.

Рисунок 1.

Из этой таблицы можно подобрать желаемое сочетание цвета шрифта и фона (например FFE4C4/00008B, где первая цифра назначает цвет шрифта, а вторая фона). Таблица обширна и позволяет подобрать необходимое сочетание цветов.

Или такая же таблица, но с жирным шрифтом, на 16 стандартных цветов Web.

Семь лет назад существовали рекомендации делать страницы для просмотра на мониторе 640х480, 2-3 года назад рекомендовали 800х600 точек. Сейчас для принятия решения требуется посмотреть анализ статистики посещений сайта, для моих сайтов, последнее время, она дает такие параметры мониторов пользователей Интернет:

Делая сайт и его страницы на монитор с экраном шириной 1024 точки, мы позволим смотреть страницу без скроллинга  94% посетителей, а применяя автоматическое развертывание по размеру экрана их смогут комфортно смотреть более 98%.

Поэтому сейчас можно рекомендовать делать страницы сайта для монитора с шириной экрана 1024 точек.

Обратите внимание на малоразмерные экраны. Пользователи мобильных телефонов тоже пытаются просматривать сайты, но сайты для мобильников надо делать специально.

Теперь, что касается размера тяжести страниц для их загрузки.

Не смотря на то, что сейчас повсеместно внедряются высокоскоростные подключения к Интернет, я бы рекомендовал использовать файлы размером не более 150 Кб, включая графику. При скоростях около 12Кб/сек (Это считается высокоскоростное подключение) загрузка такой страницы займет до 15 сек, а на соединении Dual-Up ее загрузка займет от 28 сек до минуты. Большинство нетерпеливых пользователей просто не будут ждать. Считая что сайт не загружается они просто уйдут с вашего сайта.

  Часть 1 - Часть 2 - Часть 3 - Часть 4 - Часть 5 - Часть 6 - Часть 7

Ссылки:

• Сайт это просто. Альтернативное использование таблиц  http://www.freetech.nm.ru/html/tables2.html
•  Руководство по HTML Nikolai Chuvakhin http://www.citycat.ru/doc/HTML/chubook/
• Краткая информация о WWW проекте http://www.citycat.ru/doc/HTML/short/index.html
• Учебник HTML http://ru.html.net/tutorials/html/

<<назад>> <<в начало>> <<на главную>>

/Неизвестный процессор/Охлаждение ПК/Электроника для ПК/Linux/Проекты, идеи/Полезные советы/Разное/
/Карта сайта/Скачать/Ссылки/Обои/

При полном или частичном использовании материалов ссылка на "www.electrosad.ru" обязательна.
Ваши замечания, предложения, вопросы можно отправить автору почтой.

Copyright © Sorokin A.D.

2002 - 2020