Главная Случайная страница


Полезное:

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


Категории:

АрхитектураАстрономияБиологияГеографияГеологияИнформатикаИскусствоИсторияКулинарияКультураМаркетингМатематикаМедицинаМенеджментОхрана трудаПравоПроизводствоПсихологияРелигияСоциологияСпортТехникаФизикаФилософияХимияЭкологияЭкономикаЭлектроника






Верстка разработанного макета





Как указывалось выше – каркас сайт имеет табличную верстку. Сам макет состоит из 3 основных блоков – контейнеров:

1) верхний – шапка сайта.

2) средний - контейнер, содержащий меню.

3) нижний – контейнер содержащий контент.

Начну с первого. В <body> код разметки следующий:

<table width=100% border="0" align="сenter" cellpadding=5 cellspacing="0" >

<tr>

<td height="219"><img src="Images2/флагъ.jpg" width="195" height="148"></td>

<td colspan="3

<form action="" method="post" name="form1" > <BIG> <H1> Муниципальное бюджетное общеобразовательное учреждение средняя общеобразовательная школа №28 с углубленным изучением отдельных предметов<br> г.Воронежа</H1></BIG>

</form>

</div></td>

<td><img src="Images2/1232.png" width="117" height="170" hspace="50"></td>

</tr>

</table>

В теге <table> использовали 5 атрибутов. Атрибут Width, который определяет размер меню, при сворачивание страницы. Атрибут по выравниманию по середине align="center".Атрибут Border, чтобы убрать границы меню. Атрибут cellpadding, который добавляет пустое пространство к ячейке, увеличивая тем самым ее размеры, и атрибут cellspacing, который задает расстояние между внешними границами ячеек. Все картинки вставлены, через тег img src, и имеют разный размер.

В теге <div> один атрибут, это присвоение выравнивание содержимого посередине align="center". Внутри тега надпись «Муниципальное бюджетное общеобразовательное учреждение средняя общеобразовательная школа №28 с углубленным изучением отдельных предметов г. Воронежа». Все изображения на сайте находятся в одной папке с названием Images2.

Следующий контейнер содержит 2 других контейнера: меню и сам контент.

Меню – самый сложный по исполнению момент. Контейнер меню cделан в виде заголовков таблицы. Код в теге <boby> следующий:

<table width=100% border="0" align="сenter" cellpadding=5 cellspacing="0" >

<tr bgcolor=" #A0522D ">

<td align="сenter" width="20%"><div align="center">

<a href="index.html"style=color:#ffffff><BIG>Главная страница</BIG></a></div></td>

<td align="сenter" width="20%"><div align="center"><a

href="news.html"style=color:#ffffff><BIG>Новости</BIG>

</a></div></td>

<td align="сenter" width="20%"><div align="center"><a

href="teacher.html"style=color:#ffffff><BIG>

Преподавательский состав</BIG></a></div></td>

<td align="сenter" width="20%"><div align="center"><a

href="history.html"style=color:#ffffff><BIG>

История Школы</BIG></a></div></td>

<td align="сenter" width="20%"><div align="center"><a

href="contact.html"style=color:#ffffff><BIG>Контакты

</BIG></a></div></td> </tr>

</table>

Мы придали ячейке <tr> цвет темно-коричневый. Для каждой ячейке поставили размер 20% и выравнивание по центру.

Для блока основного контента так же используются параметры стилей:

<P align=center>

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

Тег <BIG> используется для вывода более крупного текста.

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

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

 

Date: 2015-12-12; view: 373; Нарушение авторских прав; Помощь в написании работы --> СЮДА...



mydocx.ru - 2015-2024 year. (0.006 sec.) Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав - Пожаловаться на публикацию