Дербес портал құру

          Зертханалық жұмыс №2 «Web-парақтар редакторы»

 

Front Page қосымшасында Web-парақтар редакторы Word-қа ұқсас болып келеді.Бірақ HTML форматы өзіне тән ерекшелігі мен құжатты жасау үрдісінің ережелері бар.Парақтар мазмұнының негізгі жасау тәсілдерін қарастырайық:

 

        · Мәтінді форматтау;

        · Кесте мен тізімді жасау;

        · Жапсырма (Закладка) мен гипермәтінді жасау;

        · Суреттерді қосу;

        · Тақырыбы мен Web-парақтардың фонын өзгерту;

        · HTML – кодын көру;

 

Мәтінді форматтау

Парақтар редакторын Front Page бағдарламасымен қарастыру үшін үлкенді-кішілі Web-түйінін құрамыз.Мысалы, шебердің көмегіне жүгінбей ТУР-агенттігі Web- парағын құру кезінде оларды форматтап және редакциялаймыз:

        · Файл менюінде құру командасын таңдаңыз;

        · Тапсырмалар аймағындағы бос параққа шертіңіз;

        · Парақтың макетін таңдаңыз;

        · Парақтың жоғары жағында 2 жол енгізіңіз;

        Туристік агенттігі және Шығыс  ертегісі.

        · Туристік агент сөзін айқындап форматы құралдар сайманында орташа жуан шертпесін шертіңіз.

        · Шығыс ертегісі сөзін айқындап түстер палитрасын таңдап көк түсті белгілеңіз.Жазудың өлшемі тізімінде 4(4 pt) таңдап, курсив батырмасын шертіңіз.

        · Агенттік сөзінен кейін тышқанды шертіңіз.

        · Қою®Көлденең сызық командасын таңдаңыз.Бірінші абзац сөздері қалғанынан сызықпен бөлініп тұрады. Web-параққа тек көлденең сызықты ғана сала аламыз.Қалған фигуралар (сызықтың иілуі, дөңгелек, тік бұрыштар) Front Page сайманы арқылы немесе графиктік редакторда алдын-ала дайындалған GIF немесе JPG форматында саламыз.

        · Оң жақ параққа келесі мәтінді енгізіңдер:

 

1-сурет. Index.htm файлының көрінісі

«Біздің туристік агенттігі  жақын және алыс жерлерде демалуды ұсынады.Кез келген мүмкіндікте және қалауыңыз бойынша демалысты өткізуге көмектесеміз.Көптеген елдерде демалысты ең жақсы қонақ үйде өткізу.Жер жүзін аралау кезінде «Эйр Қазақстан» компаниясының ұшағында өткізесіз.

       · Өзі қалауының бойынша парақты өңдеңіз:

        Парақты Index.htm атымен Тур_агенттігі бумасында сақтаңыз.

 

Кестелер

Web түйінде 2 парақ құрыңыз.Ол үшін Файл®Құру®Бос парақ командасын таңдаңыз.

1. Бұл парақта тақырыбын 1-ші парақтай жасаңыз.
2. Мына мәтінді қосыңыз: «Біз жақын және алыс жерлердегі елдерде демалуды ұсынамыз».Ары қарай елдердің аттарын, жолдама бағасын және демалу ұзақтығын жазу керек.Бұл мәтін кесте түрінде өте жақсы көрінеді.Сондықтан кесте қосу қажет:
1. Кесте®Қою®Кесте командасын орындаңыз.
2. Сізге 3 ұяшық қажет болады.Сондықтан бағаналар санына 3 деген цифрды жазыңыз.
3. Кестенің жуандығы парақты толық алмау үшін  жуандығын 80 деп беріңіз, бір атаулы жалаушаны белгіленгенін көріңіз, қасындағы ауыстырып қосқышта пайызды түрде көрсетілген.(2-сурет)

 

                                         2-сурет. Кесте қою терезесі

4. Бірінші параққа мынадай өрістер енгіңіз: Ел, Жолдаманың бағасы, Келу уақыты.
5. Өз қалауыңызша кестені, мәтінді форматтаңыз.Кестені белгілеп ортасына түзету командасын басыңыз.Кесте парақтың ортасында орналасады.Кестенің төменгі жағына: «Жолдаманың ақысына жолы мен тамақтың ақысы қосылған», деген мәтінді енгізіңіз.

 

Ел	Жолдаманың  бағасы	Келу  уақыты
АҚШ Ресей Англия  Норвегия	1000$               600$ 1500$ 1300$	10 күн 10 күн 10 күн 10 күн

 

Тур_агенттігі бумасында парақты strain.htm атымен сақтаңыз.

Тізімдер Тур_агенттігі Web түйінінде 3-і парақты құрамыз.Мына тақырыпты енгізіңіз: «біздің агенттігіміздің Қазақстанның көптеген қалаларында жұмыс істейді».Агенттік филиалдарының мекен жайларын маркерленген тізім арқылы жазуға болады.Түсті маркерді тізімнің пунктін тағайындаңдар:

1. Формат®Тізім командасын орындаңыз.
2. Жай маркер командасын немесе графикалық маркерін белгілеп көру

