Cùng học tạo Blogspot: Bài 3: Làm chủ giao diện trong DREAWEAVER CS6

Bài 3: Làm chủ giao diện trong DREAWEAVER CS6

NGÀY 8.5.2014

Nguồn: http://goo.gl/6yCA3Z 1

LINKS DOWNLOAD CÁC BÀI VIẾT CHUYÊN ĐỀ DREAMWEAVER CS6:

Bài 1: Download và cài đặt Dreamwaever CS6

https://shared.com/ymu5n49h89?s=l

Bài 2: Danh sách 15 video hướng dẫn thiết kế web:

https://shared.com/2v7xvo1iku?s=l

Bài 3: Làm chủ giao diện Dreamweaver CS6

https://shared.com/slnhedp7oz?s=l 22

Zend.vn có rất nhiều chuyên đề hướng dẫn tự học bằng Video rất hay. Phương pháp tự học là xem video và viết thành văn bản trình bày đẹp, đầy đủ chi tiết đồng thời gửi đến các bạn bài viết cùng nhau học tập. Rất mong nhân được ý kiến của các bạn bổ sung phần khiếm khuyếtvà các ý hay nếu có. Thư cho Út Bỉnh : utbinhdesign@gmai.com

Trong bài này các bạn sẽ được giới thiệu giao diện của Dreamweaver và các thành phần của nó từ đó các bạn có thể tùy chỉnh để phù hợp với quá trình thiết kế của bạn.

I.TÌNH NĂNG MÀN HÌNH WELCOME

Bấm Shortcut của chương trình để khởi động Dream. Đây là màn hình khởi động (Welcome) của Dream. Bạn thấy có 3 phần cần quan tâm, đó là:

Open a Recent Item: Mở các Tập tin và Thư mục vừa thao tác gần đây.
Create New: Tạo một File mới. Dream liệt kê các file bạn thường sử dụng như File HTML, File CSS, File PHP…Bạn có thể bấm nút More để xuất hiện một cửa sổ. Ở đây có rất nhiều Files để bạn chọn. Bạn bấm File HTML sẽ có nhiều định dạng (Layout) chọn phù hợp

và bấm nút Create để tạo. Xuất hiện nội dung File vừa chọn. Bấm đồng File HTML lại. Bạn sẽ được trở lại màn hình khởi động.

Nếu các lại File cung cấp chưa đủ, bạn bấm lên nút More. Dream bật ra một cửa sổ có rất nhiều Files. Bạn bấm lên File HTML xuất hiện rất nhiều định dạng (Layout) của nó. Bạn chọn một Layout phù hợp và bấm nút Create để tạo ra File này. Một nội dung đã được định nghĩa sẵn xuất hiện, bạn đóng File này lại.

Top Features (Videos) liệt kê các đặc tính mới trong Dream. Bạn bấm lên liên kết đầu tiên. Bạn đến trang giới thiệu Adobe. Bạn có thể xem các tính năng mới bằng các File Video.
Mản hình Welcome: Nếu không muốn xuất hiện màn hình Welcome, bạn đánh dấu chọn và nút Don’t show again góc đáy trái. Xuất hiện thông báo, bấm Ok. Kiểm tra lại: Bạn tạo một File HTML và đóng File này lại. Bạn thấy màn hình Welcome không còn xuất hiện lại nửa. Nếu muốn phục hồi màn hình Welcome: Bấm Menu Edit > Preferences > Cột trái chọn General > Bên phải đánh dấu chọn Show Welcome Sreen. Bấm Ok. Bạn bấm nít Close lại. Bạn bấm Shortcut để mở Dream. Bạn thấy màn hình Welcome xuất hiện lại.

II.TÌM HIỂU CÁC MENU, PANELS VÀ PROPERTIES

Đây là Màn Hình Làm Việc của Dream kèm theo chú thích

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.

Như vậy là bạn đã có cái nhìn tổng quất về giao diện của Dream.

1.THANH MENU

Sử dụng Menu FILE (Xử ly 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.
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).

o Bấm Tab Split: Hiển thị 2 cửa ổ 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

o View Page Source (Xem mã nguồn trang): Bạn vào một Website nào đó. Ví dụ: http://zend.vn/public. Bấm phải lên trang web > Chọn View Page Source.

o Thay đổi giá trị trong Code, Tab Design cũng thay đổi theo: Bạn phủ khối Introduction thì bên Design cũng phủ khối. Bạn nhập văn bản: Dreamweaver, bạn bấm lên Design thấy phần Design cũng đã thay đổi thành Dreamweaver.

