Giáo Trình Thiết Kế Web Dành Cho Ngành Công Nghệ Thông Tin Trình Độ Trung Cấp

Giáo trình nghiên cứu thiết kế web ngànhnghề công nghệ thông tin trình độ trung cấp, trình bày lý thuyết rõ ràng, minh họa ví dụ thực tế, phù hợp sinh viên kỹ thuật.

Chuyên ngành

Công Nghệ Thông Tin

Người đăng

Ẩn danh

Thể loại

Giáo trình

2019

81
1
0

Phí lưu trữ

30 Point

Mục lục chi tiết

1. CHƯƠNG 1: GIỚI THIỆU VỀ WEB

1.1. CÁC KHÁI NIỆM CƠ BẢN

1.2. GIỚI THIỆU KHÁI QUÁT VỀ WEB

1.3. CẤU TRÚC CƠ BẢN CỦA TRANG WEB

1.4. HIỂN THỊ TRANG WEB

1.5. CÁC TAG HTML CƠ BẢN

1.6. MỘT SỐ THẺ ĐẶC BIỆT (THAM KHẢO)

1.7. MỘT SỐ THAO TÁC TRONG CỬA SỔ TRÌNH DUYỆT (THAM KHẢO)

2. CHƯƠNG 2: HYPERLINK – HÌNH ẢNH

2.1. GIỚI THIỆU HYPERLINK

2.2. HÌNH ẢNH TRÊN TRANG WEB

3. CHƯƠNG 3: DANH SÁCH

3.1. DANH SÁCH KHÔNG CÓ THỨ TỰ (UNORDER LIST-UL)

3.2. DANH SÁCH CÓ THỨ TỰ (ORDER LIST-OL)

3.3. DANH SÁCH ĐỊNH NGHĨA

4. CHƯƠNG 4: BẢNG VÀ TRÌNH BÀY TRANG

4.1. THUỘC TÍNH CỦA BẢNG

4.2. THUỘC TÍNH CỦA CỘT

4.3. TRÌNH BÀY TRANG

5. CHƯƠNG 5: FORM

5.1. GIỚI THIỆU FORM

5.2. SỬ DỤNG FORM

5.3. CÁC PHẦN TỬ CỦA FORM

5.4. TEXTAREA: HỘP VĂN BẢN CHO PHÉP NHẬP NHIỀU DÒNG

5.5. NHÃN: DÙNG ĐỂ TẠO NHÃN LIÊN KẾT VỚI THÀNH PHẦN ĐI KÈM

5.6. FIELDSET: NHÓM CÁC ĐỐI TƯỢNG GIỐNG NHAU VÀO MỘT PHẦN LOGIC

5.7. ĐIỀU KHIỂN CÁC PHẦN TỬ TRÊN FORM

6. CHƯƠNG 6: CASCADING STYLE SHEET-CSS

6.1. GIỚI THIỆU VỀ CSS

6.2. ĐỊNH BẢNG MẪU CHO LỚP (CLASS)

6.3. ĐỊNH CÁC TAG RIÊNG BIỆT

6.4. TẠO CÁC TAG CHUNG

6.5. TẠO TAG CẤP KHỐI TÙY Ý

6.6. TẠO CÁC TAG TRONG HÀNG TÙY Ý

6.7. CÁC THUỘC TÍNH ĐỊNH DẠNG VĂN BẢN

6.8. ĐỊNH DẠNG DANH SÁCH

6.9. ĐỊNH DẠNG MÀU NỀN

6.10. ĐỊNH DẠNG HYPERTEXT LINK

7. CHƯƠNG 7: GIỚI THIỆU DREAMWEAVER

7.1. MÀN HÌNH DREAMWEAVER

7.2. KẾ HOẠCH THIẾT KẾ MỘT WEBSITE

7.3. CÁC YÊU CẦU CƠ BẢN KHI THIẾT KẾ WEBSITE

7.4. THAO TÁC TẠO BỘ WEB CƠ BẢN

7.5. THIẾT KẾ CÁC TRANG WEB ĐƠN

7.6. TẠO LIÊN KẾT CÁC TRANG WEB ĐƠN THÀNH MỘT WEBSITE

8. CHƯƠNG 8: ĐỊNH DẠNG VĂN BẢN - SỬ DỤNG CSS

8.1. ĐỊNH DẠNG VĂN BẢN

8.2. SỬ DỤNG CSS (CASCADING STYLE SHEETS)

9. CHƯƠNG 9: HÌNH ẢNH VÀ HYPERLINK TRONG DW

9.1. CHÈN HÌNH ẢNH TRONG TRANG WEB

