'

Разработка HTML дизайна сайта школы.

Понравилась презентация – покажи это...





Слайд 0

Выполнил: Петров Дмитрий Вячеславович Руководитель: Старцева Татьяна Александровна Разработка HTML дизайна сайта школы.


Слайд 1

Цели разработки: Перейти от простого изучения HTML и изменения кода, к написанию полного каркаса с нуля; Научиться применять полученные знания при составлении кода.


Слайд 2

Задачи разработки: Изучить методическую литературу по HTML; Разработать дизайн сайта школы; Создать сайт школы; Опубликовать в интернете.


Слайд 3

Проблемы разработки: В изучении правил написания тегов; Формирование написания CSS стилей; Нахождение необходимых тегов; Настройка местоположения блоков.


Слайд 4

Объект разработки: Создание сайта посредством HTML технологий. Предмет разработки: Школьный сайт.


Слайд 5

Введение: В разработке HTML дизайна я использовал программы: Adobe Photoshop CS5 – Графический редактор. Notepad++ – Текстовый Редактор. Google Chrome – Веб-браузер. Применял технологии: HTML4 CSS3


Слайд 6

Основная часть: Работу я начал с фантазий и представлениях, как будет выглядеть сайт; После чего сделал небольшой набросок эскиза.


Слайд 7

Основная часть: Дальше начал писать HTML каркас; Начал сразу с начального кода.


Слайд 8

Основная часть: Далее начал готовить структуру сайта в CSS стилях; Назначил и настроил background сайта.


Слайд 9

После назначил местоположение основного блока сайта. CSS стиль: #wrap { width: 1000px; margin: 0 auto; min-height: 100%; background-image: url(../files/bg_2.gif); } Основная часть:


Слайд 10

Далее сделал блок шапки сайта, где располагаются название и контакты школы. CSS код: #header { width: 100%; position: relative; height: 143px; background: url(../files/bg_1.jpg) no-repeat -185px 0px; } Основная часть: HTML код: <div id="header"> <div id="head_1"><a href="./index.html"><strong>Средняя общеобразовательна Школа №26</strong><h1>Тракторозаводского района г. Волгограда</h1></a></div> <div id="head_2"><a href="mailto:moysn26@yandex.ru">moysn26@yandex.ru</a><br><img src="./files/tel.gif" alt="Телефон +"></div> </div>


Слайд 11

После написал для каркаса верхнее меню с описанием, которое располагается под шапкой сайта. Основная часть:


Слайд 12

<div class="top1"></div> <div class="top2"> <div class="top4"><a href="./history.html"><img src="./files/text_1.gif" alt="1"></a> <p>Описание всей истории возникновения данной школы и её развитие.</p> </div> <div class="top5"><a href="./forum"><img src="./files/text_2.gif" alt="2"></a> <p>Место для обсуждения общественостью по заявлёным темам..</p> </div> <div class="top6"><a href="./contact.html"><img src="./files/text_3.gif" alt="3"></a> <p>Виды контактов по которым можно найти и связатся с администрацией школы.</p> </div> </div> <div class="top3"></div> HTML код верхнего меню:


Слайд 13

CSS код верхнего меню сайта: .top1 { position: relative; z-index: 2; float: left; width: 1000px; height: 2px; overflow: hidden; } .top2 { background: #E5E5E5; padding: 37px 2px 35px 58px; float: left; width: 940px; position: relative; z-index: 1; top: -1px; line-height: 18px; background: url(../files/line_1.gif) no-repeat 17px 0; } .top4 { width: 270px; float: left; } .top5 { width: 250px; float: left; padding-left: 41px; } .top6 { width: 240px; float: left; padding-left: 43px; }


Слайд 14

Основная часть: Далее написал блок где располагается контент, информация и тексты.


Слайд 15

Основная часть: HTML код: <div id="content"> <div id="left"> <!"Начало текста"> <p> <h3>Title - Заголовок</h3> <p>Text – Текст</p> <!"Конец текста"> </p> CSS код: #content { padding: 0 0 0 56px; line-height: 20px; } #left { width: 575px; float: left; padding: 1px 15px 0 0; line-height: 22px; } Я этот блок разместил слева и ограничил по размерам, дабы вместить слева маленькое навигационное меню.


Слайд 16

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


Слайд 17

<div id="right"> <!"Меню"> <div align="center" id="menu"> <span style="font-size:18pt" <p style="color:black" class="H4">Навигация:</p> <a href="./index.html"><img src="./files/text_8.gif"></a> <a href="./charter1.html"><img src="./files/text_5.gif"></a> <a href="./health-status-of-students.html"><img src="./files/text_9.gif"></a> <a href="./program-of-development.html"><img src="./files/text_4.gif"></a> <a href="./draft-a-new-school.html"><img src="./files/text_7.gif"></a> <a href="./sports-achievements.html"><img src="./files/text_6.gif"></a> </span> </div> </div> HTML код навигационного меню:


Слайд 18

CSS код навигационного меню: #right { padding: 25px 0 0 19px; width: 276px; float: left; line-height: 20px; } #menu { padding: 20px 0 0; line-height: 18px; }


Слайд 19

Основная часть: Дальше написал нижний блок, с закрытием оформления основного блока и данными создателя, то есть меня. CSS код: #footer { width: 966px; height: 95px; margin: -95px auto 0; font: 90% tahoma, Arial, sans-serif; background: url(../files/bg_3.gif) repeat-x bottom; } HTML код: <div id="footer"> <div id="cop"><b>Design by - Dmitry P. - 2011</b></div> </div>


Слайд 20


Слайд 21

Адрес сайта: По данному адресу Вы можете посетить наш сайт: http://xxx.xx


Слайд 22

Спасибо за внимание!


Слайд 23


×

HTML:





Ссылка: