Giáo trình mô đun Thiết kế Web - Nghề: Công nghệ thông tin
ỦY BAN NHÂN DÂN TỈNH BR – VT
TRƯỜNG CAO ĐẲNG NGHỀ
GIÁO TRÌNH
MÔ ĐUN THIẾT KẾ WEB
NGHỀ CÔNG NGHỆ THÔNG TIN
TRÌNH ĐỘ TRUNG CẤP, CAO ĐẲNG
Ban hành kèm theo Quyết định số: 01/QĐ-CĐN, ngày 04 tháng 01 năm 2016
của Hiệu trưởng trường Cao đẳng nghề tỉnh Bà Rịa – Vũng Tàu
Bà Rịa – Vũng Tàu, năm 2016
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.
LỜI GIỚI THIỆU
Giáo trình “Thiết kế web” được biên soạn với mục tiêu cung cấp cho người
học các kiến thức và kỹ năng cần thiết để thiết kế trang web.
Tác giả đã nghiên cứu một số tài liệu, công nghệ hiện đại kết hợp với kinh
nghiệm làm việc thực tế để viết nên giáo trình này. Nội dung được tác giả trình
bày cô động, dễ hiểu kèm theo các bước hướng dẫn thực hành chi tiết giúp cho
người học dễ tiếp thu các kiến thức cần thiết và hình thành được kỹ năng nghề.
Trong quá trình biên soạn, chắc chắn giáo trình còn nhiều thiếu sót. Tác giả
rất mong nhận được ý kiến đóng góp của quý thầy/cô và các em sinh viên để tiếp
tục hoàn thiện hơn.
Xin chân thành cảm ơn quý đồng nghiệp, bạn bè đã có những ý kiến đóng
góp trong quá trình xây dựng giáo trình này.
Bà Rịa – Vũng Tàu, ngày …… tháng …… năm 2016
Tham gia biên soạn
1. Phan Hữu Phước – Chủ biên
MỤC LỤC
MỤC LỤC.............................................................................................................1
1. Giới thiệu.........................................................................................................9
1.1. Khởi động.......................................................................................................9
1.2. Quản lý các palette .......................................................................................10
2. Quản lý các site .............................................................................................10
2.1. Tạo site .........................................................................................................10
3. Quản lý nội dung trong site...........................................................................11
3.1. Cấu trúc site..................................................................................................11
3.2. Các loại tập tin trong site..............................................................................12
3.3. Quản lý thư mục, tập tin...............................................................................12
4. Chọn vùng nhìn làm việc ..............................................................................12
1. Tìm hiểu cấu trúc tài liệu HTML ..................................................................13
1
1. Sử dụng các thẻ ngữ nghĩa ............................................................................19
1. Giới thiệu CSS và các loại CSS ....................................................................23
1.1. Giới thiệu......................................................................................................23
1.4. Thuộc tính style............................................................................................24
2. Tạo và sử dụng CSS......................................................................................24
3. Tạo định dạng chung cho trang web .............................................................25
1. Rounded Corners...........................................................................................27
2. Border Images ...............................................................................................28
4. Colors ............................................................................................................31
5. Gradients .......................................................................................................33
6. Shadows ........................................................................................................34
8. Fonts..............................................................................................................38
9. 2D Transforms...............................................................................................38
11. Transitions.....................................................................................................42
2
13. Box Sizing.....................................................................................................43
1. Tổng quan Javascript.....................................................................................45
1.2. Kiểu dữ liệu, khai báo biến ..........................................................................45
1.3. Các toán tử....................................................................................................47
2. Sử dụng cấu trúc điều khiển..........................................................................50
3. Sử dụng hàm và mảng...................................................................................52
3.1. Mảng.............................................................................................................52
3.2. Một số hàm toán học ....................................................................................53
3.3. Dữ liệu Date .................................................................................................54
3.4. Xây dựng hàm ..............................................................................................56
1. Xử lý trên HTML DOM................................................................................58
1.2. Cập nhật nội dung, thuộc tính ......................................................................58
1.4. Xử lý sự kiện của elemen.............................................................................61
2. JS Browser DOM ..........................................................................................61
3
2.2. Screen...........................................................................................................62
2.4. History..........................................................................................................63
1. Tổng quan về jQuery.....................................................................................65
1.1. Giới thiệu......................................................................................................65
1.2. Cài đặt...........................................................................................................65
1.3. Sử dụng.........................................................................................................66
1.4. Các thành phần.............................................................................................66
2. Chọn element.................................................................................................66
2.1. Cú pháp và cách chọn tương tự CSS............................................................66
2.2. Chọn theo mối quan hệ phân cấp .................................................................67
2.4. Chọn theo thuộc tính ....................................................................................68
3. Thay đổi nội dung, thuộc tính .......................................................................68
3.1. Duyệt danh sách các element .......................................................................68
3.2. Tạo element mới...........................................................................................69
3.3. Đọc, thay đổi nội dung trong element..........................................................69
3.4. Đọc, thay đổi thuộc tính ...............................................................................70
3.5. Chèn nội dung ..............................................................................................70
3.6. Làm việc với CSS.........................................................................................70
3.7. Thay đổi kích thước......................................................................................71
4
4. Xử lý sự kiện.................................................................................................72
5.1. Quy tắc chung...............................................................................................72
5.2. Xử lý một số sự kiện thường gặp .................................................................72
5.3. Xử lý đối tượng Event..................................................................................74
5. Tạo hiệu ứng và hoạt ảnh ..............................................................................74
5.1. Ẩn, hiện ........................................................................................................74
5.4. Tạo hoạt hình................................................................................................76
TÀI LIỆU THAM KHẢO...................................................................................78
5
MÔ ĐUN THIẾT KẾ WEB
Vị trí, tính chất, ý nghĩa và vai trò của mô đun:
Được giảng dạy sau khi học xong Đồ họa ứng dụng.
Môn học chuyên ngành, cung cấp kiến thức và kỹ năng của một công việc
trong quy trình xây dựng ứng dụng web.
Mục tiêu của mô đun:
Biết các kiến thức và kỹ năng để có thể thực hiện các website tĩnh.
Biết những kiến thức nền tảng vững chắc về lập trình Web bắt đầu từ HTML
đến HTML5, từ CSS đến CSS3 và từ Javascript đến jQuery để có thể nhúng
các xử lý vào các trang HTML, lập trình Web ở mức client-side.
Biết những kiến thức nền tảng về thiết kế 1 website tĩnh để tự tin tham gia
các mô đun về xây dựng web động như PHP, Asp.Net.
Sử dụng thành thạo các tag HTML để xây dựng trang Web.
Nhúng xử lý Javascript, jQuery trực tiếp vào các trang HTML làm cho trang
Web ấn tượng, sinh động hơn.
Truy cập và thiết lập thuộc tính các đối tượng trong mô hình đối tượng của
trang HTML, làm chủ các đối tượng và điều khiển trang Web theo ý muốn.
Xây dựng layout cho Website.
Xây dựng được một website tĩnh với giao diện chuyên nghiệp, có các xử lý
và các hình ảnh sống động trên trang web.
Thực hiện các bài thực hành đảm bảo đúng trình tự, an toàn.
Nội dung của mô đun:
TT Tên các bài trong mô đun
Thời Hình thức
gian giảng dạy
1 Môi trường tạo trang web tĩnh DreamWeaver
2 Tạo trang web bằng HTML
3 Tạo trang web bằng HTML5
Kiểm tra bài 1 3
5
15
13
2
Tích hợp
Tích hợp
Tích hợp
Thực hành
6
4 Hoàn chỉnh giao diện trang web với CSS
5 Tùy biến giao diện web với CSS3
Kiểm tra bài 4 5
15
14
2
Tích hợp
Tích hợp
Thực hành
Tích hợp
Tích hợp
Tích hợp
Thực hành
Tích hợp
6 Xử lý tương tác với Javascript
7 Xử lý nâng cao với các đối tượng trong Javascript
8 Tạo giao diện chuyên nghiệp bằng jQuery
Kiểm tra
14
13
20
2
9 Publish website
5
Tổng cộng
120
7
8
BÀI 1.
MÔI TRƯỜNG TẠO TRANG WEB TĨNH DREAMWEAVER
Giới thiệu:
Adobe DreamWeaver là ứng dụng thiết kế web được sử dụng phổ biến nhất
hiện nay. Adobe DreamWeaver hỗ trợ các chức năng mạnh mẽ cho cả người thiết
kế và lập trình web.
Mục tiêu:
Biết công dụng của từng thành phần trong DreamWeaver
Biết tạo và quản lý site
Biết quản lý nội dung trong site
Quản lý cẩn thận nội dung trong site, tránh xóa nhằm nội dung, site
Nội dung:
1. Giới thiệu
1.1. Khởi động
Click đôi chuột lên biểu tượng Adobe DreamWeaver trên desktop
Vào Start Programs Adobe DreamWeaver
Hình 1.1. Giao diện Adobe DreamWeaver
9
1.2. Quản lý các palette
Vào menu Window Chọn/bọ chọn để hiện/ẩn palette.
Hình 1.2. Vị trí hiển thị của các palette
Muốn mở rộng palette nào thì click chuột lên biểu tượng của palette đó
Click chuột lên biểu tượng
2. Quản lý các site
để mở rộng tất cả palette
Vào menu Site Manage Sites. Xuất hiện hộp thoại quản lý các site.
Hình 1.3. Hộp thoại Manage Sites
2.1. Tạo site
Click chuột lên nút New Site
10
Đặt tên cho site, chọn ổ đĩa, thư mục chứa site rồi chọn Save trong hộp thoại
Site Setup
Hình 1.4. Hộp thoại Site Setup
2.2. Xóa site
Trong hộp thoại Manage Site, chọn site cần xóa trong danh sách
Click chuột lên biểu tượng Delete the current selected sites ( )
3. Quản lý nội dung trong site
3.1. Cấu trúc site
Mở rộng palette Files. Cấu trúc site cần tạo sẽ có nội dung như sau:
Hình 1.5. Cấu trúc site
11
3.2. Các loại tập tin trong site
.htm, .html: trang web, tài liệu html
.jpg, .png, .gif: tập tin hình ảnh, dùng để chèn, định dạng nền cho trang web,
thường được đặt trong thư mục images
.css: tập tin định dạng cho trang web, thường được đặt trong thư mục styles
.js: tập tin javascript, chứa các đoạn mã thực thi trên trình duyệt, thường đượt
đặt trong thư mục scripts
3.3. Quản lý thư mục, tập tin
Yêu cầu: tạo 03 thư mục images, scripts, styles và tập tin index.html trong
site
Các bước thực hiện
o Click chuột phải lên đối tượng chứa trong palette Files, chọn New Folder
o Đặt tên cho folder cần tạo
o Click chuột phải lên site, chọn New File, đặt tên cho tập tin cần tạo
4. Chọn vùng nhìn làm việc
Hình 1.6. Các tùy chọn vùng nhìn làm việc
Click đôi chuột lên trang web cần thiết kế
Click chuột lên biểu tượng vùng nhìn cần chọn
o Code: thiết kế trang bằng các thể HTML
o Design: thiết kế trang bằng cách kéo thả các element vào trang web
o Split: tách cửa sổ tài liệu thành 2 vùng nhìn Code và Design
12
Tải về để xem bản đầy đủ
86 trang
13/04/2022
5440
Bạn đang xem 20 trang mẫu của tài liệu "Giáo trình mô đun Thiết kế Web - Nghề: Công nghệ thông tin", để tải tài liệu gốc về máy hãy click vào nút Download ở trên
File đính kèm:
- giao_trinh_mo_dun_thiet_ke_web_nghe_cong_nghe_thong_tin.docx