батырмасын басыңыз, суретті  маркер ретінде таңдаңыз.(3-сурет)

Тізімнің элементтерін енгізген соң Enter пернесін басыңыз.Парақ  келесі 4-суреттегідей болады.

 

Front Page Word-тағы сияқты маркерді ғана емес тізімді нөмерлеуге де болады.Тізімді нөмірлеу үшін келесілерді орындаңыз:

1.Тізімді белгілеңіз

2. Форматтау саймандар  тақтасында нөмірлеу батырмасын  басыңыз. Графикалық маркер цифрлармен  ауысады.

Парақты Тур_агенттігі бумасында парақты filial.htm аты мен сақтаңыз.

 

                                   3-сурет.Тізімнің қасиеті

                         4-сурет. Тізімнің элементтерін енгізу

 

Бұрынғы берілгендер  форматына қарағанда гипермәтіндік  құжаттың ең негізігісі интернет арқылы таралған, HTML файлында суретті қою мүмкіндігі.Web-парақтардың графикалық обьектілері GIF, JPEG немесе PNG форматты жеке файлдарда сақталады.Осындай обьектілерге мысал ретінде тізім маркері бола алады.Index.htm парағын ашыңыз.Парақтың сол жағы бос қалды, соған сурет қояйық.

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

2. Қою менюінде сурет  меню астын ашыңыз.Суреттің барлық мүмкіндіктері ашылады.

· Clip Art суреттері – бір атты кітапханадан суретті таңдау мүмкіндігі;

· Файлдан-деген командасын бассаңыз 5-суреттегі терезе ашылады.

· Сол жақтағы батырмалар керекті файлдарды ашуға мүмкіндік береді.Мысалы, суретті таңдау үшін «Мой документі» батырмасын басып керекті файлды таңдап алыңыз.Файл аты және файл типіне атын енгіз.

1.Сканер немесе камера  суретті Twain технологиясынан тұрса сканер немесе басқа құралдардан алу мүмкіндігі бар.

2. Фотоколлекция құру  – бұл команда фотолар коллекциясынан  фотосуретті қоюға мүмкіндік  береді.

 

                                             5-сурет. Суретті таңдау терезесі

3.Файлдан деген екінші нұсқаны қолданып көрейік.

4. Керекті суретті  таңдап, қою командасын таңдаңыз.

5. Керекті мөлшерге  бұрыштық маркер арқылы келтіріңіз.

6. Тышқанның оң жағын  шертіп суреттің қасиетін таңдаңыз.

Ескерту: Web-парақтарында үлкен суреттерді қоюға болмайды, өйткені серверден ашу көп уақыт алады.бұл қолданушыларға ұнамайды.

7.Форматын көрсету үшін сурет сақталып тұрған «общее» қосымшасында GIF ауыстырып, қосқышты таңдаңыз.

8.Түр қосымшасын ашыңыз.Мәтінді суреттің оң жағынан ортасына туралау үшін ортаға түзету командасын таңдаңыз.

9.ОК батырмасын шертіңіз.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

№3    Зертханалық жұмыс «Парақтың фоны»

 

Жақсы таңдап алынған  фон пайдаланушының ақпарат қабылдануына көмектеседі. Фонның көмегімен парақтың белгілі аймағын бөліп алуға және көңіл аударуға болады.Парақтың артқы бөлігінде түсті суреттер және мәтінмен жақсы сәйкес келетін ылғи да қандайда бір түсті фон беріңіз.Қарсы жағдайда пайдаланушының жойған броузері фонды өзінің түсіне бояйды.

Фон ретінде кез келген графикалық файлды алуға болады.Парақты сақтау кезінде ол GIF немесе  JPEG форматына ауысады.Егер сурет парақты тұтасынан жаппаса (алмаса), онда ол бір-біріне жабыса орналасқан көптеген бірдей төртбұрыш плиткалар түрінде жазылады.Бұл факт тік немесе көлденең сызықтар көптеген жалпақ және жіңішке немесе биік және аласа суреттерді қолдануда жиі ұшырасады.Мұндай қадам бір жағынан көркем фон құруға, екінші жағынан беттік фонды салу уақытын үнемдейді.Фонды орналастыру үшін келесі әрекеттерді орында:

1. Формат – Фон командасы (1-сурет)
2. Пайда болған диалогтық терезеде Фонның суреті белгісіне орналастырыңыз, Көру батырмасына шертіңіз.
3. Диалог терезесінен Фон суретін таңдау құжатын алыңыз.

 

                                           1-сурет. Формат – Фон командасы

4. Ашу батырмасын басып,  одан соң ОК батырмасы.

Тур_агенство түйінінің құрылған үш Web-парағына фон орналастырыңыз. Парақты сақтауды ұмытпаңыз.

 

Web-түйінін  безендіру

Web-парақтың бірқұрылымды  түйініне бірігуі Front Page бағдарламасында тек парақ арасында сілтеме құруға ғана емес, сонымен бірге түйіннің барлық парағын бір типті безендіруді қамтамасыз етеді.Әрбір Web түйін анықталған сұлба ретінде құралады.Ол үшін келесі қадамдарды орындау керек:

1. Формат – Тақырып командасын таңдаңыз.Есеп аймағында Тақырып бөлімі ашылады.
2. Сұлба тізімінен өңделетін түйінге келетін түсті іздеңіз.Мысалы, «Ирис» нұсқасын таңдаңыз.Диалог терезесінің сол жақ төменгі бөлігінде 3 жалауша бар, оларды орналастыру келесі қимылдарға рұқсат береді:

·  Ашық түстер – таңдалған сұлбаны ашығырақ бояйды.

· Белсенді суреттер – сурет сілтемесін күрделендіреді, нүкте және маркерлер, ұсақ бөлшектер мен көлеңке қосады.

· Фон суреті – парақтың артқы бөлігінде фон суретін орналастырады.

3. Қажет жалаушаларды орналастырыңыз.Егер сізді стандартты сұлба ұнамаса, параметрлердің біреуін өзгертіңіз.
4. Жаңа тақырып құру командасына шертіңіз.Тақырыпты құру терезесі шығады: (2-сурет)

 

2-сурет.Тақырыпты  құру терезесі

 

· Түстер батырмасын бассақ, үш бөлікті диалог терезесін көреміз. Біріншісі – түстер сұлбасы стандартты түстердің біреуін таңдауға парақты безендіруде берілген нұсқаға жетуге рұқсат береді.Түс шебері бөлігі түстер кеңістігін шерту арқылы түс реңін және ашық жылжымасы көмегімен бояудың ашық түсін орналастыруға мүмкіндік береді.Үшінші бөлікте – екі ашылатын тізім бар.Біріншіде парақтың кез келген стандартты элементін таңдауға, одан соң екіншісінің көмегімен сол элементке арнайы түс арнауға болады.

· Графика батырмасын шерткенде терезе ашылады.Ашылған элемент тізімінен Web-парақтың кез келген стандартты элементін таңдаймыз.Үлгі батырмасының көмегімен Сурет бөлігінде безендіру ретінде кез келген графикалық құжат, ал қаріп бөлігінде осы элемент мәтініне жарайтын сызықты таңдаңыз.Осы операцияларды қайталап, парақтың барлық элементін құрыңыз.

· Мәтін батырмасы Web-парақтың қарапайым қарібін және алты тақырыпша құруға мүмкіндік береді.Элемент тізімінін көмегімен қажет қаріпті таңдаңыз.

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

6. Кітапханада жаңа  сұлбаны сақтау үшін, пайда болған  терезеде сұлбаны пайдаланушының атын енгізіп, ОК батырмасын шертіңіз.

7. Таңдалған сұлбаны  түйінін парақтың барлығына меншіктеу  үшін, барлық параққа деген қосылғышты таңдаңыз.

8. ОК батырмасын шертіңіз.

Ескерту

Анықталған параққа  сұлбаны таңдау үшін HTML құжатын парақ режимінде немесе ауысу терезесінде оны белгілеу.Одан соң Формат – Тақырып командасын орындаңыз.Безендірудің қажет нұсқасын тауып, ауыстырғыштың белгіленген парақ жағдайын таңдаңыз, содан соң ОК батырмасын шертіңіз.

Кітапханаға енгізілгеннен соң Front Page өңделген жаңа сұлба Web түйіннің барлығына  шығады.Осындай сұлбаларды қабылдап, сіз бірдей безендіруді бірнеше  тематикалық байланысқан түйіндерде оңай жүргізе аласыз.

 

 

                                                         Гиперсілтеме

 

Front Page бағдарламасының көмегімен Web – түйін құруда, парақта автоматты түрде навигация тақтасын гиперсілтемелермен әр түрлі Web-парақтың түйіндерінде орналастырады.Сілтемелер мәтіндік парақтарда енгізіледі. Web түйіндерді дұрыс функционалдау үшін өңдеушіге ылғи да қосымша сілтеме орналастыруға, қатыстылардың параметрлерін өзгертуге тура келеді.

1. avia.htm парағын құрыңыз.
2. Оны келесі үлгіде беріңіз.
3. Парақты сақтап, index.htm парағына оралаңыз.
4. «Эйр-Қазақстан» мәтінін белгілеп, avia.htm парағына гиперсілтеме қойыңыз.

4-сурет. Парақтардың  байланысу терезесі

5. Түр-гиперсілтеме командасының көмегімен парақтар қалай

байланысқанын көріңіз. (4-сурет)

6.Көруден гиперсілтеме жұмысын тексеріңіз.

7. Құжатты жабыңыз.

8. Енгізілген өзгерістерге  сәйкес сақтау сұраныстарын мақұлдаңыз.

Жапсырма (Закладка) құрылған парақты көрсететін келесі параққа  сілтеме жасау керек

9.Парақтан мәтін немесе үзінді бөліп алыңыз.

10.Тышқанның оң жағымен шертіп, гиперсілтеме командасын таңдаңыз.

11.Гиперсілтеме құруға  ашылған диалогтық терезеде құжат  белгісін жапсырма бар жерде  шертіңіз.