Автор работы: Пользователь скрыл имя, 17 Декабря 2010 в 20:36, курс лекций
Работа содержит лекции в виде уроков по предмету "Информатика".
<AREA SHAPE="default"
HREF="javascript:alert('Вы
то весь оставшийся рисунок (в данном случае фон) станет ссылкой
Урок 11
Тема: звук на страничке.
Думаю, вам уже
попадались странички, после загрузки
которых начинала звучать музыка.
Честно признаюсь, особого восторга
от них я не испытываю. Но рассмотреть
эту возможность надо.
Самый простой
способ предложить посетителю послушать
музыку, это сделать простую ссылку
на звуковой файл. Вот так:
<A HREF="music/posen.mid">ДДТ,
"Осень"</A>
Посетитель вашей
страницы, увидев такую ссылку - ДДТ,
"Осень", сам решит, хочет ли он это
слушать и стоит ли по ней кликать. После
клика по такой ссылке начнется загрузка
файла, который затем можно прослушать.
Чаще используют
тег <EMBED>. Действие этого элемента
следующее: после загрузки страницы
автоматически загружается и проигрывается
звуковой файл. При этом в окне появляется
панель проигрывателя (или пульт управления
проигрывателя - как вам удобнее называть).
Пример:
<EMBED SRC="music/osen.mid"
AUTOSTART="TRUE">
Как всегда, тут
не все так безоблачно, как хотелось
бы. По своей давней традиции создатели
Netscape и Explorer не договорились между собой,
и потому в разных браузерах эта панель
выглядит и, самое обидное, ведет себя
по разному.
Элемент <EMBED>
может иметь следующие
WIDTH - ширина панели в пикселах (можно и в процентах);
HEIGHT - высота панели в пикселах (или процентах);
ALIGN - расположение панели относительно текста, возможные значения LEFT, RIGHT, CENTER;
HIDDEN - позволяет скрыть панель, значения аттрибута: TRUE - панель скрыта, FALSE - панель видима (значение по умолчанию);
AUTOSTART - значение
TRUE - проигрыватель стартует
LOOP - цикл, т.е. при значении TRUE мелодия будет проигрываться по кругу, а при значении FALSE - только один раз. Если значением будет число, то Netscape проиграет мелодию указанное количество раз, для Explorer'а числовое значение равносильно значению TRUE.
Пример использования
перечисленных выше аттрибутов:
<EMBED SRC="music/osen.mid"
HIDDEN="TRUE" AUTOSTART="TRUE" LOOP="TRUE">
В данном примере
панель управления будет скрыта, воспроизведение
звукового файла начинается автоматически,
повторяться будет бесконечно. Думаю,
посетитель вашего сайта достойно оценит
такое решение!
Некоторые браузеры
поддерживают еще аттрибут CONTROLS ("органы
управления" - англ.), который позволяет
сконфигурировать панель управления.
Он может иметь следующие значения:
CONSOLE - панель обычного размера;
SMALLCONSOLE - панель меньшего размера;
PLAYBUTTON - вместо всей панели только кнопка "Воспроизведение";
PAUSEBUTTON - вместо всей панели только кнопка "Пауза";
STOPBUTTON - вместо всей панели только кнопка "Стоп";
VOLUMELEVER - вместо
всей панели только регулятор
громкости.
Элемент <EMBED>
поддерживает звуковые файлы с расширениями
MID, WAV, AIFF, AU, видеофайлы AVI.
Элемент <BGSOUND>
задает фоновый звук для страницы,
т.е. звуковой фрагмент, который будет
звучать сразу после загрузки
страницы. Браузером Netscape не поддерживается.
Может иметь аттрибут LOOP, определяющий
количество повторов фрагмента. Пример
использования:
<BGSOUND SRC="music/osen.mid"
LOOP="3">
Урок 12
Тема: вкратце о CSS.
Что такое CSS и
для чего это нужно? CSS - Cascading Style Sheets,
что означает дословно "каскадные таблицы
стилей". Смысл - описывается стиль всего
документа или сайта в целом, либо отдельных
его элементов. Т.е. вы можете один раз
определить, что, например, на всех страницах
вашего сайта все заголовки будут красного
цвета, абзацы выровнены по центру, а ссылки
останутся неподчеркнутыми (то-то посетители
помучаются, пока найдут их!). И к тому же
вы сможете изменить стиль вашей страницы
или даже всего сайта, подправив в тексте
лишь пару строк!
Чтобы сразу
объяснить суть таблиц стилей, рассмотрим
пример. Допустим, у вас есть такая страница:
<HTML>
<HEAD>
<TITLE>Изучим таблицы стилей!</TITLE>
</HEAD>
<BODY>
<H1>Большой заголовок</H1>
<H2>Заголовок поменьше</H2>
<P>А это уже абзац - самый обычный абзац.</P>
</BODY>
</HTML>
А теперь где-нибудь
в заголовке страницы (т.е. в секции
HEAD) разместим тэг <STYLE>:
<STYLE TYPE="text/css">
<!--
H1 { font-size: 40px; background: red; text-align: right;
font-family: helvetica, arial, sans-serif }
H2 { font-size: 20px; font-style: italic; font-family: helvetica,
arial, sans-serif }
P { background: silver; text-align: center; font-family: courier, fixed,
monospace }
-->
</STYLE>
Можете набрать
этот пример в каком-либо текстовом
редакторе и сохранить затем
с расширением htm или html (хорошая практика!),
а можете сразу посмотреть этот пример
в действии.
Теперь разберем
этот пример подробнее. Аттрибут TYPE="text/css"
и информация в комментарии (между
"<!--" и "-->") как раз и
определяют стиль нашей страницы.
Метки комментария здесь
Вот и все. Как
говорится, просто и со вкусом. Таким
образом вы можете управлять проактически
всем, что появляется на вашей странице.
Т.е. практически любому тегу можно придать
новые свойства. А теперь подробнее.
Font-family - шрифт,
используемый для отображения
данного элемента. В идеале, конечно,
было бы неплохо, если бы
у всех ваших посетителей были
одинаковые наборы шрифтов. На практике
же такого не бывает. Поэтому указывайте
список шрифтов. Браузер просматривает
этот список пока не встретит имеющийся
в наличии шрифт. Например, компьютер с
ОС Windows как правило имеет шрифт Arial, в компьютерах
Macintosh наиболее похож на него шрифт Helvetica.
В конце списка желательно иметь один
из следующих: serif, sans-serif, monospace, fantasy или
cursive. Пример: "P { font-family: arial, helvetica, sans-serif
}"
Font-size - размер
шрифта. Может указываться в точках
(pt), пикселах (px).
Font-style: italic - курсив
(наклонный шрифт).
Font-weight: bold - жирный
шрифт. Значение может быть
также числовым, только различные
браузеры реагируют на это
по-разному.
Text-transform - преобразование
текста: допустимые значения: uppercase
(все буквы будут заглавные), lowercase (все
буквы будут строчные), capitalize (каждое слово
будет начинаться с заглавной буквы) и
none (т.е. никаких действий).
Text-decoration - выделение
текста, допустимые значения: underline
(подчеркнутый), line-through (перечеркнутый),
blink (мигающий) и none(ничего). Например, чтобы
ссылки в тексте не выделялись подчеркиванием,
можно включить в заголовок документа
следующий текст:
<STYLE TYPE="text/css">
<!--
a:link {text-decoration: none}
a:visited {text-decoration: none}
a:active {text-decoration: none}
-->
</STYLE>
Color - изменение
цвета текста, линий, рамок. Скажем,
в предыдущем примере мы
body {color: black}
a:link {color: black; text-decoration: none}
a:visited {color: black; text-decoration: none}
Т.е. цвет текста
на странице - черный (1-я строчка), ссылки
(обычно голубого цвета) - неподчеркнутые
черного цвета (2-я строчка), посещенные
ссылки (обычно фиолетовые) - также черного
цвета и неподчеркнутые (3-я строчка).
Background-color - определяет
цвет фона для какого-либо
strong {background-color: yellow}
Текст между
метками <STRONG> и </STRONG> будет показан
на желтом фоне.
Background-image - позволяет
сделать фон в виде рисунка.
Пример:
blockquote {background-image: url(../pictures/million.jpg)}
В результате цитаты
(т.е. текст между метками <BLOCKQUOTE> и </BLOCKQUOTE>)
будет размещен на фоне рисунка "million.jpg".
Примером служит данный абзац.
Text-align - выравнивание
текста. Применяется только в
абзацах, заголовках и списках.
IMG {text-align: center}
Text-indent - позволяет
делать отступ в первой строке
абзаца (красная строка - как мы
привыкли видеть в книгах). Ширина
отступа измеряется в пикселах
(px) или точках (pt). Может быть также
величиной отрицательной, тогда первая
строка будет выступать влево от остального
текста. Пример (он же и применен к этому
абзацу):
p {text-indent: 10pt}
Margin - устанавливает
отступ текста. Пример использования:
body {margin-left: 10pt; margin-right: 15pt}
В результате текст
на странице будет отступать слева
на 10 точек от края страницы, справа
- на 15 точек. Также возможны варианты:
margin-top (отступ сверху) и margin-bottom (отступ
снизу).
Рамки. Каждый элемент
может заключен в рамку. Рамка
может иметь следующие свойства:
border-width - ширина рамки. Значение числовое (в пикселах или точках) или одно из зарезервированных слов - thin (тонкая), medium (средняя), thick (толстая).;
border-color - цвет рамки. Числовое или текстовое значение цвета. Также может принимать значение transparent (прозрачная);
border-style - стиль рамки. Может иметь следующие значения: Значение Описание Вид рамки (в вашем браузере!)
dashed пунктирная - в виде черточек dashed
dotted пунктирная - в виде точек dotted
double двойная линия double
inset с эффектом вдавленности inset
outset с эффектом выпуклости outset
ridge выпуклая рамка ridge
groove врезанная рамка groove
solid непрерывная
линия solid
Можно определить каждую сторону рамки отдельно. Для ширины рамки это выглядит так: border-top-width (ширина верхней стороны), border-right-width (правая сторона), border-bottom-width (нижняя сторона) и border-left-width (левая сторона). Для определения цвета и стиля достаточно просто перечислить свойства в таком порядке: верх-право-низ-лево. Пример:
blockquote {border-top-width:
3px; border-right-width: 5px; border-bottom-width: 3px; border-left-width:
5px; border-color: red green navy green; border-style: double double
solid double }
Здесь определена
рамка со следующими границами: верхняя
- красная двойная в 3 пиксела шириной,
правая и левая - зеленые двойные в 5 пикселов
шириной, нижняя - синяя сплошная шириной
в 3 пиксела.
А что, если захочется
изменить стиль только одного абзаца?
Или каждому абзацу определить свой
стиль? Можно! В таком случае надо использовать
аттрибут STYLE с необходимыми свойствами.
Например:
<P STYLE="text-indent: 15pt; color: red; background-color: white">
или
<H3 STYLE="background-color: silver; border-width: 3px; border-style: groove;
border-color: #F0F0F0; text-align:
center">
Теперь представим
такую ситуацию: у вас на странице
25 абзацев, из них 15 вы хотите выдержать
в каком-то определенном стиле. Чтобы
не писать аттрибут STYLE каждый раз, можно
поступить следующим образом: определить
в заголовке документа в тэге STYLE необходимый
стиль и дать ему название, например: