Bạn đang xem bài viết Hướng Dẫn Tạo Navigation Menu Nổi Trên WordPress được cập nhật mới nhất trên website Hoisinhvienqnam.edu.vn. Hy vọng những thông tin mà chúng tôi đã chia sẻ là hữu ích với bạn. Nếu nội dung hay, ý nghĩa bạn hãy chia sẻ với bạn bè của mình và luôn theo dõi, ủng hộ chúng tôi để cập nhật những thông tin mới nhất.
Bạn thấy rằng nhiều trang web phổ biến hiện nay đang sử dụng menu điều hướng nổi. Thông thường, các menu điều hướng được hiển thị trên đầu và sẽ mất khi người dùng cuộn chuột xuống. Các menu điều hướng nổi sẽ luôn hiển thị khi cuộn chuột xuống. Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách tạo một menu điều hướng nổi trong WordPress.
Phương pháp 1: Dùng plugin để thêm Menu điều hướng nổi
Phương pháp này rất dễ và khuyến nghị cho tất cả mọi người. Nếu bạn chưa thiết lập menu điều hướng, thì vui lòng xem hướng dẫn về cách thêm menu điều hướng trong WordPress.
Đầu tiên bạn cần cài đặt và kích hoạt Sticky Menu (or Anything!) trên plugin Scroll. Để biết thêm thông tin chi tiết, hãy xem hướng dẫn chi tiết về cách cài đặt plugin WordPress.
Sau khi kích hoạt, vào Settings ” Sticky Menu (or Anything!) để cài đặt cấu hình plugin.
Trước tiên, bạn cần nhập ID CSS của menu điều hướng.
Tiếp đến bạn cần sử dụng tool để kiểm tra trình duyệt của bạn để tìm ID CSS.
Truy cập trang web của bạn và trỏ chuột vào menu điều hướng. Sau đó, bạn cần nhấp chuột phải và chọn Inspect từ menu Trình duyệt của bạn.
Thao tác này sẽ chia màn hình hiện tại của bạn thành hai phần và bạn sẽ có thể xem source code cho menu điều hướng của mình. Việc bạn cần làm là tìm một dòng code như bên dưới:
Trong ví dụ này, menu điều hướng của chúng tôi CSS ID là site-navigation.
Tiếp tục và nhập ID CSS trong cài đặt plugin như # site-navigation này.
Tiếp theo trên trang cài đặt plugin là xác định khoảng trắng giữa phần top màn hình và menu nổi. Bạn có thể sử dụng cài đặt này nếu menu của bạn lấp một số thứ mà bạn không muốn ẩn. Còn nếu không, bạn có thể bỏ qua cài đặt này.
Sau đó, bạn cần nhấp vào tích vào tùy chọn: ‘Check for Admin Bar’. Thao tác này sẽ thêm khoảng trắng cho thanh admin WordPress.
Tùy chọn tiếp theo trong phần cài đặt là cho phép bạn bỏ chọn menu điều hướng nếu người dùng truy cập vào trang web của bạn trên màn hình nhỏ như điện thoại chẩng hạn.
Bạn có thể kiểm tra giao diện của nó trên các thiết bị di động hoặc máy tính bảng. Nếu bạn không thích, thì bạn có thể thêm độ phân giải 780px cho tùy chọn này.
Đừng quên bấm vào nút save để lưu các thay đổi của bạn.
Bây giờ bạn truy cập trang web của bạn để xem menu điều hướng nổi hoạt động như thế nào.
Phương pháp 2: Thêm Menu điều hướng nổi theo cách thủ công
Với phương pháp này bạn sẽ thêm đoạn code CSS custom vào theme của mình. Nếu bạn đã thực hiện điều này trước đây, thì vui lòng xem bài hướng dẫn cách chèn custom Css vào trang WordPress.
Trước tiên, bạn vào Appearance ” Customize để chạy theme customizer.
Thay thế#site-navigation bằng ID CSS của menu điều hướng và nhấp vào button Save & Publish.
Bây giờ hãy truy cập vào trang web để xem menu điều hướng nổi của bạn hoạt động như thế nào.
Bạn cũng có thể dễ dàng điều chỉnh bằng cách thêm một lề vào vùng tiêu đề của bạn bằng cách sử dụng đoạn code CSS như thế này:
Thay thế site-branding bằng class CSS trên header area.
Nếu bạn thích bài viết này, vui lòng đăng ký Kênh YouTube của chúng tôi để xem video hướng dẫn. Bạn cũng có thể thấy chúng tôi trên Twitter và Facebook.
Cách Tạo Style Cho Navigation Menus WordPress
Bạn có muốn tạo style cho các navigation menus (menu điều hướng) WordPress của mình để thay đổi màu sắc hoặc giao diện không? Theme WordPress là nơi xử lý giao diện của các menu điều hướng nên bạn có thể dễ dàng tùy chỉnh bằng CSS theo nhu cầu. Trong bài viết này, CunghocWP sẽ hướng dẫn cách tạo style cho các navigation menus WordPress trên trang web.
Phương pháp 1: Tạo style cho các Navigation Menu WordPress bằng plugin
Theme WordPress sử dụng CSS để tạo style cho các menu điều hướng nhưng nhiều người dùng mới không biết chỉnh sửa file theme hoặc viết code CSS riêng.
Đây là lúc plugin style WordPress trở nên hữu ích. Bạn sẽ tiết kiệm được một khoản lớn từ việc chỉnh sửa các file theme hoặc viết bất kỳ code nào.
Đầu tiên bạn cần cài đặt và kích hoạt plugin CSS Hero. Để biết thêm chi tiết, hãy xem hướng dẫn của CunghocWP về cách cài đặt plugin WordPress.
CSS Hero là một plugin WordPress cao cấp cho phép bạn thiết kế theme WordPress theo ý muốn mà không cần viết một dòng code nào (Không yêu cầu HTML hoặc CSS). Hãy đọc bài đánh giá CSS Hero của chúng tôi để tìm hiểu thêm.
Sau khi kích hoạt, bạn sẽ được chuyển hướng để lấy khóa License CSS Hero. Chỉ cần làm theo các hướng dẫn trên màn hình và bạn sẽ được chuyển hướng trở lại trang web của mình sau một vài cú nhấp chuột.
Sau khi nhấp vào biểu tượng màu xanh lam, di chuột đến navigation menu, CSS Hero sẽ đánh dấu menu bằng cách hiển thị các đường viền xung quanh. Khi bạn nhấp vào navigation menu được đánh dấu sẽ hiển thị các item mà bạn có thể chỉnh sửa.
CSS Hero sẽ hiển thị các thuộc tính khác nhau mà bạn có thể chỉnh sửa như văn bản, background, border, margin, padding, vv…
Sau khi thực hiện các thay đổi, bạn có thể xem trực tiếp trong bản xem trước theme.
Ưu điểm của phương pháp này là bạn có thể hoàn tác bất kỳ thay đổi nào đã thực hiện. CSS Hero lưu giữ một lịch sử đầy đủ về tất cả các thay đổi của bạn và bạn có thể quay lại giữa các thay đổi đó.
Phương pháp 2: Tạo style cho Navigation Menus WordPress theo cách thủ công
Phương pháp này thêm CSS tùy chỉnh theo cách thủ công và dành cho người dùng trung gian.
Các menu điều hướng trong WordPress được hiển thị trong một danh sách không có thứ tự (danh sách có dấu đầu dòng).
Thông thường, nếu bạn sử dụng thẻ menu mặc định của WordPress, sẽ hiển thị danh sách không có thuộc tính class CSS nào được liên kết với thẻ.
Danh sách không có thứ tự có tên thuộc tính class là ‘menu’, mỗi item trong danh sách đều có thuộc tính class CSS riêng.
Điều này có thể hoạt động nếu bạn chỉ có một vị trí menu. Tuy nhiên, hầu hết các theme đều có nhiều vị trí để bạn hiển thị menu điều hướng.
Nếu chỉ sử dụng thuộc tính class CSS mặc định có thể gây ra xung đột với các menu trên các vị trí khác.
Đây là lý do tại sao bạn cũng cần xác định thuộc tính class CSS và vị trí menu. Rất có thể theme WordPress của bạn đã làm điều này bằng cách thêm các menu điều hướng bằng cách sử dụng đoạn code sau:
Đoạn code này cho WordPress biết rằng đây là nơi theme hiển thị menu chính và thêm một menu chính có thuộc tính class CSS vào menu điều hướng.
Bây giờ bạn có thể tạo style cho menu điều hướng của mình bằng cấu trúc CSS này.
// container class
#header .primary-menu{}
// container class first unordered list
#header .primary-menu ul {}
//unordered list within an unordered list
#header .primary-menu ul ul {}
#header .primary-menu li {}
// each navigation item anchor
#header .primary-menu li a {}
// unordered list if there is drop down items
#header .primary-menu li ul {}
// each drop down navigation item
#header .primary-menu li li {}
// each drap down navigation item anchor
#header .primary-menu li li a {}
Bạn sẽ cần thay thế #header bằng thuộc tính CSS container mà menu điều hướng của bạn đang sử dụng.
Cấu trúc này sẽ thay đổi hoàn toàn giao diện của menu điều hướng.
Tuy nhiên, vẫn có các thuộc tính class CSS khác do WordPress tạo tự động được thêm vào từng menu và tiem menu. Các thuộc tính class này tùy chỉnh menu điều hướng.
WordPress cũng cho phép bạn thêm các thuộc tính class CSS tùy chỉnh riêng vào các item menu riêng lẻ.
Bạn có thể sử dụng tính năng này để tạo style cho các item menu như thêm biểu tượng hình ảnh vào menu hay thay đổi màu sắc để đánh dấu item menu.
Ví dụ về tạo style cho Navigation Menus trong WordPress
Các theme WordPress khác nhau có thể sử dụng các tùy chọn tạo style khác nhau, các thuộc tính CSS và cả JavaScript để tạo navigation menus. Do đó, sẽ có rất nhiều tùy chọn để bạn thay đổi các style và tùy chỉnh các menu điều hướng để đáp ứng nhu cầu riêng.
Công cụ kiểm tra trong trình duyệt web sẽ là trợ thủ đắc lực nhất để tìm ra các thuộc tính class CSS nào cần thay đổi. Nếu bạn chưa từng làm việc này trước đây thì hãy tham khảo hướng dẫn của CunghocWP về cách sử dụng công cụ kiểm tra để tùy chỉnh các theme WordPress.
Bạn chỉ cần trỏ con trỏ đến phần tử muốn sửa đổi, nhấp chuột phải và sau đó chọn công cụ Inspect từ menu của trình duyệt.
1. Thay đổi màu phông chữ trong navigation menus WordPress
Đây là mẫu CSS tùy chỉnh mà bạn có thể thêm vào theme của mình để thay đổi màu phông chữ của navigation menus.
Trong ví dụ này, # top-menu là ID được gán cho danh sách không có thứ tự hiển thị navigation menu của chúng tôi. Bạn cần sử dụng công cụ kiểm tra để tìm ra ID theme bạn đang dùng.
Trước tiên, bạn cần tìm ra ID CSS hoặc thuộc tính class của theme đang sử dụng cho navigation menu xung quanh vùng chứa.
Và đây là kết quả hiển thị trên trang web demo của chúng tôi.
Nhiều trang web sử dụng các màu background khác cho các liên kết quan trọng nhất trong menu điều hướng của họ như một nút đăng nhập, đăng ký, liên hệ hoặc mua. Các liên kết này sẽ nổi bật hơn nếu có một màu khác.
Để làm điều này, bạn cần thêm một thuộc tính class CSS tùy chỉnh vào item menu muốn đánh dấu bằng màu background khác.
Và đây là kết quả hiển thị trên trang web demo của chúng tôi.
Nếu bạn muốn các item menu của mình thay đổi màu sắc khi di chuột qua thì có thể sử dụng thủ thuật CSS cụ thể để làm cho các menu điều hướng có tính tương tác hơn.
Chỉ cần thêm CSS tùy chỉnh sau vào theme của bạn.
Trong ví dụ này, # top-menu là ID CSS mà theme của bạn sử dụng cho danh sách menu điều hướng không có thứ tự.
Và đây là kết quả hiển thị trên trang web demo của chúng tôi.
Thông thường, các navigation menu xuất hiện ở trên cùng và biến mất khi người dùng cuộn xuống. nhưng các navigation menu sticky floating vẫn ở trên cùng khi người dùng cuộn xuống.
Bạn có thể thêm đoạn code CSS sau vào theme để làm cho các menu điều hướng của bạn trở nên hấp dẫn.
Chỉ cần thay thế # top-menu bằng ID CSS menu điều hướng của bạn.
Đây là là kết quả trong bản demo của chúng tôi:
6. Tạo Navigation Menus Transparent trong WordPress
Nhiều trang web sử dụng ảnh background lớn hoặc toàn màn hình với các nút CTA. Sử dụng menu trong suốt giúp điều hướng của bạn hòa hợp với hình ảnh và khiến người dùng tập trung hơn vào lời kêu gọi hành động của bạn.
Chỉ cần mẫu code CSS sau vào theme để làm trong suốt các menu điều hướng:
Và đây là kết quả trên trang demo của chúng tôi.
Chia Cột Và Tạo Bảng Trên WordPress
Xin chào Mình là Sera đây Hôm nay mình sẽ hướng dẫn các bạn cách chia cột và tạo bảng trên WordPress. Đây là bài hướng dẫn mở đầu năm mới 2020, các bạn hãy chuẩn bị tinh thần đi vì nó rất là dài đấy
Trước khi đi vào nội dung chi tiết của bài này, các bạn cần lưu ý những điều sau:
1. Nếu bạn là một người mới, hoàn toàn không biết bất cứ điều gì về WordPress, hãy xem bài Hướng dẫn WordPress cơ bản cho người mới bắt đầu trước khi đọc bài này.
2. Các code có trong bài hướng dẫn này được dán (paste) vào giao diện HTML của trình soạn thảo văn bản Cổ điển, không phải dán vào giao diện trực quan (Visual). Nếu các bạn không biết hoặc không hiểu giao diện HTML và giao diện trực quan (Visual) là gì, hãy bấm vào ĐÂY để đọc.
5. Một số hình ảnh trong bài viết có chiều rộng trên 1000px, nhưng do giới hạn của vùng hiển thị bài đăng nên sẽ bị giảm xuống còn khoảng 940px. Nếu trong bài viết có sử dụng video từ YouTube, các bạn hãy lựa chọn chế độ xem video với chất lượng cao nhất (720p hoặc 1080p).
Trong phần này, mình sẽ hướng dẫn các bạn cách chia cột trên trình soạn thảo văn bản Cổ điển (Phiên bản 1) và trình soạn thảo văn bản Block-Editor . Nếu các bạn đọc hướng dẫn bằng lời (hoặc kèm theo hình ảnh) mà vẫn chưa hiểu thì cuối mỗi phần sẽ có video minh hoạ để các bạn dễ hình dung hơn
* Để chia nội dung bài viết thành 2 cột, các bạn hãy dán code sau đây vào vị trí muốn chia cột:
* Để chia nội dung bài viết thành 3 cột , các bạn hãy dán code sau đây vào vị trí muốn chia cột:
Sau khi thực hiện thao tác thêm khối, khối Columns sẽ có dạng như sau:
Hình 1. Khối Columns (trước khi chia cột)
* – Nút chuyển đổi.
* – Nút căn chỉnh: Thông thường, mặc định của nút này sẽ là chế độ Wide width , ngoài ra tuỳ thuộc vào cấu trúc theme mà nút này có thể có thể chế độ Full width hoặc các chế độ khác. Lưu ý: Không phải theme nào cũng có nút căn chỉnh này.
* – Nút tuỳ chọn bổ sung (More options).
Sau khi bấm chọn kiểu bố cục chia cột, cấu trúc của khối Columns sẽ có dạng như sau:
Hình 2. Khối Columns (sau khi chia cột)
* – Nút chuyển đổi.
* – Nhóm nút căn chỉnh: Thông thường, mặc định của nhóm nút này sẽ là chế độ Wide width , ngoài ra tuỳ thuộc vào cấu trúc theme mà nút này có thể có thể chế độ Full width hoặc các chế độ khác. Lưu ý: Không phải theme nào cũng có nút căn chỉnh này.
* – Nhóm nút căn chỉnh nội dung trong các cột: Nội dung trong các cột sẽ được căn chỉnh theo phương thẳng đứng, có thể là căn từ trên xuống dưới ( Vertically Align Top ), căn từ dưới lên ( Vertically Align Bottom ) hoặc căn chính giữa ( Vertically Align Middle ). Theo mặc định, nội dung trong các cột sẽ được căn chỉnh theo phương thẳng đứng, chiều từ trên xuống dưới ( Vertically Align Top ).
* – Nút tuỳ chọn bổ sung (More options).
Tab tuỳ chọn bổ sung: Tab này chỉ có một tuỳ chọn duy nhất là chia cột. Ban đầu mình chọn kiểu bố cục 2 cột, nếu mình muốn tăng số cột lên thành 3 thì mình sẽ nhập số 3 vào khung ở dưới chữ Columns , hoặc di chuyển hình tròn trên thanh trượt cho đến khi số 3 xuất hiện trong khung. Các bạn được chia tối đa 6 cột.
Hình 4. Điều chỉnh độ rộng của cột
Thao tác chia cột trên trình soạn thảo Cổ điển và trình soạn thảo Block-Editor sẽ được minh hoạ bằng video sau:
Video 2. Chia cột trên WordPress
2.1. Tạo bảng trên trình soạn thảo Block-Editor
Để tạo bảng trên trình soạn thảo Block-Editor, chúng ta sẽ sử dụng khối Table . Sau khi thêm khối, cấu trúc của khối Table sẽ có dạng như sau:
Hình 5. Khối Table (khi chưa xác định số lượng hàng và cột)
* – Nút chuyển đổi.
* – Nút tuỳ chọn bổ sung (More options).
Tab tuỳ chọn bổ sung: Hiện tại các bạn chưa cần quan tâm đến tab này
Nội dung của khối: Lúc này, phần nội dung của khối sẽ hiện ra 2 ô để các bạn nhập số lượng hàng và cột cho bảng cần tạo. Các bạn nhập số cột cần có trong bảng vào ô phía bên dưới chữ Column Count và nhập số hàng cần có vào ô phía bên dưới chữ Row Count . Sau đó, các bạn bấm vào nút Create Table để tạo bảng.
Hình 6. Nhập số cột và hàng để tạo bảng
Sau khi các bạn bấm vào nút Create Table , cấu trúc của khối Table sẽ có dạng như sau:
Hình 7. Cấu trúc của khối Table (sau khi đã xác định số hàng và số cột)
* – Nút chuyển đổi.
* – Nhóm nút chỉnh sửa bảng: Nhóm nút này bao gồm các nút sau: ( Add Row Before – Thêm một hàng ngay trước hàng hiện tại), ( Add Row After – Thêm một hàng ngay sau hàng hiện tại), ( Delete Row – Xoá hàng hiện tại), ( Add Column Before – Thêm một cột ở phía bên trái cột hiện tại), ( Add Column After – Thêm một cột ở phía bên phải cột hiện tại), ( Delete Column – Xoá cột hiện tại).
* – Nhóm nút căn chỉnh nội dung trong bảng: Nhóm nút này bao gồm các nút (Căn lề trái), (Căn lề phải), (Căn giữa). Nội dung trong bảng được căn chỉnh theo từng cột, nghĩa là các bạn không thể dùng nút căn lề một lần để căn lề cho cả bảng mà phải căn theo từng cột. Theo mặc định, nội dung của các cột trong bảng sẽ được căn lề trái.
* – Nút tuỳ chọn bổ sung (More options).
Tuỳ chọn về kiểu dáng của bảng. Thông thường sẽ có 2 tuỳ chọn là (theo kiểu mặc định của theme) và (kiểu sọc).
Hình 8. Chọn kiểu bảng
: Mục này gồm 3 tuỳ chọn là Fixed width table cells (Cố định chiều rộng của các ô trong bảng), Header section (Thêm một hàng tiêu đề cho bảng), Footer section (Thêm một hàng vào cuối bảng). Từ “section” này hơi khó giải thích một chút, khi các bạn đọc một cuốn sách hoặc xem các đề án hoặc luận văn thì thường thấy bố cục trang giấy sẽ được chia làm 3 phần. Phần chính giữa là nội dung cuốn sách hoặc luận văn, phần phía trên phần nội dung có thể là tên cuốn sách kèm theo tên tác giả, phần phía dưới nội dung (cuối trang) có thể là tên nhà xuất bản và số trang. Phần phía trên và phía dưới nội dung đó được gọi là “section”. Nói chung là phần “section” này không quá quan trọng và các bạn cũng không nhất thiết phải chèn vào làm gì cả. Theo mặc định, chiều rộng của cột sẽ tuỳ chỉnh theo nội dung của các ô trong bảng. Nếu các bạn muốn cố định chiều rộng của các ô, các bạn hãy bật tuỳ chọn Fixed width table cells . Lúc này, các ô trong bảng sẽ có chiều rộng bằng nhau.
Hình 9. Table Settings
* Color Settings: Đổi màu nền cho bảng. Tuỳ chọn này chỉ có một số màu nhất định, các bạn sẽ không thể tự chọn màu nền theo ý thích. Để xoá màu nền, các bạn bấm vào nút .
Thao tác tạo bảng trên trình soạn thảo Block-Editor sẽ được minh hoạ bằng video sau:
Code tạo bảng cơ bản là code đơn giản nhất của phần này. Nhưng nhược điểm của nó chính là kiểu dáng của bảng sẽ tuân theo cấu trúc của theme, tức là nếu mặc định của theme là bảng không có đường kẻ dọc thì khi các bạn dùng code này, bảng cũng sẽ không có đường kẻ dọc luôn. Điển hình như theme Selecta mình đang sử dụng, nó hoàn toàn không có đường kẻ dọc Vậy thì tại sao chúng ta vẫn phải học cái thứ ba chấm này? Bởi vì nó là cái cơ bản nhất, hiểu được nó thì mới có cơ sở hiểu và thao tác những kiểu bảng khó hơn được
Còn đây là code tạo bảng cơ bản với 2 hàng và 1 cột :
Bây giờ chúng ta sẽ đi phân tích một số thẻ HTML có trong 2 code trên:
* Thẻ : Thẻ này bao gồm cả thẻ mở () và thẻ đóng (), thẻ này đại diện cho hàng (row) trong bảng. Một cặp thẻ (bao gồm thẻ mở và thẻ đóng) tương đương với một hàng trong bảng. Thẻ được bao quanh bởi thẻ table và thẻ tbody và không được bao ngoài 2 thẻ này khi viết code tạo bảng.
* Thẻ : Thẻ này bao gồm cả thẻ mở () và thẻ đóng (), thẻ này đại diện cho ô dữ liệu (data) trong bảng (từ đây mình sẽ gọi tắt là “ô”). Một cặp thẻ (bao gồm thẻ mở và thẻ đóng) tương đương với một ô trong bảng. Thẻ được bao quanh bởi thẻ tr và không được bao ngoài thẻ tr khi viết code tạo bảng.
Tạm thời chúng ta chỉ cần quan tâm đến 2 thẻ và ở trên là được. Khi tạo bảng, chúng ta thường nói đến hàng và cột. Tuy nhiên, sau khi phân tích code và các thẻ ở trên thì yếu tố cột lại không xuất hiện mà thay vào đó là yếu tố ô. Nghĩa là thay vì tạo cột thì code này sẽ tạo ô trong các hàng. Nói một cách đơn giản thì là thế này, bình thường khi kẻ bảng trên giấy, chúng ta thường có thói quen chia cột trước và kẻ các đường kẻ ngang sau. Nhưng với code HTML tạo bảng, đầu tiên chúng ta sẽ tạo ra các hàng trước, sau đó xếp các ô vào trong các hàng đó theo chiều ngang. Ví dụ, mình tạo một hàng bằng cách viết một cặp thẻ , sau đó mình sẽ xếp 3 ô vào hàng đó bằng thêm 3 cặp thẻ vào bên trong cặp thẻ vừa rồi. Như vậy mình sẽ có 1 hàng và 3 ô, tương đương với khái niệm 1 hàng và 3 cột. Bây giờ mình muốn bảng có 2 hàng và 3 cột thì sẽ tiếp tục viết thêm một cặp thẻ với 3 cặp thẻ vào ngay sau thẻ đóng () mà mình vừa viết.
Nếu mình chèn cột mới vào giữa 2 cột, mình sẽ chèn cặp thẻ vào giữa 2 cặp thẻ đang có sẵn trong code. Lúc này, code của mình sẽ có dạng như sau:
Nếu mình chèn cột mới vào phía trước cột 1 thì mình sẽ chèn cặp thẻ vào trước cặp thẻ thứ nhất trong code. Lúc này, code của mình sẽ có dạng như sau:
Nếu mình chèn cột mới vào phía sau cột 2 thì mình sẽ chèn cặp thẻ vào sau cặp thẻ thứ hai trong code. Lúc này, code của mình sẽ có dạng như sau:
Tương tự, nếu muốn giảm số hàng hoặc số cột trong bảng, các bạn chỉ cần xoá cặp thẻ hoặc tương ứng với hàng hoặc cột đó. Xoá hàng thì đơn giản, nhưng khi xoá cột thì các bạn cần phải chú ý một chút. Như mình đã nói ở trên, code HTML tạo bảng theo kiểu xếp từng ô vào các hàng. Do đó, ngoại trừ bảng có 1 hàng ra thì khi các bạn xoá bảng có từ 2 hàng và 2 cột trở lên thì cần phải lưu ý về cách xoá cột với cặp thẻ . Lúc này các bạn sẽ không xoá cột mà sẽ xoá ô. Điều này có nghĩa là các bạn không thể xoá 1 cột chỉ với 1 lần xoá cặp mà sẽ phải xoá từng ô có trong cột muốn xoá. Ví dụ Mình muốn xoá cột thứ 3 có trong bảng. Hiện tại, bảng của mình có 3 cột và 3 hàng. Để xoá cột thứ 3 này, mình sẽ phải xoá các cặp thẻ thứ 3 trong các cặp thẻ có trong code, tức là mình phải xoá 3 cặp thẻchứ không phải 1 cặp thẻ. Lúc này, code của mình sẽ có dạng như sau:
Bây giờ bảng của mình chỉ còn 2 cột và 3 hàng, nếu mình xoá hàng thứ 2 thì mình sẽ xoá cặp thẻ (bao gồm cả thẻ đóng, thẻ mở và các thẻ được nó bao quanh như thẻ ) thứ 2 trong code tạo bảng. Lúc này, code của mình sẽ có dạng như sau:
Đến đây thì các bạn đã hiểu được cách điều chỉnh số lượng hàng và cột trong bảng chưa nào? Thực ra code tạo bảng còn có thể có thêm một số thẻ khác như thẻ , , ,… nhưng mình cảm thấy những thẻ này không quan trọng nên mình không đưa vào trong code. Với code tạo bảng ở trên, định dạng văn bản trong bảng sẽ được mặc định theo cấu trúc của theme. Nếu các bạn không muốn sử dụng định dạng mặc định của theme, hãy đặt code tạo bảng (cặp thẻ , bao gồm cả thẻ mở, thẻ đóng và các thẻ được thẻ bao quanh) vào bên trong cặp thẻ chứa các thuộc tính định dạng. Trong trường hợp này, các bạn sẽ không thể dùng thẻ hay thẻ để định dạng mà chỉ có thể dùng thẻ . Về lí thuyết, các bạn có thể định dạng cho văn bản trong bảng bằng cách thêm các thuộc tính định dạng vào thẻ mở của thẻ tương tự như với thẻ . Nhưng trong bài này, mình tách riêng ra để các bạn dễ chỉnh sửa hơn mà thôi. Ví dụ, mình có code định dạng văn bản với các thuộc tính như sau:
Bây giờ mình sẽ chèn code tạo bảng vào trong cặp thẻ div này, đoạn code hoàn chỉnh của mình sẽ có dạng như sau:
border-collapse: collapse; width: 100%;
Tức là code tạo bảng hoàn chỉnh của mình sẽ có dạng thế này:
2.2.2. Một vài thao tác điều chỉnh cơ bản với bảng
a) Điều chỉnh độ rộng của các cột trong bảng
Về lí thuyết, các bạn có thể điều chỉnh độ rộng của các cột trong bảng bằng nhiều đơn vị tính khác nhau, nhưng đơn vị thường được sử dụng nhất là phần trăm (). Để điều chỉnh độ rộng của các cột trong bảng, các bạn chỉ cần điều chỉnh độ rộng của các ô (tương ứng với các cặp thẻ ) trong hàng đầu tiên của bảng bằng thuộc tính với giá trị % tương ứng. , code bảng của mình có 3 cột và 4 hàng, nếu để mặc định không điều chỉnh thì độ rộng của các cột sẽ được tự động điều chỉnh theo nội dung của các ô trong cột đó. Bây giờ mình sẽ điều chỉnh độ rộng của cột 1 thành 25%, cột 2 thành , cột 3 thành . Một mẹo nhỏ khi điều chỉnh độ rộng của cột là các bạn nên để giá trị cho độ rộng của cột cuối cùng trong bảng, như vậy sẽ tránh được trường hợp bảng có thể tràn ra ngoài vùng hiển thị bài đăng. Tức là trong trường hợp này, thay vì điều chỉnh độ rộng của cột 3 với giá trị là thì mình sẽ điền giá trị cho nó. Và mình chỉ cần điều chỉnh với 3 ô trong hàng đầu tiên của bảng mà thôi. Code bảng sau khi điều chỉnh của mình sẽ có dạng như sau:
b) Gộp ô trong bảng
Gộp ô không phải thuộc tính định dạng nên chúng ta sẽ tách riêng nó với các thuộc tính định dạng. Để gộp ô trong bảng, chúng ta sẽ sử dụng 2 thuộc tính là (gộp các ô trong cùng một hàng – gộp ô theo chiều ngang) và rowspan (gộp các ô trong cùng một cột – hay còn gọi là gộp ô theo chiều dọc) với cú pháp như sau:
colspan=”số ô cần gộp theo chiều ngang”
hoặc:
rowspan=”số ô cần gộp theo chiều dọc”
Ví dụ Mình có thuộc tính là , suy ra số lượng ô mình cần xoá sau khi gộp ô sẽ bằng 4−1=3. Các bạn sẽ không được xoá những ô nằm bên trái của ô chứa thuộc tính mà chỉ được xoá những ô nằm bên phải của ô này thôi. Nếu các bạn xoá những ô nằm bên trái thì các ô thừa vẫn sẽ tràn ra như bình thường.
Để dễ hình dung, mình sẽ lấy ví dụ với code tạo bảng cơ bản sau:
Theo code tạo bảng cơ bản ở trên thì do mặc định của theme Selecta nên bảng của mình sẽ không có đường kẻ dọc. Nhưng để ví dụ về gộp ô dễ quan sát hơn, mình đã kẻ viền đen (và tô màu một vài ô) cho bảng. Cách kẻ viền này mình sẽ hướng dẫn các bạn ở phần Tạo bảng nâng cao sau, thế nên mình sẽ không đưa nó vào trong code tạo bảng cơ bản ở trên mà chỉ giải thích thôi. Với code tạo bảng ở trên, cấu trúc bảng của mình bao gồm 4 cột và 3 hàng. Bây giờ mình muốn gộp ô thứ 2 với ô thứ 3 và ô thứ 4 trong hàng thứ 2 của bảng thì đầu tiên, mình sẽ đặt thuộc tính với số ô cần gộp là (bao gồm ô thứ 2, ô thứ 3 và ô thứ 4) vào thẻ mở của ô thứ 2 (ô bắt đầu cần gộp) trong hàng thứ 2. Code của mình lúc này sẽ có dạng như sau:
Lúc này, do chưa xoá những ô còn thừa nên bảng của mình sẽ bị dư ra 2 ô ở hàng thứ 2. Do đó, mình sẽ phải xoá đi ô ở phía bên phải của ô chứa thuộc tính , tức là mình sẽ xoá 2 cặp thẻ nằm ngay dưới cặp thẻ chứa thuộc tính . Lúc này, code của mình sẽ có dạng như sau:
* Đối với gộp ô theo chiều dọc , các ô sẽ được gộp theo chiều từ trên xuống dưới tính từ ô bắt đầu gộp. Nghĩa là, các bạn sẽ đặt thuộc tính vào thẻ mở của ô mà các bạn muốn bắt đầu gộp nó với những ô nằm phía dưới. Tương tự như khi gộp ô theo chiều ngang, các bạn cũng sẽ phải xoá các ô thừa ra sau khi gộp ô theo chiều dọc. Việc xoá ô này sẽ vất vả hơn khi xoá ô theo chiều ngang một chút. Nếu xoá ô theo chiều ngang, các bạn chỉ cần thao tác trên một cặp thẻ và các cặp thẻ cần xoá đều nằm trong cặp thẻ đó. Nhưng khi xoá ô theo chiều dọc, các bạn sẽ phải thao tác trên nhiều cặp thẻ hơn. Nếu gộp 2 ô theo chiều dọc, các bạn chỉ cần thao tác với 1 cặp thẻ , nhưng nếu gộp 3 ô theo chiều dọc, các bạn sẽ phải thao tác với 2 cặp thẻ , cứ như vậy, các bạn gộp càng nhiều ô theo chiều dọc thì số cặp thẻ các bạn phải thao tác cũng sẽ tăng lên. Ở đây mình nói là cặp thẻ bởi vì thẻđại diện cho hàng trong bảng, nhưng thực tế cặp thẻ mà chúng ta cần xoá sẽ là cặp thẻ (tương ứng với ô) nằm trong cặp thẻ đó. Sau khi các bạn gộp ô theo chiều dọc, các ô bị gộp (không tính ô bắt đầu gộp) sẽ không mất đi mà sẽ bị đẩy lùi sang phải 1 ô, điều này đồng nghĩa với việc ô cuối cùng của hàng chứa ô bị gộp đó sẽ bị tràn ra khỏi bảng. Lúc này, để điều chỉnh lại bảng, các bạn có thể xoá ô bị tràn ra đó hoặc bất cứ một ô nào trong hàng đó đều được.
Để dễ hình dung, mình sẽ lấy ví dụ với code tạo bảng cơ bản sau:
Như đã giải thích ở trên, mình kẻ thêm viền đen (và tô màu một vài ô) cho bảng để các bạn dễ quan sát quá trình gộp ô hơn. Lúc này, bảng của mình có 4 cột và 4 hàng. Mình muốn gộp ô thứ 2 của cột 2 (tương đương với toạ độ hàng 2, cột 2) với ô thứ 3 của cột này (tương đương với toạ độ hàng 3, cột 2) thì mình sẽ đặt thuộc tính với số ô cần gộp là vào thẻ mở của ô thứ 2 ở cột 2. Code của mình sẽ có dạng như sau:
Do mình chưa xoá các ô thừa nên bảng của mình bị dư ra 1 ô ở hàng thứ 3. Ô bị dư ra thuộc hàng thứ 3, nghĩa là mình sẽ cần xoá 1 cặp thẻ trong số 4 cặp thẻ được bao quanh bởi cặp thẻ thứ 3 (tương đương với hàng thứ 3) trong code tạo bảng. Ở đây, mình sẽ lựa chọn xoá ô đầu tiên của hàng thứ 3 (tương ứng với toạ độ hàng 3, cột 1). Lúc này, code của mình sẽ có dạng như sau:
Do mình bắt đầu gộp từ ô đầu tiên của cột 2 (tương đương với toạ độ hàng 1, cột 2) nên 2 hàng bên dưới hàng chứa ô này sẽ có tình trạng tràn ô, mỗi hàng sẽ bị tràn ra 1 ô. Để xoá 2 ô bị tràn này, mình sẽ phải thao tác với 2 cặp thẻ (tương đương với 2 hàng nằm bên dưới hàng chứa ô bắt đầu gộp). Đối với 2 cặp thẻ này, mình sẽ xoá 1 cặp thẻ (tương đương với 1 ô) nằm bên trong nó, tức là mình sẽ xoá tất cả là 2 cặp thẻ . Khi chưa xoá ô bị tràn, bên trong 2 cặp thẻ này sẽ có 4 cặp thẻ , nhưng sau khi xoá thì 2 cặp thẻ này chỉ còn lại 3 cặp thẻ mà thôi. Lúc này, code của mình sẽ có dạng như sau:
* Để gộp ô theo cả chiều ngang lẫn chiều dọc , các bạn sẽ sử dụng đồng thời 2 thuộc tính và . Lúc này, chúng ta sẽ chọn 1 ô trong bảng làm mốc để gộp theo cả chiều ngang lẫn chiều dọc. Và khi gộp xong, các bạn cũng phải tiến hành xoá các ô thừa như mình đã hướng dẫn ở trên. Ví dụ, mình có code tạo bảng cơ bản sau (bảng đã được kẻ thêm viền và tô màu để tiện quan sát):
Ban đầu, bảng của mình có 3 cột và 3 hàng. Bây giờ mình sẽ lấy ô đầu tiên của cột 1 (tương đương với toạ độ hàng 1, cột 1) làm mốc để gộp ô, tức là mình sẽ đặt thuộc tính và vào thẻ mở của ô này. Mình sẽ gộp ô làm mốc này với 1 ô ở bên phải (gộp theo chiều ngang) và 1 ô ở bên dưới (gộp theo chiều dọc). Lúc này, code của mình sẽ có dạng như sau:
VUI LÒNG KHÔNG SAO CHÉP BÀI VIẾT NÀY! CẢM ƠN CÁC BẠN!
Nguồn bài viết: https://wptutbyserahwang.wordpress.com/
Hướng Dẫn Sử Dụng Navigation Pane Trong Word 2010
Microsoft Office 2010 với nhiều cải tiến vô cùng hữu ích thiết thực cho người dùng. Tuy nhiên với kho tính năng mới đồ sộ này không phải ai cũng khám phá hết được. Navigation Pane trong Word 2010 cho phép bạn “nhảy” quanh tài liệu của mình. Bạn có thể tìm kiếm văn bản, đối tượng của Word như bảng biểu và đồ họa, hay nhảy tới các đề mục và trang cụ thể. Bài viết sau sẽ hướng dẫn các bạn thủ thuật sử dụng Navigation Pane để di chuyển tài liệu của mình theo nhiều cách.
Để mở Navigation Pane, kích vào nút Find trong nhóm Editing của tab Home, hoặc nhấn phím tắt Ctrl + F:
Một hình thumbnail nhỏ hiển thị cho những đoạn văn bản xung quanh mỗi từ/cụm từ được nhập vào. Để nhảy tới đoạn văn bản này, chỉ cần kích vào thumbnail thích hợp. Các từ/cụm từ được tìm thấy sẽ có màu đậm nổi bật giúp bạn dễ dàng xác định chúng.
Chú ý: Chỉ cần di chuyển cho trỏ chuột tới mỗi thumbnail bạn sẽ nhìn thấy vị trí số trang của đoạn văn bản đó, đồng thời nếu kích chuột vào thumbnail bạn sẽ được nhảy tới trang tương ứng.
Ngoài ra bạn có thể thiết lập thêm một vài tùy chọn cho tính năng Find bằng cách: kích vào nút mũi tên bên phải hộp search, chọn Options.
Khi tìm kiếm cho văn bản, toàn bộ lần xuất hiện của từ đó sẽ được hiển thị cho dù nó chỉ là một phần của từ khóa bạn nhập vào. Ví dụ với từ ” text” thì kết quả trả về sẽ bao gồm cho cả từ textbox… Tùy chọn Find whole words only sẽ giúp bạn cho ra kết quả chính xác với từ khóa nhập vào.
Bạn cũng có thể sử dụng các ký hiệu trong tiêu chí tìm kiếm của mình với tùy chọn Use wildcards. Ví dụ khi nhập vào từ ” s?t” kết quả sẽ tìm những từ có chữ cái đầu tiên là ” s” và chữ cái thứ ba là ” t“, dấu “?” là chữ cái bất kỳ (bao gồm cả khoảng cách).
Để dễ dàng di chuyển các đoạn văn bản được tìm thấy cho từ/cụm từ khóa một cách tuần tự, chỉ cần kích vào nút mũi tên ( Next Search Result) ở hàng thứ ba của Navigation:
Nếu bạn đã sử dụng built-in heading styles trong Word để định nghĩa các section cho tài liệu của mình, bạn có thể dễ dàng nhảy tới các section khác nhau bằng tab đầu tiên (có tên Browse the headings in your document) trong phần hiển thị kết quả.
Tại tab thứ hai để hiển thị kết quả tìm kiếm ( Browse the pages in your document) sẽ chứa các thumbnail của các trang trong tài liệu của bạn. Kích vào từng thumbnail để nhảy tới trang tương ứng.
Ngoài ra nếu bạn muốn sử dụng hộp thoại Find and Replace truyền thống, kích vào nút mũi tên bên phải hộp search, chọn Advanced Find từ menu xổ xuống.
Chuyển sang tab Replace cho phép bạn thay thế từ/cụm từ bằng các văn bản khác. Tab Go To cho phép bạn nhảy tới số trang cụ thể, section, dòng hoặc các phần khác trong tài liệu (bao gồm cả Table, Graphic…).
Cập nhật thông tin chi tiết về Hướng Dẫn Tạo Navigation Menu Nổi Trên WordPress trên website Hoisinhvienqnam.edu.vn. Hy vọng nội dung bài viết sẽ đáp ứng được nhu cầu của bạn, chúng tôi sẽ thường xuyên cập nhật mới nội dung để bạn nhận được thông tin nhanh chóng và chính xác nhất. Chúc bạn một ngày tốt lành!