Paano Gumawa ng isang Website: Para sa Mga Nagsisimula

Paano Gumawa ng isang Website: Para sa Mga Nagsisimula

Nais mo bang laging nagnanais na gumawa ng isang website? Marahil nabasa mo ang ilan sa aming HTML ( pag-unawa sa HTML ) at mga tutorial sa CSS, ngunit hindi alam kung paano gamitin ang mga wikang iyon sa isang mas malaking proyekto.





Ngayon gagabayan ka namin sa proseso ng paggawa ng isang kumpletong website mula sa simula. Huwag mag-alala kung ito ay tila isang mahirap na gawain, gabayan ka namin sa bawat hakbang na ito.



Gagawa mo ang website na ito gamit ang HTML, CSS, at JavaScript na may isang ugnayan ng jQuery (gabay sa jQuery). Wala kang gagawin Talaga dumudugo gilid, kaya ang code na ito ay dapat na gumana nang maayos sa karamihan sa mga modernong browser.





Kung hindi ka sigurado sa anumang CSS, tingnan ang Patnubay sa CSS sa W3Schools.com .

Ang disenyo

Narito ang disenyo para sa website na ito. Tumingin sa isang imahe ng mataas na resolusyon kung nais mo ng isang mas mahusay na hitsura, o kahit na mas mahusay, i-download ang buong proyekto dito.



Dinisenyo ko ang website na ito para sa isang kathang-isip na kumpanya sa Adobe Photoshop 2017. Kung interesado ka, tiyaking kukunin mo ang .PSD file mula sa pag-download ng bundle. Narito kung ano ang nakukuha mo sa file ng photoshop:

Sa loob ng PSD, makikita mo ang lahat ng mga layer na naka-grupo, pinangalanan, at naka-code ang kulay:



Kakailanganin mo ng ilang mga naka-install na font para sa mga bagay na mukhang tama. Ang una ay Kahanga-hanga ang font , ginamit para sa lahat ng mga icon. Ang iba pang dalawang mga font ay Ang PT Serif at Myriad Pro (kasama sa Photoshop). Kung hindi ka sigurado kung paano mag-install ng mga font, pagkatapos basahin ang aming gabay.

Huwag kang magalala kung wala ka Adobe Photoshop , hindi mo ito kailangan upang magpatuloy.



Paunang Code

Ngayon na malinaw ang disenyo, simulan natin ang pag-coding! Lumikha ng isang bagong file sa iyong paboritong text editor (Gumagamit ako Sublime Text 3 ). I-save ito bilang index.html . Maaari mong tawagan ito kahit anong gusto mo, ang dahilan kung bakit maraming mga pahina ang tinawag na index ay dahil sa kung paano gumana ang mga web server. Ang default na pagsasaayos para sa karamihan ng mga server ay upang ihatid ang pahina ng index.html kung walang tinukoy na pahina.

Kung hindi mo nais na malaman ang mga detalye, pumunta sunggaban ang buong code mula sa pag-download.

Narito ang code na kailangan mo:





Noise Media


/* CSS goes here, at the top of the page */





/* JavaScript goes here, at the bottom of the page */


Gumagawa ito ng maraming bagay:

  • Tinutukoy ang hubad na minimum na kinakailangang HTML.
  • Tumutukoy sa isang pamagat ng pahina ng 'Noise Media'
  • May kasamang jQuery na naka-host sa Google CDN (ano ang isang CDN).
  • May kasamang Font Galing na naka-host sa Google CDN.
  • Tumutukoy sa a style tag upang isulat ang iyong CSS sa.
  • Tumutukoy sa a iskrip tag upang isulat ang iyong JavaScript sa.

I-save muli ang iyong file at buksan ito sa iyong web browser. Marahil ay hindi mo masyadong mapapansin, at tiyak na hindi ito magiging hitsura ng isang website.

Pansinin kung paano ang pamagat ng pahina Ingay ng Media . Ito ay tinukoy ng teksto sa loob ng pamagat tag Ito ay mayroon na nasa loob ng ulo mga tag

pinakamahusay na libreng vr apps para sa android

Ang Header

Lumikha tayo ng header. Narito kung ano ang hitsura nito:

Magsimula tayo sa maliit na kulay abong iyon sa tuktok. Ito ay isang mapusyaw na kulay-abong may bahagyang maitim na kulay-abo sa ilalim. Narito ang isang malapit:

Idagdag ang HTML na ito sa loob ng katawan tag sa itaas:

Habang narito ka, paghiwalayin natin ito. A div ay tulad ng isang lalagyan upang maglagay ng iba pang mga bagay-bagay sa. Ang 'iba pang mga bagay-bagay' ay maaaring mas maraming mga lalagyan, teksto, imahe, kahit ano talaga. Mayroong ilang mga paghihigpit sa kung ano ang maaaring mapunta sa ilang mga tag, ngunit ang divs ay medyo pangkaraniwang bagay. Mayroon itong id ng top-bar . Gagamitin ito upang i-istilo ito ng CSS, at i-target ito sa JavaScript kung kinakailangan. Tiyaking mayroon ka lamang isang elemento na may isang partikular na id - dapat silang maging natatangi. Kung nais mong magkaroon ng magkatulad na pangalan ang maraming elemento, gumamit ng a klase sa halip - ito ang para sa mga ito ay dinisenyo! Narito ang CSS na kailangan mo upang i-istilo ito (ilagay sa tuktok sa loob ng iyong style tag):

html, body {
margin: 0;
padding: 0;
font-family: 'Helvetica', 'Arial'; /* initial fonts */
}
#top-bar {
width: 100%;
background: #F1F1F1; /* light gray */
border-bottom: 1px solid #D4D4D4; /* dark gray 'underline' */
height: 25px;
}

Pansinin kung paano ginagamit ang tanda ng hash (#, hashtag, pound sign) bago ang pangalan. Nangangahulugan ito na ang elemento ay isang ID. Kung gumagamit ka ng isang klase, gagamitin mo ang isang buong paghinto (.) Sa halip. Ang html at katawan ang mga tag ay nakatakda sa zero ang kanilang padding at margin. Pinipigilan nito ang anumang mga hindi nais na isyu sa spacing.

Panahon na upang magpatuloy sa logo at navbar. Bago ka magsimula, kailangan mo ng lalagyan upang ilagay ang nilalamang ito. Gawin natin itong isang klase (upang magamit mo itong muli sa paglaon), at dahil ito ay hindi isang tumutugong website, gawin itong 900 pixel ang lapad.

HTML:


CSS:

.normal-wrapper {
width: 900px;
margin: 0 auto;
padding: 15px 40px;
background: red;
overflow: auto;
}

Maaaring mahirap sabihin kung ano ang nangyayari hanggang matapos mo ang code, kaya maaaring maging kapaki-pakinabang na magdagdag ng (pansamantalang) kulay na background upang makita kung ano ang nangyayari:

background: red;

Panahon na upang lumikha ng logo ngayon. Kahanga-hanga ang font kinakailangan para sa mismong icon. Ang Font Awesome ay isang hanay ng mga icon na nakabalot bilang isang vector font - kasindak-sindak! Ang paunang code sa itaas ay na-setup na ang Font Kahanga-hanga, kaya't handa na ang lahat na!

Idagdag ang HTML na ito sa loob ang normal na balot div:



CSS:

.logo-icon {
color: #000000;
font-size: 60pt;
float: left;
}
h1 {
float: left;
margin: 21px 0 0 25px;
}

Huwag mag-alala tungkol sa iba pang mga font na hindi tumutugma sa disenyo - ayusin mo iyon sa paglaon. Kung nais mong gumamit ng iba't ibang mga icon, magtungo sa Font Kahanga-hanga Mga Icon pahina, at pagkatapos ay baguhin fa-volume-down sa pangalan ng icon na nais mong gamitin.

Paglipat sa navigation bar, gagamit ka ng isang hindi nakaayos na listahan ( ang ) para dito. Idagdag ang HTML na ito pagkatapos ang lalagyan ng logo (ngunit nasa loob pa rin ng normal na balot ):

Ang href ay ginagamit upang mag-link sa iba pang mga pahina. Ang website ng tutorial na ito ay walang anumang iba pang mga pahina, ngunit maaari mong ilagay ang pangalan at file path (kung kinakailangan) dito, hal. mga pagsusuri.html . Tiyaking inilagay mo ito sa loob ng parehong dobleng mga quote.

Narito ang CSS:

#navbar {
list-style-type: none; /* remove bullet points */
margin: 29px 0 0 0;
padding: 0;
float: right;
font-size: 16pt;
}
#navbar li {
display: inline; /* make items horizontal */
}
#navbar li a:link, #navbar li a:visited, #navbar li a:active {
text-decoration: none; /* remove underline */
color: #000000;
padding: 0 16px 0 10px; /* space links apart */
margin: 0;
border-right: 2px solid #B4B4B4; /* divider */
}
#navbar li a:link.last-link {
/* remove divider */
border-right: 0px;
}
#navbar li a:hover {
/* change color on hover (mouseover) */
color: #EB6361;
}

