Глава 8. Изменение структуры сайта. Обновление информации

Глава 8. Изменение структуры сайта. Обновление информации

Каталог продукции

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

Предположим, производители прислали нам всю необходимую информацию. Даже и думать не хочется, что они прислали обычные бумажные брошюры с плохо пропечатанными схемами - в этом случае нам бы пришлось текст набирать руками, а все схемы практически отрисовывать заново. Поэтому (мы ведь оптимисты!) будем считать, что мы получили документы всё-таки по электронной почте: четыре фотоизображения и письмо с описанием технических характеристик (полностью письмо есть на CD в каталоге doc - файл Re_.eml):

Как видно из содержимого, вам придётся создать 4 новых html-файла - по числу изображений и текстов к ним. Начнём с текстов. Во-первых, надо понять, в каком они к нам пришли виде: с длинными строками, или с обрезанными. Для этого откройте файл Re_.eml и попробуйте растянуть открывшееся письмо в ширину: если строчки поползут вслед за движущейся границей окна, значит, тэг <pre> для оформления этого текста использовать нельзя, а надо будет каждый абзац заключать в тэги <p> и </p>. В нашем примере строчки письма не расползаются, текст сформирован в виде коротких строк, значит, можно в начале текста каждой страницы поставить один тэг <pre> и на этом преобразование полученных текстов будет закончено:

Создайте 4 текстовых файла с именами a01.html, a02.html, a03.html, a04.html и скопируйте в них соответствующие фрагменты письма, добавив тэги <pre> в начале каждого.

Разумеется, в начале страниц не забудьте поставить обычный для нашего сайта html-заголовок:

Обратных ссылок с «аппаратных» страниц на главную страницу сайта делать не будем, потому что планируем открывать их «в новом окне», то есть страница, с которой они будут открываться, останется на экране. Эту страницу, кстати, тоже надо будет сделать и добавить в нашу навигационную панель. Панель тогда разрастётся в ширину (название-то для новой страницы длинное - «Каталог продукции»!), поэтому кое-кого придётся уплотнить. Например, объединить «Адреса» и «Реквизиты» (не так уж они много места занимают, чтобы жить на отдельных страницах). В результате код новой навигационной панели будет выглядеть так:

Присматривайте при многочисленных трансформациях (копировании через буфер обмена Windows, сохранении из MS Word как текст) за знаком • - он может потеряться (точнее, выродиться), возвращайте ему тогда «нормальное», буквенное написание - &bull;. Скопируйте фрагмент текста, непосредственно описывающего адреса (вместе с заголовком «Адреса»), из файла address.html в подходящее место файла requisit.html (например, сразу после навигационной панели):

Создайте новый текстовый файл katalog1.html, в него мы должны будем записать обычную «шапку» для страниц нашего сайта, заголовок h1 «Каталог продукции» и четыре гиперссылки - на файлы a01.html, a02.html, a03.html, a04.html. Заставить эти ссылки открываться в новом окне можно с помощью присвоения атрибуту target значения "_blank":

Почти всё готово. За исключением главного, того, что превращает простой текст в каталог товаров, - картинок. Откройте ещё раз письмо (файл doc\Re_.eml на CD) и сохраните в свой рабочий каталог файлы .jpg - через меню «Файл» - «Сохранить вложения». Мы должны с подозрением относиться ко всем картинкам, которые собираемся выложить в Интернет: а вдруг они имеют слишком большой размер? Вдруг можно сохранить их в более оптимальном формате? К тому же, если вы попробуете вставить код присланной картинки

