Trong phần trước, chúng ta đã biết cách làm thế nào để chèn một tấm ảnh có sẵn trong các thư mục mặc định vào bài viết của mình, cũng như làm thế nào để tải một tấm ảnh phù hợp từ máy tính của mình lên máy chủ web.
Kế tiếp chúng ta sẽ cùng học cách chỉnh sửa các hình ảnh đã có trong bài viết, cũng như cách chèn các thành phần không kém phần quan trọng khác như Flash, Video, bảng biểu, hay các điểm neo…
Chỉnh sửa các hình ảnh có trong bài viết
Để chỉnh sửa hình ảnh có trong bài viết,. bạn nhấn chuột vào bức ảnh và chọn biểu tượng Image ( 
) có trên thanh công cụ soạn thảo ở hàng thứ hai. Bạn sẽ nhận được một cửa sổ thiết lập các thông số hiển thị cho hình ảnh thông qua ba thẻ. Thẻ General sẽ bao gồm đường dẫn của ảnh (Image URL), thông tin mô tả về ảnh (Image Description) và tiêu đề của ảnh (Title). Cửa sổ Preview dưới cùng hiển thị hình ảnh với kích thước thật hiện tại để bạn xem thử.
Ở thẻ Appearance, bạn có thể lựa chọn cách sắp xếp ảnh so với văn bản bằng mục Alignment. Trong mục này có một số chọn lựa dạng cơ bản như cho việc canh chỉnh vị trí của tấm ảnh như đặt ảnh ở lề trái văn bản (Left), đặt ảnh ở lề phải văn bản (Right), hay canh giữa… Một số chọn lựa khác cao cấp hơn, như đặt dòng chữ trong bài viết thẳng hàng với cạnh trên tấm ảnh (Top), cạnh dưới tấm ảnh (Bottom), hay canh giữa tính theo chiều đứng tấm ảnh (Middle)…
Bạn cũng có thể thay đổi kích thước của ảnh bằng chức năng Dimensions với hai tham số kích thước cạnh ngang nhân với kích thước cạnh đứng, tính bằng đơn vị là điểm ảnh (pixel - px). Bạn có thể nhập vào các giá trị tùy ý, nhưng cũng chính vì như thế mà bức ảnh kết quả có thể sẽ bị bóp méo theo chiều ngang hay chiều đứng, nếu hai giá trị kich thước mới không giữ nguyên tỉ lệ ban đầu. Cách đơn giản nhất để bạn đảm bảo hình ảnh sẽ giữ nguyên tỉ lệ ban đầu sau khi thu nhỏ hay phóng lớn là bạn đánh dấu chọn mục Constrain Proportions. Dùng tính năng này, thì sau khi bạn nhập số điểm ảnh là chiều dài một cạnh, rồi nhấn nút TAB, thì Joomla sẽ tự động điền giá trị số điểm ảnh của chiều dài cạnh còn lại theo đúng tỉ lệ so với cạnh kia.
Ba thông số kế tiếp ảnh hưởng đến việc hiệu chỉnh tấm ảnh là độ dày của đường viền xung quanh ảnh (Border), thiết lập khoảng cách trên và dưới của ảnh so với đoạn văn (Vertical space), hoặc khoảng cách hai bên cạnh trái và phải của tấm ảnh so với đoạn văn (Horizontal space). Còn phần Class hiện thời bạn cứ giữ nguyên giá trị là Not set.
Thay đổi xong các giá trị phía trên của thẻ Appearance, bạn hãy quan sát nội dung trong mục Style. Đó chính là một đoạn văn bản thể hiện thông tin về những gì bạn đã chọn lựa thay đổi phía trên dành cho tấm ảnh, các thông số cách nhau bằng dấu chấm phẩy. Ví dụ như margin-top: 20px; margin-bottom: 20px; margin-left: 10px; margin-right: 10px; border: 5px solid #000000;.
Vì Style là một hộp văn bản nên bạn hoàn toàn có thể thay đổi các thông số này theo ý mình. Ví dụ như thay vì khoảng trống phía trên và dưới tấm ảnh được cấu hình bằng nhau là 20 điểm ảnh, thì bạn có thể sửa lại khoản trống lề trên là 100 điểm ảnh còn khoảng trống lề dưới giữ nguyên là 20 điểm ảnh bằng cách sửa phần đầu mục Style lại thành margin-top: 100px; margin-bottom: 20px;
Và nếu thấy không thích màu đen mặc định của đường viền ảnh, bạn có thể thay phần đuôi của chuỗi thông tin Style bằng một giá trị khác, chẳng hạn như đổi solid#000000; thành solid#FF0000; và ta sẽ thấy đường viền chuyển sang màu đỏ.
Để tìm ra mã màu như ý thích, bạn có thể vào trang http://www.boallen.com/hex-color-code-generator.html . Trong trang ấy, chỉ cần bạn bấm vào màu sắc chính ở cột màu, rồi bấm chuột vào bảng phân biệt độ đậm nhạt của màu đó trong hình vuông cạnh bên, thì mã màu dạng số thập lục phân (HexaDecimal) sẽ hiện lên trong ô phía dưới. Bạn chỉ cần đánh dấu khối nội dung ô đó, và bấm Ctrl – C để sao chép vào bộ đệm, sau đó mang sang dán vào để thay thế mã màu có sẵn trong cuối chuỗi Style như bên trên là xong.
Cuối cùng là với thẻ Advanced, bạn có thể cấu hình ở khung Swap Image để cho hình ảnh trong bài viết có tính tương tác hơn với người xem. Trong mục Alternative Image, bạn hãy chọn một tấm ảnh khác sẽ xuất hiện thay thế cho ảnh gốc mỗi khi người xem bài viết rê chuột ngang qua vị trí tấm ảnh đó (for mouse over). Và bạn cũng có thể chọn một ảnh khác nữa để khi người xem kéo chuột ra khỏi khu vực hiển thị ảnh (for mouse out) thì nó xuất hiện.
Tuy nhiên, cần cẩn thận khi chọn lựa các ảnh thay thế này. Thứ nhất, các tấm ảnh dùng thay thế cần có cùng kích thước với tấm ảnh gốc, để tránh hiện tượng giật hình làm nhức mắt người xem bài viết. Thứ hai, nếu bạn đánh dấu mục Alternative image, rồi chọn hai tấm ảnh mới, khác biệt so với tấm ảnh gốc ban đầu, thì tấm ảnh gốc chỉ xuất hiện một lần duy nhất, lúc nạp trang web chứa bài viết. Còn từ sau khi bị người dùng rê chuột ngang qua lần đầu tiên trở đi, thì chỉ có hai tấm ảnh thay thế luân phiên xuất hiện mà thôi.
Vì vậy nếu có dùng tính năng này để trang web hấp dẫn hơn, thì chỉ nên dùng một hình ảnh thay thế trong mục for mouse over mà thôi, còn mục for mouse out thì bạn dùng lại đường dẫn đến tấm ảnh gốc. Như vậy khi người đọc rê chuột vào tấm ảnh thì một ảnh khác sẽ hiện ra thay thế, còn khi rê chuột ra ngoài, thì tấm ảnh gốc xuất hiện trở lại như lúc mới nạp trang.
Sau khi chỉnh sửa xong mọi tham số trong cả ba thẻ, bạn đừng quên nhấn nút Updateđể lưu lại các thay đổi đó và quay trở lại cửa sổ soạn thảo bài viết.
Trường hợp khi bấm vào nút Image nhưng bạn lại không thể thấy được ba thẻ như vừa trình bày ở trên, thì nguyên nhân là do bạn chưa tiến hành mở rộng thanh công cụ với nhiều chức năng hơn (như đã trình bày trong phần 8). Xin nhắc lại là để mở rộng thanh công cụ, đầu tiên bạn vào menu Extensions, chọn Plugin Manager. Bạn tìm tiếp đến mục plugin là Editor – TinyMCE và nhấn vào đó. Ở khung Parameters bên phải, mục Functionality, bạn chọn Extended. Và cuối cùng bạn nhấn Save để lưu lại. Quay trở lại phần soạn thảo bài viết mới bằng chức năng New trong menu Article Manager, bạn sẽ thấy thanh công cụ mở rộng với nhiều nút hơn. Và khi tiến hành chỉnh sửa ảnh, cửa sổ Insert/Edit image cũng sẽ hiện đủ ba thẻ như trên.
Chèn bảng vào trong nội dung bài viết
Trong một số bài viết đặc biệt, bạn sẽ cần dùng đến những bảng gồm các hàng và cột để thể hiện nội dung một cách rõ ràng và dễ nhớ hơn. Để chèn các bảng như thế vào nội dung bài viết, bạn nhấn vào biểu tượng Inserts a new table (
) trong khung soạn thảo nội dung ở hàng thứ ba. Trong hộp thoại Insert/Modify table, ở thẻ General, bạn điền vào số cột (Cols) và số hàng (Rows) cần có trong bảng. Kế tiếp là hai thông số quan trọng về chiều rộng (Width) và chiều cao (Height) mỗi ô. Vị trí phần lề văn bản nhập vào trong ô của bảng xác định bởi mục Cellpadding, còn khoảng cách giữa các ô, theo chiều đứng lẫn chiều ngang thì được quy định trong mục Cellspacing. Bạn cũng cần chọn lại việc canh chỉnh lề cho bảng (Alignment) là nằm bên trái (left), bên phải (right), hay ở giữa (center) bài viết. Phần độ dày của đường viền khung (Border) cũng cần được chọn một giá trị hợp lý, để tăng thêm tính thẩm mỹ khi chèn bảng vào bài viết.
Ngoài ra, trong thẻ Advanced còn rất nhiều các tham số nâng cao mà bạn có thể hiệu chỉnh. Tuy nhiên, bạn chỉ cần quan tâm đến các mục như hình nền của bảng (Background image), hướng viết chữ là từ trái sang phải (Left to right) hay từ phải sang trái (Right to left). Và dưới cùng là hai tham số màu sắc dành cho phần đường viền khung (Border color), và màu nền của bảng (Background Color). Sau khi điền đầy đủ các thông số, bạn có thể quay lại mục Style phía trên để xem và sửa chữa lại đoạn mã cấu hình, giống như khi bạn chèn hình ảnh.
Đặc biệt trong phần chọn màu đường viền, và màu nền cho bảng, ở cạnh ô ghi giá trị mã màu, là một nút hỗ trợ chọn màu mà không cần biết mã. Bấm vào nút đó, bạn có một cửa sổ với ba thẻ Picker, Palette, và Named tương ứng với ba cách chọn. Với Picker, bạn sẽ bấm chọn vào một màu trong dãy, rồi chọn độ đậm nhạt của nó, với Palette, bạn bấm chọn màu trong bảng màu vẽ, còn với Named, bạn có thể chọn một màu theo cách đọc tên nó trong tiếng anh.
Sau khi hoàn tất toàn bộ các thao tác tạo bảng, bạn nhấn vào nút Insert để kết thúc quá trình này và quay trở lại cửa sổ soạn thảo bài viết.
NHÓM MỤC ĐỒNG
