Асосҳои Web-дизайн


Мундариҷа.
Асосҳои Web-дизайн1.     Муқаддима
2.     Барномаи Macromedia Dreamweaver
3.     Кор бо матн дар Dreamweaver
4.      Кор бо гиперҳаволаҳо
4.1    Сана
4.2    Кор бо тасвирҳо
4.3    Овозҳо ва видеоҳо (Мултимедиа)
4.4    Ҷадвалхо
5.       Хулоса
 
Муқаддима
Бо тараққии Интернет дар тамоми ҷаҳон талабот ба касби WEB дизайнер пайдо шудааст. WEB дизайнер (ороишгар) – шахси дорои завқи бадеӣ, донандаи технологияи Интернет буда, WEB – саҳифаҳо таҳия мекунад ва онҳоро дар WEB сайт муттаҳид месозад. Барои WEB дизайнер фақат донистани технологияи интернет кофӣ нест. Вай бояд дорои завқи баланди бадеӣ ва соҳиби маълумот бошад ва ҳамкори ӯ дар соҳаи полиграфия низ дорои чунин сифатҳо буданаш лозим. Фақат дар ҳамин сурат натиҷаи босифат гирифтан мумкин аст. Васоити барномавии муосир имкон медиҳад, ки ба ҳар гуна нозукиҳо эътибор надиҳад. Дар шумо парвози эҷодӣ пайдо шуду худро дар соҳаи WEB дизайн санҷидан мехоҳед, лекин  HTML, CSS ва Java Script чист? Намедонед? Махсус барои шумо барномаҳои визуалии WEB муҳаррир таҳия шудааст, ки ба нозукиҳои технологияи интернет ва стандартҳо сарфаҳм нарафта дар Microsoft Word WEB – сайтҳо сохта метавонед. Dreamweaver MX, ки гуна (версия)-и охирини WEB редактори ширкати Macromedia мебошад. 
Ин барномаи тавоноест, ки стандартҳои муосири интернетро доро буда, вазифаҳои мураккабро сабук мекунад. 
Интернет – ин маҷмӯи шабакаҳои компютерии бо ҳам алоқамандест, ки дар асоси як стандарт кор мекунанд. 
Web – офаранда саҳифаро бо тамоми унсурҳои ба он ҷойшудаи зарурии графикию овозӣ ва видеотасвирҳо пурра ташаккул дода, ворид мекунад.
Лекин Web – саҳифаи дигар кас тартибдода чӣ тавр ба мизи кори Шумо оварда мешавад? Бо воситаи Интернет. Ҳамаи барномаҳои барои Интернет ба ду гурӯҳ ҷудо мешаванд: муштариён ва серверҳо. Барномаҳои серверҳо барои дастрас кардани барномаи муштарӣ имконият доранд. Агар ягон файл лозим шавад, муштарӣ ба сервер дархост мефиристонад. Сервер дархостро кор карда, ҷавоб медиҳад ё хатогиҳои дастнорасии маълумотро нишон медиҳад.
Ду намуди Web – муҳаррирвизуалӣ ва ғайривизуалӣ вуҷуд доранд. Чӣ хеле, ки мегӯянд, WYSIWYG ва но – WYSIWYG - муҳаррирҳо мавҷуданд. (WYSIWYG ё ин ки What You See Is What You Get - чиро ки мебинӣ, ҳамонро мегирӣ). 
Редактори ғайривизуалӣ бо коди «хоми» HTML кор мекунад. Онҳо имконияти тез ворид кардани тегҳо, равшансозии синтаксисӣ, тафтиши дурустии коду ҳаволаи ҳосилшударо имконият медиҳад. Ба он аз ҷумла Arachnophilia тааллуқ дорад. Web – муҳаррирҳои ғайривизуалиро HTML - муҳаррир меноманд.
Муҳаррири визуалӣ имконияти бо худи Web – саҳифа кор карданро медиҳад. Барои чунин истифодабарандагон, ки дониши хуби HTML ва воситаҳои визуалии муҳаррирро якҷоя карданианд муҳаррирҳои гибридӣ вуҷуд дорад. Онҳо воситаҳои тавонои муҳарририи визуалӣ дошта, якбора ба коди HTML роҳ меёбанд. Ба қатори ин гуна редакторҳо Macromedia Dreamweaver дохил мешавад.
    Дар фанни Web-дизайн мо бояд чи гунна сохтани веб сахифахоро омузем. Мухимтараш кор бо тегхои асоси, ки бе онхо мо наметавонем веб сахифахоро созем. Кори асосии мо бо барномаи Macromedia Dream-weaver мебошад. Мо дар ин дарс забони HTML-ро меомузем.Забонхои сохтани веб сахифахо бисер мебошад.
Ин   web-сахифа барои гирифтани маълумот оиди шахрхои чахон сохта шуда, хамаруза хабархои наву тоза дохил мешавад. Шумо дар ин web-сахифа метавонед суратхои шахрхоро тамошо кунед, маълумоти муфассал оиди он шахр ва  нуктаи чойгиршавиашро фахмед. Ин web-сахифа аз тарафи доничуи бахши 2-и гурухи 40.01.02тб Ниёзов Фарходчон сохта шудааст. Умедворам, ки истифодабарандагони ин web-сахифа аз ин чо маълумоти худро гирифта конеъманд мегарданд. Web-сахифаи мазкур барои шахсоне, ки аз шахрхои тамоми чахон шиносои пайдо кардан мехоханд кумаки беназир мерасонад. Дар оянда ният дорам на танхо шахрхо балки тамоми мамлакатхои чахонро дар web-сахифа ворид созам. Ташаккур барои истифодабари аз web-сахифаи мо!!!
  Акнун ба кор шурӯъ мекунем. Чи тавр ба барномаи Macromedia Dreamweaver бояд дохил шуд.

  Хангоми ба   кор шурӯъ намудани  Macromedia Dreamweaver чунин оина пйдо мешавад.
                           
Баъд  Html-ро интихоб менамоем. Саҳифаи аввали худро месозем.
                   
