- Đơn chưa đặt hàng: 1,

14. Gộp lại (Lumping) hay Phân mảnh (Splitting)

(3547 Từ tổng cộng trong nội dung này)
(18271 lần đọc)   Trang In


Bạn đã làm được một home page! Một việc lớn! (Nhưng này bạn! Đây mới chỉ là công việc giống như Hercule thôi!) BẤY GIỜ, những người bạn của tôi ơi, đây là lúc để chuyển một "trang" văn bản dài thành những đoạn thông tin của "web" được nối với nhau.

Mục đích

Sau bài này, bạn có thể:
  • Chuyển một trang web đơn thành một chuỗi các trang được liên kết với nhau
  • Tạo ra một trang mẫu (template) cho nhiều trang web
  • Xây dựng các đặc tính hoa tiêu (navigational feature) để nối nhiều trang web lại với nhau

Bài học

Lưu ý: Nếu bạn chưa có tài liệu từ những bài học trước, hãy download ngay bây giờ.

Bạn làm một người gộp lại hay là một người chia mảnh? Không phải? Hay cả hai?

Để tổ chức thông tin, đôi lúc tốt hơn hết là "gộp" chúng lại với nhau; đôi lúc tốt hơn hết lại là "chia" chúng thành các phần riêng biệt. Kéo lên xuống trong các trang web dài thường tạo ra sự chán nản. Khi dài, một trang web cần tốn nhiều thời gian để nạp từ mạng xuống nếu so sánh với việc chia nó thành những trang nhỏ hơn.

Trong nhiều trường hợp, bạn có thể xác định những điểm luận lý để "chia" thông tin thành nhiều trang web. Tuy nhiên, điều này không có một công thức chung, và ý kiến cũng không giống nhau. Bạn nên tạo sự cân bằng giữa các trang bằng cách chia nội dung thành các phần đều nhau để tránh cho người đọc phải click quá nhiều khi muốn đến một nội dung nào đó. Cũng là một điều quan trọng khi xây dựng các liên kết siêu văn bản hay các manh mối dễ nhìn thấy bên trong trang web giúp người đọc tìm được thông tin cần thiết.

Trước đây chúng ta vừa tạo được một trang web với một liên kết đến một trang ngắn hơn. Trong bài 8d chúng ta đã tạo ra một danh sách các liên kết như là một mục lục để nối chúng đến các anchor được đặt tên cho các phần khác nhau của bài Volcano Web. Sự phân đoạn theo cách như vậy có thể được xem là các điểm ngắt để phân mảnh một trang đơn dài thành các trang con.

Cho đến giờ chúng ta đã tạo ra một thư mục gọi là volc trong đó có chứa hai tập tin HTML (trang bài học index.htm và trang thứ hai msh.htm). Chúng ta cũng đã tạo ra một thư mục thứ hai là pictures để giữ các tập tin hình ảnh.

map of new lesson Bây giờ chúng ta sẽ phân chia tập tin Volcano Web đơn thành một chuỗi các trang web được liên kết với nhau như trong sơ đồ này. Điểm vào của nó là trang mục lục/bìa tại index.htm trong đó có liên kết đến tất cả các phần khác của bài học:

  • Introduction
    [intro.htm]
  • Volcano Terminology
    [term.htm]
  • Volcanic Places in the USA
    [usa.htm]
  • Volcanic Places on Mars
    [mars.htm]
  • Research Project
    [proj.htm]
Mỗi phần của bài học sẽ liên kết ngược lại phần mục lục và trang trước của nó. Cũng nên chú ý đến liên kết hai chiều giữa usa.htmmsh.htm

 

Chú ý: Để hoàn thành bài học này, chúng ta cần tạo thêm một số tập tin mới và cũng phải thực hiện nhiều lần thao tác chép/dán từ tập tin bạn đang làm việc. Hãy chắc chắn rằng bạn biết rõ cách chuyển qua lại giữa các chương trình và cửa sổ tài liệu khác nhau trên máy của bạn.