· Chế độ LIVE: Bấm Tab LIVE > Nhập tên trang web trong Ô trắng (http://ww.zend.vn/) > Enter. Xuất hiện nội dung trang web. Bấm Tab Design. Bạn đã thấy Website Zend.vn đã được load toàn phần vào phần mềm Dream. Bạn bấm nút LIVE CODE để xem mã nguồn của Trang Web này.

· 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 để bạn biết vị trí. Tắt Live Code và Live. Chọn Tab Dessign.

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 đó bạn di chuyển nó vào vị trí nằm dưới Thanh Menu.

o Chèn 1 ảnh vào: Chọn vị trí chèn ảnh > Bấm nút Images > Den8961 nơi lưu ảnh > Ảnh có 8 nút, bạn có thể thu nhỏ hoặc phóng lớn ảnh.

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 cho 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 bạn phủ khối một đoạn văn bản (tương ứng Tag <p>. Nếu bạn 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.
Bạn phủ khối một đoạn Tag <p>. Bấm Menu Modify > Chọn Color > Chọn màu đỏ > Ok. Văn bản đã có màu đỏ. 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.

7. Sử dụng Menu COMMANDS (Hổ trợ các chức năng liên quan đến mã nguồn):

o Ví dụ: Bạn nhập chữ YOUS > Bấm Menu Modify > Chọn Check Spelling > Nó đề nghị chữ đúng là You > Bấm Change > Bấm Close.

o 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 đó.

8. 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.

9. Sử dụng Menu WINDOW (Quản lý các cửa sổ):

o Rê vạch đứng để thu hẹp hay nới rộng MHLV. Bạn chũng có thể rê Panel Insert di chuyển đặt dưới Thanh Menu.

o 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.

o Làm ẩn hiện các Panels: Vào Menu Window, bạn 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.

2.THANH TOOLBARS

· Nút Preview:Trước đó bạn đã được hướng dẫn sử dụng các Tab trong Thanh Toolbars, bây giờ bấm nút Preview > Bật ra danh dách các trình duyệt hiện có cài trong máy, bạn chọn một trình duyệt. Bạn chọn một nơi để lưu và đặt tên trang Web là: demo > Bấm Ok.

o Thêm hoặc xóa một trình duyệt: Bấm vào Edit Browse List > Xuất hiện cửa sổ Preferences, nếu muốn xóa Trình duyệt IE bấm chọn nó xong bấm dấu - > Bấm Ok. Bạn muốn thêm một trình duyệt: Bấm dấu + > Đến đường dẫn nơi lưu trình duyệt. Bạn có thể chọn quyền ưu tiên trong mục Defaults là Premary hoặc Secondary. Bấm Ok > Ok.

· Nút MultiScreen Preview: Hiển thị Vùng Soạn Thảo trên các kích thước khác nhau. Bạn thấy đang trong chế độ Full Size. Bây giờ chọn Kích thước Smart Phone > Giao diện đã được thu hẹp theo đúng kích cở đã chọn.

o Bạn có thể bấm Nút MultiScreen Preview hoặc nút xổ xuống của Thanh Kích cở đáy phải của MHLV và chọn lại chế độ Full Size.

o Bạn có thể tự thiết lập kích thước Vùng Làm Việc mà bạn định sẵn: Bấm nút MultiScreen Preview > Chọn Edit Size > Bấm dấu + > Nhập kích thước 400 và 400 > Bấm Ok. Bây giờ bấm xổ xuống của phần Window Size dã thấy kích thước 400 400 vừa tạo. Bây giờ giao diện nội dung của trang Web đã được đóng khung vào 400 X 400. Trả lại giao diện ban đầu là Full Size.

3.THANH PROPERTIES

Ví dụ phủ khối văn bản Dreamweaver. Bạn thấy đang chọn định dạng bằng

· HTML gốm có: Format chọn Paragraph – In đậm và in nghiêng.

· CSS gồm có: Chọn màu xanh lá cây > Bấm Ok.

Phần HTML và CSS sẽ được hướng dẫn trong các nội dung kế tiếp.

4.NÚT WORKSPACE

Bạn đang trong chế đệ Designer. Bấm xổ xuống nút Designer góc phải trên (Gần Ô Search) và chọn Coder. Đây là một chế độ hiển thị các code của trang web. Cửa sổ Code được ưu tiên hiển thị trước. Bên trái là cột hệ thống thư mục - Tập tin của bạn. Nếu không quen Vùng Làm Việc này bạn có thể chọn Classic.

Các thanh Panel bạn đóng lại hết chỉ còn 2 panel chính là: CSS Styles và Tag Inpector. Để 2 thành phần này lưu vào WorksPace để có giao diện mà bạn thiết lập theo ý muốn bạn bấm vào nút WorksPace > Chọn New Workspace > Nhập tên là: My Workspace và bấm nút Ok. Kiểm tra bấm Designer và bấm lại My Workspace sẽ hiển thị giao diện mà bạn đã thiết lập với 2 thanh panel là CSS Styles và Tag Inpector.