4 Dreamweaver ортасымен танысу

4.1 Dreamweaver – мен жђмыс жасаудіњ негізгі принципі

Бђл бљлімде біз Macromedia Dreamweaver MX – пен жђмыс жасаудегі бастапќы мѕселелерді ќарастыпамыз. Сіздер ол баѓдарламаныњ кљптеген терезелері мен ќђрал–жабдыќтарыныњ ќайсысы керек, ќайсысы онша ќажет емес деген сияќты сђраќтарды талќылайсыздар. Сонымен ќатар, біз бђл баѓдарламаныњ бастапќы баптауларын ќарастырамыз, соныњ ішінде Dreamweaver орыс тілін ќабылдау џшін не жасау керек, себебі оныњ шыќќан тегі американдыќ. Ењ алѓашќы Web-параќты ќђру барысында сђраќтар туындамас џшін осыныњ барлыѓын білу керексіздер.

Сонымен, Dreamweaver MX жђмыс ортасын ќарастыруды бастаймыз, яѓни Web-дизайнерге ђсынылатын терезелер жиынтыѓы мен тџрлі ќђрал-жабдыќтарын. Ењ алдымен Dreamweaver баѓдарламасын іске ќосамыз.

Windows –да баѓдарламаны іске ќосу љте оњай! Бѕріњізге таныс Start (Пуск) батырмасын басыњыз, мѕзірден Programs (Программы) пунктін тањдањыз, сонан соњ Macromedia пунктіне апарып пайда болѓан мѕзіршеден — Macromedia Dreamweaver MX пунктін шертіњіз.

Баѓдарламаны іске ќосќаннан кейін Workspace Setup диалогты терезесі ашылады, ол сіздерге Dreamweaver MX жђмыс ортасыныњ тџрін тањдауѓа мџмкіндік береді (3.1 - сурет).

3.1 Сурет - Workspace Setup диалогты терезесі

Љздеріњіз кљріп тђрѓандай, бђл терезеде екі љтілімнен жѕне бір жалаушадан тђрады. Сонымен ќатар, сіздер жђмыс ортаныњ ќандай болатынын екі кішкене сурет арќылы кљре аласыздар. Енді соларды ќарастырсаќ.

Dreamweaver MX Workspace љтілімі Dreamweaver MX ("стиль MX") жђмыс ортасыныњ «жања» тџрін тањдайды. Бђл жаѓдайда сіздерге барлыќ керек ќђрал-жабдыќтар бір џлкен терезеде орналасады, автордыњ кљзќарасы бойынша солай тђрѓаны ыњѓайлы. Сіздерге тап осы љтілімді тањдауларыњызды ђсынамыз.

Dreamweaver 4 Workspace љтілімі Dreamweaver-діњ — 1-ден 4-ші версияларында ќолданылѓан жђмыс ортасыныњ «ескі» тџрін тањдайды("старый стиль"). Бђл жаѓдайда экран бетінде екі терезе орналасады: дерек терезесі мен сайт терезесі, екеуініњ ортасынан жиі ауысып отыру ќажет болады. Бђл љте ыњѓайлы емес, барлыѓы бір терезеде орналасќан кезде жђмыс істей ѕлде ќайда ыњѓайлыраќ. Сондыќтан егер сіз Dreamweaver MX –тіњ ескі версияларына џйреніп ќалѓан болсањыз ѓана бђл љтілімді ќосуыњызѓа болады.

HomeSite/Coder-Style жалаушасы Dreamweaver MX Workspace љтілімін іске ќосќан кезде ѓана жђмыс істейді. Ол Dreamweaver-де Web-параќты ашќан бетте HTML-кодын дђрыстауѓа љткізеді. Бђл HTML кодын ќолмен теріп џйренген адамдарѓа керек. Егер сіз HTML-мен таныс болмасаныз, бђл жалаушаны ќоспаѓаныѓыз жљн.

Dreamweaver-діњ керекті жђмыс орта тџрін тањдаѓаннан кейін, ОК батырмасын басыњыз. Бірер уаќыттан соњ, сіздер Dreamweaver MX Workspace немесе Dreamweaver 4 Workspace љтілімдерініњ ќайсысын тањдаѓандарыњызѓа байланысты басты терезені немесе дерек терезесін кљресіз. Енді баѓдарламамен танысуымызды бастауѓа болады.

Ескерту

Кейінгі тџсініктер сіз Dreamweaver жђмыс ортасыныњ " MX стилін" тањдадыњыз деген тџсінікпен љтеді.

Баѓдарламаныњ негізгі терезесі

Macromedia Dreamweaver MX баѓдарламасыныњ негізгі терезесі 3.2-суретте кљрсетілген. Егжей-тегжейлі ќарастырайыќ.

3.2 - сурет. Dreamweaver негізгі терезесі.

Dreamweaver — кљпќђжатты интерфейсті баѓдарлама немесе жай ѓана кљпќђжатты баѓдарлама, яѓни баѓдарламаныњ бір терезесінде сіз бірнеше ќђжаттарды аша аласыз деген сљз. Бђл жаѓдайда ашыќ ќђжаттары бар терезе баѓдарламаныњ басты џлкен терезесініњ ішінен ашылады. Кљпќђжатты баѓдарламаларѓа сонымен ќатар Microsoft Word пен Adobe Photoshop та жатады.

Басты терезе кљптеген Web-параќтарды ќђру жѕне љњдеу џшін ќолданылатын терезелер мен ќђрал-жабдыќтардыњ жиынтыѓынан тђрады. Сонымен бірге негізгі терезеде бас мѕзір жолы тђрады, оныњ кљмегімен Dreamweaver-діњ барлыќ мџмкіншіліктеріне жол аша аласыздар.

«Окно документа» Dreamweaver ќђжат терезесі ашыќ Web-параќты кљрсету џшін ќажет. Кез келген кљпќђжатты баѓдарлама сияќты, Dreamweaver бас терезесіне ќанша болса да ќђжат терезелерін аша бере алады. Windows –дыњ кљптеген терезесі тѕрізді бђл ќђжаттаѓы терезелермен кез келген манипуляциялар жасауѓа болады. Біраќ сіз ол терезелерді баѓдарламаныњ сыртына шыѓара алмайсыз (оны таѓы да ата-ана терезесі деп те атайды).

Алѓашќы іске ќосќанда Dreamweaver MX экран бетіне таѓы бір кішкене шаќыру терезесі ашылады. Бђл терезеде жарнама сипатындаѓы мѕтін орналасќан, Dreamweaver- де ќалай жђмыс жасау туралы ќолданушыѓа белгілі бір аныќтамалыќ деректер оќып шыѓуѓа немесе интерактивті презентациялар ќосуѓа кљмектеседі. Сіз деректерді бірден ќарап шыѓуыныњызѓа немесе жабу батырмасын басып, жауып тастауыњызѓа болады. Баѓдарламаны келесіде ќосќан кезде ол терезе екінші ќайта шыќпайды.

Ќђжат терезесініњ жоѓарында, тљменде жѕне оњ жаѓында панелдер орналасќан. Ол кішкене терезелер, басты терезеніњ жанарларына жабыстырылып немесе жанында бос жџруі мџмкін. Олар сан алуан маќсаттарѓа арналѓан; егжей-тегжейін келесі бљлімдерде ќарастырамыз. Ѕр панелдіњ жоѓарѓы жаѓында оныњ аты берілген.

Бастапќыда экрандаѓы барлыќ панелдер негізгі терезеніњ шеттеріне жабысып тђрады, Macromedia фирмасыныњ баѓдарламалаушылары кљптеген Dreamweaver ќолданушылары џшін осылай тђрѓан ыњѓайлы деп ойлайды, жѕне олар ќателеспейтін сияќты. Біраќ сіз басќа ойды ђстануыњыз мџмкін. Сондыќтан кез келген панелді сіз негізгі терезеден бљліп алып терезе ішіне љзіњізге ыњѓайлы етіп ќоюыњызѓа болады. Орнын ауыстыру џшін кез келген панелдіњ атыныњ сол жаѓында бес нџкте сияќты берілген «ќолсабы» бар. Жѕне ѕрине сіз кез келген панельді жђмыс істегенде кедергі келтірмес џшін ќайтіп орнына алып келіп ќоя аласыз.( 3.3 - сурет)

3.3 - сурет. Негізгі терезе шетінен алынып тасталынѓан панель

Егер сіз бір панелді екіншісініњ џстіне алып келіп ќойсањыз олар бір терезеге топ болып бірігеді (3.4 - сурет). Бђл сияќты топтарды да негізгі терезеніњ шетіне жабыстырып ќоюѓа болады. Топќа ђќсас функциялар атќаратын панелдерді біріктірген жљн болады.

3.4 - сурет. Топќа біріктірілген панелдер

