1 / 19

Програмиране под Интернет

Програмиране под Интернет. / CSS и HTML - продължение /. Съдържание. Сияещ текст; Сянка на текст; CSS меню; Бутон с hover промяна ; МЕТА тагове; Мелодии ; Създаване на карти; Формуляри. Сияещ текст.

kiana
Download Presentation

Програмиране под Интернет

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Програмиране под Интернет / CSS и HTML- продължение /

  2. Съдържание • Сияещ текст; • Сянка на текст; • CSS меню; • Бутон с hover промяна; • МЕТА тагове; • Мелодии; • Създаване на карти; • Формуляри

  3. Сияещ текст Има много лесен начин да се направи сияещ текст. Този код обаче се разчита само от Internet Explorer.Кодът за стила по-долу се използва за сияние около текст.<p STYLE="color:#FF0000; height:10%; filter:glow(color=#008000, strength=3);">Сияещ текст</p> Стойността на color e #FF0000. Това е цветът на самия текст.Стойността наfilterе glow(color=#008000, strength=3). Кодът #008000, е за да се промени цвета на сиянието. Яркостта се коригира със strength=3. Strength [streηθ] – сила, мощ; glow [glou] – грея, блестя Атрибутът height=100% определя размерите на карето, в което е поставен текста. Например

  4. Сянка на текст С този код: <p STYLE="color:#FF0000;height:10%;filter:dropshadow(color=#008000, offx=3, offy=3, positive=1);"> Сянка на текст</p> се прави сянка за текст.Сменете #FF0000, за да промените цвета на самия текст.Сменете #008000, за да промените цвета на сянката.Атрибутите "Offx" и "offy" показват разстоянието от текст до сянката. "Positive" приема за стойности 1 и 0. За 0 сянката да минава на заден план, но не изглежда добре. Атрибутът height=100% определя размерите на карето, в което е поставен текста. Например

  5. CSS меню Менюто не е нищо друго освен подредени елементи, които те препращат на други страници. В задачата ще направим хоризонтално меню, като и верти-калното меню се основава на същите принципи.Техниката в случая се обуславя на css атрибута "float: left", което кара елементите да са подредени в ляво. Конструкция на просто хоризонтално меню: Част HEAD: <style type="text/css"> li { float: left;} .menu a { margin: 0 2px; width: 150px; height: 20px; display: block; text-align: center; border: 1px solid gray; text-decoration: none; color: #FFFFFF; background: #008000; } .menu a:hover { background: #ffff00; border: 1px solid gray; } .menu a:active { background: gray; border: 1px solid gray; color: #FF66FF; } </style>

  6. CSS меню Конструкция на просто хоризонтално меню: Част BODY: <ul class="menu"> <li><a href="siaene.htm">Ñèÿåù òåêñò</a></li> <li><a href="sianka.htm">Ñÿíêà íà òåêñò</a></li> <li><a href="">Menu 3</a></li> <li><a href="">Menu 4</a></li></ul> Например В горния код a:- определя формата на връзките в страницата; a:link - определя формата на непосетените връзки в страницата;a:visited - определя формата на посетените връзки;a:hover - задава ефект при поставяне на показалеца на мишката върху връзката; a:active - задава цвят на активните връзки.

  7. Бутон с hover промяна HOVER -. нося се, рея се, вися, поставям показалеца на мишката отгоре. Тук ще видите начин за направа на бутони с едно изображение сменящо се при 'докосване' от курсора.За целта ни е нужно едно 'двойно'  изображение като например това: В частта HEAD се декларира класа .btn: <style type="text/css"> .btn { width: 147px; height: 83px; /*ïîëâèíàòà îò âèñî÷èíàòà íà èçîáðàæåíèåòî*/ background-image: url('buton.bmp'); background-position: left top; display: block; } .btn:hover{ background-position: left -100%;/*ìåñòè èçîáðàæåíèåòî íàãîðå*/ } .btn span{ display: none;/*ñêðèâà òåêñòà îò ëèíêà*/ } </style> Например

  8. Бутон с hover промяна В частта BODY се използва класа .btn: <a href="siaene.htm" class="btn"><span>текст на бутона</span></a> Върху бутоните могат да се поставят и надписи. С тях могат да се правят хоризонтални и вертикални менюта. Задача: Нарисувайте картинка с две изображения, подходящи за бутон “Назад”.

  9. МЕТА тагове В главата на HTML документа HEAD освен заглавието на web страницата може да се поставя информация, която се използва от търсещите машини. Това става с помощта на МЕТА таговете. Например: <META NAME="author" VALUE="Peter Svetoslavov"><META NAME="description" VALUE="страница, съдържаща урок"><META NAME="keywords" VALUE="html, meta, tag, document"> • В примера NAME="author"VALUE="Peter Svetoslavov" показва на търсачката, че автора на страницата е Петър Светославов. • NAME="description" задава описанието на страницата. То трябва да бъде кратко и ясно. • NAME="keywords" задава ключови думи при търсенето. След VALUE трябва да се изпишат почти всички ключови думи, характерни за страницата. Така страницата ще бъде по-лесно откриваема за търсачките.

  10. МЕТА тагове МЕТА таговете могат да извършват и действия, които не са свързани със съдържанието на страницата. Ето някои от тях : <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251"> Този МЕТА елемент зарежда предварително кодовата таблица на символите, в случая кирилица. Изписвайте този ред винаги, когато страницата ви е на кирилица. В противен случай някой браузър може да покаже маймунски символи. <META HTTP-EQUIV="Content-Language" CONTENT="bg"> - указва че съдържанието на страницата е на български език. <META HTTP-EQUIV="refresh" CONTENT="5"> - презарежда страницата през определен период от време, в случая 5 секунди. <META HTTP-EQUIV="refresh" CONTENT="5;URL=http://www.search.bg" > - пренасочва към друга страница след определен период от време, в случая след 5 секунди ви пренасочва към www.search.bg

  11. HTML тагове при специални случай Мелодии Езика HTML  ви позволява да слагате музикален фон на страницата си. За целта трябва да използвате музикални формати като *.mid или *.wav. За да включите такъв файл като музикален фон в Internet Explorer трябва да използвате тага <BGSOUND> в частта <HEAD>. Като атрибут на <BGSOUND> за указване на пътя до музикалния файл се използва SRC . Например: <BGSOUND SRC=“svuk.wav" LOOP="-1">     Разбира се, ако файлът не се намира във вашата директория е нужно да указвате целия път до него, Атрибута LOOP задава броя на повторенията на мелодията. Когато   LOOP="-1" тогава мелодията започва отново, веднага след като свърши. Ако искате да се повтори два пъти например и после да спре, трябва да зададете LOOP="2".

  12. Мелодии Възпроизвеждането на звук се прави и с тага <EMBED>, разположен в частта <BODY>. Тагът <EMBED> показва плеар за управление на звука.   <EMBED>  е таг за визуализация и на мултимедия. С негова помощ можете освен музика да сложите и видео на страницата си, например някой .avi файл. Атрибута LOOP може да има стойности - true и false. Когато стойността е true, мелодията започва отново веднага след като свърши, докато при false се просвирва само веднаж и спира. Ако зададете числова стойност на LOOP, мелодията се просвирва толкова пъти, колкото е числото, например LOOP="3" ще изсвири мелодията три пъти и ще спре Например: <HTML> <HEAD> <TITLE>embed</TITLE> </HEAD> <BODY> <EMBED SRC="svuk.wav" WIDTH="128" HEIGHT="128" LOOP="true"> <EMBED SRC="clock.avi" WIDTH="128" HEIGHT="128" LOOP=“false"> </BODY> </HTML> Например

  13. Цветове Цветовете в web страниците се представят със шестразредни шестнадесет-ични числа, започващи със символа "#". Първите двойка цифри в числото означават количеството на червения цвят, вторите на зеления, третите на синия. Всеки цвят съдържа 256 нюанса, от 00 до FF, като 00 е липса на цвят, а FF пълен цвят. При смесването на основните цветове, браузъра визуали-зира на вашия монитор получения цвят. Когато стойностите за трите цвята са 00, тогава се показва черен цвят. При стойности и за трите цвята FF цветът е бял. Разгледайте следната таблица :

  14. Създаване на карти Главният таг , използван за създаване на карти е <map>. Например: <MAP NAME = “rila" > <AREA SHAPE ="rect" COORDS ="520, 51, 655, 200" HREF ="sianka.htm" alt="sianka"> <AREA SHAPE ="rect" COORDS ="190, 94, 377, 230" HREF ="siaene.htm" alt= "sianie"> </MAP> <img src="rila.JPG" width="864" height="330" USEMAP="#rila" border="0" align="center"> Атрибутът name нa тага <map> се използва за индентифициране на областите и хиперлинковете за картата на изображението. Тагът <area> се използва вътре в тага <map>. Той включва няколко атрибута за описване на регионите в картата и хипервръзките. href - URL на ресурса , обикновено уебстраница , свързана към областта; nohref - към областта няма свързан ресурс; shape - геометрична форма на областта;coords - координатите , които описват размера и позицията на формата на областта; alt - текстово описание на областта.

  15. Създаване на карти Стойности за атрибута shape:RECT - правоъгълник описан чрез координатите за горен ляв и долен десен ъгъл; CIRC - кръг описан чрез кординатите на центъра и радиуса; POLY - Многоъгълник описан чрез поредица от координати за свързаните точки. Пример: shape="rect" coords ="520, 51, 655, 200" - правоъгълна област; shape="circ" coords=“45, 60, 100" - кръгова област;shape="polygon" coords="50, 5, 95, 45, 5, 45" – триъгълна област Тагът <MAP> има атрибута name, чрез които се идентифицира. Това име се използва в атрибута usemap, предшествано от символа #. <img src="rila.JPG" width="864" height="330" USEMAP="#rila" border="0" align="center"> Например

  16. Формуляри Освен за показване на информация WEB страниците могат да служат и за събиране на информация от потребителя. Това става с така наречените формуляри. За съжаление езика HTML не ви позволява да управлявате информацията във формулярите, а само да ги разполагате на страницата си. Двойката елементи/тагове/ за разполагане на формуляри е <FORM> </FORM>. Между тази двойка елементи могат да се разполагат неограничен брой обекти. Всеки обект се създава с тага <INPUT>. Този таг трябва задължително да съдържа двата атрибута NAME и TYPE. Атрибутът NAME задава името на обекта, а TYPE - видът му. Атрибутът VALUE при различ-ните обекти изпълнява различни функции. Различни стойности на TYPE: <INPUT NAME=“txt1" TYPE="text" SIZE="40" VALUE=" текстово поле "> -текстово поле с дължина 40 символа;<INPUT NAME=“pas1" TYPE="password"> - поле за парола, като символи-те се заменят със звездичка; <INPUT NAME=“ch1" TYPE="checkbox" CHECKED> - поле за отметка;

  17. Формуляри Различни стойности на TYPE: <INPUT NAME="R1" TYPE="radio" VALUE="V2">- радиобутон; <INPUT TYPE="submit" VALUE=“OK" NAME="B1"> - команден бутон за потвърждаване на събитие; <INPUT TYPE="reset" VALUE="Reset" NAME="B2"> - команден бутон за изчистване на текстови полета. Може да се създаде обект във вид на многоредово поле с елемента <TEXTAREA>. Размера на полето се задава с атрибутите COLS и ROWS. COLS показва колко символа да е широко полето, а ROWS от колко реда да се състои. <TEXTAREA ROWS="3" NAME="S1" COLS="30">Текст, които се показва в полето</TEXTAREA> - текстово поле с 3 реда и 30 символа.

  18. Формуляри Последния тип обекти са падащите списъци. Такъв вид обекти се създават с елемента <SELECT>. Например: <SELECT SIZE=“1” NAME="D1">    <OPTION>избор 1</OPTION>    <OPTION>избор 2</OPTION>    <OPTION>избор 3</OPTION></SELECT> Стойностите, които да се показват в списъка се задават с тага <OPTION>. Атрибута SIZE на елемента <SELECT> задава броя на редовете, които да се показват в списъка. Когато SIZE="1", тогава се наблюдава т.нар. падащ списък. Ако се зададе стойност по-голяма от 1, тогава се показва списък. Например

  19. Езиците HTML и CSS продължават да се развиват и променят. Създават се и нови езици, които ги разширяват и допълват. Автор: Лилия Парашкевова

More Related