Cara Membuat Laman Web: Untuk Pemula

Cara Membuat Laman Web: Untuk Pemula

Adakah anda selalu mahu membuat laman web? Mungkin anda telah membaca sebahagian HTML kami ( memahami HTML ) dan tutorial CSS, tetapi tidak tahu bagaimana menggunakan bahasa tersebut pada projek yang lebih besar.





Hari ini saya akan membimbing anda melalui proses membuat laman web yang lengkap dari awal. Jangan bimbang jika ini seperti tugas yang sukar, saya akan membimbing anda melalui setiap langkah.



Anda akan menghasilkan laman web ini menggunakan HTML, CSS, dan JavaScript dengan sentuhan jQuery (panduan untuk jQuery). Anda tidak akan melakukan apa-apa sungguh pendarahan, jadi kod ini harus berfungsi dengan baik di kebanyakan penyemak imbas moden.





Sekiranya anda tidak yakin dengan CSS, lihat di Panduan CSS di W3Schools.com .

Rekaan

Inilah reka bentuk laman web ini. Lihat gambar beresolusi tinggi jika anda mahukan penampilan yang lebih baik, atau lebih baik lagi, muat turun projek penuh di sini.



Saya merancang laman web ini untuk sebuah syarikat fiksyen di Adobe Photoshop 2017. Sekiranya anda berminat, pastikan anda mengambil fail .PSD dari muat turun bundle. Inilah yang anda dapat dalam fail photoshop:

Di dalam JPA, anda akan dapati semua lapisan dikelompokkan, diberi nama, dan berkod warna:



Anda memerlukan beberapa fon yang dipasang agar semuanya kelihatan betul. Yang pertama adalah Fon Hebat , digunakan untuk semua ikon. Dua fon yang lain adalah PT Serif dan Myriad Pro (disertakan dengan Photoshop). Sekiranya anda tidak pasti cara memasang fon, baca panduan kami.

Jangan risau jika anda tidak mempunyai Adobe Photoshop , anda tidak memerlukannya untuk meneruskan.



Kod Permulaan

Sekarang reka bentuknya jelas, mari mulakan pengekodan! Buat fail baru di editor teks kegemaran anda (saya gunakan Teks Luhur 3 ). Simpan ini sebagai indeks.html . Anda boleh memanggil ini apa sahaja yang anda suka, sebab banyak halaman dipanggil indeks adalah kerana cara pelayan web berfungsi. Konfigurasi lalai untuk sebilangan besar pelayan adalah untuk melayani halaman index.html jika tidak ada halaman yang ditentukan.

Sekiranya anda tidak mahu mengetahui perinciannya, ambil kod lengkap dari muat turun.

Inilah kod yang anda perlukan:





Noise Media


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





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


Ini melakukan beberapa perkara:

  • Menentukan HTML minimum yang diperlukan.
  • Menentukan tajuk halaman 'Media Kebisingan'
  • Termasuk jQuery yang dihoskan di Google CDN (apa itu CDN).
  • Termasuk Font Awesome yang dihoskan di CDN Google.
  • Mentakrifkan a gaya tag untuk menulis CSS anda.
  • Mentakrifkan a skrip tag untuk menulis JavaScript anda.

Simpan semula fail anda dan buka di penyemak imbas web anda. Anda mungkin tidak akan melihat banyak perkara, dan ia pasti tidak akan kelihatan seperti laman web sekarang.

Perhatikan bagaimana tajuk halaman Media Kebisingan . Ini ditentukan oleh teks di dalam tajuk teg. Ini telah berada di dalam kepala tanda nama.

bolehkah saya meningkatkan memori pada macbook pro

Pengepala

Mari buat pengepala. Begini rupa:

Mari mulakan dengan sedikit kelabu di bahagian atas. Ia berwarna kelabu muda dengan sedikit kelabu gelap di bawahnya. Berikut adalah dekat:

Tambahkan HTML ini di dalam badan teg di bahagian atas:

Semasa anda di sini, mari kita pecahkan ini. A div seperti bekas untuk memasukkan barang-barang lain. 'Barang lain' ini boleh menjadi lebih banyak bekas, teks, gambar, dan apa sahaja. Terdapat beberapa sekatan pada apa yang boleh masuk ke tag tertentu, tetapi div adalah perkara yang cukup umum. Ia mempunyai ID daripada bar atas . Ini akan digunakan untuk menggayakannya dengan CSS, dan menargetkannya dengan JavaScript jika diperlukan. Pastikan anda hanya mempunyai satu elemen dengan id tertentu - elemen tersebut mestilah unik. Sekiranya anda mahu beberapa elemen mempunyai nama yang sama, gunakan a kelas sebaliknya - ia adalah reka bentuk yang sesuai untuk mereka! Inilah CSS yang anda perlukan untuk menggayakannya (letakkan di bahagian atas di dalam anda gaya teg):

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;
}

Perhatikan bagaimana tanda hash (#, hashtag, tanda paun) digunakan sebelum nama. Ini bermaksud elemen tersebut adalah ID. Sekiranya anda menggunakan kelas, anda akan menggunakan noktah (.) Sebagai gantinya. The html dan badan tag mempunyai padding dan margin ditetapkan kepada sifar. Ini mengelakkan masalah jarak yang tidak diingini.

Sudah tiba masanya untuk beralih ke logo dan navbar. Sebelum memulakan, anda memerlukan wadah untuk memasukkan kandungan ini. Mari jadikan ini kelas (supaya anda dapat menggunakannya semula di kemudian hari), dan seperti ini tidak laman web yang responsif, selebar 900 piksel.

HTML:


CSS:

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

Adalah sukar untuk mengetahui apa yang berlaku sehingga anda menyelesaikan kod, jadi sangat berguna untuk menambahkan latar belakang berwarna (sementara) untuk melihat apa yang berlaku:

background: red;

Sudah tiba masanya untuk membuat logo sekarang. Fon Hebat diperlukan untuk ikon itu sendiri. Font Awesome adalah sekumpulan ikon yang dibungkus sebagai fon vektor - hebat! Kod awal di atas sudah menyediakan Font Awesome, jadi semuanya sudah siap!

Tambahkan HTML ini dalam yang pembungkus biasa div:



CSS:

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

Jangan risau fon lain tidak sesuai dengan reka bentuk - anda akan merapikannya di kemudian hari. Sekiranya anda ingin menggunakan ikon yang berbeza, pergi ke Ikon Hebat Fon halaman, dan kemudian tukar kelantangan-turun ke nama ikon yang ingin anda gunakan.

Melangkah ke bar navigasi, anda akan menggunakan senarai yang tidak tersusun ( yang ) untuk ini. Tambahkan HTML ini selepas yang logo-bekas (tetapi masih di dalam pembungkus biasa ):

The href digunakan untuk memaut ke halaman lain. Laman web tutorial ini tidak mempunyai halaman lain, tetapi anda boleh meletakkan nama dan jalur fail (jika diperlukan) di sini, mis. ulasan.html . Pastikan anda memasukkannya ke dalam kedua petikan ganda.

Inilah 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;
}

CSS ini dimulakan dengan senarai yang tidak tersusun . Ia kemudian menghilangkan titik peluru menggunakan senarai-gaya-jenis: tiada; . Pautan dijauhkan sedikit, dan diberi warna apabila anda mengarahkan tetikus ke atasnya. Pembahagi kelabu kecil adalah sempadan kanan pada setiap elemen, yang kemudian dikeluarkan untuk elemen terakhir menggunakan pautan terakhir kelas. Begini rupa:

Yang tinggal untuk bahagian ini ialah sorotan warna mendatar merah. Tambahkan HTML ini selepas pembungkus biasa :

Dan inilah CSS:

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

Itulah bahagian teratas yang dilakukan. Begini rupanya - hampir sama dengan reka bentuknya kan?

Kawasan Kandungan Utama

Sekarang masanya untuk bergerak di kawasan kandungan utama - yang disebut 'paro atas'. Inilah rupa bahagian ini:

Ini adalah bahagian yang cukup sederhana, beberapa teks sebelah kiri dengan gambar di sebelah kanan. Kawasan ini akan secara longgar terbahagi kepada pertiga, kira-kira menghampiri Nisbah emas .

Anda memerlukan gambar contoh untuk bahagian ini. Ini termasuk dalam muat turun. Lebar gambar ini berukuran 670px, dan dari Ulasan Panasonic Lumix DMC-G80 / G85 kami.

Tambahkan HTML selepas yang warna-percikan atas unsur:



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.

cara mendapatkan imei di iphone

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






Perhatikan bagaimana pembungkus biasa elemen telah kembali (itulah kegembiraan menggunakan kelas). Anda mungkin tertanya-tanya mengapa gambar itu ( img ) teg tidak ditutup. Ini adalah tanda penutup diri. Slash ke hadapan ( /> ) menunjukkan ini, kerana tidak selalu masuk akal untuk menutup teg.

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 */
}

Atribut yang paling penting di sini ialah ukuran kotak: kotak sempadan; . Ini memastikan elemen sentiasa lebar 40% atau 60%. Lalai (tanpa atribut ini) adalah lebar yang anda tentukan ditambah padding, margin, dan border. Kelas gambar ( gambar-ciri ) mempunyai lebar maksimum daripada 500 piksel . Sekiranya anda hanya menentukan satu dimensi (lebar atau tinggi), dan kosongkan yang lain, css akan mengubah ukuran gambar sambil mengekalkan nisbah aspeknya.

Kawasan Petikan

Mari buat kawasan petikan. Begini rupa:

Ini adalah kawasan lain yang mudah. Ia mengandungi latar belakang kelabu gelap, dengan teks berpusat putih.

Tambahkan HTML ini selepas sebelum ini pembungkus biasa :



makeuseof is the best website ever


Joe Coburn



Dan kemudian CSS ini:

#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;
}

Tidak banyak yang berlaku di sini. Ukuran adalah penyesuaian utama yang diperlukan - saiz fon, jarak, dan sebagainya. Inilah rupa keseluruhannya sekarang - ia mula kelihatan seperti laman web!

Kawasan Ikon

Mari terus tekan - hampir selesai! Inilah kawasan seterusnya yang perlu dibuat:

Bahagian ini akan menggunakan beberapa kelas. Ketiga-tiga ikon itu hampir sama, kecuali kandungannya, jadi masuk akal untuk menggunakan kelas dan bukannya id. Tambahkan HTML ini selepas sebelum ini petikan-kawasan :






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.



Ketiga-tiga ikon ini juga Fon-Hebat . HTML sekali lagi menggunakan pembungkus biasa kelas. Inilah 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;
}

Terdapat beberapa perkara baru yang berlaku di CSS. Sudut bulat sedang disiapkan oleh sempadan-jejari: 200px; . Menetapkan nilai ini sama dengan lebar menghasilkan lingkaran sempurna. Anda boleh mengurangkannya jika anda lebih suka persegi dengan sudut bulat. Perhatikan bagaimana tindakan hover diterapkan pada div - ia tidak terhad kepada pautan sahaja. Inilah rupa bahagian ini sekarang:

Perkara terakhir yang perlu dilakukan ialah footer! Ini sangat mudah, kerana hanya kawasan kelabu tanpa teks. Tambahkan HTML ini selepas kawasan ikon ' pembungkus biasa :

Inilah CSS:

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

Lihat - barang yang sangat sederhana.

Tambah Beberapa Pizzazz

Itu sahaja, pengekodan selesai! Anda benar-benar boleh meninggalkan perkara-perkara sebagaimana adanya, ini adalah laman web yang sudah siap. Anda mungkin menyedari bahawa ia tidak kelihatan betul-betul seperti reka bentuk. Sebab utama untuk ini adalah fon yang digunakan. Mari kita selesaikannya.

Fon yang digunakan untuk kebanyakan tajuk adalah Myriad Pro . Ini disertakan dengan Adobe Buat Awan, tetapi tidak tersedia sebagai fon web. Fon yang kini digunakan di laman web adalah Helvetica . Ini kelihatan baik, jadi anda boleh membiarkannya seperti ini PT Sans boleh didapati sebagai webfont. Fon yang digunakan untuk semua teks adalah PT Serif , yang tersedia sebagai fon web.

Webfonts adalah proses yang mudah. Sama seperti memuatkan fon baru ke komputer anda, laman web dapat memuatkan fon mengikut permintaan. Salah satu kaedah terbaik untuk melakukan ini adalah melalui Fon Google .

Tambahkan CSS ini untuk beralih ke fon yang lebih baik:

@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';
}

Sekarang ubah elemen html dan badan anda untuk menggunakan fon baru:

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

Perhatikan bagaimana elemen h3 tidak termasuk dalam senarai - ini akan menjadi lalai PT-Serif bukannya PT-Sans .

Sebagai keselesaan terakhir, mari kita menggunakan beberapa JavaScript untuk menelusuri tiga gambar unggulan yang berbeza. Anda perlu Gambar_2 dan Gambar_3 untuk bahagian ini, dan sekali lagi, ia adalah pilihan. Laman web berfungsi sepenuhnya pada masa ini tanpa ciri ini. Beginilah rupanya (mempercepat):

Ubah suai HTML anda untuk memasukkan tiga gambar unggulan. Perhatikan bagaimana dua dari mereka mempunyai kelas CSS tersembunyi . Setiap gambar telah diberi ID sehingga JavaScript dapat menargetkan masing-masing secara bebas.





Inilah CSS yang diperlukan untuk menyembunyikan gambar tambahan:

.hidden {
display: none;
}

Sekarang setelah HTML dan CSS diurus, mari beralih ke JavaScript. Adalah berguna untuk memahami Model Objek Dokumen (DOM) untuk bahagian ini, tetapi itu bukan syarat.

Cari skrip kawasan di bahagian bawah halaman:


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

Tambahkan JavaScript berikut di dalam skrip teg:

/* 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;
}
}
});

Terdapat beberapa perkara yang berlaku di sini. Kod tersebut terdapat di dalam $ (dokumen). sudah () . Ini bermaksud ia akan berjalan setelah penyemak imbas anda selesai membuat halaman - ini adalah amalan yang baik. The setInterval () fungsi digunakan untuk memanggil ubah gambar () berfungsi dengan kerap pada selang masa yang ditentukan dalam milisaat (1000 milisaat = 1 saat). Ini disimpan di masa pemboleh ubah. Anda boleh menambah atau mengurangkan ini untuk mempercepat atau memperlahankan tatal. Akhirnya, pernyataan kes sederhana digunakan untuk menunjukkan gambar yang berbeza, dan menjejaki gambar yang sedang ditunjukkan.

Cabaran Pengekodan

Itu sahaja! Semoga anda banyak belajar sepanjang proses tersebut. Sekiranya anda mahukan cabaran, dan ingin menguji kemahiran baru anda, mengapa tidak cuba melaksanakan pengubahsuaian ini:

Tambahkan pengaki: Tambahkan beberapa teks ke dalam footer (petunjuk: anda boleh menggunakan semula pembungkus biasa dan satu pertiga / dua pertiga kelas.).

Tingkatkan tatal gambar: Ubah suai JavaScript untuk menghidupkan perubahan gambar (petunjuk: lihat jQuery pudar dan Animasi ).

Laksanakan pelbagai petikan: Ubah petikan untuk menukar antara salah satu dari beberapa yang berbeza (petunjuk: lihat kod tatal gambar untuk titik permulaan).

Sediakan pelayan: Sediakan pelayan dan hantar data antara halaman web dan pelayan (petunjuk: baca panduan kami ke JSON dan Python).

cara pembawa kunci telefon bimbit android

Setelah anda selesa menggunakan JavaScript atau jika anda mempunyai pengalaman dengan Ruby, anda boleh berusaha membuat laman web dengan pembangun laman web statik seperti GatsbyJS atau Jekyll.

Berkongsi Berkongsi Tweet E-mel Cara Mengubah Rupa dan Rasa Desktop Windows 10 Anda

Ingin tahu bagaimana menjadikan Windows 10 kelihatan lebih baik? Gunakan penyesuaian mudah ini untuk menjadikan Windows 10 milik anda sendiri.

Baca Seterusnya Topik-topik yang berkaitan
  • Pengaturcaraan
  • HTML
  • Reka Bentuk Web
  • CSS
Mengenai Pengarang Joe Coburn(136 Artikel Diterbitkan)

Joe adalah lulusan Sains Komputer dari University of Lincoln, UK. Dia seorang pembangun perisian profesional, dan ketika dia tidak terbang drone atau menulis muzik, dia sering didapati mengambil gambar atau menghasilkan video.

Lagi Dari Joe Coburn

Langgan buletin kami

Sertailah buletin kami untuk mendapatkan petua, ulasan, ebook percuma, dan tawaran eksklusif!

Klik di sini untuk melanggan