Phần 1-Thiết kế website bằng phần mềm Adobe Dreamweaver CS5

Phần 1-Thiết kế website bằng phần mềm Adobe Dreamweaver CS5 Adobe Dreamweaver là một công cụ xử lý mạnh mẽ dành cho những người thiết kế web, người dùng có thể tự mình lập trình và phát triển ứng dụng web ở nhiều cấp độ. Nếu chỉ dừng ở mức độ hiểu biết chưa nhiều về các ngôn ngữ lập trình web thì Dreamweaver vẫn đáp ứng được nhu cầu thiết kế Website chuyên nghiệp.
Nội dung trích xuất từ tài liệu:
Phần 1-Thiết kế website bằng phần mềm Adobe Dreamweaver CS5Phần 1-Thiết kế website bằng phần mềm AdobeDreamweaver CS5Adobe Dreamweaver là một công cụ xử lý mạnh mẽdành cho những người thiết kế web, người dùng cóthể tự mình lập trình và phát triển ứng dụng web ởnhiều cấp độ. Nếu chỉ dừng ở mức độ hiểu biết chưanhiều về các ngôn ngữ lập trình web thìDreamweaver vẫn đáp ứng được nhu cầu thiết kếWebsite chuyên nghiệp.Người dùng không chuyên chỉ việc cần tìm cho mìnhmột mẫu trang web vừa ý trên Internet, dùng công cụsoạn thảo thông thường để chỉnh sửa hay thêm bớtmột số thành phần, rồi tạo ra một Template để ápdụng cho toàn bộ Website.Ngoài những tính năng kéo thả để xây dựng trangweb, Dreamweaver còn cung cấp một môi trườngviết mã với đầy đủ chức năng bao gồm các công cụviết mã (như tô màu mã, bổ sung thẻ tag, thanh côngcụ mã), hỗ trợ các ngôn ngữ lập trình thông dụngHTML, CSS, Javascript, ASP VBScript, PHP hayXML. Nếu muốn xây dựng các ứng dụng web độngchạy trên công nghệ máy chủ ASP.NET, ASP, JSP vàPHP thì Dreamweaver hoàn toàn có thể đáp ứngđược các dự án lớn này.Giao diện sử dụng được bố trí trực quan và thân thiệnvới người sử dụng, khu vực soạn thảo đoạn mã đượcđánh số thứ tự ở các dòng và có tô màu theo từng thẻgiúp tiện cho việc theo dõi, kiểm tra. Ngoài giao diệnmặc định, chương trình còn hỗ trợ nhiều dạng giaodiện với cách bố trí ví trí thanh công cụ khác nhau,tại tính năng Designer (đối với phiên bảnDreamweaver CS5).Adobe Dreamweaver có thể kết hợp các phần mềmkhác của hãng Adobe để tạo ra một sản phẩm hoànhảo, ví dụ như Adobe Photoshop giúp chỉnh sửa vàthiết kế hình ảnh cho Website. Có thể tải AdobeDreamweaver bản dùng thử 30 ngày tại trang chủ:http://www.adobe.com/products/dreamweaver/ hoặctải tại đây.Tạo thư mục chứa bộ webTrước khi bắt tay vào việc tạo ra một trang web thìcông việc đầu tiên của người thiết kế là phải tạo ramột thư mục để chứa toàn bộ những gì liên quan đếntrang web, ví dụ webserver.Trong thư mục đó, bạn sẽ tạo tiếp các thư mục khácdùng để chứa dữ liệu như:Thư mục Image dùng để chứa toàn bộ hình ảnh củatrang web.Thư mục Flash dùng để chứa những tập tin flash,video clip, …Thư mục Data dùng để chứa dữ liệuVà các thư mục khác tùy theo mục đích của người tạoweb.2. Tạo mới một trang webKhởi động Dreamweaver, trong cửa sổ đầu tiên củachương trình chọn HTML để mở một trang tài liệumới. Hoặc vào menu File, chọn New. Trong mụcBlank Page chọn HTML và bấm vào nút Create đểkhởi tạo một trang mới (hình 1).Hình 1. Khởi tạo trang web3. Lưu một trang webTrước khi bắt tay vào thiết kế, bạn nên lưu trang weblại bằng cách vào menu File, chọn Save hoặc Save as.Sau đó lưu trang web vào thư mục chứa bộ web vớidạng *.html. Lưu ý, trang chủ của website bắt buộcphải đặt tên là index.html và phải được lưu ngaytrong thư mục chứa bộ web.4. Định dạng trang web.Hình 2. Thuộc tính trang webSau khi lưu lại trang web thành công, vào menuModify chọn Page Properties để cài đặt định dạngcho trang web.Trong hộp thoại Page Properties bạn chỉnh các thôngsố sau (hình 2):Mục Appearance (HTML):+ Background image: Chọn Browse và duyệt đến tậptin ảnh dùng làm nền cho trang web.+ Background: Bấm vào nút bảng màu và chỉ ra màunền cho trang web.+ Text: Chỉ định màu chữ mặc định.+ Link: Chỉ định màu chữ mặc định khi bạn tạo liênkết cho nó.+ Left margin: Nhập vào khoảng cách lề trái so vớinội dung trang web.+ Top margin: Nhập vào khoảng cách lề trên so vớinội dung trang web.+ Margin width: nhập vào độ rộng của trang web.+ Margin height: nhập vào độ cao của trang web.Mục Title/Encoding:Hình 3. Tiêu đề và bảng mã+ Title: Nhập tiêu đề của trang web.+ Các mục khác cứ để mặc định.Sau khi tinh chỉnh định dạng trang web xong, chọnOK để thiết lập (hình 3).5. Xem trang web trên trình duyệtTrong quá trình làm việc, nếu muốn xem thử trangweb trên trình duyệt thì bạn bấm Ctrl+S để lưu lại,sau đó bấm phím F12 để xem trên trình duyệt đã càiđặt làm mặc định hoặc bấm chọn vào biểu tượng cóhình trái đất ở bên trên và chọn trình duyệt cần xem.6. Tạo bảng trong trang web- Chèn bảngNếu muốn tạo một trang web có các nội dung đượcđặt ở các vị trí phù hợp và dễ tìm ra trên các bộ máytìm kiếm thì bạn cần tạo ra một bảng trước khi nhậpnội dung. Để thực hiện, bạn vào Menu Insert, chọnTable.Hình 4. Thiết lập thuộc tính bảngHộp thoại Table hiện ra, nhập số dòng trong mụcRows, số cột trong mục Columns, độ rộng của Tabletrong mục Table width và trong mục Borderthickness nhập vào giá trị độ lớn của khung trongbảng sau đó bấm OK (hình 4).- Định dạng bảngBấm chuột vào đường khung của bảng, khung thuộctính của bảng hiện ra bên dưới như hình 5Hình 5. Định dạng bảngThiết lập bảng thuộc tính gồm các nội dung sau:W, H: Chiều rộng và chiều cao của bảng.Rows: Số hàng.Cols: Số cột.CellPad: khoảng cách từ văn bản đến bảng.CellSpace: khoảng cách gi ...