Bài 2. Chuẩn bị dự án: lên ý tưởng và cấu trúc trang web
Trước khi gõ dòng lệnh đầu tiên, một trang web tốt bắt đầu từ bản kế hoạch: rõ mục đích, rõ người xem, rõ bố cục và cách các trang nối với nhau. Bài này dạy bước chuẩn bị dự án - nền móng cho cả chương làm web.
- Cánh DiềuTin học 12 (Tin học ứng dụng) - Chủ đề E(ICT) · Bài 1. Giới thiệu phần mềm tạo websitetr. 123
- Chân trời sáng tạoTin học 12 (Tin học ứng dụng) - Bài E1. Tạo trang web, thiết lập giao diện và xem trước trang webtr. 49
- Cánh DiềuTin học 12 (Tin học ứng dụng) - Chủ đề E(ICT) · Bài 2. Tạo website bằng phần mềmtr. 129
- Kết nối tri thứcTin học 12 (Tin học ứng dụng) - Bài 23. Chuẩn bị xây dựng trang webtr. 126
Bắt đầu bằng một hình dung
Lớp 12A được giao làm một trang web giới thiệu câu lạc bộ Guitar của trường để đăng lên cổng thông tin đoàn. Bạn Minh hào hứng mở máy, gõ ngay vài dòng, chèn đại mấy tấm ảnh chụp buổi tập, rồi thấy trang trông lộn xộn: chỗ thì chữ đè lên ảnh, chỗ thì trống huơ, người xem chẳng biết bấm vào đâu để xem lịch sinh hoạt.
Cô giáo xem qua liền hỏi: trang này làm cho ai xem, cần nói những gì, và sẽ có mấy trang? Minh ngớ người vì chưa nghĩ tới. Cả nhóm ngồi lại, lấy một tờ giấy A4 vẽ nháp khung màn hình và liệt kê nội dung. Chỉ sau mười lăm phút, mọi người đã hình dung được trang web sẽ ra sao - dù chưa viết thêm một dòng nào.
Câu chuyện của Minh cho thấy một điều: phần khó nhất của làm web không nằm ở việc gõ mã, mà ở việc nghĩ trước khi làm. Đó chính là bước chuẩn bị dự án.
Nội dung bài học
- 1) Xác định mục đích, người xem và nội dung
- 2) Phác thảo bố cục trang (wireframe)
- 3) Chuẩn bị tư liệu và tổ chức thư mục dự án
- 4) Sơ đồ các trang và liên kết
Tóm tắt lý thuyết cần nhớ
- Bắt đầu bằng ba câu hỏi: trang để làm gì, ai xem, nội dung chính là gì
- Wireframe là bản vẽ nháp khung trang: đầu trang, thân, chân trang và thanh điều hướng
- Chuẩn bị tư liệu trước và tổ chức thư mục gọn (tách riêng thư mục ảnh) để không lạc tệp
- Vẽ sơ đồ trang để thấy số trang và các liên kết trước khi dựng trang
Thuật ngữ tiếng Anh trong bài
| Tiếng Anh | Đọc là | Nghĩa |
|---|---|---|
| website | QUÉP-sai | trang web Một 'ngôi nhà nhỏ' trên Internet, có địa chỉ riêng để ai cũng ghé vào xem được. |
| folder | PHÂU-đờ | thư mục Chỗ gom nhiều tệp lại cho gọn - giống cái cặp đựng nhiều tờ giấy. |
| wireframe | OAI-ơ-frêm | bản phác khung trang Bản vẽ nháp chỉ gồm các ô trống: đầu trang, thân, chân trang, thanh điều hướng. |
| layout | LÂY-aot | bố cục trang Cách sắp xếp các khối nội dung trên trang. |
| sitemap | SAI-mép | sơ đồ trang Sơ đồ liệt kê website có những trang nào và trang nào nối tới trang nào. |
Câu hỏi trắc nghiệm có đáp án
Mấy câu mẫu để bạn tự kiểm tra ngay. Trong ứng dụng, bài này có đủ 22 câu, chấm điểm tự động và giải thích từng câu sai.
- Dùng màu nền gì, phông chữ gì, cỡ chữ bao nhiêu
- Trang để làm gì, ai sẽ xem, cần truyền đạt nội dung gì
- Đặt tên tệp ảnh ra sao, nén ảnh nặng bao nhiêu
- Trang có bao nhiêu dòng mã, dùng thẻ HTML nào
- Chọn màu sắc và hình ảnh thật cho trang
- Viết sẵn toàn bộ nội dung văn bản của trang
- Vẽ nháp khung, đánh dấu vị trí đặt các khối trên trang
- Kiểm tra tốc độ tải trang trên điện thoại
- Để ảnh tự động đẹp hơn và sắc nét hơn
- Để đường dẫn tới ảnh rõ ràng, dễ quản lí và tránh lạc tệp
- Để trang web chạy được mà không cần trình duyệt
- Để không phải đặt tên cho các tệp ảnh nữa
- a)Hiểu rõ đối tượng người xem giúp quyết định giọng văn, cỡ chữ và màu sắc phù hợp.Đúng
- b)Nên đưa càng nhiều nội dung càng tốt, kể cả những phần không phục vụ mục đích.Sai
- c)Xác định mục đích trang giúp lọc ra danh sách nội dung chính cần có.Đúng
- d)Mục đích của trang chỉ cần nghĩ tới sau khi đã dựng xong toàn bộ trang.Sai
- (a) Đúng - biết ai xem thì mới chọn được giọng văn và cách trình bày phù hợp.
- (b) Sai - nội dung không phục vụ mục đích cần mạnh dạn bỏ để trang khỏi loãng.
- (c) Đúng - từ mục đích ta suy ra nội dung chính cần có.
- (d) Sai - mục đích phải được xác định ngay từ đầu, trước khi dựng trang.
Thử ngay: minh hoạ từng bước
Bấm từng bước để tự xem cơ chế hoạt động, hoặc bấm “Tự chạy” cho nó tiến mỗi giây một lần. Đổi được dữ liệu đầu vào - không cần đăng nhập.
Học trọn bài này trong ứng dụng
Bài giảng đầy đủ, 22 câu luyện tập chấm tự động, thi thử đúng cấu trúc đề tốt nghiệp (24 trắc nghiệm + 4 Đúng/Sai), bài thực hành máy tự chấm và gia sư AI giải thích chỗ sai.
Phần học miễn phí, không cần tạo tài khoản.
Bài liên quan - Ứng dụng tin học & Thiết kế web
Cùng mạch kiến thức với bài này, học nối tiếp cho chắc phần lí thuyết.