Khung là một vùng trên một trang (cửa sổ) trong đó một trang web khác có thể nhìn thấy. Quản trị viên web sử dụng cơ hội này để giới thiệu trang chủ của các trang web của bạn bè hoặc đối tác của họ. Kỹ thuật tương tự được sử dụng để hiển thị biểu mẫu tìm kiếm trong các hộp có kết quả bên cạnh, v.v.
Nhưng hầu hết các khung được sử dụng trong việc tạo các cổng web lớn, nơi yêu cầu một số lượng đáng kể các mục menu và menu con. Họ thường nói về những người như vậy: "trang web trên khung". Cần phải có kiến thức tốt về HTML để tạo ra một tài nguyên như vậy.
Tạo khung trong trình tạo trang web
Một số trình xây dựng trang web cung cấp tính năng tự động tạo mã như vậy. Thông thường nút thêm khung nằm trong menu chính của chương trình. Trước tiên, bạn cần đặt con trỏ vào đúng vị trí trên trang, sau đó nhấp vào nút, một cửa sổ sẽ mở ra (như trong ảnh chụp màn hình). Trong đó, bạn có thể đặt địa chỉ của trang sẽ mở trong khung và điều chỉnh kích thước: chiều rộng và chiều cao.
Nhưng hầu hết các khung được sử dụng trong việc tạo các cổng web lớn, nơi yêu cầu một số lượng đáng kể các mục menu và menu con. Họ thường nói về những người như vậy: "trang web trên khung". Để tạo ra một nguồn tài nguyên như vậy đòi hỏi kiến thức tốtNgôn ngữ HTML.
Với sự trợ giúp của "dịch vụ" này, bạn có thể tạo nhiều khung trên trang, nhưng bạn sẽ không nhận được các phần tử được kết nối với nhau theo cách này.
Khung trong CMS
Trong nhiều chương trình tạo trang web, có thể cài đặt mô-đun tương ứng. Ví dụ, đối với Joomla, một khung là một mô-đun "Wrapper".
Nó có thể được tìm thấy và tạo trong bảng điều khiển Joomla CMS: "Phần mở rộng" - "Trình quản lý Mô-đun" - "Tạo" (một nút tròn màu cam có dấu cộng bên trong). Trong cửa sổ bật lên, trong danh sách, bạn sẽ thấy mô-đun "Wrapper".
Nếu nó không ở đây, nó không được bao gồm. Để sử dụng, trước tiên bạn cần kích hoạt nó tại đây: Tab "Tiện ích mở rộng", sau đó là "Trình quản lý tiện ích mở rộng", sau đó là tab "Quản lý". Và chúng tôi đang tìm kiếm trong danh sách mở ra, để tìm kiếm nhanh trong trường "Bộ lọc", hãy nhập từ: Wrapper. Đối diện với mô-đun này phải có một biểu tượng màu xanh lục với dấu kiểm bên trong. Vòng tròn màu đỏ với dấu chấm bên trong có nghĩa là plugin này đã bị vô hiệu hóa.
Sau quy trình này, bạn có thể quay lại "Trình quản lý mô-đun", tạo khung và đặt các thông số của nó.
Như bạn thấy trong hình, mô-đun cho phép bạn đặt: tiêu đề phía trên khung, vị trí của mô-đun, chọn các trang của trang web mà nó sẽ được hiển thị. Và cũng có thể điều chỉnh chiều rộng, chiều cao; thêm một khung và thực sựliên kết đến một trang web. Nếu trong một khung bạn muốn hiển thị trang chính của một trang web với chiều rộng đầy đủ, thì 100%, được đặt theo mặc định, sẽ không đủ. Bạn có thể đặt ngay 400% một cách an toàn. Chiều cao 200 thường đủ để hiển thị menu trên cùng của trang. Tất cả nội dung khác sẽ hiển thị nếu người dùng (khách truy cập trang web) sử dụng thanh cuộn.
Đây là một ví dụ về khung là gì trong Joomla.
Jumla module để tạo khung rất tiện lợi và dễ sử dụng. Tuy nhiên, khả năng của nó bị hạn chế, cũng như khả năng của hàm tạo.
Lịch sử và thực tế
Trong thực tế tạo các trang web từ các khung, thẻ này (ứng dụng của nó) từ lâu đã bị mờ trong nền. Chúng có thể được thay thế bằng các mô-đun, cài đặt trong các chương trình khởi tạo tạo mã cho một trang web mà không cần sự tham gia của người xây dựng trang. Tuy nhiên, trong một số trường hợp, điều này là không đủ. Ví dụ, khi một khung là một cấu trúc phức hợp tổng thể của các khu vực được hiển thị trong trình duyệt. Đây là cách chủ sở hữu của các trang web có cấu trúc phức tạp nhìn thấy nó. Việc tạo ra nó chỉ được sử dụng trong những trường hợp đặc biệt, vì các trang web khung được tạo riêng với sự trợ giúp của các thẻ chuyên dụng.
Trang web có cấu trúc phức tạp
Đối với họ, tạo nhiều khung kết nối với nhau là giải pháp tốt nhất để tổ chức nội dung trên các trang tài nguyên. Theo quy luật, đây là những cổng thông tin lớn, phát triển mạnh mẽ hơn mỗi năm.
Làm thế nào để đạt được kết quả tương tự? Cấu trúc khung được tạo ra như thế nào?
Cáchchèn khung vào mã trang
Khung trong HTML được thêm bằng thẻ:
- khung (cho một cửa sổ riêng biệt);
- bộ khung (sử dụng nó để tạo toàn bộ cấu trúc);
- iframe (khung "nổi");
- noframes (trong trường hợp khung không hiển thị trong trình duyệt của người dùng).
Thẻ được chỉ định đầu tiên luôn phù hợp với một cặp và. Và nó thay thế và. Và với sự trợ giúp của các thuộc tính thích hợp, bạn có thể điều chỉnh các đặc điểm của từng phần tử: tên (name=), kích thước (cols=và row=), sự hiện diện của đường viền (border), sự xuất hiện của thanh cuộn và, tất nhiên, liên kết đến trang web để hiển thị.
Biến thể thiết kế
Toàn bộ trang của trang web có thể được chia thành các khu vực. Ví dụ, như thế này:
| Còn lại | Khung trên cùng |
| Đúng |
Cấu trúc như vậy (nó được gọi là lồng nhau) có thể có được bằng cách viết thuộc tính cols bên trong thẻ, có nghĩa là vị trí của khung theo chiều ngang và các hàng - theo chiều dọc. Tiếp theo, dấu=được đặt và kích thước được quy định. Ví dụ: 60%, 40% - phần trăm (một cửa sổ sẽ chiếm 60% không gian trình duyệt, cửa sổ còn lại, tương ứng là 40%). Hoặc 100, 200 - tỷ lệ khung hình tính bằng pixel. Không thể đặt kích thước của một trong các khung (nó sẽ được đặt theo mặc định). Để thực hiện việc này, sau hoặc trước dấu phẩy, bạn cần chỉ định ký hiệu.
Tổmỗi khu vực mới được biểu thị bằng một bộ khung mới.
Ví dụ về mã:
Lưu ý rằng trong ví dụ của chúng tôi, đối với khung hình thứ hai và thứ ba, kích thước chỉ được chỉ định một lần.
Nhiều ý tưởng cho phép bạn hoàn thành khung hình. Ví dụ về vị trí của chúng trong cửa sổ trình duyệt có thể được cung cấp vô tận (thay đổi mã cho phù hợp). Tuy nhiên, thông tin này lâu nay vẫn chưa tìm thấy ứng dụng thực tế. Khung, nếu được sử dụng ngày nay khi tạo trang web, chỉ ở dạng mô-đun trong CMS miễn phí hoặc ở dạng khung nội tuyến.
Khung nổi
Thật lạ là tại sao nó lại có cái tên như vậy, từ "tích hợp sẵn" ở đây phù hợp hơn. Khung này được tạo ra để hiển thị nội dung của một tập tin. Bạn tải bất kỳ tài liệu hoặc tệp nào lên cơ sở dữ liệu, viết đường dẫn đến nó bằng các thẻ iframe - và khách truy cập sẽ thấy văn bản của tệp (video hoặc hình ảnh). Thật không may, các trình duyệt không phải lúc nào cũng hiển thị nội dung. Để thực hiện việc này, các nhà xây dựng web nhập cụm từ giữa thẻ mở và thẻ đóng: "Trình duyệt của bạn không hiển thị nội dung."
Ví dụ: Seopult.ru là một dịch vụ nổi tiếng dành cho các bậc thầy thăng chức. Không chỉ trang web chính của anh ấy, mà là một I.seopult.pro phản chiếu, được tạo cho các khách hàng cổng thông tin. Mã iframe được viết ở đây như sau:
Hướng dẫn
. Thẻở đâu
-
được tạo để xác định một mục danh sách. Được hỗ trợ bởi tất cả các trình duyệt.
Trên chính trang nhân bản, bạn có thể thấy từ "Hướng dẫn" dưới dạng một nút. Nhấp vào nó ở giữa cửa sổ trình duyệt sẽ mở ra bản trình bày.
Tất cả đều lớncác trang web để xem phim và loạt phim được tạo bằng iframe (ví dụ: "Imhonet"), cũng như các mạng xã hội. Ngay cả trang chính của "Yandex" cũng chứa thẻ này và nhiều hơn một cặp.
Cách viết iframe
Bạn có thể tải lên tài liệu dưới dạng cửa sổ có thanh cuộn đến bất kỳ vị trí nào trên trang web. Thông thường các thẻ được đặt bên trong phần thân. Vượt ra ngoài tiêu chuẩn
và, như thể hiện trong ví dụ trên, thẻ danh sách cũng có thể được sử dụng -
-
Các thuộc tính được thêm vào iframe:
- width (chiều rộng) và chiều cao (height=);
- căn chỉnh cạnh;
- thụt lề có thể được chỉ định hoặc có thể không: giá trị mặc định là 6 - điều này là khá đủ;
- sử dụng allowtransparency, bạn có thể đặt độ trong suốt của vùng khung để có thể nhìn thấy nền của trang;
- cộng với ký tự, tên, cuộn, đường viền quen thuộc.
Điều hướng bằng iframe
Kỹ năng đóng khung thú vị nhất là viết mã cho phép bạn mở nội dung trong cửa sổ bằng liên kết, đây là điều mà những người tạo ra Seopult mirror đã làm, chỉ với một số liên kết cùng một lúc (đồng thời có sẵn cho người dùng trên cùng một trang).
Đối với điều này, một iframe được sử dụng, tên được viết thêm vào đó thông qua name=. Ví dụ, tiêu đề. Hơn nữa, trước nó trong các thẻ và các liên kết được viết thông qua HREF=với dấu hiệu bắt buộc của thuộc tính sau chúng. Trước khi sử dụng thẻ đóng a, một dòng chữ được chỉ ra sẽ đóng vai trò như một nút liên kết. Thẻ "a" mở và đóngđược đặt trong thẻ p.
Bạn có thể viết vài dòng như vậy trong mã để cuối cùng nhận được nhiều nút liên kết trong một hàng trên trang web, bằng cách nhấp vào nội dung khác nhau sẽ được hiển thị trong cửa sổ bên dưới.
Mã sẽ như thế này:
Đăng quảng cáo
Xem Quảng cáo
Image Nó sẽ trông như thế nào trên trang web:
Cách chèn iframe vào trang Joomla
Theo tiêu chuẩn, bảng điều khiển Joomla có mô-đun "HTML-code" được kích hoạt (sẵn sàng sử dụng). Với nó, bạn có thể chèn bất kỳ mã nào vào bất kỳ đâu trên trang web. Tuy nhiên, anh ta cố tình bỏ qua đoạn mã có thẻ iFrem. Do đó, chúng tôi sẽ sử dụng một mô-đun Jumi đặc biệt.
Trước hết, bạn cần tải xuống từ Internet và cài đặt thông qua bảng quản trị Joomla: "Phần mở rộng" - "Trình quản lý phần mở rộng" - "Chọn tệp". Chỉ định đường dẫn đến kho lưu trữ đã tải xuống và nhấp vào "Tải xuống".
Sau khi cài đặt thành công, hãy vào "Trình quản lý mô-đun" và tạo một cái mới. Chọn loại Jumi. Trong cửa sổ mở ra, trong trường "Mã tùy chỉnh", hãy nhập iFrem đã chuẩn bị, như được hiển thị trong đoạn trước của bài viết. Đặt tiêu đề cho mô-đun, chỉ định vị trí đặt và các trang của trang web. Nhấp vào lưu và kiểm tra.
Trình duyệt và khung
Tất cả các trình duyệt phổ biến đều hiển thị tốt nội dung của các cửa sổ khung: Chrome, Safari, Firefox, Android, iOS. Internet Explorer và Opera có tỷ lệ đặc biệt cao về mặt này. Và không có gì đảm bảorằng khách truy cập vào trang web của bạn sẽ thấy nội dung của tất cả các cửa sổ. Trong trường hợp này, bạn nên để lại tin nhắn bằng cách sử dụng thẻ noframe (mở và đóng). Bạn có thể nhập thông tin sau vào đó: "Trình duyệt của bạn đã lỗi thời. Hãy cập nhật phiên bản để hiển thị nội dung của trang web." Nếu trình duyệt của người dùng hiển thị khung chính xác, họ sẽ không thấy thông báo này.
Vì vậy, khung là một khu vực hoặc cửa sổ của một trang web có URL riêng của nó. Được sử dụng để hiển thị một số trang web hoặc tài liệu độc lập trong một trường trình duyệt cùng một lúc, cũng có URL riêng của chúng. Mặc dù thực tế là các khung cho phép bạn tổ chức tốt một trang web phức tạp, nhưng chúng đã không được sử dụng trong một thời gian dài, ngoại trừ iframe. Việc sử dụng thẻ này vẫn có liên quan để tải bản trình bày, trình phát video, tài liệu văn bản trong một cửa sổ cụ thể. Nó được sử dụng tích cực bởi các tài nguyên web lớn và nổi tiếng.
-
