Hướng dẫn thiết kế web doanh nghiệp từ A tới Z

Bài lab sau hướng dẫn bạn xây dựng 1 trang web doanh nghiệp hoàn chỉnh: Trang chủ và trang quản trị, sử dụng công cụ DEVELOPER TOOLBOX và DREAMWEAVER.

Hoàn tất bài lab, bạn sẽ được trang web như sau:

Trang chủ

Hình ảnh này đã được thay đổi kích thước. Click vào đây để xem hình ảnh gốc với kích thước là 693x1465

Trang quản trị





Các chức năng chính:

A - Trang Chủ:

• - Hiện menu 2 cấp, kết hợp hiệu ứng SDMENU và database


• - Tạo các tab bằng jQuery với dữ liệu động


• - Hiện tin xem nhiều, tin nổi bật, tin mới nhận


• - Chức năng đăng nhập thành viên,


• - Trình bày tin tức theo loại


• - Hiện banner quảng cáo


• - Trang hiện tin thuộc loại tin khách hàng muốn xem.


• - Trang chi tiết tin: Hiện nội dung tin khách hàng muốn xem


• - Hiện tin cùng loại tin đang xem.


• - Biểu tượng Yahoo Online

B - Trang quản trị

• - Vẽ layout trang quản trị


• - Hạn chế truy cập: Chỉ admin mới được vào trang này.


• - Tạo trang quản lý Thể Loại


• - Tạo trang quản lý Loại Tin


• - Tạo trang quản lý Tin.


• - Chèn trình soạn thảo TinyMCE


• - Chèn thư viện Quản Lý Hình

Bắt đầu:

Download source để làm bài lab này tại đây:http://khoa.nhatnghe.vn/lab/webtintu...oanhNghiep.zip

Bước 1: Chuẩn bị môi trường làm việc: Tạo database, tạo site, tạo Connection.
http://khoa.nhatnghe.vn/lab/webtintuc/1-ChuanBi/
Download: http://www.mediafire.com/file/pqklgl.../1-ChuanBi.zip

Bước 2: Tạo tin mới nhận, tin nổi bật, tin xem nhiều. Kết hợp với jQuery Tab.
http://khoa.nhatnghe.vn/lab/webtintu...%20nhan%2CTab/
Download: http://www.mediafire.com/file/i92cg9...nhan%2CTab.zip

Bước 3: Hiện các tin và loại tin lồng nhau.
http://khoa.nhatnghe.vn/lab/webtintuc/3-TrinhBayTin/
Download: http://www.mediafire.com/file/25xvqb...rinhBayTin.zip

Bước 4: Tạo jumpMenu với dữ liệu lấy từ database.
http://khoa.nhatnghe.vn/lab/webtintuc/4-LienKetSite/
Download: http://www.mediafire.com/file/29t1c3...ienKetSite.zip

Bước 5: Tạo menu 2 cấp sdMenu, dữ liệu động lấy từ TheLoai và LoaiTin
http://khoa.nhatnghe.vn/lab/webtintuc/5-Menu2Cap/
Download: http://www.mediafire.com/file/a1ayot...5-Menu2Cap.zip

Bước 6: Hiện tin xem nhiều, tạo Tooltip: Hiện ra mô tả tin khi rê chuột lên tiêu đề tin.
http://khoa.nhatnghe.vn/lab/webtintuc/6-tooltip/
Download: http://www.mediafire.com/file/gcrnhy.../6-tooltip.zip

Bước 7: Hiện hình quảng cáo với dữ liệu động lấy từ bảng QuangCao
http://khoa.nhatnghe.vn/lab/webtintuc/7-QuangCao/
Download: http://www.mediafire.com/file/1kp1ms...7-QuangCao.zip

Bước 8: Tạo chức năng Đăng nhập thành viên
http://khoa.nhatnghe.vn/lab/webtintuc/8-Login/
Download: http://www.mediafire.com/file/y55g85...5p/8-Login.zip

Bước 9: Tạo trang tin trong loại: Hiện tin thuộc loại tin khách hàng muốn xem
http://khoa.nhatnghe.vn/lab/webtintuc/9-TinTrongLoai/
Download: http://www.mediafire.com/file/wko8ev...nTrongLoai.zip

Bước 10: Hiện chi tiết tin, Tin cùng loại với tin đang xem.
http://khoa.nhatnghe.vn/lab/webtintuc/10-ChiTietTin/
Download: http://www.mediafire.com/file/53ommo...ChiTietTin.zip

Bước 11: Tạo layout cho trang quản trị. Hạn chế truy cập trái phép, chỉ có admin mới được phép vào trang này.
http://khoa.nhatnghe.vn/lab/webtintuc/11-LayoutAdmin/
Download: http://www.mediafire.com/file/246oh7...ayoutAdmin.zip

Bước 12: Tạo trang quản lý TheLoai: Cho khách hàng thêm, xóa, sửa TheLoai.
http://khoa.nhatnghe.vn/lab/webtintuc/12-QuanLyTheLoai/
Download: http://www.mediafire.com/file/g50c77...nLyTheLoai.zip

Bước 13: Tạo trang quản lý LoaiTin: Cho khách hàng thêm, xóa, sửa LoaiTin.
http://khoa.nhatnghe.vn/lab/webtintuc/13-QuanLyLoaiTin/
Download: http://www.mediafire.com/file/z5lsls...nLyLoaiTin.zip

Bước 14: Tạo trang quản lý Tin: Cho khách hàng thêm, xóa, sửa Tin. Chèn trình soạn thảo TinyMCE, thư viện quản lý hình, Date Picker, tạo ràng buộc cho menu TheLoai và menu LoaiTin
http://khoa.nhatnghe.vn/lab/webtintuc/14-QuanLyTin/
Download: http://www.mediafire.com/file/q3cngn...-QuanLyTin.zip

Hoàn tất

Lưu ý: Để làm bài lab này, bạn nên:

• Sử dụng win XP, vista hoặc win 7


• Cài Appserv2.5.9


• Cài Dreamweaver CS3 và bộ Developer Toolbox