Статическая компоновка страницы
Достоинства. Простота алгоритма верстки документа. Оптимизировав страницу для отображения с экранным разрешением 640x480 точек, вы можете быть уверены, что при изменении пользовательских экранных настроек элементы дизайна не «поплывут». Кроме того, данный вариант компоновки сайта в большинстве случаев (при соблюдении ряда дополнительных условий) позволяет добиться идентичности отображения html-документа в браузерах Microsoft Internet Explorer и Netscape Navigator.
Недостатки. При отображении документа на компьютере с высоким экранным разрешением по краям экрана или с правой его стороны остается заметное пустое поле.
Динамическая компоновка страницы
Достоинства. Документ растягивается по всей ширине экрана, не остается неиспользованных пустых полей.
Недостатки. Сложность верстки и отладки страницы, весьма часто проявляется неадекватность отображения таких документов в браузерах Microsoft Internet Explorer и Netscape Navigator.
ПРИМЕЧАНИЕ Используемые в командах HTML значения пикселов (условных точек) подразумевают физические размеры точки экрана пользователя и зависят от типа его монитора.
Табличная вёрстка
Табличная вёрстка ранее была основным методом вёрстки, но и сейчас широко применяются в самых разных случаях. С помощью таблиц делают рамки, задают модульные сетки, создают цветной фон, выравнивают элементы и т. п.
С помощью слоёв
Слои использовались в браузере Netscape (тег <layer>), и представляли собой структурные элементы, которые можно размещать на веб-странице путем наложения их друг на друга с точностью до пикселя[источник не указан 190 дней]. Скрипты при этом позволяли изменять параметры слоя динамически.
Блочная вёрстка
Вёрстка при помощи блоков (тег <div>) и описывающих их таблиц стилей (CSS). Реализует концепцию семантичной вёрстки.
До недавнего времени в качестве основных инструментов верстки выступали таблицы и фреймы (фреймы, ввиду их некоторых проблем[1], уходят в прошлое: например, стандарт HTML 5 более не включает в себя поддержку фреймов[2]). В настоящее время блочная используется гораздо шире. Однако табличная вёрстка в исполнении гораздо проще блочной вёрстки.
По принципам использования средств разметки HTML различают логическую разметку и презентационную (физическую). Например, курсивный текст можно получить как с помощью тега <i>, так и с помощью тега <em>. В первом случае курсив задаётся явным образом, а во втором на текст производится логическое ударение, которое обычно отображается курсивом. Иными словами, при первом подходе ориентируются на внешний вид, а во втором — на логическое предназначение.
Преимуществом второго подхода является независимость вёрстки от используемого типа устройств и дизайна веб-страниц. Если придерживаться логической разметки, то можно использовать один и тот же вариант вёрстки для экрана, печати и мобильных устройств, регулируя внешний вид с помощью отдельных файлов стилей.
Все сайты, по макету вёрстки, можно разделить на три принципиальные группы: жёстко фиксированные (Rigid fixed), адаптивные резиновые (Adaptable fluid) и расширяемые эластичные (Expandable elastic) макеты.
Фиксированный тип макета — дизайн (табличный либо блочный), в котором ширина столбца/рисунка заданы в пикселях, то есть оговорены точно.
Резиновый тип макета — дизайн, в котором ширина столбца/рисунка задана в процентах от текущего разрешения экрана.
Адаптивная вёрстка/тип макета — дизайн, который подстраивается (адаптируется) под размер экрана, в том числе может происходить перестройка блоков с одного места на другое, или их замена блоками отображаемыми только при определённом разрешении. Адаптивная вёрстка пришла на смену идеи создания специальных мобильных версий сайта, "живущих" на отдельных поддоменах (например, m.wikipedia.org).
Фиксированный дизайн
Преимущества:
Такой дизайн гораздо легче разрабатывать, можно заранее предугадать, как будет выглядеть сайт.
У дизайнера есть возможность следить за размером строки.
Недостатки:
На различных разрешениях может появиться горизонтальный скроллинг, у сайта существует только одно оптимальное разрешение экрана.
Резиновый дизайн
Преимущества:
Сайт будет заполнять всё пространство браузера, что значительно улучшает его вид.
Сайт с таким дизайном будет одинаково смотреться на разных разрешениях.
Недостатки:
Разработка такого дизайна сплошной эксперимент, не знаешь, как поведёт себя вся структура сайта в тот или иной момент.
На больших разрешениях возможно появление слишком длинных строк, что значительно утруждает читателя.
Адаптивная вёрстка
Преимущества:
Сайт будет отображаться при разных размерах экрана так, как это наиболее удобно пользователю;
Недостатки:
Требует тщательной проработки нескольких макетов, для различных размеров экранов.
То есть у каждого вида дизайна есть свои минусы и плюсы и выбор зависит от решаемой задачи. При этом может использоваться и смешанный дизайн — некоторые столбцы табличного дизайна задать в процентах а другие в пикселях.[3]
Вставка JavaScript в HTML-страницы.
Программы можно располагать в любой месте HTML страницы, но нельзя перемешивать HTML теги и операторы JavaScript, иначе результат наверняка будет не таким каким вы его себе представляли. Так же советую вставлять JavaScript между тегами <head> и </head>, так как они являются одними из первых тегов, которые читает браузер, но по сути JavaScript программу можно вставить куда вам пожелается. Впрочем, месторасположения программы зависит от её предназначения. Кстати, в случае если вы сделаете ошибку между тегами <script> и </script>, то в случае обнаружения её браузером он сообщит вам, в какой строке вы допустили ошибку. Если сценарии используются для динамического создания кода HTML и предназначенные для генерации программных или системных параметров контейнеры <script> разбросаны по всему тексту документаHTML, то такое их расположение вполне оправдано. Однако если требуется определить функции для решения различных задач, то самым лучшим местом для них будет отдельный контейнер <script>, расположенный в начале документа. Синтаксис тега <script> следующий:
<script language="JavaScript"> //операторы JavaScript ... </script>
Язык должен обязательно выглядеть так, как показано выше, с точным соблюдением регистра для всех программ на языке JavaScript. Несмотря на то, что язык указывать необязательно, посоветую всё-таки указывать его на всякий случай. Весь текст за пределами тегов <script> и </script>должен быть обязательно в формате HTML. На HTML страницу можно добавить несколько программ на языке JavaScript. Они производятся в порядке их расположения в коде (сверху вниз). Браузер всегда анализирует программы JavaScript после загрузки всей HTML страницы. Функции загружаются в память и выполняются браузером, когда генерируется соответствующее событие или при явном вызове функции JavaScript (либо других функций, определенным пользователем, - под функцией здесь понимается группа операторов языка JavaScript). Например:
<html> <head> <title>Заголовок документа</title> <script language="JavaScript"> alert ("Добро пожаловать !"); </script> </head> <body> <p>Текст страницы...</p> </body> </html>
Всегда помните о том, что символы верхнего и нижнего регистра на языке JavaScript различаются. Например, "JavaScript" не то же самое, что "Javascript". Так же посоветую помнить о том, что использование маленькой буквы "я" между тегами <script> и </script>, нежелательно, в связи с тем, что браузеры типа Netscape Navigator будут воспринимать ее как ошибку программы.
JavaScript. Особенности языка. Типы данных. Массивы.
Массивы
Javascript поддерживает два вида структуры "массив":
Ассоциативный массив (хеш), где данные хранятся по произвольному ключу. Об этом читайте в разделе Объекты.
Числовой массив Array, где данные хранятся по номерам. Он описан в этой статье.
Javascript - очень гибкий язык, поэтому технически в Array можно хранить произвольные ключи, как в Object. Но лучше использовать типы по назначению.
Для хранения данных по номеру предназначен тип Array.
|
1 |
vararr = newArray() |
|
2 |
arr.test = 5 |
|
3 |
arr[1] = "blabla" |
|
4 |
... |
В типе Array есть специальные методы, ориентированные именно на работу с числовыми ключами.