Формы

Рассмотрим на примере формы ввода товара. В 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>&nbsp;</td>

                   </tr>

                   <tr>

                            <td>Описание товара:</td>

                            <td><textarea cols="48" name="comment" rows="10"></textarea></td>

                   </tr>

                   <tr>

                            <td>&nbsp;</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>&nbsp;</p>

<p>&nbsp;</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> &lt;</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>&nbsp;</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>&nbsp;</p>

<p>&nbsp;</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>&nbsp;</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;">&nbsp;</div>

Количество блоков <div> может быть любым. При уменьшении окна браузера блоки будут автоматически переходить на новую строку