Điều đầu tiên chúng ta cần làm là tạo một tập tin index.htm mới, được sử dụng làm trang "bìa" của bài Volcano Web:

  1. Trước hết tạo một bản sao của tập tin index.htm và đặt tên là old.htm hay là một tên nào tương tự như vậy.
  2. Bây giờ mở lại tập tin index.htm nguyên gốc trong trình soạn thảo. Từ điểm này trở đi, đây sẽ là bài mới của chúng ta.
  3. Chúng ta sẽ sử dụng lại hình ảnh, lời mở đầu, và bảng mục lục trong trang đầu tiên này. Để làm điều đó, chúng ta sẽ xóa đi các phần cần "cắt" ra khỏi trang web.

    Xóa bỏ đoạn từ Introduction đến References, tức là mọi thứ trong:

      <hr>
    <h2><A NAME="intro">Introduction</A></h2>
    A <b>volcano</b> is a location where magma, or hot
    melted rock from within a planet, reaches the surface. 
    :
       :
    <dt>Lipman, P.W. and Mullineaux (eds). (1981)
    <dd><I>The 1980 Eruptions of Mount St. Helens, Washington.
    </I>U.S. Geological Survey Professional Paper 1250.
    </dl>
    
    Bạn có thể so sánh tập tin HTML của bạn với ví dụ mẫu để biết trang nên như thế nào tại điểm này.

     

  4. Bây giờ tìm đoạn văn có "In this Lesson..." Trước đây, chúng ta đã dùng các liên kết siêu văn bản đến anchor được đặt tên (tức là <a name="term">..</a>) trong cùng một tài liệu (xem bài 8a). Bây giờ chúng ta sẽ điều chỉnh các liên kết anchor này để liên kết đến một trang web khác (mà chúng ta sẽ tạo ra dưới đây).

    Tìm đoạn có dạng:

    <B>In this Lesson...</B>
    <ul><i>
    <li><A HREF="#intro">Introduction</A>
    <li><A HREF="#term">Volcano Terminology</A>
    <li><A HREF="#usa">Volcanic Places in the USA</A>
    <li><A HREF="#mars">Volcanic Places on Mars</A>
    <li><A HREF="#project">Research Project</A></i>
    </ul>
    và điều chỉnh thành:
    <B>In this Lesson...</B>
    <ul><i>
    <li><A HREF="intro.htm">Introduction</A>
    <li><A HREF="term.htm">Volcano Terminology</A>
    <li><A HREF="usa.htm">Volcanic Places in the USA</A>
    <li><A HREF="mars.htm">Volcanic Places on Mars</A>
    <li><A HREF="proj.htm">Research Project</A></i>
    </ul>
    Bạn có thể so sánh tập tin HTML của bạn với ví dụ mẫu để biết trang nên như thế nào tại điểm này.
    Chú ý: Bạn cần hiểu rõ sự khác nhau giữa một liên kết có dạng:
      <a href="#quest">go to questions</a>
    với một liên kết khác có dạng:
      <a href="quest.htm">go to questions</a>

