Name: Создание самого простого дизайна для форума (BORDA.RU)
Item: Создание самого простого дизайна для форума (BORDA.RU)
Author: ксюша

Главная » Статьи » Уроки Borda.ru

Создание самого простого дизайна для форума (BORDA.RU)

В этой теме я опишу, как создать самый простой фиксированный дизайн для форума своими Руками, чтобы не было вопросов - а как сделать шапку, а что сделать с новостями.
буду объяснять по ходу движения, а пока - вот ХТМЛ исходного дизайна форума:

цитата:

верх

<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

Категория: Уроки Borda.ru | Добавил: Белая_Кошка (15.07.2009) | Автор: Котик W

Просмотров: 8794 | Комментарии: 9 | Теги: дизайн, дизайн форума, форум | Рейтинг: 0.0/0

Всего комментариев: 8

Порядок вывода комментариев:

8 ксюша (15.12.2011 21:28)

Спам

Paint.NET вот такая у меня програмка есть но там я все по примеру делаю ено там не всё есть

6 ксюша (14.12.2011 15:48)

Спам

Я тоже так хочу а вы можите скинуть ссылку на этот фотошоп?

7 Белая_Кошка (14.12.2011 15:56)

Спам

что значит ссылку а этот фотошоп?
на порграмму в которй рисовать что ли? ну так Яндекс и Гугл вам в руки - ищите.

5 svetiko (12.09.2011 11:42)

Спам

Светлан, подскажите пожалуйта, как можно изменить цвет текста в шапке основной таблицы. Он голубой, хочу сделать черным.

3 set (08.06.2011 22:57)

Спам

А как делать резиновый дизайн не объясните?Может есть такая тама, но я не нашла.

4 Белая_Кошка (09.06.2011 09:59)

Спам

думаю - есть смысл поучить хтмл, тогда логически все будет понятно

1 set (08.06.2011 00:09)

Спам

Спасибо за дизайн. А можно сделать, чтоб таблица была пошире? И я сделала как написано, но когда открываю тему, таблица уходит в бок.

2 Белая_Кошка (08.06.2011 07:45)

Спам

это пример фиксированного дизайна. именно фиксированного - чтобы таблица растягивалась необходимо делать резиновый. а то что таблица тянется вбок - так это картинки ваши ее тянут. на фиксированных дизах картинки вставляйте с предпросмотром и все

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]