Рассмотрим на примере формы ввода товара. В Html или на страницу в Панель Html кодов в место, где вы хотите иметь форму вводим:
<form name="forma1">
<table align="left" background-color="#9cdcea" border="0" cellspacing="0" outline="2px solid #000080" width="300">
<tbody>
<tr>
<td>
<p>Фото товара:</p>
</td>
<td><input name="foto" type="file" /></td>
</tr>
<tr>
<td>Размер:</td>
<td><input name="razm" type="text" /></td>
</tr>
<tr>
<td>Цена:</td>
<td><input name="zena" type="text" /></td>
<td> </td>
</tr>
<tr>
<td>Описание товара:</td>
<td><textarea cols="48" name="comment" rows="10"></textarea></td>
</tr>
<tr>
<td> </td>
<td><button type="submit">Добавить товар</button></td>
</tr>
</tbody>
</table>
</form>
В результате получим следующую форму:
Пример создания кнопки для переходана страницу ( в моем случае вставлено в верхний контейнер, т.е. в горизонтальное меню).
<li>
<form method="LINK" action="http://magazinalis.ucoz.net/index/dobavit_tovar/0-10">
<button type="submit" style="background-color: #b57fd1">
<span style="color:#ffffff;">Добавить товар</span></button> </form> </li>), где
action="http://magazinalis.ucoz.net/index/dobavit_tovar/0-10"> - адрес страницы, на которую надо совершить переход
<button type="submit" (определяет, что тип поля кнопка)
style="background-color: #b57fd1"> (определяет цвет кнопки)
<span style="color:#ffffff;">Добавить товар</span></button> (определяет надпись и цвет надписи кнопки)
в результате получим:
Вставка фото с обтеканием текстом
Поместим нужное нам фото в файловый менеджер.
Пусть это будет файл baranki.gif. Нажмем кнопку со стрелкой, откроется ссылка на это фото
Подводим курсор к ссылке и нажимаем правую кнопку мыши.
Нажимаем копировать.
Переходим в режим Редактор страниц>Управление страницами сайта> Панель HTML кодов
и вставляет в то место страницы, где мы хотим видеть фото
<div style="float:left; margin-top: 0px; margin-right: 20px; margin-bottom: 5px; margin-left: 30px; "><img alt="" src="http://rezeptyotmariny.ru/img/baranki.gif " style="width: 100px; height: 67px;" /></div>,
Где http://rezeptyotmariny.ru/img/baranki.gif – скопированная ссылка на фото.
В итоге получаем рисунок обтекаемый текстом
- Яйцо 1 шт.
- Йогурт (кефир, молоко, сметана) 1ст.л.
- Растительное (или любое другое) масло 1ст.л.
- Соль 1/4ч.л.
- Сахар 2ст.л.
- Сода – ¼ ч.л.
- Мука
Горизонтальная галерея фотографий
Пусть мы хотим получить горизонтальную галерею фотографий со ссылками на их описание. Для этого мы используем строчно-блочный элемент.
Рассмотрим на таком примере.
Для этого вставим в Html в то место, где мы хотим иметь такую строку блоков:
<style type="text/css">
/*Параметры блока*/
.photo { background: #d9dabb; /* Цвет фона */
width: 150px; /* Ширина */
height:170px;
margin: 0 10px 10px 0; /* Отступы */
padding: 10px 0; /* Поля сверху и снизу */
text-align: center; /* Выравнивание по центру */
display: inline-block; /* Строчно-блочный элемент */
vertical-align: top; /* Выравнивание по верху */ }
/*Параметры фото*/
.photo img { border: 2px solid #8b8e4b;
width: 130px; /* Параметры рамки */ }
/*Параметры строки*/
.photo p { margin: 0; /* Отступы */}
</style>
<div class="photo">
<p><a href=" http://rezeptyotmariny.ru/index/salaty/0-8/#ct15"> /*ссылка на рецепт*/
<img alt="" src=" http://rezeptyotmariny.ru/img/salat-kapusta-perec.gif" /*адрес фото*/
style="width:120px; height:100px;" /></a> </p>
<p> </p>
<p><a href=" http://rezeptyotmariny.ru/index/salaty/0-8/#ct15
"><span style="color:#0000cd;">Салат витаминный</span></a></p>
</div>
<div class="photo">
<p><a href=" http://rezeptyotmariny.ru/index/supy/0-11#cy16
"><img alt="" src=" http://rezeptyotmariny.ru/img1/sup-pjure-s-ovoshhami.gif" style="width:120px; height:100px;" /></a> <</p>
<p><a href=" http://rezeptyotmariny.ru/index/supy/0-11#cy16
"><span style="color:#0000cd;">Суп пюре с овощами</span></a></p>
</div>
<div class="photo">
<p><a href=" http://rezeptyotmariny.ru/index/vtorye_bljuda2/0-36#bt47 "><img alt="" src=" http://rezeptyotmariny.ru/img/rybnyj-khlebec.gif " style="width:120px; height:100px;" /></a></p>
<p> </p>
<p><a href=" http://rezeptyotmariny.ru/index/vtorye_bljuda2/0-36#bt47 "><span style="color:#0000cd;">Рыбный хлебец</span></a></p>
</div>
<div class="photo">
<p><a href=" http://rezeptyotmariny.ru/index/vypechka/0-9#b17"><img alt="" src=" http://rezeptyotmariny.ru/img/ryba-v-kljare.gif" style="width:120px; height:100px;" /></a> </p>
<p> </p>
<p><a href=" http://rezeptyotmariny.ru/index/vypechka/0-9#b17"><span style="color:#0000cd;">Рыба в кляре</span></a></p>
</div>
<div class="photo">
<p><a href=" http://rezeptyotmariny.ru/index/napitki/0-10#n17"><img alt="" src=" http://rezeptyotmariny.ru/img1/napitok-klubnichnyj.gif" style="width:120px; height:100px;" /></a></p>
<p> </p>
<p><a href=" http://rezeptyotmariny.ru/index/napitki/0-10#n17"><span style="color:#0000cd;">Напиток клубничный</span></a></p>
</div>
<div style="float: left; margin: 0px 100% 5px 30px;"> </div>
Количество блоков <div> может быть любым. При уменьшении окна браузера блоки будут автоматически переходить на новую строку