Denzell97

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

Recommended Posts

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

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

Вот допустим у меня есть маленький сайт на котором есть 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 на русском языке. Ну вроде бы не мешает. да и удобно для меня

Edited by Denzell97

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By four17
      Можно ли с помощью css выровнять блоки одинакового по уровню ? 
      вот картинка.
       
      Высота блока должна быть не фиксированной .Контент может быть  в любом количестве . Блоки с контентом должны быть на одном уровне .  Т.е независимо сколько символом в контенте , описание строго на одном уровнем с другим  описание  , цена на одном уровне с ценой.
      Каким способом можно реализовать данное решение ? спасибо за внимание.
    • By Twix
      Добрый вечер.
      Чтоб не спамить разными сообщениями на форуме создам все тут.
      #Вопрос 1.
      Я пока не нашел ответ в гугле, спрошу тут и пойду искать дальше. Шапка сайте идет на всю ширину экрана(лого и форма поиска). а вот ее сайт(статьи меню и т.д) идут в блоке с каждой стороны примерно по 10% ширины нет(как margin я как понимаю)  и там ничего не должно быть активно. там будет свой фон. Вот как можно это сделать сразу? я подумал сначала сделать в body убрать по 10% с каждой стороны но у меня там шапка. На текущий момент кроме как когда создавать блоки с контентом их каждый в писать ширину и поля с отступами. Подскажите как это сделать сразу же заранее.
    • By Twix
      Добрый день. Создал меню горизонтальное и по макету нужно сделать между меню полоску.
      как должно выглядеть: Фото меню

      Я ее добавил в <li>border-right: 1px solid #fff. и у последней ссылки ее нужно убрать. как сделать чтобы рамка не виднелась???

      хотел отдельно последний пункт меню взять в ид и убрать ее. но чтото не получается.
      <li id="contact_us">
      <a href="#">CONTACT US</a>
      </li>

      кроме как вставлять блок или картинку чтоб замазать ничего не приходит в голову. подскажите пожалуйста реально ли ее убрать через стили ?
  • Member Statistics

    46,330
    Total Members
    3,128
    Most Online
    god
    Newest Member
    god
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.



  • Спрашивают сейчас

  • Пишут сейчас

    • Здравствуйте. Попробуйте вот так
    • <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <div class="header"> <div class="product"> <h1>Product Name</h1> <ul class="sps"> <li>Put on this page information about your product</li> <li>A detailed description of your product</li> <li>Tell us about the advantages and merits</li> <li>Associate the page with the payment system </li> </ul> </div> <div class="banner"> </div> </div> </div> </body> </html> body{ margin: 0; font-family: Arial; font-style: normal; } .container{ margin: 0; width: 90%; margin: 0 auto; } .header{ min-height: 223px; background-color: #445162; color: white; padding: 50px 50px; } .product{ width: 47%; display: inline-block; } .product > h1{ font-size: 60px; margin: 0; } .product:after{ content: ""; display: block; clear: both; } .banner{ background-color: white; width: 35%; min-height: 243px;; display: inline-block; float: right; } .sps > li{ font-size: 20px; line-height: 36px; list-style-image: url(images/check_icon.png) } почему div banner наезжает на надпись и как это исправить? И скажите в общем, что я делаю не так, как по правильному это сверстать?
    • Здравствуйте, Всем!
      Что-то не ищется.. Хочу найти шаблон для Landing page с минимальными наворотами.
      Скачивал всякие Free шаблоны, весят они под 2MB со всякой трепухой внутри, которая может подтягивать из вне что-то ещё и по цепочке. Туда может быть встроено всё что угодно: майнинг, редирект, сбор статистики и т. д. Проверять все эти минифицированные тонны кода нет желания.. Я люблю когда ясный чистый код, без всякой хиромантии..
      Такой шаблон и редактировать проще.. Быстрее работает, меньше глюков.. Ну что может быть нужно для Лендинга из библиотек реально? Разве что jQuery и пара плагинов к нему для ненавязчивой анимании (хотя, опять-таки луче уже если анимация будет на CSS, хотя, могу тут ошибаться в плане совместимости со старыми браузерами).
      Конечно адаптивность важна, но это не требует огромного Bootstrap, а достаточно нескольких media query. Может кто посоветует где посмотреть подобные шаблоны..  
  • Popular Contributors