Blog

Web thiết kế cho trẻ em: Sẵn sàng để xây dựng một trang web

Home / Blog / Web thiết kế cho trẻ em: Sẵn sàng để xây dựng một trang web

2 years ago Comment!

Trong bài học này chúng ta sẽ tìm hiểu về một số những điều mà chúng ta cần làm và các công cụ chúng ta cần trước khi chúng ta bắt đầu viết mã cho trang web thị trấn Tuts+ của chúng ta; chúng ta đang đến đó, tôi đảm bảo! Đồng thời, đừng quên hỏi bất kỳ câu hỏi nào trong khu vực bình luận ở dưới cùng của trang này.

Mặc dù vậy, trước tiên chúng ta hãy nhìn kỹ hơn về những gì chúng ta sẽ tạo cùng với nhau!

Phác họa bất cứ ý tưởng mà chúng ta có trong đầu của chúng ta trước khi chúng ta thực sự bắt đầu xây dựng chúng. Nó là một tập mà chúng ta có thể tiết kiệm rất nhiều thời gian khi chúng ta bắt đầu phần viết mã.

Có thể những gì trong đầu của chúng ta không giống với khi nó ở trên giấy? Có thể một số vấn đề mới phát sinh và các câu hỏi đưa ra trong bài học của chúng ta? Có thể thiết kế của chúng ta quá rườm rà? Nhiều trong số những vấn đề này sẽ tự hiện ra trong các phác thảo của chúng ta.

web_thiet_ke_cho_tre_Em7

Không sao, có thể không thích các phác thảo ban đầu của chúng ta, đó chính xác là những gì mà chúng ta muốn xảy ra! Chúng ta muốn cho tất cả làm việc trên giấy trước.

Chúng ta cần một trang web cho khách du lịch đến thăm và tìm hiểu về những cửa hàng và các doanh nghiệp của thị trấn mà chúng ta cung cấp. Chúng ta sẽ nhóm các doanh nghiệp với nhau theo một cách có ý nghĩa, chẳng hạn như “khách sạn” trong một nhóm và “nhà hàng” ở nhóm khác. Chúng ta sẽ phải liên kết đến trang web của riêng doanh nghiệp, do đó, các du khách có thể nhấp vào chúng để biết thêm chi tiết.

Có một số hình ảnh mà chúng ta sẽ sử dụng để tạo ra một cảm giác chào đón cho thị trấn.

Dưới đây là một cái nhìn từ các phác họa rồi qua  thiết kế và màu sắc của trang web:web_thiet_ke_cho_tre_Em8

Đây chính xác là trang web mà chúng ta sẽ tạo từ đầu! Đẹp, gọn gàng.

Để viết mã HTML (thứ ngôn ngữ bí mật mà chúng tôi nói đến trong bài học đầu tiên), chúng ta cần một trình soạn thảo văn bản để nhập nó vào.

Tốt nhất là không nên dùng một cái gì đó như Microsoft Word cho điều này, một chương trình để viết mã lập trình đúng nghĩa sẽ làm cho công việc của chúng ta dễ dàng hơn nhiều. Một trình soạn thảo mã sẽ hiểu những gì chúng ta đang gõ và làm cho tất cả các mã có màu sắc phù hợp, còn Microsoft Word dùng để viết báo cáo, ví dụ như báo cáo trong trường học.

Có rất nhiều trình viết mã tốt, miễn phí mà bạn có thể tải về từ web. Nếu bạn không chắc chắn làm thế nào để tải về một cái gì đó, hoặc không chắc chắn là bạn sẽ làm được, tốt nhất hãy hỏi người lớn.

Bluefish là rất tốt cho máy tính chạy Windows, trong khi Atom sẽ là thích hợp cho máy Mac.web_thiet_ke_cho_tre_Em2

Chúng ta sẽ tìm hiểu ý nghĩa của văn bản này trong phần tiếp theo, nhưng đây là một cái nhìn tổng quát cho những gì bạn có thể sẽ gõ.

Như chúng tôi đã nói, một trang web là chỉ là một tập hợp của các tập tin. Những tập tin này, tất cả phải đặt trong cùng một thư mục để trình duyệt có thể lấy được chúng.

Trang web thị trấn Tuts+ sẽ có một tập tin HTML (lưu với một phần đuôi mở rộng là .html), một tập tin CSS (lưu với một phần đuôi mở rộng là .css) và bốn hình ảnh sẽ được lưu trong một thư mục có tên “images”. Thư mục hình ảnh sẽ đặt trong cùng một thư mục chính với các tập tin HTML và CSS.

Một phần mở rộng tập tin là nhóm của các chữ cái mà theo sau dấu chấm trong tên tập tin đó, nói cho chúng ta biết loại tập tin đó là gì:

web_thiet_ke_cho_tre_Em3

Như đã đề cập, các hình ảnh sẽ được lưu trong một thư mục có tên “images” trong thư mục chính của trang web của chúng ta, như thế này:

web_thiet_ke_cho_tre_Em5

Trong hình ở trên, chúng ta có một hình ảnh được đặt tên town.svg (phần mở rộng .svg là chỉ về một loại hình ảnh) mà chúng ta đã đưa vào một thư mục phụ được gọi là “images”. Làm điều này giúp cho mọi thứ gọn gàng:web_thiet_ke_cho_tre_Em4

Cả hai cách thực hiện điều đúng, nhưng chúng ta sẽ sử dụng thư mục phụ, như hình ảnh bên phải.

Chúng ta sẽ thấy công việc mà chúng ta làm ngay trong trình duyệt, giống như những gì hiện tại bạn đang dùng để xem trang Tuts+ vậy!

Có một số trình duyệt sẵn có để tải về miễn phí nếu bạn chưa có, chẳng hạn như Google Chrome và Firefox. Nếu bạn đang sử dụng máy Mac thì bạn đã có sẵn Safari được cài đặt, rất tuyệt!

Chúng ta đang xây dựng trang web của chúng ta trực tiếp trên máy tính của chúng ta và không phải trên Internet. Nếu bạn nhớ lại bài học đầu tiên của chúng ta, chúng tôi giải thích rằng chúng ta không thể thấy một trang web trên Internet, nếu nó không phải là trên một máy chủ.web_thiet_ke_cho_tre_Em6

Hình dưới đây cho thấy trang web đã hoàn thành khi được xem tại cục bộ (không phải trên Internet) trong trình duyệt. Thay vì nhìn thấy một địa chỉ web như www.tutsplus.com, chúng ta thấy địa chỉ cục bộ của trang web, trông hơi khác một chút:web_thiet_ke_cho_tre_em1

Trong bài học này chúng ta đã xem xét một số điều quan trọng mà sẽ giúp chúng ta chuẩn bị sẵn sàng để viết mã của trang web của chúng ta. Chúng ta đã biết làm thế nào để chuẩn bị các tập tin và một số công cụ như một trình soạn thảo văn bản và một trình duyệt.

Categorised in:

Leave a Reply

Your email address will not be published.

*

*

Đang tải…