• 0
Denzell97

Как правильно  верстать многостраничные сайты?

Вопрос

Объясните как правильно жить верстать многостраничные сайты? 

Я покажу вам на примере того как это делаю я. Это наверное глупый\неправильный метод, просто я не знаю как нужно\можно делать это проще. 

Вот допустим у меня есть маленький сайт на котором есть 3 пункта меню.

Цитата

438772609_1.thumb.png.e3819e2db690ce78d71e18bae1c425b2.png

То есть в редакторе я создаю скелет сайта, внутри body я помещаю эти самые кнопки, подключаю их к форме,  затем создаю Огромный блок где будет располагаться Весь контент. Но внутри этого  блока я не помещаю контент, а помещаю PHP переменную, в которой и хранится весь этот контент вместе со всеми остальными блоками и стилями. То есть таким образом стараюсь разбить HTML код на функции PHP. И получается что у меня может храниться весь сайт в одном **.php файле. То есть в зависимости от переменных в адресной строке $_GET["Меню"] и загружается необходимый контент через условия. То есть код у меня выглядит примерно вот так:

<!DOCTYPE html>
<html>
<head>
	<title>Сайт</title>
		<style type="text/css">
		.Меню {
			position: absolute;
			background: #9E9E9EFF;
			width: 200px;
			height: 700px;
		}	
		button {
			width: 100%;
			margin-top: 20px;
		}
		.Контент {
			position: absolute;
			left: 300px;
			width: 500px;
			height: 500px;
			border: 1px solid black;
		}
	</style>
</head>
<body>
	<div class="Меню"> 
		<button form="forma" name="Меню" value="1">Меню 1</button>
		<button form="forma" name="Меню" value="2">Меню 2</button>
		<button form="forma" name="Меню" value="3">Меню 3</button>
	</div>
	<div class="Контент">
		<?php
			if($_GET["Меню"] == 1)
				Меню_1();
			if($_GET["Меню"] == 2)
				Меню_2();
			if($_GET["Меню"] == 3)
				Меню_3();
		?>
	</div>
	<form style="display: none;" id="forma"></form>
</body>
</html>

<?php
	function Меню_1() {
		echo '
			<div style="position: relative; margin: 0 auto; width: 70%;">
				Выбрано меню 1
			</div>
		';
	}

	function Меню_2() {
		echo '
			<div style="position: relative; margin: 0 auto; width: 70%; font-size: 20px;">
				А теперь 2 меню
			</div>
		';
	}

	function Меню_3() {
		echo '
			<div style="position: relative; margin: 0 auto; width: 70%;">
				И 3 меню
			</div>
	';
	}
?>

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

Конечно код получается достаточно большим при создании больших страниц с контентом и находится все в одном файле. Единственное что удобно это разбивать HTML код на отдельные фрагменты. 

Есть ли какие то глупости данного метода? или Впринипи так и делают? (Ну почти так)

 

 

P/S. и да у меня стили и Функции PHP на русском языке. Ну вроде бы не мешает. да и удобно для меня

Изменено пользователем Denzell97

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Рекомендованные сообщения

  • 0

Верстаются просто отдельные html'ки. Всё. 
Не надо ничего придумывать. 

И обычно ещё системами сборки пользуются. Там те же шаблоны/ инклуды и т.п., а на выходе те же хтмл.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

