ШЕСТНАДЦАТЫЙ УРОК



Наш маленький бизнес

Ну-с, дорогие мои, нашли чем приторговывать будете? Продукты питания, ширпотреб или эксклюзив? А я так и не придумала, что можно предложить капризным в наше время клиентам, и буду торговать банками, склянками и рваными ботинками. Для начала подумаем, что нужно для нашего пока маленького, но уже магазинчика?

Я думаю не помешает:

- логотип компании
- громкое имя
- красивая заставка
- перечень продукции
- описание каждого вида продукции
- телефоны, адреса

Вот и все, что нужно. И это все мы сделаем во фреймах! Прежде набросаем эскиз магазинчика. Я могу предложить вам угадайте что? Adobe Photoshop как всегда! И вот что я там нарисовала (рис. 73):


Рис. 73. Шаблон сайта

Размеры буду делать в процентах, чтобы сайт хорошо смотрелся при любом разрешении экрана. Ведь мы дорожим каждым, даже случайно забредшим к нам клиентом, не так ли? Может это как раз тот человек, который возьмет весь товар оптом? Так что дадим ему шанс забрать весь наш лежалый товар.

Итак, прикидываем, сколько процентов отдаем каждому фрейму. Заодно сразу разобьем предварительно на части.

Значит сразу можно разбить сайт на три больших фрейма:

1. 25% Лого + Заголовок (20% + 80%)
2. 65% Список Товаров + Заставка (30% + 70%)
3. 10% Адреса и телефоны (100%)

Соображаем, сколько всего нам нужно файлов-страничек:

1. logo.html - логотип фирмы (рисунок)
2. header.html - заголовок сайта (рисунок или текст)
3. menu.html - список товаров (изображения-ссылки или текстовые ссылки)
4. main.html - заставка сайта (ну очень красивая картинка)
5. banka.html - фотография банки + ее описание + цена
6. sklanka.html - фотография склянки + ее описание + цена
7. rvanbotinok.html - фотография ботинка + его описание + цена
8. address.html - адреса и телефоны фирмы

Начальный документ, описывающий структуру фреймов у нас будет index.html:

<HTML> <HEAD> <TITLE>СТАРЬЕВЩИК</TITLE> </HEAD> <FRAMESET rows="25%,65%,10%"> <FRAMESET cols="20%,80%"> <FRAME src="logo.html"> <FRAME src="header.html"> </FRAMESET> <FRAMESET cols="30%,70%"> <FRAME src ="menu.html"> <FRAME src ="main.html"> </FRAMESET> <FRAME src="address.html"> </FRAMESET> </HTML>

Вот и все! Видите, как просто? Если вы разобрались в предыдущем уроке с квартирным вопросом, для вас сделать этот сайт - пара пустяков!

Единственная тут загвоздка, как сделать так, чтобы при нажатии на ссылку нужного товара, описание его открыаалось во фрейме, в котором по умолчанию загружен файл main.html?

Да, в общем-то тоже несложно. Нужно только этому файлу в описании фреймовой структуры дать свое уникальное имя! Я не буду дергаться в поисках уникального имени, и чтобы не запутаться дам этому файлу его же имя main. И добавим это имя в выше приведенный файл:

<HTML> <HEAD> <TITLE>СТАРЬЕВЩИК</TITLE> </HEAD> <FRAMESET rows="25%,65%,10%"> <FRAMESET cols="20%,80%"> <FRAME src="logo.html"> <FRAME src="header.html"> </FRAMESET> <FRAMESET cols="30%,70%"> <FRAME src="menu.html"> <FRAME src="main.html" NAME=main> </FRAMESET> <FRAME src="address.html"> </FRAMESET> </HTML>

Вот и вся хитрость. Теперь открываем список товаров и около каждого товара указываем цель TARGET=main.

Файл menu.html:

<HTML> <HEAD> <TITLE>Список товаров</TITLE> </HEAD> <BODY> <A href="banka.html" TARGET= main>Банки</A> <A href="sklanka.html" TARGET= main>Склянки</A> <A href="rvanbotinok.html" TARGET= main>Рваные ботинки</A> </BODY> </HTML>

Творите, дерзайте! Я вот тоже тут подерзала немного и вот что получилось (рис. 74):


Рис. 74. Лавка старьевщика

Я сделала все правильно. Вверху у меня слева - логотип, справа - заголовок "ЛАВКА СТАРЬЕВЩИКА". В средней части слева - меню, при нажатии на любой ссылке с правой стороны появляется описание товара, заменяя рисунок заставки. Снизу же расположились адреса и телефоны.

Но вот можно ли убрать линии раздела между фреймами? Оказывается можно и очень даже легко. Нужно только воспользоваться атрибутом BORDER=0, который нужно разместить в контейнере <FRAMESET BORDER=0>

Перепишу теперь файл index.html:

<HTML> <HEAD> <TITLE>СТАРЬЕВЩИК</TITLE> </HEAD> <FRAMESET rows="25%,65%,10%" border=0> <FRAMESET cols="20%,80%"> <FRAME src="logo.html"> <FRAME src="header.html"> </FRAMESET> <FRAMESET cols="30%,70%"> <FRAME src="menu.html"> <FRAME src="main.html" NAME=main> </FRAMESET> <FRAME src="address.html"> </FRAMESET> </HTML>

И посмотрим, что получится (рис. 75):


Рис. 75. Фреймы без обрамлений

Если же мы хотим, наоборот, увеличить толщину раздела, то указываем эту толщину все в том же border. Например, при значении border=2, толщина разделительной линии будет равна 2 пикселам.

И еще… видите, справа у фрейма, где загружена большая картинка-заставка видна полоса прокрутки? Она появляется всегда, когда содержимое фрейма не помещается целиком. Но если я напишу SCROLLING=NO, эта полоска исчезнет. А если добавлю атрибут NORESIZE, то посетители не смогут регулировать размеры фреймов, а если еще добавлю MARGINHEIGHT=0 и MARGINWIDTH=0, то содержимое фреймов растянутся на всю ширину фреймов. А так, обычно браузер оставляет небольшой промежуток между содержанием фрейма и его границей. Часто это портит картину.

Итак, я могу изменить некоторые параметры и записать в любом фрейме:

<FRAME src = "main.html" NAME=main scrolling=no marginheight=0 marginwidth=0 noresize>

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


К списку всех уроков

(В. Ахметзянова, 2005 г)