Tìm hiểu thiết kế website VÕ LÊ TƯ THÀNH

BÁO CÁO THỰC TẬP TỐT NGHIỆP LỜI MỞ ĐẦU Với phát triển Công nghệ thông tin, với việc ứng dụng rộng rãi công nghệ thông tin nhiều lĩnh vực, khối lượng thông tin lưu trữ trao đổi ngày lớn, số lượng website ngày tăng Nhu cầu quản lý , bảo mật, … website ngày trọng Đề tài quản lý website đề tài gắn liền với thực tế, đồng thời liên quan nhiều đến kiến thức em học trường Do đó, em định chọn đề tài để có hội thực hành, áp dụng kiến thức học vào môi trường thực tế Bước đầu làm quen với công việc cụ thể, học hỏi kinh nghiệm kiến thức thực tiễn giúp cho trình công tác sau thuận tiện Nơi em tiến hành thực tập công ty Cổ Phần Hệ Thống ATOMI Trong tháng thực tập đây, em thu nhiều kinh nghiệm quý báu, thực hành kiến thức học vào công việc cụ thể, tìm hiểu thêm nhiều kiến thức mới, điều giúp ích cho em nhiều công việc sau có sở thực tế để hoàn thành tốt báo cáo thực tập Vì vậy, em xin chân thành cảm ơn toàn thể nhân viên Công Ty Cổ Phần Hệ Thống ATOMI nhiệt tình hướng dẫn, giúp đỡ cho em hoàn thành tốt nhiệm vụ giao thời gian thực tập Bên cạnh đó, em xin gởi lời cảm ơn đến thầy cô đoàn thực tập trường Đại Học Sư Phạm Đà Nẵng, đặc biệt thầy Lê Văn VÕ LÊ TƯ THÀNH Page BÁO CÁO THỰC TẬP TỐT NGHIỆP Dũng người trực tiếp giám sát, hướng dẫn em thời gian thực tập vừa qua Em xin chân thành cảm ơn! Sinh viên Võ Lê Tư Thành VÕ LÊ TƯ THÀNH Page BÁO CÁO THỰC TẬP TỐT NGHIỆP PHẦN I GIỚI THIỆU VỀ CÔNG TY CỔ PHẦN HỆ THỐNG ATOMI I Đôi nét công ty ATOMI Quá trình hình thành phát triển : - ATOMI Systems công ty phần mềm, thành lập ngày 12/09/2008 Hà Nội Là công ty chuyên thiết kế sản phầm phần mềm phục vụ lĩnh vực giáo dục, y tế… - Công ty đặt nhu cầu thực tế người sử dụng lên hàng cải tiến, sáng tạo không ngừng cho phù hợp với nhu cầu ngày tăng khách hàng - Các sản phẩm công ty gắn liền với nhu cầu thực tế, đáp ứng yêu cầu khách hàng Đội ngũ nhân viên: - Đội ngũ nhân viên gồm có thạc sĩ, kỹ sư, cử nhân, … có lực chuyên môn tốt, tinh thần trách nhiệm cao khả sáng tạo công việc - ATOMI Systems có tập thể nhân viên đầy nhiệt huyết giàu kiến thức chuyên môn, hướng tới mục tiêu cung cấp sản phẩm tốt cho khách hàng VÕ LÊ TƯ THÀNH Page BÁO CÁO THỰC TẬP TỐT NGHIỆP Các lĩnh vực chuyên môn: - Sản xuất, buôn bán phần cứng, phần mềm tin học : bao gồm linh kiện máy tính như: CPU, chuột, hình, … Các phần mềm hỗ trợ học tập : e-learning, phần mềm quản lý… - Đào tạo tin học : tin học văn phòng, lập trình viên máy tính… - Cung cấp dịch vụ trực tuyến như: Thương mại điện tử, giải trí trực tuyến, phần mềm trực tuyến, cung cấp thồng tin qua mạng - Tư vấn lắp đặt, sửa chữa, bảo dưỡng, bảo hành máy móc, thiết bị điện tử, tin học, viễn thông - Mua bán vật tư, máy móc, thiết bị bưu viễn thông - Tư vấn, cung cấp giải pháp tin học - Xuất, nhập mặt hàng công ty kinh doanh - Cung cấp khai thác nội dung thông tin, dịch vụ giá trị gia tăng mạng viễn thông, internet phương tiện thông tin đại chúng - Cung cấp dịch vụ xử lí nội dung sỡ liệu thể thao, văn hóa, kinh tế, xã hội, giải trí VÕ LÊ TƯ THÀNH Page BÁO CÁO THỰC TẬP TỐT NGHIỆP II Mục tiêu công ty thời gian tới : ATOMI Systems phấn đấu để trở thành nhà cung cấp dịch vụ công nghệ thông tin hàng đầu nước quốc tế Phấn đấu để đưa lĩnh vực non trẻ trở thành mạnh nước ta Công ty không ngừng sáng tạo để cung cấp nhiều sản phẩm thiết thực, góp phần đáp ứng nhu cầu công nghệ thông tin đời sống ngày cao người VÕ LÊ TƯ THÀNH Page BÁO CÁO THỰC TẬP TỐT NGHIỆP PHẦN II NỘI DUNG THỰC TẬP I Mục đích nội dung thực tập Mục đích: Qua đợt thực tập nhằm rèn luyện cho sinh viên: a Về ý thức: - Tính tổ chức kỷ luật nghề nghiệp - Nâng cao ý thức người cán khoa học - Tinh thần trách nhiệm công việc giao - Tinh thần khắc phục khó khăn, phát huy tính tích cực học tập b Về chuyên môn: - Giúp cho sinh viên củng cố kiến thức tiếp thu trường Đại học - Vận dụng kiến thức học vào môi trường làm việc thực tế Góp phần đào tạo toàn diện trình độ, kỹ thực hành phương pháp học tập, nghiên cứu cho sinh viên nhằm mục đích đạt chất lượng tốt học tập nhằm đáp ứng nhu cầu xã hội nhằm phát triển đất nước - Bổ sung kiến thức cần thiết cho sinh viên thời gian thực tập vào công việc sau này, nhằm củng cố VÕ LÊ TƯ THÀNH Page BÁO CÁO THỰC TẬP TỐT NGHIỆP thêm nhận thức nâng cao tay nghề chuyên môn người cán khoa học tương lai Nội dung thực tập: - Tìm hiểu, nghiên cứu cách thiết kế website - Tìm hiểu nghiên cứu phương pháp quản lý website cho mạng nội công ty ATOMI, đồng thời thu thập số kinh nghiệm từ anh chị đồng nghiệp cho công việc sau - Thực hành cài đặt làm việc với số sản phẩm phần mềm công ty - Tham gia phong trào hoạt động : • Tham dự họp hoạt động hàng tháng công ty •Tìm hiểu thực hành kỹ thuật nối mạng cục bộ( mạng Bus) • Tìm hiểu cách thiết kế website • Thực hành quản lý website - Trao đổi, học hỏi kinh nghiệm VÕ LÊ TƯ THÀNH Page BÁO CÁO THỰC TẬP TỐT NGHIỆP II Nhật ký thực tập: Ngày 30/01/2012, thức tham gia thực tập công ty Cổ Phần Hệ Thống ATOMI Tôi thực tập phận nghiên cứu, phát triển phần mềm công ty Dưới phân công công ty, cô Trần Thị Hường làm cán hướng dẫn thời gian thực tập Theo trao đổi với người hướng dẫn số thông tin cần biết công ty, vấn đề liên quan đến nội dung công việc thực tập, tham gia buổi họp công ty, cách tổ chức công việc làm quen với anh chị đồng nghiệp VÕ LÊ TƯ THÀNH Page BÁO CÁO THỰC TẬP TỐT NGHIỆP Kế hoạch thực tập thực hiện: Tuần - Làm quen với sở thực tập - Nắm bắt tình hình chung công ty - Tìm hiểu số nội dung lĩnh vực thuộc quản lý công ty Tuần đăng website - Tìm hiểu số phần mềm công ty thiết kế - Cập nhật thông tin sản phẩm công ty Tuần hướng dẫn người phụ trách - Kiểm tra tốc độ hoạt động trang web Tuần - Tìm hiểu cách lập trình, thiết kế website -Tham gia buổi họp nhân viên để tích lũy kinh nghiệm làm việc Tuần -Kiểm tra cập nhật thông tin lên website công ty Tuần - Tham gia hoạt động tập thể công ty Tuần -Thu thập tài liệu chẩn bị viết báo cáo thực tập Tuần - Tiến hành viết báo cáo thực tập - Tổng kết đợt thực tập III Tìm hiểu thiết kế website VÕ LÊ TƯ THÀNH Page BÁO CÁO THỰC TẬP TỐT NGHIỆP Giới thiệu website - Website “live-profile” mạng Internet, nơi giới thiệu thông tin, hình ảnh doanh nghiệp sản phẩm, dịch vụ doanh nghiệp ( hay thông tin gì) để khách hàng truy cập nơi đâu, lúc nào.với điều kiện có thiết bị thu phát ,kết nối internet - Website tập hợp nhiều trang Khi doanh nghiệp xây dựng website nghĩa xây dựng nhiều trang thông tin, sản phẩm, dịch vụ Để tạo nên website cần phải có yếu tố bản: • Cần phải có tên miền (domain) • Nơi lưu trữ website (hosting) • Nội dung trang thông tin Giới thiệu ngôn ngữ HTML - HTML ( hay Hypertext Markup Language - Ngôn ngữ liên kết siêu văn ) ngôn ngữ đánh dấu chuẩn dùng để rõ trang web hiển thị trình duyệt - Ngôn ngữ HTML dùng tag đoạn mã lệnh trình duyệt (Web browsers) cách hiển thị thành phần web Với tag bạn có thể: • Điều khiển hình thức nội dung trang • Xuất tài liệu trực tuyến truy xuất thông tin trực tuyến cách sử dụng liên kết chèn vào tài liệu HTML VÕ LÊ TƯ THÀNH Page 10 BÁO CÁO THỰC TẬP TỐT NGHIỆP + Line breaks: tag rỗng, dùng để chèn dòng trống Đây tag tag đóng Cú pháp + Horizontal rule: dùng để chèn đường kẻ ngang Đây tag tag đóng Cú pháp + Hidden coments: nội dung tag không hiển thị lên trình duyệt 3.3.Các liên kết html - Để chèn link khác đến trang web ta sử dụng tag Ví dụ: liên kết đến trang google + Liên kết đặt sau thuộc tính herf Thuộc tính giúp xác định địa cụ thể + Thuộc tính target: dùng để xác định tài liệu liên kết mở (ở cửa sổ hay cửa sổ … ) + Thuộc tính name: cho phép liên kết phần tài liệu + Có nhiều cách để hiển thị links lên trình duyệt như: dòng tiêu đề, câu hay hình ảnh, … - Để chèn hình ảnh ta dùng tag Cú pháp: Ví dụ: VÕ LÊ TƯ THÀNH Page 16 BÁO CÁO THỰC TẬP TỐT NGHIỆP Kết quả: 3.4.Tạo form giao tiếp với người dùng: - Khả giao tiếp với người dùng yêu cầu quan trọng trang web VÕ LÊ TƯ THÀNH Page 17 BÁO CÁO THỰC TẬP TỐT NGHIỆP - Để tạo form giao tiếp ta bắt đầu với cặp tag + Action : địa mà form gởi đến sau người dùng nhập thông tin + Method: phương thức gởi form Có hai phương thức Post Get ( giá trị mặc định Get) + Name: tên form - Giữa hai cặp tag thẻ input, nơi người dùng nhập thông tin Thông qua thuộc tính Type mà ta xác định nội dung nhập văn bản, họ tên, hay passwork,… - Để nội dung gởi ta tạo thêm nút [ Submit], người dùng click chuột vào form gởi VÕ LÊ TƯ THÀNH Page 18 BÁO CÁO THỰC TẬP TỐT NGHIỆP Ví dụ: Kết quả: VÕ LÊ TƯ THÀNH Page 19 BÁO CÁO THỰC TẬP TỐT NGHIỆP Trên giới thiệu thiết kế website Các trang web tạo Html trang web tĩnh Do đó, thiết kế website Html người ta phải chèn vào file khác như: CSS( Cascading Style Sheet ), Javascript, PHP ( Hypertext Preprocessor) , …, để tạo tính tương tác qua lại với người dùng cho website Một số website tham khảo lập trình web như: - http://www.hocvui.net - http://www.izwebz.com - http://www.qhonline.info VÕ LÊ TƯ THÀNH Page 20 BÁO CÁO THỰC TẬP TỐT NGHIỆP IV Thực hành quản lý website: Đăng nhập: http://jerrylaptop/atomisite/administrator/ + Username: admin + Password: Thêm viết chọn: VÕ LÊ TƯ THÀNH Page 21 BÁO CÁO THỰC TẬP TỐT NGHIỆP add new artical Cập nhật nội dung trang + Vào article manager VÕ LÊ TƯ THÀNH Page 22 BÁO CÁO THỰC TẬP TỐT NGHIỆP Chỉnh sửa nội dung viết + Chọn nội dung muốn chỉnh sửa Nhập nội dung vào ô soạn thảo VÕ LÊ TƯ THÀNH Page 23 BÁO CÁO THỰC TẬP TỐT NGHIỆP + Chèn hình ảnh: click vào nút [image] bên cửa sổ, chọn hình ảnh muốn hiển thị + Click nút [ start upload ] để tải ảnh lên + Khi upload xong, click chọn hình upload khung bấm nút [ insert] để chèn hình vào văn + Canh chỉnh ảnh: chọn hình ảnh, click [ Insert/edit image],chọn canh lề: left, margin:2, xong click update + Xong bấm [ save] để hoàn tất văn VÕ LÊ TƯ THÀNH Page 24 BÁO CÁO THỰC TẬP TỐT NGHIỆP Cách quản lý menu: + Vào menus chọn [menu manager], sau chọn [ new] để tạo menu + Nhập giá trị cho menu, sau click [ save] VÕ LÊ TƯ THÀNH Page 25 BÁO CÁO THỰC TẬP TỐT NGHIỆP + Để xóa menu ta chọn menu cần xóa, chọn [ delete] VÕ LÊ TƯ THÀNH Page 26 BÁO CÁO THỰC TẬP TỐT NGHIỆP Quản lý user: Mở mục quản lý User Chọn site/User Manager + Thêm user: phần quản lý user chọn [ New], sau nhập đầy đủ thông tin người dung ( tên đầy đủ, tên đăng nhập, email, passwork) Chọn [ Save] để lưu người dùng + Chỉnh sửa thông tin người dung: chọn User, click [ Edit], thay đổi nội dung chọn [ Save] để lưu thông tin nhập + Xóa User: chọn User cần xóa, click [ Delete] Liên kết web ( web links) : + Chọn Components/ Web links/ Categories Chọn [ Add new] tạo chủ đề Sau chọn [ Save] để lưu lại + Chọn [ Links], chọn [ Add new] để thêm liên kết Nhập thông tin liên kết ( tên, chọn category, url, mô tả,…) Chọn [ Save] để lưu liên kết tạo Tạo trang liên hệ : Giúp người dung, khách hàng dễ dàng liên hệ qua form gởi thông tin xem thông tin công ty + Chọn components/ Contacts/ Categories/ New + Đặt tên cho nhóm liên hệ sau click [ Save] để lưu lại + Sau muc Contacts, chọn [ New], sau điền thông tin cho form liên hệ như: tên form, danh mục, địa gởi đến form,…, đồng thời nhập thông tin liên lạc bên Sau click [ Save] VÕ LÊ TƯ THÀNH Page 27 BÁO CÁO THỰC TẬP TỐT NGHIỆP V Đánh giá chung hướng phấn đấu Đánh giá chung  Kết đạt được: - Vận dụng kiến thức học vào thực tiễn - Học hỏi nhiều kiến thức mới, cần thiết cho công việc sau - Rút số học kinh nghiệm cho thân - Được làm quen với môi trường làm việc tập thể  Những mặt hạn chế: - Kiến thức chuyên môn nhiều hạn chế nên gặp nhiều khó khăn công việc - Chưa có kinh nghiệm làm việc tập thể ban đầu nhiều bỡ ngỡ Hướng phấn đấu - Củng cố, nắm vững kiến thức học, đồng thời không ngừng học hỏi thêm kiến thức - Rèn luyện đạo đức, tác phong làm việc tập thể để đạt hiệu tốt - Học hỏi kinh nghiệm, kiến thức người trước VÕ LÊ TƯ THÀNH Page 28 BÁO CÁO THỰC TẬP TỐT NGHIỆP PHẦN III KẾT LUẬN Hai tháng vừa qua thực tập Công ty Cổ phần Hệ thống ATOMI giúp em học nhiều điều bổ ích thiết thực Được vận dụng kiến thức học vào thực tế giúp em thấy mối quan hệ gắn bó lý thuyết thực hành, khác biệt hai yếu tố Những lý thuyết trang bị nhà trường tuân theo khuôn mẫu, chuẩn mực, nguyên tắc định áp dụng vào thực tế phải linh hoạt, chủ động, tùy điều kiện nơi mà áp dụng cho phù hợp Em xin tỏ lòng biết ơn sâu sắc đến thầy cô trường Đại Học Sư Phạm trang bị cho em hành trang nguồn kiến thức vô bổ ích quý giá Đồng thời em gởi lời cảm ơn sâu sắc đến anh chị nhân viên công ty Cổ Phần Hệ Thống ATOMI tạo điều kiện thuận lợi cho em hoàn thành tốt tập vừa qua Trong thời gian tuần có cố gắng nhiều không tránh khỏi thiếu sót, hạn chế Kính mong nhận đóng góp ý kiến thầy cô để báo cáo em hoàn thiện Em xin chân thành cảm ơn Sinh viên thực Võ Lê Tư Thành VÕ LÊ TƯ THÀNH Page 29 BÁO CÁO THỰC TẬP TỐT NGHIỆP MỤC LỤC VÕ LÊ TƯ THÀNH Page 30 [...]... chuột vào đây thì form sẽ được gởi VÕ LÊ TƯ THÀNH Page 18 BÁO CÁO THỰC TẬP TỐT NGHIỆP Ví dụ: Kết quả: VÕ LÊ TƯ THÀNH Page 19 BÁO CÁO THỰC TẬP TỐT NGHIỆP Trên đây chỉ là những giới thiệu cơ bản nhất về thiết kế website Các trang web được tạo bởi Html chỉ là những trang web tĩnh Do đó, khi thiết kế website ngoài Html người ta còn phải chèn vào các file khác như: CSS(... và tag đóng Tag headings có 6 kích cỡ từ h1 đến h6, trong đó h1 là lớn nhất và giảm dần tới h6 VÕ LÊ TƯ THÀNH Page 13 BÁO CÁO THỰC TẬP TỐT NGHIỆP Kết quả: VÕ LÊ TƯ THÀNH Page 14 BÁO CÁO THỰC TẬP TỐT NGHIỆP + Tag paragraphs: và dùng để trình diễn các đoạn chương trình Kết quả: VÕ LÊ TƯ THÀNH Page 15 BÁO CÁO THỰC TẬP TỐT NGHIỆP + Line breaks: là một tag rỗng, dùng để chèn một dòng trống... điều kiện thuận lợi cho em hoàn thành tốt kỳ thực tập vừa qua Trong thời gian 8 tuần tuy đã có cố gắng nhiều nhưng không tránh khỏi những thiếu sót, hạn chế Kính mong nhận được sự đóng góp ý kiến của các thầy cô để bài báo cáo của em hoàn thiện hơn Em xin chân thành cảm ơn Sinh viên thực hiện Võ Lê Tư Thành VÕ LÊ TƯ THÀNH Page 29 BÁO CÁO THỰC TẬP TỐT NGHIỆP MỤC LỤC VÕ LÊ TƯ THÀNH Page 30 ... update + Xong bấm [ save] để hoàn tất văn bản VÕ LÊ TƯ THÀNH Page 24 BÁO CÁO THỰC TẬP TỐT NGHIỆP 4 Cách quản lý menu: + Vào menus chọn [menu manager], sau đó chọn [ new] để tạo một menu mới + Nhập các giá trị cho menu, sau đó click [ save] VÕ LÊ TƯ THÀNH Page 25 BÁO CÁO THỰC TẬP TỐT NGHIỆP + Để xóa một menu ta chọn menu cần xóa, chọn [ delete] VÕ LÊ TƯ THÀNH Page 26 BÁO CÁO THỰC TẬP TỐT NGHIỆP 5 Quản... Preprocessor) , …, để tạo tính tư ng tác qua lại với người dùng cho website Một số website tham khảo về lập trình web như: - http://www.hocvui.net - http://www.izwebz.com - http://www.qhonline.info VÕ LÊ TƯ THÀNH Page 20 BÁO CÁO THỰC TẬP TỐT NGHIỆP IV Thực hành quản lý website: Đăng nhập: http://jerrylaptop/atomisite/administrator/ + Username: admin + Password: 1 Thêm bài viết chọn: VÕ LÊ TƯ THÀNH Page 21 BÁO CÁO... trọng giúp cấu thành nội dung website 3.1 Trang web đầu tiên - Chọn start /all programs/ Accesssories/notepad Sau đó tiến hành nhập code cho website - Sau đó lưu file bằng cách vào file/save , chọn nơi và lưu với đuôi html - Mở file vừa lưu lên và quan sát trên trình duyệt VÕ LÊ TƯ THÀNH Page 12 BÁO CÁO THỰC TẬP TỐT NGHIỆP 3.2.Các tag trong html - Tag trong html được bắt đầu bằng dấu “ < “ và kết thúc bởi... nhật nội dung trang + Vào article manager VÕ LÊ TƯ THÀNH Page 22 BÁO CÁO THỰC TẬP TỐT NGHIỆP 3 Chỉnh sửa nội dung bài viết + Chọn nội dung muốn chỉnh sửa Nhập nội dung vào ô soạn thảo VÕ LÊ TƯ THÀNH Page 23 BÁO CÁO THỰC TẬP TỐT NGHIỆP + Chèn hình ảnh: click vào nút [image] bên dưới cửa sổ, chọn hình ảnh muốn hiển thị + Click nút [ start upload ] để tải ảnh lên + Khi đã upload xong, click chọn hình... mới … ) + Thuộc tính name: cho phép liên kết các phần trong cùng tài liệu + Có nhiều cách để hiển thị links lên trình duyệt như: dòng tiêu đề, một câu hay một hình ảnh, … - Để chèn hình ảnh ta dùng tag Cú pháp: Ví dụ: VÕ LÊ TƯ THÀNH Page 16 BÁO CÁO THỰC TẬP TỐT NGHIỆP Kết quả: 3.4.Tạo form giao tiếp với người... tag đóng Kết thúc đoạn văn bản - Một trang html bao gồm có 3 element chính: • element: bao gồm tag mở và tag đóng Tất cả nội dung của html phải nằm trong hai tag này VÕ LÊ TƯ THÀNH Page 11 BÁO CÁO THỰC TẬP TỐT NGHIỆP • element: được đặt bên trong phần tử Phần tử này thường chứa thông tin của website • element: chứa hầu hết các phần tử khác Đây là thành phần... đức, tác phong làm việc tập thể để đạt được hiệu quả tốt - Học hỏi kinh nghiệm, kiến thức của những người đi trước VÕ LÊ TƯ THÀNH Page 28 BÁO CÁO THỰC TẬP TỐT NGHIỆP PHẦN III KẾT LUẬN Hai tháng vừa qua được thực tập tại Công ty Cổ phần Hệ thống ATOMI đã giúp em học được nhiều điều bổ ích và thiết thực Được vận dụng những kiến thức được học vào thực tế đã giúp em thấy được mối quan hệ gắn bó giữa lý thuyết