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

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

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

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

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

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

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

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

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

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

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

11 Далее сделал блок шапки сайта, где располагаются название и контакты школы. CSS код: #header { width: 100%; position: relative; height: 143px; background: url(../files/bg_1.jpg) no-repeat -185px 0px; } HTML код: Средняя общеобразовательна Школа 26 Тракторозаводского района г. Волгограда

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

13 Описание всей истории возникновения данной школы и её развитие. Место для обсуждения общественостью по заявлёным темам.. Виды контактов по которым можно найти и связатся с администрацией школы.

14 .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; }

15 Далее написал блок где располагается контент, информация и тексты.

16 HTML код: Title - Заголовок Text – Текст CSS код: #content { padding: px; line-height: 20px; } #left { width: 575px; float: left; padding: 1px 15px 0 0; line-height: 22px; } Я этот блок разместил слева и ограничил по размерам, дабы вместить слева маленькое навигационное меню.

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

18

19 #right { padding: 25px px; width: 276px; float: left; line-height: 20px; } #menu { padding: 20px 0 0; line-height: 18px; }

20 Дальше написал нижний блок, с закрытием оформления основного блока и данными создателя, то есть меня. 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 код: Design by - Dmitry P

21

22 По данному адресу Вы можете посетить наш сайт:

23

24