Блочная структура. Блочная структура программы

Процедуры и функции. Блочная структура программы. Параметры.

Пример

Пример

Пример

Дан массив вещественных чисел А(10). Упорядочить данный массив по возрастанию его элементов, ᴛ.ᴇ. сделать так чтобы каждый следующий элемент массива оказался бы больше предыдущего.

Рассмотрим один из наиболее простых алгоритмов, разработанных для задач такого рода (рис.5).

Идея этого алгоритма состоит по сути в том, что элементы исходного массива сравниваются попарно - сначала a 1 c a 2 , потом a 2 c a 3 , далее a 3 с a 4 и т.д. В случае если первый элемент в паре больше второго, то меняют их численные значения, благодаря чему первый элемент получает значение второго, а второй - первого. В противном случае никаких замен в паре не производят, а переходят к сравнению элементов второй пары.

Τᴀᴋᴎᴍ ᴏϬᴩᴀᴈᴏᴍ, происходит как бы постепенное "проталкивание" наибольшего элемента в конец массива, причём функцию "толкача" в алгоритме выполняет внутренний цикл. Как только наибольший элемент массива займёт предназначенне ему последнее 10-е место, описанную процедуру повторяют с оставшимися неупорядоченными 9-ю элементами, благодаря чему наибольший из оставшихся элемент займёт предпоследнее место в массиве и т.д.

Для получения искомого результата такую процедуру нужно выполнить девять раз, причем с каждым разом число повторений внутреннего цикла должно уменьшаться на 1.

Эту задачу решает внешний цикл. Его параметр, пробегая от повторения к повторению значения 9,8,7,...,1 служит не только счетчиком числа выполненных повторений, но, в то же время, и наибольшим значением параметра внутреннего цикла.

program sort;

var

i,k: intege r ;

b: real ;

a: array ofreal ;

begin

write(‘введите массив - ‘);

for i:=1 to 10 do readln(a[i]);

writeln(" исходный массив");

for i:=1 to 10 do writeln(a[i]:5:2);

for i:=9 downto 1 do

for k:=1 to i doif a[k]>a then

begin

b:=a[k]; a[k]:=a; a:=b

end

writeln(" упорядоченный массив");

for i:=1 to 10 do write(a[i]:5:2)

end .

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

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

program massiv;

b: array ofreal ;

c: array ofreal ;

p: real ;

m,n: integer ;

begin

for m:=0 to 19 do

for n:=0 to 19 do readln(b);

for n:=0 to 19 do

begin

p:=1; for m:=0 to 19 do

if m<>n then { формирование произведения }

p:=p*b; { элементов столбца матрицы }

{ за исключением диагонального }

c:=p; { запись сформированного }

{ элемента вектора в ячейку памяти }

end ;

for n:=10 to 19 do writeln(c[n]:10:3)

end .

Дана матрица МАТ(5*5), состоящая из вещественных элементов. Поменять местами строки матрицы, содержащие максимальный и минимальный элементы.

program MinMax;

type

m = array ofreal ;

var

mat: array of m ;

maxi,mini,i,j,i1,j1: integer ;

begin

write(‘введите матрицу - ‘);

for i:=1 to 5 dofor j:=1 to 5 do read(mat);

i1:=1; j1:=1; { индексы минимального элемента }

i2:=1; j2:=1; { индексы максимального элемента }

for i:=1 to 5 do

for j:=1 to 5 do

if mat>mat

then

begin

i2:=i; j2:=j {запомнить индексы нового максимума }

end

else

if mat

then

begin

i1:=i; j1:=j; { запомнить индексы нового минимума }

end ;

str:=mat; { замена строки матрицы mat, }

mat:=mat; { содержащей максимальный }

mat:=str; { элемент, строкой с минималь- }

{ ным элементом и наоборот }

for i:=1 to 5 do

begin

for j:=1 to 5 do write(mat);

end

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

Первая задача является разновидностью типовой задачи поиска максимума или минимума .

Отличие от типовой состоит по сути в том, что определяются не сами максимальный и минимальный элементы матрицы, а их индексы. Для хранения индексов в процессе счёта используются переменные i1, j1 - для минимального элемента и i2, j2 - длямаксимального.

