Совет 1: Как сделать рисунок на сайте

Изображения оживляют сайт, заинтересовывают посетителей, делают ресурс ярким и запоминающимся. Без фотографий и рисунков любой сайт, даже с очень интересным и ценным текстом, будет казаться скучным и незавершенным. Несложная процедура вставки изображений на сайт позволит вашему ресурсу стать красочнее и приобрести новых постоянных посетителей.
Вам понадобится
  • - собственный сайт
  • - рисунок, который нужно поместить на сайт
  • - знать, что такое HTML-код
Инструкция
1
Чтобы сделать рисунок на сайте, загрузите изображение в файловое хранилище сайта. Файлы на сайт можно загружать с помощью «менеджера файлов» или по ftp. Для получения конкретных инструкций по загрузке файлов обратитесь к вашему хостеру (тому, кто предоставляет хостинг для вашего сайта).
2
После загрузки картинки узнайте ссылку на нее. Ссылка на вашу картинку будет такого вида: http: ⁄ ⁄ website/img1.jpg. Если Вы нашли картинку в интернете и знаете ссылку на нее, можно, конечно, использовать такую ссылку; но лучше сохранить эту картинку и залить к себе на сайт через «файловый менеджер», так как при удалении картинки с другого сайта на вашем ресурсе она отображаться тоже не будет.
3
Получив ссылку на нужный рисунок, вставьте ее между кавычек в следующий HTML-код: <img src=" ">. Должна получиться такая конструкция: <img src="http: ⁄ ⁄website/img1.jpg">. Вместо "http: ⁄ ⁄ website/img1.jpg" должна быть ссылка на вашу картинку. Эту запись нужно поместить в нужное место в HTML-коде вашего сайта.
4
Если изображение на сайте нужно подкорректировать по размеру, то в HTML-коде укажите нужные ширину и высоту изображения. Запись вида width="100" указывает ширину картинки в пикселях, а запись height="80" - высоту изображения в пикселях, где число в кавычках и есть количество пикселей. Общий код изображения с указанными размерами выглядит так: <img src="http: ⁄ ⁄ website/img1.jpg" width="100" height="80">. Цифры в коде замените на нужную вам ширину и высоту изображения.
5
Нелишним будет указать название изображения для того, чтобы при просмотре сайта в режиме без картинок посетитель мог понять, какие изображения присутствуют на сайте. Для добавления названия вставьте в код вывода картинки такую запись: alt="Название". Вместо слова «Название» напишите название вашей картинки. В результате рисунок на сайте будет иметь такой HTML-код: <img src="http: ⁄ ⁄ website/img1.jpg" alt="Название" width="100" height="80">.

Совет 2: Как сделать фоновый рисунок на сайте

Постичь азы сайтостроения можно самостоятельно, в интернете и книгах представлено достаточно информации по этой теме. Однако на первоначальном этапе часто возникают затруднения в применении того или иного тега. Действительно, самые распространенные компоненты лучше запомнить, поскольку они необходимы при написании любого сайта.
Инструкция
1
Выберите картинку, которую вы хотите использовать в качестве фонового изображения. Если предполагается поверх иллюстрации вставить текст, то в этом случае желательно ограничиться вариантами без излишней пестроты, в составе которых используется несколько близких по характеру цветов. В принципе для устранения ряби можно создать «подложку» для контента, - и проблема будет успешно решена.
2
Подкорректируйте изображение с помощью программы Adobe Photoshop. Когда работа будет закончена, в меню «Файл» выберите команду «Сохранить для Web» и укажите нужную папку. Если это первое изображение, которое будет использоваться для сайта, то автоматически создается папка «Images».
3
В теге <body> пропишите атрибут background="путь к изображению". Пример записи: <body background="images\1.gif"> или <body background="url">. При этом имейте в виду, что тег <body> должен встречаться в коде только один раз, не следует его размножать.
4
Сохраните изменения в блокноте, нажмите кнопку «Обновить» в браузере. На экране появится фоновый рисунок. Если размеры изображения меньше параметров web-страницы, то картинка будет дублироваться столько раз, сколько необходимо для заполнения всего пространства. Исправить этот недостаток можно двумя способами:
• с помощью программы Adobe Photoshop установите требуемые параметры картинки в пикселах («Изображение» - «Размер изображения»);
• задайте нужные размеры в html-коде.
Например, если требуется ширина 1250 px, а высота – 650 px, то нужно дописать необходимые атрибуты для ячейки таблицы, в которую будет помещена картинка.
<table>
  <tr>
    <td background="images/1.gif" alt="картинка" width="1250" height="650" >
    </td>
  </tr>
<table>

Нельзя задать размер в теге <body> - изображение всегда будет отображаться в натуральную величину.
5
Аналог ccs для вставки фонового изображения:

<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>background-image</title>
   <style type="text/css">
        BODY {
         background-image: url(images/bg.jpg);
         }
</style>
</head>
<body>
</body>
</html>

Атрибут «background-image: url(images/bg.jpg)» – путь к фоновому изображению.
Источники:
  • фоновые рисунки для сайта

Совет 3: Как добавить рисунок на сайт

Любой сайт скучен без графики. Изображения помогают сделать вашу страничку более красивой и информативной, да и немалую часть информации проще донести до читателя при помощи наглядных рисунков. Вставить картинку на сайт очень легко.
Инструкция
1
Для начала выберите картинку, которую вы хотели бы вставить на страницу. Убедитесь, что она не защищена авторским правом, и у вас не возникнет проблем из-за того, что вы используете ее на своем сайте. Ни в коем случае нельзя убирать копирайт автора. Лучше спишитесь с ним и попросите разрешение на использование изображения.
2
Загрузите картинку на сервер, где размещен ваш сайт, либо на любой фотобанк (к примеру, radikal.ru). Скопируйте адрес картинки и сохраните в текстовом документе.
3
Основной тег, с помощью которого картинки отображаются на сайте - это <img src=”***”>, где вместо звездочек вы должны вставить адрес картинки. Если вы пропишите тег таким образом, картинка на вашем сайте будет отображаться в оригинальном размере и с фиолетовой рамкой вокруг.
4
Если вы хотите убрать рамку, то тег должен выглядеть следующим образом: <img border=”0” src=”***”>. Если же вы, напротив, хотели бы, чтобы вокруг изображения была рамка, вместо нуля укажите желаемый размер в пикселях. А с помощью атрибута bordercolor вы можете задать нужный цвет рамки. К примеру, картинка с тегом <img border=”4” bordercolor=”#000000” src=”***”> будет иметь черную рамку в четыре пикселя.
5
С помощью прописанного атрибута вы можете изменить размеры картинки. Для этого проставьте в тег значения параметров width и height, означающих ширину и высоту рисунка соответственно. Необходимые вам значения должны быть указаны в пикселях и взяты в кавычки.
6
Для того чтобы рисунок удачно вписался в структуру сайта, его нужно правильно разместить. В этом вам помогут атрибут align, вписанный в тег. Он может принимать различные значения: left, right и center. Первый вариант означает, что рисунок будет размещен на странице слева, второй – справа, третий же позволит разместить картинку в центре страницы. Эти значения также необходимо брать в кавычки.
7
После того, как вы полностью прописали тег рисунка, вставьте его в структуру вашего сайта и сохраните изменения. Если вы все сделали правильно, картинка появится у вас на странице.
Видео по теме
Видео по теме
Обратите внимание
Название нужного вам рисунка должно состять только из английских букв и (или) цифр, иначе на сайте вместо изображения будет красный крестик.
В коде изображения необязательно указывать параметры длины и ширины - их используют только при необходимости.
Полезный совет
Перед загрузкой изображения на сайт уменьшите картинку до нужных размеров, так как слишком большие изображения препятствуют быстрой загрузке страницы и занимают больше места в хранилище файлов.
Источники:
  • Самоучитель по сайтостроению
Поиск
Совет полезен?
Добавить комментарий к статье
Осталось символов: 500
к
Honor 6X Premium
новая премиальная версия
узнать больше