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

34829 |  43

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

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

Зарегистрироваться Войти
Напомнить пароль

Быстрая регистрация через соц.сеть:
Гость сайта
Здравствуйте, а где архив с готовой версткой?
Михаил Базаров
Цитата
Гость сайта пишет:
Здравствуйте, а где архив с готовой версткой?
Приветствую. Приложен к четвертому уроку http://camouf.ru/blog-note/bx_site_created/4.html
Александр
Скажите, а можно ли все блоки (header, left, right, footer) сделать таблицей и там выводить контент? Как это скажется на работе сайта?
Михаил Базаров
Цитата
Александр пишет:
Да, можно как угодно и как считаете оптимальным для своего сайта верстать.
Да, можно как угодно и как считаете оптимальным для своего сайта верстать.
abduRahman
Здравствуйте!!!
Не могу никак понять с чем связана проблема футера. Точнее его не желание прижиматься к низу, упорно тянется вверх.
Следовал всем указаниям урока, но линия футера оказалась сверху текста артикля.
Михаил Базаров
Цитата
abduRahman пишет:
Здравствуйте!!!
Не могу никак понять с чем связана проблема футера. Точнее его не желание прижиматься к низу, упорно тянется вверх.
Следовал всем указаниям урока, но линия футера оказалась сверху текста артикля.
Тяжело подсказать. Это где-то в верстке ошибка. Быть может div не закрыли или недооткрыли где-то блок.
abduRahman
Как я заметил, порыскав в гугле. это распространенная проблема. Лично у вас при верстке такой проблемы никогда не было??
Гость сайта
Здравствуйте! Пробую делать сайт по вашему уроку, но мне нужно поверх картинки написать ссылку, подскажите как это сделать.
Михаил Базаров
Цитата
Гость сайта пишет:
Здравствуйте! Пробую делать сайт по вашему уроку, но мне нужно поверх картинки написать ссылку, подскажите как это сделать.
Например: Текст ссылки
а в style.css

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

a.link {width:ширина картинки; height:высота картинки; disrlay:block; background: путь к картинке; }
Спасибо! Теперь буду знать)
Андрей
Здравствуйте. Подскажите пожалуйста где посмотреть, что почитать. В шаблоне Bitrix 14 версии  нет левого блока, только динамическое меню. Можно ли с помощью
<aside class="left">
</aside>
это поправить. Как правильно ?
Заранее большое спасибо.
Михаил Базаров
Цитата
Андрей пишет:
Здравствуйте. Подскажите пожалуйста где посмотреть, что почитать. В шаблоне Bitrix 14 версии нет левого блока, только динамическое меню. Можно ли с помощью
<aside class="left">
</aside>
это поправить. Как правильно ?
Заранее большое спасибо.
Да. Правильно= это изучить HTML/CSS верстку и творить с шаблонами битрикс все, что душе (замыслу по дизайну) угодно. Первым делом, для профессиональной разработки, нужно абсторгироваться от готовых шаблонов, что идут в комплекте и сделать свой.
idel
Цитата
Здравствуйте!!!
Не могу никак понять с чем связана проблема футера. Точнее его не желание прижиматься к низу, упорно тянется вверх.
Следовал всем указаниям урока, но линия футера оказалась сверху текста артикля.
Все это из-за float...
Константин
Здравствуйте! Пробую делать резиновый сайт,и сразу столкнулся с проблемкой. Дело в том, что шапка выглядит в виде синей сплошной полоски на которой в левой части нарисованный иконки телефон и почты и соответственно там нужно прописать и телефон и почту, проблема в том, что когда шапку прописываю бэкграундом и она естественно растягивается на 100% то в правой части тоже появляются иконки телефона и почты, если прописываю no-repeat то шапка в правой части обрезается и прижимается к левому краю и уже получается что сайт не выглядит как резиновый. Как сделать чтоб шапка занимала 100% и не повторяла значки почты и телефона. Надеюсь поняли суть проблемы. Спасибо!
Михаил Базаров
Цитата
Константин пишет:
Здравствуйте! Пробую делать резиновый сайт,и сразу столкнулся с проблемкой. Дело в том, что шапка выглядит в виде синей сплошной полоски на которой в левой части нарисованный иконки телефон и почты и соответственно там нужно прописать и телефон и почту, проблема в том, что когда шапку прописываю бэкграундом и она естественно растягивается на 100% то в правой части тоже появляются иконки телефона и почты, если прописываю no-repeat то шапка в правой части обрезается и прижимается к левому краю и уже получается что сайт не выглядит как резиновый. Как сделать чтоб шапка занимала 100% и не повторяла значки почты и телефона. Надеюсь поняли суть проблемы. Спасибо!
Если честно- даже примерно не понял. В таких случаях лучше куда-нибудь выложить да показать. Ссылки здесь размещать можно.
Константин
Еще раз перечитайте мой текст, надеюсь теперь поймете, вот сделал скриншот. http://ipicture.ru/Gallery/View/39739015.html
Михаил Базаров
Цитата
Константин пишет:
Еще раз перечитайте мой текст, надеюсь теперь поймете, вот сделал скриншот. http://ipicture.ru/Gallery/View/39739015.html
А зачем вы эту иконку делаете вместе с фоном? Просто поверх еще одним блочком вставьте. В общем это вопрос аккуратности верстки, Вам нужно немного подтянуть эти знания
Константин
Цитата
Михаил Базаров пишет:
Цитата
Константин пишет:
Еще раз перечитайте мой текст, надеюсь теперь поймете, вот сделал скриншот. http://ipicture.ru/Gallery/View/39739015.html
А зачем вы эту иконку делаете вместе с фоном? Просто поверх еще одним блочком вставьте. В общем это вопрос аккуратности верстки, Вам нужно немного подтянуть эти знания
Понял, ну просто дизайнер ее цельной сделал.Исправим.
Виктор
Здравствуйте. У меня есть вопрос. Верстаю резиновый сайт и у меня ниже шапки и логотипа должна быть расположенна большая картинка естественно на всю ширину браузера, в дальнейшем на этом месте хочу сделать слайдер, но сейчас не об этом, так вот, я разместил изображение с помощью таблицы, но когда меняю масштаб сайта то эта картинка деформируется, да она остается привязана к левому и правому краю браузера, но она становится уродливой, меняет размер не пропорционально. Подскажите как исправить ситуацию.
Михаил Базаров
Цитата
Виктор пишет:
Здравствуйте. У меня есть вопрос. Верстаю резиновый сайт и у меня ниже шапки и логотипа должна быть расположенна большая картинка естественно на всю ширину браузера, я разместил изображение с помощью таблицы, но когда меняю масштаб сайта то эта картинка деформируется
Укажите ей ширину width="100%" без ширины (вообще удалите height)
Страницы: 1 2 3 След.

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

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

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

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

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

Случайные заметки из блога
Время на БД и веб сервере отличается на 3600 секунд, тест Битрикс

Достаточно часто, при проверке параметров системы, в Битрикс,...

Вывод элементов с помощью API битрикс

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

Самодельная форма добавления элемента на API Битрикс

Компонент iblock.element.add.form написан таким образом, что...

Вывести новости из конкретного раздела инфоблока Битрикс

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

Валидация пароля и подтверждения при регистрации в битрикс

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

Увидеть файл заказов который передаст Битрикс в 1С

Достаточно часто, для диагностики обмена заказов, интернет-магазина...

© 2011—2017 Частный вебмастер: ИП Базаров, ОГРНИП: 315784700173692. Работает на 1С-Битрикс.

Копирование материалов запрещено: "ГК РФ, часть 4, раздел VII: Права на результаты интеллектуальной деятельности".

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

x
Как к Вам обращаться? *
Ваша электронная почта: *
Доп. материалы (логотип, тех. задание):
 
Обзор
Текст сообщения:

Нажимая на кнопку "Отправить", Вы соглашаетесь на обработку Ваших персональных данных согласно политике конфеденциальности. Ознакомиться с которой, можно в нижнем правом углу сайта