වෙබ් අඩවි සමඟ HTML ඉදිරිපත් කිරීම් කරන්නේ කෙසේද

ලෝකයක අපගේ අදහස් අන්තර්ජාලයේ පෙන්වන්න මෙවලම්වල විවිධත්වය අපව විස්මිත ඉදිරිපත් කිරීම් නිර්මාණය කිරීමට හේතු වී ඇති අතර, බොහෝ අවස්ථාවලදී සමහර මාධ්‍ය සමඟ නොගැලපෙන බවට සැකයක් නැත. HTML ඉදිරිපත් කිරීම් ඔවුන් මෙම ප්‍රදේශයේ විශ්වීය විකල්පය ලෙස දිගටම පවතිනු ඇත.

නමුත් ලස්සන HTML ඉදිරිපත් කිරීම් නිර්මාණය කිරීම සඳහා බොහෝ කාලයක් ගත වන අතර HTML, CSS සහ සමහර අවස්ථාවලදී JavaScript පිළිබඳ තරමක් දියුණු දැනුමක් අවශ්‍ය බව කිසිවෙකුට රහසක් නොවේ. මෙම ගැටළු වලින්, විශිෂ්ට මෙවලමක් ලෙස හැඳින්වේ වෙබ් අඩවි.

වෙබ් අඩවි යනු කුමක්ද?

එය කෙසේ හෝ විවෘත මූලාශ්‍ර “රාමුවක්” ලෙස හැඳින්වීමයි ජෝස් ලුයිස් ඇන්ටූනෙස්, එය අපට ඉඩ දෙයි HTML ඉදිරිපත් කිරීම් සාදන්න ඉක්මනින් සහ පහසුවෙන්. ඔබේම ඉදිරිපත් කිරීම් කිරීමට අත්‍යවශ්‍ය මෙවලම මෙවලමට ඇත, ඒ හා සමානව, ඔබට නිරූපණ ඉදිරිපත් කිරීම් වලින් එකක් ගෙන මිනිත්තු කිහිපයකින් එය ඔබේ අභිමතය පරිදි රිසිකරණය කළ හැකිය.

මෙම මෙවලම සමඟ මා විසින් සාදන ලද HTML ඉදිරිපත් කිරීම්වල ආකර්ෂණීය සෞන්දර්යයක් ඇත. මෙම මෙවලමට HTML සහ CSS පිළිබඳ මූලික දැනුමක් අවශ්‍ය බව සඳහන් කිරීම වටී, එබැවින් එය සියලු වර්ගවල පරිශීලකයින් සඳහා වඩාත් සුදුසු වේ, ඔවුන් අන්තර්ගතය කෙරෙහි පමණක් අවධානය යොමු කළ යුතු අතර ඔවුන් ඉදිරිපත් කිරීම සකස් කරන්නේ කෙසේද යන්න පිළිබඳව ඉතා අල්පය.

වෙබ් අඩවි බාගත කරන්නේ කෙසේද?

වෙබ් අඩවි බාගත කිරීම සඳහා, ඔබගේ ප්‍රියතම නාමාවලියෙන් පහත විධානය ක්‍රියාත්මක කරන්න:

wget https://github.com/jlantunez/webslides/archive/master.zip

ඔබට නිල ගබඩාව සමඟ ක්ලෝන කළ හැකිය

git clone https://github.com/jlantunez/webslides.git

ව්‍යාපෘති ෆෝල්ඩරය තුළ ඔබට පහසුවෙන් ඔබේම HTML ඉදිරිපත් කිරීම් නිර්මාණය කිරීම සඳහා අවශ්‍ය js, css සහ නිරූපණ ලැබෙනු ඇත.

වෙබ් අඩවි භාවිතා කරන්නේ කෙසේද?

වෙබ් අඩවි වල ඇති ලොකුම වාසිය නම් එහි භාවිතයේ පහසුවයි, මෙම මෙවලම විවිධ අරමුණු සහිත ඉදිරිපත් කිරීම් සැබවින්ම පහසු කරවන අතර එහි නිරූපණ මාලාව ඉදිරිපත් කිරීමේ නිර්මාණ ක්‍රියාවලිය ඉතා ඉහළ% කින් වේගවත් කරයි.

අපි වෙබ් අඩවි බාගත කළ විට අපට ලැබෙන්නේ කුමක්ද?

වෙබ් අඩවි බාගත කිරීමේදී අපි විවිධ ෆෝල්ඩර වලට ප්‍රවේශ වෙමු, ඒවාට නිරූපණ සහ රූප (උපාංග සහ ලාංඡන) ඇතුළත් වේ.

  • CSS ෆෝල්ඩරය අපගේ ඉදිරිපත් කිරීම් වල මෝස්තර ගබඩා කරයි
  • අවශ්‍ය javascripts js ෆෝල්ඩරයේ ගබඩා වනු ඇත, මූලික වෙබ් අඩවි lj.js ද ඇතුළුව බොහෝ මැජික් සිදු කරනු ලැබේ.
  • නිරූපණවල පින්තූර සහ HTML ගොනු පිළිවෙලින් රූප සහ නිරූපණ ෆෝල්ඩර වල සුරකිනු ඇත.
webslides/
├── index.html
├── css/
│   ├── base.css
│   └── colors.css
│   └── svg-icons.css (optional)
├── js/
│   ├── webslides.js
│   └── svg-icons.js (optional)
└── demos/
└── images/

වෙබ් අඩවි සමඟ HTML ඉදිරිපත් කිරීම් නිර්මාණය කිරීම

වෙබ් අඩවි භාවිතා කිරීමේදී මූලික වාසි 2 ක් ඇත, ඒවා අපි පහත සඳහන් කරමු:

  • කේතය පිරිසිදු හා පරිමාණය කළ හැකි ය. වඩාත්ම ජනප්‍රිය නාමකරණයන් සමඟ බුද්ධිමය සලකුණු කිරීම ද එයට ඇතුළත් ය. පංති භාවිතා කිරීම හෝ කැදැල්ල අධික ලෙස භාවිතා කිරීම අවශ්‍ය නොවේ.
  • එක් එක් <section> # වෙබ් අඩවි වල එය විනිවිදකයක් නියෝජනය කරයි. එබැවින් පේජින් කිරීම අතිශයින්ම සරල ය.
විනිවිදක 1  විනිවිදක 1

සිරස් ශෛලියක් එක් කරමින් සිරස් විනිවිදක සෑදිය හැකි ආකාරයටම


වෙබ් අඩවි CSS සෑදෙන පන්ති

  • යතුරුලියනය:. පෙළ-ගොඩබෑම,. පෙළ-දත්ත,. පෙළ-හැඳින්වීම ...
  • පසුබිම් වර්ණ: .bg- ප්‍රාථමික, .bg- ඇපල්, .bg- නිල් ...
  • පසුබිම් රූප:. පසුබිම,. පසුබිම-මැද-පහළ…
  • කාඩ්පත්: .කාඩ් -50, .කාඩ් -40 ...
  • නම්යශීලී කුට්ටි: .flexblock.clients, .flexblock.metrics ...

වෙබ් අඩවි වලට විහිදේ

වෙබ් අඩවි අපට නව මෝස්තර සහ ක්‍රියාකාරීත්වයන් එක් කිරීමට ඉඩ දෙයි, මේ සඳහා අපට පහත සඳහන් සම්පත් කිහිපයක් එකතු කළ හැකිය:

වෙබ් අඩවි වලින් සාදන ලද HTML ඉදිරිපත් කිරීමේ නිරූපණ

වෙබ් අඩවි වලින් සාදන ලද HTML ඉදිරිපත් කිරීම්වල නිරූපණ මාලාවක් ඔබට දැක ගත හැකිය මෙන්න. එලෙසම, ඔබ රාමුව බාගත කරන විට ඔබට මෙම එක් එක් නිරූපණ කේතීකරණයට ප්‍රවේශ විය හැකිය.

HTML ඉදිරිපත් කිරීම් නිරූපණය කරන්න

Demos කළඹ 2 මෙය අපට HTML ඉදිරිපත් කිරීම් ඉක්මණින් හා විශාල නිමාවකින් යුතුව නිර්මාණය කිරීමට ඉඩ සලසන මෙවලමකි, නමුත් අන්තර්ගතය කෙරෙහි අවධානය යොමු කිරීමට සහ අප කලින් නොසිතූ ප්‍රති results ල ලබා ගැනීමටද එය අපට උපකාරී වනු ඇත.


