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

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

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ếtthự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

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ựctiễ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 trongquá 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

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

Vài nét sơ lược về công ty:

 Tên đầy đủ: công ty TNHH Trần Nhật Gia

 Trụ sở chính: 76 An Thượng 24 – Phường Mỹ An – Quận Ngũ Hành Sơn – Tp

 Văn phòng đại diện:

 Văn phòng đại diện tại Tp Đà Nẵng

 Đị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

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ễ

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”>

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

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

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:

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:

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 ->

Phần Banner hoàn chỉnh:

PHẦN MAIN:

Bước 1: Cấu trúc Grid:

Bước 3: Phần nội dung chính <!- Main Box 1 ->

Bước 4: Phần <-! Main Box 2 ->

Hoàn thành phần Main:

PHẦN FOOTER:

Bước 1: Cấu trúc Grid:

PHẦN HEADER:

PHẦN NAVIGATION:

Sau đó định dạng phần nội dung bên trong:

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:

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

5 Website:

Bootstrap là một Framework kiểu dáng đẹp, trực quan, mạnh mẽ, di động đầu tiênframework 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.

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)

Đà Nẵng, ngày … tháng 12 năm 2016

(Kí, ghi rõ họ tên)