х60 (Full Banner)

Последний формат баннеров является наиболее популярным и считается стандартным.

Для создание статического баннера выполните следующие действия.

1. Загрузитите графический редактор Adobe Photoshop.

2. Из меню Файлвыберите команду Новыйи заполнитьполя открывшегося диалогового окна. При этом нужно указать размеры стандартного баннера (в пикселях) – 468*60.

3. В своей директории создайте папку Bannerи сохраните созданную картинку в этой папке под именем banner.psd. Для этого из меню Файлвыберите команду Сохранить как.Получилась обыкновенная прозрачная картинка в формате Adobe Photoshop.

4. Обратившись к меню Окно,выберите команду Показать Цвета. Перед нами Палитра цветов. В этой палитре необходимо определить цвет фона баннера, например, следующим образом:

· Red:97

· Green: 166

· Blue: 19

Необходимо помнить, что баннер должен эффектно смотреться на фоне веб-страницы, поэтому при выборе фона необходимо сопоставлять дизайн баннера с веб-страницей, на которой его предполагается разместить. Для создание фона баннера выберите инструмент Заливка ипримените его к прозрачной картинке. Вместо цвета можно воспользоваться готовыми шаблонами оформления, которые находятся в панели цветов.

Теперь баннер имеет зеленоватую подложку.

5. Сохраните файл через соответствующий пункт меню или комбинацию клавиш <Ctrl+S>.

6. Найдите в библиотеке картинок нужное изображение. Это должен быть, например, небольшой gif-файл, отражающий тематику баннера. Затем выполните команду [Файл-Открыть]. В открывшемся окне подкорректируйте размеры изображения так, чтобы они не отличались сильно от высоты баннера (60). Нужно помнить, что не всегда уменьшение размеров благоприятно сказывается на качестве изображения. Слишком большие изображения (больше 10 Кбт) также лучше не использовать, так как они «утяжеляют» размер всего баннера в целом.

7. Выделите изображение с помощью инструмента «прямоугольное выделение» или через команду <Ctrl+A>и скопируйте с помощью пункта меню [Редактрование-Копировать] <Ctrl+С>.

8. Перейдите на первое изображение (фон) и выполните команду [Редактирование-Вставить] <Ctrl+V>.

Одной из важных особенностей Adobe Photoshop является то, что каждый новый элемент изображения рассматривается как слой. Обратите внимание, что при копировании изображения на фон, в Палитре слоев автоматически создался новый слой. Если палитра слоев отсутствует, ее нужно вывести с помощью пункта меню [Окно-Слои].

9. Если размеры рисунка по какой-то причине не устраивают, можно их еще раз подкорректировать. Для этого выделите изображение <Ctrl+Т> и, удерживая <Shift>, подгоните размер картинки под желаемый. Затем нажмите клавишу <Enter>.

10. Можно сместить картинку вправо или влево с помощью удерживания клавиши <Ctrl> или специального инструмента со стрелочками на панели Инструменты.

Обратившись к Палитре слоев можно создать еще один слой баннера. Для этого щелкните мышью на пиктограмме Создать новый слой формы. С помощью панели Инструменты можно создать геометрические фигуры и залить их различными цветами.

12. Теперь необходимо создать надпись. Для этого на панели Инструменты выберите инструмент Тексти в открывшемся поле создайте баннерный текст. Текст должен быть небольшим, емким и остроумным. Необходимо избегать штампов, попробовать написать что-нибудь нестандартное применительно к рекламируемому ресурсу. В открывшемся диалоговом окне Инструмент Печатинужновыбрать какой-либо шрифт, определить его размер и набрать текст. В появившейся панели Текствыберите цвет текста, предварительно выделив фрагмент.

Нажав <Ctrl+T>и удерживая клавишу <Shift>, можно подогнать размер текста под желаемый. Удерживая клавишу <Ctrl>, можно поместить текст в любую часть баннера.

13. Если вас устраивает общий вид баннера, то выполните команду Склеить слои.

14. Перед окончательным сохранением иногда бывает необходимо уточнить размер получившегося баннера. Для этого из меню Изображениевыберитекоманду Размер Изображения и в появившемся диалоговом окне уточните параметры. Размер баннера не должен превышать 10-15Кбт, иначе он будет слишком долго загружаться в Интернет.

