TẠO TRANG WEB BÁN HÀNG

9.TẠO TRANG WEB BÁN HÀNG

(NGÀY 8.11.2013)

Trang Web bán hàng là Trang Web trong đó khung EditRegion bạn tạo Table có nhiều Ô  và trong một Ô chèn hình – tên hình – giá – và liên kết hoặc thêm một số chi tiết khác. Ở đây Út Bỉnh trong lúc hướng dẫn các bạn sẽ sáng tạo các Ô giới thiệu từng phần mềm đang học.

Bài này Út Bỉnh đã có viết trong giáo trình Dreamweaver 8 bài số 31 nhưng phương pháp học của Út Bỉnh đối với thầy dạy như sau: Trong lúc thầy dạy Út Bỉnh đã tạo phim ghi hết 100% không sót nội dung bằng phần mềm Ghi màn hình Camtasia và sau đó biên tập lại thành bài viết hoàn chỉnh. Ngoài ra Út Bỉnh còn ôn tập lại bằng cách tạo một video hướng dẫn upload lên YouTube. Nếu gặp bài khó thì Út Bỉnh soạn lại vài viết lần thứ 2 trước khi dùng phần mềm Windows Movie Maker tạo phim.

Muốn biết Trang Web bán hàng như thế nào các bạn có thể nhập từ khóa và xem trực tiếp trên mạng để có khái niệm cụ thể.

1.KHẢO SÁT

Khi thiết kế trang Web điều quan trọng là bạn cần tham khảo các trang trên mạng để lọc các cái hay của từng trang web đúc kết thành của riêng mình. Cách làm này hiệu quả nhất và nhanh nhất.

• Ở đây là trang: http://sjcsaigon.com/

Bạn thấy cột Menu và kế bên là nội dung của từng menu. Khung trưng bày tạo Table chia nhiều Ô bằng nhau. Trong mỗi Ô có Nút liên kết và hình.

• Trang: http://www.vatgia.com/ngoclamcamera . Bạn thấy cộ menu bên trái và Khung EditRegion giới thiệu mặt hàng bên phải. Mỗi Ô gồm : hình – tên – giá và nút liên kết.

2.CHUẨN BỊ

1. Ô mặt hàng : Dùng Table tạo 6 Ô gồm 3 cột và 2 hàng. Mỗi Ô tôi giới thiệu một phiên bản của Photoshop gồm : Photoshop CS2 – CS3 – CS4 – CS5 – CS6 và CC. Trong mỗi Ô có chèn tên và nút liên kết đến Chi tiết phần mềm – link download. Do Khung EditRegion có W 750 nên Út Bỉnh tạo mỗi Ô W 250. Mỗi Ô có: Ảnh – Tên – Nút liên kết Giới thiệu – Nút liên kết Softwares.

TẠO ẢNH

• Cách lấy hình trên mạng: Nhập từ khóa: logo photoshop cs2 > Enter > Bấm chọn một hình > Nút xem hình ảnh > Bấm phải chọn Save Images As > Lưu trong một folder tạo sẵn tại Desktop. Các hình còn lại thực hiện giống các bước này. Bạn đã sưu tầm 6 logo của Photoshop để làm dữ liệu chèn hình.

o   Dùng Photoshop hiệu chỉnh 6 ảnh: Mở Chương trình Photoshop bất kỳ phiên bản nào > File > Open > Đến 6 ảnh > Chọn công cụ Crop > Nhập W: 250 px – H: 250 px và Resolution 300 px > Rê lên ảnh và Enter. Bạn đã có ảnh 250 X 250 px.

o   Tạo viền cho ảnh: Menu Images > Canvas Size > Nhập giá trị theo hình > Chọn màu viền > Ok > Save As > Chọn folder cũ > Ok > Ok. Đã thay thế ảnh cũ.

o   Tiếp tục tạo 5 ảnh còn lại theo cách hướng dẫn trên. Bấm lên folkder ảnh bạn có 6 ảnh đồng kích cở 250 X 250 px. Basm61 Save

