<MyRusakov.ru />

Создание Интернет-магазина на PHP и MySQL

Создание Интернет-магазина на PHP и MySQL

Видеокурс "Создание Интернет-магазина на PHP и MySQL" - это уникальный курс по созданию Интернет-магазина с нуля. Особенностью данного курса является то, что создание идёт с самого начала, то есть от идеи. Далее создаётся дизайн всех необходимых страниц, после делается их вёрстка. Затем создаётся движок на PHP и MySQL, после делается Admin-панель и, наконец, готовый сайт размещается в Интернете.

Адрес созданного в этом курсе сайта: http://storedvd.ru

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

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Табличная вёрстка VS Блочная вёрстка

Табличная вёрстка VS Блочная вёрстка

Одним из самых популярных споров между верстальщиками - это, какая вёрстка лучше: табличная или блочная. Вопрос этот очень спорный и каждый по-своему прав. Хотя я убеждён, что всё зависит от конкретной ситуации, поэтому и блочная вёрстка, и табличная вёрстка имеют право на существование. И в этой статье я постараюсь разобрать преимущества и недостатки каждой из них. Чтобы при выборе типа вёрстки для своего сайта, Вы опирались, в первую очередь, на их особенности.

Начну с преимуществ и недостатков табличной вёрстки:

  • Таблицы не перекрываются друг с другом при маленьких разрешениях.
  • Легко делать кроссбраузерный дизайн.
  • Гораздо проще блочной вёрстки.
  • Очень много лишнего кода, ввиду бесконечного создания строк и столбцов.
  • Далеко не каждый дизайн можно создать с помощью таблиц.

Теперь о преимуществах и недостаках блочной вёрстки:

  • Значительно меньше HTML-кода и, как следствие, уменьшение веса страницы.
  • Блоки загружаются быстрее таблиц (особенно больших таблиц).
  • В отличии от таблиц, блоки - универсальное средство для создания любого дизайна.
  • Гораздо сложнее табличной вёрстки.
  • Огромные проблемы с кроссбраузерностью.
  • Блоки начинают наезжать (либо спадать) друг на друга при маленьких разрешениях экрана.

Вот все преимущества и недостатки блочной и табличной вёрстки. От себя хочу добавить, что в 99% Вы будете использовать и то, и другое, но сейчас вопрос стоит о создании самого макета сайта в целом. И здесь я хочу дать Вам рекомендацию, какой из типов вёрстки выбрать.

Блочная вёрстка лучше табличной, НО при условии, что Вы добьётесь кроссбраузерности и хорошего отображения сайта при разных разрешениях экрана. Данный сайт свёрстан блоками, однако, добиться кроссбраузерности и хорошего отображения на разрешениях (я добился хорошего отображения на разрешениях от 800 на 600, хотя на практике достаточно от 1024 на 768) очень тяжело. Об этом я предупреждаю заранее, поэтому если у Вас ещё маленький опыт вёрстки, то забудьте о блочной вообще. Лучше делайте табличную вёрстку.

Вывод: если Вы ещё недостаточно опытны, то используйте только табличную вёрстку, иначе принимайте решение в зависимости от конкретного случая. И всегда ответьте себе на вопрос: "Готовы ли Вы к потере огромного количества времени ради совсем небольшой пользы?".

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (33):

Alim_(I) Alim_(I) 06.07.2011 15:21:08

А как натянуть таблицу на всю страницу, у меня почему то со всех сторон 1-2 пикселя занимает пустое место страницы

Ответить

Admin Admin 06.07.2011 15:27:21

Через CSS: body { margin: 0; padding: 0; }

Ответить

Klauze Klauze 09.02.2012 18:07:38

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

Ответить

Admin Admin 09.02.2012 18:08:57

Блочная вёрстка - это использование стилизованных div в самой основе структуры страницы.

Ответить

Klauze Klauze 09.02.2012 18:09:50

да вот щас сюда перешел чтобы удалить пост)) Понял внезапно,спасибо

Ответить

shteyn shteyn 06.03.2012 19:09:13

Верстаю сайт блоками див.Конструкция простая.шапка и футер,между ними еще три блока(margin: 0; padding: 0;).ширину писал в пикселах сначала.общая получается 1280px ,а эти три блока соответственно 200+800+280px.Всё должно умещатьсь,а нет.Правый блок падает вниз,делаю чуть меньше крайний блок до тех пор пока умещается,тогда у меня появляется горизонтальная полоса прокрутки.Решил всё переделать в %. Всё получилось ровно ничего не падает всё как должно быть.А до того как я всё это настроил ,задавал вопросы в "Ответах@mail" мне сказали что писать размеры в % ,считается дурным тоном.Вопрос к вам ,как вы считаете почему так?мне многие так написали.И может я что то не так делал когда делал в пикселах?

Ответить

Admin Admin 06.03.2012 21:21:22

В % надо писать только центральный блок, а вот левый и правый - можно в абсолютных единицах, а можно и в процентах. А вообще, как такового правила, или дурного тона не существует по данной теме. Всё зависит от типа вёрстки, и оба варианта допустимы.

Ответить

shteyn shteyn 06.03.2012 19:34:49

Еще вопрос .Padding Увеличивает размер блока?А то у меня почему то увеличивает,как такое может быть?

Ответить

Admin Admin 06.03.2012 21:20:11

padding увеличивает размер блока. Поэтому при увеличении padding, нужно самостоятельно уменьшать width.

Ответить

vlados vlados 28.07.2012 16:27:04

Я хочу узнать мнения експерта,а все таки Михаил,какая лучшая вёрстка "Блочная" или "Табличная"?Какую вёрстку вы предпочитаете?Жду на ваш ответ...

Ответить

Admin Admin 28.07.2012 22:41:11

Хотя у них свои преимущества и недостатки, в основном, профессионалы выбирают блочную.

Ответить

vlados vlados 29.07.2012 01:37:17

У меня возникла еще одна проблема с таблицами.Я создал таблицу для входа на сайт,а у меня,"Меню" сайта опустилось вниз,а еще текст которий был написан - приветствие,тожу упустилось на низ,а теперь я немогу поднять наверх на левий бок мне нужно поднять "Меню" сайта.Я уже взял меню в таблицу и пробовал разлычними атрибутами поднять,но всеровно ничево не получаетса. Уважаемий Михаил,может есть какой небудь "тег" или "атрибут" чтобы я мог поднять "Меню" на левий бок наверх?

Ответить

Admin Admin 29.07.2012 12:13:00

Посмотрите через firebug вкладку Layout для нужного элемента. Вохможно у Вас откуда-нибудь появились отступы, которые Вы не обнулили.

Ответить

vlados vlados 30.07.2012 02:12:49

Не помогло,я по другому сделал я поднял меню с помощю позиционирования и теперь розмещаю таблици куда надо.Вы меня извините за ошибки в тексте,потомушто я с Украини и не учю руский язык,только украинский и английский.Но всеровно спасибо что отозвались!И еще один надеюсь последний вопрос...Подскажите Михаил!с помощю какого тега или атрибута я могу перемищать "Блоки",котории создаютса с тега <div> или как можно по другому назвать - позиционировать,всмысле ставить блоки куда надо?

Ответить

Admin Admin 30.07.2012 10:30:50

Про позиционирование блоков читайте здесь: http://myrusakov.ru/html-block-makeup.html

Ответить

vlados vlados 30.07.2012 16:31:05

Спасибо!

Ответить

vlados vlados 31.07.2012 00:50:35

Михаил!А скажите еще как делать отступи от граници екрана?как например вконткты.Я хочю чтобы сайт имел ширину небольшою не так,как у вас на целий екран,а немного узкую,короче я надеюсь вы меня поняли.

Ответить

Admin Admin 31.07.2012 11:59:09

Тут Вам не отступы нужны, а фиксированный размер блока. Т.е. в px, а не процентах.

Ответить

ghhgghhggh ghhgghhggh 21.02.2013 21:16:07

Спасибо очень полезная статья!

Ответить

@ivan @ivan 27.03.2013 19:19:04

