задача изпитване

1. ЗАДАЧА: 
1. Създайте таблица, описваща броя на оценките по математика в края на учебната година. Имайте предвид, че са получени следния брой оценки:
Слаб  - 3 бр;
Среден - 5 бр;
Добър - 10 бр;
Много добър - 8 бр;
Отличен - 4 бр.
2. Сортирайте таблицата по брой оценки в низходящ ред.
3. Създайте правоъгълна диаграма, сравняваща различния брой оценки и задайте заглавие "Оценки по математика".
4. Създайте диаграма, която пропорционално да показва съотношението на броя оценки, задайте заглавие "Оценки по математика" и покажете процентния дял на всяка оценка.

2.  ЗАДАЧА:

1. Задача:

1. Създайте таблица, описваща видовете семейни разходи за един месец като имате предвид, че са заплатени за заем - 300 лв, за електричество - 25 лв, за парно - 45 лв, за мобилен телефон - 40 лв, за хранителни стоки - 400 лв, за гориво за автомобил - 120 лв, за развлечения - 600 лв, за други - 50лв.

2. Сортирайте таблицата по разходи във възходящ ред.

3. Създайте правоъгълна диаграма, сравняваща разходите и задайте заглавие "Месечни разходи".

4. Създайте диаграма, която пропорционално да показва съотношението на направените разходи, задайте заглавие "Месечни разходи" и покажете процентния дял на всеки вид разход.

2. Задача:
На конкурсен изпит по математика се явили 3600 кандидати.Резултатите от изпита са показани на кръговата диаграма. Създайте електронна таблица, с която да намерите броя на учениците, получили слаби, средни, добри, много добри и отлични оценки.

Изработване на меню за сайт с CSS

Урок

http://www.youdevelop.net/coding/jquery/dropdown-menu-s-jquery-i-css/

ПРИМЕР 1:

HTML файл

Трябва да поставим неподреден списък <ul>, в който в елементите <li> поставяме линковете си:

1 2 3 4 5 6 7 8

<ul>     <li><a href="link-1.html">Начало</a></li>     <li><a href="link-2.html">За IG Designers</a></li>     <li><a href="link-3.html">Уеб дизайн</a></li>     <li><a href="link-4.html">Лого дизайн</a></li>     <li><a href="link-5.html">Предпечат</a></li>     <li><a href="link-6.html">Контакти</a></li> </ul>

Вече имаме необходимите ни линкове. Сега ни остава да ги облечем в дизайн. Нека разгледаме елементите един по един и да помислим как те се представят в HTML:

       · <ul> е тагът, отварящ неподреден списък – всички елементи в него трябва да са <li>. Така казваме на HTML, че всичко между <ul> и </ul> трябва да следва логиката на списъците с булет;

·  <li> казва на HTML, че имаме елемент от списък. В него поставяме съдържанието;

·  <a> е реалния линк към документа, който искаме да посочим в менюто.

Ако сега запаметим нашия .html документ, той ще изглежда много далеч от това, което искаме да постигнем – просто списък с линкове без оформление, без визия, без дизайн. 

Рамкиране на менюто

1 2 3 4 5 6 7 8

ul {    margin:0;    padding:0; } ul li {    list-style: none;    float: left; }

Така зададена, стиловата дефиниция казва на елемента <ul> да няма никакви отстояния от околните елементи, а <li> елементите да нямат списъков стил – да няма пред тях познатия булет (точицата, която сме свикнали да виждаме пред такива списъци) и да плават наляво или просто списъка да се появява на един ред, като най-горния ни елемент да поеме най-лявата възможна позиция и следващите да се нареждат след него. 

Оразмеряване на бутоните

Бутоните ни в менюто представляват самите <a>елементи. Чрез CSS ще накараме линковете ни да приличат на бутони – да имат конкретна широчина и височина; фон, който се променя според това къде се намира мишката и как потребителят взаимодейства с бутона и т.н.

1 2 3 4 5 6 7 8 9 10 11 12 13 14	ul li a {    display:block;    padding: 10px 5px;    text-decoration: none;    background: url(btn_down.png) repeat-x;    color: #000; } ul li a:hover {    display:block;    padding: 10px 5px;    text-decoration: underline;    background: url(btn_up.png) repeat-x;    color: #fff; }

С тази дефиниция казваме на елемента <a> в нормално състояние да се показва като блок/кутийка, която да има вътрешно отстояние от рамките си (padding) от 10 пиксела отгоре и отдолу и 5 пиксела отляво и отдясно и да е с фон изображениетоbtn_down.png. Настройките за текста са text-decoration: none; и color: #000; или текста вътре в бутоните няма да бъде подчертан и ще бъде с черен цвят.

Когато потребителят мине с мишката през бутона използваме фиктивния класa:hover. С него променяме настройките за фона – задаваме btn_up.png; за текста – казваме му да е подчертан. Така бутона се променя според поведението на потребителя и имитира напълно ефекта RollOver Image.

Завършен, нашия .html документ ще изглежда така:

ПРИМЕР 2:

Меню

HTML файл

CSS файл