Добрый день. Кратко расскажу об основной ошибке при создании главного меню на сайте.

На JoomlaForum есть раздел «Мой сайт на Joomla», который я периодически просматриваю. Глядя на работы новичков я, честно говоря, прихожу в ужас. Большинство работ сделаны по советам «10 грубейших ошибок при создании сайта», только советы были интерпритированы с точностью наоборот. Хочу немного обобщить всяческие советы непосредственно для меню.

Основная ошибка: слишком много пунктов меню

Зачем больше 5 пунктов в главном меню? У вас всегда есть футер. И тот человек, который ищет что-то конкретное, всегда докрутит до футера и кликнет, на интересующий его пункт меню. Вот пример отвратительного меню:

Главная | О нас | Почему мы | Цены | Услуги | Скидки | Акции | Предложение посредникам | Вакансии | Наша техника | Задайте нам вопрос |

Добрый день. В данном топике я хочу рассказать вам об основных «косяках» при создании главной страницы вашего сайта. А именно, хочу предостеречь вас от создания очередного унылого сайта, которых с каждым днем становится все больше и больше.

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

Шапка сайта

В шапке сайта укажите название вашего ресурса. Если название абстрактное, например
«Стуслов и сотоварищи», то постарайтесь написать небольшую аннотацию к названию вашего ресурса, например:

«Стуслов и сотоварищи»

Меховое ателье

Это сразу даст вашему посетителю понятие о том, чем занимается г-н Стуслов

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

Попытаюсь поставить таких людей на путь истинный.

Для примера я взял одну из своих фотографий. Оригинальный размер: 2816 × 2112, размер файла 2.6 MB. Много, не правла-ли? Попробуем вставить ее на сайт вышеупомянутым «рукотазым» методом.

<img src="original_photo.jpg" width="640" height="480">

Все нормально, фото небольшое, но весит так-же как и раньше — 2.6 MB. Этого доспускать нельзя. Открываем графический редактор и меняем размер фото, потом сохраняем как JPG.

Размер изображения 640x480, размер файла 603 kb.

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

Основные ошибки при верстке текста (контента) на сайте.

Несемантическая верстка

• Списки
  

  Неверно:

   - Пункт один;&lt;br&gt;<br /> - Пункт два;&lt;br&gt;<br /> - Пункт три.&lt;br&gt;<br /> &lt;br&gt;<br /> 1. Пункт один;&lt;br&gt;<br /> 2. Пункт два;&lt;br&gt;<br /> 3. Пункт три. 

  
  

  Верно:

   
  • Пункт один;
   
  • Пункт два;
   
  • Пункт три.
  1. Пункт один;
   
  2. Пункт два;
   
  3. Пункт три.
• Параграфы
  

  Неверно:

  Параграф один. <br><br>
  
  Параграф два.
  
  

  Верно:

  Параграф один.

  <code><br />

Параграф два.

Неверно:

<code><span style="text-size: 24px;">Заголовок</span><br />

Подзаголовок

<code><br />

Подзаголовок

Верно:

<code><br />

<code><br />

Встречаются и другие ошибки, но эти зачастили. Советую загуглить запрос «семантическая верстка». Там конечно рассказано про CSS, но все те правила нужно использовать и при верстке текстов. Основной смысл такой — если делаем спискок, то делает его тегом списка, если делаем заголовок, то тегом заголовка и т.д.

Перенос предлогов
на новую строчку

• Используем непереносимый пробел
  

  Ошибочно:

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

  Грамотно:

  В&nbsр;чащах юга жил&nbsр;бы цитрус? да, но&nbsр;фальшивый экземпляр!

Для этого есть специальные утилиты, например «Реформатор»

Картинки без отступов

У любой картинки в тексте должен быть отступ, поэтому нам необходимо создать всего-лишь одно правило на CSS. Если блок с вашим контентом имеет id="content", то правило будет выглядеть так:

• Отступы у картинки

   #content img {margin: 20px;} 

Тег readmore в неположенном месте

Если вы поставите тег readmore в случайном месте, то все открытые до него теги будут закрыты тегами верстки, что в свою очередь на 99% перекосит весь дизайн сайта, особненно если вы используете div в верстке текста.

• Тег readmore
  

  Ошибочно:

  В чащах юга жил бы цитрус?

  ---

  да, но фальшивый экземпляр!
  
  

  Грамотно:

  В чащах юга жил бы цитрус?
  
  

  ---

  
  
  да, но фальшивый экземпляр!
  
  

Делайте верно, и оно будет красивым.

P.S. Скопировали — вставили текс из WORD — бросьте в себя камень, бейте себя по рукам, наймите здоровенного мужика с волосатыми руками, который будет стучать вам по голове, когда вы делаете это. Так делать нельзя ни в коем случае.