Архив Айгуст —
архив помогалки Августа
«Никто не вечен… В отличие от знаний»
Внимание!
  Материалы на данном сайте представляют собой архивную копию форума «Айгуст - помогалка Августа» на момент октября 2019 года с целью сохранения знаний. Все права на материалы принадлежат их авторам. Материалы представлены в открытый доступ в ознакомительных целях, запрещено их коммерческое использование без согласования с авторами. Администрация сайта не несёт ответственности за содержание материалов, в том числе за наличие вредоносных закладок в коде, используйте любой предоставленный код на свой страх и риск. Рекомендуется проверять любые файлы вручную и перезаливать на собственный хостинг, дабы избежать возможной модификации или исчезновения в будущем.

Урок: Создание стартовых страниц.

Пижон
Дизайнер
Сообщений: 899
15.07.2011 17:03:46
Урок: Создание стартовых страниц.
Всем привет!
Давно пришла в голову мысль создать урок посвященный созданию стартовой страницы. Здесь мы не будем рассматривать вёрстку и элементы кодинга, а для начала сам дизайн.
С чего вообще состоит страница?
Рассмотрим на примере:
[изображение]

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

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

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

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

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

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

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

Выше приведенные основные элементы для создания страницы (стандарт). Все ваши домысли будут только улучшать готовый вид. Использовался шрифт Modernist Three.
Специально для Айгуст и этого урока я нарисовал страницу и вылаживаю полностью её исходник. Там с легкостью сможете рассмотреть всё в деталях.
Скачать ЗДЕСЬ (для отключения направляющих используйте Ctrl+H)
#10117
Пижон
Дизайнер
Сообщений: 899
24.01.2012 18:03:04
Re: Урок: Создание стартовых страниц.
Опа! Дождались...

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

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

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

Собственно исходник:
<html>
<head>
<title>Форма входа</title>
</head>
<body>
<style>
body {background: #000000; color: #ffffff;}
.form {width: 300px; margin: 0 auto; top: 20px; position: relative;}
</style>
<div class="form">
<form name=login method=post action=/>
<input type=hidden name=sess>
<input type=hidden name=ref value=%GET('ref')%>
<table>
<tr><td colspan=2 align=center><h2>Вход в чат</h2></td></tr>
<tr><td>Ник:</td><td><input name=nick size=30></td></tr>
<tr><td>Пароль:</td><td><input name=pass type=password size=30></td></tr>
<tr><td colspan=2 align=center><input type=submit value="Войти в чат"></td></tr>
</table>
</form>
<script src=/js/login.jsa></script>
<script src=/js/md5.js></script>
Информация информация информация информация информация информация информация информация информация информация
</div>
</body>
</html>

Могу сказать сразу, что если вы стремитесь и будете вникать в саму суть верстки - вам покажется, что верстать куда проще чем рисовать.)
Скопируйте исходник себе в Notepad ++ и сохраните в формате .html на рабочий стол (сохранить как-формат html-сохранить), после чего откройте в браузере.
[url]И так... Начнем рассматривать каждый тег:[/url]
<html> </html> - что между ним - это весь фарш нашей страницы.
<head></head> - голова. Голова страницы, она отвечает за все существующие мета-теги, пути к стилям, скриптам и т.п. (пока не важно), в данном случае в нашем теге хранится еще один тег. Смотрим...
<title></title> - название страницы. Между ним желательно вписывать название чата (отображается во вкладке браузера).
<body></body> - тело страницы. В нем находится все отображаемое на странице, в нашем случае форма входа. Но! Смотрим дальше...
<style></style> - стиль страницы (фон, текст, кнопки и т.п.). Насчет него, смотрим подпункты:
- body {...} - все что между скобками - это основные параметры нашей страницы. background: #000000; - цвет фона, color: #ffffff; - цвет текста, пока все, идем дальше...
- .form {...} - параметры исключительно самой формы входа, задаем ей параметр ширины - width: 300px;, положение на странице - margin: 0 auto; (посередине), top: 20px; - отступ сверху и position: relative; - позиция блока (что это такое, поговорим потом). Как применить, смотрим дальше...
<div class="form"></div> - между этим тегом, как мы видим, находится форма входа (параметры которой заданны в стилях) т.е. отображаться она
будет соответственно к стилям которые мы ей задали.
Сама форма входа:
<form name=login method=post action=/>
<input type=hidden name=sess>
<input type=hidden name=ref value=%GET('ref')%>

<table>
<tr><td colspan=2 align=center><h2>Вход в чат</h2></td></tr>
<tr><td>Ник:</td><td><input name=nick size=30></td></tr>
<tr><td>Пароль:</td><td><input name=pass type=password size=30></td></tr>
<tr><td colspan=2 align=center><input type=submit value="Войти в чат"></td></tr>
</table>
</form>

<script src=/js/login.jsa></script>
<script src=/js/md5.js></script>
Что где и как рассказывать не буду, так как она стандартная и лежит на Августе.

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

P.S: Форму входа немножко подредактировал, мозгливые поймут. -)
Вопросы оставляйте в этой теме, помогу разобраться.
#18094
zabawa
Сообщений: 7
24.01.2012 20:46:36
Re: Урок: Создание стартовых страниц.
Всем доброго времени суток. Начну...
1. Огромное спасибо за открытие данной ветки (я хоть и не новичок в верстке, но вопросы имеются - просто нормально не нашла в инете)
2. Данная тема будет полезна, думаю, всем и начинающим и более опытным

Теперь к делу:

1. Как правильно сделать форму входа в одну строчку (логин-пароль-ок). Желательно на примере с использованием div, а не таблиц
2. Когда делаю так: блок шапка - в нем - блок допустим формы входа+ лого, когда необходимо подвинуть лого относительно одной из сторон страницы с использованием margin, двигается и сама шапка. Как правильно прописать такой код
3. Какой оптимальный размер полотна сайта задавать в фш на данный момент?
4. Как сделать в обычной форме входа (логин <br> пасс - в две строчки) так, чтобы поля для ввода самой информации были на одном уровне и соответственно слова (логин пароль) тоже.

Наверно, пока все.

P.S.: зарегилась только ради этой ветки)
#18101
zabawa
Сообщений: 7
24.01.2012 21:32:30
Re: Урок: Создание стартовых страниц.
Еще вопросик: как вы верстаете страницу из целого полотна (т.е. дизайна) или вам передают psd файл
#18102
InfinitI
Основатель
Сообщений: 1191
25.01.2012 01:54:04
Re: Урок: Создание стартовых страниц.
zabawa: Еще вопросик: как вы верстаете страницу из целого полотна (т.е. дизайна) или вам передают psd файл
Есть разные варианты. Я например верстальщик, абонент X - дизайнер.
Для начала скажу что работаю практически c несколькими дизайнерами.
Потому как нужно ещё сработаться что бы у всех всё получалось.
Так вот когда уже заказчик всё расписал итд итп, я рисую эскиз для заказчика например в пэинте.
Либо сам заказчик может нарисовать эскиз и показать как бы ему хотелось видеть свою страничку.
После чего я отдаю эскиз дизайнеру, объясняю где что и как должно находиться итд итп.
После как дизайнер нарисовал работу целиком. Он показывает мне эскиз, и если всё хорошо я ему в том же пэинте показываю как нужно разрезать итд итп.
Потом он скидывает мне архив разрезанных уже картинок + сам псд на всякий случай. Ведь может оказаться что где то разрезал не ровно а я уже верстаю сижу. Я зашел в шоп и сам вырезал картинку. Ну а дальше дизайнерское дело практически закончилось. Я верстаю под ключь, закидываю потом все картинки/скрипты/стили/итд на хост и ставлю работу заказчику в чат.
#18107
zabawa
Сообщений: 7
25.01.2012 08:09:28
Re: Урок: Создание стартовых страниц.
ну я впринципе так же верстаю по кусочкам) просто как то пришлось подредактировать код на уже целом полотне, не очень получилось)
#18112

Другие темы раздела