Đăng ký độc lập của nhóm VKontakte. Cách tạo nhóm VK và làm menu đẹp

Chúng tôi đã tìm ra cách vẽ một thực đơn đẹp mắt cho nhóm của bạn. Và hôm nay chúng ta sẽ tìm hiểu cách đặt menu trực tiếp trên trang VKontakte và tạo các trang nội bộ cho nó. Vì vậy, chúng ta hãy đi!

Bước 1. Tải các mục menu lên vk.com

Chúng ta vào nhóm và tạo một album trong đó, trong đó chúng ta sẽ tải lên các mục menu thu được khi hoàn thành bài tập của bài học trước. Để thực hiện việc này, hãy nhấp vào Tập ảnh trong khối ảnh trên trang chính và trong cửa sổ mở ra, hãy chọn Tạo anbom. Hãy gọi cho anh ấy Album dành cho quản trị viên.

Ghi chú: nếu bạn không có khối ảnh trên trang chính thì vào mục Quản lý cộng đồng(chúng tôi đã làm điều này trong bài học đầu tiên và thứ hai) và ngược lại với quan điểm Ảnh chọn Mở hoặc Giới hạn(chúng tôi sẽ cho bạn biết thêm về album và chúng trông như thế nào trong một trong những bài học sau).

Bạn sẽ thấy một album trống mới được tạo. Nhấp chuột Thêm ảnh vào album và tải các phần menu bạn đã vẽ.

Tất cả những gì còn lại là tập hợp menu nhóm từ những phần này.

Bước 2. Lắp ráp menu từ các phần tử

Chuyển đến trang chỉnh sửa menu (cách thực hiện việc này,). Kiểm tra xem chế độ chỉnh sửa đã được bật chưa Chế độ đánh dấu Wiki. Bây giờ bạn có ở đây (nếu bạn đã hoàn thành nhiệm vụ của bài học thứ hai) các mục menu của bạn, được đặt trong dấu ngoặc vuông. Chúng tôi chưa chạm vào chúng, nhưng viết dưới đây:

số duy nhất - đây là số ảnh được gán cho nó khi tải lên trang web vk.com. Để xem nó, hãy mở ảnh đã tải xuống bằng cách nhấp vào nó và tìm trong thanh địa chỉ của trình duyệt:

388px- đây là chiều rộng của menu của bạn

Không biên giới- có nghĩa là các mục menu của bạn không có đường viền màu đen

Không đệm- nghĩa là sẽ không có khoảng cách giữa các hình ảnh (đó là điều chúng ta cần để menu được liền mạch).

Cần có một khoảng trống ở cuối, nếu không sẽ không có gì hoạt động.

Bạn nên kết thúc với số dòng bằng số mục trong menu của mình (và theo đó, bạn đã vẽ bao nhiêu bức tranh):

Hãy cẩn thận để không nhầm lẫn thứ tự của các bức ảnh.

Chúng ta vào trang chính của nhóm, cập nhật nó (nhấp vào nút Cập nhật trong trình duyệt hoặc chỉ F5). Chúng tôi ngưỡng mộ kết quả!

Bước 3. Đính kèm các trang nội bộ vào menu

Khi tạo menu cho một nhóm ở chế độ chỉnh sửa tài liệu trong bài học thứ hai, chúng tôi đã viết các mục của nhóm đó trong dấu ngoặc vuông. Bây giờ bạn thấy chúng phía trên menu được thiết kế đẹp mắt của bạn ở dạng liên kết: trong ví dụ của chúng tôi, đây là các liên kết Đặt hàng như thế nào, Làm thế nào để trả tiền vân vân.

Nhấp vào nút Điền nội dung, chúng tôi thấy mình đang ở trên trang để chỉnh sửa các tài liệu đã quen thuộc với chúng tôi.

Chúng tôi ngay lập tức kiểm tra xem chúng tôi có quyền truy cập nào vào trang (hãy nhớ rằng quyền truy cập để xem trang cần phải được đặt - Tất cả người dùng và quyền chỉnh sửa là Chỉ người chỉnh sửa và quản trị viên) và điền thông tin vào đó.

Khi điền thông tin vào trang, bạn có thể sử dụng bảng định dạng văn bản để thêm điểm nhấn nhằm làm cho văn bản in đậm, in nghiêng, thêm căn chỉnh hoặc liệt kê:

