PHP уроки
ПРОСТО самая лучшая обучалка PHP!
  • Студия LPHPRU
  • Уроки PHP
  • Контакты
  • Помощь
Меню
  • PHP - с чего начать?
  • Уроки PHP
  • Функции PHP
  • Массивы
  • Denwer
  • MySQL
  • Информация
  • Dreamweaver уроки
  • JQuery уроки
  • Галерея
Календарь
Апрель (2021)
ПнВтСрЧтПтСбВс
   1234
567891011
12131415161718
19202122232425
2627282930  
В продаже

  • Что нового?
    • Тест №2
    • Тест №1 для разработчиков
    • PHP 5.6 RC1
    • SQL. Как cкопировать данные одной колонки в другую, в той же таблице
    • GRUB изменить порядок загрузки OS в Linux
    • SSH - вход на сервер без ввода пароля
    • PhpMyAdmin - проблема с загрузкой большого файла на сервер

  • Комментарии
    • тут нечего не понятно
    • Может уже пора на WebStorm переходит...
    • Здравствуйте. 10 лет пользуюсь др...
    • Была такая проблема, решалась пе...
    • Возможно с течением времени этот...

  • TOP-5
    • Метод POST (2940401)
    • Привет, МИР! (907353)
    • Метод GET (662403)
    • Операторы (602295)
    • Firefox уже запущен, но не отвечает... (347602)

Передвигаем картинку. Двигаем рисунок.

Главная » Уроки PHP » Передвигаем картинку. Двигаем рисунок.
PHP урок № 171
На мой взгляд самый простой способ разместить картинку в нужном месте странице - это использовать CSS.
CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — технология описания внешнего вида документа, написанного языком разметки. Преимущественно используется как средство оформления веб-страниц в формате HTML и XHTML, но может применяться с любыми видами документов в формате XML, включая SVG и XUL.
Более подробно ознакомится с CSS можно здесь.
На это тему написано огромное количество книг, изучая HTML нельзя обойти CSS это не правильно. Так что начинается всё с HTML. :)Я начну рассказ то же с применения HTML. Как известно в HTML есть теги, которые формируют вид страницы в браузере.
Пример тегов:
<p></p>
<h1></h1> 
<div></div> 
<table></table>
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
<tr></tr>
<th></th>
<td></td>
У каждой пары тегов есть свои атрибуты, а в свою очередь у каждого атрибута есть свои аргументы, немного путано, но эта цепочка именно так и работает. Весь текст находящийся между парой тегов исполняется и представляется в браузере согласно языка HTML и стилем браузера по умолчанию.
Стиль браузера - стандартный стиль, используемый браузером по умолчанию для представления элементов.
У всех тегов описанных в листинге №1 есть атрибут align он отвечает за расположение текста или картинки в пространстве страницы ПО ГОРИЗОНТАЛИ. Раз есть атрибут тега, значит должен быть и аргумент этого атрибута.
Аргументы атрибута align

center

Выравнивание текста по центру. Текст помещается по центру горизонтали окна браузера или контейнера, где расположен текстовый блок. Строки текста словно нанизываются на невидимую ось, которая проходит по центру веб-страницы. Подобный способ выравнивания активно используется в заголовках и различных подписях, вроде под рисуночных, он придает официальный и солидный вид оформлению текста. Во всех других случаях выравнивание по центру применяется редко по той причине, что читать большой объем такого текста неудобно.
<center><img src="/images/Avatar1/Ava0002.gif" width="81" height="100"> </center>

justify

Выравнивание по ширине, что означает одновременное выравнивание по левому и правому краю. Чтобы произвести это действие браузер в этом случае добавляет пробелы между словами.

left

Выравнивание текста по левому краю. В этом случае строки текста выравнивается по левому краю, а правый край располагается «лесенкой». Такой способ выравнивания является наиболее популярным на сайтах, поскольку позволяет пользователю легко отыскивать взглядом новую строку и комфортно читать большой текст.
<img src="/images/Avatar1/Ava0002.gif" width="81" height="100" align="left">

right

Выравнивание текста по правому краю. Этот способ выравнивания выступает в роли антагониста предыдущему типу. А именно, строки текста равняются по правому краю, а левый остается «рваным». Из-за того, что левый край не выровнен, а именно с него начинается чтение новых строк, такой текст читать труднее, чем, если бы он был выровнен по левому краю. Поэтому выравнивание по правому краю применяется обычно для коротких заголовков объемом не более трех строк. Мы не рассматриваем специфичные сайты, где текст приходится читать справа налево, там возможно подобный способ выравнивания и пригодится. Но где вы у нас в стране видели такие сайты.
<img src="/images/Avatar1/Ava0002.gif" width="81" height="100" align="right">
Это картинка в таблице с отступами справа и слева. Здесь используются атрибуты hspace - это отступы по горизонтали и vspace - отступ по вертикали, причем сразу с двух сторон 70->картинка<-70.
<table width="17%" height="206" border="1" cellpadding="3" cellspacing="3">
<br>  <tr>
<br>    <td><img src="/images/Ava0002.gif" hspace="70" vspace="50" align="bottom"></td>
<br>  </tr>
<br></table>




***

Теперь используем CSS. Поместим картинку для начала в контейнер или в блок - в этом нам поможет тег див. Он собственно и является своего рода контейнером или ещё называют блоком. Про блочную вёрстку слышали, вот это с его помощью делается.

Рис. 1

Синий край это границы контейнера (div), пространство внутри, которое заштриховано, есть то пространство, на которое надо отступить внутри контейнера от его границ (стрелками указана величина в пикселах). Таким образом и происходит размещение контента внутри блока.

Листинг № 1 - Размещение картинки с помощью CSS. Файл стиля.

@charset "windows-1251";
/* CSS Document */

.gif {
	padding-top: 200px;
        padding-left: 150px;
	width: 350px;
	padding-bottom: 47px;
     }
Рассмотрим подробнее. Первые две строки для нас сейчас не важны их пропускаем. Далее идёт точка - это обозначение класса в CSS. Примерно читается так: класс gif имеет следующие атрибуты:
  • padding-top: 200px; - это отступ сверху
  • padding-left: 150px; - это отступ слева
  • width: 350px; - это ширина самого контейнера
  • padding-bottom: 47px; - это отступ снизу
Так же есть атрибут padding-right: - это отступ справа. Ну теперь наверно стало картина прояснятся как можно подвинуть картинку, т.е. меняя аргументы атрибутов, те самые циферки что измеряются в пикселах, хотя кстати то же не обязательно в них. Помимо того, что мы рассмотрели атрибуты которые применяются с тегом див, которые отвечают за расположение объекта внутри контейнера. Существуют ещё атрибуты которые в свою очередь двигают контейнер снаружи относительно страницы это margin.

Рис. 2

Листинг № 2 - Это весь HTML-код используемый для установки картинки в нужном месте страницы.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Untitled Document</title>
<link href="/hio.css" rel="stylesheet" type="text/css">
</head>

<body>
<div class="gif"><img src="/images/Avatar1/Ava0002.gif" border=0></div>
</body>
</html>

Листинг № 3 - Таблица CSS стилей для последнего примера. (Файл hio.css)

@charset "windows-1251";
/* CSS Document */

.gif {
	padding-top: 200px;
	padding-left: 150px;
	width: 350px;
	padding-bottom: 47px;
	margin-top: 50px;
	margin-right: 250px;
	margin-bottom: 101px;
	margin-left: 312px;
	
}

Урок закончен

Обсудить на форуме

SETTER © LPHP.RU
Администрация сайта
21.09.2009 22:23:46

Понравился урок? Не пропусти следующий!
Рекомендованные уроки этого раздела:
  • Проверка корректности ввода числа.
  • Форма для отправки сообщения с сайта.
  • SSH - вход на сервер без ввода пароля
  • Слайдшоу

Напишите свой комментарий
Ваше имя
Сообщение
Введите цифры с картинки:
 

Комментарии

саша 15.03.2012 15:47:46
прикольныый сайт
  • Яндекс.Метрика Здесь находится аттестат нашего WM идентификатора 185571665285
  • "LPHPRU" © 2009-2021