Nagsisimula ang CSS na ito sa isang hindi naayos na listahan . Tinatanggal nito ang mga puntos ng bala gamit ang listahan-style-type: wala; . Ang mga link ay spaced hiwalay ng kaunti, at bibigyan ng isang kulay kapag ipinatong mo ang iyong mouse sa kanila. Ang maliit na grey divider ay isang tamang hangganan sa bawat elemento, na pagkatapos ay aalisin para sa huling elemento gamit ang huling-link klase Narito kung ano ang hitsura nito:

Ang natitira lamang para sa seksyong ito ay ang pulang pahalang na highlight ng kulay. Idagdag ang HTML na ito pagkatapos ng normal na balot :

At narito ang CSS:

#top-color-splash {
width: 100%;
height: 4px;
background: #EB6361;
}

Tapos na ang tuktok na seksyon. Narito kung ano ang hitsura nito - medyo katulad sa disenyo di ba?

Pangunahing Lugar ng Nilalaman

Panahon na ngayon upang ilipat ang pangunahing lugar ng nilalaman - ang tinaguriang 'sa itaas ng kulungan'. Narito kung ano ang hitsura ng bahaging ito:

Ito ay isang simpleng simpleng bahagi, ilang teksto ng kaliwa na may isang imahe sa kanan. Ang lugar na ito ay magiging maluwag nahahati sa ikatlo, halos tinatayang ang Gintong Ratio .

Kakailanganin mo ang halimbawang imahe para sa bahaging ito. Kasama ito sa pag-download. Ang imaheng ito ay 670px ang lapad, at mula sa aming Panasonic Lumix DMC-G80 / G85 Review.

Idagdag ang HTML pagkatapos ang top-color-splash elemento:



Welcome!


Noise Media is a technology company specialising in tech reviews.


We’re very good at what we do, but unfortunately, we are not a real company.


Make sure you visit makeuseof.com for the full tutorial on how to build this website.

kung paano baguhin ang dpi sa gimp

Alternatively, check out our review of the Panasonic G80 shown on the right!






Pansinin kung paano ang normal na balot bumalik ang elemento (iyon ang kagalakan sa paggamit ng mga klase). Maaaring nagtataka ka kung bakit ang imahe ( img ) hindi malapit ang tag. Ito ay isang pansarang tag na pagsasara. Ang forward slash ( /> ) ay ipinapahiwatig nito, dahil hindi palaging may katuturan na kailangang isara ang isang tag.

CSS:

.one-third {
width: 40%;
float: left;
box-sizing: border-box; /* ensure padding and borders do not increase the size */
margin-top: 20px;
}
.two-third {
width: 60%;
float: left;
box-sizing: border-box; /* ensure padding and borders do not increase the size */
padding-left: 40px;
text-align: right;
margin-top: 20px;
}
.featured-image {
max-width: 500px; /* reduce image size while maintaining aspect ratio */
}
.no-margin-top {
margin-top: 0; /* remove margin on things like headers */
}

Ang pinakamahalagang katangian dito box-sizing: border-box; . Tinitiyak nito na ang mga elemento ay palaging magiging 40% o 60% ang lapad. Ang default (nang walang katangiang ito) ay ang iyong tinukoy na lapad kasama ang anumang padding, margin, at mga hangganan. Ang klase ng imahe ( tampok na imahe ) mayroong max-lapad ng 500px . Kung tumutukoy ka lamang ng isang dimensyon (isang lapad o isang taas), at iwanan ang iba pang blangko, muling baguhin ng laki ng css ang imahe habang pinapanatili ang ratio ng aspeto nito.

Lugar ng Quote

Lumikha tayo ng lugar ng quote. Narito kung ano ang hitsura nito:

Ito ay isa pang simpleng lugar. Naglalaman ito ng isang madilim na kulay-abong background, na may puting nakasentro na teksto.

Idagdag ang HTML na ito pagkatapos ang nakaraan normal na balot :



makeuseof is the best website ever


Joe Coburn



At pagkatapos ang CSS na ito:

#quote-area {
background: #363636;
color: #FFFFFF;
text-align: center;
padding: 15px 0;
}
h3 {
font-weight: normal;
font-size: 20pt;
margin-top: 0px;
}
h4 {
font-weight: normal;
font-size: 16pt;
margin-bottom: 0;
}

Walang masyadong nangyayari dito. Ang sukat ang pangunahing kinakailangan sa pagsasaayos - laki ng font, spacing, at iba pa. Narito kung ano ang hitsura ng buong bagay ngayon - nagsisimula nang magmukhang isang website!

Lugar ng Icon

Patuloy tayong magpatuloy - halos tapos na ito! Narito ang susunod na lugar na kailangang lumikha:

Ang bahaging ito ay gagamit ng maraming mga klase. Ang tatlong mga icon ay halos pareho, maliban sa nilalaman, kaya makatuwiran na gumamit ng mga klase sa halip na mga id. Idagdag ang HTML na ito pagkatapos ang nakaraan quote-area :






YouTube

Checkout our YouTube channel for more tech reviews, tutorials and giveaways!







Reviews

If you’re planning to buy a new gadget, check here first. We’ll give you in-depth reviews of the latest devices.







Buying Guides

At Buying Guides we strive to provide readers with the tools to get the best stuff for the lowest amount of money.



Ang tatlong mga icon na ito ay din Font-Kahanga-hanga . Ang HTML ay muling ginagamit ang normal na balot klase Narito ang CSS:

.icon-outer {
box-sizing: border-box; /* ensure padding and borders do not increase the size */
float: left;
width: 33.33%;
padding: 25px;
margin: 0;
text-align: center;
}
.icon-circle {
background: #EEEEEE;
color: #B4B4B4;
width: 200px;
height: 200px;
border-radius: 200px; /* make rounded corners */
margin: 0 auto;
border: 2px solid #D6D6D6;
box-sizing: border-box; /* ensure padding and borders do not increase the size */
font-size: 75pt;
padding: 30px 0 0 0;
cursor: pointer;
}
.icon-circle:hover {
/* change color on hover (mouseover) */
color: #FFFFFF;
background: #EB6361;
}
h5 {
margin: 15px 0 10px 0;
font-size: 20pt;
}

Mayroong ilang mga bagong bagay na nangyayari sa CSS. Ang mga bilugan na sulok ay itinatakda ng border-radius: 200px; . Ang pagtatakda ng halagang ito ay pareho sa mga resulta ng lapad sa isang perpektong bilog. Maaari mong bawasan ito kung mas gugustuhin mo ang higit pa sa isang parisukat na may bilugan na mga sulok. Pansinin kung paano inilalapat ang mga pagkilos na hover sa mga div - hindi ito limitado sa mga link lamang. Narito kung ano ang hitsura ng seksyong ito ngayon:

Ang huling bagay na dapat gawin ay ang footer! Ito ay talagang simple, dahil ito ay isang kulay-abo na lugar lamang na walang teksto. Idagdag ang HTML na ito pagkatapos ng mga lugar ng icon ' normal na balot :

Narito ang CSS:

#footer {
width: 100%;
background: #F1F1F1; /* light gray */
border-top: 1px solid #D4D4D4; /* dark gray 'topline' */
height: 150px;
}

Tingnan - talagang simpleng bagay.

Magdagdag ng Ilang Pizzazz

Iyon lang, tapos na ang pag-coding! Maaari mong ganap na iwanan ang mga bagay tulad ng mga ito, ito ay isang tapos na webpage. Maaari mong napansin gayunpaman, na hindi ito hitsura saktong tulad ng disenyo. Ang pangunahing dahilan para dito ay ang ginamit na mga font. Pag-uri-uriin natin iyan.

Ang font na ginamit para sa karamihan ng mga pamagat ay Maraming mga Pro . Kasama nito Adobe Lumikha ng Cloud, ngunit hindi ito magagamit bilang isang webbest. Ang font na kasalukuyang ginagamit sa webpage ay Helvetica . Mukha itong ok, kaya maaari mong iwanan ito tulad ng dati, gayunpaman PT Sans ay magagamit bilang isang webbest. Ang font na ginamit para sa lahat ng teksto ay Ang PT Serif , na magagamit bilang isang webbest.

Ang mga webfonts ay isang simpleng proseso. Tulad ng paglo-load ng isang bagong font sa iyong computer, ang mga webpage ay maaaring mag-load ng mga font kapag hiniling. Isa sa mga pinakamahusay na paraan upang magawa ito ay sa pamamagitan ng Mga Font ng Google .

Idagdag ang CSS na ito upang lumipat sa mas mahusay na mga font:

@import url('https://fonts.googleapis.com/css?family=PT+Sans');
@import url('https://fonts.googleapis.com/css?family=PT+Serif');
h1, h2, h4, h5, h6 {
font-family: 'PT Sans', 'Helvetica', 'Arial';
}

Ngayon baguhin ang iyong mga elemento ng html at katawan upang magamit ang mga bagong font:

font-family: 'PT Serif', 'Helvetica', 'Arial';

Pansinin kung paano ang elemento ng h3 ay hindi kasama sa listahan - ito ay magiging default sa PT-Serif sa halip na PT-Sans .

Bilang isang pangwakas na kagandahan, gumamit tayo ng ilang JavaScript upang mag-scroll sa tatlong magkakaibang itinatampok na mga imahe. Kakailanganin mong Larawan_2 at Larawan_3 para sa bahaging ito, at muli, opsyonal ito. Ang website ay ganap na gumagana sa puntong ito nang walang tampok na ito. Narito kung ano ang magiging hitsura nito (pinabilis):

Baguhin ang iyong HTML upang magsama ng tatlong tampok na mga imahe. Pansinin kung paano dalawa sa mga ito ay mayroong isang klase ng CSS ng nakatago . Ang bawat imahe ay binigyan ng isang ID upang ma-target ng JavaScript ang bawat isa sa kanila nang nakapag-iisa.





Narito ang kinakailangang CSS upang maitago ang sobrang itinampok na mga imahe:

.hidden {
display: none;
}

Ngayong naalagaan ang HTML at CSS, lumipat tayo sa JavaScript. Kapaki-pakinabang na maunawaan ang Document Object Model (DOM) para sa bahaging ito, ngunit hindi ito isang kinakailangan.

Hanapin ang iskrip lugar sa ilalim ng pahina:


/* JavaScript goes here, at the bottom of the page */

Idagdag ang sumusunod na JavaScript sa loob ng iskrip tag:

/* JavaScript goes here, at the bottom of the page */
$(document).ready(function() {
// run once the page is ready
var time = 2500;
// get the image containers
$im1 = $('#f-image-1');
$im2 = $('#f-image-2');
$im3 = $('#f-image-3');
setInterval(function(){
// call function every x milliseconds (defined in time variable above)
changeImage();
}, time);
var currentImage = 1;
function changeImage(){
switch(currentImage) {
case 1:
// show image 2
$im1.hide();
$im2.show();
$im3.hide();
currentImage = 2;
break;
case 2:
// show image 3
$im1.hide();
$im2.hide();
$im3.show();
currentImage = 3;
break;
default:
// show image 1
$im1.show();
$im2.hide();
$im3.hide();
currentImage = 1;
}
}
});

Mayroong ilang mga bagay na nangyayari dito. Ang code ay nakapaloob sa loob $ (dokumento). handa na () . Nangangahulugan ito na tatakbo ito kapag natapos na ng iyong browser ang pag-render ng pahina - ito ay isang mahusay na kasanayan. Ang setInterval () Ginagamit ang pagpapaandar upang tawagan ang ChangeImage () regular na gumana sa isang paunang natukoy na agwat sa milliseconds (1000 milliseconds = 1 segundo). Iniimbak ito sa oras variable. Maaari mong taasan o bawasan ito upang mapabilis o mabagal ang pag-scroll. Panghuli, isang simpleng pahayag ng kaso ang ginamit upang ipakita ang iba't ibang mga imahe, at subaybayan ang kasalukuyang nagpapakita ng imahe.

Hamon sa Coding

Ayan yun! Sana marami kang natutunan sa proseso. Kung gusto mo ng isang hamon, at nais mong subukan ang iyong bagong kasanayang nahanap, bakit hindi subukang ipatupad ang mga pagbabagong ito:

Magdagdag ng isang footer: Magdagdag ng ilang teksto sa footer (pahiwatig: maaari mong muling gamitin ang normal na balot at isang-ikatlo / dalawa-pangatlo mga klase.).

Pagbutihin ang pag-scroll sa imahe: Baguhin ang JavaScript upang buhayin ang mga pagbabago sa imahe (pahiwatig: tingnan ang jQuery maglaho at Animated ).

Magpatupad ng maraming mga quote: Baguhin ang mga quote upang baguhin sa pagitan ng isa sa maraming magkakaibang mga (pahiwatig: tingnan ang code ng pag-scroll ng imahe para sa isang panimulang punto).

Mag-set up ng isang server: Mag-setup ng isang server at magpadala ng data sa pagitan ng webpage at ng server (pahiwatig: basahin ang aming gabay sa JSON at Python).

nakakatuwang mga bagay na dapat gawin sa pag-zoom

Sa sandaling komportable ka sa paggamit ng JavaScript o kung mayroon kang anumang karanasan kay Ruby, maaari mong subukan ang iyong kamay sa paglikha ng isang website na may isang static na tagabuo ng website tulad ng GatsbyJS o Jekyll.

Magbahagi Magbahagi Mag-tweet Email Paano Baguhin ang hitsura at pakiramdam ng iyong Windows 10 Desktop

Nais bang malaman kung paano gawing mas mahusay ang Windows 10? Gamitin ang simpleng mga pagpapasadya na ito upang gawin ang iyong Windows 10 na iyong sarili.

Basahin Susunod Mga Kaugnay na Paksa
  • Programming
  • HTML
  • Disenyo ng web
  • CSS
Tungkol sa May-akda Joe Coburn(136 Mga Artikulo Na-publish)

Si Joe ay nagtapos sa Computer Science mula sa University of Lincoln, UK. Siya ay isang propesyonal na developer ng software, at kapag hindi siya lumilipad ng mga drone o sumusulat ng musika, madalas siyang matagpuan na kumukuha ng mga larawan o gumawa ng mga video.

Higit pa Mula kay Joe Coburn

Mag-subscribe sa aming newsletter

Sumali sa aming newsletter para sa mga tip sa tech, pagsusuri, libreng ebook, at eksklusibong deal!

Mag-click dito upang mag-subscribe