Ранее я уже дал вам Код сайта на чистом HTML, теперь же применим CSS и напишем блочный шаблон сайта.
В этой статье я дам вам не только код блочного шаблона сайта, а и подробно расскажу, и покажу, что и как в нём можно изменять, и куда складывать файлы.
Итак, такой вот сайт.
Тему грузоперевозок я взял для примера потому, что чаще всего именно люди работающие в этой сфере, обращаются ко мне за помощью.
Но Вы, прочитав статью, сможете сделать всё по своей тематике, и со своей конструкцией каркаса сайта.
Времени это займёт столько, сколько потребуется на внимательное прочтение статьи, и материалов по ссылкам, и последовательное выполнение моих инструкций.
Код:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Код блочного сайта</title>
/* Стилевое оформление */
<style>
body{
background:#c0c0c0; /* Меняется фон экрана, выбирается здесь */
}
#wrapper{ /* Оболочка страницы сайта */
width: 900px; /* Меняется ширина страницы */
margin: 0 auto;
background:#f2e8c9; /* Меняется задний фон страницы */
}
/* Шапка сайта */
#header{
position:relative; /* Задаём блоку относительное позиционирование для того, чтобы затем размещать, в нём другие элементы и позиционировать относительно его границ поверх фоновой картинки и заголовка */
height: 250px; /* Высота шапки */
background-color: #ffffff; /* Фон шапки */
margin-bottom: 5px; /* Нижний отступ шапки от остального контента */
border-radius: 5px; /* Закругляются углы блока */
box-shadow: rgba(0,0,0,0.5) 0px 1px 3px; /* Тень. Визуально приподнимает блок над оболочкой */
}
img{ /* Фоновая картинка в шапке */
float: left; /* Разрешаем наплывание других элементов на картинку */
margin: -40px 0 0 0;} /* Размещаем картинку в блоке header. 1-я и 3-я цифры - двигаем вверх-вниз, 2-я и 4-я цифры - двигаем вправо-влево */
h1{ /* Заголовок сайта */
margin:0 0 10px 40px; /* Заголовок двигается верх-вправо-вниз-влево. */
color:#464451; /* Цвет заголовка */
}
.nomer{ /*Подзаголовок (номер телефона)*/
position:absolute; /* Позиционируем абсолютно подзаголовок, относительно границ блока header. Также можно разместить в шапке сайта ещё другие картинки и абзацы поверх фоновой картинки и заголовка */
top:5px; /* Двигается вверх-вниз */
left:680px; /* Двигается вправо-влево */
font-size: 25px; /* Размер букв подзаголовка */
font-style:italic; /* Курсив */
font-weight:bold; /* Жирный */
color:#464451; /* Цвет букв подзаголовка */
}
/* Сайдбар (колонка справа) */
#sidebar{ /* Блок сайдбара */
background-color: #ffffff; /* Фон блока */
width: 180px; /* Ширина блока */
padding: 10px; /* Отступ текста от краёв */
float: right; /* Размещаем блок справа от других элементов, наплывание или обтекание справа). Если делать сайдбар слева, то значение right меняем на left */
border-radius: 5px; /* Закругляем углы блока */
box-shadow: rgba(0,0,0,0.5) 0px 1px 3px; /* Задаём блоку тень */
}
.marcer{ /* Галочки маркеры меню */
float: left; /* Размещаем слева от текста */
margin: 5px 5px 0 0; /* Двигаются вверх-вправо-вниз-влево */
}
/* Контент (статья) */
#content{ /* Блок контента */
margin-bottom: 5px; /* Отступ блока статьи от блока подвала */
width: 676px; /* Ширина статьи */
padding: 10px; /* Отступ текста от краёв блока */
background: #ffffff; /* Фон статьи */
border-radius: 5px;
box-shadow: rgba(0,0,0,0.5) 0px 1px 3px;
}
.left{ /* Картинка в тексте слева */
float: left;
margin: 30px 7px 7px 7px;
}
.right{ /* Картинка в тексте справа */
float: right;
margin: 7px 0 7px 7px;
}
/* Подвал */
#footer{ /* Блок подвала */
height:80px; /* Высота блока подвала */
background-color: #ffffff; /* Фон блока подвала */
margin-bottom: 10px; /* Отступ снизу */
border-radius: 5px; /* Закруглённые углы */
box-shadow: rgba(0,0,0,0.5) 0px 1px 3px; /* Тень блока */
}
.clear{ /* Запрет наплывания. Устанавливается для того, чтобы блок контента, при заполнении текстом и изображениями не наплывал на подвал */
clear: both;
}
.fon{ /* Номер телефона */
float:left; /* Разрешаем другим элементам обтекать абзац справа */
margin:20px 0 0 20px;
}
.fax{ /* Номер факса */
float:left;
margin:20px 0 0 60px;
}
.mail{ /* Адрес E-mail */
float:left;
margin:20px 0 0 60px;
}
</style>
</head>
<body>
<div id="wrapper"> <!--Оболочка страницы-->
<!--Шапка сайта-->
<div id="header">
<!--Заголовок сайта-->
<h1>Грузоперевозки</h1>
<!--Описание (телефон)-->
<p class="nomer">234-49-50 <br> +7 900 650 33 45</p>
<!--Фоновая картинка в шапке сайта-->
<img src="http://trueimages.ru/img/cf/26/9116df15.png">
</div>
<!--Сайдбар-->
<div id="sidebar">
<!--меню-->
<h3>На нашем сайте</h3>
<!--Картинки маркеров меню (галочки)-->
<p><img class="marcer" src="http://trueimages.ru/img/99/91/dea39f15.png" width="10" height="10">Наши сотрудники</p>
<p><img class="marcer" src="http://trueimages.ru/img/99/91/dea39f15.png" width="10" height="10">Наша техника</p>
<p><img class="marcer" src="http://trueimages.ru/img/99/91/dea39f15.png" width="10" height="10">Прайс</p>
<!--Прямая синяя линия-->
<hr width="50" color="#037FFC" size="5">
<!--Общая информация в сайдбаре-->
<h3>Другая информация</h3>
</div>
<!--Основной контент (статья)-->
<div id="content">
<!--Картинка слева-->
<img class="left" src="http://trueimages.ru/img/81/90/b1718f15.png">
<!--Заголовок статьи-->
<h3>Наша работа</h3>
<!--Текст статьи-->
<p>Здравствуйте уважаемые будущие веб-мастера!</p>
<p>Мне 55 лет и я рад приветствовать Вас на своём сайте.
Этот сайт первый, который я разработал самостоятельно,
а до этого умел только входить в интернет.
Почему я решил его сделать?</p>
<p>За те 3 месяца, пока
разбирался в сайтостроении и создавал этот ресурс
обнаружилось, что авторы руководств по созданию
сайтов считают многие нюансы само собой разумеющимися
и не обращают на них внимание.</p>
<p>А мне, учитывая
возраст и «опыт», было не просто понять как раз эти
нюансы, они отнимали больше всего времени. И я решил
написать свой материал, так что-бы другим было легче
сориентироваться в потоке новой информации.</p>
<!--Картинка справа-->
<img class="right" src="http://trueimages.ru/img/0d/64/07a18f15.png">
<p>Здесь
«разжеваны» все мелочи сопровождающие создание сайта,
мимо которых обычно проскакивают другие авторы.
Если вам что-то будет непонятно, спрашивайте, для
меня нет «глупых» вопросов.
Читайе и создавайте свой сайт самостоятельно, каким
бы ни был Ваш возраст и стаж работы на компьютере.</p>
<p>Уверен, у Вас получится еще лучше и уж точно, в
несколько раз быстрее, чем у меня.</p>
</div>
<!--Запрет наплывания-->
<div class="clear"></div>
<!--Подвал-->
<div id="footer">
<p class="fon"><strong>Телефон:<br> 265-48-76</strong> </p>
<p class="fax"><strong>Факс:<br> 265-85-97</strong></p>
<p class="mail"><strong>E-mail<br>ctoto@mail.ru</strong></p>
</div>
</div>
</body>
</html>
Это код статичного сайта, а это значит, что на экранах с разным расширением, он будет оставаться в неизменных размерах.
То есть на мобилах у него появится полоса горизонтальной прокрутки, которой придётся пользоваться, чтоб просмотреть сайт целиком.
А теперь вернёмся к нашему примеру.
Прежде чем начать работать с кодом, нужно создать место где будет располагаться сайт до вывода его в интернет.
Как создать директорию сайта смотрите в статье Создание директории сайта
Для редактирования этого кода, потребуется HTML редактор. У кого он есть, очень хорошо, у кого нет, предлагаю установить Notepad++.
Как начать в нём работу, то есть создать файл, прочитайте здесь.
Когда редактор будет установлен, откройте его, скопируйте из представленного выше кода строки 1 — 6, и вставьте в поле редактора, а затем строки 118 — 153, и так же вставьте в редактор.
Таким образом мы выбрали HTML часть кода, из которой создадим HTML файл. Удалите мою нумерацию строк, создайте файл, назовите его index.html, и сохраните в директорию сайта.
Директория должна приобрести такой вид:
Следующим шагом создаём файл style.css, в котором будет расположена таблица стилей.
Вот тут внимание! Файл style.css, в дальнейшем, будет подключаться ко всем страницам сайта, поэтому в нём нужно собрать стили, формирующие основу страницы.
А это все стили из выше приведённого кода, кроме селекторов .left и .right, относящихся непосредственно к тексту статьи.
В дальнейшем, если Вам захочется внести какие-то изменения в конструкцию сайта, достаточно будет внести их в файл style.css, и они отобразятся на всех страницах.
Итак, в директории сайта создаём ещё одну папку, и называем её css.
Затем возвращаемся в редактор, открываем новый документ (первая иконка панели), копируем и вставляем в него строки 8 — 80 и 90 — 116.
Пропускаем только стили оформляющие картинки в тексте, так как они предназначены только для одной страницы.
Убираем мою нумерацию, и сохраняем этот новый документ во вновь созданную папку css, под названием style.css.
Далее откроем файл index.html, и подключим к нему таблицу стилей, то есть файл style.css.
Делается это следующим образом: в теге <head>, можно между тегами <meta> и <title>, вставляется тег <link>, с атрибутами определяющими местоположение и назначение css.
<link href="css/style.css" type="text/css" rel="stylesheet">После тега <link>, подключим стили, оформляющие картинки расположенные в тексте статьи. (строки 81 — 88). Убираем мою нумерацию и комментарии, так как в файле html комментарии css не работают, и даже наоборот, могут всё испортить.
<style">
.left{
float: left;
margin: 30px 7px 7px 7px;
}
.right{
float: right;
margin: 7px 0 7px 7px;
}
</style>После каждой манипуляции с кодом в редакторе, не забывайте сохранить изменения (третья иконка слева). При этом иконка файла должна из красной стать синей.
Вид в редакторе:
Далее проходим в меню "Запуск", выбираем свой браузер, и посмотрим, что он нам покажет. Если не сделали ошибок при копировании, то в браузере отобразится картинка, представленная в начале статьи.
Следующим шагом разберёмся с изображениями. У меня картинки загружены через сервис trueimages, только для того, чтоб страница открылась у Вас в браузере.
Вам же нужны будут свои изображения, и их нужно сделать, или найти в интернете.
Как сделать картинку для шапки сайта в Paint можно посмотреть в одноимённой статье. Если-же у Вас есть фотошоп, то все изображения лучше делать в нём.
Все сделанные, или найденные изображения, нужно поместить в папку images директории сайта.
Первым делом поменяем шапку сайта. Для этого в файле index.html удалим тег <img> c моей картинкой (строка 124)
Затем в файле style.css удалим селектор img.
Далее, в селекторе #header прописываем уже Вашу картинку
background-image: url(../images/schapka.png);
В редакторе это будет смотреться так
Двоеточие в начале адреса изображения ставиться тогда, когда селектор находится в в отдельном css файле. Если стили подключены в html файле, двоеточие в начале адреса не ставится.
Обратите внимание, что размер картинки не должен превышать размер блока header. Определяется он так: щёлкните по файлу картинки правой клавишей, в появившемся меню выбираете "Свойства", и затем, "Подробно", там и будут показаны размеры.
Теперь, если пройти в меню "Запуск", и открыть index.html, то откроется страница с Вашим изображением в шапке сайта.
Меняем остальные картинки (строки 128,129,130,135,141) В отличие от предыдущей, в них нужно изменить только адреса. Удалить адреса моих изображений, и вставить адреса Ваших.
После чего они приобретут примерно такой вид. Название картинки у меня i2.png, а у Вас будет своё.
<p><img src="images/i2.png">Наши сотрудники</p>Ну вот, осталось написать свои заголовки, оформить и подвинуть их туда куда Вам нужно(как это сделать сказано в комментариях к коду), написать свой текст, и главная страница Вашего сайта готова!
Если Вам захочется изменить положение сайдбара, или сделать два сайдбара, то код таких шаблонов представлен в статье Каркас сайта. Просмотрев их, можно сделать небольшие изменения в коде, представленном в этой статье, и получить желаемый результат.
Итак главная страница сайта готова, можно приступать к созданию рубрик и страниц. Я покажу, как создаётся одна рубрика, и в ней одна страница, а уж остальные Вы, точно так же, сделаете самостоятельно.
В директории сайта у нас есть папка content. Открываем её и создаём ещё одну папку — rubrica1(у Вас конечно будет своё название). В этой папке создаём ещё две папки — css и images.
В папку css помещаем файл style.css, а в папку images, во первых — основные изображения, которые должны быть на каждой странице (в моём случае это шапка сайта и маркеры меню), и во вторых, Вы поместите туда все картинки, которыми будете оформлять статьи этой рубрики.
Теперь можно создать страницу или статью. Открываем в Notepad++ файл index.html, копируем его, затем открываем «Новый документ», и вставляем в него скопированный файл.
Убираем из этого файла текст, вместе с расположенными в нём изображениями, и глобальные стили. Остаётся чистая страница Вашего сайта.
Сохраняем её в папку rubrica1 под названием: «Заголовок статьи.html». Заголовок статьи в названии файла пишется английскими буквами.
Можно заполнить страницу текстом, и украсить его изображениями. Точно так-же создаются все статьи этой рубрики. Затем делается следующая рубрика и так далее.
Лучше заранее прикинуть, какие рубрики будут в Вашем сайте, создать их, а потом заполнять статьями. Проще потом будет делать навигацию.
Вот мы и подошли к самой, по моему, трудоемкой и нудной фазе создания сайта — навигации. Или меню.
Почему трудоёмкая? Потому, что на каждой странице, и в каждой рубрике сайта, должна быть ссылка на все остальные страницы и рубрики, или что-то вроде этого. Зависит от того, какую навигацию для сайта Вы примените.
Можно с каждой страницы на все остальные, можно меню «Рубрики», а уж из рубрик — меню по страницам. А если этих страниц несколько сотен?
На примере я покажу, как делается меню, но делать его нужно после того, как сайт будет выложен в интернет, так как адреса страниц на хостинге будут другими, нежели адреса страниц сайта, расположенного на компьютере.
Итак, меню делается в общем-то просто. Нужно, лишь, в строку меню, вставить ссылку на другую страницу
Так на каждой странице, после чего наше меню станет активным.
Ну вот вроде бы, в общем, всё. Осталось выложить наше детище в интернет. Как это сделать читайте в статье Шаблон сайта на чистом HTML.
В качестве хостинг провайдера очень рекомендую Бегет
Готовый код различных наворотов для вашего сайта вы можете найти на странице Бесплатные скрипты и CSS эффекты для сайта
Желаю творческих успехов.
Перемена
Учитель поймал в школе ученика, игравшего в карты, и отодрал его за уши.
— Ты знаешь, за что я тебя наказал? — спросил учитель.
— Знаю. Я неправильно пошёл королём.
Как разбить страницу на отдельные блоки < < < В раздел > > > Что такое PHP (пи-эйч-пи)
Не совсем понял. Весь код на странице. Или вам именно картинка нужна?
Здравствуйте. У вас случаем не осталась шапка сайта в наличии. Очень необходима!
Спасибо за предоставленную информацию, как раз мне для учеников потребуется
Как сделать, что бы информация с подписного блока (имя, емайл, сообщение) при нажатии на кнопку ОТПРАВИТЬ, пересылалась на на почту(яндекс, майл, или корпоративную)?
Уточните пожалуйста.
Добрый день!Хотела спросить,а как сделать так, чтоб эти вкладки справа открывались?
Сперва посмотрите, что такое адаптивный дизайн https://starper55plys.ru/css/adaptivnyiy-sayt/ и как вместо одних элементов, на маленьких экранах выводятся другие.
Потом вместо горизонтального меню, на меленьких экранах поставите вот это меню https://starper55plys.ru/css/menyu-mnogourovnevoe-gorizontalnoe-i-vertikalnoe-css/
Ну конечно, чтоб в этом разобраться нужно знать основы css.
Подскажите еще пожалуйста. Видел как на некоторых сайтах сделано при большом расширении горизонтальная навигация, а при маленьком расширении раскрывающееся навигация. Как так сделать??
У шрифта по умолчанию есть отступ от границ. Попробуйте задать ему свой padding. Можно даже попробовать отрицательный.
Добрый день. Подскажите пожалуйста, как можно изменить текст в навигации. Я сделал горизонтальную навигацию, в ней 4 пункта, каждый пункт состоит из прямоугольника и текста, и когда я делаю размер больше, то увеличивается сама фигура и текст, а как сделать так чтобы больше становился только текст?
Извините Роберт, но уже давно не занимаюсь прикладным программированием — катастрофически не хватает времени.
Посоветую с этим вопросом обратиться на http://www.cyberforum.ru/. В моей практике ещё не было случая, что-бы какой либо вопрос, закинутый на этот форум, остался нерешённым. Особенно по javascript.
Здравствуйте staric, меня интересует один скрипь, а если быть точнее как его лучше реализовать. Написать скрипт, который при нажатии на область на странице рисует границу этой области. Повторное нажатие на эту область удаляет границу.
Сценарий должен быть сначала реализован в традиционном javascript, а затем преобразован в реализацию в jQuery. Буду ждать ответа.
Сергей,
спасибо Вам за советы и разъяснения,используя Ваш опыт и советы постараюсь избежать этих ошибок.
Прочитав информацию о навигации сайта,понял — это общее понятие, реализации перемещения по сайту.
Как я понимаю на Вашем ресурсе нет подробной информации как сделать меню для шаблона который находиться на этой странице.
Мне сложно сделать такую навигацию о которой пишете в комментарии,думаю для этого шаблона меню будет достаточно,если я не ошибаюсь.
В ближайшее время постараюсь выложить сайт в интернет,чтоб использовать возможности WordPress.
Согласен с Вами по поводу того,что сайт никогда не будет доделан,но стремиться надо.
Успехов Вам и благополучия!!!
Чтоб внести ясность, навигация — это общее понятие, реализации перемещения по сайту. Решения навигации — это различные меню и «хлебные крошки».
Видели на моём сайте над статьёй и после неё бледненькие и маленькие заголовочки со стрелочками — это и есть хлебные крошки. Есть в конце статей ссылки на предыдущую и следующую страницу и в раздел — это тоже хлебные крошки. Только эти пишу я сам, а те что бледненькие пишет WordPress. Хотел сперва их убрать, оставить только свои, да вроде не мешают и для перелинковки лучше.
Ссылки в статьях, ведущие на страницы моего сайта, тоже можно отнести к навигации. В общем всё это навигация и перелинковка одновременно.
Сайт доделывать лучше, когда он уже в интернете. Время, то есть возраст сайта работает на нас. Я в своё время сделал такую-же ошибку. Почти год сидел на Денвере, и только потом выложил сайт в интернет. А потом ещё три раза его переделывал почти заново, и стоило сидеть на локалке?
Сайт никогда не будет доделан. Это бесконечное занятие. Он может быть брошен с потерей интереса к теме, но живой сайт всегда в стадии усовершенствования.
WordPress — это CMS, программа управления сайтом, по сути готовый сайт без контента. Все сайты на какой нибудь CMS, просто WordPress наиболее популярна и часто обновляемая. Я начал на верссии 3.2.1, а сейчас уже версия 4.7.4
Бесплатный хостинг, любой — это условно ваш сайт.
Сергей,
спасибо Вам за разъяснения и поддержку.
Как одностраничный сайт готов.
В предыдущем комментарии написали сколько много еще надо сделать, а я обрадовался все уже сделано.
У меня к Вам вопрос по поводу меню,на страничке пишите меню делается в общем-то просто.
Подскажите если сделать меню навигация для сайта нужна ?
Буду стараться искать ответы в Гугле, как я понял если будут затруднения можете помочь.
С Бегетом знаком уже больше полгода.
Хостинг у меня есть бесплатный на Бегете,а в домене пока срочной необходимости нет,так-как сайт еще не доделан.
WordPress это готовый сайт как понимаю.
Сразу много информации не освоить хочу пока разобраться с самописным сайтом.
Успехов Вам и благополучия!!!
Вообще-то Николай ваш сайт уже давно готов, забирать пора. Как работать с html и css ты уже знаешь. Немного конечно, но для начала хватит, и начало хорошее. Теперь надо купить домен и хостинг на Бегете, это примерно 1500 руб в год. На домен (адрес сайта) сразу бесплатно устанавливается WordPress и предоставляется ссылка для входа в админку. То-есть это уже готовый сайт с адаптивным шаблоном по умолчанию. Шаблон минимализм, то есть у него есть все стандартные функции и ваша задача будет заключаться только в придании им внешнего вида по вашему желанию (css) и в наполнении страниц текстами и изображениями.
Конечно это очень упрощённо, так как предстоит большая работа, о которой в коротком комменте не расскажешь, но это уже будет настоящая работа с настоящим сайтом, который будет в интернете.
Около года сайт будет в «песочнице», так что в поиске его найти будет сложно, но адрес у него уже будет, он будет индексироваться и его будут знать ПС, то-есть сайт начнёт набирать известность, хотя-бы у поисковиков пока.
Повторюсь — это уже будет не только обучение, а работа с результатом. И результат этот будет со временем всё ощутимее и весомее.
Возьмите и посмотрите. Конечно возникнет куча вопросов, но у Гугла есть ответ на любой из них, ну и я всегда помогу.
Сергей,
думал ну вот сайт готов.
Спасибо еще раз за подсказку,оказывается помимо меню и навигации,так еще много работы с сайтом.
Тема о создании сайтов очень увлекла,буду осваивать и дальше как будет позволять время.
Успехов Вам и благополучия.
На самописном сайте всё придётся делать самому И меню и постраничную навигацию и формы обратной связи. а ещё внедрять хотя бы парочку микроразметок, соблюдать семантику заголовков, использовать кучу метатегов и линков. Ещё создавать карту сайта XML и файл robots.txt. Ещё переделывать символы в URL в латиницу и создавать кеш сайта. Да много ещё чего.
Все эти опции есть в WordPress и других бесплатных и платных CMS. А вот чтобы создать на них уникальный сайт и нужны html, css и знание структуры сайта.
Осваивай всё это на локалке, а уж в интернете лучше что-то типа WordPress
Доброго времени суток,Сергей!
Спасибо, разобрался у меня ссылки стали синими,как убрать подчеркивание знаю.
Из Вашего ответа понял перемещать страницы можно в любую нужную папку у меня это рубрика.
Сложно было понять куда делать ссылки и на какие адреса,путаница была в голове,разобрался.
В данный момент делаю на локальном сервере,как понял из Вашего курса после того как сайт будет выложен в интернет надо делать меню или навигацию.
Успехов Вам и благополучия!!!
Добрый день Николай. Скажем так: Любая страница имеет адрес, который отображается в адресной строке.
Чтобы сделать ссылку на эту страницу, с любой другой страницы, с главной или какой другой, с любой, надо на главной (или любой другой) разместить код ссылки на эту страницу с её адресом.
<a href="https//starper55plys/edit-comments/#comment/ "> Ссылка на требуемую страницу</a>
Анкор — "Ссылка на требуемую страницу", будет виден на странице. Он пишется по вашему усмотрению.
В вашем случае: вы сделали две страницы: наши сотрудники,наша техника. Накидали в них кое какой контент, сохранили как naschi_sotrudniki.html и nascha_technika.html и поместили в нужную папку. В папке страницы html сохранятся со значком браузера. Теперь откройте эти страницы, и в адресной строке увидите их адреса.
Вот эти адреса и используйте в ссылках с главной страницы, которая сохранена как index.html.
Здравствуйте,Сергей!
Только восемь месяцев как начал изучать верстку сайтов,для меня и это уже высший пилотаж и то, еще не во всем разобрался.
Поэтому не совсем понимаю о чем, Вы говорите,в дальнейшем научаюсь.
Извините опять за беспокойство,ссылками попробовал вроде что-то получается.
Подскажите пожалуйста в папку рубрика делаю страницы 2-3,это будут страницы наши сотрудники,наша техника.
Потом делаю ссылки в них на главный index.html сайта,адрес которого отобразиться в браузере.Вроде так.
Спасибо. Надеюсь Вы понимаете, что работа с этим шаблоном — это только практическое изучение сути устройства сайта. Создать отвечающий современным требованиям сайт на html и css невозможно. Это необходимо знать и уметь, чтобы в дальнейшем применять в совокупности с другими инструментами веб программирования. Даже визитки сейчас настолько навороченные, что только html и css не обойтись.
Доброго времени суток Сергей!
Спасибо за подсказку,думаю справлюсь.
Чуть разобрался в создании сайта по Вашему шаблону,а это оказалось действительно самая трудоемкая работа навигация сайта.
Успехов Вам и благополучия!!!
.
Доброе утро Николай. С адресами так: как только Вы создадите страницу(html файл), поместите в папку и откроете её в браузере, в адресной строке браузера появиться её адрес, копируете его и используете в ссылке. Ну примерно так: <a href="Скопированный адрес">Заголовок</a>.
Здравствуйте Сергей!
Пробовал создать ссылки из Вашей статьи понял мне надо создать отдельные страницы.
Подскажите пожалуйста,после того как создал файл «Заголовок статьи.html» и поместил в папку rubrica,на сайте Наши сотрудники мне надо сделать ссылку на «Заголовок статьи.html»
Ага, есть. Вот тут инфа о том что такое ссылка и как её сделать https://starper55plys.ru/html/yakornaya-ssyilka/. Вам нужны гиперссылки. В них надо заключить анкоры Наши сотрудники, Наша техника, Прайс. То есть прямо в тех строках кода где прописаны эти анкоры, заключите их в тег "а" с адресами странц, на которые они будут вести. Правда для этого сперва надо создать эти отдельные страницы. В стать есть описание того, как это сделать.
Кстати, в конце статьи есть описание с картинками, о том как сделать меню, и там как раз показан код уже со ссылками.
Здравствуйте Сергей!
Как сделать на этом шаблоне,чтоб нажимать на ссылки «Наши сотрудники» или «прайс» и они открывались у Вас на сайте есть эта информация где?
Заранее благодарен.
Значит ищем дальше подобные ошибки. Я только что скопировал код, вставил в редактор, удалил нумерацию и комменты, и проверил свойства, которые Вы указали. И ширина и цвета меняются, и все остальные свойства работают. Код рабочий. Чуть больше внимательности и всё будет ОК.
Ошибку исправил. Не помогло.
Я вижу тут одну ошибку — не закрыта строка background-color: #ffffff. Возможно из-за этого клинит стили. Поставьте точку с запятой, посмотрите ещё раз. Кстати можно использовать сокращение #fff. Цвет так же будет белым. И вместо background-color использовать background. Я же над этим кодом почти три года назад корпел, многих тонкостей не знал. Тем не менее посмотрел сейчас ещё раз — код вполне рабочий.
здравствуйте. Я учусь и копирую ваш шаблон сайта: «Шаблон сайта Html + CSS».
Скопировал :
ремонт бамперов
body{
background:#69eaf0;
}
#wrapper{
width: 940px;
margin: 0 auto;
background: #f2e8c9;
}
#header{
height: 250px;
background-color: #ffffff
}
фон экрана изменил цвет, а дальше ширина страницы и фон страницы на браузере не меняется.
Почему?
Проблема — так называемый человеческий фактор. У меня только что, как ни странно, получилась точно такая же картинка, как Вы описали. Я когда удалял нумерацию строк, заметил, что что-то вроде удалилось не так, но не придал этому значения, а когда открыл картинку, то увидел блоки по краям и вверху.
Вставил код по новой, и более аккуратно удалил нумерацию, и всё открылось как положено. Чего и вам желаю.
Здравствуйте, подскажите пожалуйста в чем может быть проблем блок сайдебар и
контент наплывают на шапку сайта и плюс к тому прижались к краям делал все строго по инструкции
Точно, об этом у меня ничего нет. Пусть этот комментарий будет дополнением к статье.
Есть такое свойство для шапки: background-size — размеры фоновой картинки.
Значения которые это свойство принимает:
1. Размеры — можно задать любой доступный для css размер: px, em, cm.
2. Проценты — задаёт размер фоновой картинки в % от ширины или высоты блока header.
3. auto — Можно задать одновременно для ширины и высоты: background-size: auto auto;, то размеры фона остаются исходными. Если auto совместно с единицей длины — 100px auto, то размер картинки устанавливается автоматически, исходя из пропорций картинки.
4. cover — масштабирует изображение с сохранением пропорций так, чтоб его ширина или высота равнялась ширине или высоте блока.
5. contain — масштабирует изображение с сохранением пропорций таким образом, чтоб картинка целиком поместилась внутрь блока. Если блок резиновый, то и картинка должна подгоняться под него.
Скорее всего для Вас нужен 5-ый пункт. Я это свойство не применял, так как почти сразу стал стараться делать адаптивный дизайн, и отказался от фоновых картинок, так как при изменении размеров экранов, а значит и размеров изображений, у них теряется начальное качество.
Так что, абсолютно точно не скажу. Придётся Вам поэкспериментировать со значениями этого свойства.
Да, ещё забыл. Для старых браузеров это свойство нужно задавать с перфиксами -webkit-background-size, -moz-background-size, -o-background-size.
Добрый день. Начинаю осваивать Вашу мудреную науку по созданию сайта.
Пока еще в песочнице.
Что-то получается,что-то нет. Но стараюсь.
У меня вопрс как в Вашем примере (Шаблон сайта Html + CSS )сделать и шапку и всю страницу типа резиновой. Вы понимаете о чем я говорю.
На странице Каркас сайта я сделал вариант каркаса (Каркас сайта с двумя колонками) Здесь поменяв в (px) размеры каркаса на (%) все получилось, кроме шапки. Размер шапки 1024p x 200px Сделал в Фотошопе.
Спасибо.
Формы обратной связи — это уже следующий этап создания сайта. В CMS, таких как WordPress, они реализованы в пакете CMS. А если сайт самописный, то нужно браться за PHP, чтоб понять как оно работает. На моём ресурсе этого пока нет.
Спасибо. Отличный ресурс. Все просто, доступно и понятно.
И вот вопрос, на который я не нашел ответа.
Как реализовны коментарии на сайте, вот типа этого, когда посторонний человек из вне напишет что-то, а оно появляется на сайте, или допустим доска объявлений, когда человек напишет объявление и оно добавляется автоматически на сайте.
Каркас документа по версии html 5, можно посмотреть в статье Каркас страницы. И ещё, тег <style> в пятой версии пишется без атрибута type=»text/css»
Здравствуйте. А как этот шаблон будет выглядеть в html 5.