TẠO TRANG WEB VỚI FRONTPAGE XP:
KHÔNG TAG, MÀ... TABLE!
(tiếp theo các số 6, 7)
LÊ HOÀN

(e-CHÍP) - Sau hai bài viết, đăng trên hai số 6 và 7, giới thiệu những bước cơ bản nhất trong việc dùng FrontPage để tạo website, nhiều bạn đọc đã yêu cầu e-CHÍP viết tiếp để truyền đạt những kiến thức nâng cao hơn nhằm giúp các bạn trẻ “rèn luyện tay nghề” cho... cả thế giới biết đến mình.

e-CHÍP xin cố gắng đáp ứng yêu cầu trên, dù rất biết rằng các bài viết này không thể trình bày đầy đủ từ A đến Z như một cuốn sách hay một giáo trình tin học. Với mục đích “dụ khị” các bạn chưa bao giờ quan tâm đến việc làm trang web tò mò xem, thử “vọc” rồi “mê” thiết kế website, e-CHÍP trân trọng kêu gọi các bạn đang “thử tay nghề” với FrontPage hãy thông báo địa chỉ website của mình cho e-CHÍP theo địa chỉ email echip@vasc.com.vn. Chúng tôi tình nguyện làm cầu nối để các bạn giao lưu, tìm hiểu và trao đổi kinh nghiệm với nhau (qua e-mail). Tuy “vạn sự khởi đầu nan” nhưng e-CHÍP hy vọng từ nhóm bạn FrontPage này sẽ có những bạn trở thành chuyên gia thiết kế web nổi tiếng trong tương lai.

Mặt khác, thêm một lần xin cáo lỗi cùng bạn đọc và ba tác giả của các bài viết hướng dẫn thiết kế website với DreamWeaver, Interdev và CSS về việc tạm gác bài (các bài đều thú vị, song hơi bị nặng trước khi bạn đọc làm chủ hẳn FrontPage) cho các số sau!

Bây giờ, mời các bạn cùng vào cuộc tiếp với FrontPage...

Đối với các trang web có nhiều phần tử như văn bản, hình ảnh lớn nhỏ xen kẽ nhau, việc sắp xếp vị trí các phần tử này không đa dạng như khi định dạng văn bản Word - do hạn chế của ngôn ngữ HTML. Phần lớn các trang web hiển thị thông tin theo dạng một cột với văn bản và hình ảnh chỉ đơn giản là canh trái hay canh phải, hoặc canh giữa và “đi” lần lượt từ trên xuống dưới. Mỗi khi bạn thay đổi kích thước cửa sổ hiển thị hay độ phân giải của màn hình, vị trí tương đối của hình ảnh và văn bản thay đổi không thể biết trước được (do trình duyệt tự động sắp xếp lại).

Nói tóm lại, việc cố định vị trí văn bản và hình ảnh nằm cạnh nhau theo chiều ngang không thể thực hiện được với các thẻ (Tag) định dạng HTML thông thường. Để giải quyết vấn đề này, người ta dùng bảng (table), vì ưu điểm của bảng là giữ nguyên vị trí tương đối các ô (cell) theo hàng ngang khi thay đổi kích thước cửa sổ hay trình duyệt, cho phép “lồng” bảng trong bảng theo nhiều cấp.

Hiện nay, việc dùng bảng để chia trang chủ thành ba cột rất thông dụng và gần như là “model thời thượng” của rất nhiều website nước ngoài lẫn trong nước, thí dụ trang chủ của VietnamNet (www.vnn.vn).

Bước 16. Chèn bảng (Table)

- Di chuyển con trỏ đến vị trí cần chèn bảng trong trang web, mở menu Table/Insert/Table. Trong hộp thoại Insert Table, bạn chọn số lượng hàng (Rows), cột (Columns). Chỉ định chiều rộng bảng theo giá trị tuyệt đối (In pixels) - chiếm bao nhiêu điểm ảnh của màn hình, hay tương đối (In percent) - chiếm bao nhiêu phần trăm so với cửa sổ trình duyệt. Canh vị trí bảng bên trái, phải hay giữa trang web (Alignment). Kích thước đường biên (Border size). Chỉ định khoảng cách giữa các ô (Cell spacing) và khoảng trắng giữa đường viền và ô (Cell padding).

- Bạn có thể bấm chuột vào nút Inser Table  trong thanh công cụ rồi kéo chuột để chọn số lượng cột và hàng theo ý muốn.

- Bạn có thể chèn thêm cột hay hàng vào bảng bằng cách mở menu Table/Insert/Rows or Columns. Trong bảng Insert Rows or Columns, bạn chỉ định số lượng (Number of columns), cột (Columns) hay hàng (Rows) và chèn vào bên trên (About) hoặc dưới (Below) hàng hiện hành, hay bên trái (Left) hoặc phải (Right) cột hiện hành.

- Bạn có thể chèn một dòng trống phía trên bảng để nhập văn bản (chú thích) khi chọn Table/Insert/Caption.

Bước 17. Định dạng bảng

- Bạn thay đổi nhanh kích thước cột và hàng bằng cách đưa chuột đến đường biên ngang hay dọc của bảng (con trỏ chuột thay đổi hình dạng thành mũi tên hai đầu) rồi giữ phím phải và kéo chuột để thay đổi vị trí đường biên.

- Bấm phím phải chuột vào bảng rồi chọn Table Properties trong menu rút gọn. Trong bảng Table Properties, bạn có thể chọn màu cho đường biên (Borders Color), làm cho đường biên của bảng “nổi” lên với màu cạnh sáng (Light) và màu cạnh tối (Dark). Cho hiển thị đầy đủ đường biên của bảng và của ô hay không (Show both cells and table border). Chọn màu nền cho bảng (Background color).

Bước 18. Nhập và định dạng văn bản trong ô (Cell)

- Bấm chuột vào ô rồi nhập văn bản như bình thường, bấm phím Tab (tới) hay Shift+Tab (lui) để di chuyển giữa các ô.

- Để định dạng văn bản trong ô, chọn ô rồi bấm phím phải lên ô đã chọn, chọn lịnh Cell Properties. Trong hộp thoại Cell Properties, canh lề theo chiều đứng (Horizontal alignment), canh lề theo chiều ngang (Vertical).

Mở rộng ô theo hàng (Rows spanned) hay theo cột (Columns spanned). Bạn có thể chỉ định màu nền hay hình nền cho ô, màu hay hình này sẽ nằm trên màu hay hình của bảng. Bạn cũng có thể dùng các nút trong thanh công cụ Format để định dạng văn bản trong ô giống như với các đoạn văn bản khác trong trang web.

Bước 19. Chèn hình ảnh vào ô

- Bạn có thể chèn hình ảnh vào ô, canh vị trí, tạo thumbnail, tạo liên kết cho hình ảnh giống như đối với những hình ngoài bảng. Khi chèn ảnh có kích thước lớn hơn kích thước ô, kích thước ô sẽ thay đổi cho vừa với kích thước ảnh. Nếu kích thước ảnh nhỏ hơn kích thước ô, bạn có thể canh hàng cho ảnh tương tự như với văn bản.

Bước 20. Tách/Nhập ô

- Với các lệnh trong menu Table, bạn có thể sáp nhập nhiều ô (Merge cells) lại làm một hay tách một ô (Split cells) thành nhiều ô theo chiều ngang hay dọc.

Bước 21. Lồng bảng trong bảng

Việc tạo một bảng có nhiều ô đồng bộ tuy đơn giản và có thể cố định được vị trí văn bản với hình theo chiều ngang, nhưng vẫn chưa đạt yêu cầu về mặt thẩm mỹ vì sẽ tạo nhiều khoảng trống xen kẽ, tuỳ theo nội dung văn bản hay kích thước hình trong các ô thẳng hàng. Bảng cũng không thích hợp để làm các trang web chia cột mà nội dung mỗi cột lại không liên quan với nhau. May mắn là ta có thể áp dụng biện pháp bảng lồng trong bảng (có thể lồng nhiều cấp) để thoả mãn các yêu cầu tạo cột và bảng phức tạp. Để tạo bảng trong bảng, bạn chỉ cần chuyển con trỏ vào bảng hay ô đang có rồi mở menu Table/Insert/Table, hoặc bấm nút Insert Table trong thanh công cụ.

Thí dụ:

- Tạo trang web có ba cột bằng cách chèn vào trang web trống một bảng có ba ô theo hàng ngang, ô đầu có chiều rộng 20% kích thước cửa sổ hiển thị, ô giữa rộng 60% và ô cuối rộng 20%. Chiều rộng bảng chiếm hết chiều rộng cửa sổ hay chỉ bằng 90% (trường hợp này, bạn nên canh bảng nằm giữa cửa sổ cho đẹp) và không có đường viền. Khi thay đổi kích thước cửa sổ hiển thị, chiều rộng tuyệt đối của các ô thay đổi nhưng tỷ lệ tương đối và vị trí giữa ba ô vẫn giữ nguyên.

- Trong mỗi cột 1, 2, 3 ta đều chèn một bảng có nhiều ô theo hàng dọc, bảng này cũng không cần có đường viền. Mục đích là chia cột thành nhiều phần từ trên xuống, các ô sẽ có chiều cao tuỳ thuộc vào nội dung dữ liệu đưa vào.

- Trong mỗi ô của mỗi cột, bạn có thể chèn văn bản, hình ảnh tuần tự từ trên xuống hay lại tiếp tục chèn bảng có nhiều ô ngang nếu cần sắp xếp văn bản và hình ảnh song song. Trong mỗi ô ngang này, bạn lại có thể chèn tiếp một bảng nữa và...

- Bạn có thể chèn những bảng hay ô trống (có kích thước vài pixel) giữa các bảng hay cột có dữ liệu để tạo khoảng trống ngăn cách.

Trong hình minh hoạ, các đường chấm chấm thể hiện rất rõ việc bảng và ô lồng vào nhau.

Bước 22. Chuyển Table thành Text và ngược lại

- Chọn văn bản cần chuyển sang bảng, mở menu Table/Convert, chọn lệnh Text to Table. Trong hộp thoại Convert Text to Table, bạn chọn các “yếu tố phân ô” như sau:

* Paragraphs: Mỗi đoạn văn sẽ nằm trong một ô theo chiều dọc.

* Tabs: Tab sẽ là một ô của cột đầu và văn bản nằm trong một ô của cột kế tiếp, những đoạn văn không có tab sẽ được đặt vào ô cùng cột với tab.

* Commas: Mỗi đoạn văn giữa hai dấu phẩy sẽ nằm trong một ô theo hàng ngang.

* None: Tất cả văn bản đã chọn sẽ nằm trong một ô.

* Other: Chỉ định ký tự để phân ô.

- Chuyển bảng thành văn bản cũng có nghĩa là xoá bảng nhưng vẫn giữ lại nội dung trong bảng: Bạn chọn bảng rồi mở menu Table/Convert, chọn lịnh Table to Text. Nếu có nhiều bảng lồng trong bảng, bạn phải chuyển đổi lần lượt từng lớp.