Этапы создания разделов сайта «СПО Стерлитамакский политехнический техникум»

 

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

1 этап «Формирование цели разделов сайта» выполнен в параграфе 1.5.

2 этап: «Разработка дизайна разделов сайта»

Был разработан дизайн дизайн web-сайта для учебного заведения «СПО Стерлитамакский политехнический техникум» (Рисунок 30). Цветовая схема выполнена в зеленых тонах, так какзеленый цвет – спокойный и приятный. Этот цвет так же считают [15] цветом мудрости.

Шапка сайта выполнена в цвете #89BE3A, фон сайта - #85F53F, фон графы с текстом - #91C35C, меню - #87BD3B.

Использовался шрифт Times New Roman черного цвета

Рисунок 30.

Макет оформления web-cайта.

3 этап: Создание скелета разделов сайта.

Создание web-сайта:

На первом этапе был создан скелет сайта – таблица (Рисунок 31). Прописываетсяhtml-код:

<tablewidth="1228" border="0" align="center" cellpadding="0" cellspacing="0">

<tr><tdheight="83" colspan="2" >&nbsp;</td></tr>

<tr><td height="195" colspan="2">&nbsp;</td></tr>

<tr><td width="272" height="135">&nbsp;</td>

<td width="998" rowspan="8"><table width="929" height="564" border="0" align="center" cellpadding="2" cellspacing="15">

<tr><td width="660" height="171" align="center"><p>&nbsp;</p>

<h5 align="right">&nbsp;</h5></td></tr>

<tr><td height="161"><r></r>

<h5 align="right">&nbsp;</h5></td></tr>

<tr><td height="172">&nbsp;</td></tr></table></td></tr>

<tr><td height="66">&nbsp;</td></tr>

<tr><td height="66">&nbsp;</td></tr>

<tr><td height="66">&nbsp;</td></tr>

<tr><td height="66">&nbsp;</td></tr>

<tr><td height="65">&nbsp;</td></tr>

<tr><td height="44">&nbsp;</td></tr>

<tr><td height="318">&nbsp;</td></tr>

</table>

Рисунок 31.

Создание таблицы.

Затем оформляется шапка сайта (Рисунок 32). В самую первую строку таблицы вставляется изображение, заранее подготовленное – наименование учреждения. Прописывается html-код:

<img src="шапка (2).gif" width="1270" height="96" >

Рисунок 32.

Шапка сайта.

Вставка логотипа во вторую строку таблицы осуществляется с помощью html-кода: <img src="шапка.gif" width="1270" height="318" > (Рисунок 33).

Рисунок 33.

Вставка логотипа.

Левый нижний столбец заливается цветом #81E047. Затем вставляются кнопки меню, которые в дальнейшем будут гиперссылками на другие страницы сайта (Рисунок 34).

Прописывается html-код:

<tdwidth="272" height="88" bgcolor="#81E047"> - цвет ячеек таблицы.

Вставкакнопок:

<td height="66" bgcolor="#81E047"><a href="index.html"><img src="1 кнопка.gif" width="272" height="66" /></a></td></tr>

<tr><td height="66" bgcolor="#81E047"><img src="2 кнопка.gif" width="272" height="66" /></td></tr>

<tr><td height="66" bgcolor="#81E047"><img src="3 кнопка.gif" width="272" height="66" /></td></tr>

<tr><td height="66" bgcolor="#81E047"><img src="4 кнопка.gif" width="272" height="66" /></td></tr>

<tr><td height="65" bgcolor="#81E047"><img src="5 кнопка.gif" width="272" height="66" /></td></tr>

<tr><td height="44" bgcolor="#81E047"><img src="6 кнопка.gif" width="272" height="66" /></td></tr>

Рисунок 34.

Создание меню.

Теперь оформляется другой столбец фоновым изображением (Рисунок 35).

Для этого прописывается html-код:

<td width="998" rowspan="8" background="фоник.gif" >

Рисунок 35.

Фоновое изображение.

4 этап: Заполнения сайта

Оформляется первая графа новостей (Рисунок 36). А именно: вставляется изображение, текст и кнопка-гиперссылка, созданная заранее. Длятекстазадаетсястиль:

body p { font-family: "MS Serif", "New York", serif;

font-size: 24px;

text-align: center;

font-weight: bold;}

Затем вставляется в ячейку изображение, текст и кнопка:

<tr><td width="660" height="358" align="center"><strong><img src="phoca_thumb_l_img_1149.jpg" width="347" height="242" /></strong>

<p><strong>В 2013 году исполнилось 70 лет со дня основания </strong><strong>Профессионального лицея №15</strong></p>

<h5 align="right"><img src="далее.gif" width="187" height="44" /></h5></td></tr>

Рисунок 36.

Оформление первой графы.

Аналогичным образом оформляются другие графы новостей (Рисунок 37). Для второй ячейки прописывается html-код:

<tr><td height="161"><r><strong>СтудентгруппыС-41-2</strong></r>

<r><strong>ВасильевМаксим</strong></r>

<r><strong>занял II место в городском конкурсе &quot;Студент года 2012&quot;.</strong></r>

<r><strong>Поздравляем Максима и его команду!</strong></r>

<h5 align="right"><img src="далее.gif" width="187" height="44" /></h5></td></tr>

Для текста во второй ячейке так же задается стиль:

body r { font-family: "MS Serif", "New York", serif;

font-size: 24px;

text-align: center;}

Затем оформляется третья графа:

<tr><td height="484"><div align="center">

<p><img src="mFNyHFdm4ZE.jpg" width="228" height="242" />ДЕНЬЗНАНИЙ!</p>

<p class="z"><strong><em>Молодежьидетвора</em></strong></p>

<p class="z"><strong><em>В этот первый день осенний</em></strong></p>

<p class="z"><strong><em>Принимайте поздравленья</em></strong></p>

<p class="z"><strong><em>И учитесь «на ура»</em></strong>!</p>

<p>&nbsp;</p></div></td></tr>

Чтобы текст в третьей графе был красного цвета, создается класс:

.z { color: #F00;

text-align: center;}

Рисунок 37.

Оформление второй и третьей графы.

Главная страница сайта готова (Рисунок 38). Аналогичным образом по этому же «скелету» были разработаны остальные страницы сайта.

Рисунок 38.

Первая страница раздела «Новости».

 

Аналогичным образом были созданы остальные страницы заказанных разделов: Раздел «О техникуме» (Рисунок 39)

Рисунок 39.

Страница раздела «О техникуме»

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Документ без названия</title>

<style type="text/css">

body p { font-family: "MS Serif", "New York", serif;

font-size: 18px;

text-align: center;

font-weight: bold;}

body r {font-family: "MS Serif", "New York", serif;

font-size: 24px;

text-align: center;}

.z { color: #F00;

text-align: center;}</style>

</head>

<body>

<table width="1228" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td height="83" colspan="2" bgcolor="#99CC99"><img src="шапка (2).gif" width="1270" height="96" ></td></tr>

<tr><td height="195" colspan="2"><img src="шапка.gif" width="1270" height="318" /></td></tr>

<tr><td width="272" height="101" bgcolor="#81E047">&nbsp;</td>

<td width="998" rowspan="8" background="фоник.gif" ><table width="929" height="1063" border="0" align="center" cellpadding="2" cellspacing="15"><tr>

<td width="660" align="center"><strong><img src="546465.jpg" width="377" height="262" /></strong>

<p>Государственное бюджетное образовательное учреждение среднего профессионального образования «Стерлитамакский политехнический техникум» создан 5 июля 2011 года в результате реорганизации двух образовательных учреждений: Государственного образовательного учреждения среднего профессионального образования «Стерлитамакский станкостроительный техникум» и Государственного образовательного учреждения начального профессионального образования Профессиональный лицей №15 на основании распоряжения правительства Республики Башкортостан. Высокий профессионализм педагогического коллектива, внедрение современных педагогических технологий в процесс обучения и непрерывно развивающаяся материальная база – первостепенные задачи директора техникума, Почетного работника среднего профессионального и высшего профессионального образований Российской Федерации, Заслуженного работника образования Республики Башкортостан, Резяпова Рашита Шагитовича.</p>