9.2. CHÈN ẢNH VÀO TRANG

9.3. HIỆU CHỈNH THUỘC TÍNH CỦA ẢNH

9.4. CHÈN KHUNG ẢNH

9.5. INSERT ROLLOVER IMAGE: CHÈN ẢNH KHI RÊ CHUỘT VÀO

9.6. ẢNH NỀN TRANG

9.7. LIÊN KẾT TRANG TRONG DREAMWEAVER

10. CHƯƠNG 10: BẢNG VÀ TRÌNH BÀY TRANG TRONG DW

10.1. HIỆU CHỈNH BẢNG

10.2. THUỘC TÍNH CỦA BẢNG

10.3. TRÌNH BÀY TRANG

10.4. LAYOUT TABLE VÀ LAYOUT CELL

10.5. THUỘC TÍNH CỦA LAYOUT TABLE VÀ LAYOUT CELL

10.6. TẠO MỚI MỘT TEMPLATE

10.7. HIỆU CHỈNH TEMPLATE

Tài liệu tham khảo

Tóm tắt

I. Tổng quan về Giáo Trình Thiết Kế Web Ngành Công Nghệ Thông Tin

Giáo trình "Thiết kế web" được biên soạn nhằm phục vụ cho việc giảng dạy và học tập trong lĩnh vực Công nghệ thông tin. Tài liệu này không chỉ dành cho sinh viên mà còn cho các lập trình viên tại doanh nghiệp. Nội dung giáo trình bao gồm 10 chương, từ giới thiệu về web đến các kỹ thuật thiết kế nâng cao.

1.1. Mục tiêu của giáo trình thiết kế web

Mục tiêu chính của giáo trình là giúp người học nắm vững các khái niệm cơ bản về HTML/CSS, cũng như quy trình thiết kế một trang web hoàn chỉnh.

1.2. Cấu trúc của giáo trình

Giáo trình được chia thành 10 chương, mỗi chương tập trung vào một khía cạnh khác nhau của thiết kế web, từ cơ bản đến nâng cao.

II. Những thách thức trong việc học thiết kế web

Học thiết kế web không chỉ đơn thuần là việc nắm vững ngôn ngữ lập trình mà còn phải đối mặt với nhiều thách thức. Các vấn đề như Responsive designUX/UI design là những yếu tố quan trọng cần được chú ý.

2.1. Khó khăn trong việc nắm bắt công nghệ mới

Công nghệ web luôn thay đổi, việc cập nhật kiến thức mới là một thách thức lớn cho sinh viên và lập trình viên.

2.2. Tính cạnh tranh trong ngành công nghệ thông tin

Ngành công nghệ thông tin ngày càng cạnh tranh, yêu cầu người học phải có kỹ năng và kiến thức vững vàng để nổi bật.

III. Phương pháp học hiệu quả trong thiết kế web

Để học thiết kế web hiệu quả, cần áp dụng các phương pháp học tập phù hợp. Việc thực hành thường xuyên và tham gia các khóa học trực tuyến là rất cần thiết.

3.1. Thực hành qua dự án thực tế

Thực hành qua các dự án thực tế giúp người học áp dụng lý thuyết vào thực tiễn, từ đó nâng cao kỹ năng lập trình.

3.2. Tham gia cộng đồng lập trình viên

Tham gia các diễn đàn và nhóm học tập giúp người học trao đổi kiến thức và kinh nghiệm với nhau.

IV. Ứng dụng thực tiễn của thiết kế web trong ngành công nghệ thông tin

Thiết kế web có ứng dụng rộng rãi trong nhiều lĩnh vực khác nhau, từ thương mại điện tử đến giáo dục trực tuyến. Việc nắm vững kỹ năng này sẽ mở ra nhiều cơ hội nghề nghiệp.

4.1. Thiết kế web cho doanh nghiệp

Nhiều doanh nghiệp hiện nay cần một trang web chuyên nghiệp để quảng bá sản phẩm và dịch vụ của họ.

4.2. Ứng dụng trong giáo dục

Giáo dục trực tuyến đang trở thành xu hướng, việc thiết kế web cho các nền tảng học tập là rất quan trọng.

V. Kết luận và tương lai của thiết kế web

Thiết kế web sẽ tiếp tục phát triển và đóng vai trò quan trọng trong ngành công nghệ thông tin. Việc nắm vững các kỹ năng thiết kế web sẽ giúp người học có được nhiều cơ hội trong tương lai.

5.1. Xu hướng tương lai trong thiết kế web

