Thuc hanh 3.pdf
- 1. Th畛c hnh Thi畉t k畉 giao di畛n ng動畛i d湛ng Th畛c hnh 1 1 TH畛C HNH 3 M畛c ti棚u: - S畛 d畛ng CSS b畛 tr鱈 c叩c thnh ph畉n trong m畛t giao di畛n ng動畛i d湛ng. T畉o trang web 董n gi畉n: o S畛 d畛ng CSS (SV xem trong file l箪 thuy畉t trong th動 m畛c) o S畛 d畛ng bootstrap (xem file l箪 thuy畉t trong th動 m畛c v tr棚n website: https://getbootstrap.com/) - C担ng c畛 s畛 d畛ng: visual studio code, sublime text, . - Y棚u c畉u: T畉o th動 m畛c styles. C叩c file css s畉 畛 trong th動 m畛c ny Bi th畛c hnh Bi 1: S畛 d畛ng html, css 畛 hon thnh giao di畛n sau: M担 t畉: Ban 畉u giao di畛n ch畛 c坦 menu ph鱈a tr棚n. Khi 動a chu畛t vo t畛ng m畛c menu nh畛 (tr畛 m畛c Home) th狸 menu con s畉 xu畉t hi畛n nh動 h狸nh H動畛ng d畉n: T畉o file bai1.html. S畛 d畛ng th畉 ul, li 畛 t畉o menu. S畛 d畛ng css (t畉o c叩c class tr棚n file ri棚ng ho畉c tr棚n c湛ng 1 file html) Bi 2: T畉o file bai2.html. S畛 d畛ng css v html 畛 t畉o menu nh動 sau Khi r棚 chu畛t vo 1 menu con th狸 畛i mu gi畛ng h狸nh. H動畛ng d畉n: c叩ch lm t動董ng t畛 bi 1 Bi 3: T畉o file bai3.html. S畛 d畛ng css v html 畛 t畉o giao di畛n nh動 sau:
- 2. Th畛c hnh Thi畉t k畉 giao di畛n ng動畛i d湛ng Th畛c hnh 1 2 H動畛ng d畉n: - D湛ng th畉 div 畛 chia giao di畛n thnh 2 khung (2 d嘆ng) - D湛ng th畉 ul, li 畛 t畉o menu Bi 4: T畉o file bai4.html. S畛 d畛ng css v html 畛 t畉o giao di畛n nh動 sau: H動畛ng d畉n: - D湛ng th畉 div 畛 chia giao di畛n thnh 3 khung (header, body v footer) Trong th畉 head, d湛ng 2 th畉 div 畛 ph但n thnh 2 d嘆ng: 1 d嘆ng cho logo, slogan v 1 dong dnh cho menu
- 3. Th畛c hnh Thi畉t k畉 giao di畛n ng動畛i d湛ng Th畛c hnh 1 3 Bi 5: S畛 d畛ng html v c叩c thu畛c t鱈nh/css 畛 th畛c hi畛n giao di畛n sau: (SV t畛 ch畛n h狸nh 畉nh). - Khi click vo Th畉ng c畉nh m畛 tra trang web b畉t k畛 tr棚n tab m畛i - Khi click vo vn h坦a m畛 ra trang web b畉t k畛 (tr棚n c湛ng tab) - Khi click vo Di t鱈ch l畛ch s畛 kh担ng m畛 trang web no - Khi click vo h狸nh m畛 ra trang web b畉t k畛 Bi 6: S畛 d畛ng html v css v bootstrap 畛 th畛c hi畛n giao di畛n sau: Trong 坦 d嘆ng ch畛 Khoa c担ng ngh畛 th担ng tin s畉 di chuy畛n t畛 theo chi畛u d畛c) Bi 7: S畛 d畛ng html v css v bootstrap 畛 th畛c hi畛n ti畉p giao di畛n nh動 sau:
- 4. Th畛c hnh Thi畉t k畉 giao di畛n ng動畛i d湛ng Th畛c hnh 1 4