1. Trang chủ
  2. » Công Nghệ Thông Tin

giáo trình thiết kế web 2 ngành công nghệ thông tin trung cấp

120 1 0
Tài liệu đã được kiểm tra trùng lặp

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Tiêu đề Thiết kế web 2
Tác giả ThS. Đỗ Thọ Xuân Thắm
Trường học Trường Cao đẳng Xây dựng số 1
Chuyên ngành Công nghệ thông tin
Thể loại Giáo trình
Năm xuất bản 2023
Thành phố Hà Nội
Định dạng
Số trang 120
Dung lượng 2,9 MB

Cấu trúc

  • 1.1. Giãi thiÉu HTML5 (7)
  • 1.2. Multimedia (7)
    • 1.2.1. Hình Ánh (8)
    • 1.2.2. Audio (8)
    • 1.2.3. Video (8)
  • 1.3. Danh sách và bÁng (7)
    • 1.3.1. Danh sách (8)
    • 1.3.2. BÁng (8)
  • 1.4. Form và control (7)
    • 1.4.1. Form (8)
  • 2.1. Các lo¿i CSS (8)
  • 2.2. Đánh d¿ng trang web vãi CSS (7)
  • 2.3. Đánh d¿ng màu và nÃn (7)
  • 2.4 Đánh d¿ng chă (7)
  • 2.5 Đánh d¿ng Box Model (7)
    • 2.5.1 Đánh d¿ng viÃn (border) (8)
    • 2.5.2 Đánh d¿ng là Margin (8)
    • 2.5.3 Đánh d¿ng là padding (8)
  • 2.6. Bá cāc (7)
    • 2.6.1. CSS Display (8)
    • 2.6.2. CSS Position (8)
    • 2.6.3. CSS Overflow (8)
  • 2.7. CSS Form (7)
  • 2.8. CSS HiÉu āng (Transform, Animation, hover, Transitions) (7)
  • 3.1. Giãi thiÉu JavaScript (JS) (7)
    • 3.1.1 Giãi thiÉu (9)
    • 3.1.2 Nhúng Js vào trang Web (75)
  • 3.2. Ngôn ngă JavaScript (7)
    • 3.2.1. BiÁn (9)
    • 3.2.2. Toán tā (9)
    • 3.2.3. Hàm (9)
    • 3.2.4. CÃu trúc điÃu khiÅn (9)
  • 3.3. Các đái t°ÿng trong JavaScript (7)
    • 3.3.1. KiÅu dă liÉu đái t°ÿng (9)
    • 3.3.2. Các đái t°ÿng c¢ bÁn (9)
    • 3.3.3. Đái t°ÿng Document (dom) (9)
  • 3.4. Xā lý są kiÉn (7)
  • 4.1. Giãi thiÉu Jquery (7)
    • 4.1.2. TÁi và sā dāng (9)
    • 4.1.3. Chãn phÅn tā trong Jquery (9)
  • 4.2. Xā lý są kiÉn (7)
    • 4.2.1. Są kiÉn trên cāa sá trình duyÉt và tài liÉu (9)
    • 4.2.3. Są kiÉn trên chuát (9)
  • 4.3. Jquery Effects (7)
  • 4.4. Thao tác vãi DOM (7)
  • 4.5. Di chuyÅn trong DOM (7)
  • 5.1. Giãi thiÉu Bootstrap CSS (10)
  • 5.2. Sā dāng Bootstrap CSS (10)
  • 5.3. Các thành phÅn cÿa bootstrap CSS (10)

Nội dung

Và kiÁn thāc: - Trình bày đ°ÿc mát sá kiÁn thāc c¢ bÁn và thÁ, cú pháp thÁ, cách sā dāng các thÁ HTML và HTML 5; - Trình bày đ°ÿc cú pháp, cÃu trúc các phÅn tā, đánh d¿ng nÃn, màu chă và

Giãi thiÉu HTML5

Multimedia

Danh sách và bÁng

Form và control

Form

Ch°Âng 2: Giỏi thiòu CSS Thời gian: 18 giờ

- Trình bày đ°ÿc các d¿ng đánh d¿ng thÁ trong css, d¿ng viÃn trong viÃn ngoài, chÁ đá hiÅn thá, các d¿ng đánh d¿ng form;

- Đánh d¿ng đ°ÿc các thÁ chă, đo¿n vn, lÃ, bá cāc trang, chÁ đá hiÅn thá trang và các hiÉu āng hành đáng trên thÁ

Đánh d¿ng Box Model

Bá cāc

CSS HiÉu āng (Transform, Animation, hover, Transitions)

3 Ch°¢ng 3 Ngôn ngā JavaScript 10 3 6 1

Giãi thiÉu JavaScript (JS)

Giãi thiÉu

3.1.2 Nh°ng Js vào trang Web

3.3 Các đái t°ÿng trong JavaScript

3.3.1 KiÅu dă liÉu đái t°ÿng

Ch°¢ng 4: Ngôn ngā JQuery Thời gian: 12 giờ

- Trình bày đ°ÿc cách tÁi và sā dāng th° viÉn có sẵn trong Jquery;

- Thao tỏc sā lỹ cỏc są kiẫn vói chuỏt và bàn phớm ỗ trang Web

4.1.1 Giãi thiÉu th° viÉn Jquery

4.1.3 Chãn phÅn tā trong JQuery

4.2.1 Są kiÉn trên cāa sá trình duyÉt và tài liÉu

4.2.4 Są kiÉn trên bàn phím

Ch°¢ng 5: Bootstrap CSS Thời gian: 12 giờ

Trình bày và thao tác đánh d¿ng giao diÉn trang web trên các thiÁt bá khác nhau: máy tính, điÉn tho¿i, ipad

5.3 Các thành phÅn cÿa bootstrap CSS

IV ĐiÁu kiòn thăc hiòn mụn hỏc:

1 Phũng hóc chuyờn mụn húa/nhà x°ỗng: Phũng hóc lý thuyÁt, phũng mỏy tớnh

2 Trang thiÁt bá máy móc: Máy tính cho nhà giáo, máy chiÁu, bÁng, màn chiÁu, các thiÁt bá trÿ giÁng khác

3 Hãc liÉu, dāng cā, nguyên vËt liÉu: Giáo trình, giáo án, tài liÉu tham khÁo; câu hòi, bài tập

V Nòi dung và ph°Âng phỏp, đỏnh giỏ:

- Trình bày đ°ÿc cách sā dāng ngôn ngă HTML đÅ t¿o mát trang web;

- Trình bày đ°ÿc cách sā dāng ngôn ngă CSS đÅ t¿o bá cāc và đánh d¿ng trang web;

- Trình bày đ°ÿc cách sā dāng ngôn ngă JavaScript và mô hình đái t°ÿng dă liÉu đÅ t¿o các trang web có tính t°¢ng tác bên phía web browser và kiÅm tra tính hÿp lÉ cÿa dă liẫu do ng°ồi dāng nhập vào

- Trình bày đ°ÿc cách kÁt hÿp các ngôn ngă HTML, JavaScript, CSS, mô hình DOM, chuyÅn đái mô hình web

- Xây dąng đ°ÿc khung giao diÉn trang Web;

- Đánh d¿ng trang Web b¿ng CSS và sā dāng JavaScript đÅ t¿o menu đáng cho trang web, form l°u tră dă liÉu

1.3 Nng ląc tą chÿ và trách nhiÉm:

- Sā dāng hiẫu quÁ nguòn hóc liẫu trờn Internet;

- Có khÁ nng làm viÉc theo nhóm

- KiÅm tra th°ồng xuyờn: Là điÅm trung bỡnh chung cỏc bài kiÅm tra trờn phÅn mÃm quÁn lý hãc tËp LMS và kÁt quÁ các bài thÁo luËn, bài tËp nhóm

- Thi kÁt thúc môn hãc:

+ Hình thāc thi: Thąc hành

+ ĐiÃu kiẫn dą thi kÁt thỳc mụn hóc: Tham dą ≥ 80% thồi gian cÿa mụn hóc và điÅm trung bình chung các điÅm kiÅm tra ≥ 5,0 theo thang điÅm 10

VI H°ỏng d¿n thăc hiòn mụn hỏc:

1 Ph¿m vi áp dāng: môn hãc Ngành Công nghÉ thông tin (Āng dāng phÅn mÃm) trình đá trung cÃp

2 H°ãng dÉn và ph°¢ng pháp giÁng d¿y, hãc tËp môn hãc

