Giáo trình thiết kế web bằng dreamweaver

1 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 ). 2 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 ). 3 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. 4 • 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 . • 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 ). 5 • Nhấp lên : Learn About Documentation Resources : Hiển thị tài liệu trực tuyến .( Hình 7 ). • 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 ). 6 • 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 ) 1 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). 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). 2 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 ( H 5 ) . 3 • 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). • 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). 4 • 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). • Chức năng của từng Nút và nút xổ xuống kế bên : Để con trỏ lên Nút sẽ thấy Text mô tả chức năng của Nút đó . Nhấp Nút xổ xuống kế bên ra chức năng phụ. (H12). [...]... trong Dreamweaver I.ĐỊNH NGHĨA SITE TỪ XA : 1 Site Từ xa hoạt động trên Web Server , là đích của các Files , các Folder Con trong Folder Web ở Ổ Cứng của Bạn 2 Dreamweaver kết nối với Web Server bằng 1 số cách : • FTP • SFTP ( Secure FTP ) • Kết nối qua 1 giao thức là Web DAV 3 Trước khi kết nối bạn cần biết một số thông tin về Web Server : • Loại kết nối : FTP – SFTP – Web DAV • Địa chỉ FTP – SFTP – Web. .. Cứng , sau đó sẽ Upload lên Web Server 5 Các Site Động : Khi mở Trang Web amazon.com và thấy các Trang chào đón bạn và đưa ra đề nghị mang tính cá nhân Các Trang nầy được tạo và được phục vụ chỉ cho bạn , dựa vào việc lập trình cơ sở dữ liệu của amazon.(H0) 1 6 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 7 Site Từ Xa là ảnh gương của Site Cục Bộ Dreaweaver... FOLDER GỐC CỤC BỘ : Thiết kế Web lưu trong 1 Folder ở ổ cứng , mở ra xem Folder nầy Folder nầy chứa các Files và Folder con 2 Folder gốc cục bộ có tên ( Ví Dụ ) MY COMPANY , gồm có : • Folder CompanyInfo • Folder Images • Folder Products 3 Khi mở Trang Web : Trang index ( Nằm trong Folder Gốc cục bộ ) 4 Các Site Tỉnh : Đó là các Site trong Folder ở Ổ Cứng , sau đó sẽ Upload lên Web Server 5 Các Site... Cứng , sau đó sẽ Upload lên Web Server 5 Các Site Động : Khi mở Trang Web amazon.com và thấy các Trang chào đón bạn và đưa ra đề nghị mang tính cá nhân Các Trang nầy được tạo và được phục vụ chỉ cho bạn , dựa vào việc lập trình cơ sở dữ liệu của amazon.(H0) 1 6 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 7 Site Từ Xa là ảnh gương của Site Cục Bộ Dreaweaver... FOLDER GỐC CỤC BỘ : Thiết kế Web lưu trong 1 Folder ở ổ cứng , mở ra xem Folder nầy Folder nầy chứa các Files và Folder con 2 Folder gốc cục bộ có tên ( Ví Dụ ) MY COMPANY , gồm có : • Folder CompanyInfo • Folder Images • Folder Products 3 Khi mở Trang Web : Trang index ( Nằm trong Folder Gốc cục bộ ) 4 Các Site Tỉnh : Đó là các Site trong Folder ở Ổ Cứng , sau đó sẽ Upload lên Web Server 5 Các Site... Host Server Free là : www.freewebtown.com Bạn nhập địa chỉ trang Web nầy vào đây • What Folder on the Server do you want to store your files in ? Nhập : WEBSITES10 • What is your FTP login ? Nhập : utbinh021 • What is your FTP password ? Nhập : 000000000 • Nhấp Nút Test Connection để bảo đảm rằng Dreamweaver có thể kết nối thành công với Web Server của bạn (H3) 2 4 Next > Chọn mặc định > Next (H4) 5... 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ị trí lưu ( Ở đây chọn Desktop ) > Next (H4) 3 7 Chọn NONE Vì bạn chỉ tạo Site Cục Bộ > Next (H5) 8 Màn Hình SUMMARY xuất hiện tóm lược quá trình chọn lựa của bạn Nhấp DONE (H6) 4 DREAMWEAVER 8 STATUS BAR PROPERTY INSPECTOR PANEL... 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 từng bước Trong HT nầy cung cấp cho bạn 2 chế độ Basic và Advanced • Chế độ BASIC : Sử dụng nhiều màn Hình ( Witzard ) • Chế Độ Advanced... 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 từng bước Trong HT nầy cung cấp cho bạn 2 chế độ Basic và Advanced • Chế độ BASIC : Sử dụng nhiều màn Hình ( Witzard ) • Chế Độ Advanced... Cột Giữa Create New > Dreamweaver Site (H1) 2 HT Site Definition xuất hiện , mặc định với Tab Basic , màn hình Editing Files 3 Nhập : pixels site và http://www.pixel.mu 4 Nhấp Next (H2) 2 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 . 1 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. 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. thiết . • 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 ).