Người đăng: Final Fantasy
Gửi ngày 12 Tháng 4, 2008
In    Gửi mail

GIỚI THIỆU MACROMEDIA DREAMWEAVER MX

- Phần mềm Dreamweaver MX do hãng macromedia sản xuất là 1 công cụ biên sọan HTML chuyên nghiệp nhằm để thiết kế và quản lý các Website.
-Nếu bạn chưa từng viết mã HTML bạn cũng ko phải lo ngại về điều này . Môi trường đồ họa của Dreamweaver với các bảng điều khiển và các cửa sổ sẽ cho phép những người mới sử dụng tạo được các Website cao cấp.
-Với Dreamweaver (DW) ta có thể bổ sung các đối tượng Flash mà chúng ta tạo trực tiếp trong Dreamweaver như : Flash Button , Flash Text và Flash movie.
-Ngoài ra chúng ta có thể tạo và chỉnh sửa các hình ảnh trong Macromedia Firework sau đó nhập trực tie1p và Dreamweaver và mã nguồn HTML tự động được cập nhật
-Trong DW có chứa nhiều công cụ tạo mã và nhiều tính năng như : HTML CSS và tham chiếu JavaScript ,JavaScript Debugger và các công cụ tạo mã khác nhằm cho phép chúng ta biên sọan JavaScript.

GIAO DIỆN

Để bật các thanh công cụ :
+Windows / insert ( CTRL + F2 )
+Window / Properties ( CTRL + F3 )
+View / Toolbars / Document

VÙNG LÀM VIỆC

DW có thể hiển thị tài liệu theo 3 cách :
-Show code view : chế độ hiển thị mã code HTML.
-Show code anh design views : Chế độ vừa hiển thị code HTML và nội dung thiết kế
-Show design view :hiển thị nội dung thiết kế

BÀI 1 : LẬP KẾ HỌACH VÀ THIẾT LẬP SITE


I/-Lập kế hoạch

-Một Website là tập hợp các tài liệu liên kết với nhau bằngca1c thược tính được chia sẻ , hoặc vì một lý do chia sẻ nào đó .
-Khi lập kế họach bạn hãy đặt ra những câu hỏi , ví dụ : Mục đích của Website đó , đối tượng phục vụ là ai ,khách hàng dùng trình duyệt nào để xem ... điều chính yếu cần xem xét là người dùng có thể dễ dàng duyệt Website của bạn hay không . Xác định các tài liệu có thể khách hàng của bạn cung cấp hình ảnh , văn bản ,logo hoặc những tài liệu cần thiết khác ...
-Tự phân vạch ra kế họach của bạn với khách hàng và trả lời các câu hỏi , bạn có thể phát triển một mô hình cho Website của mình . Bây giờ bạn biết được các liên kết sẽ nằm ở đâu , cần các trang web nào để chứa các thông tin cần thiết.
-Giai đọan lập kế họach có yếu tố quyết định sống còn đối với sự thành công của một Website

II/-Tạo một Website mới

-Để thiết lập 1 site mới trong DW , bạn cần tạo 1 thư mục trong ổ đĩa cứng mà trong đó bạn sae4 lưu tất cả các trang web
-Việc thiết lập site rất quan trọng vì khi kết thúc 1 site và tải nó lên máy chủ , từng trang riêng biệt phải giữ nguyên vị trí của mình so với các trang khác như khi chúng còn nằm trên ổ cứng bạn . Các đặc điểm quản lý site trong DW có thể giúp đỡ bạn bảo đảm rằng mọi thứ sẽ làm việc chính xác. DW sẽ ko làm đứt liên kết giữa các trang web khi bạn tải site của bạn lên máy chủ
-Bạn nên ngắt site thành nhiều hạng mục , đưa các trang quan hệ vào cùng một thư mục , kiểu tổ chức này giúp cho việc quản lý site dễ dàng hơn để định hướng hơn
-Khi quyết định đưa các file hình ảnh , âm thanh , hay bất kỳ một đối tượng nào đó vào một site , thì bạn nên đặt tất cả các đối tượng ấy theo từng hạng mục và sử dụng cấu trúc giống nhau cho các site

III/-Định nghĩa một Site :

Việc định nghĩa 1 site mà bạn sẽ làm việc sẽ cho phép DW theo dõi các tài nguyên , liên kết của bạn và cung cấpcho bạn những tính năng khác
- Chọn Menu site / Manage Sites ...
- Chọn New / Sites

 

- Nhập các tùy chọn sau :
+ Site Name : Nhập tên dành cho Site
+ Local Root Folder : chỉ định thư mục mà tạo ra trên ổ cứng để lưu trữ Website của bạn
+ Refresh Local File Automatically : Tự động tinh chỉnh trong file gốc khi ta sao chép nó.
+ Deafult Images Folder :tạo thư mục để chứa hình ảnh
+ HTTPAddress : Dùng để nhập URL hay còn gọi là địa chỉ web . Nếu chưa biết có thể bỏ trống
+ Enable Cache : tạo ra bộ đếm cục bộ cho site , có thể tham chiếu một cách nhanh chóng đến vị trí các tập tin trong Site . Bộ đếm này làm tăng tốc độ xử lý cho nhiều đặc điểm quản lý site của chương trình
+ Nhấp OK cửa sổ Site sẽ mở ra

+ Cửa sổ Site được chia ra làm 2 ngăn , ngăn trái hiển thị sợ đồ liên kết site và nag8n phải hiển thị các hạng mục và các đối tượng Site

IV/-Sử dụng các điều khiển cửa sổ Site :
1/ Tạo Folder và các file site :

+ Tạo thư mục : Chọn thư mục cần tạo thư mục con , vào menu File/ New Folder và nhập tên thư mục.
+ Tạo tập tin site : chọn thư mục cần tạo site , vào menu File / New File và nhập tên File.

* Lưu Ý: Tên site phải có đuôi là *.htm

- Để định trang chủ của site , ta chọn site file cần định và vào menu Site / Set As Home Page .

2/ Các điều khiển cửa sổ Site :

- Cửa sổ Site có 3 chế độ hiển thị chính :

+Site file : hiển thị cấu trúc site file , đây là chế độ mặc định dành cho cửa sổ Site.
+ Testing Server : Dùng cho máy chủ ứng dụng
+ Site Map : hiển thị bản đồ về sơ đồ cấu trúc site , ta có thể chọn Map Only hoặc Map and File từ menu

3/ Tạo Liên kết site

- Chọn Map anh File từ site Map , cửa sổ hiển thị hai ngăn
- Chọn Site File trên cửa sổ trái , rê biểu tượng liên kết ( link ) trên Site file đang chọn đến Site file cần liên kết trên cửa sổ phải .
* Lưu ý : DW chỉ cho phép liên kết trực tiếp trên 3 cấp . Muốn tạo liên kết từ cấp 4 trở đi , ta thực hiện bằng cách :
+ Chọn Site file trên cửa sổ trái rồi nhấp phải chuột và chọn Link to Existing File
+ Khi Xuất hiện cửa sổ , chọn Site flie cần liên kết trong danh sách.

BÀI 2 : THIẾT KẾ TRÌNH BÀY TRANG


I/- Giới thiệu

-Cách trình bày là một phần quan trọng trong việc thiết kế Web.Một phương cách trình bày trang thông thường là tạo với các Table HTML. Các Table có thể khó sử dụng , tuy nhiên chúng được dùng cho việc hiển thị dữ liệu dạng bảng.
-Nếu bạn có một bố cục phức tạp , chế độ hiển thị Layout có thể sẽ rất có lợi . Bạn có thể dùng hình ảnh để theo dõi và vẽ các bảng và ô một cách trực quan

II/- Thiết lập thuộc tính trang

- Vào Menu Modify/Page Properties ... ( CTRL + J )

- Page Font : Chọn các tổ hợp font để định dạng cho text , xác định font mặc định . Edit font List : Dùng để chỉnh sửa tổ hợp Font
- Size : Chọn kích thước cho text
- Text color : Chọn màu cho text
- BackGround color : chọn màu nền Background .
- BackGround Image : thiết lập ảnh nền Background
- Nhập 0 cho 4 ô Margin , điều này sẽ canh các phần tử theo cạnh của trang

Chọn mục Links trong hộp Category

-Link font : Chọn tổ hợp font cho văn bản liên kết.
-Size : chọn kích thước cho văn bản liên kết
-Link color : văn bản liên kết sẽ xuất hiện màu này trên trang web
-Visited Links : văn bản liên kết sẽ hiện màu này để cho biết rằng người sử dụng đã xem qua liên kết này .
-Rollover Links : văn bản liên kết sẽ hiện màu này khi người sử dụng lăn chuột qua .
-Avtive Links : văn bản liên kết sẽ hiện màu này khi người sử dụng nâấp chuột vào liên kết
-Underline Style : chọn chế độ gạch dưới cho đoạn văn bản liên kết.

III/ - Vẽ các Layout Table và Layout Cell

1/ Vẽ một Layout Table :

-Ở chế độ Layout View , chọn công cụ Layout Table ở chế độ trên thanh insert, trỏ chuột biến màu thành dấ cộng . Đặt trỏ chuột nơi cần trình bày trên trang , sau đó rê chuột để tạo bảng trình bày .
-Các Layout Table có thể vẽ chồng lên nhau , gọi là Layout Table kết tổ

2/ Định dạng Layout Table :

-Để định dạng Layout table ta thực hiện các bước sau :
-Chọn Layour Table bằng cách nhấp chuột vào mép của Layout Table , thiết lập các tùy chọn trên thanh Property:
+ Width : thay đổi kích thước chiều rộng của Layout Table.
+ Height : thay đổi kích thước chiều cao của Layout Table.
+ Background Color : định màu cho Layout Table bằng cách chọn màu có trong bảng màu, hoặc nâập mã thập lục phân cho màu trong hộp thoại text
+ CellPad: định khỏang cách trong ô và viền ô.
+ CellSpacer : định khỏang cách giữa ô ( thuộc tính của Layout Cell)
+ Autostretch : tự động thiết đặt kích thước cho Layout Table
+ Clear Row Height : loại bỏ chiều cao hàng , khi chiều cao không được xác định , hàng sẽ tự động co giản kích thước để phù hợp với nội dụng của chúng

3/ Vẽ Layout Cell:

- Ở chế độ Layout View , chọn công cụ Layout Cell ở chế độ Layout trên thanh Insert , trỏ chuột biến thành dấu cộng . Đặt trỏ chuột nơi cần trình bày trên trang , sau đó rê chuột để tạo bảng trình bày

*Lưu Ý : các Layout Cell không bao giờ nằm chồng lên nhau , cách trình bày của Layout là theo một lưới các ô với nhiều hàng hoặc nhiều cột .

4/ Định dạng cho Layout Cell

-Để định dạng Layout Cell ta thực hiện các bước sau :
- Chọn Layout Cell bằng cách nhấp chuột vào mép của Layout Cell , thiết lập các tùy chọn trên thanh Porperty :
+ Width : thay đổi kích thước chiều rộng của Layout Cell
+ Height :thay đổi kích thước chiều cao của Layout Cell.
+ Background color : định màu cho Layout Cell bằng cách chọn màu có trong bảng màu , hoặc nhập mã thập lục phân cho màu vào hộp thoại text
+ Horz : cài đặt tính năng gióng hàng theo chiều ngang cho các đối tượng nằm trong Layout Cell
+ Verz :cài đặt tính năng gióng hàng theo chiều dọc cho các đối tượng nằm trong Layout Cell
+ Autostretch : tự động thiết đặt kích thước cho Layout Cell.
+ No Wrap : nếu ô này được chọn nó sẽ ngăn việc ngắt từ , không cho ngắt sang 1 dòng mới.

5/ Sử dụng Spacer Image :

- Spacer Image là một hình ảnh trong suốt không hiển thị trong cửa sổ bộ trình duyệt , nhưng được sử dụng trong việc điều khiển khỏang cách trong các table có bề rộng tự động. Nếu không sử dụng Spacer Image trong các Layout table và Layout Cell thì các cột sẽ biến mất hoặc thay đổi nếu chúng không chứa nội dung .
- Cách cài đặt :
+ Vào menu Column Heard/ Add Spacer Image
- Để xóa Sapcer Image :
+ Vào menu Column Heard /Remove Space Image

IV/- Sử dụng Table

- Sử dụng Table để trình bày dữ liệu dạng bảng . Khi ta tạo một bảng Table , ta có thể dễ dàng chỉnh sửa cả diện mạo lẫn cấu trúc Table . Ta có thể bổ sung , xóa cột , hàng, và có thể chỉnh sửa đặt tính của hàng , cột , Table...

1/ Chèn Table:
- Đặt điểm chèn tại vị trí muốn chèn , rồi nhấp vào biểu tượng Table trên thanh Insert , hoặc vào menu Insert / Table

- Rows :Thiết đặt số hàng của table .
- Columns : thiết đặt số cột của Table
- Table Width : xác định bề rộng của Table bằng đơn vị pixed hoặc phần trăm của cửa sổ trình duyệt.
- Cell Padding : xác định khỏang cách nội dung và khung viền ô
- Cell Spacing : xác định khảong cách các ô trong Table
- Header : định tiêu đề cho Table

2/Xác định thuộc tính của Table:

Để định dạng một cột , hàng hoặc ô : chọn bất kỳ ô trong Table :
- Vào thanh Property và chọn mũi tên ở góc dưới bên phải của thanh Property để xem tất cả các thuộc tính.

- Rows : xác định số dòng
- Columns : xác định số cột
- Width : xác định bề rộng của Table bằng đơn vị pixed hoặc phần trăm của cửa sổ trình duyệt.
- Height : xác định bề cao của Table bằng đơn vị pixed hoặc phần trăm của cửa sổ trình duyệt.
- CellPad : xác định khỏang cách nội dung so với lề
- CellSpace : xác định khỏang cách ô .
- Align : để xác định khỏang cách mà Table gióng thẳng hàng với các thành phần khác trong 1 đoạn
- Border : xác định độ rộng đường viền khung
- BG color : Màu nền của Table
- BG Image : chèn hình ảnh vào nền Table
- Border Color : Xác định màu đường viền khung
- Clear Row Height và Clear Row Width : xóa các khỏang trắng chiều cao cột và bề rộng hàng khỏi Table.
- Convert Table Width to pixels và Convert Table Width to Percent : chuyển đổi bề rộng và cao của table từ dạng [hần trăm sang Pixels và ngược lại.

3/ Xác định thuộc tính của ô , hàng cột

- Horz : cài đặt tính năng gióng hàng theo hàng ngang
- Vert : cài đặt tính năng gióng hàng theo chiều dọc
- Width và Height : dùng để xác định chiều rộng và cao, được chọn theo đơn vị Pixel , muốn sử dụng theo phần trăm, hãy thêm dấu % sau giá trị
- No Warp : Chế độ không ngắt từ , làm cho các ô tự động mở tộng để chứa tòan bộ dữ liệu.
- Header : định dạng các ô , hàng làm tiêu đề cho Table , nội dung của tiêu đề ở dạng đậm và canh giữa theo mặc định.
- BG image : cài đặt hình ảnh nền cho ô , hàng và cột
- Brdr : cài đặt màu nền cho ô , hàng và cột
- Split Cell into Rows or Columns : dùng để chia ô thành nhiều dòng ,cột
- Merge Selected cells using spans : dùng để trộn ô

(c) hotxac-vietphotoshop.com

Biên soạn lại bởi heodat - vietphotoshop.com 

Xem bình luận (0)

« Trở về danh mục