Здравствуйте, Михаил. Я написал страницу для загрузки фото на сайт. Но у меня есть проблема: я добавляю картинку в верхний левый угол, когда я добавляю вторую картинку она становится ниже первой, а я хочу чтобы она добавилась на ровне с первой. Вот код:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1251" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <title>Добавление фото</title> <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> <link rel="stylesheet" href="style2.css" type="text/css" media="screen" /> <script type="text/javascript" src="jwplayer/jwplayer.js"></script> <meta name="generator" content="" /> <BODY BGCOLOR ="#5f7e9e"> <html> <head> <p align=left> <A href="http://www.make.ru"><IMG class=image alt=agt_loging.png title="На главную." src="file:image/agt_login.png"></A></P> <A href="http://www.make.ru"><IMG class=image alt=reg.png title="Регистрация." src="file:image/reg.png"></A></P> <title>Загрузка изображения</title> </head> <P align=right> <A href="index.html"><IMG class=image alt=log_out.png title="Выйти из учётной записи." src="file:image/log_out.png"></A></P> <center> <h2><p><b>Загрузка изображения </b></p></h2> <form action="upload.php" method="post" enctype="multipart/form-data"> <input type="file" name="filename" alt="Загрузить фото на сервер."><br> <p><p><input onclick="is_exit=1;" class="submit" id="frmsubmit" src="image/download_2.png" alt="Загрузить фото на сервер." type="image"></p></p>

Ответить

Admin Admin 27.03.2013 21:21:38

Для выравнивания элементов по вертикали можно использовать таблицы.

Ответить

Alex_Cortez Alex_Cortez 13.06.2013 20:23:26

Михаил, в табличной вёрстке атрибут colspan устанавливает размер в ячейках (colspan = '2', значит одна ячейка будет равна двум ячейкам). А вот есть атрибут, что бы устанавливать размер не в ячейках, а строках?

Ответить

Admin Admin 13.06.2013 21:26:34

rowspan

Ответить

Alex_Cortez Alex_Cortez 13.06.2013 21:28:49

Спасибо, Михаил.

Ответить

prog prog 28.08.2013 20:48:56

Здраствуйте, Михаил! Я делаю верстку статического шаблона, у меня такая проблема, размеры шапки и горизонтальное меню стали маленькими.Что надо сделать?

Ответить

Admin Admin 28.08.2013 21:26:19

Что значит стали маленькими? Вы же задаете фиксированные размеры, как я понимаю.

Ответить

prog prog 29.08.2013 19:34:15

Здраствуйте, Михаил! Как у вас дела! Я делаю блочную верстку для видео сайта, посоветуйте какой DOCTYPE выбрать XTML,HTML или HTML 5, я бы хотел поставить в главной странице сайта плагин для проигрывания видеороликов.

Ответить

Admin Admin 30.08.2013 19:19:16

Берите XTML либо HTML.

Ответить

prog prog 30.08.2013 20:06:34

Спасибо, Михаил.

Ответить

erkulov.nurbek erkulov.nurbek 03.01.2014 04:24:40

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

Ответить

tikkiwiki tikkiwiki 03.01.2014 10:36:14

Вы имеете ввиду для каждого блока свой css?

Ответить

erkulov.nurbek erkulov.nurbek 03.01.2014 19:26:09

не для каждого блока а для каждого браузера....например если браузер пользователя IE9 то загрузить для него особый css файл...а если браузер пользователя chrome то тогда для него тоже свой css файл...

Ответить

tikkiwiki tikkiwiki 06.01.2014 11:20:37

Возможно, делал аналогичное с помощью JavaScript: <head> <script type="text/javascript"> if (self.screen) { width = window.innerWidth } else if (self.java) { var jkit = java.awt.Toolkit.getDefaultToolkit(); var scrsize = jkit.getScreenSize(); width = scrsize.width; } if (width <= '1025') { document.writeln ('<link rel="stylesheet" type="text/css" href="1024.css" media="all" />'); } else { document.writeln ('<link rel="stylesheet" type="text/css" href="wide.css" media="all" />'); } </script> <noscript> <link rel="stylesheet" type="text/css" href="1024.css" media="all" /> </noscript> </head>

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.