Шаблон сайта Html + CSS

Здравствуйте уважаемые начинающие веб-мастера. Познакомившись с основами CSS, мы уже можем сделать простенький сайт, применив HTML+CSS.

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

Итак, давайте посмотрим, как выглядит код (и что в нём можно менять), такого вот сайта.

Тему грузоперевозок я взял для примера потому, что чаще всего именно люди работающие в этой сфере, обращаются ко мне за помощью.

Но Вы, прочитав статью, сможете сделать всё по своей тематике, и со своей конструкцией каркаса сайта.

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

Макет сайта

Небольшое нововведение. Как я уже говорил, развитие IT технологий происходит очень быстрыми темпами.

Поэтому директивы для браузеров, предписывающие им распознавать свойства border-radius и box-chadow, пока готовилась статья, перестали быть нужными. Поэтому строки 22-24, 26-28, 53-55, 57-59, 72-24, 76-78, 94-96, 98-100, можно из кода исключить.

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8" />
        <title>Документ без названия</title>
7 <style>
8  body{
9   background:#c0c0c0;  /*меняется фон экрана, выбирается здесь.*/
10 }

11 /*Оболочка контента*/

12 #wrapper{
13   width: 900px;  /*меняется ширина страницы*/
14   margin: 0 auto;
15   background:#f2e8c9;  /*меняется фон страницы*/
16 }

17 /*Шапка сайта*/

18 #header{
19   height: 250px;  /*высота шапки*/
20   background-color: #ffffff;  /*фон шапки*/
21    margin-bottom: 5px;  /*отступ шапки от текста*/
22 /* border-radius */  /*закруглённые углы*/
23   -webkit-border-radius: 5px;
24   -moz-border-radius: 5px;
25   border-radius: 5px;  /*меняется радиус закругления*/
26 /* box-shadow */
27   -webkit-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
28   -moz-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
29   box-shadow: rgba(0,0,0,0.5) 0px 1px 3px;  /*меняется величина тени*/
30 }
31 img{  /*картинка в шапке*/
32   float:left;
33   margin-top: -138px;}  /*двигается выше-ниже*/
34 h1{
35   margin:0 0 10px 40px;  /*заголовок двигается верх-вправо-вниз-влево*/
36   color:#464451;  /*цвет заголовка*/
37 }
38 .nomer{   /*подзаголовок (номер телефона)*/
39   position:relative;
40   top:-45px;  /*двигается вверх-вниз*/
41   left:680px;  /*двигается вправо-влево*/
42   font-size: 25px;  /*размер букв*/
43   font-style:italic;  /*курсив*/
44   font-weight:bold;  /*жирный*/
45   color:#464451;  /*цвет текста*/
46 }

47 /*Сайдбар (колонка справа)*/