15. Последним этапом является экспорт баннера в GIF.До настоящего времени изображение имело расширениеpsd.Из меню Файлвыберите команду [Файл- Экспорт GIF89a-Экспорт].В последних версиях Adobe Photoshop (выше 7.0) можно просто сохранить файл с расширением GIF.

Итак, баннер готов. Теперь возможно его размещение на интернет-сайте. с помощью тэга вставки изображения.

Лабораторная работа № 6

Тема: Создание динамического баннера

Цель: Создание динамического изображения с использованием готовых графических файлов. Приобретение навыков работы с программой Ulead Gif Animator

Задание:

Поскольку динамический баннер – это своего рода серия статических баннеров, первым этапом будет создание заготовок в каком-либо мощном графическом редакторе, например в Adobe Photoshop. Можно воспользоваться изображением, созданным в предыдущей работе. Затем необходимо выбрать программу–приложение для создания динамических изображений.

Одной из популярных программ-аниматоров является Ulead Gif Animator. Эту программу можно скачать из Интернет по адресу http://www.ulead.com.

Рассмотрим алгоритм создания анимированного изображения с помощью программы Ulead Gif Animator. Условимся, что имеются заранее созданные заготовки баннера с расширением .gif, а также несколько готовых gif – изображений, скачанных из Интернет, которые отвечают тематике нашего баннера.

1. Загрузите Ulead Gif Animator и выберете команду Открыть существующий Gif.Открываем изображение, которое будет являться первым кадром баннера. Следует обратить внимание на то, что изображение можно просмотреть в трех режимах: редактирования, показа, оптимизации. В режиме редактирования слева показаны миниатюры кадров, в самом начале - так называемый нулевой кадр.

2. Выбрав пункт меню Добавить новый кадр, откройте еще один заранее созданный файл. Теперь к миниатюрам кадров прибавилась еще одна. Кадры должны быть одного размера (в случае стандартного баннера – 468*60). Иногда добавляется изображение, немного превышающее стандартные размеры для создания «объемного» эффекта. В любом случае кадры не должны сильно отличаться по размеру, чтобы не нарушилась целостность изображения при показе.

3. С помощью режима просмотр просмотрите последовательную смену кадров. С помощью пункта Задержкаможно ускорить или замедлить смену кадров. Задержка измеряется в 1/100 с, т.е если выставить значение 300, то кадры будет сменять друг друга со скоростью 3 с. Чтобы баннер показывался циклически, на нулевом кадре необходимо поставить флажок в пункте Цикл.

3. Добавьте баннерный текст. Установите курсор на кадре,с которого будет начинаться появление текста и выберете пункт меню [Добавить баннерный текст].Укажите вид текста, цвет шрифта и прочие эффекты, определяемые закладками пункта меню. Обратите внимание на то, что даже самый простой текст добавляет множество кадров. Строка текста носит рекламный характер, поэтому текст должен быть кратким, остроумным, запоминающимся и, возможно, отражать какие-либо важные свойства рекламируемого продукта или содержать запоминающееся сравнение.

4. Просмотрите полученные кадры. Если необходимо поменять их последовательность, выделите миниатюру кадра и с помощью контекстного меню выполните нужные действия. Если какие-либо кадры покажутся лишними, их можно удалить, выделив предварительно миниатюру.

5. Перед окончательным сохранением выполните оптимизацию полученного баннера с помощью режима Оптимизацияи выполните требования Мастера. Оптимизация служит для уменьшения объема баннера с помощью сглаживания палитры цветов и удаления лишних переходов.

6. Разместите готовый баннер на веб-странице. Воспользуйтесь тэгом <img src=”mybanner.gif”>, где mybanner.gif - имя файла-баннера. Обычно стандартный баннер помещается в верху по центру на главной странице, однако возможны и другие варианты размещения.

Лабораторная работа № 7

Тема: Создание форм.

Цель:Создание форм различных типов. Ознакомление с формами опросов в Internet с последующей отправкой данных.

Задание 1:

Создайте текстовое поле.

Простейшее однострочное текстовое поле может понадобиться для введения пользователем каких-либо дополнительных сведений. Для создания текстового поля параметру TYPE тэга <INPUT>, нужно присвоить значение TEXT. Кроме параметра TYPE, будет нелишним напомнить для текстового поля такие параметры как NAME - имя поля, необходимое для идентификации и SIZE - ширина поля, задаваемая в пикселях.

Пример текстового поля шириной 30 пикселей, где предполагается вводить адрес почтового ящика:

Введите имя вашего почтового ящика: <INPUT TYPE= text NAME=qwerty SIZE=30>

В окне браузера получаем:

Введите имя вашего почтового ящика:

Пример иного расположения текстового поля.

<INPUT TYPE=text NAME=qwerty SIZE=30> - здесь укажите свой почтовый адрес.

Получаем:

- здесь укажите свой почтовый адрес.

Задание 2:

Создайте форму типа "флажок".

Для создания «флажков» параметру TYPE тэга <INPUT>нужно присвоить значение CHECKBOX. Кроме этого параметра, нужно указать имя "флажка" с помощью параметра NAME.

Пример:

Поставьте галочку <INPUT TYPE=checkbox NAME=flag1>, если вы используете русскую версию Outlook Express.

Получаем:

Поставьте галочку , если вы используете русскую версию Outlook Express.

Задание 3:

Создайте форму типа «переключатель» («радиокнопка»).

Переключатель состоит из нескольких элементов, среди которых можно выбрать только один. Поэтому важно правильно задать имена для переключателей. Для создания одного элемента переключателя параметру TYPE тэга <INPUT> нужно присвоить значение RADIO. Кроме этого, для каждого элемента нужно будет обязательно задать параметр NAME - имя всего переключателя (состоящего из нескольких элементов) и параметр VALUE - значение данного конкретного элемента переключателя.

Пример:

Требуется создать переключатель из 2-х взаимоисключающих элементов, например, задать голосующему вопрос, смотрит ли он MTV, и получить от него ответ - "Да" или "Нет". Присвоим этому переключателю имя mtvprogram, а его элементам - значения соответственно "Yes" и "No". Тогда запись переключателя в HTML будет выглядеть так:

Смотрите ли вы канал MTV?
<INPUT TYPE=radio NAME= mtvprogram VALUE=Yes> Да
<INPUT TYPE=radio NAME= mtvprogram VALUE=No> Нет

и получим следующее в окне браузера

Смотрите ли вы канал MTV? Да Нет

Тот же пример с переносом строк.

Смотрите ли вы канал MTV?
<INPUT TYPE=radio NAME= mtvprogram VALUE=Yes> Да<br>
<INPUT TYPE=radio NAME= mtvprogram VALUE=No> Нет<br>

Получаем:

Смотрите ли вы канал MTV?
Да
Нет

Задание 4:

Обычные кнопки задаются, подобно другим элементам формы, путем присвоения параметру TYPE тэга <INPUT> значения BUTTON. Кроме этого, используются параметры SIZE- ширина кнопки, NAME - имя кнопки и VALUE - надпись на кнопке.

Для опросной формы используются специальные кнопки. Одна из них предназначена для окончания работы с формой и выполнения ею тех действий, которые заданы в параметрах METHOD и ACTION тэга <FORM>. Ее обычно нажимают после того, как форма заполнена и ее необходимо отправить организатору опроса. Эта кнопка задается присвоением параметру TYPE тэга <INPUT> значения SUBMIT (а не BUTTON!). Все остальное - то же самое, за тем исключением, что параметр NAMEне нужен.

Другая кнопка - тоже специальная - нужна для того, чтобы вернуть форму к первоначальному состоянию, очистить от всех данных. Параметр NAME также не нужен.

Примеры двух кнопок, обычно размещаемых внизу формы:

<INPUT TYPE=submit SIZE=15 VALUE=Выполнить> <INPUT TYPE=reset IZE=15 VALUE=Отменить>

Получаем

При нажатии на "Выполнить" форма сформирует письмо и попытается отправить его адресату (указанному с помощью параметра ACTION тэга <FORM>). А если нажать на кнопку "Отменить", то форма сбросит все данные, и их придется вводить сначала.

Пример опросной формы.

Форма будет содержать следующие компоненты: текстовые поля для ввода имени пользователя и его почтового ящика; переключатель с 2-мя элементами для выбора версии Outlook Express); флажок, который надо установить при использовании русской версии; кнопки отправления формы сброса формы.

<html>
<body>
<p align=left>Опрос пользователей MS Outlook Express.</p>

