Вход на сайт
808 просмотров
назад
11.12.13 16:00 Учимся делать красивые рамочки. Урок 2, часть 1
| Урок №-2 Как вставить в одинарную рамочку фоновую картинку, музыку или видео. Часть 1. 1. Как вставить в одинарную рамочку фоновую картинку. При оформление постов многие берут в radikal.ru шестую ссылку и хочу обратить ваше внимание, чтобы Вы обращали внимание на её размер,который даётся там же на против уменьшенного изображения вот таким образом Оригинал: 600 x 600 пик., 190 Кб Результат: 600 x 600 пик., 190 Кб Это означает, что ширина равна width="600" пик., а высота второй размер тоже height="600" пик. Это нам необходимо знать для правильного оформления поста. Далее скопируем шестую ссылку, вот она <a target="_blank" href="http://www.radikal.ru"><img src="http://s001.radikal.ru/i194/1301/9d/9d6499d5f614.gif"> В посту нам нужен только адрес картинки, то есть удаляем лишнее и как Вы видите она стала в двое меньше. <img src="http://s001.radikal.ru/i194/1301/9d/9d6499d5f614.gif" > С такой шириной картинки в привет.ру трудно сделать красивую рамочку, поэтому нам нужно уменьшить её вот таким образом, добавив в конце ссылки необходимый нам размер желаемой ширины картинки за счёт width="...", высоту ставить не нужно, она сама преобразуется. В зависимости от ширины ваших видимых фонов выбирается этот размер, мы возьмём width="550". <img src="http://s001.radikal.ru/i194/1301/9d/9d6499d5f614.gif" width="550"> А теперь посмотрим на обе картинки...  2. Как вставить две рядом картинки и подогнать под одну высоту. 1.  480х204 2.  500х275 Мы выбрали размер фоновой картинки 550, тогда размер для двух картинок должен быть по 275. Этот размер примерно в два раза меньше второй картинки. Тогда берём общую высоту чуть меньше высоты второй картинки в двое - 130. Из этого вот что у нас получается width="275" и height="130", а теперь поставим обе картинки вместе и вставим в них наши размеры. <img src="http://i060.radikal.ru/1301/7c/ce9515112bd7.gif" width="275" height="130"><img src="http://s42.radikal.ru/i097/1301/e4/b5d96134afc4.gif" width="275" height="130"> Для поста я взял ещё одну картинку в стихах, вот она... <img src="http://s019.radikal.ru/i640/1301/8e/56a53e4d3289.gif" > 463 x 100  3. Вставляем наши картинки в рамочку. Для этого можно взять любую рамочку с первого урока. Я выбрал седьмую, только мы в ней увеличим бордюру, сделаем по более фоновую часть и поставим другое фоновое изображение, под наши картинки. ***седьмая.*** Вдавленная border:4px inset #ff0000 <table style="border:4px inset #ff0000" background="http://img1.liveinternet.ru/images/foto/b/2/745/1468745/f_10652675.gif"> <tr><td style="padding:1px" > ( итд.) </td></tr></table> В style="border:4px мы изменим 4 на 5 - и будет так style="border:5px А в background=http://img1.liveinternet.ru/images/foto/b/2/745/1468745/f_10652675.gif мы заменим адрес фоновой картинки на этот http://img12.dreamies.de/img/372/b/tzl36bjtc6w.jpg и в итоге у нас получится вот такая ссылка на пост. <table style="border:5px inset #ff0000" background="http://img12.dreamies.de/img/372/b/tzl36bjtc6w.jpg"> <tr><td style="padding:1px" > ( итд.) </td></tr></table>
Но это ещё не всё, нам нужно произвести центровку. Центровка производится только в тех рамках, куда вставляются картинки, музыка, видео или какие то надписи итд. Между фоновыми рамками центровка не производится, так как за счёт style="padding:25px" (число 25 не постоянное, оно выбирается для каждого фона отдельно и может быть различным от ваших желаний) она открывает фон со всех сторон согласно заданных размеров. Центровка делается вот так, за счёт align="center" , который вставляется в td, то есть вот сюда td style="padding:1px" вот так td style="padding:1px" align="center" В привет.ру в гостевые идеально входят рамочки размером 650 пик. Мы взяли размер фоновой картинки 550, то есть на бордюр и фоновую часть у нас остаётся 100 пик. Бордюр мы взяли 5 с одной стороны и 5 с другой. На фоновую часть у нас остаётся 90:2=45 пик. Вот мы и берём padding:45px в нашей рамочке. 4. Вот так будет выглядеть ссылка на наш пост без картинок. <table style="border:5px inset #ff0000" background="http://img12.dreamies.de/img/372/b/tzl36bjtc6w.jpg"> <tr><td style="padding:45px" align="center"> ( итд.) </td></tr></table>
<br /> - применяется для разделения между картинками, строками стихов, музыкой итд. Чем больше <br />, тем больше будет разделение по строкам. 5. Соединим наши выбранные картинки с помощью <br /> в единое целое <br /><img src="http://s001.radikal.ru/i194/1301/9d/9d6499d5f614.gif" width="550"><br /><img src="http://i060.radikal.ru/1301/7c/ce9515112bd7.gif" width="275" height="130"><img src="http://s42.radikal.ru/i097/1301/e4/b5d96134afc4.gif" width="275" height="130"><br /><img src="http://s019.radikal.ru/i640/1301/8e/56a53e4d3289.gif"><br /> и вставим в нашу подготовленную рамочку. Вот так выглядит ссылка на наш пост... <table style="border:5px inset #ff0000" background="http://img12.dreamies.de/img/372/b/tzl36bjtc6w.jpg" > <tr><td style="padding:45px" align="center"><br /><img src="http://s001.radikal.ru/i194/1301/9d/9d6499d5f614.gif" width="550"><br /><img src="http://i060.radikal.ru/1301/7c/ce9515112bd7.gif" width="275" height="130"><img src="http://s42.radikal.ru/i097/1301/e4/b5d96134afc4.gif" width="275" height="130"><br /><br /><img src="http://s019.radikal.ru/i640/1301/8e/56a53e4d3289.gif"><br /></td></tr></table> . Скопируйте эти ссылку и вставте её себе в гостевую или в рамочник для проверки.
_______________________________________________________ В следующий раз во второй части урока №-2 мы вставим в этот пост музыку, видио и сделаем надпись. Bergmann - Шахтёр. |