Предисловие
В первый раз, когда я пользовался Интернетом, я использовал тупой терминал. Вскоре монохромный монитор в Миннесоте мог воспроизводить через сервер фильм «Монти Пайтон и Святой Грааль». Не было ни мыши, ни хорошего пользовательского интерфейса, не говоря уже о 24-битном цвете. Gopher — единственный доступный инструмент. Поиск могут использовать только Арчи и Вероника. Никто не слышал о W3 (Всемирной паутине), и в то время сеть казалась вполне подходящей.
Примечание переводчика:
1. Тупой терминал. Очень похоже на ПК, но без собственного процессора, памяти и жесткого диска. Транзакции обрабатываются через общий хост.
2.Суслик. Приложение клиент/сервер, которое отображает всю информацию конечному пользователю в форме меню путем выполнения FTP-передачи, удаленного входа в систему, поиска Archie и т. д., позволяя пользователю просматривать большое количество информации. Таким образом, пользователям не нужно знать (или вводить) свои адреса при доступе к интернет-ресурсам.
3.Archie — первая программа, которая автоматически индексирует анонимные файлы FTP-сайтов в Интернете, но это еще не настоящая поисковая система.
4.Veronica — это ресурс типа Gopher, который можно использовать для получения всех пунктов меню, содержащих указанные специальные слова в пространстве Gopher.
Через некоторое время странный код начал заполонять мои результаты поиска. Я все еще мог читать то, что мне нужно, но это раздражало. Коллега сказал мне, что это HTML, графический язык для Интернета. Я научился некоторым методам фильтрации HTML. Позже появились 256-цветные мониторы и первая версия браузера Mosaic, и всё начало меняться.
С тех пор прошло много времени, технологии невероятно усовершенствовались, а веб-интерфейсы пересматривались, переосмысливались и изобретались заново бесчисленное количество раз. С тех пор, как я начал работать веб-дизайнером, я на собственном опыте испытал различные этапы табличного дизайна, проблемы JavaScript, трудности CSS и, что более важно, более общепринятые веб-стандарты.
Вначале интернет создавался только по идеям гиков (фанатиков технологий). В интернете был только чистый контент. Они не учитывали цвета фона и красивые картинки. Но правда в том, что во время серфинга людям нравится видеть более насыщенные выражения лиц. Появление табличного метода проектирования решает эту проблему. Мы можем управлять раскладкой с помощью таблиц! Мы все начали «обманывать» систему, нельзя ли сделать тонкую линию в 1 пиксель? Просто вставьте прозрачную точку GIF в строку таблицы и установите цвет фона, и все готово! Не можете управлять шрифтами? Тогда используйте другой тег <font>!
До того, как я познакомился с CSS и веб-стандартами, я много лет проектировал с использованием таблиц. Метод проектирования веб-стандартов полностью отличается от прежнего. Он эффективен и обаятелен. Я глубоко и страстно влюбился в новые методы дизайна. Он может использовать осмысленный код для отделения контента от макета, но при этом сохранять пустое пространство и красивый дизайн. Я сразу «люблю новое и ненавижу старое» и больше не использую старые методы дизайна.
До сегодняшнего дня.
Было много дискуссий о веб-стандартах и CSS. Как и любое хорошее ключевое слово, оно станет следующим «громким именем» в истории развития веб-технологий. Все началось с того, что Дугл в роли Боумэна изменил дизайн Wired.com и продолжал развиваться. В 2003 году была опубликована книга Зельдмана «Проектирование с использованием веб-стандартов», позволившая всем нам увидеть свет. Дизайнеры всего мира приветствовали новый метод проектирования. Он структурированный, семантический, быстрый и легкий.
Однако все еще есть люди, которые все еще используют традиционный метод проектирования таблиц и даже используют тег <font>. Они говорят, что традиционный метод проще, удобнее для обслуживания и быстрой разработки. Кто прав?
Я решил сам провести эксперимент, чтобы посмотреть, как все изменилось и какой метод мы выбрали лучше.
испытание
Я разработал гипотетический веб-сайт с использованием графического программного обеспечения. Затем сначала используйте HTML4.01, чтобы сделать это, используя таблицы без CSS для сравнения, затем используйте XHTML1.0 Transitional, чтобы сделать это, код соответствует спецификациям удобства использования и доступности и использует CSS, чтобы максимально избегать таблиц; (если таблица не используется для представления табличных данных.)
Производственный процесс разделен на три этапа, процесс подробно записывается, плюсы и минусы сравниваются, чтобы посмотреть, что мы получили? Что потеряно? На чьей стороне мы должны быть?
Этап первый: дизайн сайта
Я начал разрабатывать вымышленный сайт. Я предполагаю, что делаю веб-сайт для организации под названием «Ассоциация наблюдателей за бабочками». Хаха, это, наверное, мой лучший клиент, который не будет участвовать в процессе проектирования. Я постарался сделать его максимально реалистичным, представляя целевых пользователей сайта, используя традиционную верстку и авторитетные шрифты.
Я хочу, чтобы сайт был компактным, эффективным и лаконичным. Кроме того, я подумал, что на странице должны быть бабочки, поэтому искал повсюду подходящее изображение бабочки и вскоре нашел его на stock.xchng. Голубая бабочка, отдыхающая среди зеленых листьев, идеально вписывается в имидж участка. После некоторой обработки и модификации эта картинка становится шапкой нашей страницы.
В процессе проектирования я придерживался некоторых принципов юзабилити. Например, постарайтесь сделать размер файла изображения как можно меньшим. Сначала я планировал использовать для навигации шрифт Garamond. Позже, учитывая, что на машине пользователя может не быть этого шрифта, я решил использовать шрифт Georgia (этот шрифт похож на Times New Roman, а в худшем случае — на шрифт Georgia). его можно заменить шрифтом Times New Roman). Но для изображения заголовка я все равно использовал Грузию, потому что это изображение.
Текст имеет серый фон и использует шрифт Trebuchet MS; в новостях используется шрифт Verdana, который также хорошо смотрится в уменьшенном масштабе. Существует неписаное эмпирическое правило использования 4 шрифтов в дизайне, и я с этим не совсем согласен.
Второй этап: «Используйте предыдущий метод и используйте прозрачные изображения GIF для контроля интервала».
Если вы уже веб-дизайнер, участвовавший в нескольких проектах, следующая структура вам хорошо знакома:
<table bgcolor="#ffffff" cellpacing="0" cellpadding="0" border="0" align="center" width="200"> <tr> <td colspan="3" bgcolor="#545454" ><img src="blank.gif" width="1" height="1" alt=""></td> </tr> <tr> <td bgcolor="#545454"><img src=" Blank.gif" width="1" height="1" alt=""></td> <td width="100%" align="center">Здесь размещается контент.</td> <td bgcolor=" #545454"><img src="blank.gif" width="1" height="1" alt=""></td> </tr> <tr> <td colspan="3" bgcolor="# 545454"><img src="blank.gif" width="1" height="1" alt=""></td> </tr> </table>
Мы привыкли использовать таблицы для разговора, потому что они являются нашими основными «строительными блоками». Например: используйте прозрачные изображения GIF для управления интервалом и используйте различные атрибуты таблиц для управления положением. Кто-то объяснил это так: таблицы надежны, а страницы, созданные с помощью таблиц, могут быть совместимы с предыдущими версиями! Ни один CSS не осмелится конкурировать с таблицами, таблицы подходят для всех браузеров и так далее.
Начнем с пошагового воспроизведения всего процесса проектирования.
час 1
ой. Кажется, мы можем вернуться в прошлое. Как мы можем определить цвет фона без использования CSS? Ах, да... это bgcolor, спасибо за подсказку. Хорошо, давайте приступим к созданию формы и просмотрим эффект. Я определил «align=center», чтобы он был центрирован во всех браузерах, здорово, как это просто! Форма выглядит неплохо, и у меня такое ощущение, будто я воссоединился со старым другом. Я умело использовал прозрачные изображения GIF для контроля интервалов, и работа пошла быстро! доброта? Почему между заголовком и меню пустое пространство? Ой, оказывается, после кода изображений есть лишний пробел, и браузер IE его отобразит. Это легко изменить, просто удалите пробелы.
Час 2
Я использую JavaScript для создания эффекта переворачивания меню навигации:
<td ... onMouseOver="chBg(this);" onMouseOut="chBg2(this);" >...</td>
JavaScript написан так:
function chBg(obj) { obj.bgColor = "#E1E5DB" } function chBg2(obj) { obj.bgColor = "#CBD1C3" };
Если не считать того факта, что я немного забыл о старых методах проектирования, весь прогресс был довольно быстрым. Хоть я и старался максимально сократить вложенность таблиц, код все равно выглядел немного сложным, поэтому я добавил несколько комментариев, чтобы облегчить поиск мест, которые нужно изменить.
Я столкнулся с небольшой проблемой: я не могу удалить подчеркивание ссылки без использования CSS. Возможно есть решение, поищем в гугле.
Час 3
После поиска в Google я все еще не могу найти способ. Как сделать ссылку без подчеркивания? Должно быть решение!
4-й час
Давайте посмотрим на результаты первых 4 часов в браузерах, отличных от IE6. ой! Очень некрасиво в Firefox, отлично смотрится в Opera и Netscape.
Час 5
Идите вперед и кодируйте..., отлаживайте и изменяйте.
На работе я осознал ограничения тега <font> для управления размером шрифта: я не мог определить несколько размеров. Блин!
Я также столкнулся с проблемами с размещением текста в разделе «Новости». Чтобы добиться эффекта, мне пришлось использовать больше вложенности таблиц. Чтобы расположить картинки бабочек в тексте справа от текста, мне также пришлось добавить таблицу для решения задачи. Такой «читерский» набор текста заставляет меня чувствовать себя беспомощным.
Час 6
Дизайн готов и выглядит почти так же, как оригинальный дизайн. Вы можете нажать здесь, чтобы посмотреть.
Нажмите здесь, чтобы увидеть, сколько таблиц включено.
Этап 3: Нам не нужны формы!
Ниже мы рассмотрим, что такое дизайн, основанный на веб-стандартах и выполненный с помощью CSS. Начну с определения содержания. Я постараюсь сделать логотип смысловым и избегать лишних тегов.
Заголовок — это изображение, но это также и заголовок, поэтому я пишу код следующим образом:
<h1>Ассоциация наблюдателей за бабочками. Они порхают. Мы наблюдаем за ними.</h1>
О том, как правильно отобразить этот заголовок, я подумаю позже (в идеале мы заботимся как можно больше о содержании и как можно меньше о макете). Остальные заголовки (новости, наблюдения и членство) будут обозначены как <h2>.
Меню по сути представляет собой неупорядоченный список (список), поэтому оно будет идентифицироваться как список. Абзацы не нужно классифицировать (мы используем селекторы наследования, чтобы «подвесить» их на содержащий слой). Я сравню его с исходным текстом контента, чтобы увидеть, сколько дополнительных тегов мне нужно добавить, чтобы добиться макета (я постараюсь избегать добавления тегов, насколько это возможно).
Это оригинальный текст содержания. Взгляните на исходный код, он соответствует переходной спецификации xhtml1.0. Обратите внимание, что все элементы уже содержатся в <div> с определенными именами. Дата в новостях также была добавлена с классом даты. Вы можете видеть, что код очень прост.
час 1
Определите границу слоя «контейнер» равной 1 пиксель. Центрируйте содержимое, определив «text-align: center» в стиле тела. Чтобы центрироваться во всех браузерах, в «контейнере» также определяется значение поля: 0 auto (что означает верх = 0, право = авто, низ = 0, лево = авто); Центрирование можно выполнить так же легко, как и с таблицами.
Определите значения отступов «top» и «bottom» для «body» равными 20 пикселей (отсутствие прямого определения отступов в «контейнере» должно подходить всем браузерам).
Неупорядоченный список (li) должен быть определен как «display:inline», чтобы меню отображалось в одну строку. Я добавил значки навигации между меню. Эти значки навигации определяются с использованием метода неповторяющегося фона, который позволяет точно определить положение (x, y), аналогично этому:
фон: url(menuBullet2.gif) no-repeat 4px 9px Эффект изменения цвета щелчка меню принимает стиль наведения ссылки, больше не требующий JavaScript;
Я установил изображение бабочки в заголовке страницы в качестве фона <h1>, чтобы мне не приходилось беспокоиться о простоте использования, а заголовок можно было нормально читать на устройствах, которые не могут отображать изображения (например, на экране читателей и поисковых роботов).
Час 2
Первый пункт меню (HOME) использует другой значок, и мне пришлось скрыть исходный фон и добавить дополнительный идентификатор (frst) в меню HOME:
#hМеню ул ли #первый
Другой значок (КОНТАКТЫ):
фон: прозрачный URL(menuBullet3.gif) no-repeat 615px 9px; я не могу использовать CSS для управления двумя столбцами, чтобы они имели одинаковую высоту. К счастью, я могу обойти это с помощью фонового изображения. Я определил «контейнер», который повторяет фон по вертикали.
фон: #fff url(bgMain.gif) повтор-y;
Час 3
Поля определения CSS гораздо удобнее таблиц, особенно многие свойства границ очень полезны.
Теперь я начинаю определять заголовок <h2>. Определение значка такое же, как указано выше.
Я размещаю слой «новости» справа от «наблюдений» и «членства». Определите слой «авторское право» с помощью «clear: Both;», чтобы он следовал за плавающим слоем. Поместите изображение бабочки в текст справа, и текст автоматически обтекает изображение. Определив границу изображения в 1 пиксель и установив расстояние отступа, можно добиться эффекта вложения исходных двух таблиц.
Были обнаружены некоторые проблемы: слой авторского права и уровень контента частично перекрываются.
4-й час
Показанная ошибка связана с определением float:right; «наблюдений» и «членства». Перемещение их влево решает эту проблему, которая кажется странной. Для первого теста я использовал Firefox. Что ж, выглядит неплохо, за исключением того, что значки меню сдвинуты на несколько пикселей.
Существуют некоторые методы CSS, которые могут исправить эффект отображения в браузерах, отличных от IE, например, присвоение разных значений свойств разным браузерам.
Я использовал значение !important в определении того же элемента. То же определение, написанное впереди, может быть выполнено первым. Это значение не поддерживается браузером IE.
фон: URL(menuBullet2.gif) без повтора 4px 6px !важно;
фон: URL(menuBullet2.gif) без повтора 4 пикселя 9 пикселей;
В CSS, если для одного и того же элемента существует несколько определений, действительным является последнее. Но поскольку IE не поддерживает !important, IE будет использовать второе определенное значение, а другие браузеры — первое определенное значение.
Все готово, результаты смотрите здесь.
в заключение
табличный дизайн
Я протестировал страницу, используя все браузеры, которые смог найти, включая браузеры для платформ Linux, Windows и Macintosh. Страницы макета таблицы выглядят одинаково в разных браузерах. «Он тверд, как скала», — это первый комментарий, сделанный по поводу верстки стола.
Однако, когда необходимо изменить часть содержимого страницы, изменение макета таблицы является достаточно трудоемким занятием. Это проблема. Если мы используем CMS (систему управления контентом), форматирование контента будет затруднено.
Все время проектирования заняло немного больше времени, потому что я забыл старый метод. Если бы я сделал это снова, я думаю, это сэкономило бы 1-2 часа.
Я описываю проектирование на основе таблиц как тяжелую «тяжелую работу», хотя меня часто удивляют передовые методы проектирования. В проектах, основанных на чистом CSS, я обычно разбираю дизайн и анализирую ошибки шаг за шагом. Однако использование табличного дизайна не требует этой работы. Вам просто нужно продолжать добавлять таблицы в дизайн. Давайте еще раз посмотрим на процесс CSS.
Дизайн на основе CSS
Проектирование с помощью CSS кажется намного удобнее. Изменения кода происходят напрямую и прозрачно, и я могу четко контролировать весь процесс. В отличие от этого проектирование таблицы похоже на кладку кирпичей. Чем больше изменений на странице, тем удобнее и эффективнее становится дизайн CSS.
Дизайн CSS также очень важен для экономии трафика. Извлечение всех стилей в отдельные файлы и использование одного или нескольких файлов таблиц стилей для всего сайта может уменьшить его размер.
Отделение информации о макете от контента также имеет множество преимуществ. В будущем я смогу обновить весь сайт в любой момент, ничего не меняя, как в CSS Zen Garden. Это также повышает простоту использования, облегчая поисковым роботам обнаружение вашей страницы (помните: Google — ваш самый важный источник посетителей).
Хотя эффективность вашей работы очень высока, когда вы знакомы с дизайном на основе CSS, вам придется потратить много времени на изучение правил, различий в блочных моделях, методах обработки браузера и много теории, и для освоения требуется постоянная практика. . Короче говоря, CSS проще таблиц, но если вы хотите создавать дизайн с использованием чистого CSS, будьте готовы потратить много времени на его изучение. Даже если вы опытный разработчик, вы должны быть готовы бороться с различными ошибками. Иногда на устранение ошибки может уйти несколько часов.
победитель
Победа в дизайне, основанном на CSS и веб-стандартах. Достаточно просто посмотреть код обоих методов, чтобы сделать выбор. CSS предлагает гораздо больше преимуществ (в основном с точки зрения простоты использования). На самом деле основная причина – моя лень. Если я использую дизайн стола, и клиент через год свяжется со мной и скажет, что его нужно доработать, я могу сказать ему, что пошел в армию и нахожусь в чужой стране. Если бы я использовал CSS, я бы изменил его для клиента, не задумываясь, потому что мне не пришлось бы изобретать велосипед.