Thuộc tính khung. Vấn đề với khung. Cách tải khung mà không cần tệp bổ sung

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ử khung

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úng

Phầ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 với nội dung được 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ề.

Một cửa sổ trình duyệt có thể được chia thành các phần được gọi là khung, đôi khi là khung; Bạn cũng có thể gọi chúng là ngưỡng cửa. Trong mỗi phần như vậy của cửa sổ trình duyệt, tức là. khung, có thể được tải riêng tài liệu HTML. Hãy xem ví dụ về cửa sổ trình duyệt có ba khung.

Trong trường hợp này, để rõ ràng, mỗi khung hình được tải bằng HTML đơn giản một tài liệu cung cấp số khung và tên của tệp lưu trữ nội dung của nó. Nếu một tài liệu thực được tải vào khung nhưng không khớp hoàn toàn với khung đó thì khung (chú ý, không phải toàn bộ cửa sổ!) Sẽ có chiều dọc và/hoặc Sọc ngang cuộn tùy thuộc vào việc nội dung của tài liệu có vừa với chiều ngang và/hoặc chiều dọc hay không.
Ví dụ: thiết kế và cấu trúc trang web của bạn sao cho có các thành phần giống nhau được lặp lại trên mỗi trang của trang web: tiêu đề, Chức năng điều hướng, địa chỉ ở cuối trang hoặc một số thành phần tương tự khác. Chỉ có nội dung của các phần thay đổi. Sau đó, các trang có thể được chia thành các phần để những phần không thể thay đổi được đặt trong các khung riêng biệt và một khung khác có thể được phân bổ để nội dung của phần mong muốn được tải vào đó sau khi nhấp vào liên kết tương ứng, chẳng hạn như từ menu .
Điều này giúp tiết kiệm tốc độ tải vì các phần giống hệt nhau của các trang trên trang web không được tải lại mà chỉ hiển thị mọi lúc trong các khung được phân bổ cho chúng.

Tạo phần tử cấu trúc khung FRAMESET

Cấu trúc của bố cục cửa sổ được lưu trữ trong một tài liệu HTML riêng biệt, được gọi là tài liệu có khung. Cấu trúc khung được hình thành bằng phần tử FRAMESET đặc biệt. Một tài liệu thông thường có một phần HEAD và một phần BODY, trong khi trong tài liệu có khung, phần BODY được thay thế bằng mô tả cấu trúc của khung, tức là. phần FRAMESET.
Phần tử NOFRAME có thể được thêm vào phần FRAMESET với nội dung thay thế để hiển thị trong các trình duyệt không hỗ trợ khung hoặc trong các trình duyệt không hỗ trợ khung. Những trình duyệt như vậy đơn giản là sẽ không hiểu cấu trúc FRAMESET và NOFRAME nhưng sẽ hiển thị văn bản được đặt bên trong chúng.

Một tài liệu đơn giản có khung ...mô tả cấu trúc của khung... Nội dung thay thế cho các trình duyệt không hỗ trợ khung

Lưu ý rằng phần BODY bị thiếu hoàn toàn trong tài liệu và phần tử NOFRAMES được chứa trong phần FRAMESET.
Bản thân cấu trúc khung được hình thành bằng cách chia cửa sổ trình duyệt thành các phần - hàng và cột; Ở một mức độ nào đó, điều này dường như không tạo ra bảng. Để làm điều này, phần tử FRAMESET có các thuộc tính cols và row, tương ứng chỉ định việc phân chia thành các cột và hàng.
Đơn vị đo lường trong đó kích thước khung hình có thể được đặt, như thường lệ, là pixel và tỷ lệ phần trăm. Ngoài ra còn có cơ hội đặt kích thước theo đơn vị đo lường mới đối với chúng tôi, đơn vị đo này có thể được gọi đại khái là “một phần” của cửa sổ. Giá trị của thuộc tính cols và row được chỉ định bằng cách liệt kê kích thước của các vùng tương ứng, phân tách bằng dấu phẩy. Có thể kết hợp những cách khác nhiệm vụ. Hãy xem xét một vài ví dụ, dựa trên giả định rằng kích thước cửa sổ trình duyệt là 800x600 pixel.

Mã này sẽ chia cửa sổ theo chiều ngang thành hai khung (hàng) có chiều cao bằng nhau. Nếu bạn đặt thuộc tính cols="50%, 50%", bạn sẽ nhận được hai cột có chiều rộng bằng nhau.

. . . tiếp tục xác định cấu trúc khung. . .

Với mã này, chúng ta nhận được ba cột khung: cột bên trái rộng 120 pixel, cột giữa rộng 400 pixel và cột thứ ba chứa mọi thứ còn lại từ hai cột đầu tiên trong thuộc tính, giá trị này được biểu thị bằng: biểu tượng dấu hoa thị “*”.

. . . tiếp tục xác định cấu trúc khung. . .

Mã này sẽ tạo hai cột khung. Chiều rộng của cái đầu tiên được lấy là một (cái này được ký hiệu là 1 * hoặc đơn giản là *), chiều rộng của cái thứ hai lớn hơn bốn lần. Do đó, chiều rộng của cái đầu tiên sẽ là 20% và chiều rộng của cái thứ hai là 80% tổng chiều rộng của cửa sổ trình duyệt.

. . . tiếp tục xác định cấu trúc khung...

Biện pháp trên kết hợp cả ba phương pháp xác định kích thước. Chiều rộng của cột đầu tiên sẽ là 100 pixel, cột thứ hai sẽ được phân bổ 40% chiều rộng còn lại (800 - 100 = 700) và cột thứ ba sẽ là tất cả những gì không bị chiếm bởi cột thứ nhất và thứ hai.
Phần FRAMESET có thể chứa các phần FRAMESET lồng nhau, cho phép bạn tạo cấu trúc khung khá phức tạp. Giả sử chúng ta cần chia cửa sổ thành 4 khung như sau:

Đầu tiên bạn cần sắp xếp 2 cột như thế này:

cols= "100, * "

Sau đó chia cột thứ hai thành ba dòng như sau:

hàng="80, *, 30"

Một khung riêng biệt, hay đúng hơn là mô tả của nó, được chỉ định bởi phần tử FRAME và các thuộc tính của nó: sẽ nói thêm về nó sau. Hãy quay lại các phần tử FRAMESET lồng nhau. Hãy xem một số mã ví dụ tạo cấu trúc khung như thế này:

Có vẻ như chúng ta đã tìm ra cách chia cửa sổ thành các khung. Khi tạo khung, bạn có thể đảm bảo rằng đường viền giữa các khung không hiển thị. Như bạn có thể đã đoán, việc này được thực hiện bằng thuộc tính border; giá trị của nó phải bằng 0. Nhưng thực tế là đối với các khung, thuộc tính này không được trình duyệt nhận biết trình duyệt web IE, nhưng được trình duyệt Netscape Navigator hỗ trợ. Đối với Internet Explorer, đường viền giữa các khung được chỉ định bởi thuộc tính frameborder, thuộc tính này không được trình duyệt Netscape Navigator hỗ trợ. Hóa ra cần phải hỏi cùng giá trị cho cả hai thuộc tính, sao cho cả hai trình duyệt đều nhận biết mã HTML giống nhau và độ dày của đường viền giữa các khung là như nhau.
Độ dày của đường viền hay nói cách khác là khoảng cách giữa các khung cũng có thể được điều chỉnh bằng cách sử dụng thuộc tính không gian khung, giá trị của nó được chỉ định bằng pixel. Tất cả các thuộc tính của phần tử FRAMESET được hiển thị trong bảng.

Thuộc tính phần tử

Thuộc tính

Sự miêu tả

Ví dụ

hàng	Xác định số lượng và kích thước của khung ngang (khung dòng) trong cửa sổ trình duyệt. Giá trị là danh sách kích thước khung được phân tách bằng dấu phẩy. Các phương pháp thiết lập kích thước: a) tính theo phần trăm chiều cao khu vực làm việc cửa sổ trình duyệt chẳng hạn: "30%, 30%, 40%"; b) ở dạng dấu “*” (dấu hoa thị), biểu thị rằng khung chiếm toàn bộ không gian trống của cửa sổ trình duyệt mà không bị chiếm bởi các khung khác có nội dung rõ ràng kích thước quy định ví dụ: dấu hoa thị trong mục "25%, 25%, *" tương đương với 50%; c) tính bằng pixel, ví dụ: "75, *" . Tất cả ba phương pháp có thể được kết hợp.	row= "25%, 25%, *"
cols	Xác định số lượng và kích thước của khung dọc (khung cột) trong cửa sổ trình duyệt. Là một giá trị một danh sách kích thước khung được phân tách bằng dấu phẩy được chỉ định. Kích thước được thiết lập tương tự như trong tham số trước đó HÀNG.	cols= "265, *"
ranh giới	Chỉ định chiều rộng của đường viền khung bằng pixel. Thông số này Chỉ hoạt động trong trình duyệt Netscape.	Biên giới="0"
khung viền	Tham số này chỉ hợp lệ trong trình duyệt Internet Explorer và xác định sự hiện diện của khung cho các khung có trong phần tử FRAMESET. Các giá trị có thể có: Có khung hiển thị; Không hoặc 0 không hiển thị khung.	Khung viền="0"
khoảng cách khung hình	Xác định khoảng cách (còn gọi là "vùng xám") giữa các khung hình tính bằng pixel. Tùy chọn này cũng được yêu cầu để tạo khung không viền.	không gian khung = "0"

Bây giờ chúng ta hãy quay lại phần tử FRAME, phần tử này mô tả một khung duy nhất trong toàn bộ cấu trúc. Tham số cần thiết cho nó là thuộc tính src, chỉ định URL của tài liệu hoặc hình ảnh HTML sẽ được hiển thị trong khung này. Tốt hơn là đặt tên cho khung bằng thuộc tính name. Điều này sẽ cho phép bạn sử dụng Tên làm giá trị của thuộc tính đích của phần tử A và kiểm soát khung nào mà liên kết sẽ tải vào. Tên khung không thể bắt đầu bằng số; chỉ cho phép các chữ cái trong bảng chữ cái Latinh (az, AZ) làm ký tự đầu tiên.

Khi cấu trúc khung không xác định đường viền giữa các khung, nội dung của chúng có thể quá sát nhau, trông sẽ không đẹp lắm. Nếu bạn muốn mở rộng nội dung của các khung mà vẫn không hiển thị ranh giới giữa chúng, thì điều này có thể được thực hiện bằng cách đặt thụt lề bên trong các khung. Kích thước của các khoảng thụt lề này được đặt theo pixel và theo cặp: đối với các khoảng thụt lề ở trên cùng và dưới cùng với thuộc tính chiều cao lề,
và thụt lề ở bên phải và bên trái bằng thuộc tính độ rộng lề. Khi đó khoảng cách giữa nội dung của các khung liền kề sẽ bằng tổng các khoảng thụt lề tương ứng của các khung này.

Việc đường viền có được hiển thị xung quanh một khung cụ thể hay không được xác định bởi thuộc tính frameborder của nó. Giá trị có (hoặc 1) biểu thị rằng cần có đường viền, giá trị không (hoặc 0) biểu thị rằng không nên có đường viền.
Người dùng có thể thay đổi kích thước các khung được tạo bởi tài liệu HTML. Để thực hiện việc này, chỉ cần di chuyển con trỏ chuột đến đường viền của khung (không quan trọng những đường viền này có hiển thị hay không) và sử dụng tiêu chuẩn hệ điều hành cách thay đổi kích thước cửa sổ.
TRONG con trỏ Windows nút chuột sẽ xuất hiện dưới dạng mũi tên màu đen hai đầu. nhấp chuột nút trái chuột, bạn có thể di chuyển đường viền cửa sổ. Tương tự, bạn có thể thay đổi kích thước của khung vì khung cũng là một cửa sổ. Nếu bạn đã tính toán kích thước khung hình của mình và không muốn người dùng thay đổi chúng, hãy đặt thuộc tính noresize. Kết quả là, việc thay đổi kích thước sẽ bị cấm.
Như chúng tôi đã nói trước đó, thanh cuộn xuất hiện trên một khung nếu nội dung của nó không hoàn toàn vừa với các ranh giới được chỉ định. Sự hiện diện của thanh cuộn được kiểm soát bởi thuộc tính cuộn. Ba giá trị được phép là có, không và tự động.
Giá trị tự động khớp tự động xuất hiện thanh cuộn trong trường hợp thực sự cần thiết. Nếu nội dung đã hiển thị thì không có thanh cuộn; nếu một phần nội dung không vừa, thanh cuộn được yêu cầu sẽ xuất hiện.
Giá trị có sẽ bật cả hai thanh cuộn dù chúng có cần thiết hay không. Đôi khi nó có thể trông không đẹp lắm.
Giá trị no ngăn cản việc hiển thị thanh cuộn. Hãy cẩn thận với giá trị này vì việc chỉ định nó có thể ngăn người dùng nhìn thấy toàn bộ nội dung của khung khi nó không vừa hoàn toàn trong khung. Tất cả các thuộc tính của phần tử FRAME được hiển thị trong bảng.

Thuộc tính phần tử

Thuộc tính

Sự miêu tả

Ví dụ

src	Tham số bắt buộc. Chỉ định địa chỉ HTL (URL) tập tin hiển thị trong khung này	src="frame2.html"
tên	Xác định tên của khung này, sau này sẽ được sử dụng để tham chiếu đến nó từ các tài liệu khác bằng thuộc tính đích (xem phần tử A). Giá trị phải là bất kỳ tên nào không có khoảng trắng, sử dụng các ký tự và số Latinh (ký tự đầu tiên chỉ có thể là các chữ cái trong bảng chữ cái Latin: a-z, A-Z). Tên không được bắt đầu bằng số và ký tự đặc biệt. Tên dành riêng khung bắt đầu bằng dấu gạch dưới.	tên="menu1"
Chiều rộng lề	Chỉ định chiều rộng (tính bằng pixel) của lề trái và phải của khung. Nếu tham số không được chỉ định, trình duyệt sẽ tự động xác định kích thước tối ưu thụt đầu dòng.	chiều rộng lề = "0"
chiều cao lề	Chỉ định chiều rộng, tính bằng pixel, của lề trên và dưới của khung. Nếu tham số không được chỉ định, trình duyệt sẽ tự động xác định kích thước thụt lề tối ưu.	chiều cao lề = "0"
cuộn	Xác định xem nội dung khung có thanh cuộn hay không. Những giá trị khả thi: có — hiển thị thanh cuộn; không—không hiển thị thanh cuộn; tự động - hiển thị thanh cuộn nếu cần thiết (nếu tài liệu được chỉ định trong tham số SRC không vừa với khung)	cuộn = "tự động"
kích thước vừa phải	Không cho phép thay đổi kích thước khung hình. Tham số này là cờ và không yêu cầu giá trị.	kích thước vừa phải
khung viền	Xác định xem một khung có viền hay không. Những giá trị khả thi: có hoặc 1 — khung hiển thị; không hoặc 0—không hiển thị khung.	khung viền = "0"

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:

Mục lục. Nếu đặt mục lục theo cột dọc trên trang Web, người dùng có thể tham khảo bất cứ lúc nào mà không cần phải bấm liên tục vào nút quay lại. Vì mục lục sẽ luôn ở trong khung nên người dùng chỉ cần chọn một mục khác và nhận ngay thông tin mình cần.

Các thành phần giao diện cố định. Bạn có thể cố định một hình ảnh trên màn hình, chẳng hạn như logo công ty, trong khi phần còn lại của trang cuộn trong một khung khác.

Biểu mẫu và kết quả. Bạn có thể tạo biểu mẫu trong một khung và hiển thị kết quả truy vấn trong một khung khác.

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ãn

Tag - thay thế thẻ và được sử dụng để chia màn hình. Có thẻ đóng.

Thuộc tính

COLS. Chia màn hình theo chiều dọc. Chấp nhận các giá trị bằng pixel, phần trăm hoặc chỉ *. Giá trị * chỉ ra rằng cột cụ thể sẽ chiếm phần còn lại của màn hình

HÀNG. Chia màn hình theo chiều ngang. Chấp nhận các giá trị bằng pixel, phần trăm hoặc chỉ *. Giá trị * cho biết một dòng cụ thể sẽ chiếm phần còn lại của màn hình

KHUNG KHUNG. Xác định sự hiện diện của khung, tức là. ranh giới khung. Chấp nhận các giá trị "có" hoặc "không".

RANH GIỚI. Chỉ định chiều rộng của khung bằng pixel.