• Lưu ảnh: Bạn phải chọn Save for web (Alt+Shift+Ctrl+S) > Chọn JPEG và LOW > Enter để có ảnh nhẹ dung lượng mau hiện ra và download nhanh. Nhìn góc đáy trái chỉ có: 5,437 KB > Save.

o   Lưu 6 ảnh vào folder images của Web: Copy 6 ảnh > Vào Folder www/ new_4/Templates/images > Dán 6 ảnh vào đây.

TẠO NÚT LIÊN KẾT

• Tìm nút: Váo mạng gỏ: button rectangular > Enter. Tạo folder tên: nut tại Desktop > Vào Images > Images Size chọn Width 100 – Height 30px >  và lưu 2 nút chọn lựa thích hợp. Rename đặt tên 2 nút.

• Photoshop chèn chữ lên Nút: Sau khi nhập chữ vào bạn dùng Layer Style hiệu chỉnh trang trí chữ > Save for web.
• Lưu 2 nút vào folder images của Web: Copy 2 nút > Vào Folder www/ new_4/Templates/images > Dán 2 nút vào đây.

3.THIẾT KẾ

TẠO VÙNG THAY ĐỔI

Tạo Vùng Thay Đổi: Bấm Tag table > td (cả khung bên phải)> Đã chọn khung Thay Đổi > Insert > Templates Objects > EditRegion > Ok > Save All > Update > Close. Sau khi tạo xong thì file Photoshop.php mới nhấp con trỏ vào được để bắt đầu thiết kế.

Hủy Vùng Thay Đổi:  Bôi đen Văn bản EditRegion > Code > Delete > Save All > Update > Bấm lên EditRegion > Chọn Nowhere > Ok > Close.

Khi tạo Localhost trong máy tính của bạn, bạn có thể tạo nhiều Site và đặt tên: new_1, new_2, new_3, new_4. Bây giờ tôi chọn new_4 để thực tập bài này (Vào: AppServ/www/new_4).

TẠO MENU VÀ CÁC TRANG TƯƠNG ỨNG

• Tạo Menu va Trang Photoshop: Bấm Shortcut Dreamweaver 8.
• Tạo Menu: Chọn trang index.dwt.php > Bấm cột menu đứng bên trái > Vert chọn Top > Nút Table > Nhập giá trị theo hình > Ok.

• Đổ màu cho Ô menu: Bấm lên Ô menu vừa tạo > Ô Background Color > Quả cầu màu > Chọn màu > Ok > Ô menu đã có màu vừa chọn.

o   Tạo thêm các Ô Menu: Bấm lên Ô Menu vừa tạo > Bấm phím Tab nhiều lần để tạo nhiều Ô Menu > Nhập văn bản: PhOTOSHOP vào Ô menu > Hiệu chỉnh văn bản.

• Tạo Trang Photoshop có tên tương ứng với  tên Menu Photoshop: File > New > Tab Templates > Site new_4 > Bấm lên index > Create > Save All > Nhập: Photoshop > Save > Update > Close. Bạn đã thấy trang Photoshop.php trong Panel Files. Bạn tiếp tục tạo các Trang tương ứng với tên menu còn lại.
• Tạo liên kết từng tên Menu với Trang tương ứng: Bôi đen PHOTOSHOP cần tạo liên kết > Bấm nút Folder Browse for file > Bấm lên Photoshop.php > Ok. Tên Menu PHOTOSHOP đã có gạch dưới. (đã có liên kết với trang Photoshop.php). Bạn tiếp tục tạo liên kết các menu còn lại > Save All > Update > Close > Preview.

TẠO NỘI DUNG CHO TRANG PHOTOSHOP

