Giáo Trình Môn Học Adobe Dreamweaver: Thiết Kế Web Cơ Bản

Khám phá giáo trình Adobe Dreamweaver cho nghề thiết kế đồ họa cao đẳng, giúp nâng cao kỹ năng và kiến thức chuyên môn trong lĩnh vực này.

• Tác giả: Nguyễn Minh Thuận
• Trường học: Trường Cao Đẳng Kinh Tế - Kỹ Thuật Vinatex TP.HCM
• Chuyên ngành: Thiết Kế Đồ Họa
• Đề tài: Giáo Trình Adobe Dreamweaver: Hướng Dẫn Thiết Kế Web Cơ Bản
• Loại tài liệu: Giáo Trình
• Năm xuất bản: 2021
• Địa điểm: Hồ Chí Minh

Mục lục chi tiết

• 1. CHƯƠNG 1: GIẢI THIẤU DREAMWEAVER
• 2. CHƯƠNG 2: GIẢI THIẤU TAG HTML
• 3. CHƯƠNG 3: CSS
• 4. CHƯƠNG 4: HÌNH ẢNH VÀ HYPERLINK TRONG DW
• 5. CHƯƠNG 5: FORM
• 6. CHƯƠNG 6: BẢNG VÀ TRÌNH BÀY TRANG TRONG DW
• 7. CHƯƠNG 7: FRAME
• 8. CHƯƠNG 8: BEHAVIORS - FORM
• 9. CHƯƠNG 9: FRAMESETS
• TÀI LIỆU THAM KHẢO

Tóm tắt

I. Giới thiệu về Giáo Trình Adobe Dreamweaver Hướng Dẫn Thiết Kế Web Cơ Bản

Giáo trình Adobe Dreamweaver cung cấp kiến thức cơ bản về thiết kế web. Đây là phần mềm mạnh mẽ giúp người dùng tạo ra các trang web chuyên nghiệp mà không cần nhiều kiến thức lập trình. Dreamweaver hỗ trợ nhiều ngôn ngữ như HTML, CSS, và JavaScript, giúp người dùng dễ dàng xây dựng giao diện người dùng hấp dẫn. Giáo trình này được biên soạn nhằm phục vụ cho sinh viên ngành thiết kế đồ họa, giúp họ nắm vững các nguyên tắc thiết kế cơ bản.

1.1. Tại sao nên học Adobe Dreamweaver

Học Adobe Dreamweaver giúp sinh viên nắm vững các công cụ cần thiết để tạo trang web. Phần mềm này cung cấp giao diện WYSIWYG, cho phép người dùng xem trước thiết kế trong thời gian thực. Điều này giúp tiết kiệm thời gian và nâng cao hiệu quả công việc.

1.2. Nội dung chính của giáo trình

Giáo trình bao gồm các chương về HTML, CSS, và các công cụ thiết kế khác. Mỗi chương đều có hướng dẫn chi tiết, giúp người học dễ dàng theo dõi và thực hành. Nội dung được thiết kế để phù hợp với nhu cầu học tập của sinh viên.

II. Những thách thức trong thiết kế web với Adobe Dreamweaver

Mặc dù Adobe Dreamweaver là công cụ mạnh mẽ, nhưng người dùng vẫn gặp phải một số thách thức trong quá trình thiết kế web. Một trong những vấn đề chính là việc làm quen với giao diện và các tính năng của phần mềm. Ngoài ra, việc tối ưu hóa trang web cho các thiết bị khác nhau cũng là một thách thức lớn.

2.1. Khó khăn trong việc sử dụng giao diện

Giao diện của Dreamweaver có thể gây khó khăn cho người mới bắt đầu. Việc tìm kiếm các công cụ và tính năng cần thiết có thể mất thời gian. Tuy nhiên, với sự hướng dẫn từ giáo trình, người học có thể nhanh chóng làm quen.

2.2. Tối ưu hóa cho thiết bị di động

Một thách thức lớn khác là tối ưu hóa trang web cho các thiết bị di động. Dreamweaver cung cấp các công cụ để thiết kế responsive, nhưng người dùng cần có kiến thức về CSS và HTML để thực hiện điều này hiệu quả.

III. Phương pháp thiết kế web hiệu quả với Adobe Dreamweaver

Để thiết kế web hiệu quả, người dùng cần áp dụng một số phương pháp nhất định. Việc sử dụng các mẫu có sẵn và tùy chỉnh chúng là một cách tiếp cận thông minh. Ngoài ra, việc nắm vững các nguyên tắc HTML và CSS cũng rất quan trọng.