Định dạng văn bản bằng bảng này không khó hơn làm việc trong Word: bạn chỉ cần chọn văn bản bằng chuột và nhấn nút bạn cần.

Vì bạn đang ở chế độ đánh dấu wiki nên một số ký tự nhất định sẽ được thêm vào văn bản của bạn khi bạn áp dụng các lệnh định dạng. Ví dụ: khi bạn chọn lệnh in nghiêng, từ bạn muốn in nghiêng sẽ được bao quanh bởi dấu ngoặc kép. Những ký hiệu này là thành phần của ngôn ngữ đánh dấu wiki. Để xem văn bản sẽ trông như thế nào trên trang, hãy nhấp vào nút Xem trước:

Và đây là những gì xảy ra:

Ghi chú: chúng tôi khuyên bạn nên học cách chỉnh sửa văn bản ở chế độ đánh dấu wiki, bởi vì nó cho kết quả có thể dự đoán được, không giống như chế độ chỉnh sửa trực quan, không ổn định trong các trình duyệt khác nhau. Đôi khi, ngay cả việc chuyển một lần sang chế độ chỉnh sửa trực quan cũng sẽ phá vỡ thiết kế trang.

Sử dụng kiến ​​thức thu được, chúng tôi nhấn mạnh vào trang của mình và nhấp vào Lưu trang. Đây là những gì chúng tôi có (hãy nhớ rằng đây chỉ là một ví dụ):

Chúng tôi lặp lại bước này cho mỗi trang của mình (chúng tôi có Đặt hàng như thế nào, Làm thế nào để trả tiền, Làm thế nào để chọn kích thước phù hợp Và Mất bao lâu để giao hàng?) ngoại trừ trang

Hôm nay mình sẽ tiếp tục “Đi sâu vào nhóm VK”. Ở phần thứ ba của “bộ truyện”, tôi đã kể và trình chiếu. Hôm nay chúng ta cùng nói về việc thiết kế menu nhóm VKontakte nhé!

Trong bài viết đầu tiên về việc tạo menu, có rất nhiều câu hỏi trong phần bình luận, vì vậy trước khi bắt đầu một chủ đề mới, tôi sẽ trả lời các câu hỏi thường gặp.

Câu hỏi 1:Đầu tiên và phổ biến nhất: “Mã trong menu ở đâu?” hoặc “nếu không có dấu trang khi chỉnh sửa “Mã nguồn”, làm cách nào để thêm trang nội bộ?” hoặc “Tôi vẫn không hiểu phải làm gì nếu mã không xuất hiện!”

Trả lời 1: VK đã thay đổi trình chỉnh sửa, giờ đây bạn có thể chuyển đổi giữa trình chỉnh sửa trực quan và mã chỉ bằng một cú nhấp chuột (góc trên bên phải của trình chỉnh sửa):

Để kiểm tra xem bạn đang sử dụng trình soạn thảo nào: di chuyển chuột qua nút này, viết một số văn bản và tô đậm nó - nếu các ký tự bất thường xuất hiện thì đây là mã

Câu hỏi 2:Điều thứ hai, thực sự có vấn đề: “ làm thế nào để loại bỏ khoảng cách giữa các hình ảnh?»

Trả lời 2: Tôi thừa nhận, bản thân tôi cũng cảm thấy sợ hãi khi thực đơn của khách hàng bắt đầu hoạt động lần đầu tiên. Bây giờ mình chỉnh sửa nhanh nhưng lúc đó không vui chút nào. Nhìn thấy:

Thêm thẻ nopadding; và mọi thứ sẽ đâu vào đấy!

Khoảng trống len lỏi giữa các bức ảnh và menu trông có vẻ bị hỏng. Đối với những người thiếu hiểu biết, điều này có thể không bình thường, nhưng đối với mọi người, điều này ít nhất là không chuyên nghiệp. Vậy thỏa thuận lớn nào? À, nó rất đơn giản! Trong VK liên tục có một số cập nhật, các thuật toán mới được giới thiệu... và thậm chí cả trình soạn thảo cũng bị sai lệch... đôi khi, không rõ lý do, các thẻ quan trọng bị rớt ra khỏi mã và sau đó chúng ta nhìn thấy bức ảnh này. Để khắc phục điều này, bạn cần xem xét mã và thực hiện các điều chỉnh cần thiết. Định dạng mã phải như thế này:

Bản mẫu: [] Ví dụ: []

Thông thường hình ảnh menu được mở rộng vì mã bị bỏ sót Không đệm; - chúng tôi đã đặt nó vào đúng vị trí và mọi thứ đã được căn chỉnh. Trước khi lưu kết quả, hãy nhấp vào nút “Xem trước” để đảm bảo mọi thứ đều trơn tru.

Câu hỏi 3: Tin tức. Vào tháng 10 năm 2012, VKontakte buộc phải cắt ảnh đại diện của các nhóm và trang công khai. Bây giờ kích thước của chúng có tiêu chuẩn chung là 200x500 pixel. Vì vậy, nếu nhóm của bạn có hình đại diện lớn hơn thì hãy cập nhật (cập nhật hình đại diện).

Nhân tiện, cùng với việc cắt xén, VK đã giới thiệu một cải tiến khác liên quan đến ảnh nhóm: giờ đây bằng cách nhấp vào hình đại diện, chúng tôi, giống như trong tài khoản, sẽ có thể xem tất cả các album của cộng đồng. Thật thoải mái! Và từ đó, chức năng mới được rút ra trong quá trình liên lạc của nhóm.

Vậy đấy, chúng ta đã hoàn thành các câu hỏi... bây giờ chúng ta hãy chuyển sang phần tạo menu!

Bước 1. Cách tạo menu trong contact và tạo các trang lồng nhau:

Trước hết, hãy đảm bảo rằng bạn biết cách tạo menu nhóm trong liên hệ và thực hiện một số hướng dẫn:

Bạn nghĩ gì về bảng cheat của tôi?

Đây là bảng cheat tôi có được! Để rõ ràng hơn, tôi sẽ mô tả từng số:

Thực hiện thao tác này với tất cả các trang con và menu của bạn sẽ sẵn sàng.

Ăn! Chúng ta đã tạo menu, tạo các trang nội bộ, điền chúng vào, bây giờ chúng ta hãy chuyển sang tạo một menu đồ họa đẹp mắt.

Bước 2. Cách tạo menu đồ họa đẹp trong Contact và cài đặt:

Tôi sẽ không cung cấp cho bạn toàn bộ lý thuyết về cách hoạt động của đánh dấu wiki khi liên hệ, hiện tại chúng tôi có các mục tiêu khác. Để tạo menu trực quan trong nhóm VK, bạn không cần phải biết tất cả các đánh dấu wiki. Hãy chuyển sang tạo một menu trực quan!

Đầu tiên, tôi sẽ cho bạn xem mã và kết quả của menu của tôi:

Tôi thừa nhận, tôi đã cố gắng đặc biệt để viết bài này. Bạn biết đấy, tất cả mọi người đều “không làm được việc đó”, giống như “thợ đóng giày không đi ủng”. Nhưng bây giờ tôi có một menu trực quan trong nhóm VK!

Tôi sẽ không hướng dẫn các bạn cách vẽ hình cho menu, việc đó là của các nhà thiết kế, tôi tự vẽ nhưng không chuyên nghiệp lắm. , cuối bài mình có video hướng dẫn cách vẽ menu đơn giản trong Photoshop, bạn xem thử nhé, biết đâu bạn có thể tự làm được. Nếu không, hãy đặt hàng hình ảnh menu từ .

Tôi sẽ chỉ cho bạn một tùy chọn cài đặt menu phức tạp vừa phải. Sự khác biệt là ở số lượng phần tử. Một menu đơn giản được cắt thành từng dải là cách thực hiện đơn giản nhất. Càng có nhiều nút bấm trên một dòng thì việc thực thi nó càng phức tạp. Mặc dù biết đặc thù nhưng mọi thứ đều đơn giản! Nó chỉ là một vấn đề thời gian. Vì vậy, chiều rộng của hình ảnh phải là:

370 px – nếu bạn có hai hoặc nhiều đối tượng trên một dòng, giống như tôi có các nút mạng xã hội

Và tối đa 388 px – nếu chúng ta cắt hình ảnh một cách đơn giản, chỉ thành các đường thẳng, không chia thành các đối tượng nhỏ. Đây là tính năng bạn cần biết khi cắt menu thành các nút. Kích thước hình ảnh của tôi cho toàn bộ menu hóa ra là 370x456 px.

