Авторский знак. Seosait21.ru Есть у человека надежда. Пока не поздно. Вгрызайся и изучай.
Нажимай и поддержи.

Пн Вт Ср Чт Пт Сб Вс
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30


Чувашия-это моя Россия

Что такое структура сайта.

Начинаем создавать свой собственный сайт.

Входим в наш любимый универсальный редактор Adobe Dreamweaver CS5. Разворачиваем " Рабочий стол", "Мой компьютор", диск"D", папку "Сайт" и открываем файл "index.html". Открывается нам совершенно чистое окно. На панели " Код"- чисто; "Разделение" -чисто; нажимаем на "Дизайн"- чисто. Так и должно быть. Если помните, мы создали пустой файл под именем "index.html", то так оно должно и быть на мониторах компьюторов и страница вашего сайта чиста и свежа без помарок.

Самую первую строку и она у нас на странице сайта будет самой верхней напишем так:

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Что данная строка означает? Для чего нужна на странице сайта? Голову забивать этим не нужно, но каждая страница сайта первой строкой должна начинаться такой шапочкой. Смысл непонятного выражения сводиться просто говоря к тому, что Вы подтверждаете " браузеру"( преобразователю ваших тегов разметки элементов страницы сайта) о своем замечательном знании как составляются документ в HTML-кодах версии 4.01. и будете писать коды на английском языке. Все. И забудьте об этом, но на странице сайта первой строчкой всегда включайте, иначе могут возникнуть не совсем Вам нужные результаты.

Хотя, пожалуйста, ознакомьтесь. Элемент < !DOCTYPE> предназначен для указания типа текущего документа — DTD( Document Type Definition, описание типа документа). Необходимо, чтобы браузеры понимали, как следует интерпретировать( преобразовывать) текущую веб-страницу, поскольку HTML существует в нескольких версиях, кроме того, имеется XHTML( EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузеры не испытывали напряжение и понимали, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать < !DOCTYPE>.

Существует несколько видов < !DOCTYPE>, они различаются в зависимости от версии языка, на которого ориентированы:

Для HTML 4.01

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Строгий синтаксис HTML.

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Переходный синтаксис HTML.

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> В HTML-документе применяются фреймы.

Для HTML 5

< !DOCTYPE html> Для всех документов.

Для XHTML 1.0

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Строгий синтаксис XHTML.

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Переходный синтаксис XHTML.

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> Документ написан на XHTML и содержит фреймы.

Для XHTML 1.1

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> Разработчики XHTML 1.1 предполагают, что он постепенно вытеснит HTML.

Параметры:

                     Элемент верхнего уровня — указывает элемент верхнего
                      уровня в документе, для HTML это тег < html>.
                     Публичность — объект является публичным( значение PUBLIC) 
                      или системным ресурсом( значение SYSTEM).
                      Для HTML/XHTML указывается значение PUBLIC. 
                     Регистрация — сообщает, что разработчик DTD зарегистрирован 
                      в международной организации по стандартизации( International 
                      Organization for Standardization, ISO). Принимает одно из двух 
                      значений: плюс (+) — разработчик зарегистрирован в ISO
                      и - (минус) — разработчик не зарегистрирован. Для W3C значение ставится «-».
                     Организация — уникальное название организации, разработавшей DTD. 
                      Официально HTML/XHTML публикует W3C, это название и пишется в < !DOCTYPE>.
                     Тип — тип описываемого документа. Для HTML/XHTML значение указывается DTD.
                     Имя — уникальное имя документа для описания DTD. 
                     Язык — язык, на котором написан текст для описания объекта. 
                      Содержит две буквы, пишется в верхнем регистре. Для документа 
                      HTML/XHTML указывается английский язык (EN).
                     URL — адрес документа с DTD.

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

Можно пойти совсем по простому пути, например по такому: Нажимаем на "Файл", "Создать", открывается окно "Создать документ" с четыремя колонками, во второй колонке на первой строчке нажимаем на "HTML", в третьей колонке на третью строчку снизу под названием " 3 колонки переменной ширины, верхние и нижные колонтитулы, в четвертой колонке нам выбрасывается форма будущего сайта и там же выбираем тип документа "HTML 4/01 Transitional и нажимаем на "создать". Открывается окно с привязкой файла с .css расширением thrColLigHdr.css, нажимаем на "сохранить" и тут же открывается для нас готовый шаблон файла с расширением .html "Untitled-1" . Как видим, почти такая же первая строчка и страничка с готовым шаблоном под код HTML - бери и пользуйся. Но мне лично этот вариант, кажется, легко доступным, но не будет не простым для понимания. Да и сама структура сайта на базе class="container" и class="sidebar", хотя она более современна, чем то, что я хочу Вам предоставить, легче оформляется при помощи каскадных таблиц стилей и Вы легко можете сайт создавать из блоков < div>...< /div> убрав теги < table>...< /table> и заменив строки и столбцы на блочные элементы < div> , но для простоты понимания в изучении как создавать сайт пошел по этому пути.

И так шапочка нашей странички сайта как бы готова. Структуру сайта можно выбрать разной и тремя колонками, и с одной без верхнего колонтитула выбирайте сами при создании сайта. Однако, мне почему-то нравиться: 3 колонками, с верхним и нижним колонтитулами. Пусть будет так, тем более из 3 колонок преврать в 1колонку или 2 колонки совсем просто, задав ширину одной или двух боковых колонок ( width="0%") равной нулю.

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

Итак, структура страницы сайта будет такой:

                < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
                < html>
                < head>
                < title>Демо.< /title>
                < link rel="stylesheet" href="stylesheet/demo000.css" type="text/css">
                < /head>
                < body>
                < div id="nav">< /div>
                < table>
                < tr>
                < td id="tdleft">
                < /td>
                < td id="tdcenter">
                < /td>
                < td id="tdright">
                < /td>
                < /tr>
                < /table>
                < div id="copy">< /div>
                < /body>
                < /html>

Коды с угловыми открывающимися и закрывающимися скобками называются тегами и они как видите все идут парами. Смотрите < html>< /html>;   ;   < title>< /title>;    < body>< /body>;    < table>< /table>;    < tr>< /tr>;    < td>< /td>;   пара блочных тегов < div>< /div>; из этих только один тег < link rel="stylesheet" href="stylesheet/demo.css" type="text/css"> не имеет закрывающегося брата. Ширины колонок можно делать любой, задав width="65%(изменив эти числа в процентах)", однако общая сумма ширины колонок не может быть больше 100%. В дальнейшем Вы увидите, что более удобно или проще изменять эти данные не здесь, а в файле "index.css" - он для этого нами и был создан.


seosait21.ru
HTML

seosait21.ru
CSS

seosait21.ru
Web-диз.
HTML ссылка CSS ссылка ...

seosait21.ru
JavaScript

seosait21.ru
PHP

seosait21.ru
JQuery
JavaScript ссылка PHP ссылка JQuery ссылка

seosait21.ru
SEO.

seosait21.ru
MySQL

seosait21.ru
XML
... ... ...

обратно на главную   назад   дальше   вперед

ПОНРАВИЛОСЬ?
ПОДЕЛИСЬ с ДРУЗЬЯМИ: