02. To Upload a Top Banner to the Website

03 Tháng Sáu 20156:52 CH(Xem: 3771)
02. To Upload a Top Banner to the Website
56Vote
40Vote
33Vote
25Vote
10Vote
3.514
blank (Download PDF)

To Upload a Top Banner to the Website

Before uploading top banner to the website, you must have the image file already prepared. Your top banner should be 1000 pixels wide and about 160 pixels high. The image height can be more or less than 160 pixels; but, the width should be 1000 pixels. (Pixel is the unit of measurement for computer monitor).

You can prepare the top banner image by yourself, or have someone made for you. The file is normally JPG format. (JPG stands for Joint Photographic Experts Group, which created the standard for compressing image file). Your may name your image anything you like. Let us assume your filename is banner.jpg.

Supporting managing responsive web design vnvn cms 2.5 top banner

Here is how to upload a top banner to the website:


A. Login the Control Panel

Fill in your Control Panel address (as provided by VNVN) in the address box of your web browser. Then, hit the "Enter" key on your keyboard.
The login screen will appear.

Supporting managing responsive web design vnvn cms 2.5 top banner

B.
Enter your username and password (as provided by VNVN). In the language box, click the arrow to the right of this box and select the language you want to work with in the Control Panel. This is the language for terms and instructions used throughout the Control Panel. Let's select "English". Then, click the "Login" button.


Supporting managing responsive web design vnvn cms 2.5 top banner

If you forgot to select language in the login screen, you can still select the language when you are already in the Control Panel. Look near the upper left corner of the screen, you will see 2 buttons labeled as "Viet Ngu" and "English". Click on the language you feel most comfortable to work with while doing the managing work.


Supporting managing responsive web design vnvn cms 2.5 top banner

C.
Click "Website Manager" on the top menu, then, select "Banner Setup" in the drop down list.


Supporting managing responsive web design vnvn cms 2.5 top banner

Your screen will look similar to the following.


Supporting managing responsive web design vnvn cms 2.5 top banner

D. Select which language site to manage.


Your website is normally built to support 2 languages. It is like you have 2 sites in one. In this case, you have to manage 2 sites; each site for one language. Before doing any managing work for your website, you need to specify which language site you are working with.

To select a language site, click on the box near the upper left corner of the screen and select the appropriate language site. In this example, you are uploading the top banner for the English site; you will select "English Site" for this box.

You will see a list of existing banners. This list is now empty because you haven't uploaded any banner to your website. Do the following steps for one language site. Then repeat these steps for the other language site.

E. Click the "Record Edit" button near the upper right corner of the screen. A blank record will appear.

    1. Fill in a name for this banner in the Title box, for example, "Top Banner".
    2. Towards the right of the screen is a Category list. Click the small boxes corresponding to the categories that this banner will appear. In other words, you are selecting which web pages this banner will appear. You may display a different banner for each category, if you want to. In this example, click all the boxes because you will display the same banner in all pages, or categories.

Supporting managing responsive web design vnvn cms 2.5 top banner

    3. Next, click the "Insert/edit Image" icon. A small screen will appear.


Supporting managing responsive web design vnvn cms 2.5 top banner

In the Image URL box, you will need to supply the Image URL, which means folder and file name and of the banner in the web server. The Control Panel will lead you through the process of uploading file and filling in this box. Click on the icon at the end of this box you will see a screen full of folders and files in your web server.


    4. The files are organized into several folders depending on the content of the files. Since we are uploading a banner to the website, it's best to store in the Banner folder.

Supporting managing responsive web design vnvn cms 2.5 top banner

    5. Click on the "Banner" folder on the left panel, you will see an empty list on the right area because you have not uploaded any banner yet. This is where you will upload your banner.


Supporting managing responsive web design vnvn cms 2.5 top banner

Bấm nút "Upload" ở góc trên, bên phải, khung sau đây hiện ra.


Supporting managing responsive web design vnvn cms 2.5 top banner

Bấm nút "Add", bạn sẽ thấy các file trong computer của bạn.


Supporting managing responsive web design vnvn cms 2.5 top banner

Hãy tìm đến file hình banner mà bạn muốn đưa lên site. Bấm vào tên file, rồi bấm nút "Open". Khung upload hiện trở lại với trên file ở góc trên, bên trái, sẵn sàng để gửi lên server.


Supporting managing responsive web design vnvn cms 2.5 top banner

Bấm nút "Upload".


Supporting managing responsive web design vnvn cms 2.5 top banner

Khi file được chuyển xong, sẽ có bảng thông báo. Bấm nút "OK" trong bảng thông báo. Sau đó, bấm nút "Close this window".


Supporting managing responsive web design vnvn cms 2.5 top banner

Một bảng thông báo hiện ra yêu cầu bạn xác nhận muốn ra khỏi chương trình upload. Bấm nút "Yes".


Bạn sẽ thấy file đã được upload vào folder Banner. Trong thí dụ này, bạn thấy file "banner.jpg".

Supporting managing responsive web design vnvn cms 2.5 top banner

Hãy bấm vào ô nhỏ trước tên file. Sau đó bấm vào nút "Insert".


Bạn sẽ trở lại khung Insert/edit Image. Lần này, ô Image URL đã được điền đường dẫn của file banner, tương tự như sau.

Supporting managing responsive web design vnvn cms 2.5 top banner

Bạn không cần quan tâm đến những ô dữ liệu còn lại trong khung. Bấm nút "Insert".


Supporting managing responsive web design vnvn cms 2.5 top banner

Phiếu dữ liệu của banner bây giờ sẽ tương tự hình trên. Lưu ý: ô Active được mặc định có dấu check, nghĩa là hình banner này sẽ hoạt động ngay. Nếu bạn bấm tắt ô này, banner sẽ không hiện ra trên website.


    6. Cuối cùng, bấm nút "Add" để hoàn tất.

Góc trên, bên trái sẽ hiện ra thông báo "Data Added Successfully!"

Supporting managing responsive web design vnvn cms 2.5 top banner

F.
Vào website kiểm soát để xem top banner đã hiện ra chưa. Lưu Ý: Bạn vừa lên top banner cho site tiếng Anh, bạn phải xem phần tiếng Anh của website. Bạn cần phải bấm nút refresh của browser mới thấy trang web đã được thay đổi.


Sau khi thêm top banner, website sẽ tương tự như sau.

Supporting managing responsive web design vnvn cms 2.5 top banner

You have finished uploading the top banner to the English section of your website.


If your website uses two languages, you will need to re-do the above steps for the second language site.
Gửi ý kiến của bạn
Tên của bạn
Email của bạn