BÀI 1: GIỚI THIỆU PHẦN MỀM TẠO WEBSITE

• Phần mềm tạo website: Là công cụ giúp người dùng tạo, chỉnh sửa và xuất bản website từ các mẫu có sẵn mà không cần kỹ năng lập trình chuyên nghiệp.
• Phân loại:
• Trực tuyến: Sử dụng trực tiếp trên môi trường mạng, không yêu cầu cài đặt (ví dụ: sites.google.com).
• Ngoại tuyến: Cần cài đặt trên máy tính và sử dụng không cần môi trường mạng (ví dụ: Mobirise).
• Các chức năng cơ bản: Tạo trang web, cung cấp mẫu (templates), chèn nội dung văn bản (textblock), hình ảnh/video, liên kết (hyperlink), biểu mẫu (forms), tùy chỉnh giao diện (responsive), xuất bản website (publish).
• Giới thiệu phần mềm Mobirise: Là phần mềm ngoại tuyến miễn phí, hỗ trợ nhiều hệ điều hành (Windows, macOS, Linux) để tạo các website nhỏ. Mobirise cung cấp nhiều mẫu trang web và khối mẫu, giúp tạo website bằng thao tác kéo thả đơn giản.
• Giao diện làm việc của Mobirise: Gồm thanh công cụ, vùng làm việc để hiển thị các thành phần của trang web, và nút lệnh Add Block to Page để thêm khối nội dung.
• Thực hành: Mở, chỉnh sửa nội dung và xem trước trang web
• Bước 1: Khởi động phần mềm Mobirise. Nháy đúp chuột vào biểu tượng Mobirise.
• Bước 2: Chỉnh sửa nội dung văn bản. Chọn phần nội dung văn bản trong vùng làm việc và thực hiện chỉnh sửa.
• Bước 3: Thay hình ảnh. Chọn phần hình ảnh để hiển thị hộp thoại Media Image, chọn Browse Computer (hoặc các tùy chọn khác) để chọn ảnh từ máy tính, sau đó nhấn OK.
• Bước 4: Xem trước trang web. Chọn Preview in Browser trên thanh công cụ để xem trang web trên trình duyệt.
• Gợi ý: Để thêm nội dung mới, chọn Add Block to Page (góc phải dưới màn hình), chọn một khối mẫu và kéo thả vào vị trí thích hợp, sau đó chỉnh sửa nội dung.

BÀI 2: TẠO WEBSITE BẰNG PHẦN MỀM

• Cấu trúc cơ bản của một website: Được xây dựng bằng ngôn ngữ HTML. Một website thường bao gồm:
• Trang chủ: Trang đầu tiên khi truy cập, chứa nội dung chính và nổi bật.
• Trang chuyên mục: Các nội dung cùng chủ đề.
• Trang chi tiết: Nội dung cụ thể của từng mục.
• Website thường có các phần như: phần đầu trang (logo, tìm kiếm), thanh điều hướng, phần nội dung và phần chân trang (thông tin liên hệ, bản quyền).
• Các bước tạo website bằng phần mềm:
• Bước 1: Phác thảo thiết kế cấu trúc website.
• Bước 2: Chuẩn bị tư liệu hình ảnh, video.
• Bước 3: Tạo dự án website và các trang web (từ mẫu hoặc thư viện).
• Bước 4: Tạo và chỉnh sửa các thành phần (thanh điều hướng, bài viết, hình ảnh, biểu mẫu, chân trang).
• Bước 5: Xem trước và xuất bản website.
• Thực hành: Tạo dự án website, tạo trang web
• Bước 1: Tạo dự án website.
• Trong màn hình giao diện làm việc, chọn biểu tượng ≡ ở góc trái trên, chọn Sites rồi chọn Create New Site.
• Đặt tên cho dự án website vào ô Site Name (ví dụ: "Giới thiệu trường em").
• Bước 2: Tạo trang web.
• Trong màn hình giao diện làm việc, chọn biểu tượng ≡, chọn Pages, chọn Create New Page.
• Chọn Add Blank Page để thêm một trang trắng hoặc chọn một mẫu trang web theo chủ đề có sẵn.
• Đặt tên cho trang web vừa tạo tại ô Edit Title, sau đó chọn biểu tượng ✓ hoặc nhấn Enter.

BÀI 3: TẠO THANH ĐIỀU HƯỚNG CHO TRANG WEB

• Giới thiệu thanh điều hướng: Liệt kê các mục nội dung chính của website, giúp người dùng dễ dàng di chuyển giữa các trang, thường được đặt ở phần đầu trang.
• Hướng dẫn thực hiện:
• Bước 1: Thêm khối thanh điều hướng vào trang web.
• Chọn Add Block to Page (góc phải dưới màn hình).
• Chọn Menu, chọn mẫu thanh điều hướng phù hợp và kéo thả vào vị trí thích hợp.
• Khi hộp thoại xác nhận xuất hiện ("This block is global. Do you want to add it to all pages?"), chọn OK để thêm thanh điều hướng cho tất cả các trang.
• Bước 2: Điều chỉnh thông số thiết lập của thanh điều hướng.
• Nháy chuột lên thanh điều hướng, chọn Block Parameters.
• Tùy chỉnh các thông số như: Full Width, Logo, Brand Name, Menu Items, Icons, Amount, Icons Color, Button, Sticky, Collapsed, Transparent, Color, Hamburger.
• Bước 3: Chỉnh sửa và tạo liên kết cho các mục nội dung trên thanh điều hướng.
• Chọn khối thanh điều hướng, chọn mục cần chỉnh sửa.
• Thay đổi tên mục nội dung: Chọn mục và nhập nội dung mới.
• Chèn liên kết: Chọn mục, chọn biểu tượng Link. Trong hộp thoại Link to, có thể gắn liên kết đến Web Address (trang web bên ngoài) hoặc Page (trang web trong dự án).
• Chèn biểu tượng: Chọn mục, chọn biểu tượng Select icons. Trong hộp thoại, chọn biểu tượng, điều chỉnh màu sắc và kích thước, rồi chọn INSERT ICON.
• Chỉnh sửa màu sắc: Chọn mục, chọn biểu tượng Color.
• Tạo danh mục con: Chọn mục, chọn Add Submenu, nhập nội dung danh mục con và tạo liên kết.
• Xoá thanh điều hướng: Di chuột lên thanh điều hướng, chọn Remove Block. Chọn OK khi có hộp thoại xác nhận.

BÀI 4: TẠO NỘI DUNG VĂN BẢN CHO TRANG WEB

• Bài viết trên trang web: Là phần nội dung chính, giới thiệu chi tiết về sản phẩm, dịch vụ, dự án, sự kiện, thường kèm hình ảnh và video minh họa.
• Chân trang (footer): Là vị trí ở cuối trang web, chứa các thông tin như địa chỉ liên hệ, bản đồ chỉ đường, thông tin bản quyền, các liên kết nhanh và mạng xã hội, thường hiển thị ở tất cả các trang.
• Thực hành 1: Thêm và chỉnh sửa bài viết vào trang web
• Bước 1: Thêm khối bài viết.
• Chọn Add Block to Page (góc phải dưới màn hình).
• Chọn một khối mẫu phù hợp (ví dụ: Article, People, Contact, List) và kéo thả vào vị trí thích hợp.
• Bước 2: Điều chỉnh thông số định dạng của bài viết.
• Nháy chuột lên khối bài viết, chọn Block Parameters.
• Tùy chỉnh các thông số như: Full Width, Top, Bottom, Width, Title, Subtitle, Text, Description, Color/Image/Video (Background).
• Bước 3: Chỉnh sửa nội dung bài viết. Chọn phần văn bản hoặc hình ảnh và chỉnh sửa.
• Thực hành 2: Thêm và chỉnh sửa phần chân trang cho trang web
• Bước 1: Thêm khối chân trang.
• Chọn Add Block to Page (góc phải dưới màn hình).
• Chọn một khối mẫu chân trang trong mục Footer và kéo thả vào vị trí cuối trang.
• Khi hộp thoại xác nhận xuất hiện, chọn OK để thêm chân trang cho tất cả các trang.
• Bước 2: Chỉnh sửa nội dung phần chân trang. Thao tác chỉnh sửa các thông số, chỉnh sửa và tạo liên kết cho các nội dung chân trang được thực hiện tương tự như chỉnh sửa thanh điều hướng.

BÀI 5: TẠO NỘI DUNG HÌNH ẢNH, VIDEO CHO TRANG WEB

• Bộ sưu tập (gallery) và thanh trượt (slider): Là cách hiển thị nhiều hình ảnh/video khác nhau trên trang web dưới dạng danh sách hoặc tự động chuyển đổi, giúp người dùng truyền tải thông tin hoặc quảng bá sản phẩm/dịch vụ.
• Thực hành 1: Thêm và thay đổi hình ảnh, video vào trang web
• Bước 1: Thêm khối hình ảnh, video.
• Chọn Add Block to Page (góc phải dưới màn hình).
• Chọn một khối mẫu phù hợp (Image & Video) và kéo thả vào vị trí thích hợp.
• Bước 2: Điều chỉnh thông số bố cục và định dạng.
• Nháy chuột lên khối hình ảnh/video, chọn Block Parameters.
• Tùy chỉnh các thông số: Full Width, Top, Bottom, Image/Video (Mục Size), Title, Subtitle, Text, Description, Color/Image/Video (Background).
• Bước 3: Thay đổi hình ảnh/video.
• Thay đổi hình ảnh: Chọn phần ảnh, nháy đúp để mở hộp thoại Media Image. Chọn Browse Computer (từ máy tính), Free Online Library (thư viện sẵn có), Site Library (ảnh trong dự án), Link Image to (gắn liên kết), Alt (hiển thị khi ảnh lỗi).
• Thay đổi video: Chọn phần video, nháy đúp để mở hộp thoại Media Video. Nhập Video URL (đường dẫn video), điều chỉnh Aspect Ratio (tỷ lệ màn hình), Autoplay (tự động phát), Loop (tự động lặp lại).
• Thực hành 2: Thêm và chỉnh sửa bộ sưu tập và thanh trượt vào trang web
• Bước 1: Thêm khối hình ảnh/video dưới dạng trượt.
• Chọn Add Block to Page (góc phải dưới màn hình).
• Chọn một khối mẫu phù hợp (Gallery & Slider) và kéo thả vào vị trí thích hợp.
• Bước 2: Điều chỉnh thông số bố cục và định dạng. Tương tự như điều chỉnh khối bài viết và hình ảnh/video.
• Bước 3: Chỉnh sửa nội dung. Chọn phần chữ và chỉnh sửa nội dung hoặc chọn phần hình ảnh để thay đổi hình ảnh mới.
• Lưu ý: Cần tối ưu hóa các hình ảnh/video để đảm bảo tốc độ tải trang nhanh và hiệu quả.

BÀI 6: TẠO BIỂU MẪU CHO TRANG WEB VÀ XUẤT BẢN WEBSITE

• Biểu mẫu trên trang web (form): Là thành phần cho phép thu nhận thông tin từ người dùng (tên, địa chỉ email, số điện thoại, lời nhắn...), thường có các nút lệnh để Nhập lại hoặc Gửi đi.
• Các chế độ xem trước:
• Chế độ xem trên điện thoại (Mobile View): Xem trước giao diện trang web trên thiết bị di động.
• Chế độ xem trên máy tính (Desktop View): Xem trước giao diện trang web trên máy tính để bàn.
• Chế độ xem trực tiếp trên trình duyệt (Preview in Browser): Xem trước trang web trên trình duyệt web.
• Xuất bản website (publish): Là quá trình xuất các tệp của website và tải lên máy chủ web để người dùng có thể truy cập. Mobirise hỗ trợ xuất bản với tên miền con của mobirisesite.com, xuất ra thư mục cục bộ (local drive folder) hoặc tải lên máy chủ FTP.
• Thực hành 1: Thêm và chỉnh sửa biểu mẫu vào trang web
• Bước 1: Thêm khối biểu mẫu.
• Chọn Add Block to Page (góc phải dưới màn hình).
• Chọn một khối mẫu phù hợp (Form) và kéo thả vào vị trí thích hợp.
• Bước 2: Điều chỉnh thông số bố cục và định dạng. Tương tự như điều chỉnh khối bài viết.
• Bước 3: Chỉnh sửa các đối tượng thu nhận dữ liệu trong biểu mẫu.
• Trong giao diện chỉnh sửa, có thể bật/tắt các trường (ví dụ: name, email, url, textarea) và các nút chức năng tương ứng.
• Thiết lập địa chỉ email nhận dữ liệu (lời nhắn) trong ô Notification Email or Action URL, sau đó chọn Save để hoàn tất thiết lập biểu mẫu.
• Thực hành 2: Xuất bản website
• a) Xuất bản website với một tên miền con của mobirisesite.com:
• Bước 1: Chọn *.mobirisesite.com.
• Bước 2: Nhập tên miền con (ví dụ: tinhoc12).
• Bước 3: Chọn PUBLISH. Khi xuất bản thành công, có thể chọn VIEW SITE để xem trang web trên Internet.
• b) Xuất bản website dưới dạng các tệp HTML (local drive folder):
• Bước 1: Chọn Local drive folder.
• Bước 2: Chọn BROWSE để truy cập đến thư mục muốn lưu trữ, sau đó chọn Select Folder.
• Bước 3: Chọn PUBLISH. Kết quả là một tập hợp các tệp ".html" và thư mục "assets".
• c) Xuất bản website và tải lên máy chủ web có sẵn trên Internet (FTP):
• Bước 1: Chọn FTP.
• Bước 2: Chọn EDIT và chỉnh sửa thông tin máy chủ web: Protocol (FTP), Host, Port, Username, Password. Chọn TEST CONNECTION để kiểm tra, rồi SAVE.
• Bước 3: Nhập thư mục gốc của website trên máy chủ ([root folder] hoặc /htdocs/, /public_html/).
• Bước 4: Chọn PUBLISH.

BÀI 7: TẠO SẢN PHẨM THEO NHÓM

• Yêu cầu chung: Tạo một website bằng phần mềm Mobirise theo một chủ đề tùy chọn, thực hiện trong 1 tiết học.
• Tiêu chí đánh giá sản phẩm:
• Cấu trúc website và bố cục trang web: Website được phân chia thành các chuyên mục, có đầy đủ các thành phần như thanh điều hướng, nội dung chính, chân trang.
• Nội dung phù hợp: Nội dung được chọn lọc, có điểm nhấn, đa dạng về dạng thức (hình ảnh, văn bản, video).
• Màu sắc hài hoà: Bố cục và màu sắc giúp nổi bật các nội dung chính, hình ảnh minh họa rõ nét.
• Hướng dẫn tổng quát:
• a) Tạo website:
• Bước 1: Phác thảo cấu trúc website.
• Bước 2: Chuẩn bị tư liệu hình ảnh, nội dung cho website.
• Bước 3: Tạo dự án website (thực Dunk tương tự Bài 2).
• Bước 4: Tạo và chỉnh sửa các thành phần của trang web (thực hiện tương tự Bài 3, 4, 5, 6).
• Bước 5: Xem trước và xuất bản website (thực hiện tương tự Bài 6).
• b) Chỉnh sửa trang web:
• Xuất bản website dưới dạng các tệp ".html" và lưu vào thư mục trên máy tính.
• Trong các tệp ".html", chỉnh sửa mã HTML để thay đổi nội dung mặc định được Mobirise tạo ra (ví dụ: thay đổi nội dung của thẻ <p>).
• Lưu lại các thay đổi và mở trang web bằng trình duyệt để xem kết quả.