Верстай полностью отдельные страницы, PHP это не работа верстальщика.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

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

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас

  • Похожие публикации

    • Автор: maxfloyd
      Здравствуйте. padding подгоняется не четко, при изменении масштаба видно изъяны (подсветка кнопки не на всю высоту или на оборот больше чем нужно)

      Код: https://jsfiddle.net/aemjkhp9/
    • Автор: Vic-Tor
      Добры день!
      Подскажите пожалуйста, или неправильно формулирую запрос или туплю?
      Нужно простое всплывающее html окно с крестиком или кнопкой "ЗАКРЫТЬ" масштабом в 2/3 от стандартного.
      Например, у товара есть кнопка "ПОДРОБНЕЕ", хочу сделать, что бы открывалось окно с описанием и фото.
      СПАСИБО!
    • Автор: qwerty_me
      Здравствуйте.Возникла проблема со следующим заданием:вывести всплывающее окно, запрашивающее имя пользователя, затем вывести сегодняшнюю дату на экран(её можно увидеть после всего цикла окон),потом задать вопрос касательно обучения в группе(если да-цикл продолжается, нет-вывести окно с отказом),далее ещё одно вводное окно,а потом через всплывающие окна запросить у пользователся значения a,b,c для решения квадратного уравнения.Суть проблемы:как только после  if-а, отвечающего за запрос о принадлежности к группе,браузер перестаёт отображать остальные окна и простую инфу о дате,которая просто выводится на экран. Подскажите,пожалуйста,как можно пофиксить эту проблему.Всё никак не могу найти причину этого.Мой одногруппник написал похожий код и у него всё работает,но при сравнении я не увидел каких-то кардинальных различий.Свой и его код прикрепил ниже.Буду весьма признателен за вашу помощь,у меня уже просто нет вариантов,что не так с моим кодом:/
      Мой код:
      <html>
      <head>
      <title>вывод различной инфы через всплывающие окна</title>
      </head>
      <body>
      <p id="nameUser"></p>
      <script>
        var nameUser=prompt("Введите Ваше имя пользователя.");
        if (nameUser) {
            document.getElementById("nameUser").innerHTML = nameUser +",Здравствуйте, добро пожаловать на сайт!";
          }
          else {
            document.getElementById("nameUser").innerHTML = "Гость, добро пожаловать на сайт!";
          }
          Data = new Date();
          Year = Data.getFullYear();
          Month = Data.getMonth();
          Day = Data.getDate();
          switch (Month)
          {
            case 0:  Month="января"; break;
            case 1:  Month="февраля"; break;
            case 2:  Month="марта"; break;
            case 3:  Month="апреля"; break;
            case 4:  Month="мае"; break;
            case 5:  Month="июня"; break;
            case 6:  Month="июля"; break;
            case 7:  Month="августа"; break;
            case 8:  Month="сентября"; break;
            case 9:  Month="октября"; break;
            case 10: Month="ноября"; break;
            case 11: Month="декабря"; break;
          }
          document.write("Сегодня "+Day+" "+Month+" "+Year+" года.");
          if(confirm("Вы учитесь в группе ЭИ-38?"))
            {
            alert("Добро пожаловать на страницу, посвященную лабораторной работе по изучению основ JavaScript!")
            alert("Решите квадратное уравнение: ax^2 + bx + с = 0, где а не равно 0,используя введённые числа для a,b,c")
            a=prompt("Введите значение а")
            b=prompt("Введите значение b")
            c=prompt("Введите значение c")
            var d = b * b - 4 * a * c;
            if(d > 0)
            {
            x1=(( - b)+(Math.sqrt(d)))/(2 * a)
            x2=(( - b)-(Math.sqrt(d)))/(2 * a)
            alert("Корни уравнений:x1="+ x1 +"x2="+ x2 +)
            document.write("Корни уравнений:x1="+ x1 +"x2="+ x2 +);
            }
            if(d == 0)
            {
            x1 = (- b) /( 2 * a)
            alert("Корень уравнения:x1= ",+ x1)
            document.write("Корень уравнения:x1="+ x1 +);
            }
            if(d < 0)
            {
            alert("с введёнными значениями квадратное уравнение не имеет корней")
            }
          }
            else
            {
            alert("Извините, вход только для своих.")
          }
      </script>
      </body>
      </html>
      ниже оригиналы моего кода и одногруппника.
      index try2.htm
      variant znakomogo.htm
Не пропустите! Сэкономьте до 90% на лучших курсах 2018 года.