После того, как создана главная страница, можно начинать заниматься наполнением сайта. Поскольку в нашем примере MADMARK вся основная информация расположена на посадочной странице, статьям и полноценным описаниям раздела на ней места нет. Чтобы сохранить общую стилистику, дизайн и все остальное, информационную страницу сайта можно сделать очень просто. Открываем код, ищем тот блок, с которого пойдет перенаправление на информационную страницу. Смотрим: Нам нужно перейти на другую страницу, где будет полное описание темы блока сайта "Тотальный маркетинг". Открываем код и выбираем только то, что намнужно на этой странице. А это по сути сам блок "тотальный маркетинг" и меню. Больше нам тут ничего не нужно. Это информационный блок. Вставляем его в новый документ @HTML и присваиваем кнопке "Наши методы" ссылку на вновь созданную страницу. А в новой странице, которую мы создали на основе индекса, просто редактируем блок, вписывая туда нужную информацию. Все, проблем никаких) У нас сайт стал вдвое больше. Теперь не одна страница, а две) HTML: <!-- Use it --> <div id ="useit" class="content-section-a"> <div class="container"> <div class="row"> <div class="col-sm-6 pull-right wow fadeInRightBig"> <img class="img-responsive " src="img/ipad.png" alt=""> </div> <div class="col-sm-6 wow fadeInLeftBig" style="background-color: rgba(255, 255, 255, 0.8); hight: 99%;" data-animation-delay="200"> <h3 class="section-heading">Тотальный маркетинг</h3> <div class="sub-title lead3">Только комплексный подход к продвижению<br>для абсолютных побед в бизнесе.</div> <p class="lead"> Высокие цели - масштабные задачи. Чтобы победить, мы не давим на мазоль врага. Мы научились бить по конкурентам со всех сторон одновременно. Если конкурент силен, значит он наш друг. Не надо забирать у него хлеб - он поделится сам. А кгде найти масло и сыр мы с большим удовольствием подскажем! </p> <p><a class="btn btn-embossed btn-primary" href="article.html" role="button">Наши методы</a> <a class="btn btn-embossed btn-info" href="#" role="button">Как делать не надо</a></p> </div> </div> </div> <!-- /.container --> </div>
Немного дополню. Просто вставить скопированный блок в новый файл не достаточно. Необходимо дописать тип документа, задать HTML, задать BODY, HEAD и указать TITLE, плюс, по желанию вписать метатеги. Вот так будет совсем правильно. В новый файл, например в page2.html добавляем: HTML: <!doctype html> <html> <head> <title> MADMARK Page 2 </title> </head> <body > <!-- Use it --> <div id ="useit" class="content-section-a"> <div class="container"> <div class="row"> <div class="col-sm-6 pull-right wow fadeInRightBig"> <img class="img-responsive " src="img/ipad.png" alt=""> </div> <div class="col-sm-6 wow fadeInLeftBig" style="background-color: rgba(255, 255, 255, 0.8); hight: 99%;" data-animation-delay="200"> <h3 class="section-heading">Тотальный маркетинг</h3> <div class="sub-title lead3">Только комплексный подход к продвижению<br>для абсолютных побед в бизнесе.</div> <p class="lead"> Высокие цели - масштабные задачи. Чтобы победить, мы не давим на мазоль врага. Мы научились бить по конкурентам со всех сторон одновременно. Если конкурент силен, значит он наш друг. Не надо забирать у него хлеб - он поделится сам. А кгде найти масло и сыр мы с большим удовольствием подскажем! </p> <p><a class="btn btn-embossed btn-primary" href="article.html" role="button">Наши методы</a> <a class="btn btn-embossed btn-info" href="#" role="button">Как делать не надо</a></p> </div> </div> </div> <!-- /.container --> </div> </body> </html>
Да, конечно. Думаю стоит упомянуть, что если все будущие страницы планируется создавать в одной стилистике и если все они будут с расширением html, то эту часть кода просто нужно использовать на каждой: Код: <!doctype html> <html> <head> <title> Название страницы </title> </head> <body > Тут ваше содержимое </body> </html>
Стили и JS подключаться внутри тега HEAD. Вот так, примерно: HTML: <!doctype html> <html> <head> <meta charset="utf-8"/> <meta itemprop="" name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" /> <meta name="author" content="MADMARK"/> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/> <!-- Bootstrap core CSS --> <link href="css/bootstrap.min.css" rel="stylesheet"/> <!-- Custom Google Web Font --> <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet"/> <link href="/mail.php" rel="stylesheet"/> <!-- Custom CSS--> <link href="css/general.css" rel="stylesheet"/> <!-- Owl-Carousel --> <link href="css/custom.css" rel="stylesheet"/> <link href="css/owl.carousel.css" rel="stylesheet"/> <link href="css/owl.theme.css" rel="stylesheet"/> <link href="css/style.css" rel="stylesheet"/> <link href="css/animate.css" rel="stylesheet"> <!-- Magnific Popup core CSS file --> <link rel="stylesheet" href="css/magnific-popup.css"/> <script src="js/modernizr-2.6.2.min.js"></script> <title> MADMARK Page 2 </title> </head> <body > <!-- Use it --> <div id ="useit" class="content-section-a"> <div class="container"> <div class="row"> <div class="col-sm-6 pull-right wow fadeInRightBig"> <img class="img-responsive " src="img/ipad.png" alt=""> </div> <div class="col-sm-6 wow fadeInLeftBig" style="background-color: rgba(255, 255, 255, 0.8); hight: 99%;" data-animation-delay="200"> <h3 class="section-heading">Тотальный маркетинг</h3> <div class="sub-title lead3">Только комплексный подход к продвижению<br>для абсолютных побед в бизнесе.</div> <p class="lead"> Высокие цели - масштабные задачи. Чтобы победить, мы не давим на мазоль врага. Мы научились бить по конкурентам со всех сторон одновременно. Если конкурент силен, значит он наш друг. Не надо забирать у него хлеб - он поделится сам. А кгде найти масло и сыр мы с большим удовольствием подскажем! </p> <p><a class="btn btn-embossed btn-primary" href="article.html" role="button">Наши методы</a> <a class="btn btn-embossed btn-info" href="#" role="button">Как делать не надо</a></p> </div> </div> </div> <!-- /.container --> </div> </body> </html>
Я бы еще посоветовала, для удобства, выбрать правильный редактор для написания кода, который будет поднимать в цвете все теги, возможно даже дополнять теги при написании их аббревиатур, например: я пользуюсь SublimeText и мне достаточно написать html и нажать кнопку табуляции, после чего выше описанный код будет написан автоматически. Так же этот редактор имеет возможность подключения большого кол-ва плагинов. Вкратце, можно настроить ваш редактор до полноценной оболочки разработки (IDE) и жить будет в кайф!