Bài giảng Thiết kế web - Phạm Đào Minh Vũ

Nội dung text: Bài giảng Thiết kế web - Phạm Đào Minh Vũ

1. Chuỗi định vị tài nguyên (địa chỉ): URL (Uniform Resource Locator) ü Tài nguyên: file trên mạng ü URL: Xác định vị trí và cách khai thác file ü Cấu trúc: giao_thức://địa_chỉ_máy:cổng/đường_dẫn/tên_file ü Ví dụ: ü Trong trường hợp mặc định, nhiều thành phần có thể bỏ qua: – Giao thức, cổng: Được trình duyệt đặt mặc định – Tên file: được máy chủ đặt mặc định
2. Trang web, web site, World Wide Web ü Trang web: Web page: – Là một trang nội dung – Có thể được viết bằng nhiều ngôn ngữ khác nhau (HTML, ASP.NET, PHP, ) nhưng kết quả trả về client là HTML ü Web site: – Tập hợp các trang web có nội dung thống nhất phục vụ cho một mục đích nào đó ü World Wide Web (WWW): Tập hợp các web site trên mạng internet.
3. Web server, Web browser ü Web server: – Máy tính dùng lưu trữ các trang Web, có kết nối Internet, cung cấp thông tin cho người dùng – Một số phần mềm web server chuyên dụng: • Apache: mã nguồn mở • Internet Information Services (IIS): Sản phẩm của Microsoft ü Web Browser: – Phần mềm chạy trên client để khai thác dịch vụ web – Một số Web browser: • Nescape • Mozilla Firefox • Internet Explorer (IE): tích hợp sẵn trong windows •
4. Mô hình hoạt động website Địa chỉ youtube.com ở đâu em ? Máy chủ DNS Dạ 74.125.67.100 anh INTERNET Máy chủ Youtube Đưa đây trang chủ ? 74.125.67.100
5. Phân loại trang web
6. Phân loại trang web ü Dựa vào công nghệ phát triển, có 2 loại: – Web tĩnh: Thường được viết bằng ngôn ngữ HTML kết hợp JavaScript. – Web động: • Thường để chỉ những website có Cơ sở dữ liệu • Có thể được viết bằng ngôn ngữ ASP, ASP.NET, PHP, JSP, với CSDL có thể là Access, SQLServer, MySQL, Oracle,
7. WEB TĨNH – Ưu Điểm: • Thiết kế đồ họa đẹp, ấn tượng, • Tốc độ truy cập nhanh • Chi phí đầu tư thấp, dễ phát triển, – Khuyết điểm: • Khó khăn trong thay đổi, cập nhật thông tin • Thông tin cố định, không mang tính linh hoạt • Khó tích hợp, nâng cấp, mở rộng. • Tương tác yếu
8. WEB ĐỘNG – Ưu Điểm: • Thông tin được cập nhật nhánh chóng, liên tục => tạo sự thu hút • Tương tác người dùng mạnh mẽ • Thực hiện các tác vụ phức tạp với độ bảo mật cao như : mua bán, thanh toán trực tuyến, • Ít tốn công sức cập nhật thông tin – Khuyết điểm: • Tốc độ truy cập chậm (do kết nối CSDL và có xử lý tính toán phức tạp) • Chi phí đầu tư cao,
9. Một số bước chính trong phát triển website
10. Các bước ü Tương tự với phân tích và thiết kế hệ thống. 1. Đặc tả 2. Phân tích 3. Thiết kế 4. Lập trình 5. Kiểm thử
11. Một số điều cần chú ý ü Đặc tả: – Web để làm gì? – Ai dùng? – Trình độ người dùng? – Nội dung, hình ảnh? ü Phân tích – Mối liên quan giữa các nội dung? – Thứ tự các nội dung?
12. Một số điều cần chú ý (tt) ü Thiết kế – Sơ đồ cấu trúc website – Giao diện – Tĩnh hay động – CSDL – Nội dung từng trang – Liên kết giữa các trang ü Xây dựng – Cấu trúc thư mục – Các modul dùng chung –
13. Một số điều cần chú ý (tt) ü Kiểm thử – Kiểm tra trên nhiều trình duyệt – Kiểm tra trên nhiều loại mạng – Kiểm tra tốc độ – Kiểm tra các liên kết – Thử các lỗi bảo mật –
14. Công bố website trên Internet
15. Các điều kiện cần thiết ü Xây dựng website ü Quyền sử dụng hợp pháp ü Domain (tên miền) – Sử dụng tên miền con miễn phí – Đăng ký tên miền riêng ü Hosting – Sử dụng miễn phí – Thuê không gian riêng – Tự host website của mình ü Duy trì và phát triển và quảng bá website
16. Đăng ký tên miền ü Xác định tên – Tên tiếng Việt – Tên giao dịch tiếng Anh – Tên viết tắt ü Xác định nơi đăng ký ü Đăng ký tên miền càng sớm càng tốt – Thủ tục đơn giản, nhanh chóng – Kinh phí rẻ • Việt Nam: 450.000+480.000/năm • Nước ngoài: 8 – 12USD
17. Hosting ü Xác định môi trường vận hành của website – Máy chủ Windows • Support ASP, PHP , SQL Server, MySQL • Đắt hơn máy chủ Linux – Máy chủ Linux • Support PHP, JSP , MySQL • Rẻ hơn máy chủ Windows ü Xác định dung lượng thực tế của website, khả năng sẽ mở rộng ü Xác định băng thông, các dịch vụ đảm bảo an toàn, an ninh, backup dữ liệu
18. Duy trì website ü Cập nhật thông tin – Web tĩnh: • Upload Webpage thông qua Web Browser • Upload Webpage thông qua FTP program (Cute FTP, FTP Voyager, ) – Web động • Form cập nhật CSDL nếu Site có kết nối CSDL
19. Phát triển website ü Các chiến lược marketing – Sử dụng thư điện tử – Đầu tư quảng cáo 1 đợt trên các phương tiện truyền thông (Báo, đài, Tivi ) ü Liên kết với các site cùng loại – Trao đổi banner – Giới thiệu lẫn nhau.
20. Quảng bá website ü Quảng bá Website – Đăng ký Website vào các máy tìm kiếm trong nước và thế giới (search engine) • Vietnam Searchengine: Panvietnam, vinaseek • Global Searchengine: google, altavista, hotboot – Nâng cao vị trí của Website trong hệ thống xếp hạng Website thế giới. • Google rank (the important of website: 1-10) • Alexa rank: Traffic ranking of website.
21. Phát triển website ü Nâng tầm phát triển Website – Tự động hoá dần các chức năng của Website. – Bảo mật web – Phát triển các chức năng phức tạp như : mua bán, thanh toán trực tuyến, – Biến Website thành một môi trường kinh doanh thực sự hiệu quả 24/24 trên Internet.
22. CHƯƠNG 2 Ngôn ngữ HTML Phần cơ bản
23. Giới thiệu HTML ü HTML (Hypertext Markup Language) : Ngôn ngữ đánh dấu siêu văn bản, dùng để thiết kế trang web ü Mô tả cách thức mà dữ liệu được hiển thị thông qua các ký hiệu đánh dấu gọi là tag (Element) ü File HTML phải có đuôi HTML hoặc HTM ü File HTML có thể được tạo bất kỳ trình soạn thảo web hoặc văn bản nào ü HTML trở thành 1 chuẩn của Internet do tổ chức World Wide Web Consortiun (W3C) phát triển và duy trì.
24. Ví dụ HTML ü Cấu trúc tổng quát của 1 file HTML: Title of page This is my first homepage. This text is bold ü Để xem kết quả, nhấn đúp vào file hello.html
25. HTML Elements (Tag) ü HTML là văn bản bao gồm các HTML Element, Hay được gọi là các HTML Tag ü Mỗi tag có 1 tên, được bao giữa 2 kí tự “ ” ü Tag thường đi theo cặp. Ví dụ ü Thẻ đầu tiên gọi là thẻ mở ( ), thẻ sau gọi là thẻ đóng ( ) ü Văn bản giữa thẻ mở và thẻ đóng là nội dung của HTML Tag ü HTML tag không phân biệt hoa thường. giống
26. Ví dụ về HTML Elements ü Đây là 1 HTML Element This text is bold ü Trong đó : – b là tên thẻ đánh dấu bắt đầu và kết thúc element – Thẻ mở – Thẻ đóng – Nội dung của HTML Element là : This text is bold – Khi hiển thị trên trình duyệt : This text is bold – Mục đích của thẻ b là in đậm văn bản nằm trong nó
27. Ví dụ về HTML Tag (tt) ü Đây cũng là 1 HTML Tag This is my first homepage. This text is bold ü Trong đó – body là tên thẻ – Thẻ mở , thẻ đóng – Nội dung : This is my first homepage. This text is bold – Mục đích thẻ body là chứa tất cả các Element nội dung trong trang HTML
28. Chú ý Mặc dù thẻ HTML không phân biệt hoa thường và nhiều trang web sử dụng chữ hoa. Thế nhưng để phù hợp với các tiêu chuẩn mới nhất của web ta sẽ sử dụng chữ thường cho tất cả các thẻ HTML
29. Cấu trúc trang HTML Title here
30. Thẻ DOCTYPE ü Mọi trang HTML đều nên bắt đầu bằng 1 thẻ DOCTYPE để chỉ ra loại ngôn ngữ đánh dấu nào đang sử dụng. ü Trong ví dụ trên ta dùng XHTML 1.0 Transitional ü DOCTYPE sẽ cho trình duyệt biết nên render theo kiểu nào ? Nếu bỏ DOCTYPE trình duyệt sẽ render theo kiểu riêng của mình (Quick mode) mà không theo chuẩn
31. Cấu trúc trang HTML đơn giản ü Cấu trúc 1 trang HTML đơn giản không DOCTYPE Title here ü Cách xem mã nguồn của 1 trang web : Click chuột phải , nhấn view source
32. Thẻ html ü . . . : Bắt đầu và kết thúc tập tin HTML ü . . . : Phần đầu trang web ü : Khai báo thông tin trang web ü Nội dung tiêu đề : Hiển thị nội dung trên thanh tiêu đề ü : Là tag rỗng, chứa khai báo đến các tập tin có liên quan như tập tin định dạng thể hiện (.css), xử lý (.js), ü Nội dung trên trang : Hiển thị nội dung trên trang. ü : Khai báo mẫu định dạng chung cho 1 Element nào đó (tag , , , ) ü : Khai báo phần ngôn ngữ tham gia xử lý trang web, như Javascript, Vbscript,
33. Tiêu đề - Heading - Thẻ ü Thẻ heading dùng để tạo các tiêu đề, đầu đề cho trang web ü Có 6 thẻ tiêu đề bao gồm h1, h2, h3, h4, h5, h6 ü Theo thứ tự h1 (quan trọng nhất) đến h6 (ít quan trọng nhất). ü Hầu hết trình duyệt đều hiển thị các thẻ heading tô đậm và sử dụng font lớn hơn bình thường. h1 là lớn và đậm nhất cho đến h6 là lớn và đậm ít nhất ü Thẻ heading dùng để đánh dấu các đoạn text mang ý nghĩa quan trọng như tiêu đề bài viết, các mục lục chứ không phải dùng để in đậm văn bản
34. Thẻ h demo ü Trình duyệt sẽ tự động thêm dòng trống trước và sau 1 heading Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6
35. Đoạn văn – Thẻ p ü Thẻ p dùng để đánh dấu một đoạn văn (paragraph) ü Trình duyệt sẽ tự động thêm 1 dòng trống trước và sau mỗi đoạn văn ü Ví dụ This is a paragraph This is another paragraph
36. Thẻ p demo This is a paragraph This is another paragraph
37. Lưu ý ü Nhớ đóng thẻ This is a paragraph This is another paragraph ü Quên đóng thẻ là lỗi rất hay mắc phải. ü Lỗi này khiến 1 số trình duyệt hiển thị sai. Tuy 1 số có thể hiển thị đúng nhưng sẽ không đúng trong mọi trường hợp ü Việc quên đóng thẻ sẽ khiến mã nguồn HTML khó đọc, khó sửa khi có lỗi xảy ra. ü Không đóng thẻ là không tuân theo chuẩn web
38. Ngắt dòng – Thẻ br ü Thẻ br dùng để ngắt 1 dòng (xuống hàng) nhưng không phải để bắt đầu 1 đoạn văn ü Thẻ br sẽ ngắt 1 dòng tại bất kỳ nơi nào nó xuất hiện This is a para graph with line breaks ü Chú ý br là thẻ rỗng (nó không có thẻ đóng, thẻ mở).
39. Thẻ br demo This is a para graph with line breaks
40. Thẻ ü Dùng để định nghĩa 1 secsion riêng trong trang web, do đó có thể chứa các tag khác như tag đến , , Trung tâm tin học Trường Công nghệ thông tin
41. Thẻ - Horizontal Ruler ü Dùng để kẻ đường kẻ ngang ü Sử dụng thuộc tính siza va width để thay đổi độ rộng và chiều dài đường kẻ Trung tâm tin học
42. HTML Attributes ü Bên cạnh tên, HTML Tag có thể có thêm các thuộc tính Hello World Tên thuộc tính. Thuộc tính element bgcolor qui định màu nền cho body Giá trị thuộc tính. bgcolor = “red”. Màu nền trang web sẽ có Dấu nháy kép (”)hoặc màu đỏ đơn (‘) dùng để đánh dấu bắt đầu và kết thúc của giá trị thuộc tính.
43. Ví dụ HTML Attribute ü Canh giữa heading My page ü Giá trị align : – center : canh giữa – left : canh trái – right : canh phải
44. Ví dụ HTML Attribute ü Đặt màu nền và màu chữ cho trang web : Hello World ü bgcolor qui định màu nền, text qui định màu chữ ü Màu có thể là chữ (red,yellow) hoặc số (Ví dụ #FF0000, #FFFF00 )
45. HTML color ü Màu sắc bao gồm 3 giá trị chủ đạo là : R (Red), G (Green ) và B (Blue) ü Giá trị thấp nhất của của R,G,B là 0 và cao nhất là 255(FF) ü Có 3 cách giá trị 1 màu : – Sử dụng tên. Ví dụ red, black, blue, yellow,green,white,red – Sử dụng giá trị hexa. Ví dụ : #FF00FF,#00FF11,#445566 ü Cách dùng phổ biến nhất là ghi màu dưới dạng hexa
46. Ví dụ HTML color BẢNG MÃ MÀU Tên màu Trị Tên màu Trị Black Đen #000000 Olive Nâu vàng #808000 Red Đỏ #FF0000 Teal Nâu sẫm #008080 Blue Xanh #0000FF Maroon Nâu #800000 Navy X.Đãm #000800 Gray Xám #808080 Lime V.Chanh #FFFFFF Fuchsia Hồng #FF00FF White Trằng #FFFFFF Green Lá #008000 Rurple Đ.Tía #800080 Silver Bạc #C0C0C0 Yellow Vàng #FFFF00 Aqua Ngọc #00FFFF
47. Demo HTML color Quê hương tôi có con sông xanh biếc Nước trong xanh soi bóng những hàng tre Quê hương là cầu tre nhỏ Mẹ về nón lá nghiêng che
48. Cách lấy màu hexa ü Nếu trong bức ảnh hoặc 1 trang web có màu chúng ta cần. Làm sao ta biết giá trị hexa của nó ? ü Trả lời : – Là ảnh : Sử dụng các chương trình chỉnh sửa ảnh như Photoshop. Dùng tính năng Eye Drop ( ) – Là web : Dùng add-on ColorZilla của Firefox (Download tại colorzilla.com). Sau khi install, click vào biểu tượng (góc trái dưới cùng) sau đó chọn điểm nào trên web cần lấy giá trị màu. – Một cách khác là vào trang
49. HTML Formats – Định dạng văn bản ü HTML cung cấp nhiều thẻ dùng để định dạng văn bản ü Có 2 loại thẻ chính : – Thẻ định dạng vật lý : là các thẻ chỉ định trình duyệt phải hiển thị đoạn văn bản như thế nào, font to hay font nhỏ, đậm hay lợt, nghiêng hay bình thường – Thẻ định dạng logic : là các thẻ chỉ định cho trình duyệt biết loại nội dung của đoạn văn bản . Trình duyệt tự do hiển thị theo cách của mình.
50. Thẻ định dạng vật lý Element Meaning Notes In nghiêng In đậm Dạng máy đánh chữ Gạch dưới Bị loại bỏ trong các phiên bản mới HTML và XHTML Gạch ngang Bị loại bỏ trong các phiên bản mới HTML và XHTML Gạch ngang Bị loại bỏ trong các phiên bản mới HTML và XHTML Chỉ số Số mũ Font bự hơn 1 đơn vị Font bé hơn 1 đơn vị
51. Demo thẻ định dạng vật lý This text is bold This text is italic This text is big This text is small This text contains subscript This text contains superscript
52. Demo thẻ định dạng vật lý Physical Text Elements This is Bold This is Italic This is Monospaced This is Underlined This is Strike-through This is also Strike-through This is Big This is even Bigger This is Small This is even Smaller This is Superscript This is Subscript This is Bold, italic, and underlined
53. Thẻ định dạng logic Thẻ Ý nghĩa Hiển thị phổ biến Chữ viết tắt (abbreviation). Thường Ví dụ Mr M. Cụm từ viết tắt (acronym). Thường Ví dụ WWW) Trích dẫn nguồn In nghiêng Mã nguồn Chìều dài cố định Định nghĩa In nghiêng Nhấn mạnh In nghiêng Phím bấm Chiều dài cố định Trích dẫn trong dòng Bao bởi 2 dấu nháy(not in IE 6) Đoạn text ví dụ Chiều dài cố định Nhấn mạnh cực kỳ In đậm Biến lập trình In nghiêng
54. Demo thẻ định dạng logic Physical Text Elements This is Bold This is Italic This is Monospaced This is Underlined This is Strike-through This is also Strike-through This is Big This is even Bigger This is Small This is even Smaller This is Superscript This is Subscript This is Bold, italic, and underlined
55. Demo thẻ định dạng logic
56. Lưu ý ü Dùng thẻ định dạng vật lý, tất cả các trình duyệt đều hiển thị đoạn văn bản giống nhau( ví dụ thẻ thì đều sử dụng font đậm) ü Thẻ định dạng logic, không qui định việc hiển thị mà qui định loại hay ngữ nghĩa của văn bản. Các trình duyệt khác nhau có thể hiển thị khác nhau ü Để thay đổi hiển thị của thẻ logic, ta phải dùng CSS.
57. HTML Preformat ü Trình duyệt sẽ tự động lược bỏ khoảng trắng và các kí tự xuống dòng khi hiển thị trang HTML üforXem i = ví1 todụ 10 : print i next i
58. HTML Preformat ü Để giữ nguyên định dạng (khoảng trắng, xuống dòng, ) ta phải sử dụng thẻ This is preformatted text. It preserves both spaces and line breaks. The pre tag is good for displaying computer code: for i = 1 to 10 print i next i
59. Ví dụ thẻ pre This is P R E F O R M A T T E D T E X T SPACES are ok! So are RETURNS! This is NOT P R E F O R M A T T E D T E X T SPACES and RETURNS are lost.
60. Mã nguồn – thẻ code,kbd,var Computer code Keyboard input Teletype text Sample text Computer variable Note: These tags are often used to display computer/programming code.
61. Địa chỉ với thẻ address Donald Duck BOX 555 Disneyland USA
62. Viết tắt với abbr, acronym UN WWW The title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or abbreviation. This only works for the acronym element in IE 5. This works for both the abbr and acronym element in Netscape 6.2.
63. Viết từ phải qua trái với thẻ bdo If your browser supports bi-directional override (bdo), the next line will be written from the right to the left (rtl): Here is some Hebrew text
64. Trích dẫn với blockquote, q Here comes a long quotation: This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. Here comes a short quotation: This is a short quotation With the block quote element, the browser inserts line breaks and margins, but the q element does not render as anything special.
65. Đánh dấu chèn, xóa với ins, del a dozen is twenty twelve pieces Most browsers will overstrike deleted text and underline inserted text. Some older browsers will display deleted or inserted text as plain text.