Tìm hiểu về nghiệp vụ web designer Báo cáo THỰC tập tốt NGHIỆP
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (1.08 MB, 22 trang )
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 các 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 trong những năm học tập tại trường.
Em xin chân thành cảm ơn các thầy cô khoa Công Nghệ Thông Tin, đặc biệt là
thầy Trần Phú Hưng – người đã truyền đạt kiến thức, tận tâm hướng dẫn và hết lòng
giúp đỡ em trong suốt thời gian em thực hiện báo cáo thực tập tốt nghiệp này.
Trong quá trình thực tập tại công ty TNHH Trần Nhật Gia, em đã nhận được sự
giúp đỡ nhiệt tình của ban lãnh đạo công ty và các anh chị trong phòng Web Designer
(thiết kế web), đã tạo điều kiện cho em tiếp cận thực tế và 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 là anh Thánh…đã
tận tình giúp đỡ em trong suốt thời gian thực tập tại công ty. Chân thành cảm ơn các
anh chị đã giúp đỡ em có thể hoàn thành bài báo cáo thực tập này.
Do sự tiếp cận thực tế chưa đúng mức và lượng thời gian có hạn nên sẽ không
tránh khỏi sự thiếu sót. Em rất mong nhận được ý kiến nhận xét, đóng góp từ phía
thầy cô, các anh chị trong công ty nhằm giúp em nâng cao kiến thức, củng cố hiểu biết
thực và cố gắng hơn trong quá trình làm việc sau này.
Trân trọng cảm ơn!
Tp. Đà Nẵng, tháng 12 năm 2016
GVHD:TRẦN PHÚ HƯNG
TRANG 1
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 đang phát triển như vũ bão trên toàn thế giới
và dần trở nên phổ biến, hầu như mọi lĩnh vực đều có sự góp mặt của ngành công
nghệ mới này. Công nghệ thông tin đang từng ngày làm thay đổi và tác động mạnh
vào từng lĩnh vực đời sống, kinh tế - xã hội của con người và đang giữ vai trò hết sức
quan trọng cho sự tang trưởng của nền kinh tế toàn cầu, mỗi quốc gia phải trang bị
những kiến thức và nguồn nhân lực am hiểu về nghiệp vụ công nghệ thông tin để có
thể đứng vững trên thương trường quốc tế đầy biến động như hiện nay.
Tuy vậy, hầu hết sinh viên mới ra trường muốn được làm việc trong ngành này
đều gặp ít nhiều bỡ ngỡ, bởi những nỗ lực xóa dần khoảng cách giữa kiến thức và thực
tiễn để bắt kịp những thay đổi trong bối cảnh nền kinh tế đang chuyển biến mạnh mẽ
như hiện nay. Hiểu được điều này, em rất lấy làm vinh dự khi được nhà trường tạo
điều kiện và công ty TNHH Trần Nhật Gia tiếp nhận để được tiếp xúc thực tế, hiểu
biết hơn them về lĩnh vực này.
Qua tiếp xúc thực tế tại công ty, em được bố trí thực tập tại phòng Web Designer
(thiết kế web), vốn đóng vai trò rất quan trọng trong hoạt động của công ty. Và tại đây,
em được theo các anh chị nhân viên học hỏi rất nhiều kinh nghiệm liên quan đến các
nghiệp vụ như: web designer (thiết kế web), tester (kiểm thử web) …Chính vì thế mà
em quyết định chọn “Tìm hiểu về nghiệp vụ Web Designer của 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 và thời gian thực tập 1 tháng tại công ty Trần Nhật
Gia, sự giao thoa giữa lý thuyết và thực hành nên khó tránh khỏi những thiếu sót trong
quá trình ghi nhận. Em rất mong sự đóng góp ý kiến của thầy cô và các anh chị trong
công ty để bài báo cáo được hoàn thiện hơn.
GVHD:TRẦN PHÚ HƯNG
TRANG 2
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........................................................................................................1
LỜI MỞ ĐẦU........................................................................................................2
PHẦN 1: GIỚI THIỆU CHUNG VỀ C.TY TRANAGA....................................4
PHẦN 2: CHUYỂN PSD THÀNH HTML/CSS DÙNG BOOTSTRAP............5
I. GIỚI THIỆU VÀ HƯỚNG DẪN SỬ DỤNG BOOTSTRAP...................5
1. Giới thiệu bootstrap.............................................................................5
2. Hướng dẫn sử dụng Bootstrap............................................................5
II. CHUYỂN PSD THÀNH HTML/CSS DÙNG BOOTSTRAP.................6
1. Giao diện cấu trúc cơ bản....................................................................6
2. Hướng dẫn sử dụng Bootstrap............................................................6
3. Xây dựng cấu trúc HTML kết hợp Bootstrap....................................8
4. Định dạng STYLE CSS........................................................................14
5. 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 3
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
1. 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 là một đơ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 trên giấy phép số
0401527241 do cơ quan CCT Quận Ngũ Hành Sơn cấp ngày 23/01/2013.
Vài nét sơ lược về 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:
Website: tranaga.vn
Mã số thuế: 0401527241
Văn phòng đại diện:
Văn phòng đại diện tại 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ủa công ty:
Chức danh: Giám đốc
Họ và tên: Trần Nhật Vinh
Số điện thoại: 0914008709
GVHD:TRẦN PHÚ HƯNG
TRANG 4
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:
1. Giới thiệu bootstrap:
- Bootstrap là một nền tảng miễn phí giúp thiết kế giao diện người sử dụng dễ
dàng và nhanh hơn.
- Bootstrap gồm các mẫu thiết kế sẵn dựa trên các thẻ HTML và CSS như bảng,
biểu mẫu, nút bấm, điều hướng, slide và nhiều đối tượng khác.
- Với Bootstrap, bạn sẽ dễ dàng sang tạo hơn trong thiết kế Web tương tác.
Website tương tác là những trang có khả năng hiển thị trên nhiều nền tảng, kích cỡ
màn hình khác nhau.
2. Hướng dẫn sử dụng Bootstrap:
B1: Tải Bootstrap tại getbootstrap.com.vn
Sau khi tải về, bạn sẽ có một File Zip. Tiến hành giải nén ta có một thư mục có tên
Bootstrap, bên trong có 3 thư mục: css, fonts, js.
B2: Mở File HTML của mình lên (bỏ vào cùng thư mục mình mới giải nén)
• Thêm vào phần head:
1. Khai báo phần meta:
<meta name=”viewport” content=”width=device-width, initial-scale=1”>
(Dòng lệnh để website tương thích với mọi kích thước màn hình)
2. Khai báo tới link thư mục CSS của Bootstrap:
<link href=”css/bootstrap.min.css” rel=”stylesheet”>
GVHD:TRẦN PHÚ HƯNG
TRANG 5
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 bản HTML/CSS – Bootstrap
Căn bản Photoshop
1. Giao diện cấu trúc cơ bản:
2. Cắt ảnh Photoshop:
Các bạn tự tạo File PSD hoặc tải từ trên mạng về có rất nhiều mẫu để chúng ta lựa
chọn. Sau khi tải về các bạn mở File bằng Photoshop. Chúng ta sẽ sử dụng công cụ
Crop Tool để cắt ảnh. Công việc đầu tiên đó là xác định các thành phần cần cắt cho
trang Web, ví dụ: Logo, Background Banner, Icon…
Chúng ta thực hiện cắt Logo.
Bước 1: Chọn công cụ Crop Tool trên thanh công cụ, phím tắt C. Chọn một vùng
quanh Logo cần cắt. Sau đó nhấn Enter để hoàn thành.
GVHD:TRẦN PHÚ HƯNG
TRANG 6
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 cả các Layer khác, giữ lại Group Logo Box.
Bước 3: Để bỏ phần thừa xung quanh Logo, chúng ta chọn Menu Image -> Trim.
Hộp thoại Trim xuất hiện, chọn thông số như 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 như hình sau đó bấm Save… và lưu vào thư mục chứa hình ảnh của Website.
GVHD:TRẦN PHÚ HƯNG
TRANG 7
SVTH: BÙI THẾ NAM – 14TH
BÁO CÁO THỰC TẬP TỐT NGHIỆP
Sau khi cắt các hình cần thiết, chúng ta sẽ được một thư mục chứa hình ảnh cho
Website.
3. Xây dựng cấu trúc HTML kết hợp Bootstrap:
GVHD:TRẦN PHÚ HƯNG
TRANG 8
SVTH: BÙI THẾ NAM – 14TH
BÁO CÁO THỰC TẬP TỐT NGHIỆP
Sau khi đã chuẩn bị xong hình ảnh, bước tiếp theo chúng ta xây dựng cấu trúc
HTML kết hợp với Bootstrap.
Đầu tiên chúng ta phải lên cấu trúc cho File HTML.
Trên là cấu trúc căn bản của một trang HTML. Chúng ta sẽ lần lượt Code từng
phần và theo trình tự từ trên xuống.
PHẦN HEADER:
Bước 1: Cấu trúc Grid của phần Header:
Bước 2: Phần Logo, thay thế <!- logo here -> bằng:
Bước 3: Phần Menu, thay thế <!- main menu here -> bằng:
GVHD:TRẦN PHÚ HƯNG
TRANG 9
SVTH: BÙI THẾ NAM – 14TH
BÁO CÁO THỰC TẬP TỐT NGHIỆP
Phần Header sau khi đã hoàn chỉnh:
PHẦN BANNER:
Bước 1: Cấu trúc Grid của phần Banner:
Bước 2: Phần nội dung chính của Banner, thay thế <!- Text Content ->
Bước 3: Phần hình ảnh của Banner, thay thế <!- Banner IMG ->
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 chính <!- Main Box 1 ->
Bước 4: Phần <-! Main Box 2 ->
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 <!- sugestion ->
Bước 3: Phần <!- last-blog ->
Bước 4: Phần <!- recent-work ->
Bước 5: Phần <!- footer nav ->
4. Định dạng STYLE CSS:
Đầu tiên chúng ta import Bootstrap và thiết đặt một số style áp dụng tổng thể như
thẻ <a>, thẻ <ul>. Lưu ý file bootstrap.min.css các bạn đặt cùng 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 các box nằm bên left-side:
Danh sách các dịch vụ nằm trong Main Box 2:
PHẦN FOOTER:
Định dạng tiêu đề của các 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 đầu tiên của Footer: Sugesion
Box tiếp theo: Last Blog
Box cuối cùng Recen Work:
Phần cuối cùng trong Footer là 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
5. 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ài báo cáo này, em đã biết được các bước cơ bản để hoàn thành một trang
HTML/CSS kết hợp với Bootstrap, các bước này gồm cắt hình, xây dựng cấu trúc
HTML và định dạng CSS.
II. ĐÁNH GIÁ:
Bootstrap là một Framework kiểu dáng đẹp, trực quan, mạnh mẽ, di động đầu tiên
framework front-end cho phát triển web nhanh hơn và dễ dàng hơn. Nó sử dụng
HTML, CSS và 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
