Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Site Builds
Code

Tạo một thiết kế web theo chủ đề Comic Book, Photoshop đến HTML+ CSS (Phần 2)

by
Difficulty:IntermediateLength:LongLanguages:

Vietnamese (Tiếng Việt) translation by Thai An (you can also view the original English article)

Một vài tuần trước, chúng tôi đã học cách tạo ra một thiết kế web chủ đề truyện tranh trên trang web chị em của chúng tôi, Webdesigntuts+. Hôm nay, chúng tôi sẽ giải quyết phần thứ hai: đó là thời gian để cắt thiết kế và biến nó thành một bố cục HTML chức năng, sẵn sàng để được chuyển đến bất kỳ CMS nào. Băt đâu nào!


Trước khi chúng tôi bắt đầu

Bạn có thể nhận được PSD của riêng bạn bằng cách làm theo quy trình từng bước tại Webdesigntuts+ hoặc chỉ cần tải xuống tại đây.

Vì đây không phải là một hướng dẫn cấp độ mới bắt đầu, tôi sẽ bỏ qua một số giải thích cơ bản - một kiến ​​thức làm việc về HTML và CSS được mong đợi cũng như một chút kiến ​​thức về việc cắt hình ảnh trên Photoshop.


Bước 1 - Bố cục HTML

Hãy bắt đầu bằng cách tạo thư mục công việc; vì hướng dẫn này không yêu cầu sử dụng ngôn ngữ phía máy chủ, nó có thể ở bất cứ đâu trên hệ thống của bạn. Tạo một tệp có tên index.html và ba thư mục ban đầu:

  • / hình ảnh
  • / js
  • /style

Nội dung của các thư mục này phải khá tự giải thích.

Thêm các vùng chứa cơ bản của trang vào index.html. Tôi đang gói tất cả mọi thứ với một div gọi là trang. Bên trong div đó, thêm ba cái nữa với ID của tiêu đề, nội dung và chân trang tương ứng.

Trong thư mục kiểu, tạo một tệp mới có tên default.css và thêm một thiết lập lại để loại bỏ tất cả các kiểu mặc định. Tôi đang sử dụng Eric Meyer nhưng cảm thấy tự do để bắt đầu với yêu thích của bạn.

Làm theo mã HTML cho bước này:

Và CSS:

Kiểm tra mã trong Firefox, bạn sẽ thấy một cái gì đó như thế này:


Bước 2 - Bố cục CSS cơ bản

Trước tiên hãy tạo cấu trúc của bố cục.

Chúng tôi gói tất cả nội dung bằng một vùng chứa rộng 960px và sau đó đặt chiều cao cho các div bên trong. Để có được chiều cao chính xác của mỗi div bạn có thể sử dụng công cụ thước kẻ Photoshop.

Chúng tôi sẽ cắt hình ảnh nền của toàn bộ trang và phần chân trang ngay bây giờ.

Trong Photoshop, mở Comicastic.psd và ẩn mọi thứ trừ các thư mục Header BG và Footer BG. Sử dụng công cụ "slice", vẽ một lát lớn từ trên cùng bên trái cho đến 575px bên dưới đường viền trên cùng. Tiếp theo, vẽ một lát khác từ hướng dẫn phân định nền chân trang (xem hình bên dưới). Tất nhiên, bạn có thể sử dụng các hướng dẫn để có được kết quả chính xác.

Sử dụng công cụ "slice selection", chọn hai slice được tạo gần đây và đặt tên cho từng cái có tên tương ứng - bg-body và bg-footer. Sau đó kích đúp vào tất cả các auto-slice và thay đổi "slice type" thành No Image.

Tiếp theo, chuyển đến Tệp> Lưu cho Web và Thiết bị. Chọn hai lát bạn muốn lưu (Giữ phím shift để chọn nhiều hơn một), đặt "loại tệp" thành JPG và đặt Chất lượng thành 70 và nhấp vào Lưu. Duyệt thư mục làm việc của bạn và chọn tệp gốc (hộp thoại này sẽ tự động lưu các tệp của bạn bên trong thư mục / hình ảnh).

