Создание самого простого дизайна для форума
В этой теме я опишу, как создать самый простой фиксированный дизайн для форума своими Руками, чтобы не было вопросов - а как сделать шапку, а что сделать с новостями.
буду объяснять по ходу движения, а пока - вот ХТМЛ исходного дизайна форума:
верх:
<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>
низ:
</TD></TR></TABLE>
</BODY></HTML>
1. Рисуем картинку в фотошоп. Нужно нарисовать все сразу в масштабе 100%, я выбираю ширину 950 пикс и создаю новый документ с параметрами: ширина 950, высота 500
Сразу чтобы ответить на вопрос - как же сделать углы форума закругленными, я нарисую именно такой вариант.
Итак, заливаем основной фон однородным цветом
Теперь выбираем инструмент - прямоугольник с закругленными краями, выставляем радиус закругления 20пикс и рисуем общую рамку для форума
Выставляем прямоугольнику заливку на 0%
Теперь заходим в свойства слоя - Слой--Стиль слоя--Параметры наложения
Получаем
Теперь - шапка форума.
берем желаемую картинку, и компонуем шапку, этот этап целиком зависит от вашей фантазии и желания, оставляем полосу под шапкой незаполненной рисунком и по желанию добавляем картинку вниз. Теперь выбираем инструмент Раскройка (К) и режем нашу картинку на 3 части:
Теперь сохраняем для Web - указываем папку куда и формат сохранения - jpeg, ФШ сам разрежет картинку на 3 части:
1. Для шапки
2. Для фона таблицы
3. Для низ форума
Теперь загружаем картинки на Радикал и получаем 3 адреса.
А теперь исправляем код нашего форума:
Хтмл верх:
<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 (это адрес картинки-фона таблицы)" >
ХТМЛ-низ
</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>
Объясню почему верх и низ имеет смысл делать в таблицах, причем фоновым изображением - в таком случае, поверх можно спокойно вставлять тексты, баннеры или любую нужную информацию - например, еще какие-то картинки.
В итоге, после нехитрых манипуляция с подбором кнопок и цветов таблицы, а так же цветов шрифтов, получаем:
Источник:
http://koteyka.forum24.ru/?1-5-0-00000013-000-0-0-1245936677 (взято с
http://k-dezign.ru/publ/uroki_borda_ru/17-1-0-9 )
- участник сейчас на форуме
- участник вне форума