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

Февраль 18, 2021

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

Содержание

2. Цели разработки: Перейти от простого изучения HTML и изменения кода, к написанию полного каркаса с нуля;
3. Задачи разработки: Изучить методическую литературу по HTML; Разработать дизайн сайта школы; Создать сайт школы; Опубликовать в
4. Проблемы разработки: В изучении правил написания тегов; Формирование написания CSS стилей; Нахождение необходимых тегов; Настройка местоположения
5. Объект разработки: Создание сайта посредством HTML технологий. Предмет разработки: Школьный сайт.
6. Введение: В разработке HTML дизайна я использовал программы: Adobe Photoshop CS5 – Графический редактор. Notepad++ –
7. Основная часть: Работу я начал с фантазий и представлениях, как будет выглядеть сайт; После чего сделал
8. Основная часть: Дальше начал писать HTML каркас; Начал сразу с начального кода.
9. Основная часть: Далее начал готовить структуру сайта в CSS стилях; Назначил и настроил background сайта.
10. После назначил местоположение основного блока сайта. CSS стиль: #wrap { width: 1000px; margin: 0 auto; min-height:
11. Далее сделал блок шапки сайта, где располагаются название и контакты школы. CSS код: #header { width:
12. После написал для каркаса верхнее меню с описанием, которое располагается под шапкой сайта. Основная часть:
13. Описание всей истории возникновения данной школы и её развитие. Место для обсуждения общественостью по заявлёным темам..
14. CSS код верхнего меню сайта: .top1 { position: relative; z-index: 2; float: left; width: 1000px; height:
15. Основная часть: Далее написал блок где располагается контент, информация и тексты.
16. Основная часть: HTML код: Title - Заголовок Text – Текст CSS код: #content { padding: 0
17. Основная часть: После контента я написал правое меню, я долго думал, как его оформить в стиле
18. Навигация: HTML код навигационного меню:
19. CSS код навигационного меню: #right { padding: 25px 0 0 19px; width: 276px; float: left; line-height:
20. Основная часть: Дальше написал нижний блок, с закрытием оформления основного блока и данными создателя, то есть
22. Адрес сайта: По данному адресу Вы можете посетить наш сайт: http://xxx.xx
23. Спасибо за внимание!
25. Скачать презентацию

Слайд 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 код:

Слайд 12

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

сайта.

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

Слайд 13

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

истории возникновения данной школы и её развитие.

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

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

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

Слайд 14

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

Слайд 15

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

Слайд 16

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

Title - Заголовок

Text – Текст

текста">

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

Слайд 19

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

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

Содержание

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

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

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

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

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

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

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

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

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

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

Тракторозаводского района г. Волгограда

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

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

CSS код верхнего меню сайта:.top1{ position: relative; z-index: 2; float: left; width: 1000px; height: 2px; overflow: hidden;}.top2{ background: #E5E5E5; padding:

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

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

Title - Заголовок

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

Навигация:

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

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

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

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

Похожие презентации