Дизайнерлерге арналған HTML және CSS-ке кіріспе

Дизайнерлер үшін HTML және CSS-ке кіріспе.

Графикалық дизайнер ретінде сіз дизайн мен технология арасындағы үнемі дамып келе жатқан байланыс туралы білетін шығарсыз. Бұл әсіресе веб-дизайнмен айналысатындарға қатысты. Бұл салада біз мұқият жасалған макеттер қалай тірі веб-беттерге айналатыны туралы негізгі түсінікке ие болуымыз керек. Бұл процестің негіздерін (және оның шектеулерін) түсінген кезде, біз әзірлеушілермен нақты байланысып, жасай аламыз мінсіз веб-сайттар пиксель.

Бұл веб-сайтты жоғарыдан төменге дейін кодтауды білу керек дегенді білдірмейді (бірақ бұл тамаша болар еді!), бұл жай ғана негіздерді түсіну керек дегенді білдіреді. Бұл жазбада біз HTML-ге өте қарапайым кіріспеден бастаймыз. Сіз Photoshop бағдарламасында веб-дизайнды қиып алуды және CSS көмегімен HTML пішімдеуді үйренесіз. Дизайнерлерге арналған HTML және CSS-ке кіріспе

HTML дегеніміз не?

Интернетті шолған кезде көретіндердің барлығы дерлік гипермәтіндік белгілеу тілі (HTML) құжаты болып табылады. Гипертекст — жай басу арқылы мазмұнға қол жеткізуге мүмкіндік беретін экрандағы басқа мәтінге сілтеме жасайтын және сілтеме жасайтын мәтін. Белгілеу тілі шаршы жақшаға <> алынған тегтер жиыны болып табылады. Бұл HTML тегтері әдетте жұп болып келеді:

<бастау тег> : Ашу тегі ретінде де белгілі.
: жабу тегі деп те аталады және қиғаш сызықты қамтиды /

Мазмұнды осы екі тегтің арасына қосқанда, барлық нәрсе шақырылады элемент :

Бұл абзац

Бұл тіл интернетке аударылғанда, көрермендер тегтерді көрмейді — олар тек олардың арасындағы мазмұнды көреді.

HTML 5, HTML тілінің ағымдағы нұсқасы, олардың функциясын немесе сыртқы түрін өзгертетін атрибуттары бар 100-ге жуық тегтерді қамтиды. HTML түсіну және жасауды бастау үшін осы тегтердің 30-40-ын ғана білу қажет. Оларға қараңыз және олардың қызметі бойынша қалай топтастырылғанын байқаңыз. Мұны іс жүзінде көрейік.

Photoshop бағдарламасында кескіндерді кесу.

Дизайнерлерге арналған HTML және CSS-ке кіріспе

Кодтау алдында веб-сайттың қай бөлімдерінде кескіндер болуы керек және қайсысы кодталуы мүмкін екенін шешуіміз керек. Пайдаланайық құрал Photoshop Кесінді (ішкі мәзір астында жасырылған Кесу құралы ) және буррито фотосуреті және сияқты аймақтарды бөлектеңіз тако Джоан .

Енді үзінділерімізді экспорттауымыз керек - Файл > Веб үшін сақтау тармағын таңдаңыз (Alt + Shift + Ctrl + S). Белгілі бір үзінді таңдалғанда, оның экспорттау параметрлерін терезенің оң жағында орнатуға болады (JPG, PNG, т.б.). Белгілі бір фрагментті екі рет шертсеңіз, қалқымалы терезені көресіз " Фрагмент параметрлері» - Бұл нақты фрагменттік файлдарды атауға мүмкіндік береді.

Әдепкі бойынша, барлық кескіндер мына жерде орналастырылады: /images/ ішкі каталогы. Жасалған үзінділерді ғана экспорттағыңыз келсе, « Барлық пайдаланушы фрагменттері» «Сақтау» терезесінде. Дизайнерлерге арналған HTML және CSS-ке кіріспе

Негізгі HTML құжатын құру

Бізде шектегіштер бар, негізгі HTML құжатын жасайық. Дизайнерлерге арналған HTML және CSS-ке кіріспе

1-жол : HTML 5 диалектісі құжаттың тілі екенін мәлімдейді.

2-жол : элемент HTML құжатының түбірін білдіреді. Бұл біздің құжаттың шекарасын білдіретін міндетті контейнер.

3 : бөлім мета ақпарат, тақырып және т.б. сияқты көрінбейтін бет элементтерін қамтиды.

4-жол : Бұл құжатты кодтау декларациясы − utf-8 - қауіпсіз таңдау - HTML таңбаларын кодтау туралы толығырақ оқуға болады осында .

