Разработка электронного портала (2011), страница 10
Описание файла
PDF-файл из архива "Разработка электронного портала (2011)", который расположен в категории "". Всё это находится в предмете "информатика" из 1 семестр, которые можно найти в файловом архиве НИУ «МЭИ» . Не смотря на прямую связь этого архива с НИУ «МЭИ» , его также можно найти и в других разделах. .
Просмотр PDF-файла онлайн
Текст 10 страницы из PDF
Значения указываются по порядку через пробел, либо используется однозначение, которое будет действовать для всех границ блока.Чтобы задать толщину линии используется либо абсолютное значение, либо одноиз стандартных – thin, medium или thick.Подобно ширине границы задается и стиль границы для каждой из сторон блока:ü Border-top-style – определяет стиль линии верхней границы блока.ü Border-right-style – определяет стиль линии правой границы блока.ü Border-bottom-style – определяет стиль линии нижней границы блока.ü Border-left-style – определяет стиль линии левой границы блока.ü Border-style – определяет стиль линии всех границ блока в следующемпорядке: Border-top-style, Border-right-style, Border-bottom-style, Border-left-style.Значения также указываются по порядку через пробел, либо используется однозначение, которое будет действовать для всех границ блока.Значения, которые могут приобретать стили границ представлены в таблице:Таблица 7.2.ЗначениеОписаниеdoubleДвойная линияgrooveКлиновидная, вытравленная линияinsetВдавленная линияnoneОтсутствие линийoutsetПриподнятая над страницей линияridgeКлиновидная линия, выдается над страницейsolidНепрерывная линияАналогично определяются и цвета границы для каждой из сторон блока:ü Border-top-color – определяет цвет линии верхней границы блока.ü Border-right-color – определяет цвет линии правой границы блока.ü Border-bottom-color – определяет цвет линии нижней границы блока.ü Border-left-color – определяет цвет линии левой границы блока.ü Border-color – определяет цвет линии всех границ блока в следующем порядке:Border-top-color,Border-right-color,Border-bottom-color,Border-left-color.Значения также указываются по порядку через пробел, либо используется однозначение, которое будет действовать для всех границ блока.
В качествезначения используется код RGB, либо название цвета.Чтобы задать для всех линий блока одинаковые значения можно использоватьсхему {border: border-width border-style border-color}, например: {border: thick doublenavy}.Ниже приведен пример изменения свойств границ.<HTML><HEAD></HEAD><BODY><DIV STYLE="border-width:thin; border-style:solid; border-color:red">Thin border, solid style, color red</DIV><BR><DIV STYLE="border-width:medium; border-style:groove; border-color:blue">Medium border, groove style, color blue</DIV><BR><DIV STYLE="border-width:thick; border-style:outset; border-color:green">Thick border, outset style, color green</DIV><BR><DIV STYLE="border-width:1cm; border-style:inset; border-color:pink">1 cm border, inset style, color pink</DIV><BR><DIV STYLE="border-width:10px; border-style:ridge; border-color:#FFFF00">10px border, ridge style, color #FFFF00</DIV></BODY></HTML>Рис.
7.2. Пример изменения свойств границРазмеры блока определяются атрибутами WIDTH и HEIGHT, ширина и высотаблока соответственно. Значением может быть абсолютным в пикселях (px) иотносительным – в процентном содержании от текущего размера окна браузера.Пример: <P STYLE="width: 50%; height: 150px">Отступы внутри блока задаются четырьмя атрибутами, соответствующими каждойиз сторон блока:ü Padding-top – определяет отступ от верхней границы текста.ü Padding-right – определяет отступ от правой границы текста.ü Padding-bottom – определяет отступ от нижней границы текста.ü Padding-left – определяет отступ от левой границы текста.Чаще всего значения свойств задаются в пикселях: P {padding-right: 5px}Чтобы сразу задать все отступы в блоке, воспользуйтесь свойством padding, вкотором через пробел перечислите все значения свойств в следующем порядке: Paddingtop, Padding-right, Padding-bottom, Padding-left, т.е.
по часовой стрелке. Если задать однозначение, то оно будет применено ко всем свойствам.Поле вокруг блока также определяется четырьмя стилями, соответствующимикаждой из сторон блока:ü Margin-top – определяет отступ над верхней границей блока.ü Margin-right – определяет отступ рядом с правой границей блока.ü Margin-bottom – определяет отступ под нижней границей блока.ü Margin-left – определяет отступ рядом с левой границей блока.Чтобы сразу задать все отступы вокруг блока, используется свойство margin, вкотором через пробел перечисляются все значения свойств в следующем порядке: Margintop, Margin-right, Margin-bottom, Margin-left, т.е. по часовой стрелке, аналогично отступувнутри блока.
Если задано одно значение, то оно будет применено ко всем свойствам.Определив все свойства блока, остается разместить его в нужном месте настранице. За это отвечает свойство POSITION, которое может принимать одно из трехзначений:ü Absolute – при использовании этого значения, вы можете разместить элемент впроизвольном месте страницы, указав абсолютные значения сдвига блока.Например, 50 пикселей вправо и 100 пикселей вниз, считая от левого верхнегоугла.ü Relative – смещает блок относительно того места, в котором он находился быбез указания этого атрибута.
Т.е. первоначально блок размещается в центрестраницы, указав свойство relative со сдвигом влево на 50 пикселей, мыполучим сдвиг блока относительно центра страницы.ü Static – оставляет блок в том месте, в котором его разместили в соответствии состандартными тегами HTML.При задании абсолютного или относительно (absolute и relative) размещении блокаиспользуются четыре свойства, которые можно менять:ü Top – расстояние элемента от верхнего края окна браузера при использованииабсолютного смещения или от нижнего края какого-либо элемента страницыпри относительном размещении.ü Right – расстояние элемента от правого края окна браузера при абсолютномразмещении.
Для относительного размещения свойство не используется.ü Bottom – расстояние элемента от нижнего края окна браузера для абсолютногоразмещения. Для относительного размещения свойство не используется.ü Left – расстояние элемента от левого края окна браузера при абсолютномразмещении или сдвиг влево от какого-либо элемента страницы приотносительном размещении.Приведем пример:<HTML><BODY><div STYLE="position:absolute; left:200px; top:50px;"><b>Параграф 1</b></div><divSTYLE="position:absolute;right:250px;bottom:50px;"><b>Параграф2</b></div>Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст ТекстТекст Текст Текст Текст Текст Текст Текст Текст Текст Текст<div STYLE="position:relative; left:250px"><b>Параграф 3</b></div></BODY></HTML>Рис.
7.3. Пример размещения блокаПоследним этапом мы рассмотрим трехмерное размещение блоков, т.е. наложениенескольких слоев друг на друга. За этот процесс отвечает свойство z-index. Элемент сбольшим значением z-index наложится поверх элемента с меньшим значением z-index.Пример:<HTML><BODY><img src="Flag.jpg" STYLE="z-index:0; position:static"><div STYLE="z-index:1; position:absolute; left:80px; top:70px;"><b>Россия</b></div></BODY></HTML>Рис. 7.4. Пример наложения нескольких слоевТема 9. Работа с JavaScript и Java-апплетамиJavaScript — скриптовый язык, чаще всего использующийся при созданиисценариев поведения браузера, встраиваемых в web-страницы.Язык JavaScript разработан компанией Netscape и первоначально называлсяLiveScript.
Синтаксис языка брал начало от языков С и Java.JavaScript обладает рядом свойств объектно-ориентированного языка, но благодаряпрототипированию поддержка объектов в нём отличается от традиционных объектноориентированных языков. Кроме того, JavaScript имеет ряд свойств, присущихфункциональным языкам.JavaScript имеет C-подобный синтаксис, но по сравнению с языком С имеетследующие коренные отличия:•объекты, с возможностью интроспекции и динамического изменения типачерез механизм прототипов;•функции как объекты первого класса;•обработка исключений;•автоматическое приведение типов;•автоматическая сборка «мусора»;•анонимные функции.Существует три способа включения JavaScript в текст HTML-страницы:•с помощью тега <SCRIPT>;•во внешнем файле;•путем включения скрипта в атрибут события.Приведем примеры включения скриптов всеми тремя способами.
