Верстка түрлерін құру.

Тақырып бойынша 11 материал табылды

Верстка түрлерін құру.

Материал туралы қысқаша түсінік

 Верстка түрлері  Кестелік верстка,  Блоктық CSS –тің кестелерінің моделі

Материалдың қысқаша нұсқасы

Сабақтың тақырыбы: Верстка түрлерін құру.

Жоспар:

Верстка түрлері
Кестелік верстка,
Блоктық CSS –тің кестелерінің моделі

1-мысал. CSS тілінде кестелік верстка жасау. Page_style файлын жасаңыз.css-онда үлгі ұяшықтары мен кейбір жеке тегтер үшін мәнерлер жазылады. Маңызды үлгі параметрлері: # Pole_size { ... } web -шолғыш терезесіне қатысты үлгіні созу реттеледі; vertical-align:top – мәзір (және басқа мазмұн) ұяшықтың жоғарғы жағына қарай жылжитын параметр; Қалған параметрлер өлшемін, өріс түсін және олардың ішінде мазмұн бағытын (padding: … ) Үлгі ұяшықтарына арналған стильдерден кейін кластардың көмегімен (қатысты негізгі өрістің бағдары) және <A></a> сілтемелеріне арналған стильдер жазылады (көрнекілік үшін сілтемелердің түсі қызыл болады). Сіз сондай-ақ кез келген басқа да тегтер үшін кез келген басқа жаһандық стильдерді қосуға болады.

Файл мазмұны page_style.css атау беріп сақтаңыз. Төмендегідей теріңіз, page_style.css атау беріп, сақтаңыз.

#pole_size {

width: 100%;

}

#header {

height: 140px;

background-color:#B1F080;

padding: 32px;

}

#left_col {

width: 198px;

vertical-align:top;

background-color: White;

}

#center_col {

background-color:#ffffff;

padding: 16px;

}

#right_col {

width: 180px;

vertical-align:top;

text-align: center;

background-color:#E6EEE0; }

#footer {

height: 50px;

padding: 12px;

background-color: #B1F080;

font-size: 12px; }

p { margin: 16px 10px 20px;}

a { color: Red;

outline: none;

text-decoration: underline;}

a:hover { text-decoration: none;}

Келесі файл test_page.html файлын сақтаңыз. Мұнда негізгі кестелік шаблон орналасқан, әрбір кестенің шаблонында id=" " түрінде жазылған, <head></head> тегтерінің арасына төмендегі жазылған файлға стилдердің жазылған файлы қосылған. Сондай ақ файл мәзірге арналған.

test_page.html файлының мазмұны:

<html>

<head>

<title> Сайтқа арналған шаблон - кестелік вёрстка </title>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<link rel="stylesheet" ="page_style.css" type="text/css" />

<link rel="stylesheet" ="drop_vert_menu.css" type="text/css" />

</head>

<table id="pole_size">

<tr> <td colspan="3" id="header">

<h1 style="color: Orange;">Сайт атауы</h1> </td> </tr>

<tr>

<td id="left_col">

<ul class="drop_vert_menu">

<li><a ="#">Негізгі</a></li>

<li><a ="#">Байланыстар</a>

<ul>

<li><a ="#">Телефон</a></li>

<li><a ="#">E-mail</a></li>

<li><a ="#">Мекен жай</a></li>

</ul>

</li>

<li><a ="#">Сайт туралы</a>

<ul>

<li><a ="#">Тарихы</a></li>

<li><a ="#">Коллектив</a></li>

</ul>

</li>

<li><a ="#">Сайт картасы</a></li>

<li><a ="#">Сілтемелер</a></li>

</ul>

</td>

<td id="center_col">

<h2 align="center">Демонстрация </h2>

Тегтер арасындағы мәтін , стиль параметрінде жазылады,

 Тегтер арасындағы еңкіс мәтін , стилдерге арналған, бірақ стиль жазылмаған.

 

<a ="#">Қызыл түстің сілтемесі</a>

 

<big>Үлкен текст стилді қолданбай</big>

 

 Тегтер арасындағы контент , басқа белгімен көрсетіледі:

 

Тегтер арасындағы мәтін .

 

<a ="#">Қызыл түстің сілтемесі</a>

 

<big> Тегтер арасындағы үлкен текст <big></big>.</big>

 

<table border="1" cellspacing="8" cellpadding="6">

<th colspan="2"> Ішкі кестенің қарапайым контенті </th> <tr>

<td>Бірінші ұяшық (1,1)</td>

<td> қандайда текст</td>

</tr>

<tr>

<td>Көп қабаттар</td>

<td> Төртінші ұяшық(2,2)</td>

</tr>

</table>

</td>

<td id="right_col">

Бірінші баған

</td> </tr>

<tr>

<td colspan="3" id="footer">

</td></tr>

</table>

</body>

</html>

1-сурет. Web сайтқа арналған шаблон. Кестелік верстканың нәтижесі

Өзіндік жұмысқа арналған жеке тапсырмалар:

«Шымкент-Плаза» сауда орталығының web сайтының кестелік шаблонын жасаңыз. Қарастырылған тегтер мен атрибуттарды қолданып, web -бетті құрыңыз. Қажетті гипресілтемені кірістіріңіз. Web – сайттың кестелік шаблонын өз бетіңізше безендіріңіз.
«Әлем» типографиясының web сайтының кестелік шаблонын жасаңыз. Қарастырылған тегтер мен атрибуттарды қолданып, web -бетті құрыңыз. Қажетті гипресілтемені кірістіріңіз. Web – сайттың кестелік шаблонын өз бетіңізше безендіріңіз.
Шымкент қаласының №25 Т.Рысқұлов атындағы мектеп гимназиясының web сайтының кестелік шаблонын жасаңыз. Қарастырылған тегтер мен атрибуттарды қолданып, web -бетті құрыңыз. Қажетті гипресілтемені кірістіріңіз. Web – сайттың кестелік шаблонын өз бетіңізше безендіріңіз.
Шымкент қаласының облыстық балалар ауруханасының web сайтының кестелік шаблонын жасаңыз. Қарастырылған тегтер мен атрибуттарды қолданып, web -бетті құрыңыз. Қажетті гипресілтемені кірістіріңіз. Web – сайттың кестелік шаблонын өз бетіңізше безендіріңіз.
«Shimkent Moda» киім дүкенінің web сайтының кестелік шаблонын жасаңыз. Қарастырылған тегтер мен атрибуттарды қолданып, web -бетті құрыңыз. Қажетті гипресілтемені кірістіріңіз. Web – сайттың кестелік шаблонын өз бетіңізше безендіріңіз.
«KAZBUILDPARTNER» ЖШС web сайтының кестелік шаблонын жасаңыз. Қарастырылған тегтер мен атрибуттарды қолданып, web -бетті құрыңыз. Қажетті гипресілтемені кірістіріңіз. Web – сайттың кестелік шаблонын өз бетіңізше безендіріңіз.
«Toyotа» автокөлік орталығының web сайтының кестелік шаблонын жасаңыз. Қарастырылған тегтер мен атрибуттарды қолданып, web -бетті құрыңыз. Қажетті гипресілтемені кірістіріңіз. Web – сайттың кестелік шаблонын өз бетіңізше безендіріңіз.
«Құрылыс заттары» web сайтының кестелік шаблонын жасаңыз. Қарастырылған тегтер мен атрибуттарды қолданып, web -бетті құрыңыз. Қажетті гипресілтемені кірістіріңіз. Web – сайттың кестелік шаблонын өз бетіңізше безендіріңіз.
«Д.Қонаев» web сайтының кестелік шаблонын жасаңыз. Қарастырылған тегтер мен атрибуттарды қолданып, web -бетті құрыңыз. Қажетті гипресілтемені кірістіріңіз. Web – сайттың кестелік шаблонын өз бетіңізше безендіріңіз.
«Қазақ елін тани біл» атты web сайтының кестелік шаблонын жасаңыз. Қарастырылған тегтер мен атрибуттарды қолданып, web -бетті құрыңыз. Қажетті гипресілтемені кірістіріңіз. Web – сайттың кестелік шаблонын өз бетіңізше безендіріңіз.
«Гүлдер түрлері» web сайтының кестелік шаблонын жасаңыз. Қарастырылған тегтер мен атрибуттарды қолданып, web -бетті құрыңыз. Қажетті гипресілтемені кірістіріңіз. Web – сайттың кестелік шаблонын өз бетіңізше безендіріңіз.
Мейрамхана «Шафран» web сайтының кестелік шаблонын жасаңыз. Қарастырылған тегтер мен атрибуттарды қолданып, web -бетті құрыңыз. Қажетті гиперсілтемені кірістіріңіз. Web – сайттың кестелік шаблонын өз бетіңізше безендіріңіз.

Чек лист:

Мəтіндерді өңдеу қалай жүзеге асырылады?
CSS тіліндегі шрифтар, түс және фондармен қалай жұмыс жасаймыз?
CSS тегі шекара қалай сипатталады?
Элементтің түсі және фонның түсі, мәтіннің қасиеттері сипатталуын түсіндіріп беріңіз.
Ережелер жəне селекторлар дегеніміз не?

Жүктеу

Бөлісу

ЖИ арқылы жасау

Файл форматы:

docx

Басқа Басқа Басқа

06.02.2026

Жүктеу

ЖИ арқылы жасау

Жариялаған:

Алибекова Назира Паридиновна

Бұл материалды қолданушы жариялаған. Ustaz Tilegi ақпаратты жеткізуші ғана болып табылады. Жарияланған материалдың мазмұны мен авторлық құқық толықтай автордың жауапкершілігінде. Егер материал авторлық құқықты бұзады немесе сайттан алынуы тиіс деп есептесеңіз,
шағым қалдыра аласыз

Верстка түрлерін құру.

Верстка түрлерін құру.

Химия пәні

Тарих пәні

Биология пәні

Ағылшын тілі пәні

География пәні

Информатика пәні

Мектепке дейінгі білім беру

«Қазақ тілі» жəне «Қазақ əдебиеті»

Дене шынықтыру

Білім алушылардың білім сапасын арттыру

Инклюзивті білім беру