Các công nghệ mới như trí tuệ nhân tạo và thực tế ảo sẽ ảnh hưởng đến cách thiết kế web trong tương lai.

5.2. Cơ hội nghề nghiệp trong ngành công nghệ thông tin

Ngành công nghệ thông tin sẽ tiếp tục phát triển, tạo ra nhiều cơ hội việc làm cho những người có kỹ năng thiết kế web.

24/07/2025
Giáo trình thiết kế web ngànhnghề công nghệ thông tin trình độ trung cấp

Trích đoạn nội dung tài liệu

CHƯƠNG 1: GIỚI THIỆU VỀ WEB I. CÁC KHÁI NIỆM CƠ BẢN − Internet là một mạng máy tính toàn cầu trong đó các máy truyền thông với nhau theo một ngôn ngữ chung là TCP/IP. − Intranet đó là mạng cục bộ không nối vào Internet và cách truyền của chúng cũng theo ngôn ngữ chung là TCP/IP. − Mô hình Client-Server: là mô hình khách-chủ, Server chứa tài nguyên dùng chung cho nhiều máy khách (Client) như các tập tin, tài liệu, máy in.

Ưu điểm của mô hình này là tiết kiệm về thời gian, tài chính, dễ quản trị hệ thống. Cách hoạt động của mô hình này là máy Server ở trạng thái hoạt động (24/24) và chờ yêu cầu từ phía Client. Khi Client yêu cầu thì Server đáp ứng yêu cầu đó. − Internet Server là các Server cung cấp các dịch vụ Internet(Web Server, Mail Server, FTP Server.) − Internet Service Provider (ISP): là nơi cung cấp các dịch vụ Internet cho khách hàng.

Mỗi ISP có nhiều khách hàng và có thể có nhiều loại dịch vụ Internet khác nhau. − Internet Protocol: Các máy sử dụng trong mạng internet liên lạc với nhau theo một tiêu chuẩn truyền thông gọi là Internet Protocol (IP). IP Address-địa chỉ IP: để việc trao đổi thông tin trong mạng internet thực hiện được thì mỗi máy trong mạng cần phải định danh để phân biệt với các máy khác. Mỗi máy tính trong mạng được định danh bằng một nhóm các số được gọi là địa chỉ IP.Địa chỉ IP gồm 4 số thập phân có giá trị từ 0 đến 255 và được phân cách nhau bởi dấu chấm.1 Địa chỉ IP này có giá trị trong toàn mạng Internet.

Ủy ban phân phối địa chỉ IP của thế giới sẽ phân chia các nhóm địa chỉ IP cho các quốc gia khác nhau. Thông thường địa chỉ IP của một quốc gia do các cơ quan bưu điện quản lý và phân phối lại cho các ISP. Một máy tính khi thâm nhập vào mạng Internet cần có một địa chỉ IP. Địa chỉ IP có thể cấp tạm thời hoặc vĩnh viễn.

Thông thường các máy Client kết nối vào mạng Internet thông qua một ISP bằng đường điện thoại. Khi kết nối, ISP sẽ cấp tạm thời một IP cho máy Client. − Phương thức truyền thông tin trong Internet: Khi một máy tính có địa chỉ IP là x(máy x) gửi tin đến máy tính có địa chỉ IP là y (máy Y) thì phương thức truyền tin cơ bản diễn ra như sau: Nếu máy X và máy Y cùng nằm trên một mạng con thì thông tin sẽ được gửi đi trực tiếp. Còn máy X và Y không cùng nằm trong mạng con thì thông tin sẽ được chuyển tới một máy trung gian có đường thông với các mạng khác rồi mới chuyển tới máy Y.

Máy trung gian này gọi là Gateway − World Wide Web (WWW): là một dịch vụ phổ biến nhất hiện nay trên Internet. Dịch vụ này đưa ra cách truy xuất các tài liệu của các máy phục vụ dễ dàng thông qua các giao tiếp đồ họa. Để sử dụng dịch vụ này máy Client cần có một chương trình gọi là Web Browser. − Web Brower(trình duyệt): là trình duyệt web.

Dùng để truy xuất các tài liệu trên các Web Server. Các trình duyệt hiện nay là Internet Explorer, Nestcape − Home page: là trang web đầu tiên trong web site − Hosting provider: là công ty hoặc tổ chức đưa các trang của chúng ta lên web − Hyperlink: tên khác của hyperlink − Publish: làm cho trang web chạy trên mạng − URL (Unioform resource locator): một địa chỉ chỉ đến một file cụ thể trong nguồn tài nguyên mạng. ▪ Mỗi nguồn trên web có duy nhất một địa chỉ rất khó nhớ. Vì vậy, người ta sử dụng URL là một chuỗi cung cấp địa chỉ internet của một web site hoặc nguồn trên World Wide Web.

Định dạng đặc trưng là: www.149 được biểu diễn trong URL là www.com ▪ URL cũng nhận biết giao thức của site hoặc nguồn được truy cấp. Giao thức thông thường nhất là “http”, một vài dạng URL khác là “gopher”, cung cấp địa chỉ internet của một thư mục Gopher, và “ftp”, cung cấp vị trí mạng của nguồn FTP. ▪ Có hai dạng URL: ✓ URL tuyệt đối: là địa chỉ internet đầy đủ của một trang hoặc file, bao gồm giao thức, vị trí mạng, đường dẫn tùy chọn và tên file. Ví dụ : http://www.

✓ URL tương đối: mô tả ngắn gọn địa chỉ tập tin kết nối có cùng đường dẫn với tập tin hiện hành, URL tương đối đơn giản bảo gồm tên và phần mở rộng của tập tin Ví dụ: index.html − Web server là một chương trình đáp ứng lại các 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 là một ứng dụng chạy trên mạng(Client-Server), được chia sẻ khắp toàn cầu. − Trang web là một file văn bản chứa những tap HTML hoặc những đoạn mã đặc biệt mà trình duyệt web (Web browser) có thể hiểu và thông dịch được, file được lưu với phần mở rộng là .html hoặc htm. − HTML (HyperText Markup Language), gồm các đoạn mã chuẩn được quy ước để thiết kế Web và được hiển thị bởi trình duyệt Web (Web Browser) ▪ Hypertext (Hypertext link): là một từ hay một cụm từ đặc biệt dùng để tạo liên kết giữa các trang web.

▪ Markup : là cách định dạng văn bản để trình duyệt hiểu và thông dịch được. ▪ Language: đây không là ngôn ngữ lập trình, mà chỉ là tập nhỏ những quy luật để định dạng văn bản trên trang web. − Trình soạn thảo trang web: Có thể soạn thảo web trên bất kỳ trình soạn thảo văn bản nào. Các trình soạn thảo phổ biến hiện nay là: Notepad, FontPage hoặc Dreamweaver.

TAG HTML − Tap HTML là những câu lệnh nằm giữa cặp tag “<” và “>” dùng để định dạng các văn bản trên trang web. Dạng chung của một tap HTML là: <tagName ListProperties> Object </tagName> Trong đó: ▪ Tage Name: là tên một tag HTML, viết liền với dấu “<”, không có khoảng trắng. ▪ Object: là đối tượng cần định dạng trong trang web ▪ ListPropeties: là danh sách các thuộc tính của tap, là những đặc điểm bổ sung vào cho một tap, thứ tự các thuộc tính trong một tag là tùy ý. Nếu có từ 2 thuộc tính trở lên thì mỗi thuộc tính cách nhau bở khoảng trắng.

<tagName property1=’value1’ property2=“value2”… > Object </tagName> − Giá trị của thuộc tính được đặt trong nháy đơn ‘ hoặc nháy “. − <TagName>: gọi là tag mở − </TagName>: gọi là tag đóng. Thông thường thì các tag đều có tag đóng. Tuy nhiên có một số tag không có tag đóng Ví dụ : <body BGCOLOR=’blue’>nội dung </body> Tag mở Property tag đóng − Có thể có nhiều tag lồng vào nhau, theo nguyên tắc tag nào mở trước thì tag đó đóng sau Ví dụ : <Tag1><Tag2>Object</Tag2></Tag1> <B>Object1<I>Object2</I></B> − Trong trang HTMT, nếu một tag bị sai thì nội dung bên trong Tag đó không hiển thị trên trình duyệt.

CẤU TRÚC CƠ BẢN CỦA TRANG WEB 1. CẤU TRÚC TRANG WEB: − Phần đầu (<Head></Head>): là phần chứa thông tin của trang Web − Phần thân (<Body></Body>): là phần chứa nội dung của trang Web − Phần đầu và phần thân được đặt trong cặp tag <HTML></HTML> <HTML> <Head>Nội dung thông tin của trang web. </Head> <Body> Nội dung hiển thị của trình duyệt. HIỂN THỊ TRANG WEB: − Cách 1: • Khởi động trình duyệt web • Chọn đường dẫn đến file html vừa tạo − Cách 2: Trong giao diện dreamweaver, ta click vào V.

