Здравствуйте, уважаемые
подписчики!
Это письмо желательно читать в броузере
или развернуть на весь экран, тогда легче ориентироваться и приятнее
читать!
Мы с вами уже изучили довольно много типов и всего, что
с ними связано. На сегодня уже закрыты такие темы как работа
с массивами (за искл. некоторых алгоритмов, которые мы еще
изучим в практических выпусках), преобразование типов, списки
стандартных типов.... Однако это далеко не все темы, которые
связаны с типами. На самом деле существует еще несколько,
с которыми обязательно предстоит ознакомиться. Думаю, стоит
привести их список:
- Записи (record)
- Файловые типы;
- Перечисляемые типы;
- Определяемые пользователем типы;
- Объекты (object);
- Некоторые другие (указатели...)
Все последующие уроки мы будем из разбирать в указанном
порядке. На самом деле нам до окончания изчучения языка
и начала написания полноценных программ осталось не так
уж и много тем. Однако большинство из них довольно сложны,
так что время от времени придется подумать и позаниматься,
если вы действительно хотите хотите научиться программировать.
Я в свою очередь постараюсь помочь вам в этом насколько
смогу.
Итак, сегодня мы начинаем изучение новых типов, а именно
записей или, как они изображаются в Паскале record.
Эта тема даст вам мощный инструмет, послужит отличным введением
в объектно-ориентированное программирование, как следствие
приблизит к программированию под Win32 и расширит ваши возможности
как программистов.
Сегодня же мы напишем уже довольно большую (по сравнению
с пред.) программу, которую в дальнейшем еще немного усовершенствуем.
Программа называется "Записная книжка". Итак, начнем.
Перед тем, как начать рассказ о новом типе данных я хотел
бы как всегда создать такую ситуацию, когда возникнет необходимость
в применении этого типа. Согласитесь, это гораздо интересней,
чем простая теория и определенно позволяет лучше понять,
зачем вообще существует этот тип. Особо это касается записей,
сути которых иногда очень многие не понимают.
Ну чтож, давайте представим такую задачу. Пусть нам необходимо
создать записную книжку с адресами, которая будет некоторым
подобием базы данных. Суть программы будет в следующем:
- Программа может спрашивать и выдавать следующие данные:
- Фамилия, имя, отчество;
- Адрес: улица, дом;
- Телефон;
- E-mail;
- Пусть количество адресатов будет ограничено 10ю адресами.
Теперь задумаемся: что нам нужно, чтобы написать такую
программу? В первую очередь встает вопрос о хранении вводимых
данных. Я не имею ввиду их сохранение на диске - таким мы
пока не занимались, это тема следующих выпусков. Нет, наша
программа будет хранить данные пока только в памяти компьютера.
Но как? В какие переменные она будет их помещать?
Вы знакомы с понятием массива. Но массив может хранить
только одну переменную в каждом своем элементе. В принципе,
нам и требуется что-нибудь вроде массива, только необходимо,
чтобы в каждом его элементе сохранялось 4 переменных. Понятно,
что с помощью массивов такого сделать нельзя.
Здесь мы и подходим к понятию записей. На самом деле запись
- это контейнер, в котором именно "записано" несколько переменных.
Чем-то похоже на массив, только переменные могут быть разных
типов, каждая из них имеет свое имя.
Для начала давайте определим типы для наших данных (адрес):
- Fio: String; {фио}
- Adress: String: {адрес}
- Phone: LongInt; {телефон, в виде
числа}
- Email: String; {e-mail}
Как видите, переменных несколько, все они имеют имена
и разных типов. Что же делать с такими данными? В принципе,
можно эту задачу решить и с одними массивами - завести 4
массива соотв. типов и параллельно сохранять в них переменные.
Но это делается гораздо проще, если пользоваться записями.
Запись - это способ объединения нескольких переменных
разных типов в одной. Благодаря этому достигается замечательная
упорядоченность данных, программы при этом упрощаются и
становятся логичнее.
Итак, как же создать запись? Разложу все этапы создания
записи по порядку.
В первую очередь обращаю внимание на то, что записи описываются
в разделе type, который подобен известным нам разделам
var или const. В этом разделе описываются
все типы, определяемые пользователем.
Описываются записи с помощью служебного слова record,
перед которым идет имя записи:
type
AdressItem = Record
После описываются все переменные, которые будут содержаться
в записи, подобно тому, как они описываются в разделе var.
Завершается запись словом end;. Вот пример записи,
необходимой для нашей программы:
type
AdressItem = Record
Fio: String;
Adress: String;
Phone: LongInt;
Email: String;
end;
Как видите, описать запись совсем не сложно. Кроме того,
обращаю внимание, что создав в программе запись вы получаете
новый тип и нужно создать переменные этого типа. Здесь тоже
нет ничего сложного. После того, как вы опишете запись в
разделе type, можно создать переменные нового типа
в разделе var:
var
A,B: AdressItem;
И все. Теперь вы имеете две записи. Но две записи - это
мало, по условию нам нужно 10 записей (у нас адресная книжка
на 10 адресов). Нет ничего проще! Вспоминаем массивы и их
возможности - объединение группы переменных одного типа.
Вот и сделаем массив из созданной записи:
var
Book: Array [1..10] of AdressItem;
Вот и все, теперь мы имеем целых десять записей. При этом
каждый элемент массива Book в свою очередь содержит
другие, собственные переменные. Вроде бы все просто и уже
понятна работа записей, но как теперь добраться до переменных,
которые находятся внутри записи? Это тоже чрезвычайно просто.
Существует два способа обращения к элементам записи. Пока
немного отойдем от созданного массива и поработаем с такой
переменной:
var
A: AdressItem;
Теперь, допустим, мы хотим прочитать с клавиатуры все
поля записи и внести в переменные, которые внутри A
значения. Для этого нужно обратиться к полям записи одним
из следующих способов.
1. Поля записи (ее внутренние переменные) могут быть изменены
путем использования служебного слова with. При этом
строится небольшая конструкция, внутри которой и происходят
все манипуляции с записью. В нашем примере это будет так
(читаем значения в запись A):
var
A: AdressItem;
begin
with A do
Write('ФИО: ');
Readln(Fio);
Write('Адрес: ');
Readln(Adress);
Write('Телефон: ');
Readln(Phone);
end;
end.
Думаю, синтаксис констркукции with понятен:
- with _имя_записи_ do
- .... действия с ее полями (ее переменными) .....
- end;
Это очень просто, но если вы всеже не поняли, как идет
обращение к записи через использование with, думаю
в примере, который будет сегодня в выпуске, вы полностью
в этом разберетесь.
2. Итак, второй способ обращения к полям записи. Он еще
проще и гораздо компактнее. Суть его в следующем:
- К полю записи можно обратиться, указав имя записи
и через точку имя поля.
В нашем примере с записью A программа принимает
следующий оборот:
var
A: AdressItem;
begin
Write('ФИО: ');
Readln( A.Fio );
Write('Адрес: ');
Readln( A.Adress );
Write('Телефон: ');
Readln( A.Phone );
end.
Это, на мой взгляд совсем просто. Теперь давайте ворнемся
к нашей программе "Записная книжка" и к нашему массиву из
записей. Перед тем, как подготовиться в написанию самой
программы давайте посмотрим, как можно с помощью приведенных
выше двух способов обратиться к полям записи, которая является
элементов массива. У нас это массив Book (Книжка).
Способ первый - с помощью with. Читаем первый
элемент массива Book:
- With Book[1] do begin
- Write('ФИО: ');
- Readln(Fio );
- Write('Адрес: ');
- Readln(Adress );
- Write('Телефон: ');
- Readln(Phone );
end.
Способ второй - с помощью оператора "точка". Читаем
первый элемент массива Book:
- begin
- Write('ФИО: ');
- Readln(Book[1].Fio );
- Write('Адрес: ');
- Readln(Book[1].Adress );
- Write('Телефон: ');
- Readln(Book[1].Phone );
end.
Разобрались? Надеюсь, что да. Поверьте, здесь нет ничего сложного.
Если все-таки немножко непонятно, ничего страшного - дальше
разберетесь.
Ну а теперь пришло время написать небольшую программку,
которая будет работать с записями. Продолжая тему сегодняшнего
урока я приведу текст предложенной програмы "Адресная книжка".
Итак, получается такая вот программка:
Program Adress_Book;
uses Crt;
type
AdressItem = record
Fio: String;
Adress: String;
Phone: LongInt;
Email: String;
end;
var
Book: Array [1..10] of Adressitem;
Nums, I: Byte;
Code: Integer;
C: Char;
Quit: Boolean;
{ процедура добавления новой записи }
Procedure New_Item;
var
F, A, Em: String;
Ph: LongInt;
begin
ClrScr;
Inc(Nums);
if Nums > 10 then
begin
Write('Максимальное количество записей!');
exit; {выход из процедуры}
end;
Writeln('Запись N', Nums); Writeln;
Write('Введите ФИО: ');
Readln(F);
Write('Введите адрес: ');
Readln(A);
Write('Введите телефон: ');
Readln(Ph);
Write('Введите E-mail: ');
Readln(Em);
Writeln;
with Book[Nums] do
begin
Fio := F;
Adress := A;
Phone := Ph;
Email := Em;
end;
Write('Новая запись успешно добавлена!');
end;
{ процедура отображения данных отдельной записи }
Procedure List_Item(N: Byte);
begin
if N > Nums then
begin
Write('Неправильный номер записи');
exit; {выход из процедуры}
end;
With Book[N] do
begin
Writeln('Запись N', N); Writeln;
Writeln('ФИО: ', Fio);
Writeln('Aдрес: ', Adress);
Writeln('Tелефон: ', Phone);
Writeln('E-mail: ', Email);
Writeln;
end;
Readln;
end;
begin
Quit := False;
Nums := 0;
repeat
ClrScr;
Writeln('Программа "Записная книжка"');
Writeln('==========================='); Writeln;
Writeln('Записи: ');
Writeln('--------------------');
if Nums = 0 then Writeln('Записей нет. Книжка пуста.')
else
For I := 1 to Nums do
Writeln(I, ' - ФИО: ', Book[I].Fio);
Writeln('--------------------'); Writeln; Writeln;
Writeln('''a'' - добавить запись');
Writeln('Номер - показать запись');
Writeln('Esc - выход');
Writeln;
Write('Ваш выбор: ');
C := ReadKey;
case C of
'1'..'9': begin
Val(C, I, Code);
List_Item(I);
end;
'a': New_Item;
#27: Quit := true;
end;
until Quit;
end.
|
Что скажете? Все понятно? Думаю, что с первого взгляда
нет. Замечу, что я написал эту программу совершенно не задумываясь
о проблемах оптимизации, кроме того она несколько недоработана.
Почему я так сделал - читайте ниже.
Ну а пока давайте разберемся, что же происходит в нашей
программе. На первый взгляд она несколько громоздка: но
это ошибочное мнение. На самом деле программа очень проста.
Посмотрите внимательно: она содержит всего две процедуры:
- New_Item - добавляет новую запись;
- List_Item - отображает одну из записей.
Остальное - это главный блок программы, раздел repeat
- until. Теперь вкратце обо всех частях программы.
Во-первых, разберемся с переменными. Как Вы видите, их
очень мало, кроме того - две вообще не имеют непосредственного
отношения к программе. Это I (только для цикла),
а также Code, которая используется лишь для возвращения
кода возможной ошибки в процедуре Val (см. пред.
выпуск).
Итак, вы видите, что в самом начале описана сама запись.
Далее - создается массив Book, нового созданного
типа AdressItem, то есть каждый его элемент - это
запись AdressItem. Дальше - переменная Nums,
которая содержит текущее количество записей в нашей адресной
книге. Переменная C - это для выбора элемента меню.
Quit: Boolean - проверка на выход. Цикл у нас идет
как раз исходя из этой переменной. Если пользователь решил
выйти из записной книжки, то Quit просто становиться
true и основной цикл прекращается, программа останавливается.
Ну а теперь о процедурах. Первая - New_Item. Она
демонстрирует работу по занесению значений в отдельную запись.
В самом ее начале увеличивается переменная Nums,
что означает добавление новой записи (на одну становиться
больше). Кроме того, пере тем, как произвести увеличение
этой переменной, проверяется - она больше 10? Если да, то
достигнут максимум сообщений и больше добавлять нельзя,
о чем процедура своевременно оповещает и завершает свою
работу без выполнения дальнейших действий, для чего служит
операция exit;
Дальше - читаются несколько переменных. После этого считанные
значения заносятся в поля записи. Вот и все.
Процедура List_Item выводит данные конкретной записи
под номером N, который передается ей в качестве параметра.
Как и пред. процедура, она сначала проверяет N на
правильность (не больше ли, чем всего записей в книжке?)
и если она верна, то просто распечатывает поля записи, которая
лежит в массиве Book под номером N. Readln,
который стоит последней строчкой, думаю, пояснений не требует
:)
Ну а теперь о главном теле программы и ее основном цикле.
В самом начале программы основным переменным присваиваются
значения, порядка ради:
- Quit := False; { это значит, что выхода пока
нет }
- Nums := 0; { записей нуль, книжка пуста }
После этого начинается сам цикл, о котором уже упоминалось
выше. Работа, которая в нем выполняется тоже очень проста
- все сводиться к очистке экрана, распечатке меню программы
и действия выбора. Общий план таков:
- Очищаем экран;
- Распечатываем меню программы;
- Распечатываем записи книжки в виде "N_записи - ФИО:
_поле_Fio_записи_", то есть выводим список имеющихся
имен. При этом, как видите, сначала проверяется переменная
Nums и если она равна нулю (записей нет), то
ничего печататься не будет, а выведется строка "Записей
нет. Книжка пуста". И еще - обратите внимание, в этом
действии я использую точку - Book[I].Fio - для
обращения к полю записи, а не конструкцию With ... do.
Здесь это гораздо удобнее.
- Читается символ (Помните, функция ReadKey из
модуля Crt не требует подтверждения ввода нажатием
Enter.
- В зависимости от того, чему равна эта переменная,
вызывается определенная процедура, либо осуществляется
выход.
Это все. Как видите, программа совершенно не сложная.
Зато хорошо демонстрирует работу с записями.
Ну а теперь о том, почему я не доработал эту программу,
а также о том, что еще с ней можно сделать. Уважаемые друзья!
Эта программа - тема и следующего выпуска тоже, когда мы
будем проходить работу с файлами. Тогда мы усовершенствуем
ее, чтобы Записной книжкой можно было реально пользоваться
- будем сохранять базу сообщений в отдельном файле, а также
добавим несколько функций.
Всвязи с этим формируется домашнее задание, которое вам
необходимо выполнить для успешного освоения материала следующего
выпуска. Оно заключается в том, чтобы добавить в эту книжку
несколько новых функций. Присылать мне эти задания не нужно,
это только для вас. НО: если вы их не выполните, то материал
следующего выпуска понять будет довольно сложно, так как
я НЕ БУДУ ПРИВОДИТЬ исходный код некоторых процедур, задаваемых
на дом.
Итак, домашнее задание для самостоятельной работы:
- Напишите процедуру УДАЛЕНИЯ ЛЮБОЙ ПО НОМЕРУ ЗАПИСИ
из массива (подсказка: вспоминайте алгоритм сдвига элементов
по массиву из пред. выпусков);
- Добавьте возможность ПОИСКА ИНФОРМАЦИИ по всей
записной книжке, то есть осуществите возможность найти
телефон и посмотреть все его данные; найти телефон по
ФИО; найти ФИО по адресу и т.п. (подсказка: вспоминайте
работу со строками!)
- В программе есть небольшая ошибка. Найдите
и исправьте ее. Интересно, кто сообразит :)) Об этом
можете мне написать (только не присылайте исправленные
исходники, мне они полезны не будут).
Ну вот, собственно и все! Согласитесь, отличная это штука
- ЗАПИСИ. Разве нет? Кто-нибудь не согласен?
» К содержанию
Вот наконец и возвращаемся к нашему HTML. Сегодня у нас
несколько необычный урок. Мы будем заниматься созданием
реального сайта, продумывать его структуру. Новая, наверное,
самая основополагающая тема в построении сайтов - создание
структуры документа. До этого мы создавали простые странички,
учили тэги (и еще будем), в общем - просто присматривались
к редактированию гипертекстовых документов. Теперь пришло
время двигаться дальше и заняться структурой. Все необходимое
для этого вам уже известно, таблицы, списки всякие... в
общем, начнем.
Итак, что же такое структурированный HTML документ? Во
первых, структура - это определенное построение информации,
разбиение ее на блоки или на независимые части. Когда это
делается с HTML документами - берется информация, разбивается
на блоки и оформляется отдельно - это и называется структурированием.
Хотите наглядный пример? Все очень просто - возьмите любую
газету. Что вы видите? Ведь действительно, каждая ее страница
разбита на информационные блоки: колонки или столбцы, разделенные
различными рамками и отступами. Это - структура. Точно такая
же история и с сайтами - по сути они мало чем отличаются
от газет или журналов. Сайт обязательно должен быть разбит
на логические разделы, несущие ту или иную информацию. Этому
вам и предстоит научиться - разбивать страницы, создавать
структуру.
Надо отметить, что здесь фигурирует довольно крупная теоретическая
часть. Она несет такую информацию как создание разделов,
блоков, продумывание всего этого дела, деления его по важности
и соответсвующего размещения на страницах сайта. Я не хочу
утруждать вас чтением этого - хотя лекция такого типа просто
необходима. Помните - я хочу научить вас не просто гипертекстовому
языку, это просто средство реализации, инструмент. Я хочу
научить вас создавать полноценные и интересные сайты. В
общем, на сегодня я ограничиваюсь небольшим рассказом о
том, что такое части структуры и как их разделить. Читайте
следующий раздел.
| Логическая разбивка структуры |
Самая распространенная ошибка новичка в вебдизайне - это
спешка. Я часто наблюдаю, когда люди беруться за создание
сайта, даже не подумав толком о том, что на нем будет. На
первый взгляд самое главное - это идея, думаю они. Идеи,
безусловно, важны, но и спешить с их реализацией не стоит.
После того, как рождается идея (хочу сайт анекдотов!!!)
предстоит еще хорошенько ее обдумать. Что у вас будет на
главной странице? Присланные посетителями анекдоты? И сколько
вы их туда напихаете? А новости, а интерактивная связь,
а рассказ о том, что можно вообще найти на сайте? Часто
это совершенно не обдумывается, элементы вставляются на
страницы стихийно, по мере выполнения дизайна. Я, конечно,
не хочу заострять ваше внимание на конкретном примере, но
хочу объяснить, что продумывать структуру обязательно.
Итак, я говорил, что спешить - это плохо. Да, это действительно
так. Перед тем как создавать сайт, даже перед тем, как думать
о дизайне, самый важный шаг - это решить, что же на него
поместить и разделить эту информацию на части. Сегодня я
не буду сликом усложнять задачу и покажу пример простой
структуры, состоящей из двух главных частей.
Для того, чтобы посмотреть как это делается, давайте на
ходу придумаем сайт. К примеру, это будет сайт тех же анекдотов,
или лучше развлекательный сайт, содержащий несколько тематических
рубрик.
Итак, определимся. Допустим, мы задумали такие разделы:
- Анекдоты:
- Про Вовочку;
- Про порутчика Ржевского;
- Пошлые анекдоты;
- Веселые картинки:
- Компьютерные;
- Жизненные;
- Разные;
- Веселые истории:
- Из жизни;
- Из Интернета;
- Неизвестно откуда;
Содержание? Определенно, это уже полноценное содержание.
Этот список - состав сайта, то есть его непосредственное
целевое наполнение. Назовет эту часть Информационная.
А теперь давайте подумаем, какие еще разделы должны быть
на сайте? Что еще придумать, чтобы можно было заинтересовать
посетителей, расширить сайт в плане сервисов? Предлагаю
такой вариант, построим еще один блок ссылок:
- Главная страница;
- Форум сайта;
- Гостевая книга;
- Новости сайта;
Пожалуйста, обратите внимание - два списка, приведенные
мной совершенно различны по своему логическому смыслу. Первый
- это информационный состав сайта, его меню, сама его суть,
если хотите. Короче то, для чего сайт и создан. Второй список
- это просто сервисы, не имеющие _никакого_ отношения к
основной информации. Но она нужна - к примеру на каждой
странице должна присутсвовать ссылка на главную, а любители
писать в Гостевые книги и форумы будут рады оставить вам
свое сообщение. Эту часть назовет Дополнительная.
Вот мы и приехали к разделению структуры. Давайте теперь
подумаем о том, что мы будем помещать на главную станицу
будущего сайта.
Для начала придумаем небольшое описание, которое будет
вступлением, позволяющим вникнуть в состав ресурса. У меня
нарисовался такой вариант:
".... Здравствуйте уважаемые посетители!
Я рад приветствовать на своем сайте. Здесь Вы найдете все
или почти все, что нужно для того, чтобы отдохнуть. Каждый
из разделов сайта по своему интересен и заставит Вас улыбнуться.
Выбирайте, читайте, развлекайтесь!... "
Вот так, если не возражаете, встретим посетителей. Что
дальше? Кроме вступления, можно еще придумать раздел вроде
"анекдот дня". Пусть в качестве такового сегодня будет анекдот:
"... Мужик утром после встречи Нового года с опухшим лицом,
красными глазами, небритый стоит и смотрится в зеркало:
- Так вот ты какой, человек третьего тысячелетия!"
Пойдет? Думаю да :). Теперь можно еще подумать и выдумать
такой блок, как, например, "Новости сайта". Пусть он выглядит
следующим образом:
12 февраля - в раздел Анекдоты про
Вовочку добавлено 15 анекдотов.
15 февраля - открылась рассылка "Новости сайта"!!!
Теперь вы можете получать наши новости по почте!
Что-нибудь в этом роде. Ну вот пока и все, теперь похоже
достаточно информации для главной страницы и давайте подумаем
о том, как мы ее разместим и какая при этом образуется структура.
Как мы определились выше, у нас есть две основных части
содержания: информационная и дополнительная.
Кроме того, есть некая информация вроде новостей или анекдот
дня, которую тоже предстоит как-то оформить.
Как расположить эти элементы на экране и как их изобразить
- уже ваша задача... Но я примера ради всеже изобрел свой
маленький вариант и предлагаю его вашему вниманию.
Итак, давайте расставим элементы так:
- Вверху, в шапке страницы будут ссыки дополнительной
части содержания (главная, форум и т.п.)
- Далее - страница делиться на две части - левую и правую,
в одной из которых информационная часть содержания
(анекдоты, картинки...), а в другой - информационное
наполнение (новости,...).
Вот шаблон:
Анекдоты:
- Про Вовочку
- Про порутчика
- Пошлые
Веселые картинки:
- Компьютерные;
- Жизненные;
- Разные;
Веселые истории:
- Из жизни;
- Из Интернета;
- Неизвестно откуда;
|
Сайт "Развлекись!"
О САЙТЕ:
Здравствуйте уважаемые посетители! Я рад приветствовать
на своем сайте. Здесь Вы найдете все или почти все,
что нужно для того, чтобы отдохнуть. Каждый из разделов
сайта по своему интересен и заставит Вас улыбнуться.
Выбирайте, читайте, развлекайтесь!
АНЕКДОТ ДНЯ:
Мужик утром после встречи Нового года с опухшим
лицом, красными глазами, небритый стоит и смотрится
в зеркало:
- Так вот ты какой, человек третьего тысячелетия!"
НОВОСТА САЙТА:
12 февраля - в раздел Анекдоты про Вовочку
добавлено 15 анекдотов.
15 февраля - открылась рассылка "Новости
сайта"!!! Теперь вы можете получать наши новости
по почте!
|
Выглядит ужасно, не спорю. Зато наглядно. Видите, здесь
есть уже какая-то структура, еще совершенно не оформленная,
но сформировавшаяся? Это - первый шаг. После того, как вы
создадите для своего сайта подобную структуру (естесственно
такую, какую захочется вам, не исходите из моего примера),
уже надо собирать дизайн.
Итак, подумайте о том, что будет у вас на сайте, разделите
эту информацию на части и.... вперед, переходите к вебдизайну!
Теперь можно оформлять блоки, придумывать цвета и их сочетания
(цветовые гаммы), заполнять страницы. Мы в дальнейшем и
этим обязательно займемся, но пока все по порядку и нужно
рассмотреть техническую сторону создания структуры.
Переходим к следующему разделу.
| Техническое оформление структуры
|
Я уже говорил, что HTML - это не более чем инструмент
для создания сайтов. Кроме него нужно знать и уметь еще
много вещей, чтобы делать приличные страницы. Но и без хорошего
знания гипертекстового языка никуда; даже если вы дизайнер
с отличными способностями и рисуете в голове интересные
и красивые сайты, на экране монитора их воплотить без определенного
владения HTML не получиться.
Замечу, владение языком - это не совсем то, что называется
"знанием языка". Даже если вы знаете все тэги, их параметры
- зазубрили все стандарты и прочие нормативы, вполне вероятно,
что вы не сможете сотворить ту или иную часть.
Вот структура - это, кстати, довольно не просто для новичка.
Не всем, как это не очевидно, с ходу придет в голову сделать
страницу в две колонки путем создания большой таблицы с
параметром border=0 (т.е. и не видно, что это таблица).
Многие сообразят делать это путем вставки пробелов или еще
чего поизвращеннее.
Всеже есть в вебдизайне что-то от программирования, чтобы
там не говорили. Те же алгоритмы, тот же подход.... Но я
что-то разговорился, пора возвращаться к уроку.
Сейчас я буду рассказывать о создании структуры сайта,
которую я привел разделом выше. Если вы подписаны в текстовом
формате, советую посмотреть HTML вариант рассылки в ее архиве
на сайте, для освоения информации нужна та серенькая табличка.
Если вы читаете в HTML - разверните письмо на весь экран
и посморите на эту таблицу еще раз (она указана в процентах
от экрана, так что может исказиться - в зависимости от ширины
окна почтовой программы). Сделали? Тогда двигаемся дальше.
Перед тем, как рабирать HTML код, всмотритесь в таблицу.
Что мы делаем? Во-первых, вверху ссылки дополнительного
содержания. Это - одна таблица. Я специально сделал все
серым и оставил белые поля для наглядности - чтобы были
видно, что это таблица. Здесь всплывает очень важный нюанс
использования таблиц: если мы вы захотели сделать просто
ссылки на белом фоне, пропорционально растянутые по экрану,
я уверен, что вы захотели бы разделить их пробелами. Пример:
Очень многие новички в вебдизайне допускают такие ошибки,
как вставку кучи пробелов между словами, тем самым подгоняя
ссылки под ширину экрана. Помните, такие элементы создаются
именно с использованием таблиц. Основания:
- Выравнивая с помощью параметра align=center всю
таблицу, мы выровняем целый блок информации - то есть
все, что внутри нее.
- Допустим, мы имеем четыре ссылки (как в примере), то
для их пропорционального вытягивания по экрану нужно просто
поместить их все в отдельные ячейки таблицы, указав выравнивание
внутри них по центру и не указывая явно ширину ячеек (опуская
параметр width):
<td align=center>
- <a href="index.html">Главная</a>
</td>
Броузер в этом случае сам распределит ширину ячеек пропорционально
относительно таблицы, то есть создасть все ячейки равной
ширины.
- И еще немаловажное основание - это очень оптимизированный
вариант.
Второй элемент - это большая таблица, которая и образует
структуру. Она состоит из одной строки и двух ячеек: первая
шириной 25% от экрана, вторая - оставшиеся 75%.
Это все. Если вы поняли, как я сделал такую структуру,
то дальше и объяснять нечего, так как все сайты с вертикальными
полосами содержаний создаются подобным образом - будь то
монстры дизайнерской мысли, такие например, как Yandex.ru или www.Microsoft.com, либо сайты немного
поскромнее, вроде http://prog.agava.ru :))) ...
Согласитесь, очень просто, не так ли? Создавая одну таблицу,
мы реализуем всю структуру. Теперь давайте отойдем от примера
и посмотрим, что можно написать, чтобы создать структуру
уже в три колонки, здесь и коснемся некоторых нюансов:
<table align=center width="90%" cellpadding=0 cellspacing=0>
<tr>
<td width="25%" valign=top>
левая колонка.
В нашем примере здесь
находиться меню.
</td>
<td width=5></td>
<!-- это отступ от информационной части. Часто
используется. Пустая ячейка шириной в 5 (или сколько
надо) пикселов хорошо разделит информационную часть и меню,
чтобы они не прилегали друг к другу -->
<td valign=top>
Информационная часть.
В нашем примере здесь находятся "Новости" и т.п.
</td>
<td width="20%" valign=top>
Третья колонка. Мало кому требуется
создавать больше трех колонок. В нашем
примере всего две. Кстати, пример использования
такой структуры (в три колонки) см. на сайте
http://prog.agava.ru
</td>
</tr>
</table>
|
Вот таким образом можно создать структуру. Как видите,
это совсем не сложно. Манипулированием таких приемов и создаются
"накрученные дизайны", которым часто поражаются люди, не
знакомые с подходами к созданию структуры. Теперь я коснусь
некоторых нюансов, связанных с этой таблицей и мы продолжим
наше путешествие по вебдизайну.
Итак, обратите внимание на след. приемы:
- В больших ячейках (не разделителях), я обязательно
указываю параметр valign=top, выравнивающий содержимое
ячейки по верхней границе. Это обязательно, так как
если будет разница в количестве информации в ячейках
(меню опустается по экрану ниже, чем информация), то
ячейка, в которой остается пустое место, будет выровнена
по центру (броузеры используют по умолчанию параметр
valign=middle). Я уверен, что когда вы будете
делать сайт, вы не пропустите это - очень уж наглядное
упущение.
- Я не указываю этот параметр в ячейке-разделителе -
<td width=5>, так как в ней информации
нет и, прямо скажем, по фигу как она там выравнивается.
Зато этим экономим размер документа.
- И последнее - я не указываю ширину средней ячейки.
Это незачем, так как она все равно будет растянута на
ширину, оставшуюся от указанных в левой (25%), разделителе
(5 пикселов) и правой (20%) ячейках. Тем самым опять
экономим размер, избавляясь от ненужных, работающих
впустую тэгов.
Вот такие вот несложные, но неочевидные на первый взгяд
советы. Надеюсь, вы их учтете в создании собственных таблиц
при выполнении структуры. А мы двигаемся дальше и продолжаем
собирать по кусочкам придуманный сайт.
Следующий шаг - создание вложенных таблиц. Причиной использования
такой возможности может служить, к примеру, желание оформить
обособленно и как-нибудь интересно отдельный элемент меню.
Здесь уже часто используются различные сочетания цветов
(опять же, см. правое меню на сайте http://prog.agava.ru), а также все
мыслимые и немыслимые возможности самого языка.
Мы сейчас не будем особо напрягатсья и построим одну маленькую
вложенную табличку, которая будет оформлять блок содержания
"Анекдоты" (см. выше). По такому же принципу можно будет
составить о другие блоки.
Итак, снова посмотрите на серый шаблон. Как вы видите,
главное меню в свою очередь тоже разбито на блоки. Давайте
их оформим отдельно, скажем, таким несложным образом:
Что скажете, пойдет для примера? Выглядит определенно
лучше, чем в оригинальном шаблоне. Думаю, вы сейчас почувствуете,
что значит "собирание сайта по частям", когда мы наложим
на шаблон структуры дизайн меню. Итак, разберемся для начала,
как делается вышеприведенная таблица.
Вот ее код:
<table align=center width="100%" bgcolor=navy
cellpadding=0 cellspacing=1 border=0>
<tr>
<td bgcolor=#e0e0e0 align=center>
<font face=arial size=2><b>
«« АНЕКДОТЫ »»
</td>
</tr>
<tr>
<td bgcolor=#f0f0f5>
<font face=verdana size=2>
<b> :: <a href="#"><font color=#0000ff>Про Вовочку</font></a><br>
<b> :: <a href="#"><font color=#0000ff>Про порутчика</font></a><br>
<b> :: <a href="#"><font color=#0000ff>Пошлые</font></a>
</td>
</table>
|
Здесь хочу обратить ваше внимание на следующие моменты
оформления:
- « - это т.н. "спецсимвол", я как-то
рассказывал о них в пред. выпусках, но не приводил полный
их список. В данном случае такая комбинация рисует символ:
«, который, как вы видите, я использую чисто
ради оформления.
- » - то же самое, только в другую сторону:
».
- :: - Двоеточия перед ссылками - тоже простая
примочка, оформления ради.
А также на один технический момент:
- В самой таблице я использую параметры cellpadding=0
cellspacing=1, одновременно с параметром border=0.
Это устанавливает толщину рамки таблицы в 1 пиксел.
Цвет рамки - это тег bgcolor=navy, то есть цвет
фона таблицы по умолчанию. При этом в каждой ячейке
(или строке) нужно использовать собственный bgcolor,
иначе она будет залита цветом navy (темно синий).
Кстати! Здесь очень ярко проявляются различия броузеров
Internet Explorer и Netscape Navigator. В последнем такой
прием работать не будет, то есть конструкция cellpadding=0
cellspacing=1 border=0 не сработает, границ у таблички
не будет совсем.
Способ для того, чтобы этого избежать есть, но о нем я
расскажу как-нибудь потом.
А сейчас продолжаем создание нашего дизайна и следующий
шаг - это вставка созданной таблички в структуру. Как сделать?
Никогда не поверю, что кто-то еще этого не сообразил. Просто
возьмем код новой таблицы и вставим его в первую ячейку
главной таблицы, которая образует структуру (в ту, которая
у нас 25% шириной).
Вот что получиться (для краткости вырезаю кусок кода):
<table align=center width="90%" cellpadding=0 cellspacing=0>
<tr>
<td width="25%" valign=top>
<!-- левая колонка.
В нашем примере здесь
находиться меню. -->
<!-- Вот она! Вложенная таблица! -->
<table align=center width="100%" bgcolor=navy
cellpadding=0 cellspacing=1 border=0>
<tr>
<td bgcolor=#e0e0e0 align=center>
<font face=arial size=2><b>
«« АНЕКДОТЫ »»
</td>
</tr>
<tr>
<td bgcolor=#f0f0f5>
<font face=verdana size=2>
<b> :: <a href="#"><font color=#0000ff>Про Вовочку</font></a><br>
<b> :: <a href="#"><font color=#0000ff>Про порутчика</font></a><br>
<b> :: <a href="#"><font color=#0000ff>Пошлые</font></a>
</td>
</table>
<!-- конец влож. таблицы, образующей
дизайн меню -->
</td>
.........
|
Теперь можно проделать это со всеми блоками меню, разделив
их, скажем, тэгами <P> и получится интересный
столбик меню. Также делается и все остальное. В принципе,
сайт готов - немного поработать, сделать какие-нибудь подобные
вложенные таблицы для информации и все! Можно выкладывать
в Сеть :))
Хотя с последним я немного поспешил... о том, как это
сделать я еще напишу, пока предстоит еще многому научиться.
Ну а на сегодня все!
Эх... когда я написал последнюю фразу, вспомнил известную
рекламу. Просто не могу не процитировать переодевающуюся
девушку с бутылкой PEPSI Light:
"Ну а на сегодня все! Надеюсь, вам понравилось :))"....
» К содержанию
На этом прощаюсь,
до следующего выпуска!
|
|
|
