Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Kids

Thiết kế web cho trẻ em: Chào mừng bạn đến với thị trấn Tuts+

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Web Design for Kids.
Web Design for Kids: Getting Ready to Build a Website

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Chào mừng đến với thị trấn Tuts+, nơi mà tất cả mọi người đều yêu thích thiết kế web! Trong loạt bài viết này, chúng ta sẽ học tất cả về thiết kế và xây dựng một trang web. Để hỗ trợ nhau, chúng ta sẽ cùng nhau tạo một trang web.

Những bài học này (hay bài hướng dẫn) sẽ hướng dẫn cho bạn từng bước một để mang một trang web vào cuộc sống. Tất cả các tập tin bài tập sẽ được đính kèm ở cuối mỗi bài học, vì vậy bạn có thể so sánh công việc của bạn khi theo dõi.

Vậy, hãy đến, làm thoải mái chính bạn và hãy tạo một thứ gì đó cho người dân của thị trấn Tuts+!

Web hoạt động như thế nào?

Hãy quay ngược lại một bước và nghĩ về cách hoạt động của web là như thế nào.

Khi hai máy tính được kết nối đến Internet (như được minh hoạ là đường màu vàng trong hình phía dưới) chúng có thể nói chuyện với nhau.

Một máy chủ (cái hộp màu xanh) là một máy tính đặc biệt, chứa các tập tin của trang web. Máy tính của bạn tại nhà hoặc trường học không phải là một máy chủ, bởi vì nó không kết nối trực tiếp tới Internet. Chúng ta kết nối tới Internet thông qua một Nhà cung cấp dịch vụ (ISP).

Nội dung của trang web (tất cả những gì một trang web diễn đạt) được tổ chức bên trong một tập hợp quy tắt đặc biệt mà các máy tính có thể hiểu được; đại loại như là một câu nói bí mật, ngôn ngữ được mã hoá, ngoài ra chúng ta cũng sẽ sớm tìm hiểu về chủ đề bí mật này.

Làm thế nào máy tính của bạn kết nối tới web

Trong hình này, trình duyệt đang yêu cầu xem trang web www.tutsplus.com từ máy chủ nơi chứa các tập tin của trang web. Máy chủ đang gởi các tập tin ngược trở lại và trình duyệt đang chuyển đổi chúng để hiển thị một trang web trên màn hình. Và điều này diễn ra rất nhanh!

Tất cả là về giao tiếpchia sẻ thông tin.

Bởi vì tất cả điều này, một trang web bạn viết cục bộ (trên máy tính của bạn) không thể được nhìn thấy bởi những người khác trên một máy tính khác, cho đến khi bạn di chuyển các tập tin lên một máy chủ. Chúng ta sẽ kiểm chứng điều này sau.

Công việc của một nhà thiết kế web.

Công việc của một nhà thiết kế web là rất quan trọng. Tất cả những thứ đang diễn ra trong hình trên đang xảy ra vì một mục đích: xem một trang web. Công việc của một nhà thiết kế web là quyết định cách trang web này trông giống và hoạt động như thế nào, và thậm chí cả những thứ khác, như đảm bảo các trang web là có thể sử dụng cho người khuyết tật (theo cùng một cách mà bạn là một người duyệt web truy cập vào Tuts+).

Công việc của một nhà thiết kế web

Dự án của chúng ta

Trong loạt bài này chúng ta sẽ tạo mộ trang web cho thị trấn Tuts+. Thị trấn cần một nơi mà những du khác có thể dễ xem thông tin về thị trấn trước khi tham quan.

Dưới đây là một cái nhìn tổng quan của trang web:

Những gì chúng ta sẽ xây dựng

Trang web này sẽ bao gồm tất cả các mặt của thiết kế web mà chúng ta sẽ học. Nó sẽ là một dự án thiết kế web thật sự đơn giản dành cho bạn!

Phác thảo và Xây dựng

Bây giờ hãy nói một tí về những gì mà chúng ta cần phải có.

Đầu tiên, chúng ta sẽ vẽ trang web của chúng ta và sau đó thêm những gì mà chúng ta muốn có trên trang web trong một tập tin đặc biệt. Chúng ta cũng sẽ thêm các liên kết ở đây cho người xem để có thể chuyển đến những nơi khác, chẳng hạn như là các trang web của các cửa hàng.

Phác thảo là điều quan trọng!

Tạo kiểu dáng

Sau khi chúng ta vẽ và viết tập tin đặc biệt cho trang web của chúng ta thì chúng ta sẽ cần phải làm cho nó trông đẹp mắt. Đây là phần mà tất cả ý tưởng về màu sắc và cấu trúc của chúng ta (quyết định nơi mà tất cả những thứ này sẽ ở trên màn hình) sẽ được đưa lên.

Làm thế nào chúng ta có thể tạo cho trang web của của chúng ta dễ sử dụng? Chúng ta muốn các màu sắc tạo ra cảm giác gì? Nơi nào mà mọi thứ nên xuất hiện trên màn hình dành cho điện thoại thông minh? Còn trên màn hình máy tính thì sao? Kiểu chữ nào sẽ tốt nhất? Đây là tất cả những thứ mà chúng ta phải cân nhắc, nhưng đừng lo lắng, nó thật sự là một quy trình thú vị và những câu hỏi này sẽ đi cùng với bạn một cách tự nhiên ở những trang web mà bạn thiết kế.

