Сайттарды жобалау кезінде сіз көбінесе негізгі мәселені шешуге тура келеді: әр түрлі экрандық ажыратымдылықтармен ашылған кезде парақтың әрекеті қандай болады? Мұнда екі нұсқа бар - «резеңке» (созылатын) сайт беттері немесе статикалық. Бірінші нұсқа талқыланады. Сіздің орналасуды қалай таңдағаныңызға қарамастан, созылу дизайнының негізгі қағидасы - салыстырмалы түрде масштабтау.
Бұл қажетті
- - HTML-ді білу;
- - html-кодты редакциялауға арналған бағдарлама.
Нұсқаулық
1-қадам
Сіздің сайтыңыздың шаблоны үшін негізгі түзетуді көрсететін негізгі файлды таңдаңыз. Ол index.html немесе index.php файлы болуы мүмкін. Сайттың шаблондарын өңдеудің ең жақсы бағдарламалық жасақтамаларының бірі - Macromedia Dreamweawer. Қажетті редакциялау осы бағдарлама негізінде жасалады.
Үлгі файлын ашыңыз немесе жаңасын «Файл» - «Жаңа», санаты - «Негізгі бет» - «HTML» немесе «Динамикалық бет» - «PHP» командалары арқылы жасаңыз. Мұнда сайт құрылымы екі файлдың бірінде жазылған жалпы жағдайды қарастырамыз.
2-қадам
Кестелерде, див-блоктарда және біріккен (бір уақытта кестелер мен блоктар) орналасудың әртүрлі түрлері бар екендігі бұрыннан құпия емес. HTML кестесі кестенің орналасуына жауап береді
Әр сипат үшін пайызды (100%) көрсетіңіз. Бұл кез-келген геометриялы экрандарға үстел ұяшықтарын автоматты түрде созудың әсеріне қол жеткізеді. Бұл 19 дюймдік монитор немесе смартфон болуы мүмкін - олардың әрқайсысы мазмұнды дұрыс шығарады.
3-қадам
Егер кесте ұяшықтары арасындағы сәйкестікті дәл көрсету керек болса, келесі мысалды қолданыңыз:
| … … 1 ұяшықтың мазмұны. … | … … 2-ұяшықтың мазмұны. … |
Мұнда кестенің өзі үшін анықталған барлық элементтердің ені 30% болатын ұяшықтардың бірі көрсетілгенін көресіз. Қарапайым есептеу 100% -30% = 70% екінші ұяшық үшін қалады деп көрсетеді. Бұл жағдайда кесте ұяшықтарының бірінде ені атрибуты орнатылмағанын ұмытпаңыз. Браузер барлық есептеулерді өздігінен жасайды және кестені ұяшықтармен дұрыс созады. Кестелер ішіндегі мазмұн әртүрлі экрандарда дұрыс созылып, кішірейеді.
4-қадам
Div орналасу жағдайында тег блоктары әдепкі бойынша экранның бүкіл еніне дейін созылып, бірінен соң бірі солдан оңға, жоғарыдан төмен қарай жүреді. Олардың геометриясын нақтылау үшін CCS сыныбын немесе идентификаторын (ID) жасаңыз, онда сіз, мысалы, атрибуттар және / немесе қораптың өлшемі мен орналасу санаты үшін (Box) көрсетіңіз. Көрсетілген стильді сайттың белгілеу файлымен байланыстыруды ұмытпаңыз және сыныпты (ID) қажетті тегпен байланыстырыңыз. Әдетте ол болашақ сайттың барлық геометриясын анықтайтын сценарийдің басында орналасады:
… … сайт мазмұны. …
Немесе келесідей:
… … сайт мазмұны. …
CSS ережесінің коды келесідей болады:
… myclass {
ені: 30%;
биіктігі: 50%;
}
# меніңИД {
ені: 30%;
биіктігі: 50%;
}
