Làm quen với Dreamweaver CS4

Bài 1Những nội dung chính trong bài: Tìm hiểu các tính năng • chính của Dreamweaver Giới thiệu những tính • năng mới trong phiên bản CS4 Tìm hiểu cách thức hoạt • động của website và

Bài 1

Những nội dung chính trong bài:

Tìm hiểu các tính năng

• chính của Dreamweaver Giới thiệu những tính

• năng mới trong phiên bản CS4

Tìm hiểu cách thức hoạt

• động của website và trang web

Viết các đoạn mã HTML/

• XHTML cơ bản

Chuẩn bị

Làm quen với

Dreamweaver CS4

Dù bạn là người mới học thiết kế web hay đã là một

lập trình viên nhiều kinh nghiệm, Dreamweaver luôn

là một công cụ đa năng mà bạn có thể sử dụng để

phục vụ cho việc thiết kế, bố cục và quản lý website

Trong bài học này, ta sẽ tìm hiểu về các tính năng

chính của Dreamweaver và cách thức hoạt động của

các trang web.

Trước khi bắt đầu, hãy đảm bảo rằng các công cụ và bảng làm việc đã được đưa về trạng

thái mặc định Xem phần “Thiết lập lại không gian làm việc Dreamweaver” ở trang 3

Trong bài học này, bạn sẽ thao tác với một số file trong thư mục dw01lessons Hãy đảm

bảo rằng bạn đã sao chép thư mục dwlessons từ đĩa DVD vào ổ cứng Xem “Nạp các

file bài học” ở trang 3

Chú ý: Để tạo một trang web mới, hãy xem phần “Cấu trúc thẻ và các thuộc tính”

Dreamweaver là gì?

Dreamweaver là một công cụ thiết kế, soạn thảo mã trang web và phát triển xuất sắc dành cho cả những người mới làm web cũng như người đã có kinh nghiệm Chính vì vậy, Dreamweaver đã nhanh chóng trở thành phần mềm quản lý và xây dựng website rất được ưa chuộng Dreamweaver cung cấp một môi trường sáng tạo cho các nhà thiết

kế, cho phép xây dựng website, phát triển nội dung di động, phát triển những ứng dụng

sử dụng các mã lệnh kịch bản phức tạp phía máy chủ

Các công cụ thiết kế và bố cục

Dreamweaver có hệ thống giao diện phong phú với rất nhiều menu, biểu tượng và các bảng, khiến việc chèn cũng như định dạng văn bản, hình ảnh và các nội dung đa phương tiện (như các file video và Flash) trở nên rất đơn giản Giờ đây, với sự hỗ trợ của Dreamweaver, bạn có thể tạo ra những trang web giàu chức năng với giao diện đẹp mà không cần viết một dòng mã lệnh nào Bản thân Dreamweaver vốn không hỗ trợ việc tạo ra các hình ảnh Thay vào đó, Dreamweaver được tích hợp với Adobe Photoshop CS4 để có thể chỉnh sửa các hình ảnh ngay trong ứng dụng Dreamweaver

Bảng Insert cung cấp những chức năng cho phép bạn có thể dễ dàng chèn các hình ảnh, form và các nội dung đa phương tiện vào trang web.

Quản lý site và giao thức truyền file (FTP)

Dreamweaver cung cấp mọi chức năng cần thiết cho việc quản lý site, bao gồm: khả năng truyền file (FTP) giữa máy chủ và máy tính cục bộ của bạn, các đối tượng có thể tái sử dụng (như các mẫu trang web (template), các đối tượng trong thư viện) và một số

cơ chế để đảm bảo an toàn (như kiểm tra liên kết hỏng và báo cáo về site), để đảm bảo giao diện và khả năng hoạt động của site đều tốt Trong trường hợp thiết kế trang web

sử dụng Cascading StyleSheets (CSS), công cụ Kiểm tra tính tương thích trình duyệt (Browser compatibility Check) và Cố vấn về CSS (CSS Advisor) sẽ giúp bạn xác định

và khắc phục những vấn đề tiềm tàng có thể nảy sinh khi hiển thị trang web trên các

Dreamweaver là gì?

1 Xem video minh họa Bài 1!

Sử dụng video kèm theo để hiểu rõ hơn về cách sử dụng một số tính năng trong bài học

Có thể tìm thấy video hướng dẫn cho bài này trên đĩa DVD đính kèm.

Môi trường viết mã và soạn thảo nội dung

Dreamweaver cho phép bạn làm việc trong chế độ chỉ hiển thị mã nguồn với công cụ

soạn thảo hữu hiệu Chế độ này cho phép chỉnh sửa trực tiếp mã HTML và chuyển đổi

giữa các chế độ để quan sát kết quả hiển thị của trang web Các tính năng như hiển thị

dòng mã nguồn với màu sắc khác nhau, lùi đoạn và hệ thống giao diện trực quan khiến

Dreamweaver trở thành một công cụ soạn thảo và môi trường viết mã hoàn hảo cho các

nhà thiết kế web ở bất kỳ trình độ nào

Đối với những nhà phát triển giàu kinh nghiệm, Dreamweaver cũng hỗ trợ các ngôn ngữ

lập trình và ngôn ngữ kịch bản nổi tiếng như JavaScript và các ngôn ngữ phía server,

bao gồm: ColdFusion, PHP và ASP.NET Các menu và bảng hỗ trợ viết mã lệnh được

thiết kế đặc biệt cho phép bạn xây dựng các trang và ứng dụng trên ngôn ngữ lập trình

yêu thích

Chế độ hiển thị mã lệnh (code) cung cấp một trình soạn thảo giàu tính năng bao gồm khả năng đổi màu cho

các thẻ (tag) và các mã kịch bản (script) để các đoạn mã trở nên dễ đọc và dễ hiểu hơn.

Các ngôn ngữ kịch bản được dùng để xây dựng những trang web tương tác

hay website thương mại điện tử, được phân thành hai loại: phía máy khách

(client-side) và phía máy chủ (server-side) Các ngôn ngữ phía máy khách

(như JavaScript) chạy ngay trên trình duyệt web trong khi các ngôn ngữ phía

máy chủ (như ColdFusion) lại yêu cầu phải cài đặt các phần mềm đặc biệt trên

máy chủ để có thể chạy được.

Dreamweaver dành cho đối tượng nào?

Dreamweaver được sử dụng phổ biến bởi sự đa năng của nó Với khả năng hỗ trợ trong

việc xây dựng ý tưởng, biến ý tưởng thành sản phẩm thực và hỗ trợ công tác phát triển

