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. 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 năng 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 năm 1997. Adobe đã mua Macromedia (bao gồm các quyền đối với Dreamweaver) vào năm 2005 và tiếp tục phát triển chƣơng trình.
Nhiều tính năng 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 năm. 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 năng Dreamweaver - Adobe thƣờng xuyên bổ sung các tính năng 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 III.
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 năng 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 năng trong menu Chƣơng 1: Giới thiệu Dreamweaver 9 - Sử dụng Menu File (Xử lý các chức năng 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 văn bản > Vào Edit > Copy > Xuống hàng > Vào Edit > Chọn Paste. Bạn đã dán văn bản xuống hàng dƣới. 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 văn 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 năng này rất thƣờng đƣợc sử dụng trong lúc thiết kế. Bấm Tab Inpect. 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 văn bản (tƣơng ứng Tag <p>.
Nếu bấm Tag <div.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 văn 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. Văn bản đã đƣợc định dạng theo chọn lựa. Menu Format - Sử dụng Menu COMMANDS (Hỗ trợ các chức năng 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.