Сайтқа өзіңіз үшін көлденең мәзірді жасау

Көлденең мәзір кез келген дерлік сайты бар - ол оның пайда болуы мен пайдалану ыңғайлы тарту немесе, керісінше, келушілерді үркітуге бар болады ретінде, маңызды бөлігі болып табылады. құрудың негізгі дағдыларын меңгеруге, HTML ол «қаңқасы» жасауға: ның қарапайым көлденең мәзір жасау үйрену көрейік. Сіз, әрине, дайын мәзірін таба аласыз, бірақ әлдеқайда жақсы оны өзіңіз дамыту үйрену үшін. Бұл өте қызықты.

Мәзірді жасауға біліңіз

Біз орналасуының жетекші қайраткерлерінің ұстануға семантикасы, тайып емес көріңіз. Біріншіден, сіз өз көлденең мәзірлерін жасау үшін негізгі дағдыларын үйрену, HTML біздің мәзірлер үшін «қаңқасы» жасау керек. Ал содан кейін ол стиль кестелерін пайдаланып, безендіруге болады. Біздің көлденең мәзірі 5 элементтерді қамтиды болсын. Бірінші элемент бетіне қайта бағытталасыз. Екінші нүкте - «Біз туралы». Үшінші - «Біздің марапаттар». Төртінші - «Бұл қызықты.» Бесінші - «Кері байланыс».

HTML-коды осы сияқты көрінеді:

Кім білмейді: UL тег үшін пайдаланылады оқ, оның элементтері Ли басталады. Ли тегтер қ қолданылады мәнерлерін мұра.

Ul - тізім блок элементі, ол ені созылады. Ли сондай-ақ блок болып табылады.

Сондықтан, бір index.html жасаңыз. Біз біздің кодын жинаймыз. Осы сәтте, браузер тік гөрі көлденең мәзірін көрсетеді. сайт үшін көлденең мәзір жасау - сіз мақсатында бірақ біз. Бұл үшін біз CSS қажет.

CSS не?

Сіз сайттар дамуын меңгеруге әлі бар болса, онда ол Cascading Style Sheets тұжырымдамасы танысуға қажет. Шын мәнінде, бұл веб-сайттың беттерінде түрлі элементтеріне қолданылады пішімдеу, өңдеу, ережелері болып табылады. біз стандартты HTML элементтердің қасиеттерін сипаттау болса, сіз осы бірнеше рет қайталау керек болады, сіз код сол дана қайталануын алуға. пайдаланушының компьютерінде бет жүктеме уақыты өседі. Бұл болдырмау үшін, CSS бар. Ол тек бір рет белгілі бір элементін сипаттайды, және нақты стиль сипаттарын пайдалану қайда, содан кейін ғана көрсету үшін жеткілікті. Ол беттің өзі мәтін, сонымен қатар, басқа файлда ғана емес сипаттамасын жасауға болады. Бұл сайттың барлық беттерінде әр түрлі стильдер сипаттамасы қолдануға мүмкіндік береді. Ол CSS-файлын өзгерту, кейбір беттерін өзгерту, сондай-ақ ыңғайлы. Мәнер кестелері сайттың графика беттерін нашарлауына жол бермеу үшін көмектесіп, сіз HTML қарағанда жақсы деңгейде қаріптермен жұмыс істеуге мүмкіндік береді.

мәзірі дамыту үшін мәнерлер кестесін пайдаланып

мәзір үшін CSS-код:

1. # My_1menu {тізімі-стилі: жоқ; шегініс: 6; ені: 800; маржа: авто;}
2. # My_1menu Ли {қалтқы: сол; қаріп: көлбеу 18px Arial;}
3. # My_1menu бір {түсі: # 756; Дисплей: блок; биіктігі: 55px; желісі-биіктігі: 55px; шегініс: 0PX 15px 0PX 15px; фон: #dfc; мәтін-безендіру: жоқ;}
4. # My_1menu: а Hover {түсі: #foa; фон: # 788;}

Енді нәтижесінде көлденең CSS мәзір қарайық.

# My_1menu - сондықтан ID = my_1menu, тізім-стилі бар UL- элементтің стилі тағайындау бар: бірде-бір - жоспарланған элементтері қалған белгілерін алып тастау Осы бұйрықтың.

ені: 800 - біздің мәзір ені 800 пиксель.

шегініс: 0 - осы ішінде толтыру жояды.

маржа: Авто - біздің беттің орталығында көлденең мәзірін vyravnivnie.

# My_1menu Ли - стильдер Li-элементтерін тағайындау.

биіктігі: 55px - мәзірі биіктігі.

# My_1menu: а Hover - элементке стильдер тағайындау және оны тышқан индукцияланған отыр.

әрбір әзірлеуші мұнда оның параметрлерін көрсетуге болады, өйткені біз егжей-тегжейлі әрбір желісін сипаттау болмайды. веб-сайтында мәзірінде стильдер пайдалану үшін осы негізде. Сіз суреттерді пайдаланып, оны неғұрлым дайын және әдемі көрінісін бере алады. URL (img1.png) қайталау-X: элементін бірақ, мысалы, фон тағайындаңыз. меңзегенде: URL (img2.png) а үшін X қайталау: фондық болуы бар болсын.

Сіздің қиял, шығармашылық теңшелімдерін пайдаланыңыз. Содан кейін веб-сайтында қарапайым мәзірді жасау туралы сол білімге негізделген, сіз өз бірегей дизайнымен бетті дамыта алады.