в соответствующий файл a01.html, то обнаружится одна не очень приятная особенность: в правилах css нашего сайта страницам назначается серый фон, и присланные картинки в формате jpeg будут ложиться на этот фон белыми прямоугольниками. Исправить это можно двумя способами: 1) изменить фон каждого файла jpeg в Photoshop'е на серый; 2) сделать фон каждой картинки прозрачным и сохранить картинки в формате GIF. Первый способ имеет очевидный недостаток: если мы вдруг заходим поменять цвет фона для страниц своего сайта, нам придётся опять открывать все картинки в Photoshop'е и так же менять им фон. Поэтому, если содержание картинок позволит (по количеству цветовых переходов), лучше, конечно, сразу перевести их в GIF.

Прозрачность создаётся так. Откройте в Photoshop'е файл i01.jpg, измените цветовую модель на Indexed Color. Затем с помощью инструмента Magic Wand (волшебный посох) выделите всю свободную область вокруг изображения (если выделяется не то, что надо, измените настройки инструмента Magic Wand - Anti-aliased, Tolerance):

Нажмите «Delete» или «Backspace». Должно получиться вот что:

Это значит, наступила прозрачность. Сохраните картинку в формате GIF (под именем i01.gif).

Не всегда так легко можно пользоваться в Photoshop'е «волшебным посохом». Гораздо чаще приходится прибегать к рутинной операции ручного выделения нужной области с помощью инструмента Polygonal Lasso:

Ну, как бы там ни было, у нас теперь есть 4 GIF'a, и мы можем гордо их вставить в начало каждой странички с описанием аппаратуры:

Обратите внимание: при наличии «форматированного» текста (с ограниченными длинами строк) не отпадает необходимость в заключении содержимого страницы в контейнер div, потому что именно этот элемент (а не body) задаёт отступы от краёв страницы - без него текст будет прижат к левой и верхней рамкам рабочего окна.

Остался последний штрих: в основную страничку каталога katalog1.html хотелось бы вставить перед каждой ссылкой ма-аленькое-маленькое изображение изделия, лёгкий намёк на то, что пользователю предстоит увидеть, если он щёлкнет по ссылке.

Для этого откроем ещё раз все картинки gif и уменьшим их размер до 32 pixels в ширину (а высота уменьшится пропорционально), сохраним уменьшенные копии в новых файлах с добавлением через чёрточку цифры 1: i01-1.gif, i02-1.gif и т. д. Поместим коды картинок внутрь ссылок в файле katalog1.html, чтобы и при щелчке на картинке также открывалась новая страница (как и при щелчке на тексте ссылки). Вот что у нас получится:

Однако, открыв файл katalog1.html в обозревателе, мы увидим кое-что странное, чего вовсе не планировали получить: вокруг картинок-значков, помещённых внутрь ссылок, появилась жирная синяя рамка, сами картинки как-то «подскакивают» в строках относительно текста, а расстояние между строчками каталога определяется высотой значка и получается разным, что тоже не очень красиво.

Всё это, конечно, исправляется с помощью CSS. Во-первых, зададим в файле dn.css правило для всех элементов img:

Оно уберёт вокруг картинок рамки (border:0) и выровняет картинки по нижней линии соседнего текста.

ex14 Файлы примеров: css5 (css5)

Во-вторых, зададим расстояние между строками (ling-height) для абзаца, в который заключены ссылки каталога. Как это сделать? Если мы изменим в файле dn.css правило CSS для элемента p, то оно будет применяться ко всем абзацам всех страниц нашего сайта. Мы планируем значительно увеличить вертикальное расстояние между строк, сделать его равным высоте самого большого значка (файл i03-1.gif); применять это правило, например, к тексту «Истории» неразумно.

Так же, как и в случае со ссылками для навигационной панели, используем понятие class: назначим элементу p, в который вложены ссылки, класс katalog:

Затем создадим в файле dn.css отдельное правило для абзацев класса «katalog»:

Высота самого большого значка i03-1.gif у нас 35px (это вы могли увидеть в Photoshop'е, когда уменьшали основные изображения до ширины 32px).

На CD нет отдельного каталога с полученными после этих изменений результатами. Потому что результаты ничем не отличаются от тех, которые мы уже видели в папке omne\css5. Из-за того, что мы вложили в строки картинки, расстояние между строками абзаца не увеличивается до 40px. Вот незадача! Даже вспоминать не хочется, сколько времени пришлось мне убить на её (не)решение. Вернее, сколько вариантов перебрать, чтобы решение выглядело одинаково в разных интернет-обозревателях. Что ж, природу не обманешь, в итоге приходится прибегнуть к примитивной логике: раз расстояние между ссылками из-за картинок не регулируется в пределах одного абзаца (или любого другого элемента), надо или убирать картинки, или помещать каждую ссылку в отдельный элемент, причём, блочного типа - и выравнивать по нижнему краю блока.

Элементы по способу своего отображения могут быть строчными (inline), блочными (block), табличными и ещё кое-какими (сейчас нам это не надо). Разница между двумя основными способами отображения вот какая. На страницах нашего учебного сайта есть блок ссылок – навигационная панель. В тексте HTML-кода каждая ссылка записана с новой строки:

<a href="index.html">Главная</a> 
<a href="address.html">Адреса</a> 
<a href="requisit.html">Реквизиты</a> 

Но на экране ссылки выглядят стоящими рядом в одной строке – это и значит, что они являются строчными элементами.

Если же мы напишем код со стоящими на одной строке блочными элементами, то каждый из этих элементов всё равно будет располагаться вертикально друг под другом:

<style type="text/css">
div {border:2px solid maroon; margin:1em; width:10em}
</style>
<div>раздел 1</div><div>раздел 2</div><div>раздел 3</div>

(файл blocks.html)

В блочный можно превратить любой элемент, тот же p - с помощью присвоения свойству display значения block (и заодно задать этому вновь созданному блоку нужную высоту):

Затем нужно каждую ссылку поместить внуть элемента p класса k1:

Как теперь заставить ссылки прижаться к нижнему краю блоков-абзацев? Как ни бейся, из-за картинок никакие vertical-align:bottom не действуют. Самое обидное то, что в обозревателе Mozilla Firefox расстояния между ссылками (с вложенными в них картинками) и так были равными, уже в предыдущем нашем результате в omne\css5, проблемы с разной высотой возникают только в Интернет Эксплорере (версии 5-6). Но большая часть людей как раз и бродит по Интернету с помощью этого обозревателя, поэтому решать задачу надо именно и в первую очередь для него.

Решается она так (можете поискать и другие решения):

- для ссылки, вложенной в абзац класса k1, задаём свойству position значение absolute. Ну, а bottom:0 как раз и означает: «Прижми (хвост) к низу!». Правда, и это правило не будет работать, пока родительскому элементу для ссылки (то есть абзацу класса k1) не будет задано (хоть какое-нибудь!) позиционирование:

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

ex15 Файлы примеров: css6 (css6)

И это ещё не предел.

Опять работа с изображениями

Можно и не быть гениальным дизайнером, ваяющим логотипы, но всё равно заметить, что картинки на страницах omne\css6\katalog1.html и omne\img2\katalog1.html выглядят по-разному: в omne\css6 они с более грубыми, рваными краями. Так произошло, потому что мы уменьшали размер исходных картинок для значков, находясь в цветовой модели Indexed Color. Если картинки перевести предварительно перед уменьшением в модель RGB (а потом, перед сохранением, разумеется, обратно в Indexed Color), таких резких границ не будет, они сгладятся. И второй момент: прозрачность прозрачностью, но гладкие края довольно сложно организованы (вы можете увидеть это при сильном увеличении в Photoshop'е): гладкость достигается за счёт определённого алгоритма в чередовании разных оттенков цветов, причём общее «направление движения» играет решающую роль - от светлой картинки к тёмному фону или наоборот. Если мы произведём все операции уменьшения (и, следовательно, при модели RGB автоматического сглаживания) для тёмной картинки на светлом фоне, а потом поместим картинку на страницу с тёмным фоном, то вокруг картинки образуется светлый ореол (как вокруг тени на логотипе «OMNIAmea») - идеального сглаживания мы не добьёмся.

Поэтому для наибольшей совместимостью с будущим фоном страницы, перед уменьшением картинки в Photoshop'е надо сначала создать новый слой под изображением и залить его тем же цветом: #cccccc, а затем уменьшить изображение до нужной ширины (32px), перевести в индексированный цвет и потом удалить серый фон (с помощью Magic Wand). Это всё равно лучше, чем оставлять серый фон вокруг картинок, потому что на краях изображений принципиально важен именно переход к более светлому или более тёмному фону, а не к конкретному цвету, и наши прозрачные картинки, с переходом, рассчитанным на цвет #cccccc, будут так же хорошо выглядеть на целом ряде цветов фона - в пределах примерно от 99 до ff: #ccffcc, #ccffff, #ccff99 и др. Начиная где-то с #999999 и меньших значений уже явно обозначатся более светлые края картинок. На чисто белом фоне края картинок тоже будут выглядеть хуже, чем на сером (или других светлых оттенков).

Последний штрих: мы изменили оформление ссылок для каталога продукции, воспользовавшись обозначением p.k1 a (правила для ссылок, вложенных в абзац класса k1). В логике их поведения вы уже сможете разобраться самостоятельно, изучив файл dn.css в каталоге с последними результатами:

ex16 Файлы примеров: img2 (img2)

Обновление информации

Предположим, через некоторое время вы получили новое письмо с описанием товаров, и в этом письме оказались длинные строки. Как в примере omne\doc\Re_2.eml (doc/Re_2.eml). Там не все строки длинные, но если текста много, нам проще исходить из того, что они есть, и нельзя будет обойтись простым тэгом <pre>. Надо расставлять метки абзацев (и, может быть, заголовков). Но если текст большой, это делать нудно.

Лучше скопировать весь текст в окно MS Word и редактировать там. Это лучше делать и для вновь создаваемых текстов. И вообще всегда - пока в MS Word есть встроенная проверка русской орфографии (вы ведь не хотите, чтобы на вашем сайте были ЕЩЁ И орфографические ошибки?). Но проверка опечаток - это всегда, а именно сейчас нам надо как-то быстро расставить тэги <p> и </p>.

Для начала необходимо сделать в Word'е видимыми непечатаемые символы абзацев - нажать кнопку ¶ на панели «Стандартная»:

Затем выбрать из меню «Правка» пункт «Заменить»:

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

После заполнения полей «Найти» и «Заменить» нажмите кнопку «Заменить всё». Word расставит тэги по всему тексту, кроме первой строки (потому что перед ней нет символа абзаца), а также, скорее всего, наставит несколько лишних тэгов в конце документа. Поставьте недостающий тэг в начале документа и удалите ненужные в конце. Теперь вы можете открыть необходимый html-файл (например, a01.html) в текстовом редакторе (Блокнот или Bred), удалить из него устаревший текст (не удаляя служебных строк в начале документа!), скопировать подходящий фрагмент текста из Word'а в буфер обмена Windows и вставить его в нужное место открытого файла a01.html. После этого сохраните файл - и можете загружать его на свой веб-сервер в Интернет.

В последнем абзаце описана наиболее общая, типичная схема обновления информации на небольшом веб-сервере. Именно так: 1) создание нового фрагмента html-текста в удобном для вас редакторе; 2) вставка готового фрагмента текста с тэгами на место устаревшего фрагмента в html-файле; 3) загрузка изменённого html-файла на сервер. В некоторых частных случаях, особенно когда информация хорошо структурирована, разумно первые два действия автоматизировать. Мы так делали при сохранении прайс-листа из MS Excel в HTML. Можно ещё больше сократить путь информации к html-файлу - «выгружать» её прямо из базы данных: 1С, FoxPro, MS Access, любой другой. Так, кстати, делается на больших серверах: когда вы что-то там ищете, вы фактически посылаете запрос к базе данных, программа на сервере выполняет поиск информации, быстро-быстро генерирует нужный вам html-файл и выдаёт его на ваш компьютер. Вы можете изучить html-код прайс-листа, создаваемого надстройкой priceH.xla, и сформулировать задание программисту для экспорта отчёта из базы данных (например, 1С) прямо в html-файл.