Sau khi bức ảnh được cắt thành số lượng đồ vật theo yêu cầu và lưu vào một album riêng, chúng tôi tải album này lên VK. Chúng tôi tải lên hồ sơ tài khoản chứ không phải vào nhóm! Vì album nhóm không còn tùy chọn ẩn album nữa. Album kỹ thuật trong nhóm công ty (ví dụ) hoàn toàn không cần thiết, vì vậy chúng tôi ẩn các mục menu trong album tài khoản:

Album kỹ thuật VK

Khi bạn đã thiết lập quyền riêng tư "Chỉ mình tôi". Hãy chuyển sang cài đặt menu. Tôi sẽ cung cấp cho bạn một ví dụ về mã sẽ là mẫu cho bạn và hãy xem nó bao gồm những gì:

[]

Ở đâu, ảnh7632142_296911699– đây là địa chỉ của bức ảnh! Chúng ta nhìn vào nó trên thanh địa chỉ của hình ảnh:

Từ hình ảnh đầu tiên, chúng ta hãy bắt đầu chèn menu vào nhóm VKontakte

Bạn cần một địa chỉ ngắn của hình ảnh, để thực hiện việc này, hãy truy cập chính album đó:

Vào chính album để lấy địa chỉ ảnh mong muốn nhé!

...và bắt đầu từ bức ảnh đầu tiên, di chuyển chúng vào menu nhóm.

Thêm kích thước hình ảnh vào mã menu!

Như vậy, địa chỉ của hình ảnh đã được thêm vào, kích thước đã được ghi rõ, bây giờ chúng ta đặt thẻ Không đệm;- nó là cần thiết để hình ảnh của chúng tôi phù hợp chặt chẽ với nhau. Và bước cuối cùng là đặt liên kết đến trang nơi khách truy cập sẽ truy cập sau khi nhấp vào hình ảnh.

Làm rõ một chút ở đây! Chúng tôi viết các liên kết bên ngoài, liên kết đến album VK và các cuộc thảo luận đầy đủ và liên kết đến các trang nội bộ theo định dạng trang-32734125_44298120. Ở đầu và cuối dòng đừng quên đặt hai dấu ngoặc vuông và không có dấu cách.

Làm rõ 2: khi chúng tôi liên kết đến các trang nội bộ không có hình ảnh, chúng tôi sử dụng dấu ngoặc vuông đơn cho các cuộc thảo luận, album và liên kết bên ngoài.

Các dòng mà bạn có hai phần tử trở lên sẽ được chèn vào mã mà không có dấu cách. Chèn từng dòng của hình ảnh lần lượt. Vì nếu nhấn Enter sau dòng có hình ảnh thì hình ảnh sẽ nhảy sang dòng mới và menu sẽ di chuyển. Chúng tôi cần hiển thị toàn bộ menu, vì vậy chúng tôi không cần thêm bất kỳ khoảng trắng hoặc “interinter” nào!

Sau khi bạn đã chuyển tất cả các hình ảnh vào menu và thiết kế chúng (kích thước, liên kết), hãy lưu kết quả và chiêm ngưỡng tác phẩm của bạn! Tất cả! Sẵn sàng!

VKontakte làm hài lòng người dùng với số lượng lớn các nhóm được thiết kế thú vị. Nhiều người trong số họ có vẻ ngoài không hề thua kém một trang web chính thức. Hiệu ứng này được đảm bảo bằng thiết kế nhóm phù hợp, đặc biệt là menu và hình đại diện. Người dùng có kinh nghiệm có thể dễ dàng đối phó với nhiệm vụ này, nhưng nếu bạn là người mới bắt đầu thì bài viết sẽ hữu ích cho bạn.

Cách thiết kế nhóm đẹp trên VKontakte

Tạo biểu ngữ

Khi xem một nhóm, trước hết người dùng chú ý đến hình đại diện và menu. Dưới đây chúng ta sẽ nói về cách tạo hai bức ảnh trong Photoshop, cắt một trong số chúng một cách chính xác và viết một mã đặc biệt cho biết

Giai đoạn 1

