|
Учимся верстать вместе с DIZ-CS
|
|
Дата: Сб, 19.01.2013, 16:20:58 | Сообщение # 1|
|
Учимся верстать вместе с DIZ-CS
Данная тема научит вас всем основным возможностям верстки. Мы не будем выкладывать уроки "высшего качества", мы всего лишь учим основам верстки. Вы научитесь верстать практически все, что нужно для юного верстальщика
Что будет в уроках?
- Пояснение каждого пункта в CSS (по надобности буду пояснять пункты html). Я постараюсь максимально точно
- Макеты (на чем основан урок) в формате .PSD
- Понятный для пользователя код
- Мы учим верстать только под современные браузеры
- Ваши вопросы будут приниматься в этой теме
- Макеты и ваши идеи по урокам вы также можете мне предложить в данной теме, за что вы можете получить + к вашему количеству репутации за идею.
Скоро будет добавлен первый урок. После него можете начать обсуждение. Пока-что вам это не рекомендую 
Сообщение отредактировал Stendy - Сб, 19.01.2013, 16:44:01
|
|
Дата: Пн, 21.01.2013, 05:47:01 | Сообщение # 2|
|
Урок №1
В данном уроке мы рассмотрим верстку верхней части сайта
 Скачать PSD можно в прикрепленных файлах
1. Стилизация нашей верхней части: (коротко и ясно, css)
Код #header { // Класс верхней части
background:url(http://lesson-ds.ucoz.ru/lesson1/h_bg.png) no-repeat; // Прописываем фон.
width:1152px; // Прописываем ширину фона
height:111px; // Прописываем высоту фона
margin:0 auto; // Делаем элемент по центру
padding-top:11px; // Отступы внутри
}
#logo { // Класс логотипа
background:url(http://lesson-ds.ucoz.ru/lesson1/logo.png) no-repeat; // Прописываем фон логотипа
width:144px; // Прописываем ширину логотипа
height:59px; // Прописываем высоту логотипа
float:left; // Делаем расположение логотипа в левой части верхней части
margin:10px 0 0 170px; // Выравниваем элемент
}
#h_banner { // Прописываем класс баннера
float:right; // Делаем расположение баннера в правой части верхней части
margin:9px 40px; // Выравниваем элемент
}
#h_menu { // Основной класс меню
float:right; // Делаем расположение меню в правой части верхней части
height:37px; // Прописываем высоту меню
list-style:none; // Убираем маркеры в меню
margin:0 5px 0 0; // Выравниваем меню
}
#h_menu li {
float:left; // Делаем расположение ссылок в меню с левой части
height:37px; // Прописываем высоту меню
}
#h_menu li a {
height:37px; // Прописываем высоту меню
padding:0 15px; // Выравниваем текст в ссылке меню
text-decoration:none; // Убираем подчеркивание ссылок
color:#fff; // Цвет ссылки в меню
font:11px Tahoma; // Шрифт и его размер
}
2. Код HTML:
Код <div id="header"> <a href="#"><div id="logo"></div></a> <ul id="h_menu"> <li><a href="/">Главная сайта</a></li> <li><a href="/forum">Форум сайта</a></li> <li><a href="/load">Каталог файлов</a></li> </ul> <div id="h_banner"><a href="http://diz-cs.ru/"><img src="http://diz-cs.ru/banner/bigban.png" alt="Все для CS сайтов и системы uCoz" width="468" height="60" border="0"></a></div> </div>
Если возникнут проблемы с HTML кодом, вопросы задавать в теме. Не стал пояснять что, да как в коде HTML, там разобраться самому можно
Задаем вопросы, комментируем
Сообщение отредактировал Stendy - Вт, 22.01.2013, 08:06:17
|
|
Дата: Пн, 21.01.2013, 05:55:50 | Сообщение # 3|
|
Это вам пригодится
- Атрибуты для кода background.
repeat-y - изображения тянется в высоту, характерно для блоков. repeat-x - изображения тянется в ширину, характерно для резиновых дизайнов и различных элементов. no-repeat - изображения никак не тянется, характерно для фул (полных) изображений и фиксированных дизайнов. repeat - дизайн тянется как в высоту, так и в ширину, характерно для фона сайта. center - изображение будет установлено только своей центральной частью, характерно для фонов единой картинкой. left, right - изображение встанет по определенным сторонам, в данном случае левая или правая.
- Чем же отличается "margin" от "padding"?
Есть 2 очень схожих тега: маргин и паддинг, каждый из них делает отступы, даже их применение очень схоже. Так давайте же разберем, что каждый из них обозначает.
Тег "margin" обозначает отступление ВНЕШНЕГО класса <div>, а вот тег "padding" обозначает отступы ВНУТРИ класса, в котором установлен padding.
- Как применяются теги "margin", "padding".
Применение тегов маргин и паддинг идет по часовой стрелке: margin:25px 15px 22px 10px. Часовая стрелка идет так: верх, лево, низ, право; таково же и применение тегов маргин и паддинг: 25px - от верха, 10px - от лева, 22px - от низа, 15px - от права. Данный метод значительно уменьшит ваш код css, сами представьте, толи бы вы использовали margin-top, margin-left... это сколько место только для одного класса, а здесь один раз маргин, и выставил ото всюду. Еще есть интересная штука, применяется в маргине (может быть и в теге padding тоже, но я тестировал только маргин). Чтобы выровнять элемент по центру используем: margin:0 auto
Сообщение отредактировал Stendy - Пн, 21.01.2013, 16:12:49
|
|
Дата: Пн, 21.01.2013, 21:45:17 | Сообщение # 4|
|
Спасибо нашел пару фичей. Добавил в избранное, буду посещать чаще чем каждый день, большое спасибо! Надеюсь будете пополнять тему!
|
|
Дата: Пн, 21.01.2013, 23:12:42 | Сообщение # 5|
|
Мне очень нравится данная тема. Каждый день буду заходить сюда и ждать новых обновлений))
|
|
Дата: Вт, 22.01.2013, 09:06:03 | Сообщение # 6|
|
Урок №2
В данном уроке мы рассмотрим верстку вида материалов
1. Код CSS: Код .viewn {
width:481px;
height:auto;
margin:0 0 5px 0; // Отступы от материалов
padding:0;
font:11px Tahoma; // Стиль шрифта во всем виде материалов
color:#fff;
}
.viewn_title {
background:url(http://lesson-ds.ucoz.ru/lesson2/title.png) no-repeat;
width:481px;
height:38px;
line-height:38px; // Выравниваем текст строго по центру
padding-left:10px;
}
.viewn_content {
background:#242424;
border-radius:0 0 5px 5px; // Закругления фона контента только в нижних углах
-moz-border-radius:0 0 5px 5px; // Класс закругления для браузера "Mozilla"
-ms-border-radius:0 0 5px 5px; // Класс закругления для браузера "IE"
-webkit-border-radius:0 0 5px 5px; // Закругления для браузеров "Safara and Chrome"
padding:8px; // Отступы внутри контента
}
.viewn_content_in {
height:137px;
}
.viewn_screen {
float:left; // Расположение скриншота
background:#30445b;
border-radius:5px; // Закругление фона скриншота
width:145px;
height:130px;
}
.viewn_screen img { // Класс изображения для класса viewn_screen
width:139px;
height:124px;
margin:3px; // Отступы изображения от родительного класса
}
.viewn_message {
float:right; // Расположение текста
width:305px;
padding:0 5px 0 5px;
}
.viewn_info {
text-align:center; // Расположение текста
color:#fff;
} Код HTML: Код <div class="viewn"> <div class="viewn_title">Название материала</div> <div class="viewn_content"> <div class="viewn_content_in"> <div class="viewn_screen"><img src="http://diz-cs.ru/avatar/44/902178.png"></div> <div class="viewn_message">Контент материала</div> </div> <div class="viewn_info"> Просмотров: <b>50</b> | Скачиваний: <b>50</b> | Автор: <b>Stendy</b> </div> </div> </div>
Не стал подписывать некоторые атрибуты, т.к вы можете их посмотреть в предыдущем уроке
|
|
Дата: Вт, 22.01.2013, 18:20:10 | Сообщение # 7|
|
Stendy, Спасибо за урок! Ждем следующий думаю будет что-то интересное!
|
|
Дата: Вт, 22.01.2013, 18:27:48 | Сообщение # 8|
|
nowkaaaaaaaaa, делайте заказы, что хотели-бы увидеть
|
|
Дата: Вт, 22.01.2013, 18:34:47 | Сообщение # 9|
|
Stendy, Хотел бы увидеть вид материала форума как сверстать)
|
|
Дата: Вт, 22.01.2013, 18:35:25 | Сообщение # 10|
|
[b]Stendy[/b], А можешь сделать урок насчёт того как сверстать информер??
Скрин в лс кинул
|
|
Дата: Вт, 22.01.2013, 18:40:29 | Сообщение # 11|
|
nowkaaaaaaaaa, пример желательно в лс))
DestiN, просмотрел. Такой информер в основном берется из основных каркасов форума, т.е я могу сделать, но его лучше делать табличной версткой, а я в ней не очень))
|
|
Дата: Вт, 22.01.2013, 20:18:13 | Сообщение # 12|
|
Цитата (Stendy) но его лучше делать табличной версткой, а я в ней не очень))
div рулит, запили еще что нибудь, интересно смотреть. на css3 мб что нибудь запили если знаешь.
|
|
Дата: Ср, 23.01.2013, 01:56:35 | Сообщение # 13|
|
Давай еще такие уроки по верстке таких деталей: блок, меню, низ сайта и как слепить их этого шаблон) И будет шик) И потом в теме сделать подряд все уроки, а потом уже комментарии. Большое спасибо за уроки)
Мой старый ник M[E]RLIN.
|
|
Дата: Пт, 25.01.2013, 06:21:43 | Сообщение # 14|
|
Не забывайте убирать подсказки в коде
|
|
Дата: Пт, 25.01.2013, 12:10:06 | Сообщение # 15 |
