Tìm hiểu về nghiệp vụ web designer Báo cáo THỰC tập tốt NGHIỆP

SVTH: BÙI THẾ NAM – 14TH BÁO CÁO THỰC TẬP TỐT NGHIỆP LỜI CẢM ƠN Em xin chân thành cảm ơn thầy cô trường Cao Đẳng Đức Trí Đà Nẵng – Khoa Công Nghệ Thông Tin tận tâm dạy dỗ em năm học tập trường Em xin chân thành cảm ơn thầy cô khoa Công Nghệ Thông Tin, đặc biệt thầy Trần Phú Hưng – người truyền đạt kiến thức, tận tâm hướng dẫn hết lòng giúp đỡ em suốt thời gian em thực báo cáo thực tập tốt nghiệp Trong trình thực tập công ty TNHH Trần Nhật Gia, em nhận giúp đỡ nhiệt tình ban lãnh đạo công ty anh chị phòng Web Designer (thiết kế web), tạo điều kiện cho em tiếp cận thực tế thu nhập thông tin số liệu Em xin chân thành cảm ơn toàn thể ban lãnh đạo công ty, đặc biệt anh Thánh…đã tận tình giúp đỡ em suốt thời gian thực tập công ty Chân thành cảm ơn anh chị giúp đỡ em hoàn thành báo cáo thực tập Do tiếp cận thực tế chưa mức lượng thời gian có hạn nên không tránh khỏi thiếu sót Em mong nhận ý kiến nhận xét, đóng góp từ phía thầy cô, anh chị công ty nhằm giúp em nâng cao kiến thức, củng cố hiểu biết thực cố gắng trình làm việc sau Trân trọng cảm ơn! Tp Đà Nẵng, tháng 12 năm 2016 GVHD:TRẦN PHÚ HƯNG TRANG SVTH: BÙI THẾ NAM – 14TH BÁO CÁO THỰC TẬP TỐT NGHIỆP LỜI MỞ ĐẦU Trong bối cảnh công nghệ thông tin phát triển vũ bão toàn giới dần trở nên phổ biến, lĩnh vực có góp mặt ngành công nghệ Công nghệ thông tin ngày làm thay đổi tác động mạnh vào lĩnh vực đời sống, kinh tế - xã hội người giữ vai trò quan trọng cho tang trưởng kinh tế toàn cầu, quốc gia phải trang bị kiến thức nguồn nhân lực am hiểu nghiệp vụ công nghệ thông tin để đứng vững thương trường quốc tế đầy biến động Tuy vậy, hầu hết sinh viên trường muốn làm việc ngành gặp nhiều bỡ ngỡ, nỗ lực xóa dần khoảng cách kiến thức thực tiễn để bắt kịp thay đổi bối cảnh kinh tế chuyển biến mạnh mẽ Hiểu điều này, em lấy làm vinh dự nhà trường tạo điều kiện công ty TNHH Trần Nhật Gia tiếp nhận để tiếp xúc thực tế, hiểu biết them lĩnh vực Qua tiếp xúc thực tế công ty, em bố trí thực tập phòng Web Designer (thiết kế web), vốn đóng vai trò quan trọng hoạt động công ty Và đây, em theo anh chị nhân viên học hỏi nhiều kinh nghiệm liên quan đến nghiệp vụ như: web designer (thiết kế web), tester (kiểm thử web) …Chính mà em định chọn “Tìm hiểu nghiệp vụ Web Designer công ty TNHH Trần Nhật Gia” làm đề tài báo cáo thực tập Với kiến thức học trường thời gian thực tập tháng công ty Trần Nhật Gia, giao thoa lý thuyết thực hành nên khó tránh khỏi thiếu sót trình ghi nhận Em mong đóng góp ý kiến thầy cô anh chị công ty để báo cáo hoàn thiện GVHD:TRẦN PHÚ HƯNG TRANG SVTH: BÙI THẾ NAM – 14TH BÁO CÁO THỰC TẬP TỐT NGHIỆP MỤC LỤC LỜI CẢM ƠN LỜI MỞ ĐẦU PHẦN 1: GIỚI THIỆU CHUNG VỀ C.TY TRANAGA PHẦN 2: CHUYỂN PSD THÀNH HTML/CSS DÙNG BOOTSTRAP I GIỚI THIỆU VÀ HƯỚNG DẪN SỬ DỤNG BOOTSTRAP Giới thiệu bootstrap Hướng dẫn sử dụng Bootstrap II CHUYỂN PSD THÀNH HTML/CSS DÙNG BOOTSTRAP .6 Giao diện cấu trúc Hướng dẫn sử dụng Bootstrap Xây dựng cấu trúc HTML kết hợp Bootstrap Định dạng STYLE CSS 14 Website 19 PHẦN 3: TỔNG KẾT VÀ ĐÁNH GIÁ 20 I TỔNG KẾT 20 II ĐÁNH GIÁ .20 NHẬN XÉT CỦA GIÁO VIÊN 21 NHẬN XÉT CỦA CÔNG TY .22 GVHD:TRẦN PHÚ HƯNG TRANG SVTH: BÙI THẾ NAM – 14TH BÁO CÁO THỰC TẬP TỐT NGHIỆP PHẦN 1: GIỚI THIỆU CHUNG VỀ CÔNG TY TNHH TRẦN NHẬT GIA VÀI NÉT CHUNG VỀ CÔNG TY TNHH TRẦN NHẬT GIA: 1.1 QUÁ TRÌNH HÌNH THÀNH VÀ PHÁT TRIỂN CÔNG TY: Công ty trách nhiệm hữu hạn (TNHH) Trần Nhật Gia đơn vị doanh nghiệp tư nhân với vốn 100% chủ sở hữu Việt Nam, thành lập dựa giấy phép số 0401527241 quan CCT Quận Ngũ Hành Sơn cấp ngày 23/01/2013 Vài nét sơ lược công ty:  Tên đầy đủ: công ty TNHH Trần Nhật Gia  Tên giao dịch quốc tế: TRANAGA CO., LTD  Tên viết tắt: TRANAGA  Trụ sở chính: 76 An Thượng 24 – Phường Mỹ An – Quận Ngũ Hành Sơn – Tp Đà Nẵng  Số điện thoại/ Fax: +84-511-3985143  Email: info@tranaga.vn  Website: tranaga.vn  Mã số thuế: 0401527241  Văn phòng đại diện:  Văn phòng đại diện Tp Đà Nẵng • Tên văn phòng đại diện: TRANAGA CO., LTD • Địa chỉ: 76 An Thượng 24 – Phường Mỹ An – Quận Ngũ Hành Sơn – Tp Đà Nẵng • Số điện thoại/ Fax: +84-511-3985143 Người đại diện theo pháp luận công ty: Chức danh: Giám đốc Họ tên: Trần Nhật Vinh Số điện thoại: 0914008709 GVHD:TRẦN PHÚ HƯNG TRANG SVTH: BÙI THẾ NAM – 14TH BÁO CÁO THỰC TẬP TỐT NGHIỆP PHẦN 2: CHUYỂN PSD THÀNH HTML/CSS DÙNG BOOTSTRAP I GIỚI THIỆU VÀ HƯỚNG DẪN SỬ DỤNG BOOTSTRAP: Giới thiệu bootstrap: - Bootstrap tảng miễn phí giúp thiết kế giao diện người sử dụng dễ dàng nhanh - Bootstrap gồm mẫu thiết kế sẵn dựa thẻ HTML CSS bảng, biểu mẫu, nút bấm, điều hướng, slide nhiều đối tượng khác - Với Bootstrap, bạn dễ dàng sang tạo thiết kế Web tương tác Website tương tác trang có khả hiển thị nhiều tảng, kích cỡ hình khác Hướng dẫn sử dụng Bootstrap: B1: Tải Bootstrap getbootstrap.com.vn Sau tải về, bạn có File Zip Tiến hành giải nén ta có thư mục có tên Bootstrap, bên có thư mục: css, fonts, js B2: Mở File HTML lên (bỏ vào thư mục giải nén) • Thêm vào phần head: Khai báo phần meta: (Dòng lệnh để website tương thích với kích thước hình) Khai báo tới link thư mục CSS Bootstrap: GVHD:TRẦN PHÚ HƯNG TRANG SVTH: BÙI THẾ NAM – 14TH BÁO CÁO THỰC TẬP TỐT NGHIỆP Xong phần head! II CHUYỂN PSD THÀNH HTML/CSS DÙNG BOOTSTRAP:  Yêu cầu:  Căn HTML/CSS – Bootstrap  Căn Photoshop Giao diện cấu trúc bản: Cắt ảnh Photoshop: Các bạn tự tạo File PSD tải từ mạng có nhiều mẫu để lựa chọn Sau tải bạn mở File Photoshop Chúng ta sử dụng công cụ Crop Tool để cắt ảnh Công việc xác định thành phần cần cắt cho trang Web, ví dụ: Logo, Background Banner, Icon…  Chúng ta thực cắt Logo Bước 1: Chọn công cụ Crop Tool công cụ, phím tắt C Chọn vùng quanh Logo cần cắt Sau nhấn Enter để hoàn thành GVHD:TRẦN PHÚ HƯNG TRANG SVTH: BÙI THẾ NAM – 14TH BÁO CÁO THỰC TẬP TỐT NGHIỆP Bước 2: Ẩn hết tất Layer khác, giữ lại Group Logo Box Bước 3: Để bỏ phần thừa xung quanh Logo, chọn Menu Image -> Trim Hộp thoại Trim xuất hiện, chọn thông số hình, bấm OK để hoàn thành Bước 4: Lưu File với định dạng tối ưu cho Website Chọn Menu File -> Save for Web… Phím tắt Alt + Shift + Ctrl + S Hộp thoại Save for Web xất hiện, chọn định dạng hình sau bấm Save… lưu vào thư mục chứa hình ảnh Website GVHD:TRẦN PHÚ HƯNG TRANG SVTH: BÙI THẾ NAM – 14TH BÁO CÁO THỰC TẬP TỐT NGHIỆP Sau cắt hình cần thiết, thư mục chứa hình ảnh cho Website Xây dựng cấu trúc HTML kết hợp Bootstrap: GVHD:TRẦN PHÚ HƯNG TRANG SVTH: BÙI THẾ NAM – 14TH BÁO CÁO THỰC TẬP TỐT NGHIỆP Sau chuẩn bị xong hình ảnh, bước xây dựng cấu trúc HTML kết hợp với Bootstrap Đầu tiên phải lên cấu trúc cho File HTML Trên cấu trúc trang HTML Chúng ta Code phần theo trình tự từ xuống PHẦN HEADER: Bước 1: Cấu trúc Grid phần Header: Bước 2: Phần Logo, thay bằng: Bước 3: Phần Menu, thay bằng: GVHD:TRẦN PHÚ HƯNG TRANG SVTH: BÙI THẾ NAM – 14TH BÁO CÁO THỰC TẬP TỐT NGHIỆP Phần Header sau hoàn chỉnh: PHẦN BANNER: Bước 1: Cấu trúc Grid phần Banner: Bước 2: Phần nội dung Banner, thay Bước 3: Phần hình ảnh Banner, thay GVHD:TRẦN PHÚ HƯNG TRANG 10 SVTH: BÙI THẾ NAM – 14TH BÁO CÁO THỰC TẬP TỐT NGHIỆP Phần Banner hoàn chỉnh: PHẦN MAIN: Bước 1: Cấu trúc Grid: GVHD:TRẦN PHÚ HƯNG TRANG 11 SVTH: BÙI THẾ NAM – 14TH BÁO CÁO THỰC TẬP TỐT NGHIỆP Bước 2: Cột bên trái: Bước 3: Phần nội dung Bước 4: Phần GVHD:TRẦN PHÚ HƯNG TRANG 12 SVTH: BÙI THẾ NAM – 14TH BÁO CÁO THỰC TẬP TỐT NGHIỆP Hoàn thành phần Main: PHẦN FOOTER: Bước 1: Cấu trúc Grid: GVHD:TRẦN PHÚ HƯNG TRANG 13 SVTH: BÙI THẾ NAM – 14TH BÁO CÁO THỰC TẬP TỐT NGHIỆP Bước 2: Phần Bước 3: Phần Bước 4: Phần Bước 5: Phần Định dạng STYLE CSS: Đầu tiên import Bootstrap thiết đặt số style áp dụng tổng thể thẻ , thẻ

