Форум о социальных сетях Поиск по форуму Инвестиции SMM обучение SMM курсы
Форум о социальных сетях Поиск по форуму Инвестиции SMM обучение SMM курсы
  • Страница 1 из 2
  • 1
  • 2
  • »
Вёрстка веб-страниц
#1
Суббота, 31.07.2010, 07:45
A1exRus
Проверенный
Сообщения: 649
Репутация: 785
Вёрстка веб-страниц — процесс формирования веб-страниц в текстовом либо WYSIWYG-редакторе, а также результат этого процесса, то есть собственно веб-страницы.

Вёрсткой веб-страниц занимаются верстальщики веб-страниц.

---Основные идеологии вёрстки веб-страниц---

По принципам использования средств разметки HTML различают логическую разметку и презентационную разметку[источник не указан 438 дней]. Последняя использует элементы разметки, игнорируя семантику, т. е. предназначение элементов. Эти принципы служат предметом споров среди верстальщиков.

---Вёрстка с помощью слоёв---

Слои представляют собой структурные элементы, которые можно размещать на веб-странице путем наложения их друг на друга с точностью до пикселя. Скрипты позволяют изменять параметры слоя динамически. Это дает возможность создавать на странице разные эффекты, такие как выпадающие меню, игры, разворачивающиеся баннеры, плавающие окна и прочее. До недавнего времени в качестве основных инструментов верстки выступали фреймы и таблицы. Фреймы, ввиду их некоторого несоответствия принципам веб-дизайна и навигации ушли в прошлое. В настоящий момент не приветствуется любое использование фреймов, за редким исключением (например, в чатах).

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

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

Преимущества слоёв

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

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

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

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

Слои по сравнению с таблицами отображаются быстрее. Более высокая скорость достигается за счет компактного кода и того, что отображение содержимого слоя происходит по мере его загрузки. Правда это может привести к «скачкам» элеменов страницы по мере их подгрузки.

Если сравнивать между собой скорость загрузки веб-страниц, созданных с применением таблиц и слоев, то у табличной вёрстки имеются определённые недостатки. Содержимое таблицы загружается медленнее, чем информация в слоях

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

Работа с таблицами менее гибкая, чем со стилями

При использовании таблиц широко известным приемом стало применение распорок — прозрачных изображений высотой в один пиксель. Само изображение не отображается на веб-странице, но его можно масштабировать в любых пределах. Получается невидимая палочка определённой ширины или высоты, которая не дает ячейкам таблицы сблизиться меньше, чем на заданное расстояние. Распорки особенно были актуальны для браузера Netscape, который не показывал фон ячейки, если в ней ничего не размещалось. Чтобы избавиться от указанной особенности и помещали в ячейку маленький прозрачный рисунок в формате GIF.

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

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

Усложненная верстка при большом количестве таблиц

Данная проблема возникает при множественной вложенности таблиц, что характерно для достижения определённых эффектов на веб-странице. Рост количества таблиц повышает шанс возникновения ошибок при вёрстке, увеличивает размер документов и снижает скорость загрузки файлов. Применение визуальных редакторов, вроде Adobe Dreamweaver или Microsoft FrontPage, для создания и правки документов облегчает работу с таблицами, но из-за обилия их параметров и в этом случае разработчики не застрахованы от появления ошибок и лишней работы, связанной с индивидуальным редактированием каждой таблицы.

Не следует считать, что использование слоев это панацея от всех бед. К сожалению, стандарты работы со слоями ещё не до конца устоялись и браузеры по-разному реализуют определённые возможности. Из-за этого основная сложность верстки слоями — создать универсальный код, который бы одинаково и без ошибок работал в разных браузерах. Приходится вникать в тонкости поведения браузеров при использовании различных элементов стилей, что возможно только при большом опыте работы или массе свободного времени.

#2
Суббота, 31.07.2010, 10:13
hydrogen
Пользователь
Сообщения: 60
Репутация: 47
Про верстку с помощью слоев никогда не слышал

P.S.Познавательно

#3
Суббота, 31.07.2010, 12:11
A1exRus
Проверенный
Сообщения: 649
Репутация: 785
hydrogen, Спасибо:y:
Пост отредактировал A1exRus - Суббота, 31.07.2010, 15:10
#4
Суббота, 31.07.2010, 14:14
DMxs
Проверенный
Сообщения: 1064
Репутация: 2928
A1exRus, прочитал статью,спасибо.
#5
Суббота, 31.07.2010, 14:23
A1exRus
Проверенный
Сообщения: 649
Репутация: 785
west1kk, спс y
#6
Суббота, 31.07.2010, 14:27
Ev0lut1oN
Пользователь
Сообщения: 92
Репутация: 1198
Спасибо за статью, правильнее сказать вёрстка div'ами, блочная.
#7
Суббота, 31.07.2010, 15:08
A1exRus
Проверенный
Сообщения: 649
Репутация: 785
ByArt, да согласен, надо было так сделать
#8
Воскресенье, 01.08.2010, 07:06
Qoffee
Пользователь
Сообщения: 7
Репутация: 15
спасибо за стаатью :)
#9
Воскресенье, 01.08.2010, 12:27
Chotkii
Проверенный
Сообщения: 193
Репутация: -84
огромное спасибо. верстка с помощью слоев.
Нажми на WWW получишь + в репу! + ставиться автоматически (javascript)
Воскресенье, 01.08.2010, 12:47
nikbikey
Проверенный
Сообщения: 1887
Репутация: 3353
может у кого-то есть понятный видео урок?
Воскресенье, 01.08.2010, 12:57
Forget
Проверенный
Сообщения: 368
Репутация: 624
Воскресенье, 01.08.2010, 19:01
Chotkii
Проверенный
Сообщения: 193
Репутация: -84
А как в WySwig Верстать ??
Нажми на WWW получишь + в репу! + ставиться автоматически (javascript)
Воскресенье, 01.08.2010, 19:04
scratch
Проверенный
Сообщения: 200
Репутация:
Да обьясните висвиг плиз !
___________________________________________________

Создаю Фейки - Ucoz, Vkontakte, ZipCoin, DepositFiles,

Создаю Программы-Фейки - STEAM, Skype, Yandex Деньги, (Пароль и логин пересылается на icq)

icq: 7703944

___________________________________________________

Воскресенье, 01.08.2010, 19:34
A1exRus
Проверенный
Сообщения: 649
Репутация: 785
scratch, Chotkii, верстку лучше осуществлять в блокноте, если же использовать визуальный редактор, то он будет только нарушать код, я бы советовал использовать Dreamweaver в качестве блокнота, потому что там есть удобная функция подсветки кода по тегам y
Понедельник, 02.08.2010, 06:53
AzOTiK
Проверенный
Сообщения: 887
Репутация: 1603
спасибо!)) хорошая статья!)
  • Страница 1 из 2
  • 1
  • 2
  • »
Поиск:
Форум
Социальные сети
Хостинг от uCoz