PDA

View Full Version : Từ Photoshop đến MS Frontpage


baby_fish19862004
22-08-2004, 11:25
Bài này do hết sức tình cờ khi ngồi vọc Photoshop và Frontpage, tôi thấy nó hay và hữu dụng nên đưa lên đây để cho những ai cũng tự học như tôi biết thêm một chút. Còn những ai biết rồi thì bỏ qua cho! vì là tui tự vọc cho nên đôi lúc nghĩ cái mình tìm ra là mới, nhưng thiên hạ đang dùng như cơm bữa.

Bài này tôi sẽ hướng dẫn bạn cách thêm text vào những vùng slice của Photoshop. Nếu bạn chưa biết tí gì về Photoshop thì bạn nên đọc cuốn "Cơ bản về PTS" có trên trang web này. Nếu bạn biết về Photoshop nhưng chưa biết cách Slice thì bạn vào đây để đọc trước đã.

Ok! bây giờ tôi giả sử rằng bạn đã biết cách slice và biết thao tác những kỹ năng khác của Photoshop. Sau khi bạn slice xong bạn sẽ thấy một bất lợi rằng, nếu chúng ta thêm chữ vào ngay trong Photoshop ở Slice Palette. Kiểu gì bạn cũng sẽ phá vỡ cấu trúc bảng của nó và giao diện của bạn nhìn như thành phố Heroshima và Nagasaki của Nhật hồi bị dính bom nguyên tử. Bản thân tôi cũng rất nhiều lần bị như thế cho nên tôi cũng điên lắm. Bạn nên nhớ trong cái ô con con đó định dạng HTML có thể được thiết lập. Giả sử nếu ô slice của bạn có kích thước là 400x1000 Px, bây giờ bạn muốn thêm text vào ô đó, mà đảm bảo không bị vỡ bảng. Bạn chắc chắn là có thể dùng notepad hoặc cái gì đó để tự viết đoạn code HTML cho mình. Tôi thì cũng biết sơ qua, nhưng ngồi mà viết cả hàng chục trang với những cấu trúc khác nhau thì tôi thà chết chứ không thèm! :d. Và tất nhiên khi bạn đọc tiêu đề của bài này bạn cũng đoán ra giải pháp là gì.

Đúng! Frontpage là câu trả lời. Có 2 cách để kết hợp giữa Frontpage và Photoshop.

Thứ nhất - hạ sách: Bạn kiểm tra xem độ rộng và chiều cao của ô slice của bạn là bao nhiêu, giả sử là 400x400 Px, thì bạn vào Frontpage tạo một bảng với kích thước là 395x395 Px, nên làm nhỏ hơn chút xíu cho chắc. Sau đó thì bạn thao tác bình thường với những điểm như căn chỉnh lề trái, lề trên, thêm chữ và thậm chí là cả marquee nữa. Sau khi bạn làm chán chê mê mải với cái đống lùng bùng chữ nghĩa đó thì bạn hãy vào Table Properties và chọn border của bảng bằng 0. Cuối cùng thì vào phần HTML và copy đoạn code từ tag <table> đến hết </table>. Sau đó thì mở Slice Palette lên chọn No Image và dán đoạn code đó vào. Tôi đảm bảo 100% bảng của bạn sẽ không bị di chuyển một mm.

Thứ hai - Thượng sách: Nếu chỉ là một ô như trên thì bạn làm như thế cũng được, nhưng nếu giao diện của bạn yêu cầu nhiệu nội dung khác nhau ở các ô hơn thì cách đó cũng rất lâu. Cho nên bạn có thể làm theo cách thứ 2 này. Bạn cứ thiết kế giao diện bình thường, sau đó chuyển sang Image Ready và vào File > Save optimize as và chọn HTML and Images. Sau đó bạn sẽ thu được một thư mục Images trong đó chứa những Slice quý giá của bạn, còn lại là một tệp tin với định dạng HTML là chữ e, tôi giả sử tệp tin đó tên là index.html. Bạn hãy mở Frontpage và tìm đến tệp tin đó và mở nó ra như một định dạng bình thường của Frontpage. HURRRRA! bây giờ thì nó chẳng khác gì một trang Fronpage bình thường với các ô có thể Edit trực tiếp.

Chắc tôi không phải nói nhiều hơn về cách thêm chữ và căn chỉnh đúng không! bây giờ nhường thời gian cho bạn làm việc khác

Hy vọng bài viết này giúp đỡ được vài người. Nếu bạn có ý kiến đóng góp gì hãy vào diễn đàn để thảo luận nhé!