Thiết kế Web trên Google Sites: Tạo menu nhiều cấp trên hàng ngang

Trước bài viết nầy, các bạn có thể tham khảo:

• Tạo trang Web bằng Google Sites - Trang tổng quan
• Thiết kế trang chủ trên Google Sites - Phần đầu trang
• Thiết kế Web trên Google Sites: Công cụ hổ trợ - Phần 1
• Thiết kế Web trên Google Sites: Tạo trang con ngoài trang chủ
• Nhúng mã Html vào trang Google Sites: Công cụ hổ trợ phần 2
• Thiết kế Web trên Google Sites: Công cụ hổ trợ - Phần 3

Giống như thiết kế Blogger trên trình thiết kế Blogger Dashboard của Google, ứng dụng Google Sites cũng có 1 số tiện ích Widget trong trang thiết kế.
Để tiếp tục với phần nầy trong bài, các bạn hãy mở lại bài thiết kế mà các bạn đã tạo ra lần trước.

• Mở trang thiết kế

Một cửa sổ có giao diện như hình dưới sẽ được mở ra. Trên thiết kế ứng dụng Google Sites là những trang mà mình đã thiết kế. Bạn hãy Click vào trang thiết kế để tiếp tục.

Trên ứng dụng Google Sites, Các công cụ mà bạn cần chú ý trong bài viết hôm nay sẽ là những biểu tượng phía trên, bên trái của thanh điều hướng.

Tạo menu nhiều cấp trên hàng ngang

Nhìn trên hình trên, nó nằm vị trí có vòng tròn khoanh lại màu đỏ theo hướng trỏ lên của mũi tên màu đỏ, bạn Click chuột trái vào đây sẽ có 2 chế độ chọn lựa.(ở mũi tên số 1)
- Chọn lựa thứ nhất, menu Trang chủ sẽ hiển thị như ở phần Demo trên bài  Nhúng mã Html vào trang Google Sites: Công cụ hổ trợ phần 2
- Chọn lựa thứ hai, khi bạn Click chuột vào phần số 2 như ở hình dưới, menu Trang chủ sẽ hiển thị bên cột phía trái của trang Web.
Như Demo dưới đây, mình đặt menu trên hàng ngang của thanh điều hướng.

• DEMO

Để làm được như thế, bạn thực hiện trình tự các bước như sau:

- Vào chế độ điều hướng (1), chọn lựa mục chọn đầu tiên phía trên.

- Click Thêm trang ở mũi tên số 2.

- Click thao tác add thêm các trang con ở mũi tên số 3. Hướng dẫn nầy đã có ở bài: 

Thiết kế Web trên Google Sites: Tạo trang con ngoài trang chủ

- Số 4: là kết quả thiết kế. Tùy bạn muốn tính toan menu của bạn sẽ có bao nhiêu phần, bao nhiêu cấp quản lý nhé.
Mình sẽ tiếp tục những bài viết mới trong vài ngày sau.

Chúc các bạn thành công. Nhớ Xuất bản ra để Save lại đó.

Người viết: Nguyễn Đạt Khánh

Read More

Thiết kế Web trên Google Sites: Công cụ hổ trợ - Phần 3

Trước bài viết nầy, các bạn có thể tham khảo:

• Tạo trang Web bằng Google Sites - Trang tổng quan
• Thiết kế trang chủ trên Google Sites - Phần đầu trang
• Thiết kế Web trên Google Sites: Công cụ hổ trợ - Phần 1
• Thiết kế Web trên Google Sites: Tạo trang con ngoài trang chủ
• Nhúng mã Html vào trang Google Sites: Công cụ hổ trợ phần 2

Giống như thiết kế Blogger trên trình thiết kế Blogger Dashboard của Google, ứng dụng Google Sites cũng có 1 số tiện ích Widget trong trang thiết kế.
Để tiếp tục với phần nầy trong bài, các bạn hãy mở lại bài thiết kế mà các bạn đã tạo ra lần trước.

• Mở trang thiết kế

Một cửa sổ có giao diện như hình dưới sẽ được mở ra. Trên thiết kế ứng dụng Google Sites là những trang mà mình đã thiết kế. Bạn hãy Click vào trang thiết kế để tiếp tục.

Trên ứng dụng thiết kế Google Sites, Các công cụ mà bạn cần chú ý trong bài viết hôm nay sẽ là những biểu tượng phía trên, bên trái của thanh điều hướng.

1. Chế độ điều hướng:

Nhìn trên hình dưới, nó nằm vị trí số 1, có 2 chế độ chọn lựa.
- Chọn lựa thứ nhất, menu Trang chủ sẽ hiển thị như ở phần Demo trên bài  Nhúng mã Html vào trang Google Sites: Công cụ hổ trợ phần 2
- Chọn lựa thứ hai, khi bạn Click chuột vào phần số 2 như ở hình dưới, menu Trang chủ sẽ hiển thị bên cột phía trái của trang Web.

• DEMO

2. Thanh tác vụ:

Trên hình dưới, các bạn nhìn vào khung viền màu xanh hướng có mũi tên đỏ trỏ vào. Các công cụ mà bạn thường gặp trên các ứng dụng gồm có như sau, tính từ trái sang phải:

- Nút Undo, Redo dùng để hoàn tác, hay lấy lại tác vụ vừa hoàn tác.

- Xem trước: biểu tượng có hình con mắt.

- Biểu tượng mắt xích: Sao chép liên kết trang Web đã xuất bản.

- Biểu tượng hình người (User) có dấu +: Dùng để chia sẽ với các địa chỉ bạn bè mà bạn cho phép.

- Dấu 3 chấm đứng: dùng để xác lập quan hệ tương tác với Google. Trong đó, có cả luôn việc bạn cần phải làm để lấy ID thuộc tính web Analytics . Phần khai báo ID nầy, tất nhiên bạn cần phải có 1 tài khoản Google và đăng nhập vào địa chỉ Google Analytics để khai báo.

Mời bạn xem phần Demo :

• DEMO

Mình sẽ tiếp tục những bài viết mới trong vài ngày sau nhé các bạn yêu.

Chúc các bạn thành công. Nhớ Xuất bản ra để Save lại đó.

Người viết: Nguyễn Đạt Khánh

Read More

Nhúng mã Html vào trang Google Sites: Công cụ hổ trợ phần 2

Trước bài viết nầy, các bạn có thể tham khảo:

• Tạo trang Web bằng Google Sites - Trang tổng quan
• Thiết kế trang chủ trên Google Sites - Phần đầu trang
• Thiết kế Web trên Google Sites: Công cụ hổ trợ - Phần 1
• Thiết kế Web trên Google Sites: Tạo trang con ngoài trang chủ

Giống như thiết kế Blogger trên trình thiết kế Blogger Dashboard của Google, ứng dụng Google Sites cũng có 1 tiện ích Widget để nhúng mã Html vào trong trang thiết kế.
Để tiếp tục với phần nầy trong bài, các bạn hãy mở lại bài thiết kế mà các bạn đã tạo ra lần trước.

• Mở trang thiết kế

Một cửa sổ có giao diện như hình dưới sẽ được mở ra. Trên thiết kế ứng dụng Google Sites là những trang mà mình đã thiết kế. Bạn hãy Click vào trang thiết kế để tiếp tục.

Trên ứng dụng thiết kế Google Sites, bạn nhìn cột phía bên phải có 3 tab: Chèn, Trang và Chủ đề.

Bạn hãy tạo thử 1 trang Nhúng Html như ở bài Thiết kế Web trên Google Sites: Tạo trang con ngoài trang chủ, và dùng tiện ích Nhúng, chọn tiếng Tab Nhúng mã Html vào đây như trong hình dưới:

Mã Html ở trên mình dùng có dạng:

<Marquee behavior=“scroll”> Cuộn văn bản không ngừng </Marquee>

Nếu các bạn chưa biết nhiều về ngôn ngữ lập trình Html, các bạn có thể vào tham khảo Tag Html trên trang Blog của mình nhé.

Mời bạn xem phần Demo :

• DEMO

Lưu ý: 
Ở góc trên bên phải của trang Web, các bạn thấy có chữ Trang chủ với dấu nón trỏ ngược, bạn Click chuột vào đây để mở menu truy cập các trang con nhé.

Mình sẽ tiếp tục những bài viết mới trong vài ngày sau nhé các bạn yêu.

Chúc các bạn thành công. Nhớ Xuất bản ra để Save lại đó.

Người viết: Nguyễn Đạt Khánh

Read More

Thiết kế Web trên Google Sites: Tạo trang con ngoài trang chủ

Trước bài viết nầy, mình đã có 3 bài mà các bạn có thể tham khảo:

• Tạo trang Web bằng Google Sites - Trang tổng quan
• Thiết kế trang chủ trên Google Sites - Phần đầu trang
• Thiết kế Web trên Google Sites: Công cụ hổ trợ - Phần 1

Nào bây giờ các bạn hãy mở trang thiết kế Web bằng ứng dụng Google Sites lên nhé. Trên ứng dụng thiết kế Google Sites, bạn nhìn cột phía bên phải có 3 tab: Chèn, Trang và Chủ đề.

• Mở trang thiết kế

Nhìn vào bên phải ứng dụng Google Sites, có một khuôn viên lựa chọn các tiện ích thao tác. Bạn chọn vào Tab Trang. 

Nhấn chuột vào dấu 3 chấm đen phía phải Trang chủ, như hình dưới (chổ Click chuột trái chọn vào có dấu khoanh tròn màu đỏ), menu xổ xuống, bạn chọn vào mục Thêm trang con. Tiếp theo, bạn đặt tên và Click chọn Xong.

Thêm trang con: Một số lưu ý mà bạn cần quan tâm trong việc tạo trang con nhiều cấp:

- Bên phải ở mỗi trang đều có dấu 3 chấm đen để tạo trang quản lý phân cấp.

- Muốn cho trang vừa mới tạo trở thành trang quản lý, hay một Folder (thư mục). Trong Blogger Dashboard gọi là Tag (thẻ/ chương mục). Bạn chỉ cần Thêm trang con trên chính tên trang đã có.

Trong phần ví dụ của mình, Tag: Thiết kế Web trên Google có 2 trang (bài viết):
- Tạo trang Web bằng...

- Thiết kế trang chủ trê....

Mời bạn xem phần Demo nhé:

• DEMO

Lưu ý: 
Ở góc trên bên phải của trang Web, các bạn thấy có chữ Trang chủ với dấu nón trỏ ngược, bạn Click chuột vào đây để mở menu truy cập các trang con nhé.

Mình sẽ tiếp tục những bài viết mới trong vài ngày sau nhé các bạn yêu.

Chúc các bạn thành công. Nhớ Xuất bản ra để Save lại đó, đâu còn cách nào khác để ghi lại bài đâu nhé.

Người viết: Nguyễn Đạt Khánh

Read More

Thiết kế Web trên Google Sites: Công cụ hổ trợ - Phần 1

Trước bài viết nầy, mình đã có 2 bài mà các bạn có thể tham khảo:

• Tạo trang Web bằng Google Sites - Trang tổng quan
• Thiết kế trang chủ trên Google Sites - Phần đầu trang

Nào bây giờ các bạn hãy mở trang thiết kế Web bằng ứng dụng Google Sites lên nhé. Trên ứng dụng thiết kế Google Sites, bạn nhìn cột phía bên phải có 3 tab: Chèn, Trang và Chủ đề.
Nghĩa là khi chọn vào Tab nào bạn sẽ làm việc với các công cụ hổ trợ trên Tab đó.
Ở Tab thứ nhất trên hình bên dưới bạn sẽ thấy một số công cụ tiện ích giống như thủ thuật  Blogger bằng ứng dụng Blogger Dashboard vậy. Chúng đều là những ứng dụng thiết kế Web Blog do chính Google phát triển và khi sử dụng chúng, bạn cần phải có một Google Acccount, nghĩa là bạn phải đăng ký tài khoản Google nhé.

• Mở trang thiết kế

Dưới đây là một số công cụ tiện ích. Mình dùng hình chụp lại trong bài demo để minh họa:
Trong hình dưới:

Phần 1: Là phần đầu trang mình đã viết và thực hành trong bài trước.

Phần 2: Sử dụng công cụ nhúng . Đó là nơi để bạn nhúng các đường link địa chỉ vào. Khi xuất bản, cứ mỗi lần Click chuột link đó sẽ được truy cập ngay lập tức.

Chức năng nhúng siêu liên kết

Trong hình dưới:

- Phần 3 và 4: là công cụ chèn văn bản, trong đó bạn sẽ có thể định dạng chúng bằng thanh định dạng được hiển thị ở phần 3

Chức năng chèn văn bản

Trong hình dưới:

- Phần 5 và 6: là công cụ chèn hình ảnh, trong đó bạn sẽ có thể định dạng chúng bằng thanh định dạng được hiển thị ở phần 5

Chức năng chèn hình ảnh

Trong hình dưới:

- Phần 7 và 8: là công cụ chèn bản đồ hướng dẫn đi đường, nơi ở..., trong đó bạn sẽ có thể định dạng chúng bằng thanh định dạng được hiển thị ở phần 5 trên chức năng Edit hiệu chỉnh bản đồ từ ứng dụng Google Maps

Chức năng chèn bản đồ

Trong hình dưới:

- Phần 9: là tính năng chèn văn bản siêu liên kết dưới chân trang, thường là các ghi chú bản quyền tác giả, năm xuất bản.

Tính năng thêm chân trang

- Phần 10 và 11: là 1 ví dụ minh họa. Trong quá trình chèn văn bản siêu liên kết, bạn có thể dùng các công cụ trên thanh định dạng số 10 để sử dụng.

Tính năng chèn văn bản siêu liên kết dưới chân trang

• Mở trang Xuất bản

Như thế bạn đã sắp sữa có một lâu đài tình ái rồi đó nhé.Trong Website nầy, bạn có thể Upload file ảnh, giao lưu mạng cộng đồng XH,...

Vậy chứ còn nhiều thứ lắm, mệt phờ ra đấy. Mình sẽ tiếp tục những bài viết mới trong vài ngày sau nhé các bạn yêu.

Chúc các bạn thành công. Nhớ Xuất bản ra để Save lại đó, đâu còn cách nào khác để ghi lại bài đâu nhé.

Người viết: Nguyễn Đạt Khánh

Read More

Thiết kế trang chủ trên Google Sites - Phần đầu trang

Ở bài nầy là phần viết tiếp theo của bài: Tạo trang Web bằng Google Sites - Trang tổng quan. Nếu bạn chưa xem qua, hãy quay lại bài nầy để nắm cơ bản nhé, và cũng để truy cập vào trang thiết kế Web bằng ứng dụng Google Sites.

Trên vùng nền màu đen, là phần tiêu đề trang của bạn, sẽ thấy có các yêu cầu sau:

- Nhập tên trang Web của bạn. Nó nằm ở góc trên bên trái.

- Thêm biểu trưng cho trang Web của bạn. Nó là một ảnh icon rất nhỏ thường thấy ở góc trên bên trái của các trang Web.

Sau khi thêm biểu trưng xong, mục chọn nầy sẽ có tên Chỉnh sữa biểu trưng. Bạn có thể vào để thay đổi nếu như chưa vừa ý.

Trên phần Chỉnh sữa biểu trưng , bạn có thể chọn màu nền cho thanh điều hướng ở đầu trên Banner trang Web của bạn theo hướng mũi tên màu đen như hình dưới.

- Phần đặt tên: Tiêu đề trang của bạn. Khi Click chuột trái chọn vào vùng nầy, sẽ xuất hiện các mục chọn định dạng tiêu đề trên khung viền vừa chọn. Bạn có thể chọn kiểu hiển thị lớn nhỏ, canh trái, giữa, phải, nhúng đường Link của một trang Web khác. Thùng rác là biểu tượng để xóa bỏ chúng đi.

Khi chọn vào mục Loại tiêu đề trong hình trên, bạn sẽ có 3 mục chọn lựa như hình dưới. Kết quả: tiêu đề trang của bạn có nền màu trắng là do mình chọn mục chọn Chỉ tiêu đề

Trong phần thay đổi hình ảnh, bạn sẽ có 2 lựa chọn như sau:

• Tải lên (từ trong nguồn có sẳn trên máy bạn)
• Chọn hình ảnh... (trên thư viện, theo Url, tìm kiếm, Album của bạn, Google Drive)

Ở mục lựa chọn nầy là để đặt hình nền cho Banner đầu trang của bạn đó.

Thế là xong một phần giới thiệu tiếp theo của trang thiết kế Web bằng ứng dụng Google Sites. Các bạn tiếp tục nghiên cứu nhé. Thân ái chào các bạn

Người viết: Nguyễn Đạt Khánh

Read More

Tạo trang Web bằng Google Sites - Trang tổng quan

Việc tạo một trang Web bây giờ không còn là chuyện khó khăn. Có rất nhiều ứng dụng mà bạn có thể dùng nó để thiết kế mà không cần biết nhiều về ngôn ngữ lập trình.

Google cung cấp cho ta nhiều tiện ích đính kèm, trong đó có những ứng dụng thiết kế Web Blog đáng nễ như trình thiết kế Blogger Dashboard, thiết kế Web bằng ứng dụng Google Sites.

Nếu bạn chưa có Account của Google thì việc trước tiên là bạn phải tạo lập tài khoàn cho chúng. Bạn có thể xem phần hướng dẫn: 

• Làm thế nào đăng ký tài khoản Google?

Tất cả một khi đã sẳn sàng, tùy bạn chọn lựa mà thiết kế Web blog. Nếu bạn chọn trình thiết kế Blogger Dashboard, bạn có thể vào xem các bài:

• Hướng Dẫn Thiết Kế Template Blogger
• Hướng dẫn cách tạo Blog bằng Blgospot cho Blogger

Ở đây, mình chỉ hướng dẫn cách tạo Web từ ứng dụng Google Sites, gồm các bước sau:

Bước 1: Log in (đăng nhập) vài tài khoản Google vừa tạo hoặc đã có sẳn, chẳng tốn phí gì cả.

Bước 2: Nhấn vào Command button dưới đây để truy cập vào ứng dụng Google Sites:

• Google Sites

Bước 3: Quá trình thiết kế:
- Nhấn chuột vào Command Button Tạo là nút lệnh màu đỏ ngay tại mũi tên màu đen trên hình dưới.

Khi bạn Click chuột vào sẽ có 2 lựa chọn:

+ Ở trang Web cổ điển.

Bạn sẽ thấy một số bước lựa chọn như hình trên. Việc đầu tiên là phải chọn lựa mẫu thiết kế phù hợp mà bạn thích. Google Sites cho phép bạn lựa chọn với nhiều template ở các lãnh vực mà bạn muốn thiết kế bên trong thư viện.

+Ở Sites mới.

Khi bạn chọn vào thiết kế nầy, một trang thiết kế mới xuất hiện với giao diện như hình dưới:

Trong hình trên,, ở góc trên bên phải các bạn thất có 3 Tab chính:

Chèn, Trang, Chủ đề và một Command button Xuất bản.

Ở từng Tab một có các Widget tiện ích để bạn chọn lựa như thiết kế Blogger. Các tiện ích nầy dùng để thiết kế vào trang body ở phần khung hiển thị bên phải.

Trong phần bài nầy, mình chỉ giới thiệu tổng quan về thiết kế Web bằng ứng dụng Google Sites để các bạn tham khảo và chọn lựa.

Ở một dịp khác, mình sẽ giới thiệu thêm về cách thiết kế Web bằng ứng dụng Google Sites để các bạn làm quen. Chúc các bạn có được những ngày vui vẽ với những gì mà Khanh nguyên chia sẽ nhé.

Người viết: Nguyễn Đạt Khánh

Read More