3.1. Sử dụng mẫu có sẵn

Dreamweaver cung cấp nhiều mẫu thiết kế sẵn có. Người dùng có thể chọn một mẫu phù hợp và tùy chỉnh theo nhu cầu của mình. Điều này giúp tiết kiệm thời gian và công sức trong quá trình thiết kế.

3.2. Nắm vững HTML và CSS

Kiến thức về HTML và CSS là rất cần thiết để tối ưu hóa trang web. Người dùng cần hiểu cách sử dụng các thẻ HTML và thuộc tính CSS để tạo ra giao diện đẹp mắt và chức năng tốt.

IV. Ứng dụng thực tiễn của Adobe Dreamweaver trong thiết kế web

Adobe Dreamweaver không chỉ là công cụ học tập mà còn là phần mềm được sử dụng rộng rãi trong ngành công nghiệp thiết kế web. Nhiều công ty và cá nhân đã sử dụng Dreamweaver để phát triển các trang web thương mại điện tử, blog cá nhân và nhiều loại hình khác.

4.1. Thiết kế trang web thương mại điện tử

Nhiều doanh nghiệp sử dụng Dreamweaver để tạo ra các trang web thương mại điện tử. Phần mềm này giúp họ dễ dàng quản lý sản phẩm, đơn hàng và khách hàng thông qua giao diện thân thiện.

4.2. Tạo blog cá nhân

Dreamweaver cũng được sử dụng để tạo ra các blog cá nhân. Người dùng có thể dễ dàng tùy chỉnh giao diện và nội dung của blog, giúp họ thể hiện cá tính và sở thích của mình.

V. Kết luận và tương lai của thiết kế web với Adobe Dreamweaver

Adobe Dreamweaver vẫn là một trong những công cụ thiết kế web phổ biến nhất hiện nay. Với sự phát triển không ngừng của công nghệ, Dreamweaver cũng đang được cập nhật để đáp ứng nhu cầu của người dùng. Tương lai của thiết kế web sẽ còn nhiều điều thú vị với sự hỗ trợ của phần mềm này.

5.1. Cập nhật công nghệ mới

Adobe thường xuyên cập nhật các tính năng mới cho Dreamweaver, giúp người dùng có thể tiếp cận với công nghệ mới nhất trong thiết kế web. Điều này giúp phần mềm luôn giữ được vị thế cạnh tranh.

5.2. Tương lai của thiết kế web

Thiết kế web sẽ tiếp tục phát triển với sự hỗ trợ của các công cụ như Dreamweaver. Người dùng cần không ngừng học hỏi và cập nhật kiến thức để theo kịp xu hướng mới.

Trích đoạn nội dung tài liệu

Chương 1: GIàI THIàU DREAMWEAVER Sau khi học xong ch°¢ng này sinh viên trình bày đ°ÿc kÁ ho¿ch thiÁt kÁ website và thao tác má Dreamweaver và sā dāng trên nÃn design. Sinh viên có thể trình bày đ°ÿc giao dián Adobe Dreamweaver. GIàI THIàU Adobe Dreamweaver - Dreamweaver là mát ch°¢ng trình phÅn mÃm để thiÁt kÁ web, và c¢ bÁn là mát trình so¿n thÁo lập trình và web HTML đÅy đă tính nng h¢n. Ch°¢ng trình cung cÃp giao dián WYSIWYG để t¿o và chßnh sāa các trang web.

Dreamweaver hß trÿ nhiÃu ngôn ngữ đánh dÃu, bao gồm HTML, XML, CSS và JavaScript. Đối vãi ngôn ngữ căa con ng°ßi, nó hß trÿ tiÁng Anh, tiÁng Tây Ban Nha, tiÁng Pháp, tiÁng Đąc, tiÁng Nhật, tiÁng Trung, tiÁng Ý, tiÁng Nga và nhiÃu ngôn ngữ khác. - Dreamweaver ban đÅu đ°ÿc phát triển và xuÃt bÁn bái Macromedia vào nm 1997. Adobe đã mua Macromedia (bao gồm các quyÃn đối vãi Dreamweaver) vào nm 2005 và tiÁp tāc phát triển ch°¢ng trình.

