Форум вебмастеров

Ответ
 
LinkBack Опции темы
Старый 12.03.2013, 22:47 #1 (Ссылка)
Профи
Дополнительная информация
По умолчанию

Как вставлять картинки и регулировать их размер в html


Я не буду теоретизировать… или вернее, я буду не только теоретизировать... вы должны всё попробовать сами. Я просто хочу показать (и покажу), как можно добавить картинку в ЛЮБОЙ блок – будь то шапка, подвал, статья… Потратьте на это час своего времени и в дальнейшем у вас будет гораздо меньше вопросов. вы будете это УМЕТЬ.

Чтобы всё испробовать «вживую», создайте на рабочем столе папочку, в нее положите любую картинку и создайте простейший html-документ. Картинку можно взять и эту, например.



Размеры пометьте себе сразу – это важно. В данном случае они равны 259 на 194 px.


Поехали? Все стили и изменения я буду комментировать.

Код:

Блок отключен


Особенность этого варианта в том, что блок не отрегулирован по высоте и потому просто «обтекает» картинку.
А что будет, если принудительно задать его высоту, чуть больше, чем у картинки? (меняем стиль контейнера, картинку не трогаем)


Код:

Блок отключен


По умолчанию картинка располагается в левом верхнем углу, но её можно и подвинуть… Создадим блок объявлений для селектора .cont img (то есть для всех изображений, находящихся внутри блока cont).

Варианты «двигания» могут быть различны, как пример:

Код:

Блок отключен
или
Код:

Блок отключен
но это уже совсем другая тема. Важно, что размер картинки при этом не меняется!



Допустим, теперь мы хотим увеличить картинку. Эту же.
Легко.

.cont img {
height: 250px; /*Указываем нужную высоту картинки*/
}



Вы замечаете, что качество стало хуже? Если оно вас ещё устраивает – дерзайте, в противном случае ищите картинку больше. Точно так же можно принудительно указать и ширину…


Код:

Блок отключен
Картинку «растянет». В случае, если это надпись или какой-то абстрактный рисунок, возможно, кого-то это и устроит… Растянуть картинку можно и на всю ширину… и на конкретную ширину в пикселах.
Если при этом не указывать высоту, то картинка изменится пропорционально своему исходному размеру, иногда выходя за пределы блока.



Можно, конечно, это запретить…

.cont {
overflow: hidden; /*Спрячем часть, вылезающую за край*/
}



На сегодня, наверное, достаточно… Как ставить картинку не через тег IMG, а на фон блока, я расскажу… завтра.
Зачем это нужно (через фон)? Например, чтобы сверху расположить надпись…

Оффтоп
Ночная странница вне форума   Ответить с цитированиемОтветить с цитированием
4 пользователя(ей) сказали cпасибо:
Helenka (14.03.2013), Usta (22.08.2015), Veter (12.03.2013), VyacheslavH (13.03.2013)

Старый 13.03.2013, 23:13 #2 (Ссылка)
Профи
Дополнительная информация
По умолчанию

Оффтоп

Сегодня я обещала рассказать, как ставить картинки, не используя тег IMG. Очень распространенный способ – указывать картинку фоном блока. Не будем особо мудрить, возьмем наш вчерашний пример и немного его переделаем. Уберем тег IMG, а вместо него в стилях контейнера пропишем background-image: url(1.jpeg);

Код:

Блок отключен
В данном случае (без дополнительных телодвижений с нашей стороны) картинка «замостит» всё отведенное пространство.



Чтобы убрать «мощение» воспользуемся свойством настройки повторений фона.

Код:

Блок отключен
Если отключить повторы, картинка займет левый верхний угол. Чтобы её подвинуть, есть свойство background-position (вспомните, в предыдущем случае оно не использовалось!). Пользоваться им легко:

Код:

Блок отключен
Так же допустимы любые промежуточные значения, с помощью чего положение картинки можно отрегулировать довольно точно. Ещё точнее получится, если указать вместо процентов, например, расстояние в пикселах (от верхнего левого угла).

Теперь, допустим, мы хотим растянуть картинку, возможно ли такое при использовании её качестве фона? Разумеется. Новое свойство (из CSS3) background-size позволит нам реализовать все наши задумки.

Варианты:
Код:

Блок отключен
Скриншоты не привожу, так как результат внешне идентичен тому, что мы получали с помощью тега IMG.
Каким вариантом пользоваться – выбирать вам, главное, чтобы вы понимали, что и как вы хотите сделать.
Если что-то непонятно – задавайте вопросы в теме… Если я что-то забыла или пробежалась слишком поверхностно - уточняйте.
Спасибо за внимание.
Ночная странница вне форума   Ответить с цитированиемОтветить с цитированием
3 пользователя(ей) сказали cпасибо:
Helenka (14.03.2013), Veter (13.03.2013), VyacheslavH (15.03.2013)

Старый 15.03.2013, 23:44 #3 (Ссылка)
Вебмастер
Дополнительная информация
По умолчанию

Было бы еще неплохо рассмотреть взаимодействие графики с текстом.
VyacheslavH вне форума   Ответить с цитированиемОтветить с цитированием
Пользователь сказал cпасибо:

Старый 16.03.2013, 05:18 #4 (Ссылка)
Профи
Дополнительная информация
По умолчанию

VyacheslavH, спасибо, действительно можно... Сделаю) Ну заодно и про несколько картинок на фоне тоже расскажу)
Ночная странница вне форума   Ответить с цитированиемОтветить с цитированием

Старый 16.03.2013, 19:07 #5 (Ссылка)
Подглядывающий
Дополнительная информация
По умолчанию

Довольно таки поучающе, начинающим в дизайне будет самое оно. +5
Алексей Ткачёв вне форума   Ответить с цитированиемОтветить с цитированием

Старый 19.03.2013, 18:09 #6 (Ссылка)
Вебмастер
Дополнительная информация
По умолчанию

Цитата:
Сообщение от Ночная странница Посмотреть сообщение
создайте на рабочем столе папочку, в нее положите любую картинку и создайте простейший html-документ.
А теперь для шапки пожалуйста.. ))

Я не нашел в хейдере чего-то похожего на фон..
koil вне форума   Ответить с цитированиемОтветить с цитированием

Старый 19.03.2013, 18:49 #7 (Ссылка)
Подглядывающий
Дополнительная информация
По умолчанию

Это всё возня)). Берете программу Artesteer и рисуете себе что угодно и как угодно. Более новые версии программы умеют делать дизайны для тройки популярных CMS. Вот ниже прикреплённая картинка шапки моего шаблона, без использования flash (тут нельзя вставить флэш). Даже два сделаю

тут показана только самая простая картинка, все вот эти тёмные (глобус и как типа сетки), это уже работа этой программы.

Возможностей реально МОРЕ в плане графического оформления, вы берете простую картинку, и делаете с ней что угодно (в том числе закругление краёв). Так же оформление кнопок submit и кнопки-ссылки тоже графически, вставка swf в шапку, вставка изображения в подвал, и не требует знаний html
Алексей Ткачёв вне форума   Ответить с цитированиемОтветить с цитированием
3 пользователя(ей) сказали cпасибо:
Helenka (19.03.2013), Veter (19.03.2013), Ночная странница (19.03.2013)

Старый 19.03.2013, 20:59 #8 (Ссылка)
Профи
Дополнительная информация
По умолчанию

Цитата:
Сообщение от koil Посмотреть сообщение
Я не нашел в хейдере чего-то похожего на фон..
Фон можно поставить к любому элементу, абсолютно любому... В хедере есть таблица, весь хедер можно "обернуть" в какой-то блок div и к нему уже прописать стили...

Цитата:
Сообщение от Алексей Ткачёв Посмотреть сообщение
и не требует знаний html
Удобно для новичков, но как им учиться?
Абсолютно всех задач с помощью программы все равно не решить...
это как машина с автоматической коробкой передач - тот, кто пользовался механической - на автоматической легко адаптируется, а вот наоборот - сложновато будет...

Добавлено через 2 секунды
Цитата:
Сообщение от koil Посмотреть сообщение
Я не нашел в хейдере чего-то похожего на фон..
Фон можно поставить к любому элементу, абсолютно любому... В хедере есть таблица, весь хедер можно "обернуть" в какой-то блок div и к нему уже прописать стили...

Цитата:
Сообщение от Алексей Ткачёв Посмотреть сообщение
и не требует знаний html
Удобно для новичков, но как им учиться?
Абсолютно всех задач с помощью программы все равно не решить...
это как машина с автоматической коробкой передач - тот, кто пользовался механической - на автоматической легко адаптируется, а вот наоборот - сложновато будет...
Ночная странница вне форума   Ответить с цитированиемОтветить с цитированием

Старый 19.03.2013, 21:09 #9 (Ссылка)
Подглядывающий
Дополнительная информация
По умолчанию

А как все учатся самоучки? Как учились Вы? Я скажу как учился я, как учились все остальные. Вот мы видим у кого то что то интересное и желаем модифицировать это для себя, берем просто исходный код, потом уже начинаем вручную что то менять, вписывать, добавлять.... А программа с открытым кодом, там есть встроенный показ кода, так же уже когда собрали сайт, выходят файлы .html, которые вполне так же может любой желающий открыть блокнотом и отредактировать то что желает. Каждый код в этой программе идёт с новой строчки, что сразу очевидно - для тех кто мало понимает и навигация удобная
Алексей Ткачёв вне форума   Ответить с цитированиемОтветить с цитированием

Старый 19.03.2013, 21:57 #10 (Ссылка)
Вебмастер
Дополнительная информация
По умолчанию

Цитата:
Сообщение от Ночная странница Посмотреть сообщение
Фон можно поставить к любому элементу, абсолютно любому... В хедере есть таблица, весь хедер можно "обернуть" в какой-то блок div и к нему уже прописать стили...
а вот это
<td style="background: #FFFFFF url(images/logo.png);
Это не относится к фону шапки? Т.е. не замена фона картинкой?
koil вне форума   Ответить с цитированиемОтветить с цитированием

Ответ

Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.
Trackbacks are Вкл.
Pingbacks are Вкл.
Refbacks are Вкл.


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Счетчик посетителей сайта на HTML и Javascript Счетчик посещений сайта на HTML и Java Ekatermat Сайтостроение 1 22.12.2018 00:11
Как правильно вставлять изображения RoInmana Начинающий кодер 5 17.12.2013 06:09
Как изменить размер ника на vBulletin 4.x.x? lukamal vBulletin 4.x.x 9 23.07.2013 21:36
Как уменьшить размер картинок? Allex vBulletin 3 13.10.2012 13:01
Размер пиксельной картинки при печати gnblfy Вопросы по дизайну 11 10.04.2010 02:00


Текущее время: 04:02. Часовой пояс GMT +3.

Powered by vBulletin®
Copyright ©2000 - 2022, WMboard.
Перевод: zCarot
 

Форум вебмастеров

Здесь делают сайты, учатся на них зарабатывать. Ты новичок, и ничего не понимаешь в создании сайтов и в интернет заработке? Не знаешь ответа на вопрос по сайтостроению? Мучают вопросы сео оптимизации?

Не беда, присоединяйся к сообществу вебмастеров, и зарабатывай вместе с нами!