1
Công cụ soạn thảo trực quan Web trong HTML – Phần 3 Sat Nov 03, 2012 8:35 pm
Admin
Admin
Bài viết : 3191
Xu : 9210
Thanks : 8
Age : 34Đến từ : Thanh Hóa
Tài Sản:
.:
Một trong những điều làm bối rối những nhà thiết kế trang Web lần đầu
tiên là trạng thái hay thay đổi của một trang Web. Text, đồ họa và những
phần khác hay thay đổi của một trang Web di chuyển phụ thuộc vào cách
chúng được trình bày.
2.3 Tổ chức một trang với các bảng :
Cùng một trang có thể trông khác nhau đáng kể ở trong hai trình duyệt
khác nhau trên các máy tính khác nhau. Thậm chí nó có thể thay đổi diện
mạo trên một máy tính nếu cửa sổ trình duyệt được định lại kích cỡ.
Những người thiết kế Web có thể kiểm soát được diện mạo của các thành
phần trang một cách nhiều hơn bằng cách đặt chúng trong các bảng.
Các bảng là các lưới hình chữ nhật được chia thành các ô riêng biệt.
Thông tin có thể được đặt vào từng ô này để canh thẳng chúng theo chiều
dọc hay chiều ngang với thông tin trong các ô khác.
Nếu ta cảm thấy khó hình thành khái niệm về một bảng khi nó có liên quan đến một trang Web, hãy nghĩ đến một lịch treo tường:
Hình VIII.11. Sử dụng bảng để sắp xếp lịch.
Một lịch giống như trên là một bảng hình chữ nhật chứa một nhóm ô.
Trên một lịch treo tường, mỗi ngày chiếm một ô riêng của nó trong
bảng. Tên của mỗi ngày từ SUN đến SAT, cũng chiếm ô riêng của nó.
Các bảng được chia thành các cột dọc và các hàng ngang. Lịch treo tường được minh họa có bảy cột và sáu hàng.
Mục đích chính của các bảng là tổ chức thông tin vốn phải được căn
thẳng với các hàng và các cột. Ta có thể sử dụng các bảng để hiển thị dữ
liệu chẳng hạn như báo cáo chi phí trong các cột dễ đọc.
Căn thẳng text trong bảng
Mặc dù các bảng hữu dụng cho việc trình bày trang, nhưng chúng cũng
là một cách hiệu quả để trình bày text trong các hàng và cột dạng bảng.
Bởi vì ta có thể tạo một bảng với FrontPage, ta phải quyết định bao
nhiêu hàng và cột mà nó sẽ chứa, các cột được đếm từ trái sang phải và
các hàng được đếm từ trên xuống dưới.
Các bảng được hiển thị dưới dạng một lưới rỗng khi chúng được thêm
vào một trang Web. Hình dưới minh họa một bảng mới được tạo chứa hai cột
và bốn hàng.
Hình VIII.12. Tạo bảng.
Số hàng và số cột trong một bảng quyết định số ô ban đầu mà nó chứa. Bảng ở hình trên chứa 8 ô.
Thêm một bảng vào một trang
Một bảng rỗng khi nó được tạo trên một trang Web. Sau đó ta điền vào các ô riêng lẻ của nó.
Để thêm một bảng vào một trang, thực hiện những bước sau đây:
1. Với các trang mở trong cửa sổ biên soạn, click vào nơi mà bảng sẽ được chèn.
2. Trên thanh menu chọn Table → Insert → Table. Hộp thoại Insert Table mở ra như được minh họa ở hình dưới.
Hình VIII.13. Hộp thoại Insert Table.
3. Trong phần Size, sử dụng các hộp danh sách Rows and Columns để xác
lập kích thước của bảng. Lựa chọn mà ta thực hiện không nhất thiết phải
cố định. Ta có thể thêm và bớt các hàng và các cột ra khỏi bảng khi ta
làm việc với nó. Do đó, các giá trị ban đầu không quan trọng. Phần Size
xác lập các hàng, cột, và số ô trong bảng, nhưng nó không quyết định bao
nhiêu khoảng trống mà table chiếm trên trang Web khi nó hiển thị. Một
bảng thường chiếm càng nhiều phần của trang càng cần thiết để hiển thị
nội dung của các ô.
4. Để tạo lượng khoảng trống mà một số ô sẽ chiếm, chọn hộp kiểm Specify Width và chọn một đơn vị đo:
a. Đối với một chiều rộng cụ thể, chọn một tùy chọn In Pexels và nhập chiều rộng mà ta muốn vào trường text nằm gần kề.
b. Để xác lập chiều rộng dưới dạng tỷ lệ phần trăm của khoảng trống
có sẵn trên trang (được đo từ cạnh này sang cạnh kia), chọn tùy chọn In Percent và gõ nhập một tỷ lệ phần trăm từ 1 đến 100 vào trường text nằm gần kề.
c. Nếu ta chọn một chiều rộng 100%, bảng sẽ chiếm tất cả mà nó có thể chiếm.
5. Để xác lập chiều cao của bảng, lặp lại bước 4 với trường Height.
Có thêm ba cách để tinh chỉnh một bảng là xác lập các giá trị đường viền, khoảng cách đệm ô và khoảng cách ô của nó.
Đường viền (border) xác định kích thước của đường viền bao quanh
bảng. Nếu nó được xác lập sang 0, đường viền và tất cả đường lưới của nó
sẽ biến mất. Các ô của bảng sẽ vẫn căn thẳng một cách chính xác, nhưng
sẽ không rõ ràng cho thấy rằng một bảng đang được sử dụng trên trang.
Khoảng cách đệm ô (cell padding) là lượng khoảng trống bao quanh nội
dung của mỗi ô. Nếu ta tăng padding từ giá trị mặc định là 1, các ô sẽ
trở nên lớn hơn trong khi nội dung của nó sẽ vẫn giữ cùng một kích cỡ.
Khoảng cách ô (cell spacing) là lượng khoảng trống trong đường viền
lưới giữa ô. Điều này làm cho chiều rộng và chiều cao của các trường
lưới trở nên lớn hơn, nếu đường viền có thể nhìn thấy được. Khi khoảng
cách đường tăng, bảng mở rộng trong khi các ô vẫn giữ cùng một kích cỡ.
1. Trong hộp thoại Insert Table, sử dụng các hộp danh sách Border,
Cell Padding, và Cell Spacing để xác lập các giá trị này khi cần thiết.
2. Khi ta hoàn tất việc xác lập bảng, click nút OK.
Thêm dữ liệu vào một bảng
Khi ta có một bảng trên một trang, ta có thể thêm các text vào bất kỳ
ô của nó: click con trỏ trong một ô và bắt đầu nhập. Ta cũng có thể sử
dụng các lệnh cắt, sao chép và dán hoặc rê và thả để điền đầy một ô.
Các bảng bắt đầu với tất cả ô và hàng có cùng một kích cỡ và
FrontPage cố gắng làm cho chúng có cùng một kích cỡ khi ta thêm text. Từ
bao bọc xung quanh mép phải của một ô như thể nó nằm trên lề phải của
một trang.
Khi ta điền đầy một bảng, nhấn phím Tab để nhảy đến ô kế tiếp nằm bên phải (hoặc hàng kế tiếp) hoặc nhấn các phím Shift và Tab cùng một lúc để di chuyển theo hướng ngược lại.
Một điều khác thường xảy ra nếu ta nhấn Tab khi ta ở ô sau cùng trong
bảng (ô ở hàng dưới cùng và cột nằm ở tận cùng bên phải): FrontPage tạo
một hàng mới và di chuyển con trỏ vào ô đầu tiên trên hàng này.
Điều này cho phép ta tiếp tục thêm dữ liệu mới vào một bảng ngay cả nếu ta đánh giá thấp số hàng mà ta cần khi nó được tạo.
Để thêm một hoặc nhiều cột hoặc hàng vào một bảng, thực hiện các bước sau đây:
1. Click một ô nằm kề nơi các ô mới sẽ được chèn vào.
2. Trên thanh menu chọn Table → Insert → Rows or Columns. Hộp thoại Insert Rows or Columns xuất hiện (hình dưới).
Hình VIII.14. Hộp thoại Insert Rows or Columns.
3. Chọn các tùy chọn Columns hoặc Rows.
4. Chọn số cột hoặc hàng để chèn trong hộp danh sách Number Of. Chúng được thêm ở kế bên ô được chọn ở bước 1.
5. Trong phần Position, chọn một tùy chọn để quyết định chính xác nơi mà các cột hoặc hàng mới sẽ được đặt ở đó.
6. Click OK.
Loại bỏ các hàng hoặc cột ra khỏi bảng
Các hàng và cột cũng có thể bị xóa sau khi ta đã chọn chúng:
1. Đặt con trỏ lên trên đường viền bảng bên ngoài của một hàng hoặc
cột mà ta muốn xóa. Di chuyển con trỏ xung quanh đường viền đó đến khi
nó thay đổi thành một mũi tên nhỏ màu đen trỏ vào bảng.
2. Click một lần. Hàng hoặc cột theo hướng của mũi tên được bật sáng.
3. Để xóa nó, nhấn phím Delete hoặc click chuột phải vào vùng được bật sáng và chọn Delete Rows hoặc Delete Columns từ menu tắt vừa xuất hiện.
Thay đổi kích cỡ của một bảng
Theo luật chung, FrontPage định kích cỡ của một bảng để tất cả các ô
chiếm cùng một lượng khoảng trống trừ khi một số trong chúng chứa text
quá lớn đến nỗi không thể thực hiện được điều này.
Một cách dễ dàng để định dạng một bảng sao cho nó chiếm ít khoảng
trống hơn là thu nhỏ nó để nó chiếm lượng khoảng trống tối thiểu cần
thiết: click ở bất cứ nơi nào trên bảng và chọn (trên thanh menu) Table → AutoFit to Contents.
Ta cũng có thể định lại kích cỡ một bảng để các hàng và cột cụ thể có chiều rộng pixel hoặc tỷ lệ phần trăm cụ thể:
1. Click chuột phải vào một trong các ô trong hàng hoặc cột đó.
2. Trong menu tắt vừa mở ra, chọn lệnh menu Cell Properties. Hộp
thoại Cell Properties xuất hiện, hộp thoại này có thể được sử dụng để
xác lập chiều rộng của một ô theo cùng một cách như một bảng được cấu
hình.
Hình VIII.15. Hộp thoại Cell Properties.
3. Để xác lập chiều rộng của ô đó, chọn hộp kiểm Specify Width, chọn In Pixels hoặc In Percent, và sau đó nhập một giá trị vào trường text nằm gần kề.
4. Đối với chiều cao, chọn Specify Height và lặp lại các hướng dẫn ở bước 3.
5. Nếu ta muốn loại bỏ một giá trị chiều cao hoặc chiều rộng cho một
ô, xóa dấu kiểm ra khỏi hộp Specify Height hoặc hộp Specify Width. Nếu
các ô khác trong hàng hoặc cột đó không được xác lập các giá trị, tất cả
các ô được hiển thị với cùng một kích cỡ.
6. Click OK.
FrontPage có thể sử dụng các kích thước mới của ô để quyết định các ô
khác trong cùng một hàng và cột sẽ được định kích cỡ như thế nào.
Luật chung sau đã được áp dụng: Nếu ô là ô lớn nhất trong hàng hoặc
cột của nó, thì các ô khác sẽ được mở rộng để có cùng một kích cỡ.
Khi ta xác lập được kích thước cho một ô bảng cụ thể, ta không nên sử dụng lại Table → AutoFit to Contents nếu không ta sẽ hủy những thay đổi của ta.
Hết phần 3
Nguồn: Sưu tầm Internet
tiên là trạng thái hay thay đổi của một trang Web. Text, đồ họa và những
phần khác hay thay đổi của một trang Web di chuyển phụ thuộc vào cách
chúng được trình bày.
2.3 Tổ chức một trang với các bảng :
Cùng một trang có thể trông khác nhau đáng kể ở trong hai trình duyệt
khác nhau trên các máy tính khác nhau. Thậm chí nó có thể thay đổi diện
mạo trên một máy tính nếu cửa sổ trình duyệt được định lại kích cỡ.
Những người thiết kế Web có thể kiểm soát được diện mạo của các thành
phần trang một cách nhiều hơn bằng cách đặt chúng trong các bảng.
Các bảng là các lưới hình chữ nhật được chia thành các ô riêng biệt.
Thông tin có thể được đặt vào từng ô này để canh thẳng chúng theo chiều
dọc hay chiều ngang với thông tin trong các ô khác.
Nếu ta cảm thấy khó hình thành khái niệm về một bảng khi nó có liên quan đến một trang Web, hãy nghĩ đến một lịch treo tường:
Hình VIII.11. Sử dụng bảng để sắp xếp lịch.
Một lịch giống như trên là một bảng hình chữ nhật chứa một nhóm ô.
Trên một lịch treo tường, mỗi ngày chiếm một ô riêng của nó trong
bảng. Tên của mỗi ngày từ SUN đến SAT, cũng chiếm ô riêng của nó.
Các bảng được chia thành các cột dọc và các hàng ngang. Lịch treo tường được minh họa có bảy cột và sáu hàng.
Mục đích chính của các bảng là tổ chức thông tin vốn phải được căn
thẳng với các hàng và các cột. Ta có thể sử dụng các bảng để hiển thị dữ
liệu chẳng hạn như báo cáo chi phí trong các cột dễ đọc.
Căn thẳng text trong bảng
Mặc dù các bảng hữu dụng cho việc trình bày trang, nhưng chúng cũng
là một cách hiệu quả để trình bày text trong các hàng và cột dạng bảng.
Bởi vì ta có thể tạo một bảng với FrontPage, ta phải quyết định bao
nhiêu hàng và cột mà nó sẽ chứa, các cột được đếm từ trái sang phải và
các hàng được đếm từ trên xuống dưới.
Các bảng được hiển thị dưới dạng một lưới rỗng khi chúng được thêm
vào một trang Web. Hình dưới minh họa một bảng mới được tạo chứa hai cột
và bốn hàng.
Hình VIII.12. Tạo bảng.
Số hàng và số cột trong một bảng quyết định số ô ban đầu mà nó chứa. Bảng ở hình trên chứa 8 ô.
Thêm một bảng vào một trang
Một bảng rỗng khi nó được tạo trên một trang Web. Sau đó ta điền vào các ô riêng lẻ của nó.
Để thêm một bảng vào một trang, thực hiện những bước sau đây:
1. Với các trang mở trong cửa sổ biên soạn, click vào nơi mà bảng sẽ được chèn.
2. Trên thanh menu chọn Table → Insert → Table. Hộp thoại Insert Table mở ra như được minh họa ở hình dưới.
Hình VIII.13. Hộp thoại Insert Table.
3. Trong phần Size, sử dụng các hộp danh sách Rows and Columns để xác
lập kích thước của bảng. Lựa chọn mà ta thực hiện không nhất thiết phải
cố định. Ta có thể thêm và bớt các hàng và các cột ra khỏi bảng khi ta
làm việc với nó. Do đó, các giá trị ban đầu không quan trọng. Phần Size
xác lập các hàng, cột, và số ô trong bảng, nhưng nó không quyết định bao
nhiêu khoảng trống mà table chiếm trên trang Web khi nó hiển thị. Một
bảng thường chiếm càng nhiều phần của trang càng cần thiết để hiển thị
nội dung của các ô.
4. Để tạo lượng khoảng trống mà một số ô sẽ chiếm, chọn hộp kiểm Specify Width và chọn một đơn vị đo:
a. Đối với một chiều rộng cụ thể, chọn một tùy chọn In Pexels và nhập chiều rộng mà ta muốn vào trường text nằm gần kề.
b. Để xác lập chiều rộng dưới dạng tỷ lệ phần trăm của khoảng trống
có sẵn trên trang (được đo từ cạnh này sang cạnh kia), chọn tùy chọn In Percent và gõ nhập một tỷ lệ phần trăm từ 1 đến 100 vào trường text nằm gần kề.
c. Nếu ta chọn một chiều rộng 100%, bảng sẽ chiếm tất cả mà nó có thể chiếm.
5. Để xác lập chiều cao của bảng, lặp lại bước 4 với trường Height.
Có thêm ba cách để tinh chỉnh một bảng là xác lập các giá trị đường viền, khoảng cách đệm ô và khoảng cách ô của nó.
Đường viền (border) xác định kích thước của đường viền bao quanh
bảng. Nếu nó được xác lập sang 0, đường viền và tất cả đường lưới của nó
sẽ biến mất. Các ô của bảng sẽ vẫn căn thẳng một cách chính xác, nhưng
sẽ không rõ ràng cho thấy rằng một bảng đang được sử dụng trên trang.
Khoảng cách đệm ô (cell padding) là lượng khoảng trống bao quanh nội
dung của mỗi ô. Nếu ta tăng padding từ giá trị mặc định là 1, các ô sẽ
trở nên lớn hơn trong khi nội dung của nó sẽ vẫn giữ cùng một kích cỡ.
Khoảng cách ô (cell spacing) là lượng khoảng trống trong đường viền
lưới giữa ô. Điều này làm cho chiều rộng và chiều cao của các trường
lưới trở nên lớn hơn, nếu đường viền có thể nhìn thấy được. Khi khoảng
cách đường tăng, bảng mở rộng trong khi các ô vẫn giữ cùng một kích cỡ.
1. Trong hộp thoại Insert Table, sử dụng các hộp danh sách Border,
Cell Padding, và Cell Spacing để xác lập các giá trị này khi cần thiết.
2. Khi ta hoàn tất việc xác lập bảng, click nút OK.
Thêm dữ liệu vào một bảng
Khi ta có một bảng trên một trang, ta có thể thêm các text vào bất kỳ
ô của nó: click con trỏ trong một ô và bắt đầu nhập. Ta cũng có thể sử
dụng các lệnh cắt, sao chép và dán hoặc rê và thả để điền đầy một ô.
Các bảng bắt đầu với tất cả ô và hàng có cùng một kích cỡ và
FrontPage cố gắng làm cho chúng có cùng một kích cỡ khi ta thêm text. Từ
bao bọc xung quanh mép phải của một ô như thể nó nằm trên lề phải của
một trang.
Khi ta điền đầy một bảng, nhấn phím Tab để nhảy đến ô kế tiếp nằm bên phải (hoặc hàng kế tiếp) hoặc nhấn các phím Shift và Tab cùng một lúc để di chuyển theo hướng ngược lại.
Một điều khác thường xảy ra nếu ta nhấn Tab khi ta ở ô sau cùng trong
bảng (ô ở hàng dưới cùng và cột nằm ở tận cùng bên phải): FrontPage tạo
một hàng mới và di chuyển con trỏ vào ô đầu tiên trên hàng này.
Điều này cho phép ta tiếp tục thêm dữ liệu mới vào một bảng ngay cả nếu ta đánh giá thấp số hàng mà ta cần khi nó được tạo.
Để thêm một hoặc nhiều cột hoặc hàng vào một bảng, thực hiện các bước sau đây:
1. Click một ô nằm kề nơi các ô mới sẽ được chèn vào.
2. Trên thanh menu chọn Table → Insert → Rows or Columns. Hộp thoại Insert Rows or Columns xuất hiện (hình dưới).
Hình VIII.14. Hộp thoại Insert Rows or Columns.
3. Chọn các tùy chọn Columns hoặc Rows.
4. Chọn số cột hoặc hàng để chèn trong hộp danh sách Number Of. Chúng được thêm ở kế bên ô được chọn ở bước 1.
5. Trong phần Position, chọn một tùy chọn để quyết định chính xác nơi mà các cột hoặc hàng mới sẽ được đặt ở đó.
6. Click OK.
Loại bỏ các hàng hoặc cột ra khỏi bảng
Các hàng và cột cũng có thể bị xóa sau khi ta đã chọn chúng:
1. Đặt con trỏ lên trên đường viền bảng bên ngoài của một hàng hoặc
cột mà ta muốn xóa. Di chuyển con trỏ xung quanh đường viền đó đến khi
nó thay đổi thành một mũi tên nhỏ màu đen trỏ vào bảng.
2. Click một lần. Hàng hoặc cột theo hướng của mũi tên được bật sáng.
3. Để xóa nó, nhấn phím Delete hoặc click chuột phải vào vùng được bật sáng và chọn Delete Rows hoặc Delete Columns từ menu tắt vừa xuất hiện.
Thay đổi kích cỡ của một bảng
Theo luật chung, FrontPage định kích cỡ của một bảng để tất cả các ô
chiếm cùng một lượng khoảng trống trừ khi một số trong chúng chứa text
quá lớn đến nỗi không thể thực hiện được điều này.
Một cách dễ dàng để định dạng một bảng sao cho nó chiếm ít khoảng
trống hơn là thu nhỏ nó để nó chiếm lượng khoảng trống tối thiểu cần
thiết: click ở bất cứ nơi nào trên bảng và chọn (trên thanh menu) Table → AutoFit to Contents.
Ta cũng có thể định lại kích cỡ một bảng để các hàng và cột cụ thể có chiều rộng pixel hoặc tỷ lệ phần trăm cụ thể:
1. Click chuột phải vào một trong các ô trong hàng hoặc cột đó.
2. Trong menu tắt vừa mở ra, chọn lệnh menu Cell Properties. Hộp
thoại Cell Properties xuất hiện, hộp thoại này có thể được sử dụng để
xác lập chiều rộng của một ô theo cùng một cách như một bảng được cấu
hình.
Hình VIII.15. Hộp thoại Cell Properties.
3. Để xác lập chiều rộng của ô đó, chọn hộp kiểm Specify Width, chọn In Pixels hoặc In Percent, và sau đó nhập một giá trị vào trường text nằm gần kề.
4. Đối với chiều cao, chọn Specify Height và lặp lại các hướng dẫn ở bước 3.
5. Nếu ta muốn loại bỏ một giá trị chiều cao hoặc chiều rộng cho một
ô, xóa dấu kiểm ra khỏi hộp Specify Height hoặc hộp Specify Width. Nếu
các ô khác trong hàng hoặc cột đó không được xác lập các giá trị, tất cả
các ô được hiển thị với cùng một kích cỡ.
6. Click OK.
FrontPage có thể sử dụng các kích thước mới của ô để quyết định các ô
khác trong cùng một hàng và cột sẽ được định kích cỡ như thế nào.
Luật chung sau đã được áp dụng: Nếu ô là ô lớn nhất trong hàng hoặc
cột của nó, thì các ô khác sẽ được mở rộng để có cùng một kích cỡ.
Khi ta xác lập được kích thước cho một ô bảng cụ thể, ta không nên sử dụng lại Table → AutoFit to Contents nếu không ta sẽ hủy những thay đổi của ta.
Hết phần 3
Nguồn: Sưu tầm Internet
