Видеоурок №2: верстка макета на HTML/CSS

 34829 |  43

Верстаем макет на HTML/CSS, для создания шаблона битрикс. Для работы понадобятся: psd зарисовочка из первого урока и заготовка для верстки скачать. Урок рассчитан на подготовленного пользователя, мало мальски разбирающегося в элементарной верстке таблицами и блоками. Верстаем общий скелет сайта без детализации, дальнейшую доводку до ума будем производить сразу в битриксе.
PS: Заметил несколько не критичных опечаток в коде. Будем исправлять в 5-ом уроке. Особо не влияют на отображение, но все же.

Список всех серий Скачать видео с ЯДиска. Формат .mp4

Предыдущее видео Следующее видео

Уважаемый читатель! В связи с участившимся спамом в комментариях, возможность писать доступна только для зарегистрированных пользователей

Зарегистрироваться Войти

Напомнить пароль

Быстрая регистрация через соц.сеть:

Гость сайта 02.01.2014
Здравствуйте, а где архив с готовой версткой?

Михаил Базаров 02.01.2014

Цитата
Гость сайта пишет: Здравствуйте, а где архив с готовой версткой?

Приветствую. Приложен к четвертому уроку http://camouf.ru/blog-note/bx_site_created/4.html

Александр 12.02.2014
Скажите, а можно ли все блоки (header, left, right, footer) сделать таблицей и там выводить контент? Как это скажется на работе сайта?

Михаил Базаров 12.02.2014

Цитата
Александр пишет: Да, можно как угодно и как считаете оптимальным для своего сайта верстать.

Да, можно как угодно и как считаете оптимальным для своего сайта верстать.

abduRahman 07.04.2014
Здравствуйте!!! Не могу никак понять с чем связана проблема футера. Точнее его не желание прижиматься к низу, упорно тянется вверх. Следовал всем указаниям урока, но линия футера оказалась сверху текста артикля.

Михаил Базаров 07.04.2014

Цитата

abduRahman пишет:
Здравствуйте!!!
Не могу никак понять с чем связана проблема футера. Точнее его не желание прижиматься к низу, упорно тянется вверх.
Следовал всем указаниям урока, но линия футера оказалась сверху текста артикля.

Тяжело подсказать. Это где-то в верстке ошибка. Быть может div не закрыли или недооткрыли где-то блок.

abduRahman 07.04.2014
Как я заметил, порыскав в гугле. это распространенная проблема. Лично у вас при верстке такой проблемы никогда не было??

Гость сайта 08.04.2014
Здравствуйте! Пробую делать сайт по вашему уроку, но мне нужно поверх картинки написать ссылку, подскажите как это сделать.

Михаил Базаров 08.04.2014

Цитата
Гость сайта пишет: Здравствуйте! Пробую делать сайт по вашему уроку, но мне нужно поверх картинки написать ссылку, подскажите как это сделать.

Например: Текст ссылки
а в style.css

a.link {width:ширина картинки; height:высота картинки; disrlay:block; background: путь к картинке; }

Вячеслав 08.04.2014

Цитата
Михаил Базаров пишет: Например: Текст ссылки а в style.css a.link {width:ширина картинки; height:высота картинки; disrlay:block; background: путь к картинке; }

Спасибо! Теперь буду знать)

Андрей 09.04.2014
Здравствуйте. Подскажите пожалуйста где посмотреть, что почитать. В шаблоне Bitrix 14 версии нет левого блока, только динамическое меню. Можно ли с помощью <aside class="left"> </aside> это поправить. Как правильно ? Заранее большое спасибо.

Михаил Базаров 09.04.2014

Цитата

Андрей пишет:
Здравствуйте. Подскажите пожалуйста где посмотреть, что почитать. В шаблоне Bitrix 14 версии нет левого блока, только динамическое меню. Можно ли с помощью
<aside class="left">
</aside>
это поправить. Как правильно ?
Заранее большое спасибо.

Да. Правильно= это изучить HTML/CSS верстку и творить с шаблонами битрикс все, что душе (замыслу по дизайну) угодно. Первым делом, для профессиональной разработки, нужно абсторгироваться от готовых шаблонов, что идут в комплекте и сделать свой.

idel 11.04.2014

Цитата
Здравствуйте!!! Не могу никак понять с чем связана проблема футера. Точнее его не желание прижиматься к низу, упорно тянется вверх. Следовал всем указаниям урока, но линия футера оказалась сверху текста артикля.

Все это из-за float...

Константин 12.04.2014
Здравствуйте! Пробую делать резиновый сайт,и сразу столкнулся с проблемкой. Дело в том, что шапка выглядит в виде синей сплошной полоски на которой в левой части нарисованный иконки телефон и почты и соответственно там нужно прописать и телефон и почту, проблема в том, что когда шапку прописываю бэкграундом и она естественно растягивается на 100% то в правой части тоже появляются иконки телефона и почты, если прописываю no-repeat то шапка в правой части обрезается и прижимается к левому краю и уже получается что сайт не выглядит как резиновый. Как сделать чтоб шапка занимала 100% и не повторяла значки почты и телефона. Надеюсь поняли суть проблемы. Спасибо!

Михаил Базаров 12.04.2014

Цитата

Константин пишет:
Здравствуйте! Пробую делать резиновый сайт,и сразу столкнулся с проблемкой. Дело в том, что шапка выглядит в виде синей сплошной полоски на которой в левой части нарисованный иконки телефон и почты и соответственно там нужно прописать и телефон и почту, проблема в том, что когда шапку прописываю бэкграундом и она естественно растягивается на 100% то в правой части тоже появляются иконки телефона и почты, если прописываю no-repeat то шапка в правой части обрезается и прижимается к левому краю и уже получается что сайт не выглядит как резиновый. Как сделать чтоб шапка занимала 100% и не повторяла значки почты и телефона. Надеюсь поняли суть проблемы. Спасибо!

Если честно- даже примерно не понял. В таких случаях лучше куда-нибудь выложить да показать. Ссылки здесь размещать можно.

Константин 13.04.2014
Еще раз перечитайте мой текст, надеюсь теперь поймете, вот сделал скриншот. http://ipicture.ru/Gallery/View/39739015.html

Михаил Базаров 13.04.2014

Цитата
Константин пишет: Еще раз перечитайте мой текст, надеюсь теперь поймете, вот сделал скриншот. http://ipicture.ru/Gallery/View/39739015.html

А зачем вы эту иконку делаете вместе с фоном? Просто поверх еще одним блочком вставьте. В общем это вопрос аккуратности верстки, Вам нужно немного подтянуть эти знания

Константин 13.04.2014

Цитата

Михаил Базаров пишет:

Цитата
Константин пишет: Еще раз перечитайте мой текст, надеюсь теперь поймете, вот сделал скриншот. http://ipicture.ru/Gallery/View/39739015.html

Понял, ну просто дизайнер ее цельной сделал.Исправим.

Виктор 15.04.2014
Здравствуйте. У меня есть вопрос. Верстаю резиновый сайт и у меня ниже шапки и логотипа должна быть расположенна большая картинка естественно на всю ширину браузера, в дальнейшем на этом месте хочу сделать слайдер, но сейчас не об этом, так вот, я разместил изображение с помощью таблицы, но когда меняю масштаб сайта то эта картинка деформируется, да она остается привязана к левому и правому краю браузера, но она становится уродливой, меняет размер не пропорционально. Подскажите как исправить ситуацию.

Михаил Базаров 15.04.2014

Цитата

Виктор пишет:
Здравствуйте. У меня есть вопрос. Верстаю резиновый сайт и у меня ниже шапки и логотипа должна быть расположенна большая картинка естественно на всю ширину браузера, я разместил изображение с помощью таблицы, но когда меняю масштаб сайта то эта картинка деформируется

Укажите ей ширину width="100%" без ширины (вообще удалите height)

Простой сайт на битрикс:

Здесь выложен видеоурок по созданию сайта на системе управления 1С-Битрикс. Поэтапно создан сайт для вымышленной фирмы "Компьютерная техподержка".

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

Исключительно возможностями битрикс создается и наполняется сайт.

Образец: comp-assistant.ru Плейлист на Плейлист на youtube

Сейчас на сайте:

и 3 гостей

Из стран: 1 чел. 1 чел. 1 чел.

Подписывайтесь на youtube канал, что-бы быть в курсе

Случайные заметки из блога

Время на БД и веб сервере отличается на 3600 секунд, тест Битрикс
Достаточно часто, при проверке параметров системы, в Битрикс,...

Вывод элементов с помощью API битрикс
Иногда, выводить элементы инфоблока с помощью компонентов, может...

Самодельная форма добавления элемента на API Битрикс
Компонент iblock.element.add.form написан таким образом, что...

Вывести новости из конкретного раздела инфоблока Битрикс
Бывает что требуется вывести конкретные новости или статьи из...

Валидация пароля и подтверждения при регистрации в битрикс
Встала задачка сделать валидацию пароля и его подтверждения ...

Увидеть файл заказов который передаст Битрикс в 1С
Достаточно часто, для диагностики обмена заказов, интернет-магазина...