Các mẫu psd đơn giản nhất để bố trí. Chuyên gia – Mẫu PSD dành cho kinh doanh và tài chính
Khi phát triển một trang web, tốt nhất bạn nên đơn giản hóa mọi thứ nhiều nhất có thể, có cơ hội cài đặt một mẫu tạo sẵn chỉ sau vài cú nhấp chuột và bắt đầu. Điều này đặc biệt đúng với những người không giỏi lập trình hoặc bị hạn chế về thời gian. Nhưng nếu mục tiêu của bạn là làm cho trang web của mình trở nên độc đáo hơn, bạn có những kỹ năng nhất định về bố cục nhưng vẫn muốn tiết kiệm thời gian thì có một giải pháp tuyệt vời - bố cục trang web làm sẵn để bố trí.
Những bố cục như vậy được tạo ra bởi các nhà thiết kế bằng Photoshop và trên thực tế, là những tệp đồ họa thông thường của các trang. Chúng không bị cắt mà ở dạng tập tin duy nhất. Ưu điểm của họ là người thiết kế bố cục sẽ có thể tùy chỉnh thiết kế một cách độc lập để phù hợp với nhu cầu cá nhân của khách hàng. Và các mẫu PSD có giá khá rẻ. Trên một trong những nền tảng mẫu hàng đầu, Themeforest, giá bố cục bắt đầu từ $3.
Đối với người dùng thông thường, bố cục trang web sẽ không đặc biệt hữu ích, vì vậy tôi khuyên bạn không nên lãng phí thêm thời gian và căng thẳng mà hãy chọn ngay một mẫu trang web làm sẵn. Có, chúng đắt hơn các mẫu PSD, nhưng sự khác biệt này sẽ được bù đắp nhiều hơn bằng thời gian tiết kiệm được và không cần phải bố trí thêm cũng như thuê chuyên gia để thích ứng với một hệ thống cụ thể. Chúng tôi có toàn bộ phần trên trang web của mình dành riêng cho hàng nghìn người cho bất kỳ mục đích nào. Chúng tôi cũng có các mẫu cho CMS khác. Với họ, bạn sẽ có thể hiểu rằng việc phát triển trang web trên thực tế rất đơn giản!
Đối với người dùng chuyên nghiệp, chúng tôi giới thiệu 20 bố cục PSD tốt nhất cho nhiều mục đích khác nhau: kinh doanh, sáng tạo, blog và thương mại điện tử. Hầu hết tất cả các bố cục PSD đều có phiên bản WordPress, vì vậy tôi cũng khuyên người dùng mới bắt đầu nên đọc bài đánh giá này.
Bố cục trang web để bố trí cho người mới bắt đầu và người dùng có kinh nghiệm
TheFox – bố cục trang web để sử dụng đa mục đích
Bố cục phổ biến nhất này có các thành phần dành cho blog, cửa hàng, trang đích, danh mục đầu tư và trang web công ty. Tất cả đều được thực hiện với một cảm giác hương vị và phong cách. Bộ này bao gồm 280 tệp PSD. Những người yêu thích WordPress có quyền truy cập vào phiên bản làm sẵn cho CMS này.
Avada – bố cục PSD phổ quát
Bố cục này chứa 59 tệp PSD với thiết kế độc đáo cho các loại trang web khác nhau, bao gồm cửa hàng trực tuyến, danh mục đầu tư và blog. Phiên bản đóng hộp và rộng có sẵn. Ngoài ra còn có phiên bản WordPress đầy đủ của mẫu Avada, đây là giải pháp WordPress phổ biến nhất trên thế giới (360 nghìn khách hàng hài lòng).
AdelFox – Mẫu PSD đa năng
150 tệp Photoshop chứa hàng tá biến thể của trang chủ, cửa hàng trực tuyến, danh mục đầu tư, blog và các trang khác. Tất cả đều hỗ trợ làm việc với shortcode, nghĩa là việc thêm nội dung sẽ rất đơn giản. Tùy chọn ứng dụng: blog sáng tạo, trang tin tức, danh mục đầu tư cá nhân và trang web công ty.
Đen + Trắng – bố cục đơn giản với thiết kế tối giản
Một lựa chọn gọn gàng, trang nhã dành cho những ai muốn làm cho trang web của họ trở nên độc đáo hơn. Lý tưởng cho các trang web có hình ảnh đẹp. Không có gì thừa - chỉ những thứ cần thiết.
LỚN – bố cục PSD phổ quát cho một trang web lý tưởng
Bố cục rất phong cách và sẽ cung cấp cho bạn nhiều lựa chọn cho bất kỳ nhiệm vụ nào. Sử dụng kỹ năng Photoshop, bạn có thể làm cho thiết kế của mình trở nên độc đáo. Hỗ trợ các phần có chiều rộng đầy đủ, accordion và menu thả xuống.
Bố cục này có phiên bản WordPress và Joomla để giúp việc phát triển dễ dàng hơn.
Enfold – bố cục trang web phổ biến để bố trí ở định dạng PSD
Đây là cách bố trí phổ quát cho bất kỳ công ty nào hoạt động trong bất kỳ lĩnh vực hoạt động nào. 31 tệp Photoshop được tổ chức tốt cho phép bạn điều chỉnh cài đặt một chút để tạo ra một thiết kế độc đáo. Tất cả các biểu tượng và phông chữ trong bố cục đều miễn phí. Ngoài ra còn có một chủ đề WordPress tên là Enfold dành cho những ai không muốn lo lắng về nó.
Waxom – Mô hình Photoshop phổ quát sạch sẽ
238 tệp, thiết kế gọn gàng, phông chữ Google và lưới Bootstrap. Các lĩnh vực ứng dụng: danh mục đầu tư, lưu trữ, y học, du lịch, nhà thờ, bất động sản, ô tô, thương mại và kinh doanh trực tuyến. Ngoài ra còn có bố cục dành cho thiết bị di động và chủ đề WordPress chỉ với 59 USD.
Vòng kết nối – bố cục trang web thú vị với thiết kế hoàn hảo
Bố cục này kết hợp thiết kế tuyệt đẹp với chức năng mạnh mẽ và dễ sử dụng. Hỗ trợ làm việc với lưới Bootstrap. Tất cả 14 tệp PSD đều mở được trong mọi phiên bản Photoshop. Họ tổ chức các lớp rất tốt để làm cho chúng dễ dàng làm việc.
Travelo – bộ bố cục dành cho các công ty du lịch
Bố cục này chứa các thiết kế đầy phong cách dành cho các công ty lữ hành và đại lý du lịch. 21 tùy chọn thanh trượt có hỗ trợ Revolution và Layer Slider. 12 bố cục trang chủ. Ngoài ra còn có một phiên bản dành cho WordPress.
Delimondo – bố cục trang web nhà hàng đáp ứng
Có 5 kiểu thiết kế có sẵn trong bố cục này, mỗi kiểu có 10 trang. Chỉ có 50 tệp PSD để tùy chỉnh thiết kế chi tiết. Hỗ trợ thanh trượt, hình thức đặt chỗ và phông chữ Google miễn phí.
Đây là một bố cục thiết kế đặc biệt, được người dùng Nga đặc biệt ưa chuộng. Bố cục hỗ trợ các tùy chọn trang chủ, cũng như danh mục, so sánh sản phẩm, giỏ hàng, thanh toán, đăng nhập/đăng ký, tài khoản, blog và nhiều trang khác.
Đặt chuyến du lịch của bạn – bố cục trang web dành cho bố cục của nhà điều hành tour du lịch
Mẫu PSD này đã quen thuộc với độc giả của chúng tôi nhờ mẫu WordPress dành cho dịch vụ đặt vé, đại lý du lịch, khách sạn và blog du lịch. Các file được thiết kế có trang chủ với thanh tìm kiếm, trang kết quả tìm kiếm và trang khách sạn với đầy đủ thông tin. Tổng cộng có 16 tệp PSD.
Đại lý du lịch – bố cục trang web PSD du lịch đa tác vụ
Thiết kế gọn gàng với các tính năng đặt chỗ dành cho đại lý du lịch và bất động sản. Có ba kiểu màu: xanh dương, xanh lá cây và cam. Tổng cộng có tới 59 tệp PSD!
Để biết các bài đánh giá về các trang web WordPress làm sẵn dành cho ngành du lịch, hãy xem và.
Super Duper - bố cục đầy phong cách cho mọi doanh nghiệp
Trong bố cục gồm 150 tệp Photoshop này, bạn sẽ tìm thấy 21 bố cục trang chủ, hơn 50 bố cục cửa hàng trực tuyến, 10 trang blog và thậm chí 2 bố cục trang một trang. Bố trí di động được cung cấp.
Carry Hill – Mô hình trang web trường học PSD
Thiết kế độc đáo của bố cục này rất phù hợp cho cả trang web trường học và trang web sáng tạo. 8 tệp PSD đơn giản với thiết kế trang chủ, blog, thư viện, chi tiết liên hệ và các trang khác. Có hỗ trợ cho Doodles.
Chúng tôi đã xem xét các chủ đề WordPress giáo dục trong một số bài đánh giá: , và .
Từ tác giả: Hôm nay là một ngày tuyệt vời để thực hiện thay đổi nhanh chóng cho trang web của bạn! Sẵn sàng để xây dựng doanh nghiệp của bạn trực tuyến? Bạn có muốn tạo một trang web mới với thiết kế mới nhất, từng pixel một không? Hay bạn muốn thiết kế lại website cũ cho phù hợp với xu hướng mới? Để làm được điều này, bạn cần phải là một người thực sự sáng tạo và biết cách làm việc với Photoshop để tạo ra những trang web đẳng cấp nhất. Ngay cả khi bạn là một nhà thiết kế web chuyên nghiệp với các kỹ năng phù hợp, vẫn cần có thời gian để điều chỉnh từng pixel, tạo tất cả các trang cho trang web của khách hàng và chú ý đến mọi thành phần giao diện người dùng, khu vực và chi tiết nhỏ. Tất cả điều này cần có thời gian.
Sẽ nhanh hơn nhiều khi lấy một mẫu trang web PSD chất lượng cao đã được bố trí cẩn thận đến từng pixel. Chúng tôi có rất nhiều lựa chọn các tệp Photoshop khác nhau. Chúng có thể được sử dụng một lần hoặc đăng ký hàng tháng.
Mẫu trang web PSD tốt nhất trên Envato Elements (Không giới hạn sử dụng)
Vào năm 2016, trang web Envato Elements đã được ra mắt và ngay lập tức bắt đầu trở nên phổ biến rộng rãi. Chỉ có một ưu đãi trên trang web (bao gồm tất cả):
Đăng ký Envato Elements và bạn có thể tải xuống không giới hạn các mẫu trang web psd, chủ đề, phông chữ, bộ đồ họa, v.v. Tất cả chỉ với một khoản phí hàng tháng. Mọi thứ đều chính xác! Tải xuống bao nhiêu mẫu và đồ họa chuyên nghiệp tùy thích, tùy chỉnh tất cả để phù hợp với dự án của bạn.
Dưới đây là mẫu phổ biến nhất trên Envato Elements - Elementy Multiutil PSD. Bộ này bao gồm 19 tệp PSD, bố cục cửa hàng, thiết kế blog, trang danh mục đầu tư, v.v.
Nếu bạn đăng ký Envato Elements, bạn có thể tải xuống các tệp không giới hạn với khả năng sử dụng lại không giới hạn chỉ với 29 USD mỗi tháng. Giá thông thường mỗi tháng là $49, bây giờ là lúc để nhận được mức giảm giá lớn này.
Nếu nhu cầu của bạn bị hạn chế hoặc bạn muốn mua riêng đồ họa và tài liệu web, chúng tôi có hàng nghìn mẫu tạo sẵn trên ThemeForest.
Mẫu website PSD trên ThemeForest
Dưới đây là các mẫu trang web PSD HÀNG ĐẦU cho năm 2016 mà bạn có thể mua hoặc tải xuống. Đây chỉ là một lượng nhỏ trong số lượng mà các nhà thiết kế web chuyên nghiệp tải lên ThemeForest mỗi tuần. Hãy xem các mẫu trang web Photoshop tốt nhất năm 2016:
Thiết kế phù hợp có thể biến một trang web tầm thường thành một tác phẩm nghệ thuật:
Doanh số bán hàng trên trang web của bạn có thể tăng vọt và bạn có thể để lại ấn tượng lâu dài với người mua tiềm năng bằng cách tăng giá tối thiểu.
Bạn có thể xây dựng lại bản sắc của mình - biến một thương hiệu tầm thường thành viên kẹo.
Doanh nghiệp của bạn (hoặc khách hàng của bạn) có thể hiện thực hóa các kế hoạch và tiềm năng trực tuyến của mình!
TOP 10 mẫu trang web PSD (từ trang web ThemeForest năm 2016)
Dưới đây là TOP 10 mẫu trang web PSD trên ThemeForest. Tất cả các mẫu đều được tạo bởi các nhà thiết kế web tài năng, những người đã dành thời gian và sự quan tâm đến từng chi tiết của các tệp PSD này.
1. Cesis – mẫu trang web PSD toàn diện, đa mục đích
Bộ mẫu PSD tốt nhất năm 2016 với nhiều lựa chọn tính năng. Tuyển chọn hơn 100 mẫu thiết kế trong Photoshop, bố cục rõ ràng và rất linh hoạt. Các mẫu tuyệt đẹp, được điều chỉnh từng pixel, dựa trên hệ thống lưới 1170px. Sử dụng bố cục để tạo trang web cho bất kỳ loại hình công ty nào, từ blog thời trang đến danh mục nghệ thuật cho đến các doanh nghiệp sáng tạo.
2. OnePro – mẫu website PSD sáng tạo
One pro là một mẫu trang web SPD gọn gàng với thiết kế phổ biến. Mẫu sử dụng hệ thống lưới tốt, có thể được sử dụng để tạo nhiều trang web khác nhau với các trang cá nhân, cửa hàng hoặc blog công ty. Mẫu này có tối thiểu 55 tệp PSD được sắp xếp hợp lý. Sử dụng chủ đề này để nhanh chóng tạo các trang web đẹp.
3. Mẫu Electro - PSD cho cửa hàng điện tử trực tuyến
Electro là một bộ 36 mẫu PSD có tính ứng dụng cao. Mẫu có thiết kế gọn gàng, nhẹ nhàng, hoàn toàn sẵn sàng để tạo ra một cửa hàng điện tử trực tuyến tuyệt vời. Các tệp mẫu được tổ chức chuyên nghiệp và xếp thành từng nhóm để dễ dàng thao tác. Nó cũng đi kèm với ba trang chủ độc đáo và 5 tiêu đề có thể xếp chồng lên nhau.
Xu hướng và cách tiếp cận hiện đại trong phát triển web
Tìm hiểu thuật toán để tăng trưởng nhanh chóng từ đầu trong việc xây dựng trang web
4. Circle – mẫu website PSD độc đáo
Circle là một mẫu trang web PSD có thiết kế tuyệt vời. Bạn sẽ nhận được 173 tệp PSD phân lớp cũng như nhiều thiết kế khác nhau. Đây là một bộ trang web hiện đại, gọn gàng và chuyên nghiệp có thể được tùy chỉnh để phù hợp với các công ty khác nhau. Các thiết kế dựa trên hệ thống lưới, giúp dễ dàng chuyển đổi các tệp Photoshop sang bất kỳ CMS nào.
5. Agora – Mẫu thương mại điện tử PSD tuyệt vời
Agora là một mẫu Thương mại điện tử hiện đại, sáng sủa và sáng tạo. Nếu bạn chọn bộ thiết kế này, người dùng sẽ yêu thích trang web của bạn. Trang web sẽ mang đến cho người dùng những trải nghiệm đẹp và độc đáo. Các mẫu PSD được tạo theo phong cách thể thao nhưng chúng có thể được điều chỉnh để bán bất cứ thứ gì. Bao gồm 14 thiết kế ấn tượng và 6 thanh trượt đồ họa!
6. The Spectre – mẫu website dành cho đại lý
Spectre là một mẫu phẳng, hiện đại dành cho các đại lý. Thiết kế rõ ràng với 12 trang phản hồi và khối chủ đề có thể được kết hợp theo cách bạn muốn. Rất nhiều tính năng thiết kế, biểu tượng chữ thường đầy phong cách, hình dạng vector, các thành phần giao diện người dùng hấp dẫn: hồ sơ, trích dẫn hấp dẫn và hình ảnh giới thiệu. Mẫu được thiết kế cho Bootstrap với 12 cột và chiều rộng 1170px. Đây là một bộ tệp PSD được thiết kế đẹp mắt, hấp dẫn, hoàn toàn sẵn sàng để sử dụng trong thiết kế tiếp theo của bạn.
7. Expert – Mẫu PSD dành cho kinh doanh và tài chính
Nếu bạn đang tìm kiếm một trong những mẫu tốt nhất cho trang web tài chính mới của mình thì Experts là một lựa chọn tuyệt vời. Bộ này bao gồm 55 tệp PSD, nhiều thiết kế trang chủ cũng như các trang độc đáo nơi bạn có thể đặt giá, đánh giá, dịch vụ của mình, v.v.
Mẫu này là một bộ vest và cà vạt dành cho doanh nghiệp của bạn. Mẫu này được thiết kế cho luật, công ty tài chính, công ty đầu tư, kế toán và bất kỳ loại hoạt động chuyên môn nào khác. Có 21 tiêu đề để lựa chọn, nhiều loại chân trang và các thành phần được thiết kế hoàn hảo cũng như các phần có thể tùy chỉnh.
8. Begge – mẫu PSD của cửa hàng thời trang hiện đại
Nếu năm nay bạn đặt cho mình mục tiêu khai trương một cửa hàng trực tuyến chuyên về lĩnh vực quần áo thời trang thì mẫu này được tạo riêng cho bạn. Một thiết kế tối ưu giúp giới thiệu sản phẩm và hình ảnh của bạn trước tiên.
Bố trí sạch sẽ với xây dựng rất rõ ràng. Thiết kế hấp dẫn và có tổ chức với việc chèn các khối chồng lên nhau để thu hút sự chú ý của khách tham quan. Các tệp PSD được sắp xếp và có thể nhanh chóng tùy chỉnh để phù hợp với trang web của bạn!
9. Digital Agency – Mẫu SEO/Tiếp thị
Cơ quan kỹ thuật số – Mẫu trang web PSD dành cho SEO và các cơ quan khác nhau. Nó dựa trên thiết kế vật liệu, pha trộn các yếu tố giao diện người dùng rõ ràng với màu sắc tươi sáng. Nó chỉ chờ bạn thêm ảnh và đồ họa của mình trước khi chuyển nó sang trang web. Bạn có thể chọn mua tệp PSD hoặc mua phiên bản WordPress có mã, Bootstrap 3 tích hợp và nhiều tính năng.
10. Volter – Mẫu trang web sáng tạo (PSD)
Mẫu trang web PSD sáng tạo với phong cách thiết kế khác thường. Volter được thiết kế để giới thiệu danh mục đầu tư của bạn, giới thiệu những hình ảnh đẹp của bạn và thu hút khách truy cập mới bằng phông chữ độc đáo của nó. Đây là nơi bạn có thể thể hiện công việc của mình, mô tả dịch vụ của mình và cho khách hàng mới biết lý do họ nên thuê bạn.
Tệp PSD có độ phân giải cao và dựa trên lưới Bootstrap 1170px, giúp làm việc rất dễ dàng. Mẫu tốt nhất đã hoàn toàn sẵn sàng để sử dụng, hãy lấy nó và thiết kế các trang web độc đáo!
Nhận mẫu trang web mới (PSD)!
Khám phá hàng trăm mẫu PSD chuyên nghiệp được tạo bởi các nhà thiết kế web tài năng trên ThemeForest. Hoặc nếu bạn muốn tải xuống hàng tấn mẫu, chủ đề và bộ đồ họa Photoshop một cách thường xuyên hơn, hãy xem Envato Elements, nơi bạn có thể tải xuống và sử dụng hàng tấn tệp chất lượng không giới hạn với mức phí một lần hàng tháng.
Trong bài viết này, chúng tôi sẽ nói về các trang web mà các nhà phát triển tạo ra theo cách thủ công, tức là đánh máy.
Bài viết dành cho người dùng quen thuộc với HTML Và CSS . Ít nhất cũng nên biết những điều cơ bản Adobe Photoshop
Một trong những giai đoạn tạo một trang web thực sự là tạo mẫu PSD. Bạn cũng có thể bắt gặp những cái tên như bố cục, thiết kế hoặc nguồn.
Mẫu được đặt hàng cho nhà thiết kế. Nhà thiết kế vẽ bố cục trong Adobe Photoshop và lưu nó ở định dạng PSD.
Định dạng PSD là gì?
Để hiểu rõ hơn, bạn có thể đưa ra một ví dụ cuộc sống đơn giản. Khi còn nhỏ, mọi người đều dán các đồ trang trí. Chúng tôi cắt một ngôi nhà từ giấy và dán nó vào. Chúng tôi cắt cây Giáng sinh và dán nó vào. Và cứ như vậy cho đến khi công việc sẵn sàng.
Bây giờ bạn có thể tưởng tượng một tình huống trong đó các hình được cắt ra, đặt trên tờ giấy vào đúng vị trí nhưng chưa được dán lại. Vì vậy, định dạng tệp PSD có thể được so sánh với một ứng dụng chưa dán các hình ảnh nhưng chúng đã được sắp xếp theo thứ tự mong muốn.
Nhờ đó, mỗi “hình” như vậy, hay đúng hơn là từng đoạn riêng lẻ của mẫu, có thể được lưu dưới dạng một hình ảnh riêng biệt, sau đó có thể được sử dụng trên trang web.
Đây là bố cục của trang sẽ được tạo.
Sau khi có mẫu tạo sẵn ở định dạng PSD, chúng ta có thể chuyển thẳng đến bố cục
- Tạo một thư mục trong đó bố cục sẽ được lưu trữ, ví dụ: “Trang web”.
- Trong thư mục “Trang web”, tạo một thư mục cho hình ảnh, ví dụ img.
- Trong thư mục “Trang web”, tạo một thư mục cho các kiểu, ví dụ như css.
- Bây giờ bạn cần khởi chạy Adobe Photoshop và mở tệp psd trong đó. Từ đây bạn cần “kéo ra” tất cả hình ảnh sẽ được sử dụng trên trang web.
Ở đây bạn cần chú ý đến nút “Lớp”. Trong hình, nó được đánh dấu bằng hình bầu dục màu đỏ.
Nút này bật và tắt cửa sổ lớp. Các lớp là những phần của vật trang trí không được dán lại với nhau. Để thuận tiện, các lớp được chia thành các thư mục có thể thu gọn và mở rộng. Nguyên lý hoạt động gần giống như trong Windows Explorer.
Bước đầu tiên là thu gọn tất cả các thư mục. Mở rộng khi cần thiết.
Bây giờ bạn có thể bắt đầu "kéo ra" hình ảnh
Điều đầu tiên bạn cần làm là chọn công cụ khung. Sau đó chỉ chọn phần giới hạn logo trang web
Sau đó, nhấn phím Enter. Mọi thứ ngoại trừ khu vực đã chọn sẽ bị cắt bỏ.
Bây giờ bạn có thể loại bỏ nền. Để làm điều này, bạn cần tắt lớp nền.
Để nhanh chóng tìm thấy các lớp bạn cần, bạn có thể làm như sau:
Ở đây lớp được đặt tên là "Hình 2". Nhấp vào hình ảnh con mắt sẽ làm cho lớp này trở nên vô hình.
Tuy nhiên, có hai lớp nữa cũng cần được tắt. Các hành động tương tự nhau.
Bây giờ bạn có thể lưu. Để làm điều này, bạn cần phải làm như sau:
Chọn từ 4 phương án được đề xuất và từ phương án thứ hai được đề xuất. Tiện ích mở rộng chọn gif.
Tên tập tin logo.gif . Lưu tập tin vào một thư mục hình ảnh . Các hình ảnh khác cũng nên được lưu ở đó.
Bạn có thể làm theo những nguyên tắc sau:
- chất lượng ảnh – jpg
- chất lượng ảnh với nền trong suốt– png-8 , không hài lòng với chất lượng - png-24
- một vài màu sắc trong hình ảnh – gif
Để trả về phiên bản gốc trước khi cắt, bạn cần mở cửa sổ lịch sử
Bấm vào tên tập tin và đặt tỷ lệ thích hợp.
Các hình ảnh khác được lưu theo cách tương tự.
Điều tương tự cũng xảy ra với hình ảnh bàn chân xuất hiện khi bạn di chuột qua một mục menu.
Các hình ảnh khác là tùy chọn. Nó có thể có màu trắng, có thể trong suốt.
Ở đây bạn nên chọn tùy chọn lưu thật cẩn thận, vì trong các nguồn PSD thường có những hình ảnh có viền được xử lý kém. Đây là một ví dụ:
Hình ảnh được lưu trên nền trong suốt. Tuy nhiên, khi xem nó ở màu đen, có thể nhìn thấy các cạnh được xử lý kém. Nhưng khi sử dụng nền sáng, khuyết điểm này có thể không được nhận thấy rõ.
Đối với nền, bạn sẽ cần phải cắt ra một bức tranh nhỏ sẽ lấp đầy trang như một ô xếp. Tuy nhiên, trong ví dụ này, nền không lặp lại. Vì vậy, tốt hơn là tìm một hình ảnh tương tự. Hoặc bạn có thể thử chọn nó bằng cách cắt các mảnh khác nhau khỏi nền.
Bắt đầu bố trí. Vỏ bánh. Tiêu đề trang web.
Bố cục sẽ được xem xét sử dụng HTML5 và CSS3.
Bạn cần tạo một tệp HTML trong thư mục trang web của mình. Ví dụ chỉ mục.html.
Trong thư mục css tạo tập tin phong cách.css .
Ngoài ra, trong thư mục css bạn cần đặt tập tin đặt lại.css với đoạn mã sau
/* v2.0 | 20110126 Giấy phép: không có (miền công cộng) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, từ viết tắt, địa chỉ, lớn, trích dẫn, mã, del, dfn, em, img, ins, kbd, q, s, samp, nhỏ, đình công, mạnh mẽ, phụ, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, biểu mẫu, nhãn, chú giải, bàn, chú thích, tbody, tfoot, thead, tr, th, td, bài viết, sang một bên, canvas, chi tiết, nhúng, hình, figcaption, chân trang, tiêu đề, hgroup, menu, nav, đầu ra, ruby, phần, tóm tắt, thời gian, dấu, âm thanh, video ( lề: 0; đệm: 0; viền: 0; cỡ chữ: 100%; phông chữ: kế thừa; căn chỉnh dọc: đường cơ sở ; ) /* Đặt lại vai trò hiển thị HTML5 cho các trình duyệt cũ hơn */ bài viết, sang một bên, chi tiết, figcaption, hình, chân trang, tiêu đề, hgroup, menu, điều hướng, phần ( display: block; ) body ( line-height: 1; ) ol, ul ( list-style: none; ) blockquote, q ( quotes: none; ) blockquote:trước, blockquote:after, q:trước, q:after ( content: ""; content: none; ) bảng ( border- thu gọn: thu gọn khoảng cách đường viền: 0; )
Thực tế là các trình duyệt khác nhau có thể có các cài đặt khác nhau cho cùng một thẻ. Để đảm bảo khả năng tương thích giữa nhiều trình duyệt, chúng phải được đặt lại. Đoạn mã trên được phát triển bởi Eric Mayer.
Đầu tiên ở chỉ mục.html bạn nên viết các thẻ chính.
Đối với một thẻ trong phong cách
bạn cần thiết lập nền.Như đã đề cập, nền không được lặp lại ở đây. Vì vậy, sẽ hợp lý hơn nếu chọn bất kỳ cái nào tương tự.
Nội dung( hình nền: url(../img/bg.gif); )
Bây giờ bạn cần tạo một trình bao bọc trang web - một khối trong đó tất cả nội dung sẽ được đặt.
Bên cạnh phần kết thúc Ngoài ra bên trong khối còn có trình bao bọc từ. Nó ở đó tạm thời. Mục đích là để nhìn thấy khối trong quá trình bố trí và phân biệt nó với phần còn lại. Vì lý do tương tự, các kiểu sẽ tạm thời tạo cho khối một nền sáng. Để đặt kiểu, bạn cần biết chiều rộng và phần đệm của nó ở trên cùng và dưới cùng. Để đo bạn có thể Adobe Photoshop
Sử dụng công cụ “Khu vực hình chữ nhật”, chọn hình ảnh trang web từ cạnh phải sang trái. Chiều cao không quan trọng. Chiều rộng có thể được nhìn thấy trong cửa sổ "Thông tin" Hóa ra là 964px. Tương tự, chỉ có chiều cao của vùng được chọn là quan trọng chứ không phải chiều rộng; Hóa ra là 100px ở trên cùng và 85px ở dưới cùng. Bằng cách này, mọi khoảng cách trong nguồn đều được xác định. #wrapper ( chiều rộng: 964px; lề trên: 100px; lề phải: auto; lề dưới: 85px; lề trái: tự động; màu nền: #FF9; ) Thụt lề phải và trái được đặt thành tự động. Điều này đảm bảo khối được căn giữa. Trang: Trong bài viết trước, tôi đã hướng dẫn rõ ràng cách tạo bố cục trang web trong Photoshop và kết quả là một mẫu đơn giản nhưng không gây khó chịu. Trong bài viết này, tôi sẽ chỉ cho bạn cách bố trí nó từ bố cục PSD thành một trang web hoàn chỉnh bằng cách sử dụng các công cụ đánh dấu HTML và Cascading Style Sheets (CSS). Nhìn chung, có nhiều cách tiếp cận để chuẩn bị mẫu: có người vẽ mẫu một cách chi tiết trước rồi mới tiến hành bố cục, có người vẽ thiết kế gần đúng, thêm các điểm nhấn trong quá trình bố cục; một số vẽ đầu tiên, sau đó cắt, một số khác (như chúng tôi đã làm trong bài viết trước) lưu các đối tượng đồ họa trực tiếp trong quá trình tạo thiết kế. Ngay cả các công cụ bố cục và vẽ cũng khác nhau đối với mọi người: một số cài đặt plugin và hoạt động trong trình chỉnh sửa trực quan, một số khác sử dụng bộ khả năng tiêu chuẩn và tạo bố cục trong trình chỉnh sửa đơn giản... nói chung, dưới đây chỉ là một phương pháp trong số rất nhiều phương pháp. Vì vậy, hãy tạo tệp ở bất cứ đâu (ngay cả trên Bàn làm việc, thậm chí trong một thư mục riêng) chỉ mục.html. Thêm một thư mục vào cùng thư mục hình ảnh. Nó sẽ chứa tất cả các hình ảnh được sử dụng trong mẫu và trên trang. Vì chúng tôi đã cắt bỏ các phần tử đồ họa trước nên chúng tôi sẽ sao chép ngay chúng vào thư mục hình ảnh và đặt cho chúng những cái tên sau: Trong thư mục có trang index.html, tạo một tệp style.css- nó sẽ chứa các biểu định kiểu mẫu. Notepad không được khuyến khích để chỉnh sửa mã. Trình soạn thảo Notepad++ phù hợp hơn nhiều cho mục đích này. Đây là một chương trình làm nổi bật cú pháp của các ngôn ngữ khác nhau (bao gồm HTML và CSS) và thuận tiện hơn nhiều khi phát triển so với các trình soạn thảo tài liệu văn bản đơn giản. Mở một tài liệu chỉ mục.html và nhập đoạn mã sau vào đó:
Lưu các tập tin. Chúng tôi đã nghiên cứu tất cả các thẻ này từ lâu và chúng không cần giải thích. Sử dụng đoạn mã trên, chúng ta đã tạo nền tảng của trang HTML, bây giờ chúng ta cần chia nó thành các khối - cho biết cấu trúc của tài liệu, nó sẽ chứa những gì. Chúng tôi có 7 khối, chúng tôi liệt kê chúng theo mã định danh (giá trị thuộc tính nhận dạng): 1. nội dung- một khối trong đó các khối còn lại sẽ được lưu trữ. 2. tiêu đề- một khối tiêu đề, bên trong nó sẽ có: 2.1. thực đơn- điều hướng hàng đầu. 2.2. Logo- hình ảnh với văn bản. 3. Phải- phần chính của trang. 4. bên trái- bảng bên trái. 5. chân trang- dưới cùng của trang web. Vì vậy hãy viết (trong thùng chứa
dán đoạn mã sau): Trong trình duyệt, trang sẽ vẫn trống, nhưng bạn có thể hiểu cấu trúc của tài liệu, nó đã sẵn sàng. Bây giờ, hãy chuyển sang cách tạo kiểu CSS để mang lại diện mạo ban đầu cho tài liệu. Mở phong cách.css và thêm các dòng mã bạn thấy bên dưới. Xóa phần đệm và lề trên trang theo mặc định: * (lề: 0px; phần đệm: 0px; ) Chúng tôi đặt màu của các liên kết tùy thuộc vào hành vi của người dùng (di chuột, không di chuột, đã truy cập) và xóa phần gạch chân khỏi các liên kết mà con trỏ chuột nằm trên đó: A:link ( color: #D72020; ) a:hover ( text-trang trí: none; color: #FF0000; ) a:visited ( color: #D72020; ) Chúng tôi thiết lập thiết kế cơ bản của trang: chúng tôi đặt màu nền và hình nền (chúng tôi đặt phần điền ngang cho hình ảnh), đặt màu, kiểu và cỡ chữ: Nội dung ( nền: #FFD723 url(images/back_all.jpg) Repeat-x; font: 13px Tahoma, Verdana, Arial, Helvetica, sans-serif; color: #333333; ) Định nghĩa khối nội dung: #content (margin: 0 auto; nền: #ffffff; width: 786px; text-align: left; ) Bây giờ bạn có thể làm mới trang. Nó chứa đầy một mẫu nền. Cho đến nay, thay đổi rõ ràng duy nhất mà tài sản chịu trách nhiệm là lý lịch lớp học thân hình. Đã có sự khởi đầu và bây giờ bạn có thể bắt đầu tự mình bố trí các khối chính. Tất nhiên, hãy bắt đầu với tiêu đề. Lần lượt, bao gồm các khối menu ngang và logo. Trước tiên, chúng ta hãy đặt thiết kế chung của cả hai thành phần tiêu đề: căn chỉnh văn bản sang trái, nền trắng và chiều cao 306px: #header (nền: #ffffff; chiều cao: 306px; căn chỉnh văn bản: trái; ) Đây là cách chúng ta có một loại không gian tiêu đề: một hình chữ nhật màu trắng trên đó các phần tử của nó sẽ được đặt. Sẽ là hợp lý nếu bắt đầu làm việc trên một menu ngang ngay bây giờ. Đây là những gì chúng ta sẽ làm, nhưng trước khi chèn nó vào HTML, bạn cần chuẩn bị các quy tắc CSS, nếu không nó sẽ trông rất tệ trên trình duyệt. Hãy thực hiện những điều chỉnh đầu tiên: đặt đường viền bên trái dày 2 pixel, chiều rộng và chiều cao của menu của chúng ta, cũng như mẫu nền lặp lại dọc theo trục X: #menu ( viền-trái: 2px rắn #ffffff; chiều rộng: 779px; chiều cao: 80px; nền: url(images/header_top.gif) Repeat-x; ) Trang trong trình duyệt sẽ ngay lập tức chuyển đổi và trông như thế này. Bây giờ bạn có thể thêm chính menu vào tập tin chỉ mục.html: Bằng cách làm mới trang, bạn có thể thấy nó thực sự đã xuất hiện. Chỉ có loại liên kết để lại nhiều điều mong muốn. Hãy đặt quy tắc riêng cho chúng (căn chỉnh, chiều rộng, màu sắc, độ đậm, v.v.) và đặt các liên kết thay đổi màu khi di chuột và trả lại phần gạch chân bị xóa trong toàn bộ mẫu: #menu a ( float: left; chiều rộng: 99px; chiều cao: 46px; hiển thị: khối; căn chỉnh văn bản: giữa; trang trí văn bản: không; màu: #ffffff; độ dày phông chữ: đậm; cỡ chữ: 14px; phần đệm -top: 35px; ) #menu a:hover ( color: #D72020; text-trang trí: gạch chân; ) Bây giờ định dạng menu có thể được ánh xạ tới mẫu PSD. Hãy chú ý đến thiết kế của mục đó thay đổi như thế nào nếu bạn di chuyển con trỏ đến mục đó (các quy tắc chịu trách nhiệm về việc này #menu a:di chuột). Chúng tôi đã có logo và nó nằm trong thư mục, tất cả những gì còn lại là thêm nó vào trang và định dạng nó theo các quy tắc. Cả hai đều có thể được thực hiện bằng CSS, điều mà chúng tôi sẽ không làm được. #logo ( nền: #ffffff url(images/big_pic.jpg) no-repeat; chiều rộng: 738px; chiều cao: 146px; căn chỉnh văn bản: trái; đệm-top: 80px; đệm-trái: 40px; viền-trái: 4px rắn chắc #ffffff ) Logo được chèn đúng kích thước. Điều duy nhất nó thiếu là văn bản. Hãy chèn những gì còn thiếu vào khối Logo tài liệu chỉ mục.htmlđể có được: Văn bản đã xuất hiện nhưng cũng cần được định dạng. Dựa trên thực tế là logo hầu như luôn là một liên kết, hãy đặt thiết kế cho các lớp tương ứng. #logo a ( trang trí văn bản: không; chuyển đổi văn bản: chữ thường; kiểu phông chữ: in nghiêng; cỡ chữ: 36px; màu: #FFFFFF; ) #logo h2 a ( cỡ chữ: 24px; ) Không cần phải giải thích bất cứ điều gì ở đây; bạn đã quen thuộc với tất cả các thuộc tính từ các bài học CSS. Tuy nhiên, giao diện của văn bản đã thay đổi và về tổng thể, tiêu đề bây giờ trông thậm chí còn đẹp hơn trên mô hình PSD. Tiếp theo, chúng tôi thiết lập khối lớn nhất để đặt tất cả nội dung độc đáo trên đó. Nó sẽ chiếm 500px và nằm ở phía bên phải của trang web. Hãy thiết lập các quy tắc về vị trí, thiết kế tiêu đề, đoạn văn và liên kết (chúng ta đã nói về tất cả các thuộc tính trong các bài viết về CSS). #right ( float: right; chiều rộng: 500px; đệm-phải: 10px; ) #right h4 ( lề: 0; đệm: 0px; cỡ chữ: 12px; color: #D72020; ) #right a ( color: #D72020 ; trang trí văn bản: không có; ) #right p ( lề: 0; phần đệm: 0; phần đệm dưới: 10px; ) # phải h2 ( lề: 0; phần đệm: 0; phần đệm: 10px; màu: #D72020; ) Vì chúng tôi chỉ cố định chiều rộng của khối nên sẽ không có thay đổi rõ ràng nào cho đến khi chúng tôi điền nội dung vào khối đó - chiều cao của trang sẽ thay đổi tùy thuộc vào nội dung. Hãy đổ đầy thùng chứa Phải. Chúng tôi sẽ đặt các hình ảnh trong một bảng đơn giản. Nội dung đã được đánh dấu nhưng rõ ràng là thiếu nền trắng và sẽ không sớm xuất hiện đầy đủ. Trong quá trình bố trí, nhưng sau khi vẽ bố cục, hóa ra menu bên vẫn sẽ có các mục phụ và chúng sẽ xuất hiện khi bạn di chuột qua mục chính và biến mất khi không có con trỏ trên đó. Những tình huống bạn phải sửa đổi thiết kế “nhanh chóng” xảy ra khá thường xuyên. Khoảng cách giữa menu và nội dung chính cho phép chúng ta chèn các mục con, nhưng thủ thuật biến mất và xuất hiện của các menu con thật thú vị. Trong tệp CSS, nhập mã sau đây. #left ( đệm: 10px; chiều rộng: 237px; đệm-phải: 1em; ) #left h3 ( chiều rộng: 225px; chiều cao: 25px; cỡ chữ: 14px; độ dày phông chữ: đậm; đệm-trái: 15px; đệm- top: 15px; chuyển đổi văn bản: chữ hoa; màu: #ffffff; nền: url(images/title.gif) no-repeat ) #left ul ( lề: 0; phần đệm: 10px; kiểu danh sách: none; chiều rộng: 100px ; cỡ chữ: 18px; ) #left li ul ( location: tuyệt đối; left: 90px; top: 0; display: none; ) #left ul li ( vị trí: tương đối; lề-dưới:20px; ) #left ul li a ( hiển thị: khối; trang trí văn bản: không có; màu: #ffffcc; nền: #ff9900; phần đệm: 5px; đường viền: 1px vàng nguyên khối; viền dưới: 0; ) #left li:hover ul ( display: block; ) #left li li ( lề-bottom:0px; chiều rộng: 150px; ) #left p ( đệm: 10px; viền-dưới: 1px Solid #D72020; viền-trái: 1px Solid #D72020; viền-phải: 1px Solid # D72020; Chú ý nội quy lớp học ul Và lý- Bí mật về menu biến mất nằm ở đó, bạn hãy tự mình khám phá nhé. Trước tiên, hãy thêm khối thông tin không có menu vào vùng chứa bên trái của tài liệu HTML. Chúng tôi cung cấp cho bạn giảm giá kỳ nghỉ. Hơn nữa... Nền trắng trải dài xuống phía dưới trang. Bây giờ là lúc dán mã menu bảng bên trái vào tệp HTML. Không giống như điều hướng trên cùng, nó được triển khai bằng các danh sách, có thể thấy từ các quy tắc CSS. 
Giai đoạn chuẩn bị
Chia tài liệu thành các khối
Thiết lập định dạng cơ bản
Thiết kế menu ngang
trang chủ
Phòng trưng bày
Hiệp định
Giá
Mẫu
Liên lạc
Tùy chỉnh logo
Tên trang web
Khẩu hiệu của trang web
Bố cục phần chính của trang
Phòng trưng bày
Bếp
Tạo bảng điều khiển bên trái
Thông tin
Thực đơn
