21.bo Cuc Trang

BÀI 21 NGÀY 28.3.2009 UTBINH SOẠN NỘI DUNG BÀI VIẾT NÀY HƯỚNG DẪN CÁC BẠN CÁCH TẠO 1 TRANG WEB HOME PAGE . COPY TRANG NÀY VÀ DÁN LÊN CÁC TRANG WEB KẾ TIẾP ĐỂ TẠO NHẤT QUÁN – THỐNG NHẤT CHO WEBSITE . BẠN CHỈ CẦN CHỈNH SỬA LẠI NỘI DUNG TABLES BÊN PHẢI VÀ BANNER CHO PHÙ HỢP CHỦ ĐỀ CỦA TỪNG TRANG . BẠN CÓ THỂ QUAN SÁT VÀ BẮT CHƯỚC CÁC TRANG WEB TRÊN MẠNG . ĐÓ LÀ NHỮNG TRANG ĐÃ ĐƯỢC HOÀN CHỈNH TỪ BỐ CỤC TRANG ĐẾN TRÌNH BÀY THẨM MỸ LÔI CUỐN NGƯỜI XEM . TỰU TRUNG TRONG 1 TRANG WEB CÓ 3 PHẦN : BANNER – CỘT HYPERLINKS – VÀ TABLES BÊN PHẢI CHỨA NỘI DUNG CẦN THIẾT . TÙY THEO CHỦ ĐỀ MÀ BẠN THIẾT KẾ CÓ NHIỀU TRANG THEO YÊU CẦU CỦA NÓ . SAU KHI HOÀN TẤT THIẾT KẾ TRANG WEB BẠN CẦN UPLOAD ( SỬ DỤNG CHƯƠNG TRÌNH CUTE FTP) LÊN HOST SERVER FREE (SỬ DỤNG HOST FREE WWW.110MB.COM ) ĐÃ CÓ HƯỚNG DẪN TRONG NHỮNG BÀI ĐẦU . CÁC BẠN CÓ THỂ GỞI THƯ CHO UTBINH KHI CẦN HỎI THÊM : [email protected] .

TỔNG QUÁT 1. Mở 1 Trang trống : Mở FP > Nhấp nút : Create a new normal page để tạo 1 Trang trống . Bạn không cần lấy Mẫu Bố Cục Trang trong Cột Layout Tables and Cells bên Phải ( Xem cách sử dụng cột này bên dưới ) > Nhấp Close . Giờ đây hiện ra 1 Trang trống toàn màn hình để bạn bắt đầu thiết kế Web . Đang mở chế độ mặc định chế độ hiển thị Page ( Nút Design ) . 2. Sử dụng Insert Tables – Insert Layout Cell: •

Nhấp Nút Create a new normal page > Hiện ra Cột Layout Tables and Cells bên Phải . Bên Trái Trống là Vùng làm việc .

1

•

Nhấp Insert Layout Tables : Hiên ra Khung thiết kế nội dung Web với kích cở cho mặc định Width – Height . Thay đổi giá trị cho 2 cạnh bằng cách nhấp Phải lên con số > Nhập giá trị mới vào . Hoặc rê từng cạnh co dãn theo ý muốn . Bạn có thể tiếp tục tạo Tables trong Khung Layout Table (H15).

•

Nhấp Insert Layout Cell > Nhập giá trị trong HT Insert Layout Cell > Ok > Ra Layout Cell theo giá trị đã nhập . Tạo table trong Khung này . (H16).

•

Nhấp chọn 1 Layout bên

3. Tạo Tables : Menu > Tables . Bạn sẽ Cột và 2 Hàng , Khung Banner ghi Trang đó . Chọn 2 – Columns 2 – Để chữ không sát

Kiểu dưới .

Table

Tables > Insert tạo Tables có 2 trên cùng là chủ đề của như sau : Rows Cell Padding 3 ( với Bảng ) –

2

Border có Size 0 ( Để không hiển thị vạch Bảng khi Preview ) > Ok > Hiện ra 4 Table nhỏ đều nhau .(H1).

4. Chỉnh Table theo Bố Cục Trang : Trên cùng là 1 Table nằm ngang chứa Banner , bôi đen > Chọn Merge Cells để nhập thành 1 .