NhiÃu tính nng căa Dreamweaver làm nó trá thành mát công cā chßnh sāa web linh ho¿t, đ°ÿc dùng để t¿o các trang web phąc t¿p hoÁc đ¢n giÁn. - Dreamweaver CC vÿa là trình so¿n thÁo WYSIWYG vÿa là trình so¿n thÁo mã cho PC Windows và Mac. Nó có thể đọc các mẫu WordPress, Joomla và Drupal và nó bao gồm mát há thống l°ãi để thực hián thiÁt kÁ web responsive. Dreamweaver cung cÃp nhiÃu công cā để phát triển web di đáng bao gồm t¿o ąng dāng gốc cho thiÁt bá iOS và Android.

- Dreamweaver CC chß khÁ dāng khi đng ký Adobe Creative Cloud trên gói hàng tháng hoÁc hàng nm. Các gói bao gồm phiên bÁn mãi nhÃt căa phÅn mÃm, 100GB dung l°ÿng l°u trữ đám mây cho các táp, porfolio, phông chữ cao cÃp và các công cā truyÃn thông xã hái. Dreamweaver cũng có s¿n nh° là mát phÅn căa đng ký. TÃt cÁ ąng dāng bao gồm h¢n 20 ąng dāng bao gồm Photoshop CC, Illustrator CC và Adobe XD CC.

Tính nng Dreamweaver - Adobe th°ßng xuyên bổ sung các tính nng nâng cao và cập nhật giao dián căa Dreamweaver. Những cÁi tiÁn gÅn đây bao gồm: - Bootstrap 4.0 - Hß trÿ đa màn hình (Windows) - Hß trÿ cho màn hình HiDPI Ch°¢ng 1: Giái thiáu Dreamweaver 2 - Xem tr°ãc thiÁt bá - Xem trực tiÁp cz-lekarna.com - Hß trÿ PHP 7 - CÁi tiÁn hß trÿ GIT - CÁi thián tìm và thay thÁ - Trình chßnh sāa mã đ°ÿc cÁi thián vãi sự hß trÿ căa Emmet - ThiÁt kÁ đáp ąng - Trích xuÃt vãi xuÃt hàng lo¿t - KiÁn trúc 64 bit - Mẫu khái x°ãng - H°ãng dẫn trực tiÁp - Hß trÿ chąng chß - QuÁn lý trang web - Chèn phÅn tā HTML5 nhanh h¢n - Phông chữ web Adobe Edge - Trình chßnh sāa CSS trực quan - Xem tr°ãc trình duyát thßi gian thực - Hß trÿ mã hóa thông minh - Hß trÿ CMS tích hÿp. CÀI Đ¾T - Cài và sā dāng Adobe dreamweaver thiÁt kÁ Web. - B°ãc 1: Tr°ãc tiên cÅn tÁi phÅn mÃm và máy.

Có thể tÁi phiên bÁn mãi nhÃt căa Adobe dreamweaver. - B°ãc 2: Sau khi tÁi và thành công. Má th° māc chąa, tìm đÁn file cài đÁt. Sau đó chuát phÁi chọn Run as administrations.

(xem tÿ Hình 1. - Sau đó mát cāa sổ mãi ch°¢ng trình hián ra. Run as administrator Ch°¢ng 1: Giái thiáu Dreamweaver 3 Hình 1. Quá trình cài đ¿t đang dißn ra - B°ãc 3: Cāa sổ cài đÁt xuÃt hián và Adobe dreamweaver.

TiÁn hành chọn Accept để sang b°ãc tiÁp theo. NhÃn accept đáng ý cài phÅn mÁm - B°ãc 4: à b°ãc này có key để sā dāng Adobe dreamweaver thì điÃn vào māc Provide a serial number. NÁu sā dāng Adobe dreamweaver á phiên bÁn dùng thā chọn Install this product a trial, chọn ngôn ngữ sā dāng (English). Ch°¢ng 1: Giái thiáu Dreamweaver 4 Hình 1.

NhÁp sarial number ho¿c dùng thā - B°ãc 5: Bên phÁi cài thêm các ch°¢ng trình bổ sung khác nh° adobe air, adobe media player. NÁu không muốn cài thêm các ch°¢ng trình này chß cÅn bỏ tích. à māc Location chọn n¢i để cài Adobe dreamweaver tốt nhÃt nên để mÁc đánh. Sau khi đÁt các tùy chọn xong nhÃn Install để bắt đÅu cài đÁt ch°¢ng trình vào máy.

NhÃn Install đ¿n ti¿p tāc cài - B°ãc 6: à b°ãc này phÁi đÿi khá lâu cho tãi khi ch°¢ng trình ch¿y xong. Ch°¢ng 1: Giái thiáu Dreamweaver 5 Hình 1. Quá trình cài đ¿t ti¿p tāc dißn ra - Sau khi quá trình hoàn tÃt nhÃn Done. Cài đ¿t thành công Ch°¢ng 1: Giái thiáu Dreamweaver 6 MÀN HÌNH DREAMWEAVER 1.

Các b°ác c¢ bÁn t¿o file mái - B°ãc 1: Má Adobe dreamweaver lên có giao dián nh° hình d°ãi (xem tÿ Hình 1. Giao dián mái mở phÅn mÁm - B°ãc 2: Menu File chọn New. Menu new Ch°¢ng 1: Giái thiáu Dreamweaver 7 - B°ãc 3: Trong māc Create New chọn ngôn ngữ thiÁt Web ( HTML, PHP, CSS, Java, XML, .) á đây chọn HTML. Chãn ngôn ngữ vi¿t code - B°ãc 4: Khung so¿n thÁo hián thá ra để viÁt Code.

- Tab Code: ViÁt các lánh Code. - Tab Split: ChÁ đá xem 2 cát, mát bên là mã code mát bên là thiÁt kÁ. - Design: Xem thiÁt kÁ. Các tab ch¿ đß xem Ch°¢ng 1: Giái thiáu Dreamweaver 8 2.

Giao dián Adobe Dreamweaver Hình 1. Tổng quát giao dián Adobe Dreamweaver - Thanh Menu là thanh nằm trên cùng chąa các Menu. - Thanh Toolbars : Nằm d°ãi thanh Menu. Chąa danh sách các Icons tắt.

Giúp cho b¿n thực hián nhanh các chąc nng nh° Preview. - Há thống các Panels bên phÁi. Liát kê các panel phổ biÁn nh° CSS, QuÁn Lý Files (Panels Files), AP Elements. Panels Insert là Panel mà b¿n th°ßng dùng nhÃt giúp b¿n Insert.

- Màn hình làm viác : Màn hình trắng lãn bên trái là màn hình làm viác chính căa b¿n hay gọi là Document Windows. - Tag Selectors: Nằm d°ãi màn hình làm viác. Các Tags này giúp các b¿n chọn nhanh các ThÁ. - Properties Inpector: Đánh d¿ng cách hiển thá căa bÃt kỳ thành phÅn nào mà b¿n đã lựa chọn trong Documents Windows.

Thanh menu Hình 1. Chąc nng trong menu Ch°¢ng 1: Giái thiáu Dreamweaver 9 - Sā dāng Menu File (Xā lý các chąc nng liên quan đÁn tập tin): T¿o mát File: BÃm Menu File > New > Chọn Blank Page > Chọn lo¿i File là HTML > Chọn mát đánh d¿ng > BÃm nút Create > XuÃt hián cāa sổ căa File vÿa t¿o. Để đóng File l¿i b¿n bÃm dÃu X hoÁc vào menu File > Close (xem Hình 1. - Sā dāng Menu Edit (Hß trÿ các thao tác so¿n thÁo): Vãi nái dung đang thể hián b¿n thā bôi đen đo¿n vn bÁn > Vào Edit > Copy > Xuống hàng > Vào Edit > Chọn Paste.

Các thao tác này giống ch°¢ng trình Word để so¿n thÁo. B¿n cũng có thể sā dāng Phím tắt. - Sā dāng Menu View (Lựa chọn & CÃu hình phÅn hiển thá): Khi bÃm Menu này b¿n thÃy đang có dÃu chọn chÁ đá Design. B¿n chọn chÁ đá Code.

B¿n thÃy thanh Toolbars đang chọn Tab Code và thể hián Code trong MHLV (Màn hình làm viác). - BÃm Tab Split: Hiển thá 2 cāa sổ cùng lúc. Mát bên là Code căa Website và mát bên là Giao dián căa Website (xem Hình 1. Panel Tab Split - View Page Source (Xem mã nguồn trang): Ví dā: http://zend.

BÃm phÁi lên trang web > Chọn View Page Source. Ch°¢ng 1: Giái thiáu Dreamweaver 10 Hình 1. Ví dā xem page source trang web - Thay đổi giá trá trong Code, Tab Design cũng thay đổi theo: Phă khối Introduction thì bên Design cũng phă khối, nhập vn bÁn: Dreamweaver, bÃm lên Design thÃy phÅn Design cũng đã thay đổi thành Dreamweaver. Thay đổi giá trá code - ChÁ đá Live: BÃm Tab Live > Nhập tên trang web trong ô trắng (http://ww.

XuÃt hián nái dung trang web. BÃm Tab Design, thÃy Ch°¢ng 1: Giái thiáu Dreamweaver 11 Website Zend.vn đã đ°ÿc load toàn phÅn vào phÅn mÃm Dream. Click LIVE CODE để xem mã nguồn căa Trang Web này (xem Hình 1. Tab Live Code - Tab Inpect: Chąc nng này rÃt th°ßng đ°ÿc sā dāng trong lúc thiÁt kÁ.

Trỏ vào Trang Web phÅn Thông báo. Bên Code đã có bôi đen để biÁt vá trí. Tắt Live Code và Live. Chọn Tab Dessign (xem Hình 1.

Tab Inpect Ch°¢ng 1: Giái thiáu Dreamweaver 12 - Sā dāng Menu INSERT (Chèn ThÁ và các đối t°ÿng vào vùng so¿n thÁo): Đối t°ÿng là Hình Ánh – Form – Table. Panel Insert th°ßng sā dāng do đó di chuyển vào vá trí nằm d°ãi Thanh Menu. - Chèn 1 Ánh vào: Chọn vá trí chèn Ánh > BÃm nút Images > ĐÁn n¢i l°u Ánh > Ành có 8 nút, có thể thu nhỏ hoÁc phóng lãn Ánh (xem Hình 1. Nút chèn Ánh Image - Sā dāng Menu MODIFY (Chßnh sāa các thành phÅn căa trang): Menu này t°¢ng đối ít sā dāng nên không h°ãng dẫn chi tiÁt.

- Sā dāng Menu FORMAT (Đánh d¿ng cách hiển thá cho các thành phÅn căa trang): - Tag Selector: Khi phă khối mát đo¿n vn bÁn (t°¢ng ąng Tag <p>.content> tr°ãc nó s¿ phă khối đo¿n ráng h¢n và nÁu bÃm Tag <body> s¿ chọn phă khối toàn MHLV. Tag Selector Ch°¢ng 1: Giái thiáu Dreamweaver 13 - Phă khối mát đo¿n Tag <p>. BÃm Menu Modify > Chọn Color > Chọn màu đỏ > Ok. Các vn bÁn còn l¿i không phă khối vẫn hián màu đỏ s¿ đ°ÿc giÁi thích phÅn sau.

- Thay đổi đánh d¿ng đo¿n phă khối: Vào Menu Format > Chọn Paragraph Format > Chọn Heading 6. Vn bÁn đã đ°ÿc đánh d¿ng theo chọn lựa. Menu Format - Sā dāng Menu COMMANDS (Hß trÿ các chąc nng liên quan đÁn mã nguồn): - Ví dā: Nhập chữ YOUS > BÃm Menu Modify > Chọn Check Spelling > Nó đà nghá chữ đúng là You > BÃm Change > BÃm Close (xem Hình 1. Menu Commands - Ch°¢ng 1: Giái thiáu Dreamweaver 14 - Ví dā: BÃm Tab Code, phÅn Body b¿n di chuyển các Code nằm cùng mát hàng > B¿n vào Menu Commands > Chọn Apply Source Formatting > Đo¿n Code đã đ°ÿc chßnh sāa l¿i nh° cũ tr°ãc đó (xem Hình 1.

Menu Apply Source Fommatting - Sā dāng Menu SITE (QuÁn lý Site, các Tập tin, Th° māc trong Site): S¿ học trong phÅn sau. - Sā dāng Menu WINDOW (QuÁn lý các cāa sổ): - Rê v¿ch đąng để thu h¿p hay nãi ráng MHLV. B¿n cũng có thể rê Panel Insert di chuyển đÁt d°ãi thanh Menu. - Cách làm ẩn Panel: Có 2 cách: BÃm đúp lên Panel Elements để thu gọn panel này.

NÁu muốn đóng panel này, bÃm phÁi chọn Close. - Làm ẩn hián các Panels: Vào Menu Window, các Panel đang má thì có dÃu tích. NÁu muốn má thêm Panel nào thì đánh dÃu vào. - Sā dāng Menu HELP (PhÅn tài liáu h°ãng dẫn sā dāng và Dreamweaver): Hß trÿ các tián ích hoÁc các tài liáu sā dāng Dreamweaver căa hàng Adobe.