31.thay Doi Bo Cuc Trang

BÀI 31 NGÀY 29.6.2009 THEO KS NGUYỄN TRƯỜNG SINH

CHƯƠNG 6 1. 2. 3. 4. 5.

Tìm hiểu Bố Cục Trang với Bảng . Tạo 1 Khuôn Mẫu Trang Web . Tạo Website từ Khuôn Mẫu Trang . Tạo 1 Trang có Khung . Bố Cục các Trang Web với Khung .

MICROSOFT OFFICE FRONTPAGE 2003 CÓ KÈM THEO MỘT LOẠT CÁC KHUÔN MẪU VÀ WITZARD GIÚP CHÚNG TA DỄ DÀNG TẠO RA CÁC WEBSITE TINH TẾ VÀ PHỨC TẠP . KHI MUỐN TẠO NHANH 1 BẢN GIỚI THIỆU WEBSITE CHO MÌNH , CHO DOANH NGHIỆP HOẶC NHÓM , BẠN CÓ THỂ SỬ DỤNG CÁC SITE TẠO SẴN NÀY . NẾU BỐ CỤC CỦA 1 SITE ĐỊNH NGHĨA KHÔNG ĐÁP ỨNG YÊU CẦU CỦA MÌNH , BẠN CÓ THỂ TÙY BIẾN THEO MỘT SỐ CÁCH ĐỂ LÀM CHO NÓ TRỞ NÊN THÍCH HỢP . TUY NHIÊN , NẾU KHÔNG CÓ HIỂU BIẾT SÂU SẮC VỀ VIỆC SITE ĐƯỢC LẮP GHÉP NHƯ THẾ NÀO , BẠN SẼ DỄ DÀNG PHÁ VỞ SITE KHI THỰC HIỆN CÁC THAY ĐỔI . ĐỂ CHO PHÉP BẠN DỄ DÀNG TẠO RA CÁC SITE CÓ DẠNG THỂ HIỆN TINH TẾ , FRONTPAGE SẼ BẢO VỆ CÁC PHẦN CƠ BẢN VÀ PHỨC TẠP ĐỂ BẢO ĐẢM SITE HOẠT ĐỘNG CHÍNH XÁC . VIỆC LÀM THAY ĐỔI CẤU TRÚC MÀ KHÔNG HIỂU RÕ BẢN CHẤT CỦA NÓ SẼ GÂY NHỮNG KẾT QUẢ KHÔNG THỂ NÓI TRƯỚC ĐƯỢC . ĐỂ GIÚP BẠN HIỂU RÕ HƠN VỀ CÁCH MÀ NHIỂU WEBSITE CHUYÊN NGHIỆP ĐƯỢC TẠO RA , CHƯƠNG NÀY SẼ XEM XÉT MỘT SỐ KỸ THUẬT PHỨC TẠP DÙNG ĐỂ BỐ CỤC TRANG . ĐẦU TIÊN BẠN SẼ LÀM VIỆC VỚI BẢNG ĐỂ TẠO RA CẤU TRÚC CHO TRANG . SAU ĐÓ KHÁM PHÁ VIỆC SỬ DỤNG KHUNG .

1

TUTORIALS thực hiện bằng Video có nhiều cái hay so Text : Trực quan – sinh động – dễ tiếp thu – dễ hiểu . Nhưng nếu muốn lãnh hội trọn vẹn nội dung khuyên các bạn nên đọc và xem Video . Utbinh thực hiện bằng cách áp dụng chương trình CAMTASIA STUDIO 6.0.1 lần đầu tiên chắc chắn có nhiều sơ sót rất mong đón nhận ý kiến đóng góp của các bạn để ngày càng hoàn thiện . Cám ơn các bạn thư về : [email protected]

Video clips : 1.TÌM HIỂU BỐ CỤC TRANG VỚI BẢNG 2.TẠO 1 KHUÔN MẪU TRANG WEB DOWNLOAD MEDIAFIRE : Xem chất lượng cao Bố Cục Trang với Bảng (21.76 MB) : http://www.mediafire.com/download.php?34j0enn2uyz Tạo 1 Khuôn Mẫu Trang Web (35.11 MB) http://www.mediafire.com/download.php?20kjnnzdxnw TRÊN YOUTUBE : Xem không cần Download , chất lượng vừa . Bố Cục Trang với Bảng http://www.youtube.com/watch?v=81464MX5b8Q Tạo 1 Khuôn Mẫu Trang Web http://www.youtube.com/watch?v=Za7F5dg1pww

3.TẠO WEBSITE TỪ KHUÔN MẪU TRANG DOWNLOAD MEDIAFIRE : Xem chất lượng cao 1.Tạo Folder (43.46 MB): http://www.mediafire.com/download.php?mmglfdfun2t 2.Website BasicGarden (13.35 MB): http://www.mediafire.com/download.php?ynd2jkojkiq 3.Nhúng Mẫu Web (10.68 MB): http://www.mediafire.com/download.php?0wgdacmylet 4.Rename Title.htm (12.25 MB): http://www.mediafire.com/download.php?2w4munx4nyd 5.Kết Nối Liên Kết (24.05 MB): http://www.mediafire.com/download.php?iwwzjnmym TRÊN YOU TUBE : Xem không cần Download , chất lượng vừa . FRONTPAGES 2003 Tạo Website từ Khuôn Mẫu Trang 29 6 2009 Tập1 (1.Tạo Folder – 2 .Website Basic Garden ) http://www.youtube.com/watch?v=scGYPPeccII 2

FRONTPAGES 2003 Tạo Website từ Khuôn Mẫu Trang 29 6 2009 Tập2 (3 . Nhúng Mẫu Web – 4 . Rename Title htm ) http://www.youtube.com/watch?v=x-NGVnEYQLo FRONTPAGES 2003 Tạo Website từ Khuôn Mẫu Trang 29 6 2009 Tập3 (5.Kết Nối Liên Kết ) http://www.youtube.com/watch?v=7uZJHmK_Vjc

1.BỐ CỤC TRANG VỚI BẢNG Bạn sẽ tạo 1 Khuôn Mẫu Bố Cục Trang Cơ Bản gồm có các Vùng : Dành cho LoGo – Tiêu Đề Trang – Bảng Nội Dung – Thông Tin Site . Bạn sẽ áp dụng 1 trong những Bảng Bố Cục đã được định nghĩa sẵn . 1. Mở FP > Núy Create a new normal page > Đã mở ra Tab new_page_1.htm trong Cửa Sổ Soạn Thảo ( Để hiển thị các ScreenTips và phím Tắt cho các Nút trên Thanh Công Cụ , hãy nhấp Tools > Customize > Tab Options > Chọn Shortcut keys in screetips ) > Close . 2. Nút Save > Bảng Save As xuất hiện , Hàng Save In xuất hiện : My Web Sites Hàng File name , nhập : table_tempaltes . 3. Nhấp Nút Change Title , HT Set Page Title mở ra , Hàng Page Title nhập : Table Layout Template > Ok > Đã có File table_templates > Save . (H2) .

4. Nhấp Close Cột Folder List để mở rộng Cửa Sổ Soạn Thảo và đã có Tab table_tempalte.htm. 5. Menu Table > Layout Tables and Cells > Ô tác Vụ Layout Tables and Cells hiện ra bên Cột Phải , Vùng New Tables and Cells nhấp Insert 3

Layout Table > Hiện ra 1 Bảng Khung màu xanh lá cây có 8 Nút , chiều rộng 450 pixels và cao 450 pixels ( Chiều cao này sẽ tăng tự động khi nội dung bạn Insert vào vượt 450 pixels ) . (H3) .

6. Trong Vùng Table Properties nhập 640 ( Nếu chiều rộng màn hình của bạn đang sử dụng là 1024 thì hãy nhập 1024 ) trong Hộp Width và nhấp Nút Align Center . (H4) .

7. Nhấp vào Bố Cục có tên Header , Body , Footer and Left > Trang bạn đã tạo đã được thay đổi theo bố cục đã chọn . Chiều rộng và hiều cao mỗi Ô được thông báo bởi Layout Tools . (H5) . 4

• Đường màu xanh lá cây cho biết đó là Cạnh Ngoài của Bảng . • Đường màu xanh dương cho biết sự phân chia giữa Hàng và Cột . 8. Đóng cột Phải > Bố Cục Trang phân chia theo Hình . (H6) .