2.1 Đái vãi nhà giáo: ChuÇn bá tát các tài liÉu minh hãa và áp dāng linh ho¿t các ph°Âng phỏp giÁng d¿y đÅ phỏt huy tớnh chÿ đỏng, tớch cąc cho ng°ồi hóc nh°:

+ ThuyÁt trình, giÁng giÁi, phát vÃn;

+ Nêu vÃn đÃ, giao bài tËp nhóm, bài tËp thąc hành;

+ Tỏ chāc thÁo luận nhúm cho lóp đÅ ng°ồi hóc tą rỳt ra kÁt luận

2.2 Đỏi vói ng°ồi hóc: Chỳ ý lắng nghe bài giÁng, rốn luyẫn kỹ nng xā lý, chÿ đáng nghiên cāu các tài liÉu, chÿ đáng tìm hiÅu thąc tÁ

3 Nhăng trãng tâm cÅn chú ý:

[1] Th¿c Bỡnh C°ồng, Vũ Thỏ Hậu Giỏo trỡnh thiÁt kÁ web Nhà xuÃt bÁn giỏo dāc,

[2] Đặng Ngãc Bình, ThiÁt kÁ Web siêu tác, APPNET - Trung tâm Đào t¿o Digital Marketing - Đ¿i hãc Bách Khoa TPHCM, nm 2015

[3] Patrick Carey, Create web pages with html and dymamic HTML

[4] Steven Suehring, Janet Valade PHP, MySQL, JavaScript & HTML5 All-in- one for dummies Wiley Pulishing, 2013

5 Ghi chú và giÁi thích (nÁu có):

CH¯¡NG 1: NGÔN NG Ā HTML

- Trình bày đ°ÿc cú pháp, cách dùng các thÁ HTML 5 và các thÁ danh sách, các kiÅu dă liÉu trong form, control;

- ThiÁt lËp đ°ÿc các form đng nhËp, đng xuÃt, hình Ánh, audio, video

HTML5 là mát ngôn ngă cÃu trúc và trình bày nái dung cho World Wide Web Đây là phiên bÁn thā 5 cÿa ngôn ngă HTML HTML5 cùng vãi các āng dāng cÅn nhăng hiÉu āng đò hóa và chuyÅn đỏng đặc biẫt, lập trỡnh viờn cú thÅ sā dāng Canvas vói kiÅu bitmap hoặc SVG vói kiÅu vector Khụng chò ỏp dāng cho viẫc thiÁt kÁ cỏc trang web trąc quan, HTML5 cũn đ°ÿc ỏp dāng đÅ t¿o ra cỏc th° viẫn đò hóa giỳp t¿o ra cỏc āng dāng đò thỏ, game trong cÁ mụi tr°ồng 2D và 3D nh° nhăng āng dāng trờn desktop

 Các thÁ và giúp b¿n tách các phÅn trên và d°ãi cÿa các block nái dung ĐÅ có thÅ sā dāng nhiÃu lÅn trên mát trang duy nhÃt

 ThÁ giúp xác đánh mát phÅn cā thÅ và nái dung, ví dā, mát bài blog hoặc mát bình luËn cÿa đác giÁ

 ThÁ đÅ xác đánh nhăng phÅn nào đ°ÿc coi là khái điÃu h°ãng

 ThÁ cho phép b¿n xác đánh mát phÅn nái dung nào đó; t°¢ng tą nh° các thÁ hiÉn nay

 Cỏc thÁ và đÅ đỏnh dÃu nhăng nỏi dung bao gòm õm thanh hoặc video

 ThÁ cho phộp b¿n v¿ đò hóa sā dāng mỏt ngụn ngă kỏch bÁn riờng biẫt SVG, canvas và nhăng hỡnh d¿ng vector đÃu đ°ÿc hò trÿ bỗi HTML5

 ThÁ dùng đÅ nhúng các nái dung hoặc các āng dāng bên ngoài vào trang web

 Có nhiÃu element đ°ÿc giãi thiÉu trong HTML Mát vài trong sá chúng là quan trãng nhÃt: summary, time, aside, audio, command, data, datalist, details, embed, wbr, span, figure, footer, header, article, hgroup, bdi, canvas, keygen, mark, meter, nav, output, progress, rp, rt, ruby, section, source, track, video

Thẻ img là thÁđặc biÉt không có thÁđóng, đóng thÁ trên chính nó

Cú pháp:

Ngày đăng: 14/09/2024, 21:28