Mình xin hướng dẫn các bạn các bước làm 1 website bán hàng công nghệ trên nền tảng thietkewebninhthuan.com, phiên bản 2017 (có thể áp dụng với bất cứ lĩnh vực nào các bạn muốn)

Bài viết dành cho các bạn lần đầu làm quen với Thiết Kế Web Ninh Thuận nên có 1 số chỗ các bạn có thể bỏ qua nếu đã thạo.

Website này được thiết kế theo dạng responsize, có thể co dãn theo độ rộng màn hình, điện thoại, các đơn vị độ rộng chủ yếu sẽ sử dụng đơn vị %

web mẫu http://mau-563188.thietkewebninhthuan.com/?dangkymau=1

các bạn có thể cài nhanh mẫu giao diện này bằng cách vào Giao diện > mẫu cài đặt nhanh, tìm mẫu này ở cuối mục máy tính & điện thoại

1. Đăng nhập quản trị 

gõ /dangnhap/ sau tên miền.vd http://computer1.mov.mn/dangnhap/

2. Nâng cấp lên phiên bản 2017 nếu chưa nâng cấp

3. Trong menu quản trị các bạn chọn Giao diện -> bố cục chức năng , chọn tab nền website & khung chính

Ở mục font chữ bạn chọn các font tích hợp sẵn trên hệ thống hoặc những font bổ sung, các font bổ sung sẽ làm web load nặng hơn 1 chút, chọn font-size, mầu chữ chính. mặc định màu chữ là màu trắng FFF, ở VD này mình chọn màu đen xám đen mã 333333

Ở phần mầu chủ đạo chọn các mầu như hình, 3 mầu đầu nên là mầu đậm, 2 mầu cuối là mầu trắng để các chức năng khác trên website sẽ đi theo mầu chủ đạo này, khi thay đổi mầu chủ đạo thì toàn bộ website cũng đổi màu theo

4. Vào Tab bản PC trong mục Giao diện > bố cục chức năng để tạo giao diện cho bản PC

Quay lại trang mẫu các bạn sẽ thấy phần ảnh dưới đây là phần trên cùng của tất cả các trang trên website, còn phần dưới là phần nội dung thay đổi tùy trang, giờ chúng ta sẽ làm phần này

Bước 1. Tạo chức năng ô chứa, chứa tất cả các chức năng này

Chúng ta lại tiếp tục chia phần trên cùng của website làm 3 phần

- Phần 1 chứa 2 đoạn chữ

- Phần 2 chứa logo, ô tìm kiếm, giỏ hàng

- Phần 3 là menu

Trong admin ô chứa sẽ có màu xanh lá, các chức năng bình thường sẽ có màu xanh da trời

Bước 2: Thêm 2 ô chứa và chức năng menu vào  trong ô chứa tạo ở bước 1 để tạo 3 phần trên

Bước 3: Phần 1 chúng ta thấy 2 đoạn chữ, có thể dùng ô soạn thảo để làm 2 đoạn chữ này, tuy nhiên mình sẽ chọn cách tạo 2 chức năng khác nhau cho 2 đoạn chữ này

Mình sẽ thêm 2 chức năng Box HTML vào phần 1 ( trong quản trị là ô chứa, tab, slide 42 ), thêm 4 chức năng Ảnh & slide ảnh,  công cụ tìm kiếm , giỏ hàng, tài khoản vào ô chứa 13 ở dưới

Bước 4: Chi cột ở ô chứa 42 thành 2 cột ,  cột box html 19 30% và box html 20 70%

2 box trong admin sẽ tự thay đổi kích thước và kiểu hiện thị thành dạng cột inline

Bước 5. Sửa box html 19

Nhập dòng chữ bạn muốn

Khi chia cột tự động thì kiểu hiện thị box sẽ chuyển thành inline, rộng thành 30% như mình đã nhập ở trên, các bạn chọn mầu chữ, mình sẽ chọn theo mầu chủ đạo để khi đổi mầu cả website thay đổi theo

Đặt kiểu hiển thị cho box này là Inline, rộng 30%, khi đặt kiểu hiển thị inline thì box sẽ không xuống dòng

Nhấn nút lưu thay đổi để save lại

Bước 6: sửa tiếp box HTML 20

Nhấn Lưu cấu hình để lưu thay đổi và quay lại trang web, reload lại  ( ấn F5 ), nhấn tiếp vào hình dấu trừ để tạm ẩn thanh quản lý website 1

Kết quả

Bước 7. Quay lại sửa chức năng ô chứa, tab slide 42 , nhấn vào hình bút chì để sửa

Mình sẽ đặt tên cho ô chứa này là "chữ trên" để tiện chỉnh sửa, sau khi đặt tên chức năng thì phần sửa bố cục các bạn sẽ thấy tên  riêng của chức năng thay vì tên chung + số ID chức năng

Tiếp tục cấu hình như hình dưới

- rộng lớp nội dung : 90% , là độ rộng của nội dung ô chứa ( bao gồm 2 chức năng Box HTML ) so với cửa sổ trình duyệt

- độ rộng nội dung tối đa : 1200px: khi ở màn hình độ phân giải cao như  FULL HD 1920x1080 thì nội dung này chỉ rộng tối đa 1200px

- Căn ngang lớp độ rộng : Trái , ô chứa nội dung nằm giữa màn hình

- Đệm trong: tạo khoảng cách giữa nội dung và ô chưa: 10px 0 có nghĩa là cách trên, dưới 10px , cách phải, trái 0

- Đối tượng css cho box: border-bottom:1px solid #ccc;  tạo thuộc tính viền cho ô chứa này

Kết quả thu được

Bước 8. Sửa ô chứa Logo, đăng nhập, giỏ hàng ( ô chứa 42 ở bước 3 )

Nhấn vào hình chữ T để sửa tên chức năng là "Logo, giỏ hàng, đăng nhập", sau đó quay lại trang sửa bố cục

Bước 9. Chia cột ô chứa Logo, tìm kiếm, giỏ hàng, đăng nhập