48 #sidebar{
49   background-color: #ffffff;  /*фон блока*/
50   width: 180px; - ширина блока
51   padding: 10px;  /*отступ текста от краёв*/
52   float: right;
53 /* border-radius */  /*блок с закруглёнными углами и тенью*/
54   -webkit-border-radius: 5px;
55   -moz-border-radius: 5px;
56   border-radius: 5px;
57 /* box-shadow */
58   -webkit-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
59   -moz-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
60   box-shadow: rgba(0,0,0,0.5) 0px 1px 3px;
61 }
62 .marcer{  /*маркеры галочки*/
63   float: left;
64   margin: 5px 5px 0 0;   /*двигаются вверх-вправо-вниз-влево*/
65 }
66 /*Cатья*/
67 #content{
68   margin-bottom: 5px;  /*отступ статьи от подвала*/
69   width: 676px;  /*ширина статьи*/
70   padding: 10px;  /*отступ текста от краёв*/
71   background: #ffffff;  /*фон статьи*/
72 /* border-radius */  
73   -webkit-border-radius: 5px;
74   -moz-border-radius: 5px;
75   border-radius: 5px;
76 /* box-shadow */
77   -webkit-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
78   -moz-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
79   box-shadow: rgba(0,0,0,0.5) 0px 1px 3px;
80 }
81 .left{  /*картинка в тексте слева*/
82   float: left;
83   margin: 30px 7px 7px 7px; 
84 }
85 .right{  /*картинка в тексте справа*/
86   float: right;
87   margin: 7px 0 7px 7px;
88 }
89 /*Подвал*/
90 #footer{
91   height:80px;  /*высота подвала*/
92   background-color: #ffffff;  /*фон подвала*/
93   margin-bottom: 10px;  /*отступ снизу*/
94 /* border-radius */
95   -webkit-border-radius: 5px;
96   -moz-border-radius: 5px;
97   border-radius: 5px;
98 /* box-shadow */
99   -webkit-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
100   -moz-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
101   box-shadow: rgba(0,0,0,0.5) 0px 1px 3px;
}
102 .clear{  /*запрет наплывания*/
103   clear: both;
104 }
105   .fon{  /*номер телефона*/
106   float:left;
107   margin:20px 0 0 20px;
108 }
109 .fax{  /*номер факса*/
110   float:left;
111   margin:20px 0 0 60px;
112 }
113 .mail{  /*адрес E-mail*/
114   float:left;
115   margin:20px 0 0 60px;
116 }
117 </style>
118</head>
119 <body>
120   <div id="wrapper">  <!--Оболочка-->
121     <div id="header">  <!--Шапка-->
122       <h1>Грузоперевозки</h1>
123         <p class="nomer">234-49-50 <br> +7 900 650 33 45</p>
124       <img src="http://trueimages.ru/img/cf/26/9116df15.png">  <!--Картинка в шапке-->
125     </div>
126     <div id="sidebar"> 
127       <h3>На нашем сайте</h3>   <!--меню-->
128         <p><img class="marcer" src="http://trueimages.ru/img/99/91/dea39f15.png" width="10" height="10">Наши сотрудники</p>
129         <p><img class="marcer" src="http://trueimages.ru/img/99/91/dea39f15.png" width="10" height="10">Наша техника</p>
130         <p><img class="marcer" src="http://trueimages.ru/img/99/91/dea39f15.png" width="10" height="10">Прайс</p>
131           <hr width="50" color="#037FFC" size="5"> 
132       <h3>Другая информация</h3> 
133     </div>
134     <div id="content"> - Статья
135       <img class="left" src="http://trueimages.ru/img/81/90/b1718f15.png">  <!--Картинка слева-->
136         <h3>Наша работа</h3>
137 <p>Здравствуйте уважаемые будущие веб-мастера!</p>
138 <p>Мне 55 лет и я рад приветствовать Вас на своём сайте.
Этот сайт первый, который я разработал самостоятельно,
а до этого умел только входить в интернет.
Почему я решил его сделать?</p>
139 <p>За те 3 месяца, пока
разбирался в сайтостроении и создавал этот ресурс
обнаружилось, что авторы руководств по созданию
сайтов считают многие нюансы само собой разумеющимися
и не обращают на них внимание.</p>
140 <p>А мне, учитывая
возраст и «опыт», было не просто понять как раз эти
нюансы, они отнимали больше всего времени. И я решил
написать свой материал, так что-бы другим было легче
сориентироваться в потоке новой информации.</p>

141       <img class="right" src="http://trueimages.ru/img/0d/64/07a18f15.png">  <!--Картинка справа-->

142 <p>Здесь
«разжеваны» все мелочи сопровождающие создание сайта,
мимо которых обычно проскакивают другие авторы.
Если вам что-то будет непонятно, спрашивайте, для
меня нет «глупых» вопросов.
Читайте и создавайте свой сайт самостоятельно, каким
бы ни был Ваш возраст и стаж работы на компьютере.</p>
143 <p>Уверен, у Вас получится еще лучше и уж точно, в
несколько раз быстрее, чем у меня.</p>
144     </div>
145  <div class="clear"></div> <!--Запрет наплывания-->
146     <div id="footer">
147       <p class="fon"><strong>Телефон:<br> 265-48-76</strong> </p>
148       <p class="fax"><strong>Факс:<br> 265-85-97</strong></p>
149       <p class="mail"><strong>E-mail<br>ctoto@mail.ru</strong></p>

150     </div>
151   </div>
152</body>
153 </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>

После каждой манипуляции с кодом, не забывайте сохранить изменения (третья иконка слева). При этом иконка файла должна из красной стать синей.

Понимаете смысл? Стили распространяющиеся на весь сайт, пишутся в файле style.css, а дополнительные стили для оформления отдельной странички, пишутся прямо в html файле.

Вид в редакторе:

Код страницы сайта в редакторе Notepad++

Теперь, когда все стили подключены, проходим в  меню «Запуск», выбираем свой браузер, и посмотрим, что он нам покажет. Если не наделали ошибок, то в браузере отобразится картинка, представленная в начале статьи.

Следующим шагом разберёмся с изображениями. У меня картинки загружены через сервис trueimages, только для того, чтоб страница открылась у Вас в браузере. Вам же нужны будут свои изображения, и их нужно сделать, или найти в интернете.

Как сделать картинку для шапки сайта в Paint можно посмотреть в одноимённой статье. Если-же у Вас есть фотошоп, то все изображения лучше делать в нём.

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

Первым делом поменяем шапку сайта. Для этого в файле index.html удалим тег <img> c моей картинкой (строка 124)

Изменения в файле index.html для замены шапки сайта

Затем в файле style.css удалим селектор img (строки 31 — 33). Будьте внимательны, номера строк в моём коде, и в Вашем редакторе, не совпадают.

Далее, в селекторе #header прописываем уже Вашу картинку

background-image: url(../images/schapka.png);

В редакторе это будет смотреться так

Изменения в файле style.css для замены шапки сайта

Двоеточие в начале адреса изображения ставиться тогда, когда селектор находится в в отдельном 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 кол меню сайта

Так на каждой странице, после чего наше меню станет активным.

Главная страница сайта

Ну вот вроде бы, в общем, всё. Осталось выложить наше детище в интернет. Как это сделать читайте в статье Шаблон сайта на чистом HTML.

Желаю творческих успехов.

Неужели не осталось вопросов? Спросить

Короткий отдыхПерекур

Учитель поймал в школе ученика, игравшего в карты, и отодрал его за уши.
— Ты знаешь, за что я тебя наказал? — спросил учитель.
— Знаю. Я неправильно пошёл королём.

Как разбить страницу на отдельные блоки < < < В раздел > > > Что такое PHP (пи-эйч-пи)

 

Запись опубликована в рубрике CSS основы. Добавьте в закладки постоянную ссылку.

27 комментариев на «Шаблон сайта Html + CSS»

  1. Николай говорит:

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

  2. stariс говорит:

    Чтоб внести ясность, навигация — это общее понятие, реализации перемещения по сайту. Решения навигации — это различные меню и «хлебные крошки».

    Видели на моём сайте над статьёй и после неё бледненькие и маленькие заголовочки со стрелочками — это и есть хлебные крошки. Есть в конце статей ссылки на предыдущую и следующую страницу и в раздел — это тоже хлебные крошки. Только эти пишу я сам, а те что бледненькие пишет WordPress. Хотел сперва их убрать, оставить только свои, да вроде не мешают и для перелинковки лучше.

    Ссылки в статьях, ведущие на страницы моего сайта, тоже можно отнести к навигации. В общем всё это навигация и перелинковка одновременно.

    Сайт доделывать лучше, когда он уже в интернете. Время, то есть возраст сайта работает на нас. Я в своё время сделал такую-же ошибку. Почти год сидел на Денвере, и только потом выложил сайт в интернет. А потом ещё три раза его переделывал почти заново, и стоило сидеть на локалке?

    Сайт никогда не будет доделан. Это бесконечное занятие. Он может быть брошен с потерей интереса к теме, но живой сайт всегда в стадии усовершенствования.

    WordPress — это CMS, программа управления сайтом, по сути готовый сайт без контента. Все сайты на какой нибудь CMS, просто WordPress наиболее популярна и часто обновляемая. Я начал на верссии 3.2.1, а сейчас уже версия 4.7.4

    Бесплатный хостинг, любой — это условно ваш сайт.

  3. Николай говорит:

    Сергей,
    спасибо Вам за разъяснения и поддержку.
    Как одностраничный сайт готов.
    В предыдущем комментарии написали сколько много еще надо сделать, а я обрадовался все уже сделано.
    У меня к Вам вопрос по поводу меню,на страничке пишите меню делается в общем-то просто.
    Подскажите если сделать меню навигация для сайта нужна ?
    Буду стараться искать ответы в Гугле, как я понял если будут затруднения можете помочь.
    С Бегетом знаком уже больше полгода.
    Хостинг у меня есть бесплатный на Бегете,а в домене пока срочной необходимости нет,так-как сайт еще не доделан.
    WordPress это готовый сайт как понимаю.
    Сразу много информации не освоить хочу пока разобраться с самописным сайтом.
    Успехов Вам и благополучия!!!

  4. stariс говорит:

    Вообще-то Николай ваш сайт уже давно готов, забирать пора. Как работать с html и css ты уже знаешь. Немного конечно, но для начала хватит, и начало хорошее. Теперь надо купить домен и хостинг на Бегете, это примерно 1500 руб в год. На домен (адрес сайта) сразу бесплатно устанавливается WordPress и предоставляется ссылка для входа в админку. То-есть это уже готовый сайт с адаптивным шаблоном по умолчанию. Шаблон минимализм, то есть у него есть все стандартные функции и ваша задача будет заключаться только в придании им внешнего вида по вашему желанию (css) и в наполнении страниц текстами и изображениями.

    Конечно это очень упрощённо, так как предстоит большая работа, о которой в коротком комменте не расскажешь, но это уже будет настоящая работа с настоящим сайтом, который будет в интернете.

    Около года сайт будет в «песочнице», так что в поиске его найти будет сложно, но адрес у него уже будет, он будет индексироваться и его будут знать ПС, то-есть сайт начнёт набирать известность, хотя-бы у поисковиков пока.

    Повторюсь — это уже будет не только обучение, а работа с результатом. И результат этот будет со временем всё ощутимее и весомее.

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

  5. Николай говорит:

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

  6. stariс говорит:

    На самописном сайте всё придётся делать самому И меню и постраничную навигацию и формы обратной связи. а ещё внедрять хотя бы парочку микроразметок, соблюдать семантику заголовков, использовать кучу метатегов и линков. Ещё создавать карту сайта XML и файл robots.txt. Ещё переделывать символы в URL в латиницу и создавать кеш сайта. Да много ещё чего.

    Все эти опции есть в WordPress и других бесплатных и платных CMS. А вот чтобы создать на них уникальный сайт и нужны html, css и знание структуры сайта.

    Осваивай всё это на локалке, а уж в интернете лучше что-то типа WordPress

  7. Николай говорит:

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

  8. stariс говорит:

    Добрый день Николай. Скажем так: Любая страница имеет адрес, который отображается в адресной строке.

    Чтобы сделать ссылку на эту страницу, с любой другой страницы, с главной или какой другой, с любой, надо на главной (или любой другой) разместить код ссылки на эту страницу с её адресом.

    <a href="https//starper55plys/edit-comments/#comment/ "> Ссылка на требуемую страницу</a>

    Анкор — "Ссылка на требуемую страницу", будет виден на странице. Он пишется по вашему усмотрению.

    В вашем случае: вы сделали две страницы: наши сотрудники,наша техника. Накидали в них кое какой контент, сохранили как naschi_sotrudniki.html и nascha_technika.html и поместили в нужную папку. В папке страницы html сохранятся со значком браузера. Теперь откройте эти страницы, и в адресной строке увидите их адреса.

    Вот эти адреса и используйте в ссылках с главной страницы, которая сохранена как index.html.

  9. Николай говорит:

    Здравствуйте,Сергей!
    Только восемь месяцев как начал изучать верстку сайтов,для меня и это уже высший пилотаж и то, еще не во всем разобрался.
    Поэтому не совсем понимаю о чем, Вы говорите,в дальнейшем научаюсь.
    Извините опять за беспокойство,ссылками попробовал вроде что-то получается.
    Подскажите пожалуйста в папку рубрика делаю страницы 2-3,это будут страницы наши сотрудники,наша техника.
    Потом делаю ссылки в них на главный index.html сайта,адрес которого отобразиться в браузере.Вроде так.

  10. stariс говорит:

    Спасибо. Надеюсь Вы понимаете, что работа с этим шаблоном — это только практическое изучение сути устройства сайта. Создать отвечающий современным требованиям сайт на html и css невозможно. Это необходимо знать и уметь, чтобы в дальнейшем применять в совокупности с другими инструментами веб программирования. Даже визитки сейчас настолько навороченные, что только html и css не обойтись.

  11. Николай говорит:

    Доброго времени суток Сергей!
    Спасибо за подсказку,думаю справлюсь.
    Чуть разобрался в создании сайта по Вашему шаблону,а это оказалось действительно самая трудоемкая работа навигация сайта.
    Успехов Вам и благополучия!!!

    .

  12. stariс говорит:

    Доброе утро Николай. С адресами так: как только Вы создадите страницу(html файл), поместите в папку и откроете её в браузере, в адресной строке браузера появиться её адрес, копируете его и используете в ссылке. Ну примерно так: <a href="Скопированный адрес">Заголовок</a>.

  13. Николай говорит:

    Здравствуйте Сергей!
    Пробовал создать ссылки из Вашей статьи понял мне надо создать отдельные страницы.
    Подскажите пожалуйста,после того как создал файл «Заголовок статьи.html» и поместил в папку rubrica,на сайте Наши сотрудники мне надо сделать ссылку на «Заголовок статьи.html»

  14. stariс говорит:

    Ага, есть. Вот тут инфа о том что такое ссылка и как её сделать https://starper55plys.ru/html/yakornaya-ssyilka/. Вам нужны гиперссылки. В них надо заключить анкоры Наши сотрудники, Наша техника, Прайс. То есть прямо в тех строках кода где прописаны эти анкоры, заключите их в тег "а" с адресами странц, на которые они будут вести. Правда для этого сперва надо создать эти отдельные страницы. В стать есть описание того, как это сделать.

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

  15. Николай говорит:

    Здравствуйте Сергей!
    Как сделать на этом шаблоне,чтоб нажимать на ссылки «Наши сотрудники» или «прайс» и они открывались у Вас на сайте есть эта информация где?
    Заранее благодарен.

  16. stariс говорит:

    Значит ищем дальше подобные ошибки. Я только что скопировал код, вставил в редактор, удалил нумерацию и комменты, и проверил свойства, которые Вы указали. И ширина и цвета меняются, и все остальные свойства работают. Код рабочий. Чуть больше внимательности и всё будет ОК.

  17. сергей говорит:

    Ошибку исправил. Не помогло.

  18. stariс говорит:

    Я вижу тут одну ошибку — не закрыта строка background-color: #ffffff. Возможно из-за этого клинит стили. Поставьте точку с запятой, посмотрите ещё раз. Кстати можно использовать сокращение #fff. Цвет так же будет белым. И вместо background-color использовать background. Я же над этим кодом почти три года назад корпел, многих тонкостей не знал. Тем не менее посмотрел сейчас ещё раз — код вполне рабочий.

  19. сергей говорит:

    здравствуйте. Я учусь и копирую ваш шаблон сайта: «Шаблон сайта Html + CSS».
    Скопировал :

    ремонт бамперов

    body{
    background:#69eaf0;
    }
    #wrapper{
    width: 940px;
    margin: 0 auto;
    background: #f2e8c9;
    }
    #header{
    height: 250px;
    background-color: #ffffff
    }

    фон экрана изменил цвет, а дальше ширина страницы и фон страницы на браузере не меняется.
    Почему?

  20. stariс говорит:

    Проблема — так называемый человеческий фактор. У меня только что, как ни странно, получилась точно такая же картинка, как Вы описали. Я когда удалял нумерацию строк, заметил, что что-то вроде удалилось не так, но не придал этому значения, а когда открыл картинку, то увидел блоки по краям и вверху.
    Вставил код по новой, и более аккуратно удалил нумерацию, и всё открылось как положено. Чего и вам желаю.

  21. Владимир говорит:

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

  22. stariс говорит:

    Точно, об этом у меня ничего нет. Пусть этот комментарий будет дополнением к статье.

    Есть такое свойство для шапки: 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.

  23. Иван говорит:

    Добрый день. Начинаю осваивать Вашу мудреную науку по созданию сайта.
    Пока еще в песочнице.
    Что-то получается,что-то нет. Но стараюсь.
    У меня вопрс как в Вашем примере (Шаблон сайта Html + CSS )сделать и шапку и всю страницу типа резиновой. Вы понимаете о чем я говорю.
    На странице Каркас сайта я сделал вариант каркаса (Каркас сайта с двумя колонками) Здесь поменяв в (px) размеры каркаса на (%) все получилось, кроме шапки. Размер шапки 1024p x 200px Сделал в Фотошопе.
    Спасибо.

  24. stariс говорит:

    Формы обратной связи — это уже следующий этап создания сайта. В CMS, таких как WordPress, они реализованы в пакете CMS. А если сайт самописный, то нужно браться за PHP, чтоб понять как оно работает. На моём ресурсе этого пока нет.

  25. Юрий Николаевич говорит:

    Спасибо. Отличный ресурс. Все просто, доступно и понятно.
    И вот вопрос, на который я не нашел ответа.
    Как реализовны коментарии на сайте, вот типа этого, когда посторонний человек из вне напишет что-то, а оно появляется на сайте, или допустим доска объявлений, когда человек напишет объявление и оно добавляется автоматически на сайте.

  26. stariс говорит:

    Каркас документа по версии html 5, можно посмотреть в статье Каркас страницы. И ещё, тег <style> в пятой версии пишется без атрибута type=»text/css»

  27. Иван говорит:

    Здравствуйте. А как этот шаблон будет выглядеть в html 5.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *