Олег! Проигрываю Твои уроки - многие вещи открывают смысл - весь материал по html и css . становится логичен и понятен, особенно всё становится понятным, когда я прохожу практическую часть - вёрстку сайта - спасибо огромное! Всё здорово и просто написано - это важные знания для постижения сайтостроения.
Для меня, как человека незнакомого с HTML "Курс HTML и CSS за 3 дня" Олега Касьянова стал очень полезным стартом в освоении сайтостроения. Все доступно, а главное дозированно для новичков.
Понравился лаконичный и спокойный темп урока, задания для самостоятельного осмысления услышанного и увиденного.Всем, кто в начале этого интересного занятия - создания сайтов- очень рекомендую курс.
ВиолеттаЗдравствуйте, Олег!
Большое Вам спасибо за ответ!
Еще вчера я приобрела Ваш курс с html и css, несмотря на тот факт, что уже начала обучение
по этой теме на упомянутых курсе Ваших коллег, просто меня терзают смутные сомнения, что их
методика обучения уступает Вашей.
(Предполагаю: Ваша - построена более четко и сжато.)
А в силу своего перфекционизма, считаю, что уж если занялась сайтостроением, то
основополагающую базу должна понимать. С платным шаблоном тоже продвигаюсь.
Вам успехов и новых свершений!
С уважением, Виолетта.
АзаматСпасибо, за то что проделали такую трудоемкую работу, для нас.
Спасибо, что так подробно объяснили что да как. добавлю еще, что лучше ваших курсов, я еще
не видел, надеюсь что качество уроков в дальнейшем будет такого же уровн, а может быть и еще
лучше;)
Огромное спасибо за видео-курс HTML&CSS за 3 дня - честно, мне не 3 дня понадобилось для изучения - потому что я совсем с нуля в этом деле и сейчас ещё в процессе:)
2 года у меня был свой сайт (виртуальная Арт-студия) и там был хаос - во-первых потому что с самого начала у меня не было ни малейшего понимания о логике HTML - я знала чего хочу, но не знала, насколько реально для программиста мои желания выполнить - поэтому то, что было на выходе очень сильно отличалось от того, что было в моей голове в добавок наше сотрудничество закончилось на середине проекта (он очень занятый человек, а на другого программиста у меня просто нет денег) поэтому и решила разобраться сама.
И слава Богу, что нашла ваши курсы по joomla и по HTML- это просто СУПЕР удача!
Сейчас отрисую основные страницы и буду по новой сайт монтировать с учётом тех знаний,
которые получила на ваших видео-курсах.
Мне очень понравился курс. Я всем советую. Курсы от Олега очень понятно изложены, и Олег уделяет много внимания деталям, а это очень Важно.
Я как-то купил курс (не у Олега), так у меня было столько вопросов, а Олег как будто
угадывает, что может возникнуть вопрос, сразу уделяет время на объяснение, казалось бы,
мелких деталей, но как оказывается очень нужных для освоения данной темы.
В общем, курсы от Олега хорошие и не дорогие, поэтому покупайте, изучайте и Вы со
временем обязательно напишите, как и я, положительный отзыв о его курсе.
Здравствуйте, уважаемые друзья и гости блога! Сегодня я вам расскажу, покажу и предоставлю для бесплатного скачивания исходники по созданию адаптивной страницы в html5 и css3, которые будут полезны как начинающим, так и уже сформировавшимся вебмастерам. По крайней мере я надеюсь на это!
За шесть шагов мы с вами пройдем курс обучения по созданию адаптивной страницы в html и css3 для начинающих. Это будет подписная адаптивная страница.
После создания данных файлов и папки для картинок, которые будут размещены на странице. Вам нужно открыть файл index и поместить в него содержимое, которое я вам дам сейчас. Вы его можете редактировать под себя. То есть изменить все заголовки и содержимое текстов, которое будет приемлемо для Вас, а так же картинки.
Для редактирования файлов Вы можете использовать любой текстовый редактор, как простой блокнот, входящий в состав вашего набора Windows, так и более удобный Notepad++. Но конечно лучше для этого использовать Adobe Dreamweaver. Смотрите это на ваше усмотрение.
Вот содержимое файла index:
Создание адаптивной страницы в html5 и css3 для начинающих Создание адаптивной страницы в html5 и css3 для начинающих! Получить Видеоурок "Создание адаптивной страницы в html5 и css3 для начинающих за шесть шагов!"
* Ваши данные не будут разглашаться и передаваться третьим лицам для коммерческих или иных целей!
* Никакого спама, я вам гарантирую!
"Создание адаптивной страницы в html5 и css3 для начинающих за шесть шагов!"
Все шаги создания адаптивной страницы в html5 и css3:
Шаг первый: Создание разметки страницы в html5 и css3
Шаг второй: Назначение общих CSS стилей для создания адаптивной страницы в html5 и css3
Шаг третий: Назначение стилей для header в создании адаптивной страницы на html5 и css3
Шаг четвертый: Описание стилей CSS для формы подписки в создании адаптивной страницы на html5 и css3
Шаг пятый: Описание стилей основного контента в создании адаптивной страницы на html5 и css3
Шаг шестой: Делаем страницу адаптивной в html5 и css3
За шесть шагов мы с вами пройдем курс обучения по созданию адаптивной страницы в html5 и css3 для начинающих. Это будет подписная адаптивная страница. Вы узнаете как это делается, создадите свою собственную адаптивную страницу в html5 и css3, а так же получите все необходимые исходные материалы для этого.
Чтобы получить этот видеурок вам нужно просто ввести свои имя и е-майл в поля которые расположены ниже или выше, как вам будет угодно!
4. Боковая колонкаВ боковую колонку добавим список категорий, последние записи и форму подписки на рассылку:
Категории
Последние записи-
Лето
-
Осень
В подвале страницы разместим информацию о копирайте, кнопки социальных сетей и ссылку на электронную почту:
Мой блог © 2016 Написать письмо $(".nav-toggle").on("click", function(){ $("#menu").toggleClass("active"); });
6. Общие CSS-стилиОбщие стили, сброс стилей браузера по умолчанию:
*, *:after, *:before { box-sizing: border-box; padding: 0; margin: 0; transition: .5s ease-in-out; /* добавим плавность переходов для всех элементов страницы*/ } ul { list-style: none; } a { text-decoration: none; outline: none; } img { display: block; width: 100%; } h1, h2, h3, h4, h5, h6 { font-family: "Playfair Display"; font-weight: normal; letter-spacing: 1px; } body { font-family: "Open Sans", arial, sans-serif; font-size: 14px; line-height: 1; color: #373737; background: #f7f7f7; } /* добавим очистку потока для всех контейнеров, внутри которых задано обтекание дочерних элементов */ header:after, .container:after, footer:after, .widget-posts-list li:after, #subscribe:after { content: ""; display: table; clear: both; } /* стилевой класс, который управляет шириной контейнера сетки*/ .container { margin: 0 auto; width: 100%; max-width: 960px; padding: 0 15px; }
7. Стили для шапки и её содержимого header { width: 100%; background: white; box-shadow: 3px 3px 1px rgba(0,0,0,.05); padding: 15px 0; margin-bottom: 30px; position: relative; } /* логотип */ .logo { display: block; float: left; } .logo span { color: white; display: inline-block; width: 30px; height: 30px; line-height: 30px; border-radius: 50%; margin: 5px 0; text-align: center; text-shadow: 2px 2px 1px rgba(0,0,0,.4); } .logo span:nth-child(odd) { background: #EF5A42; } .logo span:nth-child(even) { background: #F8B763; } /* меню */ #menu { float: right; } #menu li { display: inline-block; margin-right: 30px; } #menu a { color: #111; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; display: block; line-height: 40px; } #menu a:hover { color: #EF5A42; } #menu li:last-child { margin-right: 0; } /* форма поиска */ #searchform { float: right; margin-left: 46px; display: inline-block; position: relative; } #searchform input { width: 170px; float: left; border: none; padding-left: 10px; height: 40px; overflow: hidden; outline: none; color: #9E9C9C; font-style: italic; } #searchform button { background: transparent; height: 40px; border: none; position: absolute; right: 10px; color: #EF5A42; cursor: pointer; font-size: 18px; } #searchform input:focus { outline: 2px solid #EBEBE3; } /* кнопка переключения меню, появляющаяся при ширине 768px */ .nav-toggle { display: none; position: relative; float: right; width: 40px; height: 40px; margin-left: 20px; background: #EF5A42; cursor: pointer; } .nav-toggle span { display: block; position: absolute; top: 19px; left: 8px; right: 8px; height: 2px; background: white; } .nav-toggle span:before, .nav-toggle span:after { content: ""; position: absolute; display: block; left: 0; width: 100%; height: 2px; background: white; } .nav-toggle span:before { top: -10px; } .nav-toggle span:after { bottom: -10px; } /* класс, который будет добавлен в верхнему меню при нажатии на кнопку и покажет скрытое меню*/ #menu.active { max-height: 123px; } 8. Стили для блока с основным содержимым /* левый контейнер */ .posts-list { margin-bottom: 30px; width: 64%; float: left; } /* блок для статьи */ .post { margin-bottom: 35px; } .post-content p { line-height: 1.5; padding-bottom: 1em; } .post-image { margin-bottom: 30px; } .category { margin-bottom: 15px; } .category a { color: #F8B763; text-transform: uppercase; } .post-title { margin-bottom: 12px; font-size: 26px; } /* блок с кнопкой "продолжить чтение" и кнопками социальных сетей */ .post-footer { border-top: 1px solid #EBEBE3; border-bottom: 1px solid #EBEBE3; position: relative; margin-top: 15px; } .more-link { position: relative; display: inline-block; font-size: 10px; text-transform: uppercase; color: white; line-height: 44px; padding: 0 22px; background: #3C3D41; letter-spacing: 0.1em; white-space: nowrap; } .more-link:after { content: ""; display: block; position: absolute; width: 0; height: 0; top: 0; right: 0; border: solid transparent; border-width: 22px 18px; border-left-color: #3C3D41; transform: translateX(100%); } .post-social { position: absolute; left: auto; top: 50%; right: 0; text-align: right; transform: translateY(-50%); padding: 0; font-size: 12px; } .post-social a { display: inline-block; margin-left: 8px; color: #F8B763; width: 25px; height: 25px; line-height: 23px; text-align: center; border-radius: 50%; border: 1px solid; } 9. Стили для боковой колонки /* правый контейнер */ aside { width: 33%; float: right; } /* блок для виджетов */ .widget { padding: 20px 15px; background: white; font-size: 13px; margin-bottom: 30px; box-shadow: 3px 3px 1px rgba(0,0,0,.05); } .widget-title { font-size: 18px; padding: 10px; margin-bottom: 20px; text-align: center; border: 2px solid #F8B763; box-shadow: 3px 3px 0 0 #F8B763; } .widget-category-list li { border-bottom: 1px solid #EBEBE3; padding: 10px 0; color: #c6c6c6; font-style: italic; } .widget-category-list li:last-child { border-bottom: none; } .widget-category-list li a { color: #626262; margin-right: 6px; font-style: normal; } .widget-category-list li a:before { content: "\f105"; display: inline-block; font-family: "FontAwesome"; margin-right: 10px; color: #c6c6c6; } .widget-posts-list li { border-top: 1px solid #EBEBE3; padding: 15px 0; } .widget-posts-list li:nth-child(1) { border-top: none; } .post-image-small { width: 30%; float: left; margin-right: 15px; } .widget-post-title { float: left; } /* форма подписки */ #subscribe { position: relative; width: 100%; padding: 15px 0; } #subscribe input { width: 100%; display: block; float: left; border: 2px solid #EBEBE3; padding: 0 0 0 10px; height: 40px; position: relative; outline: none; color: #9E9C9C; font-style: italic; } #subscribe button { padding: 0 15px; background: transparent; height: 40px; border: none; position: absolute; right: 0; color: #EF5A42; cursor: pointer; font-size: 18px; } #subscribe input:focus + button { background: #EF5A42; color: white; } 10. Стили для нижнего колонтитулаПодвал сайта разделим на три равных столбца:
Footer { padding: 30px 0; background: #3C3D41; color: white; } .footer-col { width: 33.3333333333%; float: left; } .footer-col a { color: white; } .footer-col:last-child { text-align: right; } .social-bar-wrap { text-align: center; } .social-bar-wrap a { padding: 0 7px; font-size: 18px; }
11. Медиа-запросы @media (max-width: 768px) { /* показываем кнопку для переключения верхней навигации */ .nav-toggle { display: block; } header { padding: 10px 0; } /* скрываем верхнее меню, отменяем обтекание, позиционируем его, сместив на высоту шапки сайта */ #menu { max-height: 0; background: white; float: none; position: absolute; overflow: hidden; top: 63px; right: 0; left: 0; margin: 0; padding: 0; z-index: 3; } /* делаем элементы списка блочными, чтобы они располагались друг под другом */ #menu li { display: block; text-align: center; border-bottom: 1px solid #EBEBE3; margin-right: 0; } /* отменяем обтекание левой и правой колонок, устанавливаем им ширину 100%*/ .posts-list, aside { width: 100%; float: none; } .widget-post-title { font-size: 1.5em; } } @media (max-width: 480px) { /* отменяем обтекание для логотипа и выравниваем по центру*/ .logo { float: none; margin: 0 auto 15px; display: table; } .logo span { margin: 0 2px; } /* позиционируем меню на увеличившуюся высоту шапки */ #menu { top: 118px; } /* позиционируем форму поиска по левому краю */ #searchform { float: left; margin-left: 0; } /* убираем верхнюю и нижнюю границы и выравниваем кнопку по центру */ .post-footer { border-top: none; border-bottom: none; text-align: center; } /* отменяем позиционирование кнопок соцсетей */ .post-social { position: static; text-align: center; transform: none; margin-top: 20px; } .widget-post-title { font-size: 1.2em; } /* отменяем обтекание для столбцов подвала страницы */ .footer-col { float: none; margin-bottom: 20px; width: 100%; text-align: center; } .footer-col:last-child { text-align: center; margin-bottom: 0; } } 12. Скрипт для мобильного менюЗа показ-скрытие верхнего меню при клике на кнопку (переключается высота меню - от нулевой до равной её содержимому) отвечает код jQuery, который мы ранее добавили в разметку страницы перед закрывающим тегом :
$(".nav-toggle").on("click", function(){ $("#menu").toggleClass("active"); });
С появлением мобильных устройств: планшетов и смартфонов, умение делать адаптивную вёрстку веб-страниц
стало очень востребованным.
Это означает, что сайт должен нормально просматриваться на любых устройствах. Ну, а уж, если не точно так же, как он
отображается на стационарном компьютере, то близко к этому. Главное, чтоб с ним было удобно работать:
просматривать, искать что-либо, нажимать на кнопки, и т.д..
Нашёл в сети интересный, бесплатный мини-курс по адаптивной вёрстке сайтов на основе HTML5 и CSS3.
Изучил его.
** Скачать себе этот курс можно, заполнив верхнюю или нижнюю тестовую форму запроса. **
Решил проверить, можно ли(?) сверстать адаптивный ко всем устройствам сайт, БЕЗ использования технологий HTML5 и CSS3 .
Пробую!
Верстал в кодировке "ANSI" , и с полной служебной записью: "HTML 4.01 Transitional" , вместо положенной по правилам HTML5:
Новые тэги: header, section, article не использовал. Оказалось, достаточно блочной вёрстки, как обычно на тэгах div .
Новый атрибут формы у тэгов input "placeholder" (подсказка) в браузере IE8 НЕ сработал. В остальных - работает .
Аналогично. Новый атрибут "типа" у тэгов input type="email" срабатывает только в современных браузерах.
Атрибут "value" использовал по-прежнему для внесения значений в формы.
Самое главное! Сначала сайт верстается на обычном мониторе, а уже потом в тэг head
вносится строчка кода:
Такая запись говорит браузеру (**так объясняется в курсе!
), чтобы он правильно масштабировал
контент страницы
под используемое устройство
.
Хотя, на самом деле, такая запись браузеру
ровным счётом ничего не говорит
. Это "обращение" к поисковикам
.
А вот они уже о-о-очень "ревностно" относятся к наличию/отсутствию подобной записи в тэге head
,
особенно в последнее время. Проверено!
Однако, нужно сказать, что современные браузеры мобильных устройств , похоже, научились всё же читать "чужие письма".
**К примеру. Проводя испытания такой строчки кода, я внёс её в неадаптированную страницу сайта, и... ... ... . И тут же быстро убрал!
Проверив на смартфоне её отображение, увидел, что браузер смартфона выдал "жуть", т.е. показал ПОЛНЫЙ РАЗМЕР страницы, снабдив возможностью длиннющего горизонтального скролла .
Новый атрибут для тэгов img "srcset" в испытываемой версии "HTML 4.01" не работает!
Напомню, и особо выделю, что я никаких медиа-запросов НЕ делал . Испытания же!
Примеры записей в таблице CSSПрежде всего о том, какие(?) проверены свойства CSS и, как(?) они сработали.
Свойство background-size: cover; лучше НЕ использовать . Рисунки "режутся", т.е. выходят за пределы экранов мониторов. Приходится уменьшать масштаб, чтобы их увидеть целиком.
И напротив!
Свойство background-size: contain; работает ОТЛИЧНО! Во всех браузерах! Оптимально для "центровых " рисунков . Оно их великолепно масштабирует под любой размер монитора.
Аналогично.
Это же свойство background-size: contain; сработало ОТЛИЧНО и для "боковых " рисунков , т.е. левых/правых. Пробовал!
Боковые рисунки выводил через тэги span
, прописав им float: left
или right
, но ГЛАВНОЕ!
Главное
, что выводил рисунок, как фоновый на 2 символа неразрывного пробела
, дав тексту размер,
равный высоте фонового рисунка
(**
уменьшив размер текста, рисунок уменьшается пропорционально, без искажений)
.
Схемы вывода ниже.
