Dịch vụ

Sản phẩm

Tin tức

Tin tức

Bạn luôn biết rằng vai trò của hình ảnh trong rất nhiều khía cạnh trong cuộc sống cũng như trong marketing và cũng như thế vai trò của hình ảnh trong thiết kế một trang web là vô cùng quan trọng. Bạn và hầu hết mọi người có thường nghĩ rằng hình ảnh trong bài viết không quan trọng. Tuy nhiên, thực tế hình ảnh có tầm ảnh hưởng sau titl, nội dung và bố cục bài viết. Thiết kế website cần có bài viết với hình ảnh sinh động, đúng chủ đề giúp người đọc hiểu, ấn tượng hơn với bài viết và với trang web đó. Hãy cùng nhau tìm hiểu kỹ hơn về vai trò của hình ảnh một cách kỹ hơn trong thiết kế web ở bài viết này.

Bố cục:

  • Giới thiệu về vai trò của hình ảnh
  • Yêu cầu về hình ảnh tiêu chuẩn
  • Phân trang hình ảnh
  • Upload hình ảnh

      1. Ý nghĩa của hình ảnh

Đối với một website hay một bài viết hình ảnh có tác dụng bổ trợ, được coi là một dạng keyword. Một bài viết có hình ảnh đẹp, phù hợp chính là bộ mặt của bài viết đó, giúp bài viết được sinh động và ấn tượng hơn. Hình ảnh giúp người viết thể hiện một phần nội dung bài viết hoặc toàn bộ nội dung mà bài viết đó đề cập tới.

Tìm kiếm thông tin hiện nay không chỉ tìm nội dung mà nhiều người còn tìm thông qua hình ảnh. Chính vì thế, một website sẽ thu hút khách hàng nhiều hơn. Hình ảnh và chú thích của bài viết có vai trò quan trọng, không thể thiếu ở mỗi bài viết cụ thể.

Khi thiết kế website chuẩn có hai dạng hình ảnh được sử dụng là hình ảnh Thumbnail và hình ảnh có trong bài viết. Bạn viết bài ở lĩnh vực nào, theo bất kỳ dạng nào hình ảnh cũng cần đảm bảo theo những yêu cầu nhất định.

     2. Yêu cầu đối với hình ảnh đẹp và phù hợp

  • Hình ảnh liên quan tới nội dung bài viết:

Đây là yêu cầu đầu tiên, quan trọng nhất. Bài viết có hình ảnh đẹp, rõ nét song đặt sai vị trí, không liên quan tới nội dung bài viết hoàn toàn không có ý nghĩa. Một bài viết đồ chơi trẻ em nhưng hình ảnh đi kèm lại là sản phẩm điện tử, di động,… chẳng có sự liên quan, mối liên hệ nào với nhau.

  • Yêu cầu về kích thước hình ảnh

Chọn hình ảnh đẹp cho bài viết cần chú ý tới kích thước của hình ảnh đó. Một hình ảnh có kích cỡ vừa phải, phù hợp với bố cục tạo thiện cảm lớn hơn với khách hàng. Thiết kế website cần đặc biệt chú ý tới yếu tố này. Việc lựa chọn hình ảnh có kích cỡ không phù hợp khiến bài viết không cân xứng, không thu hút được người đọc.

  • Hình ảnh yêu cầu độ sắc nét cao

Khi thiết kế website chuyên nghiệp sử dụng các bài viết chuẩn SEO cần chú ý tới độ sắc nét của hình ảnh được chọn. Một bức ảnh mờ, không rõ ràng, không nhìn được chi tiết khiến người xem cảm thấy vô cùng khó chịu.

  • Có ảnh hưởng tới bố cục chung của website.

Hãy đặt mình vào vị thế người đọc, tự đánh giá về chất lượng bài viết của mình. Chú ý quan tâm tới chất lượng hình ảnh, độ sắc nét của hình ảnh trong bài viết bằng con mắt của khách hàng. Những hình ảnh sắc nét, sống động có sự thu hút lớn, giúp khách hàng muốn xem, tiếp tục đọc thông tin mà bạn cung cấp

Thiết kế website chuẩn là nhu cầu của nhiều doanh nghiệp, tổ chức. Sử dụng hình ảnh chất lượng cao cũng góp phần lớn tạo nên một website chuyên nghiệp.

     3. Tạo table hình ảnh và folder lưu trữ

Các bạn tạo table images và chạy lênh SQL sau:

Chúng ta sẽ được table như sau:

Trong đó:

  • url: là đường dẫn của hình ảnh, bao gồm domain (Ví dụ: http://domain.com/upload/image.jpg)
  • type: là đuôi mở rộng của ảnh (Ví dụ: jpg, png, jpeg, gif, ...)
  • size: là kích thước của ảnh, đơn vị là byte

Để tạo folder chứa các hình ảnh, các bạn tạo cho mình folder upload cùng cấp với folder admin. Mình không để folder này trong folder admin vì khi người dùng xem url ảnh thì sẽ thấy đường dẫn /admin/upload/ nên rất là nguy hiểm.

     4. Phân trang hình ảnh

Trong phần hình ảnh này, chúng ta sẽ phân ra 2 trang:

  • Trang hiển thị danh sách hình ảnh (http://domain.com/admin/photos/)
  • Trang upload hình ảnh (http://domain.com/admin/photos/add)

Các bạn mở file admin/templates/photos.php lên và dán nội dung sau:

 

      4. Upload hình ảnh

Các bạn vào đường dẫn http://domain.com/admin/photos/add để bắt đầu làm nhé!

Xây dựng template

Các bạn mở file admin/templates/photos.php lên và dán đoạn code này vào bên dưới dòng // Content upload hình ảnh:


Sau đó các bạn chạy lại trang thì sẽ được kết quả như sau:

Mở file admin/js/form.js lên và copy các đoạn code sau:

Đầu tiên là chức năng xem ảnh trước khi upload:

       5. Viết PHP xử lý dữ liệu

Các bạn tạo cho mình file admin/photos.php và chèn nội dung này vào:

Có rất nhiều cách để tạo folder lưu trữ từng file ảnh, nhưng mình dùng các phổ biến hiện nay là sẽ lưu các file ảnh theo từng folder ngày/tháng/năm để dễ dàng tìm kiếm và quản lý.

Ok! Bây giờ các bạn chạy thử để xem thành quả nào!

Trong folder:

Trong table:

Hình ảnh và các kỹ thuật xử lý hình ảnh có vai trò vô cùng quan trọng và tầm ảnh hưởng rất lớn đối với việc thiết kế một trang web, mong rằng bài viết này sẽ giúp ích cho bạn trong quá trình thực hiện công việc của mình
.