Ebook Các thủ thuật trong Flash & Dreamweaver: Phần 3 - Nguyễn Trường Sinh (chủ biên)

Phần 9 cuốn sách Các thủ thuật trong Flash & Dreamweaver giới thiệu tới người đọc các kỹ thuật trình duyệt thế giới thực; các phương trình cháy bùng nổ; tạo nhanh trang, trang mẫu và thư viện; những phần tốt nhất của Dreamweaver, các thủ thuật áp dụng phía máy chủ. Mời các bạn cùng tham khảo nội dung chi tiết.

in Browser T ấ t cả các t r a n g sẽ được mở r a trong cùng một cửa sổ trìn h duyệt để b ạn có t h ể duyệt qua chúng th ô n g qua nút Back hoặc chúng sẽ được mở ra tro n g n h iề u cửa sổ tr ì n h duyệt để b ạn xem H à n h vi này còn

M 466 P h ầ n II: Các th ủ thuật, tro n g Dreamweaver

tùy thuộc vào p h i ê n b ả n t r ì n h d uyệt, h ệ đ iều h à n h b ạ n đ a n g sử dụng và những thông số b ạ n t h i ế t lậ p t r o n g m ộ t sô' t r ì n h duyệt

đó n h ấp vào mục Preview in B row ser tro n g d a n h sách Category ờ phía trá i (xem h ìn h 14-20-1) N h ấ p n ú t Add (+) Hộp thoại Add Browser sẽ xuất hiện (xem h ìn h 14-20-2) H ãy k h oan cung cấp cho trin h duyệt một

tê n gọi vì nó sẽ bị th a y t h ế tro n g bước tiếp theo Bây giờ nháp nút Browse và duyệt tìm tậ p tin thực th i ứng với tr ì n h duyệt K ế đến cung cấp cho tr ì n h duyệt một tê n gọi t h â n thiện Tên này sẽ xuất hiện trong menu Cuối cùng, b ạ n quyết đ ịnh chọn xem đây có phái là tr i n h duyệt chính hay không (được truy xuất th ô n g qua p hím F12> hoặc là trình

C h ư ơ n g 14: Các kỹ th u ậ t trìn h duyệt thê’ giới thực 467 m

duyệt phụ (được truy xuất thô n g qua tổ hợp phím Shitf+F12) Bạn không cần quan tâ m tới việc tr ì n h duyệt chính hay phụ nếu bạn truy xuất trìn h duyệt thông qua menu File > Preview in Browser Theo cách này, bạn có thể cài đ ặt nhiều phiên b ản của trìn h duyệt N etscape trê n hệ thông máy của m inh để kiểm tra Tuy nhiên, b ạn chỉ có th ể cài một phiên bản của trình duyệt IE

C a n c e l H elp

H ì n h 14-20-1

Add Browser

D e f a u l t s : I I Primary brow ser

0 S e c o n d a ry brow ser

B r o w s e

H ì n h 14-2 0 -2

Ik P H P C o ílin t; S ía n d « ii <1 - M ic r o s o f t I n t e r n e t F x p lo to i - X

Q Back Q Address ị é n D:\U sers\snh\(ÍD í:s\í*ie\P^ " /a ro a r- -ÍTT, f

PHP Coding Standard

Last M odified: 2003-02-17

The P H P C o d in g S ta n d ard I S w ith p e rm is s io n b a s e d o n To d d H off's C + + C o d in g S ta n d a r:

R ew ritten fo r P H P by F rg d n k K ristia n se n / D B M e d ia la b O slo 2 0 0 0 -2 0 0 3

U s in g th is s t a n d a r d If you w an t to m a ke a local copy of this sta n d ard

and use It as your own you are perfe ctly fre e to do so That's w hy we

m a d e It1 If you fin d any errors or m a ke any im p ro ve m e n ts p le a s e e -m ail

m e the ch an g e s so I can m e rge them in R ece n t C h a n g es

B e f o r e y o u sta rt p le a s e v e rify that y o u h a v e th e m o s t re c e n t

C h ư ơ n g 14: Các kỹ t h u ậ t t r ìn h duyệt t h ế giới thực 469 B T

để mở t r a n g web h iệ n tạ i tro n g m ột t r ì n h soạn th ả o được chọn Chức năng này làm việc với t r ì n h duyệt IE5.5 tr ê n Windows 2000 và IE6 trê n Windows XP Nếu b ạ n là m việc với các tr ì n h duyệt khác hoặc hệ điều

h ành không phải Windows, chức n ă n g n ày có th ể sẽ không hoạt động Nếu chức n ă n g n ày h o ạ t động, h ãy t h i ế t lập để D ream w eaver là trìn h soạn thảo mặc đ ịnh cho IE Đầu tiên, b ạn cần mở một th ư mục b ất kỳ trên hệ thông của m ìn h với tr ì n h quản lý Windows Explorer hoặc một công cụ b ấ t kỳ và sau đó chọn Tools > Folder Options (xem h ình 14-22-

Registered File Types (xem h ìn h 14-22-2) Tiếp đến, n h ấ p vào nút Advanced Chọn mục E d it tro n g d a n h sách Actions và sau đó n h ấp vào nút E dit (xem h ìn h 14-22-3) Trong mục Application used to perform action, duyệt tìm tậ p tin thực th i của D ream w eaver (xem h ìn h 14-22-4) Những gì xuất h iệ n tro n g trường n ày phải được đ ặ t trong dấu n háy tiếp

theo bởi m ột k h o ả n g tr ắ n g v à sau đó là %1 K ết quả là b ạn s ẽ có được

kết quả tương tự n h ư sau:

" c : \ p r o g r a m f i l e s \ m a c r o m e d i a \ d r e a m w e a v e r mx 2 0 0 4 \ d r e a m w e a v e r e x e " %1

Bây giờ, hãy khởi động IE nếu nó chưa được mở và chọn Tools > I n te r n e t Options và chọn th ẻ P rogram Giả sử rằ n g mọi chuyện diễn r a tố t đẹp trong các bước nêu trê n , b ạ n sẽ có t h ể chọn D ream w eaver MX 2004 trong d anh sách HTM L editor và n h ấ p OK (xem h ìn h 14-22-5) Từ giờ trở đi, mỗi khi b ạ n n h ấ p vào n ú t E dit tr ê n t h a n h công cụ của IE, tra n g web hiện tại sẽ được mở r a tro n g D ream w eaver MX 2004 để b ạ n xem hoặc chỉnh sửa m ã lệnh

Tools Map N etw ork D rive

D iscon nect N etw ork D riv e

S y n ch ro n iz e

H ì n h 14-22-1

470 P h ẩ n II: Các thù th u ậ t tro n g Dreamweaver

Folder Options

G en eral II View File T yp es o nlin e Files I

R e g istered file types:

E xten sio n s File T yp es

HTML Com ponent HTML D ocum ent

<§t)HTC

® H T M

D etails for 'HTML' extension

Files with exten sion 'HTML' a re of type 'HTML D ocum ent' T 0

c h a n g e settings that a ffect all 'HTML D ocum ent' files, click

0 Confirm o p en a fte r dow nload

1 I Always show e x te n sio n

C h ư ơ n g 14: C á c kỹ t h u ậ t trìn h duyệt t h ế gíđi thức 471 g r

Editing action for type: HTML Document I ? IIX I

Action:

0 Use DDE DDE M essage:

Application:

M acrom edia DDE Application Not Running:

T o p i c :

Sy stem

H ì n h 14-22-4Internet Options

G eneral II Security II Privacy II Content II C o nn ectio ns Programs A d van ced

P h ẩ n II: Các th ủ t h u ậ t tro n g Dreamweaver

T h ủ th u ậ t 14-23: G ỉâ u t iê u đ iể m

Nếu bạn hỏi đồng nghiệp của m ìn h làm sao để ẩn các đường nét chấm bao quanh h ìn h ảnh, liên kết, n ú t nhấn và có lẽ họ sẽ cung cấp cho bạn một đoạn m ã J a v a S c rip t để thực h iệ n điều đó Các đường tiêu diểm đóng vai trò nh ư m ột đặc điểm về đ ảm bảo tín h truy cập của các trìn h duyệt nhưng cùng có những trường hợp kh ô n g cần tới các đường n ét chấm này

T hay vì phải dựa vào J a v a S c rip t để thực h iệ n điều này, bạn có thể sử dụng một thuộc tín h được hỗ trợ tro n g tr ì n h duyệt IE 5.5 và cao hơn Bạn có th ể bổ sung m ã h i d e f o c u s = " t r u e " cho th ẻ <a>, < in p u t > hoặc

<img> Thẻ < area> cũng được tuyên bố là được hỗ trợ nhưng thực tế lại không nh ư vậy (ít n h ấ t là với các th ử ng h iệ m của tác giả) Nếu bạn áp

<area>) Một nhược điểm của th ủ t h u ậ t n à y là nó chỉ áp dụng được với trìn h duyệt IE 5.5 trở lên

Í OK ]HHp

