1 Báo cáo Assignment1 TRƯỜNG CAO ĐẲNG THỰC HÀNH FPT POLYTECHNIC BÁO CÁO ASSIGNMENT 1 Đề bài Thiết kế layout cho một website tin tức Giáo viên Nguyễn Thị Trà My Họ tên sinh viên Trịnh T[.]
TRƯỜNG CAO ĐẲNG THỰC HÀNH FPT-POLYTECHNIC BÁO CÁO ASSIGNMENT Đề bài: Thiết kế layout cho website tin tức Giáo viên: Nguyễn Thị Trà My Họ tên sinh viên: Trịnh Thị Hoài Thu Mã sinh viên: PA00086 Lớp: PT09301 Báo cáo Assignment1 MỤC LỤC PHẦN I QUY TRÌNH THỰC HIỆN .4 I. Cắt HTML CSS 1. Quy trình cắt HTML CSS Cam kết làm việc II Thiết kế giao diện website .4 Quy trình thiết kế .4 Cam kết làm việc PHẦN II GIẢI THÍCH CODE .6 PHẦN III SO SÁNH TRÊN CÁC TRÌNH DUYỆT KHÁC NHAU .9 PHẦN IV KHÓ KHĂN GẶP PHẢI PHẦN V BÀI HỌC KINH NGHIỆM 10 PHẦN VI HƯỚNG PHÁT TRIỂN VÀ KẾT LUẬN 12 Báo cáo Assignment1 Báo cáo Assignment1 PHẦN I QUY TRÌNH THỰC HIỆN I. Cắt HTML CSS 1. Quy trình cắt HTML CSS Khách hàng chuyển file PSD sang cho chúng Gởi yêu cầu chi tiết hiệu ứng cần có website (Link demo mơ tả hiệu ứng ) Trao đồi với Designer để hiểu ý đồ thiết kế Tìm hiệu ứng phù hợp cho website Tiến hành cắt css và đưa hiệu ứng vào website HTML hồn chỉnh Test bản HTML trên trình duyệt Firefox, Google chrome, IE7, IE8, IE9 Khách hàng nghiệm thu 2 Cam kết làm việc Bản HTML chuẩn file PSD thiết kế Cắt chuẩn W3C Sử dụng hiệu ứng đại cho website II Thiết kế giao diện website Quy trình thiết kế Lấy yêu cầu thiết kế từ khách hàng Thiết kế giao diện demo trang chủ Sau giao diện demo trang chủ hoàn thành, Designer gặp khách hàng thuyết trình giao diện, giúp khách hàng hiểu rõ ý nghĩa giao diện Trong trình trao đổi với khách hàng có điều chỉnh Designer tiến hành chỉnh sửa giao diện theo yêu cầu đến giao diện trang chủ hoàn thiện Báo cáo Assignment1 Sau đó, Designer tiến hành thiết kế trang theo phong cách thiết kế trang chủ. Cam kết làm việc Đảm bảo tiến độ thiết kế thời gian Giao diện thiết kế đẹp, sáng tạo, chuyên nghiệp Sản phẩm nhận tương xứng với chi phí đầu tư Báo cáo Assignment1 PHẦN II GIẢI THÍCH CODE Sau day trình bày cách thiết kế layout assignment gồm phần: header, body, footer Phần body gồm left_body main_body example.html Code: Example header body_left body_main footer example.css Code: *{ margin:0; } body { Báo cáo Assignment1 text-align:center; } #wrapper { margin:auto; width:800px; } #header { height:100px; background:#99CC66; } #footer { height:100px; background:#339933; } #body_left { float:left; width:100px; height:600px; background:#FF9900; } #body_main { float:left; width:700px; height:600px; background:#99CCFF; } vide { Báo cáo Assignment1 clear:both; } file html ko có j đặc biệt, bao gồm cấu trúc thành phần mà ta cần bố trí, cịn bố trí phụ thuộc hồn tồn vào file css Bây giờ, ta tìm hiểu bước cách tạo layout trên: - Tạo div #wrapper dùng để bao hàm toàn trang web Ta cần div cửa sổ để giúp trang web thích ứng với nhiều loại hình độ phân giải khác Để làm điều này, ta dùng margin:auto cho Firefox (vô dụng với IE ) text-align:center body cho IE (vô dụng vơi FF ) Cuối cùng, thuộc tính width định độ rộng trang web - Tạo div: #header, #footer, #body Khơng có đặc biệt, chúng lấy hết độ rộng #wrapper bố trí liên tiếp từ xuống dưới: Code: - Bây div #body, ta chia làm cột cách tạo div #body_left #body_main với 2 thuộc tính float (trơi nổi) width div bố trí liên tiếp từ trái sang phải, #body có đủ độ rộng: Code: Báo cáo Assignment1 PHẦN III SO SÁNH TRÊN CÁC TRÌNH DUYỆT KHÁC NHAU Một số trình duyệt có plug-in hỗ trợ kiểm tra tính hợp chuẩn lỗi mã XHTML CSS như: Firefox, IE 6, IE8, Chrome, Safari, Opera PHẦN IV KHÓ KHĂN GẶP PHẢI Thanh tìm kiếm định hướng web site chưa ổn định, xuất trang web Sử dụng công cụ hướng dẫn khách hàng thấy họ đâu họ quay trở lại Các đường link cần dễ dàng khám phá Bạn tạo đường link chữ hay biểu tượng tất trang để người xem lại xem tiếp mà sử dụng đến nút “back” hay “forward” trình duyệt Bạn cần nhớ phải có chữ thay tất đồ hoạ đường link liên kết trang bạn Đây từ xuất thay đồ họa tuỳ chọn đồ hoạ trình duyệt bị tắt người ta nhấn nút “stop” trước lúc trang tải đầy đủ Báo cáo Assignment1 Khi tạo đường link trang chủ để cung cấp cho khách hàng thông tin liên lạc với công ty bạn, bao gồm số điện thoại, số fax, địa mail bưu điệu e-mail Cung cấp thông tin tổng quan công ty bạn, tin tức ngành công nghiệp bạn kinh doanh trang chủ website Thường xuyên xem xét kiểm tra lại trang web để đảm bảo thứ cập nhập đường link hoạt động tốt Nội dung trang web quan trọng: Bạn cần phải tìm hiểu cách thức mà thị trường tìm kiếm sản phẩm bạn Cần tìm giả thiết khác nhau, thử nghiệm điều chỉnh cho hợp lý Để trang web nằm top 10 kết tìm kiếm, bạn cần phải có chuẩn bị kĩ phương pháp kỹ thuật tốt Cần quan tâm đến hai phương diện: nội dung phải phù hợp với người truy cập bố trí để phù hợp với máy tìm kiếm trực tuyến PHẦN V BÀI HỌC KINH NGHIỆM - Lập danh mục cần có web site, chuẩn bị viết , hình ảnh, logo: Một website đại diện cho doanh nghiệp bạn, có chức giới thiệu thơng tin doanh nghiệp, dịch vụ, sản phẩm cung cấp, thơng tin hoạt động, tiện ích doanh nghiệp hỗ trợ cho khách truy cập web site ( hỗ trợ trực tuyến yahoo, video, thông tin hotline ) Vì bạn cần phải có chuẩn bị cụ thể, rõ ràng giúp cho khách truy cập web site bạn tiện lợi việc tìm kiếm thông tin, giải nhu cầu cách dễ dàng Hiện nay, vấn đề trở ngại nhiều website nay: bố cục không rõ ràng làm cho khách truy cập khó khăn việc tìm hiểu dịch vụ, sản phẩm, thơng tin , cịn thơng tin khơng rõ ràng, lang mang Báo cáo Assignment1 10 - Lựa chọn đối tác tin cậy để uỷ quyền thiết kế web site: Website doanh nghiệp thu nhỏ quan trọng, gây ảnh hưởng trực tiếp đến thương hiệu. Vì thân doanh nghiệp cần lựa chọn kỹ đối tác để uỷ quyền thiết kế web site. Vậy tiêu chuẩn chọn đơn vị thiết kế web ? - Đơn vị thiết kế web đưa phương án hỗ trợ tư vấn việc thiết kế web - Lưu tâm dịch vụ hậu doanh nghiệp chế độ bảo hành kỹ thuật, khả hỗ trợ web site xảy cố - Không nên chọn đơn vị thiết kế web site giá rẻ Khi bạn thêm thời gian để nâng cấp web site sau khách hàng khơng đánh giá cao hình ảnh doanh nghiệp bạn Lên phương án quảng bá cho web site sau thiết kế web xong: Sau thiết kế web site xong kết thúc Khách hàng biết đến website bạn không quảng bá Tuy nhiên việc quảng bá website khơng phải dễ dàng, bạn cần có kế hoạch cụ thể cho giai đoạn Hiện việc quảng bá website hữu hiệu thông qua danh thiếp, tờ rơi , quảng cáo từ khoá với google, làm seo web, đăng ký với trang thông tin, forum Vì bạn cần chọn cho phương án marketing hiệu không nôn nóng - Có kế hoạch thường xuyên cập nhập liệu, làm hình ảnh website: Việc doanh nghiệp thường xuyên cập nhập liệu, làm hình ảnh website gây nhiều thiện cảm khách truy cập Họ đánh giá cao tính chuyên nghiệp doanh nghiệp, tin tưởng thông tin truyền tải Với hình thức quảng bá thương hiệu doanh nghiệp, dịch vụ sản phẩm qua internet yếu tố niềm tin quan trọng ( tồn nhiều website lừa đảo gây hiệu ứng xấu khách truy cập) Báo cáo Assignment1 11 Nếu bạn cần giúp đỡ, tư vấn việc định hướng web site, liên hệ với công ty thiết kế web site Giải Pháp Tồn Cầu để tư vấn miễn phí PHẦN VI HƯỚNG PHÁT TRIỂN VÀ KẾT LUẬN Việc thiết kế web, đặc biệt web cá nhân, không ghê gớm người ta thường nghĩ nó, ngơn ngữ lập trình HTML, Visual Basic hay C++, đoạn mã nguồn dài dằng dặc mà cần sai dấu chấm tất “đi tong”, xử lý đồ họa cao cấp, … Thật ra, việc vơ đơn giản: thiết kế trang web = gõ văn + trang trí Tuy nhiên, đơn giản mà trang web cá nhân thua mặt thẩm mỹ, sáng tạo người tạo chúng Và việc chẳng dạy cả, phụ thuộc vào khả cá nhân kinh nghiệm có nhờ tìm tịi Mạng Internet phương tiện Nó cung cấp cho nguồn “tài nguyên phong phú” gồm vô số tiện ích, phần mềm, hình ảnh, âm thanh, tư liệu, thủ thuật, … để xây dựng trang web hồn chỉnh sau đó, nhờ Internet, website bạn người biết tới Vì thế, bạn chịu khó tìm kiếm, lục lọi, học hỏi bao nhiêu, trang web bạn phong phú mang đặc biệt nhiêu Tuy nhiên, để có phong cách riêng, kinh nghiệm thu thập được, bạn phải có sáng tạo định để sản phẩm khơng theo lối mịn hay “màu mè đa phong cách”. Báo cáo Assignment1 12 ... kế Cắt chuẩn W3C Sử dụng hiệu ứng đại cho website II Thiết kế giao diện website Quy trình thiết kế Lấy yêu cầu thiết kế từ khách hàng Thiết kế giao diện demo trang chủ Sau giao diện... viên> Sau đó, Designer tiến hành thiết kế trang theo phong cách thiết kế trang chủ. Cam kết làm việc Đảm bảo tiến độ thiết kế thời gian Giao diện thiết kế đẹp, sáng tạo, chuyên nghiệp ... xong: Sau thiết kế web site xong kết thúc Khách hàng biết đến website bạn không quảng bá Tuy nhiên việc quảng bá website dễ dàng, bạn cần có kế hoạch cụ thể cho giai đoạn Hiện việc quảng bá website