Mở Photoshop và tạo một tài liệu mới có kích thước 630x725 pixel. Điền nó với màu trắng. Cắt ra hai cửa sổ trong lớp. Thông qua các cửa sổ này, thiết kế đồ họa của Liên hệ sẽ hiển thị. Đầu tiên, chọn một vùng hình chữ nhật có kích thước 200x710 pixel và nhấn nút “Del”. Tiếp theo, chọn vùng hình chữ nhật có kích thước 382x442 pixel, kết hợp các hình chữ nhật thu được ở dưới cùng và nhấn phím "Del".

Giai đoạn 2

Dưới lớp kết quả, chúng ta sẽ đặt thiết kế đồ họa của nhóm. Tốt nhất là viết trước văn bản cần thiết trên một bức tranh có nền chính, đồng thời tạo số lượng mục menu cần thiết.

Giai đoạn 3

Tiếp theo là vùng hình chữ nhật bên phải có kích thước 200x710 pixel. lưu nó dưới dạng một hình ảnh riêng biệt. Kết quả là một bản vẽ hoàn thiện dành cho thiết kế của nhóm. Nó cần được tải vào khối nằm ở góc trên bên phải của trang. Để thực hiện việc này, hãy nhấp vào nút "Tải ảnh lên".

Hình bên trái dùng để làm gì? Chúng tôi cắt nó thành nhiều phần (tùy thuộc vào số lượng mục menu). Ví dụ: menu của chúng tôi có 5 mục, nghĩa là đầu ra sẽ là 5 hình ảnh 382x50 pixel.

Giai đoạn 4

Năm bức ảnh nhận được phải được tải lên album của nhóm. Tiếp theo, đi tới trang nhóm và chọn khối “Tin tức”, đổi tên thành “Menu nhóm”, sau đó nhấp vào “Chỉnh sửa”.

Giai đoạn 5

Vậy là chúng ta đã đi đến giai đoạn cuối cùng của hướng dẫn “Cách thiết kế nhóm đẹp mắt trên VKontakte”. Mở tab có tên “Nguồn nằm ở cửa sổ bên dưới, bạn cần sao chép rồi dán vào “Mã nguồn”. Trong văn bản mã, thay ảnh bằng tên tệp và đánh dấu chiều cao của tệp (382). pixel). Bây giờ hãy chèn địa chỉ của các liên kết menu. Tên tệp được lấy từ album.

Giai đoạn 6

Để kết hợp hình ảnh một cách hoàn hảo, phải đáp ứng một số điều kiện:

Tên nhóm phải nằm trên một dòng;

Địa chỉ trang web cũng là một dòng.

Mô tả phải chứa 10 dòng.

Đánh dấu Wiki VKontakte

Để hiểu cách thiết kế nó đẹp, bạn cũng cần làm quen với khái niệm đánh dấu Wiki.

Nó là gì?

Vì vậy, đánh dấu Wiki là một hệ thống được thiết kế để chỉnh sửa các trang theo cách tương tự như HTML. Trước khi bạn bắt đầu tạo nhóm VKontakte, hãy quyết định loại của nhóm đó. Thiết kế có thể là đồ họa và văn bản.

Thiết kế menu văn bản

Mã cho menu sẽ trông như thế này:

Phần đầu và phần cuối của mã được biểu thị bằng các thẻ. Mỗi biểu tượng sẽ có dạng [], sau đó là phần mô tả.

Trình đơn đồ họa

Mã cho menu như vậy sẽ được biên dịch theo nguyên tắc sau:

! !! !!

Tất nhiên, thông tin này chỉ là bề nổi của chủ đề đánh dấu Wiki. Bạn có thể tìm hiểu thêm về nó bằng cách truy cập nhóm VKontakte chính thức. Có rất nhiều thông tin và video hướng dẫn hữu ích về cách thiết kế đẹp

), lập thực đơn.

Bây giờ tôi sẽ cho bạn thấy cách tạo menu trong nhóm VKontakte và thiết kế nó một cách chính xác.

Làm đồ họa đẹp

Trong thiết kế mới của trang web VKontakte, kích thước đồ họa đã được thay đổi. Dưới đây bạn sẽ tìm thấy các giá trị hiện tại.

• Avatar của nhóm - 200x300 px
• Biểu ngữ trong phần mô tả - 510x271 px

Chuẩn bị hình ảnh ở kích thước yêu cầu. Mình sẽ chụp ảnh làm sẵn để các bạn xem ví dụ.