Оинаи Macromedia Dreamweaver
Мавзӯъи ман дар бораи Шаҳрхои чахон мебошад ва чи тавр сохта 
шудааст дида мебароем. Ин сайти тайёри алакай сохта шуда.
            
Қадами Аввал- Кор бо матн
ТегҳоАмалҳои иҷрошавнда
<html>… </html> 
<head>…</head> 
<title>…</title>Гузоштани сарлавҳаи саҳифа
<p>…</p>Гузоштани сарсатр
<p align=”Left”>…</p> форматкунонӣ аз тарафи рост
<p align=”CEnter”>…</p> форматкунонӣ аз марказ
<p align=”Right”>…</p> форматкунонӣ аз тарафи рост
<p align=”Justify”>…</p> форматкунонӣ аз ҳар ду тараф
<br>Гузаштан ба сатри нав
&nbsp;Гузоштани символи ҷои холигӣ (пробел)
<h1>…</h1>Гузоштани сарлавҳа
<pre>…</pre>Форматкунонии тахминӣ
<!--Гузоштани эзоҳ
<b>…</b>Шрифтро ғафс кардан
<I>…</I>Шрифтро курсив кардан
<U>…</U>Ба зери шрифт хат кашидан
<strike>… </strike>Аз мобайни шрифт хат кашидан 
<sup>… </sup>Навиштани индекси болоӣ
<sub>…</sub>Навиштани индекси поёнӣ
<font face=”Arial”>Интихоби стили шрифт
<basefont size = “?”>Тағйир додани андозаи шрифти ҳамаи матни Web - саҳифа. Ба ҷои аломати “?” аз 1 то 7 меояд.
<font size=”?”>Тағйир додани андозаи порчаи матни Web – саҳифа. Ба ҷои аломати “?” аз 1 то 7 меояд.
<body Text=”?”>Интихоби ранги ҳамаи матни Web – саҳифа. Ба ҷои аломати ? метавонед коди рангро гузоред.*
<font color=”?”>Тағйир додани ранги порчаи матни Web – саҳифа. Ба ҷои аломати ? метавонед коди рангро гузоред.*
<body bgcolor=”?”>Тағйир додани манзари (фон) Web – саҳифа. Ба ҷои аломати ? метавонед коди рангро гузоред.*
<body Leftmargin= ”?”>Гузоштани андозаи майдони саҳифа аз тарафи чап. Ба ҷои аломати ? андоза гузошта мешавад. Инчунин шумо метавонед аз тарафи рост, боло ва поён гузоред. (Rightmargin, topmargin, bottommargin)
<TT>…</TT>Шрифти моновасеъгӣ (моноширинный) истифода бурдан
<blockquote>… </blockquote>Дар саҳифа иқтибос (цитата) гузоштан
<LI>…</LI>Пеш аз теги <OL>…</OL> ояд, рўйхати барақамтартиб-додашуда таҳия месозад
Пеш аз теги <UL>…</UL> ояд, рўйхати нишонагӣ таҳия месозад.
<img SRC>=”?”Ба саҳифа гузоштани тасвир. Ба ҷои аломати ? метавонед номи файли тасвирро гузоред.
<body background> = “?”Гузоштани тасвир ба манзари (фон) саҳифа. Ба ҷои аломати ? метавонед номи файли тасвирро гузоред.
*Дар поён якчанд кодҳои ранг оварда шудааст
Номи рангКоди он
Осмонранг (голубой)#00FFFF
Сиёҳ (чёрный)#000000
Кабуд (синий)#0000FF
Пуштӣ (розовый)#FF00FF
Сурх (красный)#FF0000
Сабз (зеленый)#00FF00
Сабзи баланд (темно-зеленый)#008000
Сафед (белый)#FFFFFF
Зард (желтый)#FFFF00
 
Кор бо матн дар Macromedia Dreamweaver
<p align="center" class="стиль3">Дар фанни Web-дизайн мо бояд чи гунна сохтани веб  сахифахоро омузем. Мухимтараш кор бо тегхои асоси, ки бе онхо мо наметавонем  веб сахифахоро созем. Кори асосии мо бо барномаи Macromedia Dreamwiever  мебошад. Мо дар ин дарс забони HTML-ро меомузем.Забонхои сохтани веб сахифахо  бисер мебошад.<br />
        Ин  web-сахифа барои гирифтани маълумот оиди шахрхои чахон сохта шуда, хамаруза хабархои наву тоза дохил  мешавад. Шумо дар ин web-сахифа метавонед суратхои шахрхоро тамошо кунед,  маълумоти муфассал оиди он шахр ва  нуктаи   чойгиршавиашро фахмед. Ин web-сахифа аз тарафи доничуи бахши 2-и гурухи  40.01.02тб Ниёзов Фарходчон сохта шудааст. Умедворам, ки истифодабарандагони ин   web-сахифа аз ин чо маълумоти худро гирифта конеъманд мегарданд. Web-сахифаи  мазкур барои шахсоне, ки аз шахрхои тамоми чахон шиносои пайдо кардан мехоханд   кумаки беназир мерасонад. Дар оянда ният дорам на танхо шахрхо балки тамоми  мамлакатхои чахонро дар web-сахифа ворид созам. Ташаккур барои истифодабари  аз web-сахифаи  мо!!!</p>
      <p align="right" class="стиль3">Ниёзов Ф. </p>
Натинҷаи кор.
          
Дуюм намуди кор бо матн бо истифодабарии ҷадвал
<td><div align="center">Мамлакат</div></td>
        <td><div align="center">Германия</div></td>
      </tr>
      <tr>
        <td><div align="center">Пойтахт</div></td>
        <td><div align="center">Берлин</div></td>
      </tr>
      <tr>
        <td><div align="center">Ахоли</div></td>
        <td><div align="center">3431421 нафар(2008) </div></td>
      </tr>
      <tr>
        <td><div align="center">Масохат</div></td>
        <td><div align="center">841,85 км2</div></td>
      </tr>
      <tr>
        <td><div align="center">Таксимоти дохили </div></td>
        <td> <div align="center">12 нохия </div></td>
      </tr>
      <tr>
        <td><div align="center">Зиччии ахоли </div></td>
         <td><div align="center">3848наф/км2</div></td>
      </tr>
      <tr>
        <td><div align="center">Баланди аз сатхи бахр </div></td>
        <td><div align="center">34-130 м </div></td>
      </tr>
      <tr>
        <td><div align="center">Коди телефони </div></td>
        <td><div align="center">+4930</div></td>
      </tr>
      <tr>
        <td><div align="center">Индекси почтави </div></td>
        <td><div align="center">10001-14199</div></td>
      </tr>
    </table>
      <p>Берлин пойтахти Германия буда, шахри бисёр ахоли ба хисоб  меравад. Баъди Лондон, Берлин аз хисоби бисёр ахолиаш дар Евро-Азия дар чойи  дуюм меистад. Аз хисоби масохаташ бошад дар чойи панчум карор дорад. Берлин яке  аз 16-заминхое, ки ба состави Чумхурии Федеративии Германия дохил мешавад. Шахр  дар сохили дарёи Шпрее чойгир шудааст Ин шахри зеботарин дар чахон ба хисоб меравад. Имрузхо Берлин яке аз шахрхои фархангию-илми ба хисоб меравад.Берлин дар баландии 70 километр аз сархади Полша чой  гирифтааст. Он дорои хукуки федерали ва бапурраги дар дохили замини федеративии  Бранденбур чой дорад. Чойи таърихии Берлин дар наздикии  Шпрее мавчуд аст.<br />
Обу хаво.<br />
Температураи миёнасолии шахр ба +9,2 °C. баробар буда аз   хама мохи гармтаринаш -ин июн,июл ва август мебошад. Аз хама хунуктаринаш  январ ва феврал мебошад ки кимати миёнаи  харорат ба -0,5 до  +1,8&nbsp;°C баробар аст.</p>
      <p>&nbsp;</p>
      <table width="168" border="3" align="right">
        <tr>
          <td><div align="center"><a href="../Shahrhoi Jahon.html" class="стиль1">Сахифаи аввал</a> </div></td>
        </tr>
                      
 
Матни Душанбе
<h2>Шахри ман Душанбе </h2>
      <p class="стиль1">Шахри поймони ман Душанбе,</p>
      <p class="стиль1">Фахри Даврони ман Душанбе</p>
      <p class="стиль1">Пояи вахдати точикон.</p>
      <p class="стиль1">Дар дилу чони ман Душанбе.</p>
      <p class="стиль1">Нагардам сер аз руйи Душанбе,</p>
      <p class="стиль1">Нигохам меравад суйи Душанбе.</p>
      <p class="стиль1">Ба максад мерасад оне, ки нушид,</p>
      <p class="стиль1">Гулоби синаи чуйи Душанбе.</p>
      <p>Масохати шахр 124 км кв аст ва дар он 193 корхонахои саноати, 132 корхонахои саноати, 40 бонкхои шахсию давлати, 8 мехионхона, 35 нуктахои табобати(беморхона), 21 масчид, 121 мактаби тахсилоти умуми, 14 омузишгох, 12 коллеч, 20 донишгох, 7 осорхона ва 7 намоишсаро дорад. </p>
      <p>&nbsp;</p>
      <p align="right"><a href="../Shahrhoi Jahon.html">Сахифаи аввал </a></p>
      <table width="307" height="142" border="1">
         <tr>
          <td width="297"><p>
            <embed src="ulhoi_ushanbe_ahfirat_amro_ulhoi_ushanbe_ahfirat_a~.avi" width="297" height="79"></embed>
          </p>
            <p align="center">Гулхои Душанбе </p></td>
        </tr>
      </table>
       <p>&nbsp;</p>
      <p>&nbsp;</p>
          
          Панели Propaties
          
Кор бо гипераҳаволаҳо
Мақсад ва мундариҷаи мухтасари мавзўъ: Таҳияи гипераҳаволаи муқаррарӣ. Таҳияи гипераҳаволаи почтавӣ. Хосияти умумии Web – саҳифаҳо. Гузориш ва хондани тафсирҳо. Гузориши сана.
1. Web – саҳифаи 3.htm – ро кушоед. Ба он ду гиперҳаволаро ҷойгир менамоем. Барои ҷойгир намудани гиперҳавола боз ду Web – саҳифа бояд таҳия намуд. Як Web – саҳифа дар бораи шавқу рағбати худ таҳия намоед ва онро ҳамчун 3.1.htm маҳфуз кунед. Саҳифаи дигар дар бораи нақшаҳои худ таҳия намоед ва онро ҳамчун 3.2.htm маҳфуз кунед. Акнун дар Web – саҳифаи 3.htm калимаи “Шавқу рағбати ман”-ро ҷудо карда ба таҳриргари хосият аҳамият диҳед. Майдони калони воридкунии Интернет – адрес барои гиперҳавола (расми 5.1) намоён мешавад.
 Расми 5.1. Майдони вориди Интернет – адрес дар таҳриргари хосиятҳо
                                           
                                                   
 5.2 Тугмачаи BRowse for file-ро пахш намоед ва аз тирезаи муколамотии Select File файли 3.1.htm-ро интихоб намуда, тугмачаи Ok-ро пахш намоед, инчунин аз пункти Make Link менюи Modify, ё менюи контекстӣ, ё комбинатсияи <Ctrl>+<L>-ро истифода бурда метавонед. Баъди гузоштани гиперҳавола калимаи “Шавқу рағбати ман” ранги худро дигар карда кабуд ва зерхатдор мешавад. Онро дар браузер сар диҳед. 
 
                                         
Гипперҳаволаи Конибодом
                       
                                           
 
                               
Хангоми гузоштани гипперҳавола дар зери он хатча мекашад.
Гузоштани сана. Дар Web – дизайн санаи охирини дигаркунии Web-саҳифа ранги нағз ба шумор меравад. Санаро гузоштан хеле осон аст. Барои ин ба саҳифаи Common панели объектҳо гузашта, тугмачаи date-ро (расми 3.46) пахш мекунем. Ҳамчунин метавонед пункти date менюи Insert-ро интихоб кунед. Пас аз ин дар экран тирезаи муколамотии Insert Date, ки дар расми 3.47 нишон дода шудааст, менамояд.
Расми 5.12 Тугмачаи date панели объектҳо
Рӯйхати кушодашавандаи Format барои Шумо бефоида аст, зеро номи рӯзҳои ҳафта бо забони англисӣ аст. Бинобар ин пункти интихобшударо монед [No Day].
Расми 5.13. Тирезаи муколамотии Insert date
Дар рӯйхати кушодашавандаи Date Format формати санаро интихоб кунед. Аз ду формат (шакл) якеро интихоб кунед «сана, моҳ, сол», ки он ҷо ҳаст.
Рӯйхати кушодашавандаи Time Format формати вақтро медиҳад. Агар шумо вақтро дар формати 24 – соата акс мекарда бошед, пункти 22:18 –ро гиред, агар дар формати 12 – соата гирфтанӣ бошед, пункти 10:18 РМ ё пункти [No Time] -ро ҳангоми лозим набудани вақт гузоред.
Гузоштани сана дар барномаи Macromedia Dreamweaver
<p><hr size=2 color "broun""width"100"title>
<p align="center" class="стиль5">Web-caхифа  аз чониби донишчуйи курси 2-юми гурухи 40.01.02тб Ниёзов Фарходчон сохта  шудааст. </p>
<p align="center" class="стиль5">Имруз: 4  Октябрь, 2011 </p>
<hr size=5 color "broun""width"100"title>&nbsp;</p>
</body>
</html>
Кор бо тасвирҳо дар Dreamweaver
Мақсад ва мундариҷаи мухтасари мавзўъ: Ду шакли тасвири графикӣ. Гузориши тасвири графикӣ. Тасвирҳои фаъол. Графикаи Macromedia Flash. Графикаи Macromedia Shockwave. Тасвири гиперҳаволаҳо
1. Web – саҳифаи Шаҳрҳои ҷаҳон – ро кушоед. Расми нишону байрақи Тоҷикистонро мегузорем. Расмро баъди сархати якум ҷойгир мекунем. Аз гузориши  Common–и панели объектҳо тугмачаи Image-ро пахш кунед. Ҳамчунин метавонед аз пункти Image менюи Insert истифода баред ё комбинатсияи <Ctrl>+<Shift>+<!> - ро пахш кунед.
Расми 6.5. Тугмачаи Image панели объектҳо
2. Аз тирезаи муколамотии Select Image Source файли gerb.jpg-ро интихоб кунед. Саҳифаро маҳфуз карда онро дар браузер сар диҳед. Натиҷаи гузориши расм дар расми 6.6. оварда шудааст.
Расми 6.6. Натиҷаи гузориши расм
3. Ба квадратҳои на он қадар калони сиёҳи дар тарафи  росту поёни расм нигаред. Ин маркерҳои ивази андоза мебошад. Шумо бо мушак ҳар кадом маркерро «гирифта» ба ҷои нав оварда,  андозаи вертикалию горизонталии тасвирро дигар карда метавонед. Агар хоҳед, ки ҳар ду андоза тағйир ёбад, маркери дар кунҷи поёнии ростбударо бо воситаи мушак гирифта, тугмачаи Shift –ро пахш кунед. Ҳамчунин метавонед бо воситаи ҳошияи воридкунии W ва H аз панели хосияти тасвир (расми 6.7.) васеъгию баландии тасвирро дастӣ дуруст кунед. 
      
4. Ҳошияи воридоти VSpace ва HSpace аз кунҷи тасвир то матни бурриш мутобиқан масофаи вертикалӣ ва горизонталиро супориш медиҳад. Бетағйирот ҳар ду ба нул баробаранд.
Расми 6.7. Барои саҳеҳ гузоштани васеъгӣ ва баландии тасвир
      
Кор бо овозҳо, филмҳо дар Dreamweaver
Мақсад ва мундариҷаи мухтасари мавзўъ: Тасвирҳои замина (фоновый). Мултимедиа. Дастгирии маълумотҳои мултимедиа. Модулҳои тавсиа (расширения). Унсурҳои ActiveX
1. Web – саҳифаи 3.htm-ро кушоед. Ба Web – саҳифа тасвири замина мегузорем. Тасвири замина Web – саҳифаро ҷондор мекунад. Вале ба ҷои тасвири замина тасвири бисёр равшан ё рангорангро истифода набаред, чунки матн хонда намешавад. Барои ин ба экран тирезаи муколамотии Page Properties-ро даъват карда, дар ҳошияи воридотии Background Image номи файли тасвирро ҷой кунед ё тугмачаи BRowse-ро пахш карда дар тирезаи муколамотӣ файли заруриро гиред. Пас тугмачаи OK-ро пахш кунед.
                     
 
Расми 7.8. Web – саҳифа бо тасвири замина
2. Акнун ба Web саҳифа модули тавсиа мегузорем. Барои ин тугмачаи Plugin (расми 7.2) хизмат мекунад, ки он дар гузориши Media панели объектҳо ҷойгир аст. Баъди он дар экран тирезаи муколамотии Select File пайдо мешавад. Аудиофайли “Avseq23.dat”-ро аз   рӯйхати файлҳо ёфта тугмачаи Ok-ро пахш кунед.
Расми 7.9. Тугмачаи Plugin панели объектҳо
3. Баъди он дар тиреза нишонаи модули тавсиа пайдо мешавад. Андозаи онро дигар кунед. Акнун ба таҳриргари хосият диққат медиҳем. (расми 7.10)
4. Шумо аллакай бо ҳошияи воридкунии W ва H, H Space, VSpace ва Border ва рӯйхати кушодашавандаи Align шинос ҳастед. Ҳамчунин тугмачаи Play/Stop ба шумо шинос аст. Агар баландию васеъгиро дастӣ дуруст кардан хоҳед, метавонед аз инҳо истифода баред.
Расми 7.10. Таҳриргари хосият ҳангоми модули тавсиаи ҷудокардашуда
5. Дар ҳошияи SRC номи файли маълумотҳо ҷой карда мешавад. Дар тарафи рост тугмачаи сурати папкадор мавҷуд аст. Онро пахш кунед, дар экран тирезаи муколамотии кушодани маълумотҳо мебарояд, файли лозимаро гирифта метавонед. Ҳамчунин метавонед пункти Source File - и менюи матниро истифода баред.
6. Ҳошияи воридотии Pig URL барои супориши Интерент – суроға, ки комплекси дистрибути модули тавсиаро дорад, истифода бурда мешавад. 
7. Тугмачаи Parametres барои супориши параметҳои алоҳидаи модули тавсиа хизмат мекунад. Бо пахши тугмаи Parametres шумо пункти ҳамноми менюи матнро истифода мебаред. 
Расми 7.11. Тирезаи муколамотии Parametres
8. Саҳифаро маҳфуз кунед ва онро дар браузер сар диҳед. Натиҷаи он дар расми 7.12. оварда шудааст.
 
Расми 7.12. Натиҷаи гузоштани мусиқӣ дар Web - саҳифа
 
Гузоштани видео ҳам чунин мебошад 
Натиҷаи плагин.(видеофайл)
Ҷадвалҳо дар Dreamweaver
Ҷадвали содда. Таҳияи ҷадвал. Кор бо ҷадвал. Ташаккули ҷадвал. Шаклдиҳии ҷадвал. Параметрҳои хонача (ячейка). Параметрҳои сатр. Параметрҳои ҷадвал. Шаклҳои пешакӣ муқарраршудаи ҷадвал. Навъҷудокунии ҷадвал. Омезиши ячейкаҳои ҷадвал. Матн дар чорчўба. Матн дар чаҳорчўбаи графикӣ. Матн бо фосила. Ҷадвалҳои мураккаб
   Барои гузориши ҷадвал дар Macromedia Dreamweaver аз тугмачаи Insert Table гузориши Common панели объектҳо истифода баред. Ҳамчунин метавонед пункти Table менюи Insert –ро интихоб кунед ё тугмачаи <Ctrl>+<Alt>+<T> -ро пахш намоед. Дар ҳар ду ҳолат ҳам дар экран тирезаи Insert Table пайдо мешавад.
Расми 8.1. Тугмачаи Insert Table панели объектҳо
Расми 8.2. Тирезаи муколамотии Insert Table
Дар ҳошияи воридии Rows ва Columns шумораи сатру сутунчаҳои лозимӣ ворид карда мешавад. Дар ҳошияи воридии Width васеъгии ҷадвал дода мешавад. Дар рӯйхати кушодашавандаи дар тарафи рости ҳошия ҷойгиршуда пункти Percent ё Pixels-ро интихоб мекунед. Дар ҳошияи воридкунии border ғафсии сарҳади ҷадвал дар пикселҳо дода мешавад. Ҳошияи Cell Spacing барои додани масофаи сарҳади байни хоначаҳои алоҳида хизмат мекунад. Тағйирёбандаҳои ҳошияҳои воридии Cell Padding ва Cell Spacing –ро тағйир дода, байни масофаи хоначаҳоро зиёд карда,
 хоначаҳои нимхолӣ ҳосил кардан мумкин. Инро дар ҷадвалҳои ороишӣ истифода бурдан мумкин аст. 
Расми 8.3. Ҷадвали аввалин бо маълумотхояш.
Кор бо ҷадвал. Андозаи тирезаи ҳуҷҷати Dreamweaver -ро, ки дар он ҷадвал ҷой дорад, тағйир диҳед. Васеъгии ҷадвал ҳам тағйир меёбад, зеро супориш нисбат ба васеъгии волидайн, яъне тирезаи ҳуҷҷат дода шудааст. Агар васеъгии қайдшудаи ҷадвалро дар пикселҳо супориш медодем, вай тағйир намеёфт. Ҳамчунин ҳангоми ба ячейка ворид кардани матн васеъгию баландии он тағйир меёбад. Ин гуна амалҳоро Dreamweaver ва   барномаи Web – офаранда иҷро мекунанд. Нишонро ба сарҳади вертикалии байни ду хонача гузоред. Вай шакли тири дусамтаро мегирад. Бо воситаи мушак сарҳадро ба шакли горизонталӣ ҳам монда метавонед. Як хонача калон, дигараш хурдтар мешавад. Дар ин ҳолат ба онҳо васеъгии фиктивӣ доранд. Web - офаранда васеъгии ин гуна ячейкаҳоро фақат вақти нарасидани ҷой барои матн дигар мекунад. Бо ҳамин тариқ сарҳадҳои горизонталии байни хоначаро иҷро карда метавонед. Дар ин ҳолат ба сатрҳо, ки сарҳадҳои онҳоро меғеҷонед, тағйирёбандаи баландиашро соҳиб мегардад. 
Бо ёрии тағйирдиҳандаҳои гурӯҳи Insert шакли объектеро, ки ба ҷадвал гузоштан мехоҳед, медиҳед. Тағйирдиҳандаи Rows гузоштани сатрро, тағйирдиҳандаи Columns – сутунчаҳоро имкон медиҳад
Расми 8.5. Тирезаи муколамотии Insert Rows or Columns
Тағйирдиҳандаи Above the selection дар болои сатри ҷорӣ сатрҳои нав мегузорад, тағйирдиҳандаи Below The Selection бошад, дар поёни он сатр мегузорад.
Барои тақсими хоначаҳои ҷадвал тугмачаи тақсими хоначаро, ки дар кунҷи поёнии самти чапи муҳаррири хосият мавҷуд аст, пахш кунед. (расми 8.6.)
Шумо низ метавонед пункти split cell-ро дар зерменюи Table менюи Modify ё менюи матнӣ ва ё комбинатсияи <Ctrl>+<Shift> +<s>-ро пахш кунед.
Расми 8.6. Тугмачаи тақсимкунандаи хонача дар муҳаррири 
хосиятҳо
 
 
Расми 8.7. Тирезаи муколамотии Split Cell. 
Гурӯҳи тағйирдиҳандаҳои Split Cell чӣ тавр тақсим шудани хоначаро супориш медиҳад. Тағйирдиҳандаи Rows тақсими сатри ҷориро ба сатрҳо, ки миқдорашро дар ҳошияи numbers of Rows нишон додаед, супориш медиҳад. Баъди пахши Ok хоначаи ҷорӣ тақсим мешавад. Барои бартараф кардани сутуни ҷорӣ ё пункти Delete Row аз зерменюи Table менюи Modify ё комбинатсияи <Ctrl>+<Shift>+<-> истифода баред. 
Ташаккули ҷадвалҳо. Бо ёрии тегҳо ягон унсури саҳифа бунёд карда мешавад. Вай дар чор этап сохта мешавад. Дар этапи аввал худи ҷадвалро бино карда параметрҳои он дода мешавад. (васеъгӣ, ғафсӣ, сарҳад). Ҷадвал бо воситаи теги ҷуфти <Table>, ки атрибутҳои зиёд дорад, аз онҳо  Width, ки васеъгии ҷадвал ва Height, ки баландии онро супориш медиҳад, сохта мешавад. Дар этапи дуюм дар дохили ҷадвал навиштаҷоти сатри ҷадвал дода мешавад. Ҷадвал аз сатрҳои зиёд иборат аст. Ҳар як сатр параметри худро дорад. Сатри ҷадвал бо ёрии теги ҷуфти <tr> таҳия мешавад. Баландии сатр бо атрибути Height дода мешавад. Теги <tr> фақат дар дохили теги <Table> пайдо мешавад. Дар этапи сеюм дар дохили ҳар сатр навиштаҷоти хонача дода мешавад. Ҳар ячейка параметр дошта метавонад, масалан параметри васеъгӣ. Ҳар як сатри ҷадвал аз якчанд хоначаҳо иборат аст. Хоначаи ҷадвал бо воситаи теги ҷуфти <td> таҳия мешавад. Васеъгии хонача бо атрибути Width ба вуҷуд оварда мешавад. Теги <td> фақат дар дохили теги <tr> намоён мешавад. Этапи чорум – ба ячейка ҷой кардани дороии муфид. Дар хотир доред, ки ин дороӣ фақат дар дохили ячейкаҳои ҷадвали (теги <td>) мавҷуд буда,   на дар сатри (<tr>) ё ки дар худи ҷадвал (<Table>). Агар ин қоидаро вайрон кунед html –кодро Web –офаранда нодуруст акс мекунад. 
Шаклдиҳии  ҷадвал. Ҷудо кардани унсурҳои ҷадвал. Акнун воситаҳои html –ро барои шаклдиҳии ҷадвал меомӯзем. Ин ҷо мефаҳмем, ки дар тирезаи Dreamweaver  чӣ тавр унсури зарурии ҷадвал ҷудо карда мешавад. Саҳифаи таҳиякардаро  кушода, нишони матниро  ба яке аз хоначаҳо гузошта, сексияи тегҳоро мебинем. Дар он ҷо <body><Table><tr><td><p> - ро мебинем. Теги <p> шояд набошад. Ба теги <body> аҳамият намедиҳем. Ба тегҳое, ки мо нав шинос шудем, нигоҳ мекунем. Бо мушак теги <td> -ро пахш кунед. Ячейкае, ки дар он нишони матнӣ ҳаст, бо чорчӯбаи сиёҳи ғафс ҷудо карда мешавад. Акнун  параметри ин ячейкаро тағйир дода метавонед. Теги <td> -ро дар сексияи тегҳо пахш кунед. Дар ин ҳолат сатри бутун, ки ячейка дар дохили он аст, ҷудо карда мешавад. Агар теги <Table> -ро пахш кунед, тамоми ҷадвал ҷудо мешавад. Воситаҳои дигари ҷудокунии ҷадвал ва сутунча вуҷуд дорад. Барои сатрро ҷудо кардан нишони мушакро   аниқ ба сарҳади чапи худи  хоначаи (ячейка) чап  ҷойгир кардан лозим.  Нишон дар ин ҳолат намуди тирчаи сиёҳи ба тарафи рост равонаро дорад. Агар тугмачаи чапи мушакро пахш намоед, сатри муқобили нишонистода ҷудо мешавад. Агар тугмачаи чапи мушакро зер карда истода ба таври вертикалӣ ҳаракат кунонед, якбора якчанд сатрро ҷудо мекунед. Сутун ё якчанд сутунро дар он вақт ҷудо карда метавонед, ки агар нишони мушакро дар тарафи болоии сатри болои ҷадвал гузошта бошед. Он шакли тирчаи сиёҳи ба поён равонаро мегирад. Ҳамчунин Шумо якбора якчанд ячейкаро ҷойгир карда метавонед. Барои ин бо мушак ба хонача зер кунед, ҷудошавӣ ба вуҷуд меояд ва тугмачаи чапро сар надода, онро то ҷудо шудани ҳамаи хоначаҳо гирифта гузаред. Ҷадвалро ҷудо кардан мураккаб аст. Нишонро (курсор) ба сарҳади берунии ҷадвал бурда, онро камтар ба «берун» ҷунбонед. Дар ин вақт нишон намуди тирчаи чоргӯшаро мегирад. Агар баъди ин мушакро зер кунед, ҷадвал пурра ҷудо мешавад. Таҳиягарони Dreamweaver боз як роҳи бо осонӣ ҷудо кардани ҷадвалро нишон додаанд. Нишони матнро ба ягон хоначаи ҷадвал гузоред, пункти  Select Table менюи Modify, ё менюи матнӣ, ё комбинатсияи клавишаи <Ctrl>+<A> -ро пахш кунед.
Параметрҳои хонача (ячейка)Барои ба параметри хонача расидан онро ҷудо кардан шарт нест. Ба вай нишони матнӣ ва муҳаррири хосиятҳо гузоред, ҳамон соат супориши параметрҳоро пешниҳод мекунад.
 
 
 
Расми 8.8. Намуди дар муҳаррири хосият ҷудо кардани хоначаи ҷадвал
 
Унсурҳои идоракунандаи дар қисми болоии муҳаррири хосият буда имкон медиҳад, ки параметри матн дода шавад. Ба қисми поёни муҳаррири хосиятҳо диққат медиҳем.
Рӯӣхати кушодашавандаи Horz дороии хоначаро ба таври горизонталӣ медиҳад. Дар ин ҷо чор пункт дастрас аст:
Default – вақте ки дигар ҳолатҳо дода нашудаанд ин пункт одатан росткуниро дар канори чап, дар баъзе ҳолатҳо дар марказ медиҳад.
Left – росткунии канори чап
Centre – дар марказ
Right -  дар канори чап
Рӯйхати Vert дороии хоначаро ба таври вертикалӣ медиҳад.
Дар ин ҷо панҷ пункт дастрас аст:
Default – росткунӣ, одатан дар марказ
Top – росткунӣ аз боло
Middle – аз мобайн
Bottom – аз поён
Baseline – аз рӯи хати базавӣ
Дар ҳошияи воридкунии W ва H мутаносибан бузургии васеъгии хонача ва баландии сатр, ки дар он мавҷуд аст, ворид карда мешавад. Шумо онро дар пикселҳо ё фоиз аз васеъгии ҷадвал дода метавонед. Дар ҳолати дуюм баъди рақам нишони фоизро илова кунед. Агар ба ҳошияи воридкунӣ чизе дохил накунед, хонача тамоми фазаи озодро мегирад. 
Параметрҳои сатр. Ҳаҷми параметри сатрҳо ба параметри хонача баробар аст. Албатта ин хусусиятҳо на ба хоначаи алоҳида, балки ба ҳамаи сатрҳо хос аст. Агар ба майдони W ягон рақамро дода ва клавишаи Enter – ро пахш кунем,  ин ба ҳамаи ячейкаҳои ҷадвал истифода мешавад. Ин хусусиятро дар вақти сохтани ҷадвали васеъгии хоначаҳояш якхела истифода баред. Агар шумо рақами нодуруст (масалан 50% барои ҷадвали аз 10 сутун вобаста) диҳед, Web – офаранда худаш васеъгии хоначаро медиҳад. Агар байрақчаи No Wrap – ро васл кунем, ҷадвал беҳад калон мешавад. Пеш аз байрақчаро васл кардан, нағз фикр кунед. Агар шумо ба тасвири замина (фоновое изображение) (майдони воридкунии bg), ранги замина (селектори ранг bg), ё ки ранги сарҳадро (селектори ранг brdr) дода бошед, хусусияти ин параметрҳо ба ячейкаҳои сатри ҷудошуда таъсир мерасонад. Шумо параметри ҳар як ячейкаро нав карда метавонед. Ба расми 5.14 нигаред: тамоми сатрҳои поёни заминааш ранги хокистарранги сиёҳ дошта, барои ячейкаи №2.3 ранги сафед дода шудааст.
Параметрҳои ҷадвалНамуди муҳаррири хосият ҳангоми ҷудокунии ҷадвал дар расми 5.13 нишон дода шудааст. Чи хеле ки мебинед, дар ин ҷо маҷмӯи параметрҳо аз маҷмӯи параметрҳои ячейка ва сатр фарқ мекунад. 
 
 
 
Расми 8.9. Намуди муҳаррири хосият дар ҳолати ҷадвали ҷудокардашуда
Ҳошияи воридкунии Rows ва Сols барои ботезӣ тағйир додани шумораи сатру сутунчаҳои ҷадвал хизмат мекунад. Агар шумо шумораи муайяни сатру сутунро супориш диҳед, изофагиашро беогоҳона худи компютер гирифта мепартояд. Ҳошияи воридкунии W ва H барои иҷрои супориш оиди васеъгӣ ва баландии ҷадвал хизмат мекунад. Ин рақамҳо ҳам бо пиксел ва ҳам бо фоиз нисбати васеъгӣ ва баландии унсури тавлидии саҳифа дода мешавад. Ба шумо лозим аст, ки дар рӯйхатҳои кушодашавии тарафи рости ҳошияи воридоти аҳамияти pixels ё % -ро ёбед. 
Майдони воридии bg image барои супориши номи файли тасвири заминаи ҷадвал хизмат мекунад. Селектори ранги bg color ранги заминаи ҷадвалро дода, селектори ранги brdr color – ранги сарҳади ҷадвалро муайян мекунад. 
Рӯйхати кушодашавии align барои ба таври уфуқӣ рост кардани ҷадвал хизмат мекунад. 
Чор аҳамият дорад:
Default – вақте ки дигар ҳолатҳо дода нашудаанд, одатан ин пункт росткунии тарафи чапро медиҳад.
Left – росткунии чап
CEnter – дар мобайн 
Right – ба тарафи рост
Бо ин рӯйхат дороии ҷадвал не, балки худи ҷадвал рост карда мешавад, ин маънии онро дорад, ки ҷадвал ба тарафи чап ё дар марказ ҷойгир карда мешавад. 
Шаклҳои пешакӣ муайяншудаи ҷадвалКонсепсияи форматҳои ҷадвал ва консепсияи схемаҳои рангини пешакӣ муаӣяншуда бо ҳам монанданд. Рӯйхати кушодашавандаи alternate миқдори сатри ба як гурӯҳ дохил шавандаро медиҳад. 
Ин ҷо панҷ пункт дастрас аст:
<do not alternate> - ҳама сатрҳо ранги якхела доранд, ки бо селектори рангҳои first дода шудааст.
Every other row – гурӯҳҳои яксатра
Every two Rows – дусатра
Every three Rows – сесатра
Every four Rows – чорсатра             
Ба навъҷудокунии ҷадвалЛозим мешавад, ки ҷадвалро аз рӯи тағйирёбандаҳои як ё ду сутун ба хелҳо ҷудо кунем. Таҳиягарони Dreamweaver амалиёти ба хелҳо ҷудокунии ҷадвалро ба вуҷуд оварданд. Фақат ҷадвалро ҷудо карда,  пункти sort Table-ро дар менюи commands интихоб кардан зарур аст. Дар экран тирезаи муколамотии sort Table (дар расми 8.10) ба вуҷуд меояд. 
Расми 8.10. Тирезаи муколамотии sort Table
Рақами сутунчаи аввал, ки бо воситаи он навъҷудокунӣ гузаронида мешавад, дар рӯйхати кушодашавандаи sort by дода мешавад. Ҳамаи пунктҳои дар он буда шакли column <рақами сутунча> - ро дорад. Сутунро бо рақами зарурӣ гиред. Гурӯҳи унсурҳои order-ро васеътар мебинем. Он ду рӯйхати кушодашаванда дорад. 
Омезиши  хоначаҳо воситаи тавоно мебошанд. Инро дар мисол дида мебароем. Мо ҷадвали пасин дорем. Ҷадвали соддае, ки дар Dreamweaver таҳия карда метавонед. Маҷмӯи соддаи сатрҳо ва хоначаҳо бе шаклдиҳӣ (форматирования). Барои он ки ячейкаҳои ҷадвал холӣ набошанд ва корамон осон шавад, онҳоро рақамгузорӣ мекунем. Дар ин ҷо якчанд хоначаҳо якҷоя шудаанд (дар ин бора нишоши + гувоҳӣ медиҳад). Ин омезиши ячейка ном дорад. Хоначаҳо ба таври уфуқию амудӣ якҷоя шудаанд. Шумораи хоначаҳои муттаҳид  номаҳдуданд.   
Матн дар чорчӯба. Ба чорчўба гирифтани матн хеле осон буда, бо истифода аз ҷадвал сурат мегирад. Барои саҳифаи рӯйхатдор, бе истифодаи графика сарлавҳаи зебои атрофаш чорчӯбадор месозем. Web – саҳифаи нав ташкил мекунем. Онро дар файли 5.5.htm ҳифз мекунем. Параметрҳои сарлавҳаро ҳисоб мекунем: матне, ки мо ба чорчӯба мегирем; масофаи байни чорчӯба ва матни дар он дохилшуда (4 пиксел); ғафсии чорчӯба (8 пиксел); ранги чорчӯба (кабуди баланд); андозаи чорчӯба (васеъгӣ – 100%, баландӣ - 50 пиксел)
Ҷадвале, ки аз як хонача иборат буда, дар дохили он матн аст. Ғафсии сарҳади он ба ғафсии чорчӯба баробар аст. 
Ба саҳифаи холӣ ҷадвали васеъгиаш – 100% ва баландиаш – 50 пиксел, бо ранги кабуди баланд, ғафсии чорчӯба 8 пикселро гузоред. Параметри cell padding ба 8 пиксел ва cell spacing ба 0 баробар шуданаш лозим. Ин ҷадвал бояд як сатру сутун дошта бошад.
Расми 8.11. Чорчӯбаи бематн 
Матн дар чорчӯбаи графикӣМатнро дар чорчӯбаи графикӣ мегирем. Чорчӯбаро ғафстар кардан лозим, то ки заминаи графикро истифодабарандагон дида тавонанд. Файли тасвири заминаро тайёр мекунем. Агар дар бораи параметрҳои матн дар чорчӯбаи графикӣ сухан ронем, он чунин аст: фосилаи байни чорчӯба ва матни дар он ҷойгиршуда 4 пиксел; васеъгии чорчӯба – 40 пиксел; ранги чорчӯба бо тасвири заминавӣ мувофиқат мекунад (ранги хокистари кушод); тасвири замина – файли wb02049_.gif, ки дар комплекти Microsoft office 2000 пешкаш мешавад; андозаи чорчӯба: васеъгӣ – 100%, баландӣ муайян нест, ба таври автоматӣ муайян карда мешавад.
Чорчӯбаи графикӣ барои матн чун ранга таҳия мешавад. Ба истиснои он ки барои ҷадвали беруна, заминаи графикӣ медиҳем. Аввал дороии саҳифаи 5.5.htm-ро бартарф мекунем. Ҷадвали берунаро бо  васеъгии 100%, заминаи хокистарии кушод ва ғафсии чорчӯбааш баробари 0-ро таҳия мекунем. Тағйирёбандаи параметри cell padding ба 40 пиксел ва параметри  Cell Spacing-ро 0 мекунем. Файли гирифташуда, ба ҷои тасвири заминавӣ хизмат мекунад. Натиҷа дар расми 8.12 нишон дода шудааст.
Ин хам бо воситаи Ҷадвалҳо соҳта мешавад.Тамоми Web-саҳифа бо ҷадвалҳои хурду калон сохта шудаанд.  
                 
Хулоса:
Аз ин фанни мазкур ки Асосҳои Web-дизайн номро дорад. Қисман сохтани Web-саҳифаро омӯхтем ки хамаи ин Кори семестрии №1 ро дарбар мегирифт. Бовари дорам ки дар кори семестрии №2 ба пурраги ин фанро меомӯзем.  Ман аз истифодаи Macromedia dreamweaver  дизайни саҳифа кори он бо матн, гиперҳавола, тасвирхо, овозҳо, видеоҳо ва ҷадвалҳоро омӯхтам. Боварии комил дорам ки ин донишҳои гирифта-ам дар оянда бояд истифода шуд.

Скачать реферат "Асосҳои Web-дизайн": asoshoi-web-dizajn-maktab_tj.doc


Комментарии (0)

Имя:*
E-Mail:
Введите код: *
Кликните на изображение чтобы обновить код, если он неразборчив