website, Dreamweaver trở thành một công cụ được rất nhiều chuyên gia công nghệ,

doanh nghiệp và tổ chức giáo dục ưa chuộng Tuy vậy, Dreamweaver vẫn giữ được tính

đơn giản và dễ tiếp cận đối với những người mới bắt đầu tham gia vào lĩnh vực thiết

kế web Dreamweaver cũng được sử dụng trong những dự án cá nhân và dự án của các

Dreamweaver là gì?

Những tính năng mới trong Dreamweaver CS4

Trong bài học này, ta sẽ cùng tìm hiểu một số tính năng mới nhất ở phiên bản Dreamweaver CS4 Một số tính năng được giới thiệu dưới đây dành cho những ai

đã có kinh nghiệm sử dụng Dreamweaver các phiên bản trước Đối với những người mới bắt đầu tiếp cận với Dreamweaver, có thể bỏ qua mục này và chuyển đến mục

“Tổng quan về các tính năng của Dreamweaver CS4” ở cuối bài học

Bản CS4 giới thiệu rất nhiều các tính năng mới về thiết kế và viết mã Ngoài ra, các tính năng chính của Dreamweaver trong phiên bản này cũng được cải tiến nhiều Dreamweaver là một trong các công cụ thuộc bộ Adobe Creative Suite, nên mặc định Dreamweaver có thể làm việc với các file được tạo ra từ các ứng dụng CS4 khác, chẳng hạn, cho phép chỉnh sửa các hình ảnh tạo bởi Adobe Photoshop CS4 trực tiếp trong Dreamweaver

Giao diện người dùng mới

Dreamweaver CS4 có giao diện khá giống với các ứng dụng khác trong bộ Creative Suite Điểm nổi bật của giao diện mới này là công cụ cấu hình không gian làm việc, cho phép người dùng có thể dễ dàng sắp xếp một không gian làm việc thuận tiện nhất cho mình

Chọn một không gian làm việc có sẵn phù hợp nhất với công việc hoặc tự xây dựng một không gian làm việc tùy chỉnh riêng.

Dreamweaver đã cung cấp sẵn một số kiểu không gian làm việc thông dụng Tuy nhiên, nếu muốn, người dùng cũng có thể tự sắp xếp và xây dựng một không gian làm việc tùy chỉnh riêng Bên cạnh các không gian làm việc, Dreamweaver CS4 còn cung cấp chế

độ thu nhỏ cho các bảng của chương trình Điều này cho phép người sử dụng có thể tiết kiệm được không gian làm việc trên màn hình bằng cách thu nhỏ các bảng vào cạnh phải của màn hình và mở rộng ra khi cần

Giao diện người dùng mới

Live View

Thông thường, các công cụ soạn thảo web trực quan đều không hiển thị chính xác như

trên trình duyệt web mà chúng cố gắng mô phỏng Việc tương tác sử dụng mã kịch bản

ngày càng trở nên phổ biến khiến nhu cầu thiết kế các trạng thái khác nhau cho trang

web (bao gồm các menu, bảng và các thành phần giao diện) ngày càng trở nên quan

trọng hơn Việc hiển thị tĩnh của chế độ xem Design trong Dreamweaver lúc này không

còn đáp ứng được các nhu cầu cao cấp của người dùng

Chế độ xem Live View (xem chạy thực) mới của Dreamweaver, sử dụng động cơ

kết xuất WebKit (là nền tảng cho trình duyệt web Safari và Adobe AIR), cho bạn

một cái nhìn chính xác hơn về giao diện của trang web và khá gần với việc hiển thị

trên trình duyệt web Ngoài ra, bạn còn có thể tương tác với trang web một cách

trực tiếp trong Dreamweaver, đồng thời xem được tất cả các trạng thái khác nhau

của trang web

Tương tác với trang web trong chế độ Live View.

Khi chế độ xem Live Code (xem mã nguồn) và Live View được kích hoạt đồng thời,

ngay lập tức, mỗi thay đổi trên trang sẽ ảnh hưởng đến các đoạn mã đằng sau và ngược

lại Với chế độ này, bạn có thể xem thử kết quả khi thêm vào và loại bỏ các mã JavaScript

hay việc bổ sung các nội dung động sử dụng Spry, vv

Dreamweaver CS4 hỗ trợ khả năng xem thử các trạng thái của trang web bằng cách nhấn

vào nút Freeze JavaScript (đóng băng JavaScript) hoặc nhấn phím F6 để cố định trang

web tại một trạng thái cụ thể (chẳng hạn, giữ nguyên trang web trong trạng thái menu

mở và rê chuột lên menu) Bạn có thể chỉnh sửa và xem thử các thành phần của trang

web ngay trong Dreamweaver mà không phải sử dụng tính năng Preview in Browser

(hoặc nhấn phím F12) để chạy thử trên trình duyệt

Live View

Các file liên quan

Các dự án web đang ngày càng trở nên phức tạp hơn so với trước đây và mỗi trang web bây giờ được tạo nên bởi rất nhiều thành phần khác nhau Các thành phần này có thể là Cascading StyleSheets (CSS), các file JavaScript hay thậm chí là những thành phần được đính kèm vào mã kịch bản phía server Dreamweaver CS4 cải thiện tính năng thiết kế, quản lý site và ứng dụng web sử dụng nhiều tài nguyên một cách hiệu quả hơn

Thanh Related Files (các file liên quan) nằm ở trên cùng cửa sổ tài liệu và ngay dưới các thẻ (tab) tài liệu Thanh này liệt kê các file tạo nên trang web hoàn chỉnh Bạn có thể chuyển qua lại giữa các file này bằng thanh Related Files mà vẫn giữ được cửa sổ xem thử của trang chính Chế độ xem Design (xem thiết kế) (hoặc Live View) luôn hiển thị

ra file trang chính nhưng bạn vẫn có thể chỉnh sửa mọi file liên quan khác mà vẫn giữ được cửa sổ hiển thị trực quan của trang web chính

Thanh Related Files hiển thị các file khác nhau tạo nên trang web.

Code Navigator

Công cụ Code Navigator (điều hướng trong mã nguồn) đã được cải tiến để có thể dễ dàng di chuyển đến tất cả các file liên quan (được liệt kê trong danh sách các định nghĩa CSS) tham gia vào việc tạo style cho đối tượng được chọn Từ giờ, bạn sẽ không nhất thiết phải mở tất cả các file stylesheet để tìm một định nghĩa CSS nữa Trong phiên bản Dreamweaver CS4 mới, mọi thông tin về style của một đối tượng sẽ nằm trong một menu ngữ cảnh Với công cụ Code Navigator, mỗi khi trỏ chuột vào một định nghĩa CSS, chương trình sẽ hiển thị các thuộc tính và giá trị tương ứng Khi nhấn chuột vào một định nghĩa CSS trong danh sách thì ngay lập tức đoạn mã nguồn CSS liên quan sẽ được mở ra Giống như những file liên quan khác, bạn có thể sử dụng công cụ Code Navigator để mở các file CSS khác trong khi vẫn có thể tương tác với trang HTML chính

Công cụ Code Navigator cho phép di chuyển đến mọi file liên quan một cách dễ dàng.

Các file liên quan

Cải tiến về CSS

Công cụ Property Inspector (Bộ rà thuộc tính) đã được thiết kế lại nhằm giảm thiểu các

sai sót có thể xảy ra khi thêm một đoạn mã HTML và CSS vào trang web Ở các phiên

bản trước, tùy thuộc vào nút được nhấn trong Property Inspector mà một đoạn HTML

hoặc CSS có thể sẽ được thêm vào trong trang web Việc này thường tạo ra một danh

sách các style rất khó hiểu như Style1, Style2 Ở phiên bản Dreamweaver CS4, hai

chức năng thêm các style dạng HTML và tạo kiểu CSS được tách thành hai phần riêng

biệt trong Property Inspector

Property Inspector giúp cho việc chèn các đoạn mã HTML và CSS trở nên rõ ràng hơn.

Tập dữ liệu HTML

Tính năng tập dữ liệu HTML (HTML data set) mới của Dreamweaver cho phép chuyển

một file HTML thành một cơ sở dữ liệu nhỏ Ví dụ, với tính năng tập dữ liệu HTML

này, bạn có thể nhập một bảng HTML chứa dữ liệu từ trang web này sang một trang

web khác (sử dụng JavaScript và Spry) Dữ liệu có thể được trình bày theo nhiều cách

khác nhau, như kiểu “Master/Detail” (Chính/Chi tiết) với một danh sách tóm tắt các dữ

liệu trong bảng Sau khi nhấn chuột vào một mục trong danh sách này, nội dung chi tiết

của bảng sẽ hiện ra

Cải tiến về CSS

Các đối tượng Photoshop thông minh

Trong phiên bản này, Dreamweaver hỗ trợ một tính năng rất quan trọng của bộ chương trình Creative Suite, đó là các đối tượng thông minh - smart object Khả năng này cho phép bạn có thể kéo một file PSD vào trang web trong Dreamweaver, chỉnh sửa hình ảnh cho phù hợp với trang web, thậm chí, thay đổi kích thước của hình ảnh Nếu có bất cứ cập nhật mới nào với file PSD ban đầu, một mũi tên màu đỏ sẽ xuất hiện trên hình ảnh trong Dreamweaver thông báo rằng file nguồn đã bị thay đổi Để cập nhật lại hình ảnh, nhấn chuột vào Update (cập nhật) trên nút Original (gốc) trong Property Inspector

Các đối tượng thông minh giúp việc cải tiến và cập nhật hình ảnh trong Dreamweaver trở nên dễ dàng hơn.

Các tính năng mới bổ sung của Dreamweaver CS4

Hỗ trợ xây dựng ứng dụng Adobe AIR

Adobe AIR là một hệ thống đa nền tảng cho phép các nhà lập trình kết hợp công nghệ HTML, AJAX, Adobe Flash và Flex để triển khai các ứng dụng Rich Internet Applications (RIA) trên desktop Với việc hỗ trợ đầy đủ Adobe AIR, Dreamweaver cho phép các nhà lập trình sử dụng những công cụ quen thuộc để phát triển ứng dụng và dễ dàng tạo bộ cài đặt giúp ứng dụng chạy được trên nhiều hệ điều hành khác nhau

Subversion

Dreamweaver hiện tại đã cung cấp Subversion - một hệ thống quản lý phiên bản tương

tự như CVS và Visual Sourcesafe (VSS) Subversion thường được các công ty sử dụng

Các đối tượng Photoshop thông minh

nếu muốn duy trì các phiên bản website, bạn phải làm một cách thủ công là sao chép

các phiên bản ra những thư mục khác nhau Với Subversion, tất cả file đều được lưu

lên máy chủ Subversion Các thay đổi giờ đây sẽ được theo dõi để có thể khôi phục

dự án về một trạng thái ở thời điểm bất kỳ trong quá khứ

Tổng quan về các tính năng của Dreamweaver CS4

Cuốn sách này nhằm mục tiêu giúp người học tìm hiểu và sử dụng được các tính năng mà

Dreamweaver cung cấp Phần sau đây sẽ tổng hợp các tính năng quan trọng của ứng dụng

Ba chế độ hiển thị khác nhau: Khi soạn thảo một trang web, Dreamweaver cung cấp

ba chế độ xem: Design (xem thiết kế), Split (xem cả mã và thiết kế) và Code (xem

mã nguồn) Một chế độ xem rất dễ sử dụng trong Dreamweaver là Design, cho phép

xây dựng trang web một cách trực quan và quan sát được trang web sẽ hiển thị ra sao

trên thực tế trong khi đang kiến tạo Các nhà thiết kế web và các lập trình viên có kinh

nghiệm hơn thường sử dụng chế độ xem Code để tiến hành viết mã HTML trực tiếp cho

trang web Trong chế độ xem Code, mã nguồn được hiển thị với các màu sắc khác nhau

khiến việc đọc mã trở nên dễ dàng hơn

Trong trường hợp muốn hiển thị cả hai chế độ trên, Dreamweaver cung cấp thêm chế

độ xem Split Với chế độ này, màn hình làm việc sẽ được chia thành hai phần để người

dùng có thể quan sát được cùng lúc cả hai chế độ xem Design và Code Để chuyển đổi

giữa các chế độ hiển thị trong Dreamweaver, bạn chỉ cần nhấn chuột vào chế độ cần

chuyển trên thanh công cụ Document (tài liệu)

Chế độ xem Split cho phép chỉnh sửa trang web một cách trực quan và xem phần mã phía sau

thay đổi như thế nào.

Hỗ trợ sẵn FTP: Dreamweaver hỗ trợ sẵn khả năng tải lên (upload) và tải xuống

(download) các file từ máy chủ, bằng cách sử dụng giao diện kéo thả của bảng Files

Tổng quan về các tính năng của Dreamweaver CS4

Chèn các đối tượng và mã vào trang web bằng bảng Insert: Hầu hết các đối tượng

phổ biến nhất của một trang web đều có thể được tìm thấy trên bảng Insert Các đối tượng đã được tổ chức thành từng nhóm trên bảng Bạn chỉ cần nhấn chuột một lần vào các biểu tượng tương ứng trên bảng để thêm đối tượng đó vào trong trang web Ngoài

ra, Dreamweaver cũng cung cấp các bảng bổ sung để có thể điều chỉnh các đối tượng hiện ra như mong muốn Các công cụ mặc định trong bảng Insert là những công cụ định dạng, xây dựng form và bố cục trang web Bạn có thể lựa chọn các biểu tượng hay sử dụng nhất và sắp xếp vào thẻ Favorites trong bảng

Bảng Insert được chia thành nhiều chủ đề tương ứng với từng tác vụ cụ thể.

Tùy biến bố cục không gian làm việc: Dreamweaver cho phép lưu lại vị trí các bảng và

thanh công cụ để tiện thao tác trong quá trình làm việc Dreamweaver CS4 hỗ trợ việc lưu lại các bố cục không gian làm việc riêng theo những người dùng khác nhau, hoặc tạo các không gian làm việc riêng cho từng loại công việc cụ thể như: viết mã, thiết kế hay xây dựng bố cục giao diện cho trang web

Tùy biến bảng Favorites với các biểu tượng từ bất kỳ mục nào trong bảng Insert.

Tổng quan về các tính năng của Dreamweaver CS4

Giao diện trực quan: Giao diện làm việc của Dreamweaver chứa các công cụ thiết kế

quen thuộc như: đường canh (guide), thước (ruler), các công cụ đo (measuring tool) và

lưới định vị (positioning grid) Stylesheet thời gian thực cho phép tùy biến giao diện

của trang ngay khi thiết kế, khiến việc tạo bố cục cho trang trở nên nhanh chóng và dễ

dàng hơn

Thước, đường lưới và các đường canh khiến việc xác định kích thước và định vị các đối tượng trên trang

web trở nên chính xác hơn.

Bảng CSS: Dreamweaver cung cấp rất nhiều tùy chọn về thiết kế và định dạng,

cho phép người dùng có thể tạo, chỉnh sửa và quản lý các style khi cần thông qua

bảng CSS

Cách thức hoạt động của website

Trước khi tiến hành xây dựng trang web (và một website), bạn cần nắm được cách

thức hoạt động cơ bản của một website, trang web sẽ hiển thị ra sao trên máy tính của

người dùng và những điều cơ bản cần biết để đảm bảo website hiển thị và hoạt động

tốt nhất

Cách thức hoạt động của website

Một lưu đồ đơn giản

Điều gì xảy ra khi nhập một địa chỉ vào thanh địa chỉ trên trình duyệt web? Hầu hết mọi người không quan tâm đến điều này và chỉ biết mỗi khi nhập một địa chỉ vào thanh địa chỉ (URL) của trình duyệt là website sẽ hiện ra tức thì Sự thực, rất nhiều hoạt động đã diễn ra đằng sau để có thể gửi đến trình duyệt kết quả hiển thị là một trang web mỗi khi

ta mua sắm trên mạng, kiểm tra e-mail hay tìm tài liệu

Sau khi nhập một URL hoặc một địa chỉ IP vào trình duyệt, máy tính sẽ kết nối đến một máy tính ở xa (còn gọi là máy chủ hay server) và tải về nội dung HTML, hình ảnh và các tài nguyên cần thiết để tạo nên trang web hoàn chỉnh Các trang web được gửi đến máy tính của người dùng ở một dạng không hoàn chỉnh mà các trình duyệt web (như Internet Explorer, Firefox, Safari…) sẽ chịu trách nhiệm kết hợp lại và định dạng trang dựa trên

mã HTML nhận được HTML (Hypertext Markup Language) là một ngôn ngữ đơn giản dựa trên cấu trúc thẻ hướng dẫn cho trình duyệt biết làm thế nào và ở chỗ nào sẽ thêm vào hoặc định dạng hình ảnh, văn bản và các nội dung đa phương tiện Các trang web được viết bằng ngôn ngữ HTML Dreamweaver sẽ tự động tạo ra các mã HTML khi ta xây dựng trang web bằng chế độ xem Design

Nhà cung cấp dịch vụ Internet (ISP) là công ty chuyên cung cấp dịch vụ Internet cho người dùng Một số ISP nổi tiếng ở Mỹ bao gồm America Online và Earthlink (ở Việt Nam có FPT, Viettel, VDC) Để xem nội dung của các trang web thông qua kết nối In-ternet, bạn phải có một trình duyệt web như Internet Explorer, Firefox hay Safari Một trình duyệt có thể phân tích mã HTML và hiển thị ra nội dung của các trang web với các hình ảnh, văn bản và video

Tên miền và địa chỉ IP

Thông thường, bạn hay nhập tên miền của một website vào thanh địa chỉ của trình duyệt

web (chẳng hạn như eBay.com) Chủ sở hữu của website đã mua tên miền này và sử

dụng nó để thay thế cho địa chỉ IP Địa chỉ IP là một địa chỉ dạng số được dùng để định

vị, tìm kiếm các trang web và file của một website

Vậy làm thế nào web biết được tên miền nào sẽ gắn với địa chỉ IP nào (và website nào)?

Để làm được điều này, cần có một máy chủ Dịch vụ phân giải tên miền (Domain Name Service, gọi tắt là DNS) DNS sẽ tạo ra các kết nối giữa tên miền và địa chỉ IP

Cách thức hoạt động của website

http://www.yoursite.com/

User Machine (client) Web Host (server)

Server và web host

Một máy chủ DNS chịu trách nhiệm gắn một tên miền với địa chỉ IP tương ứng Có thể

hình dung, máy chủ DNS giống như một nhân viên trực tổng đài điện thoại, chịu trách

nhiệm kết nối các cuộc gọi giữa người gọi và người nghe với nhau Các máy chủ DNS

cơ bản được quản lý bởi nhà cung cấp máy chủ web hoặc các nhà đăng ký dịch vụ web

nơi tên miền được mua Khi tìm thấy một địa chỉ IP tương ứng với tên miền, yêu cầu của

người dùng sẽ được đưa đến máy chủ và thư mục lưu trữ website Sau khi yêu cầu đến

được máy chủ, máy chủ sẽ gửi trang chủ của website, thường có tên dạng index.html,

default.html hay bất kỳ trang chủ nào khác, do máy chủ cấu hình trước

Máy chủ là một máy tính khá giống với máy tính để bàn thông thường, nhưng lại có khả

năng xử lý được một lượng truy cập từ hàng nghìn người dùng cùng một lúc Đồng thời,

máy chủ phải duy trì kết nối liên tục đến Internet để website có thể hoạt động được 24

giờ một ngày Máy chủ thường được quản lý bởi các nhà cung cấp máy chủ web (web

host) Những công ty này sẽ thu phí lưu trữ và chịu trách nhiệm đưa website lên mạng

Internet Một máy chủ có thể lưu trữ được hàng trăm website Có rất nhiều nhà cung

cấp dịch vụ web nổi tiếng, chẳng hạn như Yahoo! và các công ty lớn chuyên về lưu trữ

web như GoDaddy Các công ty lớn thường có các hệ thống máy chủ và website riêng

đặt tại công ty

Vai trò của trình duyệt web

Một trình duyệt web là một ứng dụng có khả năng tải về và hiển thị các trang HTML

Mỗi khi gửi một yêu cầu đến máy chủ web bằng cách nhấn chuột vào một liên kết hoặc

nhập vào một địa chỉ website, nghĩa là bạn đang yêu cầu trang HTML và các file đi kèm

Công việc của trình duyệt web là tái tạo và hiển thị trang web dựa vào các chỉ dẫn trong

mã HTML để có thể bố cục và định dạng các nội dung văn bản, hình ảnh… trên trang

web Mã HTML giống như một tập các chỉ thị lắp ráp cho trình duyệt

Giới thiệu về HTML

HTML là cơ sở cho hoạt động của web Các trang web được xây dựng bằng mã

HTML Trình duyệt sẽ đọc và xử lý mã HTML để bố cục, định dạng cho văn bản,

hình ảnh và video của trang web Khi thiết kế và bố cục trang web trong chế độ xem

Design, Dreamweaver sẽ tự động viết mã để hiển thị và định dạng trang web trong

trình duyệt

Ngược lại với suy nghĩ của nhiều người, HTML không phải là một ngôn ngữ lập trình,

mà là một ngôn ngữ đánh dấu văn bản đơn giản HTML không thuộc sở hữu của

Dream-weaver nên bạn có thể tạo và chỉnh sửa HTML bằng bất kỳ công cụ soạn thảo văn bản nào,

thậm chí cả với ứng dụng Notepad của Windows và TextEdit của Mac OS X Công việc

của Dreamweaver là cung cấp một cách thức để tạo các trang web mà không phải viết mã

thủ công Nếu muốn viết mã, Dreamweaver cũng cung cấp chế độ xem Code đã được trình

Giới thiệu về HTML

Cấu trúc thẻ và các thuộc tính

HTML sử dụng các thẻ hoặc từ khóa đặt trong các dấu ngoặc nhọn (< và >), cho phép sắp xếp hoặc định dạng nội dung của trang web Nhiều thẻ yêu cầu cần có một thẻ đóng Về bản chất, thẻ đóng giống thẻ bình thường, nhưng trước tên thẻ là một dấu

xổ (/)

Chọn File > Open Sau khi hộp thoại Open hiện ra, di chuyển đến thư mục dw01lessons

1

Chọn file BasicHTML.html và nhấn vào nút Open

Nhấn chuột vào nút Split ( ) trên thanh công cụ Document để quan sát bố cục của

2

trang web cũng như mã nguồn của trang web

Quan sát ở dòng 10 (xem số dòng ở cạnh bên trái của bảng Code) Chuỗi My Bold

Title đang nằm trong thẻ Strong (từ strong chứa trong cặp dấu ngoặc) Bất kỳ ký tự

hay chữ cái nào nằm trong thẻ này đều được định dạng in đậm và hiển thị trong chế

độ xem Design như sau:

Đoạn mã chứa các thẻ để định dạng nội dung văn bản trên trang.

Các thẻ có thể chứa định nghĩa CSS bổ sung thông tin về cách thức hiển thị nội dung chứa trong thẻ Các định nghĩa CSS có thể mang một số giá trị khác nhau, như kích

cỡ, màu sắc hoặc văn bản sẽ được căn về bên nào Hãy quan sát dòng chữ This text

will appear inside of its own paragraph Dòng này được bao trong một thẻ p (viết

tắt của paragraph - đoạn) và tách biệt với các đoạn khác bằng một dòng bên trên và bên dưới Bạn có thể bổ sung các định nghĩa loại (class) cho thẻ này để căn chỉnh đoạn văn bản về một bên như mong muốn

Bôi đen toàn bộ dòng

3 This text will appear inside of its own paragraph ở phía dưới

màn hình trong chế độ xem Design

Trong khi nút CSS đang được chọn trong

đoạn Nhấn chuột vào nút Align Center (căn giữa) ( )

Giới thiệu về HTML

Trong hộp thoại New CSS Rule (Tạo định nghĩa CSS mới), nhập chuỗi

trường Selector Name và nhấn OK

Đặt tên cho style mới tạo trong hộp thoại New CSS Rule.

Đoạn văn bản lúc này đã được căn giữa Quan sát trong chế độ xem Code, chú ý

6

rằng định nghĩa center đã được thêm vào thẻ <p> mở.

Sau khi căn chỉnh hoặc định dạng văn bản trong Property Inspector, các định nghĩa và thuộc tính

CSS sẽ được bổ sung vào trong phần mã của trang web.

Giới thiệu về HTML

Chọn File > Save để lưu trang web lại, sau đó chọn File > Close

7

Cấu trúc của một trang HTML

Mặc dù có rất nhiều thẻ HTML để định dạng văn bản, tuy nhiên một số thẻ được thiết kế

để tạo ra các dữ liệu cấu trúc như danh sách, bảng hoặc chính trang HTML Thẻ HTML

là thẻ cơ bản nhất, được dùng để xác định điểm bắt đầu và kết thúc của mã HTML trong một trang web

<html></html>

Bên trong thẻ HTML chính là hai thẻ định nghĩa các khu vực quan trọng nhất của trang web: head (phần mô tả) và body (phần nội dung) Phần head của một trang chứa những đối tượng không hiện ra ở phía người dùng Tuy nhiên, dữ liệu phần này đóng vai trò rất quan trọng, chẳng hạn như các từ khóa cho công cụ tìm kiếm, mô tả về trang, các liên kết tới những mã kịch bản hoặc stylesheet bên ngoài Để tạo head cho trang web, trong thẻ HTML, bổ sung thêm thẻ <head>:

HTML tương ứng sẽ được thêm vào bên trong thẻ <body>.

Để tìm hiểu thêm về việc định dạng văn bản với các định nghĩa CSS, xem Bài 3,

“Thêm văn bản và hình ảnh”.

Giới thiệu về HTML

Chèn hình ảnh bằng mã HTML

Trong HTML, một số thẻ được dùng để đặt một đối tượng như hình ảnh hoặc file đa

phương tiện vào trong trang Thẻ <img> là thẻ thường gặp nhất Nhiệm vụ của thẻ này

là đặt và định dạng một hình ảnh lên trang web Để thêm một hình ảnh và quan sát mã

kết quả, bạn làm như sau:

Chọn File > Open Sau khi hộp thoại Open hiện ra, di chuyển đến thư mục dw01lessons

1

Chọn file Images.html và nhấn Open để chỉnh sửa file

Nhấn chuột vào nút Split ( ) trên thanh công cụ Document để xem cả giao diện và

2

mã lệnh của trang Trong màn hình Design của chế độ xem Split, nhấn chuột vào

bên dưới dòng văn bản để đặt con trỏ chuyển đến vị trí này Đây là nơi bạn cần đặt

hình ảnh mới vào

Chọn chế độ xem Split trước khi chèn một hình ảnh vào trang.

Giới thiệu về HTML

Accessibility Attributes (Các thuộc tính về khả năng truy cập của thẻ ảnh) hiện

ra, nhập chuỗi Gears Image vào trong trường Alternate Nhấn OK để chèn

hình ảnh vào trang

Thêm một đoạn văn bản thay thế cho hình ảnh.

Khi chèn ảnh, hộp thoại Image Tag Accessibility Attributes hiện ra, cho phép bạn bổ sung các thông tin dành cho người dùng có nhu cầu đặc biệt (chẳng hạn như, những người bị khiếm thị) Đối với mỗi hình ảnh, bạn nên nhập một đoạn văn bản thay thế Để hộp thoại này không hiện ra mỗi lần chèn ảnh, có thể chọn Edit > Preferences (Windows) hoặc Dreamweaver > Preferences (Mac

Giới thiệu về HTML

Trong đoạn mã trên, thẻ

5 <img> HTML đã được dùng để chèn hình ảnh Nhấn chuột

lên hình ảnh trong cửa sổ tài liệu để chọn hình ảnh đó Thanh Property Inspector ở

phía dưới trang sẽ hiển thị và cho phép bạn thiết lập các thuộc tính cho hình ảnh

Trong mục Border của Property Inspector, nhập giá trị

độ rộng 3 pixel xung quanh hình ảnh và nhấn Enter (Windows) hoặc Return (Mac

OS) Nhấn chuột vào nền của trang để bỏ chọn hình ảnh, chú ý sự xuất hiện của

đường viền Lúc này, thẻ <img> chứa thuộc tính về đường viền và mang giá trị là

3, đúng như bạn vừa nhập vào trong thanh Property Inspector

Mỗi khi thay đổi hoặc bổ sung các tùy chỉnh cho hình ảnh được chọn, Dreamweaver sẽ tự động

thay đổi phần mã ở phía sau.

Chọn File > Save để lưu trang web lại, sau đó chọn File > Close Chú ý rằng, trong

7

HTML, hình ảnh và nội dung đa phương tiện không được nhúng vào mà được chèn

vào trong trang Điều này có nghĩa là, các thẻ sẽ trỏ đến vị trí tương đối của file so

với trang Những file được các thẻ trỏ đến đều phải luôn tồn tại để có thể hiển thị lên

trang Đó là lý do vì sao các trang HTML thường có kích thước file rất nhỏ

Màu sắc trong HTML

Trong rất nhiều bảng của Dreamweaver và trong các đoạn mã của trang web, mỗi màu sắc

thường được đại diện bởi một mã 6 ký tự và đứng trước là dấu thăng (#) Mã này được gọi

là mã thập lục phân Các trang HTML sử dụng hệ thống mã này để xác định và sử dụng màu

sắc Bằng cách sử dụng mã thập lục phân, bạn gần như có thể tạo ra bất kỳ màu sắc nào

Chẳng hạn, nếu muốn tạo ra một màu đỏ thẫm trong HTML, bạn dùng mã #CC0000

Các cặp hai chữ số ở đầu, giữa và cuối của mã thập lục phân đại diện cho giá trị trong

phổ màu RGB (Red - đỏ, Green - xanh lá cây, Blue - xanh da trời) Chẳng hạn, màu

trắng trong RGB có các giá trị R:255 G:255 B:255 thì trong HTML sẽ là #FFFFFF

(255|255|255) Việc chọn màu trong Dreamweaver khá đơn giản và thuận tiện nhờ có

bảng Swatches dễ sử dụng

Giới thiệu về HTML

Công cụ lấy mẫu màu trong Adobe Photoshop và Illustrator cũng sử dụng các

mã màu thập lục phân, cho phép bạn có thể dễ dàng sao chép màu sắc từ các ứng dụng này cho Dreamweaver.

Các quy tắc về phân biệt kiểu chữ hoa, chữ thường và khoảng trắng

HTML là một ngôn ngữ mềm dẻo và có rất ít các quy tắc về hình thức riêng Tùy thuộc vào yêu cầu của bạn mà HTML sẽ phân biệt chữ hoa, chữ thường, hoặc không Để xem cách HTML xử lý các khoảng trắng, thực hiện các bước sau:

Chọn File > Open Hộp thoại Open mở ra, di chuyển đến thư mục dw01lessons

1

Chọn file Whitespace.html và nhấn Open

Nếu file chưa được mở trong chế độ xem Split, nhấn chuột vào nút Split ( ) trên

Cả ba thẻ này có kiểu chữ hoa, chữ thường khác nhau hoàn toàn, tuy nhiên tất cả

đều hợp lệ và được xử lý như nhau Hãy để ý đoạn This is one sentence This is

another Quan sát trong cửa sổ mã, bạn thấy có rất nhiều dấu cách giữa hai dòng

này, nhưng trong chế độ xem Design thì lại không thấy có dấu cách nào hiện ra

Điều này là do tất cả các dấu cách và dấu xuống dòng giữa hai đoạn của văn bản

hoặc thẻ sẽ bị loại bỏ

Mặc dù có rất nhiều khoảng trống giữa hai câu nhưng chúng vẫn được hiển

thị liền nhau trong chế độ xem Design.

Để tạo một dấu xuống dòng hoặc một đoạn mới, bạn phải nhập vào thẻ HTML

3

Đặt con trỏ vào vị trí sau câu đầu tiên phía dưới cửa sổ Design, sau đó nhấn phím

Shift+Enter (Windows) hoặc nhấn Shift+Return (Mac OS) hai lần Ngay lập tức,

hai dấu xuống dòng được thêm vào trang Quan sát trong cửa sổ Code lúc này, hai

thẻ <br> (break) đã được thêm vào trong mã HTML của trang Sau khi hiển thị trên

trình duyệt, thẻ <br> sẽ thêm các dòng trắng giữa các câu, tuy nhiên các câu này

vẫn được HTML coi là trong cùng một đoạn (paragraph)

Để tạo một dấu xuống dòng, giữ phím Shift và nhấn phím Enter hoặc Return.

Giới thiệu về HTML

Để tạo một đoạn mới, đặt con trỏ trước cụm

hoặc Return (Mac OS) Đoạn này sẽ được tách ra khỏi dòng trước và sau nó, đồng thời

được bao trong cặp thẻ <p> (paragraph).

Dreamweaver sẽ tự động tạo ra một đoạn mới mỗi khi bạn nhấn phím Enter hoặc Return.

Trong Dreamweaver, các dấu cách liên tiếp sẽ bị loại bỏ và chỉ hiển thị như một dấu cách trong chế độ xem Design cũng như trên trình duyệt.

Chọn File > Save để lưu trang web lại, sau đó chọn File > Close

5

Phân cấp thẻ

Các thẻ HTML tuân theo một thứ tự gọi là phân cấp thẻ để đảm bảo mọi thứ sẽ hiển

thị đúng Thẻ đứng đầu trong phân cấp thẻ là thẻ <html> và các thẻ khác sẽ nằm dưới thẻ <html> Các thẻ như <body> lại chứa những thẻ nhỏ hơn dưới nó, như: thẻ <p>,

<img> (image) và <strong> (bold) Ngoài ra, các thẻ cấu trúc như thẻ tạo đoạn, danh

sách, bảng sẽ có cấp độ cao hơn so với những thẻ định dạng như <strong> và <em>

(italic) Quan sát đoạn mã ví dụ sau:

<strong><p>Đoạn được in đậm</p></strong>

Mặc dù đoạn mã này có thể sẽ hoạt động trên một số trình duyệt, song cách làm này

không được khuyến khích vì thẻ <strong> có phân cấp thấp hơn so với thẻ <p> Đoạn

mã sau là cách chuẩn hơn và an toàn hơn nếu muốn tạo một đoạn được in đậm:

<p><strong>Đoạn được in đậm</strong></p>

Giới thiệu về HTML

Dreamweaver giữ được nguyên tắc các thẻ lồng nhau rất tốt Nếu muốn thao tác với mã

theo phương pháp thủ công, bạn phải nhớ các kỹ thuật viết mã chuẩn

XHTML 1.0 Transitional

Phiên bản mới nhất của HTML là XHTML 1.0, một phiên bản chặt chẽ hơn so với HTML,

khiến HTML tương thích hơn với những nền tảng mới như các thiết bị di động, bằng cách

quy định nghiêm khắc hơn về định dạng mã XHTML là sự kết hợp giữa các thành phần

của HTML và ngôn ngữ mô tả dữ liệu XML XML là chữ viết tắt của Extensible Markup

Language (ngôn ngữ đánh đấu mở rộng), đã trở thành một cách thức phổ biến để trao đổi

thông tin giữa các ứng dụng, nền tảng và hệ thống dường như không liên quan với nhau

Mặc định rằng, Dreamweaver tạo ra các trang web mới sử dụng tiêu chuẩn XHTML 1.0

Transitional

Sự khác nhau giữa HTML và XHTML

Mặc dù các thẻ và thuộc tính vẫn giữ nguyên nhưng cấu trúc của ngôn ngữ đã chặt chẽ

hơn trong XHTML Trong khi HTML rất thoải mái trong việc viết mã cẩu thả như lồng

và đóng các thẻ, thì XHTML lại yêu cầu tất cả các thẻ đều phải có thẻ đóng và phải lồng

các thẻ đúng theo phân cấp HTML không phân biệt kiểu chữ hoa, chữ thường khi tạo

thẻ; tuy nhiên, trong XHTML, tất cả các thẻ phải sử dụng kiểu chữ thường

Ví dụ, một thẻ <br> thông thường không cần phải có thẻ đóng thì bây giờ buộc phải

có thẻ đóng Tuy nhiên, bạn có thể viết các thẻ tự đóng bằng cách dùng một dấu gạch

chéo (/) - bảo đảm rằng có một khoảng trống giữa chữ (br) và dấu gạch chéo - rồi đóng

dấu ngoặc như sau:

<br />

Kết quả, bạn sẽ nhận được một ngôn ngữ chuẩn tắc hơn, tận dụng được các trình duyệt

và nền tảng thiết bị mới, trong khi vẫn giữ được tính tương thích với những trình duyệt

cũ Khi tạo một trang mới, để tạo các trang web sử dụng chuẩn XHTML, bạn chỉ cần

chọn kiểu Document Type (Doc Type - loại tài liệu) là XHTML 1.0 Transitional

Tìm hiểu thêm về mã

Mặc dù đôi chỗ trong giáo trình đưa ra các đoạn mã ví dụ, nhưng viết mã thủ công

không phải là mục đích chính của các bài học Cách tốt nhất để tìm hiểu mã ứng với

thành phần giao diện trong chế độ xem Design là chuyển qua chế độ xem Code để quan

sát các đoạn mã tương ứng được tạo ra

Cần nhớ rằng, mỗi nút, bảng và menu trong Dreamweaver đều đại diện cho một số kiểu

thẻ, thuộc tính hoặc giá trị HTML nào đó, và gần như bạn sẽ không nghiên cứu các

Giới thiệu về HTML

Màn hình chào mừng

Điểm chung của hầu hết các ứng dụng CS4 là màn hình chào mừng chứa các file mới tạo hoặc được mở gần đây Màn hình chào mừng hiện ra khi Dreamweaver vừa khởi động xong hoặc không có file nào được mở Từ màn hình chào mừng, bạn có thể tạo các trang hoặc tạo site mới, mở một file gần đây hoặc tạo ra một file mới với nhiều kiểu định dạng được hỗ trợ bởi Dreamweaver

Màn hình chào mừng hiện ra khi Dreamweaver vừa khởi động xong hoặc không

có file nào được mở.

Những thành phần chính trên màn hình chào mừng:

Open a Recent Item (Mở một file làm việc gần đây): Danh sách các file làm việc gần

đây nhất sẽ xuất hiện ở cột bên trái cùng của màn hình khởi động Ngoài ra, bạn có thể lựa chọn các file khác để mở bằng cách nhấn vào nút Open ( ) ở dưới cùng màn hình

Create New (Tạo mới): Ngoài các trang HTML, Dreamweaver hỗ trợ tạo mới rất nhiều

các định dạng khác như CSS, JavaScript và XML Dreamweaver không chỉ là một công

cụ xây dựng trang web, mà còn là một trình soạn thảo lý tưởng cho việc tạo các file không phải là HTML Ngoài ra, bạn có thể tạo các site mới trong Dreamweaver bằng cách sử dụng liên kết bên dưới màn hình hoặc chọn mục More để xem những tùy chọn file khác

Tạo file từ các file mẫu: Nếu không muốn tạo một file và thiết kế lại từ đầu, hoặc trong

trường hợp cần một vài ý tưởng thiết kế ban đầu, Dreamweaver cung cấp sẵn rất nhiều file mẫu, từ các trang với thiết kế trang đầy đủ đến những file chỉ có bố cục từng phần Thiết kế của các trang mẫu có thể chia thành nhiều loại, từ các trang về sức khỏe đến giải trí, cung cấp nhiều lựa chọn giúp bạn có thể nhanh chóng xây dựng được một trang web phù hợp Trang mẫu chứa rất nhiều bố cục phổ biến và hữu ích cho việc xây dựng nên các trang web

Màn hình chào mừng

Tạo, mở và lưu tài liệu

Các bài học trong cuốn sách này yêu cầu người học phải có kỹ năng tạo, lưu và mở

file có sẵn Hầu hết các tác vụ liên quan đến file đều nằm trên menu File ở trên cùng

của cửa sổ chương trình, hoặc nằm ở trang chào mừng hiện ra khi vừa khởi động xong

Dreamweaver

Tạo tài liệu mới

Dreamweaver hỗ trợ việc tạo các file văn bản, phổ biến nhất là dạng HTML (trang web)

Ngoài ra, Dreamweaver còn hỗ trợ việc tạo các loại file khác như CSS, XML, JavaScript

và thậm chí cả Flash ActionScript

Bạn có thể tạo file từ đầu hoặc sử dụng các chủ đề và mẫu bố cục sẵn Để tạo file mới,

sử dụng menu File hoặc màn hình chào mừng

Hộp thoại New Document cung cấp các lựa chọn file mới với nhiều định dạng và mẫu có sẵn.

Để tạo một file mới, chọn File > New Hộp thoại New Document (tài liệu mới)

file HTML phải được lưu với phần mở rộng là html để trình duyệt có thể hiểu và

Tạo, mở và lưu tài liệu

Mở một file mới mở gần đây

Để mở một file mới làm việc gần đây, chọn File > Open Recent hoặc từ màn hình chào mừng, chọn một mục dưới cột Open a Recent Item

Chọn một file từ màn hình chào mừng hoặc chọn File > Open Recent để chọn một file mới mở gần đây.

Như vậy, chúng ta đã tìm hiểu xong những tính năng mà Dreamweaver cung cấp Ở các phần tới, ta sẽ học cách thao tác với từng tính năng này Hãy chuyển sang bài học tiếp theo để tiến hành xây dựng site đầu tiên với Dreamweaver!

Tạo, mở và lưu tài liệu

Tự học

Tìm hiểu các bố cục CSS có sẵn và sử dụng được ngay trong Dreamweaver bằng cách

chọn File > New, trong cột Page Type, chọn HTML Quan sát các lựa chọn trong cột

Layout và mở thử một vài mẫu bố cục Xác định các mẫu bố cục có ý định sẽ sử dụng

Bài 2

Những nội dung chính trong bài:

Tạo một định nghĩa website

• Thiết lập thư mục gốc cục

•

bộ và các thư mục ở xa Thêm và định nghĩa các trang

• Chọn, hiển thị và sắp xếp

• các file với bảng Files Gửi và nhận các file với

• server

Chuẩn bị

Tạo một

website mới

Sức mạnh của Dreamweaver nằm ở khả năng phong

phú trong việc kiến tạo website cùng những công cụ

quản lý hữu hiệu Bạn có thể sử dụng phần mềm này

để tạo ra mọi thứ, từ từng trang web lẻ tới những

website hoàn thiện Các trang trong website của bạn

có thể cùng chung chủ đề, đồng nhất về thiết kế, hay

cùng phục vụ mục đích chung Sau khi hoàn thành

website trên ứng dụng Dreamweaver, bạn có thể tiến

hành quản lý một cách hữu hiệu và xuất bản trực tiếp

lên mạng.

Trước khi bắt đầu, hãy đảm bảo rằng các công cụ và bảng làm việc đã được đưa về trạng

thái mặc định Xem phần “Thiết lập lại không gian làm việc Dreamweaver” ở trang 3

Trong bài học này, bạn sẽ thao tác với một số file trong thư mục dw02lessons Hãy đảm

bảo rằng bạn đã sao chép thư mục dwlessons từ đĩa DVD vào ổ cứng Xem phần “Nạp

Tạo một website mới

Trong Dreamweaver, thuật ngữ site dùng để chỉ những vùng lưu trữ cục bộ (local) hoặc

ở xa (remote), là nơi đặt các file tạo nên website Một site có thể bao gồm cả vùng server thử nghiệm để xử lý các trang động Để tận dụng tối đa ưu thế của các tính năng trong Dreamweaver, bạn phải luôn ghi nhớ rằng cần bắt đầu từ việc tạo một website mới.Cách đơn giản nhất để tạo một website mới trong Dreamweaver là sử dụng tính năng Site Definition Chọn Site > New Site và cửa sổ này xuất hiện

Bạn cũng có thể sử dụng hộp thoại Manage Sites để tạo một website mới Chức năng này và các chức năng khác của hộp thoại Manage Sites được thảo luận ở phần sau của cuốn sách.

Trong bài học này, bạn bắt đầu bằng việc sử dụng tính năng Site Definition để hoàn thành các nhiệm vụ sau:

Màn hình đầu tiên của thẻ Basic trên cửa sổ Site Definition cho phép người dùng đặt tên website Bạn nên tránh sử dụng các dấu cách (thay vào đó, hãy sử dụng dấu gạch dưới), dấu chấm, các dấu xổ, hay bất cứ ký tự đặc biệt nào khác để đặt tên website, vì làm như vậy có thể khiến server không chỉ dẫn đến các file được

Tạo một website mới

2 Xem video minh họa Bài 2!

Sử dụng video kèm theo để hiểu rõ hơn về cách sử dụng một số tính năng trong bài học

Có thể tìm thấy video hướng dẫn cho bài này trên đĩa DVD đính kèm.