Vì vậy, hãy tạo một thiết kế đẹp bằng cách chia bức tranh tổng thể thành hai phần. Kết quả là chúng ta sẽ có được một thiết kế duy nhất.

Đầu tiên, tải lên hình đại diện của bạn. Đi tới nhóm và nhấp vào "Để tải ảnh lên".

Bạn sẽ thấy một biểu mẫu trong đó bạn cần chọn một tệp trên ổ cứng máy tính của mình. Làm đi. Kết quả là chúng tôi đã nhận được những điều sau đây.

Bây giờ hãy thêm phần thứ hai của hình ảnh. Để làm được điều này, bạn cần dán một bức ảnh lên tường, sau đó ghi lại, gắn vào khu vực phía trên.

Chúng ta hãy đi vào bức tường. Ở đây trên khối "Thêm một lưu ý", hãy nhấn vào biểu tượng Ảnh.

Tải lên hình ảnh đã chuẩn bị thứ hai. Hãy chắc chắn chọn để đăng bài với tư cách là một cộng đồng. Và sau đó nhấp vào "Gửi".

Bây giờ mục nhập cần được bảo mật (xem). Chúng ta quay lại mục mới và mở rộng menu ở góc trên bên phải. Ở đây chúng tôi nhấp vào “Ghim”.

Bây giờ hãy làm mới trang và xem kết quả.

Điểm trừ duy nhất là hình ảnh ở các cấp độ khác nhau. Nhưng điều này là do thực tế là chúng không có kích thước phù hợp. Hình đại diện phải lớn hơn theo chiều dọc. Sau đó, họ sẽ ở cùng cấp độ.

Cách tạo menu trong nhóm VKontakte

Hãy quay lại ví dụ của chúng ta và tưởng tượng rằng chúng ta cần tạo nút "Chi tiết khác". Cô ấy đã có trong ảnh rồi. Làm cách nào chúng ta có thể biến nó thành một nút để khi nhấp vào, một người sẽ được đưa đến trang web chính của chúng ta? Tôi sẽ chỉ cho bạn bây giờ.

Để tạo các nút menu hoạt động, chúng ta phải cắt chúng thành các hình ảnh riêng biệt. Để làm được điều này, chúng ta cần Photoshop.

Mở hình ảnh của chúng tôi trong trình chỉnh sửa và kích hoạt công cụ Cắt.

Cắt phần dưới cùng bằng nút. Nhấn giữ chuột trái và kẻ một đường ngang, cắt bức tranh thành hai phần.

Bây giờ nhấn Alt+Ctrl+Shift+S để lưu hình ảnh đã hoàn thành.

Https://vk.com/pages?oid=-120208137&p=menu

Hãy nhìn xem, sau các ký hiệu "odi=- ", bạn cần chèn id nhóm của mình (xem). Và ở cuối liên kết, hãy viết tên cho trang menu của bạn. Trong ví dụ, chúng ta sẽ để nguyên “Menu”.

Ở đây chúng ta nhấn vào biểu tượng camera và tải lên những hình ảnh đã chuẩn bị sẵn.

Bây giờ chúng ta chuyển sang tạo menu cho nhóm trên VK. Nó sẽ trông giống như vậy.

Tiếp theo chúng ta đến phần "Chỉnh sửa". Ở đây, đối với mỗi hình ảnh, chúng ta cần loại bỏ phần đệm để chúng hợp nhất thành một hình ảnh duy nhất. Để thực hiện việc này, hãy thêm giá trị sau vào mã: “nopadding;” . Và thêm liên kết đến trang hoặc trang web mong muốn, nhập giá trị “https://site.ru/page.html” (cho biết địa chỉ của bạn!). Trong ví dụ của chúng tôi, nút “Chi tiết khác” sẽ dẫn đến trang web. Đây là điều nên xảy ra.

[] []

Lưu trang. Đừng quên sao chép địa chỉ của cô ấy từ thanh địa chỉ. Nó sẽ trông giống như:

https://vk.com/page-120208137_52523487

Chúng tôi quay lại tường nhóm và tạo một mục mới. Trong đó chúng ta chèn link tới trang và đính kèm hình ảnh gốc. Chúng tôi xuất bản và ghim.

Đây là thực đơn chúng tôi đã kết thúc.