Bây giờ bạn đã có hình nền, hãy thêm CSS cho tất cả các vùng chứa.

Chúng tôi sẽ đặt chiều cao kiểm tra cho các div ngoại trừ tiêu đề (chiều cao 180px thực sự) và thêm một số màu nền tạm thời cho mục đích thử nghiệm.

Thử nghiệm trong một trình duyệt, bạn nên có một cái gì đó giống như hình ảnh dưới đây.


Bước 3 - Cắt hình ảnh tiêu đề và nền nội dung

Bây giờ bạn đã biết cách cắt hình ảnh, hãy thực hiện tương tự với tất cả hình ảnh tiêu đề và nền nội dung (hoặc nền trước). Đối với hình ảnh tiêu đề, tạo bản sao của "comicastic.psd" tài liệu và ẩn tất cả mọi thứ trừ thư mục Logo và các lớp liên quan đến nền tìm kiếm (cộng với tôi đang thêm nút tìm kiếm trong chế độ xem này sau khi di chuyển nó một vài pixel sang phải). Bây giờ, vẽ các lát xung quanh các đoạn nhìn thấy được, và đặt tên cho chúng là logo, bg-search và nút tìm kiếm, tương ứng. Lưu chúng dưới dạng PNG với nền trong suốt.

Hãy tiếp tục với biểu ngữ nội dung.

Chỉ hiển thị thư mục Nền bên trong Biểu ngữ trên cùng, hiển thị thư mục Trang Curl và lớp Trang Bg bên dưới Nội dung trang và hiển thị thư mục Tiêu đề Bg bao gồm nền đen tổng thể. Sau đó, với các lớp có thể nhìn thấy, vẽ hai lát: một cho nền của biểu ngữ có tên là bg-banner và một lớp nhỏ khác cho trang curl có tên là content-page-curl. Sau đó lưu chúng cả hai ảnh dưới dạng JPEG.

Thêm một div mới có tên logo bên trong "header" và div khác có tên top-banner bên trong nội dung vào file HTML của chúng tôi.

Và mã CSS để làm cho chúng trông đúng:

Bây giờ bạn nên có một cái gì đó như vậy:


Bước 4 - Điều hướng hàng đầu

Hãy thêm HTML cho điều hướng trên cùng. Thêm mã sau bên trong div tiêu đề, bên dưới biểu trưng.

Công việc khó khăn nhất với div này sẽ là vị trí. Chúng tôi sẽ làm cho nó nổi bên phải, và chơi với padding để phù hợp với nó ở vị trí thích hợp của nó. Thêm CSS sau:


Bước 5 - Thay thế phông chữ

Vì tôi không có ý định sử dụng "Comic Sans" cho thiết kế này, chúng tôi sẽ sử dụng một kiểu chữ thú vị hơn. Chúng tôi sẽ tận dụng lợi thế của CSS3 để làm cho nó trông tuyệt vời trong các trình duyệt hiện đại.

Đầu tiên, tải xuống các gói phông chữ CSS "Tiêu đề Komika" và "Văn bản Komika" và đặt chúng vào một thư mục mới có tên / phông chữ. Mỗi bộ có một loạt các tệp phông chữ và tệp .CSS mà chúng tôi sẽ nhập vào tài liệu default.css của chúng tôi, như sau:

Bây giờ các phông chữ được nhập, chúng tôi có thể sử dụng chúng ở bất kỳ đâu trên trang web của chúng tôi. Mỗi bộ có một số biến thể để lựa chọn; bạn có thể sử dụng những cái theo thiết kế đồ họa. Đối với người mới bắt đầu, chúng tôi sẽ đặt tất cả văn bản nội dung bằng 'KomikaTextTightRegular' như sau:

Và bạn có thể kiểm tra kết quả trong trình duyệt:


Bước 6 - Tạo điều hướng trên cùng

Quay lại tệp psd ngay bây giờ. Ẩn tất cả mọi thứ trừ nền Tab, tạo một lát mới cho tab điều hướng có tên là bg-main-navigation và lưu nó cho web dưới dạng tệp PNG.

Trong tệp CSS của chúng tôi, hãy thêm các kiểu cho thanh điều hướng, để đạt được hiệu ứng di chuột mong muốn. Chúng ta sẽ thêm background cho hành động di chuột và tạo một kiểu tương tự cho cá thể a.selected. Về kiểu chữ, mỗi đồ họa, chúng tôi sẽ sử dụng "KomikaTextItalic" và thêm một kiểu chữ văn bản đẹp để làm cho nó trông đẹp hơn.

Trang của bạn nên như vậy ở giai đoạn phát triển này:


Bước 7 - Nội dung tiêu đề

Bên cạnh biểu tượng và thanh điều hướng, chúng tôi sẽ cần phải thêm thanh tìm kiếm và các liên kết truyền thông xã hội vào phần tiêu đề. Hãy bắt đầu bằng cách tạo hộp chứa trong HTML và thêm div sau bên trong div tiêu đề.

Và một số phong cách cần thiết:

Khi được thử nghiệm trong trình duyệt:


Bước 8 - Thanh tìm kiếm

Tiếp theo, chúng tôi sẽ bắt đầu tạo kiểu cho khu vực tìm kiếm. Về cơ bản nó là một hình thức với một hộp đầu vào và một nút (xem bước 3). Để làm điều này, hãy thêm mã sau vào bên trong "div nội dung tiêu đề:

Và kiểu dáng để làm cho nó trông đẹp mắt:

Điều đó sẽ cho chúng ta:


Bước 9 - Liên kết truyền thông xã hội

Bên dưới div tìm kiếm, thêm div có id là social_media. Trong đó, bạn có thể chèn danh sách các liên kết truyền thông xã hội do bạn chọn. Tôi đang sử dụng Gói biểu tượng truyền thông xã hội của Komodo Media

Và trên biểu định kiểu:


Bước 10 - Biểu ngữ trượt

Chúng ta sẽ bắt đầu với biểu ngữ trượt. Bắt đầu bằng cách tải xuống Easy Slider 1.5 và dán các tệp vào một thư mục có tên là Banner.

Có một số ví dụ trong thư mục thư viện-- chúng tôi sẽ bắt chước 02.html. Đổi tên tệp, nếu cần, xóa tất cả mã HTML không cần thiết và thay thế hình ảnh bằng một số hình ảnh mẫu.

Vì vậy, tệp HTML cho biểu ngữ phải giống như sau:

Và đây là CSS

Tại thời điểm này, bạn nên có một cái gì đó như thế này:

Đừng lo lắng nếu thanh trượt có một chút lỗi, chúng tôi sẽ sửa lỗi trong một phút.

Điều chỉnh vị trí và thay thế các mũi tên

Cắt hai mũi tên (trước và sau) và lưu chúng dưới dạng tệp PNG trong thư mục hình ảnh của thư mục kiểm tra biểu ngữ.

Sau đó điều chỉnh CSS để hoạt động chính xác với các mũi tên mới

Sản xuất:

Định vị

Bây giờ, chúng ta sẽ thiết lập vị trí, chiều rộng và chiều cao của tất cả các div liên quan đến biểu ngữ. Chúng tôi cũng sẽ sửa chữa thư viện JS để tránh bất kỳ vấn đề nào liên quan đến div bong bóng bổ sung.

Đây là CSS đã sửa đổi:

Và kết quả trong trình duyệt:

Bong bóng nền

Bây giờ, cắt nền nội dung bài đăng. Chỉ với các bong bóng nói chuyện có thể nhìn thấy trong tệp .PSD của bạn, hãy vẽ một Slice có tên "bg-bubble" và lưu nó dưới dạng tệp .png.

Sửa đổi CSS để thêm nền và điều chỉnh vị trí của div bong bóng, tương ứng.

Đây là cách nó trông trong trình duyệt; loại bỏ tất cả các màu nền tạm thời nếu bạn muốn.

Nội dung bài viết

Để hoàn thành phần biểu ngữ, hãy thêm HTML cho nội dung bài đăng.

Hợp nhất với tệp mẫu chính

