Nối tiếp nội dung phần 1 cuốn sách Các thủ thuật trong Flash & Dreamweaver, phần 2 trình bày các thủ thuật về đưa vào xuất ra và khuôn mẫu, thủ thuật cho các thành phần dựng sẵn và các phần tử hiện có, các thủ thuật đưa phim plash lên site của bạn,.... Mời các bạn cùng tham khảo nội dung chi tiết.
Chương 7: Các thủ thuật đưa vào, xuâ’t khuôn mẫu 233 [ M Thủ th u ậ t 7-21: Đ ú n g v c h ín h x c Có hai cách để đưa h ìn h ả n h vào Flash Một chép dán chúng từ chương trìn h khác thơng qua Clipboard Cách khác dùng File > Im port > Im port to Stage (Ctrl+R Command+R) Import to Library định vị tậ p tin bạn muôn đưa vào hồ sơ Flash (xem hình 7-21-1 h ìn h 7-21-2) Theo bạn cách phù hợp nhâV? Chắc chắn việc chép dán n h a n h hơn, chúng thường dẫn đến k ết không mong muôn N ew Ctrl+N O p e n ctrl+o O pen from S it e ► O pen R e c e n t C lose ctrl+w C lose All Save ctrl+s S a v e and Com pact S a v e A s C tr l+ S h ift+ S S a v e a s T em plate S a v e All / i m p o r t to s t a g e \ O pen E x tern a l Library Publish S e ttin g s C trl+R \ Im p o r t to L ib ry y / Export C tr l+ S h ift+ O C tr l+ S h ift+ F Publish Preview Publish S h if t+ F P a g e S e t u p P rin t ctrl+p S e n d Edit S ite s Exit C trl+Q H ìn h 7-21-1 Cách tot nha’t để đưa liệu b ất kỳ vào Flash sừ dụng lệnh Import Dữ liệu đưa vào thơng qua q trìn h lọc xác, đảm bảo b ạn có k ế t tốt Chúng không nghĩ từ hay để đ ặ t tê n cho thủ th u ậ t này, th ế bạn nên đọc qua thủ th u ậ t vài lần trước tiêp tục P h ần I: Các thú thuật Flash Look in: icj Samples é o í u’ S ’ \é s d m My Recent Documents 4' tJ j M m Desktop ImageReady Files Droplets ậ_ My Docume Documents ) f t Ể Ducky S Dune My Computer DVDMenu fli File name My Network Photomergt Flies of type °pen I All Form ats Carc«i I H ìn h 7-21-2 T hủ th u ậ t 7-22: G hi đ è c c t h iế t lậ p âm th a n h Nếu bạn đưa âm th a n h âm n hạc vào tron g hồ sơ F lash, mục ảm th a n h n én riêng Việc n h ấ p đúp chuột vào b ất kỳ mục ám th a n h Library cung cáp cho b ạn m ột tùy chọn đế thay đổi thiết lập nén cho mục âm th a n h Đây ch ắn m ột đặc điểm cẩn thiết, bạn có hàn g tr ă m mục âm t h a n h bạn muốn c ó th iế t lập n én đó, bạn n h ấ p đúp vào mục âm th a n h thay đổi chúng cách riêng biệt B ạn có th ể làm chuyện khóng nên làm Trong hộp thoại Publish Settings (Ctrl+Shift+F12 Option^Shifì+F12) phía thẻ F lash (xem h ìn h 7-22-1), bạn th tùy chọn nằm với tên gọi “Override Sound S ettin g ” Nếu b ất kỳ ám th a n h Library th iế t lập nén Default, có th iết lập nén lây từ xuât Bạn có th ể th iê t lập chất lượng t o n cuc cho âm th a n h dòng (S tream audio) ảm th a n h kiện (Event audio) điều giúp cho bạn tiêt kiệm rát nhiều thời gian 235 Chương 7: Các thủ thuật vế đưa vảo, xuất vả khuôn mẫu Publish Settings C u rre n t p ro file: D efault Formats F la sh kã É j + | tâ | o | â | HTML Version: Load order: ActionScript version: O ptions: B o tto m up V A ction S crip t Lv ị S e t t i n g s 1G e n e r a te s iz e re p o rt n n P r o t e c t from import Omit trace actions 1D eb u g g in g p erm itte d 1Compress movie w \ Optimize fo r Flash Player r65 P a s s w o rd : JPEG quality: 80 100 Audio s tr e a m : M P3, 16 k bp s, M ono Set ] Audio e v e n t: M P3, 16 k b p s, M ono e t| J 1O verride sound settings 1E xport device sounds Publish OK C a n ce l H ìn h 7-22-1 Sound Settings OK C o m p re ssio n : P r e p r o c e s s in g : C a n ce l C o n v e rt s t e r e o to m ono Bit te : 10 kbps Q uality: Fast H ìn h 7-22-2 II ® M 236 Phần I: Các thủ thuật Flash Nếu bạn sử dụng đoạn âm th a n h MP3, chúng tự dộng dược thiết lập để sử dụng th iế t lập n én có, t h ế chúng bỏ qua thiết lập nén toàn cục trừ bạn buộc chúng bị ghi đè (xem hình 7-22-2) Bạn có th ể nén đoạn âm th a n h để có k ết tốt n h ất cho T hủ th u ậ t 7-23: C h ỉn h sử a b itm a p Sau bạn đưa hình ả n h bitm ap vào hồ sơ Flash, bạn nh ận bạn cần phải chỉnh sửa lại đơi chút Như bạn biết, Flash khơng th ể chỉnh sửa h ìn h ả n h bitm ap Nhưng Flash lại có t h ế m ạnh có th ể gọi m ột chương trìn h khác, chảng h ạn Photoshop Fireworks, để thực việc chình sửa hình ảnh thay cho Hãy định vị hình ản h bitm ap Library trê n Stage, nhấp nút chuột phải vào hìn h ảnh chọn Edit with (xem h ìn h 7-23-1) Ban hỏi để xác định chương trìn h bạn mn dùng để chỉnh sửa hình ản h chương trìn h sau mở với h ìn h ản h sẵn sàng đê thay đơi Khi bạn hoàn tát, lưu lại th ay đổi quay trở lại Flash Bạn thây th a y đổi tự động cập n h ậ t hồ sơ R enam e M ove to New Folder D ele te Edit with Firew orks L in k a g e U pdate H ìn h 7-23-1 Nếu bạn cài đ ặt Fireworks, bạn có th ể tiết kiệm nhiều thời gian cách nhâ’p chuột vào mục Edit with F irew orks thay chọn Edit with Firew orks làm việc với F lash tốt so với chương trinh khác hai sản p h ẩm Macromedia Chương 7: Các thủ thuật đưa vào, xuất khn mẫu 237 g o ® Thủ th u â t 7-24: K hóa n ó la i • • Bạn sẵn sàng để chia sẻ ý tưởng, k ết cơng việc th ậ m chí mã hóa tùy biến Điều đặc biệt bạn đến với Flash Tuy nhiên, có m ột số điều r ấ t đặc biệt mà bạn mn giữ lại cho riêng Nếu điều bạn nghĩ thủ th u ậ t giúp bạn thực điều Publish Settings ã i | É j + ị^ll o I CTI C urrent profile: D efau lt Formats F la sh HTML V ersion : Load o rd e r: A ction Scrip t v e rs io n : F la sh P la y e r (Si In fo iJ§ S e t t i n g s B o tto m up A ction Scrip t n C o m p re ss m ovie Optim ize fo r F la sh P la y e r r6 P a s s w o rd : 80 JPE G q u ality : 100 Audio stream : M P3, 16 k b p s, M ono [ Set ] Audio e v e n t : M P3; k b p s, M ono [ Set ] □ O v e rrid e so u n d s e ttin g s □ E x p o rt d e v ic e so u n d s Publish OK C a n ce l H ìn h 7-24-1 Trong hộp thoại Publish Settings (Ctrl+Shift.+F12 Option+Shift+Fl2), truy xuất th è F lash đảm bảo rằn g bạn chọn mục Protect From Import trước xuất phim m ình (xem hình 7-24-1) Điều M 238 P hần I: Các thù thuật Flash ngản n h p h t triể n khác tải phim SWF cùa bạn vào dự án họ tuyên bô rằn g họ Đây khơng phải giải pháp hồn hảo có nhiều người sử dụng chương trìn h dịch ngược tập tin SWF để ãn cắp k ết bạn, bạn khơng có lý gi dê cho họ dễ dàng Cũng giống bạn có xe, tê n trộm có th ể lấy bạn phải phòng ngừa để điều xảy khó Chúng tỏi đề nghị bạn nén ln chọn tùy chọn Nói cho cùng, bạn chia sẻ tập tin FLA với người bạn muôn Thủ th u ậ t 7-25: H sơ th ô n g tin x u ấ t Publish Settings X C u rre n t profile: F o rm a ts F lash , HTML Flash Player V ersion : Load o rd e r: B o tto m up A ction Scrip t v e rs io n : O p tio n s : In fo V A ction Scrip t S e t t i n g s V Q G e n e r a te siz e re p o rt □ P r o t e c t from im port I I Omit; t r a c e a c tio n s □ D eb u g g in g p erm itte d [~~l C om pr e s s m ovie O p tm i 2e fo r Flash Player r65 Password: JPEG qu ality: 80 J I 100 Audio stream: MP3, 16 kbps, Mono Set Audio event: MP3, 16 kbps, Mono !□ O verride sound settin gs [~1 E xport device sounds P u b teh H ìn h 7-25-1 or Carte* 239 ỊÃỊ' Chương 7: Các thủ thuật vé đưa vảo, xuất khuôn mầu ■ H 3I Create New P ro file Profile name: my profile OK I C an cel H ìn h 7-25-2 P u b lis h S ettin gs Current profile: my profile Form ats Flash il HTML File: Type: 0 Flash (.s w f) U n titled-1 sw f HTML (.htm l) U n titled-1 html £ U n title d -l.g if 05 Im ag e (.lp g ) U ntitled-1 jpg £ Im ag e ( png) U ntitled-1 png □ g if Im ag e (.g if) □ jp e g □ pn g Windows P ro je cto r ( e x e ) U n titled -1 e x e M acintosh P ro je cto r U n title d -l.h q x QuickTime ( mov) U n titled-1 mov £ Ễ3 n n U se D efault Nam es Publish OK C ancel H ìn h 7-25-3 Hãy truy xuât hộp thoại Publish S ettings (Ctrl+Shift+F12 Option+Shift+F12) n h ấ p n út Create New Profile (nút có hình dấu cộng trê n đó) - (xem h ìn h 7-25-1), đ ặ t tê n cho hồ sơ nhấp OK (xem hình 7-25-2) Bây chọn m ột số định dạng thẻ Form ats, thiết lập sô tùy chọn, n h ấ p n út Import/Export, chọn Export (xem hình M P hần I: Các thú thuật Flash 240 7-25-3) Lưu lại hồ sơ (đây m ột tập tin XML) băng cách n h ấ p nút Save (xem hình 7-25-4) Bây b ạn có th ể sử dụng hồ sơ xuất nàv để áp dụng cho hồ sơ Flash m ình cần m khơng phải thực chi li chút Với tấ t tùy chọn bạn có xuất phim, th ậ t phiền tối phải thay đổi th iế t lập mặc địn h lần tạo tập tin Ví dụ, có số người khơng sử dụng tùy chọn xuâ't tập tin HTML Họ muôn xuất tập tin SWF thực việc lại trìn h soạn thảo tr a n g web n h D ream w eaver chẳng hạn Tuy nhiên, tùy chọn xuât HTML tùy chọn mặc định, điều có nghĩa bạn phải bỏ chọn bạn tạo m ột hồ sơ Flash Không, bạn không muốn vậy! E x p o rt P r o file Save n ? :!x Publish Pfolites Q d e f a u lt My R ecen t Documents ầ D esktop My Documents My Computer i Eg |J File name My Network S a v e as type: Profile (" xml) Ca-cti ^ H ìn h 7-25-4 Một nhược điểm n h ấ t thủ th u ậ t hồ sơ tùv biến bạn không liệt kê bạn b đẩu tạo hồ sơ Flash Bạn phải sử dụng nú t Im port/Export để đưa vào hồ sơ xuất bạn lưu trước Chương 7: Các thù thuật đưa vào, xuâ't khuôn mẫu 241 T hủ th u ậ t 7-26: Đ ế n v i H o lly w o o d Trải qua nhiều năm , F lash sử dụng cho nhiều loại dự án khác Sau này, n h p h t triển bổ sung dạng r ấ t hâp dẫn vào danh sách F lash sử dụng để tạo hoạt hình đủ dài dùng cho video phim Ai m biết được? Một điều chắn khơng khó để thực điều v ề bản, bạn cần tạo phim m ình sau x’t chúng dạng phim QuickTime (xem h ìn h 7-26-1) AVI (xem hình 7-26-2) sau bạn có th ể chỉnh sửa tích hợp vào chương trìn h chỉnh sửa video b ấ t kỳ, chẳng h n n hư P rem iere Final Cut Pro Điều bạn cần nhớ tuân thủ quy tắc thực điều Export QuickTime (x~| Width Dim ensions: Height 400 550 OK M atch movie C ancel Alpha: Auto L ay er: Auto Stream ing Ị — I U s e Q U|Ck j | m e com pression S e t tin g s None C o n tro lle t: Play b ack : r~ ỈL o o p I o I P a u sed a t s ta rt Play e v e ry fram e (Will d isable sound if en a b led ) File: F la tte n (M ake s elf-co n ta in ed ) H ìn h 7-26-1 Trước hết, đảm bảo r ằ n g hoạt h ìn h bạn nằm trê n bảng tiến trìn h có th ê xem th ông qua việc chạy th chế độ sáng tác (không sừ dụng ch ế độ T est Movie xuất tập tin SWF) Đồng thời, không sử dụng biểu tượng đoạn phim hoạt hình lồng Khônơ sử dụng b ất kỳ m ột loại h n h động Không sử dụng nút n h ấn Cuôi th iế t lập thông số FPS th n h 24 30 tùy thuộc vào dự án bạn (xem h ìn h 7-26-3) n r P h ần I: Các thủ thuật Flash 242 Export Windows AVI Height Width Dimensions: tH il Video form at: f 233 X OK pixels C a n cel Maintain a s p e c t ratio 16 bit color r C o m p ress video Sm ooth Sou n d form at: d H ìn h 7-26-2 Document Properties Dimensions: M atch: 550 px (w idth) Printer 400 px X Contents (height) Default Background color: OK Cancel H ìn h 7-26-3 Chúng tơi đề nghị bạn sử dụng khn mẫu Broadcast có kèm theo Flash MX 2004 Khn mẫu có k èm theo sơ đường dản đê đảm bảo rằn g nội dung bạn n ằm tro n g khuôn khổ cho phép Các th iết lập khác kích thước phim có th ể xác định cách xem xét định dạng xuất (DV, HiDef ) Có nhiều thõng sỏ’ đè đề cập đến Bạn cần tu ân thủ quy tắc ỡ trê n chuyện tốt đẹp T hủ th u ậ t 7-27: c ẩ n th ậ n v i c h u y ệ n tô i ưu Chúng tòi biết điều nghe trái ngược, sô trường hợp việc tùy biên có thê gảy vân đề mà bạn có thẻ khóng n r 450 P hần II: Các thủ th u ậ t Dreamweaver bạn tiêp theo dấu hai chấm (:) sau m ật khấu truy cặp cùa bạr, tiếp đến @ địa website Log On As Either the server does not allow anonymous logins or th e e-mal ackfress was not accepted FTP server: localhost User name: Password: After you tog on, you can add this server to your Favorites /A ^ and r e tim to * e a s iy FTP does not encrypt or encode passw ords or d a ta before sen d n g them to the server To p rotect th e security of your passw ords and d ata, use Web Folders (WebDAV) Instead Learn more about using Web Folders, n Log on anonymously □ Save password Cancel H ìn h 14-5-1 Đây cách thức cung cấp k h ả n ă n g truy cập FTP cho khách hàng, người không sử dụng Dreamw eaver T hủ th u ậ t 14-6: T h am g ia đ ộ i n g ũ Những người sử dụng D ream w eaver áp dụng behavior đầu tiê n th n g đối m ặ t với m ộ t lựa c họn k h ó k h ă n - thực h iệ n chọn lựa sai làm m ất k h ả n ăn g tương thích tr ìn h duyệt Ví dụ, giả sử rằn g bạn áp dụng behavior Show/Hide Layer cho h m h ảnh bạn mn behavior kích h oạt người dùng di chuyển chuột lèn trén h ìn h ảnh, t h ế b ạn chọn kiện o n M o u s e O v e r tư danh sách Events Nhưng lựa chọn o n M o u s e O v e r thi sao9 Có khác biệt đâu chọn lựa đúng? Bạn th ấ y hai chọn lựa tùy chọn Show Event For bạn có k èm theo trìn h duvệt IE từ 4.0-6.0 N etscape 6.0 Hãy chọn m ột kiện khơng có behavior áp dụng cho th â n thẻ Điều châp n h ậ n dược bạn không quan tâ m đến việc hiệu ứng Rollover không làm việc trình duyệt N etscape 4.X Tuy nhiên, chọn kiện với va bạn không Chương 14: Các kỹ th u ậ t trìn h duyệt thê giới thực 451 m phải lo lắng gì; behavior áp dụng cho thẻ thêm vào cách tự động điều có th ể áp dụng cho trìn h duyệt từ 4.X trở lên H ì n h 14-6-1 Thủ th u ậ t 14-7: T h iế t lậ p lề tr a n g ch o N e tsc a p e 4.X Một vấn đề gây nhức đầu đơi với trìn h duyệt Netscape 4.X cách xử lý lề trang Với In te rn e t Explorer 4+ Netscape 6.X, bạn việc sử dụng css để th iế t lập lề thẻ th n h xong; với phiên trước Netscape, bạn phải tốn công sức đôi chút Trước hết, bảng kiểu chuyên dành cho Netscape - bảng kiểu bạn liên kết (sử dụng th ẻ link) đưa vào (sử dụng ©import) - th iế t lập lề tr ê n trá i th n h -10 Vâng -10 (âm mười) Tại sao? Xin bạn đừng hỏi Kê' đến, hộp thoại Page Properties (Modify > Page Properties), th i ế t lập M argin W idth Margin H eight th n h Có điều ý lề phải hỗ trợ Netscape 4, th ế thủ th u ậ t không trợ giúp cho bố cục bảng th iết lập 100% Với hai th i ế t lập HTML trên, vấn đề lề Netscape 4.X khắc phục css Thủ th u ậ t 14-8: K iểm tra tr ìn h d u y ệ t k h ô n g c ầ n đ ế n tr ìn h d u y ệ t Hiện có r ấ t nhiều loại tr ì n h duyệt sử dụng trê n In ternet Làm để k iểm t r a t r a n g \veb b n t ro n g t r ì n h duyệt tro n g bạn lại khơng có đù loại tr ìn h duyệt? Target Browser Check Dreamweaver m ột đặc điểm cho phép bạn kiểm tr a toàn site với 16 loại tr ì n h duyệt phổ biến Để xem k há năng, chọn I T P hần II: Các thù th u ậ t Dreamweaver 452 Window > Results, sau n h ấp vào th ẻ T arg et Browser Check, tiếp đến chọn mũi tê n màu xanh để b ắ t đầu D ream w eaver thực việc kiểm tr a hồ sơ bạn với tr ìn h duyệt m b ạn chọn thông báo k ết cửa sổ Results Việc chọn t ấ t trìn h duyệt tron g T arg e t Brow ser Check dẫn đến bạn với việc “Bạn không th ể làm hài lòng t ấ t người lúc được” trừ tra n g web b ạn th u ầ n túy văn Tốt n h ấ t bạn chi chọn tr ìn h duyệt m bạn muốn hỗ trợ chạy chức T arget Browser Check với loại tr ìn h duyệt Việc chọn loại trình duyệt tùy thuộc vào việc thống kê tr ìn h duyệt m người dùng sừ dụng Nếu thống kê cho th ấ y có kho ản g 15% người dùng sử dụng trình duyệt N etscape 2.0, bạn cần kiểm t r a tín h tương thích tra n g web với loại trìn h duyệt Để chọn loại trin h duyệt cần kiểm tra, nh ấp vào mũi tê n trỏ xuống k ế bên mũi tên màu xanh chọn mục S ettings (xem h ìn h 14-8-1) Hộp thoại T arget Browsers để bạn chọn tr ìn h duyệt cần kiểm t r a (xem h ìn h 14-8-2) Check Target Browsers Check Target Browsers for Entire 5ite Check Target Browsers for Selected Files/Folders in Site Edit Ignored Error List S e ttin g s ễ Complete H ìn h 14-8-1 Target Browsers Mramum browser versions: OK □ Microsoft IE for Macintosh 5.2 Microsoft In te rn e t Explorer 5.0 □ Mozilla 1.0 w u u Netscape Navigator 6.0 Opera 2.1 Safari 1.0 H ìn h 14-8-2 Caned A * A * Help Chương 14: Các kỹ th u ậ t trìn h duyệt thê giới thực 453 M Thủ th u ậ t 14-9: G hi ch ú có đ iề u k iệ n Một điều thực tê tấ t trìn h duyệt th ể mã lệnh theo m ột cách Ngay trìn h duyệt loại khác phiên có th ể gây vấn đề Đó lý có nhiều mã “p h t tr ìn h duyệt” có trê n web Sau trìn h duyệt xác định, người dùng chuyển tới tra n g %veb khác phù hợp mã lệnh J a v a S c rip t tương ứng thực Nếu bạn người quan tâ m đến việc th a y đổi đặc biệt dàn h cho Internet Explorer, b ạn th ấ y ghi có điều kiện cách đơn giản để thực Các ghi có điều kiện n h ậ n biết trình duyệt In te r n e t Explorer phiên trở lên, trìn h duyệt I n te r n e t Explorer xem chúng ghi HTML bình thường chúng khơng th ể k ết Bạn đ ặt th ứ bạn muôn p h ầ n mở ph ần đóng ghi có điều kiện Cú pháp đơn giản Ví dụ: Bạn n ên cập n h ậ t tr ìn h d u yệt m ìn h với IE < ! [endif] > Bạn có th ể kiểm t r a p h iê n b ản trìn h duyệt khác sử dụng toán tử chẳng h n n h g t ứng với lớn hơn, g t e ứng với lớn b ằ n g vài tốn tử khác B ạn có dan h sách đầy đủ toán tử site MSDN Thủ th u ậ t 14-10: B trí, sắ p đ ặ t Nếu bạn quan s t m ột tr a n g dựa trê n lớp (layer-based) trìn h duyệt kh ơng hỗ trợ lớp, bạn th â y mớ hỗn độn đủ thứ Tuy nhiên, có m ột kỹ th u ậ t cung cấp cho bạn giải pháp tốt n h ấ t cho hai nhóm tr ìn h duyệt có khơng hỗ trợ lớp - đặt Các trìn h duyệt trước khơng hiểu th ẻ thê hồn toàn bị bỏ qua bạn biết rằ n g D ream w eaver sử dụng thẻ để tạo lớp theo mặc định Tuy nhiên , trìn h duyệt lại hiểu th ể nội dung thẻ Bạn n ên đ ặ t th ẻ hồ sơ HTML theo thứ tự mà chúng xuất hiện: ví dụ, vùng tiêu đề cần đặt trước nội dung đên lượt m ình, p h ầ n nội dung đ ặt trước phần cuôi trang D reamweaver chèn vào m ã lệnh tùy theo vị trí cùa trỏ Vậy làm cách để b ạn có th ể xếp lại thứ tự thẻ ? Mặc dù P hẩn II: Các thủ th u ậ t Dreamweaver bạn có th ể cắt dán m ã lệnh, nhiên dề nghị bạn nèn sử dụng phương pháp kéo biểu tượng lớp vào dũng vị trí Nếu bạn khơng thấy biểu tượng nhỏ màu vàng đại diện cho lớp, bạn cần đảm bảo tùy chọn Anchor Points for Layers chọn ph ần Invisible Elements hộp thoại Preferences (Edit > Preferences) - (xem hình 1410-1) View > Visual Aids > Invisible E lem ents (xem hình 14-10-2) kích hoạt P references Category General Accessibility Code Coloring Code Formal: Code Hints Code Rewriting CSS Styles File Types / Editors Fonts H ighlighting Invisible Elements Layers Layout Mode New Document Office Copy/Paste Panels Preview in Browser Site Status Bar Validator InvjsẾ)ỉe Elements Show: J i Named anchors E jfl □ Scripts [IJ n Comments [3 D u n e breaks Ì* Ấ r~l CJent-Side gnaoc maps [= J 0 L-a J Embedded styles Hidden form fields P I Form defcrreter _ ( [^ A n c h o r points for la y e rs ) a Id ẽ f S n c N * points fe d fo r aligned elements Visual Server Markup Tags (ASP, CFML, ) [* Ậ r iN o n v is u a l Server Markup Tags (A5P CFM-, ■■) m l~~l css drspiay: none Show dynamic te x t as: M P e c o rd s e t.F ie ld )Server-Side includes: show contents of induded Me OK H ìn h 14-10-1 He* 455 M Chương 14: Các kỹ th u ậ t trìn h duyệt thê giới thực View Code ✓ Design Code and Design Switch Views c trl+ Refresh Design View F5 Head Content C trl+S hift+H S/ Noscript Content Table Mode ► Visual Aids 01 Code View Options ► Rulers ► Convert > Tables to Layers Dreamweaver có thê giải pháp n h a n h chóng, n h iê n lại dao hai lưỡi Lệnh k h hoàn hảo Mọi dối tượng tro ng th ẻ , cho dù có n ằm bảng hay không, đ ặt vào lớp Bạn có h ìn h dung điều không? Mỗi ô tro n g bảng đặt vào lớp riêng Ví dụ, bạn chuyển đổi tra n g với bảng 3x5, bạn n h ậ n m ột tr a n g với 15 lớp! K ết luận: Bạn nên sử dụng lệnh Convert > Tables to Layers m ột cách th ậ n trọng T í51 1 1 1 1 1P1 1 17I 1 1 11110101 i l l 0: ỈI5iT“ 12(35 12551 1111111I I I 111ll I 11I 1I 11111I 10 11 12 13 14 15 H ìn h 14-12-1 Chương 14: Các kỹ th u ậ t trìn h duyệt t h ế giới thực Page Properties Template Properties Selection Properties Ctrl+J Edit Tag QuickTag Editor Ctrl+T Mate Link r erni: Urit Ctrl+L Ct'il+f.hiM+ O p i t f t L m ' r f j c -3 ® r LinkTarget ► Table Image Frameset ► ► ► Navigation bà ’ ► ► Arrange Align • Layers to Table Library Templates Timeline ► ► H ìn h 14-12-2 [Ẽõ ■710 m m *m fĩÕÕ“ ỊĨẼÕ Í2ÕÕ I25C- I I I I I I I I I I I I I I I I I I I I I ẵ I I I I I I I 1I I I I I I I I I I I I I I I I I I I I I I I I 4)is)is P i ụm (7 10 ill j!2 [13 14 15 H ìn h 14-12-3 Thủ th u ậ t 14-13: K h ô n g p h ả i iF m e Các bạn có th ể tạo ảo giác iF ram e IE với chút sau: html { border: #333333 lOOpx solid; css P hẩn II: Các thủ th u ậ t tro ng Dreamweaver Hãy tạo kiểu Dreamw eaver cách n h ấp vào biểu tượng New Style n ằm p h ần b ản g điều khiển css Đảm bảo rằn g mục Selector Type: Tag chọn Chọn nơi bạn muốn css đ ặt m ã lệ n h tron g hồ sơ h iệ n tạ i tro n g m ột tập tin css bên sau nh ấp OK Di chuyển đến n hóm Borders hộp thoại CSS Style Definition for HTML chọn tùy chọn cho đường biên Khi hoàn tấ t, n h ấp OK Sau xem qua k ế t bạn IE Bạn t h â y r ằ n g t h a n h cuộn t r ì n h du y ệ t bị kéo vào p h ía tro n g tra n g tạo ảo giác iFram e (xem h ìn h 14-13-1) H ìn h 14-13-1 T hủ th u ậ t 14-14: T b ỏ m v iệ c th e o th ó i q uen Bạn quen thuộc với việc chuyển kiểu hồ sơ Đó cách mà trinh duyệt đại (IE, NS phiên trờ lên) th ể tr a n g \veb theo chế độ dựa trê n chuẩn chặt chẽ ch ế độ lỏng lẻo gọi thói Chương 14: Các kỹ th u ậ t t rìn h duyệt t h ế giới thực BI 459 quen, phụ thuộc vào loại hồ sơ khai báo Giơng có lời mách nước khác cho n h th iế t k ế tạo tra n g theo XHTML Trong phiên trước D ream w eaver có kèm theo khai báo mã XML đầu tr a n g XHTML T h ậ t không may, điều đưa IE vào chê độ làm việc theo thói quen, làm cho tra n g th ể theo cách khác với cách th ể Bạn h ẳn cảm thây vui biết với D ream w eaver MX 2004, bạn khơng phải lo lắng khai báo m ã XML n ằ m phía trê n thẻ - chúng khơng chèn vào cách tự động Thủ th u ậ t 14-15: Đ iể u g ì x ả y n ế u k h n g có DOCTYPE? Pieteiences I X l| VaMator Category G e n era l A ccessibility C o d e C oloring C o d e F o rm at C o d e H ints C o d e R ew ritin g C SS S ty le s File T y p e s / E d ito rs F o n ts H ighlighting Invisible E le m e n ts L ay e rs L a y o u t M ode N ew D o c u m e n t O ffice C o p y /P a s te P an els P rev iew in B ro w se r S ite S ta tu s Bar If no DOCTYPE is detected, validate against: □ HTML □ HTML HTML A , a □ XHTML Strict □ XHTML tra n s itio n a l □ XHTML f r a m e s e t I n t e r n e t e x p lo re r e x te n s io n s □ I n t e r n e t e x p lo re r e x t e n s i o n s □ N e ts c a p e N a v ig a to r e x te n s io n s □ N e ts c a p e N a v ig a to r e x te n s io n s □ B asic C o ld F u sio n □ C o ld F u s io n □ 1— C o ld F u s io n 3.1 ễ- 1 J — V - O p tio n s DC Cancel Help H ìn h 14-15-1 D reamweaver MX 2004 có k h ả n ăn g kiểm t r a tín h hợp lệ tra n g web Nhưng có nhiều chuẩn vveb - làm thê đê Drearmveaver biết chuẩn để đ n h giá? Cũng giống dịch vụ kiểm tr a tín h hợp lệ, đầu tiê n D ream w eaver k iể m tra xem tập tin có k h báo M Phần II: Các thủ th u ậ t tron g Dreamweaver 4™ DOCTYPE khơng - có, dùng DOCTYPE n h chuần đê đán h giá Nhưng điều xảy r a n hư khơng có khai báo DOCTYPE? P h ầ n lớn hồ sơ D ream w eaver rơi vào nhóm bây giờ, tập tin mặc định tạo khơng có khai báo DOCTYPE Trong trường hợp này, D ream w eaver sử dụng gi khai báo nhóm V alidator hộp thoại Edit > Preferences (xem hìn h 14-15-1) T hủ th u ậ t 14-16: T h a n h tr n g th i x in h xắn File (Ỉ Edit View Favorites Tools ©aa Help 1H ’ @ Allow V Adcfreis Q-l.htm £ H ìn h 14-16-1 Quan s t th a n h tr n g th i n ằ m cuổi tr ì n h duyệt Thường tr n g th i cung cấp th ơng tin hữu ích, ch ẳn g h n n hư trình tải tr a n g web URL liên k ế t ứng với vị trí trỏ Ban có thè sử dụng th a n h trạ n g th i để th ể th ô n g báo quyền người dùng di chuyển lên m ột h ìn h ảnh Đôi khi, bạn sử dụng th a n h tra n g thái để mô tả ngắn gọn h ìn h ản h (xem h ìn h 14-16-1) D ream w eaver giúp bạn tạo thô n g điệp tr ê n th a n h tr n g th i m ột cách dẻ dàng với behavior Set Text of S tatus Bar Đầu tiên, tạo liên kết cho hình Chương 14: Các kỹ th u ậ t trìn h duyệt t h ế giới thực 461 ® ảnh Liên k ê t có th ể liên k ế t thực rỗng (null) sau nháp vào nút Add (+) tron g g điều khiển Behaviors chọn Set Text > Set Text of S tatus B ar (xem h ìn h 14-16-2) Khi hộp thoại xuât (xem hình 14-16-3), n h ập vào thơng điệp bạn sau nh áp OK Hãy đảm bảo rằn g bạn chọn kiện bảng điều khiển Behaviors Trong trường hợp m ình, bạn chọn o n M o u s e O v e r đê behavior áp dụng cho th ẻ bao quanh thẻ (Dreamweaver bổ sung thẻ n hư chưa có thẻ này) - (xem h ìn h 14-16-4) Nếu bạn muôn t ắ t th ông điệp kh i trỏ di chuyển khỏi h ìn h ảnh, áp dụng behavior lần th ứ h ai, lần không bổ sung thông điệp bạn việc để trô ng vùng th ông điệp n h ấp OK hộp thoại xuât Và bạn đừng quên th iế t lập kiện < A > o n M o u s e O u t (xem hìn h 14-16-4) H ãy đảm bảo rằn g bạn xem qua tra n g web để c h ắ n r ằ n g t h ô n g đ iệp b n x u ấ t h iệ n tro n g t h a n h t r n g th i theo ý bạn; bạn n ên giới h n sô' ký tự cho vừa với chiều rộng th a n h tr n g thái Call JavaScript Change Property Check Browser Check Plugin f , V -! ' V - Go To URL Open Browser Window Play Sound Popup Message Preload Images Timeline Show Events For Get Mote Behaviors H ìn h 14-16-2 11*462 P hẩn II: Các thủ th u ậ t Dreamweaver r — _ ' Set Text of Status Bar M essage: X - I OK Bai bien Nha Trangl I [ CarcH J H ìn h 14-16-3 !! ▼Tag o f f ~"'l!r*lJEị T BehaviorTwSBBI ^ ^ F ^ I Attributes ” < A onMouseOut < A > onMouseOver J Ơ Set Te • t of S t Set Text of St H ìn h 14-16-4 T hủ th u ậ t 14-17*ế T h a y đ ổ i k íc h th c trình duyệt nhanh Việc có k h ả năn g th ay đổi kích thước cửa sổ trin h duyệt bạn thử site m ình r ấ t tiện lợi Chỉ cần ch ú t mả lệnh JavaScript, bạn có th ể thay đổi kích thước p h ần lớn cưa sổ trinh duyệt H àm resizeTol) cho phép bạn xác địn h chiều rộng va chiều cao để làm thay đổi kích thước cửa sổ trìn h duyệt đến kích thước xác định Hãy tạo tra n g web D ream w eaver m sau ban xem trìn h duyệt đưa vào mục F avorites Bookmark Nhấp vào mục H yperlink n ằ m nhóm Common th a n h Insert (xem hình 14-17-1) Hộp thoại H yperlink xuất h iện (xem hình 14-17-2) Trong trường Text, n h ập vào văn bạn muốn hiển thị Favorites/Bookmarks, chẳng h n Resize to 800x600 T r o n g trường Link, nh ập vào mã lệnh j a v a s c r i p t : resizeTo (800, 600) sau dó nháp OK Bây giờ, xem tra n g web trìn h duyệt N h ấp nút chuột phải vào liên k ết chọn Add to Favorites Add Bookmark (hỗc mót lệnh tương tự tùy theo tr ìn h duyệt) từ menu ngữ cảnh xuất 'xem hình 1417-3) Nêu bạn th ơng báo rằn g bạn làm khóng an tồn, chấp n h ậ n để đưa tr a n g \veb vào d an h sách Favorites Một sơ trìn h duyệt th ậ m chí cho phép bạn n h ấ p kéo liên kết vàc th a n h cơng cụ trìn h duyệt để h àm làm việc giống n hư m ột nút Chương 14: Các kỹ th u ậ t trìn h duyệt thè' giới thực 463 Ị M nhấn Giờ đây, bạn mn thay đổi kích thước cửa sổ trìn h duyệt, bạn cần chọn tra n g n ằ m d an h sách Favorites mà bạn vừa tạo H ìn h 14-17-1 H y p e rlin k Text: Link: |x j OK Resize to 800x600 javascript:resizeTo(800,600) u j| Ê3 m Target: Title: Cancel Help Access key: Ị Tab index: H ìn h 14-17-2 E I Save Flash Menu Open Open in New Window Save Target As Print Target Copy Shortcut Download using FlashGet Edit with XML Spy Liatro SWF Decoder Catch Sothink SWF Catcher Properties H ìn h 14-17-3 ► a 464 P h ần II: Các thù t h u ậ t tron g Dreamweaver T hủ th u ậ t 14-18: L o i tr th a n h c n g cụ h ìn h ả n h tr o n g tr ìn h d u y ệ t IE Duyệt In te rn e t với trìn h duyệt IE khơng sớm muộn bạn bắt gặp th a n h công cụ h ìn h ản h (xem h ìn h 14-18-1) Thơng thường hình ảnh có kích thước hcặc lớn 200x200 pixel làm cho th a n h cõng cụ hình ản h xuất hiện, có yếu tố khác có th ể làm cho xuất với h ìn h ảnh nhỏ hơn, chảng h ạn 124x124 pixel Để làm cho th a n h cơng cụ h ìn h ảnh không xuất hiện, bạn cần bổ sung thẻ phần đầu tra n g web Trong menu Head nằm nhóm HTML th a n h Insert, chọn mục M eta (xem h ình 14-18-2) Chọn tùy chọn HTTP-Equivalent dan h sách Attributes, nhập im a g e toolbar trường Value, nhập n o trường C ontent sau nhấp OK (xem h ìn h 14-18-3) Thẻ m eta chèn vào phần đầu trang sau: Bạn có t h ể k iể m s o t t h a n h công cụ th e o từ n g trư n g hợ p cụ t h ể b ằ n g cách bổ sưng thuộc tín h g a l l e r y i m g cho th ẻ với giá trị no Bạn thực điều với bảng kiểm soát P roperty chế độ Code H ìn h 14-18-1 ... điểm có Flash MX 20 04 (xem hìn h 7 -2 8 -2 ) Hộp cảnh báo ln th ể theo mặc định cho dù bạn có không sử dụng đặc điểm Flash MX 20 04 H ìn h 7 -2 8 -2 246 P h ẩ n I: Các thú t h u át Flash. .. 7 -2 2 -1 Sound Settings OK C o m p re ssio n : P r e p r o c e s s in g : C a n ce l C o n v e rt s t e r e o to m ono Bit te : 10 kbps Q uality: Fast H ìn h 7 -2 2 -2 II ® M 23 6 Phần I: Các thủ thuật. .. ế Flash chuyên nghiệp n hư bạn D ata ► Em bedded Video ► Media * Movieclip ► Sou nd ► i - H ìn h 8 -2 - 1 Go to URL H ìn h 8 -2 - 2 C hư ng 8: Thủ thuật cho thành phần dựng sẩn phần tử 24 9