9. Nhấp lên đường phái dưới Ô Trái chọn Ô đó > Hiện ra các nút kiểm soát . 10.Cách tạo Ô cuối Trang : 5

•

Để con trỏ lên Nút đáy Ô Bên Trái > Con trỏ biến thành chữ T > Rê lên tạo 1 đường nối với đường Ô Cuối Trang . (H7) .

•

Nhấp lên Ô cuối Trang > Con Trỏ thành chữ T > Rê qua Trái > Vùng cuối Trang đã mở rộng hết chiều rộng bảng . (H8) .

2.TẠO 1 KHUÔN MẪU TRANG WEB 6

Bạn có thể xem 1 Website bao gồm 2 loại thông tin : Các Phần Tử ( Chung ) xuất hiện trên mỗi Trang trong Site và các Phần Tử ( Riêng ) cụ thể của mỗi Trang . Khi tạo 1 Khuôn Mẫu Trang , chúng ta sẽ đưa vào Khôn mẫu tất cả các Thông Tin xuất hiện trên mọi Trang trong Site để chỉ tạo nó một lần . Bạn có thể giữ các Vùng mà trong đó Thông Tin sẽ thay đổi trong mỗi Trang tách biệt với các Vùng Tỉnh . Trong Bài Thực Hành này , bạn sẽ bổ sung thông tin áp dụng cho toàn Site vào Trang Web để tạo Khuôn Mẫu mà từ đó có thể tạo các Trang khác . Các Tập Tin dùng cho bài thực hành này được đặt trong Thư Mục PAGE LAYOUTTEMPLATE , download tại : TrangWebMau_KemSach.rar (11.52 MB) : http://www.mediafire.com/download.php?uiznweyq50x Tập Tin Template.rar (5 KB) : http://www.mediafire.com/download.php?ydmtefgmyjz 1. Mở FP > Open > Đến Thư Mục Template > Nhấp đúp lên > Nhấp table_template > Open > Một bố cục Bảng xuất hiện cùng với Vùng Đầu Trang – Ô Trái – Phần Thân – Vùng Cuối Trang . (H9) .

2. Nhấp Phải vào Ô Đầu Trang > Chọn Cell Formatting xuất hiện , nhấp Cell Corner and đổi để phản ảnh lựa chọn của bạn . • Hộp Color chọn Teal ( màu lá cây ) . • Vùng Corner , Hàng Apply nhấp nút Top hiện ra ở phía trên vùng Đầu Trang với Top Right Corner ( Góc Phải được bo tròn ) .

Formatting > Ô Tác vụ Shadow > Ô Tác Vụ thay

Left Corner > Một Thanh góc Trái bo tròn > Nhấp

7

3. Đặt điểm chèn tại Ô Đầu Trang > Insert > Picture > From File > Duyệt đến tập tin tgclogo_sm > Insert > Xuất hiện Logo của Công Ty dưới đường biên bo tròn . Sau khi Trang được đưa vào cấu trúc Website , biểu ngữ Trang sẽ được đưa vào đây . 4. Đặt điểm chèn trong Ô Nội Dung > Nhập các từ > Nhấp phím Enter sau mỗi dòng Ô này chứa các liên kết có mặt mọi Trang Web của Website . Vùng này được gọi là Bảng Nội Dung ( Table of Contents ) . (H10) .

5. Ô Cell Formatting , nhấp Cell Properties and Borbers > Ô tác vụ thay đổi , Hộp VAlign chọn Top > Nội dung của Ô đã di chuyển lên cạnh trên của Ô > Hộp Padding nhập 5 > Enter > Nội dung của Ô di chuyển xuống phái dưới và về phái Phải 5 pixels .(H11) .

6. Để con trỏ bên ngoải Khung bên Trái > Biến thành mủi tên đen nhỏ > Nhấp lên để chọn Ô Nội dung > Nhấp Nút Decrease Font Size cho Font giảm còn 10 point > Nhấp Nút Bold . 7. Nhấp biên phái trên của Ô cuối trang > Hiện ra 8 Nút > Ô Cell Formatting nhấp Cell Corner and Shadows > Trong danh sách Apply nhấp Nút Bottom Left Corners > Hiện ra đường biên bo tròn với màu đã thiết lập trước đó > Nhấp Nút Bottom Right Corner . 8

8. Đặt điểm chèn vào Ô Cuối Trang > Nhập văn bản : E-mail the Webmaster with Questions or Comments about this Web Site . Người xem thướng muốn thấy Thông Tin liên hệ ở cuối mỗi Trang Web . 9. Nhấp 3 lần vào Dòng văn bản để chọn nó > Nhấp Nút Decrease Font Size còn 10 point . 10.Ô Cell Formatting , nhấp Cell Properties and Borders > Padding nhập 5 > Enter > F12 . (H12) .

3.TẠO WEBSITE TRANG

TỪ

KHUÔN

MẪU

Sau khi đã tạo Khuôn mẫu Trang Cơ bản , bạn cần tạo từng Trang của Website từ Khuôn Mẫu đó , bổ sung mỗi Trang vào hệ thống di chuyển của Site rồi đưa vào các biểu ngữ và liên kết Trang thích hợp . Các Tập Tin cho bài thực hành này có trong Thư Mục PageLayout\Assemply , download tại : Toàn Bộ Trang Web Mau Kem Sach .rar (11.52 MB) : http://www.mediafire.com/download.php?uiznweyq50x Tập Tin Assembly.rar (6.72 KB): http://tinyurl.com/utbinh180 1. Download và giải nén Trang Web Mẫu : • •

Tại Desktop tạo 1 Folder đặt tên Assemply > Download Tập tin nén Assemply.rar (6.72KB) tại : http://tinyurl.com/utbinh180 Đặt Tập tin nén này trong Folder vừa tạo > Giải nén > Delete File nén .

2. Tạo Website có 1 Trang : 9

•

Mở FP > File > New > More Website site templates > Nhấp nhẹ lên One Page Site ( Không nhấp đúp ) > Ok > Đã có đường dẫn của Trang có tên OnePag25 ( Tên này do FP tự đặt ) trong Cửa Sổ Soạn Thảo .

3. Rename Folder Website này : •

Cách thứ 1 : Nhấp Phải lên đường dẫn này > Chọn Site Settings > Hàng Web name nhập : BasicGarden > Ok . Ccah1 thứ 2 : Vào My Documents > My Web Sites > Nhấp Phải lên Folder OnePage25 > Rename > Nhập : BasicGarden > k . Nếu Cột Folder Klist chưa hiện ra , nhấp View > Folder List . Và nhớ nhấp Refresh nếu chưa hiện ra tên Website .

• •

4. Mở Trang Web Mẫu ( Assemply ) và nhúng Mẫu này vào Trang Web khác ( BasicGarden ) : • •

•

File > Open > My Documents > My Web Sites > Assemply > tab_template > Open > Đã hiện ra Trang Web Mẫu trong Cửa Sổ Soạn Thảo . File > Save As > My Documents > My Web Sites > BasicGarden > Nhấp đúp lên Index > Hỏi có muốn lưu thay đổi từ Mẫu trước vào không , Nhấp Yes > Cửa Sổ save Embedded Files hiện ra , liệt kê 5 tập Tin Hình ảnh của tab_Template cần được lưu vào Trang Mẫu BasicGarden > Nhấp Nút Change Folder ( Cần lưu vào trong Folder Images của BasicGarden ) > Folder Images > Ok > Ok . (H0) .

Để lưu các tập Tin nhúng vào Folder images của Site BasicGarden .Khuôn Mẫu Trang giờ đây đã được lưu dưới dạng Trang Chủ của Website mới BasicGarden .(H1) .

10

5. Tạo thêm 4 bản sao index.htm : • • • •

Trong Folder List > Nhấp Phải lên index.htm > Copy > Nhấp Phải vào vùng trống trong Folder List > Paste > Hiện ra File index_copy(1).htm Nhấp Phải vào vùng trống trong Folder List > Paste > Hiện ra File index_copy(2).htm . Nhấp Phải vào vùng trống trong Folder List > Paste > Hiện ra File index_copy(3).htm Nhấp Phải vào vùng trống trong Folder List > Paste > Hiện ra File index_copy(4).htm

6. Rename 4 bản sao index.htm : • • • •

Trong Folder List > Nhấp Phải lên index_copy(1).htm > Rename > Nhập : classes.htm . Nhấp Phải lên index_copy(2).htm > Rename > Nhập : contact.htm . Trong Folder List > Nhấp Phải lên index_copy(3).htm > Rename > Nhập : press.htm . Trong Folder List > Nhấp Phải lên index_copy(4).htm > Rename > Nhập : products.htm .

7. Thay Đổi Title cho 5 Trang .htm : •

Trong Folder List , nhấp Phải vào mỗi Tập tin htm > Chọn Properties > Thay đổi Tiêu đề cho mỗi tập tin dưới đây : o index.htm nhập tiêu đề Trang : Welcome . o classes.htm nhập tiêu đề Trang : Class Offerings o contact.htm nhập tiêu đề Trang : Contact Us . o press.htm nhập tiêu đề Trang : Press Release . o product.htm nhập tiêu đề Trang : Products .

8. Tạo các Trang Con cho Trang Chủ : •

Nhấp Tab Web Site > Nút Navigation > Kéo các tập tin products.htm – classes.htm – press.htm – contact.htm từ Folder List vào Cửa Sổ Navigation theo thứ tự trên để làm Trang Con của Trang WelCome ( Trang Chủ đạ thay đổi Title ) . Các Trang con cũng hiện ra tên với Title đã thay đổi .(H2) .

11

9. Tạo Tiêu Đề cho Trang : • •

Nhấp Tab index.htm > Đặt con trỏ dưới Logo Công Ty GardenCo ( Hoặc nhấp lên Logo Công Ty > Nhấp Phím Mủi tên qua Phải 2 lần ) Insert > Page Banner > Ok > Đã hiện ra Từ Welcome làm Tiêu Đề Trang > Nhấp Heading 1 cho tăng kích cở > Chọn Logo và tiêu đề > Nhấp Nút Center cho ra giữa Trang .(H3) .

10.Tạo liên kết cho các Từ : •

Trong Ô Bảng Nội Dung , nhấp đúp vào Từ HOME > Nút Insert Hyperlink > Chọn Exciting File > Chọn Current Folder > Nhấp : index > Hàng Address đã hiện ra : index.htm > Ok . (H4).

12

•

•

Tiếp tục tạo liên kết cho các Trang còn lại : o Nhấp Products > Nhấp products . o Nhấp Class Offerings > Nhấp classes . o Nhấp Press Release > press. o Nhấp Contact Us > Nhấp contact . Trong Ô cuối Trang , nhấp đúp từ Webmaster để chọn nó > Nút Insert Hyperlink > Hiện ra HT Insert Hyperlink , nhấp Mục E-mail Address > Trong hộp E-mail Address , nhập : [email protected] . Từ mailto: sẽ tự động chèn vào đầu dòng – Trong Hộp Subject , nhập : Web site feedback nhằm thiết lập dòng chủ đề của mỗi thông điệp được phát sinh từ liên kết để bạn dễ dàng xác định nguồn góc của chúng > Nhấp Nút ScreenTips , nhập : E-mail the Webmaster ! trong hộp ScreenTip Text > Ok để thiết lập văn bản ScreenTip cho liên kết > Ok > Close Trang Index.htm > Save . (H5).

11.Kiểm Tra Liên Kết : Nhấp tab Web Site > Nhấp Nút Hyperlinks > Hiển thị Các Liên kết từ Trang Chủ đến các Trang Con và liên kết đến Thư điện tử > Close Website lại .(H6).

13

12.BOOKMARK ; Liên kết đến các điểm đánh dấu trong Trang : ( Đã có trong bài Hyperlink ) • •

•

•

Bạn có thể chèn vào các Phần Tử Giữ Chổ có tên là Điểm Đánh Dấu ( Bookmark ) trong Trang Web để Người Xem có thể nhảy trực tiếp đến vị trí cụ thể trên Trang thay vì nhảy đến 1 Tập tin khác . Các Bookmark rất hữu dụng khi bạn có các Trang Web dài hoặc khi muốn nhảy từ 1 Danh sách các liên kết tập trung đến nhiều vị trí khác nhau trên Mạng ( Ví dụ : Các Bookmark thường được dùng trong các Trang Hỏi và Đáp , trong đó danh sách các câu hỏi được đặt ở đầu Trang đã tạo liên kết . Bạn nhấp lên 1 câu hỏi sẽ nhảy đến Câu trả lời tương ứng nằm trong Trang nào đó ) . Trong mã lệnh HTML 1 Bookmark là 1 biến thể của Thẻ . Việc tạo 1 Book mark trong FP rất dễ và không đòi hỏi phải dùng mã lệnh . Bạn chọn 1 vị trí ( Là 1 từ hay 1 cụm từ hay 1 nút nào đó ) rồi vào Insert> Bookmark > Nhập tên cho điểm Bookmark này ( 1 tên Logic hoặc hệ thống đánh số ). Việc liên kết đến 1 Bookmark cũng rất đơn giản . Bạn chỉ cần chèn 1 liên kết bình thường ,trong HT Insert Hyperlink nhấp vào Trang muốn liên kết và sau đó nhấp vào Nút Bookmark để thể hiện một danh sách các Bookmark có trên Trang đó . Các liên kết đền Bookmark thể hiện ở dạng filename#bookmark .

NGÀY 29.6.2009 : 31.FRONTPAGE 2003 :THAY ĐỔI BỐ CỤC TRANG . [img]http://utbinh.com/A6/290609/CHUONG6.jpg[/img] http://utbinh.com/A6/290609/CHUONG6.jpg http://utbinh.com/A6/290609/CHUONG6.doc http://utbinh.com/A6/290609/CHUONG6.pdf TUTORIALS thực hiện bằng Video có nhiều cái hay so Text : Trực quan – sinh động – dễ tiếp thu – dễ hiểu . Nhưng nếu muốn lãnh hội trọn vẹn nội dung khuyên các bạn nên đọc và xem Video . Utbinh thực hiện bằng cách áp dụng chương trình CAMTASIA STUDIO 6.0.1 lần đầu tiên chắc chắn có nhiều sơ sót rất mong đón nhận ý kiến đóng góp của các bạn để ngày càng hoàn thiện . Cám ơn các bạn thư về : [email protected] Video clips : 1.TÌM HIỂU BỐ CỤC TRANG VỚI BẢNG 2.TẠO 1 KHUÔN MẪU TRANG WEB DOWNLOAD MEDIAFIRE : Xem chất lượng cao Bố Cục Trang với Bảng (21.76 MB) : http://www.mediafire.com/download.php?34j0enn2uyz Tạo 1 Khuôn Mẫu Trang Web (35.11 MB) http://www.mediafire.com/download.php?20kjnnzdxnw TRÊN YOUTUBE : Xem không cần Download , chất lượng vừa . Bố Cục Trang với Bảng http://www.youtube.com/watch?v=81464MX5b8Q Tạo 1 Khuôn Mẫu Trang Web http://www.youtube.com/watch?v=Za7F5dg1pww 3.TẠO WEBSITE TỪ KHUÔN MẪU TRANG DOWNLOAD MEDIAFIRE : Xem chất lượng cao 1.Tạo Folder (43.46 MB): 14

http://www.mediafire.com/download.php?mmglfdfun2t 2.Website BasicGarden (13.35 MB): http://www.mediafire.com/download.php?ynd2jkojkiq 3.Nhúng Mẫu Web (10.68 MB): http://www.mediafire.com/download.php?0wgdacmylet 4.Rename Title.htm (12.25 MB): http://www.mediafire.com/download.php?2w4munx4nyd 5.Kết Nối Liên Kết (24.05 MB): http://www.mediafire.com/download.php?iwwzjnmym TRÊN YOU TUBE : Xem không cần Download , chất lượng vừa . FRONTPAGES 2003 Tạo Website từ Khuôn Mẫu Trang 29 6 2009 Tập1 (1.Tạo Folder – 2 .Website Basic Garden ) http://www.youtube.com/watch?v=scGYPPeccII FRONTPAGES 2003 Tạo Website từ Khuôn Mẫu Trang 29 6 2009 Tập2 (3 . Nhúng Mẫu Web – 4 . Rename Title htm ) http://www.youtube.com/watch?v=x-NGVnEYQLo FRONTPAGES 2003 Tạo Website từ Khuôn Mẫu Trang 29 6 2009 Tập3 (5.Kết Nối Liên Kết ) http://www.youtube.com/watch?v=7uZJHmK_Vjc

15