Создание Web-станиц 1 Фреймы Теперь надо

Зарегистрируйтесь, чтобы просмотреть полный документ!

Создание Web-станиц 1

Фреймы • Теперь надо решить по какому принципу мы будем размещать наши документы, и вообще, какие документы мы будем показывать посетителю одновременно.

• При помощи фреймов мы делим браузер на несколько окон, заданного размера, в которых помещаем независимые друг от друга документы. Это нам позволит оставлять некоторую информацию видимой, в то время как другая информация прокручивается или заменяется (так, например, мы будем постоянно видеть в одном окне документ с меню, в другом – документ с нашим логотипом, а в третьем окне у нас будут при нажатии на ссылки в документе меню загружаться разные документы с текстом, картинками и прочим). Т. к. документы, которые мы размещаем во фреймах независимые, то соответственно каждый документ может содержать в себе что угодно (и текст, и картинки, и таблицы). Некоторые почему-то считают, что фреймы – это альтернатива таблицам. ЭТО НЕ ВЕРНО!

• • Рассмотрим первый вариант <html> <head> <title>Хождение по фреймам</title> </head> <frameset rows="100, *, 150"> <frame src="logo. html"> <frame src="content. html"> <frame src="menu. html"> </frameset> </html> При помощи атрибута rows тэга <frameset> мы указали, что наши фреймы будут расположены горизонтально (рядами). В значении атрибута rows мы прописали высоту каждого фрейма (rows="100, *, 150"). Высота первого фрейма - 100 пикселов, третьего - 150, а второй занимает все оставшееся пространство по высоте (это мы указали значком *). Тэг frame сообщает браузеру какие же документы у нас будут загружены во фреймах. В нашем случае: в первом фрейме будет загружен - logo. html (документ с логотипом), второй фрейм займет документ с непосредственным содержанием (content. html), а третий - меню. Если вы хотите, чтобы меню было во втором ряду (фрейме), то вам следует поменять его местами с content. html

• Замените атрибут rows, на cols: <html> <head> <title>Хождение по фреймам</title> </head> <frameset cols="100, 150, *"> <frame src="logo. html"> <frame src="menu. html"> <frame src="content. html"> </frameset> </html>

Разберемся, как • <html> расположить документы <head> в окне следующим <title>Хождение по образом фреймам</title> </head> <frameset rows="100, *"> <frame src="logo. html"> <frameset cols="150, *"> <frame src="menu. html"> <frame src="content. html"> </frameset> </html>

• Теперь разберем вариант, изображенный на втором рисунке. Здесь мы будем делить окно на столбцы. Второй столбец будет содержать в себе документ content. html (содержание), а первый столбец мы разобьем на два ряда, и поместим в них документы logo. html и menu. html. • <html> <head> <title>Хождение по фреймам</title> </head> <frameset cols="100, *"> <frameset rows="100, *"> <frame src="logo. html"> <frame src="menu. html"> </frameset> <frame src="content. html"> </frameset> </html>

• • Мы решили остановиться на последнем варианте фреймовой структуры для нашей страницы, значит будем приводить его в более-менее нормальный вид. Для начала избавимся от полосы прокрутки (скрулинга) во фрейме, содержащим документ logo. html. Scrolling - атрибут тэга <frame>. Он может принимать несколько значений: no - это значит совсем не будет полосы прокрутки, ни при каких обстоятельствах; yes - это значит полоса прокрутки будет всегда; auto - полоса прокрутки появится только тогда, когда она нужна. • <html> <head> <title>Хождение по фреймам</title> </head> <frameset cols="100, *"> <frameset rows="100, *"> <frame src="logo. html" scrolling="no"> <frame src="menu. html"> </frameset> <frame src="content. html"> </frameset> </html>

• Если вы подведете мышку к границе какоголибо фрейма, то увидите, что потянув за нее, вы можете изменить размеры фрейма. Как же запретить вашему посетителю это делать? При помощи атрибута noresize для тэга <frame>: • html> <head> <title>Хождение по фреймам</title> </head> <frameset cols="100, *"> <frameset rows="100, *"> <frame src="logo. html" scrolling="no" noresize> <frame src="menu. html" noresize> </frameset> <frame src="content. html" noresize> </frameset> </html>

• Теперь давайте • <html> избавимся от рамок <head> между фреймами. Для <title>Хождение по этого мы используем фреймам</title> параметр border, с </head> которым мы раньше уже <frameset cols="100, *" встречались. Итак, border="0"> border="0". <frameset rows="100, *"> <frame src="logo. html" scrolling="no"> <frame src="menu. html"> </frameset> <frame src="content. html"> </frameset> </html>