Топќа біріктірілген барлыќ панелдер вкладка тџрінде кљрсетілген. Топ ішіндегі ќажетті панелге љту џшін тышќанмен осы панелдіњ аты жазылып тђрѓан вкладканы шертіњіз. Егер сіз белгілі бір панелді осындай топтан шыѓарѓыњыз келсе, тышќанныњ оњ жаќ батырмасын басып, Group пунктін тањдап < панел аты> with жѕне экранда пайда болѓан ішкімѕзірден — пункт New Panel Group тањдањыз.

Панелдіњ ауданын аты ѓана ќалатындай етіп уаќытша кішірейтіп ќоюѓа болады, панелді алѓашќы ќалпына келтіру џшін атын шертіњіз (3.5 сурет).

3.5 - сурет. "Кішірейтілген" панель терезесі

Кљптеген панелдер тобыныњ ќосымша мѕзірлері бар. Ол панелдіњ оњ жаќ жоѓарысында орналасќан кішкене тізім тѕрізді бейнеленген, тышќанмен бір рет шерткенде ашылады (3.6 - сурет). Ќосымша мѕзірде сирек ќолданылатын командалар орналасќан.

3.6 - сурет. Панелдер тобыныњ ќосымша мѕзірлері (ашыќ)

Енді назарларыњызды негізгі терезеніњ оњ жаѓына аударыњыздар. Онда наѓыз тџрлі панелдер жиынтыѓы орналасќан. Бђл арнайы док — аймаќ, ѕдейі панелдер орналастыру џшін арналѓан. Док негізгі терезеніњ аумаѓынан толыќ сђр сызыќпен бљлінген, оныњ љлшемін тышќанмен ђстап отырып љзгертуге болады. Сіз сонымен ќатар, берілген батырманы тышќанмен шерте отырып, барлыќ панелдерімен бірге жасырып ќоюыњызѓа жѕне ќажет болѓан кезде ашып ќоюыњызѓа болады (3.7 - сурет).

3.7 - сурет. Докты ашып-жабу батырмасы

Панелдер ѕрдайым ќђжат терезесініњ бетіне орналасады, бђл сѕтте іске ќосылмаѓан болса да. Бђл сіздіњ кез келген уаќытта оларѓа љте алу мџмкіншілігіњіз болу џшін істелінген. Егер сіз осы панелдердіњ бірін алып тастаѓыњыз келсе, панелді ќђжаттыњ сыртына алып тастањыз немесе оныњ ќосымша мѕзірін ашып, Close Panel Group пунктін тањдањыз. Алдаѓы уаќытта сіз ќажетті панелді Window мѕзірінен тањдап алып ашуыњызѓа болады.

Dreamweaver баѓдарламасыныњ терезесі активті режимде болуы тоќтатаѓан соњ( мысалѓа, ќолданушы басќа баѓдарламаѓа ќосылса), барлыќ «плавающие» панелі белгілі бір уаќытќа жоќ болып кетеді. Dreamweaver активті режимге ќайта келгенде олар ќайта экран бетіне шыѓады.

Dreamweaver –діњ барлыќ панелдері бір біріне ђќсас (біраќта маѓыналары ѕр тџрлі).оныњ ішінде екеуі ѓимарат. Соны ќарастырайыќ.

Біріншісі – бђл обьект панел, «плавающем» де кљрсетілген 2.3 - сурет (онын аты Insert). Бђл панель ќђжаттарѓа ѕр тџрлі элементтерді тез ќоюѓа арналѓан: суреттер, таблицалар, арнайы символдарды, жѕне де т.б.

Егерде ќазіргі уаќытта сізге обьект панелі ќажет емес болса, онда оны жауып тастауѓа болады, келесі команда арќылы, менюден Close Panel Group пункттін тшертеміз. Егерде сізге бђл панелді ашу керек болса, онда мына команданы орындайсы, менюден Windows пункт Insert немесе <Ctrl>+<F2>. Пернетаќта арќылы екі комбинацияны шертеміз.

Екінші панель, ол Properties, — бђл редактордыњ ќђрылымы. (3.8-сурет), Dreamweaver ќђрылѓысы ішіндегі ењ мањыздысы жѕне љзгертуге келмейтін болып табылады.

3.8 – сурет. Редактордыњ ќђрылымы

Редактордыњ ќђрылымын компактті жѕне толыќ тџрге ќосуѓа болады. Алѓашында ол компактті тџрде болады, кейбір ќолданбайтын Dreamweaver ќђрылымын ќђрылѓылар болады. Автордыњ ђсынысы бойынша оны сол мезетте ашу ќажет, ол џшін тышќанмен батырманы шертеміз, ол батырмада стрелканын суреті тђрады, жѕне де оњ жаќтаѓы бђрышта орналасады. Содан соњ осы редактордыњ ќђрылымындаѓы ќол жетімді барлыќ ќђрылѓыларды кљрсетеді.(3.2 – сурет) редактор ќђрылымы ашулы тџрде кљрсетілген). Байќаѓан шыѓарсыз, батырмадаѓы стрелка бейнелен жѕне де ол жоѓары жаќќа ќарап тђр,егерде сол батырманы шерттсек редактор ќђрылымын жабасыз жѕне оны ќайта шерттсек ашылады.

Аяќталуына азыраќ ќалды

Обьект орналасќан панельге кљз салыњыз, ол жоѓарѓы негізгі терезеніњ ќасында орналасќан. Жоѓары немесе тљмен де сіз жіњішке сђр панельді кљресіз, батырмалар арќылы толтырылѓан.(2.9 сурет). Dreamweaver-діњ таѓыда бір ќђрал- жабдыќтары. Ќђрал – жабдыќтар – ерекше панель, кљп ќолданатын ќђралдармен тез жђмыс жасауге ќолданылады. Dreamweaver-де мђндай екі ќђрал бар:

· стандартты, алѓашында кљрінбей тђрады, файлды операцияларѓа ќол жекізеді(ќђру, ашу жѕне саќтай Web-параќтарын);

· ќђжатты, кейбір манипуляцияны Web-параќтарымен жѕне баѓдарламамен орындауѓа болатын ќђрал. (3.9 сурет)

3.9 – сурет. Ќђжат тыњ ќђралдары

Dreamweaver панельдерімен жѕне терезелерін басќару

Љздерін кљріп отырѓандай Dreamweaver бірнеше ашыќ терезелермен жђмыс істей алады.

Алдын ала меню пунктін білу ќажет, сол менюлер кљмегімен терезелердін жђмыс жасауын ќадаѓалайды. Бђл барлыќ пункттер Window менюінде орналасќан. Толыѓыраќ ќарастырайыќ.

Егерде сіз бірнеше Web-параќтарын ашып ќойсањыз, олармен жђмыс жасау ќиынѓа тџседі. Терезе лер бір біріне кедергі келтіреді, ќажетті терезеге ќол жеткізу кљп уаќытты алады. Window менюін ашып , тљменгі жаѓында кљз салыњыз. Сол жерде ашылып тђрѓан терезелердіњ аттары жазып тђрады.

Егерде сіз ќђжат терезесін барлыќ экран бетіне шыѓарсаныз, онда терезелер арасындаѓы ауысулар оњай орындалады. Ќалѓан терезелер ішкі менюдіњ ќђрамында болады, ол тљменгі бљлікте орналасады. Сізге тек ќажетті параќты тањдау ќажет. ( 3.10 - сурет)

3.10 - сурет ішкі меню, барлыќ ашыќ тђрѓан терезелерді кљрсетеді

Сізге кљз алдыњызда бірнеше терезені ашыќ тђруы ќажет болса, келесі ќђралдарды ќолданасыз Window менюіндегі Cascade, Tile Horizontally жѕне Tile Vertically пункттері.

Insert жѕне Properties пунктері экран бетіне шыѓару немесе ашу џшін ќолданылатын редактор ќђралдары. Осы екі пункттін ќасында белгі тђрса, онда ол экран бітіне шыѓады. Панельді алып тастау џшін білгіні алып тастау ќажет, ол џшін керекті пунктке шергенде белгі жоќ болады. Мђндай пункт менюлері сљндіріп-ќосу деп атайды. Insert жѕне Properties тањдау џшшін келесі батырманы басу арќылыда ќосуѓа болады<Ctrl>+<F2> и <Ctrl>+<F3>.

Аз уаќытќы сізге барлыыќ панеьді жабу ќажет болса,себебі ашыќ тђрѓан Web-параѓын ќарау џшін, онда window менюінен Hide Panels пунктін немесе View менюінен тањдаймыз. Тез орындау џшін <F4> батырмасын шертуге де болады.

· Панеьді жабу, Close Panel Group;

· Панеьдін љлшемін џлкейту, Maximize Panel Group;

· Белгіленген топты немесе бљлек панельді басќада топќа ќосу Group <название группы или панели> with;

· Топтын атын љзгерту Rename Panel Group. Енді жана атты енгузі ќажет Panel Group Name диалогті терезе Rename Panel Group ( 3.11 сурет) ОК батырмасын шертеміз немесе саќтаймыз;

· Белгіленген панельді жаѓа панельге Group < топтын атынемесе панель аты> with содан соњ —New Panel Group;

· Аныќтама алу џшін Help.

Экранѓа ќажетті ќђралдарды шыѓару џшін View менюінен Toolbars тањдаймыз. Мђндай екі пункт ќана бар:

· Standard пункті негізгі ќђралдар

· Document пункті ќђжаттар ќђралдары

3.11 – сурет. Rename Panel Group диалогты терезесі.

3.2 Web- параќтармен жђмыс жасау

Dreamweaver-дегі Web-параќтармен жђмыс жасау негізгі ќаѓидалары. Сонымен ќатар ќђжат терезелерінде ќарастырамыз.

Ќђжат терезесініњ жђмысы

Dreamweaver-де ќалай Web-параќтарды жасайды?

Љте оњай. Кџнделікте ќолданылатын тексттік Microsoft Word ќђжаттар сияќты жазылады. Сіз тек оны теремсіз де файл ретінде саќтайсыз. Біраќ ол htm немесе html форматында саќталынады, сол арада Web-серверге жіберуге болады.

Текстті жазу џшін бірінші ќђжатты ќђру керек. Ол џшін File менюіндегі New пунктін шертеміз, немесе <Ctrl>+<N> батырмасын ќолданамыз. Жања Web-параќты ќђру џшінші таќырыпта толыѓыраќ ќарастырылѓан.

Сонымен ќатар дайын тђрѓан Web-параќты ќолдануѓа болады. Ол џшін File менюінен Open пункттін тањдаймыз, немесе <Ctrl>+<O>.

Ескерту

Ашу, саќтау, ќђру, ќата саќтау жѕне де баспаѓа шыѓару операцияларын файлды деп атайды.

Dreamweaver-де текстті теру басќа да текстті редакторлардаѓыдай жазады. (Блокнот и жѕне WordPad, Windows, Microsoft Word жѕне т.б.).

Текст пернетаќта арќылы теріледі. Сонымен ќатар текстті љз бетінше жолдарѓа бљледі. Жања абзац жазу керек болса, онда <Enter> шертеміз. Тексттерді "листать" параќтын беті сияќты ќарап шыѓуѓа болады <PgUp> жѕне <PgUp> батырмалары арќылы,тексттін басын жѕне де соњын кљрсетеді <Ноmе> и <End>. <Ctrl>+<Home> немесе <Ctrl>+<End> тезірек басын соњына ауыстыру џшін ќолданылады.

Егерде текстті ќате терсењіз, оны љшіруге болады<Backspace> жѕне <Del> батырмалары арќылы. <Backspace> курсордыњ сол жаѓында тђрѓан символды љшіреді, <Del> курсордыњ оњ жаѓында тђрѓан символды љшіреді.

Жѕне де ќђжат терезелерінде «копирование» «вырезание» «перемещение» операциялары да орындалады. Бђл операциялар љте пайдалы болып саналады.

Текстті белгілеу џшін, керекті фрагментке тышќанмен шертесіз, сол жаќ батырмасын жібермей , оны соњына дейін алып апарасыз да батырманы жібересіз. Сонымен бірге<Shift>+ +<Клавиша- керекті жаќќа стрелканы орналастырамыз > жолдыњ соњына дейін белгілеу керек болса<Shift>+<End>, ал басына ќарай болса <Shift>+<Home>, ќђжаттыњ соњына дейін - <Ctrl>+<Shift>+<End>, ќђжаттыњ басына дейін - <Ctrl>+<Shift>+<Home>. Барлыќ текстті белгілеу <Ctrl>+<A> батырмаларын ќолданамыз..

Белгіленген фрагментті кесіп алу џшін, келесі батырманы шертесіз <Ctrl>+<X>, немесе Edit менюден Cut пункттін тањдањыз, оны кљшіру џшін <Ctrl>+<C> немесе Edit менюінен Сору пунктін орындаймыз. Текстті ќою џшін <Ctrl>+<V> батырмасын шертеміз, немесе Edit мнюінен Paste пункттін тањдаймыз. Белгіленген текстті љшіру <Del> командасымен орындалады, немесе Edit мѕзірінен Clear пункттін тањдаймыз.

Шђѓыл тџрде тексттін орнын ауыстыру керек болса, оны тышќанныњ кљмегімен ауыстыруѓа болады. Кљшірмесін жасап, орнын ауыстыру ќажет етсе <Ctrl> батырмасын ќолданамыз.

Тышќанныњ оњ жаѓын шерткен кезде меню экран бетіне шыѓады, сол арќылыда Cut, Copy жѕне Paste пункттерін орындауѓа болады.

Егер де ќате кеткен жаѓдайда Edit менюінен Undo <команда> орындалады, немесе <Ctrl>+<Z>.

Текстті форматтау ќарапайым текстті редакторлеу сияќты орындайды.ол џшін текстті белгілеу жѕне редактордыњ ќђрылымын ќолданасыз, себебі параметрлерін енгізу керек.

Dreamweaver баѓдарламасында басќа баѓдарламалар сияќты љзініњ ерекшеліктері бар, соларѓа тоќталамыз

Ќђжат терезесініњ тљменгњ жаѓында «строка статуса» орналасќан. Кљптеген Windows- ќђрамындаѓы «строка статуса» аќпаратты алуѓа ќолданылады. Ал Dreamweaver ќђрамындаѓы ќђжат терезелеріндегі «строка статуса» тек ќана аќпарат беріп ќоймай сонымен ќатар бірнеше ќажетті функцияны орындайды. Ол џш секцияѓа бљлінген, бљлек ќарастырамыз

Сол жаќта тег секциясы орналасќан, «строка статуса»-тыњ ењ кљп бљлігін ќамтиды. (3.12 сурет). Осы секция кљмегімен текст фрагменттерін тањдауѓа болады,сол немесе басќада HTML тегі бойынша.

3.12 - сурет. Тег секциясы.

Бізге барлыќ текстті белгілеу ќажет болсын делік, <i> (курсивное начертание)тегі бойынша. Ол џшін келесіні орындаймыз. Текстті курсорды «Microsoft Internet Explorer» орналастырамыз, содан соњ тег секциясын тањдаймыз 3.12. сурет. Келесі <i> секциясыныњ батырмасын шертеміз,сол арада барлыќ текст "Microsoft Internet Explorer" арќылы жѕне <I> тегі арќылы белгіленеді.

<р> батырмасын шертсек, онда барлыќ текст <р> тегімен белгіленеді жѕне де абзацтар да. Енді ќалѓаны <body> батырмасын тексеру. Егер оны шертсек барлыќ параќ беті белгіленеді.

Тег секциясы — кџшті ќђрылѓылар бар параќ. Сонын кљмегімен сізге ќажетті тегті тањдауѓа болады.

Оњ жаќта екінші секция орналасќан, пиксельде ќђжаттыњ љлшемњн береді-терезе љлшемініњ секциясы.егерде сіз оѓан тышќанмен шертсењіз, экран бетіне меню шыѓады- терезе љлшемініњ тізімі. ( 3.13 сурет). Ѕр бір љлшем белгілі бір экран љлшеміне сай келеді. Осындай ѕр тџрлі љлшемді алып, љзініздіњ Web-параѓынызды ќарауѓа болады. Сізге ќажет болуы тиісті егерде арнайы экран љлшемі арќылы Web-параѓын жасаѓанда

3.13 –сурет. Ашыќ терезе арќылы тізім љлшем секция

Ењ оњ жаќтаѓы секцияныњ ђќсас љлшемі Web-параѓы жѕне Web-серверге жџктелгенге дейінгі уаќыты. Бђл секция параќ љлшемі ( 3.14 сурет).

3.14 -сурет. Параќ љлшемініњ секциясы

Параќпен жђмыс жасап болѓан соњ оны саќтау керек. Ол џшін File менюден Save пункттін тањдаймыз, немесе <Ctrl>+<S> батырмаларын шертеміз. Егерде параќты бірінші рет саќтасањыз, онда стандартты даилог шыѓады, онда файлды саќтау, файлдыњ аты жѕне саќтау батырмасын тањдаймыз. Басќаша жаѓдайда параќты саќтау батырмасын орындаймыз.

Dreamweaver-де басќада баѓдарламалар сияќты параќты басќа файлда саќтауѓа болады жѕне де басќа ат арќылы саќталады.мђндай жаѓдайда келесі шарт орындалады: File менюінен Save As пункттін тањдап алып шертеміз немесе <Ctrl>+<Shift>+<S> батырмалар кљмегімен саќтай аламыз. Экран бетіне стандартты диалогты терезе шыѓады, файлды саќтау, файлдын атын енгіземізде саќтай батырмасын шартеміз.

File мѕзірінен Print Code тармаѓын тањдап, немесе <Ctrl>+<P> комбинациясын басып, сіз параќтыњ HTML-кодын шыѓара аласыз. Экранда стандартты диалогті басу (мљр) терезесі шыѓады, сізге ќажет болѓан параметрлерді толтырып, басудыњ (мљрдіњ) іске ќосылуы батырмасын басыњыз.

Негізінде, дайын беттi, компьютердiњ жџйелiк ќорларын босату џшiн, жабу керек. Бђл тиiстi терезесiніњ ќђжаттыњ (баѓдарламаныњ басты емес терезесініњ) жабу батырмасын басуы - оњай жолы болып табылады. Сол сияќты File мѕзірінен Close тармаѓын немесе <Ctrl>+<W> батырма комбинациясын басуѓа болады. Содан кейін параќ жабылады, біраќ Dreamweaver ашыќ болып ќалады.

Dreamweaver-діњ љзін, оныњ бас терезесініњ жабу батырмасын шерту арќылы жабуѓа болады. Сонымен ќатар ол сізден, редактрленген, біраќ ѕлі саќталмаѓан беттерді саќтау керек, керек еместігін сђрайды. Егер сіз мѕзірді ќолдануды ќаласањыз, онда File мѕзірінен Exit тармаѓын тањдањыз немесе <Ctrl>+<Q> немесе <Alt>+<F4> батырма комбинацияларын басыњыз

Web-параќ бейнесініњ џш тѕртібі

Dreamweaver ќђжатыныњ терезесі редактрленетін Web-параќтыњ бейнесін џш тѕртібінде (режимінде) кљрсете алады. Ќазір біз оларды ќарастырамыз.

Алдында айтылѓандай, Dreamweaver, Web-параќтыњ љзімен де, сол сияќты оныњ тікелей HTML-кодымен жђмыс жасауге рђќсат ететін гибридті Web-редакторларѓа жатады. Ол, Dreamweaver-діњ бір мезгілде HTML-коды жѕне параќтыњ љзін бір терезеде бейнелей алуыныњ арќасында, оњай іске асады.

Біраќ ќалай HTML-кодына ќол жеткізуге болады? Ќалыпты жаѓдайда, Dreamweaver сізге Web-параќты WYSIWYG тѕтібінде редактрлеуге ђсынады.

Љте оњай!

Ќђжаттыњ ќђрал-сайманына ќарањыз (оны ашыќ тџрде ђстаѓан дђрыс). Сол жаќта џш батырма кљрініп тђр (3.15 сурет). Олар бейненіњ џш ќолжетімді тѕртіптерін аустырып ќосады (оњнан солѓа ретінде атап кљрсетiлген): параќ, параќ жѕне HTML-код жѕне HTML-код ќана.

3.15 - сурет. Web-параќ бейнесініњ ауыстырып ќосу батырмалары

3.15- суретінде шеткі оњ жаќ батырмасы басылѓан. Ол, ђсынылѓан Dreamweaver-діњ ќалыпты жаѓдайы, – параќ бейнесініњ тѕртібін ќосады. Бђл тѕртіпте сіз WYSIWYG тѕртібіндегі Web-параќпен жђмыс жасай аласыз.

Енді, параќ бейнесініњ тѕртібін жѕне кодын ќосатын орташа батырмасын басамыз. 3.16-суретінде бђдан не шыѓытыны кљрсетілген.

3.16-сурет. Параќ бейнесініњ тѕртібі жѕне коды

Кљріп тђрѓаныњыздай, ќђжат терезесі екі бљлікке бљлінді. Жоѓарѓы бљлікте біздіњ бетіміздіњ HTML-коды, ал тљменгі бљлікте – WYSIWYG тѕртібіндегі параќтыњ љзі кљрсетіледі. Web-параќты љз кљз алдында ђстай отырып, кодты сџзгіден љткізу керек, мђндай тѕртіп љте тиімді. Сіз бљлгіш тџзуді тышќанмен, терезеніњ бір бљлігін џлкейту џшін, орын алмастыра аласыз.

Бірінші батырма код бейнесініњ тѕртібін ќосады (3.17-сурет)

3.17-сурет. Кодтыњ бейнесiнiњ тѕртiбi

Сіз бейне тѕртіптерініњ ауыстырып ќосу џшін View мѕзірініњ Design, Code and Design тармаќтарымен де ќолдана аласыз. Оныњ атауынан сол жаќтаѓы пунктерініњ бірін тањдау кезінде, берілген тармаќ жѕне берілген тѕртіп ќосылѓанын кљрсететін ќанат белгісі пайда болады. Мђндай тармаќ ќосќыштар деп аталады.

Солай сияќты, сіз, View мѕзірініњ Switch Views тармаќтары немесе <Ctrl>+<'> батырма комбинациясы арќылы, параќ бейнесініњ тѕртібі мен код тѕртібі арасын ауыстырып ќоса аласыз.

3.3 HTML кодымен жђмыс жасау

Ал енді, Dreamweaver HTML тілімен таныс болѓандарѓа ќандай ќђралдарды ђсынатынын аныќтайыќ.

Ењ алдымен, сiз HTML-дыњ бастапќы код бейнесiнiњ тѕртiбiне шеткi сол батырмасын басып, 2.13 - суретте кљрсетілгендей, ауыстырып ќоса аласыз. Сол сияќты, сіз View мѕзірініњ Code немесе Switch Views тармаќтарын ќолдана аласыз.

Бђдан басќа, Dreamweaver жасаушылар, бастапќы HTML-ды Code Inspector панелінде кљру мџмкiндiгін ескердi (3.18- сурет). Оны терезеге шаќыру џшін, Window мѕзіріндегі Others тармаѓын жѕне шыќќан ішкі мѕзірден – Code Inspector тармаѓын тањдањыз. Біраќ ењ оњайы - <F10> батырмасын басу.

Кљптеген жаѓдайларды ол жеткілікті. Дегенмен, беттіњ код бљлігін, оны кљз алдында ђстай отырып, редактрлеу керектігі жиі болады. Ол џшін, Dreamweaver – HTML мини-редактрін ђсынады. Мини-редакторді ќолдана отырып, сіз тањдалѓан тегтіњ атрибуттарымен басќара аласыз, сол сияќты, HTML-кодін кез келген мѕтінніњ орнына ќоя аласыз.

3.18-сурет. Code Inspector панелі

Мысалы, ќандай да бір тегтіњ атрибуттар мањынасын аздап жљндеу керек. Ол џшін, оныњ ішіне мѕтіндік мегзегіш ќойып, мезттік мѕзірден Edit Tag Code <тег> тармаѓын тањдањыз. Экранда, 3.19-суретінде кљрсетілген, мини-редактор терезесі пайда болады. Оѓан сѕйкес кодін енгізіп, Dreamweaver барлыќ љзгерістерді ќабылдау џшін, <Enter> батырмасын немесе одан бас тарту џшін <Esc> батырмасын басыњыз.

3.19-сурет. HTML мини-редакторініњ терезесі

Кљріп тђрѓаныњыздай, мини-редактордыњ терезесі, сізге тек ќана тегтерді басќаруѓа мџмкіндік береді. Тегтердіњ ішін ќђжат терезесінде де дђрыстауѓа болады.

Егер сізге Web–параќтыњ мѕтініне ќандай да бір тег ішін ќою керек болса, сол орынѓа мѕтіндік тінтуірді ќойып, мезеттік мѕзірінен Insert Tag тармаѓын тањдањыз. Мђнда да мини-редактор терезесі шыѓады, біраќ бђл жолы бос (3.20-сурет).

Бђл ќандай, аталып кеткен, тџсініксіз сљздер тізімі? – деп сђрайсыз. Dreamweaver MX-та пайда болѓан – кодтау бойынша аныќтамасы керемет мџмкіндіктерініњ бірі. HTML кодыныњ бір жерінде < белгісін ќойѓан соњ, Dreamweaver HTML-дыњ барлыќ тегтері санамаланѓан тізбегін кљрсетеді. Егер сіз пернетаќтадаѓы кез келген ѕріптік батырманы бассањыз, онда тізімде сол ѕріптен басталатын тегтер ѓана пайда болады. Тізімге керекті тегті тањдау џшін оны ерекшелеп алып, <Enter> батырмасын немесе тышќанмен басыњыз.

3.20-сурет. Жања тегті ќою кезіндегі мини-редактор терезесі

Мини-редактор терезесіне сіз ќойѓыњыз келген барлыќ кодты енгізіњіз (3.21-сурет) жѕне <Enter> батырмасын шертіњіз. Ол мѕтіндік мегзегіш тђрѓан орынѓа орналастырылѓан.

3.21-сурет. Бетке ќойылатын HTML жања кодты мини-редактор терезесі

Сіз HTML тегіне кез келген мѕтінніњ ерекшеленген бљлігін “айналдыра” аласыз. Ол џшін керекті мѕтінді белгілеп, мезеттік мѕзірден бір тармаќты тањдањыз.

Wrap Tag. Пайда болѓан терезеде керекті тегті атрибуттермен бірге енгізіп жѕне <Enter> батырмасын шертіњіз. Осымен жђмыс аяќталды!!!

Назар аударыњыз!

Modify мѕзѕрінде Quick Tag Editor тармаѓы жѕне де ќасиеттер редакторында орналысќан, біраќ олармен жђмыс жасауге ыњѓайсыз.

Олардыњ жђмыс жасау принциптеріњ тек ќана Macromedia фирмасыныњ баѓдарламашылары ѓана білетін шыѓар. Сондыќтан да ќђжаттыњ терезесіндегі контекстік менюді ќолданыњыз – осылай сенімдірек болады.

Мѕтінніњ кейбір фрагменті бар, тегті жою џшін,оныњ ішіне мѕтіндік курсорды ќойып жѕне констектік мѕзірдіњ Remove Tag <тег> тармаѓын тандањыз. Dreamweaver бђл тегті жояды, біраќ оныњ ішіндегі аќпаратты ќалдырады, жѕне де бђл аќпарат аналыќ тегке ќђйылады.

Егер де сіз HTML тегтеріњ лі де жаќсы білмесењіз, љкінбењіз. Dreamweaver MX сізге кљмекке келе жатыр, тегтерді љзгертуге болатын бірнеше жања ќђралдарды мен жања тегтерді ќоюѓа болады, бђндай ђсыныс тѕжірибелі емес ќолданушыѓа љте ыњѓайлы болады.

Ењ алдымен, бђл тегті љзгертуге болатын сђхбат терезесі. Кейбір тегтін мазмђныњ тџгелдей тањдап алыњыз, тегтіњ жолдыќ статусыныњ кљмегімен(3.22- сурет). 3.22- суретте кљрсетілген сђхбат терезесі экранда пайда болады.

3.22- сурет. Тегті тузету терезесі

Бђл терезе кљмегімен, сізге ыњѓайлы тџрдегі, тегтіњ атрибуттерініњ ѕртџрлі мѕндерін бере аласыз. Сол жаќ мѕзірде бір атрибутті тањдап алыњыз, жѕне де терезеніњ оњ жаќ бљлігінде басќару элементтері пайда болады. Сондай аќ сіз Tag Info пернесін шерте аласыз, ол жай жазу сияќты кљренеді, содан кейін тегті љзгерту терезесінде ќысќартылѓан кљмек пайда болады. Љзгертуді аяќтаѓаннан кейін, љзгертулерде саќтау џшін Ок , немесе олардан бас тарту џшін Cancel батырмаларын шертіњіз.

Егер де сіз беттерді жаппай тегті љзгерткіњіз келсе, Tag Inspector панелін колданыњыз. Tag Inspector панеліњ экранѓа шыѓару џшін Window мѕзірінен бђл пункті тањданыз немесе <F9> батырмасын шертіњіз. Бђл панель 3.23- суретте кљрсетілген.

Бђл панелдіњ џстінгі жаѓында тегтердіњ иерархиялыќ тізімі орналасќан, ашыќ Web-параќтарда кездесетін. Ал панелдіњ астыњѓы бљлігінде тег жѕне оныњ ќасиеті иерархиялыќ тізімнен тањдалѓан атрибуттер тізімі орналасќан.Сіз керекті тегті тандап алып оны астыњѓы бљлікте орналысќан тізімде љзгертесіз, ал ќђжат терезесінде сіз берген љзгертулер жазылады.

Tag Inspector панеліндегі тљмењгі оњ жаќ бђрышында орналысќан Edit <тег> Tag батырмасын шерткен кезде, сіз тегті тџзету сђхбат терезесін шаќырасыз. Бђл перне 3.24-суретінде кљрсетілген.

3.23-сурет. Tag Inspector панелі

3.24 - сурет. Edit <тег> Tag батырмасы

Басќа да сђхбат терезе кљмегімен сіз бетке тегті немесе белгіленген текстіњ џзіндісін орната аласыз. Сол џшін Tag Chooser сђхбат терезесі ќызмет етеді (3.25-сурет). Оны ашу џшін келесі кљрсетілген ѕрекеттерді орындау керек:

· Insert мѕзірінен Tag пунктін тањдап алуѓа немесе <Ctrl>+<E> пернелердіњ ќосындысын басу.

· Ќђжат терезесіндегі контекстік мѕзірден Insert Tag пунктіњ тањдау

· Объектер панелінде Common ќалауында орналысќан, Tag Chooser пернесіњ басу (3.26-сурет);

Tag Chooser терезесі 3.26 - суретте кљрсетілген

Иерархиялыќ тегтердіњ тізімінде, сол жаќ бљлігінде орналысќан, сіз тегтердіњ категорияларыњ тањдай аласыз. (HTML Tags тізімініњ бђтаѓынмен белгіленген, категориялар керек болатын шыѓар). Љзінізге керекті тегті тањдап алѓаннан кейін, бђл категорияѓа байланысты тегтер оњ жаќ тізімде пайда болады.Бђл тегті бетке орнату џшін, сіз керекті тегті тандап Insert пернесін басыњыз.

3.25 - сурет. Tag Chooser батырмасы.

3.26 - сурет. Tag Chooser панелі

Insert батырмасыњ басќаннан кейін экранда сізге белгілі тегті тџзету диалогты терезесі шыѓады, бђл терезеде сіз тандалѓан тегтіњ атрибут мѕніњ бере аласыз. Тегтіњ љзі Ок батырмасын басќаннан кейін тег тџзету терезесіне ќойылады. Сізбен ќойылѓан тег ќай жерде басталатынын жѕне ќай жерде аяќталатыныњ кљру џшін Dreamweaver біржола ќђжат терезесіњ бет жѕне код кљрсетілуіне ауыстырады.

Егер сіз Tag Chooser диалог терезесініњ Tag Info батырмасына шертсењіз бђл терезеде сізбен тањдалѓан тег жайлы ќысќаша сипаттама шыѓады. Орын босату џшін екі тізім де кішірейеді, осыны есепке алањыз.

Егер сіз Tag Chooser терезесіњ шаќыру алдында мѕтіндік курсорды жай белгісіз жерге ќоюдыњ орнына белгілі мѕтінніњ фрагментіњ белгілесеніз онда мѕтін жања ќойылѓан тегте орналасады. Кљріп отырѓаныныздай Dreamweaver љзін есті кљрсетеді, егер жай баѓдарлама жайында осылай айтуѓа болса.

Кез келген тегті ќойѓаннан кейін Tag Chooser терезесі экранда ќалады, сондыќтан сіз жања тегті ќоя аласыз. Таѓы да назар аударыњыз, бђл диалогты терезе модальді емес болып табылады, яѓни баѓдарламаныњ басќа да тџрлі терезелерге шыѓуѓа мџмкіндік береді. Tag Chooser терезесіњ жабу џшін Close батырмасын басыњыз.

Мѕтінді іздеу жѕне алмастыру

Барлыќ текстілік редакторлар, басќа ерекше редакторларѓа ќараѓанда, ќолданушыѓа керекті мѕтінніњ џзіндісіњ табуѓа жѕне оны басќа мѕтінге љзгертуге мџмкіндік бере алады. Ѕлбетте Dreamweaver де бђл мџмкіншілікті ќолдай алады. Оны жай ќолдамай аќ биік шыњдарѓа шыѓарады.

Edit мѕзірінде Find and Replace пунктіњ тандањыз немесе <Ctrl>+<F> комбинациясын басыњыз 3.27 суретте кљрсетілген. Кљњіл аударыњыз, бђл да модальді емес диалогті терезе, яѓни сіз ќђжат терезесіне енуді жоѓалтпайсыз.

3.27 - сурет. Find and Replace диалогті терезесі

Search For терезесі ќай мѕтін тџрінде іздеу жџргізуді мџмкін етеді: бет мѕтінінде (пункт Text), НТML-код тџрінде (Source Code), Бет мѕтінінде біраќ ќу тџрімен (Text (Advanced) немесе берілген тег мѕтінінде(Specific Tag). Егер алѓашќы екі пункт тањдалѓан болса, онда ізделінді мѕтін Search For мѕтіндік љрісіне енгізіледі, ал ізделінді мѕтінді ауыстыратын мѕтін Replace With мѕтіндік љрісіне.

Бђл жерде бѕрі ќарапайым тџрде. Сіз мџмкін басќа мѕтіндік редакторлерде іздеу жѕне ауыстыру функциясымен бђрын ќолданѓан болсањыз, онда мђныњ бѕрімен таныссыз.

Егер сіз Text (Advanced), пунктін тањдасањыз, іздеу жѕне ауыстыру терезесінде бірдење љзгереді. (Сурет 3.28). Бђл Ќандай тег ішінде сол немесе басќа мѕтін ізделінетінін мџмкін ететін, екі батырмадан жѕне екі ашылатын тізімнен тђратын басќару элементтерініњ жања тобы.

3.28 - сурет. Find and Replace диалогті терезесі

Оњ жаќта орналасќан ашылатын тізім мѕтін ізделінетін тегті белгілейді. Ал Сол жаќта орналасќан ашылатын тізім Іздеу жџргізілетін тегті белгідейді: Осы тег ішінде (Inside Tag пункті) немесе сыртында (Not Inside Tag). Егер сізге мѕтінді бірнеше тегтіњ ішінде (немесе сыртында) іздеуге керек болса,онда ќосу батырмасын шертіп , сіз дѕл осындай элемент топтарды ќоса аласыз. Сѕйкесінше, минус батырмасы элемент топтарын жояды.

Біраќ та Dreamweaver ењ ќуатты, тегтерді іздеу жѕне ауыстыру мџмкіншіліктерін береді, ол џшін Search For ашылатын мѕзірдегі Specific Tag пункті тањдау керек. Іздеу жѕне ауыстыру терезесінде элементтерді басќару тобыпайда болады,таѓы да ауыстырудын параметрлері деген топ пайда болады.

Ізделенген тег ашылатын тізімнен алынады, бђл тізім Search For мѕзіріннен оњ жаќта орналасќан. Егер де сіз басќа да бір тегті іздегенініз келсе, онда [any tag] пунктіњ тањданыз.

Ењ сол жаќтаѓы ашылатын тізім топта ќандай тегтер ізделенетініњ береді.

· With Attribute – келесі ашылатын тізімде атрибут ќђрамында бекітілген. Џшініші ашылатын тізімде тендік белгілері беріледі(тењ, џлкен, кіші, тењ емес), ал тљртіншісінде ізделенген атрибуттыњ мѕні немесе [any value] беріледі.

· Without Attribute- атрибуттары болмайтын, келесі ашылатын тізімде беріледі.

· Containing - љз ќђрамында мѕтінді немесе тегті бекітеді. Егер де сізге мѕтінді табу керек болса, онда екінші ашылатын мѕзірден Text пункті тандањыз, ал енгізетін жолда мѕтінді енгізіњіз. Егер де сізге тегті табу керек болса, онда екінші ашылатын мѕзірден Specified Tag пункті тандањыз, ал џшіншісінде тегті тањданыз.

· No Containing - љз ќђрамында мѕтінді немесе тегті бекітпейді

· Inside Tag – тегтін ќђрамында болатын, екінші ашылатын тізімде берілген.

· No Inside Tag - тегтін ќђрамында болмайтын, екінші ашылатын тізімде берілген

Плюс жѕне минус батырмалары сізге белгілі. Сондыќтан басќару элементтерініњ келесі тобына кљшеміз.

Назар аударыњыз

Љкінішке орай,егер де сіз басќару элементтер тобыныњ ашылатын тізіміне ешќандай мѕндерді енгізбесењіз, онда Dreamweaver сіз берген тегті іздемейд. Сондыќтан сіз ќосымша шарттарды енгізбесењіз, мысалы ізделенетін тегтіњ атрибуты,онда барлыќ бос топтарды жою керек.

Action ашылатын тізім табылѓан тегпен орындалатын іс ѕрекеттерді орнатады.Олармен келесілерді жасауге болады:

· Replace Tag & Contents – он жаќта орналасќан редактрлеу облысына енгізілген табылѓан тегті басќаѓа ауыстыру

· Replace Contents Only - он жаќта орналасќан редактрлеу облысына енгізілген табылѓан тегтіњ мазмђныњ ауыстыру

· Remove Tag & Contents — табылѓан тегті мазмђнымен бірге жою

· Strip Tag — тегті жою, біраќ та мазмђныњ ќалдыру

· Change Tag — оњ жаќта орналасќан ашылатын тізбектегі басќа тегпен ауыстыру, біраќ бђрынѓы мазмђныњ ќалдыру

Кљріп тђрѓаныњыздай, бђл батырманы басќан кезде бірнеше тармаќ ђсынатын мѕзір пайда болады. Осы сѕтте бізді Previews in iexplore тармаѓы ќызыќтырады. Сіз тџсінгеніњіздей оны тањдаѓанда Internet Explorer терезесі ашылып, сіз љњдеп жатќан бетіњіз жџктеледі.

3.4 Web-параќтарды ќарау

Web – ќђрастыруды шаќырудыњ екінші ѕдісі – бђл File мѕзіріндегі Preview in Browser деген ішкі мѕзѕрін ќолдану. Онда сіз iexplore тармаѓын кљресіз. Оны тањдап, сіз дѕл сондай нѕтиже аласыз.

Аныќтаманы шаќыру

Dreamweaver - мен жђмыс барысында сізге ќажет болуы мџмкін – жѕне міндетті тџрде ќажет болатын! – ол кљмек. Барлыќ кџрделі Windows – ќосымшаларында сияќты. Dreamweaver кџшті аныќтамалыќ жџйемен жабдыќтандырылѓан. Оны шаќыру џшін сізге тек <F1> батырмасын басу немесе Help мѕзіріндегі Using Dreamweaver тармаѓын тањдау ќажет. Аныќтамалыќ жџйеніњ терезесі 3.29 - суретінде кљрсетілген.

Аныќтама терезесініњ сол жаѓында аѓаш тѕрізді таќырыптар тізбегі орналасќан. Ал тараулар оњ жаѓында бейнеленеді. Тышќанмен таќырыптыњ атауын шертіп, керек тарауды аша аласыз,

Сонымен ќатар кілтті сљздер арќылы тарауларды іздеу ќарастырылѓан. Ол џшін «Поиск» ќосымша бетін тањдап, енгізу љрісіне керек кілтті сљзді енгізіп, «Разделы» батырмасын басыњыз. Содан соњ ќосымша беттіњ тљменгі жартысын алып тђрѓан тізімде табылѓан тараулардыњ атаулары пайда болады. Сізге тек керегін тањдап «показать» батырмасын басу ќалады. Тањдалѓан тарау оњ жаќта жџктелінеді.

3.29 - сурет. Dreamweaver аныќтамалыќ жџйесініњ терезесі

"O'Relly" баспасынан Dreamweaver ќђрамында сонымен ќатар толыќ HTML бойынша басшылыќ ќамтамасыздандырылѓан. Оныњ ќђрамы ерекше панелде Reference бейнеленеді (3.30 сурет). Бђл панелді докта іздеп кљріњіз – ол ѕдетте ашыќ тђрады. Егер сіз оны жауып џлгерсеніњіз, Reference батырмасын басыњыз. (3.31 сурет). Сіз сол сияќты Reference тармаѓын тањдап Window мѕзірі немесе батырмалар комбинациясын <Shift>+<F1> баса аласыз. Басшылыќ терезесінде тег бойынша аныќтама бейнеленетін болады, курсор орналасќан, HTML-кодын редактрлейтін терезеде..

Reference панелін ќолданып, сіз кез келген HTML тегініњ кез келген атрибуты жайлы аныќтама ала аласыз. Мысалы, <в> тегі жайлы кљбірек біліп алайыќ (есіњізде ќалѓаныњыздай оныњ ќђрамына кірген текстті жуан ќылдырады). Ашылѓан тізімнен Tag осы тегтіњ атын тањдап алыњыз – сонда панелде онын аныќтамасы жазылады.

Ашылып тђрѓан тізімніњ Tag оњ жаѓында атрибутттар тањдап алынатын басќа ашылып турѓан тізім бар. Ќазір сіз онда "Description" сљзін кљріп тђрсыз. Бђл белгі Reference панелінде тег жайлы маѓлђматттар бейнеленетіндігін кљрсетеді. Егер сіз атрибут жайлы маѓлђмат алѓыњыз келсе атрибуттар тізімінен керегін тањдањыз.

3.30 - сурет. Reference панелі

3.31 - сурет. Reference батырмасы

3.5 Dreamweaver баптау

Ал ќазір біздіњ Dreamweaver – ді ол орыс тілін жаќсы тџсінетіндей етіп жљнге келтірудіњ уаќыты келді. Біржола біз алдаѓы уаќытта ќажет болатын басќа жљндеулер туралы айтып љтеміз.

Барлыќ жђмыс кљпфункциялы терезеде программаныњ жљндеуінде љтеді, ѕр тџрлі ќолдану элементтері бар ќосымшалардан тђрады . Оны шаќыру џшін, Preferences тармаѓын тањдап, Edit мѕзірі немесе комбинациялар батырмасын басыњыз <Ctrl>+<U>. Сол жаќ терезеніњ жљндеуінде тізімдер ќосымшасы, ал оњ жаќта тањдалѓан ќосымшаныњ љзі шыѓарылѓан

Орыс тілін уйрену

Ќосымшалар тізімінен New Document тармаѓын тањдаймыз. Жљндеу терезесі мынадай тџрге кљшеді 3.32- сурет. Сонымен, мђнда не бейнеленген?

3.32 - сурет. Preferences диалогты терезесініњ New Document ќосымшасы

Dreamweaver да руссификация жайлы ангиме бастамас бђрын, Web-шыѓармасын ерекшеліктерін айтып љтейік. Наќтыраќ айтсаќ, орыс тіліндегі кодировка жѕне онымен кџрес жайлы.

Арине сіз білетін боларсыз, батырмамен басылѓан ѕр символ экранда шыѓатын, символдыњ коды деп аталады. Осындай кодтардыњ аныќмаларымен бірге жиынтыѓы, ќандай код ќандай символѓа сѕйкес келетіндігі, кодировканы ќђрайды. Ѕр кодировканыњ љз атауы бар, мысалы 1251 немесеи КОИ-8.

Ѕр тілде љз символдарын ќолданѓандыќтан, ѕр кодировка тілі ѕр тџрлі болып келеді (Ерекшелік — кейбір батыс европей тілдері). Біраќ мђнымен кодировканыњ ќиыншылыќтары бітпейді. Таѓы бір жаѓдай ѕр тџрлі операциондыќ жџйелердіњ ѕр тџрлі кодировканы колдануында. Мысалы, батыс европей Windows нђсќасын, 1250 кодировкасын, орысшасы – 1251, американдыќ нђсќасы MS-DOS— 437 , ал орыс нђсќауы -866 (ол да ISO-8859-5) ќолданады. Біраќ орысша кодировка коріп тђрѓаныњыздай екеу. Ал егер мђнда таѓы кодировка ќоссаќ , орысша версиясын ќолданѓан операциондыќ жџйені UNIX — КОИ-8 жѕне компьютердіњ орыс нђсќауын Macintosh — MacCyrillic , сонда кодировкасаны тљртке жетеді. Бђл тек ќана бастысы, автордыњ ойында таѓы тљрт љте кењ тарамаѓан кирилликалыќ кодировка болѓан ("негізгі" кодировка ГОСТ, "болгарлыќ", "американдыќ", "югославлыќ" жѕне таѓы басќалары). Сонымен ќосы соњѓы кезде барлыќ ѕлемде бар тілдерді ќолдайтын Unicode кодировкасы пайда болды. Наѓыз кодировканыњ зорлыѓы! ..

Шыѓарылуы ќандай?

Басќа амал жоќ. Кодировкалардыњ біреуі стандарт болып ќалѓан бѕскелестерін шегеріп тастайды деген џміт ќана бар. Ѕзірге ондай рљлге тек 125 џміткер, біраќ UNIX- ќолданатын ќатањ заманныњ интернетшілері КОИ-8 – ді алдыѓа шыѓарып отыр. Алайда ќазіргі Web – параќтардыњ кљбісі 1251 кодировкасымен жазылѓан. .

Бђл жерде таѓы екі жаѓдайды айтып кеткен жљн. Ќазіргі программалар Web- шолушылар барлыќ кодировкаларды ќолдап, оларды танимды. Бђл бірінші жаѓдай. Екінші: Web-сервер (наќтыраќ айтќанда, оныњ администраторы сіз шыѓарып отырѓан параќтардыњ наќты бір кодировкада болѓанын талап етуі мџмкін, мысалы КОИ-8. Мђны љзіњіз Web шыѓармашылыќ жасаѓан кезде ескергеніњіз жљн.

Сіз Dreamweaver де Web-параќ жасаѓан кезде, онда ќолданатын оныњ таќырыбында ерекше тег арќылы <МЕТА> жазылуы мџмкін. Мысалы, былай:

<МЕТА HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251"></HEAD>

Тџсінгеніњіздей бђл бет Windows кодировкасы кљмегімен жасалѓан, яѓни 1251. Алдаѓы уаќытта <МЕТА> тегі бойынша толыѓыраќ осы кітапта сљйлесеміз.

Сонымен ќандай кодировкаларды Dreamweaver ќолдайды? (Арине, орысша кодировкалар). Олардыњ барлыѓы 3.1 – кестесінде айтылып кеткен жѕне ашылатын тізім арќылы беріледі Default Encoding.

Белгіленуі | Аныќтамасы
ISO-8859-5 КОИ8 (KOI-8R) MacCyrillic Windows-1251 | MS-DOS орысша нђсќауы UNIX-жџйесімен ќосылатын орысша нђсќауы ОС Macintosh орысша нђсќауы Windows орыс нђсќаулары, 3.0 нђсќаудан бастап
Western (Latin1) | Бђл орысша нђсќау емес, ол бђл тізімге тек аныќтама џшін ќосылѓан. Батыс европалыќ тілдерді ќолдайды.

3.1 - кесте. Dreamweaver ќолдайтын орыс мѕтінініњ кодировкасы

Ќандай кодировканы тањдау керек? Жауабы ќарапайым.Егер сіз Web-сервердіњ администраторыныњ спецификалыќ талаптарымен байланысты болмасањыз, онда ќорыќпай Windows-1251 нђсќауын тањдањыз. Болмаѓан жаѓдайда сервер талап етіп тђрѓан кодированы тањдањыз. Егер сіз параќтарды аѓылшын тілінде жасасањыз, сіздіњ тањдауыњыз - Western (Latinl).

Енді Fonts ќосымшасына кљшіњіз (3.33 сурет). Бђл ќосымшада сіздіњ бетте шыѓатын мѕтінніњ шрифтін љзгерте аласыз. Font Settings тізімінен сіздіњ Web – параќта ќолданатын шрифттік наборды тањдап алыњыз. Мђнда егер мѕтініњіз орысша болса – Cyrillic тањдањыз, егер аѓылшын болса - Western (Latinl) тањдайсыз.

Шрифттіњ љлшемі жѕне кескіні жайлы автор тек кеес беруі мџмкін. Автор пропорционалдыќ шрифт ретінде (ашылатын тізім Proportional Font) Arial ќолданѓанды жљн кљред, ал моношириндік џшін (Fixed Font) — Lucida Console, ал редактор кодын шыѓару џшін (Code Inspector) - сондай Lucida Console . Шрифттердін љлшемі (ашылатын тізім Size) ѕдетте автор 10 га тењ тармаќтар ќояды (ењ кіші љлшем, Small). Біраќ, таѓы айта кететініміз бђл љз тањдауыњыз.

Енді таѓы бір мањызды жаѓдай. Љкінішке орай, барлыќ программаларда ќателіктер болады, тіпті ењ жаќсыларында да. Dreamweaver де бђл жаѓдайда ерекшелік емес. Ќателіктер џшін ол Web – параќты наќты ашпайды .Оны тџсіну џшін келесіні жасауіміз керек.

Алдымен, Dreamweaver – ді жабыњыз. Ѕрі ќарай Dreamweaver орнатылѓан Проводникте немесе басќа файлдар диспетчерінде папканы ашыњыз. Ѕдетте ол папка Program Files/Macromedia/Dreamweaver MX. Онда сіз Configuration папкасын кљресіз. Онда ішкі Encodings папкасын ашыњыз. Бђл ішкі папкада EncodingMenu.xml файлы орналасќан. Бђл файлда барлыќ Dreamweav –де ќолданѓан кодировкалар кљрсетілген.

3.33 - сурет. Preferences диалогты терезесініњ Fonts ќосымшасы

Тљменде бізді ќызыќтыратын, орысша кодировкаларды атап шыѓатын осы файлдыњ фрагменті берілген

<mm:encoding name="Cyrillic (ISO-8859-5)" charset="iso-8859-5"

fontgroup="Cyrillic" winfontcharset=204 macfontscript=7

filename="iso88595.xml"/>

<mm:encoding name="Cyrillic (KOI8-R)" charset="KOI8-R"

fontgroup="Cyrillic" winfontcharset=204 macfontscript=7

filename="KOI8R.xml"/>

<mm:encoding name="Cyrillic (MacCyrillic)" charset="x-mac-cyrillic"

fontgroup="Cyrillic" winfontcharset=204 macfontscript=7

filename="MacCyrillic.xml"/>

<mm:encoding name="Cyrillic (Windows-1251)" charset="windows-1251"

fontgroup="Cyrillic" winfontcharset=204 macfontscript=7

filename="Win1251.xml"/>

Осы файлдаѓы деректер XML форматында жазылѓан. Dreamweaver бђл форматты тџсінеді жѕне конфигурациялыќ деректерді саќтау џшін жиі ќолданады.

Мѕселен, ќателіктен кейін Dreamweaver кљрсетілімге бірінші болып кездесетін, мѕтінніњ кодировкасы жазылмаѓан беттерін ђсынады. Біздіњ жаѓдайымызда бђл MS-DOS — ISO-8859-5 кодировкасы . Бізге бірінші орынѓа 1251 кодировкасын орналастыру керек. Ол џшін EncodingMenu.xml файлын былай љзгертіњіз:

<mm:encoding name="Cyrillic (Windows-1251)" charset="windows-1251"

fontgroup="Cyrillic" winfontcharset=204 macfontscript=7

filename="Winl251.xml"/>

<mm: encoding name="Cyrillic (ISO-8859-5)" charset="iso-8859-5"

fontgroup="Cyrillic" winfontcharset=204 macfontscript=7

filename="iso88595.xml"/>

<mm: encoding name="Cyrillic (KOI8-R)" charset="KOI8-R"

fontgroup="Cyrillic" winfontcharset=204 macfontscript=7

filename="KOI8R.xml"/>

<mm:encoding name="Cyrillic (MacCyrillic)" charset="x-mac-cyrillic"

fontgroup="Cyrillic" winfontcharset=204 macfontscript=7

filename="MacCyrillic.xml"/>

Содан кейін осы файлды саќтап, жабыњыз. Енді Dreamweaver –ді іске ќосуѓа болады, ол барлыќ Web-беттерді дђрыс ашады.

Интернет – ќосылудыњ жылдамдыѓын баптаймыз.

Жоѓарыда айтылѓандай, ќђжат терезесініњ статус жолында терезеде ашылѓан Web-беттіњ шамамен љлшемі жѕне оныњ жџктелу уаќыты кљрсетілген секция бар. Жѕне де бђл уаќыт Dreamweaver баптауында ќалыпты жаѓдайда 28,8 Кбит/с жылдамдыќ есебімен љлшенеді. Сіз бђл жылдамдыќты љзгерте аласыз.

Баптаулар терезесінде Status Bar ќосымшасын тањдањыз. Экранда статус жолыныњ баптаулар ќосымшасы пайда болады (3.34 – сурет). Онда орналасќан басќару элементтерініњ ішінде бізге керегі Connection Speed ашылатын тізімі, онда секундына килобит ќосылу жылдамдыѓы тањдалады. Сізге керекті жылдамдыќты тањдањыз немесе оны ќолмен енгізіњіз.

3.6 Web-беттерді шолу баѓдарламаларын іске ќосамыз.

Егер сіздіњ компьютеріњізде Web-шолушы бір баѓдарлама орнатылѓан болса, онда баптау аяќталды жѕне сізге ОК батырмасын басуыњызѓа болады. Егер де сізде ондай бірнеше баѓдарлама болса (мысалы, Microsoft Internet Explorer жѕне Netscape Navigator), онда сіз, нѕтижесінде онда ќђрылѓан Web –беттерді ќарап шыѓу џшін, Dreamweaver тізіміне екіншісін ќосќыњыз келетін шыѓар.

Оны ќалай жџзеге асыратынын ќазір тџсіндіреміз.

3.34 - сурет. Preferences диалогтік терезесініњ Status Bar ќосымшасы

Preview in Browser ќосымшасын тањдаймыз. Сіздіњ кљретініњіз 3.35 – суретінде кљрсетілген.

Browsers тізімінде Dreamweaver ќосылу кезінде таба алѓан барлыќ шолушы баѓдарламалар тізімі берілген. Ќазір онда бір ѓана жол бар: iexplore. Біраќ біз бђл жаѓдайды дђрыстаймыз.

Тізімніњ жоѓарысында орналасќан «ќосу» белгісі бар батырмаѓа басыњыз. Экранда шолу баѓдарламасы туралы мѕліметтерді енгізу терезесі пайда болады, 3.36-суреттегідей.

Мђнда бѕрі оњай. Name енгізу жолына Dreamweaver менюі мен тізімінде кљрсетілетін баѓдарламаныњ аты енгізіледі. Бђл атауды "iexplore" деген тџсініксіз сљзге ќараѓанда маѓыналы етіп жасау керек. Application енгізу жолына баѓдарламаныњ жђмыс істеп жатќан файлына ќол жеткізу жолы енгізіледі. Біраќ сіз оны есте саќтамаѓан болсањыз, Browse батырмасын басыњыз, стандартты ашу диалогтік терезесінен керекті файлды тањдап, ашу батырмасын басыњыз.

Ал Primary Browser жѕне Secondary Browser жолаушалары не істейді? Оларѓа толыѓыраќ тоќталу керек.

3.35-сурет. Preferences диалогтік терезесініњ Preview in Browser ќосымшасы

3.36 - сурет. Шолу баѓдарламасыныњ мѕліметтер терезесі

Dreamweaver тізімге енгізілген барлыќ шолу баѓдарламаларыныњ ішінен «жаќсы кљретін» екеуін тањдауѓа мџмкіндік береді. Осы «жаќсы кљретін» баѓдарламаларды сіз бір перне немесе пернелер комбинациясымен шаќыра аласыз. Олардыњ бірі алѓашќы (primary) болады жѕне <F12> (ќалыпты жаѓдайда бђл Internet Explorer) пернесімен шаќырылады, ал екіншісі – екілік (secondary) жѕне оѓан <Ctrl>+<F12> пернелер комбинациясы «жауап береді». Кљріп отырѓаныњыздай, Primary Browser жалаушасы алѓашќы «жаќсы кљретін» баѓдарламаны, ал Secondary Browser — екінші баѓдарламаны белгілейді. Осы жалаушалардыњ бірі ѓана ќосылып тђра алады, яѓни шолу баѓдарламасы «жаќсы кљретін» тек алѓашќысы немесе екіншісі бола алады.

Шолу баѓдарламасы туралы деректерді енгізуді аяќтаѓаннан кейін ОК батырмасын басыњыз. Сіз енгізген баѓдарлама Browsers тізіміне ќосылады.

Кљріп отырѓаныњыздай, Primary Browser жѕне Secondary Browser жалаушалары баптау терезесінде де бар. Бђл сізге шолу баѓдарламасыныњ статусын параметрлер терезесін ашпай-аќ љзгертуге мџмкіндік береді: тізімде ќажетті жолды белгілеп, керекті жалаушаны белгілењіз немесе алып тастањыз. Edit батырмасы шолу баѓдарламасы туралы мѕліметтерді љзгертуге мџмкіндік береді; оны басќанда экранда параметрлер терезесі ашылады. Browsers тізімініњ жоѓарысында орналасќан «минус» тањбасы бар батырма ќажетсіз шолу баѓдарламаларын жоюѓа мџмкіндік береді. Біраќ абай болыњыз: баѓдарлама тізімнен ешќандай ескертусіз бірден жойылады!

3.7 Сыртќы HTML - редакторын ќосу

Dreamweaver бѕрімен жаќсы. Web-беттерін де редактрлеуге болады, HTML - кодына да жету ќиын емес. Біраќ кейбір кезде сыртќы HTML-редактордыњ ќажеттілігі туындайды. Мысалы, Dreamweaver істей алмайтын нѕрсені (ондай да болуы мџмкін) жасау ќажет болса немесе жай ѓана алѓашќы HTML - редакторда жђмыс жасау керек болса. Оны ќалай жасауге болады?

Біріншіден, Пуск менюінен керекті баѓдарламаны тањдап, сонда керекті файлды ашу керек. Егер сіз сыртќы HTML-редакторѓа анда-санда жџгінетін болсањыз, бђл љте ыњѓайлы.

Екіншіден, сыртќы редакторды Dreamweaver ортасына интегралдауѓа болады. Бђл мџмкіндік осындай баѓдарламалармен жиі ќолданатындар џшін тиімді.

Баптау диалогтік терезесініњ File Types/Editors ќосымшасына кљшіњіз (3.37 – сурет). External Code Editor енгізу жолына сыртќы редактор баѓдарламасына љту жолын жѕне файлдыњ атын енгізіњіз. Біраќ Browse батырмасын басып, экранда пайда болѓан Windows-тыњ файлды ашу диалогтік терезесінде керекті файлды тањдау оњайыраќ болады.

Сыртќы HTML-редактор ретінде ќандай баѓдарламаны ќолданѓан жљн? Мђнда бѕрі љз талѓамыњызѓа байланысты. «Шикі» HTML-кодты редактрлеу џшін ењ ќарапайым мѕтіндік редакторды пайдалануѓа болады: блокнот немесе оныњ ѕлдеќайда кџшті аналогы Notepad+ ( http://dimonius.da.ru) немесе бђрыннан белгілі Arachno-philia пайдалануѓа болады. Сондай – аќ, кџрделі визуалдыќ Web – редактормен жђмыс жасауге болады, мысалѓа Microsoft Internet Explorer –мен бірге болатын стандартты FrontPage Express. (кейбір Internet Explorer –ге жат нѕрселерді FrontPage Express- те жасаѓан дђрыс .) Жалпы айтќанда, сізге сыртќы HTML-редакторын талѓамыњызѓа сай тањдауѓа ешкім шектеу ќоя алмайды.

3.37 - сурет. Preferences диалогтік терезесініњ File Types / Editors ќосымшасы

Dreamweaver баптауларын аяќтаѓаннан кейін, жасалѓан орнатылымдарды саќтау џшін ОК батырмасын басыњыз. Ѕрине, осы баѓдарламамен берілетін баптаудыњ мџмкіндіктері љте кљп, біраќ біз олар туралы айтпаймыз. Барлыќ керекті мѕліметтерді сіз интерактивті аныќтамадан ала аласыз. Біз Dreamweaver – мен жђмыс жасау кезінде ќиынѓа соѓатын ќажетті баптаулар туралы аттыќ.