Giáo trình Thiết kế website (Nghề: Thiết kế đồ hoạ - Cao đẳng) - Trường Cao đẳng nghề Đồng Tháp

Chia sẻ: _ _ | Ngày: | Loại File: PDF | Số trang:75

Thêm vào BST

Báo xấu

43
lượt xem 11
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Giáo trình Thiết kế website nghề Thiết kế đồ hoạ cung cấp cho người học những kiến thức như: Tổng quan về WWW – Ngôn ngữ HTML; Thiết kế web tĩnh; Thiết kế web động. Mời các bạn cùng tham khảo!

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Giáo trình Thiết kế website (Nghề: Thiết kế đồ hoạ - Cao đẳng) - Trường Cao đẳng nghề Đồng Tháp

UỶ BAN NHÂN DÂN TỈNH ĐỒNG THÁP TRƯỜNG CAO ĐẲNG NGHỀ ĐỒNG THÁP GIÁO TRÌNH MÔ ĐUN: THIẾT KẾ WEBSITE NGÀNH, NGHỀ: THIẾT KẾ ĐỒ HỌA TRÌNH ĐỘ: CAO ĐẲNG (Ban hành kèm theo Quyết định Số: /QĐ-CĐCĐ-ĐT ngày tháng năm 2017 của Hiệu trưởng Trường Cao đẳng nghề Đồng Tháp) Đồng Tháp, năm 2017
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.
Bài 1: Tổng quan về WWW – Ngôn ngữ HTML **)0(** 1. Lịch sử về WWW World Wide Web, gọi tắt là Web hoặc WWW, mạng lưới toàn cầu là một không gian thông tin toàn cầu mà mọi người có thể truy nhập (đọc và viết) qua các máy tính nối với mạng Internet. Thuật ngữ này thường được hiểu nhầm là từ đồng nghĩa với chính thuật ngữ Internet. Nhưng Web thực ra chỉ là một trong các dịch vụ chạy trên Internet, chẳng hạn như dịch vụ thư điện tử. Web được phát minh và đưa vào sử dụng vào khoảng năm 1990, 1991 bởi viện sĩViện Hàn lâm AnhTim Berners-Lee và Robert Cailliau (Bỉ) tại CERN, Geneva, Switzerland Các tài liệu trên World Wide Web được lưu trữ trong một hệ thống siêu văn bản (hypertext), đặt tại các máy tính trong mạng Internet. Người dùng phải sử dụng một chương trình được gọi là trình duyệt web (web browser) để xem siêu văn bản. Chương trình này sẽ nhận thông tin (documents) tại ô địa chỉ (address) do người sử dụng yêu cầu (thông tin trong ô địa chỉ được gọi là URL (Uniform Resource Locator)), rồi sau đó chương trình sẽ tự động gửi thông tin đến máy chủ chứa trang web (web server) và hiển thị trên trình duyệt của người xem. Người dùng có thể theo các liên kết siêu văn bản (hyperlink) trên mỗi trang web để nối với các tài liệu khác hoặc gửi thông tin phản hồi theo máy chủ trong một quá trình tương tác. Hoạt động truy tìm theo các siêu liên kết thường được gọi là duyệt Web. 2. Nhập môn Ngôn ngữ HTML: 2.1. Giới thiệu ngôn ngữ HTML: Sau những lóng ngóng với vài trang Web trong cuộc du lịch Internet, có thể bạn nghĩ rằng phải có gói phần mềm tinh vi để thu được tất cả những hiệu ứng trang trí đầy quyến rũ này. Mặc dù có một số công cụ dành cho những ngƣời say mê HTML thực sự, nhưng bạn có thể dùng một trình soạn thảo văn bản bất kỳ như Notepad của Windows để tạo ra những trang Web hấp dẫn. Sự thật là hầu hết các trang đều không có gì khác ngoài văn bản đƣợc gia cố thêm bằng một phần tử HTML xếp đặt đúng quy cách. Để hiểu được cách hoạt động của chúng, bạn phải xem xét từng từ trong cụm từ Ngôn ngữ đánh dấu siêu văn bản và xem chúng có ý nghĩa gì: Siêu văn bản (HyperText). Như bạn đã biết, liên kết siêu văn bản là một từ hay một câu trong trang Web dùng để chỉ đến trang Web khác. Khi nhấn chuột lên một trong các liên kết này, trình duyệt của bạn (như Netscape Navigator hoặc Internet Explorer) sẽ đưa bạn tức khắc đến trang Web kia mà không cần hỏi han gì. Vì những liên kết siêu văn bản này thật sự là tính năng đặc trưng của World Wide Web, các trang Web thường được biết như là những tài liệu siêu văn bản. Cho nên HTML có từ siêu văn bản trong tên của nó, vì bạn dùng nó để tạo nên các tài liệu siêu văn bản này. Đánh dấu (Markup). Có từ điển định nghĩa markup là các chỉ dẫn chi tiết về kiểu dáng được ghi trên bản viết tay để xếp chữ in. Trong lĩnh vực này, chúng ta có thể viết lại
định nghĩa như sau: các lệnh chi tiết về kiểu dáng được đánh vào tài liệu văn bản để đưa lên WWW. Đó là HTML theo một định nghĩa tóm tắt. Nó gồm một vài mã đơn giản để tạo ra văn bản nét đậm hoặc nghiêng và các bảng liệt kê dấu chấm đầu dòng, các hình đồ hoạ chèn thêm vào, cùng với sự xác định các mối liên kết siêu văn bản. Bạn đánh các mã này vào những chỗ thích hợp trong tài liệu văn bản gốc, trình duyệt Web sẽ thực hiện việc dịch chúng. Ngôn ngữ (Language). Đây có thể là từ dễ nhầm lẫn nhất trong cụm từ này. Nhiều người diễn giải HTML nhƣ là một ngôn ngữ lập trình. HTML không có gì liên quan đến việc lập trình máy tính cả. HTML gọi là ngôn ngữ chỉ vì nó gồm các tập hợp nhỏ các nhóm hai đến ba chữ và các từ mà bạn dùng để quy định kiểu dáng như nét đậm hoặc nghiêng. 2.2. Cú pháp cơ bản một thẻ trong ngôn ngữ HTML Bây giờ chúng ta cùng đi sâu vào các khái niệm đằng sau HTML, và xem xét một số ví dụ mẫu. Để bắt đầu, tất cả công việc phải làm là khởi động trình soạn thảo văn bản yêu thích của bạn và bảo đảm đã có một tài liệu rỗng được hiển thị. Trình xử lý văn bản của bạn phải có khả năng lưu tập tin ở dạng văn bản. Notepad làm việc này một cách tự động; còn các trình xử lý văn bản khác, như Word và WordPerfect, thì có tuỳ chọn văn bản trong hộp thoại Save As. Hãy tham khảo tài liệu thuyết minh của trình xử lý văn bản. Đồng thời bạn phải lưu các trang với đuôi mở rộng HTM hoặc HTML, như trong Homepage.htm chẳng hạn. Tạo lập trang Web là một vấn đề đơn giản, chỉ cần đánh văn bản của bạn vào rồi chèn thêm các ký hiệu đánh dấu, gọi là thẻ có dạng như sau: văn bản chịu tác động Phần thẻ là một mã (thường chỉ có một hoặc hai chữ) xác định hiệu ứng mà bạn yêu cầu. Ví dụ, cho thẻ nét đậm là . Cho nên nếu bạn muốn câu ACME Coyote Suppplies xuất hiện theo kiểu chữ đậm (bold), bạn phải đưa dòng sau đây vào tài liệu của mình: ACME Coyote Supplies Thẻ đầu tiên báo cho trình duyệt (browser) hiển thị tất cả phần văn bản tiếp theo bằng phông chữ đậm, liên tục cho đến thẻ . Dấu gạch chéo (/) xác định đó là thẻ kết thúc, và báo cho trình duyệt ngưng hiệu ứng đó. HTML có nhiều thẻ dùng cho nhiều hiệu ứng khác, bao gồm chữ nghiêng (italic), dấu đoạn văn bản (paragraph), tiêu đề, tên trang, liệt kê, liên kết, và nhiều thứ nữa. 2.3. Cấu trúc tổng thể một trang HTML Các trang Web khác nhau, tẻ nhạt hay sinh động, vô nghĩa hoặc rất cần thiết, nhưng tất cả đều có cùng một cấu trúc cơ sở, nên đa số các trình duyệt đang chạy trên hầu hết các kiểu máy tính đều có thể hiển thị thành công hầu hết các trang Web. Các tập tin HTML luôn bắt đầu bằng thẻ . Thẻ này không làm gì khác ngoài nhiệm vụ báo cho trình duyệt Web biết rằng nó đang đọc một tài liệu có chứa các mã HTML. Tương tự, dòng cuối trong tài liệu của bạn luôn luôn là thẻ , tương đương như Hết. Chi tiết kế tiếp trong catalog thẻ HTML dùng để chia tài liệu thành hai phần: đầu và thân. Phần đầu giống như lời giới thiệu cho trang. Các trình duyệt Web dùng phần đầu này để thu nhặt các loại thông tin khác nhau về trang. Để xác định phần đầu, bạn đưa
thêm thẻ và thẻ vào ngay sau thẻ . Mặc dù bạn có thể đặt một số chi tiết bên trong phạm vi phần đầu này, nhƣng phổ biến nhất là tên trang. Nếu có ai đó xem trang này trong browser, thì tên trang sẽ xuất hiện trong dải tên của cửa sổ browser. Để xác định tên trang, bạn đặt đoạn văn bản tên đó giữa các thẻ và . Ví dụ nếu bạn muốn tên trang của mình là My Home Sweet Home Page, bạn đưa nó vào như sau: My Home Sweet Home Page Phần thân là nơi bạn nhập vào các văn bản sẽ xuất hiện trên trang Web lẫn các thẻ khác quy định dáng vẻ của trang. Để xác định phần thân, bạn đặt các thẻ và sau phần đầu (dưới ). 3. Trang và văn bản trên trang: Như đã trình bày ở trên, bạn bổ sung văn bản của trang Web bằng cách đánh nó vào giữa các thẻ và . Tuy nhiên, cần nhớ rằng không thể bắt đầu một đoạn văn (chương, mục) mới mà chỉ ấn phím Enter. Bạn phải dùng thẻ để báo cho browser biết rằng bạn muốn chuyển vào một đoạn văn mới: My Home Sweet Home Page Văn bản này sẽ xuất hiện trong phần thân của trang Web. Văn bản này sẽ xuất hiện trong một đoạn văn bản mới HTML bao gồm nhiều thẻ làm đẹp cho văn bản trong trang. Bạn đã thấy ở trên, một từ hoặc một câu sẽ hiện thành dạng chữ đậm nhƣ thế nào khi được đặt vào giữa các thẻ và . Bạn cũng có thể biểu hiện văn bản theo kiểu chữ nghiêng bằng cách bao chúng lại bằng các thẻ và , và làm cho các từ xuất hiện ở dạng cách đơn với các thẻ và . Giống như các chương sách, nội dung của nhiều trang Web được chia thành các đoạn. Để giúp phân cách các đoạn này và làm cho dễ đọc hơn, bạn có thể sử dụng tiêu đề. Lý tƣởng nhất, các tiêu đề này phải có tác dụng như là những đề mục nhỏ, thể hiện ý tưởng tóm tắt về đoạn văn đó. Để làm cho các đề mục này nổi bật, HTML có 6 loại thẻ tiêu đề để hiển thị văn bản theo phông chữ đậm với nhiều cỡ chữ khác nhau, từ ứng với phông lớn nhất đến ứng với phông nhỏ nhất. 4. Bảng biểu(Table) và trang khung(Frame) 4.1 Bảng biểu Bảng trong HTML được xác định bằng thẻ
Một bảng được chia ra nhiều dòng ( với thẻ ) mỗi dòng được chia ra nhiều cột ( với thẻ ) td viết tắt của "table data" , và chứa nội dung của một dữ liệu. Một thẻ có thể chứa text, liên kết,ảnh , danh sách , form , bảng khác ... *Thuộc tính border Nếu bạn không sử dụng thuộc tính border , thì bảng hiển thị sẽ không có viền. Thỉnh thoảng điều này rất hữu ích nhưng hầu như chúng ta muốn bảng có viền. Để hiển thị một bảng có viền ta thêm thuộc tính border Giá trị của thuộc tính được đo bằng pixels là độ dày của viền. bạn thử giá trị của nó là 10,20,50 để thấy sự khác biệt. *Tiêu đề của bảng Thông tin tiêu đề trong một bảng được xác định bằng thẻ Trình duyệt tự động hiển thị text trong phần tử có in đậm Ví dụ1: Dòng 1, Cột 1 Dòng 1, Cột 2 Dòng 2, Cột 1 Dòng 2, Cột 2 Kết quả: Dòng 1, Cột 1 Dòng 1, Cột 2 Dòng 2, Cột 1 Dòng 2, Cột 2 4.2 Trang khung frame HTML có các thẻ trình bày cho phép chia vùng hiển thị của cửa sổ trình duyệt thành nhiều khung, mỗi khung là một cửa sổ độc lập, hiển thị một tài liệu HTML khác nhau. Khung cho phép người thiết kế hiển thị đồng bộ nhiều tài liệu HTML khác nhau để tiện theo d i, so sánh. Ví dụ, trong khung bên trái hiển thị các nút bấm, còn khung bên phải hiển thị tài liệu tương ứng.
5. Multimedia trên trang Web 5.1 Nghe nhạc, âm thanh : Trong những tình huống đặc biệt, muốn làm cho trang web của mình sinh động hơn, ví dụ như ngoài việc cung cấp thông tin ở dạng ngôn ngữ, website của còn có cả âm thanh nữa. Ở trường hợp này, có thể ứng dụng âm thanh cho nhiều mục đích khác nhau: + Giải trí: nghe nhạc, đọc truyện,… + Học tập: hướng dẫn bằng audio, luyện kỹ năng listening trong tiếng anh,…. Ví dụ2: 5.2 Video: Cũng giống như audio tag, video tag là một HTML tag được hỗ trợ từ HTML5 để cho phép nhúng một video clip vào trang web. Ví dụ3:
Bài 2: Thiết Kế Web Tĩnh =**= 1. Tổng quan: Website tĩnh được thiết kế bằng kỹ thuật HTML (Hypertext Mark-up Language). Chỉ đáp ứng được việc giới thiệu thông tin cho người dùng xem, cao nhất là sử dụng một Form trực tuyến (Online Form) để thu nhận ý kiến của ngườii xem và gửi về e-mail định danh trước. Website tĩnh có thể được trang bị các kỹ thuật như Java Script, Flash Macromedia hay Animation Gif, giúp cho giao diện của các trang web thêm sống động và hấp dẫn. Website động (Dynamic Web Pages) thường được thiết kế bằng kỹ thuật ASP (Active Server Pages) chạy Windows hay PHP (PHP Hypertext Preprocessor) với Linux). Động ở đây xin đừng hiểu là hình ảnh sống động hoặc có thể thay đổi hình ảnh như một đoạn hoạt hình (animation). Ở đây động là có thể giúp người xem tương tác với website. Website động cần phải có cơ sở dữ liệu và tùy theo mục đích của website, nó có thể có các thành phần như: 1. Inner search: Phần tìm kiếm giúp người xem nhanh chóng tìm đến một trang web trong website có chứa vấn đề mà họ quan tâm. 2. Member account: tài khoản dành cho Hội Viên. Với một Username và Password, Hội Viên có thể truy cập (log-in) vào một khu vực hạn chế (Member Area) có nhiều quyền lợi hơn hẳn so với khu vực công cộng (Public Area). Việc cung cấp tài khoản này giúp cho người chủ website có thể kinh doanh website bằng cách thu phí Hội Viên (Member Fee) hoặc phân cấp quản lý nội bộ từ xa. 3. Shopping Cart: Thành phần giúp cho việc mua bán trên mạng (online trading) được thực hiện thông qua giả định việc chọn và bỏ món hàng đã chọn vào giỏ mua hàng. Các thông số liên quan đến món hàng sẽ được cập nhật vào tài khoản của người Mua, giúp cho việc xác định công nợ và thanh toán. Tham khảo www.vnplas.com. 4. Online Payment: Thành phần giúp cho việc buôn bán trên mạng được khả thi: Tiền được trao cho Bên Bán và hàng sẽ được chuyển cho Bên Mua. Tham khảo www.vnplas.com. 5. Forum: Diễn đàn trực tuyến: Một khu vực hạn chế giúp cho các đối tượng dùng site liên hệ trực tiếp với nhau trong thời gian thực (Real Time). Khác với liên lạc bằng e-mail có một khoảng thời gian chậm trễ (Delay) do người gửi mail và người nhận mail không trực tuyến cùng thời điểm. Tham khảo http://www.vnplas.com/forum Do tính năng vượt trội so với website tĩnh, website động có thể dùng vào các mục đích: 1. Kinh doanh Thẻ Hội Viên (Membership): Chủ website có thể thu phí Hội Viên và cấp cho Hội viên một account để truy cập vào khu vực hạn chế. Chỉ có Hội Viên mới đựơc vào khu vực này và sử dụng những thông tin trong đó. Tham khảo www.camnangthuky.com 2. Thương mại Điện Tử (E-Commerce): hay còn gọi là Bán hàng qua mạng. Sông Mây có thể cung cấp các giải pháp khác nhau tùy thuộc vào đối tượng người mua bằng các
hình thức: C.O.D, thẻ tín dụng và VASC Payment. 3. Quản lý từ xa (Remote Management): Bằng việc phân quyền đối với các khu vực hạn chế cho từng người dùng, website có thể trở thành một công cụ quản lý doanh nghiệp lý tưởng, đặc biệt đối với các công ty đa quốc gia có các chi nhánh và văn phòng đại diện ở rải rác khắp nơi trên thế giới, hoặc đơn giản hơn, cho các công ty có nhiều chi nhánh, cửa hàng, văn phòng trong nước. 4. Công cụ cho nguời quản lý web: với website động, việc cập nhật thông tin cho website không còn là vấn đề của các nhà chuyên nghiệp. Người quản lý website (Site Admin) có thể tự cập nhật website mà không cần có những kiến thức chuyên sâu về thiết kế web. Việc dễ dàng này giúp cho website luôn luôn được chăm sóc và trở nên hiệu quả hơn hẳn so với webiste tĩnh, vốn đòi hỏi người quản lý site có một trình độ kỹ thuật nào đó. 5. Diễn đàn trực tuyến: với web động, diễn đàn tạo cho website một dáng vẻ chuyên nghiệp và tạo cho khách hàng niềm tin tưởng vào công ty của Quý Vị. Tuy nhiên việc quản lý diễn đàn phải được coi trọng, tránh bị lạm dụng vào những mục đích phi pháp. 2. Trang và văn bản trên trang (HTML): 2.1 Cấu trúc trang web tĩnh: … 2.2 Một số thẻ HTML thông dụng: a/ Thẻ : Trang web tĩnh được bắt đầu bằng : và kết thúc bằng: b/ Thẻ : Phần đầu của trang web c/ Thẻ : Đặt tiêu đề cho trang web (thẻ này nằm trong d/ Thẻ : Chứa nội dung trang web. Nội dung trang web e/ Chú thích trong HTML: dùng dấu Ví dụ1: Tạo trang web với tiêu đề là: “Giới thiệu” và in ra dòng chữ: “Chào các bạn !” ở dạng chữ đậm và nghiêng Giới thiệu
Chào các bạn ! f/ Các thẻ định dạng văn bản Tên thẻ Giải thích Ví dụ … Dạng chữ đậm Hello world ! … Dạng chữ nghiêng Hello world ! … Dạng chữ gạch chân Hello world ! … Dạng chữ gạch giữa Hello world! Hello world …… Face: Chỉ định font chữ Size: kích thước … Tạo chỉ số trên X2  X2 … Tạo chỉ số dưới H2O  H2O Xuống dòng Tạo đoạn văn bản mới …… Align: chỉ định hình thức canh Hello world ! lề Width: độ dài (tính bằng pixel) , , , , Tiêu đề (Heading) , Tạo siêu liên kết Đường kẻ ngang(align, width, size) Danh sách có thứ tự mot hai hai Danh sách tự định nghĩa mot
hai g/ Các thuộc tính quan trọng của thẻ (đoạn):  Align:  Left: Canh trái  Center: Canh giữa  Right: Canh phải  justify: Canh đều  Style:  Margin-top: Canh lề trên của đoạn  Margin-left: Canh lề trái của đoạn  Margin-right: Canh lề phải của đoạn  Margin-bottom: Canh lề dưới của đoạn  Direction: Chỉ định chiều văn bản (từ trái sang phải “ltr” hoặc từ phải sang trái “rtl”) Ví dụ2: 1. Định dạng đoạn văn bản thao dạng canh đều, chiều văn bản đi từ phải sang trái, khoảng cách trên: 3, dưới: 3, trái và phải là mặc định. 2. Sin2x + Cos2x = 1 3. H2 + O2 -> H2O Giải 1. …. 2. Sin2x + Cos2x = 1 3. h/ Thẻ hình ảnh Các thuộc tính (thẻ IMG):  Scr: là đường dẫn của file ảnh  Height: Chỉ định chiều cao của ảnh. Nếu không chỉ định thì sẽ lấy chiều cao hiện tại của ảnh.  Width: chỉ định độ rộng của ảnh. Nếu không chỉ định thì sẽ lấy chiều rộng hiện tại của ảnh.  Border: chỉ định độ dày của khung bao quanh ảnh  Alt: là chuỗi văn bản xuất hiện khi đưa trỏ chuột vào ảnh. 3. Bảng biểu(Table) và trang khung(Frame) 3.1 Bảng biểu: *Tạo bảng:
1 Đào Trung 2 Nguyễn Hai Ví dụ4: Điện thoại 123 456 78 Hai ô được gộp thành một ô theo dòng 123 456 77 Tên Điện thoại Trung Kết quả 123 456 78 123 456 77 Hai ô được gộp thành một ô theo dòng Tên Điện thoại Trung 123 456 78 123 456 77 Hai ô được gộp làm một ô theo cột Hai ô được gộp làm một ô theo cột Tên Trung Tên 123 456 78 Trung Điện thoại 123 456 77 3.2 Trang khung (Frame) 3.2.1 Frame Một tài liệu HTML chuẩn có thẻ và thẻ . Một tài liệu HTML sử dụng khung thì có thẻ và thẻ . Thẻ xác định cách trình bày trong cửa sổ người dùng. Ta không thể sử dụng thẻ và thẻ cùng với nhau. Trình duyệt chỉ nhận thẻ đầu tiên xuất hiện trong tài liệu và bỏ qua thẻ sau. Nghĩa là, nếu bạn sử dụng thẻ , thì thẻ sau đó sẽ bị bỏ qua và ngược lại. Cú pháp: Tiêu đề
…  Một số thuộc tính của : dùng để phân chia vùng hiển thị trong cửa sổ trình duyệt thành các khung hình chữ nhật. Mỗi khung hình chữ nhật gọi là một frame, được định nghĩa bằng thẻ – rows = “n1, n2, … nk” hoặc cols = “n1, n2, … nk”: Quy định có k dòng (hoặc cột), độ rộng dòng (cột) thứ i là ni. ni là số, có thể thay bằng *: phần còn lại – frameborder = yes hoặc no – framespacing = “n”: Khoảng cách giữa 2 khung  Tạo 1 khung có nội dung là 1 trang web nào đó: – Thuộc tính: • src=“Địa chỉ chứa nội dung” • name=“tên khung” • noresize: Không được thay đổi kích thước • Scrolling: Thuộc tính này xác định kiểu cuộn cho cửa sổ khung • Border: Độ dày của đường viền khung • Frameborder: Xác định viền của khung (ẩn/hiện đường viền khung) • Marginwidth: Xác định khoảng cách giữa nội dung trong khung với lề trái và lề phải của khung. Giá trị phải lớn hơn một • Marginheight: Xác định khoảng cách giữa nội dung trong khung với lề trên và lề dưới của khung. Giá trị phải lớn hơn một  Thẻ mặc định – Thuộc tính • target=“Cửa sổ mặc định” href=“Địa chỉ gốc mặc định” Ví dụ 5: khung frame 3.2.2 IFRAME Trong những tình huống đặc biệt, có thể muốn nhúng một trang web khác vào trong trang web hiện hành của mình, nhằm làm tăng sựa phong phú và đa dạng cho nội dung của trang web hiện tại.
Ví dụ 6: khung iframe tiêu đề trang 4. Multimedia trên trang Web 4.1 Âm thanh nền: – Thuộc tính: • src=“địa chỉ file âm thanh” (*.mid, *.wav, …) • loop= số lần lặp lại bài nhạc. Nếu loop= -1 hoặc “infinite” thì sẽ lặp đến khi chuyển sang trang mới web. 4.2 Video 4.3 audio Các thuộc tính:  Scr: là đường dẫn của file bài hát/phim  Autostart: nếu là true tự động thực hiện bài hát.  Loop: số lần lặp lại bài nhạc. Nếu loop = true hoặc “infinite” thì sẽ lặp đến khi chuyển sang trang mới web. Hay 4.4 Flash Hay
5. Các yếu tố động trên trang Text Trong đó:  Direction: hướng chuyển động của dòng chữ “Text” ( right, up, down)  Behavior: hình thức chuyển động: scroll, alternate, slide  Height, Width: chiều cao và chiều rộng  Scrollamount, Scrolldelay: chỉ định tốc chuyền động. Ví dụ 7: chữ chạy 6. Khung nhập-Form  Cho phép người sử dụng nhập dữ liệu trên trang web. Dữ liệu này có thể được gửi về server để xử lý.  Người sử dụng nhập dữ liệu thông qua các điều khiển (controls). Có nhiều loại control: 1. Form 2. Oneline Textbox 3. Checkbox 4. Radio Button 5. Button 6. Combo box (drop-down menu) 7. Listbox 8. Hộp nhập văn bản nhiều dòng (TextArea) 9. …  Tất cả các điều khiển đều có tên được quy định qua thuộc tính name. Tuy nhiên có một số điều khiển thì name không quan trọng (các điều khiển mà sau này không cần lấy dữ liệu)  Các điều khiển từ số 2. đến số 5 được định nghĩa nhờ thẻ và thuộc tính type sẽ xác định là điều khiển nào sẽ được tạo ra.  6.1 Form  Sử dụng để chứa mọi đối tượng khác  Không nhìn thấy khi trang web được hiển thị  Quy định một số thuộc tính quan trọng như method, action.  Thẻ tạo form: …  Các thuộc tính:
– name=“tên_form”: Không quan trọng lắm – action=“địa chỉ nhận dữ liệu”: Nên sử dụng đường dẫn tương đối nếu nằm trong cùng 1 web – method=“phương thức gửi dữ liệu”. Chỉ có 2 giá trị: • GET (mặc định) • POST 6.2 Hộp nhập văn bản 1 dòng (Oneline Textbox)  Sử dụng để nhập các văn bản ngắn (trên 1 dòng) hoặc mật khẩu  Thẻ:  Thuộc tính: – name=“tên_đt”: quan trọng – type=“text”:Ô nhập văn bản thường – type=“password”: ô nhập mật khẩu – value=“giá trị mặc định” 6.3 Checkbox  Cho phép chọn nhiều lựa chọn trong một nhóm lựa chọn được đưa ra bằng cách đánh dấu (“tích”).  Thẻ: : mỗi ô nhập cần 1 thẻ  Thuộc tính: – name=“tên_đt”: quan trọng – type=“checkbox” – value=“giá trị”: đây là giá trị chương trình sẽ nhận được nếu NSD chọn ô này. – checked: nếu có thì nút này mặc định được chọn 6.4 Option Button (Radio Button)  Cho phép chọn một lựa chọn trong một nhóm lựa chọn được đưa ra.  Trên 1 form có thể có nhiều nhóm lựa chọn kiểu này.  Thẻ: : Mỗi ô cần 1 thẻ  Thuộc tính: – name=“tên_đt”: quan trọng. Các đối tượng cùng tên thì thuộc cùng nhóm. – type=“radio” – value=“giá trị”: đây là giá trị chương trình sẽ nhận được nếu NSD chọn ô này. – checked: nếu có thì nút này mặc định được chọn 6.5Nút lệnh (Button)  Sử dụng để NSD ra lệnh thực hiện công việc.  Trên web có 3 loại nút: – submit: Tự động ra lệnh gửi dữ liệu – reset: đưa mọi dữ liệu về trạng thái mặc định – normal: người lập trình tự xử lý
 Thẻ:  Thuộc tính: – name=“tên_ĐT”: thường không quan trọng – type=“submit”: nút submit – type=“reset”: nút reset – type=“button”: nút thông thường (normal), it sử dụng. value=“tiêu đề nút” 6.6 Combo Box (Drop-down menu)  Bao gồm một danh sách có nhiều phần tử. Tại một thời điểm chỉ có 1 phần tử được chọn  NSD có thể chọn 1 phần tử trong danh sách xổ xuống bằng cách kích vào mũi tên bên phải hộp danh sách.  Thẻ tạo hộp danh sách: Danh sách phần tử  Thuộc tính: – name=“tên_ĐT”: quan trọng  Thẻ tạo 1 phần tử trong danh sách: Tiêu đề phần tử  Thuộc tính: – value=“giá trị”: giá trị chương trình nhận được nếu phần tử được chọn – selected: nếu có thì phần tử này mặc định được chọn 6.7 Listbox  Tương tự như Combo box, tuy nhiên có thể nhìn thấy nhiều phần tử cùng lúc, có thể lựa chọn nhiều phần tử  Thẻ: …  Thuộc tính: tương tự của combo tuy nhiên có 2 thuộc tính khác: – size=“số dòng” – multiple: cho phép lựa chọn nhiều phần tử cùng lúc  Thẻ … tương tự của combo box 6.8 Hộp nhập văn bản nhiều dòng (TextArea)  Cho phép nhập văn bản dài trên nhiều dòng.  Thẻ: Nội dung mặc định  Thuộc tính: – name=“tên_ĐT”: quan trọng – rows=“số dòng” – cols=“số cột”
rows tính theo số dòng văn bản, cols tính theo số ký tự chuẩn trên dòng. 7. Liên kết 7.1 Tạo liên kết đến trang web khác: Text Trong đó: Url: là đường dẫn/địa chỉ của của trang web chuyển đến. Target có thể là các giá trị sau: “_new” hoặc “_blank”: trình duyệt sẽ phải mở trang web đích trong một cửa sổ mới "_top", "_parent", "_self“: dùng cho những trang web có chứa frame. Text: là đoạn văn bản hiển thị để người dùng click vào. 7.2 Tạo liên kết đến E-mail:
Bài 3: Thiết kế web động ---****--- 1. Tổng quan về ASP.Net và ADO.Net 1.1 IIS và cài đặt IIS IIS là viết tắt của từ Internet Information Services IIS được đính kèm với các phiên bản của Windows. Microsoft Internet Information Services (các dịch vụ cung cấp thông tin Internet) là các dịch vụ dành cho máy chủ chạy trên nền Hệ điều hànhWindow nhằm cung cấp và phân tán các thông tin lên mạng, nó bao gồm nhiều dịch vụ khác nhau như Web Server, FTP Server,… Nó có thể được sử dụng để xuất bản nội dung của các trang Web lên Internet/Intranet bằng việc sử dụng “Phương thức chuyển giao siêu văn bản“ - Hypertext Transport Protocol (HTTP). Như vậy, sau khi bạn thiết kế xong các trang Web của mình, nếu bạn muốn đưa chúng lên mạng để mọi người có thể truy cập và xem chúng thì bạn phải nhờ đến một Web Server, ở đây là IIS. Nếu không thì trang Web của bạn chỉ có thể được xem trên chính máy của bạn hoặc thông qua việc chia sẻ tệp (file sharing) như các tệp bất kỳ trong mạng nội bộ mà thôi. IIS có thể làm được gì? Nhiệm vụ của IIS là tiếp nhận yêu cầu của máy trạm và đáp ứng lại yêu cầu đó bằng cách gửi về máy trạm những thông tin mà máy trạm yêu cầu. Bạn có thể sử dụng IIS để: · Xuất bản một Website của bạn trên Internet · Tạo các giao dịch thương mại điện tử trên Internet (hiện các catalog và nhận được các đơn đặt hàng từ nguời tiêu dùng) · Chia sẻ file dữ liệu thông qua giao thức FTP. · Cho phép người ở xa có thể truy xuất database của bạn (gọi là Database remote access).Và rất nhiều khả năng khác … IIS hoạt động như thế nào? IIS sử dụng các giao thức mạng phổ biến là HTTP và FTP (File Transfer Protocol) và một số giao thức khác như SMTP, POP3,… để tiếp nhận yêu cầu và truyền tải thông tin trên mạng với các định dạng khác nhau. Một trong những dịch vụ phổ biến nhất của IIS mà chúng ta quan tâm trong giáo trình này là dịch vụ WWW (World Wide Web), nói tắt là dịch vụ Web. Dịch vụ Web sử dụng giao thức HTTP để tiếp nhận yêu cầu (Requests) của trình duyệt Web (Web browser) dưới dạng một địa chỉ URL (Uniform Resource Locator) của một trang Web và IIS phản hồi lại các yêu cầu bằng cách gửi về cho Web browser nội dung của trang Web tương ứng. Ở phần tiếp sẽ là hướng dẫn cách cách cài đặt IIS trên Windows XP Hiện có nhiều bản IIS, xong nói chung cách cài đặt khá giống nhau, tuy nhiên việc cập nhật bản mới nhất để có những tính năng mới và an toàn hơn.