Việc kế tiếp cần làm là tạo các tập tin riêng cho các phần trong bài của chúng ta. Sẽ dễ dàng hơn khi trước hết chúng ta tạo ra một tập tin mẫu (template file) rồi sau đó hiệu chỉnh cho các trang web khác nhau.
  1. Trong trình soạn thảo, tạo một tập tin mới gọi là temp.htm
  2. Trong tập tin này, đánh vào đoạn HTML sau (nếu muốn, bạn có thể chép lại một tập tin ví dụ mẫu):
    HTML Ghi chú
    <html>
    <head>
    <title>XXXXXXXX</title> 
    </head>
    <body>
    HEAD: Trong phần đầu của mỗi tài liệu, XXXXXXXX là tên của phần đó
    <H5>Volcano Web / 
    <A HREF="index.htm">Index</A> / 
    <A HREF="xxxx.htm">back</A> / 
    <A HREF="xxxx.htm">next</A></H5>
    NAVIGATION: Tại đỉnh mỗi trang chúng ta sử dụng một tiêu đề nhỏ (h=5) để tạo ra các liên kết hoa tiêu (navigation link). Điểm Index để trở về trang bìa chính. Liên kết nextback để đến trang kế tiếp và trang trước. Bạn sẽ phải điền lại tên tập tin thích hợp cho xxxx.htm. Hãy chú ý cách này tạo ra một hướng dẫn nhỏ cho mỗi trang web.
    <h2>XXXXXXXX</h2>
    :
    :
    :
    HEADER: Sử dụng tiêu đề mức 2 cho các mục của trang.
    <hr>
    <ADDRESS>
    <b><A HREF="index.htm">
    Writing HTML</A> : 
    XXXXXXXX </b><p>
    created by Lorrie Lava, 
    <A HREF="mailto:lava@pele.bigu.edu">
    lava@pele.bigu.edu</A> <br>
    Volcanic Studies, 
    <A HREF="http://www.bigu.edu/">
    Big University</A><p>
    <TT>last modified: April 1, 1995</TT>
    </ADDRESS>
    <p>
    ADDRESS FOOTER: Chú ý cách footer chỉ ra tên của trang chính (với một liên kết ngược về nó) cùng với đoạn văn chỉ ra tên của phần hiện tại XXXXXXXX. Đặt tên trang ở đây tạo ra một hướng dẫn nhỏ cho thấy vị trí của nó trong cấu trúc web mà chúng ta đã tạo ra.
    <tt>URL: 
    http://www.bigu.edu/web/xxxxxxxx.htm
    </tt>
    <p
    <body>
    </html>
    
    URL: Cần điều chỉnh dòng này để chỉ ra URL của tài liệu tương ứng với tên tập tin xxxxxxxx.htm của nó

     

  3. Đến đây, bạn cần tạo ra 5 bản sao của tập tin mẫu và thực hiện các điều chỉnh thích hợp trong từng mẫu:
    Tên Tập tin Mục Ghi chú
    intro.htm Introduction Vì đây là mục đầu tiên, xóa đi dòng <A HREF="xxxx.htm">back</A> trong phần hoa tiêu
    term.htm Volcano Terminology
    usa.htm Volcanic Places in the USA
    mars.htm Volcanic Places on Mars
    proj.htm Research Project Vì đây là mục cuối cùng, xóa đi dòng <A HREF="xxxx.htm">next</A> trong phần hoa tiêu

     

  4. Bây giờ, hãy mở tập tin index.htm cũ (mà chúng ta đổi tên là old.htm) trong trình soạn thảo. Với mỗi tập tin mới tạo, bạn cần chép lại (copy) đoạn HTML phía dưới đề mục <h2>...</h2> và dán (paste) vào tập tin mới tương ứng. Chú ý rằng trong Volcanic Places in the USResearch Projects cả hai đều có các mục con sử dụng tiêu đề <h3>...</h3>.
  5. Cuối cùng, bạn cần điều chỉnh liên kết trong tập tin msh.htm. Trước đây, nó quay về một anchor được đặt tên trong bài chính (mục Volcanic Places in the US) còn bây giờ nó cần liên kết đến tập tin usa.htm. Mở tập tin msh.htm trong trình soạn thảo và điều chỉnh:
      <a href="usa.htm"> 
    <img src="../pictures/left.gif" alt="** "> 
    Return to
    <i>Volcano Web</i></a>
    Cũng để cho tương đồng, bạn nên điều chỉnh lại phần footer như sau:
    <HR>
    <ADDRESS>
    <B><A HREF="index.htm">
    Volcano Web</A> : <A HREF="usa.htm">
    Volcanic Places in the USA</A> : 
    Mount St. Helens</B> <p>
    created by Lorrie Lava, 
    <A HREF="mailto:lava@pele.bigu.edu">
    lava@pele.bigu.edu</A><br>
    Volcanic Studies, 
    <A HREF="http://www.bigu.edu/">
    Big University</A><p>
    <TT>last modified: April 1, 1995</TT>
    </ADDRESS>
    <p>
    <tt>URL: http://www.bigu.edu/web/msh.htm</tt>
    <body>
    </html>

Kiểm tra lại công việc của bạn

So sánh trang của bạn với ví dụ mẫu. Nếu tài liệu của bạn trông khác với mẫu hay các liên kết siêu văn bản hoạt động không đúng, hãy xem lại văn bản bạn đã nhập trong trình soạn thảo. Trong bài này chúng ta đã tạo ra nhiều tập tin do vậy rất dễ có lỗi do đánh sai.

Xem lại

Các vần đề nên xem lại với bài này:
  1. Cho biết vài tiện lợi của các trang web ngắn so với một trang web dài?
  2. Điều gì xảy ra nếu chúng ta không sửa lại liên kết siêu văn bản trong tập tin msh.htm?
  3. Các đặc tính hoa tiêu mà chúng ta đã đưa vào bài là gì?

Thông tin bổ sung

Về nguyên tắc, trang web của bạn sẽ dễ đọc hơn khi các liên kết siêu văn bản đồng nhất vào nội dung của văn bản quanh nó. Điều này trở nên quan trọng hơn khi bạn tạo ra nhiều trang web có các siêu văn bản liên kết lẫn nhau. Hãy so sánh:
In the spring of 1980, most people living in the vicinity of Mount St. Helens took heed to the scientists warning about an impending volcanic eruption. However, several were insistent on staying in their homes and sadly perished in the May 18 event. In that same year, measured increases in seismic recording devices caused scientists to warn of a possible event in Long Valley, California, and order a large evacuation of the Mammoth resort area. However, no such event occurred, and residents were angrily resentful for what they perceived as a false warning that caused great economic loss.
với
In the spring of 1980, most people living in the vicinity of Mount St. Helens took heed to the scientists warning about an impending volcanic eruption. (Click here to see a picture of Mount St. Helens) However, several were insistent on staying in their homes and sadly perished in the May 18 event. In that same year, measured increases in seismic recording devices caused scientists to warn of a possible event in Long Valley, California, and order a large evacuation of the Mammoth resort area. (Click here to see a seismometer) However, no such event occurred, and residents were angrily resentful for what they perceived as a false warning that caused great economic loss.
Các dòng "Click here..." không làm phá hủy ý nghĩa của dòng văn bản, nhưng đoạn liên kết "here" không có quan hệ gì với mục liên quan. Như là một đề nghị, tránh viết các đoạn tương tự như "click here to return to the home page". Thay vì vậy chỉ viết rõ một liên kết, tức là <a href="home.htm">Home Page</a> - bản thân việc click đã được hiểu ngầm khi sử dụng web browser.

Thực tập tự do

Hãy xem lại trang web bạn đang thực hiện. Nó có quá dài không? Có thể có những đoạn mà bạn có thể "tách" trang không? Hãy tạo ra trang bìa/mục lục và các liên kết thích hợp cho phần liên kết hoa tiêu giữa chúng. Sau đó tạo mẫu cho các "trang con".

Bây giờ hãy yêu cầu các bạn hay đồng nghiệp của bạn xem các trang web của bạn. Họ có thích cách "phân" trang hay "ghép" nhóm của bạn không? Họ có dễ dàng biết được cách để xem thông tin của bạn không?


Đến phần tiếp theo....

BẤY GIỜ chúng ta trở thành người yêu thích HTML nâng cao ... Hãy thắt dây an toàn!





  • 0. Tiêu chuẩn của HTML (2896 lần đọc) Trang In
  • Soạn thảo HTML (4634 lần đọc) Trang In
  • 1. Tạo tài liệu HTML đầu tiên (10470 lần đọc) Trang In
  • 2. Điều chỉnh một tài liệu HTML (2399 lần đọc) Trang In
  • 3. Sáu mức tiêu đề (2024 lần đọc) Trang In
  • 5. Làm việc với các kiểu mẫu (2042 lần đọc) Trang In
  • 4. Chia văn bản ra thành nhiều đoạn (2990 lần đọc) Trang In
  • 6. Danh sách, Danh sách, và Danh sách (1869 lần đọc) Trang In
  • 7. Thêm hình ảnh vào trang Web (3606 lần đọc) Trang In
  • 7a. Hình ảnh Inline (4483 lần đọc) Trang In
  • 8. Tạo Liên kết bằng Anchors (2592 lần đọc) Trang In
  • 8a. Liên kết đến tập tin cục bộ (6147 lần đọc) Trang In
  • 8b. URLs - Con trỏ đến Internet (1891 lần đọc) Trang In
  • 8c. Liên kết đến các site Internet bên ngoài (2385 lần đọc) Trang In
  • 8d. Liên kết Các phần của một Trang (3008 lần đọc) Trang In
  • 8e. Liên kết Siêu Hình ảnh (7997 lần đọc) Trang In
  • 9. Preformatted Text (1862 lần đọc) Trang In
  • 10. Các kí tự đặc biệt (24118 lần đọc) Trang In
  • 11. Danh sách mô tả (1827 lần đọc) Trang In
  • 12. Danh thiếp Địa chỉ và Liên kết E-Mail (2224 lần đọc) Trang In
  • 13. Blockquote ! (2783 lần đọc) Trang In
  • 14. Gộp lại (Lumping) hay Phân mảnh (Splitting) (18272 lần đọc) Trang In
  • 15. HTML "tiêu chuẩn" và "nâng cao" (2788 lần đọc) Trang In
  • 16. Màu sắc và Cấu trúc cho Nền (3450 lần đọc) Trang In
  • 17. Đừng làm cho chữ nhấp nháy! (3412 lần đọc) Trang In
  • 19. Easy Hard Rules (1799 lần đọc) Trang In
  • 20. Xét thêm về Sự Chỉnh lề (7489 lần đọc) Trang In
  • 21. Bảng (Table) (3211 lần đọc) Trang In
  • 22. Xét thêm về Hình ảnh và Danh sách (14663 lần đọc) Trang In
  • 23. Bản đồ Hình ảnh Liên kết (3846 lần đọc) Trang In
  • [ Mục lục chuyên mục ]

    Tìm kiếm
     Tìm theo từ: