Ваши потребности - наши возможности

WEBBLOG English

Главная ДонецкNews Контакты
Prepared by "Master Video" for educational and not commercial purpose
Темы проекта Web useful, HTML5, CSS3, JavaScript, PHP, MySQL

Web useful

HTML5. Начало

Данный курс предназначен для начинающих верстальщиков, веб-дизайнеров и веб-разработчиков которые только начали своё погружающихся в огромный постоянно развивающийся мир веб-разработки.

Начнём с того, что обеспечим себя всем необходимым для обучения. Нам понадобиться браузер использовать можно любой, который есть на компьютере, но для большего комфорта советую Google Chrome. Если на вашем компьютере его нет, то можно установить с официального сайта следуя инструкциям. После выбора браузера необходимо определиться с редактором кода в интернете их неисчисляемое множество, одними из лучших я считаю Sublime Text и Brackets.

Sublime Text отлично подойдёт как для начинающих так и для гуру веб-разработки, так как объединяет в себе простоту в использовании, производительность, большую базу поддерживаемых языков программирования и приятный дизайн.

Ссылка на скачивание Sublime Text 3

Отличной альтернативой Sublime является Brackets от компании Adobe.

Ссылка на скачивание Brackets

Данный редактор отлично подойдёт для вёрстки (HTML + CSS), так же в отличии от Sublime имеет отличную функцию просмотра изменений в реальном времени (live preview).

На этом заканчивается подготовка к обучению. В следующем уроке мы познакомимся с HTML5.

Read more ...

Footer прибитый к низу страницы

Все кто посещал профессионально оформленные web-сайты, мог заметить вид «прибитого» (прилипающего или на англ. sticky) футера к низу страницы, даже при условии не большого количества контента на ней.

Пример не правильного футера

Пример правильного футера

Данное краткое пособие предназначено для начинающих верстальщиков, поможет за несколько минут сделать «прибитый» футер, такой же как и у официального сайта компании «Мастер Видео».

Необходимый HTML:

<div id="wrap">
	<div id="main">
	</div>
</div>
<div id="footer">
</div>

Реализация «прибитого» футера CSS:

* {
	margin:0;
	padding:0;
}

html, body, #wrap { height: 100%; }

body > #wrap {height: auto; min-height: 100%;} /* блок #wrap занимает всё пространство */

#main { padding-bottom: 66px; } /* блок #main в котором будет располагаться контент
приподнят чтобы не закрывался футером */ #footer { position: relative; margin-top: -66px; /* отрицательный отступ ширины футера. Когда страница
помещается в рамках экрана, 100% ширина блока #wrap вытесняет футер на его же
ширину добавляя странице скролл, благодаря отрицательному отступу футер по
прежнему будет помещаться на странице находясь в низу неё */ height: 66px; clear: both; }
Read more ...