|
1 басылым 18. 09. 2013ж беттің -сіДәріс №15-16. HTML-ДА КЕСТЕНІҢ ЖАЗЫЛУ ТӘСІЛДЕРІ
|
бет | 2/5 | Дата | 26.01.2020 | өлшемі | 0,79 Mb. | | #27366 |
| Дәріс №15-16. HTML-ДА КЕСТЕНІҢ ЖАЗЫЛУ ТӘСІЛДЕРІ
, , , | , .
NOWRAP, COLSPAN=, ROWSPAN=, WIDTH=, UNIT=, COLSPEC=, DP=, СELLPADDING=, ALIGN= және VALIGN=, BORDER=, CELLSPACING= атрибуттары.
<TABLE>, , , | ,
Кестенің жазылуы үшін тегі қолданылады. тегі басқалар сияқты жолды кестеге дейін және кестеден кейін автоматты түрде аударады.
тегі.
тегі (Table – Row сөзінен қысқартылған) – кестенің жолын құрады. Егер кесте екі жиын тегінен құралса, онда ол екі жолдан да тұрады. Сіз бір жолға орналастыратын бүкіл мәтін, басқа тег және атрибуттар тегтерінің арасына орналасуы қажет.
тегі.
Кесте жолының ішінде әдетте берілгендер ұяшығы орналасады. Мәтін немесе бейне құрайтын әрбір ұяшық | | тегтерімен қоршалуы керек. Жолдағы | тегтерінің саны ұяшық санын анықтайды. | тегтерінің бес сыңарлы жолы бес ұяшықтан тұрады.
тегі.
Кестенің баған және жолының тақырыпшасын беру кезінде | | тақырып тегі қолданылады. Бұл | тегімен аналогты болып келеді. | тегтерінің арасындағы мәтін автоматты түрде қою шрифтпен жазылады және үнсіздік бойынша ұяшықтың ортасында орналасады. Орталықтандыруды алып тастауға болады және мәтінді сол жақ немесе оң жақ жиек бойынша тегістеуге болады. Егер | ні <В> тегімен және атрибутымен бірге қолданса, онда мәтін де тақырып сияқты көрінеді. Бірақта, барлық браузерлердің кестеде қою шрифті қабылдамайтынын ескерген жөн, сондықтан кестенің тақырыбын көмегімен берген дұрыс.
тегі.
кестенің тақырыбын құруға рұқсат береді. Үнсіздік бойынша тақырып орталықтанады және () кестесінің үстінде немесе () кестенің астында орналасады. Тақырып кез-келген мәтіннен және бейнеден тұруы мүмкін. Кей кезде тегі сурет астындағы жазуға қолданылады.
NOWRAP, COLSPAN=, ROWSPAN=, WIDTH=, UNIT=, COLSPEC=, DP=, СELLPADDING=, ALIGN= және VALIGN=, BORDER=, CELLSPACING= атрибуттары
NOWRAP атрибуты .
Кестедегі ұяшықтың бір жолына сыймайтын кез-келген мәтін келесі жолға көшеді. Бірақта, NOWRAP атрибутын және | тегтерімен бірге қолданғанда ұяшықтың ұзындығы мәтін бір жолға сыятындай етіп кеңейтіледі.
COLSPAN= атрибуты.
| және | тегтері COLSPAN= атрибутының көмегімен модифицирленеді (Column Span, бағандардың бірігуі). Егер сіз қандай да бір ұяшықты кеңейткіңіз келсе, онда осы COLSPAN= атрибутын қолдануға болады.
ROWSPAN= атрибуты.
| және | тегтерінде қолданылатын ROWSPAN= атрибуты COLSPAN= атрибутына аналогты болып келеді және ол жолдардың санын береді. Егер сіз ROWSPAN= атрибутында санды көрсетсеңіз, онда жолдың сәйкес саны кеңейтілген ұяшықтың үстінде болуы қажет.Оны кестенің төменгі жағына орналастырмау керек.
WIDTH= атрибуты.
WIDTH= атрибуты екі жағдайда қолданылады.Оны барлық кестенің енін беруде тегіне қоюға болады және ұяшық тобының немесе ұяшық енін беруде немесе тегтерінде қолдануға болады. Енін пиксельмен немесе пайызбен көрсетуге болады. Мысалы, егер сіз тегінде WIDTH=250 деп берсеңіз, онда сіз монитордағы бет өлшеміне тәуелсіз ені 250 пиксель кестені аласыз. тегінде WIDTH=50% беру кезінде, кесте экрандағы кез келген өлшемдегі бейнеде беттің жарты енін алып тұрады.
UNIT=атрибуты.
тегінің UNIT=атрибуты барлық кесте мен оның жеке бағандарының өлшемдерін көрсетуде қолданылатын өлшем бірлікті анықтайды. UNIT=атрибуты үш мәнді қабылдауы мүмкін:
UNIT=EN - үнсіздік бойынша қосылатын мән және en - бос орынға тең өлшем бірлікті береді. Еn - бос орын - әріпінің еніне тең типографты өлшем бірлік. Бос орынның нақты өлшемі таңдалған шрифтке тәуелді: ұсақ шрифтке қарағанда ірі шрифтке en - бос орын көбірек беріледі. Әдетте en- бос орын шрифт өлшемінің жартысына тең. Мысалы, 12 - пунктті шрифт үшін en - бос орын 4 - пунктті алады.
UNIT=RELTIVE барлық кесте еніндегі баға енін процентпен беру үшін қолданылады. Бұл тәсілді мүмкіндігінше проценттегі енді көрсетудің орнына қолдануға болады. Қолданылатын бірлікті беру кезінде енгізілген сандар проценттердегі бағандар ені болып қабылданады.
UNIT= PIXELS – бұл мән экрандағы бағанның енін нақты білуде қолданылады. Бұл жағдайда оны пиксельмен беру оңай. Мысалы, кестенің енін 340 пиксельмен формалайды.
COLSPEC=атрибуты.
UNIT=атрибутымен бірге қолданылатын COLSPEC=атрибуты кестенің әрбір бағаны қанша орын алатынын және онда берілгендер қалай тегістелетінін анықтайды. Тек тегінде ғана қолданылады.
COLSPEC= барлық бағанды санайды және әрқайсысы үшін тегістеу мен өлшем береді. Баған үшін (немесе ұяшық үшін) тегістеудің 5 тәсілі бар: L – сол жақ жиек бойынша, C – центр бойынша, R – оң жақ жиек бойынша, J – оң және сол жақ жиек бойынша және D – ондық үтір бойынша тегістеу. Егер сізде 5 баған болса, онда оның енімен әрқайсысын тегістеуді келесідей анықтауыңызға болады.
DP=атрибуты.
DP=атрибуты (Decimal Point, ондық белгі) ондық бөлгіштің толық бөлімін бөлуде қолданылатын символды анықтайды. DP= “.”(үнсіздік бойынша) ондық символ ретінде нүктені көрсетеді. DP= “,” үтірді береді.
Бос ұяшықтар.
Егер ұяшық берілгендерді қамтымаса, онда оған шекарада қажет етілмейді. Егер сіз ұяшықтың берілгендері болмай, шекарасы болғанын қаласаңыз сіз оған көрсетілім кезінде көрінбейтін бір нәрсе қоюыңыз қажет.
бос жолын қолдануға болады. Алынған ұяшыққа ешқандай берілгендерді енгізбей-ақ, олардың ендерін пиксельмен анықтап бос бағандарды да беруге болады. Бұл тәсіл бетке мәтін мен графиканы қою кезінде пайдалы болуы мүмкін.
СELLPADDING=атрибуты.
СELLPADDING=атрибуты - ұяшық берілгендерімен оның шекарасы арасындағы бос кеңістіктің енін анықтайды, яғни ұяшық ішінен алаң береді.
ALIGN= және VALIGN= атрибуттары.
, және | тегтерін ALIGN= және VALIGN= атрибуттарының көмегімен модифицирлеуге болады. ALIGN=атрибуты мәтін және графиканың горизонталь бойынша тегістелуін анықтайды, яғни оң және сол жақ жиек бойынша, центрі бойынша тегістеу. Горизонталь тегістеу бірнеше тәсілмен берілуі мүмкін:
ALIGN=BLEEDLEFT – ұяшықтың берілгендерін сол жаққа тығыздап қысады.
ALIGN= LEFT - СELLPADDING=атрибутымен берілген ұяшықтың берілгендерін жылжыту есебімен сол жаққа тегістейді.
ALIGN=CENTER – ұяшықтың берілгендерін центр бойынша орналастырады.
ALIGN=RIGHT - СELLPADDING=атрибутымен берілген ұяшықтың берілгендерін жылжыту есебімен оң жаққа тегістейді.
VALIGN= атрибуты – мәтін және графиканы ұяшық ішінен вертикаль бойынша тегістейді. Вертикаль тегістеу келесі тәсілдермен берілуі мүмкін:
VALIGN=TOP – ұяшықтың берілгендерін оның жоғарғы шекарасында тегістейді.
VALIGN=MIDDLE – ұяшықтың берілгендерін вертикаль бойынша орталықтандырады.
VALIGN=BOTTOM - ұяшықтың берілгендерін оның төменгі шекарасында тегістейді.
BORDER=атрибуты.
тегінде үнемі кестенің өзі және кестенің ұяшықтарын қоршап тұратын рамкалардың, яғни сызықтардың қалай көрінетіндігін анықтайды. Егер сіз рамкасын бермесеңіз, онда сызығы жоқ кесте аласыз.
CELLSPACING= атрибуты.
CELLSPACING= атрибуты – ұяшықтар арасындағы аралық енді пиксельмен анықтайды. Егер бұл атрибут берілмесе, онда үнсіздік бойынша 2 пиксельге тең көлем беріледі. CELLSPACING= атрибутын мәтін мен графиканы өзіңізге қажетті жерге орналастыру үшін қолданылады. Егер сіз бос орын қалдырғыңыз келсе, онда ұяшыққа бос орынды жазуға болады.
Дәріс №15-16. Өзін-өзі тексеру сұрақтары немесе тесттер
1. Статикалық және динамикалық құжаттарды өңдеудегі ерекшеліктер.
2. Белгі тілдердің жалпы принциптері.
Дәріс №17-18. БЕТТІҢ ДИЗАЙНЫНДА КЕСТЕЛЕРДІ ҚОЛДАНУ
Көптүсті кестелер құру.
Netscape Navigator -дағы түрлі-түсті шекаралар.
Көптүсті кестелер құру
Кестелердің жақсы бір қасиеті – ол құрып отырған кестенің шекараларын көрінбейтін етіп жасауға болады. Ол <ТАВLЕ> тегінің көмегімен бетте текст пен графиканы кірістіре отырып әдемі орналастыруға болады.Осы күнге дейін <ТАВLЕ> тегі HTML-де өңдеудің жалғыз қуатты құралы болып отыр. Web-беттердің дизайнерлері қазір практикалық түрде баспа беттерін құрушылар сияқты <бос кеңістікті > қолдануда. Кең көлемді кестелер басқаларға қарағанда текстердің Web –беттерде иерархиялық орналасудан алшақтатады.
Егер браузер кестені қабылдаса, онда кестенің көмегімен алынған эффектілерді дұрыс көрсететін болады.
Түрлі-түсті кестелер құру.
Жетекші браузерлер бірнеше түстерді бейнелейді. Кестені бояудың бірнеше әдістері бар. Ол әдетте қолданылатын браузерге байланысты.
Netscape Navigator -дағы түрлі-түсті шекаралар
Сіз кестені жақтаумен әсемдеп қана қаймай, оған фон мен текстің түсінен әлдеқайда жақсы түс беруіңізге болады. Қарапайым GIF (немесе өзіңіз фон ретінде қойғыңыз келген кез-келген GIF,) құрыңыз және оны <ВODY> –тегінде фон ретінде анықтаңыз.Сосын бет фонының түсін беріңіз. Нәтижесінде сіздің <ВODY> –тегіңіз мына түрде болады:
Сіз екі қабаттан тұратын фон құрдыңыз- GIF және берілген түс. Нәтижесінде фондық түс кестенің барлық шекараларында және көлденең (<НR>)жолақтарда көрінетін болады. Сіздің фондық GIF –іңіз сұр түсті болуына тәуелсіз,кестенің түрлі-түсті сызықтары мен шекаралары ерекшеленіп тұрады. Егер фондық GIF күрделі емес болып құрылса,бетті жүктеу уақыты кішкене өседі.Төмендегі мысалда –дегі түстер әсіресе кестелерде кең көлемде қолдануға мүмкіндік беретінін көрсетеді.
Дәріс №17-18. Өзін-өзі тексеру сұрақтары немесе тесттер
1. Форма мен мазмұнның ортогональдық принципі
2. HTML –дің ерекшеліктері
3. XML –дің ерекшеліктері
Дәріс №19-20. ФРЕЙМДЕР
Фрейм дегеніміз не?
Фреймдер не үшін қолданылады?
Фреймдер қалай жұмыс істейді?
Фреймдік құрылым жасау
Берілгендері бар фреймді дайындау
Фрейм дегеніміз не?
Фрейм дегеніміз – сурет айналасындағы жақтау, терезе немесе бет деген сөздермен мағыналас. -деген тегті енгізеді, НТМL-беттің дизайнері экран браузерін бөліктерге бөледі. Нәтижесінде бетті қарап отырған адам оның бөліктерін басқа бөліктеріне тәуелсіз қарай береді. Фреймдерді қабылдайтын браузер әр түрлі беттерді түрлі секцияларға , фреймдарға жүктеп тастайды. Мысалы,сіз бетті өзіңіздің фирмалық белгіңізді экранның жоғарғы бөлігіне орналастырып, қалған бөліктерін қолданушы өзі ары қарай қарапайым тәсілмен ашып отыратындай етіп құруыңызға болады. Жанынан навигациялық батырмалар қоюға болады. Оның көмегімен оқырман осы батырманы тышқанмен шерткенде орын ауыстырылмай, эканның белгілі бір бөлігі ғана қозғалады.
Фреймдер не үшін қолданылады?
Навигация құралдарының немесе фирмалық белгінің фиксациясы – фреймдерді қолданудың көрнекі тәсілі болғаны оларды толық қолдану деген сөз емес. Фреймдерді қолдануда дизайнерлердің ойына ең бірінші саналып өткен шешімдер келеді. Бірақ браузер экранына фрейм қойылған сайын сіз берілгендерді орналастыруға арналған территорияны қысқартып отырасыз. Сіз фреймдерді неғұрлым көбірек кіргізсеңіз, пайдалы кеңістік соғұрлым азаяды және сіз осы әрекетіңізбен фреймдері бар Web-беттердегі навигациялармен таныс емес өз оқырмандарыңызды шатастырасыз.
Мысалы,фреймде ең қажетті беттердің алғашқы бірнеше деңгейлерінде компанияның логотипін сақтап, ал негізгі берілгендерді фреймдерсіз көрсеткен дұрыс.
Фреймдер қалай жұмыс істейді?
Фреймдер күрделі болғанымен оларды түсіну оңай, егер кесте ұяшықтарына аналогия жүргізсе.Фреймдердің экранда орналасуы ұяшықтардың кестеде орналасуы сияқты: тегтер мен атрибуттар кестедегі сияқты жұмыс атқарады. Бірақ, беттегі бірлік фреймдер мен кесте ұяшықтары арасындағы аналогияның маңыздылығымен қоса оның айырмашылығын ажырата білген жөн.Ұяшық берілгендері кестесі бар HTML-бетінің кодында берілген. Кестенің берілгендерін құрайтын мәтін немесе графика, HTML-бетіндегі кестені бейнелейтін тег немесе атрибут сияқты енгізіледі. Керісінше, фреймдері бар экран HTML-бетте (frameset ) деп аталатын сөзбен бейнеленеді. Фреймдердегі берілгендер кез - келген жерде – басқа каталогта, локальді серверде немесе желінің жойылған түйіндерінің бірінде орналасқан бөлек HTML-бет. Фреймдік құрылым фреймі бар экранды ұйымдастыру тәсілін және әрбір фреймнің бастапқы берілгендері қайда орналасқанын ғана анықтайды.Барлық фреймдер үшін олардың берілгендерінің орнын бейнелейтін URL болады. Ереже бойынша фреймдік құрылымы бар бетте олардың берілгендері болмайды.Мұндай бет үлкен емес – ол экранны ңтек кадрлық құрылымын ғана анықтайды.Құжат фреймдерге жүктелген уақытта сіз осы құжаттағы сілтемеге тышқанмен шертіп, басқа кадрлардағы фреймдік құрылымда жасалған бір - бірімен байланысқан құжаттарды шақыруыңызға болады.
Фреймдері бар қарапайым беттерді құру.
фреймі бар НТМL беттерді құру және негізгі тегтер мен атрибуттардың қажеттілігін жақсылап түсіну үшін фреймдері бар қарапайым жолдар жұбын құрайық.
Екі фреймнен тұратын бет құрайық.Сол жақтан басылымдар мазмұнының тақырыбын бейнелейтін, ал оң жақтан басылымдардың өздерін бейнелейтін фрейм құрайық. Қолданушы мазмұн орналасқан экран бөлігіндегі сілемені тышқанмен шерткенде, сол басылым оң жақта пайда болатындай етіп жасайық. Бұл фреймдерді қолдануда кеңінен таралған әдіс.
Фреймдік құрылым жасау
Алдымен біз фреймдердің қайда орналасуын және олардың қандай мөлшерде болатын беттің жалпы түрін ойластыруымыз қажет.Содан кейін олардың мазмұны жайлы қарастырамыз.Төменде | | | | | |
Достарыңызбен бөлісу:
|
|
|