Положение со стилем: исправление земельного суда маори

«Эй, Джо, можешь добавить ссылку на страницу» Решения «со страницы» Добро пожаловать «?»

«Нет проблем, все может быть сделано, если будет достаточно времени», — отвечаю я.

«Нам нужно на следующей неделе».

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

Дилемма

Это дилемма, с которой я столкнулся — и с которой мы все сталкиваемся в какой-то момент нашей жизни в веб-разработке:

• Внесите изменения в старую страницу или
• Начните с нуля и постройте все заново

Сайт Земельного Суда Маори был разработан в 2001 году дизайнерской фирмой. Как и на большинстве сайтов прошлых лет, на нем были такие вещи, как заставки и экраны приветствия до того, как вы попали на сайт. Другой распространенной практикой было создание веб-страницы путем взятия изображения дизайнера и нарезки его на таблицу, представляющую собой беспорядок ячеек точного размера и изображений-разделителей.

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

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

Решение

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

Принимая это решение, я знал, что мне также необходимо придерживаться руководящих принципов веб-сайта электронного правительства Новой Зеландии , которые рекомендуют избегать использования таблиц в целях макетирования. Большая часть нашей аудитории — сельские жители, и им приходится бороться со скоростью 9600 б / с.

инвентарь

У меня была страница с 15 КБ HTML, таблицей стилей 1 КБ и 46 изображениями (54,7 КБ) на общую сумму 70,8 КБ. Исходная страница состояла из изображения вакайро (резьба), состоящего из нескольких частей, с текстом навигации слева. Каждый элемент навигации был связан с изображением перевода, анимированным GIF со словами «Суд земли маори» и его переводом маори — «Te Kooti Whenua Maori», и, наконец, маленькой иконкой.

Метод

Я объясню процесс шаг за шагом.

Изображения

Я вошел в свой инструментарий, вытащил свой верный Фотошоп и продолжил собирать кусочки вакайро (в качестве запоздалой мысли, я должен был просто использовать дамп экрана). К счастью, фон был одним изображением сам по себе, а не частью нарезки, поэтому его было легко использовать, как и анимированный текст GIF.

 <div id="search"> 

  <a href="search.htm"> 

    <img src="images/buttong.gif" width="26" height="25" alt="Search"> 

    <span class="en">Search</span>&nbsp;<span class="mi">Rapu</span> 

  </a> 

</div> 


a span.en, a:hover span.mi { 

  display: inline; 

} 


a:hover span.en, a span.mi { 

  display: none; 

}

 a:hover { 

  background-color: transparent; /*hack for IE */ 

} 


a span.en, a:hover span.mi { 

  display: inline; 

} 


a:hover span.en, a span.mi { 

  display: none; 

}