<p>Государственное бюджетное образовательное учреждение среднего профессионального образования «Стерлитамакский политехнический техникум» представляет собой двухуровневую систему образования: начального профессионального и среднего профессионального.</p>

<p>Уникальность учебного учреждения заключается в широком спектре профессий и возможности каждого выпускника техникума в построении личной карьеры, связанной с деятельностью химических, машиностроительных предприятий и развитием малого бизнеса в данных отраслях.</p>

<p>Государственное бюджетное образовательное учреждение среднего профессионального образования «Стерлитамакский политехнический техникум» сегодня – это около 800 студентов, обучением и воспитанием которых занято около 100 инженерно-педагогических работников, а также коллектив сотрудников, обеспечивающий высокое качество и эффективность учебно-воспитательного процесса (40 преподавателей имеют высшую квалификационную категорию, 19 преподавателей - первую квалификационную категорию, 8 преподавателей - вторую квалификационную категорию).</p>

<p>Большое внимание уделяется изучению современного металлообрабатывающего и литейного оборудования, средств автоматизации производства и новых достижений в технологии химического производства.</p>

<p>Преимущества получения профессионального образования в Политехническом техникуме:</p>

<p>• Практическое обучение студентов организуется в соответствии с действующими учебными планами и программами и проходит на ведущих предприятиях города: ОАО «Стерлитамакский станкостроительный завод», ОАО «Строймаш», ОАО «Красный пролетарий», ЗАО «Вагоноремонтный завод», ОАО «Сода» и др.</p>

<p>• Студентам выплачивается стипендия, обучающиеся НПО обеспечиваются бесплатным питанием.</p>

<p>• Все обучающиеся, кроме основной профессии или специальности, получают дополнительную или смежную профессию.</p>

<p>• Возможность непрерывного получения образования.</p>

<p>По всем подготавливаемым специальностям и профессиям в техникуме имеются оснащенные оборудованием и приборами учебно-производственные мастерские и лаборатории в соответствии с требованием учебных программ и Федеральных государственных образовательных стандартов, в том числе 3 лаборатории информатики с подключением к Интернету, 10 учебно-производственных мастерских, 1 химическая лаборатория. В токарной и фрезерной мастерских выпускаются слесарно-поворотные тиски Т-140. В сварочной мастерской изготавливаются оконные решетки, металлические двери, ворота и др. В настоящее время техникум располагает необходимым современным оборудованием, в том числе мультимедийными проекторами, интерактивными досками и т.д. В распоряжении обучающихся имеются 2 спортивных зала и 2 актовых зала. Библиотечный фонд техникума насчитывает более 70 тыс. экземпляров учебно-методической литературы.</p>

<h5 align="right">&nbsp;</h5>

<h5 align="right">&nbsp;</h5></td></tr>

</table></td></tr>

<tr><td height="66" bgcolor="#81E047"><a href="новости.html"><img src="1 кнопка.gif" width="272" height="66" /></a></td></tr>

<tr><td height="66" bgcolor="#81E047"><a href="техникум.html"><img src="2 кнопка.gif" width="272" height="66" /></a></td></tr>

<tr><td height="66" bgcolor="#81E047"><img src="3 кнопка.gif" width="272" height="66" /></td></tr>

<tr><td height="66" bgcolor="#81E047"><img src="4 кнопка.gif" width="272" height="66" /></td></tr>

<tr><td height="65" bgcolor="#81E047"><img src="5 кнопка.gif" width="272" height="66" /></td></tr>

<tr><td height="44" bgcolor="#81E047"><img src="6 кнопка.gif" width="272" height="66" /></td></tr>

<tr><td height="44" bgcolor="#81E047">&nbsp;</td></tr>

</table>

</body>

</html>