Thuộc tính nào là bắt buộc đối với thẻ khung. Tạo đường ngang. Tạo cột dọc
Xin chào các độc giả thân mến của trang blog. Hôm nay chúng ta sẽ nói về các khung trong ngôn ngữ HTML. Rõ ràng là chúng ta sẽ bắt đầu lại từ đầu, cụ thể là đây là loại động vật nào. Chúng ta cũng sẽ nói về hiện tại (Frame) và tương lai (Iframe) của các thành phần này trong ngôn ngữ đánh dấu siêu văn bản Phiên bản hiện tại và trong tiêu chuẩn Html 5 mới với .
Ở cuối bài viết, sau khi mô tả chi tiết quá trình tạo khung nội tuyến và cấu trúc cổ điển của chúng trong Mã HTML(đã hiếm khi được sử dụng), chúng tôi sẽ đề cập đến vấn đề liên quan đến việc xây dựng một trang web trên chúng và cũng thảo luận những cách có thểứng dụng của họ trong khoảng thời gian hiện tại bằng cách sử dụng ví dụ trên blog của tôi.
Nó là gì và Iframe khác với Frame như thế nào?Nó là gì? Hóa ra chúng không chỉ có thể được sử dụng trên các trang web mà còn trong bất kỳ ứng dụng nào cho đến chương trình, nhưng chúng khác nhau ở chỗ cửa sổ của trang web hoặc ứng dụng sẽ được chia thành nhiều khu vực, mỗi khu vực sẽ tải một tài liệu riêng biệt. . Hơn nữa, các vùng khung này hoạt động độc lập với nhau.
Có lẽ ví dụ rõ ràng nhất về việc sử dụng chúng mà hầu hết các bạn đã gặp phải là cái gọi là tệp trợ giúp mà nhiều chương trình được cài đặt trên máy tính của bạn có.
Tệp có menu trợ giúp được tải vào cửa sổ bên trái và tài liệu tương ứng với mục menu đã chọn sẽ được hiển thị trong cửa sổ bên phải. Đáng chú ý là cấu trúc này cho phép bạn không tải lại tệp có menu vào cửa sổ bên trái khi mở tài liệu mới ở cửa sổ bên phải. Đây chính xác là ưu điểm chính của việc sử dụng khung trong HTML.
Trên thực tế, tên của các thành phần này nên được hiểu là một cửa sổ độc lập. Với sự trợ giúp của khung, chúng ta có cơ hội chia một cửa sổ lớn thành nhiều mảnh, từ đó có thể đóng vai trò là bộ thu cho các tài liệu riêng biệt độc lập với nhau (trang, văn bản, hình ảnh, video, v.v.).
Cấu trúc khung được tạo ra trong ngôn ngữ đánh dấu siêu văn bản như thế nào? Nếu chúng ta nói về tiêu chuẩn Html 4.01 (theo phân loại), là tiêu chuẩn chính ở thời điểm hiện tại, thì ba phần tử được sử dụng cho việc này - Frame, Frameset và Noframes.
Iframe - khung tích hợp theo tiêu chuẩn Html 5Nếu chúng ta nói về tiêu chuẩn Html 5 (tương lai của chúng tôi, một số thành phần đã được nhiều trình duyệt hỗ trợ), thì sẽ không có thẻ Frame, Frameset và Noframes, cũng như cấu trúc khung cổ điển, thay vào đó sẽ có một; thẻ Iframe duy nhất (khung nhúng) , mà chúng ta sẽ nói đến ở phần đầu và sau đó chúng ta sẽ chuyển sự chú ý sang sơ đồ cổ điển từ phiên bản 4.01, hiện đang thực sự được sử dụng.
Iframe, không giống như các khung nội tuyến cổ điển được thảo luận dưới đây, không yêu cầu thay thế Thẻ nội dung vào thẻ Frameset. Những thứ kia. thẻ này có thể được chèn vào trang thông thường, ví dụ: bên trong một đoạn văn hoặc bất kỳ nơi nào khác. Về cốt lõi, thành phần này rất giống với thẻ Img mà chúng ta đã xem xét.
Nó là một phần tử nội tuyến có nội dung được thay thế vì nó hoạt động giống hệt một phần tử nội tuyến nhưng hiển thị nội dung bên ngoài không liên quan bên trong nó. Chỉ có bốn phần tử như vậy trong ngôn ngữ HTML - Img, Iframe, Object và Embed. Do đó, anh hùng của chúng tôi ngụ ý sự hiện diện của một tệp bên ngoài sẽ được tải vào một khu vực có kích thước được đặt bằng cách sử dụng các thuộc tính của thẻ này.
Cái đó. Iframe là một phần tử chìm trong đó một đối tượng bên ngoài (chẳng hạn như video) được tải vào. Và để chỉ ra đường dẫn đến tệp này sẽ được tải trên trang, hãy sử dụng thuộc tính Src đặc biệt. Nhưng không giống như Img, phần tử Iframe được ghép nối, tức là. Ngoài ra còn có một thẻ đóng:
TRONG trong ví dụ này hiển thị đầu ra trên trang video Youtube bằng Iframe. Để giới hạn khu vực của khung (cửa sổ) nơi tệp bên ngoài sẽ được tải, các thuộc tính Chiều rộng và Chiều cao được cung cấp, các giá trị của chúng được chỉ định bằng pixel:
Những thứ kia. thẻ này tạo ra một khu vực mà một số đối tượng bên ngoài được tải vào đó (không quan trọng nó đến từ trang web của bạn hay từ một tài nguyên khác). Chiều rộng và chiều cao của khu vực được chỉ định bằng Chiều rộng và Chiều cao, đồng thời thuộc tính Src chỉ định đường dẫn đến đối tượng này.
Phần tử Iframe kế thừa tất cả các thuộc tính này từ các thẻ nội tuyến tương tự có nội dung được thay thế (chẳng hạn như Img đã được đề cập ở trên). Chà, anh ấy cũng đã lấy các thuộc tính Hspace và Vspace từ các bức ảnh, cho phép bạn đặt mức thụt lề từ đường viền của khung thành văn bản bao quanh nó.
Điều quan trọng nữa là việc căn chỉnh khung tích hợp được thực hiện theo cách giống hệt như chúng ta có thể thấy khi nghiên cứu hình ảnh trong Html - . Tương tự Align nhưng đối với thẻ Iframe có các giá trị có thể là Bottom, Top, Middle, Left và Right.
Nhưng phần tử này cũng lấy một số thuộc tính từ thẻ Frame từ cấu trúc khung cổ điển mà chúng ta sẽ nói rất chi tiết bên dưới trong văn bản. Các thuộc tính này bao gồm Tên, giá trị của nó có thể được sử dụng làm giá trị để tài liệu bạn cần khi nhấp vào liên kết sẽ mở ra trong cửa sổ của khung này (đọc thêm bên dưới).
Cũng trong Iframe, thuộc tính Frameborder được di chuyển từ thẻ Frame, chỉ có hai giá trị - 0 (khung xung quanh khung không được hiển thị) hoặc 1 (khung hiển thị). Giá trị mặc định là Frameborder=1, vì vậy để xóa nó bạn cần nhập Frameborder="0":
Thuộc tính Scrolling cũng đã được chuyển từ Frame sang phần tử này, có giá trị mặc định là Auto - các thanh cuộn trong khung sẽ xuất hiện khi cần khi nội dung lớn hơn kích thước của cửa sổ dự định hiển thị nó.
Chà, thuộc tính Marginwidth và Marginheight cũng được chuyển từ phần tử Frame. Chúng sẽ được thảo luận chi tiết bên dưới trong văn bản, nhưng tóm lại - chúng cho phép bạn đặt vết lõm theo chiều rộng và chiều cao từ các cạnh của khung đến nội dung được đặt trong đó.
Như tôi đã đề cập, một ví dụ rõ ràng Việc sử dụng iframe là:
Bằng cách chèn Iframe trực tiếp vào trang web, bạn sẽ nhận được đầu ra của video từ YouTube. Chúng tôi kết luận rằng phần tử này là sự kết hợp giữa các phần tử nội tuyến với nội dung được thay thế và trên thực tế là các khung cổ điển mà bây giờ chúng ta sẽ thảo luận.
Các khung dựa trên thẻ Frame và Frameset - cấu trúc của chúngVì vậy, việc tạo cấu trúc khung cổ điển bắt đầu bằng việc bạn viết bằng mã Html thay vì thẻ Nội dung mở và đóng, thẻ này thường phải có trong bất kỳ tài liệu nào, thay thế nó bằng một vùng chứa dựa trên các phần tử Frameset.
Điểm cơ bản là phần tử Body không thể được sử dụng trong trường hợp này - Body (đối với tài liệu thông thường) hoặc Frameset (khi tạo cấu trúc khung tài liệu):
Mỗi khung mà chúng ta tạo bên trong khung chính được tạo bằng cách sử dụng phần tử Khung riêng biệt. Thẻ này là thẻ duy nhất và trong đó chúng tôi đặt đường dẫn đến tài liệu sẽ được tải vào cửa sổ này.
Yếu tố thứ ba mà chúng ta chưa đề cập đến là Noframes. Nó được ghép nối và cho phép bạn viết một số văn bản bên trong, văn bản này sẽ được trình duyệt xử lý và hiển thị trên trang web chỉ khi trình duyệt này (hoặc thiết bị hiển thị khác) không hỗ trợ khung. Điều này có thể xảy ra, chẳng hạn như nếu bạn đang sử dụng trình duyệt dành cho thiết bị di động.
Thông thường, trong Noframes, họ không chỉ thêm thông tin về tình hình hiện tại không thể xử lý cấu trúc khung mà còn thêm khả năng truy cập các trang khác nơi bạn có thể tiếp tục làm việc mà không cần sử dụng chúng. Thật khó để nói bất cứ điều gì khác về anh ấy, vì vậy hãy tiếp tục.
Hóa ra phần tử Frameset, được sử dụng thay cho thẻ Body, chiếm toàn bộ không gian được phân bổ cho khu vực xem và các khung sẽ được tạo bên trong khu vực này bằng cách sử dụng các phần tử Frame riêng lẻ. Về vấn đề này, câu hỏi được đặt ra - làm thế nào để phân chia khu vực xem giữa các cửa sổ riêng biệt hay nói cách khác là làm thế nào để đặt kích thước của từng cửa sổ.
Điều này được thực hiện bằng cách thêm các thuộc tính thích hợp vào phần tử Frameset. Có hai trong số đó - Cols và Rows. Cols thiết lập việc phân chia một cửa sổ lớn thành các khung hoặc cột dọc và Rows cho phép bạn chia nó thành các cửa sổ hoặc hàng ngang.
Tạo cấu trúc dựa trên Frameset và các thuộc tính Cols và Rows của nóLà giá trị cho Cols và Rows Thẻ HTML và Frameset là các số cách nhau bằng dấu phẩy (không có dấu cách). Những con số này đặt ra tỷ lệ của các cửa sổ mà chúng ta muốn có được. Vì vậy, dù viết Cols hay Rows bao nhiêu cách nhau bằng dấu phẩy thì số khung mà chúng ta có sẽ là kết quả.
Ví dụ: sử dụng ký hiệu này, chúng ta sẽ có ba cột dọc có chiều rộng tương ứng với tỷ lệ 2:5:3.
Vì chúng ta đã đặt tỷ lệ cho ba khung, nên chúng ta sẽ phải bao gồm ba thành phần Khung giữa thẻ Frameset mở và đóng, ngay cả khi không chỉ định các thuộc tính bổ sung:
Kết quả là, cấu trúc khung của chúng tôi, bao gồm ba cửa sổ trống, sẽ trông như thế này:
Trong ví dụ này, chúng tôi đặt kích thước cửa sổ (Khung) bằng cách sử dụng tỷ lệ phần trăm, được lấy từ chiều rộng của vùng xem (đây là trường hợp khi sử dụng Cols) hoặc từ chiều cao của nó (Hàng). Khi thay đổi khu vực xem phần trăm giữa các kích thước khung hình sẽ được giữ nguyên. Nhưng thay vì tỷ lệ phần trăm, bạn cũng có thể sử dụng những con số đơn giản có ý nghĩa. Ở đây, tôi nghĩ, cũng không có khó khăn gì trong việc hiểu biết.
Nhưng cũng có một tùy chọn khá bất thường trong ký hiệu kích thước, trông giống như dấu hoa thị “*”. Hơn nữa, nó có thể chỉ là “*” hoặc dấu hoa thị có số ở phía trước, ví dụ: “3*”. Một điều thông minh rất giống với tỷ lệ phần trăm và có nghĩa là chúng ta chia không gian cho Frame theo tỷ lệ.
Hãy xem một ví dụ. Bây giờ hãy chọn chia khung nhìn thành các hàng ngang bằng Hàng:
Mục này có ý nghĩa gì? Toàn bộ khu vực xem có sẵn cho chúng ta theo chiều dọc sẽ được chia thành ba dòng. Chiều cao của dòng đầu tiên sẽ được lấy ở mức 200 pixel, dòng thứ hai - ở mức 500, nhưng dòng thứ ba sẽ chiếm toàn bộ không gian còn lại về chiều cao, bởi vì “*” đã được sử dụng làm kích thước của nó.
Điều đáng chú ý là các giá trị “*” và “1*” có nghĩa giống nhau - chúng tôi chia tất cả không gian còn lại thành một và cung cấp một phần này cho khung này (nghĩa là tất cả không gian còn lại).
Nhưng hãy xem điều gì sẽ xảy ra nếu bạn sử dụng giá trị “*” với một số để chia theo tỷ lệ:
Bạn nghĩ kích thước của Khung trong trường hợp này sẽ như thế nào? Rõ ràng dòng thứ hai chắc chắn sẽ có chiều cao 100 pixel. Nhưng không gian còn lại sẽ được phân chia theo chiều cao như thế nào giữa hàng thứ ba và hàng đầu tiên?
Việc tính toán khá dễ dàng - chỉ cần cộng bốn (4*) với hai (2*) và chia cho mẫu số này (hãy nhớ các phân số từ chương trình giáo dục) hai và bốn. Những thứ kia. chúng ta nhận được rằng cột đầu tiên có khung sẽ chiếm một phần ba không gian còn lại về chiều cao và cột thứ ba sẽ chiếm hai phần ba. Hay nói cách khác, cái thứ ba sẽ cao gấp đôi cái thứ nhất:
Bạn có thể sử dụng cả ba cách để định kích thước cửa sổ khung trong một thuộc tính, ví dụ:
Kết quả là, chúng ta sẽ có được cột Khung đầu tiên có chiều rộng bằng 10% toàn bộ khu vực có sẵn, cột thứ hai - 100 pixel và ba cột còn lại sẽ có chiều rộng theo tỷ lệ bốn, ba và hai phần chín của không gian chiều rộng còn lại. Vì vậy, mọi thứ đều đơn giản và rõ ràng.
Nếu bạn muốn chia cửa sổ chính không chỉ thành các khung ngang và dọc mà còn thành các kết hợp của chúng, thì bạn có thể sử dụng cấu trúc lồng nhau của các phần tử Frameset riêng biệt cho các cột và riêng cho các hàng. Ví dụ: để có được cấu trúc hiển thị trong ảnh chụp màn hình bên dưới, chỉ cần sử dụng cấu trúc sau:
Những thứ kia. trước tiên, chúng tôi sử dụng “frameset cols=”20%,80%”“ để chia tất cả không gian có sẵn thành hai cột theo chiều dọc và đặt nội dung của cột bên phải bằng thẻ “frame”, nhưng thay vì thêm phần tử “frame” đối với cột bên trái, chúng tôi mở một “bộ khung hàng =“10%,*”” mới.
Và với sự trợ giúp của nó, chúng tôi chia cột bên phải thành hai dòng có khung, nội dung của chúng được đặt bằng cách sử dụng hai thẻ “frame”, sau đó chúng tôi đóng cả hai vùng chứa “frameset”. Mọi thứ đều đơn giản và hợp lý.
Chỉ định đường dẫn trong thuộc tính Src của phần tử FrameNhưng tất cả chúng ta đều nói về phần tử Frameset cũng như các thuộc tính Cols và Rows của nó, với sự trợ giúp của chúng, chúng ta hình thành cấu trúc và đặt kích thước của chúng. Bây giờ hãy tìm cách hiển thị các tài liệu cần thiết trong các khung được yêu cầu và cách định cấu hình tương tác giữa các cửa sổ của chúng.
Vậy chúng ta quản lý ngoại hình như thế nào? cửa sổ đã tạo? Tất cả điều này được chứa trong các thuộc tính của thẻ Frame. Điều đáng nói đầu tiên là Src. Chúng tôi đã gặp anh ấy ở gắn thẻ hình ảnh khi chúng tôi xem xét việc chèn hình ảnh vào mã Html. Bản chất của nó không thay đổi và nó vẫn cho phép bạn chỉ định đường dẫn đến tài liệu sẽ được tải vào khung.
Đường dẫn đến tài liệu trong Src có thể được chỉ định là . Đường dẫn tương đối thường được sử dụng cho tài liệu nằm trên tài nguyên của riêng bạn, nhưng bạn sẽ cần đường dẫn tuyệt đối khi muốn tải tài liệu từ một trang khác vào cửa sổ khung.
Nếu thuộc tính Src không được chỉ định cho biết đường dẫn đến tài liệu cần thiết, sau đó cửa sổ sẽ được tải tài liệu trống. Cá nhân tôi đã từng làm điều tương tự cho blog của mình (như yếu tố bổ sung Navigation) và đồng thời được tạo trên máy chủ lưu trữ thư mục riêngđối với nó, tôi đặt ở đó không chỉ một tệp Html có cấu trúc khung (mà tôi gọi là index.html), mà còn tất cả các tài liệu được tải vào các cửa sổ khác nhau, cũng như các tệp hình ảnh được sử dụng làm nền.
Vì vậy, cách dễ nhất đối với tôi là sử dụng liên kết tương đối trong thuộc tính Src của thẻ Frame:
Điều đáng chú ý là nếu bạn thay thế tất cả các liên kết được đưa ra trong mã này từ tương đối thành tuyệt đối (chẳng hạn như https://site/navigator/joomla.html) và mở tệp này trong trình duyệt thì các tài liệu được chỉ định trong Frame sẽ được tải từ máy chủ của tôi và bạn sẽ thấy hình ảnh tương tự trong trình duyệt của mình. Hơn nữa, việc tệp của bạn có cấu trúc khung (index.html) sẽ được đặt ở đâu không quan trọng - trên máy tính của bạn hoặc trên máy chủ lưu trữ.
Trong ví dụ trong hình, một trang có menu nhất định, là menu thông thường, được tải vào cửa sổ của khung bên trái. Nhưng điều quan trọng không phải là menu được hình thành như thế nào mà là điều gì sẽ xảy ra sau khi nhấp vào bất kỳ liên kết nào của nó.
Nếu bạn làm điều này, thì mọi thứ sẽ diễn ra chính xác như bình thường - tài liệu sẽ mở ở cửa sổ phía dưới bên phải. Nhưng để làm được điều này tôi đã phải sử dụng một một mẹo nhỏ, bởi vì trong phiên bản mặc định, tài liệu đã mở toàn bộ kích thước của cửa sổ, thay thế cấu trúc khung mà tôi hoàn toàn không cần vì nó đã biến mất Chức năng điều hướngở khung bên trái và trên cùng.
Cách mở tài liệu qua link trong khungVì vậy, khi nói về siêu liên kết, chúng tôi đã đề cập đến thuộc tính thẻ “A” là Target=_blank. Bạn có nhớ nó dùng để làm gì không? Việc mở tài liệu được liên kết trong một cửa sổ mới là đúng. Theo mặc định, nó sẽ mở trong cùng một cửa sổ, tương đương với target="_self".
Nhưng khả năng của Target không dừng lại ở đó. Hóa ra là bạn có thể thêm một giá trị vào nó dưới dạng tên khung, giá trị này đã được chỉ định trước đó trong thuộc tính Tên đặc biệt của thẻ Khung. Khi đó, tài liệu qua liên kết này sẽ không mở trong cùng một cửa sổ, chiếm toàn bộ không gian của nó mà trong Khung bạn đã chỉ định. Rõ ràng? Nếu không hoàn toàn thì bây giờ mọi chuyện sẽ trở nên rõ ràng khi chúng ta phân tích ví dụ.
Vì vậy, hãy quay lại ví dụ của chúng tôi được hiển thị trong hình trên. Chúng ta cần mở các trang bằng liên kết từ cửa sổ bên trái ở khung phía dưới bên phải (lớn). Do đó, trước tiên bạn cần đặt tên cho cửa sổ lớn này bằng thuộc tính Name trong thẻ Frame.
Họ đã làm ra nó và gọi nó là “ktona”. Bây giờ bạn có thể mở tệp được tải dưới dạng menu trong cửa sổ bên trái một cách an toàn và thêm thuộc tính Target="ktona" vào tất cả các thẻ A trong đó:
Lịch sử của Joomla và thành phần VirtueMart
Tất nhiên, bằng cách sử dụng công cụ tìm kiếm và thay thế, sẽ không khó để đặt nó xuống cho tất cả các siêu liên kết, nhưng tại sao lại tải mã một cách không cần thiết khi chúng ta có cơ hội tuyệt vời để sử dụng thẻ Base đặc biệt mà chúng tôi đã đề cập trong phần trước. bài viết về siêu liên kết, khi họ nói về việc sử dụng mục tiêu trống.
Chỉ cần đặt phần tử target="ktona" cơ sở giữa thẻ Head mở và đóng là đủ và tất cả các liên kết trong mã Html của tài liệu này sẽ mở các trang mới trong khung được chỉ định gọi là "ktona":
Nhân tiện, nếu chúng ta lấy công cụ hiện có của tôi làm ví dụ, thì chúng ta vẫn cần đảm bảo rằng tất cả các liên kết từ cửa sổ ngang trên cùng đều mở các trang của chúng trong khung dọc bên trái, đóng vai trò là menu bên trái của tôi. Cần phải làm gì cho việc này?
Chà, trước tiên, bạn cần đặt tên cho khung dọc bên trái:
Và trong tệp được tải vào cửa sổ trên cùng (gor.html), bạn cần thêm phần tử target="gor" cơ sở:
Thế là xong, bây giờ chúng ta đã làm đúng mọi việc. Tất cả các tài liệu theo các liên kết từ khung trên cùng sẽ mở trong cửa sổ bên trái và tất cả các liên kết từ đó sẽ mở các tài liệu ở Khung trung tâm và lớn nhất. Theo tôi, mọi thứ đều đơn giản và hợp lý.
Thuộc tính thẻ khung để tùy chỉnh giao diện của cửa sổBây giờ chúng ta hãy xem những thuộc tính nào ngoài Src và Name có thể được sử dụng trong thẻ Frame để tùy chỉnh giao diện của khung. Hãy bắt đầu với Cuộn. Sử dụng nó, chúng ta có thể định cấu hình hiển thị thanh cuộn cho từng cửa sổ trong cấu trúc khung của bạn một cách riêng biệt.
Tính năng cuộn có giá trị mặc định là Auto - trình duyệt sẽ tự động quyết định, dựa trên kích thước của tài liệu được tải vào khung, có hiển thị thanh cuộn hay không. Nếu tài liệu không hoàn toàn vừa với cửa sổ, một thanh cuộn sẽ xuất hiện, cho phép bạn xem toàn bộ đến cuối.
Bạn cũng có thể sử dụng các giá trị Có (thanh cuộn trong cửa sổ sẽ luôn được hiển thị, ngay cả khi tài liệu hoàn toàn vừa với nó) và Không (thanh cuộn sẽ không bao giờ xuất hiện, ngay cả khi một phần của tài liệu không vừa) làm giá trị cho Scrolling.
Trong công cụ hiện có của mình, tôi đã sử dụng giá trị mặc định là Tự động và thanh cuộn trong khung xuất hiện khi cần:
Thuộc tính tiếp theo của thẻ Frame, Noresize, là một thuộc tính duy nhất (nó không có giá trị). Bằng cách đăng ký nó, do đó bạn sẽ cấm thay đổi kích thước của nó, điều này được thực hiện theo mặc định kéo và thả đơn giản viền khung bằng chuột.
Khi di chuyển con trỏ chuột đến đường viền bạn sẽ thấy con trỏ biến thành mũi tên hai đầu và lúc này bạn hãy nhấn vào nút trái chuột, bạn có thể di chuyển đường viền theo ý muốn. Noresize áp đặt lệnh cấm đối với hành vi cố ý này (khi bạn di chuyển con trỏ chuột đến viền cửa sổ, bạn sẽ không còn thấy mũi tên hai chiều nữa).
Một thuộc tính trực quan khác là Frameborder. Sử dụng nó, bạn có thể chỉ định có vẽ khung (đường viền) giữa các khung hay không vẽ. Frameborder chỉ có thể có hai giá trị có thể - 0 (không vẽ khung) hoặc 1 (hiển thị đường viền). Tất nhiên, giá trị mặc định là 1.
Có một sự tinh tế. Nếu bạn muốn xóa đường viền hiển thị, thì bạn sẽ phải thêm Frameborder=0 vào tất cả các thẻ Frame của các khung mà bạn muốn xóa đường viền hiển thị ở giữa.
Chà, chúng ta vẫn phải xem xét một vài thuộc tính của thẻ Frame - Marginwidth và Marginheight, đặt lề theo chiều rộng (phải và trái) và chiều cao (trên và dưới) từ viền của cửa sổ đến nội dung được tải vào đó (số có nghĩa là số pixel của lề):
Chúng ta hãy xem nhược điểm cơ bản của các cấu trúc cổ điển là gì, về cơ bản khiến chúng không được sử dụng khi tạo một trang web. Nó nằm ở chỗ không thể theo dõi trạng thái của nó bằng cấu trúc khung này.
Các cấu trúc phức tạp có thể có hàng nghìn trạng thái khác nhau (các biến thể của tài liệu được mở trong các cửa sổ khung khác nhau), nhưng địa chỉ Url của chính cấu trúc này không thay đổi. Vì điều này, sẽ không thể sử dụng dấu trang của trình duyệt hoặc gửi liên kết đến các trang bạn thích cho người dùng khác. Tại sao?
Bởi vì địa chỉ không thay đổi ngay cả khi mở nó từ dấu trang trình duyệt hoặc từ email E-mail, bạn sẽ nhận được một trang có trạng thái bắt đầu của cấu trúc khung chứ không phải trạng thái bạn muốn lưu.
Tất nhiên, mặc dù vấn đề này có thể được giải quyết nhưng nó không còn sử dụng HTML, nhưng với sự trợ giúp của máy chủ (ví dụ: Php) hoặc ngôn ngữ lập trình máy khách (JavaScript) và các giải pháp này sẽ không hiệu quả một trăm phần trăm. Về bản chất, các giải pháp như vậy cho phép bạn thêm vào địa chỉ url cấu trúc khung dữ liệu bổ sung về trạng thái hiện tại của nó, nhưng điều này không dễ thực hiện và độ tin cậy sẽ không tuyệt đối.
Đây là nhược điểm đầu tiên của việc sử dụng khung để tạo trang web và là nhược điểm rất quan trọng, nhưng còn có một nhược điểm rất lớn khác. Tất nhiên, các công cụ tìm kiếm từ lâu đã học cách lập chỉ mục và trích xuất từ chúng địa chỉ của những tài liệu được tải vào cửa sổ của chúng. Vấn đề là khác nhau.
Khi người dùng điều hướng từ kết quả tìm kiếm Yandex hoặc Google vào trang web của bạn được xây dựng trên cơ sở cấu trúc khung, sau đó chỉ tài liệu được tải vào một trong các khung sẽ mở chứ không phải toàn bộ cấu trúc. Bạn có hiểu tôi đang nói về điều gì không?
Người dùng sẽ xem tài liệu và sẽ không thấy điều hướng trên trang web của bạn vì nó sẽ được bảo vệ trong các cửa sổ khác và chúng chỉ được tải như một phần của toàn bộ cấu trúc.
Kết quả là, một trang web được xây dựng trên khung sẽ trở nên không thể sử dụng được. Mặc dù, một lần nữa, có các giải pháp cho vấn đề này dựa trên tập lệnh máy chủ, khi việc chuyển hướng sẽ được thực hiện từ địa chỉ của từng tài liệu đến cấu trúc khung nằm trong trong điều kiện phù hợp, nhưng một lần nữa điều này rất khó và không phải lúc nào cũng đáng tin cậy.
Nói chung, kết luận có thể được rút ra một cách rõ ràng - không cần thiết phải tạo trang web trên khung. Nhưng chúng thường xuyên được sử dụng để tạo ra sự trợ giúp cho Các ứng dụng khác nhau và một số điều nhỏ khác có thể có ích.
Ví dụ: tôi đã tạo một cấu trúc khung mà tôi gọi là “Bộ điều hướng” (hiện tại nó đã tạm thời bị xóa) và cấu trúc này đã trở thành một loại menu bên ngoài mở rộng cho blog của tôi, mà theo tôi, có vẻ như sẽ đơn giản hóa việc làm việc với tài nguyên và do đó, việc cải thiện câu “không vô nghĩa” có ảnh hưởng rất rất mạnh mẽ đến việc quảng bá trang web.
Tuy nhiên, để tránh bất kỳ sự cố nào với công cụ tìm kiếm, tôi đã đóng toàn bộ cấu trúc khung này khỏi chế độ xem và cũng để đề phòng, đã thêm thẻ meta Rodots vào tất cả các tệp Html của nó, cấm lập chỉ mục của chúng:
JOOMLA
Nhưng tất cả những hạn chế này chỉ áp dụng cho các cấu trúc trên thẻ Frame và Frameset, đồng thời các khung tích hợp trên thẻ Iframe không có bất kỳ hạn chế rõ ràng nào và chúng có thể và thậm chí nên được sử dụng trong các dự án của bạn, ít nhất là để chèn video từ YouTube.
Chúc bạn may mắn! Trước hẹn sớm gặp lại trên các trang của trang blog
Bạn có thể xem thêm video bằng cách vào ");">
Bạn có thể quan tâm
Chỉ thị nhận xét và Doctype trong mã Html, cũng như khái niệm về các phần tử khối và nội tuyến (thẻ) 
Nhúng và đối tượng - Thẻ Html để hiển thị nội dung đa phương tiện (video, flash, âm thanh) trên các trang web 
Img - Thẻ Html để chèn ảnh (Src), căn chỉnh và ngắt dòng văn bản xung quanh ảnh (align), cũng như đặt nền (background)
Mặc dù thực tế là các trang web có khung ngày càng hiếm, việc học HTML sẽ không đầy đủ nếu không xem xét chủ đề về khung. Ngoài ra, theo một nghĩa nào đó, các khung đã chiếm lĩnh vị trí thích hợp của chúng và được sử dụng cho các hệ thống quản trị và trợ giúp. Trường hợp những nhược điểm của khung không đặc biệt quan trọng, nhưng ngược lại, những ưu điểm lại được yêu cầu tích cực.
Để tạo khung, thẻ được sử dụng, thẻ này thay thế thẻ trong tài liệu và dùng để chia màn hình thành các vùng. Bên trong thẻ này có các thẻ trỏ đến tài liệu HTML dự định được tải vào khu vực này (Hình 13.1).
Cơm. 13.1. Ví dụ về chia cửa sổ trình duyệt thành hai khung
Khi sử dụng khung, bạn cần ít nhất ba tệp HTML: tệp đầu tiên xác định cấu trúc khung và chia cửa sổ trình duyệt thành hai phần và hai tài liệu còn lại tải vào các cửa sổ được chỉ định. Số lượng khung hình không nhất thiết phải bằng hai, có thể nhiều hơn nhưng không ít hơn hai, nếu không ý nghĩa của việc sử dụng khung hình sẽ mất hoàn toàn.
Hãy xem xét các giai đoạn tạo khung dựa trên trang được hiển thị trong Hình. 13.1. Chúng ta sẽ cần ba tệp: index.html - xác định cấu trúc của tài liệu, menu.html - được tải vào khung bên trái và content.html - được tải vào khung bên phải. Trong số này, chỉ có index.html khác nhau về cấu trúc mã của nó so với các tệp khác (ví dụ 13.1).
Ví dụ 13.1. Tệp Index.html
Khung
Nếu sử dụng khung, loại tài liệu sau sẽ được viết ở dòng mã đầu tiên.
Điều này cho trình duyệt biết rằng nó đang xử lý các khung; dòng mã này là bắt buộc. Thùng chứa chứa thông tin điển hình như mã hóa trang và tiêu đề tài liệu. Chỉ cần lưu ý rằng tiêu đề vẫn giữ nguyên miễn là tệp HTML được mở bên trong khung.
Trong ví dụ này, cửa sổ trình duyệt được chia thành hai cột bằng thuộc tính cols, Cột bên trái chiếm 100 pixel và ảnh bên phải chiếm không gian còn lại, được cho bằng ký hiệu các ngôi sao. Chiều rộng hoặc chiều cao của khung cũng có thể được đặt theo tỷ lệ phần trăm, tương tự như bảng.
Thẻ chỉ định tên của tệp HTML được tải vào vùng được chỉ định bằng cách sử dụng thuộc tính src. Một tệp có tên menu.html sẽ được tải vào cửa sổ bên trái (Ví dụ 13.2) và content.html sẽ được tải vào cửa sổ bên phải (Ví dụ 13.3). Nên đặt cho mỗi khung một tên duy nhất để tài liệu có thể được tải vào cửa sổ được chỉ định bằng thuộc tính tên.
Ví dụ 13.2. Menu tệp.html
Điều hướng Trang web
Trong ví dụ này Nền màu xám trên trang được đặt bằng cách sử dụng các kiểu, sẽ được thảo luận sau.
Ví dụ 13.3. Nội dung tệp.html
Nội dung trang web
NỘI DUNG
Hãy xem xét thêm ví dụ phức tạpđã có ba khung hình (Hình 13.2).
Cơm. 13.2. Chia một trang thành ba khung
TRONG trong trường hợp này thẻ được sử dụng lại nhưng hai lần, với một thẻ được lồng trong thẻ kia. Phân vùng theo chiều ngang được tạo thông qua thuộc tính row, trong đó ký hiệu phần trăm được sử dụng cho sự đa dạng (Ví dụ 13.4).
Ví dụ 13.4. Ba khung
Khung
Như bạn có thể thấy trong ví dụ này, một vùng chứa có thuộc tính row trước tiên sẽ tạo hai khung ngang, nhưng thay vì khung thứ hai, một khung khác được thay thế, lặp lại cấu trúc mà bạn đã biết từ ví dụ 13.1. Để ngăn thanh cuộn dọc xuất hiện và người dùng không thể thay đổi kích thước của khung trên cùng một cách độc lập, các thuộc tính cuộn = "không" và noresize đã được thêm vào.
Vậy khung... chúng dùng để làm gì và mang lại lợi ích gì? Tôi sẽ cố gắng nói về điều này trong chương này, và tất nhiên là về cách triển khai và làm việc với chúng..
Thông thường, khi tạo một trang web, cần phải mở nhiều tài liệu HTML cùng lúc trong một cửa sổ trình duyệt... do đó, các khung được tạo để xác định vùng làm việc cho từng tài liệu. Hơn nữa, các khung được công cụ tốt, nhờ đó bạn có thể thực hiện bố cục trang, chúng đóng vai trò như một “sự thay thế” xứng đáng phương pháp bảng bố cục trang.. Tôi đặt từ “thay thế” trong dấu ngoặc kép vì đây là một cách xây dựng trang web hoàn toàn khác với những ưu điểm và nhược điểm riêng và khá khó để so sánh nó với cách xây dựng trang web quen thuộc cho đến nay.. nhưng điều đầu tiên trước tiên ..
Hãy bắt đầu nhé? Giả sử chúng ta cần mở ba tài liệu HTML cùng một lúc trong một cửa sổ trình duyệt và sắp xếp chúng, chẳng hạn như sau:
Chúng ta cần gì cho việc này? Tất nhiên, để bắt đầu, chúng ta cần tạo ba html riêng biệt tài liệu mà chúng tôi thực sự sẽ mở trong một cửa sổ. hình ảnh đồ họa và sẽ hoạt động như một biểu tượng, hãy gọi nó là logotype.html, tài liệu thứ hai sẽ có một số nội dung... hãy gọi nó là menu.html và tài liệu thứ ba có một loạt văn bản. văn bản.html. Tất nhiên, bạn có thể nghĩ ra tên riêng của mình, cũng như nội dung tài liệu, nhưng bây giờ tốt hơn là sao chép tên của tôi... sẽ thuận tiện hơn cho cả tôi và bạn.
Vì vậy, có ba tệp logotype.html, menu.html và text.html.. mà chúng ta cần đặt dưới một mái nhà, nhưng chúng ta chưa có mái nhà..
Chúng tôi viết “mái nhà”, tài liệu chính mà chúng tôi sẽ kết nối các tệp của mình. Vì nó sẽ là cái chính nên chúng tôi đặt tên cho nó là index.html.
khung
Đây là cấu trúc của tài liệu quen thuộc với chúng tôi mà chúng tôi đã nghiền ngẫm ngay từ đầu quá trình đào tạo. Khung phá vỡ các khuôn mẫu hiện có! Cấu trúc của khung tài liệu trông như thế này:
khung
Sự vắng mặt của một thẻ bù đắp thẻ mới- cài đặt một khung hoặc một bộ khung... với anh chàng này, chúng tôi thực sự sẽ làm việc xa hơn.
Thẻ có thuộc tính row và cols - những thuộc tính này cho trình duyệt biết cách đặt khung trong cửa sổ trình duyệt
hàng - cột ngang - chiều dọc
Trong trường hợp của chúng tôi, chúng tôi cần đặt các khung theo chiều ngang... vì vậy chúng tôi viết như thế này:
khung
Tỷ lệ phần trăm sau dấu bằng không gì khác hơn là kích thước của các cửa sổ khung của chúng ta trong một cửa sổ trình duyệt lớn; chúng ta phải đặt ba cửa sổ - do đó, cũng có ba giá trị được phân tách bằng dấu phẩy. Hãy nhớ cách chúng ta đặt kích thước ô cho bảng, nguyên tắc tương tự cũng được áp dụng ở đây Giống như trong trường hợp ô của bảng, kích thước khung có thể được chỉ định dưới dạng phần trăm của tổng diện tích và tính bằng pixel.
Dưới đây là một số ví dụ viết:
- mục nhập này cho biết rằng sẽ có ba cửa sổ nằm ngang, trong đó cửa sổ cuối cùng sẽ chiếm 70% diện tích cửa sổ trình duyệt và hai cửa sổ đầu tiên sẽ chiếm 15%.
- ở đây ba cửa sổ được đặt theo chiều dọc, chiều rộng của cửa sổ này được biểu thị bằng pixel.
- mục nhập như vậy có nghĩa là cửa sổ thứ nhất và thứ ba sẽ có chiều rộng lần lượt là 100 và 180 pixel và khung hình thứ hai sẽ chiếm toàn bộ diện tích còn lại.
Chúng ta đã hoàn tất việc đặt các tài liệu, bây giờ tất cả những gì còn lại là kết nối chúng và tận hưởng thành quả đầu tiên..
Thẻ và thuộc tính src của nó sẽ chỉ cho trình duyệt đường dẫn đến tài liệu html cần được mở trong khoảng trống được cung cấp cho nó. Chúng tôi có ba tài liệu riêng biệt logotype.html, menu.html và text.html, bây giờ chúng tôi cần chỉ định đường dẫn cho mỗi tài liệu, đó là những gì chúng tôi thực sự làm. (Tôi giả sử rằng bạn có tất cả bốn tệp trong cùng một thư mục và đường dẫn đến chúng có nhiều mục nhập đơn giản kiểu: )
Tệp Index.html
khung
Tệp logotype.html
khung
Menu tệp.html
khung
Thực đơn:
Súp nấm
Đậu trong nồi, kiểu Ý
Salad mùa hè của Úc
... ... ...
Tệp văn bản.html
khung
Súp nấm
rất nhiều văn bản ..
Trong ví dụ này, tôi đã đăng tất cả bốn tài liệu HTML trong đó index.html là tài liệu chính và ba tài liệu còn lại là các trang plug-in, về nguyên tắc, mỗi trang có thể hoạt động độc lập và chứa mọi thứ, hình ảnh, bảng, văn bản, liên kết .. Tôi đã làm điều này nhằm giúp bạn hiểu về nguyên tắc làm việc với các khung. Trong các ví dụ khác, tôi sẽ chỉ đăng tệp head có khung (nếu không tất cả chúng đều chiếm quá nhiều dung lượng trên trang) và bạn biết rằng tôi có “ở đâu đó ngoài kia” tất cả các tệp khác chứa đồ họa, văn bản, có thể là thứ gì đó nếu không thì.. à, đừng tụt lại phía sau tôi, hãy từ từ chỉnh sửa trang của riêng bạn cho trang đào tạo trong tương lai.. Tôi không biết bạn sẽ viết về cái gì, nhưng tôi đã hứa sẽ giúp một cô gái viết một trang web chuyên dụng để nấu ăn..)) nên tôi quyết định, có thể nói, nhắm vào hai con chim bằng một hòn đá.. cô gái thỏ và trang web..)) đại loại như thế này..))
Trong ví dụ trên, chúng tôi đã sắp xếp tất cả các cửa sổ theo chiều ngang; bằng cách thay đổi thuộc tính row thành cols, bạn có thể sắp xếp chúng theo thứ tự dọc. Nhưng nếu bạn cần đặt cửa sổ của chúng tôi thì sao?
như thế này?: hay như thế này?: hay thậm chí như thế này?:
Có một lối ra. Hãy xem xét các ví dụ.
Hãy bắt đầu với trường hợp đầu tiên... chúng ta thấy gì? Và chúng ta thấy hai dòng, trong đó dòng thứ hai được chia thành hai cột.
Và bây giờ, theo thứ tự:
- chia cửa sổ trình duyệt thành hai dòng- tải logo của chúng tôi ở dòng đầu tiên
- và chia hàng thứ hai thành hai cột
- ở phần đầu tiên sẽ có một menu
- và trong phần thứ hai có rất nhiều văn bản
- đóng thẻ chia cột
- đóng thẻ chia dòng
Nói chung, nói cột và hàng là không chính xác, vì các khung không liên quan gì đến các bảng ngoài sự giống nhau về mặt hình ảnh; nói khung ngang và khung dọc là đúng.. à, tôi đang nói theo cách này để nó sẽ như vậy. rõ ràng hơn với bạn..
Được rồi, hãy xem một ví dụ:
khung
Trong trường hợp thứ hai, chúng ta có hai cột trong đó cột thứ hai được chia thành hai dòng, vì vậy chúng ta sẽ viết như sau:
- chia cửa sổ thành hai cột- cái đầu tiên sẽ chứa nội dung
- và chia dòng thứ hai thành hai dòng
- Logo
- và văn bản chính
- đóng đường phân chia
- đóng việc chia thành các cột
khung
Trường hợp thứ ba phức tạp hơn một chút, nhưng bạn không nên sợ nó... đặc biệt là vì cá nhân tôi đã chọn kiểu xây dựng này cho một trang web về nghệ thuật ẩm thực. Tôi sẽ giải thích lý do bên dưới. Chúng ta có gì? ba cột và cột thứ hai về cơ bản chứa trường hợp đầu tiên của chúng tôi..
- chia cửa sổ thành ba cột (lưu ý cột thứ hai chiếm đúng 800 pixel và hai cột bên ngoài không có kích thước chính xác và sẽ chia không gian còn lại làm đôi)-trong cột đầu tiên, chúng tôi tải một tài liệu html sẽ thực hiện chức năng trang trí thuần túy
-
-
- Trong cột thứ hai, chúng tôi chèn “trường hợp đầu tiên”
-
-
-
-
- trong cột thứ ba, chúng tôi tải cùng một tệp có đồ trang trí
- sập
Hãy xem ví dụ và sau đó tôi sẽ giải thích lý do tại sao tôi chọn đường dẫn năm cửa sổ
khung
Vậy tại sao lại có năm cửa sổ? Tôi nhớ rằng tôi đã viết về sự thật rằng người dùng khác nhau Internet trên màn hình được đặt ở các độ phân giải khác nhau và theo đó, màn hình khác nhau trang web của chúng tôi sẽ trông khác.. và nếu không kích thước cụ thể Tất cả hình ảnh, văn bản, bảng biểu của chúng tôi sẽ “nổi” đối với những người dùng có độ phân giải màn hình khác với màn hình của bạn. Khi chúng tôi bố trí trang web bằng bảng, vấn đề về kích thước trang đã được giải quyết bằng cách chỉ định chiều rộng và chiều cao cụ thể cho bảng này, thật không may, điều này không thể thực hiện được với khung... ngay cả khi bạn chỉ định chiều rộng của khung không có trong đó; tỷ lệ phần trăm, nhưng tính bằng pixel, đây vẫn là cột cuối cùng sẽ trải dài trên chiều rộng còn lại của cửa sổ trình duyệt và trang, như người ta nói, sẽ mất “diện mạo có thể bán được trên thị trường”. Vậy chúng ta nên làm gì? Chúng ta phải sử dụng các thủ thuật nhỏ... Bằng cách đặt cột trung tâm (trong đó chúng tôi thực sự có toàn bộ trang) với kích thước 800 pixel, chúng tôi xác định một lần và mãi mãi chiều rộng của nó cũng như các cột thứ nhất và thứ ba không thứ nguyên, trong Ngoài tác dụng trang trí, chúng còn đóng vai trò như một loại “lò xo” trên cột trung tâm.. Vì vậy, đối với những người có độ phân giải màn hình nhỏ, các cửa sổ/trường này sẽ bị thu hẹp và đối với những người có độ phân giải cao rộng, vì vậy cột trung tâm sẽ không bị hư hỏng dưới bất kỳ hình thức nào và giờ đây chúng ta có thể hoàn toàn tự tin đặt bất kỳ đồ vật nào vào đó, với tham chiếu vị trí chính xác mà không phải lo lắng về số phận tương lai của chúng. So sánh ví dụ đầu tiên, nơi có ba cửa sổ và ví dụ thứ ba, nơi đã có năm cửa sổ, chẳng phải tốt hơn sao?
Chúng ta sẽ kết thúc với vị trí và kích thước của khung hình... và chúng ta đã bị kẹt ở đây một thời gian dài... hãy tiếp tục.
Chúng tôi mang lại cho các khung hình một diện mạo gọn gàng.Trong ví dụ cuối cùng của chúng tôi, điều đầu tiên thu hút sự chú ý của bạn là một loạt các thanh cuộn, ở đó có những nơi cần thiết và không cần thiết.. Hãy loại bỏ chúng đi, bạn có thể để chúng ở đâu đó.. Việc này được thực hiện bằng cách sử dụng thuộc tính cuộn - thẻ, nó có thể có một trong ba nghĩa:
- KHÔNG
- có - luôn hiển thị,
- tự động
khung
Lề khung hoặc nói cách khác là khoảng cách từ ranh giới khung đến văn bản hoặc hình ảnh, như trong trường hợp của chúng tôi, được đặt bằng pixel bằng cách sử dụng thuộc tính chiều rộng lề và chiều cao lề của thẻ
khung
Hãy nói một chút về khung xung quanh các khung của chúng ta.
Nếu bạn nhận thấy, trong ví dụ trước, bằng cách di con trỏ qua đường viền của khung, tức là con trỏ sẽ có một diện mạo khác (nắm và di chuyển) và bây giờ đường viền này có thể được kéo theo bất kỳ hướng nào trong khi giữ phím trái Bẫy chuột. Đôi khi “tính di động” của đường viền khung này rơi vào tay quản trị viên web, nhưng thường thì nó vẫn gây cản trở.. Để ngăn người dùng thử các kích thước cửa sổ cho thẻ, thuộc tính noresize đã được phát minh
khung
Nhưng thuộc tính đường viền, từ lâu đã quen thuộc với chúng ta, đặt chiều rộng tính bằng pixel của các khung giống nhau giữa các khung... nó được viết bên trong thẻ. Như trước đây, giá trị border="0" sẽ loại bỏ hoàn toàn đường viền.
khung
Đã đến lúc hồi sinh trang web của chúng tôi bằng các liên kết, nhưng vấn đề là, liên kết quen thuộc Beans in a pot bằng tiếng Ý sẽ mở ra tài liệu này trong cùng một khung nơi nó được đặt, trong trường hợp của chúng tôi, ngay trong khung có nội dung và chính nội dung đó tại thời điểm nhấp vào liên kết này sẽ bị lãng quên.. bạn có thể xem ví dụ vụng về.. nhấp vào bất kỳ liên kết trong đó.. Vì vậy, trong tương lai điều này đã không xảy ra, cần phải cho trình duyệt biết chúng ta cần mở tài liệu chúng ta cần ở khung nào, tất nhiên trừ khi bạn thực sự cần mở nó trong cùng một khung.
Tôi nhớ là chúng ta đã làm quen rồi, trong chương dành riêng cho các liên kết, với thuộc tính tên và đích, chúng cũng được sử dụng khi làm việc với các khung, cơ chế có thay đổi một chút và gần như giống nhau. Trước hết, khung mà chúng tôi muốn mở bất kỳ tài liệu nào phải được gán một tên riêng.
nó được viết như thế này:
Bạn có thể nghĩ ra bất kỳ cái tên nào.. điều chính là đừng quên nó..
Nó được viết như thế này:
Đậu trong nồi, kiểu Ý
Chà, tôi nghĩ không cần phải giải thích cho bạn rằng trước khi tham khảo bất kỳ tài liệu nào, bạn cần phải tạo chúng... trong trường hợp của tôi, các tệp (công thức nấu ăn) có tên text.html, text1.html, text2.html ...
Nhìn vào ví dụ:
Tệp Index.html
khung
Menu tệp.html
khung
Thực đơn:
Súp nấm
Đậu trong nồi, kiểu Ý
Salad mùa hè của Úc
... ... ...
Cũng giống như trước đây, tài liệu có thể được mở trong một cửa sổ riêng. Hãy để tôi nhắc bạn rằng nó được viết như thế này:
Đậu trong nồi, kiểu Ý
Hoặc, bằng cách gán giá trị _top cho thuộc tính đích, hãy mở nó trong cùng một cửa sổ trình duyệt, nhưng ở chế độ toàn màn hình.. “zeroing” mọi thứ ở đó.. nó được viết như thế này:
Đậu trong nồi, kiểu Ý
Trang web đã thành ra như thế này... tất nhiên, vẫn còn nhiều việc phải làm trên đó... ngoài ra, theo ý tưởng của tôi, nó sẽ có cấu trúc hơi khác một chút về điều hướng xung quanh trang web, nó sẽ có rất nhiều trang nữa, thực đơn đẹp, nhưng về kết cấu khung thì mình nghĩ nó sẽ giữ nguyên..
khung nổiĐôi khi cần phải chèn một tài liệu HTML khác hoặc thậm chí một loạt tài liệu đó vào một trang chứa cấu trúc không có khung trong một cửa sổ riêng biệt. Để thực hiện mục đích này, có một thẻ - cái gọi là khung nổi.
Thẻ này có một số thuộc tính:
src - thuộc tính bắt buộc cho biết đường dẫn đến trang cần mởchiều rộng - chiều rộng của khung nổi tính bằng pixel hoặc phần trăm
chiều cao - chiều cao khung nổi
cuộn - hiển thị thanh cuộn
- không - không bao giờ hiển thị thanh cuộn,
- có - luôn hiển thị,
- tự động - hiển thị nếu cần thiết.
- trái - trái
- đúng - ở bên phải
- hàng đầu - cao hơn
- dưới cùng - bên dưới
- 1 - kích hoạt khung
- 0 - tắt khung
Tất cả cùng nhau nó được viết như thế này:
Tài liệu ví dụ với khung nổi:
khung nổi
khung nổi
Cái gọi là "khung nổi" đã được đưa vào trang này.
Trong một cửa sổ riêng biệt, nó sẽ mở một tài liệu html khác để hiển thị.
… … …
Một số trình duyệt không hỗ trợ cấu trúc khung tài liệu hoặc diễn giải nó không chính xác; ngoài ra, người dùng thường cố tình vô hiệu hóa hỗ trợ khung trong cài đặt trình duyệt của mình. cấu trúc html tài liệu. Và mặc dù tỷ lệ phần trăm trình duyệt và người dùng như vậy rất nhỏ nhưng chúng vẫn tồn tại.
Bây giờ hãy tưởng tượng rằng bạn đã xây dựng trang web của mình bằng cấu trúc khung và một số khách truy cập, có thể không biết vấn đề là gì, hãy thử mở trang web của bạn và trình duyệt của họ hiển thị lỗi! Họ sẽ nghĩ gì về trang web của bạn? Tôi nghĩ những điều như: "Ugh.. chuyện vớ vẩn gì đó.. Tôi sẽ không đến đây nữa!"
Để cho người dùng biết rõ rằng trình duyệt/cài đặt trình duyệt của họ không hỗ trợ khung, có một thẻ.
Thẻ hiển thị văn bản kèm theo nếu trình duyệt của người dùng không hỗ trợ khung hoặc chúng bị vô hiệu hóa cưỡng bức trong cài đặt của nó. Nếu khung được trình duyệt của người dùng hỗ trợ thì thẻ này chỉ đơn giản là bị bỏ qua.
khung
Xin lỗi, nhưng trình duyệt của bạn không hỗ trợ khung..
Kết quả của ví dụ sẽ đáng chú ý nếu trình duyệt của bạn thực sự không hỗ trợ khung (ở đây tôi đã nghĩ từ lâu.. :) nếu đúng như vậy thì tại sao lại đọc chương này?) hoặc bạn đã tắt hỗ trợ khung trong trình duyệt như một thử nghiệm.
Thẻ phải được đặt bên trong thẻ
Với khung nổi, việc này thậm chí còn đơn giản hơn, chỉ cần viết văn bản bắt buộc giữa và văn bản này sẽ được hiển thị trên màn hình nếu trình duyệt không hỗ trợ khung.
Xin lỗi, nhưng trình duyệt của bạn không hỗ trợ khung..
Trước khi bạn bắt đầu tạo một trang bằng cấu trúc khung, hãy phân tích bố cục của nó, kích thước của từng cửa sổ, sự hiện diện hay vắng mặt của thanh cuộn trong đó, v.v. Sau đó, bạn có thể tạo plugin Tệp HTML mà không thực sự lo lắng về họ sắp xếp lẫn nhau liên quan đến nhau..
Sử dụng thẻ. Hãy nhớ rằng nếu trong trình duyệt của bạn, trang web hoạt động và được hiển thị như bạn dự định, thì đối với những người dùng khác, mọi thứ có thể khác!
Khung là các vùng hình chữ nhật của màn hình, mỗi khung chứa tài liệu HTML riêng. Khung rất tốt cho việc định dạng các tài liệu sau:
Bật khung thông thường khoảnh khắc nàyđược coi là công nghệ cũ và không được hỗ trợ trong HTML5. Đừng sử dụng các khung thông thường trong dự án của bạn! Trong HTML5, các thẻ frame , frameset và noframes không còn tồn tại nữa; thay vào đó, một thẻ iframe duy nhất (khung nội tuyến hoặc khung nổi) được cung cấp.
NhãnTag - thay thế thẻ và được sử dụng để chia màn hình. Có thẻ đóng.
Thuộc tínhTrong một thẻ riêng biệt, chỉ nên sử dụng một trong các thuộc tính – COLS hoặc ROWS. Điều này có nghĩa là cấu trúc khung sẽ chỉ bao gồm các cột hoặc chỉ các hàng. Để tạo hàng trong cột hoặc cột trong hàng, bạn sẽ cần các vùng chứa lồng nhau....
Ví dụ
Kết quả:
Cũng lưu ý sự khác biệt trong thứ tự đánh số khung.
NhãnThẻ được đặt trong ... vùng chứa xác định chính xác những gì sẽ được hiển thị trong một khung cụ thể. Không có thẻ đóng.
Thuộc tính
Ví dụ sau chia màn hình thành hai vùng dọc. Phía bên trái nhỏ hơn chứa mục lục và phía bên phải sẽ tải tất cả các tài liệu HTML khác. Tệp mục lục chứa các siêu liên kết văn bản đơn giản đến các phần có liên quan. Để mọi thứ hoạt động, bạn cần tạo tài liệu HTML trong các tệp cosm.htm, eat.htm, perf.htm, massage.htm và manic.htm.
Nội dung ví dụ- Các mặt hàng
- Mỹ phẩm
- Bổ sung dinh dưỡng
- nước hoa
- Dịch vụ
- Mát xa
- Cắt móng tay
Thẻ sẽ giúp bạn không phải lặp lại thuộc tính TARGET trên mỗi siêu liên kết nếu tất cả chúng đều trỏ đến cùng một cửa sổ khung. Để thực hiện việc này, bạn cần đặt một thẻ có thuộc tính TARGET trong vùng chứa....
Việc sử dụng thẻ sẽ giúp giảm kích thước của tệp mục lục left.htm của ví dụ trước.
Nội dung ví dụ- Các mặt hàng
- Mỹ phẩm
- Bổ sung dinh dưỡng
- nước hoa
- Dịch vụ
- Mát xa
- Cắt móng tay
Thuộc tính TARGET của mỗi liên kết cụ thể sẽ thay thế thuộc tính thẻ cùng tên.
Nội dung ví dụ- Các mặt hàng
- Mỹ phẩm
- Bổ sung dinh dưỡng
- nước hoa
- Dịch vụ
- Mát xa
- Cắt móng tay
Như đã đề cập, tên khung không thể bắt đầu bằng dấu gạch dưới, vì chúng bắt đầu tên dịch vụ truyền tải thông tin đặc biệt đến trình duyệt. Sau đây là những tên đặc biệt, mỗi tên được sử dụng để đạt được một hiệu ứng cụ thể.
Về cơ bản, các tên dịch vụ này nhằm mục đích “đột phá” cấu trúc khung hiện tại bằng cách này hay cách khác. Hãy thử nghiệm với chúng để xem bạn có thể tải tài liệu vào các cửa sổ khác nhau như thế nào.
NhãnHTML 4.0 đã giới thiệu các khung nổi (hoặc nội tuyến). Bằng cách sử dụng thẻ, bạn có thể đặt một khung duy nhất trong tài liệu HTML thông thường. Hơn nữa, một thùng chứa... ở đây không cần thiết.
Thẻ đóng là bắt buộc!
Thuộc tínhXác định những gì sẽ được hiển thị trong cửa sổ trình duyệt nếu nó không hỗ trợ khung.
Trình duyệt của bạn không hỗ trợ iframe!
Làm cách nào để tải khung mà không cần thêm tệp?Để tải một khung mà không cần sử dụng tập tin bên ngoài, bạn cần đặt mã HTML của khung vào một biến, sau đó như Thẻ SRC chỉ định "javascript:parent. tên biến".
var varFrame = "Mã HTML"; ...
Sự cố về thanh địa chỉ với cấu trúc trang khungKhi sử dụng khung, trang web sẽ sử dụng một trang cho biết vị trí của khung.
Đây là một ví dụ về một trang như vậy:
...
Sau khi tải trang này, thông tin sẽ được tải vào khung. Tất cả các chuyển đổi của người dùng trên các trang của trang đều diễn ra trong các khung này. TRONG thanh địa chỉ chỉ có đường dẫn đến luôn được hiển thị trang chủ, không thay đổi trong quá trình chuyển đổi. Người khách hiện không biết mình đang ở đâu.
Nếu khách truy cập ngay lập tức hiểu sai trang chủ trang web (ví dụ: từ một công cụ tìm kiếm), thì điều này không dẫn đến việc xây dựng lại cấu trúc chung khung. Đây là lý do mà chủ sở hữu trang web không thể cung cấp địa chỉ trên trang bên trongđịa điểm.
Có một số giải pháp cho vấn đề này
Trước đó, một ví dụ về cấu trúc khung đã được xem xét. Chúng tôi sẽ xem xét nhiều cách khác nhau giải pháp cho vấn đề này nằm ở đó.
Ý tưởng là thế này: khi tải một trang có chứa phần thông tin, chúng tôi sẽ kiểm tra môi trường của trang và nếu thiếu cấu trúc khung bắt buộc, chúng tôi sẽ tạo nó bằng tập lệnh.
Ba trường hợp có thể xảy ra:
Trong trường hợp đầu tiên, không cần thực hiện hành động nào sau khi quá trình kiểm tra hoàn tất. Trường hợp thứ hai và thứ ba gần như giống nhau nên chúng ta sẽ chỉ xem xét trường hợp thứ hai.
Và như vậy, người truy cập sẽ đến “nơi mà lẽ ra anh ta không nên làm”. Ở đầu trang, chúng tôi chèn một tập lệnh sẽ tạo cấu trúc khung.
Giải pháp có thể được triển khai cả ở phía máy khách và phía máy chủ. Nhược điểm chính của việc triển khai phía máy khách là rõ ràng - sự phụ thuộc vào khả năng và cài đặt của máy khách. Ví dụ: việc chạy tập lệnh trên máy tính của người dùng bị cấm. Tùy chọn thứ hai sẽ không hoạt động nếu máy chủ không hỗ trợ PHP.
Giải pháp JavaScript.Có một hạn chế với cách tiếp cận này - không phải tất cả các trình duyệt đều hỗ trợ JavaScript và trong một số trường hợp, người dùng tự vô hiệu hóa tập lệnh.
Đầu tiên, chúng tôi kiểm tra môi trường của trang và sau đó, nếu cấu trúc khung được yêu cầu không tồn tại, chúng tôi sẽ tạo nó.
Hãy tạo một tập tin frame.js :
Nếu (window.name != "main") ( window.name="root"; document.write(""); document.write(""); document.write(""); document.write("" ; )
Đầu tiên chúng ta kiểm tra tên của cửa sổ nơi trang được tải: if (window.name != "chính"). Nếu tên cửa sổ và tên khung không khớp nhau thì bạn cần tạo cấu trúc khung. Việc này được thực hiện một cách linh hoạt bằng cách sử dụng phương thức ghi của đối tượng tài liệu.
Chúng tôi kết nối một tập tin với mỗi trang của trang web frame.js. Bây giờ các trang của trang web sẽ có cấu trúc như sau:
... ...
Với cách tiếp cận này để giải quyết vấn đề này, nhu cầu về tệp chứa cấu trúc khung sẽ không còn nữa.
Giải pháp PHPVới cách tiếp cận này, trang web sẽ có thể truy cập được hơn khách.
Chúng ta sẽ kiểm tra môi trường trang theo cách khác (không giống như khi sử dụng JavaScript). Chúng ta sẽ tải tài liệu vào một khung có tham số frame=yes. Khi mở trang, chúng tôi kiểm tra tham số này và nếu cần, sẽ tự động tạo cấu trúc khung. Dưới đây là mã chịu trách nhiệm cho việc này.
Đưa mã vào một tập tin khung.php. Bây giờ bạn cần kết nối nó với mọi trang của trang web. Dưới đây là một ví dụ về một trang như vậy.
khung...
Trong trường hợp này, cũng như việc triển khai ở phía máy khách, không cần phải tạo riêng một tài liệu HTML mô tả cấu trúc khung.
.
Hãy bắt đầu với cấu trúc khung. Bản chất của nó là gì? Trong tài liệu mà chúng tôi tải vào trình duyệt, chúng tôi có cơ hội sắp xếp các khu vực kiểu cửa sổ đặc biệt. Những người khác có thể được tải vào các khu vực này. tài liệu cá nhân(trang web).
Tại sao điều này là cần thiết? Vì các tài liệu được tải vào các khu vực riêng biệt nên chúng hoạt động độc lập. Tức là bạn có thể thực hiện điều gì đó trong một tài liệu trong khi các tài liệu khác vẫn không thay đổi.
Bạn có thể tìm thấy cấu trúc khung như vậy ở đâu? Đây là các tệp trợ giúp (có phần mở rộng .chm).
Đây là một ví dụ đơn giản về tài liệu có khung:
Ví dụ về khung Bạn đang xem trang này bằng trình duyệt không hỗ trợ khung.Phần tử bộ khung. Công việc của nó là bao phủ khu vực xem và chia thành các khu vực riêng biệt. Những thứ kia. hướng dẫn trình duyệt theo tỷ lệ nào và cách chúng tôi phân chia các khu vực này (theo chiều ngang hoặc chiều dọc).
Phần tử khung mô tả từng khu vực riêng lẻ như vậy. Thẻ đơn. Nó chiếm các kích thước được chỉ định trong bộ khung.
Phần tử noframes được hiển thị nếu trình duyệt không hỗ trợ khung.
Lưu ý rằng không có phần tử cơ thể. Phần tử frameset được sử dụng thay thế. Đây là một trong những lý do khiến frame không còn được sử dụng trên các trang web.
Thuộc tính phần tử Frameset- cols - phân chia trang theo chiều dọc thành các khu vực xem.
- hàng - phân chia trang theo chiều ngang thành các khu vực xem.
Phần tử này mô tả một khu vực cửa sổ duy nhất. Bạn có thể tải bất kỳ tài liệu nào vào đó bằng thuộc tính src. Ví dụ:
Thuộc tính cuộn- cuộn (tự động theo mặc định). Nếu tài liệu vượt quá vùng xem của khung này, quá trình cuộn sẽ xảy ra. Nếu tài liệu nằm hoàn toàn trong khung thì sẽ không có thao tác cuộn. Tính năng cuộn có thể bị tắt nhưng tốt hơn là để nó ở chế độ tự động.
Thuộc tính đơn kích thước vừa phải- cấm thay đổi kích thước khung hình trong trình duyệt. Theo mặc định điều này được cho phép.
Thuộc tính khung viền- từng khung hình. Giá trị '1' - vẽ, giá trị '0' - không vẽ. Chỉ có hai giá trị này là hợp lệ. Theo mặc định, khung được vẽ.
Thuộc tính Chiều rộng lề– cho biết khoảng cách mà nội dung trong một khung nhất định sẽ lùi lại theo chiều ngang so với các khung của khung này.
Thuộc tính chiều cao lề– thụt lề dọc từ nội dung đến viền khung.
Khung nội tuyến được nhúngPhần tử iframe ('cửa sổ dòng'). Phần tử này được ghép nối (có thẻ mở và thẻ đóng). Phần tử này phục vụ cùng một mục đích - để sắp xếp phần tử cửa sổ trong tài liệu.
Nó khác với các khung hình cũ như thế nào? Nó có thể tự cung cấp và không cần thêm bất kỳ thùng chứa nào. Và nó có thể xuất hiện trong bất kỳ tài liệu nào, vì vậy ở đâu có phần tử nội dung.
Phần tử iframe là phần tử nội tuyến có nội dung có thể thay thế. Những thứ kia. một vùng thuộc loại đường với bất kỳ kích thước trừu tượng nào được hình thành và nội dung của một số tài liệu bên ngoài (tệp html) được tải vào vùng này.
Iframe có các thuộc tính giống như hình ảnh (vì chúng cùng loại): tên, chiều rộng, chiều cao, src, viền khung, cuộn, hspace, vspace, lề rộng, chiều cao lề.