Для решения второй задачи используются три оператора присваивания в которых участвуют строки матрицы с максимальным и минимальным элементами и эквивалентный им вспомогательный одномерный массив str .

< Что такое подпрограмма и для чего она нужна >

В Паскале имеется два типа подпрограмм: процедуры и функции. Основное различие между ними состоит в том, что функция возвращает значение и может использоваться в выражениях, к примеру:

в то время как процедура вызывается для выполнения одной или более задач:

Writeln("Это проверка");

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

Процедуры и функции могут появиться в любом месте до основного тела программы. Для процедур используется следующий формат:

procedure имя-процедуры(параметры);

Функции имеют такой же формат, что и процедуры за исключением того, что они начинаются с заголовка function и заканчиваются типом данных для возвращаемого значения функции:

function имя_функции(параметры) : тип данных;

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

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

Процедуры и функции. Блочная структура программы. Параметры. - понятие и виды. Классификация и особенности категории "Процедуры и функции. Блочная структура программы. Параметры." 2017, 2018.

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

Внешний блок – это блок, в который вложена подпрограмма. Внутренний блок - сама подпрограмма. Все описания, расположенные во внешних для данной подпрограммы блоках, называются глобальными по отношению к блоку, который образует данная подпрограмма. Все описания, расположенные во внутреннем блоке называются локальными. Можно ввести понятие уровень вложенности. Если в разделе описания процедур и функций описаны две или более подпрограмм, то говорят, что эти подпрограммы одного уровня вложенности. По отношению к внешнему блоку они являются внутренними. По отношению между самими подпрограммами мы не можем использовать термины внешняя или внутренняя, так как они одного уровня вложенности. Если в разделе описания процедур и функций внешнего блока вложена подпрограмма, внутри которой в таком же разделе расположена другая подпрограмма, то мы говорим о разном уровне вложенности этих подпрограмм. Для третьего блока, представляющего собой самую внутреннюю подпрограмму, оба блока, в которые она вложена, будут внешними. Уровень вложенности этой подпрограммы 2. Для второго блока третий блок будет внутренним, а первый - внешним. Уровень вложенности второго блока 1. Для первого блока (самого внешнего) второй и третий блоки будут внутренними. Уровень вложенности первого блока 0, т.е. этот блок является основной программой.

Для примера рассмотрим структуру блоков, предложенную автором языка (рис.16.16). Здесь в седьмой раздел программы A вложены две подпрограммы B и C. В подпрограмму В вложена подпрограмма D. В свою очередь в подпрограмму D вложена подпрограмма G. В подпрограмму С вложены две подпрограммы E и F.

Рис. 16.16. - Пример блочной структуры

Разберемся со сферой действия описаний. Описания меток действуют только внутри раздела операторов блока, в котором они описаны. Все остальные описания действуют не только внутри блока, в котором они описаны, но и во всех внутренних блоках, вложенных в данный блок (вне зависимости от глубины вложенности). При этом казалось, что могут возникнуть конфликты между глобальными и локальными описаниями , так как в разных блоках одинаковыми именами могут быть поименованы разные понятия. Для того чтобы таких конфликтов не возникало, принято следующее правило - все имена, определяемые в локальных описаниях, отменяют действия совпадающих имен, описанных в глобальных описаниях. На рис. 16.17 показано расположение блоков из примера по уровням. Здесь линиями со стрелками показано действие глобальных описаний. Так в блоке G действуют описания внешних блоков D, B, A.

Рис. 16.17. - Расположение блоков по уровням и действие глобальных описаний

Особо рассмотрим доступ к подпрограммам. Любая подпрограмма может быть вызвана:

из раздела операторов блока, в котором она описана;

из раздела операторов самой себя (прямая рекурсия);

из раздела операторов любой внутренней подпрограммы по отношению к данной (косвенная рекурсия);

из раздела операторов любой подпрограммы, описанной ранее в том же блоке, где и данная подпрограмма.

Эти правила можем переформулировать следующим образом – любая подпрограмма может вызывать на исполнение:

любую подпрограмму, описанную в разделе подпрограмм данной;

саму себя (прямая рекурсия);

все внешние подпрограммы по отношению к данной (косвенная рекурсия);

подпрограммы, описанные ранее на том же уровне вложенности.

Взаимодействие блоков (подпрограмм) из примера показано на рис. 16.18.

Рис. 16.18 - Пример взаимодействия между блоками

Здесь линиями со стрелками показаны возможности вызова подпрограмм на выполнение (стрелки указывают направление вызова). Так, например, из программы А могут быть вызваны только подпрограммы В и С, которые вложены в седьмой раздел. Из подпрограммы F могут быть вызваны сама подпрограмма F (прямая рекурсия), подпрограмма С, в которую она вложена (косвенная рекурсия), и подпрограмма Е (находится на одном уровне и описана ранее). з программы А могут быть вызваны подпрограммы B и С. В таблице 16.9 для перечислены все возможные взаимодействия между блоками. Здесь основной алгоритм – блок, из которого производится вызов подпрограммы, вспомогательный алгоритм – вызываемая подпрограмма.

Таблица 16.9. Пример взаимодействия между блоками

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

С помощью модулей можно создавать библиотеки подпрограмм, которые могут храниться как в виде исходного, так и в виде объектного кода (кода, уже готового к совместной компиляции и объединению с другими модулями). В Delphi откомпилированный объектный код модуля хранится в файлах с расширением «.dpu».

Структура модуля аналогична структуре программы на языке Паскаль. Заголовок для модуля обязателен и начинается со слова UNIT (вместо PROGRAM как в обычной программе):

Unit <имя модуля>;

Имя модуля должно совпадать с именем файла на языке Pascal. Когда Delphi автоматически генерирует различные модули, он делает так, чтобы имя модуля совпадало с именем файла.

В отличие от программы, тело модуля (раздел операторов) может отсутствовать. Оно используется для инициализации переменных модуля и производится перед выполнением операторов основной программы. Модуль содержит две обязательные части: интерфейсную и исполнительную.

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

Интерфейсная часть начинается со слова Interface. Через интерфейс осуществляется связь основной программы с модулем или модуля с другими модулями. В интерфейсной части указываются объекты (процедуры, функции, переменные, константы, типы), доступные любым пользователям этого модуля.

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

Если модуль использует в своей работе возможности (процедуры, функции, переменные) других модулей, то это указывается в начале модуля с помощью конструкции USES, после которой указываются имена всех модулей, подключенных к данному, например:

Uses M1 , М2 ...;

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

