Здесь мы не будем рассматривать вёрстку и элементы кодинга, а для начала сам дизайн.
С чего вообще состоит страница?
Рассмотрим на примере:
Изображение

Типичный вопрос, который задают дизайнеры это: "Что там должно быть?"

Основные элементы которые должны присутствовать на стартовой странице:

Меню. Форма для меню.
Изображение
На данном примере мы видим, что меню находится в шапке страницы. Это не обязательно, так как вы можете разместить где угодно (например, в боковой панеле).

Форма входа. Логин, пароль.
Изображение
Конечно, как без неё... Форма входа служить для ввода логина и пароля, а так же применяющая кнопка Ок (Войти). Панели ввода могут располагаться как угодно и, естественно по собственном желанию дизайнера (одна под одной, в ряд).
Пожелания: Размещайте форму входа на видном и удобном месте для пользователей (по середине, сверху, в верхней боковой форме), а так же выделяйте её другим оттенком общего фона страницы.

Контент. Основная информация о чате.
Изображение
Форма для информации о чате. Фон её должен быть матовым, невзрачным (если имеет узор - сделать прозрачным до минимума). Иногда верстальщикам трудно подобрать цвет текста, чтобы он не сливался с фоном. Чаще размещается посередине страницы.

Дополнительные формы. Дополнительная информация.
Изображение
Необязательное размещение. Дополнительная информация о чате (администрация, контакты, информация о посещении, партнеры, фотогалерея).
Чаще размещается сбоку страницы.

Футер. О правах администрации и копирайты автора страницы.
Изображение
Является одним из основных элементов страницы. Футер стоит размещать внизу страницы, чтобы он не портил весь вид и в тоже время обращал внимание посетителей. (Это же ваша реклама)

Выше приведенные основные элементы для создания страницы (стандарт). Все ваши домысли будут только улучшать готовый вид. Использовался шрифт Modernist Three.
Специально для Айгуст и этого урока я нарисовал страницу и вылаживаю полностью её исходник. Там с легкостью сможете рассмотреть всё в деталях.
Скачать ЗДЕСЬ (для отключения направляющих используйте Ctrl+H)

Урок 2.0. Верстка.

Форма входа. Настройка. Что это вообще такое?

Для того, чтобы начать верстать, нам понадобится:
- notepad ++ (скачать);
- браузер (надеюсь у всех на рабочем столе есть Google Chrome - пользуйтесь им. Почему? - Позже расскажу);
- трезвая голова;
- ровные руки.

Приступим.
Форма входа - это так называемая "панель" в которую нужно вводить ник и пароль, конечно же кнопка "Войти" чтобы произвести вход в чат. Данный пример я создал без глаз, потому что исходник формы входа вижу каждый день по несколько раз. Она мега-простая, но очень познавательная для тех, кто желает научится верстать.
Поздравляю каждого, кто читает мой пост, потому что после моего рассказа вы уже сможете сами создать стартовую страницу (хоть первоначальную, но все же).
Я сделал скриншот формы входа, которая в дальнейшему должна у вас получится.

Могу сказать сразу, что если вы стремитесь и будете вникать в саму суть верстки - вам покажется, что верстать куда проще чем рисовать.)
Скопируйте исходник себе в Notepad ++ и сохраните в формате .html на рабочий стол (сохранить как-формат html-сохранить), после чего откройте в браузере.
И так... Начнем рассматривать каждый тег:
- что между ним - это весь фарш нашей страницы.
- голова. Голова страницы, она отвечает за все существующие мета-теги, пути к стилям, скриптам и т.п. (пока не важно), в данном случае в нашем теге хранится еще один тег. Смотрим...
- название страницы. Между ним желательно вписывать название чата (отображается во вкладке браузера).
- тело страницы. В нем находится все отображаемое на странице, в нашем случае форма входа. Но! Смотрим дальше...
- стиль страницы (фон, текст, кнопки и т.п.). Насчет него, смотрим подпункты:
- body {...} - все что между скобками - это основные параметры нашей страницы. background: #000000; - цвет фона, color: #ffffff; - цвет текста, пока все, идем дальше...
- .form {...} - параметры исключительно самой формы входа, задаем ей параметр ширины - width: 300px;, положение на странице - margin: 0 auto; (посередине), top: 20px; - отступ сверху и position: relative; - позиция блока (что это такое, поговорим потом). Как применить, смотрим дальше...
- между этим тегом, как мы видим, находится форма входа (параметры которой заданны в стилях) т.е. отображаться она
будет соответственно к стилям которые мы ей задали.

Итог: Вот и все, теперь вы сможете создать стартовую "с чистого листа", умеете менять фон страницы, цвет текста и редактировать готовый шаблон. Практикуйтесь.