CƠ BẢN VỀ THIẾT KẾ MỘT TRANG WEB

- Để thiết kế được một trang web và cho nó hoạt động được , thì yêu cầu bạn phải có kiến thức cơ bản về ngôn ngữ html . Để có được 1 giao diện đẹp thì yêu cầu bạn phải có kiến thức về photoshop , hầu hết thời nay tất cả các trang web có hình thức đẹp đều được design từ photoshop , sau đó nếu muốn ấn tuợng hơn thì họ đem qua flash làm cho màu mè hơn . Ở bài này tôi sẽ không hưỡng dẫn cho các bạn tạo ra 1 trang web cụ thể nào , mà tôi chỉ hưỡng dẫn các bạn các vấn đề cơ bản , các tutorial về nút bấm và các layout cho web có rất nhiều trên mạng , các bạn có thể tự nghiên cứu hoặc sử dụng các tutorial có sẵn để làm đẹp trang web của mình :

- Sau đây là 3 phần hưỡng dẫn , bạn hãy đọc lần lượt từng phần nhé

1. TẠO BỐ CỤC

Giao diện của một trang web được thiết kế bằng photoshop thực chất đó là một hình ảnh , bạn cứ nghĩ rằng giao diện của một trang web không khác gì một tấm hình, bất kì một tấm hình nào cũng có thể biến nó thành giao diện trang web .

Do đó - Về phần bố cục thì tùy vào người thiết kế, họ có thể thiết kế trên trời dưới đất gì cũng được, trang web nhìn càng lạ mắt thì càng thu hút người xem.

Tuy nhiên , thiết kế như thế nào thì bạn vẫn phải tuân theo những quy luật sau:

1. Phải có ý tưởng rõ ràng, bạn sẽ làm trang web về cái gì

2. Người sử dụng trình duyệt web luôn để màn hình ở độ phân giải là 800x600 pixel và 1024x768 pixel . Nhưng theo tôi thấy đa số các trang web đều được thiết kế tương thích với độ phân giải 800x600 pixel (Để kiểm tra độ phân giải của màn hình bạn làm như sau nhấn chuột phải trên vùng trống của màn hình Desktop và chọn Properties . Sau đó kích chuột vào bảng Setting. Hãy xem trong ô Screen area giá trị phân giải màn hình của bạn là bao nhiêu).

3. Nếu thiết kế giao diện của trang web nhỏ hơn đôh phân giải 800x600, thì bạn phải căn chỉnh cho nó nằm ra giữa màn hình - việc này tôi sẽ hướng dẫn bên phần HTML

4. Thiết kế các nút bấm cho trang web theo nội dung mà bạn sẽ đề ra.

SAU ĐÂY TÔI SẼ TRÌNH BÀY VÀI ĐIỀU VỀ KÍCH THƯỚC CẦN THIẾT CỦA TRANG WEB VỚI ĐỘ PHÂN GIẢI CỦA MÀN HÌNH 800x600

1. Nếu chỉ thiết kế trang web với giao diện phù hợp với màn hình 800x600 thì bạn có thể thiết kế giao diện trang web ở kích thước 800x600 . Tuy nhiên các trình duyệt web mà thông dụng nhất là IE không bao giờ có thể xem đầy đủ một bức hình 800x600 , do đó chiều ngang của trang web các bạn nên để khoảng 770 pixel , chiều cao có thể là 600 hoặc dài hơn tùy vào công việc của các bạn

điều này sẽ làm cho trình duyệt web không hiện thanh cuộn nằm ngang, và nó sẽ không gây mất thẩm mỹ cho trang web.

2. Sau khi tạo một file mới trong photoshop với kích thước tùy ý của các bạn , thì sau đó các bạn thiết kế theo sở thích của các bạn, nhưng nên chừa lại một khoảng không gian để sau này ghi thông tin web vào đó.

3. Theo cách thiết kế trang web của tôi, thì tôi thiết kế Banner trước, thiết kế banner trước nó sẽ ảnh hưởng đến cách trình bày web của bạn sau này

4. Tiếp đó là thiết kế dần xuống dưới

5. Sau đó tiến hành thiết kế các phần nền cho web , việc này tùy vào mỗi người thiết kế

6. Tiếp đó là bạn sẽ thiết kế những nút bấm riêng, sau đó đưa nó vào giao diện web, công đoạn thiết kế nút bấm phải được bạn làm riêng từ trước. Hiện nay có rất nhiều tutorial về các nút bấm đẹp, nếu không thích bạn có thể tự thiết kế theo cách riêng của mình .

Nút bấm có thể là một dòng chữ bình thường hoặc là một nút bấm riêng biệt mà bạn sẽ đặt lên giao diện trang web .

7. Sau khi hoàn tất các công đoạn thì về mặt giao diện của trang web các bạn đã hoàn thành. Nó thực ra chỉ là một cái Image đúng không .

CÁC BẠN CHÚ Ý : trong quá trình thiết kế thì mỗi một hình ảnh nào mà các bạn tạo ra trên trang web thì các bạn nên làm trên từng layer riêng, để sau này nếu thấy không ưng ý chỗ nào thì bạn sửa trên layer đó. Nên tạo ra các Set Folder để chứa các layer cùng loại, cho nó đỡ rối rắm, vì bạn sẽ tạo ra rất nhiều layer trong quá trình thiết kế giao diện. Ví dụ tôi chứa các nút bấm trong các Set này :

2. CẮT LAYOUT

Cắt Layout sau khi thiết kế xong giao diện của trang web là một việc làm hết sức quan trọng, nó có tác dụng sau:

1. Tách riêng các nút bấm ra khỏi image giao diện của trang web, việc này sẽ giúp cho bạn liên kết được nút bấm đến một trang web khác .

2. Tăng tốc độ tải website. Giao diện của trang web sẽ được tải nhanh hơn nếu như bạn cắt Layout, vì những hình ảnh được cắt ra sẽ được IE tải về theo từng mảnh, nếu để nguyên một cái Image lớn như vậy thì trình duyệt web sẽ tải về rất chậm. Nếu mà trang web của bạn tải về chậm thì sẽ làm người duyệt web dễ nản khi họ mới truy cập lần đầu tiên .

---

CÁC BƯỚC CẮT LAYOUT

Trước tiên bạn nên cắt cái banner trước , có người thích để nguyên cái banner . có người thì thích cắt nó ra làm nhiều mảnh , ở đây tôi không cắt nó , mà vẫn để nguyên , chỉ cắt nó ra khỏi theme của web thôi .

1. Nhấn K để sử dụng công cụ Slice Tool

2. Sau đó rê chuột và cắt lấy phần mà bạn muốn cắt. Vùng nào được cắt sẽ có số màu xanh hiện ra, vùng nào có số màu xám là vùng sẽ được photoshop tự động cắt. Việc này không ảnh hưởng gì hết.

3. Sau đó tôi tiến hành cắt cái mục tiêu đề làm 2 phần như các bạn thấy ở hình dưới

4. Tiếp đó rê chuột đến cắt các nút bấm , nhớ cắt sát viền nút bấm

5. Đối với các nút bấm không có hình dạng vuông hay chữ nhật (như các nút bấm bên phải) thì các bạn có thể dịnh kích cỡ tùy ý để cắt.

6. Tiếp đó cắt vùng mà bạn dự định sẽ ghi dữ liệu lên đó thường xuyên ,sau này khi soạn web , chúng ta sẽ xóa cái hình bị cắt ở vùng 11 và chỗ dó sẽ dùng để gõ chữ hay chèn hình ảnh khác - việc này sẽ thao tác bên phần HTML - hình

7. Tiếp đó, nếu muốn các bạn hãy cắt nhỏ những phần còn lại, mục đích là để web load nhanh hơn thôi.

8. Sau khi đã cắt hoàn thành, bạn hãy nhấn Ctrl+Shift+Alt+S hay vào File > Save for web để save trang web

Trong ô Setting bạn có thể lựa chọn file xuất ra sẽ là file GIF hay là JPG , ở đây tôi sẽ xuất ra file GIF

9. Sau khi nhấn Save thì hãy thiết lập như hình

- ô file name đặt tên là Index

- ô Save as type các bạn chọn HTML and Images (*.html)

10. Sau khi Save xong, thì bạn sẽ có 1 file index.html và 1 folder tên là images trong Folder này sẽ chứa tất cả các hình ảnh mà các bạn vừa cắt xong. Chú ý là không được đổi tên của folder này.

