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

Содержание

Слайд 2

Цели разработки:

Перейти от простого изучения HTML и изменения кода, к написанию

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

Слайд 3

Задачи разработки:

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

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

Слайд 4

Проблемы разработки:

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

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

Слайд 5

Объект разработки:

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

Предмет разработки:

Школьный сайт.

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

Слайд 6

Введение:

В разработке HTML дизайна я использовал программы:
Adobe Photoshop CS5 – Графический

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

Слайд 7

Основная часть:

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

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

Слайд 8

Основная часть:

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

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

Слайд 9

Основная часть:

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

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

Слайд 10

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

Основная

После назначил местоположение основного блока сайта. CSS стиль: #wrap { width: 1000px;
часть:

Слайд 11

Далее сделал блок шапки сайта, где располагаются название и контакты школы.
CSS код:
#header
{
width:

Далее сделал блок шапки сайта, где располагаются название и контакты школы. CSS
100%;
position: relative;
height: 143px;
background: url(../files/bg_1.jpg) no-repeat -185px 0px;
}

Основная часть:
HTML код:


Слайд 12

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

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

Основная часть:

Слайд 13



1

Описание всей

Описание всей истории возникновения данной школы и её развитие. Место для обсуждения
истории возникновения данной школы и её развитие.



2

Место для обсуждения общественостью по заявлёным темам..



3

Виды контактов по которым можно найти и связатся с администрацией школы.





HTML код верхнего меню:

Слайд 14

CSS код верхнего меню сайта:

.top1
{
position: relative;
z-index: 2;
float: left;
width: 1000px;
height: 2px;
overflow: hidden;
}
.top2
{
background: #E5E5E5;
padding:

CSS код верхнего меню сайта: .top1 { position: relative; z-index: 2; float:
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 – Текст


Основная часть: HTML код: Title - Заголовок Text – Текст CSS код:
текста">


CSS код:
#content
{
padding: 0 0 0 56px;
line-height: 20px;
}
#left
{
width: 575px;
float: left;
padding: 1px 15px 0 0;
line-height: 22px;
}

Я этот блок разместил слева и ограничил по размерам, дабы вместить слева маленькое навигационное меню.

Слайд 17

Основная часть:

После контента я написал правое меню, я долго думал, как его

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

Слайд 18

Навигация: HTML код навигационного меню:








HTML код навигационного меню:

Слайд 19

CSS код навигационного меню:

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

CSS код навигационного меню: #right { padding: 25px 0 0 19px; width:
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 код:


Слайд 22

Адрес сайта:

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

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

Слайд 23

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

Спасибо за внимание!
Имя файла: Разработка-HTML-дизайна-сайта-школы..pptx
Количество просмотров: 261
Количество скачиваний: 0