Hôm nay chúng ta lại quay lại chủ đề thiết kế nhóm VKontakte. Chúng tôi đã học trước đây. Hôm nay chúng ta sẽ học cách làm đồ họa menu với biểu ngữ cố định trên cùng và một liên kết đến một trang nội bộ với các mục menu mở rộng. Nói chung, mọi thông tin đều có thể có trên trang nội bộ. Sẽ đặc biệt thuận tiện khi đặt ở đó, chẳng hạn như các danh mục sản phẩm với nhiều loại sản phẩm. Cả menu thả xuống và menu cố định đều có ưu và nhược điểm. Nhược điểm chính của menu thả xuống là nó ở trạng thái đóng theo mặc định. Nhưng bạn có thể đặt nhiều liên kết trên đó cùng một lúc.

Trình đơn được ghim nó trông ấn tượng hơn do ấn tượng tổng thể, nhưng nó chỉ có thể có một liên kết, dẫn đến trang VKontakte nội bộ hoặc đến một trang bên ngoài (và liên kết đến trang bên ngoài sẽ không đến từ hình ảnh mà từ liên kết văn bản dưới bức tranh). Ngoài ra, một trong những nhược điểm rõ ràng là trên thiết bị di động, menu đồ họa được hiển thị dưới dạng mục nhập thông thường trong nguồn cấp dữ liệu, đứng trên cùng và không được ghim bên cạnh hình đại diện. Nói chung, khi chọn thiết kế, bạn nên tính đến những sắc thái này. Vì vậy, hãy xem cách tạo một menu trên cùng hấp dẫn có liên kết đến một trang nội bộ.

Tôi tạo nhóm VKontakte
Thiết kế chất lượng cao của các nhóm VK và các trang công khai, menu được ghim, menu thả xuống, menu đồ họa nội bộ, danh mục, điều hướng nội bộ - giá cả Và danh mục đầu tư.

Bước 1
Tạo một tài liệu mới trong Photoshop có kích thước khoảng 900x700 pixel và tô màu trắng. Bây giờ chúng ta cần cắt ra hai cửa sổ trong lớp, qua đó sẽ hiển thị chính thiết kế đồ họa thực tế. Đầu tiên, chọn hình chữ nhật có kích thước 200x500 pixel (avatar) và nhấn Del. Sau đó chọn một hình chữ nhật có kích thước 510x352 (căn chỉnh nó với dòng dưới cùng của hình đại diện và tạo khoảng cách giữa các hình là 50 pixel) và cũng nhấn Del.
Sau bản cập nhật thiết kế tiếp theo của VKontakte (ngày 31 tháng 10 năm 2016), kích thước biểu ngữ trở thành 510x307 (không phải 510x352).

Bước 2
Bây giờ, bên dưới lớp màu trắng, chúng ta đặt một số hình ảnh duy nhất, chúng sẽ tạo thành nền tảng của thiết kế.

Bước 3
Sau đó, chúng tôi bổ sung hình ảnh bằng nhiều yếu tố khác nhau - logo, dòng chữ và nút mời bạn nhấp vào menu. Sau đó, chúng tôi lưu hai ảnh riêng biệt trên máy tính - một ảnh là hình đại diện (ở bên phải), ảnh thứ hai là menu có nút bấm (ở bên trái).

Bước 4
Chúng tôi cũng tạo một menu đồ họa trong Photoshop bao gồm một số mục. Chiều rộng của menu này phải là 600 pixel, chiều cao là tùy chọn, tùy thuộc vào số lượng mục. Để giúp đỡ, hãy sử dụng bài học ““.

Bước 5
Chúng tôi cắt thực đơn của mình thành nhiều dải ngang phù hợp với số lượng món trong thực đơn. Lưu dưới dạng tập tin riêng biệt.

Bước 6
Chúng tôi đi đến nhóm VKontakte của mình, nhấp vào “Quản lý cộng đồng” (nhấp vào ba dấu chấm bên dưới tác giả sẽ mở menu thả xuống) và kiểm tra xem cài đặt có chính xác không. Nhóm nên cởi mở và tài liệu cũng nên cởi mở.

Bước 7
Bây giờ chúng tôi tải lên một hình đại diện mới. Di chuyển chuột đến vị trí của hình đại diện và chọn “Cập nhật ảnh” từ menu bật lên. Tải ảnh phù hợp từ Bước 3, kéo vùng chọn lên và xuống theo các cạnh của ảnh, nhấp vào “Lưu” rồi chọn vùng cho hình thu nhỏ tròn.

Bước 8
Bây giờ bạn cần tạo một trang nội bộ. Làm thế nào để làm điều này được mô tả chi tiết trong bài học. Một cách khác để tạo trang nội bộ được mô tả trong bài học “” ở Bước 5 và 6.

Bước 9
Sau khi tạo xong trang nội bộ, chúng ta có thể truy cập trang đó. Để thực hiện việc này, bạn cần nhấp vào menu thả xuống của nhóm (theo mặc định mục này được gọi là “Tin tức mới nhất” - tôi đã đổi tên thành “Menu”) và ở đó nhấp vào liên kết “Menu”. Sau này chúng ta sẽ đi đến trang trống mới được tạo.

Bước 10
Bây giờ chúng ta cần tạo một menu đồ họa gồm năm mục. Để thực hiện việc này, chúng tôi tải năm bức ảnh của mình từ Bước 5 lên album nhóm. Chúng tôi nhấp vào biểu tượng máy ảnh và tải các bức ảnh đã cắt lên từ máy tính. Các bức ảnh sẽ được lưu trữ ở đâu đó trên máy chủ VKontakte và được liên kết với nhóm nên không cần thiết phải tạo một album riêng cho các bức ảnh cắt ra. Bạn cần tải ảnh lên ở chế độ đánh dấu Wiki.

Bước 11
Bây giờ trong chế độ đánh dấu wiki, chúng ta sẽ tạo một menu đồ họa. Điều rất quan trọng là tạo ở chế độ đánh dấu wiki (biểu tượng ở góc trên bên phải của hai dấu ngoặc tam giác) chứ không phải ở chế độ chỉnh sửa trực quan. Thông tin thêm về cách tạo mã trong đánh dấu wiki được mô tả trong Bước 4 và Bước 5 của bài học “”. Ngoài ra còn có một mẫu mã để chèn. Nếu mọi thứ được thực hiện chính xác, bạn sẽ nhận được một menu đồ họa được tạo sẵn, như trong hình bên dưới.

Bước 12
Bây giờ chúng ta quay lại trang chính của nhóm, lấy URL của trang nội bộ của chúng ta (nó phải giống như thế này https://vk.com/page-78320145_49821289) và dán nó vào cửa sổ nơi tin tức được tạo. Một cửa sổ có liên kết đến trang nội bộ này sẽ tự động được đính kèm. Sau đó, chúng ta di chuyển con trỏ đến dòng chữ “Đính kèm” và đính kèm ảnh vào bài đăng, cụ thể là ảnh của chúng ta ở bên trái từ Bước 3. Sau đó, chúng ta xóa dòng khỏi URL của trang nội bộ, để lại khoảng trống. Quan trọng! Ở bước này, bạn cần đánh dấu vào ô (nếu bạn có các quyền như vậy, điều này chủ yếu áp dụng cho các nhóm có tường mở) trong hộp kiểm “Thay mặt nhóm”. Nếu bạn không chọn hộp này, mục nhập sẽ không được ghim. Cuối cùng, nhấp vào “Gửi”.

Bước 13
Di chuyển con trỏ đến ba dấu chấm bên cạnh tiêu đề bài đăng và chọn “Ghim” trong cửa sổ thả xuống. Theo đó, tin tức cũng được tách ra nếu cần thiết.

Bước 14
Có một cảnh báo. Đôi khi, sau khi bạn bỏ ghim một câu chuyện tin tức, câu chuyện đó sẽ xuất hiện sâu dưới nguồn cấp dữ liệu, tùy theo ngày tạo và có thể khá khó để tìm lại câu chuyện đó. Vì vậy, tốt hơn hết bạn nên ghi ngay URL của tin tức được ghim vào đâu đó. Để thực hiện việc này, hãy di chuyển con trỏ đến thời điểm tin tức được tạo và nhấp vào liên kết.

Bước 15
Bây giờ chúng tôi cập nhật trang chính của nhóm. Menu đồ họa của chúng tôi sẽ nằm ở trên cùng bên cạnh hình đại diện. Và khi nhấp vào hình ảnh, chúng ta sẽ được đưa đến một trang nội bộ với menu gồm năm mục.