MÀU BIÊN GIỚI. Xác định màu sắc của khung. Mặc định (nếu sử dụng chuẩn bảng màu Hệ thống Windows) viền khung có tông màu xám xỉn. Nhưng nếu muốn, bạn có thể chọn bất kỳ màu nào khác. Khi xác định màu, bạn có thể chọn cả tên và số tương đương của nó trong hệ thống RGB. Ví dụ: BLUE hoặc #0000FF.

Trong 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ãn

Thẻ đượ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

SRC. Xác định URL được liên kết với một khung cụ thể.

CHIỀU RỘNG LỀ. Xác định khoảng cách giữa nội dung của khung và đường viền trái và phải của khung.

CHIỀU CAO LỀ. Chỉ định khoảng cách giữa nội dung của khung và đường viền trên và dưới của khung.

CUỘN. Xác định xem thanh cuộn có hiện diện trong cửa sổ khung hay không. Có thể lấy các giá trị “có”, “không” và “tự động” (mặc định).

BÌNH THƯỜNG. Xác định ranh giới của khung là "cố định" và ngăn người dùng thay đổi kích thước cửa sổ khung. Hơn nữa, kích thước của tất cả các khung có đường viền chung với đường viền cố định đều được ghi lại.

BORDERCOLOR, BORDERCOLOR, BORDERCOLOR. Các thuộc tính này được liên kết với các khung và tương tự như các thuộc tính trong tệp .

TÊN. Chỉ định tên của cửa sổ khung. Thuộc tính duy nhất không ảnh hưởng vẻ bề ngoài khung. Cho phép bạn kiểm soát quá trình tải khung. Nếu cửa sổ khung có tên duy nhất, thì nó có thể được truy cập trực tiếp từ các khung khác. Khi đặt tên cho các cửa sổ khung, có một hạn chế cần lưu ý là tên không được bắt đầu bằng ký tự gạch dưới “_”, nếu không sẽ bị bỏ qua. Vì một số tên dịch vụ bắt đầu bằng ký tự này. Ví dụ

Sử dụng thẻ A để nạp vào khung Thuộc tính

HREF. Chỉ định URL hoặc tên của tài liệu mới mà bạn muốn tải vào một cửa sổ khung cụ thể.

MỤC TIÊU. Chỉ định tên của khung mà tài liệu mới sẽ được tải vào. Tên này phải được gán cho khung bằng thuộc tính NAME trong tệp .

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

Xin chào! Nhãn

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. Để làm điều này, bạn cần đặt một thẻ có Thuộc tính MỤC TIÊU vào thù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

Đây là hàng hóa! Dưới đây là các dịch vụ! Hiệu ứng đặc biệt thu được bằng thuộc tính TARGET

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ể.

MỤC TIÊU=”_blank” . Tài liệu được tải vào một cửa sổ trình duyệt mới.

MỤC TIÊU=”_chính mình” . Tài liệu được tải vào cửa sổ hiện tại.

MỤC TIÊU=”_parent” . Tài liệu được tải vào khung cha. Thông thường đây là một khung đứng trong một thùng chứa... phía trước khung hiện tại. Nếu không có khung cha thì giá trị của "_parent" sẽ giống với "_self".

MỤC TIÊU=”_top” . Tài liệu được tải vào khung trên cùng.

Về cơ bản, những 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ãn

HTML 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, ở đây không cần một thùng chứa...

Thẻ đóng là bắt buộc!

Thuộc tính

ALING. Xác định kiểu căn chỉnh. Chấp nhận các giá trị "trái", "giữa", "phải".

CHIỀU CAO. Chỉ định chiều cao của khung bằng pixel

CHIỀU RỘNG. Chỉ định chiều rộng của khung bằng pixel.

SRC, MARGINWIDTH, MARGINHEIGHT, CUỘN, FRAMEBORDER, BORDER, BORDERCOLOR, NAME. Tương tự như những gì đã thảo luận trước đó.

vsspace. Đặt lề ở trên cùng và dưới cùng của iframe

hspace. Đặt lề ở các cạnh bên ngoài iframe

Chiều rộng lề. Xác định lượng khoảng đệm dọc theo cạnh trái và phải bên trong iframe; phải bằng hoặc lớn hơn 1.

chiều cao lề. Xác định lượng khoảng đệm dọc theo cạnh trên và dưới bên trong iframe; phải bằng hoặc lớn hơn 1.

cuộn. Chỉ định xem thanh cuộn có được hiển thị trong iframe hay không; giá trị có thể là "có", "không" hoặc "tự động". Giá trị mặc định cho tài liệu thông thường là tự động.

tiêu đề. Văn bản chú giải công cụ. Nhãn

Xá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 thế nào để tải một khung hình mà không cần Các tệp bổ sung?

Để 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 khung

Khi 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 không truy cập ngay vào trang chính của trang web (ví dụ: 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:

khách truy cập đã truy cập một trang có chứa cấu trúc khung;

khách truy cập đã truy cập một trong các trang thông tin;

khách truy cập đến một trang có menu điều hướng.

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 PHP

Vớ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 trong trường hợp này, giố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.

.

Bố trí khung dọc
Cách tạo một cột khung từ ba tài liệu khác nhau.

Bố trí khung theo chiều ngang
Cách tạo một hàng khung từ ba tài liệu khác nhau.

(Bạn sẽ tìm thấy nhiều ví dụ hơn ở cuối trang này).

Khung HTML

Với khung, bạn có thể hiển thị nhiều tài liệu HTML trong cùng một cửa sổ trình duyệt. Mỗi tài liệu HTML được gọi là một khung và mỗi khung độc lập với các khung khác.

Nhược điểm của việc sử dụng khung:

• Khung có thể không còn được hỗ trợ trong tương lai. Phiên bản HTML
• Khung rất khó sử dụng. (In toàn bộ trang rất khó).
• Một nhà phát triển web nên để mắt tới một lượng lớn Tài liệu HTML.

Phần tử bộ khung HTML

Phần tử bộ khung chứa một hoặc nhiều phần tử khung. Mỗi phần tử khung có thể chứa một tài liệu riêng biệt.

Phần tử bộ khung chỉ định BAO NHIÊU cột hoặc hàng sẽ có trong bộ khung và BAO NHIÊU phần trăm/pixel không gian mà mỗi khung hình sẽ chiếm.

Phần tử khung HTML

Thẻ xác định một cửa sổ (khung) riêng lẻ trong một bộ khung.

Trong ví dụ bên dưới, chúng ta có một bộ khung có hai cột.

Cột đầu tiên chiếm 25% chiều rộng cửa sổ trình duyệt. Cột thứ hai chiếm 75% chiều rộng cửa sổ trình duyệt. Tài liệu "frame_a.htm" được đặt ở cột đầu tiên và tài liệu "frame_b.htm" được đặt ở cột thứ hai:

Lưu ý: Kích thước của một cột trong bộ khung cũng có thể được chỉ định bằng pixel (cols="200.500") và một trong các cột có thể sử dụng khoảng trống còn lại bằng cách chỉ định dấu hoa thị thay vì chiều rộng (cols="25%,* ").

Mẹo: Nếu khung có đường viền hiển thị, người dùng có thể thay đổi kích thước bằng cách kéo đường viền. Để ngăn khung bị thay đổi kích thước theo cách này, bạn có thể thêm noresize="noresize" vào tệp .

Lưu ý: Thêm thẻ cho trình duyệt không hỗ trợ khung.

Quan trọng: Bạn không thể sử dụng thẻ cùng với ! Tuy nhiên, nếu bạn thêm một thẻ chứa một số văn bản cho các trình duyệt không hỗ trợ khung, bạn hãy đặt văn bản đó vào các thẻ ! Hãy xem cách thực hiện điều này trong ví dụ đầu tiên bên dưới.

Thêm ví dụ

Sử dụng thẻ
Cách sử dụng thẻ (đối với trình duyệt không hỗ trợ khung).

Bộ khung lồng nhau
Cách tạo các bộ khung lồng nhau.

Một tập hợp các khung có thuộc tính noresize="noresize"
Cách sử dụng thuộc tính noresize. Di chuyển chuột đến đường viền giữa các khung và đảm bảo bạn không thể kéo nó.

Khung điều hướng
Cách tạo khung điều hướng. Khung này chứa danh sách các liên kết với khung thứ hai là đích đến nơi các liên kết đó sẽ được mở. Tệp "tryhtml_contents.htm" chứa ba liên kết. Nguồn liên kết:
Đóng khung một

Khung b

Khung c
Khung thứ hai hiển thị tài liệu được liên kết.

Chuyển đến một phần cụ thể trong khung
Hai khung hình. Một trong các khung có liên kết đến một phần cụ thể trong tệp. Phần này được đánh dấu là trong tập tin "link.htm".

07.12.2015

Chưa

Chào mọi người!
Chúng tôi tiếp tục chăm chỉ nghiên cứu những điều cơ bản về HTML. Tôi mừng vì bạn không bỏ dở bài học của mình.

Trong bài học này chúng ta sẽ xem xét các khung là gì và chúng được tạo ra như thế nào trong HTML.
Vì vậy, hãy xác định khung nào trong HTML.
Khung là sự phân chia cửa sổ trình duyệt thành các khu vực riêng biệt trong đó các tài liệu HTML riêng lẻ có thể được tải.

Tôi nghĩ bạn hiểu rằng nhờ có khung, bạn có thể xem nhiều trang web cùng một lúc trong một cửa sổ trình duyệt.

Để làm ví dụ, để hiểu cách hoạt động của khung trong thực tế, tôi khuyên bạn nên xem một ví dụ. Thực hiện một vài chuyển tiếp ở đó:

Vậy bạn nghĩ như thế nào? Bạn có muốn tìm hiểu cách tạo ra thứ này không? Bây giờ chúng ta sẽ tìm hiểu cách chèn khung vào tài liệu html.

Một khung trên trang web được tạo bằng cách sử dụng bố cục sau:

Lưu ý: bố cục mã khung được chèn vào tài liệu html thay vì thẻ:

Khung

○ thẻ bộ khung

Đây là vùng chứa chính để tạo khung, trong đó chứa các phần tử khác.
Thẻ đóng là bắt buộc.

*Các thuộc tính của thẻ frameset:

• Cols - dọc
• Hàng - ngang

hàng - ngang

cols - dọc

Các thuộc tính cols và row cho biết cửa sổ trình duyệt sẽ được chia thành bao nhiêu phần. Ví dụ: để chia cửa sổ trình duyệt thành hai phần dọc, bạn cần viết như sau:

Phía bên trái của màn hình sẽ có kích thước 30% và phía bên phải sẽ là 70%.

Nếu bạn muốn chia trình duyệt thành nhiều phần khác, hãy thêm các kích thước bổ sung được phân tách bằng dấu phẩy, ví dụ như sau:

Do đó, cột dọc đầu tiên sẽ rộng 30%, cột thứ hai - 20%, cột thứ ba - 10% và cột thứ tư - 40%.

Hiểu rồi?

Điều tương tự cũng xảy ra với bố cục theo chiều ngang:

Cột ngang đầu tiên sẽ rộng 30%, cột thứ hai - 20%, cột thứ ba - 10%, cột thứ tư - 40%.

○ thẻ khung

Thẻ khung chỉ định tài liệu HTML nào sẽ được tải vào cửa sổ trình duyệt.
Ví dụ: chúng ta cần tải ba trang khác nhau “1.html”, “2.html”, “3.html” trong một cửa sổ trình duyệt. Thẻ khung sẽ trông như thế này:

Hãy tổng hợp những kiến ​​thức về frame. Vì vậy, nhiệm vụ: bạn cần chia cửa sổ trình duyệt thành hai phần và tải hai trang web vào các phần này - “1.html” 30%, “2.html” 70%.
Đây là mã đã hoàn thành:

Kết quả sẽ như thế này:

* Thuộc tính thẻ khung

• src – địa chỉ trang web. src="1.html" ;
• lề rộng - lề bên trong khung dọc theo chiều rộng. Ví dụ: chiều rộng lề = "10" ;
• lề cao - lề chiều cao bên trong khung. Ví dụ: lềhight="10" ;
• cuộn - cuộn khung qua cuộn.
  - vâng – cuộn giấy sẽ hiện diện trong khung. Ví dụ: cuộn = "có" ;
  - không – cuộn sẽ không xuất hiện trong khung. Ví dụ: cuộn = "không" ;
  - tự động – cuộn sẽ hiện diện trong khung nếu cần. Ví dụ: cuộn = "tự động" ;
• noresize – cấm di chuyển đường viền khung.
• tên – tên khung. Chỉ định cửa sổ nào các khung khác sẽ được mở. Ví dụ: tên = "trang web" ;

Nếu bạn không chỉ định tên cho khung trong thuộc tính “tên”, thì khi bạn nhấp vào liên kết, một khung mới sẽ mở ra trong cửa sổ chứa liên kết:

Đây là một ví dụ nếu bạn thêm thuộc tính “name”:

Chẳng phải điều đó tốt hơn sao?
Đối với bất kỳ khung nào, hãy thêm thuộc tính “tên” nơi bạn muốn các tài liệu HTML khác mở trong đó

Tên trong thuộc tính “name” có thể là bất cứ thứ gì. Nhưng trong tương lai, nếu bạn đặt tên cho các thẻ “frame” khác, hãy nhớ rằng mỗi thẻ phải là duy nhất:

trang 2 trang 3

“Trang 1”, “Trang 2” sẽ mở trong một cửa sổ nơi bạn đã chỉ định tên cho khung “name =" site "" và “Trang 3" sẽ mở trong một khung khác có tên là “name =" bloggood-ru ""

LUYỆN TẬP

Nhiệm vụ: Bạn cần tạo khung theo bố cục này:

Đầu tiên, hãy tạo ba khung ngang:

Bây giờ hãy thêm "top.html" và "footer.html"

Kết quả cho đến nay sẽ như thế này:

Bây giờ, giữa “top.html” và “footer.html”, chúng ta sẽ thêm “menu.html” và “content.html”:

Mã sẵn sàng:

Khung

Lưu tệp dưới dạng "index.html"

Tạo các trang “top.html”, “footer.html”, “menu.html” và “content.html”:

Mã tập tin "top.html"

trang web tiêu đề trang web

Mã tập tin "footer.html"

File footer.html StepkinBlog.com © 2015

Mã tập tin "menu.html"

File menu.html – menu trang web

• Trang chủ
• Giới thiệu về tác giả

Mã của tập tin "content.html":

Trang chủ Trang chủ Nội dung trang web - "Trang chủ (content.html)"

Mã của tập tin "autor.html":

Đây là kết quả tôi nhận được:

Hãy sử dụng thuộc tính “khung” và vô hiệu hóa việc kéo dài khung thủ công cũng như loại bỏ tính năng cuộn trong tệp “index.html”.

○ phải làm gì nếu khung không được trình duyệt hỗ trợ?

Bạn có thể hiển thị thông báo cho người dùng rằng trình duyệt của họ không hỗ trợ khung. Để thực hiện việc này, hãy chèn thẻ vào bên trong cấu trúc:

○ Khung nổi

Nếu bạn cần chèn trực tiếp cửa sổ iframe vào một trang không có cấu trúc khung thì sẽ có thẻ "iframe" cho việc này.

* Thuộc tính thẻ “iframe”

• src - đường dẫn tới trang cần mở
• chiều rộng - chiều rộng của khung nổi
• chiều cao - chiều cao khung nổi
• cuộn - thanh cuộn
  - không - không bao giờ hiển thị thanh cuộn
  - vâng - luôn hiển thị
  - tự động - hiển thị nếu cần thiết
• căn chỉnh - căn chỉnh khung nổi
  - trái – trái
  - bên phải - ở bên phải
  - trên – cao hơn
  - dưới – dưới
• frameborder - đường viền xung quanh khung nổi
  - 1 - bật khung
  - 0 - tắt khung

Thẻ “iframe” với các thuộc tính sẽ trông như thế này:

Nếu trình duyệt của bạn không hỗ trợ khung, bạn có thể chèn văn bản " ỐI! Trình duyệt của bạn không hỗ trợ khung."giữa các thẻ.
Nó sẽ trông giống thế này:

ỐI! Trình duyệt của bạn không hỗ trợ khung.

Ví dụ: hãy thêm iframe vào tệp "content.html":

Trang chủ Trang chủ Nội dung trang web - "Trang chủ (nội dung.! Trình duyệt của bạn không hỗ trợ khung.

Bài trước
Mục tiếp theo