Каскадные таблицы стилей • Мы поговорим с вами еще об одном средстве, которые позволяет нам делать наши документы более гибкими, дает нам больше возможностей в работе над нашим сайтом – это Таблицы Каскадных Стилей (CSS - Cascading Style Sheets), еще один стандарт и разработка Консорциума, организации занимающейся разработкой стандартов и спецификаций для веб. Первое, что нам следует понять – CSS отличный от HTML стандарт. Почему же мы говорим о нем в рамках учебника о HTML, потому что CSS – это стандарт, расширяющий возможности HTML. Как мы уже с вами знаем – используя только HTML, мы весьма ограничены в средствах.

• • Чтобы ввести CSS в наши HTML-документы, нам опять же, как и в случае с объектами, понадобятся связующие звенья – специальные тэги и их атрибуты. Что же именно можно сделать при помощи CSS: Использовать собственные расширения HTML (так, например, вы можете окрасить текст в синий цвет при помощи атрибута color тэга FONT, а можете использовать Таблицы Каскадных стилей, для того, чтобы сделать тоже самое, преимущество в этом, что стили могут быть вынесены в отдельный файл, и, чтобы потом поменять цвет указанных блоков текста во всех документах вашего сайта, достаточно изменить одну строку в одном файле, а так вам бы пришлось вручную менять код многих страниц). Свободно управлять содержимым веб-страниц (позиционировать блоки текста, таблицы, картинки, как вам угодно, например, наложить текст и картинки друг на друга, в любом месте страницы). Различные визуальные эффекты (прозрачность, смена цвета при наведении и прочее) И так далее

Один из способов внедрения CSS в наш документ - стили могут быть вынесены в отдельный файл, а это значит, что нам остается лишь указать путь к этому файлу, и указать, что это файл с CSS: <head> <link href="special. css" rel="stylesheet" type="text/css"> </head> когда стили вынесены в отдельный файл – это называется внешние таблицы стилей. Их мы вводим в документ при помощи тэга <link>, который размещается внутри тэга <head></head>, а не <body>, как мы привыкли. Давайте ознакомимся с атрибутами тэга <link>: 1 – href=”http: //…” – пусть к файлу со стилями 2 - rel="stylesheet" – указывает, является ли подгружаемые таблицы стилей постоянными, предпочитаемыми или альтернативными. В нашем случае мы установили постоянные таблицы стилей для документа. Подробнее об атрибуте rel и его значениях вам расскажет спецификация по HTML. 3 - type="text/css" – тип содержимого, подгружаемой информации, в нашем случае мы указываем, что это CSS.

Но не надо думать, что если вы связали документ с внешней таблицей стилей через тэг <link> – этого достаточно, чтобы все заработало. Надо еще указать для каких тэгов (элементов нашего документа) мы используем таблицы стилей. Допустим, некоторая таблица стилей (которая у нас хранится в файле special. css) устанавливает красный цвет для абзаца, вот такой код будет у нее (в файле special. css): P. special {color : red; } В данном случае, таблица стилей указывает, что не все блоки текста, заключенные в параграфы (текст), будут выделены красным цветом, а только те блоки, которым мы это укажем. <html> <head> <title>Документ с CSS</title> <link href="special. css" rel="stylesheet" type="text/css"> </head> <body> В этом абзаце текст должен быть красным. А в этом абзаце нет, потому что мы не указали это при помощи атрибута class. </body> </html> Посмотрите на код нашего документа, при помощи атрибута class мы задали тэгу имя класса. Затем, когда мы писали код таблицы стилей (в файле special. css), мы указали, что этот стиль будет применяться только к тем тэгам (атрибутам) , для которых мы задали имя класса special. Вот теперь у нас все связано между собой.

Таблицы стилей не обязательно должны быть вынесены во внешний файл, вы можете внедрять их непосредственно в ваш документ при помощи тэга <style>, в котором вы разместите код ваших таблиц стилей (<style>код таблицы стилей</style>): <html> <head> <title>Документ с CSS</title> <style type="text/css"> P. special { color : red; } </style> </head> <body> В этом абзаце текст должен быть красным. А в этом абзаце нет, потому что мы не указали это при помощи атрибута class. </body> </html> Обратите внимание, тэг <style>, как и тэг <link>, размещается внутри тэга <head></head>, а не <body>.

• Есть еще и третий способ внедрения CSS в ваш документ, когда при помощи атрибута (не путать с тэгом) style код CSS вводится непосредственно для какого-либо тэга: • <html> <head> <title>Документ с CSS</title> </head> <body> В этом абзаце текст должен быть красным. А в этом абзаце нет, потому что мы не задали для него стиля. </body> </html> • color: red – это код таблицы стилей, задающей красный цвет для абзаца, ее мы ввели в наш документ при помощи атрибута style, естественно, что в атрибут style вы будете помещать уже свои, другие, таблицы стилей.

• Действия в CSS заключается в том, что вы связывать правилами и элементы, имеющиеся в документе. Правила управляют в отображением содержимого элемента. • СЕЛЕКТОР, указывающий к какому элементу применяется объявление (если объявление используется более чем для одного элемента, несколько элементов дается в виде списка, разделенного запятыми); • ОБЪЯВЛЕНИЕ, описывающее какие стили должны быть применены к элементу. Селектор • H 1 Объявление {font - family: arial} Свойство Значение • СВОЙСТВО- это свойство выбранного элемента, который затронет данное правило; • ЗНАЧЕНИЕ, представляющее собой спецификацию данного свойства.

• /* Таблица стилей для примера 9. html */ body { • color: #000000; • background-color: #ffffff; • font-family: arial; } • h 1 {font-size: 18 pt; } • p {font-size: 12 pt; } • table { • background-color: #efefef; • border-style: solid; • border-width: 1 px; • border-color: #999999; } • th { • background-color: #cccccc; • font-weight: bold; • padding: 5 px; } • td {padding: 5 px; } • td. code { • font-family: courier, couriernew, serif; • font-weight: bold; } /* В этом правиле указано, что любой текст или линии будут черные, а фон будет белым, также используется гарнитура arial/* /* В следующем правиле указывается, размер шрифта для заголовков и параграфов/* /* Для внешнего вида таблицы: добавим светло-серый фон, затем нарисуем темно-серую границу шириной 1 px/* /* Заголовки внутри таблицы имеют умеренно-серый фон, текс жирный, а между краем ячейки и текстом отступ 5 px/* /* В каждой отдельной ячейке отступ между краем ячейки и текстом 5 px/* /* это правило применяется только к элементам <td> имеющим атрибут class со значением code /*

• • • • • • • • <html> <head> <title>Примет CSS </title> <link rel="stylesheet" type="text/css" href="пример 9. css" /> </head> <body> <h 1>Базовые свойства шрифта в CSS </h 1> В следующей таблице показаны базовые свойства шрифта в CSS, позволяющие изменять внешний вид текста документа. <table> <tr> <th>Свойства</th> <th>Цель</th> </tr> <td class="code">font-family</td> <td>Указывает используемый шрифт. </td> </tr> <td class="code">font-size</td> <td>Указывает размер используемого шрифта. </td> </tr> <td class="code">font-style</td> <td>Указывает, должен ли шрифт быть обычным курсивным или наклонным. </td> </tr> <td class="code">font-weight</td> <td>Указывает, должен ли шрифт быть обычным, жирнее или тоньше. </td> </tr> </table> </body> </html>

• Наверное Вы не раз замечали на различных сайтах, как при наведении на ссылку меняется ее внешний вид. Ну например исчезает подчеркивание или меняется цвет. Это делает как-раз CSS , а именно за это отвечают псевдоклассы - классы, способные учитывать те или иные условия , при определении свойств html элемента. • Как применить псевдокласс к ссылкам? • Записываем для начала элемент А, к которому мы будем применять псевдокласс, затем ставим двоеточие и указываем имя псевдокласса, а уже потом в фигурных скобках указываем нужный стиль. • А : ИМЯ ПСЕВДОКЛАССА {. . . стиль. . . } • Для ссылок например бывает четыре псевдокласса: • A: link {. . . стиль оформления обычной ссылки. . . } A: active {. . . стиль оформления ссылки в момент нажатия. . . } A: visited {. . . стиль оформления посещенной ссылки. . . } А: hover {. . . стиль оформления ссылки, на которую наведен указатель мыши. . . }

• <html> <head> • <title>Пример CSS </title> • <link rel="stylesheet" type="text/css" href="пример 10. css" /> • </head> <body> <h 1>Стили ссылок</h 1> В примере содержится несколько ссылок, с которыми вам рекомендуется поэксперементировать, • чтобы увидеть их в действии: <ul> • <li><a href="http: //www. wrox. com/">Сайт Wrox </a> рассказывает о вышедших и готовящихся к печати • книгах издательства Wrox. </li> • <li>На <a href="http: //www. w 3. org/">сайте Консорциума W 3 C </a> содержатся рекомендации, касающиеся HTML и CSS. </li> • <li>The <a href="http: //www. google. com/">Сайт Google </a> - это популярный поисковик, • который поможет найти ответы на любыевопросы. </li> • </ul> </body> • </html>

• /* Оформление ссылок при помощи CSS */ • body {background-color: #ffffff; } • • a { font-family: arial, verdana, sans-serif; font-size: 12 px; font-weight: bold; } • • • • a: link { color: blue ; } a: visited { color: gray; } a: hover { color: red ; text-decoration: none; } a: active { color: green; text-decoration: none; }

• /* Оформление ссылок при помощи CSS */ body {background-color: #ffffff; } a { • font-family: arial, verdana, sans-serif; • font-size: 12 px; • font-weight: bold; } • a: link { • color: black ; • text-decoration: none; • } • a: visited{ • color: black ; • text-decoration: none; • } • a: hover { • color: black ; • text-decoration: none; • } • a: active { • color: black ; • text-decoration: none; • }

• /* Оформление ссылок при помощи CSS */ body {background-color: #ffffff; } a { • font-family: arial, verdana, sans-serif; • font-size: 12 px; • font-weight: bold; } • a: link { color: blue ; } a: visited { color: gray; } a: hover { color: red ; text-decoration: none; font-weight: bold; } a: active { color: green; text-decoration: none; text-transform: uppercase; }

Фон • Для работы с фоном в CSS имеется несколько свойств. Разберем их по порядку. • background-color – задает цвет фона. • При помощи этого свойства, возможно, задавать цвет фона практически для любых элементов, будь то фон страницы, блока или текста. Цвет фона задается следующим образом: background-color: #CCFFCC; где #CCFFCC – это значение цвета. Для того чтобы посмотреть как это работает, создайте html страничку содержащую следующий код:

<html> <head> <title>Пример CSS </title> <link rel="stylesheet"type="text/c ss" href="пример 11. css" /> </head> <body>На данном приере показано свойство background-color . Вы должны видеть различные цвета фона, установленные различными методами. </body> </html> • /* Свойства background-color */ • body {backgroundcolor: #CCFFCC; } • b {background-color: #FF 0000; } • p {background-color: #FFFF 99; }

• background-image – задает фоновый рисунок. • При помощи данного свойства задавать фоновый рисунок можно практически для любого объекта. Задается следующим образом background-image: url('fon. gif'); где url('fon. gif') это путь к изображению, если ваше изображение лежит в той же папке что и сама html страничка то путь будет выглядеть как и в этом случае, если же изображение, например, лежит в папке images то путь к изображению будет выглядеть так: url('images/fon. gif').

• <html> • <head> • <title>Пример CSS </title> • <link rel="stylesheet" type="text/css" href="пример 12. css" /> • </head> • <body> • На этом примере продемонстрировано свойствоbackgroundimage. • </body> • </html> • /* Cвойство backgroundimage */ • body { • background-image: url("background. gif"); • backgroundcolor: #cccccc; • color: #000000; • font-size: 24 px; • font-weight: bold; }

• <html> • <head> • <title>Пример CSS </title> • <link rel="stylesheet" type="text/css" href="пример 13. css" /> • </head> • <body> • На этом примере продемонстрировано свойствоbackgroundimage. • </body> • </html> • /* Cвойство backgroundimage */ • body { • background-image: url("background_large. gif" ); • backgroundcolor: #cccccc; • color: #000000; • font-size: 24 px; • font-weight: bold; }

• background-repeat – определяет будет ли повторяться фоновое изображение и если будет то каким образом. У этого свойства существуют следующие значения: • repeat – изображение будет повторяться как по вертикали, так и по горизонтали; repeat-x – изображение будет повторяться только по горизонтали; repeat-y – изображение будет повторяться только по вертикали; no-repeat – изображение не будет повторяться.

• <html> • <head> • <title>Пример CSS </title> • <link rel="stylesheet" type="text/css" href="пример 14. css" /> • </head> • <body> • На этом примере продемонстрировано свойствоbackgroundimage. • </body> • </html> • /* Cвойство backgroundimage */ • body { • background-image: url("background_small. gif "); • background-repeat: repeat-x; • background-color: #ffffff; }

• <html> • <head> • <title>Пример CSS </title> • <link rel="stylesheet" type="text/css" href="пример 15. css" /> • </head> • <body> • На этом примере продемонстрировано свойствоbackgroundimage. • </body> • </html> • /* Cвойство backgroundimage */ • body { • background-image: url("background_small. gif "); • background-repeat: repeat-y; • background-color: #ffffff; }

• <html> • <head> • <title>Пример CSS </title> • <link rel="stylesheet" type="text/css" href="пример 16. css" /> • </head> • <body> • На этом примере продемонстрировано свойствоbackgroundimage. • </body> • </html> • /* Cвойство backgroundimage */ • body { • background-image: url("background_small. gif "); • background-repeat: norepeat; • background-color: #ffffff; }

• • • • • • body { color: #000000; background-color: #ffffff; font-family: arial, verdana, sans -serif; font-size: 12 px; } h 1 { position: fixed; top: 0 px; left: 0 px; width: 100%; color: #ffffff; backgroundcolor: #666666; padding: 10 px; z-index: 2; } div. nav { z-index: 1; position: absolute; top: 60 px; left: 0 px; width: 100 px; height: 300 px; padding-left: 10 px; padding-top: 20 px; padding-bottom: 10 px; background-color: #efefef; } • Сначала идет правило для элемента body: цвет шрифта, гарнитуру и размер шрифта • Затем заголовок сайта position: fixed; - указывает место размещения для рамки. top: 0 px; left: 0 px; - Положение элемента рассчитывается от фиксированной точки (левый верхний угол) width: 100%; и на всю ширину, цвет шрифта, цвет фона, padding – указывает сколько пространства должно быть между содержимым и границей, значением z-index: 2; является число, и чем оно больше, тем ближе к верхнему краю страницы должен располагаться элемент. • Навигация извлекается из нормального потока (НП-когда блочные элементы располагаются сверху вниз). position: absolute; -абсолютное положение содержимого элемента, затем можно разместить там, где хотите (top: 60 px; left: 0 px; width: 100 px; height: 300 px; )

• • • h 2 { padding-top: 80 px; padding-left: 115 px; } • • p {padding-left: 115 px; } p. abstract{font-weight: bold; } • • img { float: left; width: 60 px; padding-right: 5 px; } • • ul { clear: left; list-style: circle; padding-left: 145 px; } • • div. nav: before { content: "Навигация "; font-size: 18 px; font-weight: bold; } • • Далее идет правило для заголовка h 2 , который должен иметь отступ слева, так как навигационная панель займет 110 px, кроме того есть отступ сверху, благодаря которому текст ниже заголовка. Далее идет правило для параграфа: первое для всех параграфов, а второе, чтобы краткое содержание статьи было написано жирным. Параграф также должен отступать от левого края на 115 рх, из -за навигационной панели. Img – изображение, которое находится в первом параграфе свободно расположено слева от текста. Текст обтекает изображение. Справа текст имеет отступ в 5 px. Ul – правило для неупорядоченного списка, который должен иметь больший отступ, чем параграф и заголовок слева, clear: left; содержимое элемента clear удаляется из пространства слева от свободно расположенного элемента (не может находиться там), list-style: circle; - стиль маркера. div. nav: before – div позволяет объединить элементы в группу, на внешний вид странички ни как не влияет, используется с css, чтобы применить стиль к определенному разделу. Before - позволяет добавить текст перед элементом, определенных селектором.

• • • <html > <head> <title>Попробуйте - Макет страницы</title> • <link rel="stylesheet" type="text/css" href="Макет страницы. css" /> • </head> • <body> • <h 1>Каскадные таблицы стилей</h 1> • <div class="nav"><a href="index. html">Примеры</a> • • <a href="index. html">Код к теме</a></div> • <h 2>Размещение с помощью CSS </h 2> <img class="float. Left" src="background. gif" • alt="wrox logo" />В этой статье рассматрикается вопрос компоновки веб -страниц • с помощью CSS и использование нескольких схем размещения элементов. • • • Благодаря атрибуту class вы можете добавлять различные стили к разным элементам, использующим одно имя Если не возможно отобразить картинку заданной ширины и высоты, то на экране покажется альтернативный текст, который отображает, что изображено на картинке (при помощи alt="wrox logo" ) src="background. gif-путь к графическому файлу.

CSS позволяет использовать три различные схемы применения для создания сложных макетов страниц: • <ul> • <li>Нормальный поток</li> • <li>Абсолютное размещение</li> • <li>Свободное размещение</li> • </ul> • Используя комбинациюданных схем, при создании макета страницы вы можете не прибегать к таблицам. • </body> • </html>

Скачать презентацию Создание Web-станиц 1 Фреймы Теперь надо

Создание Web-станиц 1.ppt

Количество слайдов: 47