ලිපියේ අන්තර්ගතය අපගේ මූලධර්මවලට අනුකූල වේ කතුවැකි ආචාර ධර්ම. දෝෂයක් වාර්තා කිරීමට ක්ලික් කරන්න මෙන්න.

අදහස් 3 ක්, ඔබේ අදහස් තබන්න

ඔබේ අදහස තබන්න

ඔබේ ඊ-මේල් ලිපිනය පළ කරනු නොලැබේ. අවශ්ය ක්ෂේත්ර දක්වා ඇති ලකුණ *

*

*

  1. දත්ත සඳහා වගකිව යුතු: මිගෙල් ඇන්ජල් ගැටන්
  2. දත්තවල අරමුණ: SPAM පාලනය කිරීම, අදහස් කළමනාකරණය.
  3. නීත්‍යානුකූලභාවය: ඔබේ කැමැත්ත
  4. දත්ත සන්නිවේදනය: නෛතික බැඳීමකින් හැර දත්ත තෙවන පාර්ශවයකට සන්නිවේදනය නොකෙරේ.
  5. දත්ත ගබඩා කිරීම: ඔක්සෙන්ටස් නෙට්වර්ක්ස් (EU) විසින් සත්කාරකත්වය දක්වන දත්ත සමුදාය
  6. අයිතිවාසිකම්: ඕනෑම වේලාවක ඔබට ඔබේ තොරතුරු සීමා කිරීමට, නැවත ලබා ගැනීමට සහ මකා දැමීමට හැකිය.

  1.   ඇලන් ෆුවෙන්ටස් ප්රකාශ කළේය

    ඉතා හොඳයි, මගේ රුචිකත්වයට අනුව මෙවලම තරමක් සිත්ගන්නාසුළුය. හෙළි කිරීම. HTML, CSS සහ JS වැනි වෙබ් තාක්ෂණයන් මත පදනම් වූ මෙවලමක් වන බැවින් මෙම තාක්ෂණයන් පිළිබඳ මූලික දැනුමක් ඇති ඔබට දැනටමත් ඔබේ ඉදිරිපත් කිරීම කළ හැකිය. වඩාත් රසවත් වන්න.

    ස්තුතියි.

  2.   anonymousus ප්රකාශ කළේය

    මෙතරම් මුල් අන්තර්ගතයන් සැමරීම සතුටක්
    https://www.genbeta.com/web/crea-bonitas-presentaciones-en-html-de-forma-rapida-y-sencilla-con-webslides

    1.    කටුස්සා ප්රකාශ කළේය

      නිර්නාමික පැතිකඩක සැඟවී සිටීම ඔබට අවශ්‍ය දේ විවේචනය කිරීම හා පැවසීම ඉතා පහසුය, නමුත් අවාසනාවකට ඔබේ සංගුණකය ඔබේ ඇස්වලට පෙනෙන තැනින් ඔබ්බට බැලීම නතර නොවන බව තේරුම් ගත හැකිය, මෙම ලිපිය මා විසින් ලියා ඇත්තේ නිල ලියකියවිලි මත සහ සමාලෝචනය මම මෙවලම මත කර ඇත. ඔබට අදහසක් ලබා දිය යුත්තේ කාගෙන්ද, මම එය දැනගත්තේ එය ගිතුබ් හි මෑත දිනවල වැඩිපුරම ඡන්දය දුන් යෙදුම නිසාය. https://github.com/jlantunez/webslides… කෙසේ වෙතත්, ඔවුන් අප හා සමාන වෙනත් වෙබ් අඩවියක් ගැන සොයා බැලීමට ඔබ කාලය ගත කර තිබීම අපට ඉතා වැදගත් වේ, එබැවින් ඔබට සමාලෝචක පුරප්පාඩුවට අයදුම් කළ හැකිය, එය අයදුම්කරුවෙකු ලෙස පමණක් පවතිනු ඇතැයි මා සිතන නිසා සුදුසු දෙයක් තීරණය කිරීමේ නිර්ණායක ඔබ සතුව ඇති බවට සැකයක් නැත.