ĀY BAN NHÂN DÂN THÀNH PHà Hâ CHÍ MINH TR¯âNG CAO ĐÀNG BÁCH KHOA NAM SÀI GÒN GIÁO TRÌNH MÔN HàC/MÔ ĐUN: THI¾T K¾ WEB NGÀNH/NGHÀ: TIN HàC ĀNG DĀNG TRÌNH ĐÞ: CAO ĐÀNG Ban hành kèm theo Quyết định số: 459/QĐ-NSG, ngày 31 tháng 08 năm 2022 của Hiệu trưởng Trường Cao Đẳng Bách Khoa Nam Sài Gòn Tp.Hồ Chí Minh, năm 2022 Giáo trình thiết kế web TUYÊN BÞ BÀN QUYÀN Tài liåu này thuác lo¿i sách giáo trình nên các nguãn thông tin có thá đ°ợc phép dùng nguyên bÁn hoặc trích dùng cho các mÿc đích vß đào t¿o và tham khÁo. Mọi mÿc đích khác mang tính låch l¿c hoặc sử dÿng vãi mÿc đích kinh doanh thiÁu lành m¿nh s¿ bị nghiêm cÃm. Trang 2/81 Giáo trình thiết kế web LâI GIàI THIàU Môn ThiÁt kÁ web là môn học cung cÃp cho học sinh kiÁn thức và kỹ năng đá có thá thāc hiån các website tĩnh, nhÿng kiÁn thức nßn tÁng vÿng chắc vß thiÁt kÁ mát trang web hoàn chỉnh. Môn ThiÁt kÁ web là môn học chuyên ngành trong ch°¡ng trình ngành Tin học ứng dÿng hå Cao đẳng.
Nái dung giáo trình gãm 9 bài: - Bài 1: Giãi thiåu, khái niåm c¡ bÁn - Bài 2: Làm chā giao diån - QuÁn lý website - Bài 3: Ngôn ngÿ HTML - Bài 4: CSS - CASCADING STYLE SHEET - Bài 5: Siêu liên kÁt – Link - Bài 6: ThiÁt kÁ biáu mÁu – Form - Bài 7: Xây dāng trang mÁu –Template - Bài 8: ThiÁt kÁ website bán hàng - Bài 9: XuÃt bÁn website Trong quá trình biên so¿n chúng tôi đã kÁt hợp kinh nghiåm giÁng d¿y trong nhißu năm cāa nhóm tác giÁ vãi mong muán có thá giúp cho học sinh – sinh viên dã dàng nắm bắt đ°ợc nái dung cāa môn học. Mặc dù, rÃt cá gắng trong quá trình biên so¿n, nh°ng chắc chắn không thá tránh khßi nhÿng thiÁu sót, vì vậy, nhóm tác giÁ chúng tôi rÃt mong nhận đ°ợc ý kiÁn đóng góp cāa b¿n đọc đá giáo trình ngày mát hoàn thiån h¡n.HCM ngày 31 tháng 08 năm 2022 Tham gia biên so¿n 1. Chā biên: ThS Lê Thị Thùy Trang 2. Trang 3/81 Giáo trình thiết kế web MỤC LỤC LäI GIâI THIäU.
Giãi thiåu, khái niåm c¡ bÁn.6 Bài 2: Làm chā giao diån Visual Studio Code - quÁn lý website. Ngôn ngÿ HTML. CSS – CASCADING STYLE SHEET. SIÊU LIÊN KÀT - LINK.
THIÀT KÀ BIàU MÀU – FORM. XÂY DĀNG TRANG MÀU - TEMPLATE. THIÀT KÀ WEBSITE BÁN HÀNG. XUÂT BÀN WEBSITE.76 TÀI LIäU THAM KHÀO:.81 Trang 4/81 Giáo trình thiết kế web GIÁO TRÌNH MÔN HàC/MÔ ĐUN Tên môn hác/mô đun: ThiÁt kÁ Web Mã môn hác/mô đun: MH19 Vß trí, tính chÃt, ý nghĩa và vai trò cÿa môn hác/mô đun: - Vị trí: GiÁng d¿y học kỳ 3, môn học này là môn chuyên ngành trong ch°¡ng trình đào t¿o bậc cao đẳng ngành Tin học ứng dÿng - Tính chÃt: Môn ThiÁt kÁ web là môn học cung cÃp cho học sinh kiÁn thức và kỹ năng đá có thá thāc hiån các website tĩnh, nhÿng kiÁn thức nßn tÁng vÿng chắc vß thiÁt kÁ mát trang web hoàn chỉnh.
Môn ThiÁt kÁ web là môn học chuyên ngành trong ch°¡ng trình ngành Tin học ứng dÿng hå Cao đẳng.- Ý nghĩa và vai trò cāa môn học/mô đun: Māc tiêu cÿa môn hác/mô đun: Vß kiÁn thức: - Trình bày đ°ợc các nguyên tắc c¡ bÁn thiÁt kÁ Web vãi Dreamweaver; - Trình bày đ°ợc các b°ãc thiÁt kÁ web; - Trình bày đ°ợc các quy trình t¿o trang web mÁu. Vß kỹ năng: - ThiÁt kÁ trang web theo mÁu; - ThiÁt kÁ trang web theo yêu cầu cāa công viåc hoặc khách hàng; - T¿o mãi 1 Host miãn phí. - Sử dÿng thành th¿o các công cÿ thiÁt kÁ Web; - Xây dāng đ°ợc các ứng dÿng Multimedia; - Cài đặt, cÃu hình đ°ợc dịch vÿ IIS; - Có khÁ năng kÁt hợp vãi c¡ sç dÿ liåu đá t¿o ra các trang Web đáng. Vß năng lāc tā chā và trách nhiåm: Trang 5/81 Giáo trình thiết kế web - Rèn luyån lòng yêu nghß, t° thÁ tác phong công nghiåp, tính kiên trì, sáng t¿o trong công viåc.
Nßi dung cÿa môn hác/mô đun: Bài 1. Giái thiáu, khái niám c¡ bÁn. Mÿc tiêu: - Phát biáu đ°ợc các khái niåm vß c¡ bÁn Internet, URL, HTTP, Website , webpage; - Trình bày đ°ợc các dịch vÿ c¡ bÁn cāa Internet; - Mô tÁ đ°ợc cÃu trúc l°u trÿ cāa Website. Internet là gì? Internet là mát hå tháng thông tin toàn cầu có thá đ°ợc truy nhập công cáng gãm các m¿ng máy tính đ°ợc liên kÁt vãi nhau.
Hå tháng này truyßn thông tin theo kiáu nái chuyán gói dÿ liåu (packet switching) dāa trên mát giao thức liên m¿ng đã đ°ợc chu¿n hóa (giao thức IP). Hå tháng này bao gãm hàng ngàn m¿ng máy tính nhß h¡n cāa các doanh nghiåp, cāa các viån nghiên cứu và các tr°ång đ¿i học, cāa ng°åi dùng cá nhân, và các chính phā trên toàn cầu. Trang 6/81 Giáo trình thiết kế web 2. Tổ chức và khai thác thông tin trên web (WWW - World Wide Web): ng°åi dùng có thá dã dàng truy cập đá xem nái dung các trang web khi máy tính đ°ợc kÁt nái vãi Internet.
Tìm kiÁm thông tin trên Internet: dùng Google hoặc danh mÿc thông tin. Ng°åi dùng nhanh chóng tìm đ°ợc đúng thông tin cần thiÁt. Th° điån tử (E-mail): đây là dịch vÿ trao đổi thông tin trên Internet thông qua các háp th° điån tử, đ°ợc sử dÿng ráng rãi rÃt phổ biÁn, tiån lợi, nhanh chóng, vãi chi phí thÃp. Hái thÁo trāc tuyÁn: Tổ chức các cuác họp, hái thÁo trāc tuyÁn từ xa vãi sā tham gia cāa nhißu ng°åi ç nhißu n¡i khác nhau.
Hình Ánh, âm thanh cāa hái thÁo và cāa các bên tham gia đ°ợc truyßn hình trāc tiÁp qua m¿ng và hián thị trên màn hình hoặc phát trên loa máy tính. Đào t¿o qua m¿ng: ng°åi học có thá truy cập Internet đá nghe các bài giÁng, trao đổi hoặc nhận các chỉ dÁn trāc tiÁp từ giáo viên , nhận các bài tập hoặc các tài liåu học tập khác và náp kÁt quÁ qua m¿ng mà không cần tãi lãp. Đào t¿o qua m¿ng cho phép mọi ng°åi "học mọi lúc, mọi n¡i". Các khái niám c¡ bÁn URL, HTTP, Website , webpage.
HTTP là chÿ viÁt tắt cāa HyperText Transfer Protocol, là mát giao thức ứng dÿng đ°ợc sử dÿng th°ång xuyên nhÃt trong bá các giao thức TCP/IP (gãm mát nhóm các giao thức nßn tÁng cho internet). Http ho¿t đáng dāa trên mô hình Client (máy khách) – Server (máy chā). URL là chÿ viÁt tắt cāa <Uniform Resource Locator<, t¿m dịch: <Trình định vị tài nguyên tháng nhÃt<. Đây là mát đ°ång dÁn liên kÁt đÁn website, tham chiÁu tãi các tài nguyên trên m¿ng Internet.
Đ°ång dÁn URL là đo¿n text có thá đọc đ°ợc thay cho địa IP mà máy tính sử dÿng đá liên hå vãi server. Website là mát sÁn ph¿m công nghå đ°ợc t¿o ra bçi các lập trình viên, bao gãm nhißu thành phần khác nhau nh° văn bÁn, hình Ánh, video, các tập tin đa ph°¡ng tiån,& và có thá truy cập đ°ợc thông qua mát tên mißn (hoặc tên mißn phÿ) Trang 7/81 Giáo trình thiết kế web Web page (trang web) là mát trang trên website, nó có thá là 1 bài viÁt, 1 chuyên mÿc hoặc 1 trang thông tin bÃt kỳ. Các b¿n l°ãt web s¿ thÃy mßi website th°ång có rÃt nhißu các nái dung khác nhau nh° trang giãi thiåu, trang thông tin liên hå, các bài viÁt giãi thiåu vß sÁn ph¿m, dịch vÿ,& mßi trang nái dung có mát URL (đ°ång link) riêng biåt, ta gọi mßi trang đó là mát web page. CÃu trúc l°u trÿ cÿa Website Tên mißn (domain): Đ°ợc xem là địa chỉ website.
GiÁ sử nh° website là mát cửa hàng thì tên mißn chính là tên địa chỉ cāa cửa hàng đó. Do đó đá truy cập website, b¿n phÁi gõ địa chỉ tên mißn trên trình duyåt đá có thá đi đÁn đ°ợc vãi website đó. Web hosting: Sau khi đã có tên mißn. Công viåc tiÁp theo cāa b¿n đó chính là thuê mát máy chā.
Đó đ°ợc gọi là web hosting. Máy chā s¿ l°u trÿ tÃt cÁ các thông tin, hình Ánh và tài liåu cāa website đá từ đó có thá đ°a ra đ°ợc nhÿng kÁt quÁ phù hợp vãi truy vÃn cāa ng°åi dùng. Source Code: Đây đ°ợc xem là mã nguãn cāa website. NÁu tên mißn là địa chỉ, web hosting chính là mÁnh đÃt thì source code chính là phần g¿ch và bê tông đá xây nên website.
Và b¿n đã có mát website, chính là mát ngôi nhà hoàn chỉnh. Trang 8/81 Giáo trình thiết kế web Bài 2: Làm chÿ giao dián Visual Studio Code - quÁn lý website 1. Māc tiêu: - Cài đặt và sử dÿng ứng dÿng Visual Studio Code - Xây dāng đ°ợc cÃu trúc Website - Lập kÁ ho¿ch cho bá Web - Xây dāng đ°ợc trang web đ¡n giÁn. Giái thiáu Visual Studio Code là mát trình biên tập code đ°ợc phát trián bçi Microsoft dành cho Windows, Linux và macOS.
Nó hß trợ chức năng debug, đi kèm vãi Git, có syntax highlighting, tā hoàn thành code thông minh, snippets, và cÁi tiÁn mã nguãn. Hầu hÁt các lập trình viên Frontend đßu ứng dÿng trình so¿n thÁo mã nguãn mç miãn phí này cho viåc viÁt code JavaScript, HTML hoặc CSS. Ngoài ra, trên thāc tÁ, cũng có không ít các lập trình viên Backend dùng VS Code đá viÁt mã Scala. Vãi VS Code, viåc viÁt mọi lo¿i code trç nên đ¡n giÁn và thuận tiån h¡n rÃt nhißu.
Ngoài ra, nhÿng ai đang làm công viåc kiám thử phần mßm hay quÁn lý dÿ liåu cũng có thá sử dÿng trình so¿n thÁo này. ¯u điám cāa Visual Studio Code: - Cài đặt nhanh - Khçi đáng ch°¡ng trình nhanh - Thao tác file và th° mÿc trên trình so¿n thÁo code dã dàng - Giao diån đ¡n giÁn, dã sử dÿng - Sá l°ợng các tiån ích mç ráng phong phú dành cho nhißu ngôn ngÿ khác nhau - Đ°ợc t¿o ra bçi tập đoàn Microsoft và hoàn toàn MIâN PHÍ 2. Giao diån màn hình Các b°ãc cài đặt VS Code: Trang 9/81 Giáo trình thiết kế web - B°ãc 1: TÁi phần mßm VS Code Link: https://code.com/ - B°ãc 2: NhÃn vào file vừa tÁi đá cài đặt File vừa tÁi xuáng th°ång nằm ç trong th° mÿc download Trang 10/81 Giáo trình thiết kế web - B°ãc 3: Khçi đáng phần mßm và sử dÿng 2. Lập kÁ ho¿ch cho bá Web Trang 11/81 Giáo trình thiết kế web BÁng kÁ ho¿ch thiÁt kÁ website là viåc làm không thá thiÁu trong quy trình thiÁt kÁ bÃt kỳ mát website nào, dù là website nhß hay website lãn.
Có bÁng kÁ ho¿ch chi tiÁt, đầy đā s¿ giúp cho khách hàng và bên dịch vÿ thiÁt kÁ theo sát và nắm đ°ợc nhÿng công viåc mình cần phÁi làm, đÁm bÁo tiÁn đá công viåc. Khi lập kÁ ho¿ch xây dāng trang web cần phÁi trÁ låi các câu hßi sau: - WHO? Đái t°ợng mÿc tiêu cāa trang web cāa b¿n là ai?