Đã đến lúc hợp nhất mô-đun riêng biệt với tài liệu chính của chúng tôi.

Đầu tiên, sao chép thư mục / js của biểu ngữ vào thư mục gốc, sau đó thêm tất cả các hình ảnh biểu ngữ vào thư mục / images vào thư mục mẫu.

Tiếp theo, thêm mã sau vào trong thẻ của index.html của chúng tôi " tập tin:

Và thêm div biểu ngữ cho phù hợp bên trong div top_banner.

Và CSS hoàn chỉnh để làm cho biểu ngữ hoạt động

Chúng tôi sẽ sớm phong cách nội dung bài đăng nổi bật. Tại thời điểm này, mặc dù, bạn nên có một cái gì đó tương tự như hình ảnh sau đây:


Bước 11 - Trình bao bọc nội dung và nền

Tiếp tục với mockup, thêm một div bên dưới biểu ngữ trên cùng, có tên content_wrapper và bên trong một div khác có tên page_content, sẽ chứa thông tin thực tế.

Sau đó, để làm cho nó trông giống như thiết kế, chúng ta sẽ sử dụng CSS3 để thêm các góc tròn vào div page_content và curl trang mà chúng ta đã cắt trong Bước 3.

Trang của chúng ta sẽ trông như thế nào, tại thời điểm này:


Bước 12 - Đăng hình ảnh và tiêu đề

Hãy giả lập một bài kiểm tra.

Theo thiết kế, chúng tôi sẽ cần phải có một hình ảnh bình phương với tiêu đề bài viết và danh sách các loại được đặt trên hai sọc ở trên nó. Hãy xử lý HTML trước.

Tạo một div có tên là post và đặt nó bên trong div page_content. Sau đó thêm hình ảnh, tiêu đề và một số siêu dữ liệu vào vùng chứa.

CSS cho phần này là khó khăn vì mỗi bài đăng phải có chiều rộng 50% trong tham chiếu đến vùng chứa page_content, cộng với các sọc phải ở phía trước hình ảnh. Chúng tôi sẽ cần phải chơi xung quanh với vị trí tương đối và lợi nhuận tiêu cực để làm cho điều này xảy ra.

Bây giờ bạn sẽ có một cái gì đó như vậy:


Bước 13 - Đăng nền và vị trí nội dung

Bây giờ, chúng tôi sẽ thêm một div chứa nội dung bài đăng.

Cắt hình nền cho div post_content và lưu nó dưới dạng tệp PNG.

Đầu tiên, chúng ta sẽ thiết lập vị trí của nó trong tệp CSS.

Hãy xem trong trình duyệt:


Bước 14 - Đăng nội dung

Hãy thêm các thùng chứa cho bài đăng tóm tắt, đăng thông tin và nhận xét:

Và kiểu dáng để làm mọi thứ trông đẹp mắt:

Và chúng tôi đã hoàn thành bài đăng!


Bước 15 - Thêm bài viết khác

Hãy tiếp tục và thêm các bài đăng khác vào mô hình của bạn. Sao chép khối này nhiều lần như bạn muốn div bài đăng. Bạn nên loại bỏ chiều cao tạm thời mà chúng tôi đặt trên div page_content. Nếu mọi thứ được thực hiện đúng, bố cục sẽ tăng chiều cao khi chúng tôi thêm nhiều bài đăng hơn vào trang chủ.


Bước 16 - Nội dung bài đăng nổi bật

Bây giờ chúng ta đã hoàn thành bài đăng cơ bản, hãy tạo kiểu cho nội dung bài đăng nổi bật. Hãy nhớ cách chúng tôi có mã sau bên trong div bong bóng?

Thêm CSS sau và sao chép bong bóng trong tất cả các trang chiếu của biểu ngữ xoay của chúng tôi.

Tôi cũng đã thêm đường viền và hộp đổ bóng vào hình ảnh trượt:

Nó sẽ giống như vậy:


Bước 17 - Tiện ích chân trang

Thay vì thanh bên cổ điển, tôi muốn thêm chân trang tiện ích. Thêm mã sau vào bên trong chân trang div. Bên trong thanh bên, sẽ có một vùng chứa khác có tên là widget và bên trong div đó:

  • một tiêu đề
  • một danh sách không có thứ tự và
  • một div cho góc cong

Chúng tôi sẽ xử lý danh sách danh mục trước.

Bây giờ trong tập tin PSD, cắt góc, đặt tên nó là widget-curl và lưu hình ảnh cho web dưới dạng tệp JPG. Một lần nữa, cắt mũi tên nhỏ bên cạnh các liên kết, đặt tên là mũi tên và lưu nó dưới dạng tệp PNG.

Và chỉnh sửa tệp CSS như vậy:

Khi được thử nghiệm trong một trình duyệt, bạn sẽ thấy một cái gì đó giống như hình ảnh sau đây:


Bước 18 - Tiện ích khác

Tái tạo mã HTML để thêm tiện ích danh sách thứ hai hoặc thậm chí là danh sách thứ ba. Lần này, chúng tôi sẽ thêm lưu trữ vào chân trang. Bạn có thể kiểm tra bố cục bây giờ thêm một số bản sao của div tiện ích để xem nó trông như thế nào. Tối ưu, khu vực chân trang sẽ tăng lên khi bạn thêm nhiều tiện ích con hơn.

Đây là cách nó trông với phần lưu trữ được thêm vào:


Bước 19 - Pane có tab

Như một ví dụ về một widget phức tạp hơn, chúng ta hãy thêm một khung tab với ba loại nội dung khác nhau trong mỗi tab.

Trước tiên, hãy thêm mã HTML sau làm đánh dấu cơ bản: danh sách không theo thứ tự cho các tab và div với các id khác nhau cho nội dung. Tôi đang thêm một lớp chung, được đặt tên tab cho tất cả các div nội dung để tránh trùng lặp mã trong tệp CSS.

Hãy tạo một tài liệu JavaScript, đặt tên là tabs.js và lưu nó vào thư mục / js. Bao gồm nó bằng cách thêm dòng này vào thẻ .

Bây giờ, thêm một khung tab jQuery cơ bản bằng cách thêm đoạn mã sau vào tệp tabs.js.

Với chức năng JavaScript hoạt động, hãy thêm kiểu dáng để làm cho nó trông đẹp mắt. Đầu tiên, chúng ta cần cắt mũi tên nhỏ trỏ đến tab đã chọn. Đặt tên cho nó là mũi tên tab và lưu nó dưới dạng PNG.

Bây giờ hãy thêm đoạn mã sau vào tệp CSS:

Bây giờ bạn nên có bảng tab làm việc; chúng ta hãy thêm nội dung bên trong!


Bước 20 - Tab Nội dung

Hãy tiếp tục và thêm một số nội dung vào tab. Hãy xem đồ họa, bạn sẽ nhận thấy rằng chúng tôi có một danh sách ba bài viết (mới nhất và phổ biến) với tiêu đề và bản tóm tắt và một máy nhắn tin ở phía dưới để điều hướng qua các bài đăng.

Dán mã sau vào bên trong tab:

Và bây giờ là CSS:

Tái tạo HTML cho mỗi tab. Đây là cách nó sẽ xem xét:


Bước 21 - Chân trang

Cuối cùng, thêm thanh điều hướng chân trang và thông tin bản quyền:

Bây giờ cắt dòng gradient 1px từ tệp PSD, đặt tên là "bg-footer-line" và lưu nó dưới dạng JPG. Cuối cùng, chỉnh sửa CSS để thiết lập mọi thứ.


Tổng kết

.

Và đó là nó! Chúng tôi đã hoàn tất quá trình chuyển đổi. Mã ở đây đã được thử nghiệm trong tất cả các trình duyệt chính. Nếu bạn cần khả năng tương thích IE6 và 7, nó không phải là một việc lớn để viết một vài bản sửa lỗi cho họ cụ thể. Thiết kế của chúng tôi bây giờ đã sẵn sàng để được tích hợp vào bất kỳ CMS nào như một làn da. Chúc may mắn và cảm ơn bạn rất nhiều vì đã đọc!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.