Форум » Полезное для Борды » Гайд: создание самого простого дизайна для форума » Ответить
Гайд: создание самого простого дизайна для форума
Geek: Создание самого простого дизайна для форума В этой теме я опишу, как создать самый простой фиксированный дизайн для форума своими Руками, чтобы не было вопросов - а как сделать шапку, а что сделать с новостями. буду объяснять по ходу движения, а пока - вот ХТМЛ исходного дизайна форума: верх: [pre2] <HTML> <HEAD> <TITLE>Форум</TITLE> <STYLE type=text/css> BODY{margin:10px;margin-top:15px;margin-bottom:10px;} td{font-family:Verdana;} .font1{font-size:12px;} .font2{font-size:11px;font-weight:400;} .font3{font-size:11px;font-weight:700;} .font4{font-size:15px;} .font5{font-size:11px;font-weight:700;COLOR:#ffa450;} .font6{font-size:11px;font-weight:700;} a:link{color:#006699;text-decoration:none;} a:visited{color:#5493b4;text-decoration:none;} a:hover{color: #dd6900;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{background-color:#ffffff;font-weight:700;border:1 outset rgb(0,0,0);} </STYLE> </HEAD> <BODY bgColor=#e5e5e5> <TABLE bgColor=#98aab1 cellSpacing=1 cellPadding=10 width=100% height=100% border=0> <TR bgColor=#F8FCF5><TD valign=top>[/pre2] низ: [pre2] </TD></TR></TABLE> </BODY></HTML>[/pre2] 1. Рисуем картинку в фотошоп. Нужно нарисовать все сразу в масштабе 100%, я выбираю ширину 950 пикс и создаю новый документ с параметрами: ширина 950, высота 500 Сразу чтобы ответить на вопрос - как же сделать углы форума закругленными, я нарисую именно такой вариант. Итак, заливаем основной фон однородным цветом Теперь выбираем инструмент - прямоугольник с закругленными краями, выставляем радиус закругления 20пикс и рисуем общую рамку для форума Выставляем прямоугольнику заливку на 0% Теперь заходим в свойства слоя - Слой--Стиль слоя--Параметры наложения Получаем Теперь - шапка форума. берем желаемую картинку, и компонуем шапку, этот этап целиком зависит от вашей фантазии и желания, оставляем полосу под шапкой незаполненной рисунком и по желанию добавляем картинку вниз. Теперь выбираем инструмент Раскройка (К) и режем нашу картинку на 3 части: Теперь сохраняем для Web - указываем папку куда и формат сохранения - jpeg, ФШ сам разрежет картинку на 3 части: 1. Для шапки 2. Для фона таблицы 3. Для низ форума Теперь загружаем картинки на Радикал и получаем 3 адреса. А теперь исправляем код нашего форума: Хтмл верх: [pre2] <HTML> <HEAD> <TITLE>Форум</TITLE> <STYLE type=text/css> BODY{margin:10px;margin-top:15px;margin-bottom:10px;} td{font-family:Verdana;} .font1{font-size:12px;} .font2{font-size:11px;font-weight:400;} .font3{font-size:11px;font-weight:700;} .font4{font-size:15px;} .font5{font-size:11px;font-weight:700;COLOR:#eddec9;} .font6{font-size:11px;font-weight:700;} a:link{color:#bf8257;text-decoration:none;} a:visited{color:#bf8257;text-decoration:none;} a:hover{color: #bf8257;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{background-color:#ffffff;font-weight:700;border:1 outset rgb(0,0,0);} </STYLE> </HEAD> <BODY bgColor=#e9e6d3 (ставим тут цвет нашего фона, который виден из-за закругленных уголков)> <table align="center" width="950" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="293" background="http://s58.radikal.ru/i162/0905/84/f62880bc835f.jpg"> </td> </tr> </table> (это новая таблица с шапкой форума, высота 293 соответствует высоте картинки) <TABLE align="center" cellSpacing=0 cellPadding=15 width=950 border=0> <TR ><TD valign=top background="http://i064.radikal.ru/0905/f8/b4ee76bed2bf.jpg (это адрес картинки-фона таблицы)" > [/pre2] ХТМЛ-низ [pre2] </TD> </TR></TABLE> <table align="center" width="950" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="145" background="http://s61.radikal.ru/i174/0905/52/b375b307d462.jpg"> </td> </tr> </table> (это таблица с низом нашего форума, высота 145 соответствует высоте нижней картинки) </BODY></HTML> [/pre2] Объясню почему верх и низ имеет смысл делать в таблицах, причем фоновым изображением - в таком случае, поверх можно спокойно вставлять тексты, баннеры или любую нужную информацию - например, еще какие-то картинки. В итоге, после нехитрых манипуляция с подбором кнопок и цветов таблицы, а так же цветов шрифтов, получаем: Источник: http://koteyka.forum24.ru/?1-5-0-00000013-000-0-0-1245936677 (взято с http://k-dezign.ru/publ/uroki_borda_ru/17-1-0-9 )
Ответов - 0
полная версия страницы