школа по созданию сайтов



Вёрстка сайта

  Вёрстка сайта начинается с создания его макета. После чего макет сайта разрезается на отдельные составляющие элементы и с помощью связывания кодом становится сайтом.

  Скопируйте выделив в Paint'e отдельный элемент открытого в этой программе макета: хедер, кнопку или картинку. Откройте второй (новый) рисунок и вставьте в него это изображение, после чего сохраните его под соответствующим именем на латыни. Например, скопируйте кнопку «Войти» и вставив её во второй документ сохраните под именем «button1.png». После этого снова очистите второй документ для вставки и сохранения нового элемента.

паинт

  Сохраните так все графические элементы. Обратите внимание на размер каждого сохранённого элемента: элемент не должен иметь больших белых полей, чтобы корректно отображаться при вёрстке! Все изображения сохраните в отдельной папке, а эту папку создайте в другой папке на Вашем рабочем столе. Папку с изображениями назовите «images», а папку, в которой она находится, любым другим именем или просто, по-русски, «Сайт».

папка с изображениями

  Итак, папки готовы. Изображения мы поместили в папку images, а текст напечатали в MS Word. Макет сайта и основа есть. Теперь следует вёрстка изображений и вёрстка текста. Создаём в папке «Сайт» документ index.html и пишем код, но перед этим кое-что ещё. Представим визуально: как можно вписать элементы нашей странички в html таблицу.

сетка сайта

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

  Обратите внимание на размер самого широкого графического элемента header. Этот элемент мы поставим по центру (для удобства) над таблицей и создадим для него карту изображения. Так как на нём слева и справа присутствуют активный логотип и кнопка регистрации. Размер по ширине этого элемента будет приблизительно соответствовать размеру нашей невидимой таблицы завёрстки. Читайте, что будет дальше.



hand
по созданию сайтов



© 2010-2013 "www.1artsite.com". All rights reserved.
© 2010-2013 Издательство Сергей Меркоев. Все права защищены.