Принципи за създаване на HTML-страници - около стиловете и скриптове
нови материали
На стиловете и скриптове
Съвременните страници не трябва да са подобни на тези, които се появяват само преди няколко години. Първо, защото те прекарват форматиране, направени с помощта на HTML. На второ място, за интерактивна работа с посетителите те са все по-често използваните скриптове. В днешния HTML за целите на регистрацията на широко използвани Cascading Style Sheets, ние вземем един кратък преглед сега, и че ще бъде много тясно запознат в третата част на тази книга.
Какви са стиловете
За да видите форматирането, използвайки CSS (PSD към HTML с CSS), отново се обръщат към примера, показан на Обява 1.5. Като правило, заглавия изглеждат по-добре, когато те са подравнени в центъра. Това може да стане по два начина: или да се посочи за всеки един от тях в центъра или сложи двете в едно цяло. За първия случай, за да добавите към върха на index.html за документи (в частта на главата) следния текст:
След това, както се вгради контейнера глава DIV. Резултатът трябва да бъде документ, като този, показан в Обява 1.8 (готов пример за това е в Part_1 \ Форматиран папка).
Обявата 1.8. Да направим с помощта на CSS
В браузъра ще изглежда точно същата, както в предишната версия. И в двата случая, ние не вече форматирани и дизайн на документи, които се използват стилове. Като цяло, стилове позволява много гъвкави, за да издадат документ - заглавията и привеждане на параграфи, се определят цвят и дизайн на шрифта, за да се създаде рамка около обекти и др. И ефектът от стилове може да се разпространява като специфичен елемент или цялата страница или дори на няколко страници наведнъж. Ето защо те се наричат каскадни. За да се избегнат конфликти между масите на различни нива, приоритетите на зоната на влияние дефинирани. Тяхната същност е да се гарантира, че колкото по-близо до елемент стил е описание, по-висок приоритет има.
Помислете за този аспект по-отблизо. За това ние приемаме най-новата версия на index.html с дълготърпение и да добавите към атрибута отваряне етикет на СТИЛ H2, в която ние се отбележи, че привеждането в съответствие на елемента трябва да се извършва от дясната страна:
Това - на главната страница
Сега, ако отворите документа в браузъра, низа "Това е - на главната страница" не се съвпада с центъра и вдясно. По този начин, ние сме убедени, че с помощта на вградения STYLE атрибута стилове имат най-висок приоритет, защото се оказва, че стилът е определена в маркера - далече!
По-рано, беше отбелязано, че ефектът на Cascading Style Sheets могат да бъдат разпределени на няколко документа едновременно. За да направите това, те влизат в отделен CSS-файл, а след това се свържете към нея от друг документ. Например създадете файл mystyle1.css следното съдържание:
След това добавете HEAD част на index.html файл линия:
Сега, заглавията са станали червени. И всеки документ, който има връзка към mystyle1.css ще има заглавия H1 и H2 червено.
ЗАБЕЛЕЖКА
От горните примери само, че ние вече са установили, че се срещнаха два CSS свойства - текст подравняване и цветни. Първият от тях е отговорен за подравняването на текста, а вторият - за неговия цвят. Разбира се, това е само една малка част от възможностите на стилове, но до тогава, докато не започне да учи ги направи по-плътен, примерите ще бъдат ограничени, като цяло, а само тези две качества.
В допълнение към прилагането на общи за всички тагове от подобни определения стил, можете да създадете игрални класове. Например, ако искаме да видим в същия документ, един параграф се изравнява в центъра, а други - от двете страни, можем да създадем подходящите класове на елемента П. Това се прави, както е показано в примера по Обява 1.9.
Обявата 1.9. Прилагане на CSS класове
. някакъв текст, който трябва да бъде поставен в центъра.
. някакъв текст, който трябва да бъде облицована от двете страни.
Тук, в определението за стил, ние сме създали два класа за етикет P: Център и двете. За първите държави, които е необходимо да форматирате текста в средата, а втората - в двата края (или както го наричат, на ширината на прозореца). За да определите кой клас принадлежи към определена се използва маркер КЛАС атрибут. Ако не е посочен атрибута CLASS, тя ще приложите форматирането, по подразбиране (в случая на параграф - ляво подравняване).
В допълнение към определянето на класовете от елементи, можете да се обърнете към конкретен елемент, при условие уникален идентификатор - ID. Това се извършва чрез определяне на стила очевидно не е свързан с някой от елементите:
# Mystyle1.
Този текст трябва да е зелен!
Стил определя като mystyle1 същото име ще бъде приложен към елемент, независимо от това, което е елемент. Тя е само важно да се знае, че идентификатор (ID) елемент трябва да е уникално, т.е. на страницата, не трябва да е повече от един елемент с номер от, например, mystyle1.
Имайте предвид, че класовете и идентификатори могат да бъдат споделени (както в примера на ID) и свързани към клетъчния тип (както в примера на класове P). Например, ако посочите класа, определена за P, определен елемент (например, H1), след като запис не работи. Ето защо, ако имате нужда да се създаде клас, който може да се използва с всеки от елементите, използвайте следния синтаксис:
По-подробни правила за определяне на класове и CSS документи за самоличност са разгледани в съответната част на книгата. Най-накрая трябва да се отбележи, че в HTML 4 XHTML и СТИЛ атрибути, класа и ID са предвидени почти всички елементи, с изключение на тези, които са предназначени за част на главата и някои други - като сценарий и PARAM.
Какви са динамични страници
Dynamic HTML (DHTML) - е името на програмния интерфейс на доброволното прилагане (API) за управление на елементи на документа, известен като DOM, както се прилага към HTML. С него можете да промените свойствата на почти всички елементи на страницата. На практика това означава, че можете да създадете интерактивни, взаимодействие с потребителската страница.
ЗАБЕЛЕЖКА
По-нататъшното развитие на AJAX DHTML получи титлата и дори доведе до появата на такъв термин като Web 2.0.
Към днешна дата, всички браузъри поддържат променят външния вид на документа "в движение", т.е. без рестартиране.
Обявата 1.10. С помощта на скрипт
В този случай, ако искате скриптът да изпълнява едновременно и в отговор на някои потребителски действия, използвайте специални HTML атрибути. Така например, в OnClick атрибут, можете да дефинирате функция, която ще отговори на едно щракване на мишката върху линка:
Точно както файлове и стилове, скриптове могат да бъдат направени в отделни файлове. Това се прави с помощта на един и същ скрипт елемент:
Разбира се, в областта на сценарии за приложения е много по-широк, отколкото на дисплея на съобщенията: те могат да бъдат "в движение", за да създавате страници, да управлявате CSS свойства, промяна на формата на документа и т.н. Всичко това ще бъде обсъдено в четвъртата част на тази книга.
SNK GSCP - нова библиотека за PHP 5!
Web Studio и Visual Workshop Библиотека:
Стандарти за уеб-технологии
Монопол ст. 2.0.2 Downloads:
изтегляне на софтуер Продукти:
програми и книги