Preview: t e x t < a > t a g

c o n t e n t s < / a > t e x t

H ình 14-23-1

C h ư ơ n g 14: Các kỹ t h u ậ t tr ìn h duyệt t h ế giới thực 473 m

Bạn có th ể sẽ hỏi cách tô t n h ấ t để bổ sung thuộc tín h này trong

D reamweaver là cách nào? C húng tôi đề nghị b ạn bổ sung thuộc tín h bạn muốn gắn cho các th ẻ b ạ n cần tro n g hộp thoại Tag Library Editor (xem hình 14-23-1) - (Edit > Tag Libraries) Sau đó thuộc tín h này sẽ có hiệu lực trong th ẻ A ttribute tro n g Show List Bạn cũng có th ể có được thuộc tính này trong các gợi ý m ã lệ n h khi bạn chọn viết m ã thủ công (xem hình 14-23-2)

Preview: t e x t x a h r e f = v a l u e > t a g

c o n t e n t s < / a > t e x t

H ình 14-23-3

C h ư ơ n g 14: Các kỹ th u ậ t trìn h duyệt t h ế giới thực 475 M

trường A ttribute n am es (xem h ìn h 14-23-4) N h ấp OK khi hoàn tất Trong hộp thoại Tag L ib rary Editor, chọn thẻ A và chọn thuộc tín h hidefocus T h iết lập các trường theo n h ư h ìn h 14-23-5

Thủ th u ậ t 14-24: T h ử n g h iệ m k ế t q u ả tr o n g

n h iề u lo ạ i tr ìn h d u y ệ t

Bạn có th ể trở t h à n h m ột tín đồ th ử nghiệm trìn h duyệt Đê đáp ứng tấ t

cả các yêu cầu thử nghiệm khi phát triển, một bộ SƯU tập các loại trình

giờ tự hỏi tr a n g web của m ìn h trô n g ra sao trong tr ì n h duyệt phiên bản 2.0 chưa? Bạn không phải b ậ n tâ m đến việc cài đ ặt m ột trìn h duyệt cũ chỉ để thỏa m ãn tí n h tò mò của mình Thay vào đó, b ạn chỉ việc truy cập site và xác đ ị n h t r ì n h d u y ệ t giả lặp c h ẳ n g h ạ n n h ư D eja vu:

bạn không cần p h ải lo lắ n g đ ến việc mua một bộ Web TV để p h á t triển site của họ Có một t r ì n h xem Web TV để b ạ n th ử nghiệm tại địa chỉ

littp: / / develoDcr.msntv.com Ị Tools Ị W e b T W w r a s p

kỹ hơn Bạn có th ể thực hiện một chọn lựa, n hấp nút chuột phải và chọn

chọn Bạn không còn phải cuộn qua r ấ t nhiều dòng lệnh đê đến được dòng

mà mình quan tâm Đó chỉ là một trong nhiều đặc điểm mà bạn có th ể bô sung cho trìn h duyệt Cho dù chúng tôi có dành ra bao nhiêu từ đê nói thì bạn cũng k h ô n g t h ể có được m ộ t cảm n h ậ n c h ín h xác về điều n à y nếu b ạ n không tự m ình thử nghiệm Bạn có th ể tìm thấy các đặc điểm phụ trợ này tại hai địa chỉ tùy thuộc vào loại trìn h duyệt bạn đang dùng Nếu bạn dùng

IE 5.X, hãy truy cập địa chỉ h ttp: Ị Ị W W W microsoft.com Ị windows jịcj_ Nếu

bạn sử dụng IE 5.5 trở lên, hãy truy cập địa chỉ :

http: Ị Ị WWW, pacsslcr com Ị prod acts Ị psi Ị ĩlink=homel.

S I T 476 P h ầ n II: Các th ù t h u ậ t tro n g Dreamweaver

T h ủ th u ậ t 14-26: C h ỉ là tạ m th ờ i

Khi b ạ n xem qua m ột tr a n g web tro n g tr ì n h duyệt b ằ n g cách sử đụng chức n ăn g Preview in Brow ser của D ream w eaver, khi đó tra n g web thực

th iế t lập n h ư t h ế nào tro n g hộp th oại P references Một số người không

t h íc h các t ậ p t i n t ạ m th ờ i, n g a y cả k h i c h ú n g r ấ t t h íc h hợ p cho việc khôi phục phiên b ả n trước đó nếu chẳng may tậ p tin cùa bạn bị hư Từ

D ream w eaver MX, b ạn không còn bị giới h ạ n vào việc sử dụng các tập tin tạ m thời để xem trước k ế t quả tro n g tr ì n h duyệt nữa Hãy bỏ chọn mục Preview U sing T em porary File tro n g nhóm Preview In Browser trong hộp thoại P references (Edit > P references) - (xem h ình 14-26-1)

T h iết lập này cũng ả n h hưởng đến đặc điểm S erver Debugging được sử

D ream w eaver nh ư một trìn h duyệt

c« e i

H ình 14-26-1

Address: a b o u t: blank

Temporary Internet files Pages you view on the Internet ate stored in a special folder for quick viewing later.

Delete Cookies Delete Files Settings

History The History folder contains links to pages you've visited, for quick access to recently viewed pages

Days to keep pages in history: 2 0 : { | Cleat History

Bạn cũng có t h ể k iể m t r a các th a y đổi cục bộ bạn đã thực hiện đối với

css của m ột site b à n g cách t h i ế t lập tậ p tin nh ư là tậ p tin css do người

I T 478 P h ầ n II: Các thủ t h u ậ t tro n g Dreamweaver

dùng đ ịnh nghĩa H ãy thực h iệ n và lưu lại các sửa dổi cùa bạn trong một tập tin cục bộ và b ạ n có th ể xem site trực tuyến m à không làm hư dạng

th ể hiện cho đến khi b ạn đã s ẵ n sàng cho việc th a y thê tậ p tin hiện tại Hãy th ử nghiệm thủ th u ậ t này và bạn sẽ th ấ y r ằ n g đây là một cách rất

r

Formatting f~~l Ignore colors specified on Web pages

n Ignore font styles specified on Web pages l~~l Ignore font sizes specified on Web pages

1 User style sheet

H ì n h 14-27-2

Thứ tự xếp chồng của lớp được kiểm soát bởi thuộc tín h z-index Chỉ số z-

index càng cao, lớp càng xuất h iệ n phía trước trong tr ì n h duyệt Khi bạn làm việc với nhiều lớp và cần th a y đổi thuộc tín h z-index, bạn có th ể thây rằ n g việc sử dụng b ản g kiểm soát P roperty có t h ể sẽ đơn điệu và tẻ nhạt Bảng điều kh iể n Layers (xem h ìn h 15-1-1) - (Windows > Layers hoặc n h â n phím F2) sẽ giúp b ạn th a y đôi thuộc tín h z-index dễ dàng hơn Háy n hấp và kéo tê n lớp trong bảng điều k h iể n Layers đến nơi bạn muôn và thuộc tín h z-index của mỗi lớp sẽ được tự động điều chỉnh Nếu bạn muôn th a y đổi chỉ sô" z-index của một lớp m à không làm ản h hưởng đến các lớp khác, h ãy n h ấ p vào cột z và n h ậ p vào giá trị z-index mới Khi bạn hoàn tấ t, b ạ n chỉ việc n h ấ n phím E n te r hoặc n h âp chuột vào một nơi nào đó tro n g vùng làm việc

Thủ th u ậ t 15-2: V ẽ n h iề u lớ p liê n t iế p n h a u

Thông thường k hi b ạ n làm việc với lớp, b ạn cần vẽ một vài lớp cùng lúc Bạn thường n h ấ p n ú t D raw Layer tro n g nhóm Layout tr ê n th a n h Insert,

480 P h ầ n II: Các th ù t h u ậ t tro n g Dreamweaver

vẽ lớp và sau đó lặp lại quá trình: n h ấ p nút, vẽ lớp, n h ả p nút, vẽ lớp Tuy nhiên, b ạn có m ột cách thức k hác tố t hơn để thực h iệ n điều này Tất

cả nhữ ng gi b ạ n cần là m là giữ phím Ctrl tro n g k hi n h ấ p và kéo chuột

để vẽ lớp, k h i b ạ n h oàn tấ t, con trỏ chuột v ẫn ở d ạ n g chữ th ậ p m ảnh cho biết b ạ n v ẫn có t h ể vẽ lớp khác

b ạn cần th a y đổi kiểu của nó b ằn g cách sử dụng bảng kiểm soát Property Điều b ạ n có t h ể chưa biết là b ạ n có t h ể tự giúp m inh tiết kiệm thời gian và t r á n h phiền toái tro n g việc thực h iệ n cùng một th a y đổi V Ớ I

từng lớp b ằng cách th iế t lập các th ô n g số tro n g hộp thoại Preferences

Hãy chọn E d it > P references hoặc n h ấ n Ctrl+U và sau đó chọn nhóm Layers tro n g d a n h sách n ằm ở p h ía trá i (xem h ìn h 15-3-3) Tai đó bạn

sẽ th â y nhiều th ô n g sô' được dùng khi bạn chèn vào m ột lớp Các trường

C h ư ơ n g 15: Các phương p h á p t r ìn h bày bùng nổ 481

Width và H e ig h t chỉ ả n h hưởng các lớp m à bạn chèn vào với lệnh In s e rt

> Layout Objects > Layer Việc th a y đổi các th iế t lập ở đây sẽ giúp bạn đẩy n h a n h tốc độ làm việc của mình

0 * 4 8 2 P h ầ n II: Các th ù t h u ậ t tro n g Dreamweaver

trong tr ì n h duyệt, điều đầu tiê n b ạ n cần p h ải thực h iệ n là kiểm tra xem đơn vị đo có được k èm theo tro n g các thuộc tí n h không

Bạn không cán phải là n h à phù thủy DHTM L để th ể hiện và ẩn lớp vi

D ream w eaver thực hiệ n điều đó dễ d àn g với behavior Show-Hide Layers

H ãy vẽ một lớp tại nơi b ạn muôn nó xuất hiện Trong khi bạn có một liên k ế t đê kích hoạt một sự kiện (có th ê là văn b ản hoặc h ìn h ảnh) -

C h ư ơ n g 15: Các phương p háp trìn h bày bùng nổ 483 M

hãy n h á p vào n ú t Add (+) trong b ảng điều khiển Behaviors và sau đó chọn behavior Show-Hide Layers từ d a n h sách th ả xuống (xem h ình 15- 6-1) Mỗi lớp được liệt kê với ID của chúng trong trường N amed Layers (xem h ìn h 15-6-2) Chọn lớp b ạn muôn th ể hiện hoặc ẩn và sau đó n hâp nút Show hoặc Hide N ú t mặc định sẽ dưa lớp về tr ạ n g thái hiện tại của

nó và không bị th a y đổi bởi sự kiện này

Named layers: layer “L ay er2 ” (sh ow )

lav et "Layer 1" (hide)

Show

Hình 15-6-2

484 P h ầ n II: Các thù t h u ậ t tro n g Dreamweaver

T h ủ th u ậ t 15-7: Đ ặ t c á c lớ p v à o đ ú n g v ị trí

Kiểm t r a một tr a n g được tạo ra từ D ream w eaver và được th iết k ế với các

lớp d ùng cho N e ts c a p e 4.X v à sau đó th a y đổi k íc h thước cừa sổ trình

duyệt Chú ý rằ n g tr a n g sẽ tải lại? D ream w eaver bổ sung mã kịch bản Netscape Resize Fix vào tra n g web mỗi khi lớp được chèn vào hoặc được

vẽ Không có m ã kịch b ản này, các lớp có lẽ sẽ không nảm đúng vị trí của chúng khi người dùng th a y đổi kích thước cửa sổ trin h duyệt và sẽ làm cho tr a n g web trở n ên lộn xộn D ream w eaver sẽ không chèn mả kịch b ả n n à y n ế u b ạ n c h è n vào m ộ t t h ẻ <div> m à vị t r í của nó được khai

ngoài Nó chỉ biết r ằ n g cần phải th ê m m ã kịch b ản khi bạn sừ dụng c s s tại chỗ Bạn sẽ th ấ y lệnh Add/Remove N etscape Resize Fix trong menu

m ã kịch b ản không khi nó chưa có trong tr a n g \veb Nếu mă kịch bản dã

có, nó sẽ hỏi b ạ n có m uôn loại bỏ m ã k ịc h b ả n n à y k h ô n g N ếu bạn quyết định đ ặt m ã kịch b ản trong m ột tậ p tin J a v a S c rip t phía ngoài, bạn có

th ể cần phải truy xuất hộp thoại E d it > Preferences đê t ắ t đặc điểm tự động chèn m ã lệ n h mỗi khi bạn chèn vào m ột lớp trong Dreamweaver (xem h ìn h 15-7-2)

Background image Nesting Netscape 4 compatibtfcy

to Grid, các tổ hợp p h ím nêu tr ê n sẽ làm việc cùng với đặc điểm này, cho

ra các k ế t quả tương tự và có lẽ còn làm tă n g tốc độ thực hiện của bạn hơn nữa D ream w eav e r đủ th ô n g m in h để cập n h ậ t bảng kiểu của bạn nếu bạn đ ịnh n g h ĩa chiều rộng và chiều cao ở phía ngoài

P h ẩ n II: Các th ủ th u ậ t tro n g Dreamweaver

C h ư ơ n g 15: Các phương p háp trìn h bày bùng nổ 487 M

tính cộng tr ừ đơn giản n h ấ t Nào có ai muốn thực hiện tín h toán? Có một lệnh đặc biệt m à bạn có th ể kích h o ạt hoặc tắ t khi cần th iế t cho phép bạn ngăn ngừa các lớp được chèn vào với nút n h ấ n Draw Layer nằm chồng lên các lớp đã có Bạn sẽ th â y một h ình tròn màu đen với một đường kẻ chéo nếu nh ư bạn th ử bổ sung vào một lớp tại nơi đã có một lớp nào đó rồi (xem h ìn h 15-9-1) Nếu bạn kéo một lớp hiện có, Dreamweaver cũng kh ô n g cho phép bạn vi p hạm vào vị tr í của lớp khác Lệnh P rev en t Layer O verlaps n ằ m hơi khua't trong menu con Modify > Arrange (xem h ìn h 15-9-2) Một vị trí th u ậ n tiện hơn là hộp kiểm

Prevent Overlaps n ằ m ở p h ía tr ê n của bảng điều khiển Layers (xem

Bạn cảm th ấ y có nhu cầu cần phải lồng một sô' lớp? Miễn là bạn cho

phép các lớp n ằ m chồng lên n hau (xem thủ th u ậ t “Không xâm lấ n ”), bạn

có th ể sử dụng m ột sô kỹ t h u ậ t đê thực h iệ n việc này Giữ phím Alt trong khi bạn n h ấ p và kéo chuột p h ía t r ê n lớp khác là một cách tiếp cận

dễ dàng đế lồng m ột lớp vào tro n g m ột lớp khác (xem h ình 15-10-1) Nếu bạn thực hiện nhiều việc lồng các lớp vào nhau, có một th iế t lập Preference m à b ạn cần biết Chọn E dit > Preferences hoặc n h ấ n Ctrl+U

và sau đó chọn nh ó m L ayers n ằ m ở phía trái Chú ý hộp kiểm có n h ã n là

“Nest w hen created w ith in a la y e r” (xem h ìn h 15-10-2) Nêu hộp kiểm này được chọn - ngav cả k hi b ạn không giữ p hím Alt, lớp bạn mới vẽ cũng sẽ tự động được lồ-ig vào phía tro n g lớp hiện có Một cách tiếp cận khác để lồng các lớp vào n h a u là n h ấ p vào phía trong một lớp sau đó chọn I n s e r t > Layout Objects > Layer (xem h ìn h 15-10-3) Bạn th ấ y đấy, bạn có ba cách để lồng các lớp vào n hau trong D reamweaver Bạn vẫn chưa th â y đủ? Bạn muôn có m ột cách khác? Được thôi Bạn nghĩ sao về cách thức dùng p hím C trl+ Iihâp và kéo chuột vào tên gọi cùa lớp trong

Ear 488 P h ầ n II: Các thù t h u ậ t tro n g Dreamweaver

bảng điều k h iể n Layers và sau đó n h ả chuột khi lớp dã nằm phía trên của lớp b ạ n muôn lồng phía ngoài B ạn biết được các lớp có lồng dúng hay không khi b ảng điều k h iể n P anels liệt kê các lớp theo dạng cây (xem

Nesting Nest v^en created wfchn a layer) Netscape 4 compatibfty: [_}&dd resize fix *4ien inserting layer

Cancri J C

H ình 15-10-2

D ate Comment

bỏ nó đi Trong thực tế, việc sử dụng phím ESC có tác dụng nh ư việc hủy

P h ẩ n II: Các thủ t h u ậ t tro n g Dreamweaver

bỏ m ột h à n h động tro n g p h ầ n lớn các tìn h huống tro n g Dreamweaver khi m à b ạn quyết đ ịnh th a y đổi ý đ ịnh của mình

n h ấ p n út Add (+) của b ảng điều kh iể n Behaviors và chọn Set Text > Set Text of Layer (xem h ìn h 15-12-1) Hộp thoại S et Text of Layer xua't hiện (xem h ìn h 15-12-2), chú ý trường New HTML H ãy th ử n h ập vào nội dung HTML b ấ t kỳ b ạn muôn và miễn là tr ì n h duyệt hiểu được những gi

b ạn n h ập vào, m ã lệnh sẽ được th ê hiện tro n g lớp sau khi bạn nháp nút

OK Hãy đ ảm bảo r ằ n g sự kiện được liệt kê tro n g b ảng điều khiển Behaviors được th iế t lập theo cách b ạn muôn và sau đó bạn chì còn việc

là tiếp tục và xem qua tr a n g web tro n g tr ì n h duyệt

Call Jav aS crip t

C h ư ơ n g 15: Các phương p h á p trìn h bày bùng nổ 491 M

Set T ext o f La yei

Layer: layer "Layer 1"

New HTML:

OK

C ancel Help

H ì n h 15-12-2

“Tại sao không sử dụng behavior Show-Hide Layers và dùng nhiều lớp theo yêu cầu?” - Một tro n g nhữ ng lợi điểm là lớp sẽ luôn có cùng ID và các thuộc tín h khác Điều n à y có n g h ĩa là dạng th ể h iệ n của lớp có th ể được giữ n h ấ t quán m à b ạ n kh ô n g phải lặp lại m ã lệ n h giống nhau

Thủ th u ậ t 15-13: C h è n th ẻ DIV

Việc tạo ra các th iế t k ế k h ô n g dùng bảng trong D ream w eaver sẽ dễ hơn nhiều với đặc điểm I n s e r t DIV Tag Nếu b ạn chưa quen với bộ chọn ID, bạn có th ể cần phải t h a m k hảo đến thủ th u ậ t “Tôi có th ể th ấ y ID được không?” trước khi tiếp tục với th ủ th u ậ t này L ệnh I n s e r t DIV Tag (xem

h ìn h 15-13-1, h ì n h 15-13-2) cho p h é p b ạ n đ ặ t th ẻ <div> tạ i vị tr í h iệ n tại của con trỏ, tương đối so với các th ẻ khác đã có ID Nếu chưa có thè nào có ID, b ạn có t h ể đ ặ t th ẻ <div> tương đối so với th ẻ < b o d y > Hãy đảm bảo r ằ n g b ạ n đã liên k ế t tậ p tin c s s (hoặc một bảng kiểu nhúng)

để d anh sách Class and ID có hiệu lực đối với bạn Nếu lớp hoặc ID bạn muốn th iế t lập chưa được t h ể hiện, b ạ n chỉ việc n h ập vào giá trị của mình Bạn th ậ m chí có t h ể sử dụng lệ n h này để chèn thẻ < d iv > trong khi vẫn đê trô n g các trường Class và ID

H ình 15-13-1

|~*| Fixed Top, Fixed Bottom

Q Fixed Top, Nested Left

Q Split Horizontal

Q Split Vertical

Preview

D e s c r i p t i o n

A frameset w ith a frre d -sze r r f t b a n e

and a nested bottom frame

C r e a te • O o c ijrn e rv * - CM**

H e l p 1 Preferences. Get more co n ten t 1 Create [_ Caned

H ì n h 15-14-1

trước, h ẳ n bạn đã biết rằ n g D ream w eaver k ế t hợp tr a n g hiện tai vào trong tậ p kh u n g được tạo ra N hưng điều gi sẽ xảy ra nếu như bạn bắt đầu từ đầu với việc b ạn muốn có một kiểu tậ p kh u n g đặc biệt nhưng bạn

C h ư ơ n g 15: Cắc phương p hăp trìn h bảy bùng nổ 493 M

chưa có m ột tr a n g để b ắ t đầu? Trước D ream w eaver MX, bạn phải mở một tra n g trống và áp dụng đối tượng F ram es; giờ đây bạn có th ể bỏ qua bước tru n g gian và mở m ột tr a n g tậ p khung và sẵn sàn g để đi tiếp Hộp thoại New Document của D ream w eaver có kèm theo một nhóm Fram esets với t á t cả các đ ịnh d ạng có hiệu lực giông nh ư các đôi tượng Frames, ngoài ra còn bổ sung th ê m hai dạng mới: Split Horizontal và Split Vertical (xem h ìn h 15-14-1) Bạn chỉ cần chọn một dạng và Dreamweaver sẽ tạo ra t ấ t cả các tr a n g b ạn cần

Thủ th u ậ t 15-15: P h â n c h ia đ ề u tư ơ n g đ ô i

H ì n h 15-15-1

Hầu như t ấ t cả các tậ p k h u n g được tạo ra bởi các đôi tượng F ram es hoặc hộp thoại New D ocument đều có kèm theo một hoặc nhiều khung h ình với kích thước chiều rộng hoặc chiều cao được th iế t lập cô' định Ví dụ,

Vì một lý do nào dó con số’ 80 dường nh ư là con sô' ưa thích của các kỹ sư tại D ream w eaver - t ấ t cả các khung h ìn h với giá trị được th iế t lập đều

có giá trị là 80 pixel! Có h ai ngoại lệ với điều này là các tập khung Split Horizontal và S plit Vertical Việc áp dụng m ột trong hai tậ p khung này làm cho t r a n g \vcb của b ạn sẽ được chia t h à n h hai p hần và cả hai đều sử dụng đơ:i vị đo tương đỏi Điều này đưa bạn đèn một vấn đề - khi thay

M ] @494 P h ầ n II: Các thủ t h u ậ t tro n g Dreamweaver

khung sẽ chuyển san g kích thước cố đ ịnh th ì cả hai v ẫn giữ nguyên các

m ột số nội dung của b ạn có t h ể sẽ kh ô n g th ấ y được t r ê n các cửa sổ trình duyệt nhỏ hơn B ạn cũng sẽ gặp v ấn đề k hi b ạ n chọn tùy chọn Split

F ra m e p h ía tro n g Modify > F ram eset Giải p h á p ở đây là chọn tậ p khung

và từ hộp kiểm soát F ra m e s P roperty, th a y đổi m ột tro n g sô” các khung

từ Relative t h à n h Pixels (xem h ìn h 15-15-1)

Các đối tượng F ra m e s k h á n h a n h - tro n g thực tế, chúng k há tiện lợi, nhiều n h à th iế t k ế không n h ậ n ra rằ n g m ìn h có t h ể vẽ ra một tập khung một cách thủ công Để tạo r a m ột tậ p k h u n g b ằn g cách vẽ, hãy chọn View > Visual Aids > F ra m e Borders (xem h ìn h 15-16-1) - (hoặc lựa chọn cùng tùy chọn từ menu View Options t r ê n t h a n h công cụ Document) Sau

đó, giữ p hím Alt trong khi b ạn kéo m ột tro n g số các đường biên (xem

h ìn h 15-16-2) B ạn có t h ể ngay lập tức tạo r a m ột tậ p khung với bốn khung bằng cách kéo góc của tậ p khung B ạn h ã y th ử xem!

R e fre s h Design View F 5

✓ N oscript C o nten t

T able Mode

C ode View O ptions

S/ T able W idths Rulers

Grid Tracing Im ag e

► ✓ T able B o rd ers

► ✓ Layer B o rd ers

Hide P an els Toolbars

F4

H ình 15-16-1

C h ư ơ n g 15: Các phương pháp trìn h bày bùng nổ 495 ỊM

U n tiled -1 htrri’*' UntìtíedFrameset-3*

u H Bottom and Nested Right Frame

i n Left and Nested Bottom Frame

a Right and Nested Bottom Frame

H Top and Bottom Frames [ H L e f t and Nested T o p Frames

2 ] Right and Nested Top Frame

f p ] Top and Nested Left Frames

F~Tl Top and Nested Right Frame

H ì n h 15-17-1

Bạn có bao giờ tự hỏi tạ i sao các biểu tượng biểu thị cho các đối tượng

F ram es có tro n g n h ó m Layout của t h a n h I n s e r t lại có th ể hiện như vậy (xem h ìn h 15-17-1)? Mỗi biểu tượng có một vùng th ể hiện ờ dạng màu xanh dương sáng Chắc c h ắn đó là phong cách - nhưng đồng thời nó cũng là một trợ giúp m ạ n h Vùng màu x anh dương th ể hiện nơi m à tra n g

a 496 P h ầ n II: Các thủ t h u ậ t tro n g Dreamweaver

tượng th ứ n h ấ t, được gọi là Left F ram e, sẽ đ ặ t tr a n g h iệ n có cùa bạn vào phía phải và biểu tượng th ứ hai với tê n gọi R ight F ra m e sẽ đ ật trang hiện tại vào phía trái Một sô” tê n gọi của đôi tượng F ram e có th ể làm cho bạn hiểu sai, vì t h ế hãy sử dụng biểu tượng để có được tậ p khung bạn muôn

T h ủ th u ậ t 15-18: T iế p x ú c v ớ i tậ p k h u n g

p h ía tr o n g c ủ a b ạ n

Các tập khung lồng n hau thường là lựa chọn tố t n h ấ t cho bố cục phức tạp

- nhưng chúng có th ê gây khó k h ă n khi muốn chỉnh sửa Chia khóa để thực hiện việc th a y đổi cho tậ p kh u n g lồng phía trong là chọn đúng tập khung B ạn sẽ th ấ y chìa khóa n ằ m ở cuối cửa sổ, trong vùng được gọi là vùng chọn th ẻ (xem h ìn h 15-18-1) N h ấ p vào đường biên cùa tập khung

b ấ t kỳ để xác định tậ p khung nào bạn đ ang dùng Nếu bạn chi thấy có một thẻ <fram eset> trong vùng chọn th ẻ có n g h ĩa là bạn đã chọn tập khung ngoài cùng Hãy chọn m ột đường biên khác và khi bạn thây hai

th ẻ <frameset>, hãy chọn th ẻ <fram eset> n ằ m p h ía phải đẻ chọn tập khung phía trong Với m ột bô" cục r ấ t phức tạp, c h ẳn g h ạ n như có nhiều tập khung lồng nhau hơn, b ạn có th ể phải chọn m ột số đường bién khác nhau để xác định tậ p khung mong muôn

Chương 15: Các phương p hăp trìn h bày bùng nổ 497 B P

Thủ t h u ậ t 15-19: L ư u c á c tậ p tin tr o n g tập

k h u n g

Hẳn là mỗi người đã từng làm việc với các tr a n g khung đều có kinh nghiệm này Bạn b ắ t đầu công việc của m ình với tậ p khung và sau một thời gian làm việc, b ạn đã s ẵ n sà n g để xem qua tra n g web của mình Nhấn phím F12 - P review in Browser D ream w eaver đòi hỏi t ấ t cả các phần tử - từng tr a n g tro n g tậ p kh u n g và cả các tậ p khung - phải được lưu trước khi xem, vì th ê hộp thoại Save File sẽ xuât h iệ n (xem h ìn h 15- 19-1) N hưng là m th ê nào để b ạ n có t h ể đ ặt tên cho một tậ p tin nếu bạn không biết tậ p tin b ạ n đ a n g lưu là tậ p tin nào? Các tê n đ ặt trước

D reamweaver cung cấp m ột số đầu mốỉ nếu nh ư bạn biết chỗ tìm chúng

Các tậ p khung luôn được lưu trước và m ột tên đặc biệt sẽ được dùng:

nhiên, đầu môi lớn n h ấ t là th ấ y được: D ream w eaver xác định khung

đ ang hỏi b ạ n đ ể lưu b ằ n g c á ch đ ặ t vào đường b iê n n é t c h ấ m , m à u đ e n quanh khung tro n g cửa sổ hồ sơ Nếu đó là m ột tậ p khung (lồng hoặc không lồng), n h iề u k h u n g h ì n h sẽ được bao cùng lúc

n r 498 P h ầ n II: Các th ù t h u â t tro n g Dreamweaver

T h ủ th u ậ t 15-20: Đ ặ t t iê u đ ề c h o tậ p khung

Bạn đã bao nhiêu lần lướt qua web và b ắ t gặp những tra n g khung nơi

m à cửa sổ tr ì n h duyệt th ể h iệ n “U n titled D ocum ents”? Site cùa bạn đã bị

nh ư vậy bao nhiêu lần? Việc đ ặ t tiêu đề kh ô n g chính xác cho một tập khung là m ột lỗi k h á phổ biến R ấ t nhiều n h à th iế t k ế đã cung cấp tên gọi cho các khung th a y vì đ ặ t tiêu đề cho tậ p khung mà đáng ra là nó phải được đặt Trước khi n h ậ p tiêu đề tro n g th a n h công cụ Document, hãy đảm bảo rằ n g b ạn đã chọn đường biên của tậ p khung để chọn tập khung (xem h ìn h 15-20-1) Khi b ạn quay trở lại n h ậ p nội dung của một khung nào đó, tiêu đề sẽ biến m ấ t - nhưng đó là điều sẽ xảy ra Hãy chọn đường biên tậ p khung lại, tiêu đề sẽ lại xuât hiện trong

D ream w eaver và sẽ xuât hiện tr ê n t h a n h tiêu đề của cửa sô trình duyệt khi tr a n g được tải lên web

Vì các tậ p khung bao gồm nhiều t r a n g web riê n g biệt n én rấ t có khả

n ăng là người dùng sẽ duyệt trực tiếp một tro n g sò' các tr a n g đó - chảng

h ạ n từ kêt quả của việc tìm kiếm - và không biết rằ n g nó là t h à n h phẩn

Chương 15: Các phương p háp trìn h bày bùng nổ 499 M

của một tậ p khung Một tro n g những cách để giải quyết vấn đề này là

đ ặ t m ă l ệ n h s a u vào t r o n g p h ầ n < h e a d > của từ n g t ậ p tin tro n g tậ p khung:

khung Chú ý rằ n g m ã lệ n h n à y chỉ được kích hoạt khi tra n g không ở trong t ậ p k h u n g , n h ư n g nó k h ô n g xác đ ị n h x em nó có ở t r o n g đ ú n g tậ p khung m à nó là t h à n h p h ầ n không

Thủ th u ậ t 15-23: Đ íc h đ ế n n h iề u k h u n g

Trong p h ầ n lớn trường hợp, m ột liên k ế t trong tập khung thường hướng đến việc tải m ột t r a n g %veb vào tro n g m ột khung Tuy nhiên, đôi khi một liên k ế t lại cần được cập n h ậ t cho nhiều khung đồng thời Có hai cách tiếp cận để giải quyết cho vấn đề này Phương pháp đầu tiên là liên kết đến một tậ p kh u n g k h ác tương ứng với các tr a n g được liên kết Giải pháp này làm việc tố t khi các t r a n g đ ang được th a y đổi có liên quan với nhau

nó sẽ làm cho việc quản lý site trở n ê n phức tạp Một giải pháp khác là

sử dụng m ột liên kêt chuẩn ngoài behavior Go To URL của D ream w eaver

BIT 500 P h ầ n II: Các th ù t h u ậ t tro n g Dreamweaver

(xem h ìn h 15-23-1) - liên k ế t mở m ột tr a n g tro n g một khung đích và behavior sẽ mở một tr a n g khác tro n g m ột kh u n g khác Nhược điểm của cách tiếp cận n ày là người dùng cần phải n h ấ p n ú t Back hai lần để quay trở lại tr ạ n g th á i trước đó

t h â n tập khung cũng có bộ nhớ khôi phục riên g của mình

Đê khỏi phục lại việc áp dụng một tậ p k h u n g sau k hi chọn một trong sô các đôi tượng F ram es, h ãy thực h iệ n lệ n h Undo hai lần L ệnh Undo đáu tiên sẽ hiển th ị tr a n g đuợc chia t h à n h hai k h u n g và lệnh Undo thứ hai đưa nó trở lại t r ạ n g th á i kh ô n g có khung, mặc dù các đường bién khung

do D ream w eaver vẽ v ẫn còn th ấ y được xung quanh hồ sơ Bạn có thẻ t i t đường biên này b ằng cách chọn View > Visual Aids > F ra m e Borders

Chương 15: Các phương p háp trìn h bày bùng nổ 5 0 1 a r

0 Offscreen Rendering (need to disable when using screen readers)

I OK I [ C a n c e l H elp

H ì n h 15-25-1

Để đảm bảo tín h truv cập của tậ p khung, các khung phải được đ ặt tiêu đề với tên gọi dễ hiểu để giúp di chuyển Từ khóa ở đây chính là đ ặt tiêu đề Việc các khung có tê n phù hợp (chẳng h ạ n nh ư navigation hoặc content) vẫn chưa đủ, m à mỗi k h u n g còn cần phải có thuộc tín h title với các giá trị tương tự (tên và thuộc tí n h title không n h ấ t th iế t phải trù n g nhau, dù ràng đó là cách đơn giản và dễ nhất) Dĩ nhiên, thuộc tín h title có th ể được th ê m vào m ột cách th ủ công hoặc b ăng cách chọn th ẻ < f r a m e > trong chế độ Code và n h ậ p vào giá trị title trong p h ầ n kiểm soát Tag Kỹ thuật khác để đảm bào r à n g tậ p khung của bạn đáp ứng được yêu cầu về tính truy cập là kích h o ạ t tùy chọn F ra m e s trong nhóm Accessibility của hộp thoại Preferences (xem h ìn h 15-25-1) Một khi được kích hoạt, hộp thoại F ra m e Tag Accessibility A ttributes sẽ xuất hiện mỗi khi một tập khung được tạo ra (xem h ìn h 15-25-2) Đê đ ặ t tiêu đề cho các khung, hãy chọn tê n kh u n g tro n g d a n h sách th ả xuống và n h ập vào tiêu đề tương

P h ầ n II: Các th ù t h u ậ t tro n g Dreamweaver

ứng trong trường phía dưới; h ãy đảm bảo r ằ n g b ạ n thực hiện cho tất cả các khung trong tậ p khung Tuy nh iê n , hộp thoại Fram e Tag Accessibility A ttributes sẽ không xuất h iệ n nếu b ạn tạo tậ p khung bằng cách kéo đường biên của một khung

Flame Tag Accessibility Attiibutes X

1 For each frame, specfy a title. i <* 1

[_ Cancel JFrame:

Chương 15: Các phương p h áp trìn h bày bùng nổ 503 Ềầ

Để tạo một khung h ìn h có tín h đệ quy, đầu tiên hãy th iết lập một liên kết trên một tập khung đến bản th â n tập khung K ế đến, thiết lập thuộc tính target của liên k ết đó t h à n h _self Khi được chọn, tra n g với liên k ết có tính

đệ quy sẽ được th a y th ê bằng toàn bộ tập khung Chọn lại liên kết đó và bạn sẽ lại có toàn bộ tập khung mới xuất hiện phía trong tập khung trước

đó (xem h ìn h 15-26-1) Bạn có th ể hiển thị một cách đệ quy một tập khung khoảng ba đến bôn lần trước khi tr ìn h duyệt bắt đầu phàn n àn với bạn Dĩ nhiên, nếu bạn muôn tr á n h các tập khung đệ quy, hãy thiết lập target thành top - nhưng khi đó bạn sẽ trở th à n h kẻ phá bĩnh!

Thủ th u ậ t 15-27: Đ ư ờ n g g ió n g tr o n g

D r e a m w e a v e r

Các đường gióng là m ột đặc điểm của lớp m à bạn r ấ t muốn có trong Dreamweaver Bạn cũng th ấ y chúng h ế t sức hữu hiệu trong các chương trình khác nh ư Photoshop, Firew orks Một đường gióng là một đường nằm ngang hoặc t h ẳ n g đứng cho phép b ạn sắp xếp các p h ầ n tử khác nhau trong th iế t kê của m ình Vì D ream w eaver không hỗ trợ đường gióng n ê n b ạ n sẽ t ạ o r a đư ờ ng gióng của r i ê n g m ì n h b ằ n g cách sử dụng

n r 504 P h ầ n II: Các th ủ t h u ậ t tro n g Dreamweaver

b o rd e r-le ft (hoặc b o r d e r - r i g h t tù y thuộc vào ý b ạ n ) t h a y cho thuộc tính

b o rd e r-to p của đường gióng n g a n g v à t h i ế t lậ p th u ộ c t í n h h e i g h t thành 100% t h a y cho thuộc t í n h w id th :

Bây giờ đến p h ầ n lý thú H ãy tạo m ột th ẻ < d i v > b ằ n g cách chọn Insert

xuất hiện, h ãy chọn h o r z G u i d e hoặc v e r t G u i d e từ d a n h sách Class (xem