Руководство по созданию базового адаптивного веб-сайта

Здравствуйте, это мое первое сообщение на этом форуме.

Мне нужно создать новый сайт, довольно простой, с несколькими страницами.

Это сайт компании (моей компании) и предназначенный для продажи продукта.

Продукт представляет собой программное обеспечение для Windows (я упоминаю об этом, чтобы вы могли более или менее знать, о чем сайт).

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

Я надеюсь, что я попал в нужное место, а если это не так, пожалуйста, укажите мне, куда мне идти. Первая страница, над которой я работаю, — это домашняя страница домена.

На данный момент это будет только целевая страница, очень простая и со ссылкой на главную страницу продукта.

Страницы продуктов будут находиться по адресу www.domain.com/ProductName/

. Пытаюсь сделать разметку или распределение разделов на странице с помощью поплавков. я читаю https://www.w3schools.com/html/html_layout.asp

и на основе этого примера создадим HTML-текст.

Проблема в разделе заголовка, я хотел бы разделить раздел заголовка следующим образом: в 30% левой части я хочу отобразить изображение, которое является логотипом компании, а в остальных 70% (правая часть ), чтобы разместить текст типа «Добро пожаловать на сайт этой компании».

Вопрос в том, как.

... хотя это мои догадки, поскольку я не знаю, что это за изображение, что такое текст и как вы его используете на странице.

Вышеупомянутая попытка использовать технику под названием «замена изображения Гилдера-Левина», чтобы для пользователей, которые не получают изображения из-за пропускной способности или доступности, страница по-прежнему будет полезна. Несмотря на это, помните, что ваш H1 (единственное число) является ТО (единственное число) головаинг (единственное число) что все на каждый страница сайта должна быть подразделом; вот почему так должно быть ПЕРВЫЙ содержательный элемент на ваших страницах. Точно так же, как H2 (или HR) указывает начало основного подраздела страницы, первый H2 (или HR) обозначает начало основного контента вашей страницы. (необязательно, если вы используете тег MAIN HTML 5), H3 отмечает начало подраздела предшествующего ему H2, H4 указывает начало предшествующего ему подраздела H3 и т. д., устанавливая структуру вашего документа. ОНИ НЕ ОЗНАЧАЮТ шрифты разной толщины и размера или «нарисуйте линию по экрану!» Правило №1 HTML, если вы выберете ЛЮБОЙ Из-за внешнего вида ваших тегов по умолчанию вы выбираете неправильную разметку по совершенно неправильным причинам. Вот почему большинство примеров буткрапа, начинающих страницу с H4 и использующих DIV+IMG для выполнения работы H1, являются чистым 3i chazerei! При правильном построении HTML вы должны писать как можно большую часть вашего контента (или разумную копию будущего контента) сначала так, как будто внешний вид даже не соответствует грамматическим нормам, используя семантическую разметку. ПЕРВЫЙ. Затем и только тогда, когда это будет завершено, вы применяете STYLE и семантически нейтральные теги, такие как SPAN и DIV, а также классы/идентификаторы по мере необходимости. И только по мере необходимости. См. мою статью о прогрессивном улучшении, которая разрушает «здравый/рациональный» подход к созданию доступного адаптивного веб-сайта.
https://cutcodedown.com/article/progressive_enhancement

Ничего страшного, вы только что выучили основы.

Теперь изучите загрузку других фреймворков.

Это поможет вам сделать этот сайт очень легко.

Я думаю, что требования к вашему сайту не так уж и велики.

Так что просто бутстрап может вам помочь.

Или вы можете использовать CMS, например WordPress.

Тогда вам не нужно изучать какой-либо код.

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

Адаптивный макет позволяет вашему веб-сайту адаптироваться к различным экранам и устройствам и обеспечивать идеальный вид.

Существуют десятки концепций макета веб-сайта, которым вы можете научиться на популярных обучающих платформах, таких как w3schools.com, однако выбор правильного макета для вашего сайта может оказаться сложной задачей.

Что касается вашей проблемы, вы можете использовать

для раздела заголовка, а затем поместить в него два div.

Установите свойство float слева и выберите ширину: 30% для первого и ширину: 70% для второго элемента div, чтобы получить желаемый эффект.

Вы также можете использовать макет Flexbox или сетку, чтобы получить этот макет.

Для получения более подробной информации посетите нашу страницу услуг веб-дизайна.

И это базовый код, который я использую: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_layout_float

Как я могу разделить раздел заголовка и поместить изображение слева? ТИА.

Спасибо вам, ребята.

Я прочитал указанное выше руководство на сайте Cutcodedown.com и уже смог настроить эту простую целевую страницу с помощью flexbox.

Да, в этом и была проблема: похоже, существует несколько способов сделать более или менее одно и то же (флоаты, флексбоксы и т. д.).

Я понял, что нужно сначала сосредоточиться на содержании и использовать H1, H2, H3 для разделов.

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

Я спрошу, если у меня возникнут вопросы.

Большое вам спасибо.