CÁC TABLES TRONG TRANG 1. TẠO BANNER :

•

Qui định kích cở : Để con trỏ bên Trái cạnh Khung Banner > Hiện mủi tên đen nhỏ chỉ hướng vô Banner > Nhấp > Banner trở thành 3

màu đen được chọn > Nhấp Phải lên , chọn Cell Properties > Nhập 120 ( Bạn muốn Banner này chỉ cao 120 pixels mà thôi ) > Ok > Banner đã có chiều cao theo qui định của bạn . (H2).

•

Hoặc rê cạnh đáy co dãn chiều cao Banner

•

Sử dụng Bảng Cell Properties : •

Phần layout : Ấn định chiều rộng và cao cho Row này . 4

•

Phần Borders : Chọn màu nền – màu nổi viền .

•

Phần Background : Chọn màu nền hoặc nhấp nút Browse chọn 1 Hình nền > Apply > Ok . (H3).

5

•

Nhập văn bản vào Banner : Gỏ nhập đoạn văn hay Copy> Paste 1 Banner đã được tạo sẵn bằng Photoshop

2. CỘT TRÁI CHỨA LINKS LIÊN KẾT :

•

Các Links này có thể là Links nội bộ dẫn đến các Trang của Website mà bạn sắp tạo hoặc đến 1 Trang Web nào đó mà bạn muốn .

•

Cách tạo Cột này : Rê ranh Table qua Trái để thu hẹp Cột .

•

Cách chọn Cột trái : Để con trỏ bên Trái sát mép Table > Hiện ra mủi tên đen > Nhấp > Đã chọn Hàng này gồm 2 Tables > Giữ Phím Ctrl nhấp Table bên Phải > Đã bỏ chọn Table này chỉ còn chọn Table bên Trái là Cột chứa Links .

•

Nhấp Phải lên cột chứa Links > Chọn Cell Properties . bạn đã thấy Specify Width là 10 in Percent so độ rộng màn hình > Nhập lại 15 > Chọn màu Background > Apply > Ok .

•

Sở dĩ không tạo được viền cho Table con vì ngay từ lúc đầu trong Table Properties bạn đã không cho giá trị trong Borders ( Vì bạn muốn khi Preview không thấy viền từng Table ). (H4).

3. CÁCH TẠO CỘT HYPERLINKS :

•

Cột này thường ở bên Trái , đó là những chữ ngắn chứa Hyperlink . Khi nhấp lên nó sẽ dẫn đến 1 Trang Web khác hoặc đến 1 Trang có sẵn trong Website của bạn .

6

•

Tôi nhập từ : “LƯU NHẬT NAM “ > Bôi đen > Nhấp Phải > Chọn Hyperlik> Ra Bảng Hyperlink , hàng Address nhập địa chỉ Trang Web của Lưu Nhật Nam vào > Ok . (H9).

7

•

Tôi nhập từ : THÔNG TIN CÔNG NGHỆ vào > Bôi đen > Nhấp Phải > Chọn Hyperlik> Ra Bảng Hyperlink , hang Address nhập địa chỉ Trang Web của Thông Tin Công Nghệ vào > Ok . (H10).

•

Tạo Trang Web của bạn thiết kế : 8

o Nhấp Nút Tạo Trang trống > Copy > Paste nội dung vào ( hay gỏ chữ vào ) > Nhấp Nút Preview > Quan sát vị trí chữ và hình Minh Họa cho đúng vị trí của nó , nếu sai bạn nhấp nút Design để sửa lại < Ưng ý , nhấp Nút Save > Nhấp Đúp tên Folder của Website này để tên này hiện ra trong Hàng Save In > File Name nhập : baivietutbinh.htm > Save . (H11).

9

o Tab của Trang này đã đồi tên mới > Nhấp Tab Website > Bạn đã thấy có 1 Trang Web mới với tên vừa nhập . •

Tạo Liên Kết : Cột Liên Kết nhập : Bài Viết Utbinh > Bôi đen > Phải > Hyperlink > Chọn Folder Web 280309 > Chọn liến kết đến : baivietutbinh > Hàng Address đã có tên baivietutbinh.htm > Ok . (H12).

•

Bạn tiếp tục tạo các Links Favorites bằng các bước trên . 10

•

Bạn có thể Copy 1 Cột Links của những Websites khác dán vào nơi đây (H13).

•

Tạo Link Home Page cho cột này : Bạn phài tạo link này để khi mở các Trang khác nhấp lên Link Home Page để trở về Trang Chủ . Cách tạo : Nhập từ Trang Chủ > Bôi đen > Phải > Hyperlink > Nhấp lên index > Đã hiện : index.htm trong Hàng Address > Ok . (H13a).

11

•

Copy Cột Links của Trang Chủ nầy dán vào các Trang trong Website này .

4. TABLE CHỨA VĂN BẢN VÀ MULTIMEDIA :

•

Tùy theo nội dung của Website mà bạn sắp thiết kế , bạn có thể qui định là 1 table , hoặc có nhiều Tables .

•

Tạo Table : Nhấp con trỏ lên Table bên Phải > Menu Table > Insert > Table > Ra HT Insert Table , nhập Rows 10 – Columns 2 > Ok .(H6).

12

•

Như vậy là bạn đã tạo xong các Tables và Bố Cục cho Website này . các Trang sau đó bạn Copy Trang Chủ Home Page này và Paste lên , sau đó bạn chỉ xóa nội dung Table bên Phải là xong mà bạn vẫn giữ được Bố Cục thống nhất cho Website . Đây là điều nhất quán rất cần thiết cho bất cứ Websire nào . Trong Table mà bạn đã xóa , bạn bắt đầu nhập nội dung mới phù hợp với chủ đề của Trang và sửa chủ đề cho Banner nửa .

5. CHÈN BÀI VIẾT VÀO TABLE BÊN PHẢI :

•

Bạn quan sát các Trang Web khác của Mạng , thấy Định dạng và trình bày rất đẹp cho bố cục chữ và Hình ảnh minh họa . Bạn cố gắng bắt chước khuôn mẫu đó vì nó là tối ưu rồi khi họ đã thiết kế hoàn chỉnh . Việc tinh chỉnh sẽ làm bạn mất rất nhiều thời gian nhưng hiệu quả mang lại rất lớn vì sự thẩm mỹ lôi cuốn người xem rất nhiều ( Mặc dù chưa biế nội dung Trang Web ra sao ) . Bạn vào Google nhập từ khóa : “ trình bày Website “ sẽ ra các Trang Webs vào tham khảo .

•

Chuẩn bị : Bạn phải có những bài viết và Links đến bài viết này hoặc lưu bài viết trong Folder Web để nhấn nút liên kết đến nó .

•

Copy > Paste Tựa và lời giới thiệu vào .

13

•

Tạo Nút và tạo Liên kết trong Nút : Nhập từ > Bôi đen chữ > Chọn Hyperlink > Nhập Link của nội dung vừa giới thiệu vào Hàng Address > Ok (H7).

•

Thực hiện giống các bước trên cho các Ô kế tiếp . Bạn không cần quan tâm đến độ lớn nhỏ của Ô . Cuối cùng Bôi đen các Ô và sử dụng các Nút trong Công Cụ Table để chỉnh vừa khít nội dung các Ô .(H8).

14

15

6. KẾT QUẢ THỰC TẬP :

Sau đây là hình tạo Bố cục cho Trang Web Home Page . (H14) . Sau đây là Link của 2 Websites vừa thiết kế xong : HOST MUA : http://utbinh.com/site280309/index.htm http://utbinh.com/site250309/index.htm HOST FREE : http://kimtrang.110mb.com/site280309/index.htm http://kimtrang.110mb.com/site250309/index.htm CHANNEL YOUTUBE CỦA UTBINH : http://www.youtube.com/designutbinh WEBSITE CỦA UTBINH TRƯỚC ĐÂY : http://utbinh.com/ub/ ĐỌC WEBSITE CỦA ĐÀO HIẾU : http://www.daohieu.com/website/ NGÀY 29.3.2009 : 21.FRONTPAGE 2003 : BỐ CỤC TRANG . [img]http://utbinh.com/A3/290309/bocuc.jpg[/img] http://utbinh.com/A3/290309/bocuc.jpg http://utbinh.com/A3/290309/bocuc.doc http://utbinh.com/A3/290309/bocuc.pdf

16

Tìm hiểu về TORRENT (3.75MB) : http://utbinh.com/A3/290309/TORRENT.doc KẾT QUẢ THỰC TẬP : Sau đây là Link của 2 Websites vừa thiết kế xong : HOST MUA : http://utbinh.com/site280309/index.htm http://utbinh.com/site250309/index.htm HOST FREE : http://kimtrang.110mb.com/site280309/index.htm http://kimtrang.110mb.com/site250309/index.htm CHANNEL YOUTUBE CỦA UTBINH : http://www.youtube.com/designutbinh WEBSITE CỦA UTBINH TRƯỚC ĐÂY : http://utbinh.com/ub/ ĐỌC WEBSITE CỦA ĐÀO HIẾU : http://www.daohieu.com/website/ LINKS CÁC BÀI VIẾT LẦN 3 NEW FRONTPAGE 2003 Bài 1 : http://utbinh.com/ANOV08/121108/FP111108.doc Bài 2 : http://utbinh.com/ANOV08/111108/110MB.doc Bài 3 : http://utbinh.com/ANOV08/131108/9down.doc Bài 4 : http://utbinh.com/ANOV08/131108B/liveshare.doc Bài 5 : http://utbinh.com/ANOV08/141108/CuteFTP.doc Bài 6 : http://utbinh.com/ANOV08/151108/bosung.doc Bài 7 : http://utbinh.com/ANOV08/171108/TEXT_HINH.doc Bài 8 : http://utbinh.com/ANOV08/181108/giaodien.doc Bài 9 : http://utbinh.com/ANOV08/241108/khaosat.doc Bài 10 : http://utbinh.com/ANOV08/261108/hieuluc.doc Bài 11 : http://utbinh.com/ANOV08/291108/khampha.doc Bài 12 : http://utbinh.com/ADEC08/041208/personal.doc Bài 13 : http://utbinh.com/ADEC08/091208/WITZARD.doc Bài 14 : http://utbinh.com/ADEC08/151208/copypaste.doc Bài 15 : http://utbinh.com/ADEC08/201208/DINHDANG.doc Bài 16 :http://utbinh.com/A2/250209/TrinhDuyet.doc Bài 17 : http://utbinh.com/A3/050309/DANHSACH.doc Bài 18 : http://utbinh.com/A3/090309/table.doc Bài 19 : http://utbinh.com/A3/100309/table2.doc Bài 20 : http://utbinh.com/A3/220309/HINH.doc Bài 21 : http://utbinh.com/A3/290309/bocuc.doc LINKS THỰC TẬP FRONTPAGE 2003 Trên host mua : http://utbinh.com/ANOV08/121108/site121108/index.htm http://utbinh.com/ANOV08/site141108/indexB.htm http://utbinh.com/ANOV08/site161108/index.htm http://utbinh.com/ANOV08/site151108/index.htm http://utbinh.com/site011208/index.htm http://utbinh.com/site071208/index.htm http://utbinh.com/site151208/index.htm http://utbinh.com/site151208/index.htm http://utbinh.com/site161208/index.htm http://utbinh.com/A2/site250209/index.htm http://utbinh.com/A3/site080309/index.htm http://utbinh.com/site280309/index.htm http://utbinh.com/site250309/index.htm LINKS THỰC TẬP FRONTPAGE 2003 Trên host free 110mb.com : http://kimtrang.110mb.com/onePage2/indexB.htm http://kimtrang.110mb.com/site121108/index.htm http://kimtrang.110mb.com/site141108/indexB.htm http://kimtrang.110mb.com/site151108/index.htm http://kimtrang.110mb.com/site161108/index.htm http://kimtrang.110mb.com/site261108/index.htm http://kimtrang.110mb.com/site011208/index.htm http://kimtrang.110mb.com/site071208/index.htm http://kimtrang.110mb.com/site151208/index.htm http://kimtrang.110mb.com/site161208/index.htm

17

http://kimtrang.110mb.com/site250209/index.htm http://kimtrang.110mb.com/site080309/index.htm http://kimtrang.110mb.com/site280309/index.htm http://kimtrang.110mb.com/site250309/index.htm

18