Добавляем картинки на страницу сайта .
Прежде всего на рабочем столе сделайте папку с названием image . В эту папку будете помещять все картинки для вашего сайта .
Теперь с помощью мыши переместите папку image в папку site .
Использование картинки в качестве фона для страницы.
Делаем шапку сайта.
Нажмите правой кнопкой мыши по этой картинке затем Сохранить изображение далее нажимаем Рабочий стол и
Сохранить .Скопированную картинку с рабочего стола поместите в папку image .
Теперь давайте посмотрим что у вас должно получиться - в папке site дважды нажимаем по файлу index.html
Открывается страница и вы видете что на верху появилась картинка . Посмотрите пример Нажав сюда
Рассмотрим как это делать на примере:
Нам нужно в HTML-код добавть тег background он делает нашу картинку фоном. Все дополнения делайте в Блокноте
пример :
<td valign="top"width="1280"background="image/header.
jpg" border="2"cellpadding="2" cellspacing="2">здесь будет шапка сайта</td>
где :
background - делает картинку фоном
image - это папка где расположены картинки для сайта
header - это название самой картинки .
<!DOCTUPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN ">
<html>
<head>
<title>Название Страницы</title>
</head >
<body>
<center>
<table width="1280" height="240" border="2" cellpadding="2" cellspacing="2">
<tr>
<td valign="top"width="1280"background="image/
header.jpg" border="2"cellpadding="2" cellspacing="2">десь будет шапка сайта</td>
</tr>
</table>
<table width="1280" height="380" border="2" cellpadding="2" cellspacing="2">
<tr>
<td valign="top" width="240"border="2">здесь будет левое меню</td>
<td valign="top" width="740"border="2">здесь будет содержание страницы </td>
<td valign="top" width="300"border="2">здесь будет правое меню </td>
</tr>
<table>
<table width="1280" height="80" border="2" cellpadding="2" cellspacing="2">
<tr>
<td valign="top">подвал страницы </td>
</tr>
</table>
</center>
</body>
</html>
Делаем фон страницы с помощью цвета .
Добавляем цвет в качестве фона в левую часть меню
Что бы сделать страницу (или участок) сайта желаемого цвета - нужно добавить тег bgcolor,
Пример : в строке
<td valign="top" width="240"border="2">здесь будет левое меню</td>
пишем bgcolor="ddb464"
<td bgcolor="ddb464" valign="top" width="240" border="2"></td>
Посмотрите пример как должно получиться Нажав сюда
<!DOCTUPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN ">
<html>
<head>
<title>Название Страницы</title>
</head >
<body>
<center>
<table width="1280" height="240" border="2" cellpadding="2" cellspacing="2">
<tr>
<td valign="top"width="1280" border="2"cellpadding="2" cellspacing="2">здесь будет шапка сайта</td>
</tr>
</table>
<table width="1280" height="380" border="2" cellpadding="2" cellspacing="2">
<tr>
<td bgcolor="ddb464" valign="top" width="240" border="2">здесь будет левое меню</td>
<td valign="top" width="740"border="2">здесь будет содержание страницы </td>
<td valign="top" width="300"border="2">здесь будет правое меню </td>
</tr>
<table>
<table width="1280" height="80" border="2" cellpadding="2" cellspacing="2">
<tr>
<td valign="top">подвал страницы </td>
</tr>
</table>
</center>
</body>
</html>
Теперь сделаем фон для нижней части сайта.
Встроке:<td valign="top">подвал страницы </td>
нужно добавить bgcolor="a8b795"
пример:
<td bgcolor="a8b795" valign="top">подвал страницы </td>
Посмотрите пример как должно получиться Нажав сюда
<!DOCTUPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN ">
<html>
<head>
<title>Название Страницы</title>
</head >
<body>
<center>
<table width="1280" height="240" border="2" cellpadding="2" cellspacing="2">
<tr>
<td valign="top"width="1280" border="2"cellpadding="2" cellspacing="2">десь будет шапка сайта</td>
</tr>
</table>
<table width="1280" height="380" border="2" cellpadding="2" cellspacing="2">
<tr>
<td valign="top" width="240" border="2">здесь будет левое меню</td>
<td valign="top" width="740"border="2"> здесь будет содержание страницы</td>
<td valign="top" width="300"border="2">здесь будет правое меню </td>
</tr>
<table>
<table width="1280" height="80" border="2" cellpadding="2" cellspacing="2">
<tr>
<td bgcolor="a8b795" valign="top">подвал страницы </td>
</tr>
</table>
</center>
</body>
</html>
Добавляем картинки на сайт .
В строке :<td valign="top" width="740"border="2">здесь будет содержание страницы
</td>
в место- здесь будет содержимое страницы -
нужно написать <img src="
image/belka.JPG" width="280" height="240"</p>
пример:
<td valign="top" width="740"border="2"><img src="image/
belka.JPG" width="280" height="240"</p> </td>
где :
image - это папка для размещения картинок .
belka - это имя картинки .
width="280" - это ширина картинки.
height="240" -это высота картинки.
как пример используйте эту картинку скопируйте её и поместите в папку
image .
Посмотрите пример как должно получиться Нажав сюда
<!DOCTUPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN ">
<html>
<head>
<title>Название Страницы</title>
</head >
<body>
<center>
<table width="1280" height="240" border="2" cellpadding="2" cellspacing="2">
<tr>
<td valign="top"width="1280" border="2"cellpadding="2" cellspacing="2">здесь будет шапка сайта
</td>
</tr>
</table>
<table width="1280" height="380" border="2" cellpadding="2" cellspacing="2">
<tr>
<td valign="top" width="240"border="2">здесь будет левое меню</td>
<td valign="top" width="740"border="2"><img src="image/
belka.JPG" width="220" height="180"</p> </td>
<td valign="top" width="300"border="2">здесь будет правое меню </td>
</tr>
<table>
<table width="1280" height="80" border="2" cellpadding="2" cellspacing="2">
<tr>
<td valign="top">подвал страницы </td>
</tr>
</table>
</center>
</body>
</html>
Замена картинки при наведении курсора мыши .
Если вы хотите сдеать чтобы при наведении курсора на картинку она менялась на другую - то скопируйте и установите этот HTML-код в нужное место
размеры можете ставить свои
<a onMouseOver="document.doc.src=' image/white.jpg'"onMouseOut="document.doc.src='
image/red.jpg'">
<img src="image/red.jpg" width="342" height="206" border="0" name="doc"a></a>
|
где :
image - это папка для размещения картинок .
white - это имя картинки .
red -это имя картинки
width="342" - это ширина картинки .
height="206" - это высота картинки .
Рассмотрим на примере этих двух картинок
наведите курсор на картинку что бы посмотреть результат
Увеличение картинки при наведении курсора мыши .
Если вы хотите сдеать чтобы при наведении курсора на картинку она увеличивалась - то скопируйте и установите этот HTML-код в нужное место
размеры можете ставить свои
|
<a href='image/tigr.jpg'class='popup'><img src='image/tigr.jpg'alt='УВЕЛИЧИТЬ' width='110'height='120'></a>
|
нажмите на картинку что бы посмотреть результат
где :
image - это папка для размещения картинок .
tigr - это имя картинки .
width='110'height='120'-это ширина и высота малой картинки.
Сделать картинку ссылкой
при нажатии на картинку открывается другая страница или сайт.
|
<a href="http://gorod-na.narod.ru/index.html"><img src="image/ms.jpg" width="400" height="225"> |
где:
http://gorod-na.narod.ru/index.html - ссылка (то что будет открываться при нажатии на картинку) ставте свою
image - это папка с картинками
ms - это картинка
нажмите на картинку
Делаем плавное открытие и закрытие картинки и видео
нажимете на киртинки и посмотрите работу видео плеера.
Если вы хотите сделать у себя на сайте , что бы картинки открывались и закрывались подобным образам то прочитайте здесь этот материал..
на прежнию
далее
на главную
|
