Đồ án tốt nghiệp khoa đa phương tiện, học viện bưu chính viễn thông (2)

Phùng Thị Phương Thanh - B17DCPT190 HỌC VIỆN CÔNG NGHỆ BƯU CHÍNH VIỄN THƠNG KHOA ĐA PHƯƠNG TIỆN BÁO CÁO THỰC TẬP TỐT NGHIỆP XÂY DỰNG WEBSITE GIỚI THIỆU CHƯƠNG TRÌNH LIÊN KẾT ĐÀO TẠO CỬ NHÂN QUỐC TẾ VỚI ĐẠI HỌC LA TROBE – AUSTRALIA Nơi thực tập Người hướng dẫn Giáo viên hướng dẫn Họ tên sinh viên : : : : Trung tâm đào tạo Quốc tế Ths Phạm Vũ Minh Tú - Quản lý dự án Ths Nguyễn Thị Thanh Tâm Phùng Thị Phương Thanh - B17DCPT190 Hà Nội, 2021 Phùng Thị Phương Thanh - B17DCPT190 TRUNG TÂM ĐÀO TẠO CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM QUỐC TẾ Độc lập - Tự - Hạnh phúc PHIẾU NHẬN XÉT ĐÁNH GIÁ THỰC TẬP TỐT NGHIỆP Họ tên sinh viên thực tập : Phùng Thị Phương Thanh Đơn vị thực tập : Trung tâm đào tạo quốc tế Thời gian thực tập : Từ ngày 19/07/2021 đến ngày 31/08/2021 NHẬN XÉT CỦA CƠ SỞ THỰC TẬP Chấp hành nội quy quy định quan: ………………………………………………………………………………………….………………… ………………………………………………………………………………………….………………… ………………………………………………………………………………………….………………… Ý thức học tập: ………………………………………………………………………………………….………………… ………………………………………………………………………………………….………………… ………………………………………………………………………………………….………………… Quan hệ, giao tiếp đơn vị: ………………………………………………………………………………………….………………… ………………………………………………………………………………………….………………… ………………………………………………………………………………………….………………… Hà Nội , ngày 31 tháng 08 năm 2021 Xác nhận quan thực tập Người đánh giá (Ký, ghi rõ họ tên đóng dấu) (Ký ghi rõ họ tên) Phùng Thị Phương Thanh - B17DCPT190 HỌC VIỆN CÔNG NGHỆ BƯU CHÍNH VIỄN THƠNG KHOA ĐA PHƯƠNG TIỆN CỘNG HỒ XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập - Tự - Hanh phúc ĐÁNH GIÁ KẾT QUẢ THỰC TẬP TỐT NGHIỆP (Thời gian thực tập: Từ ngày 19/07/2021 đến ngày 31/08/2021 ) Họ tên sinh viên: Phùng Thị Phương Thanh Lớp: D17PTDPT01 NỘI DUNG ĐÁNH GIÁ Chấp hành kỷ luật: (Tốt, Trung bình, Yếu) Ý thức học tập: (Tốt, Trung bình, Yếu) Quan hệ, giao tiếp: (Tốt, Trung bình, Yếu) Điểm (Thang điểm 10) Các ý kiến khác (nếu có: Ngày …….tháng …… năm 2021 Giáo viên hướng dẫn thực tập (Ký ghi rõ họ tên) LỜI CẢM ƠN Để hoàn thành báo cáo thực tập tốt nghiệp này, em xin chân thành cảm ơn thầy cô Học viện Cơng nghệ Bưu Viễn thơng - đặc biệt thầy cô khoa Đa phương tiện suốt thời gian qua trang bị kiến thức cho em thực đề tài Phùng Thị Phương Thanh - B17DCPT190 Em xin chân thành thầy Ths Phạm Vũ Minh Tú hướng dẫn tận tình giúp đỡ, bảo em suốt thời gian thực đề tài, giúp em học hỏi thêm nhiều kinh nghiệm để từ hồn thành tốt đề tài Ngồi em xin cảm ơn cô Ths Nguyễn Thị Thanh Tâm giúp em nhiều từ lúc bỡ ngỡ thực tập Cơ hướng dẫn, góp ý giúp em hoàn thiện thực tập tốt nghiệp thời gian qua Em xin gửi lời cảm ơn anh hướng dẫn, hỗ trợ kiến thức kĩ thuật bạn nhóm thực tập suốt thời gian nghiên cứu, giúp em nhận nhiều kinh nghiệm quý báu thời gian thực đề tài Em xin chân thành cảm ơn! Phùng Thị Phương Thanh - B17DCPT190 DANH SÁCH CÁC TỪ VIẾT TẮT Tên viết tắt Từ đầy đủ WWW World Wide Web HTML Hyper Text Markup Language XHTML Extensible HyperText Markup Language FTP File Transfer Protocol JSP Java Server Pages PHP Hype Text Preprocessor Perl Practical Extraction and Report Language PC Personal Computer URL Universal Resource Locator SQL Structured Query Language ASP Active Server Page CGI Computer Generated Imagery ĐTQT Đào tạo Quốc tế QTKD Quản trị kinh doanh CNTT Công nghệ thông tin Phùng Thị Phương Thanh - B17DCPT190 MỤC LỤC Phần A : GIỚI THIỆU ĐƠN VỊ THỰC TẬP I Chức II Tổ chức III Các lĩnh vực hoạt động Phần B : NỘI DUNG THỰC TẬP 11 I Giới thiệu chung 11 II Nội dung thực tập 12 A Cơ sở lý luận việc thiết kế website 12 B Tổng quan sản phẩm 19 C Xây dựng sản phẩm 29 Phần C KẾT LUẬN, ĐÁNH GIÁ QUÁ TRÌNH THỰC TẬP 32 Phần A : GIỚI THIỆU ĐƠN VỊ THỰC TẬP I Chức Trung tâm đào tạo Quốc tế đơn vị trực thuộc Học viện Cơng nghệ Bưu Viễn thông (PTIT) - trường đại học công lập đứng đầu lĩnh vực CNTT&TT Việt Nam Trung tâm đào tạo Quốc tế đời nhằm mang đến hội tuyệt vời cho tất sinh viên có hội tham gia chương trình đào tạo quốc tế gia tăng hội làm việc nước đồng thời mang đến cho sinh viên nước quốc tế chương trình trao đổi dịch chuyển sinh viên Trung tâm mang lại tiếp cận tốt tới chương trình đào tạo quốc tế cho sinh viên nước nước PTIT CIE cung cấp chương trình ưu việt với kết nối chặt chẽ với đối tác quốc tế Phùng Thị Phương Thanh - B17DCPT190 Trung tâm đào tạo quốc tế (CIE) cung cấp Chương trình mang tính định hướng nghề nghiệp từ đến nâng cao phù hợp với bạn mong muốn có việc làm sau tốt nghiệp muốn nâng cao trình độ thân bao gồm chương trình: ✔ Chương trình liên kết đào tạo quốc tế bậc đại học thạc sĩ ( 2+2, 3+1, 1+1) tiến sĩ ✔ Chương trình trao đổi dịch chuyển sinh viên cho sinh viên nước quốc tế ✔ Chương trình du học kết nối cho sinh viên tốt nghiệp làm việc thị trường lao động tồn cầu ✔ Các khóa học định hướng nghề nghiệp từ đến nâng cao giúp sinh viên có khả làm việc sau tốt nghiệp Bên cạnh đó, học viện xây dựng khóa học ngắn hạn giúp học viên có mong muốn hứng thú làm việc Nhật Bản Khóa học ngắn hạn đem lại cho sinh viên PTIT thành thạo ngôn ngữ Tiếng Nhật nhanh (1 năm tháng) vừa đáp ứng chuẩn đầu cho doanh nghiệp CNTT Nhật Bản doanh nghiệp CNTT có vốn đầu tư Nhật Bản Việt Nam Ngoài việc cung cấp kiến thức chuyên ngành cho sinh viên lãnh đạo Học viện Trung tâm ĐTQT – đơn vị quản lý tổ chức lớp CLC luôn quan tâm tới việc xây dựng kế hoạch, triển khai tổ chức hoạt động ngoại khóa bổ trợ học tập dành cho sinh viên Hệ CLC Đáp ứng nhu cầu mong muốn sinh viên CLC tham gia khóa đào tạo kỹ mềm nhằm tiếp thu, cập nhật kiến thức tảng thiết thực, lĩnh hội trau dồi kỹ mềm để phát triển toàn diện lực thân nhằm mục đích khởi nghiệp thành cơng Vận dụng hiệu kiến thức chuyên ngành đào tạo vào công việc sau tốt nghiệp đại học Trung tâm ĐTQT xây dựng kế hoạch, phối hợp với Khoa QTKD Học viện chủ trì triển khai khóa đào tạo kỹ mềm “Startup lĩnh vực CNTT truyền thông” dành cho sinh viên Hệ đào tạo CLC Phùng Thị Phương Thanh - B17DCPT190 Không có vậy, Trung tâm đào tạo Quốc tế cịn có học bổng dành cho đối tượng sinh viên quốc tế tài năng, người kỳ vọng đóng vai trị tiên phong nghiệp ngành ICT đất nước Ngay từ ngày đầu thành lập, trung tâm đào tạo quốc tế CIE đề nguyên tắc hoạt động giáo dục cam kết thực theo nguyên tắc * Tính thực tế Giáo trình cập nhật kiến thức, tạo nhiều chương trình học thuật chất lượng hướng đến hội nhập quốc tế, cung cấp chương trình giáo dục, trao đổi, chuyển dịch, cơng nhận học thuật đa dạng đến người học Bên cạnh hệ thống lý thuyết bản, học viên song song đạo tạo kỹ mềm Các tập u cầu cơng việc thực tế công ty thị trường, công ty đối tác Trung tâm đào tạo quốc tế CIE * Chất lượng giảng dạy Trung tâm Đào tạo Quốc tế Học viện Cơng nghệ Bưu Viễn thơng mang Sứ mạng cung cấp chương trình đào tạo quốc tế chất lượng tốt, chương trình đào tạo định hướng nghề nghiệp nâng cao kỹ theo tiêu chuẩn quốc tế; dịch vụ quốc tế hố giáo dục đạo tạo có chất lượng cho sinh viên xã hội để đáp ứng xu hướng phát triển yêu cầu thực tiễn tổ chức, doanh nghiệp xã hội phát triển nhanh chóng giới đại ngày * Lợi ích học viên Học viên cập nhật kiến thức mới, tiếp xúc với nhiều cơng nghệ mới, giải đáp thắc mắc ngồi học, giao lưu, chia sẻ học viên Học viên tham gia dự án học bổng từ trung tâm II Tổ chức Để đảm bảo tính linh hoạt cao yêu cầu hoạt động có hiệu phải tổ chức máy hoạt động với quy mô hợp lý nhất, tối ưu nhất, khó khăn sai lầm phải khắc phục kịp thời Các phận chức phải có liên kết hỗ trợ lẫn để thực mục tiêu đặt Giám đốc quản lý toàn hoạt Phùng Thị Phương Thanh - B17DCPT190 động có kế hoạch điều chỉnh kịp thời phận chức chịu đạo từ giám đốc Nhiệm vụ quy định theo nguyên tắc tập trung dân chủ quản lý Cơ cấu đảm bảo nguồn lực để giải vấn đề trọng tâm Bộ máy tổ chức thể qua sơ đồ sau Cơ cấu nhân công ty bao gồm: Giám đốc: người Phó giám đốc : người Tổ đào tạo: giảng viên Tổ dự án : giảng viên Giám đốc Phó giám đốc Tổ đào tạo Tổ dự án Giám đốc: Giám đốc PGS.TS Hoàng Hữu Hạnh, người trực tiếp quản lý lãnh đạo Trung tâm đào tạo quốc tế CIE Phó giám đốc: cô Nguyễn Minh Phượng chức quản lý hồ sơ nhân viên đảm nhiệm công việc liên quan đến học viên đối tác Tổ đào tạo: bao gồm thầy cô ✔ Cô Phạm Trần Cẩm Vân ✔ Cô Lê Thuý Hà ✔ Cô Trần Thị Lan Phương ✔ Cô Nguyễn Thị Lụa Bộ phận đào tạo đảm nhiệm công việc liên quan đến đào tạo học viên tổ chức chương trình đào tạo từ kỹ chuyên môn đến kỹ mềm cho học viện truyền đạt lại kinh nghiệm tích lũy nhiều năm làm việc Tổ dự án: Ths Phạm Vũ Minh Tú III Các lĩnh vực hoạt động Phùng Thị Phương Thanh - B17DCPT190 Trung tâm đào tạo quốc tế CIE hoạt động chủ yếu lĩnh vực đào tạo phát triển sinh viên với khóa học ngắn hạn dài hạn cơng nghệ thơng tin Bên cạnh đó, trung tâm đào tạo Quốc tế CIE cịn đóng vai trị kết nối doanh nghiệp bạn học viên học tập trung tâm, mở đường phát triển toàn diện, giao lưu quốc tế Các hoạt động lĩnh vực giáo dục: ● Các chương trình đào tạo: ⮚ 2+2 Bachelor Degree cơng nghệ thông tin với đại học La Trobe (LTU) ⮚ Học bổng Chương trình đại học Cơng nghệ thơng tin Avis ⮚ Chương trình Liên kết Quốc tế dành cho cấp độ khác Cử nhân, Kỹ sư, Thạc sĩ (2 + 2, + 1, + 1) Tiến sĩ ⮚ Các chương trình trao đổi / di chuyển nước dành cho sinh viên nước quốc tế ⮚ Chương trình đại học chất lượng cao ⮚ Các chương trình CNTT quốc tế ⮚ Các chương trình liên kết quốc tế ⮚ Các khóa đào tạo chuyên nghiệp ● Các workshop ⮚ Hội thảo tiếng Anh với chủ đề “Du hành thời gian” ⮚ Hội thảo từ sinh viên PTIT trở thành giảng viên CSI / CUNY ⮚ Sự kiện ngày Châu Âu 2021 PTIT ● Các dự án ⮚ Khuyến mại EU thông qua giao thông đa phương tiện ⮚ Dự án Proeuhe ⮚ Dự án Eramus + Jean Monnet ⮚ Dự án Voyage- Cơ hội lao động trẻ lớp học Việt Nam ⮚ Trường Đại học Xây dựng- ngành công nghệ học tập phát triển qua đổi công nghệ ( xây dựng - CNTT) 10 Phùng Thị Phương Thanh - B17DCPT190 Thiết kế chức cấu trúc trang Đây trang web giới thiếu chương trình liên kết đào tạo cử nhân quốc tế hợp tác trường đại học La Trobe - Australia trung tâm đào tạo quốc tế CIE trực thuộc Học viện Công nghệ Bưu Viễn thơng Vậy nên chúng em lựa chọn màu chủ yếu cho website: Đỏ, xanh lam trắng - Lựa chọn thiết kế website theo kỹ thuật Lading page - Lý lựa chọn thiết kế website theo kỹ thuật Lading page Thiết kế Landing Page khái niệm quen thuộc bạn hay nghe nói đến lĩnh vực thiết kế web Dịch vụ thiết kế website chuyên nghiệp Và hoạt động trải nghiệm Internet thường ngày bạn bắt gặp nhiều thiết kế Landing Page đẹp thu hút từ doanh nghiệp Nói theo cách hiểu thơng thường, Landing Page trang có giao diện, nội dung tên miền gần giống trang web bình thường Tuy nhiên đơn giản tập trung vào nội dung định (VD: Chương trình khai trương cửa hàng nhãn hàng X, giới thiệu sản phẩm nhãn hàng Y, Sự kiện Z danh cho doanh nhân trẻ…) chí có số giao diện Landing Page gói gọn nội dung trang Thông qua thiết kế Landing Page, người dùng tiếp nhận nhiều thông tin (đa phần thông tin cập nhật) đường để kéo người dùng vào xem website bạn Lấy ví dụ, trang thương mại điện tử Tiki hay làm trang Landing Page kiện mua sách “Giờ vàng” với đầu sách hot, sau “dạo chơi” Landing Page vòng khách hàng dần có ấn tượng lần sau có nhu cầu mua hàng, họ truy cập vào trang web thức doanh nghiệp Lựa chọn mơi trường thiết kế website: Figma a Tính tương thích Figma hoạt động tương thích tất hệ điều hành có trình duyệt web, từ Macs, Windows, Linux đến Chromebooks dùng Figma Đây 20 Phùng Thị Phương Thanh - B17DCPT190 công cụ design làm điều Tất người chia sẻ, mở chỉnh sửa file Figma dễ dàng dù dùng hệ máy Trong nhiều công ty, designer thường dùng Macs developer lại dùng Windows Figma giúp hai bên hợp tác dễ dàng Figma giảm thiểu việc chuyển qua lại file hình ảnh hay pdf team design, account khách hàng Bây tất thứ trở nên dễ dàng với đường link Riêng với thân mình, trước phải mua thêm máy Mac để sử dụng Sketch Và chuyển file thiết kế, phải cân nhắc xem người nhận dùng hệ điều hành để gửi loại file thích hợp Giờ dùng Figma, khơng cần phải lo đến điều b Hỗ trợ làm việc nhóm hiệu Figma cơng cụ browser-based, người team làm việc với tương tự làm việc Google Docs Với thành viên xem chỉnh sửa file, Figma đại diện avatar trịn cơng cụ với tên riêng Click vào avatar bạn thấy thành viên nhìn phần design Chức tiện bạn muốn biết làm việc file Làm việc nhóm kiểu thời gian thực giúp design leader nhanh chóng nắm bắt tình hình dự án đưa định sửa đổi có sai sót Một số designer nhiều không quen với kiểu làm việc lúc bị người khác “nhịm ngó” Tuy nhiên hầu hết quên sau thời gian dùng thử giải thích lợi ích từ Một số khác lại khơng thích thấy trỏ chuột designer khác hình làm việc mình, Figma có giải pháp cho chuyện Bạn vào View -> Show Multiplayer Cursors, trỏ chuột người khác ẩn có nhiều người xem file 21 Phùng Thị Phương Thanh - B17DCPT190 c Chia sẻ file đơn giản Một bạn chia sẻ file Figma qua việc gửi link cho người khác, người nhận link có khả truy cập vào file Nếu bạn lựa chọn Link to selected frame người nhận nhìn thấy xác frame bạn chọn lúc chia sẻ file Mình hay dùng tính tiện dụng chia sẻ file phức tạp, có nhiều frame nằm page d Cơng cụ mà developer u thích Figma hiển thị code snippets cho đối tượng chọn Code hiển thị dạng CSS, dành cho iOS hay Android Thay sử dụng cơng cụ bên thứ ba, developer inspect đối tượng file lúc xem thiết kế Mặc dù thế, bạn muốn thông số phức tạp hơn, bạn sử dụng Zeplin Figma hỗ trợ Zeplin tốt thời điểm 22 Phùng Thị Phương Thanh - B17DCPT190 e Tất thứ lưu trữ online Tất thứ bạn đề lưu trữ cloud Bạn không sợ file, hỏng máy hay hàng tá vấn đề trời đất khác Bạn xếp file theo project, file lại chia làm nhiều page tùy theo nhu cầu bạn Tiến hành xây dựng website - Công cụ sử dụng STT Phần mềm Notepad++ Sublime Text Google Chrome Chức Viết chỉnh sửa HTML Viết code HTML, CSS Test giao diện Website trình duyệt Web 23 Phùng Thị Phương Thanh - B17DCPT190 Tìm kiếm tài liệu Ngơn ngữ lập trình: HTML, CSS 4.1 Tổng quan HTML CSS a Định nghĩa HTML HTML biết đến loại ngôn ngữ dùng để mô tả hiển thị trang web ❖ Hypertext Markup language HTML ❖ Nhiều người nhầm tưởng HTML ngơn ngữ lập trình thực khơng phải vậy, ngơn ngữ đánh dấu ❖ Một ngôn ngữ đánh dấu thẻ đánh dấu ❖ Để miêu tả trang web ta cần đánh dấu thẻ HTML b Thành phần HTML i Các dạng thẻ HTML - Thẻ HTML dùng để viết lên thành tố HTML - Thẻ HTML bao quanh hai dấu lớn nhỏ - Những thẻ HTML thường có cặp giống - Thẻ thứ thẻ mở đầu thẻ thứ hai thẻ kết thúc - Dòng chữ hai thẻ bắt đầu kết thúc nội dung - Những thẻ HTML khơng phân biệt in hoa viết thường, ví dụ dạng ii Thành phần HTML Thành phần HTML bắt đầu với thẻ: Nội dung là: web design resources Thành phần HTML kết thúc với thẻ: Mục đích thẻ để xác định thành phần HTML phải thể dạng in đậm Phần bắt đầu thẻ bắt đầu kết thúc thẻ kết thúc Mục đích thẻ xác định thành phần HTML bao gồm nội dung tài liệu iii Các thuộc tính thẻ HTML 24 Phùng Thị Phương Thanh - B17DCPT190 Những thẻ HTML có thuộc tính riêng Những thuộc tính cung cấp thơng tin thành phần HTML trang web Tag xác định thành phần thân trang HTML : Với thuộc tính thêm vào bgcolor, báo cho trình duyệt biết màu trang màu đỏ, giống sau: (#E6E6E6 giá trị hex màu) Thẻ xác định dạng bảng HTML với thuộc tính đường viền (border), báo cho trình duyệt biết bảng khơng có đường viền: Thuộc tính ln ln kèm cặp name/value: name= “value” ( tên=”giá trị”) thuộc tính ln ln thêm vào thẻ mở đầu thành phần HTML Dấu ngoặc kép, "red" 'red' Giá trị thuộc tính nên đặt dấu trích dẫn " " Kiểu ngoặc kép phổ biến hơn, nhiên kiểu đơn ' ' dùng Ví dụ: Name=’phung”thi phuong”thanh’ iiii Các thẻ HTML: Những thẻ quan trọng HTML thẻ xác định Heading, đoạn văn xuống dòng Headings Headings định dạng với hai thẻ đến xác định heading lớn xác định heading nhỏ Đây heading Đây heading HTML tự động thêm dòng trắng trước sau heading Đoạn văn – paragraphs Paragraphs định dạng thẻ

Đây đoạn văn

Đây đoạn văn khác

HTML tự động thêm dòng trắng trước sau heading 25 Phùng Thị Phương Thanh - B17DCPT190 Line Breaks xuống dòng Thẻ sử dụng muốn kết thúc dịng lại khơng muốn bắt đầu đoạn văn khác Thẻ tạo lần xuống dòng viết Lời thích HTML Thẻ thích sử dụng để thêm lời thích mã nguồn HTML Một dịng thích bỏ qua trình duyệt Có thể sử dụng thích để giải thích code, để sau có phải quay lại chỉnh sửa dễ nhớ Thẻ Anchor thuộc tính Href HTML sử dụng thẻ (anchor) để tạo đường liên kết đến tài liệu khác Thẻ anchor liên kết đến tài nguyên internet, chúng trang HTML, hình, file nhạc, phim … v.v Cú pháp để tạo thẻ anchor: o day Thẻ sử dụng để tạo điểm neo liên kết đó, thuộc tính href sử dụng để tài liệu liên kết đến, chữ xuất hai tag hiển thị dạng siêu liên kết Thuộc tính đích đến Với thuộc tính đích đến, xác định liên kết đến tài liệu khác mở đâu Dòng code mở tài liệu liên kết cửa sổ trình duyệt o day Thẻ anchor thuộc tính tên Thuộc tính tên sử dụng để tạo điểm neo đặt tên Khi sử dụng điểm neo đặt tên trước tạo đường liên kết mà người đọc nhảy trực tiếp đến phần cụ thể trang web, thay họ phải kéo xuống để tìm thơng tin Một dạng bookmark Dưới cú pháp điểm neo đặt tên trước: 26 Phùng Thị Phương Thanh - B17DCPT190 Chữ hiển thị Hình ảnh HTML Với HTML thể hình ảnh tài liệu Thẻ Image thuộc tính src Trong HTML, hình ảnh xác định thẻ Để hiển thị hình trang web, cần phải sử dụng thuộc tính src Src chữ viết tắt source Giá trị thuộc tính src địa URL hình ảnh muốn hiển thị trang web Cú pháp để xác định hình Địa URL đến điểm mà hình ảnh lưu trữ Một file hình có tên niemvui "anh.gif" đặt thư mục images www.website.net có địa URL là: http://www.anhthe.net/images/ảnh.gif Trình duyệt hiển thị hình ảnh nơi mà có thẻ image chèn tài liệu Nếu muốn thêm thẻ image vào đoạn văn, trình duyệt hiển thị đoạn văn thứ trước, sau đến hình sau đoạn văn thứ hai Thuộc tính Alt Thuộc tính alt sử dụng để xác định chữ thay cho hình Bởi hình khơng dịng chữ xuất để báo cho người đọc biết Giá trị thuộc tính alt dòng chữ sau: Thuộc tính alt báo cho người đọc biết họ khơng xem hình mà trình duyệt khơng load hình Trình duyệt sau hiển thị dịng chữ thay hình ảnh Nên tạo thói quen thêm thuộc tính "alt" vào hình trang, để tăng khả hiển thị giúp người lướt web mà khơng dùng hình ảnh Bgcolor Thuộc tính bgcolor thiết lập hình màu Giá trị thuộc tính hệ số hexadecimal, giá trị màu RGB tên màu 27 Phùng Thị Phương Thanh - B17DCPT190 a CSS : class1 { background:#0094ff; ( màu xanh) } #div3 { background:#f00; ( màu đỏ ) } Các CSS Selecter hay dùng : (1) Selecter thường div" : Chọn tất thẻ div, chọn thẻ html #id1": Chọn thẻ thẻ có id =" id1" class1: chọn thẻ có class =class1 div# :VinaDevelop ul li truy xuất lồng #id1>a : Chọn phần tử Chọn thẻ a div có id id1 #id1:not( a ): Truy vấn loại trừ phần tử , không chọn thẻ a *{}: Chọn tất phần tử html html {} :Toàn trang html body {} :Toàn trang chứa nội dung Định dạng nội dung văn bản: #div3 { /*màu nền*/ background: #f00; /*Font chữ*/ font-family:Arial; /*Cỡ chữ*/ font-size:16px; /*Kiểu chữ in đậm*/ font-weight:bold; /*màu chữ*/ 28 Phùng Thị Phương Thanh - B17DCPT190 color:#044bf6; /*gạch chân - không gạch chân*/ text-decoration:none; } Định dạng kích thước đối tượng với thuộc tính width , height: #div3 { /*thuộc tính màu để thấy rõ kích thước đối tượng*/ background: #f00; width:300px; height:200px; } Float – clear css: - float thuộc tính ép đối tượng sau trôi theo đối tượng trước khơng gian đối tượng trước cịn #div1 { background: #f00; width: 150px; height: 100px; float:left; } #div2 { background: #0d5ad3; width: 150px; height: 100px; float:left; } - Thuộc tính clear thường theo phần tử mà gán float - Clear ngăn đối tượng với float với đối tượng trước đặt float,và xác định có cho float đối tượng - Chúng có giá trị như: both ( không tràn nữa), left, right Display: 29 Phùng Thị Phương Thanh - B17DCPT190 - Thuộc tính display dùng để quy định cách hiển thị thẻ html là: ẩn, kiểu inline, block Position: - Position cho định dạng cụ thể đối tượng dựa vào tọa độ - Position định dạng ,thì thuộc tính margin padding tác dụng Định vị tuyệt đối Absolute position: absolute; top:50px; left:70px ; Ở xác định xác đối tượng cách lề 50 px, lề trái 70px - Định dạng gặp khó khăn chưa biết chiều cao, độ rộng đối tượng (do lập trình web chưa trả nội dung ) Định vị tương đối Relative: - Định vị tương đối so sánh vị trí đối tượng với đối tượng cha Khi đối tượng đối tượng cha vị trí định vị absolute C Xây dựng sản phẩm Xác định đối tượng mục tiêu Đối với đề tài: Xây dựng website giới thiệu chương trình liên kết đào tạo cử nhân quốc tế với đại học La Trobe - Australia Đối tượng mục tiêu trường Đại học La Trobe - Australia Trung tâm đào tạo Quốc tế màu chủ đạo chúng em lựa chọn trắng đỏ Lý lựa chọn màu chủ đạo trường Đại học La Trobe Trung tâm đào tạo Quốc tế (trực thuộc Học viện Công nghệ Bưu Viễn thơng) có logo màu trắng đỏ Do với lựa chọn thể gắn kết hai trường Thiết kế giao diện Lên ý tưởng, xây dựng bố cục, khung cho trang web Đây bước quan trọng q trình thiết kế Vì vậy, địi hỏi dành nhiều thời gian, cơng sức, địi hỏi tính thẩm mỹ khả sáng tạo người thiết kế Thiết kế bố cục cho tảng desktop mobile 30 Phùng Thị Phương Thanh - B17DCPT190 Wirefame Mobile Wirefame desktop Xây dựng nội dung cho trang web Đối với đề tài: Xây dựng website giới thiệu chương trình liên kết đào tạo cử nhân quốc tế với đại học La Trobe- Australia Chúng em tham khảo nội dụng trang web “https://cie.ptit.edu.vn/vi/chuong-trinh-lien-ket-dao-tao-cu-nhanquoc-te-voi-dai-hoc-la-trobe-australia/” Lượng thông tin đưa vào website đảm bảo nhiều thông tin tốt Cần phải có kết hợp chặt chẽ văn đồ họa, hình ảnh, âm nội dung Thiết kế hình ảnh để sử dụng cho website Đưa nội dung vào website 31 Phùng Thị Phương Thanh - B17DCPT190 Sau có đầy đủ thơng tin, nội dung chi tiết phần bước đến thiết kế chi tiết website Lựa chọn màu sắc đưa nội dung vào website Giao diện desktop Giao diện mobile Tiến hành xây dựng website hoàn chỉnh Dựa thiết kế lên áp dụng kiến thức lập trình học tiến hành lập trình website hồn chỉnh Kiểm tra Sau xây dựng hoàn chỉnh website, chúng em thử trang với nhiều trình duyệt khác Thực điều để kiểm tra tính tương thích trang với trình duyệt, xem thử thiết kế trang tận dụng hết hỗ trợ trình duyệt chưa, … 32 Phùng Thị Phương Thanh - B17DCPT190 Phần C KẾT LUẬN, ĐÁNH GIÁ QUÁ TRÌNH THỰC TẬP Kết đạt Trong trình nghiên cứu phát triển, đề tài em số kết định: - Tìm hiểu tổng quan quy trình phát triển website theo restful webservice - Xây dựng web quản lý dự án, đầy đủ chức ứng dụng web cần có Hạn chế Bên cạnh kết đạt được, đề tài tồn số hạn chế: - Website chưa cài đặt lên server nhiều người sử dụng trình phát triển Hướng phát triển Dựa kết đạt với hạn chế tồn tại, tiếp tục phát triển website - Xây dựng sở liệu remote riêng, deploy lên server riêng để cải thiện khả xử lý liệu phía server tốc độ tải hiển thị liệu ứng dụng - Tiếp tục nghiên cứu cải thiện UI, UX để website gây ấn tượng sâu sắc đến người dùng Kết luận Trong thời gian thực tập Trung tâm đào tạo Quốc tế em người team hỗ trợ nhiệt tình, học kiến thức bổ ích, tích lũy nhiều kinh nghiệm để phục vụ cho công việc em sau Để đạt sản phẩm, thêm nhiều kiến thức tất người có team, đặc biệt thầy Phạm Vũ Minh Tú - Quản lý dự án hỗ trợ chúng em nhiều suốt trình thực tập Qua trình thực tập tuần em có nhiều kinh nghiệm về: - Quy trình phát triển website hồn chỉnh 33 Phùng Thị Phương Thanh - B17DCPT190 - Học cách làm việc nhóm, phân bổ thời gian cho đầu cơng việc nhận TÀI LIỆU THAM KHẢO STT Tên tài liệu Đường dẫn Tài liệu hướng dẫn học HTML https://www.w3schools.com/html/default.asp Hướng dẫn CSS https://www.w3schools.com/css/default.asp Quy trình thiết kế website https://arena.fpt.edu.vn/quy-trinh-thiet-kewebsite/ Website https://vi.wikipedia.org/wiki/Website Chương trình đào tạo cử nhân Quốc tế với đại học La Trobe, Australia https://cie.ptit.edu.vn/vi/chuong-trinh-lienket-dao-tao-cu-nhan-quoc-te-voi-dai-hoc-latrobe-australia/ 34 ... tháng 08 năm 2021 Xác nhận quan thực tập Người đánh giá (Ký, ghi rõ họ tên đóng dấu) (Ký ghi rõ họ tên) Phùng Thị Phương Thanh - B17DCPT190 HỌC VIỆN CƠNG NGHỆ BƯU CHÍNH VIỄN THƠNG KHOA ĐA PHƯƠNG... tập tốt nghiệp này, em xin chân thành cảm ơn thầy Học viện Cơng nghệ Bưu Viễn thông - đặc biệt thầy cô khoa Đa phương tiện suốt thời gian qua trang bị kiến thức cho em thực đề tài Phùng Thị Phương. .. PTIT ● Các dự án ⮚ Khuyến mại EU thông qua giao thông đa phương tiện ⮚ Dự án Proeuhe ⮚ Dự án Eramus + Jean Monnet ⮚ Dự án Voyage- Cơ hội lao động trẻ lớp học Việt Nam ⮚ Trường Đại học Xây dựng-