
GIỚI THIỆU
ADOBE DREAMWEAVER CS3
CHƯƠNG 1
BÀI 1 NGÀY 28.7.2009 UTBINH BIÊN SOẠN
GIỚI THIỆU ADOBE DREAMWEAVER CS 3 :
Adobe
bắt đầu bán gói sản phẩm CS3
Bắt
đầu từ sáng ngày 16/4, gói sản phẩm mong
đợi nhất của Adobe - Creative Suite 3 (CS3) đă
được bày bán tại các cửa hàng ở Mỹ, tuy
nhiên hai trong số các sản phẩm của gói CS3 phải
đến quư 3 mới có mặt.
Người dùng cũng có thể mua lẻ các sản phẩm thuộc gói CS3 như : Photoshop CS3, Photoshop CS3 Extended, InDesign CS3, Illustrator CS3, Flash CS3 Professional, Dreamweaver CS3, Fireworks CS3 và Contribute CS3.
Cả hai phiên bản Premium và Standard của CS3 Design và CS3 Web hiện đă được bày bán, dành cho Windows và Mac OS X, với giá lần lượt là 999USD và 1799USD. Bản CS3 Production Premium và CS3 Master Collection sẽ có mặt vào quư 3 tới.
Bạn muốn tự
tạo cho ḿnh một website riêng? Nhưng bạn không rơ về
lập tŕnh cũng như không biết phải bắt đầu
từ đâu? Adobe Dreamweaver CS3 sẽ giúp tạo nên những
trang web chuyên nghiệp trong một thời gian ngắn với
không quá nhiều bước phức tạp, kể cả bạn
không có quá nhiều kiến thức về code.
Nếu bạn không biết nên bắt đầu từ đâu cho trang web của ḿnh, không biết phải thiết kế như thế nào (chẳng hạn bạn không biết thiết kế theme của trang web như thế nào) th́ Dreamweaver CS3 thực sự là một người bạn tốt để giúp bạn bắt đầu từ những trang sẵn có. Dreamweaver sẽ cung cấp cho bạn những trang có sẵn để bạn tùy chọn theo nhu cầu riêng của bạn. Chẳng hạn, nếu bạn cần xây dựng một trang web cá nhân về giải trí, bạn có thể chọn “Trang chủ - giải trí” có sẵn trong Dreamweaver.
Adobe Dreamweaver CS3 hỗ trợ bạn thiết kế giao diện của trang web mà không cần thông qua phải can thiệp vào code của trang web đó. Bạn có thể chọn chức năng “Create button” hay click đôi để chọn những mẫu giao diện web theo ư muốn, để rồi từ đó biến đổi chúng một hoặc từng phần, thậm chí là toàn bộ theo ư bạn. Ví dụ, bạn có thể thay đổi màu sắc, font chữ, màu nền, kích thước chữ, màu các đường link, xây dựng các menu và hỗ trợ cả chức năng chỉnh sửa file CSS - Cascading Style Sheets (dành cho những người chuyên nghiệp hơn). Thậm chí, nếu bạn không biết về CSS, bạn cũng có thể chỉnh sửa một cách dễ dàng bằng những chi tiết trực quan. Chẳng hạn, bạn có thể chọn một đoạn văn bản bằng cách bôi đen chúng, sau đó click chuột phải, bạn sẽ thấy một thực đơn xuất hiện chứa tất cả những tùy chọn để chỉnh sửa, như màu sắc, kích cỡ, font chữ…
Cũng tương tự như vậy, bạn có thể chỉnh sửa những bức h́nh, kích thước hiển thị (chiều dài và chiều rộng) … Bạn thậm chí có thể điều chỉnh cả thuộc tính của những bức ảnh đó, như độ sáng, độ cân bằng màu sắc hoặc có thể làm cho bức ảnh thêm sắc nét.
Sau khi hoàn thành việc thiết kế trang web theo ư muốn của bạn, bạn có thể đưa nó lên Internet bằng cách thực hiện theo các bước yêu cầu. Nó cũng khuyến cáo bạn để chương tŕnh thông qua mă HTML của bạn, kiểm tra sự tương thích của các tŕnh duyệt đối với trang web vừa được tạo ra, khả năng tiếp cận trang web và những đường liên kết mà sử dụng những công cụ được cung cấp bởi Dreamweaver.
Bây giờ,
bạn đă có thể tạo cho ḿnh một trang web cá nhân
theo ư muốn của ḿnh mà không mất quá nhiều thời
gian cũng như không cần phải quá t́m hiểu sâu
về lập tŕnh.
Download bản dùng thử Adobe Dreamweaver 3.0 tại đây.
(Sau khi vào trang web, ấn vào “Create an Adobe account” để tạo một tài khoản, sau đó bạn có thể dễ dàng download).
Adobe Dreamweaver cũng là một phần mềm rất thông dụng, bạn có thể dễ dàng t́m thấy tại các cửa hàng tin học.
Nguồn tin: Dan trí
THAM KHẢO GIÁO TR̀NH THIẾT KẾ WEB VỚI DREAMWEAVER CS3 :


Sau khi Download về toàn bộ giải nén part1 , các Files con lại tự động giải nén , hiện ra File VTC Dreamweaver , bỏ dỉa vào Ổ ghi , nhấp lên File này tiến hành ghi ra dỉa CD 601 MB . Đây là Các File Video của VTC hướng dẫn thiết kế Web Dream CS3 .
http://hauionline.com/archive/index.php/t-24790.html
http://ketnoibanbe.org/forum/archive/index.php/t-3807.html
http://www.ddth.com/showthread.php?t=244533
http://www.diendantinhoc.vn/showthread.php?t=15043
DOWNLOAD SOFTWARE ADOBE DREAMWEAVER CS 3 (299.71 MB )
Gồm 7 Files nén , 6 Files đầu mỗi File 48.82 MB , File 7 có 6.79 MB . Khi bạn giải nén File : AdobeDreamweaverCS3.part1.rar các Files c̣n lại sẽ tự động bung nén . Trong Sofware này có kèm File Hướng Dẫn cài đặt bản Full .
Link Download : http://tinyurl.com/utbinh139
GIÁO TR̀NH DREAMWEAVER 8 UTBINH BIÊN SOẠN 33 BÀI VIẾT :
Utbinh đă bắt đầu viết giáo tŕnh này ngày 19.7.2006 đến 18.3.2008 th́ tạm ngưng và sau đó Adobe đă xuất bản ồ ạt các phiên bản mới , hiện nay là Adobe Dreaweaver CS4 rồi do đó để thích ứng utbinh đành hủy bỏ không viết tiếp tục Dreamweaver 8 mà bắt đầu tự học viết ADOBE DREAMWEAVER CS 3 .
Các bạn có thể tham khảo 33 Bài Viết tại (21.17MB): http://tinyurl.com/utbinh142
CHÀO MỪNG CÁC BẠN ĐẾN VỚI THẾ GIỚI CỦA DREAMWEAVER ! ĐÂY LÀ CÔNG CỤ ĐỂ THIẾT KẾ VÀ PHÁT TRIỂN WEB RẤT HIỆU QUẢ CỦA ADOBE . CÓ THỂ TRONG LẦN ĐẦU TIÊN , BẠN CẢM THẤY RẤT KHÓ TIẾP CẬN , NÊN CHƯƠNG NÀY SẼ ĐỀ CẬP ĐẾN CÁC ĐẶC ĐIỂM VÀ VỊ TRÍ CỦA CHÚNG . KHI ĐĂ HIỂU RƠ NHIỆM VỤ CỦA TẤT CẢ CÁC THÀNH PHẦN TRONG GIAO DIỆN CỦA NÓ , CHÚNG TA SẼ SỚM NHẬN RA DREAWEAVER THẬT SỰ LÀ MỘT ỨNG DỤNG VÔ GIÁ ĐỂ TẠO VÀ DUY TR̀ CÁC WEBSITE .
TRONG CHƯƠNG NÀY , CÁC BẠN SẼ HỌC VỀ DREAMWEAVER START PAGE ( TRANG KHỞI ĐỘNG CỦA DREAMWEAVER ) VÀ CỬA SỔ HỒ SƠ . SAU ĐÓ BẠN SẼ THẤY VÔ SỐ THANH CÔNG CỤ KÈM THEO PHẦN MỀM : THANH MENU , THANH CHÈN ( INSERT BAR ) , THANH CÔNG CỤ DOCUMENTS , THANH STYLE RENDERING VÀ THANH STANDARD . TIẾP THEO LÀ THANH STATUS , HỘP KIỂM SOÁT PROPERTY VÀ CÁC BẢNG ĐIỀU KHIỂN . NGOÀI RA , BẠN SẼ T̀M HIỂU VỀ BỐ CỤC KHÔNG GIAN LÀM VIỆC KÈM THEO CÁCH THỨC THIẾT LẬP KHÔNG GIAN LÀM VIỆC TÙY BIẾN . CUỐI CÙNG C̉N CÓ BẢNG TÓM TẮT VỀ NHỮNG ĐẶC ĐIỂM MỚI TRONG DREAMWEAVER CS3 .
I.ĐÔI ĐIỀU VỀ DREAMWEAVER
Trong phần này , các bạn sẽ t́m hiểu về những cửa sổ , bảng điều khển , trang , chế độ hiển thị , thanh công cụ và các hộp kiểm soát khác nhau để làm quen với DREAMWEAVER . Dù lá một người mới bắt đầu , một chuyên gia đầy kinh nghiệm lần đầu t́m hiểu DREAMWEAVER hoặc bât kỳ ai chủ yếu cần t́m hiểu về những đặc điểm mới nào có trong DREAMWEAVER , phần này sẽ giúp bạn tăng tốc độ tiếp cận .
II.START PAGE ( TRANG KHỞI ĐỘNG )
Khi nhấp Shortcut lần đầu tiên , bạn sẽ thấy Start Page ( Trang Khởi Động ) . Trang này ( sẽ thay đổi dựa trên những ǵ đă thực hiện gần đây ) là điểm bắt đầu để tạo và chỉnh sửa các Trang và Site . Nếu đóng tất cả Cửa Sổ đang mở của Dreaweaver (D) , Trang Khởi Động sẽ xuất hiện trở lại .

Trang Khởi Động gồm có những phần sau :
Phấn này chứa danh sách gồm 10 đề mục được mở gần đây nhất trong D . Nếu mở ít hơn 10 đề mục , nó sẽ chỉ thể hiện đúng con số đó . Nếu chưa từng sử dụng D , nó sẽ xuất hiện một thư mục “ Open “ .
Nếu muốn tạo 1 Trang hoặc 1 Site mới , bạn chọn cột này . Việc chọn 1 trong số các tùy chọn này sẽ tạo ra 1 tập tin HTML , ColdFusion , PHP , ASP , JavaScript , XML , XSLT hoặc CSS mới . Phía trên tùy chọn cuối cùng , bạn có thể tạo 1 Site Dreamwaeaver mới , tùy chọn c̣n lại là MORE sẽ hiển thị HT New Document .
( Xem H́nh MH ) :

Nếu chỉ nghiên cứu về cách xây dựng Website , đây là những lựa chọn thich hợp Phần này chứa các Thư Mục , mỗi thư mục có nhiều Trang được tạo bố cục sẵn rất thích hợp cho nội dung . Việc nhấp vào 1 trong các tùy chọn này sẽ mở lại HT New Document , nhưng với 1 nhóm lựa chọn khác : CSS Style , Framesers … thông qua Page Design (CSS) , Starter Pages và Page Designs . Nếu là một nhà thiết kế có kinh nghiệm , bạn nên dành thời gian quan sát cửa sổ xem trước để làm việc hiệu quả hơn .
Nhấp Liên Kết Dreamweaver Exchange > Hiện ra Trang Web :

