TËp huÊn vÒ thÈm ®Þnh ỦY BAN NHÂN DÂN TỈNH AN GIANG TRƯỜNG CAO ĐẲNG NGHỀ AN GIANG GIÁO TRÌNH Mô đun THIẾT KẾ WEBSITE NGHỀ THIẾT KẾ ĐỒ HỌA Trình độ Trung cấp (Ban hành theo Quyết định số /QĐ CĐN ngày t[.]
ỦY BAN NHÂN DÂN TỈNH AN GIANG TRƯỜNG CAO ĐẲNG NGHỀ AN GIANG GIÁO TRÌNH Mơ đun: THIẾT KẾ WEBSITE NGHỀ: THIẾT KẾ ĐỒ HỌA Trình độ : Trung cấp (Ban hành theo Quyết định số: /QĐ-CĐN ngày tháng năm 20 Hiệu trưởng trường Cao đẳng nghề An Giang) An Giang, Năm ban hành : 2021 TUYÊN BỐ BẢN QUYỀN Tài liệu thuộc loại sách giáo trình nên nguồn thơng tin phép dùng ngun trích dùng cho mục đích đào tạo tham khảo Mọi mục đích khác mang tính lệch lạc sử dụng với mục đích kinh doanh thiếu lành mạnh bị nghiêm cấm LỜI GIỚI THIỆU Ngày nay, phát triển Internet ảnh hưởng lớn tới ngành CNTT Internet mở nhiều hội tốt cho nhà lập trình phát triển ứng dụng Web nhà thiết kế Web Song song với phát triển đó, thiết kế web có phát triển việc cải tiến kỹ thuật thiết kế Với hỗ trợ máy tính cơng nghệ phần mềm giúp thực việc thiết kế trang web nhanh chóng, hiệu chuyên nghiệp Tài liệu thiết kế theo mô đun/ môn học thuộc hệ thống mơ đun/mơn học chương trình để đào tạo hồn chỉnh nghề Lập trình máy tính dùng làm giáo trình cho học viên khóa đào tạo, sử dụng cho đào tạo ngắn hạn cho công nhân kỹ thuật Trong trình biên soạn, cố gắng tham khảo nhiều tài liệu giáo trình khác tác giả không khỏi tránh thiếu sót hạn chế Tác giả chân thành mong đợi nhận xét, đánh giá góp ý để giáo trình ngày hồn thiện Nội dung mô đun: Bài 1: Tổng quan thiết kế website Ngôn ngữ HTML Bài 2: Macromedia Dreamweaver Bài 3: CSS Bài 4: Java Script An Giang, ngày tháng năm 2021 Tham gia biên soạn Vương Thị Minh Nguyệt MỤC LỤC ĐỀ MỤC TRANG LỜI GIỚI THIỆU MỤC LỤC CHƯƠNG TRÌNH MƠ ĐUN BÀI 1: TỔNG QUAN THIẾT KẾ WEBSITE VÀ NGÔN NGỮ HTML I Tổng quan thiết kế website II Ngôn ngữ HTML Bài tập 15 BÀI 2: MACROMEDIA DREAMWEAVER 16 I Giới thiệu phần mềm Dreamweaver 16 II Quản lý thao tác website 18 III Định dạng văn 19 IV Bảng biệu 22 V Tạo liên kết 26 VI Form thành phần form 29 VII Frame 39 Bài tập 42 BÀI 3: CSS 43 I Giới thiệu CSS 43 II Các thuộc tính CSS 46 Bài tập 49 BÀI 4: JAVASCRIPT 50 I Tổng quan JavaScript 50 II Cú pháp Javascript 51 III Hàm Javascript 56 Bài tập 66 TÀI LIỆU THAM KHẢO 67 CHƯƠNG TRÌNH MƠ ĐUN Tên mơ đun: THIẾT KẾ WEBSITE Mã mô đun: MĐ 19 Thời gian thực mô đun: 120 (Lý thuyết: 40 giờ, thực hành 77 giờ, kiểm tra: giờ) I VỊ TRÍ, TÍNH CHẤT CỦA MƠ ĐUN Vị trí: - Thuộc nhóm mơn: Chun ngành - Được bố trí sau mơn: Tin học văn phịng, Xử lý ảnh với Photoshop Tính chất: Mơ đun làm sở cho sinh viên – học sinh có kỹ thiết kế trang web hoàn chỉnh Ý nghĩa, vai trị mơn học: mơn học giúp cho người học xây dựng tất thành phần mà trang web cần phải có như: giao diện, bố cục, màu sắc, sau xếp thành giao diện website hồn chỉnh có tính thẩm mỹ, đẹp mắt, dễ sử dụng II MỤC TIÊU CỦA MÔ ĐUN Về kiến thức: - Định hướng cách thiết kế Website - Nêu ứng dụng thẻ HTML - Tổ chức thông tin trang chủ web - Định hướng cách liên kết đến trang web - Đưa ý tưởng giao diện - Có khả sử dụng dụng thẻ HTML - Trình bày cơng dụng dịch vụ IIS Về kỹ năng: - Sử dụng thẻ HTML để thiết kế trang web - Thiết kế giao diện trang website - Sử dụng thành thạo công cụ thiết kế Web - Cài đặt, cấu hình dịch vụ IIS - Lập trình trang web Về lực tự chủ trách nhiệm: - Làm việc nhóm, tăng tính chia sẻ làm việc cộng đồng III NỘI DUNG MÔ ĐUN Nội dung tổng quát phân bố thời gian: Thời gian (giờ) Thực Tên hành, thí TT Tổng Lý Kiểm mơ đun nghiệm, số thuyết tra thảo luận, tập Bài 1: Tổng quan thiết kế website 20 12 Ngôn ngữ HTML I Tổng quan thiết kế website II Ngôn ngữ HTML Bài 2: Macromedia Dreamweaver 36 12 23 I Giới thiệu phần mềm Dreamweaver II Quản lý thao tác website III Định dạng văn IV Bảng biểu V Tạo liên kết VI Form thành phần form VII Frame Kiểm tra Bài 3: CSS 36 12 23 I Giới thiệu CSS II Các thuộc tính CSS Kiểm tra Bài 4: JavaScript 24 15 I Tổng quan JavaScript II Cú pháp JavaScript III Hàm JavaScript Kiểm tra Ôn tập 4 120 40 77 Cộng Nội dung chi tiết: Bài 1: Tổng quan thiết kế website Ngôn ngữ HTML Thời gian: 20 A Mục tiêu bài: - Trình bày kiến thức Internet Website - Giới thiệu công cụ hỗ trợ thiết kế Webste - Sử dụng ngôn ngữ HTML để thiết kế Website B Nội dung bài: I Tổng quan thiết kế website II Ngôn ngữ HTML Bài 2: Macromedia Dreamweaver Thời gian: 36 A Mục tiêu bài: - Thực số thao tác phần mềm Internet Information Services để kết nối chạy trang web localhost - Sử dụng thành thạo chức năng, công cụ phần mềm tạo web Macromedia DreamWeaver để tạo trang web tĩnh gồm đầy đủ thành phần văn bản, hình ảnh, âm thanh…và số tích hợp hiệu ứng khác B Nội dung bài: I Giới thiệu phần mềm Dreamweaver II Quản lý thao tác website III Định dạng văn IV Bảng biểu V Tạo liên kết VI Form thành phần form VII Frame Kiểm tra Bài 3: CSS Thời gian: 36 A Mục tiêu - Giới thiệu ngơn ngữ hỗ trợ cách thức trình bày Website CSS - Sử dụng ngôn ngữ CSS/CSS3 kết hợp với HTML để thiết kế Website web hoàn chỉnh B Nội dung I Giới thiệu CSS II Các thuộc tính CSS Kiểm tra Bài 4: JavaScript Thời gian: 24 A Mục tiêu - Sử dụng ngôn ngữ Javascript kết hợp với HTML, CSS để thiết kế Website - Hiểu nắm nguyên tắc hoạt động trang Asp - Biết cách khai báo biến, biết sử dụng cấu trúc điều khiển, hàm sử dụng đối tượng xây dựng sẵn Asp để lập trình trang web nhằm tính tốn, phục vụ mục tiêu cụ thể ngôn ngữ JavaScript B Nội dung I Tổng quan JavaScript II Cú pháp JavaScript III Hàm JavaScript Kiểm tra Ôn tập Thời gian: BÀI TỔNG QUAN VỀ THIẾT KẾ WEBSITE – NGÔN NGỮ HTML Giới thiệu HTML Tim Berner Lee phát minh W3C (World Wide Web Consortium) đưa thành chuẩn năm 1994 Mục tiêu Học xong học viên có khả năng: - Trình bày kiến thức Internet Website - Giới thiệu công cụ hỗ trợ thiết kế Webste - Sử dụng ngôn ngữ HTML để thiết kế Website Nội dung I TỔNG QUAN VỀ THIẾT KẾ WEBSITE CÁC KHÁI NIỆM CƠ BẢN: - Internet mạng máy tính tồn cầu máy truyền thông với theo ngôn ngữ chung TCP/IP - Intranet mạng cục khơng nối vào Internet cách truyền thông chúng theo ngơn ngữ chung TCP/IP - Mơ hình Client-Server: mơ hình khách-chủ Server chứa tài ngun dùng chung cho nhiều máy khách(Client) tập tin, tài liệu, máy in… Ưu điểm mơ hình tiết kiệm thời gian, tài chính, dễ quản trị hệ thống…Cách hoạt động mơ hình máy Server trang thái hoạt động(24/24) chờ yêu cầu từ phía Client Khi Client u cầu máy Server đáp ứng yêu cầu - Internet Server Server cung cấp dịch vụ Internet(Web Server, Mail Server, FTP Server…) - Internet Service Provider(ISP): Là nơi cung cấp dịch vụ Internet cho khách hàng Mỗi ISP có nhiều khách hàng có nhiều loại dịch vụ Internet khác - Internet Protocol : Các máy sử dụng mạng Internet liên lạc với theo tiêu chuẩn truyền thông gọi Internet Protocol (IP) IP Address-địa IP: để việc trao đổi thông tin mạng Internet thực máy mạng cần phải định danh để phân biệt với máy khác Mỗi máy tính mạng định danh nhóm số gọi địa IP Địa IP gồm số thập phân có giá từ đến 255 phân cách dấu chấm Ví dụ 192.168.0.1 Địa IP có giá trị toàn mạng Internet Uỷ ban phân phối địa IP giới phân chia nhóm địa IP cho quốc gia khác Thông thường địa IP quốc gia quan bưu điện quản lý phân phối lại cho ISP Một máy tính thâm nhập vào mạng Internet cần có địa IP Địa IP cấp tạp thời cấp vĩnh viễn Thông thường máy Client kết nối vào mạng Internet thông qua ISP đường điện thoại Khi kết nối, ISP cấp tạm thời IP cho máy Client - Phương thức truyền thông tin Internet: Khi máy tính có địa IP x(máy X) gửi tin đến máy tính có địa IP y (máy Y) phương thức truyền tin diễn sau: Nếu máy X máy Y nằm mạng thơng tin gửi trực tiếp Còn máy X Y khơng nằm mạng thơng tin chuyển tới máy trung gian có đường thông với mạng khác chuyển tới máy Y Máy trung gian gọi Gateway - World Wide Web(WWW): dịch vụ phổ biến Internet Dịch vụ đưa cách truy xuất tài liệu máy phục vụ dễ dàng thông qua giao tiếp đồ họa Để sử dụng dịch vụ máy Client cần có chương trình gọi Web Browser - Web Browser (trình duyệt): trình duyệt Web Dùng để truy xuất tài liệu Web Server Các trình duyệt Internet Explorer, Nestcape - Home page: trang web web site - Hosting provider: công ty tổ chức đưa trang lên web - Hyperlink : tên khác hypertextlink - Publish: làm cho trang web chạy mạng - URL (Unioform resource locator): địa chỉ đến file cụ thể nguồn tài nguyên mạng Mỗi nguồn web có địa khó nhớ Vì vậy, người ta sử dụng URL chuỗi cung cấp địa Internet web site nguồn World Wide Web Định dạng đặc trưng là: www.nameofsite.typeofsite.countrycode Ví dụ: 207.46.130.149 biểu diễn URL www.microsoft.com URL nhận biết giao thức site nguồn truy cập Giao thức thông thường “http”, vài dạng URL khác “gopher”, cung cấp địa Internet thư mục Gopher, “ftp”, cung cấp vị trí mạng nguồn FTP Có hai dạng URL: URL tuyệt đối – địa Internet đầy đủ trang file, bao gồm giao thức, vị trí mạng, đường dẫn tuỳ chọn tên file Ví dụ, http:// www.microsoft.com/ms.htm URL tương đối - mô tả ngắn gọn địa tập tin kết nối có đường dẫn với tập tin hành, URL tương đối đơn giản bao gồm tên phần mở rộng tập tin Ví dụ: index.html - Web server chương trình đáp ứng lại yêu cầu truy xuất tài nguyên từ trình duyệt GIỚI THIỆU KHÁI QUÁT VỀ WEB - Web ứng dụng chạy mạng(Client-Server), chia sẻ khắp toàn cầu - Trang web file văn chứa tag HTML đọan mã đặc biệt mà trình duyệt web (Web browser) hiểu thông dịch được, file lưu với phần mở rộng html htm - HTML (HyperText Markup Language), gồm đoạn mã chuẩn quy ước để thiết kế Web hiển thị trình duyệt Web (Web Browser) Hypertext (Hypertext link), từ hay cụm từ đặc biệt dùng để tạo liên kết trang web Markup: cách định dạng văn để trình duyệt hiểu thông dịch Language: không ngôn ngữ lập trình, mà tập nhỏ quy luật để định dạng văn trang web - Trình soạn thảo trang web :Có thể soạn thảo web trình soạn thảo văn Các trình soạn thảo phổ biến là: Notepad, FrontPage Dreamweaver II NGÔN NGỮ HTML Tag HTML câu lệnh nằm cặp tag “”, dùng để định dạng văn trang web Dạng chung tag HTML là: Object Trong đó: – TagName : tên tag HTML, viết liền với dấu “< “, khơng có khoảng trắng – Object : đối tượng cần định dạng trang Web – ListPropeties danh sách thuộc tính Tag, đặc điểm bổ sung vào cho tag, thứ tự thuộc tính tag tuỳ ý Nếu có từ thuộc tính trở lên thuộc tính cách khoảng trắng Object – Giá trị thuộc tính đặt nháy đơn ‘ nháy đơi “.(có thể bỏ qua) – : gọi tag mở – : gọi tag đóng Thơng thường tag có tag đóng Tuy nhiên có số tag khơng có tag đóng Ví dụ : nội dung TagName(mở Properties TagName(đ ón – Có thể có nhiều tag lồng vào nhau, theo nguyên tắc tag mở trước tag đóng sau Ví dụ: Object Object1Object2 – Trong trang HTML, tag bị sai nội dung bên Tag khơng hiển thị trình duyệt CẤU TRÚC CƠ BẢN CỦA TRANG WEB: a Cấu trúc trang web – Phần đầu(): phần chứa thông tin trang Web – Phần thân (): phần chứa nội dung trang Web – Phần đầu phần thân đặt cặp tag Nội dung thông tin trang web Nội dung hiển thị trình duyệt b Hiển thị trang web: – Khởi động trình duyệt Internet Explorer – Chọn menu file,open, dùng browse tìm tập tin html tạo – Hoặc double click vào tên tập tin htm c Các tag HTML : Hiển thị nội dung tiêu đề trang web tiêu đề trình duyệt – Cặp tag đặt phần trang HTML – Cú pháp: Nội dung tiêu đề : Tạo header, gồm cấp header, đặt phần BODY – Cú pháp: Nội dung Header Trong đó: – Direction: gồm giá trị left, right, center, dùng để canh lề cho header, mặc định canh trái – Ví dụ: Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6– Dùng để ngắt đoạn bắt đầu đoạn – Cú pháp:
Nội dung đoạn
– Tag không bắt buộc – Tagtự động bắt đầu đoạn – Ngắt dịng vị trí của tag Ví dụ:
Mary had a little lamb It’s fleece was white as snow ... quan thiết kế website Ngôn ngữ HTML Thời gian: 20 A Mục tiêu bài: - Trình bày kiến thức Internet Website - Giới thiệu công cụ hỗ trợ thiết kế Webste - Sử dụng ngôn ngữ HTML để thiết kế Website. .. - Trình bày kiến thức Internet Website - Giới thiệu công cụ hỗ trợ thiết kế Webste - Sử dụng ngôn ngữ HTML để thiết kế Website Nội dung I TỔNG QUAN VỀ THIẾT KẾ WEBSITE CÁC KHÁI NIỆM CƠ BẢN: -... lập trình phát triển ứng dụng Web nhà thiết kế Web Song song với phát triển đó, thiết kế web có phát triển việc cải tiến kỹ thuật thiết kế Với hỗ trợ máy tính cơng nghệ phần mềm giúp thực việc thiết