CÁC TAG HTML CƠ BẢN 1. <Title>: hiển thị nội dung tiêu đề của trang web, được đặt trong phần head − Cú pháp: <TITLE>nội dung tiêu đề</TITLE> 2. <Hn>: tạo header gồm 6 cấp được đặt trong phần body − Cú pháp: <Hn Align=”Direction”>nội dung của Header</Hn> − Trong đó : Direction : gồm các giá trị left, right, center, dùng để canh lề cho Header, mặc định là canh trái. − Ví dụ : <H1> Heading 1 </H1> <H2> Heading 2 </H2> <H3> Heading 3 </H3> <H4> Heading 4 </H4> <H5> Heading 5 </H5> <H6> Heading 6 </H6> 3.

<P>: dùng để ngắt đoạn và bắt đầu đoạn mới. − Cú pháp: <P Align=’Direction’>Nội dung của đoạn</P> − Tag </p> không bắt buộc − Tag <p> kết tiếp sẽ tự động bắt đầu bằng một đoạn mới. <BR>: Ngắt dòng tại vị trí của tag. − Ví dụ : <p> Mary had a little lamb <br> It’s fleece was white as snow <br> </p> 5.

<HR>:dùng để kẻ đường ngang trang, không có tag đóng − Cú pháp: <BR Align=’direction’ Width=’value’ Size=’value’ color=’#rrggbb’ − Trong đó: • Direction: gồm các giá trị left, right, center • Width: độ dài đường kẻ, tính bằng Pixel hoặc % • Size: độ dày của đường kẻ, tính bằng pixel • Color: màu đường kẻ, có thể dùng tên màu hoặc dùng mã #rrggbb − Ví dụ : <HTML> <HEAD><TITLE>Welcome to HTML</TITLE></HEAD> <BODY> <H3> May first HTML document </H3> <HR size = 5 align = center width = 50%> <HR size = 15 align = left width = 80% > <P> This is going to be real fun </BODY> </HTML> 6. <FONT>: dùng để định dạng font chữ. − Dùng định dạng font chữ − Định dạng Font chữ cho cả tài liệu thì đặt tag <Font> trong phần <Body> − Định dạng từng phần hoặc từng từ thì đặt vị trí muốn định dạng. − Cú pháp: <font Face=’fontname1, fontname2,…’ Size=’value’ Color=#rrggbb> Nội dung hiển thị </font> − Ví dụ: <HTML> <HEAD> <TITLE>Welcome to HTML</TITLE> </HEAD> <BODY> <FONT SIZE = 3 COLOR = HOTPINK FACE = Arial> My first HTML document </FONT> <P>This is<FONT COLOR=BLUE SIZE=6>going </FONT> to be real fun </BODY> </HTML> 7.

<BODY>: Chứa nội dung của trang web. − Cú pháp: <Body> Nội dung chính của trang web. </Body> − Các thuộc tính của <Body> • BgColor: thiết lập màu nền của trang • Text: thiết lập màu chữ • Link: màu của siêu liên kết • Vlink: màu của siêu liên kết đã xem qua • Background: dùng load một hình làm nền cho trang • LeftMargin: Canh lề trái • TopMargin: Canh lề trên của trang − Ví dụ: <HTML> <HEAD><TITLE>Learning HTML</TITLE></HEAD> <BODY BGCOLOR=“#0000FF“ text =“yellow“> <FONT COLOR = LIMEGREEN> Welcome to HTML</FONT> </BODY> </HTML> − Màu sắc: • Internet Explorer có thể xác lập 16 màu theo tên như sau: Black, Silver, Gray, White, Maroon, Red, Purple, Fuchsia, Green, Lime, Olive Yellow, Navy, Blue, Teal, Aqua. • Một số mã thập lục phân của màu: #RRGGBB Mã thập lục phân Màu #FF0000 RED #0000FF BLUE #000000 BLACK #FFFFFF WHITE 8.

<IMG>: dùng để chèn hình ảnh vào trang web. <IMG src=’URL’ alt=’Text’ width=’value’ height=’value’ border=’value’></IMG> − Src: xác định đường dẫn tập tin cần load, sử dụng đường dẫn tương đối <Img src=“.gif> − Alt: chứa nội dung văn bản thay thế cho hình ảnh khi hình không load về được, nếu load về được thì sẽ xuất hiện nội dung trong textbox mỗi khi người dùng đưa chuột tới hình. − Width, Height: dùng để xác định chế độ phóng to thu nhỏ hình ảnh. − Align:“left/right/top/bottom“: so hàng giữa hình ảnh và text.

<BgSound>: − Dùng để chèn một âm thanh vào trang web.

Nội dung được bảo vệ bản quyền — Tải xuống đầy đủ