<form name=Forma method=Post action=mailto:ivanovserg@mail.ru?subject=Opros nctype=text/plain>
<input type=text name=imja size=30> - ваше имя (псевдоним)<br>
<input type=text name=email size=30> - адрес вашего почтового ящика<br> <br>
Я использую:<br>
<input type=radio name=version value=OE4> Outlook Express 4<br>
<input type=radio name=version value=OE5> Outlook Express 5<br>
<input type=checkbox name=russian> (русская версия)<br><br>
<input type=submit size=15 value=Отправить> <input type=reset ize=15 value=Отменить>
</form>
</body>
</html>

Получаем:

Опрос пользователей MS Outlook Express.

- ваше имя (псевдоним)
- адрес вашего почтового ящика

Я использую:
Outlook Express 4
Outlook Express 5
ü (русская версия)

Допустим, вас зовут Вася Петров, ваш электронный адрес vaspetrov@mail.ru и вы используете русскую версию OЕ 4.0. Тогда после нажатия кнопки "Отправить" форма сгенерирует, а организатор опроса (адрес электронной почты ivanovserg@mail.ru) получит следующие данные:

imja=Вася Петров
email= vaspetrov@mail.ru
version=OE4
russian=on

Лабораторная работа № 8

Тема: Элементы Java_Script.

Цель: Изучение приемов встраивания в HNML-код элементов Java_Script.

Java_Script - это язык программирования, используемый в составе html страниц, с целью увеличения функциональности сайта. Java_Script был разработан фирмой Netscape в сотрудничестве с Sun Microsystems на базе языка Sun's Java. Java скрипты выполняются на стороне клиента, хотя изначально Liveware - прародитель java script, являлся серверным языком программирования. С помощью Java_Script можно создавать красивые и интерактивные веб страницы, что невозможно сделать стандартными тегами html. Скрипты выполняются в результате каких-либо событий, инициированных действиями пользователя. Это может быть - наведение курсора, клик и т.д.

Отметим, что Java_Script и Java - это два разных языка программирования. Java - это объектно-ориентированный язык программирования, который запускается только при помощи компилятора и вспомогательных файлов. Такие программы могут работать либо как законченные приложения, либо как встроенные апплеты. Java скрипты хотя и встроены в html, все же хранятся на клиентском компьютере как отдельные файлы.

Итак, мы выяснили, что Java скрипты размещаются внутри html страницы и не могу существовать как отдельные программа, а функционируют только будучи запущенными в браузерах. Это и есть основная разница между языком Java_Script и любым другим языком программирования.

Таким образом, создание скриптов Java_Script, требует наличия любого текстового редактора и подходящего браузера. Чтобы запустить скрипт, написанный на языке Java_Script, понадобится только браузер, способный обрабатывать скрипты. Например, Netscape Navigator (начиная с версии 2.0) или Microsoft Internet Explorer (начиная с версии 3.0). С тех пор, как оба эти браузера получили самое широкое распространение, практически все пользователи сети получили возможность работать с Java скриптами, которые, несомненно, улучшают как внешний вид, так и функциональность веб страниц.

Ниже приведены распространенные скрипты, которые можно встроить в имеющуюся страницу для придания ей более интересного вида.

Пример скрипта, формирующего простые часы в окне браузера.

<html>

<head>

<title>Clock</title>

<script language="JavaScript">

function clock_form()

{

day=new Date()

clock_f=day.getHours()+":"+day.getMinutes()+":"+day.getSeconds()

document.form.f_clock.value=clock_f

id=setTimeout("clock_form()",100)

}

</script>

</head>

<body bgcolor="ffffff" onLoad="clock_form()">

<center>

<form name=form metod="get">

<input name=f_clock maxlength=8 size=8>

</form>

</center>

</body>

</html>

Пример скрипта, формирующего простые часы в строке состояния.

<html>

<head>

<title>Clock in status bar</title>

<script language="JavaScript">

function clock_status()

{

window.setTimeout("clock_status()",100);

today=new Date();

self.status=today.toString();

}

</script>

</head>

<body background="ffffff" onLoad="clock_status()">

</body>

</html>

Пример скрипта, формирующего простые часы в окне браузера (цифры сиреневого цвета).

<html>

<title>http://bjs.stsland.ru/ - База Ява Скриптов (bjs)</title>

<BODY onLoad="loadclock()">

<CENTER>

<span id=tick2>

</span>

<script>

<!--

function show2(){

var Digital=new Date()

var hours=Digital.getHours()

var minutes=Digital.getMinutes()

var seconds=Digital.getSeconds()

var dn="AM"

if (hours>12){

dn="PM"

hours=hours-12

}

if (hours==0)

hours=12

if (minutes<=9)

minutes="0"+minutes

if (seconds<=9)

seconds="0"+seconds

var ctime="<b><font face='Verdana' color='#8000FF'>"+hours+":"+minutes+":"+seconds+" "+dn+"</font></b>"

if (!document.all)

document.write(ctime)

else

tick2.innerHTML=ctime

}

function loadclock(){

if (document.all)

setInterval("show2()",1000)

}

if (!document.all)

show2()

//-->

</script>

</center>

</body>

Пример скрипта, скрывающего картинку при нажатии мыши.

</html>

<html>

<head>

</head>

<script language="JavaScript">

<!-- анализируется версия броузера:-->

browserName=navigator.appName;

browserVer=parseInt(navigator.appVersion);

if (browserName=="Netscape" && browserVer >= 3) version="n3";

else version="n2";

if (version=="n3") {

graph1green=new Image(20,20);

graph1green.src="lgcit.gif";

graph1red=new Image(20,20);

graph1red.src="logo.gif";

}

function graphON(graphName) {

if (version=="n3") {

green_red=eval(graphName + "green.src");

document.images[graphName].src=green_red;

}

}

function graphOFF(graphName) {

if (version=="n3") {

red_green=eval(graphName + "red.src");

document.images[graphName].src=red_green;

}

}

</script>

<body bgcolor=ffffff>

<a href="http://www.cit-forum.com" onMouseOver="graphON('graph1')"

onMouseOut="graphOFF('graph1')"><img src="logo.gif" name="graph1" border=0></a>

</body>

</html>

Пример скрипта, перемещающего текст за курсором мыши

<title>http://bjs.stsland.ru/ - База Ява Скриптов (bjs)</title>

<script>

var x,y

var step=20

var flag=0

var message="JavaScripts " // Текст около мыши (обязательно после последней буквы пробел)

message=message.split("")

var xpos=new Array()

for (i=0;i<=message.length-1;i++) {

xpos[i]=-50

}

var ypos=new Array()

for (i=0;i<=message.length-1;i++) {

ypos[i]=-50

}

function handlerMM(e){

x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX

y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY

flag=1

}

function makesnake() {

if (flag==1 && document.all) {

for (i=message.length-1; i>=1; i--) {

xpos[i]=xpos[i-1]+step

ypos[i]=ypos[i-1]

}

xpos[0]=x+step

ypos[0]=y

for (i=0; i<message.length-1; i++) {

var thisspan = eval("span"+(i)+".style")

thisspan.posLeft=xpos[i]

thisspan.posTop=ypos[i]

}

}

else if (flag==1 && document.layers) {

for (i=message.length-1; i>=1; i--) {

xpos[i]=xpos[i-1]+step

ypos[i]=ypos[i-1]

}

xpos[0]=x+step

ypos[0]=y

for (i=0; i<message.length-1; i++) {

var thisspan = eval("document.span"+i)

thisspan.left=xpos[i]

thisspan.top=ypos[i]

}

}

var timer=setTimeout("makesnake()",30)

}

</script>

<script>

<!-- Beginning of JavaScript -

for (i=0;i<=message.length-1;i++) {

document.write("<span id='span"+i+"' class='spanstyle'>")

document.write(message[i])

document.write("</span>")

}

if (document.layers){

document.captureEvents(Event.MOUSEMOVE);

}

document.onmousemove = handlerMM;

// - End of JavaScript - -->

</script>

<style>

.spanstyle {

position:absolute;

visibility:visible;

top:-50px;

font-size:10pt;

font-family:Verdana;

font-weight:bold;

color:white;

}

</style>

</head>

<body onLoad="makesnake()" style="width:100%;overflow-x:hidden;overflow-y:scroll" bgcolor=#333399>

<center><font color=#fffccc size=3 face=verdana>Надпись за курсором мыши

Задание1:

Создайте окно в Java_Script, закрывающееся при нажатии мыши. Для создания окна наберите приведенный ниже HTML-код.

<html>

<head>

<title>Окно 1 </title>

<script language="JavaScript">

<!—

Alert (“Hello World!”)

//-->

</script>

</head>

<body>

</body>

</html>

Задание2:

Встройте в одну из имеющихся страниц простые часы, а в другую – часы в строке состояния.

Литература

1. Холмогоров В. Интернет-маркетинг. Краткий курс. Изд. 2-е издание. – С-Пб., Харьков, Минск : Питер, 2002.

2. Успенский И. Интернет как инструмент маркетинга. - С-Пб :БХВ-Петербург, 2001.

3. Информационные технологии в маркетинге. Учебник для ВУЗов. /Под ред. Г.А.Титоренко. – М : ЮНИТИ-ДАНА, 2000.

4. Уилсон Р.Планирование-стратегии Интернет-маркетинга. – М:ИД Гребенникова, 2003.

5. Энциклопедия Интернет. /Под ред. Л.Мелиховой. Изд. 2-е. – С-Пб., Харьков, Минск : Питер, 2001.

6. Бранденбау Б. JavaScript. Сборник рецептов.— С-Пб., Москва, Харьков, Минск: Питер, 2001.

7. Галкин С.Е. Бизнес в Интернет. – М: «Центр», 1998

8. Винс И. Как сделать бизнес в Internet, 3-е изд./пер. с англ. Под ред.

9. Н. М. Макаровой. – М: Диалектика, 1998.

10. Леонтьев Б. Web-дизайн. Хитрости, тонкости и секреты. – М : Майор, 2001.

Приложение 1. Таблица значений тэгов.

Тэг

Назначение и атрибуты

A

ссылка
href="другой_документ.html" - путь к документу
target=_blank - открывает ссылку в новом окне
name="anchor1" - имя закладки
title="Ваша подсказка" - подсказка к ссылке (текстовой)

AREA

определяет геометрические области внутри карты и ссылки для них
shape="rect" (circle, poly) - тип области
coords="x1,y1,..." - координаты области
alt="описание" - описание, подсказка
href="document.html" - ссылка

B

выделение текста полужирным шрифтом

BIG

выделение текста более крупным шрифтом, чем основной

BODY

тело документа, обязательный тэг
text="#cc0000" - задает цвет текста всего документа
bgcolor="#000000" - задает цвет фона документа
background="картинка.jpg" - задает фоновую картинку
link="#ff9999" - задает цвет ссылки
alink="#ff9999" - задает цвет активной (нажатой) ссылки
vlink="#ff9999" - задает цвет посещенной ссылки
topmargin="0" - ширина верхнего и нижнего полей документа для IE
leftmargin="0" - ширина левого и правого полей документа для IE
marginheight="0" - ширина верхнего и нижнего полей документа для NN
marginwidth="0" - ширина левого и правого полей документа для NN

BR (непарный)

принудительный перенос текста на другую строку
clear="all" (left, right) - завершение обтекания текстом объекта

CENTER

центрирование текста и объектов

DIV

выравнивание текста и объектов
align="center" - центрирование
align="right" - выравнивание по правому краю документа
align="left" - выравнивание по левому краю документа
align="justify" - выравнивание по обоим краям документа

EMBED

внедрение объектов в документ
src="mult.swf" - указывает местоположение объекта
type="application/x-shockwave-flash" - тип подгружаемого объекта
width="500" - ширина объекта
height="100" - высота объекта
align="left" - выравнивание
vspace="10" - расстояние от объекта до текста по вертикали
hspace="30" - расстояние от объекта до текста по горизонтали
hidden=”true” (false) - отображать указанный объект (да/нет)
pluginspace=”http://…” - путь к плагину

FONT

управление шрифтами
color="#cc0000 - задает цвет для блока текста
size="+0" - задает размер шрифта текста (от -2 до +4)
face="Arial" - задает определенный тип шрифта

FRAME

определяет содержимое и вид одного фрейма
marginheight="0" - ширина верхнего и нижнего полей фрэйма
marginwidth="0" - ширину левого и правого полей фрэйма
scrolling="yes" (no, auto) - линейка прокрутки
name="window-1" - имя фрейма
noresize - запретить посетителю менять размеры фреймов

FRAMESET

определяет макет основного окна в виде прямоугольных пространств
rows="100,200,*" - определяет расположение горизонтальных фреймов
cols="10%,20%,70%" - определяет расположение вертикальных фреймов
border - определяет ширину рамок фрэймов в пикселах

Hx

Заголовки различных уровней. Самый крупный – Н1 (H1, H2, H3, H4, H5, H6)

HEAD

обязательный тэг

HR (непарный)

линия
align="right" (center или left)
width="30%" (ширина линии в процентах)
size="6" (толщина линии)
NoShade (отмена объемности)
color="cc0000" (цвет линии, только в IE)

HTML

указывает на тип документа, обязательный тэг

I

выделение текста курсивом

IFRAME

"плавающий" фрейм
src="ancorpri.html" - путь к подгружаемому документу
width="300" - вширина "плавающего" фрейма
height="250" - высота "плавающего" фрейма
scrolling="auto" (yes, no) - полоса прокрутки
frameborder="1" (0) - отображать или нет границы фрейма

IMG

подгрузка изображений (картинок)
Border="5" - рамка покруг картинки
width="500" - ширина картинки
height="100" - высота картинки
align="left" - расположение текста по отношению к картинке
vspace="10" - расстояние от картинки до текста по вертикали
hspace="30" - расстояние от картинки до текста по горизонтали
alt="описание" - описание картинки
usemap="#karta1" - ссылка на карту

LI

определяет элемент списка

LINK

вводит в документ внешние таблицы стилей
href=”http://…” – пусть к файлу со стилями
rel="stylesheet" – указывает, является ли подгружаемые таблицы стилей постоянными, предпочитаемыми или альтернативными. В нашем случае мы установили постоянные таблицы стилей для документа.
type="text/css" – тип содержимого, подгружаемой информации.

MAP

определяет клиентскую навигационную карту
name="karta1" - имя карты

MARQUEE

бегущая строка текста (только IE)
bgcolor - цвет фона бегущей строки
height - высота строки
width - ширина строки
behavior="scroll" обычная прокрутка
behavior="slide" - строка пробегает до края и останавливается
behavior="alternate" - строка будет двигаться от края к краю
scrollamount="1" (1-10) - скорость движения строки
direction="left" (right, up, down) - движение влево (вправо, вверх, вниз)

OL

упорядоченные списки
type="I" (i, 1, a, A) - стиль элемента списка

OBJECT

общее внедрение объектов в документ
data="sobaka.jpg" - указывает местоположение данных для объекта
type="image/jpeg" - тип содержимого для данных, указанных в data (тип объекта)

P

Акбзац, параграф, выравнивание текста и объектов
align="center" - центрирование
align="right" - выравнивание по правому краю документа
align="left" - выравнивание по левому краю документа
align="justify" - выравнивание по обоим краям документа

PRE

форматированный текст

S

перечеркнутый текст

SCRIPT

внедрение скриптов в документ
type="text/javascript" - тип содержимого / язык скрипта src="http://site.ru/put_k_sciptu/" - путь к внедряемому скрипту

SMALL

выделение текста более мелким шрифтом, чем основной

STRIKE

перечеркнутый текст

STYLE

информация о стиле в заголовке
type="text/css" - тип содержимого

SUB

нижний индекс

SUP

верхний индекс

TABLE

таблица
bgcolor="#FFCC33" - цвет фона таблицы (строки, ячейки)
background="картинка.gif" - задает фоновый рисунок
width="50" или width="50%"- ширина таблицы
height="45" или height="45%"- высота таблицы
cellspacing="5" - расстояние между ячейками
cellpadding="5" - расстояние внутри ячеек
border="3" - задает толщину рамки таблицы
bordercolor="#000000" - задает цвет рамки таблицы

TD

ячейка данных таблицы
bgcolor="#FFCC33" - цвет фона
background="картинка.gif" - задает фоновый рисунок
width="50" или width="50%"- ширина
height="45" или height="45%"- высота
align="center" (right, left) - горизонтальное выравнивание содержимого
valign="middle" (top, bottom) - вертикальное выравнивание содержимого
colspan="2" – объединение двух ячеек по столбцам
rowspan="2" – объединене двух ячеек по строкам

cellspacing="5" - расстояние между ячейками

TITLE

заголовок документа (отображается в строке броузера)

TR

строка таблицы
bgcolor="#FFCC33" - цвет фона
background="картинка.gif" - задает фоновый рисунок
width="50" или width="50%"- ширина
height="45" или height="45%"- высота

T

шрифт пишущей машинки (моноширинный)

U

подчеркнутый текст

UL

неупорядоченные списки
type="disk" (circle, square) - стиль элемента списка

Дата добавления: 2014-12-09; просмотров: 418; Нарушение авторских прав

Мы поможем в написании ваших работ!