КАТЕГОРИИ:
Архитектура-(3434)Астрономия-(809)Биология-(7483)Биотехнологии-(1457)Военное дело-(14632)Высокие технологии-(1363)География-(913)Геология-(1438)Государство-(451)Демография-(1065)Дом-(47672)Журналистика и СМИ-(912)Изобретательство-(14524)Иностранные языки-(4268)Информатика-(17799)Искусство-(1338)История-(13644)Компьютеры-(11121)Косметика-(55)Кулинария-(373)Культура-(8427)Лингвистика-(374)Литература-(1642)Маркетинг-(23702)Математика-(16968)Машиностроение-(1700)Медицина-(12668)Менеджмент-(24684)Механика-(15423)Науковедение-(506)Образование-(11852)Охрана труда-(3308)Педагогика-(5571)Полиграфия-(1312)Политика-(7869)Право-(5454)Приборостроение-(1369)Программирование-(2801)Производство-(97182)Промышленность-(8706)Психология-(18388)Религия-(3217)Связь-(10668)Сельское хозяйство-(299)Социология-(6455)Спорт-(42831)Строительство-(4793)Торговля-(5050)Транспорт-(2929)Туризм-(1568)Физика-(3942)Философия-(17015)Финансы-(26596)Химия-(22929)Экология-(12095)Экономика-(9961)Электроника-(8441)Электротехника-(4623)Энергетика-(12629)Юриспруденция-(1492)Ядерная техника-(1748)
Чертёж седьмой Фреймы
Чертёж шестой Списки и отступы
В отличие от таблиц, без которых трудно построить серьёзную страничку, списки не являются такой уж неотъемлемой частью web-дизайна. НО! Умение работать со списками значительно экономит наше время при создании web-страничек, а сами списки и сформированные на их основе отступы придают страничке хорошую «читаемость» и особую выразительность. Так что, назвался web-мастером – изучай списки!
1. Оформим на главной страничке в виде списка перечисление того, что мы любим:
c открой файл index.html
c измени в нём строки:
...
<P><FONT size=+1>Я учусь в 9 классе одиннадцатой школы
города Иркутска.
<P>Я люблю
<OL>
<LI> информатику
<LI> рисовать
<LI> своих друзей:
<UL>
<LI> четвероногих
<LI> пернатых
</UL>
</OL>
<P>А друзья мои – это…
...
Тег <OL> задаёт нумерованный список, его атрибут type указывает способ нумерации и может иметь значения 1, A, a, I, i.
Тег <UL> – ненумерованный список, у него тоже есть атрибут type, принимающий значения disk, circle, square.
Тег <LI> указывает очередной элемент списка, можно считать, что он обозначает место, куда помещается номер элемента (цифровой или буквенный) или «пулька» (маркер списка, тот самый кружок или квадратик).
Как ты уже, конечно, заметил, тег <LI> можно не закрывать, а вот теги <OL> и <UL> закрывать надо обязательно, иначе весь последующий текст будет печататься с отступом. Это свойство списочных тегов применяется для задания абзацных отступов. Надо просто записать необходимое количество тегов <UL> – и весь последующий текст будет «сдвинутым». «Задвигается» же текст обратно закрывающим тегом </UL>.
2. Задание: поэкспериментируй с атрибутом type, разберись, что означают его значения для нумерованных и ненумерованных списков.
3. Задание: оформи список твоих друзей.
Благополучно добравшись до этой главы, можешь облегчённо вздохнуть: «Я – web-строитель!» Начинающий, неопытный… Но при желании, запасясь терпением, ты можешь создать практически любую страничку.
Всё, о чём пойдёт речь дальше, доступно профессионалам сайтостроительства. Ты желаешь себя к ним причислить? Тогда за дело!
Фрейм. Одних web-дизайнеров это слово приводит в содрогание (Очень вредная штука, никогда не пользуйтесь ею!), другие же радостно потирают руки (Это очень удобно и интересно!). Ты имеешь полное право заиметь своё собственное мнение, для этого достаточно разобраться, что это такое и как это выглядит. Итак,
1. Как ты уже понял, наиважнейшее место на страничке занимает панель навигации, дающая посетителю возможность передвигаться по сайту и вне его. Web-строитель решает, где её расположить, исходя из простых правил – она должна вписываться в дизайн и быть легко доступна из любого места странички. Посмотри на страничку Погромыча – если на ней размещено чуть больше фотографий, то до панели навигации придётся добираться долгой прокруткой, что неудобно. Попробуем добиться, чтобы навигационные картинки были видны всегда:
c переименуй файл index.html в glav.htm;
c создай файл index.html и запиши в него следующий код:
<HTML>
<HEAD>
<TITLE>В гостях у Васи Петрова</TITLE>
<FRAMESET cols=20%,*>
<FRAME src=navig.htm>
<FRAME src=glav.htm>
</FRAMESET>
</HEAD>
</HTML>
Тег <FRAMESET> разбивает окно браузера на фреймы (кадры или подокна). Атрибут cols указывает, что окно разбивается на вертикальные колонки, причём ширина первой составляет 20% ширины окна, а ширина второй колонки занимает всё оставшееся пространство.
В теге <FRAME> в атрибуте src записывается, страничка из какого файла будет грузиться в соответствующий фрейм.
c создай файл navig.htm, в котором размести картинки-ссылки на все четыре странички;
c загрузи файл index.htm в браузер и посмотри, что получилось:
2. Если ты увидел что-то подобное тому, что изображено на рисунке, значит, ты пока не запутался и всё сделал правильно. Щёлкни по ссылке на главную страничку. Что такое? Получилось странно и некрасиво – страничка загрузилась не в главный (тот, который справа), а в навигационный (левый) фрейм, причём загрузилась, скорее всего, целиком с фреймами. Почему? Причины, наверняка, тебе понятны, а вот как с ними справиться? Попробуем:
c в файле index.html в тег <FRAME> добавь атрибут name, задающий имя фрейма:
<FRAME src=glav.htm name=glavnoe >
c в файле navig.htm в тег <A> добавь атрибут target, указывающий целевой кадр:
<A href=index.html target=glavnoe >
<img src=images/home.gif></A>
c в этом же теге исправь имя файла index.html на glav.htm (если только ты это не сделал при создании файла navig.htm – ну, тогда можешь себя поздравить – мудр не по годам):
<A href= glav.htm target=glavnoe>
<img src=images/home.gif></A>
c добавь атрибут target в остальные теги <A> файла navig.htm;
c обнови страничку в браузере, проверь, как работают ссылки навигационного окна (фрейма, кадра – называй, как хочешь);
c убери ненужные теперь навигационные панели со всех страничек – главной, Погромыча, Клавы и Дуси.
3. А теперь ещё раз посмотри на свою страничку, попробуй изменить размер окна браузера. Какой недостаток можно заметить при этом? Навигационный кадр, как мы и указали, занимает ровно 20% ширины окна браузера. В некоторых случаях это слишком много, а может оказаться и мало – тогда в нижней части появится полоса прокрутки. Поэтому изменим ширину левого фрейма, задав её не в процентах, а в пикселах, подобрав эту величину так, чтобы картинки комфортно поместились в кадре:
<FRAMESET cols= 90,*>
<FRAME src=navig.htm>
<FRAME src=glav.htm name=glavnoe>
</FRAMESET>
4. Устал? Отдохни, потому что дальше тебе понадобится свежая голова. Усложним фреймовую структуру нашей странички, добавив ещё один кадр сверху для общего заголовка:
c для этого в файле index.html вместо второго тега <FRAME> вставим ещё один тег <FRAMESET>:
<HTML>
<HEAD>
<TITLE>В гостях у Васи Петрова</TITLE>
<FRAMESET cols=90,*>
<FRAME src=navig.htm>
<FRAMESET rows=70,*>
<FRAME src=zagol.htm>
<FRAME src=glav.htm name=glavnoe>
</FRAMESET>
</FRAMESET>
</HEAD>
</HTML>
c создай файл zagol.htm, с названием твоей странички.
5. Теперь страничка будет выглядеть примерно так:
6. Задание: измени структуру фреймов так, чтобы кадр с заголовком располагался сверху:
У тега <FRAMESET> есть ещё несколько атрибутов:
border=2 задаёт толщину рамки вокруг кадров, border=0 – без рамки;
bordercolor=#ff0000 – цвет рамки.
Для тега <FRAME> можно задать следующие атрибуты:
noresize – запрещает мышкой изменять размер кадра;
scrolling=no – полоса прокрутки появляться не будет, scrolling=auto – лифт появится, если в этом возникнет необходимость.
Чувствуешь, как появляется осознание своей власти? Есть возможность что-то запретить посетителю твоей странички? Хорошо подумай, прежде чем воспользоваться этими запрещающими атрибутами. В конце концов, посетитель зашёл к тебе в гости, и ты, как радушный хозяин, должен обеспечить ему максимальный комфорт. Так что, применяй атрибуты noresize и scrolling только тогда, когда без них ну совсем никак не обойтись. А такая ситуация может возникать настолько редко, что смело можешь тут же и забыть об этих коварных атрибутах!
7. На этом наш седьмой чертёж можно считать законченным. В нём мы понатворили много дел, так что, на всякий случай, проверь, что должно (или может) быть записано в следующих файлах (в тегах <IMG> опущены такие важные атрибуты, как alt, width и height – не забудь про них):
c index.html:
<HTML>
<HEAD>
<TITLE>В гостях у Васи Петрова</TITLE>
<FRAMESET rows=70,*>
<FRAME src=zagol.htm noresize >
<FRAMESET cols=85,* >
<FRAME src=navig.htm>
<FRAME src=glav.htm name=glavnoe>
</FRAMESET>
</FRAMESET>
</HEAD>
</HTML>
c navig.htm:
<HTML>
<BODY bgcolor=#ffddff text=#880088 link=#ff00ff
vlink=#880000>
<BR><A href=glav.htm target=glavnoe>
<img src=images/home.gif></A>
<BR><A href=pogrom.htm target=glavnoe>
<img src=images/pogrom.gif></A>
<BR><A href=dusja.htm target=glavnoe>
<img src=images/dusja.gif></A>
<BR><A href=klava.htm target=glavnoe>
<img src=images/klava.gif></A>
</BODY>
</HTML>
c zagol.htm:
<HTML>
<BODY bgcolor=#ffddff>
<H1 align=center><font color=#ff0088>
Я и мои друзья</font></H1>
</BODY>
</HTML>
|
|
Дата добавления: 2014-11-16; Просмотров: 409; Нарушение авторских прав?; Мы поможем в написании вашей работы!