Форум » Фотошоп » Как по-умному кодировать дизайн » Ответить
Как по-умному кодировать дизайн
Аллати: Создала уже кучу шаблонов, но сидеть в настройках и вставлять ссылки не хочется... тем бо я вообще не разбираюсь в этих Бордовских хтмлах... Мне сказали, что это делают в "Сокранить для Веб..." но как? Объясните начинающему дизайнеру)))
Вик: Аллати а ты фон сделала для шаблонов,когда сделаешь и кодируй в настройках(редактировать) и всё
Аллати: Вик кто такой фон?
Аллати: так, что-то вообще у меня финя выходит! в радикале картинка сжимается ина форуме маленькая! как приручтить хтмл? выложите сайт что ли, или схемку - что что значит...
Sin: Ну давай возьмём самый лёгкий шаблон. 1) Для того чтобы картинка не сжиалась, закачивай по размеру через специальные сервисы. ( здесь размер шапки и низа 950 - отмечяю синим ) 2) То что нужно заменить я расскажу далее. 3) Самый первый код - http://s005.radikal.ru/i211/1003/8a/188e7540afa9.jpg ( отмечу красным ) - это задний фон. Его заменяешь своей картинкой. Неважно какой, главное чтобы нравилось тебе. 4) Второй код - http://s52.radikal.ru/i135/1003/ee/1abde59f3d44.jpg ( отмечу его зелёным ). Это шапка. Она играет важную роль в дизайне. Замени её своей картинкой, подходящей по размеру ( размер в этом шаблоне 950 пикселей ). 5) Третий код - http://i055.radikal.ru/1003/9d/fa9f8fa0b616.jpg ( отмечу его розовым ). Это код переднего фона. Его нужно подогнать под шапку, сделать одного цвета, если есть возможность сделать одинаковую рамку. ( но пока для начала сделай однотонную шапку и однотонный передний фон ). 6) Четвёртый код - http://s60.radikal.ru/i167/1003/b7/69e37436346c.jpg ( отмечу его тёмно голубым ). Это низ. Он так же должен сочетаться с шапкой и передним фоном дизайна. Размер так же соответствует шапке ( 950 пикселей ). Ну попробуй сделать что нить и показать нам) ( я объяснила самый лёгкий шаблон, самым лёгким языком и способом... Я ещё не рассказала как уменьшать, увеличивать таблицу... Но пока остановись на первых 6 пунктах и попробуй сделать по ним и показать, потом ещё что нить расскажу ) HTML-верх: <HTML> <HEAD> <TITLE>Ролевая Наруто</TITLE> <STYLE type=text/css> body{background-image:url(http://s005.radikal.ru/i211/1003/8a/188e7540afa9.jpg);} BODY{margin:10px;margin-top:15px;margin-bottom:10px;} td{font-family:Verdana;} BODY { scrollbar-face-color: #000000; scrollbar-highlight-color: #ffffff; scrollbar-3dlight-color: #FFFFFF; scrollbar-darkshadow-color: #FFFFFF; scrollbar-shadow-color: #FFFFFF; scrollbar-arrow-color: #FFFFFF; scrollbar-track-color: #000000; } .font1{font-size:12px;COLOR:#FFFFFF;} .font2{font-size:11px;font-weight:400;COLOR:#FFFFFF;} .font3{font-size:11px;font-weight:700;COLOR:#FFFFFF;} .font4{font-size:15px;COLOR:#FFFFFF;} .font5{font-size:11px;font-weight:700;COLor:#FFFFFF;} .font6{font-size:11px;font-weight:700;COLOR:#FFFFFF;} a:link{color:#FFFFFF;text-decoration:none;} a:visited{color:#FFFFFF;text-decoration:none;} a:hover{color:#ffffff;text-decoration:underline;} tr.font3 {HEIGHT: 28px;BACKGROUND-IMAGE: url(http://jpe.ru/gif/skin/fon31.gif);} tr.font5 {HEIGHT: 30px;BACKGROUND-IMAGE: url(http://jpe.ru/gif/skin/fon41.gif);FONT-WEIGHT:700;} tr.font6 {HEIGHT: 28px;BACKGROUND-IMAGE: url(http://jpe.ru/gif/skin/fon31.gif);} input,select,textarea{font-size:11px;font-family:Verdana;} textarea{width:100%;height:120;} input.sender{COLOR:#FFFFFF; background-color:#000000;font-weight:700;border:1 outset rgb(0,0,0);border-color:#FFFFFF;} </font> </STYLE> </font> </HEAD> <BODY bgColor=#FFFFFF body text=#FFFFFF> <table width="950" table align="center" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="333" background="http://s52.radikal.ru/i135/1003/ee/1abde59f3d44.jpg"><table width="350" align="right" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <div style="position:relative;left:80px;top:-30px;width:190px;height:80px;overflow:auto;"> Добро пожаловать. Это ролевая по Наруто. </div> </td> </tr> </table></td> </tr> </table> <TABLE align="center" cellSpacing=0 cellPadding=16 width=950 border=0> <TR ><TD valign=top background="http://i055.radikal.ru/1003/9d/fa9f8fa0b616.jpg" > </font> HTML-низ: </TD></TR></TABLE> <p align="center" class="font2">Дизайн кнопок © <a href="http://k-dezign.ru" target="_blank">Веб-студия "К-Дизайн"</a> </p> </TD></TR></TABLE> </BODY></HTML> </TD><td width="40"></td></TR> </TABLE> <center><img src="http://s60.radikal.ru/i167/1003/b7/69e37436346c.jpg"></center> </BODY></HTML> Вот что вышло у меня - http://narik2.forum24.ru/
Psi: Аллати пишет: в радикале картинка сжимается ина форуме маленькая! Там есть такая функция "Уменьшить до 640 пикселей" . Надо что бы там не было галочки)))
Агат: Надо попробовать) Фенькс) И вопрос : А как делать на шапке и низе закруглённые края?
Sin: Агат - ну если в Пеинте, то просто воспользуйся скругленным пряоугольником. Зате сотри ненужные линии и закрась "кусочки" которые останутся за полями, под цвет заднего фона. ( вот что вышло у меня в Пеинте - http://dizis43.forum24.ru/ )
Агат: Sin Эх, у меня Пейнт вирус удалил. Вместе с играми и Експлором..
Sin: Агат - а чем тогда пользуешься? Может Ф.Ш?
Агат: Sin В каком смысле? Если про интернет, то Мозилой.
Sin: Агат - у тебя фотошоп вообще есть? Был? Если нет... Может графический редактор?
Агат: Sin Нет, у меня есть фотошоп. Но сейчас он пока не отвечает.
Sin: Агат - вот есть онлайн фотошоп - http://rexmen.ru/paint.html а гдет здесь - http://soft.softodrom.ru/ap/Paint-NET-p6096 ( можно скачать Paint-NET ) ну или здесь - http://paint.gvindor.com/
Аллати: Sin спасибушки, буду тренироваться)
Аллати: хехрмх.... а как изменить фоновую штуку, ну которая под таблицаами, на ней логотип борды ёщё... Она у тебя чёрная...
Аллати: И как уменьшить размер этой штуки...?
Persi: http://erikas.forum24.ru/ ,хех что у мя получилось=)
Persi: мну не получилось=(
Дина: http://hikh.forum24.ru вот что получилось у меня..
Persi: Дина а как ты расстянула картинки=)? А так супер!
полная версия страницы