Cтруктура страницы сайта

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

Как создать html страницу сайта

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

Предварительно создайте в какой нибудь директории жесткого диска папку, где будут храниться файлы для экспериментов. Открываем программу, справа ищем кнопочку Файлы с треугольничком. В окошке ищем раздел диска и вашу новую папку, жмем правой кнопкой на папку, в выпавшем контекстном меню нажимаем Новый файл. Тут же задаем ему имя — index.html (имеется ввиду, что это будет и главная страница и основной шаблон страницы, на основе которого вы будете делать внутренние страницы сайта).

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

создать страницу сайта

создать страницу сайта

Двойным щелчком открываем вновь созданный файл и сразу, давайте пропишем основные мета-теги между тегами <head> и </head>

<title> Пишем заголовок сайта или страницы </title>

<meta http-equiv=»Content-Language» content=»ru»> — язык вашей страницы

<meta http-equiv=»Content-Type» content=»text/html; charset=windows-1251″> — кодировка сайта

<meta name=»author» content=»Vladimir Mizukov»> — автор контента

<meta name=»description» content=»Описание содержимого страницы «>

<meta name=»keywords» content=»Ключевые слова и фразы «>

Другие мета-теги на ваше усмотрение, их описания в интернете имеются во множественном числе и повторяться нет смысла.

как написать мета-теги

как написать мета-теги

Структура страницы сайта

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

Под структурой страницы я подразумевал не разметку html и не теги, которые вы быстро запомните, а именно таблицы и свойства таблиц. Вам надо просто «Врубиться» как ими управлять, это не сложно и не страшно 🙂 В левом верхнем углу интерфейса программы есть три кнопочки: Код, Раздельно, Дизайн. В первом случае вы видите в рабочем окне только html код; во втором — в верху код, внизу дизайн; в третьем — только дизайн. Сейчас жмем Раздельно.

В коде, после <body> пропишем основную таблицу <table></table>, без этого ни куда, это основа тела. Между этими тегами добавим строчку <tr></tr>, а между ними в свою очередь столбец<td></td>, (как в сказке про яйцо) а в нем любой знак, любое слово, что б в дизайне было видно, куда мышкой ткнуть.

Так вот чтоб руками много не рисовать, в дизайне тыкаем правой кнопкой на наш ориентир и в выпавшем меню жмем таблица — разделить ячейку…

как создать таблицу

как создать таблицу

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

выбор столбцов и строк

выбор столбцов и строк

Как редактировать таблицы сайта

Для того, что бы редактировать таблицы по высоте, ширине, есть пара интересных тегов. Посмотрите на таблицу с четверками… в коде,в тег <td> вставляем colspan=»ширина равная количеству столбцов», в нашем случае получаем <td colspan=»3″> Так мы сделали отдельную таблицу, равную ширине всех остальных таблиц вместе, т.е. ширине страницы.

colspan

colspan

В программе есть интересная подсказка, когда в коде, в теге <td> перед закрывающей скобкой клавишей spase вы делаете пробел, выскакивает подсказка с набором тегов. Попробуем выбрать rowspan.

rowspan

rowspan

Между кавычками пишем число строк, высоте которых хотим сделать равной столбец. И получаем другой вид таблицы (см. 333) Опять поэкспериментируйте.

как растянуть столбцы

как растянуть столбцы

Теперь тегами width=» « и height=» « регулируем ширину и высоту каждой таблицы, добавляя их так же в <td>. <td width=»500″ height=»50″ colspan=»3″>.

ширина и высота таблицы

ширина и высота таблицы

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

Вот теперь вы сможете плясать дальше, этих данных конечно очень мало, но вы уже ориентируетесь в структуре страницы и методом «научного тыка» сможете развивать свои познания дальше. Так крепче запоминается.

На заметку: Зачем мне нужно знать структуру страницы сайта?

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