Таблицы

Прайс-лист имеет очень характерную структуру, типичное расположение информации: в виде таблицы. Таблицы в HTML (да, собственно, и везде) организованы довольно сложно. Потому что информация в них переводится из линейного вида в двухмерный: вы пишете одну длинную строчку кода:

а на экране появляется прямоугольник с ячейками:

Визуальный редактор HTML

Чем дальше, тем чаще вам придётся изменять код html-страницы и тут же смотреть, как изменения отразились на внешнем виде. Методика такой работы примерно следующая. Создаёте html-файл, открываете его в текстовом редактоое с синтаксической подсветкой, редактируете код; затем, не закрывая текстовое окно, открываете этот html-файл в обозревателе. У вас на экране будет открыто два окна:

Переключаться между окнами можно с помощью клавиш Alt+Tab, обновлять изображение в обозревателе - с помощью клавиши F5. Так все и работают: изменить код, сохранить (Ctrl+S), Alt+Tab, F5 - и смотрят, что получается.

При серьёзной, глубокой работе вам понадобится держать открытыми не два, а сразу четыре окна: в одном - результат, в другом - html-код, в третьем - таблица CSS, в четвёртом - программа JavaScript. Ничего страшного, в Windows вполне можно держать открытыми одновременно 4-5 окон, Windows выдержит.

Опять таблицы

Проблемы работы с таблицами связаны с противоречивостью. А противоречия возникают от двух вещей: двумерности таблиц и многократной вложенности элементов друг в друга. Например, ячейкой таблицы можно управлять как элементом, принадлежащим столбцу ячеек, а можно - как элементом, принадлежащим строке ячеек. Но вложена ячейка обязательно должна быть в «строковый» элемент таблицы - tr - без этого она будет отображаться неправильно (хотя начальный тэг <tr> можно иногда и пропустить - заботливые интернет-обозреватели, как всегда, дорисуют его сами). Обратите также внимание на то, что мы пропускаем в примерах все закрывающие тэги таблицы: </tr>, </td>, - кроме тэга </table>.

Продолжаем эксперименты. Как, по-вашему, делается в таблице горизонтальное объединение ячеек? - С помощью атрибута ячейки (td) colspan:

Вертикальное объединение - с помощью атрибута ячейки rowspan:

Жирные чёрные точки в реальном коде ставить не надо, они тут просто указывают на пропущенные фрагменты: <td>3 в первом случае (ячейка с цифрой "2" распространяется на следующую в ряду - с цифрой "3", поэтому код ячейки с цифрой "3" должен быть удалён) и <td>4 во втором примере (удалён код первой ячейки из нижней строки). Если хотите, можете не удалять фрагменты кодов <td>3 и <td>4 (вы не должны ничему верить на слово): попробуйте добавить colspan и rowspan, ничего не удаляя, и посмотрите, что получится.

ex17 Файлы примеров на CD: table01.html-table03.html в папке omne\table (table)

CSS для таблиц

Самый главный элемент в таблице - td: именно в нём непосредственно лежит текст, и все изменения оформления td изменяют отображение текста; остальные же элементы (table, tr...) не могут обычно влиять на отображение текста таблиц. Рассмотрим пример таблицы table1.html в папке CD omne\table (table):

