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[.]
Trang 1
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 Thị Hoài Thu
Mã sinh viên: PA00086 Lớp: PT09301
Trang 2
MỤC LỤC PHẦN I QUY TRÌNH THỰC HIỆN 4
I. Cắt HTML CSS 4
1. Quy trình cắt HTML CSS 4
2 Cam kết làm việc 4
II Thiết kế giao diện website 4
1 Quy trình thiết kế 4
2 Cam kết làm việc 5
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 9
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
Trang 4
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 tôi
Gởi yêu cầu chi tiết về các hiệu ứng cần có trong website (Link demo hoặc 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 để cho ra bản HTML hoàn chỉnh
IE9
Khách hàng nghiệm thu
2 Cam kết làm việc
Bản HTML đúng chuẩn của file PSD đã thiết kế
Cắt đúng chuẩn W3C
Sử dụng các hiệu ứng mới và hiện đại cho website
II Thiết kế giao diện website
1 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 khi giao diện demo trang chủ hoàn thành, Designer sẽ đi gặp khách hàng thuyết trình giao diện, giúp khách hàng hiểu rõ ý nghĩa của giao diện
Trong quá trình trao đổi với khách hàng nếu có điều chỉnh thì Designer
sẽ về tiến hành chỉnh sửa giao diện theo yêu cầu và đi đến giao diện trang chủ hoàn thiện
Trang 5
Sau đó, Designer sẽ tiến hành thiết kế các trang trong theo phong cách thiết kế của trang chủ.
2 Cam kết làm việc
Đảm bảo tiến độ thiết kế đúng thời gian
Giao diện thiết kế đẹp, sáng tạo, chuyên nghiệp
Sản phẩm nhận được tương xứng với chi phí đầu tư
Trang 6
PHẦN II GIẢI THÍCH CODE
Sau day trình bày cách thiết kế layout của bài assignment gồm 3 phần: header, body, footer Phần body gồm left_body và main_body
example.html
Code:
<head>
<title>Example</title>
<link rel=”stylesheet” href=”/cntt/example.css” type=”text/css” />
</head>
<body>
<div id=”wrapper”>
<div id=”header”>header</div>
<div id=”body”>
<div id=”body_left”>body_left</div>
<div id=”body_main”>body_main</div>
<div class=”vide”></div>
</div>
<div id=”footer”>footer</div>
</div>
</body>
</html>
example.css
Code:
* {
margin:0;
}
body {
Trang 7
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 {
Trang 8
clear:both;
}
file html ko có j đặc biệt, nó chỉ bao gồm cấu trúc các thành phần mà ta cần
bố trí, còn bố trí như thế nào thì phụ thuộc hoàn toàn vào file css
Bây giờ, ta sẽ tìm hiểu từng bước cách tạo layout trên:
- Tạo div #wrapper dùng để bao hàm toàn bộ trang web Ta cần căn giữa div này trong cửa sổ để giúp trang web của chúng ta thích ứng với nhiều loại màn hình và độ phân giải khác nhau Để làm được điều này, ta dùng margin:auto cho Firefox (vô dụng với IE ) và text-align:center trong body cho IE (vô dụng vơi FF ) Cuối cùng, thuộc tính width quyết định độ rộng trang web
- Tạo các div: #header, #footer, #body Không có gì đặc biệt, chúng sẽ lấy hết
độ rộng của #wrapper và bố trí liên tiếp nhau từ trên xuống dưới: Code:
<div id=”wrapper”>
<div id=”header”></div>
<div id=”body”></div>
<div id=”footer”></div>
</div>
- Bây giờ trong div #body, ta sẽ chia làm 2 cột bằng cách tạo 2 div #body_left
và #body_main với 2 thuộc tính float (trôi nổi) và width 2 div này sẽ bố trí liên tiếp nhau từ trái sang phải, nếu #body có đủ độ rộng: Code:
<div id=”wrapper”>
<div id=”header”></div>
<div id=”body”>
<div id=”body_left”></div>
<div id=”body_main”></div>
</div>
<div id=”footer”></div>
</div>
Trang 9
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ó các plug-in hỗ trợ kiểm tra tính hợp chuẩn cũng như lỗi của mã XHTML và CSS như: Firefox, IE 6, IE8, Chrome, Safari, Opera
PHẦN IV KHÓ KHĂN GẶP PHẢI
Thanh tìm kiếm và định hướng web site chưa được ổn định, xuất hiện tại mọi trang web con
Sử dụng các công cụ hướng dẫn để cho khách hàng thấy họ đang ở đâu
và họ có thể quay trở lại như thế nào Các đường link cũng cần dễ dàng khám phá Bạn hãy tạo ra các đường link bằng chữ hay biểu tượng ở tất cả các trang con để mọi người có thể xem lại hoặc xem tiếp mà không phải sử dụng đến nút “back” hay “forward” của trình duyệt Bạn cũng cần nhớ là phải có những chữ thay thế tất cả các đồ hoạ và đường link liên kết trong trang của bạn Đây
là những từ sẽ xuất hiện thay thế đồ họa khi tuỳ chọn đồ hoạ trong trình duyệt
bị tắt hoặc khi người ta nhấn nút “stop” trước lúc trang được tải về đầy đủ
Trang 10
Khi tạo đường link tại trang chủ để cung cấp cho khách hàng các 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 chỉ mail bưu điệu và e-mail
Cung cấp những thông tin tổng quan về công ty bạn, những tin tức trong ngành công nghiệp bạn đang kinh doanh ngay tại trang chủ của website
Thường xuyên xem xét và kiểm tra lại trang web để đảm bảo rằng mọi thứ được cập nhập và các đường link luôn hoạt động tốt Nội dung trang web cũng rất quan trọng: Bạn cần phải tìm hiểu cách thức mà thị trường sẽ tìm kiếm sản phẩm của bạn Cần tìm ra những giả thiết khác nhau, thử nghiệm và điều chỉnh sao cho hợp lý Để trang web nằm ở top 10 trong kết quả tìm kiếm, bạn cần phải có sự chuẩn bị kĩ càng và 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 và
bố trí như thế nào để phù hợp với các bộ máy tìm kiếm trực tuyến
PHẦN V BÀI HỌC KINH NGHIỆM
- Lập các danh mục cần có trong web site, chuẩn bị các bài viết , hình ảnh, logo: Một website sẽ đại diện cho doanh nghiệp của bạn, có chức năng giới thiệu thông tin doanh nghiệp, các dịch vụ, sản phẩm hiện đang cung cấp, các thông tin hoạt động, các tiện ích của doanh nghiệp hỗ trợ cho khách truy cập web site ( như hỗ trợ trực tuyến bằng yahoo, video, thông tin hotline )
Vì vậy bạn cần phải có những chuẩn bị cụ thể, rõ ràng giúp cho khách truy cập web site của bạn tiện lợi trong việc tìm kiếm thông tin, giải quyết nhu cầu một cách dễ dàng nhất
Hiện nay, vấn đề này là một trở ngại của nhiều website hiện nay: bố cục không rõ ràng làm cho khách truy cập khó khăn trong việc tìm hiểu dịch vụ, sản phẩm, thông tin , còn thông tin thì không rõ ràng, lang mang
Trang 11
- Lựa chọn đối tác tin cậy để uỷ quyền thiết kế web site: Website là một doanh nghiệp thu nhỏ chính vì thế nó rất quan trọng, gây ảnh hưởng trực tiếp đến thương hiệu. Vì vậy bản thân các 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 như thế nào ?
- Đơn vị thiết kế web sẽ đưa ra những phương án hỗ trợ tư vấn như thế nào trong việc thiết kế web
- Lưu tâm dịch vụ hậu mãi của doanh nghiệp như chế độ bảo hành kỹ thuật, khả năng hỗ trợ khi web site xảy ra sự cố
- Không nên chọn những đơn vị thiết kế web site giá rẻ Khi đó bạn sẽ mất thêm thời gian để nâng cấp web site sau này cũng như khách hàng không đánh giá cao hình ảnh doanh nghiệp của bạn
Lên phương án quảng bá cho web site sau khi thiết kế web xong: Sau khi thiết kế web site xong không phải là kết thúc Khách hàng sẽ không thể biết đến website của bạn được nếu không được quảng bá Tuy nhiên việc quảng bá website cũng không phải dễ dàng, bạn cần có những kế hoạch cụ thể cho từng giai đoạn Hiện nay việc quảng bá website hữu hiệu như 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 các trang thông tin, forum Vì vậy bạn cần chọn cho mình một phương án marketing hiệu quả và không được nôn nóng
- Có kế hoạch thường xuyên cập nhập dữ liệu, làm mới hình ảnh website: Việc doanh nghiệp thường xuyên cập nhập dữ liệu, làm mới hình ảnh của website sẽ gây được nhiều thiện cảm của khách truy cập Họ sẽ đánh giá cao tính chuyên nghiệp của doanh nghiệp, tin tưởng các thông tin đang được 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 là hết sức quan trọng ( hiện nay tồn tại khá nhiều website lừa đảo gây ra những hiệu ứng xấu đối với khách truy cập)
Trang 12
Nếu bạn cần sự giúp đỡ, tư vấn trong việc định hướng về web site, hãy liên hệ ngay với công ty thiết kế web site Giải Pháp Toàn Cầu để được 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 là web cá nhân, không ghê gớm như những gì người ta thường nghĩ về nó, nào là ngôn ngữ lập trình HTML, Visual Basic hay C++, nào là các đoạn mã nguồn dài dằng dặc mà chỉ cần sai một dấu chấm là tất cả “đi tong”, nào là xử lý đồ họa cao cấp, … Thật ra, việc đó vô cùng đơn giản: thiết kế trang web = gõ văn bản + trang trí Tuy nhiên, vì đơn giản như thế mà các trang web cá nhân hơn thua nhau về mặt thẩm mỹ, sáng tạo của người tạo ra chúng Và việc này thì chẳng ai dạy cả, nó chỉ phụ thuộc vào khả năng cá nhân và các kinh nghiệm có được nhờ tìm tòi
Mạng Internet là phương tiện chính Nó cung cấp cho chúng ta nguồn
“tài nguyên phong phú” gồm vô số các tiện ích, các phần mềm, hình ảnh, âm thanh, tư liệu, thủ thuật, … để xây dựng một trang web hoàn chỉnh và sau đó, nhờ Internet, website của bạn được mọi người biết tới Vì thế, bạn càng chịu khó tìm kiếm, lục lọi, học hỏi bao nhiêu, trang web của bạn sẽ phong phú và mang đặc biệt bấy nhiêu Tuy nhiên, để có được phong cách riêng, ngoài những kinh nghiệm thu thập được, bạn phải có được một sự sáng tạo nhất định để sản phẩm của mình không đi theo lối mòn hay “màu mè đa phong cách”.