Цел на упражнението:
Запознаване с CSS свойства, използвани при създаване на навигационно меню и форматиране на html документ за печат. Валидиране на html документи.

1. Създаване на навигационно меню посредством вградени средства на средата Macromedia Dreamweaver MX 2004

1.1. Чрез използване на Image Object Navigation Bar

‘ в един html документ може да се включва само един такъв елемент
Задача 1
а) В директория ex11 създайте нова страница nav1.htm.
б) Използвайте меню Insert/ImageObjects/NavigationBar, за да включите вертикално навигационно меню с две позиции в новосъздадената страница nav_1.htm. За оформяне на четирите състояния на всеки от бутоните използвайте от директорията ex11\touse изображенията GB.gif, RB.gif, BB.gif, YB.gif (това са само работни изображения, които биха могли да бъдат оформени и по-естетично). Нека при натискане на първия бутон от менюто в браузера да се визуализира страницата на Русенски университет,  а чрез втория – URL по ваш избор.
Указания:
Едно и също състояние на двата бутона определете с изображение с един и същи цвят – например зелено, ако бутонът не е натиснат, червено – натиснат бутон и т.н;
Следващ бутон в менюто се добавя с “+” знака;
След като са определени всички елементи на менюто се натиска OK бутона за изход от диалоговия прозорец.
в) Разгледайте получения кодовия изглед. Ще откриете, че средата е добавила код на езика JavaScript, който ще бъде предмет на следващо упражнение.
1.2    Посредством RollOver ефект и css-форматиране без  JavaScript
Задача 2
Създайте посредством CSS форматиране навигационно меню с три позиции, представляващи текстови хипервръзки в неподреден (неномериран) списък в нов документ nav_2.htm.
Указания:
Изпълнявайте следните стъпки:
В тялото (body) на документа създайте неномериран списък с три позиции, представляващи не насочени хипервръзки
Отворете панел CSS Styles (ако е скрит Window/CSS Styles) и изберете бутона New Style. В него попълнете съответно полетата:
Selector Type – Class
Name  .navcont (точката в името се поставя автоматично)
ако решите да работите с външен файл изберете тази възможност в полето Define in (можете разбира се да използвате и This document only). Ако решите да работите с външен файл, именувайте го например nav.css  и го свържете с текущия документ.
В прозореца CSS Style Definition
за категория Box задайте:   Width: 200  px – такава ще бъде ширината на контейнера, съдържащ навигацията.
Контейнер ще бъде div-таг, който да обхваща неномерирания списък. За да го включите маркирайте неномерирания списък (или в кодов – или в дизайнерски изглед, или изберете тага ul от лентата с тагове), след което задействайте меню Insert/LayoutObjects/DivTag – отваря се диалоговия прозорец InsertDivTag. От списъка на Class – полето изберете navcont, а поле Insert трябва да има съдържание Wrap around selection.  Завършете с бутон OK.
Следва форматиране на елементите, включени в контейнера  посредством css
Изберете бутон New CSS Style от панел CSS Styles и попълнете:
Selector – .navcont ul (точката няма да се появи автоматично и затова не я пропускайте)
Selector Type  – Advanced
Define in –>nav.css
ОК бутон
(класът ще съдържа общото форматиране на неподредения списък)
В диалогов прозорец CSS Style Definition попълнете
за Category Type

  • Font Arial……
  • Size 11 px
  • Color #FFFFFF

Category Box

  • поле Same for all трябва да е изключено
  • Padding/Left  0 px
  • Margin/Left 0 px

за Category List   Type – none (премахва булетите пред елементите на списъка)
завършете с ОК бутона
(ако сте натиснали по-рано ОК бутона използвайте възможността за редактиране на текущия клас и довършете промените)
Изберете бутон New CSS Style от панел CSS Styles и попълнете:
поле Selector с .navcont а (точката няма да се появи автоматично и затова не я пропускайте)
Selector Type  – Advanced
Define in –> nav.css
ОК бутон
(класът ще съдържа общото форматиране на хипервръзките)
8. В диалогов прозорец CSS Style Definition попълнете
Category Type

  • Font Arial…
  • Size 11 px
  • Color #FFFFFF
  • Decoration none (премахва подчертаването на хипервръзките)

Category Background Background color – цвят по ваш избор (запълване на цялото „бутонче” при не избрана хипервръзка)
Category Block  Display – block
за Category Box

  • Width: 180 px
  • Padding: Top 3 px при избрано поле Same for all

Category Border
при изключени полета Same for all

  • Style Bottom – solid
  • Width 1 px
  • Color #FFFFFF

OK бутон
9. Изберете бутон New CSS Style от панел CSS Styles и попълнете:
Selector – .navcont а:link (точката няма да се появи автоматично и затова не я пропускайте)
Selector Type  – Advanced
Define in –> nav.css
ОК бутон
(класът ще съдържа общото форматиране на хипервръзките)
10. В диалогов прозорец CSS Style Definition попълнете
Category Type

11. Форматирайте посетените хипервръзки (a:visited) по същия начин като хипервръзките при първоначално зареждане на страницата (a:link) – можете да изберете Duplicate от контекстното меню (с десен клавиш) за клас .navcont a:link  и да го запазите под името .navcont a:visited
12. От панела CSS Style – New CSS Style по аналогичен начин можете да създадете форматиращ клас .navcont a:active – стъпките са същите като при класове  .navcont a:link или .navcont a:visited, но трябва да се избере друг цвят. Може да се направи и чрез Duplicate, запазване под ново име и редактиране само на цвета.
13. От панела CSS Style – New CSS Style по аналогичен начин можете да създадете форматиращ клас .navcont a:hover
Category Type
°    Font Arial……
°    Size 11 px
°    Color #FFFFFF
°    Decoration none
Category Background Background color – цвят по ваш избор (избрана хипервръзка)
ОК бутон
14. Крайният резултат проверете в браузер.
Примери за различни реализации на навигационно меню само с CSS-форматиране
Задача 3
Във файл ex11\touse\peppers_bkg.htm е реализирано навигационно меню като е използвано и фоново изображение ex11\touse\peppers.gif. Направете промени в css форматирането, така че първоначално и след като са посетени хипервръзките и съответните им изображения-маркери да бъдат оцветени в използвания в документа нюанс на червено, при позициониране на мишката върху тях –  нюанс на жълто, a при активиране на хипервръзките – нюанс на зелено.
Указания:
Разгледайте изображението peppers.gif и анализирайте кода на наличното css форматиране, след което предприемете нужните размествания в него.
Задача 4
Във файл ex11\touse\recipies.htm направете нужните промени, за да получите хоризонтално разположено меню.
Указания:
Използвайте подходящо свойството display.
3. Валидиране на html/xhtml документи
Валидирането на html/xhtml документ е възможно при налична в началото му декларация за неговия тип (doctype). То дава възможност както за отстраняване на грешки в html/xhtml кода, така и във версиите strict на декларациите за спазване на правилото за отделяне на  съдържание от форматиране – т.е. наличието на форматиращи атрибути на таговете, както и наличието например на таг FONT се отчитат като грешка при валидиране.
Задача 5
За файлa ex11\touse\error.htm използвайте валидатора http://validator.w3.org/ и отстранете грешките
Първо за тип на документа HTML 4.01 Strict;
Сменете типа на документа на XHTML 1.0 Strict и отново валидирайте и отстранете грешките.
Указания:
Нужната декларация за типа на документа (doctype) можете да откриете и в Internet например с помощта на Google;
Започнете с отстраняването на първите грешки и след всяка поправена грешка валидирайте отново;
Използвайте css форматиране, където това се налага.
4. Форматиране на htm – страница, подходящо за печат
Ако css-форматирането е включено в htm -  файла, в head – секцията трябва да присъстват стилове както за представяне на информацията на екран, така и за печат – например:
<style type=”text/css” media=”screen” >
<!– … Тук се поместват форматиращи стилове за екран …–>
</style>
<style type=”text/css” media=”print” >
<!– … Тук се поместват форматиращи стилове за печат …–>
</style>
или
<style type=”text/css”>
@media screen {
<!– … Тук се поместват форматиращи стилове за екран …–>
}
@media print {
<!– … Тук се поместват форматиращи стилове за печат …–>
}
</style>
Ако форматирането е в css -  файлoве, в head – секцията трябва да присъстват
<link rel=”stylesheet” href=”my_screen.css” type=”text/css” media=”screen” >
<link rel=”stylesheet” href=”my_print.css” type=”text/css” media=”print” >
В css-файла също може да бъде уточнявано предназначението на форматирането:
@import (my_print.css) print;
Препоръчително е да се избягват фоновите изображения, да се избира черен цвят за шрифта и бял за фона, както и шрифт с по-добра читаемост при печат. Секции, съдържащи хипервръзки или друга информация, не много тясно обвързана с основното съдържание на документа могат да бъдат скривани, като се използва свойството display: none.
Включването на следното форматиране за печат ще отстрани всички фонови изображения и ще определи черен цвят за символите и бял за фона, игнорирайки всички останали настройки в това отношение.
*{color: black !important; background: white !important;}
‘ Стойностите на свойства обозначени с !important имат най-голям приоритет.
При оформяне в повече колони е препоръчително форматиране за отделните колони {float: none; width: auto;}
Избор на размерите на  страницата и полетата може да става с правило
@page normal {size: portrait; margin: 1in;} или
@page normal {size: <размер1> <размер2>; margin: 1in;},
което да се използва после например body {page: normal;}.
Форсираното преминаване на нова страница се управлява от свойствата
page-break-after и page-break-before – например:
h1 {page-break-before: always;}
img {height: 9.5in; width: 8in; page-break-before: avoid;}
Задача 6
За файл ex11\touse\two_col.htm добавете форматиране за печат, при което заглавието (h1) да е отделено с линия от следващото съдържание, секцията с хипервръзките да е скрита, а преди всяко заглавие (h1) предвидете преминаване на нова страница.
Указания:
Използвайте css форматиране за долна част на рамката на елемент h1;
Резултата може да бъде наблюдаван от меню File/PrintPreview на браузера (или частично при използване на медия screen вместо print с css-файла, използван за форматиране при печат).
Задача 7
Разгледайте варианти за css форматиране на меню в приложените в директория ex11\touse файлове Listamatic2Pop-openlist.htm и Listamatic2Slate andSteelButtons.htm. На сайта, от където те са взети можете да намерите още интересни примери

Подобни статии:

  1. Помощ по CSS Изработвайки своя уеб сайт с CSS, несъмнено ще се сблъскате с множество чудновати проблеми, заради които почти винаги ще си блъскате главата в стената, търсейки правилното решение. Предлагаме ви един...