Мы поместили таблицу в контейнер div, чтобы получить возможность управлять общим положением таблицы на странице. Код самой таблицы не изменился по сравнению с предыдущими примерами, добавлено только cellspacing="5px", увеличивающее для большей наглядности расстояние между ячейками. Свойство cellspacing пока что нельзя изменить с помощью CSS, поэтому его значение приходится задавать прямо в html-файле. Мы убрали также из html-файла «общее» слово border, потому что отображением рамок можно управлять с помощью CSS полностью, и добавили привязку к таблице файла стилей table.css:

В правилах CSS (файл table.css) всё довольно обычно:

Мы изменили числа в некоторых ячейках, и теперь колонки в таблице стали разной ширины, а также стало заметно, что у текста выравнивание по левому краю (это обычное значение по умолчанию, его не надо задавать специально). Задать всем ячейкам таблицы одинаковую ширину с помощью стандартного свойства width нельзя, потому что такого свойства CSS для элемента td просто не существует. Я предупреждал, что с таблицей всё будет гораздо сложнее... Но, если внимательно почитать спецификацию CSS, и на ширину ячеек найдётся управа. Пример решения - файл table2.html. Код его таблицы:

В нём два изменения: таблице добавлено имя класса (ex2), чтобы не создавать новый файл css, и в самом верху три раза (по числу колонок!) добавлено волшебное слово <col>. Элемент col как раз и позволяет задавать ширину ячеек (а также некоторые другие свойства):

Однако даже при выполнении всех условий текст внутри ячеек не хочет выравниваться по центру в обозревателях с ядром Gecko (SeaMonkey, Firefox). Никто не может заставить производителей соблюдать все правила CSS. Поэтому приходится добавлять ещё одну строчку в файл table.css:

Мы вложили вторую таблицу в раздел div класса main, а в правилах CSS заставили раздел div.main выравнивать всё содержимое внутри себя по центру (в том числе и таблицы). Но для обозревателей Gecko и это не закон. Поэтому от строчки div.main {text-align:center;} приходится отказаться в пользу универсальности и заменить её на более сложную (и менее точную) конструкцию, позволяющую расположить таблицу по центру объекта лишь приблизительно:

К счастью, на практике редко бывают нужны таблицы такого вида, как наши учебные - со свойством «border-collapse:separate» и с cellspacing больше нуля. Обычно у нормальных, рабочих таблиц ячейки разделены тонкими прямыми линиями, без промежутков. Эта особенность позволяет применить для центрирования таблицы грубое, но идеально точное и универсальное средство (действующее одинаково в обозревателях Gecko и в IE) - задать свойству display таблицы значение, как для обычных строчных элементов: inline. Только надо сделать фон таблицы прозрачным и убрать вокруг таблицы рамку (её заменят слившиеся рамки вокруг ячеек) - иначе в браузерах Gecko будет видно, как «тело» таблицы скукожилось в этот самый «инлайн» (что, кстати, полезно именно для учебных целей). Интернет Эксплорер же просто игнорирует в данном случае нашу виртуозную обработку таблицы колуном - «display:inline» - и может отображать её хоть с фоном, хоть с рамкой - таблица не изменяется..

Однако нет совершенства в мире, и в обозревателе Opera (хуже всех работающем с CSS) назначение таблице «display:inline» разваливает таблицу, которая, к тому же, так и не размещается по центру.

Можно очень долго и плодотворно экспериментировать с правилами CSS для таблиц и ячеек, особенно если разобраться в логике Спецификации CSS2. Многие даже ухитряются всё содержимое страницы умещать в таблицу - стиль html-вёрстки такой. Но я лично не согласен рисовать html-таблицы (и обновлять их содержимое) ни вручную, ни в самом лучшем «визуальном» редакторе - слишком уж кропотливая это работа. Лучше продумать алгоритм построения таблицы, воплотить его в каком-нибудь скрипте и затем формировать (или обновлять) таблицу из базы данных автоматически.

ex18 Файлы примеров на CD: table04.html-table06.html в папке omne\table (table)

Кстати, о скриптах -