Home-theater-designers
Bạn đã luôn muốn tạo một trang web? Có thể bạn đã đọc một số HTML của chúng tôi ( hiểu HTML ) và hướng dẫn CSS, nhưng không biết cách sử dụng những ngôn ngữ đó trong một dự án lớn hơn.
Hôm nay tôi sẽ hướng dẫn bạn quy trình tạo một trang web hoàn chỉnh từ đầu. Đừng lo lắng nếu đây có vẻ là một nhiệm vụ khó khăn, tôi sẽ hướng dẫn bạn thực hiện từng bước.
Bạn sẽ tạo trang web này bằng cách sử dụng HTML, CSS và JavaScript với jQuery (hướng dẫn về jQuery). Bạn sẽ không làm gì cả có thật không lợi nhuận, vì vậy mã này sẽ hoạt động khá tốt trong hầu hết các trình duyệt hiện đại.
Nếu bạn không chắc chắn về bất kỳ CSS nào, hãy xem Hướng dẫn CSS tại W3Schools.com .
Thiết kế
Đây là thiết kế cho trang web này. Hãy xem hình ảnh có độ phân giải cao nếu bạn muốn có cái nhìn đẹp hơn, hoặc thậm chí tốt hơn, hãy tải xuống toàn bộ dự án tại đây.
Tôi thiết kế trang web này cho một công ty hư cấu ở Adobe Photoshop 2017. Nếu bạn quan tâm, hãy đảm bảo rằng bạn lấy tệp .PSD từ tải xuống gói. Đây là những gì bạn nhận được trong tệp photoshop:
Bên trong PSD, bạn sẽ tìm thấy tất cả các lớp được nhóm, đặt tên và mã màu:
Bạn sẽ cần cài đặt một vài phông chữ để mọi thứ trông chính xác. Đầu tiên là Phông chữ tuyệt vời , được sử dụng cho tất cả các biểu tượng. Hai phông chữ còn lại là PT Serif và Myriad Pro (đi kèm với Photoshop). Nếu bạn không chắc chắn về cách cài đặt phông chữ, hãy đọc hướng dẫn của chúng tôi.
Đừng lo lắng nếu bạn không có Adobe Photoshop , bạn không cần nó để tiếp tục.
Mã ban đầu
Bây giờ thiết kế đã rõ ràng, hãy bắt đầu viết mã! Tạo một tệp mới trong trình soạn thảo văn bản yêu thích của bạn (tôi đang sử dụng Văn bản siêu phàm 3 ). Lưu cái này dưới dạng index.html . Bạn có thể gọi đây là bất cứ thứ gì bạn thích, lý do nhiều trang được gọi là chỉ mục là do cách thức hoạt động của máy chủ web. Cấu hình mặc định cho phần lớn các máy chủ là phục vụ trang index.html nếu không có trang nào được chỉ định.
Nếu bạn không muốn tìm hiểu chi tiết, hãy lấy mã đầy đủ từ bản tải xuống.
Đây là mã bạn cần:
Noise Media
/* CSS goes here, at the top of the page */
/* JavaScript goes here, at the bottom of the page */
Điều này thực hiện một số điều:
- Xác định HTML tối thiểu cần thiết.
- Xác định tiêu đề trang là 'Noise Media'
- Bao gồm jQuery được lưu trữ trên Google CDN (CDN là gì).
- Bao gồm Font Awesome được lưu trữ trên Google CDN.
- Xác định một Phong cách để ghi CSS của bạn vào.
- Xác định một kịch bản để ghi JavaScript của bạn vào.
Lưu tệp của bạn một lần nữa và mở nó trong trình duyệt web của bạn. Bạn có thể sẽ không nhận thấy nhiều, và chắc chắn nó sẽ không giống như một trang web.
Chú ý tiêu đề trang như thế nào Phương tiện tiếng ồn . Điều này được xác định bởi văn bản bên trong chức vụ nhãn. Cái này có ở bên trong cái đầu các thẻ.
cách chạy mac OS trên windows
Tiêu đề
Hãy tạo tiêu đề. Đây là những gì trông giống như:
Hãy bắt đầu với một chút màu xám ở trên cùng. Đó là một màu xám nhạt với một chút xám đậm bên dưới. Đây là cận cảnh:
Thêm HTML này bên trong cơ thể người ở đầu:
Khi bạn ở đây, hãy chia nhỏ điều này. MỘT div giống như một thùng chứa để đặt những thứ khác vào. 'Những thứ khác' này có thể là nhiều thùng chứa hơn, văn bản, hình ảnh, bất cứ thứ gì thực sự. Có một số hạn chế về những gì có thể đi vào các thẻ nhất định, nhưng div là những thứ khá chung chung. Nó có một Tôi của thanh trên cùng . Điều này sẽ được sử dụng để tạo kiểu bằng CSS và nhắm mục tiêu nó bằng JavaScript nếu được yêu cầu. Đảm bảo rằng bạn chỉ có một phần tử với một id cụ thể - chúng phải là duy nhất. Nếu bạn muốn nhiều phần tử có cùng tên, hãy sử dụng lớp thay vào đó - đó là những gì chúng được thiết kế cho! Đây là CSS bạn cần để tạo kiểu cho nó (đặt ở trên cùng bên trong Phong cách nhãn):
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;
}Lưu ý cách sử dụng dấu thăng (#, hashtag, dấu thăng) trước tên. Điều này có nghĩa là phần tử là một ID. Nếu bạn đang sử dụng một lớp, bạn sẽ sử dụng dấu dừng đầy đủ (.) Để thay thế. Các html và cơ thể người các thẻ có phần đệm và lề của chúng được đặt thành 0. Điều này ngăn chặn mọi vấn đề về khoảng cách không mong muốn.
Đã đến lúc chuyển sang biểu trưng và thanh điều hướng. Trước khi bắt đầu, bạn cần một vùng chứa để đưa nội dung này vào. Hãy biến nó thành một lớp (để bạn có thể sử dụng lại nó sau này), và vì đây là không phải một trang web đáp ứng, hãy làm cho nó rộng 900 pixel.
HTML:
CSS:
.normal-wrapper {
width: 900px;
margin: 0 auto;
padding: 15px 40px;
background: red;
overflow: auto;
}Có thể khó biết điều gì đang xảy ra cho đến khi bạn hoàn thành mã, vì vậy, có thể hữu ích nếu thêm nền màu (tạm thời) để xem điều gì đang xảy ra:
background: red;Đã đến lúc tạo logo bây giờ. Phông chữ tuyệt vời là cần thiết cho chính biểu tượng. Font Awesome là một tập hợp các biểu tượng được đóng gói dưới dạng phông chữ vector - thật tuyệt vời! Đoạn mã ban đầu ở trên đã được thiết lập Font Awesome, vì vậy tất cả đã sẵn sàng!
Thêm HTML này bên trong NS trình bao bọc bình thường div:
CSS:
.logo-icon {
color: #000000;
font-size: 60pt;
float: left;
}
h1 {
float: left;
margin: 21px 0 0 25px;
}Đừng lo lắng về việc các phông chữ khác không phù hợp với thiết kế - bạn sẽ dọn dẹp chúng sau này. Nếu bạn muốn sử dụng các biểu tượng khác nhau, hãy chuyển đến phần Biểu tượng phông chữ tuyệt vời trang, và sau đó thay đổi fa-giảm âm lượng đến tên của biểu tượng bạn muốn sử dụng.
Di chuyển vào thanh điều hướng, bạn sẽ sử dụng một danh sách không có thứ tự ( NS ) cho điều này. Thêm HTML này sau NS logo-container (nhưng vẫn bên trong trình bao bọc bình thường ):
Các href được sử dụng để liên kết đến các trang khác. Trang web hướng dẫn này không có bất kỳ trang nào khác, nhưng bạn có thể đặt tên và đường dẫn tệp (nếu cần) tại đây, ví dụ: reviews.html . Hãy chắc chắn rằng bạn đặt điều này bên trong cả hai dấu ngoặc kép.
Đây là 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 này bắt đầu bằng một danh sách không có thứ tự . Sau đó, nó loại bỏ các dấu đầu dòng bằng cách sử dụng list-style-type: none; . Các liên kết cách xa nhau một chút và có màu khi bạn di chuột qua chúng. Dải phân cách nhỏ màu xám là đường viền bên phải trên mỗi phần tử, sau đó được xóa cho phần tử cuối cùng bằng cách sử dụng liên kết cuối cùng lớp. Đây là những gì trông giống như:
Tất cả những gì còn lại cho phần này là phần nổi bật màu đỏ nằm ngang. Thêm HTML này sau trình bao bọc bình thường :
Và đây là CSS:
#top-color-splash {
width: 100%;
height: 4px;
background: #EB6361;
}Đó là phần trên cùng được thực hiện. Đây là những gì nó trông giống như - khá giống với thiết kế phải không?
Khu vực nội dung chính
Bây giờ đã đến lúc chuyển sang lĩnh vực nội dung chính - cái gọi là 'trong màn hình đầu tiên'. Đây là phần này trông như thế nào:
Đây là một phần khá đơn giản, một số văn bản của bên trái với một hình ảnh ở bên phải. Khu vực này sẽ lỏng lẻo được chia thành một phần ba, gần đúng với Tỉ lệ vàng .
Bạn sẽ cần hình ảnh mẫu cho phần này. Nó được bao gồm trong bản tải xuống. Hình ảnh này rộng 670px và là từ Đánh giá Panasonic Lumix DMC-G80 / G85 của chúng tôi.
Thêm HTML sau NS màu sắc hàng đầu yếu tố:
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.
làm thế nào để biết nếu điện thoại di động được nghe trộm
Alternatively, check out our review of the Panasonic G80 shown on the right!
Chú ý làm thế nào trình bao bọc bình thường phần tử đã trở lại (đó là niềm vui khi sử dụng các lớp). Bạn có thể tự hỏi tại sao hình ảnh ( img ) không đóng. Đây là một thẻ tự đóng. Dấu gạch chéo về phía trước ( /> ) chỉ ra điều này, vì nó không phải lúc nào cũng có ý nghĩa khi phải đóng một thẻ.
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 */
}Thuộc tính quan trọng nhất ở đây là box-sizing: border-box; . Điều này đảm bảo các phần tử luôn có chiều rộng 40% hoặc 60%. Mặc định (không có thuộc tính này) là chiều rộng được chỉ định của bạn cộng với bất kỳ phần đệm, lề và đường viền nào. Lớp hình ảnh ( hình ảnh nổi bật ) có một chiều rộng tối đa của 500px . Nếu bạn chỉ chỉ định một kích thước (chiều rộng hoặc chiều cao) và để trống chiều còn lại, css sẽ thay đổi kích thước hình ảnh trong khi vẫn duy trì tỷ lệ khung hình.
Khu vực báo giá
Hãy tạo khu vực báo giá. Đây là những gì nó trông như thế này:
Đây là một khu vực đơn giản khác. Nó có một nền màu xám đậm, với văn bản ở giữa màu trắng.
Thêm HTML này sau trước đó trình bao bọc bình thường :
makeuseof is the best website ever
Joe Coburn
Và sau đó CSS này:
#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;
}Không có nhiều chuyện xảy ra ở đây. Định cỡ là điều chỉnh chính cần thiết - cỡ chữ, khoảng cách, v.v. Đây là toàn bộ mọi thứ bây giờ trông như thế nào - nó bắt đầu trông giống như một trang web!
Khu vực biểu tượng
Hãy tiếp tục nhấn - nó gần hoàn thành! Đây là khu vực tiếp theo cần tạo:
Phần này sẽ sử dụng một số lớp. Ba biểu tượng hầu hết giống nhau, ngoại trừ nội dung, vì vậy sẽ hợp lý khi sử dụng các lớp thay vì id. Thêm HTML này sau trước đó khu vực báo giá :
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.
Ba biểu tượng này cũng là Font-Awesome . HTML một lần nữa sử dụng trình bao bọc bình thường lớp. Đây là 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;
}Có một số điều mới đang diễn ra trong CSS. Các góc tròn đang được thiết lập bởi bán kính đường viền: 200px; . Đặt giá trị này giống với chiều rộng sẽ tạo ra một hình tròn hoàn hảo. Bạn có thể giảm điều này nếu bạn muốn có hình vuông với các góc tròn hơn. Lưu ý cách các hành động di chuột được áp dụng cho các div - nó không chỉ giới hạn ở các liên kết. Đây là giao diện của phần này bây giờ:
Chân trang
Điều cuối cùng cần làm là footer! Điều này thực sự đơn giản, vì nó chỉ là một vùng màu xám không có văn bản. Thêm HTML này sau các khu vực biểu tượng ' trình bao bọc bình thường :
Đây là CSS:
#footer {
width: 100%;
background: #F1F1F1; /* light gray */
border-top: 1px solid #D4D4D4; /* dark gray 'topline' */
height: 150px;
}Hãy xem - những thứ thực sự đơn giản.
Thêm một số Pizzazz
Vậy là xong, mã hóa đã xong! Bạn hoàn toàn có thể để mọi thứ như hiện tại, đó là một trang web đã hoàn thiện. Tuy nhiên, bạn có thể nhận thấy rằng nó trông không chính xác như thiết kế. Lý do chính cho điều này là các phông chữ được sử dụng. Hãy phân loại nó ra.
Phông chữ được sử dụng cho hầu hết các tiêu đề là Myriad Pro . Điều này đi kèm với Adobe Tạo Đám mây, nhưng nó không khả dụng dưới dạng webfont. Phông chữ hiện được sử dụng trên trang web là Helvetica . Điều này có vẻ ổn, vì vậy bạn có thể để nguyên như vậy PT Sans có sẵn như một webfont. Phông chữ được sử dụng cho tất cả văn bản là PT Serif , có sẵn dưới dạng webfont.
Webfonts là một quá trình đơn giản. Cũng giống như tải một phông chữ mới vào máy tính của bạn, các trang web có thể tải phông chữ theo yêu cầu. Một trong những cách tốt nhất để làm điều này là thông qua Phông chữ Google .
Thêm CSS này để chuyển sang các phông chữ tốt hơn:
@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';
}Bây giờ hãy sửa đổi các phần tử html và nội dung của bạn để sử dụng các phông chữ mới:
font-family: 'PT Serif', 'Helvetica', 'Arial';Lưu ý rằng phần tử h3 không được bao gồm trong danh sách như thế nào - điều này sẽ mặc định là PT-Serif thay vì PT-Sans .
Cuối cùng, hãy sử dụng một số JavaScript để cuộn qua ba hình ảnh nổi bật khác nhau. Bạn sẽ cần Hình ảnh_2 và Hình ảnh_3 đối với phần này, và một lần nữa, nó là tùy chọn. Trang web hoàn toàn hoạt động tại thời điểm này mà không có tính năng này. Đây là những gì nó sẽ trông như thế nào (tăng tốc):
Sửa đổi HTML của bạn để bao gồm ba hình ảnh nổi bật. Lưu ý rằng hai trong số này có lớp CSS là ẩn giấu . Mỗi hình ảnh đã được cấp một ID để JavaScript có thể nhắm mục tiêu từng hình ảnh một cách độc lập.
Đây là CSS cần thiết để ẩn các hình ảnh nổi bật bổ sung:
.hidden {
display: none;
}Bây giờ HTML và CSS đã được giải quyết, hãy chuyển sang JavaScript. Việc hiểu Mô hình Đối tượng Tài liệu (DOM) cho phần này rất hữu ích, nhưng nó không phải là một yêu cầu.
Tìm kịch bản khu vực ở cuối trang:
/* JavaScript goes here, at the bottom of the page */
Thêm JavaScript sau vào bên trong kịch bản nhãn:
/* 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;
}
}
});Có một vài điều đang xảy ra ở đây. Mã được chứa bên trong $ (tài liệu) .ready () . Điều này có nghĩa là nó sẽ chạy sau khi trình duyệt của bạn kết xuất xong trang - đây là một phương pháp hay. Các setInterval () hàm được sử dụng để gọi đổi hình ảnh () hoạt động thường xuyên ở một khoảng thời gian được xác định trước tính bằng mili giây (1000 mili giây = 1 giây). Điều này được lưu trữ trong thời gian Biến đổi. Bạn có thể tăng hoặc giảm điều này để tăng tốc hoặc làm chậm quá trình cuộn. Cuối cùng, một câu lệnh đơn giản được sử dụng để hiển thị các hình ảnh khác nhau và theo dõi hình ảnh đang hiển thị.
Thử thách mã hóa
Đó là nó! Hy vọng rằng bạn đã học được rất nhiều trong quá trình này. Nếu bạn ưa thích một thử thách và muốn thử nghiệm các kỹ năng mới tìm thấy của mình, tại sao không thử thực hiện các sửa đổi sau:
Thêm chân trang: Thêm một số văn bản vào chân trang (gợi ý: bạn có thể sử dụng lại trình bao bọc bình thường và một phần ba / hai phần ba các lớp học.).
Cải thiện cuộn hình ảnh: Sửa đổi JavaScript để tạo hoạt ảnh cho các thay đổi hình ảnh (gợi ý: hãy xem jQuery phai màu và Hoạt hình ).
Triển khai nhiều trích dẫn: Sửa đổi các dấu ngoặc kép để thay đổi giữa một trong nhiều dấu ngoặc kép khác nhau (gợi ý: hãy xem mã cuộn hình ảnh để biết điểm bắt đầu).
Thiết lập một máy chủ: Thiết lập máy chủ và gửi dữ liệu giữa trang web và máy chủ (gợi ý: hãy đọc hướng dẫn của chúng tôi về JSON và Python).
mã lỗi của trung tâm trợ giúp Disney + 83
Khi bạn cảm thấy thoải mái khi sử dụng JavaScript hoặc nếu bạn có bất kỳ kinh nghiệm nào với Ruby, bạn có thể thử tạo trang web bằng trình tạo trang web tĩnh như GatsbyJS hoặc Jekyll.
Đăng lại Đăng lại tiếng riu ríu E-mail Cách thay đổi giao diện của màn hình Windows 10 của bạnBạn muốn biết cách làm cho Windows 10 trông đẹp hơn? Sử dụng các tùy chỉnh đơn giản này để biến Windows 10 của riêng bạn.
Đọc tiếp Chủ đề liên quan- Lập trình
- HTML
- Thiết kế web
- CSS
Joe tốt nghiệp ngành Khoa học Máy tính tại Đại học Lincoln, Vương quốc Anh. Anh ấy là một nhà phát triển phần mềm chuyên nghiệp và khi anh ấy không lái máy bay không người lái hay viết nhạc, anh ấy thường có thể bị bắt gặp chụp ảnh hoặc sản xuất video.
Xem thêm từ Joe CoburnTheo dõi bản tin của chúng tôi
Tham gia bản tin của chúng tôi để biết các mẹo công nghệ, đánh giá, sách điện tử miễn phí và các ưu đãi độc quyền!
Bấm vào đây để đăng ký