Cẩm nang dành cho những ai muốn tự thiết kế một trang web cho riêng mình mà không cần kiến thức về đồ họa hoặc lập trình. Chúc các bạn thành công!
Trang 1THIẾT KẾ WEB MIỄN PHÍ BẰNG GOOGLE SITES
Việc thiết kế một trang web là một công việc mà mọi người dùng Internet hiện nay đều muốn thực hiện Tuy nhiên, không phải người nào cũng có điều kiện trải qua các khóa học lập trình web nên công việc ấy tưởng chừng "vô vọng" đối với những bạn không chuyên Nhưng hiện nay có thể nói việc thiết kế website là một việc làm khá dễ dàng đối với mọi người vì Google cung cấp một dịch vụ miễn phí Google Sites sẽ giúp cho các bạn sinh viên, các tập thể
và thậm chí là các trẻ em nhanh chóng tạo lập một trang web riêng cho mình với những hình ảnh, bài viết khá phong phú Bây giờ, các bạn có thể bắt tay vào việc thiết kế web với Google Sites:
I/ Đăng kí trang Web:
Đầu tiên, các bạn truy cập vào: http://sites.google.com Kế đến, cần nhập vào địa chỉ email và mật khẩu, nếu chưa có địa chỉ email của google thì các bạn hãy đăng kí tại http://mail.google.com (quá trình đăng kí đơn giản và miễn phí), rồi nhấn nút Create site ở cửa
sổ kế tiếp Trong cửa sổ Create new site, các bạn cần điền đầy đủ các thông tin: đặt tên trang web của bạn (Site name), mô tả trang web (Site description); chọn chủ đề (Site theme), có thể nhấn More themes để tìm thấy các giao diện khác; nhập mã số hiển thị (Please type the code shown), cuối cùng nhấn nút Create site để hoàn tất và bước vào việc thiết kế một trang web của
riêng bạn
II/ Thiết kế Web:
Sau khi đăng kí tài khoản xong, các bạn sẽ bước vào giao diện thiết kế sẽ thấy các công cụ cho việc xây dựng trang web
Bước 1: Ở trang đầu tiên, các bạn nhấn nút Edit page (hình chiếc bút chì ở góc trên bên phải)
để thiết kế trang chủ Công cụ này có cửa sổ giống như Word nên rất thuận lợi cho các bạn,
gồm có các tính năng như Insert (chèn hình ảnh, link, liên kết với các dịch vụ khác của Google: Google Document; Google Video; và YouTube), Format (gõ chỉ số trên, dưới, canh lề, ), Table (chèn bảng), Layout (bố trí trang web thành 01 hoặc 02 cột) Đặc biệt, tính năng HTML
sẽ giúp cho các bạn có hiểu biết về ngôn ngữ này có thể dễ dàng kiểm tra, chỉnh sửa, thêm bớt các hiệu ứng cho web mà Google Sites không cung cấp sẵn
Trang 2Sau khi đã hoàn thành xong nội dung, các bạn hãy nhấn nút Save để lưu lại
Bước 2: Kế tiếp, các bạn cần bổ xung thêm hình nền, logo, chỉnh sửa thanh Sidebar, ở góc
trên bên phải click vào Thêm chọn Quản lý trang web
Trang 3Trong cửa sổ hiện ra, các bạn sẽ thấy các thẻ chính như: Tài liệu đính kèm, Bố cục trang web, Màu và phông chữ, Chủ đề
+Bố cục trang web:
- Đầu trang: các bạn nhấn nút Thay đổi biểu trưng để thay đổi logo cho trang web của mình Trong cửa sổ Định cấu hình biểu trưng trang web, các bạn hãy chọn Biểu trưng tùy chỉnh và nhấn nút Browse để duyệt đến logo cần chèn trên máy hoặc có thể không chọn logo bằng cách chọn vào Không có biểu trưng nào
- Thay đổi bố cục trang: tại đây các bạn có thể thay đổi độ rộng cho trang web, tùy chọn thanh
điều hướng
Trang 4Theo mặc định thì Google sites sẽ cung cấp thanh bên và thanh điều hướng ngang, để sử dụng
thanh điều hướng ngang các bạn vào Thay đổi bố cục trang web tích chọn vào mục Thanh điều hướng ngang
Để tạo menu dọc (menu trên thanh bên) các bạn click vào chỉnh sửa tại ô điều hướng ở thanh bên và tiến hành thêm các menu mà bạn muốn, tương tự menu ngang (menu trên thanh điều hướng ngang)
+ Màu và phông chữ (Colors and Fonts): Thẻ này sẽ giúp các bạn thay đổi màu, hình nền cho
web, tiêu đề (Header), từng trang (Page), Sidebar Đối với việc chèn hình nền cho đối tượng thì cần nhấn Browse để duyệt đến bức ảnh và cần chờ một khoảng thời gian để Upload lên máy chủ
+ Chủ đề (Themes): Nếu cảm thấy không vừa lòng với giao diện web đã chọn ban đầu lúc
đăng kí tài khoản thì có thể chọn lại tại đây (gồm có 24 themes)
mỗi thay đổi, các bạn cần nhấn Save changes để lưu lại trước khi quay trở ra trang web (Return
to site)
Bước 3: Sau khi đã thiết kế trang đầu tiên, các bạn cần phải tạo ra các trang thứ 2, 3, Để thực
Trang 5hiện việc này, các bạn nhấn nút Create new page rồi chọn một trong 5 dạng: Web page,
Dashboard, Announcements, File Cabinet, List, rồi đặt tên cho trang mới (Name) và chọn nơi đặt trang: đặt ở đầu trang (Put page at the top level), đặt bên dưới trang chủ (Put page under
"tên trang chủ") Cuối cùng nhấn Create page để tạo ra trang mới và mọi công việc thiết kế cũng sẽ sử dụng các tính năng nêu trên
III/ Chèn các ứng dụng Gadget vào trang web
Các ứng dụng Gadget
Chèn mt vài tin ích vui khác
Trong cửa sổ Add a gadget to your page có rất nhiều tiện ích khác để tô điểm cho trang web của bạn như
Google Calendar,
Google NewsShow,
Clock & Date, Weather,
Google Clock,
Trang 6Fish, …
Ngoài ra bạn cũng có thể tìm theo chủ đề của các tiện ích:
Ví dụ để chèn tiện ích Fish vào trang web,
sau khi nhấn Add bạn hãy chọn màu nền (Background Color), số lượng cá (Number of Fish), màu của từng con
cá (Fish 1 Color, Fish 2 Color,…) và chọn kích thước hiển thị (Display), rồi nhấn OK là bạn có ngay một đàn cá
trên trang Web của mình, bạn có thể nhấn chuột để cho cá ăn như dưới đây:
Trang 8Bạn có thể Click chuột để cho cá ăn:
Fish
IV/ Google Analytics cho Google Site:
Google analytics cho Google Sites
1 Click Sign Up để đăng ký tài khoản Google Analytics
Trang 92 Nhập URL trang web mà bạn muốn cho Google Analytics phân tích Chọn múi giờ
Click Continue
3 Nhập thông tin liên hệ Click Continue
4 Chọn Yes để đồng ý các điều khoản và click Create New Account
Trang 105 Copy ID (không copy dấu nháy đơn) Click Save and Finish
Trang 116 Quay trở lại Google Sites (chọn Sites mà bạn đã đăng ký với Google Analytics)
Chọn More Actions -> Manage Site
Trang 127 Click General
8 Chọn Enable Google Analytics for this site Paste ID ở phía trên vào hộp thoại bên dưới
9 Click Save changes
10 Sau khi hoàn thành bước này Bạn phải đợi khoảng thời gian, thông thường khoản từ
12->24h để Google có thể tạo lập thông tin cho bạn Khi đó bạn mới sử dụng được các chức năng của Google Analytics
Trang 13V/ Tạo Trang liên hệ trong Google Sites
Có rất nhiều cách để tạo một trang liên hệ cho google site Sau đây là 2 cách để tạo Hai cách này đề
có sử dụng mẫu ở trong google Docs
Cách tạo mẫu liên hệ trong google docs như sau:
- Tới Google Docs http://docs.google.com Đăng nhập bằng tài khoản gmail của bạn.
- Chọn Create New (Tạo mới) trong trình đơn thả xuống chọn tiếp Form (Mẫu) để tạo ra một mẫu mới.
- Tiếp theo các bạn cần đưa ra các câu hỏi để khách đến thăm trả lời:
+ Question Title: là tiêu đề câu hỏi
+ Help text: Một đoạn văn bản nhỏ để người xem điền đúng
+ Question Type: Là kiểu văn bản mà người xem phải điền đúng vào ô trống
+ Make this a required question: Tích vào dòng này nếu bạn muốn bắt buộc khách thăm phài điền
vào nếu để trống thì khách thăn trang có thể bỏ qua không cần điền.
Cứ làm như vậy cho địa chỉ email và khi làm mẫu đến nội dung tin nhắn thì các bạn làm như hình:
- Lưu lại mẫu của bạn và trở lại google Docs, cập nhật danh sách tài liệu mới
Trang 14Chèn biểu mẫu vào trang liên hệ của google site
• Cách 1
Mở tài liệu vừa lưu ở trên ra, vào Biểu mẫu >> Đi đến biểu mẫu đang mở Copy
địa chỉ trang hiện ra:
https://spreadsheets.google.com/spreadsheet/viewform?hl=vi&key=0AoXDz2MbM6MG dFV1THlDLU1DWHNKWG5CQzRtUWpKdmc
Đến trang google site của bạn kich vào Chỉnh sửa trang (chỉnh sửa trang liên hệ), tiếp theo Chèn
>> Tiện ích khác tìm tiện ích có tên là Iframe Wrapper paste đường dẫn ở trên vào ô Document / page URL
chỉnh sửa chiều rộng và chiều cao hợp lý và kích vào ok như vậy là xong
Xem ví dụ tại đây
• Cách 2
Để sử dụng tiện ích này cần phải tạo một mẫu trong google docs như hình sau:
Trang 15Cách này sử dụng một tiện ích có tên là Comment Form, để sử dụng tiện ích này các bạn Đến trang
google site của bạn kich vào Chỉnh sửa trang (chỉnh sửa trang liên hệ), tiếp theo Chèn >> Tiện ích khác tìm tiện ích có tên là Comment Form
Trong đoạn URL ở các trên các bạn copy đoạn key ở sau dấu = như sau:
0AoXDz2MbM6MGdFV1THlDLU1DWHNKWG5CQzRtUWpKdmc
Chèn key trên vào ô Google form key còn ô Page URL điền địa chỉ trang của bạn vào, điều chính kick
thước rộng cao hợp lý rồi click ok vậy là xong.
Cách chèn thông tin liên hệ ở cuối bảng làm như sau:
Cái này sử dụng một tiện ích có tên là Comment Board, để sử dụng tiện ích này các bạn Đến trang
google site của bạn kich vào Chỉnh sửa trang (chỉnh sửa trang liên hệ), tiếp theo Chèn >> Tiện ích khác tìm tiện ích có tên là Comment Board.
Trang 16• Admin display name Các bạn điền tên admin mà mình muốn cho mọi người biết.
• Google spreadsheet URL Cái này các bạn điền URL ở cách 1 trên kia vào
• Feed URL Đây là URL nguồn cấp dữ liệu trang của bạn, các bạn dùng
trang feedburner.com để tạo cho mình một nguồn cấp dữ liệu và lấy link dán vào đó.
VI/ Tạo một diễn đàn trên Google site
Sau đây là trình tự các bước thực hiện để tạo được một diễn đàn cho google site như vậy
Bước 1: Tạo mới hoặc mở một nhóm trên Google Groups mà bạn muốn nhúng vào google site
Trong hình bên các bạn nhấn vào Nhóm mới để tạo một nhóm mới, nhấp vào nhóm của tôi để xem danh sách nhóm mà các bạn đã tạo và nhóm mà các bạn đã tham gia
Sau khi nhấn Nhóm mới sẽ xuất hiện giao diện để các bạn điền các thông tin như tên nhóm của bạn cái này các bạn đặt tùy ý sao cho dễ nhớ và gọn gàng là được ở mục Chọn một mức Truy cập thì chọn mức đầu tiên tức là Công khai để ai cũng có thể đăng ký tham gia vào groups của bạn mà sau này sẽ là diễn đàn trên google site
Bước 2: Đăng nhập vào google site nhấn vào nút tạo trang để tạo một trang mà các bạn muốn
nhúng diễn đàn vào đặt tiêu đề trang là Diễn đàn Phần vị trí trang có thể Đặt trang ở cấp cao nhất hoặc ở bất kỳ vị trí nào bạn muốn
Từ menu chon Chèn (Insert) > Tiện ích khác (More gadgets )
Trang 17Trong cửa sổ Thêm tiện ích vào trang của bạn (Setup your gadget) chọn Thêm tiện ích bằng URL(Add gadget by URL) Trong hộp thoại tiếp theo chèn URL tiện ích sau vào ô trống http://www.gstatic.com/sites-gadgets/forum/forum_content.xml Nhấn vào nút Thêm (Add) để thêm tiện ích vào google site
Bước 3:
Cửa sổ cài đặt thông tin tiện ích hiện ra như hình bên
- Ô Default group các bạn điền tên nhóm mà đã tạo được ở bước 1
- Ô The domain containing the content to display thì các bạn cứ để trống
Chọn chiều rộng, Chiều cao cho tiện ích sau đó nhấn OK để hoàn tất
Như vậy là với 3 bước trên các bạn đã có một forum miễn phí cho trang web của mình trên google site Chúc các bạn thành công!
VII/ Một số tiện ích khác cho Google Site
Sử dụng code chèn bảng yahoo báo mình đang online hay offline để khách ghé thăm có thể liên lạc
Bạn chỉ cần paste đoạn code này vào bất cữ chỗ nào có thể gõ văn bản ở dưới dạng html (ví dụ như ở ô văn bản ở thanh bên, hoặc văn bản ở phần trang chủ khi bạn chọn chỉnh sửa trang)
<a href="ymsgr:sendIM?Yahoo!ID"><img border="0"
eNo &amp;l=us">
Trong đó:
+ Thay chỗ nào có Yahoo!ID (bôi đỏ phía trên) bằng tên nick của bạn
+ Imageno (chữ bôi đỏ) thay bằng số, mỗi số thì tượng trưng cho 1 skin yahoo VD số 14
Trang 18Sử dụng code để chèn bộ đếm số người truy cập vào web
Bạn hãy vào trang http://c2.gostats.vn để đăng ký và tạo một tài khoản
Sau khi có tài khoản, bạn hãy làm theo các hướng dẫn để lấy một đoạn mã code HTML Bạn chỉ cần copy và paste vào chỗ gõ Code HTML trên website của bạn là xong
Sử dụng code để chèn số người đàng xem trang web của bạn
Bạn hãy vào trang http://histats.com để đăng ký và tạo một tài khoản
Sau khi có tài khoản, bạn hãy làm theo các hướng dẫn để lấy một đoạn mã code HTML đếm số người đang xem
Bạn chỉ cần copy và paste vào chỗ gõ Code HTML trên website của bạn là xong
Đưa các tài liệu Office vào Google Sites
Bạn có thể dễ dàng trích lấy các file office từ bộ office liên kết với Gmail của mình để đưa vào trong trang web Muốn thế, bạn hãy mở trang web muốn thêm các tài liệu office, sau đó nhấn nút Edit Page rồi vào Insert -> Document, lúc đó trong danh sách hiện ra sẽ có một loạt các tài liệu Word bạn đã từng lưu trước đó trong Offlice của Gmail Bạn chỉ việc bấm chọn lên tài liệu mình muốn đưa vào trong web rồi nhấn Select là được
Trong Include title, bạn hãy điền tiêu đề cho văn bản Word vừa đưa vào Sau đó canh chỉnh độ dài, rộng của văn bản bằng cách thay đổi các con số kích thước trong hai khung là Height và Width Cuối cùng, bạn nhấn chuột lên nút Save để Google tiến hành đưa file Word vào trong trang web
Điểm đặc biệt của cách đưa tài liệu theo kiểu này là bạn có thể soạn trước tài liệu đó ở nhà, sau
đó chuyển vào trong trang web thông qua trung gian công cụ Google Docs, do đó tiết kiệm được rất nhiều thời gian làm việc cho bạn
Hơn thế nữa, khi bạn thu nhỏ kích thước hiển thị của văn bản lại thì người khác chỉ cần kéo thanh trượt bên phải của văn bản là xem hết được nội dung bên trong đó Việc này giúp trang web của bạn chứa được nhiều nội dung nhất nhưng lại tốn ít không gian để hiển thị nhất
Trang 19Ngoài ra, trong mục Align các liên kết L – C – R giúp bạn đưa khung văn bản đến những vị trí
mà bạn muốn trong trang web
Để đưa một file Word vào trong Office của Google, bạn làm theo cách sau: trước tiên, bạn mở Gmail của mình lên, nhấn nút Compose để soạn một lá thư Sau đó, bạn nhấn chuột lên liên kết Attach a file sau đó tìm đến file Word của mình, nhấn Open để đưa nó vào trong Gmail Trong dòng To, bạn hãy điền địa chỉ email của mình, sau đó nhấn nút Send để gửi đi
Bây giờ, bạn mở lá thư vừa nhận được (gửi cho chính mình) lên, kéo chuột xuống dưới và nhấn lên liên kết Open as a Google document bên cạnh tên file Word đó Khi ấy, cửa sổ Google Office sẽ mở ra trong trang mới, bạn nhấn tiếp lên nút Save & Close là xong File Word đó đã được đưa vào Google document cho bạn và bạn chỉ việc thao tác như phần trên để chuyển tiếp
nó vào trong trang web của mình
Hoặc bạn có thể sử dụng Google Docs của Google để tải tài liệu đó lên Trong Google Docs, bạn có thể tạo mới, chỉnh sửa, tải tài liệu có sẵn
Đối với các file được đưa lên Google Docs, bạn có thể đặt các quyền truy cập, bảo mật cho tài liệu đó
Để đưa các file trình diễn (Power Point), Excel vào trong trang web, bạn cũng làm tương tự Để chọn đưa file Power Point, bạn vào Insert > Presentation, còn đưa Excel thì bạn chọn
Spreadsheet Trong trường hợp tài liệu của bạn không nằm trong Google document thì bạn điền link của tài liệu ấy vào trong khung Or paste a web address here: là được
Đưa bộ sưu tập ảnh, lịch làm việc
Google cho phép liên kết một loạt các ứng dụng khác nhau của Google vào trong trang web của bạn, vì thế– bạn dễ dàng đưa bộ sưu tập hình ảnh của mình từ trong Picasa vào trong trang web chỉ với vài thao tác đơn giản Trước tiên, bạn hãy đưa thật nhiều hình vào trong Picasa của bạn, sau đó vào Insert > Picasa Web Slideshow và điền địa chỉ của album ảnh trong Picasa vào trong đó Bạn có thể đưa bộ sưu tập ảnh của mình hoặc của người khác cũng không hề bị ảnh hưởng gì cả
Trong mục Slideshow options, bạn hãy chọn kích thước khung hình cho bộ ảnh bằng cách chọn giá trị mình thích trong mục Select slideshow size, tiếp đó bạn có thể chọn thiết lập để ảnh tự động được mở khi trang web vừa mở ra bằng cách đánh chọn Autoplay hoặc không chọn để