 |
Описание выполнения задания в среде разработки Web-сайтов
|
|
|
|
1. Создание проекта
При создании проекта выбираем дизайн сайта и страниц, прописываем его в таблице стилей (.css). В нашем случае это будет выглядеть так:
/************** структура шаблона *****************
- body - в файле scin/teg.css
body.main - окна новостей и прочего
*main | class=main id=main - основное поле построения шаблона
* class=head - шапка сайта, содержит заголовок сайта, может содержать верхнее и среднее меню
*id=zagol - заголовок сайта
+ id=name_div
* id=left - лкевая колонка
* id=content - ячейка, содержащая контент страницы
* id=right - правая колонка
* id=menu_top - верхнее меню
* id=menu_middle - среднее меню
* id=menu_left - левое меню
- id=left_top - надстройка над левым меню
* id="menu_right" - правое меню
- id=right_top - надстройка над правым меню
* id=menu_bottom - нижнее меню
* id=text - поле садержания страницы
+ class=pagename_div - заголовок страницы, если не прописано в шаблоне, генерится внутри #text, но можно указать место в самом шаблоне
+ id="pagename" - используется если заголовок страницы вынесен из поля #text
+ id=text_div - текст универсальной страницы
* id=anons_1, id=anons_2 - поля анонсов
* id=l_search - поле поиска, если не прописано в шаблоне, генерится в левом меню, но можно указать место в самом шаблоне
+ class=search_b - кнопка поиска
+ class=search_t - текстовое поле поиска
* id=link - поле быстрой навигации
+ id=link_back, id=link_back2 - кнопки назад
+ id=link_next, id=link_next2 - кнопки вперед
+ id=print1, id=print2 - кнопки Печать
+ id=top_link - кнопка вверх
* id=footer - футер
+ id=footer_text - текст футера
* id=our - копирайт
****************************************************
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
**************************************************
!!! все фоны должны находиться в папке pic!!!
**************************************************/
body.main{
height: 100%;
width: 100%;
padding: 10px;
text-align: left;
background-color: #fafafa;
}
#main{
background-color: #FAFAFA;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
|
|
|
font-size: 10pt;
height: 100%;
width: 790px;
border: 1px solid #cb5a21;
}
/********************* ШАПКА *********************/
.head{
background-color: #899BBF;
background-position: right top;
background-repeat: no-repeat;
text-align: center;
border-bottom: 1px solid #fafafa;
}
#zagol{
text-align: right;
padding: 2px 0px 2px 200px;
vertical-align: middle;
background-image: url(scin/pic/head.gif);
background-repeat: no-repeat;
background-position: left;
height: 138px;
}
#name_div{
vertical-align: middle;
color: #FAFAFA;
font-size: 17pt;
padding: 3px;
font-weight: bold;
}
#name_div p, #name_div td{/*нельзя указывать ширину*/
color: #FAFAFA;
font-size: 17pt;
padding: 3px;
font-weight: bold;
}
/*************** КОЛОНКИ ****************/
#left{
vertical-align: top;
border-right: 1px solid #fafafa;
}
#content{
vertical-align: top;
width: 100%;
height: 100%;
}
#right{
vertical-align: top;
padding: 0 15px 0 0;
}
/********************* МЕНЮШКИ *********************/
/* Заполняются в ЭТОМ файле если должны отображаться
как декоративные элементы независимо от присутсвия
данного вида на странице и типа данного меню */
#menu_top{
background-color: #CB5A21;
height: 10px;
}
/*--------------------------------------------*/
#menu_middle{
background-color: #CB5A21;
height: 10px;
}
/*--------------------------------------------*/
#menu_left{
color: #FAFAFA;
vertical-align: Top;
}
#menu_left_top{}
.menu_line_vert{}
.menu_line_vert2{}
/*--------------------------------------------*/
#menu_right{}
#menu_right_top{}
.menu_right_vert{}
.menu_right_vert2{}
/*--------------------------------------------*/
#menu_bottom{}
/********************* КОНТЕНТ *********************/
#pagename{
vertical-align: top;
height: 1px;
}
.pagename_div,.pagename_div p,.pagename_div td{
font-size: 16pt;
color: #FAFAFA;
font-weight: bold;
}
#text{
font-size: 10pt;
height: 100%;
padding: 0 10px 0 10px;
vertical-align: top;
width: 100%;
}
#text_div{
height: 100%;
}
/********************* ДОП. ЭЛЕМЕНТЫ *********************/
#anons_1{
vertical-align: top;
color: #333;
padding: 3px;
border-right: 1px solid #fafafa;
font-size: 9pt;
height: 100%;
}
#anons_2{
vertical-align: top;
height: 100%;
font-size: 9pt;
}
#l_search{
text-align: center;
padding: 0 0 5px 0;
}
.search_b{
background-color: #899BBF;
color: #FAFAFA;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 10pt;
font-weight: bold;
text-align: center;
margin: 4px 0 0 0;
}
.search_t{
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 10pt;
}
#link{
text-align: right;
height: 1px;
padding: 3px 15px 3px 0;
}
#link table {
text-align: right;
float: right;
}
#link a{
color: #cb5a21;
font-size: 8pt;
padding: 4px;
text-decoration: none;
}
#link a:hover{
color: #899BBF;
}
#link_back, #link_back2{}
#link_next, #link_next2{}
#print1, #print2{}
#top_link{}
#footer{
height: 10px;
|
|
|
}
#footer_text{
height: 10px;
font-size: 9pt;
margin: 10px;
padding: 0 10px 0 20px;
text-align: right;
}
#our{
background-color: #CB5A21;
color: #fafafa;
font-size: 7pt;
text-align: right;
height: 10px;
padding: 0 20px 6px 0;
}
#our *{
color: #fafafa;
}
2. Создание меню и добавление страниц.
Меню сайта автоматически прописываем согласно заданными нами стилями и собираем в папку дополнительных стилей. Файлы с изображением фона сохраняем в папку pic (рис. 1).
Рисунок 1 – Папка с содержанием стилей
3. Добавление информации на сайт
Создаём каждую страницу сайта, используя наши стили, и собираем в корневом каталоге проекта (рис. 2).
Рисунок 2 – Папка с содержанием страниц сайта
Всю информацию по разделам вставляем в созданные нами страницы и редактируем. Описание кода страниц со вставленными материалами изложено в «Приложении Б – Листинг программы».
Рабочий сайт выглядит следующим образом (рис. 3):
Рисунок 3 – Рабочий сайт
Используя данные инструменты, нами разработано электронное пособие по дисциплине «Компьютерная графика» (рис. 3), отвечающая всем требованиям данного предмета в нашей школе. Общий вид пособия следующий: слева – меню сайта, сверху – название сайта, на главной странице сайта – содержание. В содержании проекта предусмотрены все требования рабочей программы по данной дисциплине: теоретические занятия, практические занятия и контроль знаний по пройденному теоретическому материалу.
|
|
|