5-жол : Үлгі бет Бұл браузердің тақырып жолағында пайда болатын бет тақырыбы.

6 : тегті жабады 3-жолдан.

7-жол : Бұл негізгі элемент беттің барлық көрінетін мазмұнын қамтиды.

8-жол : тегті жабады 2-жолдан. Бұл элемент құжаттың соңын белгілейді. Дизайнерлерге арналған HTML және CSS-ке кіріспе

Бірдей дизайнды кодтаудың басқа ықтимал жолдары бар. Құжаттың негізгі құрылымын жасау үшін HTML 5 семантикалық тегтерін (үстіңгі, шарлау, мақала, төменгі колонтитул) қолданамыз:

Бұл HTML тіліне аударылған орналасу:

Бірнеше ескертулер:

11 және 12-жолдар : Элементтер Интернеттің мәні болып табылады, өйткені олар жасау үшін пайдаланылады гиперсілтемелер . Олар HREF төлсипатына байланыстырылған және мақсатты байланыстыруы керек URL .

18–20 жолдар : Бұл кейбір мәтінді пішімдеу тегтері: бірінші деңгейдегі тақырыпты білдіреді; абзацты білдіреді; жол үзілісін білдіреді.

Каскадты стиль кестелерімен (CSS) пішімдеу.

Дизайнерлерге арналған HTML және CSS-ке кіріспе

Веб-шолғышта тек HTML файлын ашқанда, оның бұрынғы дизайнымыздай пішімделмегенін көресіз. Бұл HTML коды жеткіліксіз болғандықтан, оны пішімдеу керек Каскадты стиль кестелері (CSS) . CSS - HTML элементтерін пішімдеу үшін қолданылатын стильдер кестесінің тілі.

Неліктен HTML тілін CCS-пен біріктіру керек? Біраз уақыт бұрын форматтауға HTML тегтеріне атрибуттар қосу арқылы қол жеткізілді. Дегенмен, бұл оқылмайтын және қолдауға болмайтын кодқа әкелді. Шешім құжат мазмұнын (HTML) құжат пішімінен (CSS) бөлу болды.

Қарапайым бөлейік CSS ережесі : .

Таңдаушы : Бұл мәнерлендіргіңіз келетін HTML элементі. Мысалы: <мақала>

Жарнама : CSS ережесінде бір немесе бірнеше мәлімдеме болуы мүмкін. Әрбір мәлімдеме сипат пен мәннен тұрады және нүктелі үтірмен бөлінеді. Сіз мәлімдемелерді бұйра жақшаға {} қоясыз. Дизайнерлерге арналған HTML және CSS-ке кіріспе

Меншік : бұл стильдік ерекшелігі, өзгерткіңіз келетін. Мысалы: фон түсі, өлшемі шрифт және т.б.

құн : Әрбір сипат онымен байланысты мәнге ие. Мысалы: #ffcc11 (фон түсі үшін), 16px (қаріп өлшемі үшін) т.б.

Бар көптеген CSS қасиеттері, әрбір HTML элементі үшін орнатуға болады, бірақ олардың барлығын өзіңіз жазудың қажеті жоқ. Сіз браузеріңіздің әдепкі параметрлеріне сене аласыз немесе шолғышты ақылға қонымды параметрлерге қайтаратын негізгі стиль кестесін пайдалана аласыз. Шын мәнінде, үшін селекторларды жазу мұны өзіңіз жасау үлкен білім мен тәжірибені қажет етеді.

Қарапайым дизайнды пішімдеу үшін қажет кейбір CSS ережелерін қарастырайық.

CSS позициялау сипаттары : бар 4 түрлі әдіс (статикалық, бекітілген, салыстырмалы және абсолютті) біздің дизайнымызда белгілі бір элементтерді орналастыруға мүмкіндік береді. Осы әдістердің бірін орнатқаннан кейін элементтерді жоғарғы, оң жақ, төменгі және сол жақ сипаттар арқылы орналастыруға болады - олар 4 әдістің қайсысын пайдаланатыныңызға байланысты басқаша жұмыс істейді. Бұл жағдайда біз орналасқымыз келеді пластина_суреті, қолдану абсолютті орналастыру.

CSS қорап үлгісі : бұл модель барлық HTML элементтерін, соның ішінде жиектерді, жиектерді, толтырғыштарды және мазмұнды қамтитын жақтау. Жиек - жиектің айналасындағы көрінбейтін аймақ және жиек пен мазмұн арасындағы толтыру.

Егер сіз шынымен кодтау туралы көбірек білгіңіз келсе, көріңіз осы керемет сайтқа: Codecademy .