BÀI GIẢNG MÔN THI THIẾT KẾ WEB_1

Chia sẻ: Trần Ngọc Mai | Ngày: | Loại File: PDF | Số trang:10

Thêm vào BST

Báo xấu

42
lượt xem 5
download

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

Tham khảo tài liệu 'bài giảng môn thi thiết kế web_1', công nghệ thông tin, kỹ thuật lập trình phục vụ nhu cầu học tập, nghiên cứu và làm việc hiệu quả

Chủ đề:

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

Lưu

Nội dung Text: BÀI GIẢNG MÔN THI THIẾT KẾ WEB_1

Bài Gi ng Môn Thi t K Web Ph n 1: Ngôn Ng Thi t K Web HTML Chương 01 T NG QUAN V THI T K WEBSITE Các khái ni m So n th o trang web Các th c a t p tin HTML Làm tươi và xem mã ngu n I. CÁC KHÁI NI M 1. Khái ni m WebTĩnh, Web ng WEB TĨNH: ư c xây d ng b ng các ngôn ng HTML, DHTML dùng thi t k các trang web có n i dung ít c n thay i và c p nh t. Thích h p v i cá nhân, t ch c, doanh nghi p v a và nh m i làm quen v i môi trư ng Internet. o Ưu i m: - Thi t k ho p: Trình bày n tư ng vì v ph n m thu t chúng ta có th hoàn toàn t do trình bày các ý tư ng trên toàn di n tích trang. - Tc truy c p nhanh vì không m t th i gian trong vi c truy v n cơ s d li u như các trang web ng. - Chi phí u tư th p: Chi phí xây d ng website tĩnh th p vì không ph i xây d ng các cơ s d li u, l p trình và chi phí cho vi c thuê Hosting. . . o Như c i m cơ b n: - Khó khăn trong vi c thay i và c p nh t thông tin: Mu n thay i và c p nh t n i dung thông tin ph i bi t v ngôn ng html, s d ng ư c các chương trình thi t k ho , thi t k web, c p nh t file lên server. - Thông tin không có tính linh ho t: Do n i dung ư c thi t k c nh nên khi nhu c u v thông tin tăng cao thì s không áp ng ư c. - Khó tích h p, nâng c p, m r ng: Khi mu n m r ng, nâng c p m t website tĩnh h u như là ph i làm m i l i website. ng: W eb ng là thu t ng ư c dùng ch nh ng website có cơ s d Web li u và ư c h tr b i các ph n m m phát tri n web. o V i web ng, thông tin hi n th ư c g i ra t 1 cơ s d li u khi ngư i dùng truy v n t i m t trang web. Ch ng h n ng d ng thương m i i n t (m t c a hàng tr c tuy n) trưng bày catalogue s n ph m trên website hay theo dõi kho hàng, khi m t m t hàng ư c giao, ngay l p t c nh ng trang có liên quan n s n ph m ó ph n ánh s thay i này. o Web ng thư ng ư c phát tri n b ng các ngôn ng l p trình tiên ti n như PHP, ASP, ASP.NET, Java, CGI, Perl, và s d ng các cơ s d li u quan h m nh như Access, My SQL, MS SQL, Oracle… o Thông tin trên web ng luôn m i vì nó d dàng ư c thư ng xuyên c p nh t thông qua vi c s d ng các công c c p nh t c a các ph n m m qu n tr web . o Vì v y website ư c h tr b i cơ s d li u là phương ti n trao i thông tin nhanh nh t v i ngư i dùng Internet. i u d nh n th y là nh ng website thư ng xuyên ư c c p nh t s thu hút nhi u khách hàng t i thăm hơn. o T t c các website Thương m i i n t , các m ng thông tin l n, các website c a các t ch c, doanh nghi p ho t ng chuyên nghi p trên Net u s d ng công ngh web ng. Có th nói web ng là website c a gi i chuyên nghi p ho t ng trên môi trư ng Internet. This is trial version Biên so n: Dương Thành Ph t Trang 1 www.adultpdf.com
Bài Gi ng Môn Thi t K Web Ph n 1: Ngôn Ng Thi t K Web HTML 2. M ng Internet: M ng máy tính toàn c u – H th ng m ng c a các m ng. Ti n thân ban u là m ng ARPANET(T ch c Advanced Research Projects Agency) c a M sáng l p 1969. Ph c v trao i d li u gi a các trư ng i h c & B qu c phòng. 3. Các d ch v cơ b n trên Internet WWW-Wold Wide Web: D ch v trao i,tìm ki m truy c p thông tin trên m ng theo • giao th c HTTP. ư c s d ng thông qua trình duy t Web Email – Eletronic Mail-Thư i n t : D ch v trao i các thông i p cho nhau • SMTP(Simple Mail Tranfer Protocol) Pop3(Post office protocol 3) ư c qu n lý b i các Mail server như:phetitc@yahoo.com,webmaster@clbtinhoc.net,phetit@hcm.fpt.vn FTP – File Transfer Protocol – Truy n t i t p tin : D ch v trao i t p tin gi a các • máy trên Internet thư ng ư c dùng Download & Upload các trang web t ngư i thi t k n các máy ch thông qua các chương trình FTP như FTP Explorer, FlashFXP. Chat –Tán g u: D ch v cho phép ngư i dùng trao i tr c tuy n v i nhau qua m ng • internet b ng văn b n, âm thanh, hình nh Như : AOL, Yahoo messenger 4. HTTP-Hyper Text Tranfer Protocol: Giao th c dùng giao ti p v i các trang Web.5. HTML-Hyper Text Makeup Language: Ngôn ng ánh d u siêu văn b n dùng thi t k trang Web. 6. WebPage-Trang Web: Là m t t p tin văn b n so n th o theo ngôn ng HTML có ph n m r ng là HTML ho c HTM. 7. Web Site: Chuyên khu Web t p h p các trang web thu c 1 ch th . 8. Home Page: Trang u tiên-Trang ch c a 1 Website(Index.htm, Default.htm . . .) 9. WebServer: Máy ch web-Máy tính c u hình m nh, lưu tr các trang Web k t n i thư ng xuyên v i m ng Internet cho phép các máy khác truy c p thông tin. phân bi t m i Web Server có m t a 10. Tên mi n-Domain Name-Web Server Name: ch IP và ư c ánh x b i 1 tên (VD:www.vietnamnet.vn). ư c xem như tên giao d ch c a công ty, t ch c trên Internet.Bao g m mã qu c gia như :Vi t Nam: .VN, Anh: .UK, M : .US, Nh t:.JP...) và 1 s lĩnh v c. .Com : Thương m i .Int : T ch c qu c t .Edu : T ch c giáo d c .Org : Các t ch c khác .Net : Các m ng thông tin .Gov : T ch c chính ph .Info : Các m ng thông tin .Mil : T ch c quân s Có th k t h p lĩnh v c v i mã qu c gia như www.tuoitre.com.vn . s h u 1 tên mi n ph i tr chi phí hàng năm thông qua các công ty y quy n bán tên mi n. 11. Hosting: Khi hoàn t t website ph i ư c ghi lưu vào 1 webserver nào ó thì m i truy c p ư c thông thư ng là các server c a ISP (Nhà cung c p d ch v Internet hay ơn v chuyên d ng). Tùy theo dung lư ng, băng thông và m t s h tr mà chi phí khác nhau. a ch truy c p c a trang Web - 1 t p tin trong 12. URL-Uniform Resource Location: Website http://Webservername/……/File.html Trang ch m c nh không c n khai báo khi truy c p VD:http://www.thoitrangtre.com.vn T c là: http://www.thoitrangtre.com.vn/Index.htm This is trial version Biên so n: Dương Thành Ph t Trang 2 www.adultpdf.com
Bài Gi ng Môn Thi t K Web Ph n 1: Ngôn Ng Thi t K Web HTML 13. Browser: Trình duy t Web dùng c và hi n th các trang Web. Ph bi n hi n nay là: InternetExplorer, Netscape,FireFox. II.SO N TH O TRANG WEB 1. Chương trình so n th o:Trang web là 1 t p tin văn b n không nh d ng, ch a các th (Tag). Vi t b ng mã ngu n HTML trên chương trình so n th o văn b n không nh d ng như: NotePad. Kh i ng : Start/Program/Accessories/NotePad Ghi chú: N u s d ng ch có d u, thì ph i Thi t l p b ng mã Unicode cho trình gõ VietKey, Unikey, • Ch n Font Unicode trong trình so n th o (Format / Font Arial , Tahoma, . . .) • t tên, Lưu & M t p tin:T p tin lưu tr có ph n m r ng là: .htm ho c .html 2. a. Lưu t p tin: T i c a s so n th o: File/SaveFilename: Tên.html (VD: VD01.html) Save as type: AllFilesEncoding: UTF-8 (N u n i dung có d u) Save b. Lưu l i v i tên khác: T i c a s so n th o File/Save As c. M t p tin ã so n th o: T i c a s so n th o: File/Open Ch n t p tin c n m Open 3. Xem trang Web sau khi so n th o:Cách 1: M thư m c ã lưu tr Double Click t p tin .htm Cách 2: Kh i ng trình duy t File/Open Ch n Browser tìm t p tin c n m Ok K t qu hi n th This is trial version Biên so n: Dương Thành Ph t Trang 3 www.adultpdf.com
Bài Gi ng Môn Thi t K Web Ph n 1: Ngôn Ng Thi t K Web HTML III.CÁC TH C A T P TIN HTML 1. Khái Ni m: T p tin HTML là 1 văn b n ch a các th (Tag)- t o các thành ph n c a tài li u. C u Trúc T ng Quát C a Th :Thành ph n ch u tác ng Th óng Th m Tên c a th t trong c p ngo c nh n: < . . . > Có ho c không có các thu c tính Ví d 1: Chào Các B n N i dung s in m Ví d : Chúc các b n h c t t N i dung ch có c 4Ghi chú: Cho phép các th l ng nhau, Cho vi t các th trên cùng 1 dòng ho c nhi u dòng. Nên vi t có c u trúc 2. C u Trúc T ng Quát C a T p Tin HTML: N i dung tiêu Ph n d li u c a trang web . . . : B t u và k t thúc t p tin HTML . . . : Ph n u trang web N i dung tiêu : Hi n th n i dung trên thanh tiêu N i dung trên trang : Hi n th n i dung trên trang. 3. Ví D Minh H a T o t p tin v i n i dung như sau GI I THI U Chào m ng các b n n v i HTML This is trial version Biên so n: Dương Thành Ph t Trang 4 www.adultpdf.com
Bài Gi ng Môn Thi t K Web Ph n 1: Ngôn Ng Thi t K Web HTML 4. V n Ng t Dòng T o t p tin v i n i dung như sau: > BAI THO CO HAI MO CÔ HÁI MƠ Thơ th n ư ng chi u m t khách thơ Say nhìn xa r ng núi xanh lơ Khí tr i l ng l và trong tr o Th p thoang r ng mơ, cô hái mơ Không xu ng dòng như so n th o mà ch t mà r t dòng tùy theo kích thư c c a s trình duy t. t văn b n trong c p th ... ng t dòng t o o n m i, t o dòng tr ng: • ng t dòng không t o o n m i: Chèn th t i v trí mu n ng t dòng • t văn b n trong c p th ... gi các ph n t trên cùng 1 dòng: • Văn b n s b che khu t khi chi u r ng c a s trình duy t không và s hi n thanh cu n ngang. VD: T o t p tin v i n i dung như sau > BÀI THƠ CÔ HÁI MƠ CÔ HÁI MƠ Thơ th n ư ng chi u m t khách thơ Say nhìn xa r ng núi xanh lơ Khí tr i l ng l và trong tr o Th p thoáng r ng mơ, cô hái mơ This is trial version Biên so n: Dương Thành Ph t Trang 5 www.adultpdf.com
Bài Gi ng Môn Thi t K Web Ph n 1: Ngôn Ng Thi t K Web HTML 5. T o Chú Thích t câu ghi chú vào c p th N i dung câu chú thích không hi n th trên trình duy t IV. LÀM TƯƠI TRANG WEB – XEM MÃ NGU N 1. Làm Tươi N i Dung Khi ang hi n th m t trang web trên trình duy t có th xem và i u ch nh n i dung mã ngu n t trình so n th o. Khi ã lưu l i n i dung i u ch nh, t trình duy t ta có th xem l i k t qu theo n i dung m i - Làm tươi: Click bi u tư ng Refesh (Ho c F5) 2. Xem Mã Ngu n: T trình duy t có th xem mã ngu n trang Web: Click Menu View/Source This is trial version Biên so n: Dương Thành Ph t Trang 6 www.adultpdf.com
Bài Gi ng Môn Thi t K Web Ph n 1: Ngôn Ng Thi t K Web HTML Chương 02 CÁC TH NH D NG VĂN B N nh d ng kí t , nh d ng o n o S d ng màu o Chèn ư ng k ngang và ký t c bi t o Hi u ng chuy n ng ch o Văn b n danh sach o I. nh D ng Ký Tư 1. nh d ng Ki u dáng - Style N i dung văn b n N i dung văn b n ư c in m : N i dung văn b n N i dung văn b n ư c in nghiêng : N i dung văn b n N i dung văn b n ư c g ch dư i (chân) : N i dung văn b n N i dung văn b n ư c g ch ngang : 2. Thay i Font, Size N i dung văn b n Xác nh Font cho N i dung văn b n, N u máy truy c p không có FontName1 s l y FontName2 . . . s l y Font m c nh c a trình duy t. Xác nh c ch cho c tài li u giá tr n: T 1 n 7 (8,10,12,14,16,24,36) m c nh là 3. N i dung văn b n Xác n h c ch cho n i dung văn b n VD: T o t p tin v i n i dung như sau BAI THO CO HAI MO CÔ HÁI MƠ Thơ th n ư ng chi u m t khách thơ Say nhìn xa r ng núi xanh lơ Khí tr i l ng l và trong tr o Th p thoáng r ng mơ, cô hái mơ This is trial version Biên so n: Dương Thành Ph t Trang 7 www.adultpdf.com
Bài Gi ng Môn Thi t K Web Ph n 1: Ngôn Ng Thi t K Web HTML 3. Tao ch s Trên/Dư i T o ch s trên cho văn b n Văn b n : T o ch s dư i cho văn b n Văn b n : VD: VAN BAN CHI SO TREN DUOI Văn b n có ch s trên:AX2+BX+C=0 Văn b n có ch s dư i : H2O II. NH D NG ON 1. Thi t l p l trang ..... ... Thi t l p l trái trang (LeftMargin), l trên trang (TopMargin)Theo giá tr n1,n2 ơn v tính là Pixcel 2. Canh l o n văn b n o n văn b n Hư ng: Left Canh trái o n văn b n Canh ph i o n văn b n Right Canh gi a o n văn b n Center Canh u văn b n Justify Các thành ph n c n canh gi a 3. T o văn b n mc m c là dòng văn b n nh d ng khác các dòng văn b n trong n i dung dùng to m c ph n, chương. M i th có ch c năng phân o n, c p 1 l n nh t, c p 6 nh nh t, có th k t h p thu c tính canh l . N i dung văn b n m c c p 1 N i dung văn b n m c c p 2 ..... This is trial version Biên so n: Dương Thành Ph t Trang 8 www.adultpdf.com
Bài Gi ng Môn Thi t K Web Ph n 1: Ngôn Ng Thi t K Web HTML N i dung văn b n m c c p 6 VD: m c c p, 3 canh l gi a 4. T o văn b n chú thích, trích d n Văn b n chú thích Văn b n chú thích ngiêng, cùng dòng so v i văn b n trư c ó. III. S D NG MÀU 1. Các mã màu xác l p màu có th dùng Tên màu hay Tr th p l c phân tương ng. 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 #FFFF00 Fuchsia H ng #FF00FF White Tr ng #FFFFFF Green Lá #008000 Rurple .Tía #800080 Silver Bc #C0C0C0 Yellow Vàng #FFFF00 Aqua Ng c #00FFFF 2. Xác l p màu chung cho trang Web Dùng các thu c tính c a th BODY xác l p: màu n n, màu văn b n, màu các văn b n liên k t... . . . . . N i dung trang Web. . . . . BgColor: Màu n n trang Text: Màu văn b n Link: Màu liên k t chưa truy c p VLink: Màu liên k t ã truy c p Alink: Màu liên k t khi ang tr Mouse 3. Xác l p màu cho văn b n Dùng thu c tính Color c a th FONT xác l p màu: cho n i dung văn b n ch nh. N i dung văn b n VD: Công ngh thơng tin This is trial version Biên so n: Dương Thành Ph t Trang 9 www.adultpdf.com
Bài Gi ng Môn Thi t K Web Ph n 1: Ngôn Ng Thi t K Web HTML IV. Ư NG K NGANG VÀ KÝ T C BI T. 1. ư ng K Ngang : T o ư ng k ngang dài b ng chi u r ng c a s Size: dày Width: r ng (Pixcel ho c %) Align: canh l Left(Trái), Center(Gi a),Right(Ph i) Color: Màu NoShade: Không có bóng VD: