Trang chủ Blog | Các câu hỏi thường gặp | Yahoo! Việt Nam

      Bài mới nhất

      Sửa Đóng
      Bài viết Tìm bài viết:
      Trích dẫn Báo cáo

      Một số thủ thuật trình bày bài viết

      Thư mục: IT |
      Quan trọng
      Đăng ngày: 07:00 30-05-2008
      Hôm trước chị Phương có tò mò hỏi về cái vụ làm sao để ảnh nó nằm bên cạnh mấy đoạn text giống như trong bài mừng đầy tháng plus vừa rồi chẳng hạn, lúc đấy chưa tiện nói vì đang "họp hội" rất là loạn. Rồi có đi một số blog, thấy nhiều người trình bày bài, erh,... khá là luộm thuộm và rối mắt. Tất nhiên đấy cũng chỉ là cảm nhận cá nhân thôi nhưng tiện đây tớ đề cập đến một số thủ thuật trình bày bài viết nâng cao nhìn cho nó có tính chuyên nghiệp chút =).


      Đầu tiên là đoạn code giúp nội dung các dòng text vừa khít với khung bài viết chứ không thò đuôi ra thụt đuôi vào do độ dài của các từ khác nhau gây ra (hầu hết các bài viết mình đều có sử dụng chế độ này - bài này cũng ko ngoại lệ). Thực hiện việc này khá đơn giản và cũng là một trong những hiệu ứng trình bày nên dùng nhất trong các bài viết.
      Nếu mọi người có sử dụng Word, sẽ biết đến một chế độ sắp xếp text đó là Justify ngoài 3 cách sắp xếp bình thường là Left, Right và Center, và cách này thường được sử dụng khi trình bày các đoạn văn bản thuần text có nội dung dài. Chắc cũng sẽ có người tự đặt câu hỏi tại sao trong các khung tool dành cho việc post bài lại không có phần hỗ trợ chức năng này? Đơn giản vì chế độ trình bày này chỉ có tác dụng với các đoạn text, không thể áp dụng cho các phần tử khác như ảnh, embed object hay table, vì thế tool hỗ trợ chỉ dùng thẻ div với thuộc tính align dành chung cho tất cả các đối tượng nằm trong thẻ không thể làm được điều này. Vậy muốn sử dụng nó thì ta phải làm "thủ công" bằng tay - sử dụng chế độ soạn thảo HTML, và thêm vào đoạn code này:
      Code:

      <div style="text-align:justify;"> - phần nội dung văn bản - </div>

      Tốt nhất là nên đặt toàn bộ nội dung bài viết vào trong thẻ div này, có nghĩa là khi mới bắt đầu viết đc vài dòng cho entry mới, ta nên chuyển ngay qua chế độ HTML để thêm code vào, tránh trường hợp để lâu nội dung bài viết dài, lúc chuyển sang thì nhìn hoa hết cả mắt không biết nên đặt code vào đâu cho đúng.


       
      Vâng, tiếp theo là code để khiến cho một bức ảnh nằm bên cạnh phần text nội dung bài, theo như chị Phương thì giống như trình bày khi viết báo  (tiện thể khoe luôn cái page view mới ). Code để thực hiện hiệu ứng này nếu không cẩn thận sẽ không đạt đc kết quả như mong muốn.
      Đầu tiên phải xác định rõ là bức ảnh này sẽ nằm bên cạnh đoạn text nào, và nằm phía bên trái hay bên phải đoạn text. Về vị trí của bức ảnh, nên nhớ là phần lớn chúng ta quen đọc từ bên trái sang bên phải, cho nên chuyện bức ảnh nằm bên nào sẽ có ảnh hưởng đến chuyện nó sẽ được nhìn thấy trước hay sau khi độc giả bắt đầu đọc đoạn text. Và thường thì những bức ảnh quan trọng hơn sẽ đc đặt ở bên trái, những ảnh minh họa ít liên quan đến nội dung đoạn text hay có mối liên hệ không chặt chẽ hoặc ở tầm rộng hơn thường được để bên phải.
      Giả sử như cái hình bên cạnh, muốn nó xuất hiện bên phải của đoạn text bắt đầu với "Vâng, tiếp theo là..." thì ta chuyển sang phần HTML, tìm đến đúng vị trí phía trước của đoạn này và chèn vào đoạn code sau:
      Code:

      <div style="float:right;"><img src="-link_image-"><br> (-phần nội dung văn bản khác có thể kèm theo như chú thích cho ảnh chẳng hạn-)</div>

      Phần cần chú ý là phần chữ màu đỏ, nếu muốn ảnh nằm bên trái đoạn text thì thay right bằng left. Nhưng lưu ý một chút là nếu sử dụng float:left đối với bức ảnh nằm ngay trước đoạn text đầu tiên, hay nói cách khác bức ảnh đó cũng là thành phần đầu tiên của bài viết, thì khi soạn bài tuy nó vẫn nằm bên phải đoạn text thật nhưng khi đăng bài và xem trên trình duyệt IE thì bức ảnh lại nằm trên đoạn text này như thể mình chưa bao giờ dùng câu lệnh float:left cả . FF thì không hề có hiện tượng này. Về kích thước ảnh khi sử dụng hiệu ứng này tốt nhất kích thước chiều ngang nên dưới 300px.

       
      Bên trái là ví dụ nâng cao của hiệu ứng này, dùng kết hợp với hiệu ứng zooming đã đc giới thiệu trước đây trong bài "Một số thứ linh tinh với 360 plus". Hãy thử di chuột vào bức ảnh để thấy kết quả.
      Về phần code thì đơn giản chỉ cần thêm id blog_img vào phần thẻ div bao ngoài bức ảnh:
      Code:

      <div id="blog_img" style="float:left;"> .... </div>



      Chỉnh sửa chiều rộng bề ngang của phần soạn thảo để kiểm tra việc trình bày của bài viết sau khi cho đăng bài.
      Ở trong phần viết blog, chiều rộng của khung soạn thảo bài viết lớn hơn kích thước thật của bài viết khi được đăng, nên đôi khi việc bố trí các thành phần của bài (hiện tại mới chỉ có ảnh và một vài dạng flash) trong khi soạn thảo và sau khi đăng bài không giống nhau và có thể không như ý muốn. Giờ đơn giản chỉ cần chỉnh lại chiều rộng của phần nội dung bài viết lại bằng kích cỡ sau khi được đăng là ok. --Về phần code thì chèn vào thẻ div bao bên ngoài toàn bộ nội dung bài viết, giống như cách sử dụng chế độ trình bày justify, và tốt nhất cũng nên dùng chung với hiệu ứng này một thể:
      Code:

      <div style="text-align:justify; width:570px;"> - phần nội dung văn bản - </div>

      Sau khi biên soạn xong nội dung bài viết hoàn chỉnh, có thể chuyển lại chế độ HTML để xóa phần code này đi hoặc để lại cũng được không ảnh hưởng gì với cấu trúc của blog hiện tại.


      Một số đề xuất cá nhân dành cho phần trình bày và viết bài...
      • - Hạn chế sử dụng chữ có kích cỡ quá to trên diện rộng (trong phần toolbar là chức năng font size: Large, Larger), chỉ nên dùng với các tiêu đề hay cùng lắm là lời giới thiệu mở đầu cho bài viết. Vì khi chúng ta viết không giống như khi nói, lời văn là lời "chết" không có âm thanh, nên chữ viết to hơn bình thường được ngầm hiểu là bạn đang muốn nói to, rõ ràng hơn. Nhưng chữ quá to thì khiến người đọc có cảm giác bạn đang hét lên khi viết đoạn văn đó, ít nhiều có thể sẽ gây cảm giác khó chịu không thoải mái.
      • - Khi muốn nhấn mạnh một đoạn nào đó, cách thông thường là bôi đậm phần đấy, hoặc có thể gạch chân, và có thể dùng cách nhấn mạnh rõ hơn bằng việc đổi màu font chữ. Nhưng lưu ý là nếu đổi màu chữ thì màu càng tương phản với nền bài viết càng có ý nhấn mạnh vì nó khiến đoạn text rõ ràng hơn, còn nếu dùng màu gần gần với phông nền sẽ khiến chữ khó nhìn hơn, mà khó nhìn thì thường bị bỏ qua chứ ít người chịu khó căng mắt lên đọc. Việc chọn màu gần với màu nền hoặc kiểu chữ in nghiêng thường dùng để viết các đoạn chú thích hoặc ý kiến bình phẩm của cá nhân (trong một bài viết bàn luận một vấn đề nào đấy).
      • - Nếu có một lời bình luận hay chú thích ngắn gọn nào đấy dành cho bức ảnh hay một đoạn văn thì nên đặt nó vào bên phải sau khi kết thúc phần đấy. Đơn giản vì khi đọc từ trái sang phải và từ trên xuống dưới, điểm cuối cùng của sự tập trung nằm ở góc dưới bên phải, khi đó nếu có một thành phần tách biệt nằm ngay bên dưới của điểm quan sát thì sẽ gây được sự chú ý và nhanh đc nhìn thấy hơn so với việc phải đảo mắt từ bên phải trở lại bên trái để quan sát.
      • - Điều cuối cùng,... Nói có thể ngọng, phát âm có thể không chuẩn, nhưng khi viết thì nhất định phải đúng chính tả, đúng ngữ pháp, hạn chế ít nhất những lỗi về mặt từ ngữ trong khả năng có thể. Nếu có viết tắt thì chỉ nên sử dụng những kí hiệu thông dụng nhiều người biết, hạn chế sử dụng các kí tự hay mật mã riêng trừ khi bạn không muốn người đọc hiểu hết bài viết của mình. Nói tóm lại, hãy cố gắng giữ gìn sự trong sáng của tiếng Việt.

      Author: m3Noa - 30 May, 2008 - Copyright © 2008.
      *Please ask for permission before copying this.
      Trích dẫn (0)
      Tìm tag: Trick, IT, HTML, CSS
      Tổng cộng 14 lời bình
      • Báo cáo

        vangenhaque 14:55 18-10-2009

        Noa ơi tại sao khi tớ dùng đoạn code này thì trên fire fox bức ảnh nhìn rất nhỏ gọn.Nhưng sang bên IE thì nó bị tràn dài ra không nằm bên cạnh dòng text như bên fire fox.Nhìn trông rất xấu.Nếu dùng alight thì tuy không có dòng text nằm bên cạnh nhưng bức ảnh lại gọn còn dùng stype thì. . .cái này chỉ dung IE thì bị thôi.Có cách nào để sửa không Noa.Nếu có thể thì trả lời dùm mình nha.Thanks Noa
      • Báo cáo

        ♫ BIVIAN ♫ 03:00 20-02-2009

        Noa có vẻ rất quan tâm tới chuyện này nhỉ . Lâu lâu mới thấy người nghiêm túc với việc viết Tiếng Việt như bạn. Hiện nay, có quá nhiều loại, nhiều kiểu ngôn ngữ bùng phát , đọc mà điên cái đầu . Nói ra thì tụi nhóc ấy cứ bảo mình là người cõi trên , sống ở thế kỷ cổ đại.
        Thôi, chúc ngủ ngon !
      • Báo cáo

        RikG 17:30 23-08-2008

        Tưởng chú cũng rộng rãi thông thoáng hóa ra cũng có chút giấu nghề nhỉ Ờ, khi nào tiện thì công bố cho bà con luôn chứ nhỉ Giấu nghề hoài cũng mệt lắm đấy
      • Báo cáo

        RikG 10:37 23-08-2008

        Cho tớ hỏi luôn cái này, mặc dù tớ không sử dụng căn lề hai bên thế nhưng khi post comt thì nó lại tự động căn lề, cái này phải làm sao đây ?
        Báo cáo

        Noa15:40 23-08-2008

        Bí mật nghề nghiệp, ko thể công bố rộng rãi đâu kưng .
      • Báo cáo

        RikG 10:36 23-08-2008

        Đọc lại bài này mới thấy mình tệ ơi là tệ
      • Báo cáo

        Fe 00:01 05-06-2008

        Bài này bổ dưỡng !
        Xin vài thang về dùng nhé !
        Báo cáo

        Noa00:03 05-06-2008

        Ok! Khi nào thiếu thuốc cứ tìm đến, tớ cung cấp miễn phí!
      • Báo cáo

        thanhfithou 00:43 02-06-2008

        sao blog của tui ko post đính kem Music, Flash Movie được nhỉ

        Code đính kèm flash là <embed src= ... ... /> mà sao cứ có  thẻ <embed ...> là blog của mình nó bỏ trống 1 khoảng trắng ko hiện ra được nhỉ. Code nhúng nhạc đó mình copy từ youtude hay các trang nghe nhạc...

        ai biết lý do ko nhỉ 

        Báo cáo

        Noa01:03 02-06-2008

        Nếu bạn sử dụng thẻ embed của youtube, googlevideo hay imeem thì không có lý nào code lại không đc chấp nhận, vì mình vẫn chèn mấy cái này vào thường xuyên mà .
        Có hai trường hợp xảy ra nếu như có chuyện xuất hiện khoảng trắng. Thứ nhất là do trình duyệt bạn đang sử dụng thiếu plug-in hoặc ActiveX nên không chạy đc file Flash. Trường hợp này xem rakhôngphải vấn đề cảu bạn nếu như bạn vẫn xem đc flash ở các trang khác.
        Trường hợp thứ hai là code bạn chèn vào có vấn đề nào đó nên nó không hoạt động đc. Thử kiểm tra lại xem =).
      • Báo cáo

        songuku99 00:17 01-06-2008

        Good strategy.  Plus, as long as you like it, no reasons why not.  Good luck to you guys.
      • Báo cáo

        [ Phương_PrinCesS ] ™ 23:35 31-05-2008

        Thánh kiu iem hehe >:D<
      • Báo cáo

        thanhchuong 04:20 31-05-2008

        Rất hay, tuyệt ...
      • Báo cáo

        songuku99 04:04 31-05-2008

        heheh, I don't think they will allow JS cuz it's inherently insecured.  Even CSS, many commands are blocked too.  I'm probabaly waiting for the Profile to come out before deciding using which one.  Also it depends on my friends too.  If most of them stick with 360, I have no choice
        Báo cáo

        Noa15:39 31-05-2008

        Hehe, I guess Profile will be similar to Plus or not has many different, and we research plus to prepared for Profile .
      • Báo cáo

        Vũ Nguyễn 13:24 30-05-2008

        kekekeke chú Noa chẳng hiểu ý gì cả co0l.l0ve hắn là chủ tịch fan club nên ý hắn mời chú đăng kí làm hội viên ý mà
      • Báo cáo

        songuku99 12:57 30-05-2008

        The hover trick to zoom the image is what i like most from your code.
        Báo cáo

        Noa13:08 30-05-2008

        Hehe, thank, I think this's the best trick we can do for plus now. If it's allow us to use js, we can make somethings else better.
      • Báo cáo

        co0l.l0ve 12:49 30-05-2008

        Tem,bài viết rất hay,lúc nào cho tớ ăn cắp nhé =)). Blog tớ cũng bị Noa cho là trình bày xấu. Hehe,cậu là Fan Club của chị Phương à?=))
        Báo cáo

        Noa12:52 30-05-2008

        Bác lại cứ nghĩ ai cũng hâm mộ chị ấy như bác àh =)).
      Lời bình mới

      Bài viết về bạn hoặc có tag tên bạn:

      • Chưa có bài nào có liên quan.

      Người đăng ký yêu thích blog này cũng đồng thời thích:

      • Chưa có blog yêu thích nào có liên quan.

      Xem thêm

      Thư mục

      Xem ngày tháng

      <
      2009
      >
      <
      tháng 11
      >
      S M T W T F S
      1 2 3 4 5 6 7
      8 9 10 11 12 13 14
      15 16 17 18 19 20 21
      22 23 24 25 26 27 28
      29 30  

      Bài mới nhất