Lưu ý file bootstrap.min.css bạn đặt thư mục với file style.css GVHD:TRẦN PHÚ HƯNG TRANG 14 SVTH: BÙI THẾ NAM – 14TH BÁO CÁO THỰC TẬP TỐT NGHIỆP PHẦN HEADER: PHẦN NAVIGATION: GVHD:TRẦN PHÚ HƯNG TRANG 15 SVTH: BÙI THẾ NAM – 14TH BÁO CÁO THỰC TẬP TỐT NGHIỆP PHẦN BANNER: Đầu tiên chúng định dạng hiển thị cho phần viền, wrapper: Sau định dạng phần nội dung bên trong: GVHD:TRẦN PHÚ HƯNG TRANG 16 SVTH: BÙI THẾ NAM – 14TH BÁO CÁO THỰC TẬP TỐT NGHIỆP PHẦN MAIN: Định dạng riêng cho box nằm bên left-side: Danh sách dịch vụ nằm Main Box 2: PHẦN FOOTER: Định dạng tiêu đề box: GVHD:TRẦN PHÚ HƯNG TRANG 17 SVTH: BÙI THẾ NAM – 14TH BÁO CÁO THỰC TẬP TỐT NGHIỆP Box Footer: Sugesion Box tiếp theo: Last Blog Box cuối Recen Work: Phần cuối Footer Menu footer: Chúng ta hoàn thành trang Exponet GVHD:TRẦN PHÚ HƯNG TRANG 18 SVTH: BÙI THẾ NAM – 14TH BÁO CÁO THỰC TẬP TỐT NGHIỆP Website: GVHD:TRẦN PHÚ HƯNG TRANG 19 SVTH: BÙI THẾ NAM – 14TH BÁO CÁO THỰC TẬP TỐT NGHIỆP PHẦN 3: TỔNG KẾT VÀ ĐÁNH GIÁ I TỔNG KẾT: Qua báo cáo này, em biết bước để hoàn thành trang HTML/CSS kết hợp với Bootstrap, bước gồm cắt hình, xây dựng cấu trúc HTML định dạng CSS II ĐÁNH GIÁ: Bootstrap Framework kiểu dáng đẹp, trực quan, mạnh mẽ, di động framework front-end cho phát triển web nhanh dễ dàng Nó sử dụng HTML, CSS Javascript GVHD:TRẦN PHÚ HƯNG TRANG 20 SVTH: BÙI THẾ NAM – 14TH BÁO CÁO THỰC TẬP TỐT NGHIỆP NHẬN XÉT CỦA GIÁO VIÊN Đà Nẵng, ngày … tháng 12 năm 2016 (Kí, ghi rõ họ tên) GVHD:TRẦN PHÚ HƯNG TRANG 21 SVTH: BÙI THẾ NAM – 14TH BÁO CÁO THỰC TẬP TỐT NGHIỆP NHẬN XÉT CỦA CÔNG TY Đà Nẵng, ngày … tháng 12 năm 2016 (Kí, ghi rõ họ tên) GVHD:TRẦN PHÚ HƯNG TRANG 22 ... quan đến nghiệp vụ như: web designer (thiết kế web) , tester (kiểm thử web) …Chính mà em định chọn Tìm hiểu nghiệp vụ Web Designer công ty TNHH Trần Nhật Gia” làm đề tài báo cáo thực tập Với kiến... THẾ NAM – 14TH BÁO CÁO THỰC TẬP TỐT NGHIỆP Website: GVHD:TRẦN PHÚ HƯNG TRANG 19 SVTH: BÙI THẾ NAM – 14TH BÁO CÁO THỰC TẬP TỐT NGHIỆP PHẦN 3: TỔNG KẾT VÀ ĐÁNH GIÁ I TỔNG KẾT: Qua báo cáo này, em... THẾ NAM – 14TH BÁO CÁO THỰC TẬP TỐT NGHIỆP Hoàn thành phần Main: PHẦN FOOTER: Bước 1: Cấu trúc Grid: GVHD:TRẦN PHÚ HƯNG TRANG 13 SVTH: BÙI THẾ NAM – 14TH BÁO CÁO THỰC TẬP TỐT NGHIỆP Bước 2: Phần