VẬY LÀ BẠN ĐÃ HOÀN THÀNH XONG PHẦN CẮT LAYOUT VÀ LƯU TRỮ TẠO WEB

Tới đây về cơ bản trang web của bạn đã hoàn thành, bạn hãy chạy file index kia xem nào

3. SỬ DỤNG HTML ĐỂ LÀM TRANG WEB HOẠT ĐỘNG

Ở đây tôi không thể nào mà phổ biến cho các bạn hết những kiến thức về HTML vì nó rất nhiều, do đó tôi chỉ hưỡng dẫn cho các bạn các thao tác cơ bản và tôi sẽ hướng dẫn bạn cách sử dụng một phần mềm chuyên nghiệp trong thiết kế web của hãng microsoft, đó là FrontPage.

1. Mở FrontPage ra - giao diện của nó sẽ như thế này

2. Nhấn Ctrl+O để mở file index mà bạn vừa lưu ở bài CẮT LAYOUT

3. Trước tiên tôi sẽ hưỡng dẫn bạn căn trang web ra giữa màn hình để cho người dùng ở độ phân giải nào cũng thấy nó nằm giữa màn hình. Như các bạn thấy ở hình dưới thì trang web bị lệch sang trái.

4. Kích chuột vào thẻ HTML bên cạnh thẻ Normal như hình

5. Bây giờ các bạn tìm đến thẻ lệnh :

align = "center" Hình :

6. Trang web sẽ được căn ra giữa màn hình, các bạn hãy nhấn vào thẻ Preview nằm bên cạnh thẻ HTML để kiểm tra kết quả

7. Bây giờ chúng ta sẽ xóa phần image mà các bạn dùng làm không gian để gõ text. Nhấn chuột phải vào vùng không gian đó và chọn CUT, hoặc nhấn chuột trái và nhấn phím delete

8. Sau khi xóa được cái image đó, bạn có thể gõ chữ bình thường vào đó. Bạn có thể trình bày những nội dung gì mà mình thích .

CHÚ Ý: Nội dung trình bày không được lớn hơn không gian trình bày, vì nó sẽ làm vỡ layout của trang web, không tin thì các bạn làm thử xem.

9. Việc tiếp theo là chúng ta sẽ liên kết các nút bấm đến một trang web khác.

Kích chuột phải vào nút bấm mà bạn muốn liên kết và chọn Hyperlink...

10. Gõ đường dẫn của trang web mà bạn muốn liên kết vào ô Address

Đó là một kiểu liên kết, kiểu liên kết này gọi là kiểu liên kết tuyệt đối. Kiểu liên kết này chỉ được dùng khi trang web mà bạn liên kết không nằm cùng host (hay nói cách khác là nó không nằm cùng 1 ổ cứng). Do đó nếu bạn đặt những kiểu liên kết tuyệt đối - đối với những dữ liệu nằm chung host - thì khi bạn đặt dữ liệu trên 1 máy chủ hay một ổ cứng khác thì liên kết sẽ bị sai và người dùng sẽ không truy cập trang web đó được.

Thông thường người ta hay sử dụng kiểu liên kết tương đối và sau đây là bài hưỡng dẫn

11. Có một vấn đề nhỏ sau khi các bạn tạo liên kết cho nút bấm, đó là nó sẽ tạo ra một viền màu xanh xung quanh nút bấm, như bạn thấy ở hình dưới đây

Việc này sẽ gây ra vỡ layout, tác hại của việc vỡ layout đó là các hình ảnh mà bạn cắt ra nó sẽ không khít với nhau mà mỗi hình nằm mỗi nơi.

12. Cách khắc phục đó là kích chuột phải vào nút bấm đó, chọn Picture Properties

13. Trong ô Border Thinkness các bạn gõ giá trị là 0

Viền xanh sẽ biến mất. Layout khi nhìn trong thẻ Normal sẽ không phản ánh đúng thực tế. Để kiểm tra kết quả chính xác thì bạn hãy nhấn Ctrl+S để save lại trang web, sau đó kích vào thẻ Preview . Nếu bạn muốn xem đầy đủ trên trình duyệt web InternerExplorer ( IE ) thì bạn vào File > Preview in Browser ..

14. Bây giờ tôi sẽ nói về liên kết tương đối, tôi lấy ví dụ với dòng chữ MÀN CHÀO HỎI

Các bạn chú ý là việc liên kết đối với chữ và hình ảnh tương tự nhau.

15. Ở hình trên thì dòng chữ của tôi nằm ở chính giữa vùng làm việc, tôi muốn đưa nó lên trên đầu vùng làm việc. Tôi sẽ làm như sau

+ Kích chuột phải lên vùng làm việc và chọn Cell Properties

+ Trong ô Vertical alignment các bạn chọn Top

+ dòng chữ sẽ được đưa lên đầu

16. Ở đây tôi sẽ tính như sau:

Khi người nào xem trang web của tôi khi kích chuột vào chữ MÀN CHÀO HỎI thì họ sẽ mở được 1 trang web khác và sẽ đọc được nội dung chào hỏi của tôi. Muốn làm được như vậy tôi phải tạo ra 1 trang web khác với nội dung là chào hỏi. Tôi tiến hành làm như sau:

17. Nhấn Ctrl+N để tạo 1 trang web mới, trên trang này chưa có nội dung gì. Sau đó bạn hãy gõ nội dung vào đó - hình

18. Sau khi tạo xong nội dung, bạn hãy save lại. Để việc sắp xếp các thư mục có khoa học thì bạn hãy tạo ra 1 folder với tên là chao_hoi , foder này các bạn đặt nó nằm ngang hàng với file index của theme sau đó save lại trang web này với tên là index trong thư mục chao_hoi. HÌNH

Save file index vào trong thư mục chào hỏi.

19. Bây giờ các bạn quay về trang web chứa giao diện trang web , tô đen dòng chữ MÀN CHÀO HỎI , sau đó kích chuột phải và chọn Hyperlink...

20. Với loại liên kết tương đối thì bạn không được gõ địa chỉ cụ thể của trang web vào ô Address, mà bạn hãy kích chuột vào thư mục chao_hoi để mở thư mục chứa file index ra, sau đó kích vào file index trong thư mục chao_hoi, lúc đó trong ô Address sẽ xuất hiện liên kết là chao_hoi\index.html. Xem hình

Như vậy: đối với liên kết tương đối thì các thư mục nằm chung ổ cứng (hay chung host) sẽ sử dụng cách liên kết này. Cho dù bạn đặt các file này ở bất kỳ đâu, trên đĩa CD hay trên một host bất kỳ - thì khi kích chuột vào chữ MÀN CHÀO HỎI - trang web chứa nội dung mà bạn vừa soạn ra sẽ được mở.

+ Nếu như bạn chưa hiểu thì tối sẽ lấy ví dụ sau: Nếu như bạn đặt toàn bộ file index & thư mục images của giao diện trang web mà bạn vừa thiết kế và thư mục chao_hoi trên ổ đĩa cứng C:\ . Nếu bạn lấy địa chỉ tuyệt đối cho dòng chữ MÀN CHÀO HỎI thì sẽ phải làm như sau: C:\chao_hoi\index.html. Nếu bạn chỉ chạy trang web của bạn trên ổ đĩa cứng nhà bạn thì được, nhưng nếu bạn copy nó vào đĩa CD hoặc đưa trang web của bạn lên một host nào đó thì khi người truy cập muốn xem trang web nằm trong thư mục chao_hoi thì sẽ không thể truy cập vào trang web đó được. Ngoại trừ bạn ra, vì bạn biết được địa chỉ tuyệt đối của trang web này.

21. Sau khi liên kết xong thì dòng chữ MÀN CHÀO HỎI sẽ được tô màu xanh và được gạch chân, nếu không muốn nó được gạch chân thì tô đen nó và nhấn Ctrl+U

---

Trên đây là toàn bộ nhũng kiến thức cơ bản để bạn có thể thiết kế được 1 trang web cho riêng mình, về phần HTML thì tôi chỉ hướng dẫn các bạn những cái cơ bản nhất để có thể thành lập được 1 trang web và hệ thống liên kết của nó. Nếu bạn có những vẫn đề gì thì hãy đưa ra những câu hỏi, tôi sẽ giải quyết giúp bạn trong lượng kiến thức cho phép.

VIẾT XONG BÀI NÀY TÔI LUÔN MONG MUỐN CÁC BẠN SẼ TẠO ĐƯỢC MỘT TRANG WEB CHO RIÊNG MÌNH. CHÚC CÁC BẠN THÀNH CÔNG.

Theo Killer