Kỹ thuật trong thiết kế layout web

Có rất nhiều phần mềm hỗ trợ cho công việc thiết kế website của nhiều nhà sản xuất phần mềm trên thế giới, trong đó nổi bật và phổ biến nhất là hãng Adobe. Tại Việt Nam hầu hết các nhà thiết kế đã sử dụng thiết kế layout dùng phần mềm của Adobe. Photoshop: Phần mềm xử lý hình ảnh, quản lý ảnh theo dạng bitmap. Người thiết kế dùng photoshop để thể hiện layout cho các trang trong website cho giai đoạn đầu tiên sau bước tìm ý tưởng và phát thảo....
Nội dung trích xuất từ tài liệu:
Kỹ thuật trong thiết kế layout web Kỹ thuật trong thiết kế layout web 3.1 Các phần mềm sử dụng Có rất nhiều phần mềm hỗ trợ cho công việc thiết kế website của nhiều nhà sản xuất phần mềm trên thế giới, trong đó nổi bật và phổ biến nhất là hãng Adobe. Tại Việt Nam hầu hết các nhà thiết kế đã sử dụng thiết kế layout dùng phần mềm của Adobe. 3.1.1 Photoshop: Phần mềm xử lý hình ảnh, quản lý ảnh theo dạng bitmap. Người thiết kế dùng photoshop để thể hiện layout cho các trang trong website cho giai đoạn đầu tiên sau bước tìm ý tưởng và phát thảo 3.1.2 Firework: Người thiết kế cũng có thể sử dụng chương trình này để tạo layout. Đây là phần mềm quản lý dữ liệu theo dạng vector. 3.1.3 Flash: Phần mềm dùng để tạo hình ảnh chuyển động. Ưu điểm nổi bật của Flash là tạo ra được những hình ảnh chuyển động mềm mại, mịn màng với dung lượng lưu trữ thấp. Hầu hết các chuyển động trên website chúng ta thấy đều được tạo bằng Flash. Ngoài ra các phiên bản sau này của Flash được kết nối với ngôn ngữ lập trình actionscript và cở sở dữ liệu. Vì vậy Flash không chỉ là một ứng dụng dành cho người thiết kế mà cả những người lập trình trong việc tạo ra cái đẹp trong thế giới website 3.1.4 Dreamweaver: Phần mềm tạo file HTML phổ biến. Sau khi thiết kế hoàn chỉnh bên photoshop chúng ta dùng phần mềm này để chuyển file thiết kế theo dạng web. 3.1.4 Kỹ thuật tạo file HTML và CSS: Để tạo được một file dạng website đòi hỏi kiến thức cơ bản cần biết đó là ngôn ngữ HTML. File HTML để tạo ra nội dung của website và CSS là phần điều khiển nội dung ấy hiển thị theo thiết kế được tạo sẳn bên Photoshop. Bạn có thể học qua khóa đào tạo HTML và CSS của một trung tâm nào đó khoảng 2-3 tháng có những khái niệm về nó. Đồng thời phải phải trải qua vài dự án thực tế để hoàn thiện kỹ năng này. Trong tài liệu tôi không đề cập chi tiết kỹ thuật tạo HTML mà đây là những khái niệm ban đầu giúp các bạn tiếp cận và hiểu được web là cái gì. 3.2 Những đặt trưng của thiết kế web 3.2.1 Đặc điểm của file thiết kế. Chuẩn web phổ biến hiện nay được thiết kế thích hợp cho màn hình có kích thước 1024×768px. Vì thế kích thước của một trang web sẽ có chiều ngang là 1000px, Độ cao của file có thể ngắn hay dài tuỳ theo nội dung của trang. Kích thước 1 trang web với màn hình 1024×768px không có thanh cuộn đứng và thanh cuộn ngang thường sẽ có kích thước các chiều lớn nhất là (WxH)1000×550px. Độ phân giải sử dụng cho web là 72px/inch. Chế độ màu RGB Khi thiết kế web tất cả sự xem xét đẹp xấu đều trực tiếp qua màn hình. Vì thế cần có một màn hình đẹp, màu màn hình được điều chỉnh chuẩn nhất. Khác với hàng in hình ảnh cần phải được chất lượng cao nhất khi phóng lớn, nhưng đối với website nếu thiết kế của chúng ta view tốt nhất, đẹp nhất ở chế độ zoom 100% là đạt yêu cầu. 3.2.2 Độ sắc nét Với thiết kế web, độ sắc nét của các đường biên được đặc biệt chú trọng nhằm tạo sự chính xác đến từng pixel trong file. Cần phải làm rõ ở bóng đổ các nút, sự phân biệt giữa 2 màu gần kề phải là rõ ràng. Ví dụ: biên màu đỏ (red) và màu đen (back) thì phải đảm bảo tại đường biên này không có bất kỳ màu trung gian nào, zoom lớn file để kiểm soát đường biên. 3.2.3 Các loại file ảnh trên website: Khi dữ liệu khi lên internet cần phải quan tâm đến dung lượng file hình ảnh nhằm tăng tốc độ truy cập của người sử dụng. Vì vậy save một hình ảnh ở dạng file phù hợp nhất góp phần làm giảm dụng lượng file mà vẫn đảm bảo chất lượng ảnh hiển thị. JPG: thích hợp với những hình ảnh có nhiều màu và diện tích lớn như ảnh chụp, ảnh có dùng màu chuyển (gradient). Ảnh JPG không hỗ trợ tính trong suốt. GIF: dành cho ảnh có size nhỏ, ít màu như icon, văn bản text mà dùng dạng hình. Hỗ trợ hình trong suốt và hình động PNG: cũng được chấp nhận hiển thị internet trong các phiên bản mới của các trinh duyệt. hộ trợ tính trong suốt tốt hơn dạng GIF. SWF: đây là dạng ảnh chuyển động được tạo bằng Flash, Swift, Flex,… Đặc tính dạng file này là dung lượng file nhẹ, sự chuyển động mịn màng và uyển chuyển. Hầu hết các hình động trên web hiện nay là sử dụng dạng file này 3.2.4 Font chữ Chỉ có một ít font chữ được hỗ trợ thống nhất trên cáctrình duyệt mà thôi. Vì vậy tất cả các font chữ dạng văn bản trên web phải được chọn lựa trên các font chữ đó. Nói như thế thì không có nghĩ là chúng ta không có cách khi muốn dùng những font đẹp để trang trí cho web. Với những trường hợp này, Ta sẽ trữ những text này ở dạng hình ảnh để đưa vào web Các font chữ được hệ thống chấp nhận và luôn hiển thị đúng font ở các trình duyệt: Arial, Times New Roman, Courier New, Georgia, Geneva, Venada Kiểu mã được sử dụng cho tiếng Việt là Unicode, không sử dụng kiểu VNI. Điều quan trọng trong thiết kế là sự phân biệt giữa text ở dạng hình ảnh và text ở dạng text trong trang HTML. Trong photoshop các option này được thể hiện ở các dạng: none, smooth, strong, shape, …Ta đặc biệt quan tâm kiểu none để minh hoạ cho các text thật sự là text bên HTML, với kiểu none này thì size thích hợp nhất là size 10,11,12. Size 12 là được phổ biến nhất vừa đọc nhất cho các nội dung bài viết trong trang web. Các size khác, các font khác nếu muốn sử dụng để hiển thị trên website tốt nhất không sử dụng dạng none, và khi chuyển qua ...