Щоб все випробувати «вживу», створіть на робочому столі папочку, в неї покладіть будь-яку картинку і створіть найпростіший html-документ. Картинку можна взяти і цю, наприклад.
Розміри позначте собі відразу - це важливо. В даному випадку вони рівні 259 на 194 px.
Особливість цього варіанту в тому, що блок не відрегульована і тому просто «обтікає» картинку.
А що буде, якщо примусово задати його висоту, трохи більше, ніж у картинки? (Міняємо стиль контейнера, картинку не чіпаємо)
Варіанти «Пересування» можуть бути різні, як приклад:
але це вже зовсім інша тема. Важливо, що розмір картинки при цьому не змінюється!
Припустимо, тепер ми хочемо збільшити картинку. Цю ж.
Легко.
cont img height: 250px; / * Вказуємо потрібну висоту картинки * /
>
Ви помічаєте, що якість стало гірше? Якщо воно вас ще влаштовує - дерзайте, в іншому випадку шукайте картинку більше. Точно так само можна примусово вказати і ширину ...
Картинку «розтягне». У разі, якщо це напис або якийсь абстрактний малюнок, можливо, когось це і влаштує ... Розтягнути картинку можна і на всю ширину ... і на конкретну ширину в пікселах.
Якщо при цьому не вказувати висоту. то картинка зміниться пропорційно свого вихідного розміру, іноді виходячи за межі блоку.
Можна, звичайно, це заборонити ...
cont overflow: hidden; / * Сховаємо частина, вилазили за край * /
>
На сьогодні, напевно, досить ... Як ставити картинку не через тег IMG, а на фон блоку, я розповім ... завтра.
Навіщо це потрібно (через фон)? Наприклад, щоб зверху розташувати напис ...
Профі, що не поправляйте мене, будь ласка ... я знаю, що напис можна розмістити і поверх цієї картинки ... але тема-то для новачків ...
Невеликі пояснення до всього уроку:
сам HTML-код ми практично не чіпаємо, все зміни вносимо в стилі (що знаходяться між тегами "style"). Якщо в подальшому стилі на вашому сайті будуть винесені в окремий файл (і це правильно, в даному випадку я цього не зробила з метою спростити розуміння завдань) - то відповідно, властивості картинки і блоку пишуться там.
Сьогодні я обіцяла розповісти, як ставити картинки, не використовуючи тег IMG. Дуже поширений спосіб - вказувати картинку фоном блоку. Не будемо особливо мудрувати, візьмемо наш вчорашній приклад і трохи його переробимо. Приберемо тег IMG, а замість нього в стилях контейнера пропишемо background-image: url (1.jpeg);
В даному випадку (без додаткових рухів тіла з нашого боку) картинка «Замостя» все відведений простір.
Щоб прибрати «мощення» скористаємося властивістю настройки повторень фону.
Якщо відключити повтори, картинка займе лівий верхній кут. Щоб її посунути, є властивість background-position (згадайте, в попередньому випадку воно не використовувалося!). Користуватися ним легко:
Так само допустимі будь-які проміжні значення, за допомогою чого положення картинки можна відрегулювати досить точно. Ще точніше вийде, якщо вказати замість відсотків, наприклад, відстань в пікселях (від верхнього лівого кута).
Тепер, припустимо, ми хочемо розтягнути картинку, чи можливо таке при використанні її як фон? Зрозуміло. Нове властивість (з CSS3) background-size дозволить нам реалізувати всі наші задумки.
Скріншоти не наводжу, так як результат зовні ідентичний тому, що ми отримували за допомогою тега IMG.
Яким варіантом користуватися - вибирати вам, головне, щоб ви розуміли, що і як ви хочете зробити.
Якщо щось незрозуміло - задавайте питання в темі ... Якщо я щось забула або пробіглася надто поверхово - уточнюйте.
Дякуємо за увагу.
Це все метушня)). Берете програму Artesteer і малюєте собі що завгодно і як завгодно. Новіші версії програми вміють робити дизайни для трійки популярних CMS. Ось нижче прикріплена картинка шапки мого шаблону, без використання flash (тут можна вставити флеш). Навіть два зроблю
тут показана тільки найпростіша картинка, все ось ці темні (глобус і як типу сітки), це вже робота цієї програми.
Можливостей реально МОРЕ в плані графічного оформлення, ви берете просту картинку, і робите з нею що завгодно (в тому числі закруглення країв). Так само оформлення кнопок submit і кнопки-посилання теж графічно, вставка swf в шапку, вставка зображення в підвал, і не вимагає знань html