Блок с разделами сайта на главной странице

[Bonov 13]

Добрый день!

 

К сожалению, я в дизайне особо ничего не понимаю, поэтому прошу вашей посильной помощи.

 

На главной странице есть блок приветствия с разделами сайта (картинки с описанием). Страница на IP.Content. Сейчас я сделал этот блок используя свои примитивные знания html (код ниже).

 

1. Хотелось бы узнать, как теперь правильно было бы оформить этот блок, не используя таблицы и прочие устаревшие теги.

 

2. Так же сейчас главная проблема в том, что блок уезжает при маленькой ширине экрана. Что посоветуете - делать картинки меньше, либо же есть другое решение по оформлению?

 

3. Мне лично не понятно почему, но при заходе на сайт с мобильного устройства (у меня лично Samsung Galaxy S 2), то сам заголовок приветствия нормально масштабируется вместе с основным текстом сайта, а вот текст выглядит очень большим, хотя фактически по коду у него размер меньше...

 

Со стороны все-таки виднее, как должно лучше выглядеть. Поэтому хотелось бы услышать не только мнения, но и советы. Спасибо!

 

<div class='general_box'>
<h3><span style="font-size: 14px;"><center><strong>Добро пожаловать на сайт Клуба Студентов и Молодежи "Наш Универ"!</strong></center></span></h3>
<div id='welcome-block'><span style="color:#008000;">Вместе с нами жизнь станет интереснее, а обучение - увлекательнее! Здесь Вы найдете друзей и единомышленников, которые всегда придут на помощь, поддержат в трудную минуту, постараются ответить на любые Ваши вопросы, да и просто пообщаются с Вами на разные темы! А когда настанет тяжелая пора зачетов и экзаменов, именно здесь можно будет обсудить сложные предметы и обменяться материалами, которые помогут сдать сессию!<br /><br /></span>

<table cols="5" cellspacing="0" summary="Разделы сайта">
<tr style="vertical-align:top;">

<td width="20%" style="padding:10px;">
<a href="http://nashuniver.ru/page/blog.html"><div style="text-align:center;"><strong>Студенческий блог</strong><br /><img src="/public/images/homepage/blog.jpg" width="100" height="75" alt="Студенческий блог" /><br />Будьте в курсе студенческих новостей, делитесь событиями своего ВУЗа</div></a>
</td>

<td width="20%" style="padding:10px;">
<a href="http://nashuniver.ru/index"><div style="text-align:center;"><strong>Обсуждения</strong><br /><img src="/public/images/homepage/forums.png" width="100" height="75" alt="Обсуждения" /><br />Участвуйте в обсуждениях студенческой жизни</div></a>
</td>

<td width="20%" style="padding:10px;">
<a href="http://nashuniver.ru/members/"><div style="text-align:center;"><strong>Участники</strong><br /><img src="/public/images/homepage/members.jpg" width="100" height="75" alt="Участники" /><br />Знакомьтесь, находите друзей и вторые половинки</div></a>
</td>

<td width="20%" style="padding:10px;">
<a href="http://nashuniver.ru/files/"><div style="text-align:center;"><strong>Материалы</strong><br /><img src="/public/images/homepage/files.jpg" width="100" height="75" alt="Материалы" /><br />Обменивайтесь полезными материалами для учебы</div></a>
</td>

<td width="20%" style="padding:10px;">
<a href="http://nashuniver.ru/calendar/"><div style="text-align:center;"><strong>Мероприятия</strong><br /><img src="/public/images/homepage/calendar.jpg" width="100" height="75" alt="Календарь мероприятий" /><br />Будьте в курсе всех предстоящих событий и мероприятий</div></a>
</td>

</tr>
</table>

</div>
</div>
<style type='text/css'>
#welcome-block {
padding: 10px;
font-size: 12px;
}
</style>

[Bonov 13]

Хоть какие-нибудь комментарии у кого-нибудь есть? По любому пункту.