GOOGLE SITES thiết kế web trực tuyến potx

BÀI 24 NGÀY 31.1.2009 UTBINH SOẠN Xem 2 Trang Web thực tập : http://sites.google.com/site/utbinhsite/ http://sites.google.com/site/utbinhdesign/ Google đã và đang là công cụ tìm kiếm website được sử dụng nhiều nhất. Giờ đây, Google còn mong muốn trở thành một điểm đến của những ai muốn tự tạo lập cho mình một website khi ra tuyên bố ngày hôm qua về việc cung cấp dịch vụ miễn phí có tên Google Sites cho phép người dùng tạo ra các website dễ dàng. Với mục đích cho phép người dùng có thể tạo dựng được một trang chia sẻ thông tin giữa một nhóm người làm việc trong cùng một công ti hay một tập thể lớp, Google cung cấp một dịch vụ miễn phí cho phép tạo lập website một cách dễ dàng. Theo như giám đốc phụ trách dịch vụ mới Dave Girouard thì "Với dịch vụ này của Google, chỉ bằng một vài cú click chuột, bất kì ai cũng có thể nhanh chóng tạo lập, cập nhật một trang web với các tính năng phong phú như ảnh, lịch, video (lấy từ YouTube)". Ngoài ra, các thông tin để chia sẻ khác như các đường dẫn internet, các bài viết, các văn bản, báo cáo, trình diễn đều được bố trí khoa học cũng như được cập nhật dễ dàng. Sở dĩ có thể tạo dựng ra đựoc một dịch vụ thân thiện với người dùng thế này là do Google đã có trong tay rất nhiều các công cụ phục vụ cho việc phát triển các website khi mua về JotSpot hồi năm ngoái. Nhận xét về Google Sites, nhiều người cho biết nó rất giống với dịch vụ SharePoint, một công cụ mất phí để tạo lập website của Microsoft. Tuy nhiên, khác với SharePoint, Google Sites cho phép các website được chạy trên một trong những máy chủ của công ti và nó hoàn toàn miễn phí cho người dùng Google Apps. Trong khi đó, để tạo lập được các website tương tự nhằm phục vụ cho khoảng một trăm người thì các công ti buộc phải bỏ tiền ra đầu tư cỡ hàng chục đến hàng trăm nghìn USD nếu như dùng SharePoint. Mục đích hiện tại của Google Sites là cho phép các nhân viên văn phòng tạo ra một trang chia sẻ tin tức nội bộ mà ở đó các thành viên có thể tạo các trang lý lịch cũng như các hoạt động, công việc, kế hoạch của mình. Đối với ứng dụng trong trường học, Google Sites sẽ hoạt động như một lớp học ảo cho việc trao đổi các bài tập, bảng điểm, thông báo hay các thông tin của các sinh viên. I.ĐĂNG KÝ TẠO TRANG WEB : 1 1. Vô : http://www.google.com.vn > Nhấp lên chữ : Google Sites màu xanh . (H1). 2. Ra Trang Create New Sites : • Hàng Site Name , nhập : utbinhsite ( Tên Trang Web của bạn ) > Tự động hiện ra URL của bạn sẽ là : http://sites.google.com/site/utbinhsite • Hàng Site Description , nhập mô tả chủ đề ngắn gọn : VIẾT CÁC BÀI HƯỚNG DẪN TIN HỌC PHỤC VỤ CHO CÁC EM VIỆT NAM HIẾU HỌC . • Hàng Mature Content : Đánh dấu kiểm vào khi muốn hiện ghi chú “ Trang Web nầy chỉ dành cho người lớn “ . • Hàng Share With : Mặc định đang chọn “ Dành cho tất cả mọi người được xem “ hoặc chọn dưới “ Dành cho người được chỉ định mới xem được “ . • Hàng Site Theme Mẫu Trang Web mặc định đang chọn Mẫu Default , nếu không vừa ý các mẫu nầy , nhấp More Themes > Hiện ra các mẫu > Đánh dấu chọn 1 Mẫu . (H1a). • Nhập Mã từ vào Ô trống kế bên > Nhấp Create Site . (H2). 2 II.TẠO TRANG SITE CHO WEBSITE CỦA BẠN : 1. Ra Trang Web của bạn với tên mà bạn đã đăng ký : utbinhsite . Mặc định hiện ra trang Home , nhấp Nút Edit Page > Nhập nội dung vào hoặc Copy > Paste từ 1 bài Viết có sẵn . Đối với văn bản , bạn có thể định dạng Formatting chúng bằng Công Cụ Định Dạng có sẵn . 2. Bạn muốn chèn 1 Banner hay Logo vào : • Đọc bài hướng dẫn cách tạo Banner : http://www.live-share.com/files/377849/tao_banner.doc.html • Nhấp con trỏ chỉ định nơi đặt Banner ( Logo ) > Nút Insert > Chọn Image > Chọn Uploaded Images ( Cho trường hợp lấy Hình trong Ổ Cứng của bạn ) > Nút Browser > đến nơi lưu Banner , open > Chờ Upload Banner lên Host Server Google , xong nhấp Nút Add Images > Hiện ra Banner bạn vừa Insert vào > Nhấp Nút Save . Nếu muốn chọn Cở Size : S (Small)-M (Medium)-L (Large) thì nhấp lên Hình > Hiện ra Thanh Công cụ đáy Hình để sử dụng .(H3). • Insert các Hình Minh Họa vào Bài Viết : Sau khi đã Save Trang Web không ở Tình Trạng Design để cho bạn thiết kế , bạn phải nhấp Nút Edit Page để bắt đầu nhập liệu > Đặt con trỏ 3 sau (H1) để chỉ định nơi Insert Hình > Nút xổ xuống của Insert > Chọn Image > Chọn Uploaded Images > Nút Browse > Đến Folder chứa các Hình Minh Họa > Chọn H1 > Open > Khi Upload xong hiện ra Hình H1 > Nút Add Image > Nút Save > Chờ Hàng chữ Save màu vàng biến mất lúc đó Save mới hoàn tất để tiếp tục thao tác khác . (H4). • Tiếp tục các bước trên cho các Hình Minh Họa còn lại . III.TẠO TRANG WEB 2 KẾ TIẾP : 1. Nhấp Nút Create new Page > Hàng Page Name nhập tựa đề cho Trang Web > Nhấp Chữ Change để thay đổi tên URL vì khi bạn nhập tiêu đề Titlte cho Trang Web nầy nó đương nhiên là Tên URL dài thòng bạn phải Change nó lại > Bôi đen chữ hiện có > Nhập từ ngắn gọn mới > Nhấp Sve > Đã hiện ra URL ngắn gọn . (H5). 4 2. Chọn kiểu mặc định : Web Page > Chọn mặc định : Put Page at the Top Web > Nhấp Create Page . (H6). 3. Khi bạn Insert 1 Hình vào rồi , nhấp lên Hình > Hiện ra Thanh Công Cụ để hiệu chỉnh : • Align ( Vị Trí ) : L ( Left ) – C ( Center ) – R ( Right ) . • Size ( Kích cở ) : S ( Samll ) – M ( Medium ) – L ( larger ) .Original : Kích cở nguyên gốc . • Wrap : On – Off – Remove .(H7). IV.TẠO TRANG WEB 3 (GADGET): 1. Nhấp Nút Create New Page > Ra Trang Create New page , chọn kiểu Dashboard > Mặc định chọn Put Page the Top Level . Nếu không muốn để Trang Web 3 vào vị trí này , bạn chọn để vào dưới Trang : Tạo Trang Web kế tiếp hoặc chọn vị trí khác khi nhấp : Choose a different Location > Nhấp Create Page . (H8). 2. Ra 4 Ô Gagget để bạn chọn 4 5 Gadget ( Đồ vật ) insert vào , có chữ gợi ý : Add More Gadgets using the Insert Menu , có nghĩa là bạn sẽ lấy Gadget trong Google có sẵn thì nhanh nhất , có đủ thứ bạn cần . Nhấp lên trang giấy có 3 cột ở giữa 1 Ô > Nhấp More > Ra các Gadget của từng thể loại tương ứng > Nhấp chọn 1 Kiểu Gadget thứ 1 ( Đồng Hồ ) .(H9) . 3. Hiện ra Size để bạn tùy chỉnh và Preview > Ok . (H10). 6 4. Chọn 3 Gadgets còn lại > Save > Hiện ra 4 Gadgets vừa chọn . (H11). V. TẠO TRANG WEB 4 ANNOUNCEMENTS : 1. Mở Trang Tạo Trang Web 3 > Nhấp Create new Page > Hàng Page name nhập : Tạo Trang Web 4 Annountcements > Chọn kiểu Annnountcements > Craate Page . 2. Ra Trang : Tạo Trang Web 4 : Annountcements > Nhấp New Post > Dán nội dung Trang Web thông báo vào : http://www.google.com/sites/help/intl/vi/overview.html V.TẠO TRANG WEB : FILE CABINET : 1. Mở Trang Web 4 Announcements > Create New Page > Page name nhập : Tạo Trang Web 5 : File Cabinet > Nhấp Change , nhập : Cabinet > Save . 2. Chọn Kiểu File Cabinet > Create Page . 3. Nhấp Add File > Nút Browse > Đến File cần Add > Nhập Description > Upload . (H12). 4. Sa u 7 khi Upload xong , hiện ra tên File . Bạn nhấp lên dể Download File này về . (H13). 5. Nhấp Nút Add để tiếp tục thêm nhiều Files nửa . (H14). VI.TẠO TRANG WEB 6 : LIST : 1. Lập lại bước 1 và 2 > Chọn List > Create Page . 2. Có 4 Kiểu thể hiện List , bạn chọn 1 > Ở đây chọn Create your Own > Nhấp Create a Custom List . (H15). 3. Ra bảng Customize your List , Column name nhập : Các Trang Web của utbinh > Type chọn : URL > Sorting chọn : Các Trang Web của utbinh > save . (H16). 8 4. Nhấp Add Item > Nhập URL và Pisplay > Save . (H17). 5. Hiện ra Link vừa tạo > Nhấp lên > Trình duyệt mở ra Trang Web này . (H18). 6. Nhấp Add Item để thêm các Links khác . (H19). 9 VII.INSERT TEXT – HÌNH – TABLE – HYPERLINKS : 1. Nhấp Sitemap cột Trái > Nhấp Trang Web cuối > Create a new Page > Page name nhập : Insert Text và Hình ảnh > Change > Nhập : Text_Hình > Save > Chọn mặc định Web Page > Chọn mặc định Put Page at the Top Level > Create Page . 2. Dán Bài Text vào : Nhấp Save > Bạn có thể dùng Thanh Công Cụ Formatting để hiệu chỉnh Text . (H20). 3. Insert Hình vào : Craete new Page > Nhấp con trỏ chỉ định vị trí > Insert > Image > Chọn Uploaded Images > Browse > Đến Hình cần Insert > Open > Chờ Uploading hoàn tất > Add Image > Hình quá to , nhấp lên Hình > Chọn M ( Medium ) . (H21). 10 [...]... http:/ /sites .google. com/a/jotspot.com/sample-family/Home http:/ /sites .google. com/a/organic-city.com/intranet/Home https:/ /sites .google. com/a/altostrat.com/project-eggplant/Home https:/ /sites .google. com/a/altostrat.com/jkraus/Home http:/ /sites .google. com/a/googleclassrooms.org/mrs-richau/Home http:/ /sites .google. com/a/googleuniversity.org/ski-club/Home Trước đây utbinh đã có viết bài hướng dẫn Thiết Kế Web dựa theo mẫu lấy từ trên Mạng... nội dung Trang Web : Đến Cột Trái > Nhấp Sitemap > Hiện ra các Trang Web trong Website này 11 Trong menu INSERT có liệt kê các công cụ giúp bạn có thể lấy từ nguồn đó các dữ liệu cần thiết để Insert vào Trang Web của bạn như : Images – Links – Table Contents – Calendard – Documents – Picasa – Video – Text Box v.v… 14 VIII.THAM KHẢO CÁC TRANG WEB MẪU CỦA GOOGLE SITES : http:/ /sites .google. com/a/jotspot.com/sample-family/Home... bạn có thể áp dụng bài viết nầy để tự thiết kế WEBSITE cho riêng mình lấy mẫu từ các Trang Web mẫu liết kê trên Sau đây là Link bài viết hướng dẫn : http://www.live-share.com/files/377968/30.Thiet_ke _Web_ theo_Mau_tren_Mang.doc.html VIII.LINKS CÁC BÀI VIẾT THIẾT KẾ WEB CỦA UTBINH : 1 GOOGLE : Từ bài 1 đến bài 10 : http://www.live-share.com/files/377982/LESSONS _GOOGLE_ Tu_1_den_10.rar.html Từ bài 11 đến... http://utbinh.com/A2/310109/SITE.doc http://utbinh.com/A2/310109/SITE.pdf Tìm Hiểu Google Sites (665KB) : http://utbinh.com/A2/310109/TimHieu_GoogleSites.doc Slide Show JAPAN (5.36MB) : http://utbinh.com/A2/310109/Japan.PPS Slide Show : Nhớ Quê Tôi (5.55KB): http://utbinh.com/A2/310109/NhoQueToi.pps Xem 2 Trang Web thực tập : http:/ /sites .google. com/site/utbinhsite/ http:/ /sites .google. com/site/utbinhdesign/ Đọc bài hướng dẫn cách... http://www.4shared.com/file/83359033/32af3370/LESSONS_FRONPAGE_TU_1_DEN_15.html 5 LESSONS FRONT PAGES 2003 : Từ bài 1 đến bài 45 : http://www.4shared.com/file/83359930/a4775945/45_Bai_TK _Web_ FRONTPAGES2003.html 7 Bài Đọc Thêm : http://www.live-share.com/files/377995/7_Bai_DocThem_FP.rar.html NGÀY 31.1.2009 : 15 32 .GOOGLE SITES : THIẾT KẾ WEB TRỰC TUYẾN ... xuống Insert > Chọn LINK ( Hoặc nhấp Nút Link kế bên) > Chọn 1 Link có sẵn > Ok > Save (H25) 12 • • Nhấp lên chữ CODEC > Mở ra Trang Web đã liên kết Chọn Hình cần Hyperlink > Chọn 1 Link có sẵn trong Bảng Create Link >Ok > Save 9 Tab MORE ACTIONS và SITE SETTINGS : • Tab More Actions : Có các công cụ sau đây (H26) • Chú ý : Khi thiết kế muốn xem thử trang Web vừa tạo thế nào thì chọn : Preview Page...4 Insert các Hình kế tiếp > Nhấp lên Hình để chỉ định vị trí đặt Hình ở Left – Center hay Right 5 Lấy Hình từ Trang Web để Insert vào : Insert > Image > Chọn Web Address (URL) bên cột Trái > Nhấp địa chỉ Trang Web chứa Hình trong hàng Image URL > Chờ Uploading > Xong , nhấp Add Image > Hiện ra Hình từ Trang Web đã lấy về > Bạn nhấp đúp lên Hình sẽ có hình này hiện ra trên Trang Web có Hình URL của... bài 21 đến bài 34 : http://www.4shared.com/file/83357828/52aafd32/LESSONS-DREAMVEAVER-8-TU-21-DEN-34.html 3 EXPRESSION WEB 2007 : Từ bài 1 đến bài 14 : http://www.live-share.com/files/377993/EXPRESSION _WEB_ TU_1_DEN_14.rar.html Đọc thêm : http://www.live-share.com/files/377994/EXPRESSION _WEB_ DOCTHEM.rar.html 4 NEW LESSONS FRONT PAGES 2003 : Từ bài 1 đến bài 15 : http://www.4shared.com/file/83359033/32af3370/LESSONS_FRONPAGE_TU_1_DEN_15.html... bài 10 : http://www.live-share.com/files/377982/LESSONS _GOOGLE_ Tu_1_den_10.rar.html Từ bài 11 đến bài 20 : http://www.live-share.com/files/377983/LESSONS _GOOGLE_ Tu_11_den_20.rar.html Từ bài 21 đến bài 31 : http://www.live-share.com/files/377988/LESSONS _GOOGLE_ Tu_21_den_31.rar.html 2 DREAMWEAVER 8 : Từ bài 1 đến bài 10 : http://www.4shared.com/file/83358130/12d86f98/LESSONS-DREAMVEAVER-8-TU-1-DEN-10.html . Trang Web thực tập : http:/ /sites .google. com/site/utbinhsite/ http:/ /sites .google. com/site/utbinhdesign/ Google đã và đang là công cụ tìm kiếm website được sử dụng nhiều nhất. Giờ đây, Google. : http:/ /sites .google. com/a/jotspot.com/sample-family/Home http:/ /sites .google. com/a/organic-city.com/intranet/Home https:/ /sites .google. com/a/altostrat.com/project-eggplant/Home https:/ /sites .google. com/a/altostrat.com/jkraus/Home http:/ /sites .google. com/a/googleclassrooms.org/mrs-richau/Home http:/ /sites .google. com/a/googleuniversity.org/ski-club/Home Trước. http://www.4shared.com/file/83359930/a4775945/45_Bai_TK _Web_ FRONTPAGES2003.html 7 Bài Đọc Thêm : http://www.live-share.com/files/377995/7_Bai_DocThem_FP.rar.html NGÀY 31.1.2009 : 15 32 .GOOGLE SITES : THIẾT KẾ WEB TRỰC TUYẾN . <center><img