Dreamweaver được xây dựng với kiến trúc có thể mở rộng ( Nghĩa là sẽ bổ sung tính năng không có trong Dreamweaver ) . Điều đó được thực hiện bằng một công nghệ được gọi là Phần Mở Rộng (Extensions) . Một số phần có phí , một số miễn phí nhưng bạn chỉ cần khi nào Dreamweaver không đáp ứng yêu cầu của bạn . Bân nhấp lên các liên kết để t́m hiểu thêm .
· Getting Started : Nhấp liên kết này hiện ra Trang Web http://www.adobe.com/devnet/dreamweaver/?view=gettingstarted
· New Fearures : Nhấp liên kết này hiện ra Trang Web http://help.adobe.com/en_US/Dreamweaver/10.0_Using/WS2C41F19D-502B-4fb5-8A54-4442E2127C84a.html
· Resources : Nhấp liên kết này hiện ra Trang Web http://help.adobe.com/en_US/Dreamweaver/10.0_Using/WSc78c5058ca073340dcda9110b1f693f21-7ffba.html
Chú Ư :
· Đôi lúc bạn muốn mở Trang Start Page này , hăy vào : Edit > Preferences > Tab General > Đánh dấu Show Welcom Screen .
· Phần lớn sử dụng Hệ Điều hành Windows , các bạn nên chọn chế độ Designer( Chế độ Thiết Kế ) : Chọn Window > WorkSapce Layout > Designer .
· Xem Standard Mode : View > Table Mode > Standard Mode .
III.CỬA SỔ HỒ SƠ
Cột Create New > Nhấp HTML . Khi mở một Tập tin , bạn thấy Cửa Sổ Hồ Sơ và tất cả Bảng Điều Khiển , Hộp Kiềm Soát …xuất hiện xung quanh nó . Thoạt nh́n trông có vẻ quá nhiều và hổn độn , nhưng bạn sẽ sớm t́m thấy cách sử dụng chúng .
Cửa Sổ Hồ Sơ được thể hiện trong h́nh này là 1 Trang Web trống , sẵn sàng để bổ sung thiết kế và nội dung . Nếu cần bạn có thể nhấp vào bên trong cửa sổ và bắt đầu nhập nội dung .

III.THANH MENU
Thanh Menu chứa những phần
muốn thấy trên nền làm việc .
IV.THANH CHÈN
Thanh Chèn dưới Thanh Menu . Thanh
Chèn dùng để chèn nội dung và đối tượng
vào trang . Thanh Chèn gồm có 8 Phần khác nhau
Chứa những Đối Tượng phổ biến như Liên Kết – H́nh Ảnh .
Gồm có Bảng – Thẻ DIV – Lớp và Khung H́nh . Tất cả đồi tượng đều cho phép mô tả cách thức cần tạo bố cục cho Trang .
Bao gồm các phần tử Biểu mẫu ( Trường văn bản – Nút Nhấn – và Hộp Kiểm ) .
Không thực sự chứa đối tượng để chèn vào Trang . Nó cho phép chọn kiểu văn bản đă có trên Trang . Bạn cần sử dụng Hộp Kiểm Soát (HKS) Property để thực hiện điều này .
Nếu đôi khi làm việc với dữ liệu bên ngoài ( Cơ Sở Dữ Liệu ) đó là lúc bạn cần sử dụng thiết lập này .
Có vẽ kỳ lạ v́ thiết lập này chỉ có 1 đối tượng ( Chế độ thể hiện h́nh ảnh Flash ) . Nếu cần bổ sung các Phần Tử Flash khác ( Nút nhấn , văn bản hoặc Video của Flash ) hăy trở lại thiết lập Common nơi có thể t́m thấy chúng trong Media PlugIns .
Bắt đầu ở trạng thái rổng , nhưng bạn có thể chỉnh sửa để nó chứa những thành phần tùy ư . Để thực hiện điều này , chọn theit61 lập favorites > Nhấp Phải
( Hoặc Ctrl+Nhấp chuột ) . Một HT xuất hiện cho phép bổ sung các đối tượng được sử dụng phổ biến nhất .

V. THANH CÔNG CỤ DOCUMENT (DOCUMENT TOOLBAR )
Bên dưới thanh Chèn và dưới
các Tab đă mở , bạn sẽ t́m thấy Thanh Công Cụ
Document . Thanh Công cụ Document chứa 3 Phần sau :
· File Manage .
· Preview In Browser .
· Refresh . (F5) .
· View Options .
· Visual Aids .
· Validate Markup .
· Check Browser Compatibility .
VI.CÁCH SỬ DỤNG CÁC CHẾ ĐỘ THỂ HIỆN HỒ SƠ
Có 3 chế đệ thể hiện hồ sơ : Nhấp Nút
( What You See Is What You Get – Những ǵ bạn thấy chính là những ǵ bạn có ) Thông thường phần lớn mọi công việc đều nằm trong chế độ Design .

2. CODE : Thể hiện cùng 1 Trang trong chế độ Code . Đây là phần thể hiện của những THẺ và Thẻ Đánh Dấu nằm bên trong . Nhiều người làm việc vẫn hiệu quả với Dreamwaever mà không cần chế độ Code .


VII.CÁC THANH CÔNG CỤ
Theo mặc định th́ khi bạn nhấp Phải vào Thanh Chèn hoặc Thanh Công Cụ Document sẽ không thấy chọn kích hoạt Thanh Style Rendering và Thanh Standard .
Nếu thiết lập bảng Kiểu CSS để các trang xuất hiện một cách khác biệt ( ví dụ như chế độ thể hiện ra màn h́nh so với một Trang được thiết kế để in ấn ) đây chính là Thanh Công Cụ mà bạn cần sử dụng để chuyển đổi giữa 2 chế độ thể hiện kiểu . Bạn chỉ cần chế độ hiển thị ra màn h́nh mặc định trong phần lớn thời gian . Nút nhấn ở đầu bên Phải của Thanh công cụ tương đối khác biệt : Nó sẽ chuyển đổi Trang giữa chế độ hiển thị kèm theo kiểu CSS được kích hoạt và một chế độ thể hiện khác với kiểu CSS bị tắt .


Nếu muốn màn h́nh rộng rải dễ thao tác bạn có thể nhấp Phải > Hiện ra Menu con > Bỏ chọn Thanh nào xét thấy không cần thiết . Mở lại chọn View > Toolbars
VII.THANH TRẠNG THÁI
Thanh Trạng Thái là phần nằm dưới cùng của Cửa Sổ Hồ Sơ , cũng thường gọi là Bộ Chọn Thẻ .
· Nhấp vào bất kỳ vị trí nào trong hồ sơ , Bộ Chọn Thẻ sẽ thể hiện các Thẻ dựa vào vị trí của con trỏ .
· Sau đó bạn có thể nhấp vào bất kỳ Thẻ nào trong Bộ Chọn Thẻ để chọn mọi Thành Phần trong Thẻ đó . Nhấp Thẻ <body> sẽ chọn toàn bộ nội dung của Trang .
· Phần bên Phải chứa nhiều điều khiển hơn :
o Công cụ Chọn ( Select ) cho phép chọn đối tượng trên Trang .
o Công cụ Kéo ( Hand ) di chuyển xung quanh Trang .
o Công cụ thu phóng Trang ( Zoom ) .
o Kế bên là kích thước Cửa Sổ đang hiển thị . Bạn có thể nhấp mở Menu con để điều chỉnh kích thước Cửa Sổ cho phù hợp .
o Giá trị ước lượng thời gian để một Tŕnh Duyệt tải Trang này xuống . Nếu không thích giá trị mặc định của 2 điều khiển cuối cùng bạn có thể thay đổi bằng cách chọn Edit Sizes > Nhấp chọn Edit Sizes :


IX.HỢP KIỂM SOÁT PROPERTY
Nằm ở dưới của Màn H́nh Chính là Hộp Kiểm Soát Property . Tùy thuộc vào thành phần nào được chọn trong Cửa Sổ Hồ Sơ , những tùy chọn khác nhau sẽ xuất hiện trong HKS này .
Ví dụ :


X.CÁC BẢNG ĐIỀU KHIỂN
Bên Phải cửa sổ Dreaweaver là các Bảng Điều Khiển (BĐK). Trong quá tŕnh cài đặt mặc định , các BĐK CSS – BĐK Application ( Ứng dụng ) – Hộp Tag Inspector ( Kiểm soát Thẻ ) và BĐK Files đều được thể hiện và bị khóa .
Khi làm sai lệch hoặc bị mất Thanh chứa BĐK bạn vào : Chọn Window > WorkSapce Layout > Designer để trở lại mặc định ban đầu .



o Nút nhấn chứa các tùy chọn của BĐK ( Panel Options Buttons ) : Nhấp Phải lên BĐK CSS > Menu con hiện ra , bạn có thể : Nhóm Tab Layers của menu CSS với một trong số BĐK khác – Đóng Tab Layers - Thay đổi tên của nhóm – Mở lớn Nhóm hoặc đóng nó .

§ Nếu chọn gom nhóm ( Group AP Elements with ) > bạn có thể chọn Các BĐK hay có thể tạo 1 nhóm BĐK mới . Khả năng đóng các Tab và di chuyển chúng từ BĐK này đến BĐK khác cho phép cài đặt D hoạt động theo mong muốn .
THIẾT LẬP KHÔNG GIAN LÀM VIỆC
BẠN PHẢI XÁC ĐỊNH NHỮNG THÀNH PHẦN NÀO KHÔNG MUỐN THẤY . VIỆC TẤT CẢ CÁC THANH CÔNG CỤ - BẢNG ĐIỀU KHIỂN VÀ HỘP KIỂM SOÁT CÙNG THỂ HIỆN SẼ LÀM MẤT DI KHÔNG GIAN LÀM VIỆC THIẾT KẾ WEBSITE , DƯỚI ĐÂY LÀ CÁCH THIẾT LẬP KHÔNG GIAN LÀM VIỆC THÍCH HỢP .
I.CÁC BỐ CỤC KÈM THEO CỦA KHÔNG GIAN LÀM VIỆC
Trước khi đóng Cửa Sổ Hồ Sơ lại bạn nhấp File > Save As > Chọn nơi lưu và đặt tên File > Khi mở lại Dreamweaver bạn nhấp Nút Open trong Cột Open A recent Item > Chọn File đă lưu > Nội dung hiện ra trong Cửa Sổ Hồ Sơ .
Nếu chạy Windows bạn có 2 bố cục để chọn : Coder ( Dành cho Người Viết mă Lệnh ) và Designer ( dành cho Người Thiết Kế ) . Nếu muốn trở lại bố cục ban đầu Trong Dreamweaver 8 bạn vào : Window > WorkSpace Layout > Default .
Menu Window > WorkSpace Layout > Dual Screen ( Hai màn h́nh ) . Nếu có 2 màn h́nh hoặc nhiều hơn , bố cục ual Screen sẽ phát huy hiệu quả . Ví dụ : Bảng Điều Khiển Files được mở rộng để thể hiện các Sites cục bộ và site ở xa , nên nó sẽ phân chia BĐK New Assets va Snippets . Nếu chọn nó trên 1 màn h́nh duy nhất sẽ xuất hiện kết quả không mong muốn .
II.ĐIỀU CHỈNH BỐ CỤC ( Mở rộng Cửa Sổ Hồ Sơ ) .
Nhấn nút giửa bên Trái Thanh Đứng Cửa Sổ Hồ Sơ để nới rộng bề Ngang hoặc nhấp Nút Giữa đáy Cửa Sổ Hồ Sơ để nới rộng bề Đứng > Nhấp lại lần nửa để thu hẹp Cửa Sổ lại . Nhấp Phím F4 để mở rông 2 bề của Cửa Sổ Hồ Sơ > Nhấp lần nửa trở về như cũ .

III.LƯU BỐ CỤC TÙY BIẾN
Bạn có thể thiết lập 1 bố cục theo cách thức riêng của bạn v́ bạn cho rằng Dreamweaver hiển thị không như bạn muốn . Bạn lưu bố cục đó , đặt tên để lần sau bạn nhấp lên tên đó sẽ hiện ra bố cục mà bạn tạo .
Window
> Workspace Layout > Save Current > Đặt tên .
Sau nầy bạn có thể Raname nó lại hay Delete nó . Bạn không thể thực hiền điều này đối với các bố cục kèm theo .
IV.QUẢN LƯ CÁC CỬA SỔ
Bạn có thể mở các hồ sơ theo dạng Tab hoặc trong cửa sổ của riêng chúng . thật dễ dàng thay đổi qua lại giữa 2 tùy chọn này và thiết lập việc xuất hiện các hồ sơ theo cách của ḿnh .
Để trở lại chế độ thể hiện của sổ dạng Tab , nhấp nút Maximize ở góc Phải trên