Интерфейсная часть заканчивается с началом исполнительной части. Исполнительная часть начинается с ключевого слова Implementation. Она содержит тела всех процедур и функций, описанных в интерфейсной части. Она может включать локальные метки функций и разделов операторов. После слова Implementation также может следовать слово Uses со списком модулей, которые используются в исполнительной части. Далее указываются метки, типы, константы, переменные, процедуры и (Ьункпии модуля.

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

В конце модуля может идти необязательная часть завершения, начинающаяся с ключевого слова Finalization, в которой размещаются операторы, выполняемые при любом завершении работы модуля. Завершается модуль ключевым словом «end.» с обязательной точкой в конце.

Кратко синтаксис описания модуля выглядит так:

Если в разных модулях используются одноименные переменные, то для доступа к переменной модуля следует использовать префикс:

<имя модуля>. <имя переменной>.

Пример 10.1. Рассмотрим возможности взаимосвязи модулей. Программа может получиться короче, если разрешить модулям использовать внутренние элементы друг друга.

пометка">тесная взаимосвязь между модулями (или высокая степень сцепления модулей), и в таком случае становится невозможно использовать их по отдельности, что нарушает принципы модульного программирования.

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

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

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

Около вершин графа прописываются интерфейсные элементы: имена процедур, функций, констант, переменных, объявленных в открытой части модуля, которые далее более подробно описываются в комментариях к модулю в виде полного описания интерфейсной части. Над дугами прописываются те имена, которые используются в связанном (обычно родительском) модуле. При этом связь может быть перекрестной, т.е. модуль А использует интерфейсные элементы модуля В и. наоборот, модуль В использует интерфейсные элементы модуля А. Как уже говорилось, такое проектирование нежелательно, но возможно. В этом случае используемые интерфейсные элементы прописываются над и под дугой, соединяющей модули. Приведем пример такого графа (рис. 10.1
).

Здесь основная программа Р разбивается на три основных модуля М1, М2, МЗ. Из этих модулей в программе используются интерфейсные элементы А, В, С (из первого модуля), D (из второго модуля), F, G, К, L (из третьего модуля). Каждый из этих модулей разбивается на более мелкие, например, М2 разбивается на М2.1, М2.2, М2.3 и т.д. Из этой схемы, например, видны перекрестные ссылки между модулями М2 и М3, а также между М2.2 и М2.3.

После завершения модуляризации каждый модуль распределятся для кодирования между программистами с целью независимого написания кода и отладки. Однако в таких случаях часто возникает ситуация, когда в родительском модуле предполагается использование процедур и функций дочерних модулей, но дочерние модули еще не закодированы другими программистами. Например, в модуле МЗ используются элементы К, L из дочерних модулей, но эти модули пока не готовы. Как быть программисту, реализующему код модуля МЗ? Выход из этой ситуации осуществляется посредством написания в родительском модуле процедур (или функций) «заглушек», которые по имени и параметрам полностью совпадают с элементами К, L. Заглушки позволяют компилировать и выполнять программу в отладочном режиме.

«Заглушка» - процедура представлена точной спецификацией заголовка (название и параметры) и пустым телом. «Заглушка» - функция представлена точной спецификацией заголовка (название и параметры) и имеет в теле всего один оператор, возвращающий значение функции. Например, тело функции-заглушки L может быть таким:

формула" src="http://hi-edu.ru/e-books/xbook691/files/ris-page173.gif" border="0" align="absmiddle" alt="

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

Связность модуля определяется как мера независимости составляющих частей модуля. Чем выше связность модуля, тем лучше результат проектирования. Типы связности (в скобках указан коэффициент силы связности):

• функциональный (сильная связность) - 10;
• последовательная - 9;
• коммуникативная - 7;
• процедурная - 5;
• временная - 3;
• логическая - 1;
• по совпадению (слабая связность) - 0.

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

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

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

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

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

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

Если операторы модуля объединяются произвольным образом, например, когда нужно указать их размещение в области памяти, такой модуль имеет связность по совпадению.

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

Сцепление модулей определяется как мера относительной независимости модулей. Независимые модули могут быть модифицированы без переделки каких-либо других модулей. Слабое сцепление более желательно, так как это означает высокий уровень независимости модуля. Модули считаются полностью независимыми, если каждый из них не содержит информации о другом. Чем больше информации о других модулях используется в них, тем меньше они независимы и тем теснее сцеплены. Такая информация появляется в результате перекрестного использования имен модулей, назначения вызываемых последовательностей, неявного применения входных и выходных кодов, а также из данных, определяемых структурами общих областей памяти. Чем очевиднее взаимодействие двух связных друг с другом модулей, тем проще определить необходимую корректировку одного модуля, зависящую от изменений, производимых в других. Большая изоляция и непосредственное взаимодействие модулей приводит к трудностям в определении границ изменений одного модуля, которые устраняли бы ошибки в других. Ниже приведены примерные меры сцепления модулей (в различных источниках оценки степени сцепления отличаются) (табл. 10.1).

61.1K

Сайты тоже имеют свой скелет. Но о его особенностях спрашивать врачей бесполезно. Да и ветеринары тоже не в курсе строения сайта. Об этом ведомо лишь верстальщикам. Именно от них зависит строение скелета будущего ресурса. А главным способом создания костей его скелета является блочная верстка.

Верстка сайта – ремесло для посвященных

Есть в верстке сайта что-то таинственное. Но это до тех пор, пока не познакомишься с этим ремеслом поближе. Начинаем наше посвящение:

Следующим этапом разработки сайта после создания его макета является верстка. Задача верстальщика перенести с помощью html кода и таблиц css скелет будущего сайта в виртуальный мир. Проще говоря, перенести размеры и пропорции ресурса в форму, понятную для браузера.

В процессе верстки кодом html происходит разбивка «скелета » сайта на части. А с помощью css (каскадных таблиц стилей ) задаются размеры его «костей », цвет и расположение.

Различают несколько видов верстки:

I. Табличная – ранее была основным способом верстки. В табличной верстке для задания структуры сайта используется тег

и его дочерние теги. Верстка с помощью таблиц позволяет наиболее пропорционально расположить все элементы дизайна относительно друг друга. Но в тоже время такой код получается слишком объемным:

Также к основным недостаткам табличного кода относится его долгая загрузка и плохая индексация содержимого поисковыми системами.

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

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

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

II. Блочная – в данный момент является основным способом верстки. В отличие от табличной блочная верстка обладает рядом преимуществ:

• Отделение стиля элементов от кода html ;
• Возможность наложения одного слоя на другой – такая возможность во многом облегчает позиционирование элементов.
• Лучшая индексация поисковиками;
• Высокая скорость загрузки страницы, состоящей от взаимно независимых элементов;
• Легкость создания визуальных эффектов (выпадающих меню, списков, всплывающих подсказок ).

Основным недостатком блочной верстки является некая «двусмысленность » понимания ее кода различными браузерами. Поэтому часто html страницы приходится «доводить » путем использования специальных хаков.

С появлением блочной верстки родилось такое понятие, как «кроссбраузерность». Из-за различия отображения одного и того же элемента в разных браузерах верстальщикам приходится вставлять в основной html целые куски кода (хаки).

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

Основным элементом, применяемым в блочной верстке, является тег

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

Единственный ощутимый минус блочной вёрстки - сделанные на ней сайты могут по-разному отображаться в обозревателях. Чтобы этого избежать, нужно делать вёрстку «кроссбраузерной», то есть одинаково отображаемой любым обозревателем.

Суть блочной вёрстки

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

Каждая часть страницы помещается в свой блок

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

. Это вспомогательный слой, его смысл будет понятен, когда вы увидите код CSS.

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

Теперь добавим файл CSS, код которого приведён ниже.

Body { background: #FFF; color: #000; font-family: Arial, sans-serif; font-size: 14px; } #header { background: #F5DEB3; width: 100%; height: 55px; } #container { background: #FFD700; margin: auto auto; text-align: center; width: 80%; height: 400px; } #navigation { background: #FE9798; width: 100%; height: 25px; } #sidebar { background: #40E0D0; float: left; width: 20%; height: 280px; } #content { background: #DCDCDC; float: right; width: 80%; height: 280px; } #clear { clear: both; } #footer { background: #00BFFF; width: 100%; height: 40px; }

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

#clear { clear:both; } запрещает обтекание элемента слева и справа. Если убрать это правило, вёрстка «поедет» и низ сайта перестанет корректно отображаться.

CSS творит чудеса, и с ним наша HTML-страница примет уже совсем другой вид.

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

• CTA: что это и как повысить его эффективность
• Инвестиции в биткоин - куда вложить деньги Стоит ли вкладывать в биткоины
• Как с поисковым спамом борются поисковики
• Удаление начальных и конечных пробелов(и других символов) из строки в PHP Php убрать все пробелы из строки

Популярное

• Универсальная консоль отчетов (8
• Услуга конференц связь мтс отключить
• Музыка (Yandex music downloader)
• Новостной и аналитический портал "время электроники"
• Премиум шаблон Tempera. Супер тема wordpress. Вниманию пользователей Mantra, Nirvana, Parabola, Tempera: плагин Cryout Serious Theme Settings Случайные записи из рубрики
• Мощность: сколько ватт нужно АС
• Россию покроет «умная пыль Умная пыль нанотехнологии
• Обзор тарифов линейки «Просто супер» от МТС-Украина
• LG Spirit - Технические характеристики
• "Неполадки подключения или неверный код MMI "

© 2026 Wpack Компьютеры. Защита. Интернет. Оборудование. Настройка