Впервые я начал заниматься веб-дизайном/разработкой в конце 90-х, и только сейчас,набирая эту строку, я понимаю, как давно это было.
И ребята, это было ужасно. Я имею в виду, что делать проекты и размещать их в Интернете, где другие люди могли их увидеть, было довольно не ловко, но нам нечего не оставалось.
Я считал само собой разумеющимся, что большинство людей, занимающихся веб-разработкой, до сих пор помнят те дни или, по крайней мере, следующее десятилетие, однако это предположение может быть немного устаревшим. Некоторое время назад я столкнулся с
Но потом, я понял, что я также знаю несколько людей, которые лиш пробовали веб-дизайн в старые времена, и думают, что с тех пор ничего не изменилось.
Я здесь, чтобы сказать всем вам сойти с моего газона. Вот история CSS и веб-дизайна, как я ее помню.
(Пожалуйста, держите в уме, что этот пост представляет собой сочетание памяти и иследований, поэтому я не могу гарантировать, что все из этого на самом деле правильно, особенно в отношении случайности. Вы можете попробовать историю
У Начала Времен
В начале не было CSS.
Это было очень плохо.
Мой любимый артефакт этой эпохи - книга, которая научила меня HTML: O’Reilly’s
“Clearly delineate headers and footers with horizontal rules.”
Нет, это не
. Это
. Заголовок страницы почти наверняка центрирован, ну,
. На странице используется цвет текста по умолчанию, фон и шрифт. Отчасти потому, что это руководство, вводящее понятия по одному; частично потому, что книга была напечатана в черно-белых тонах; и отчасти, я уверен, потому что это отражало реальность того, что окрашивание чего-либо было огромной болью в заднице. Допустим, вы хотели, чтобы все ваши
были красными на всем сайте. Вы должны были сделать это:
...каждый чертов раз.
Да, и все написали HTML-теги во всех заглавных буквах. Я не помню, почему мы все думали, что это хорошая идея. Возможно, это было до того, как подсветка синтаксиса в текстовых редакторах была очень распространенной (читай: мне было 12 лет и я пользовался Блокнотом), и теги в верхнем регистре было легче отличить от основного текста.
Поддержание согласованности вашего сайта было таким кошмаром.
Одним из решений было просто не стилизовать что-либо, что делали многие. В некотором смысле это было приятно, поскольку браузеры позволяют изменять эти значения по умолчанию, поэтому вы можете читать в Интернете так, как вам удобно.
Умное альтернативное решение, которое, как я помню, появлялось на многих сайтах Geocities, заключалось в том, чтобы просто придать каждой странице совершенно другой визуальный стиль.FUCK IT, верно? Просто делайте что хотите на каждой новой странице.
Эта тенденция, возможно, была высотой веб-дизайна.
Честно, я скучаю по тем дням. Там не было ни больших "ОГРАЖДЕНИЙ", ни Twitter, ни Facebook. Если вам было что сказать, вы должны были создать свой собственный веб-сайт. И это было прекрасно. Никто не знал, что они делают. Держу пари, что подавляющее большинство веб-дизайнеров в то время были невежественными подростками-любителями (как и я), все копировали у других невежественных подростков-любителей. Половина Интернета была фанатскими порталами об Animorphs, а заставки предупреждали вас, что их сайт работает лучше всего, если у вас экран 640×480. (Любой 12-летний подросток с недостаточным разрешением должен был, по-видимому, покупать новый монитор с учетом допусков.) Все, кто был крут и в курсе, использовали Internet Explorer 3, самый совершенный браузер, но некоторые неудачники все еще использовали Netscape Navigator, так что вы также должены были поместить анимированный GIF «BEST on IE» на свою страницу.
Это была также эра «веб-безопасных цветов» - палитры из 216 цветов, где каждый канал был одним из 00, 33, 66, 99, cc или ff - которая существовала, потому что у некоторых людей все еще были мониторы с 256 цветами! Вещи, которые мы сейчас воспринимаем как должное, как 24-битный цвет.
Фактически, многие вещи, которые мы считаем само собой разумеющимся, по-прежнему оставались странной и неприрученной проблемой. Вы хотите иметь одинаковую навигацию на каждой странице вашего сайта? Хорошо, нет проблем: скопируйте / вставьте его на каждую страницу. Когда вы обновляете его, обязательно обновляйте каждую страницу, но, скорее всего, вы забудете некоторые, и весь ваш сайт станет археологическим раскопком, со слоями все более и более замаскированных страниц.
Намного проще было использовать фреймы, а это означает, что окно браузера разбито на сетку и разные страницы загружаются в каждом разделе ... но тогда люди могут запутаться, если они попадут на отдельную страницу без фреймов. (Я не могу поверить, что я объясняю фреймы, но никто не использовал их с 2001 года. Вы знаете, фреймы? «I» для встроенного, чтобы отличить их от обычных фреймов, которые занимают весь видовой экран.)
PHP еще даже не анонсиовали, и никто не слышал об этом. Эта странная вещь «Perl» и «CGI» была действительно странной и трудной для понимания, и она не работала на вашем собственном компьютере, и ошибки было трудно найти и диагностировать, и в любом случае Geocities не поддерживал ее. Если вы были сообразителнь и вам действительно повезло, ваш веб-хостинг использовал Apache, и вы могли использовать его синтаксис «включение на стороне сервера», чтобы сделать что-то вроде этого:
Мдаа. Прекрасно. Apache будет видеть специальные комментарии, вставлять содержимое указанных файлов. Недостатком было то, что, когда вы хотели работать на своем сайте, вся навигация отсутствовала, потому что вы делали это на своем обычном компьютере без Apache, и ваш веб-браузер думал, что это были просто обычные комментарии HTML. Конечно, установить Apache было невозможно, потому что у вас был компьютер, а не сервер.
К сожалению, все это ушло сейчас - вымощено однородными временными рамками, когда все, что не было сделано на этой неделе, является старым и давно забыто. Сеть должна была сделать информацию вечной, но вместо этого большая ее часть стала эфемерной. Я скучаю, когда практически у всех, кого я знал, был свой сайт. Наличие Twitter и Instagram в качестве всего вашего присутствия в Интернете - плохая замена.
...
Итак, давайте посмотрим на сайт Space Jam.
Space Jam, если вы не знаете, это величайший фильм всех времен. Он документирует чрезвычайно недолгую баскетбольную карьеру Bugs Bunny, играя вместе с живой легендой Майклом Джорданом, чтобы спасти планету от инопланетян. За этим последовала серия очень успешных и признанных критиками дополнительных выпусков RPG, которые описывают последствия Space Jam и являются чрезвычайно каноническими.
И мы действительно счастливы, спустя 24 года после его выхода, его веб-сайт по-прежнему работает. Мы можем исследовать пик веб-дизайна 1996 года прямо здесь, прямо сейчас.
Во-первых, обратите внимание, что каждая страница этого сайта является статической страницей. Все страницы, оканчивающаяся на .htm, а не .html, потому что в версиях Windows до 95 все еще придерживались версии 8.3 имен файлов. Не уверен, почему это имело значение в URL, как будто вы собирались запустить Windows 3.11 на веб-сервере, но так было.
CSS для страницы-заставки выглядит следующим образом:
Хаха, шучу! Что за хрень это CSS? Космический Джем предшествует этому на месяц. (Я вижу одну строку в исходном коде страницы, но я почти уверен, что она была добавлена намного позже, чтобы стилизовать некоторые юридически обязательные ссылки на правила.)
Обратите внимание на чрезвычайно точное расположение этих навигационных ссылок. Этот подвиг был совершен таким же образом, как все в 1996 году: с помощью таблиц.
На самом деле таблицы имеют одно функциональное преимущество перед CSS для верстки, что было очень важно в те дни, и не только потому, что CSS еще не существовало. Видите ли, вы можете щелкнуть левой кнопкой мыши, чтобы выбрать ячейку таблицы, и даже перетащить, чтобы выбрать все из них, что показывает, как расположены ячейки, и работает как отладчик супер ретро-макета. Это было здорово, потому что первый значимый инструмент веб-отладки,
Разметка для этой таблицы переполнена необъяснимыми пустыми строками, но с удаленными она выглядит так:
Это первые два ряда, включая логотип. Вы поняли идею. Все зделано с помощью align и valign на ячейках таблицы; часто используются rowspans и colspans; и есть некоторые добавленные для хорошей меры, чтобы отрегулировать вертикальное положение на одну высоту строки за один раз.
Другие фантастические артефакты, которые можно найти на этой странице, включают этот заголовок, который содержит синтаксис Apache SSI! Это должно было тихо сломаться, когда сайт был перенесен за эти годы; в настоящее время он находится на Amazon S3. Вы знаете, Амазон? Тот книжный магазин?
Хорошо, давайте проверим
Обратите внимание на рамки: логотип в левом верхнем углу ведет на целевую страницу, разумно экономя место на экране при повторении всей этой навигации, а в верхнем правом углу - гребаный рекламный баннер, который был заблокирован, как семь разных путей. Все три части являются отдельными страницами.
Обратите внимание также на совершенно нечитаемый красный текст на текстурированном фоне, один из самых верных признаков веб-дизайна 90-х годов. «Почему бы не поместить этот блок текста на более легкий для чтения фон?» - спросите вы. Вы слабоумный. Как бы я мог это сделать? Только у
есть атрибут background! Я мог бы использовать таблицу, но таблицы поддерживают только сплошные цвета фона, и это выглядело бы так скучно!
Но подождите, что это за новый виджет навигации? Как ссылки все так смещены? Это еще один стол? Ну, нет, хотя заполнение таблицы кусками нарезанного изображения не было редкостью. Но это изображение, давно забытая функция HTML. Я просто покажу вам источник:
Я предполагаю, что это более или менее очевидно. Атрибут usemap прикрепляет карту изображения, которая определяется как набор областей, по которым можно кликать, красиво закодированных как непостижимые списки координат или что-то в этом роде.
И этот материал все еще работает! Это в HTML!
Сетка миниатюр
Давайте посмотрим на еще одну случайную страницу здесь. Я хотел бы увидеть несколько фотографий из фильма. (Подождите, фотографии? Разве мы не знали, что это были за «скриншоты»?)
Еще один набор фреймов, но на этот раз все по-другому.
Здесь они сделали важную вещь: поскольку они указали фоновое изображение (непрозрачное), они также указали цвет фона. Без этого, если фоновое изображение не удалось загрузить, страница была бы белым текстом на белом фоне по умолчанию, который был бы нечитаемым.
(Это по-прежнему важно помнить. Мне кажется, что современная веб-разработка склонна полагать, что все загрузится, или воспринимает загрузку как какое-то неудобство, которое нужно обойти, но не все работают на проводном соединением в Сан-Франциско.)
Но о самой странице. Сетки миниатюр - это классическая проблема веб-дизайна, начиная с… э-э… ну, по крайней мере, еще до Space Jam. Основная проблема заключается в том, что вы хотите поместить вещи рядом друг с другом, в то время как HTML по умолчанию укладывает все в один большой столбец. Вы можете поместить все миниатюры в строку, в одну строку (обтекание) текста, но это не будет большой сеткой - и вы обычно хотите, чтобы у каждой была какая-то подпись.
Подход Space Jam состоял в том, чтобы использовать единственный реальный инструмент, который кто-либо имел в своем наборе инструментов: таблицу. Это структурировано так:
Сетка 3х3 миниатюр, оставленная браузеру для упорядочивания. (Последнее изображение в отдельном ряду на самом деле не является частью таблицы.) Оно не может масштабироваться, чтобы соответствовать вашему экрану, но экран у всех тогда был довольно крошечным, так что за это было немного меньше беспокойства. Здесь они не добавляли подписи, но поскольку каждый эскиз помещается в ячейку таблицы.
Это был современный уровень в 1996 году. Мы еще несколько раз вернемся к этой маленькой загадке интерфейса.
Но давайте на минутку оценим размер “full-size, full-color, internet-quality” скриншотов фильмов на моем текущем мониторе.
Эй, хотя, они меньше, чем 16 КБ! Это займет всего девять секунд, чтобы загрузить.
(Мне напомнили о проблеме встроенного видео, которое не было решено до появления тега
в HTML5 несколько лет спустя. До этого вам приходилось использовать бинарный плагин, и все они были ужасны.)
(О, кстати: изображения внутри ссылок по умолчанию имеют рамку цвета ссылки. Ссылки на изображения обычно самоочевидны, так что это было довольно неприятно, и до CSS вам приходилось отключать их для каждого отдельного изображения с помощью
.)
Оригинал:
И ребята, это было ужасно. Я имею в виду, что делать проекты и размещать их в Интернете, где другие люди могли их увидеть, было довольно не ловко, но нам нечего не оставалось.
Я считал само собой разумеющимся, что большинство людей, занимающихся веб-разработкой, до сих пор помнят те дни или, по крайней мере, следующее десятилетие, однако это предположение может быть немного устаревшим. Некоторое время назад я столкнулся с
Ссылка скрыта от гостей
, поражающимся тому, что мы должны были делать без border-radius . Я до сих пор помню, как затаил дыхание, чтобы он был без префикса!Но потом, я понял, что я также знаю несколько людей, которые лиш пробовали веб-дизайн в старые времена, и думают, что с тех пор ничего не изменилось.
Я здесь, чтобы сказать всем вам сойти с моего газона. Вот история CSS и веб-дизайна, как я ее помню.
(Пожалуйста, держите в уме, что этот пост представляет собой сочетание памяти и иследований, поэтому я не могу гарантировать, что все из этого на самом деле правильно, особенно в отношении случайности. Вы можете попробовать историю
Ссылка скрыта от гостей
, которая значительно короче, имеет больше шансов соответствовать реальности и содержит значительно меньше ругательств.)У Начала Времен
В начале не было CSS.
Это было очень плохо.
Мой любимый артефакт этой эпохи - книга, которая научила меня HTML: O’Reilly’s
Ссылка скрыта от гостей
, опубликованная в нескольких изданиях в середине и конце 90-х годов. Книга действительно была о HTML, без всякого упоминания о CSS. У меня ее больше нет, и я не могу легко найти скриншоты онлайн, но вот страница из HTML & XHTML: Полное руководство, которое, кажется, пересмотренное (я вернусь к XHTML позже) с тем же стилем. Итак, вот самый передовой совет веб-дизайна 199X:
“Clearly delineate headers and footers with horizontal rules.”
Нет, это не
Код:
border-top
Код:
<hr>
Код:
<center>
Код:
<h1>
Код:
<H1><FONT COLOR=red>...</FONT></H1>Да, и все написали HTML-теги во всех заглавных буквах. Я не помню, почему мы все думали, что это хорошая идея. Возможно, это было до того, как подсветка синтаксиса в текстовых редакторах была очень распространенной (читай: мне было 12 лет и я пользовался Блокнотом), и теги в верхнем регистре было легче отличить от основного текста.
Поддержание согласованности вашего сайта было таким кошмаром.
Одним из решений было просто не стилизовать что-либо, что делали многие. В некотором смысле это было приятно, поскольку браузеры позволяют изменять эти значения по умолчанию, поэтому вы можете читать в Интернете так, как вам удобно.
Умное альтернативное решение, которое, как я помню, появлялось на многих сайтах Geocities, заключалось в том, чтобы просто придать каждой странице совершенно другой визуальный стиль.FUCK IT, верно? Просто делайте что хотите на каждой новой странице.
Эта тенденция, возможно, была высотой веб-дизайна.
Честно, я скучаю по тем дням. Там не было ни больших "ОГРАЖДЕНИЙ", ни Twitter, ни Facebook. Если вам было что сказать, вы должны были создать свой собственный веб-сайт. И это было прекрасно. Никто не знал, что они делают. Держу пари, что подавляющее большинство веб-дизайнеров в то время были невежественными подростками-любителями (как и я), все копировали у других невежественных подростков-любителей. Половина Интернета была фанатскими порталами об Animorphs, а заставки предупреждали вас, что их сайт работает лучше всего, если у вас экран 640×480. (Любой 12-летний подросток с недостаточным разрешением должен был, по-видимому, покупать новый монитор с учетом допусков.) Все, кто был крут и в курсе, использовали Internet Explorer 3, самый совершенный браузер, но некоторые неудачники все еще использовали Netscape Navigator, так что вы также должены были поместить анимированный GIF «BEST on IE» на свою страницу.
Это была также эра «веб-безопасных цветов» - палитры из 216 цветов, где каждый канал был одним из 00, 33, 66, 99, cc или ff - которая существовала, потому что у некоторых людей все еще были мониторы с 256 цветами! Вещи, которые мы сейчас воспринимаем как должное, как 24-битный цвет.
Фактически, многие вещи, которые мы считаем само собой разумеющимся, по-прежнему оставались странной и неприрученной проблемой. Вы хотите иметь одинаковую навигацию на каждой странице вашего сайта? Хорошо, нет проблем: скопируйте / вставьте его на каждую страницу. Когда вы обновляете его, обязательно обновляйте каждую страницу, но, скорее всего, вы забудете некоторые, и весь ваш сайт станет археологическим раскопком, со слоями все более и более замаскированных страниц.
Намного проще было использовать фреймы, а это означает, что окно браузера разбито на сетку и разные страницы загружаются в каждом разделе ... но тогда люди могут запутаться, если они попадут на отдельную страницу без фреймов. (Я не могу поверить, что я объясняю фреймы, но никто не использовал их с 2001 года. Вы знаете, фреймы? «I» для встроенного, чтобы отличить их от обычных фреймов, которые занимают весь видовой экран.)
PHP еще даже не анонсиовали, и никто не слышал об этом. Эта странная вещь «Perl» и «CGI» была действительно странной и трудной для понимания, и она не работала на вашем собственном компьютере, и ошибки было трудно найти и диагностировать, и в любом случае Geocities не поддерживал ее. Если вы были сообразителнь и вам действительно повезло, ваш веб-хостинг использовал Apache, и вы могли использовать его синтаксис «включение на стороне сервера», чтобы сделать что-то вроде этого:
Код:
<BODY>
<TABLE WIDTH=100% BORDER=0 CELLSPACING=8 CELLPADDING=0>
<TR>
<TD COLSPAN=2>
<!--#include virtual="/header.html" -->
</TD>
</TR>
<TR>
<TD WIDTH=20%>
<!--#include virtual="/navigation.html" -->
</TD>
<TD>
(actual page content goes here)
</TD>
</TR>
</TABLE>
</BODY>К сожалению, все это ушло сейчас - вымощено однородными временными рамками, когда все, что не было сделано на этой неделе, является старым и давно забыто. Сеть должна была сделать информацию вечной, но вместо этого большая ее часть стала эфемерной. Я скучаю, когда практически у всех, кого я знал, был свой сайт. Наличие Twitter и Instagram в качестве всего вашего присутствия в Интернете - плохая замена.
...
Итак, давайте посмотрим на сайт Space Jam.
Ссылка скрыта от гостей
Space Jam, если вы не знаете, это величайший фильм всех времен. Он документирует чрезвычайно недолгую баскетбольную карьеру Bugs Bunny, играя вместе с живой легендой Майклом Джорданом, чтобы спасти планету от инопланетян. За этим последовала серия очень успешных и признанных критиками дополнительных выпусков RPG, которые описывают последствия Space Jam и являются чрезвычайно каноническими.
И мы действительно счастливы, спустя 24 года после его выхода, его веб-сайт по-прежнему работает. Мы можем исследовать пик веб-дизайна 1996 года прямо здесь, прямо сейчас.
Ссылка скрыта от гостей
Во-первых, обратите внимание, что каждая страница этого сайта является статической страницей. Все страницы, оканчивающаяся на .htm, а не .html, потому что в версиях Windows до 95 все еще придерживались версии 8.3 имен файлов. Не уверен, почему это имело значение в URL, как будто вы собирались запустить Windows 3.11 на веб-сервере, но так было.
CSS для страницы-заставки выглядит следующим образом:
<body bgcolor="#000000" background="img/bg_stars.gif" text="#ff0000" link="#ff4c4c" vlink="#ff4c4c" alink="#ff4c4c">Хаха, шучу! Что за хрень это CSS? Космический Джем предшествует этому на месяц. (Я вижу одну строку в исходном коде страницы, но я почти уверен, что она была добавлена намного позже, чтобы стилизовать некоторые юридически обязательные ссылки на правила.)
Обратите внимание на чрезвычайно точное расположение этих навигационных ссылок. Этот подвиг был совершен таким же образом, как все в 1996 году: с помощью таблиц.
На самом деле таблицы имеют одно функциональное преимущество перед CSS для верстки, что было очень важно в те дни, и не только потому, что CSS еще не существовало. Видите ли, вы можете щелкнуть левой кнопкой мыши, чтобы выбрать ячейку таблицы, и даже перетащить, чтобы выбрать все из них, что показывает, как расположены ячейки, и работает как отладчик супер ретро-макета. Это было здорово, потому что первый значимый инструмент веб-отладки,
Ссылка скрыта от гостей
, не был выпущен до 2006 года - целое десятилетие спустя!
Разметка для этой таблицы переполнена необъяснимыми пустыми строками, но с удаленными она выглядит так:
Код:
<table width=500 border=0>
<TR>
<TD colspan=5 align=right valign=top>
</td></tr>
<tr>
<td colspan=2 align=right valign=middle>
<br>
<br>
<br>
<a href="cmp/pressbox/pressboxframes.html"><img src="img/p-pressbox.gif" height=56 width=131 alt="Press Box Shuttle" border=0></a>
</td>
<td align=center valign=middle>
<a href="cmp/jamcentral/jamcentralframes.html"><img src="img/p-jamcentral.gif" height=67 width=55 alt="Jam Central" border=0></a>
</td>
<td align=center valign=top>
<a href="cmp/bball/bballframes.html"><img src="img/p-bball.gif" height=62 width=62 alt="Planet B-Ball" border=0></a>
</td>
<td align=center valign=bottom>
<br>
<br>
<a href="cmp/tunes/tunesframes.html"><img src="img/p-lunartunes.gif" height=77 width=95 alt="Lunar Tunes" border=0></a>
</td>
</tr>
<tr>
<td align=middle valign=top>
<br>
<br>
<a href="cmp/lineup/lineupframes.html"><img src="img/p-lineup.gif" height=52 width=63 alt="The Lineup" border=0></a>
</td>
<td colspan=3 rowspan=2 align=right valign=middle>
<img src="img/p-jamlogo.gif" height=165 width=272 alt="Space Jam" border=0>
</td>
<td align=right valign=bottom>
<a href="cmp/jump/jumpframes.html"><img src="img/p-jump.gif" height=52 width=58 alt="Jump Station" border=0></a>
</td>
</tr>
...
</table>Другие фантастические артефакты, которые можно найти на этой странице, включают этот заголовок, который содержит синтаксис Apache SSI! Это должно было тихо сломаться, когда сайт был перенесен за эти годы; в настоящее время он находится на Amazon S3. Вы знаете, Амазон? Тот книжный магазин?
Код:
<table border=0 cellpadding=0 cellspacing=0 width=488 height=60>
<tr>
<td align="center"><!--#include virtual="html.ng/site=spacejam&type=movie&home=no&size=234&page.allowcompete=no"--></td>
<td align="center" width="20"></td>
<td align="center"><!--#include virtual="html.ng/site=spacejam&type=movie&home=no&size=234"--></td>
</tr>
</table>Хорошо, давайте проверим
Ссылка скрыта от гостей
. Я использовал инструменты разработчика своего браузера, чтобы уменьшить область просмотра до 640 × 480 для аутентичного восприятия (хотя я также потерял некоторое вертикальное пространство в строке заголовка, панели задач и пяти или шести панелях инструментов IE).Обратите внимание на рамки: логотип в левом верхнем углу ведет на целевую страницу, разумно экономя место на экране при повторении всей этой навигации, а в верхнем правом углу - гребаный рекламный баннер, который был заблокирован, как семь разных путей. Все три части являются отдельными страницами.
Обратите внимание также на совершенно нечитаемый красный текст на текстурированном фоне, один из самых верных признаков веб-дизайна 90-х годов. «Почему бы не поместить этот блок текста на более легкий для чтения фон?» - спросите вы. Вы слабоумный. Как бы я мог это сделать? Только у
Код:
<body>Но подождите, что это за новый виджет навигации? Как ссылки все так смещены? Это еще один стол? Ну, нет, хотя заполнение таблицы кусками нарезанного изображения не было редкостью. Но это изображение, давно забытая функция HTML. Я просто покажу вам источник:
Код:
<img src="img/m-central.jpg" height=301 width=438 border=0 alt="navigation map" usemap="#map"><br>
<map name="map">
<area shape="rect" coords="33,92,178,136" href="prodnotesframes.html" target="_top">
<area shape="rect" coords="244,111,416,152" href="photosframes.html" target="_top">
<area shape="rect" coords="104,138,229,181" href="filmmakersframes.html" target="_top">
<area shape="rect" coords="230,155,334,197" href="trailerframes.html" target="_top">
</map>И этот материал все еще работает! Это в HTML!
Сетка миниатюр
Давайте посмотрим на еще одну случайную страницу здесь. Я хотел бы увидеть несколько фотографий из фильма. (Подождите, фотографии? Разве мы не знали, что это были за «скриншоты»?)
Еще один набор фреймов, но на этот раз все по-другому.
Код:
<body bgcolor="#7714bf" background="img/bg-jamcentral.gif" text="#ffffff" link="#edb2fc" vlink="#edb2fc" alink="#edb2fc">(Это по-прежнему важно помнить. Мне кажется, что современная веб-разработка склонна полагать, что все загрузится, или воспринимает загрузку как какое-то неудобство, которое нужно обойти, но не все работают на проводном соединением в Сан-Франциско.)
Но о самой странице. Сетки миниатюр - это классическая проблема веб-дизайна, начиная с… э-э… ну, по крайней мере, еще до Space Jam. Основная проблема заключается в том, что вы хотите поместить вещи рядом друг с другом, в то время как HTML по умолчанию укладывает все в один большой столбец. Вы можете поместить все миниатюры в строку, в одну строку (обтекание) текста, но это не будет большой сеткой - и вы обычно хотите, чтобы у каждой была какая-то подпись.
Подход Space Jam состоял в том, чтобы использовать единственный реальный инструмент, который кто-либо имел в своем наборе инструментов: таблицу. Это структурировано так:
Код:
<table cellpadding=10>
<tr><td align=center><a href="..."><img src="..."></a></td>...</tr>
<tr>...</tr>
<tr>...</tr>
<table>Это был современный уровень в 1996 году. Мы еще несколько раз вернемся к этой маленькой загадке интерфейса.
Но давайте на минутку оценим размер “full-size, full-color, internet-quality” скриншотов фильмов на моем текущем мониторе.
Эй, хотя, они меньше, чем 16 КБ! Это займет всего девять секунд, чтобы загрузить.
(Мне напомнили о проблеме встроенного видео, которое не было решено до появления тега
Код:
<video>(О, кстати: изображения внутри ссылок по умолчанию имеют рамку цвета ссылки. Ссылки на изображения обычно самоочевидны, так что это было довольно неприятно, и до CSS вам приходилось отключать их для каждого отдельного изображения с помощью
Код:
<img border = 0>Оригинал:
Ссылка скрыта от гостей
Последнее редактирование: