Рамки для картин позволяют не только повесить холст, но и защитить его. Оформление натянутого холста в рамку значительно отличается от оформления картины, так как для этого вам не потребуется стекло или рамка с задней крышкой. Все материалы для оформления холста в рамку можно купить в магазине для художников или магазине рукоделия.
Часть 1
Покупка рамкиИзмерьте холст. С помощью измерительной ленты определите длину, ширину и толщину холста. Запишите замеры и держите их под рукой; они пригодятся вам при покупке рамки.
Выберите наиболее подходящую рамку для холста. Существует огромное разнообразие рамок и холстов, поэтому ваш выбор должен основываться на ваших пожеланиях к конечному виду картины. Небольшой контраст между холстом и рамкой будет приятен для глаз.
Купите рамку в магазине для художников. Теперь, когда вы измерили холст и знаете стиль требуемой рамки, время отправляться в магазин. Найдите наиболее подходящую рамку по длине, ширине и толщине холста.
Купите скобы для холста. Обычно они продаются по четыре штуки в упаковке, и их можно легко найти в магазине или онлайн. Одной упаковки из четырех скоб вполне достаточно для одного холста.
Часть 2
Как оформить холст в рамкуВставьте холст в рамку. Положите холст лицевой частью вниз на плоскую поверхность и вставьте холст вовнутрь, также лицевой частью вниз.
Зафиксируйте насадочные скобы на холсте, если, конечно, вы купили именно такие. Для начала выберите одну из сторон. Отметьте место соединения угла холста с углом рамки. Проведите заостренный конец скобы между рамкой и углом холста. После этого натяните скобу на подрамник и плотно прижмите ее.
Прикрепите скобы для холста, требующие привинчивания, если вы купили именно этот вид. Положите скобы там, где они, на ваш взгляд, должны располагаться. Достаточно прикрепить по одной скобе к каждому подрамнику.
Аккуратно переверните картину вверх ногами. Теперь вы можете проверить конечный результат. Рамка должна крепко держаться на холсте. Если холст выскальзывает, вам нужно плотнее зафиксировать скобы.
Часть 3
Как прикрепить проволочный крючокПоложите холст лицевой частью вниз. Картина должна быть повернута правильной стороной вверх. Если вы не уверены, правильно ли повернута картина, поднимите холст и проверьте. Поставьте небольшую точку карандашом на подрамнике в верхней части картины. Это поможет вам запомнить, где у картины верх. Проволочный крючок будет расположен должным образом, если картина повернута правильной стороной вверх.
Отметьте, где должны находиться шурупы для крючка. Начиная с верхней части подрамника, поставьте карандашом точку на 1/4 или 1/3 от верхней части холста. Проверьте размеры холста и определите, где должна находиться точка.
Вкрутите шурупы для крючка. Вкрутите каждый шуруп в подрамник в месте отметок. Постарайтесь не повредить саму картину.
Отрежьте проволоку для крючка. Прибавьте 15-20 см к ширине холста и определите необходимую длину проволоки.
Прикрепите первый конец проволоки для крючка. Сначала разложите проволоку горизонтально на задней части холста. Начиная с одной из сторон, завяжите узел, протянув один конец проволоки под и через крючок с ушком. После этого протяните проволоку через ушко крючка на 1,25 см.
Это делает возможным внутри одной страницы отображать содержимое другой страницы. Например:
Большинство изображений, которые человек видит на сайтах, тоже являются содержимым другой страницы. Вот, в частности, адрес смайлика в формате.gif:
А вот способы добавления картинки на сайт, которые можно выделить, если посмотреть код страницы:
| HTML: тег | |
|---|---|
 http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif
" alt="смайлик" height="30" width="30">
|
|
| CSS: свойства и | |
| CSS: псевдоэлементы и | |
| HTML: тег векторной графики | |
| CSS: без URL | |
Скопировать адрес изображения можно несколькими способами:
Рис.1 Если навести на фото и нажать на правую клавишу мышки, то в Mozilla Firefox откроется контекстное меню с таким пунктами
Рис.2 Если в Mozilla Firefox навести на фото, нажать на правую клавишу мышки, в появившемся контекстном меню выбрать пункт «Информация об изображении», то откроется окно, где можно посмотреть список картинок, используемых на странице, их адрес, альтернативный текст (содержимое в атрибуте alt), фактический размер и используемый масштаб
Рис.3 Так выглядит страница смайлика.
Навести курсор на фото, нажать на правую клавишу мышки, в появившемся контекстном меню будет предложено сохранить картинку, щёлкнуть по необходимому пункту (на Рис.1 cм. пункт «Сохранить изображение как...»), в открывшемся окне выбрать папку на компьютере, куда будет сохранён рисунок.
Если фотография является фоновой картинкой, то нужно предварительно перейти на страницу картинки (см. Рис.3).
Сначала изображение нужно загрузить с компьютера на хостинг сайта, в социальную сеть (ВКонтакте, Google+ и т.п.), Яндекс.Диск или Гугл.Диск , чтобы у рисунка появился свой адрес в интернете.
Если есть визуальный редактор, то очерёдность действий обычно следующая:
Итог: картинка будет вставлена на страницу сайта, а самое главное — загружена на сервер веб-проекта. У неё теперь будет свой адрес в интернете. И теперь можно на вкладке «HTML» поправить предоставленный визуальным редактором код, так как часто визуальный редактор добавляет ненужные теги, да и возможности HTML и CSS несравнимо большие.
Если URL уже есть, но другого малоизвестного сайта, то всё же такую фотографию лучше сохранить на компьютер, а потом загрузить на сервер сайта, если данное действие разрешено владельцем фото, дабы не нарушить авторские права, так как
Если нет визуального редактора, то очерёдность действий обычно следующая:
http://сайт.ru/image/plain.gif
" alt="смайлик" height="30" width="30">Вставка изображения
Для вставки изображения в html-документ используется непарный тег
, который помещается в то место документа, где должно быть вставлено изображение. У этого тега есть обязательный параметр src , значение которого указывает путь к нужному изображению в каталоге вашего сайта.
Например, чтобы поместить на страничку изображение:
в нужном месте документа помещается строчка:
Это дает браузеру понять, что в корневом каталоге сайта www.mysite.com есть подкаталог img 1.png
Здесь мы указали полный путь (или абсолютный адрес ) до изображения. А можно указать относительный адрес изображения:
Такую строчку браузер интерпретирует так: в каталоге, где лежит данный html-документ, есть подкаталог img , в нем лежит изображение с именем 1.png , которое и нужно поместить на страничке.
А вот пример указания относительного адреса изображения, если у вашего сайта более сложная структура и предыдущий пример не подходит:
Такую строчку браузер интерпретирует так: сочетание символов ../ означает, что из каталога, где лежит данный html-документ, нужно выйти на уровень вверх; а далее как в предыдущем примере: в том каталоге, где мы оказались есть подкаталог img , в нем лежит изображение с именем 1.png , которое и нужно поместить на страничке.
В целях безопасности предпочтительнее указывать относительный адрес изображения, кроме тех случаев, когда Вы на своей страничке помещаете изображение, расположенное на другом сайте.
Размеры изображения
Размер каждого изображения задается двумя параметрами: ширина и высота. У тега
есть соответствующие параметры: width и height . Эти параметры принимают значения в пикселах (px).
Вы можете задать истинные размеры изображения:
Это делать необязательно, но полезно, т.к. немного ускоряет процесс загрузки странички браузером (браузеру не приходится самостоятельно вычислять эти величины). Если размеры изображения сразу заданы в параметрах тега
, то под данное изображение будет выделено место на страничке, и структура странички при загрузке уже не будет меняться - текст прыгать, например.
А можете увеличить или уменьшить изображение, присвоив параметрам width и height другие значения. Причем, если вы хотите пропорционально изменить оба параметра, достаточно указать новое значение только одному из них, а второй - просто опустить. Браузер вычислит его автоматически.
Например, чтобы увеличить наше изображение в 1,5 раза, можно написать:
или
Результат будет один:
Еще параметры width и height могут принимать значения в процентах. Но! Следует учесть, что это проценты от размера окна браузера. В таком случае тоже можно указать только один параметр, а второй - опустить.
Например, если мы хотим, чтобы изображение по ширине занимало ровно половину нашей странички, надо написать следующее:
И мы получим:
Рамка вокруг изображения
У тега
есть еще один необязательный параметр border . С его помощью можно задать толщину рамки вокруг изображения. По умолчанию толщина рамки изображения нулевая, т.е. рамки нет.
Например, так можно добавить к нашей картинке рамку толщиной 3 пиксела:
Вот что покажет нам браузер:
Цвет рамки совпадает с цветом текста на странице, заданным с помощью параметра text тега (См. Урок 6. Свойства страницы - параметры тега body), по умолчанию это черный цвет.
И если Вы не хотите видеть рамку, принудительно присвойте параметру border нулевое значение:
Альтернативный текст
Альтернативный текст отображается браузером на месте картинки, пока та не загрузится. Или вместо картинки, если она по какой-либо причине не отобразилась.
Когда и если картинка загрузилась, альтернативный текст будет показываться при наведении курсора мыши на эту самую картинку.
Чтобы добавить альтернативный текст, используется параметр alt тега
, которому присваивается строковое значение, обязательно заключенное в кавычки.
Можно создать многострочный альтернативный текст.
Для этого достаточно вставить перенос строки в html-документе.
Выравнивание изображения
Для изображения, как и для параграфа, существует понятие выравнивания относительно текста и других изображений на странице. Задать тип выравнивания можно также с помощью параметра align тега
.
Ниже приведена таблица возможных значений параметра align :
Параметры texttop , top , middle , absmiddle , baseline , bottom задают выравнивание изображения по вертикали. А параметры left и right дают браузеру понять, с какой стороны текст должен обтекать изображение.
Отступы вокруг изображения
Чтобы при обтекании текст не прилегал близко к изображению, можно задать отступы вокруг изображения. Сделать это можно с помощью параметров hspace (отступы слева и справа) и vspace (отступы сверху и снизу) тега
.
В следующем примере продемонстрирован случай, когда текст обтекает изображение, при этом изображение выровнено по левому краю и имеет отступы вокруг, равные 5 пикселам:
Вот результат в браузере:
В городе Стокгольме, на самой обыкновенной улице, в самом обыкновенном доме живет самая обыкновенная шведская семья по фамилии Свантесон. Семья эта состоит из самого обыкновенного папы, самой обыкновенной мамы и трех самых обыкновенных ребят -Боссе, Бетан и Малыша.Разбиение изображения на части
Бывают случаи, когда на странице необходимо поместить большое изображение. Но тогда страница будет долго грузиться. Что же делать?
Один из возможных
вариантов выхода из положения - разрезать изображение на части и разместить его на странице с помощью таблицы. A чтобы изображение выглядело как целое, необходимо у таблицы удалить границу и все отступы внутри и между ячейками. Т.е. присвоить соответствующим параметрам теганулевые значения: border="0" , cellspacing="0" , cellpadding="0" .
В следующем примере мы разбили изображение на 4 части. Вот как будет выглядеть таблица:
А вот результат:
Об этом человеке известно только то,
что он не сидел в тюрьме, но почему не сидел - неизвестно.
Марк Твен.Э то урок о том, как вставить картинку в HTML , как её оформить, как сделать обтекание картинки текстом и т.д. Ведь известно, что изображения делают сайт более привлекательным и отличным от других ресурсов, поэтому умение использовать тег и его атрибуты весьма пригодится в современном Интернете. Но главное тут - чувство меры!
П ереизбыток графики вызовет утяжеление html-страницы и, соответственно, увеличит время её загрузки. Кроме того, наличие большого числа изображений будет отвлекать посетителей от главного содержимого сайта (если, конечно, графика не является главным содержимым сайта). Так что, соблюдай меру и используй только там, где это нужно. И будет тебе счастье!
В уроке про я уже рассказывал о том, как можно использовать картинки в качестве фона html-документа. Сейчас же поговорим о том, как графика используется в «верхнем слое» html-страницы.
§ 1. Как вставить картинку
Д ля вставки картинок в HTML используется тег IMG с обязательным атрибутом SRC . Этот атрибут указывает браузеру путь к файлу изображения. Т.е. для вставки картинки с названием logo.jpg в определенное место страницы (при условии, что и страница, и картинка расположены в одной папке (каталоге)) нужно в этом месте вставить следующий html-код:
src="logo.jpg">
Е сли картинка и страница расположены в разных каталогах (папках), то нужно указать путь к изображению относительно страницы. Например, если html-страница лежит в каталоге (папке) site, в этом же каталоге (папке) расположен подкаталог (папка) images, в котором и находится наша картинка logo.jpg, то для её вставки нужно написать так:
images/logo.jpg">
А можно не мучиться и указать полный адрес картинки . Например, так:
http://www..png">
В последнем случае браузер отобразит код так:
Примечание. Если картинка расположена на вашем компьютере , а вставить вы её хотите на страницу в Интернете , то ничего не выйдет. Для этого картинку нужно сначала переместить в какое-нибудь место в Интернете (например, ). И указать в коде страницы полный адрес до этого места с картинкой .
П омимо обязательного атрибута SRC у тега IMG есть ещё несколько необязательных атрибутов. Рассмотрим их подробнее.
§ 2. Указание размеров картинки
Н ачнём с атрибутов, которые позволяют задать размеры картинки (точнее, застолбить место под эти размеры на страницы). Вот они:
- width - ширина картинки в пикселах или процентах;
- height - высота картинки в пикселах или процентах.
Е сли используются эти атрибуты, то сначала выделит место под графику, подготовит макет документа, отобразит текст и только затем загрузит изображение. При этом он поместит картинку в прямоугольник выделенного размера, даже если реальные ширина и высота картинки больше (сожмёт) или меньше (растянет). В случае, когда эти атрибуты не используются, браузер будет грузить картинку сразу, а вывод идущих за ней текста и остальных элементов задержится.
Ш ирину и высоту изображений можно указывать как в пикселах (при этом размер картинки будет постоянным вне зависимости от разрешения экрана), так и в процентах (размер картинки будет зависить от разрешения экрана пользователя). Например:
width="50" height="20">
width="10%" height="5%">
§ 3. Альтернативный текст
В случае, если пользователь в настройках браузера отключил показ изображений, то можно вместо картинки вывести альтернативный текст, который бы объяснил, что за графика здесь должна быть. Достигается это путём применения атрибута ALT :
В этом случае браузер зарезервирует место на странице под изображение, но вместо самой картинки покажет текст, который ты напишешь в значении атрибута ALT :
П овторю, это произойдёт, если пользователь отключил показ графики. Если же нет, то картинка скроет собой альтернативный текст.
§ 4. Выравнивание картинки
С помощью уже знакомого тебе атрибута align можно управлять выравниванием картинок относительно других элементов html-страницы. У атрибута align есть несколько значений, но нас больше всего на данный момент интересуют два:
- left - изображение располагается у левого края страницы, а текст обтекает картинку справа;
- right - изображение располагается у правого края страницы, а текст и другие элементы обтекают картинку слева.
Н апример, HTML-код
браузер покажет так
А этот HTML-код:
будет выглядеть вот так:
Д ля прекращения обтекания картинки текстом можно использовать тег BR (знакомый нам из прошлого раздела про ). У тега BR есть атрибут clear , который может принимать три значения:
- left - прекращение обтекания текстом картинок, выровненных по левому краю;
- right - прекращение обтекания текстом картинок, выровненных по правому краю;
- all - прекращение обтекание текстом картинок, выровненных и по левому, и по правому краю.
Как вставить картинку на страницу html
Чтобы вставить на сайт изображение -картинку, (фотографию или любую графику) надо указать путь к источнику (к файлу-картинке) при помощи тега img Тег img - это сокращение от английского imagе (имидж, изображение), Источник - по английски source, сокращенно src
Важно : вес и размер картинки (небольшой), имя файла (без пробелов и только латинские буквы и цифры), формат картинки (расширения. GIF, JPG, JPEG, PNG. Возможно использование анимированных картинок (GIF).
Путь к картинке указывается абсолютный или относительный, в зависимости от того, где картинка находится у вас или в интернете на сторонних ресурсах (тогда надо указать URL)Туман. Художник Владимир Княгницкий
Код. В коде указан относительный адрес (относительно папки у меня на сервере)
Код. В коде указан абсолютный адрес картинки
Размер изображения и толщина рамки
Реальный размер этой картинки: Ширина (width)="499" Высота (height)="434". Не прибегая в фотошопу можно сделать так, чтоб на экране картинка выглядела больше или меньше своих реальных размеров. Для этого используются атирибуты width и height . Например, чтоб картинка выглядела в 2 раза меньше, указываем ширину (width)="250" и высоту (height)="217" . И добавляем рамку толщиной 4 пикселя(border ="4"). Слева изображение с рамкой, справа, для срвнения, без рамки
Атрибуты тэга IMG
src -Обязательный атрибут, указывающий URL рисунка (его адрес, месторасположение)
IMG SCR= " img/kartinka.gif"align - Выравнивает изображение к одной из сторон документа
align="left" - Выравнивание по левому краю
align="right" Выравнивание по правому краю
align="bottom"Выравнивание по нижнему краю
align="top" Выравнивание по верхнему краю
align="middle" Выравнивание по серединеalt - Выводит текст к картинке. Альтернатива графике, если она не грузится
border - Устанавливает толщину рамки вокруг изображения в пикселах. По умолчанию рамка не используется.width ширина картинки в пикселях или процентах
height - высота картинки в пикселях или процентахhspace отступ по горизонтали
vspace отступ по вертикалиПримеры выравнивания картинки с текстом при помощи HTML
Картинка размещена перед текстом без указания каких либо атрибутов. Без форматирования текста. В результате получилось то,что вы видите. Картинка расположена слева от текста про помощи атрибута align со значенем left . align="left" .
Это, конечно, намного лучше предыдущего варианта расположения картинки с текстом. Но не думаю что кому то нравится, когда изображение прижато вплотную к тексту. На картинке бабочка, бабочка, бабочка. И текст, текст, текст про бабочку, бабочку, бабочку. Слишком близко к изображению. Картинка не должна сливаться с текстом, даже если текст написан просто как текст, чтоб наглядно продемонстировать обтекание картинки текстом. Очень важно чтобы на экране картинкал не сливалась с текстом, чтобы не раздражала, чтобы радовала глаз и была на своем месте. Достаточное количество текста нагляднее десонмтрирует пример.
Есть правила верстки в книгоиздательстве, должны быть правила верстки и при сайтостроении. Картинка расположена слева от текста про помощи атрибута align со значением LEFT, отступ от текста - 20 пикслелей по горизонтали.
align="left" hspace=20 Отступы добавляются при помощи атрибутов HSPACE (отступ по горизонтали) и VSPACE (отступ по вертикали) . В данном случае отступ по вертикали равен нулю, чтобы верх картинка был на одном уровне с верхней строкой текста. Если отступ равен нулю, он не указывавется. Ну а отступ по вертикали указан в атрибуте. И хотя в настоящее время вебмастеров убеждают отказаться от атрибутов HTML и полностью перейти на CSS, мне кажется что простота такого метода дает ему право на существование.
КОД Картинка расположена справа от текста про помощи атрибута align о значением RIGHT , добавлены отступы при помощи атрибутов HSPACE (отступ по горизонтали). и VSPACE (отступ по вертикали). В принципе всё то же, что в предыдущем варианте, только вместо лево , указано право и картинка вставлена не перед текстом, а примерно посредине. Форматирование при помощи атрибутов align (линейное выравнивание) и при помощи отступов по горизонтали и вертикали дает вполне нормальный результат. Картинка обтекается текстом слева, сверху, и снизу (если текста достаточно много). Отступ текста от картинки слева, сверху и снизу рвняется 20 пикселям. Все так, как мы указали в коде.
Два вида выравнивая (по левому краю и по правому краю) используются чаще всего, а остальные... Почти все остальные считаются устаревшими. На современных сайтах все изображения (да и вообще весь дизайн) оформлятеся при помощи каскадных таблиц стилей (CSS)Текст, текст, текст продолжение текста
Картинка расположена про помощи атрибута align со значением middle . Добавлены отступы при помощи атрибутов HSPACE (отступ по горизонтали) и VSPACE . Выглядит это вот так, код записан ниже.. На этом с атрибутами позиционирования картинок заканчиваем
Как использовать атрибуты alt и title.
Атрибуты alt и title содержат название картинки. ALT -это альтернатива изображению, если оно по каким то причинам не загрузилось. Title - это титульная надпись на картинке. Она появляется при наведении мышки на картинку
Если вы делаете сайт только для себя, то можете не применять эти атрибуты. Если сайт предназначен для людей, то эти атрибуты надо заполнить дав четкое точное описание изображения.
Во-первых, это удобно для посетителей, во вторых, необходимо для поисковых машин. Именно текст внутри тега IMG позволяет поисковым роботам индексировать картинки, сортировать их по ключевым словам и выдавать их по запросам пользователя. Кстати, Яндекс даже предупреждает, что если и у картинки отсутствует содержательное описание, она не попадают в поиск. Индексируются картинки только стандартных графических форматов (JPEG, GIF и PNG). Фоновые изображения и картинки, раскрывающиеся при помощи скрипта, не индексируются.КОД картинки с заполнеными alt и title
Как сделать картинку ссылкой
Любая ссылка делается при помощи тега А и атрибута href (если это гиперссылка) или name если (ссылка на абзац или элемент, расположенный на этой же странице).
Начальный тег Источник картинки закрывающий тег
Статьи по теме:Что такое кэшированные данные и кэширование? Удобство использования на высоком уровне Подробная расшифровка некоторых характеристик акустики Как найти потерянный, украденный ноутбук Как снять с флешки защиту от записиНовое:Популярное:
