Hướng dẫn cách thiết kế 1 trang web mới nhất 2020

cách thiết kế 1 trang web là một trong những từ khóa được search nhiều nhất về chủ đề cách thiết kế 1 trang web . Trong bài viết này, lamweb.vn sẽ viết bài viết  hướng dẫn cách thiết kế 1 trang web mới nhất 2020

Hướng dẫn cách thiết kế 1 trang web mới nhất 2020

design website

Đây là design cho web này. Bạn đủ nội lực tải all dự án tại đây.

website này được thiết kế cho một doanh nghiệp hư cấu trong Adobe Photoshop CC 2017. Nếu bạn để ý, hãy dĩ nhiên rằng bạn lấy tập tin .PSD từ gói down. Dưới đây là những gì bạn nhận được trong tệp photoshop:

Bên trong file PSD, bạn sẽ tìm thấy tất cả các lớp được group, đặt tên và mã màu.

Bạn sẽ cần cài đặt một vài phông chữ. trước nhất là Font Awesome được sử dụng cho all các icon. Hai phông khác là PT Serif và Myriad Pro (đi kèm với Photoshop). Đừng lo lắng nếu bạn k có Photoshop, bạn không cần nó để có thể tạo một web.

Xem thêm : Hướng dẫn cách thiết kế giao diện web bằng photoshop mới nhất 2020

Code ban đầu

hiện giờ design đã rõ ràng, hãy bắt đầu vạch code. Tạo một tập tin mới trong trình biên soạn thảo văn bản ưa chuộng của bạn. Lưu mục này dưới dạng index.html. Bạn đủ nội lực đặt bất cứ tên gì bạn muốn, nguyên nhân nhiều trang được gọi là index là do phương pháp máy chủ sử dụng việc. Cấu hình mặc định cho phần lớn các máy chủ là để giúp cho trang index.html nếu không có trang được chỉ định.

Đây là code bạn cần:

charset="UTF-8">

Noise Mediarel="stylesheet"type="text/css"href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Code trên thực hiện một số điều sau:

• xác định HTML tối thiểu cần thiết.
• định hình đầu bài trang “Noise Media”
• bao gồm jQuery được hosting trên Google CDN.
• gồm có Font Awesome được host trên Google CDN.
• xác định một thẻ style để viết CSS.
• xác định một thẻ script để vạch JavaScript.

Lưu tệp và xây dựng tệp trong trình duyệt web của bạn.

để ý đầu bài trang là Noise Media. Điều này được định hình bởi văn bản bên trong thẻ tit. Thẻ này nằm bên trong các thẻ head.

đầu bài

Hãy tạo tittle. đầu bài sẽ như ảnh bên dưới.

Hãy khởi đầu với thanh xám nhỏ ở trên cùng. Đó là màu xám nhạt với một chút màu xám đậm bên dưới.

Thêm HTML này bên trong thẻ body ở đầu trang:

id="top-bar">

Hãy phân tích code trên nhé. Div như một cái hộp chứa đựng những thứ không giống. “Những thứ khác” này đủ nội lực là nhiều container, văn bản, hình ảnh, bất cứ thứ gì không giống. Có một số giới hạn khi thích hợp các thẻ nhất định, nhưng các div là những thứ khá chung chung. Nó có một id của top-bar. Điều này sẽ được dùng để tạo kiểu với CSS và nhắm mục đích bằng JavaScript nếu cần. Hãy dĩ nhiên rằng bạn chỉ có một phần tử với một id cụ thể – chúng nên là duy nhất. Nếu bạn muốn nhiều phần tử có cùng tên, hãy dùng class. Dưới đây là CSS bạn cần để trang trí nó (đặt ở trên đầu bên trong thẻ style):

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;

note mẹo sử dụng các dấu (#, thẻ hashtag, ký hiệu £) trước tên. Điều này có nghĩa rằng phần tử là một ID. Nếu vừa mới sử dụng một lớp, bạn sẽ dùng một dấu chấm (.). Các html và các thẻ body có padding và margin bằng k. Điều này ngăn ngừa bất kỳ vấn đề khoảng mẹo k mong muốn nào.

vừa mới đến lúc chuyển sang logo và thanh điều hướng. Trước khi bắt đầu, bạn nên có một container để đưa content này. Hãy tạo một lớp (như vậy bạn đủ sức sử dụng lại nó sau này), và vì đây chẳng phải là một website có độ góp ý cao (responsive website), hãy để chiều rộng của nó là 900 pixels.

HTML:

class="normal-wrapper">

CSS:

.normal-wrapper  width:900px; margin:0tự động; padding:15px40px; background: red; overflow:auto;

Khó đủ sức nói những gì đã diễn ra cho đến khi bạn hoàn thành code, do đó sẽ rất có ích nếu thêm một hình nền màu (tạm thời) để xem điều gì vừa mới xảy ra:

background: red;

ngày nay, bạn đủ sức tạo logo. Font Awesome là quan trọng cho icon. Font Awesome là một bộ các icon được đóng gói giống như một phông chữ vector. Code ban đầu ở trên đang được xây dựng Font Awesome, do vậy all đang sẵn sàng.

Xem thêm : Hướng dẫn cách thiết kế web responsive mới nhất 2020

Thêm HTML này bên trong normal-wrapper div:

id="logo-container">class="fa fa-volume-down logo-icon">

Noise Media

CSS:

.logo-icon  color:#000000;  font-size:60pt;float: left;h1 float: left; margin:21px0025px;

Đừng sợ về các phông chữ khác k thích hợp với design web. Nếu bạn muốn dùng các icon không giống nhau, hãy vào trang Font Awesome Icons, sau đó thay đổi fa-volume-down thành tên icon bạn muốn dùng.

Di chuyển trên thanh điều hướng, bạn sẽ sử dụng một danh mục không có thứ tự (UL) cho mục này. Thêm mã HTML sau logo-container (nhưng luôn luôn nằm trong normal-wrapper):

id="navbar">

• href=””>Home
• href=””>About
• href=””>Reviews
• href=””class=”last-link”>Contact

Href được dùng để link đến các trang không giống. website tut này không có bất kỳ trang nào không giống, nhưng bạn đủ nội lực thêm tên và đường kéo tệp (nếu cần) ở đây, ví dụ: reviews.html. Hãy tất nhiên rằng bạn đặt nó bên trong hai dấu ngoặc kép.

Đây là CSS:

#navbar   list-style-type: none;/* remove bullet points */ margin:29px000; 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:016px010px;/* 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 khởi đầu với một unordered danh sách. Sau đó, loại bỏ các chấm đầu dòng bằng cách sử dụng list-style-type: none;. Các liên kết được phân hướng dẫn nhau một chút và hiện màu khi bạn di chuột qua chúng. Dải phân phương pháp màu xám nhỏ là đường viền bên phải mỗi phần tử, sau đó sẽ được loại bỏ đối với phần tử cuối cùng bằng hướng dẫn sử dụng lớp last-link.

all những gì còn lại của phần này là đường màu đỏ nằm ngang. Thêm code HTML này sau normal-wrapper:

id="top-color-splash">

CSS:

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

Vậy là phần tittle vừa mới xong. Nó sẽ trông giống như thế này.

Khu vực nội dung chính

đang đến lúc chuyển sang phần nội dung chính. Nó sẽ như thế này:

Đây là một phần khá dễ dàng, phần chữ bên trái với một hình ảnh bên phải. Phần này sẽ được chia thành 3 phần, gần bằng tỷ lệ vàng.

Thêm HTML sau phần tử top-color-splash:

class="normal-wrapper">class="one-third">class="no-margin-top">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 lớn build this website.

Alternatively, test out our đánh giá of the Panasonic G80 shown on the right!

class="two-third">class="featured-image"src="Image_1.jpg"/>

để ý hướng dẫn phần tử normal-wrapper trở lại (đó là niềm vui khi dùng các lớp). Bạn có thể tự hỏi tại sao thẻ hình ảnh (img) k đóng. Đây là một thẻ tự đóng. Dấu gạch chéo lên (/>) giải thích điều này vì nó không phải lúc nào cũng có ý nghĩa là đó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 */

Các thuộc tính cần thiết nhất ở đây là box-sizing: border-box;. Điều này đảm bảo các phần tử mãi mãi có chiều rộng 40% hoặc 60%. Mặc định (không có tính chất này) là chiều rộng do bạn chỉ định cộng với bất kỳ padding, lề và đường viền nào. Lớp pic (featured-image) có chiều rộng tối đa (max-width) là 500px. Nếu bạn chỉ định một chiều (chiều rộng hoặc chiều cao) và để trống một chiều, css sẽ refresh click thước pic trong khi vẫn duy trì phần trăm khung ảnh.

Khu vực trích dẫn

Hãy tạo ra khu vực trích kéo. Nó sẽ trông giống như thế này:

Đây là một phần không khó khăn. Nó chứa một nền màu xám đậm, với chữ màu trắng ở trung tâm.

Thêm HTML này sau normal-wrapper:

id="quote-area">class="normal-wrapper">

“makeuseof is the best web ever”

Joe Coburn

CSS:

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

Bạn cần điều chỉnh kích thước phông chữ, khoảng phương pháp, v.v… hình ảnh bên dưới trông gần giống với một website.

Phần icon

Đây là khu vực tiếp theo cần tạo:

Phần này sẽ dùng một số lớp. Ba icon hầu như giống nhau, ngoại trừ nội dung, thành ra nên sử dụng các lớp thay vì id. Thêm HTML này sau quote-area:

class="normal-wrapper">class="icon-outer">class="icon-circle">class="fa fa-youtube logo-icon">

YouTube

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

class="icon-outer">class="icon-circle">class="fa fa-camera-retro logo-icon">

Reviews

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

class="icon-outer">class="icon-circle">class="fa fa-dollar logo-icon">

Buying Guides

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

Ba icon này cũng là Font-Awesome. HTML lại một lần nữa dùng lớp normal-wrapper.

Đâ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:0tự động; border:2px solid #D6D6D6;  box-sizing: border-box;/* ensure padding and borders do not increase the size */ font-size:75pt; padding:30px000; cursor: pointer;.icon-circle:hover /* change color on hover (mouseover) */ color:#FFFFFF;  background:#EB6361;h5  margin:15px010px0; font-size:20pt;

Có một vài điều mới trong CSS. Các hình trong icon được xây dựng bởi border-radius: 200px;. Đặt trị giá giống nhau cho chiều rộng để có được các ảnh tròn bằng nhau. Bạn có thể làm giảm click thước nếu mong muốn tạo phần hình vuông chứa ảnh tròn rộng hơn. lưu ý mẹo di chuyển chuột được vận dụng cho các div – nó k chỉ hạn chế trong các link.

Chân trang

Điều cuối cùng cần sử dụng là chân trang. Điều này thực sự rất đơ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 sau normal-wrapper của khuc vực icon.

id="footer">

CSS:

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

Thêm một số điều khiến cho trang web của bạn hấp dẫn hơn

Vậy là phần viết code đã xong. Bạn hoàn toàn đủ sức để trang web giống như vậy, đó là một web hoàn chỉnh. ngoài ra, bạn có thể đã nhận thấy rằng nó khác như design. lý do chính là phông chữ được sử dụng.

Phông chữ được dùng cho hầu hết các tiêu đề là Myriad Pro. Nó đi kèm với Adobe Create Cloud, nhưng nó k có sẵn như là một webfont. Phông chữ hiện được sử dụng trên web là Helvetica. Điều này có vẻ ổn, cho nên bạn có thể để nó giống như hiện nay là được, bên cạnh đó bạn đủ sức sử dụng PT Sans vì nó là một webfont. Phông chữ được dùng cho toàn bộ các văn bản là PT Serif, cũng là một webfont.

Cũng như đăng một phông chữ mới vào máy tính của bạn, các trang web có thể đăng các phông chữ theo yêu cầu. Một trong những cách tốt nhất để thực hiện việc này là thông qua phông chữ của 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ờ sửa đổi các phần tử html và body để dùng phông chữ mới:

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

lưu ý rằng phần tử h3 không nằm trong danh mục, điều này sẽ mặc định là PT-Serif thay vì PT-Sans.

tuy nhiên, bạn đủ nội lực sử dụng một số JavaScript để cuộn qua ba hình ảnh không giống nhau. Bạn sẽ cần Image_2 và Image_3 cho phần này và một lần nữa, đây là phần tùy chọn. trang web đang đa số chức năng tại thời điểm này mà không cần chức năng này. Nó sẽ như thế:

Sửa đổi HTML của bạn để bao gồm ba pic không giống nhau. để ý hai trong số ba pic này có lớp CSS ẩn. Mỗi hình ảnh đang được phân phối một ID cho nên JavaScript đủ nội lực định hình từng ảnh trong số chúng một cách độc lập.

class="two-third">id="f-image-1"class="featured-image"src="Image_1.jpg"/>id="f-image-2"class="featured-image hidden"src="Image_2.jpg"/>id="f-image-3"class="featured-image hidden"src="Image_3.jpg"/>

Đây là CSS cần để ẩn ảnh ảnh:

.hidden  display: none;

Giờ đây, HTML và CSS vừa mới xong, chúng ta hãy chuyển qua JavaScript. Bạn nên có một chút hiểu biết về hiểu mô hình phân khúc tài liệu (Document Object Model, DOM) cho phần này, không những thế nó không hề là yêu cầu.

Tìm khu vực script ở cuối trang:

Thêm JavaScript sau vào bên trong thẻ script:

/* JavaScript goes here, at the bottom of the page */$(document).ready(function()// run once the page is ready var time =2500;// get the hình ảnh 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)case1:// show hình ảnh 2  $im1.hide(); $im2.show(); $im3.hide(); currentImage =2;break;case2:// show hình ảnh 3  $im1.hide(); $im2.hide(); $im3.show(); currentImage =3;break;default:// show image 1  $im1.show(); $im2.hide(); $im3.hide(); currentImage =1;);

Code được chứa bên trong $(document).ready(). Điều này có nghĩa là nó sẽ chạy một khi trình duyệt của bạn đã hoàn thành hiển thị trang. Hàm setInterval() được sử dụng để gọi hàm changeImage() với một khoảng thời gian định trước bằng mili giây (1000 mili giây = 1 giây). Điều này được lưu trữ trong biến time. Bạn có thể gia tăng hoặc giảm để tăng tốc hoặc làm chậm công cuộc 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ông giống nhau và theo dõi pic đang hiển thị.

Vậy là bạn đã biết phương pháp tạo ra một website không khó khăn. Hy vọng rằng bạn đang học được rất nhiều trong công cuộc này. Nếu bạn like thử thách và muốn mang những skill mới vào trải nghiệm, vì sao không thử thực hiện những sửa đổi này:

• 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ể dùng lại lớp normal-wrapper và one-third/two-third).

• thay đổi việc di chuyển hình ảnh: Chỉnh sửa mã JavaScript để kích hoạt các thay đổi hình ảnh (gợi ý: nhìn thấy fadein và animate của jQuery)

• Thực hiện nhiều trích dẫn: Sửa đổi các trích dẫn để thay đổi các trích kéo không giống nhau (gợi ý: xem code cuộn ảnh ảnh).

• thiết lập một máy chủ: thiết lập một máy chủ và gửi dữ liệu giữa web và máy chủ (tìm hiểu về JSON và Python).

Chúc các bạn thực hiện thành công!

Nguồn : https://quantrimang.com