Dreamweaver8 giáo trình hay

Dreamweaver8 giáo trình hay

BÀI 1 NGÀY 19.7.2006 SOẠN THEO KS TRẦN VIỆT AN . CHƯƠNG TRÌNH DREAMWEAVER 8 LÀ MỘT CHƯƠNG TRÌNH THIẾT KẾ WEB , MẠNH , GIÀU TÍNH NĂNG ,CHUYÊN NGHIỆP , DỄ SỬ DỤNG VÀ THÔNG DỤNG NHẤT HIỆN NAY , KHÔNG CẦN PHẢI BIẾT NHIỀU VỀ HTML , JAVASCRIPT . ĐÂY LÀ PHIÊN BẢN MỚI NHẤT CÙNG VỚI CÁC TÍNH NĂNG HAY CỦA CHƯƠNG TRÌNH GIÚP CÁC BẠN THAM KHẢO VÀ ÁP DỤNG VÀO CÔNG VIỆC HỌC VÀ THỰC HÀNH THIẾT KẾ CÁC TRANG WEB . CÓ MỘT HỌC GIẢ NÓI RẰNG : MÌNH MUỐN HỌC CÁI GÌ THÌ DẠY CHO NGƯỜI HỌC CÁI ĐÓ. Ở ĐÂY UTBINH KHÔNG DÁM DẠY CHO CÁC BẠN MÀ LÀ CHIA SẺ CÁC BÀI BIÊN SOẠN TỰ HỌC VỚI CÁC BẠN ĐỂ CÙNG NHAU HỌC HỎI RÚT KINH NGHIỆM DO ĐÓ SẼ CÓ NHIỀU ĐOẠN NGÂY NGÔ , ẤU TRỈ ĐỐI VỚI CÁC BẠN VỐN RÀNH RẼ NHƯNG VỚI PHONG CÁCH CỐ HỮU CHI TIẾT VÀ DÀI DÒNG MONG SẼ GIÚP ĐƯỢC CÁC BẠN TÌM HIỂU VÀ THỰC HÀNH CHƯƠNG TRÌNH THIẾT KẾ WEB RẤT HAY NẦY. Và điều cuối cùng là utbinh mong đón nhận được các ý kiến phản hồi để utbinh sửa chữa những khiếm khuyết giúp cho giáo án nầy dược hoàn hảo. I.NGUỒN CUNG CẤP TÀI LIỆU : 1. Mua dỉa Macromedia _AIO _ V2 ( AIO là All In One gồm nhiều Phần mềm Macromedia trong 1 dỉa ) tại các cửa hàng Vi Tính . Bạn đưa danh sách họ sẽ truy lục trên máy và lấy dỉa bán cho bạn . Trong đó có Chương Trình Dreamweaver 8 nầy. ( Hình 0 ). 1 2. utbinh tham khảo sách DREAWEAVER 8 của tác giả KS Trần Việt An , xuất bản 4.2006 : Sách viết rất chi tiết , rõ ràng , mạch lạc , dễ hiểu cho người tự học . tự tìm hiểu như utbinh khi viết các bài Tutorials đều dựa theo sách nầy và trực quan trên máy vi tính. Mua sách tại cửa hàng Nhà Sách Quỳnh Mai ( Giảm 30% ) : 478 Nguyễn Thị - Minh Khai ,Quận 3 , ĐT 8888183-8304393 , giá 60 ngàn. II.CÀI ĐẶT : 1. Mở Dỉa chứa Chương Trình ALL IN ONE > Folder DREANWEAVER > Dung lượng 67.20 MB , nhấp File Setup.exe. ( Hình 1 ). 2. Next > I Accept … > Next > Nhấp chọn Create Shortcut On Desktop > Next > Nhấp chọn Select All > Next > Install > Chạy cài đặt > Finish . Trong dia nầy khi cài đặt không cần Paste File Keygen do Tác giả đã hiệu chỉnh sẵn. 3. Ra Desktop > Nhấp Shortcut > Chọn Designer > Ok . ( Hình 2 ). III. MÔ TẢ GIAO DIỆN : START PAGE 1. OPEN A RECENT NEW : Chứa danh sách 10 Mục được mở gần đây . Nếu mở ít hơn 10 Mục , nó chỉ hiển thị số . Nếu chưa sử dụng Dreaweaver ( D ) , nỏ chỉ xuất hiện Folder Open. 2. CREATE NEW : • Chọn 1 trong những tùy chọn sẽ tạo 1 File HTML , Cold Fusion , PHP , ASP VB Script , ASP NET C# , JavaScript , XML , XSLT ( Entire Page ) , CSS , Tạo 1 Site Dreamweaver. • Chọn More để hiển thị Hộp Thoại New Document cung cấp nhiều lựa chọn . ( Hình 3 ). 2 3. CREATE FROM SAMPLES : • Phần giúp bạn chỉ học về xây dựng các Website . • Chứa các Folder , từng Folder chứa nhiều Trang mẫu trình bày đẹp • Nhấp bất cứ Folder nào sẽ mở Hộp thoại New Document. Nhấp Folder Css Style Sheets > Trong HT nầy bạn có thể chọn nội dung của các Folder khác. ( Hình 4 ) 4. EXTEND : Mở Rộng . • Bạn có thể thêm chức năng vào Dreaweaver vốn chưa được đưa vào bằng cách thực hiện thông qua 1 công nghệ gọi là Extensions. Extensions là 1 phần mềm nhằm mở rộng những tính năng của Dreaweaver. 3 • Có thể nhận thêm Extensions của Macromedia Dreaweaver Exchange . Khi nhấp vào chữ :Dreamweaver Exchange.( Xem phần Phụ lục cuối quyển sách ). (Hình 5 ). 5. QUICK TOUR : Khảo sát nhanh và cần thiết . 4 • Nhấp lên : Take a Quick Tour of Dreaweaver : Sẽ liên kết đến Trang Web .Công cụ trợ giáo trực tuyến bằng cách sử dụng Breeze Web ( Hình 6 ). • Nhấp lên : Learn About Documentation Resources : Hiển thị tài liệu trực tuyến .( Hình 7 ). 5 • Nhấp lên : Find Authorized Training mở Trang Web cung cấp các tài nguyên đào tạo . ( Hình 8 ). • Nếu không thích mở giao diện START PAGE nầy nhấp lên : Don`t Show Again. ( Hình 9 ) 6 DREAMWEAVER 8 BÀI 2 NGÀY 23.7.2006 Sách KS TRẦN VIỆT AN CỬA SỔ TÀI LIỆU 1. Khi nhấp Shortcut hiện ra Bảng WorkSpace Setup > Chọn Designer > Ok. Nếu thay đổi chọn lựa trên > Menu Window > WorkSpace LayOut . Ra 3 Mục để bạn chọn lựa .Sách nầy giả định tất cả mọi người dùng Window đều chọn Designer LayOut . (H1). 7 2. Cột Create New giúp bạn tạo 1 Trang hoặc 1 Site mới . Có nhiều lực chọn bên dưới cột. I.CỬA SỔ TÀI LIỆU : THí dụ Chọn HTML 1. Đây là 1 Cửa sổ tài liệu Dreamweaver đơn giản . Ban có thể chỉnh sửa nó để thích hợp với những thói quen của bạn . 2. Nếu mở nhiều Files cùng lúc , bạn sẽ thấy các Tables nằm dọc ở phần trên cùng cửa sổ . Bạn nhấp vào 1 Table để chỉnh sửa . Bạn có thể Delate Table.(H2). 8 3. Nhấp Nút Restore Down ( Góc Phải trên ) > Trở lại nhấp Nút Maximize. 4. Thanh Menu : Nói về những gì mà bạn mong đợi thấy trên nền. 5. Thanh INSERT : Dứoi Thanh Menu. • COMMON : Tập hợp nầy chứa các Đối Tượng thường được sử dụng nhiều nhất như các liên kết với ảnh . (H3). • LAYOUT : nhấp nút xổ xuống chọn Layout . Hiện ra gồm các Tables – Div – Layer – Khung ( Frame ) . Các Đối tượng nầy giúp bạn mô tả cách bạn muốn trình bày Trang . (H4). • FORM : Gồm các thành phần Form như Trường Text , Nút và Hộp kiểm (H5). • TEXT : Giúp tạo Style cho Text đã nằm trên Trang tốt hơn là dùng Property Inspector ( Nằm ở đáy ). (H6). • HTML : Ít hữu dụng , cho phép bạn chèn các đối tượng như Table – Khung – Script vốn được thực hiện tốt hơn ở nơi khác .(H7). 9 • APPLICATION : Giúp cho bạn làm việc với các cơ sở dữ liệu bên ngoài (H8). • FLASH ELEMENTS : Chỉ chứa 1 Đối tượng bộ xem ảnh Flash.Nếu muốn thêm các thành phần Flash như Nút Flash – Text – Video hãy quay về Common > Nút Media . ( H9+10). • FAVORITES : Chỉ là rổng không . Dùng để chỉnh sửa , dùng để chứa những gì bạn muốn nó có . Để làm điều nầy > Chọn Tập hợp Favorites > Nhấp Phải > Cho phép bạn chọn lựa để thêm những đối tượng thường được sử dụng nhiều nhất. (H11). 10 [...]... DESIGN : Nơi bạn nhập dữ liệu Khi xem trong Trình Duyệt ( Browser ) cũng giống như thế Gọi là : What You See Is You Get Là nơi bạn thao tác thực hiện thiết kế Trang Web Bạn có thể xem trên các chế độ : Design – Code – Split.(H3) 13 4 CÁC LOẠI NÚT PHỤ : Chứa mọi thứ , bạn nhấp lên để tìm hiểu thêm Đáng chú ý Nút Preview In Browser đang liên kết đến các trình duyệt của bạn đang sử dụng ( H4 ) 5 TITTLE... Hand – Zoom – Tỉ lệ % đang hiển thị - Kích cở của cửa sổ đang hiển thị ( Kế bên có nút xổ xuống để chọn Size của cửa sổ có sẵn ) – Ô chót : Ước tính thời gian mà trình duyệt Download trang nầy Nếu không thích 2 Ô cuối cùng nầy , bạn có thể thay đổi bằng cách chọn Edit Sizes từ Menu bật lên H2) 16 II.PROPERTY INSPECTOR : Căn cứ những gì được chọn trong cửa sổ tài liệu , các tùy chọn mô tả sẽ xuất hiện... Hand – Zoom – Tỉ lệ % đang hiển thị - Kích cở của cửa sổ đang hiển thị ( Kế bên có nút xổ xuống để chọn Size của cửa sổ có sẵn ) – Ô chót : Ước tính thời gian mà trình duyệt Download trang nầy Nếu không thích 2 Ô cuối cùng nầy , bạn có thể thay đổi bằng cách chọn Edit Sizes từ Menu bật lên H2) 23 II.PROPERTY INSPECTOR : Căn cứ những gì được chọn trong cửa sổ tài liệu , các tùy chọn mô tả sẽ xuất hiện... lập trình cơ sở dữ liệu của amazon.(H0) 30 5 Sách nầy đề cập xây dựng các Site Tỉnh bằng Dreamweaver Bản sao trên Web Server là Site Từ Xa 6 Site Từ Xa là ảnh gương của Site Cục Bộ Dreaweaver có những công cụ để có thể Đồng Bộ Hóa 2 Site nầy II.SỬ DỤNG HỘP THOẠI SITE DEFINITION : Việc thiết lập Site Cục Bộ và Site Từ Xa có nhiều bước Dreamweaver cung cấp Hộp Thoại nầy nhằm dẫn dắt các bạn tiến trình. .. Next (H2) 31 5 Dreamweaver hỏi bạn có muốn làm việc với 1 công nghệ sử dụng chẳng hạn như ColdFusion , ASP , NET JSP hoặc PHP hay không ? Chọn NO , I do not want to use a Server Technology > Next (H3) 6 Dreamweaver hỏi bạn muốn làm việc với các Files như thế nào trong suốt quá trình phát triển Dùng mặc định Dreamweaver hỏi bạn lưu trử các Files ở đâu trong máy tính ? > Nhấp biểu tượng Browse tìm vị... chung vài thứ như sau : • Nhấp Nút xổ để mở nội dung Panel • Kẹp Panel : Rê Panel đến nơi khác • Thanh Tiêu Đề : Nhấp Tab mở nội dung của nó • Nút Panel Options : Mở Menu để chọn • Nút Panel chứa 2 hay nhiều Tab.(H9) • • Khung xem Category : Nhấp Tag > Tab Attributes : Có 2 Khung xem là Category và List Xem Category (H10 ) 20 • • Xem List ( H11 ) Nút Panel Options sẽ xuất hiện Menu dựa vào... tìm hiểu thêm Đáng chú ý Nút Preview In Browser đang liên kết đến các trình duyệt của bạn đang sử dụng ( H4 ) 5 TITTLE : Nhập Tiêu đề Trang II.CÁC THANH CÔNG CỤ KHÁC : Khi nhấp Phải trong Thanh Document hay Thanh Insert , bạn sẽ thấy có 2 Thanh trong bảng nầy : 1 THANH STYLE RENDERING : Bạn sẽ sử dụng để chuyển đổi giữa 2 Style Rendering Phần lớn bạn chỉ muốn xem Khung màn Hình mặc định (H5) 2 THANH... • Bôi đen chọn AUGUST 3.2006 (H3) • Bôi đen chữ THURSDAY (H4) 24 • Chọn 1 Ảnh các tùy chọn xuất hiện PROPERTY INSPECTOR được sử dụng vừa xem , vừa chỉnh sửa (H5) 25 • Nhấp Tam giác nầy để thu hẹp hay mở rộng Inspector (H6) III.PANEL : Bên Phải màn Hình là các Panel 3 Các Panel có khi bị mất , chọn Menu Window > Arrange Panels để chúng xuất hiện lại Thường mặc định hiện hữu là : Application –... chung vài thứ như sau : • Nhấp Nút xổ để mở nội dung Panel • Kẹp Panel : Rê Panel đến nơi khác • Thanh Tiêu Đề : Nhấp Tab mở nội dung của nó • Nút Panel Options : Mở Menu để chọn • Nút Panel chứa 2 hay nhiều Tab.(H9) • • Khung xem Category : Nhấp Tag > Tab Attributes : Có 2 Khung xem là Category và List Xem Category (H10 ) 27 • • Xem List ( H11 ) Nút Panel Options sẽ xuất hiện Menu dựa vào... tháy mái làm xáo trộn màn hình không trở về Standard được Bạn vô Menu Help > Dreamweaver Help > Nhập View Standard > Cột Trái chọn Swithching from Standard To LayOut Mode ( HO) 11 Trở về giao diện chương trình : Menu View > Table Mode > Standard Mode Nếu không thấy Thanh Công Cụ Document > Nhấp Phải Thanh Insert > Chọn Document I.THANH CÔNG CỤ : Có 3 phần : 1 NÚT CODE : Gồm diện mạo Markup và Tag ( Thẻ . CHƯƠNG TRÌNH THIẾT KẾ WEB RẤT HAY NẦY. Và điều cuối cùng là utbinh mong đón nhận được các ý kiến phản hồi để utbinh sửa chữa những khiếm khuyết giúp cho giáo. HTML , JAVASCRIPT . ĐÂY LÀ PHIÊN BẢN MỚI NHẤT CÙNG VỚI CÁC TÍNH NĂNG HAY CỦA CHƯƠNG TRÌNH GIÚP CÁC BẠN THAM KHẢO VÀ ÁP DỤNG VÀO CÔNG VIỆC HỌC VÀ THỰC HÀNH THIẾT