Sơ đồ bài học

Phía dưới là một sơ đồ hoàn thiện cho cuộc phiêu lưu mà chúng ta sẽ đi để tạo trang web của chúng ta. Mỗi ô có một phần giới thiệu chủ đề và sau đó chia ra thành những phần nhỏ hơn.

Sơ đồ của chúng ta

Giới thiệu

Bạn có thể nhận thấy bởi ngôi sao màu hồng phần mà hiện tại chúng ta đang đọc là phần Giới thiệu, Bây giờ chúng ta có một ý tưởng cơ bản về cách trang web làm việc, công việc của một nhà thiết kế web, và phần đầu của dự án mà chúng ta sẽ thiết kế xây dựng cùng nhau.

Xây dựng trang web

Phần tiếp theo là nơi mà chúng ta nghĩ về các ý tưởng và bắt đầu phác thảo. Phác thảo là một cách thật sự thú vị để thu thập những suy nghĩ của bạn trên một thiết kế trước khi bạn bắt đầu viết mã. Nó có thể là một cách tiết kiệm thời gian và giúp chúng ta duy trì việc theo dõi dự án.

Sáu đó chúng ta sẽ nói về các tập tin và các công cụ mà chúng ta cần để bắt đầu với phần viết mã cho trang web của chúng ta.

HTML

Ngôn ngữ đánh dấu siêu văn bản (HTML) là ngôn ngữ bí mật (nhưng không lâu!) được sử dụng để săp xếp tập tin văn bản mà chúng ta đã nói trong phần trước. Ngôn ngữ này giúp các trình duyệt của chúng ta hiểu và hiển thị các tập tin của trang web.

Mọi thứ trên trang web của chúng ta và tất cả các trang web sẽ bên trong các thành phần HTML. Các thành phần là các phần nhỏ của ngôn ngữ này, nó có một ý nghĩa và giúp mô tả mọi thứ mà chúng ta đặt trên trang web.

Đừng lo lắng về những gì mà đoạn code này có ý nghĩa thật sự là gì tại thời điểm này, chỉ cần biết là mọi trang web được tạo bởi một văn bản.

CSS

Cascading Stylesheets, CSS, cho phép chúng ta thiết lập kiểu dáng (màu sắc, kiểu chữ, cái nhìn tổng quát) cho trang web của chúng ta, làm cho nó hấp dẫn cũng như là dễ sử dụng cho người duyệt web.

CSS trông như thế nào

CSS Layout

CSS cũng có thể giúp chúng ta sắp xếp các phần trên trang web.

Các hình ảnh

Trong phần này của chuyến phiêu lưu chúng ta sẽ nói ngắn gọn về kiểu của hình ảnh sẽ được thêm vào trong trang web của chúng ta và làm thế nào để trang trí cho nó. Sẽ có bốn hình ảnh dễ thương được thêm vào, bạn nghĩ như thế nào về chúng?

Our images

Các thiết kế cơ bản

Trong phần này chúng ta sẽ nhìn vào "các ô xây dựng" của thiết kế web. Chúng ta muốn đảm bảo là chúng ta tạo thứ gì đó mà mọi người sẽ dùng, và có thể dùng một cách dễ dàng, cũng như đảm bảo là nó trông hấp dẫn.

Kiểu trình bày

Kiểu trình bày chính là nghệ thuật sắp xếp chữ và một sự nối tiếp đối với bài thiết kế mới của chúng ta, đồng thời nó có thể thêm vào hoặc lấy đi sự thành công của trang web của chúng ta. 

Ví dụ đầu tiên của kiểu trình bày trên trang web của chúng ta có thể được tìm thấy ở phần đầu tiên:

Heading

Màu sắc

Màu sắc là rất quan trọng và rất thú vị. Màu sắc có thể tạo một trang web đẹp mắt, đồng thời có ý nghĩa, cái mà chúng ta sẽ nói toàn bộ ở đây.

Kết thúc chuỗi bài học

Chúng ta sẽ hoàn tất chuỗi bài học này bằng cách học làm thế nào để các tập tin của trang web của bạn chuyển đến một máy tính đặc biệt, một máy chủ, do đó tất cả bạn bè của bạn và người thân có thể nhìn thấy nó ở trên Internet. Chúng tôi cũng sẽ nói về nơi bạn có thể học với chủ đề mới của bạn như là "Thiết kế web cho Thị trấn Tuts+".

Nhưng khoan hãy quá lo lắng về điều đó, chúng ta chỉ mới tới đây thôi!

Hẹn sớm gặp lại bạn!

Trong bài học tiếp theo chúng ta sẽ đi thẳng vào chủ đề làm thế nào chúng ta chuẩn bị xây dựng một trang web với HTML. Tôi không thể đợi thêm được nữa, hẹn gặp bạn trong thị trấn!

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.