• Tạo 6 Ô: Mở trang Photoshop.php > Bấm vào Khung EditRegion để tạo 6 Ô > Chọn Table > Nhập giá theo hình.(

o  Tạo 3 hàng mỗi Ô: Hàng trên cùng là ảnh - Giữa là tên và dưới là 2 nút liên kết. Sau khi tạo 3 hàng của Ô 1 bạn copy và dán qua Ô 2 và Ô 3.

• Chèn ảnh Photoshop CS2  vào Ô 1: Bấm Hàng trên cùng của Ô 1 > Nút Images > Đến ảnh Photoshopcs2 > Ok > Ok. Ảnh đã được chèn vào dóng trên cùng của Ô 1. Bạn tiếp tục chèn ảnh còn lại vào các Ô.

·         Nhập văn bản vào Dòng 2 của Ô 1 và các Ô khác.

·         Chèn 2 nút liên kết vào Dòng 3 của Ô 1 và các Ô khác: Nút Images > Đến nơi lưu nút > Chèn xong nút canh giữa > Copy và dán vào các Ô khác.

TẠO LIÊN KẾT CHO CÁC NÚT

Có nhiều kiểu tạo liên kết. Các bạn xem lại bài số 16. Hiện nay các Host free ngoài việc cung cấp Link URL cho file văn bản và file ảnh còn có cho các bạn xem nội dung của nó trước khi bấm download nội dung về máy tính của bạn.

Lợi điểm này giúp cho bạn không cần chứa file văn bản và hình ảnh trong trang Web khiến cho trang Web nhẹ đi dễ xem nhanh và download cũng nhanh. Trước khi tạo liên kết bạn upload dữ liệu lên Host free và dán Link vào Ô Link. Người xem chỉ nhấp lên nút liên kết và đọc nội dung trực tiếp trên Host Free.

Do đó khi tạo liên kết thường chọn kiểu liên kết ngoài tức là nối trực tiếp với Mạng.

1.Tạo 2 nút  liên kết cho PHOTOSHOP CS2:  Liên kết Ngoài và liên kết trong

• Liên kết ngoài với Trang Web lấy URL: Bấm nút Softwares > Nhập Link URL trong Ô Link > Save All > Preview > Bấm nút vừa tạo liên kết > Xuất hiện nội dung của nó. Cách tìm nội dung để tạo liên kết:  Vào mạng nhập: download photoshop cs2 full. Lấy link URL của Trang Web này nhập vào Ô Link.

• Liên kết trực tiếp đến file văn bản trong máy tính: Bấm nút Giới thiệu > Rê nút Point to file đến Trang GiaotrinhVideo.doc > Đã xuất hiện văn bản trong Ô Link > Save All > Preview > Bấm nút vừa tạo liên kết. Đã thấy nội dung văn bản liên kết. Chú ý: Văn bản liên kết này được chèn trong đường dẫn: www/new_4/Templates/Documents. (Bạn tạo một folder Dicuments trong Templates).

Tóm Lại:

Đây không phải là một trang Web bán hàng nhưng tựu trung cũng giống như vậy có nghĩa là bên Khung Vùng Thay Đổi bạn có thể tạo các Ô rồi chèn Hình – tên – giá cả - liên kết vào. Khi bấm lên một menu bên trái sẽ hiển thị các Ô quảng cáo hàng và người xem bấm lên liên kết khi muốn tìm hiểu chi tiết món hàng.

Việc thiết kế và chèn nội dung cho các Menu còn lại cũng thực hiện giống các bước trên.

Việc cuối cùng sau khi thiết kế hoàn tất trang Web là Upload Localhost này lên Hosting của bạn. Host có thể là Host Free hoặc Host Mua. Phương thức Upload có 2 cách. Up bằng File Mozilla (Xem bài số 29) và bằng Host Mua (xem bài số 30).

QUAN TRỌNG

Bạn cần rename file:

index.php thành Trangchu.php Và Rename trang Photoshop.php thành index.php

trước khi tạo file zip cho Source. 

Download 43 bài viết tại: https://shared.com/xeinhfeljd?s=dd

UPLOAD TRANG WEB LÊN HOST

Đến AppServ/www/new_4 > Bấm phải lên > Send To > Compressed (zipped) folder > Đã tạo ra file.zip > Vào Host > Chọn public_html > Nút Upload > Browse > Đến file .zip > Chờ Upload > Khi thông báo xong bấm dòng Back to /home/utbinhde/public_html > Đã thấy file.zip > Bấm lên chọn nút Extract > Extract files > Close > Đã thấy foder source Web.

Xem kết quả : http://utbinhdesign.com/new_4/index.php