Làm quen với Dreamweaver CS4

Bài Những nội dung bài: • Tìm hiểu tính Dreamweaver • Giới thiệu tính phiên CS4 • Tìm hiểu cách thức hoạt động website trang web • Viết đoạn mã HTML/ XHTML Làm quen với Dreamweaver CS4 Dù bạn người học thiết kế web lập trình viên nhiều kinh nghiệm, Dreamweaver công cụ đa mà bạn sử dụng để phục vụ cho việc thiết kế, bố cục quản lý website Trong học này, ta tìm hiểu tính Dreamweaver cách thức hoạt động trang web Chuẩn bị Trước bắt đầu, đảm bảo công cụ bảng làm việc đưa 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 Trong học này, bạn thao tác với số file thư mục dw01lessons Hãy đảm bảo bạn chép thư mục dwlessons từ đĩa DVD vào ổ cứng Xem “Nạp file học” trang Chú ý: Để tạo trang web mới, xem phần “Cấu trúc thẻ thuộc tính” trang 20 Trong phần tiếp theo, bạn tìm hiểu số tính Dreamweaver CS4 Bài 1, Làm quen với Dreamweaver CS4 Dreamweaver gì? Xem video minh họa Bài 1! Sử dụng video kèm theo để hiểu rõ cách sử dụng số tính học Có thể tìm thấy video hướng dẫn cho đĩa DVD đính kèm Dreamweaver gì? Dreamweaver công cụ thiết kế, soạn thảo mã trang web phát triển xuất sắc dành cho người làm web người có kinh nghiệm Chính vậy, Dreamweaver nhanh chóng trở thành phần mềm quản lý xây dựng website ưa chuộng Dreamweaver cung cấp môi trường sáng tạo cho 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 ứng dụng sử dụng mã lệnh kịch phức tạp phía máy chủ Các công cụ thiết kế bố cục Dreamweaver có hệ thống giao diện phong phú với nhiều menu, biểu tượng bảng, khiến việc chèn định dạng văn bản, hình ảnh nội dung đa phương tiện (như file video Flash) trở nên đơn giản Giờ đây, với hỗ trợ Dreamweaver, bạn tạo trang web giàu chức với giao diện đẹp mà không cần viết dòng mã lệnh Bản thân Dreamweaver vốn không hỗ trợ việc tạo hình ảnh Thay vào đó, Dreamweaver tích hợp với Adobe Photoshop CS4 để chỉnh sửa hình ảnh ứng dụng Dreamweaver Bảng Insert cung cấp chức cho phép bạn dễ dàng chèn hình ảnh, form nội dung đa phương tiện vào trang web Quản lý site giao thức truyền file (FTP) Dreamweaver cung cấp chức cần thiết cho việc quản lý site, bao gồm: khả truyền file (FTP) máy chủ máy tính cục bạn, đối tượng tái sử dụng (như mẫu trang web (template), đối tượng thư viện) số chế để đảm bảo an toàn (như kiểm tra liên kết hỏng báo cáo site), để đảm bảo giao diện khả hoạt động site 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) Cố vấn CSS (CSS Advisor) giúp bạn xác định khắc phục vấn đề tiềm tàng nảy sinh hiển thị trang web trình duyệt khác Thiết kế web với Dreamweaver CS4 Dreamweaver gì? Môi trường viết mã soạn thảo nội dung Dreamweaver cho phép bạn làm việc chế độ hiển thị mã nguồn với công cụ soạn thảo hữu hiệu Chế độ cho phép chỉnh sửa trực tiếp mã HTML chuyển đổi chế độ để quan sát kết hiển thị trang web Các tính hiển thị dòng mã nguồn với màu sắc khác nhau, lùi đoạn hệ thống giao diện trực quan khiến Dreamweaver trở thành công cụ soạn thảo môi trường viết mã hoàn hảo cho nhà thiết kế web trình độ Đối với nhà phát triển giàu kinh nghiệm, Dreamweaver hỗ trợ ngôn ngữ lập trình ngôn ngữ kịch tiếng JavaScript ngôn ngữ phía server, bao gồm: ColdFusion, PHP ASP.NET Các menu bảng hỗ trợ viết mã lệnh thiết kế đặc biệt cho phép bạn xây dựng trang ứng dụng ngôn ngữ lập trình yêu thích Chế độ hiển thị mã lệnh (code) cung cấp trình soạn thảo giàu tính bao gồm khả đổi màu cho thẻ (tag) mã kịch (script) để đoạn mã trở nên dễ đọc dễ hiểu Các ngôn ngữ kịch dùng để xây dựng trang web tương tác hay website thương mại điện tử, phân thành hai loại: phía máy khách (client-side) phía máy chủ (server-side) Các ngôn ngữ phía máy khách (như JavaScript) chạy trình duyệt web ngôn ngữ phía máy chủ (như ColdFusion) lại yêu cầu phải cài đặt phần mềm đặc biệt máy chủ để chạy Dreamweaver dành cho đối tượng nào? Dreamweaver sử dụng phổ biến đa Với khả hỗ trợ việc xây dựng ý tưởng, biến ý tưởng thành sản phẩm thực hỗ trợ công tác phát triển website, Dreamweaver trở thành công cụ nhiều chuyên gia công nghệ, doanh nghiệp tổ chức giáo dục ưa chuộng Tuy vậy, Dreamweaver giữ tính đơn giản dễ tiếp cận người bắt đầu tham gia vào lĩnh vực thiết kế web Dreamweaver sử dụng dự án cá nhân dự án doanh nghiệp nhỏ hay chuyên gia truyền thông, nhiếp ảnh gia hay họa sỹ có nhu cầu xây dựng trang web cho riêng Bài 1, Làm quen với Dreamweaver CS4 Giao diện người dùng Những tính Dreamweaver CS4 Trong học này, ta tìm hiểu số tính phiên Dreamweaver CS4 Một số tính giới thiệu dành cho có kinh nghiệm sử dụng Dreamweaver phiên trước Đối với người bắt đầu tiếp cận với Dreamweaver, bỏ qua mục chuyển đến mục “Tổng quan tính Dreamweaver CS4” cuối học Bản CS4 giới thiệu nhiều tính thiết kế viết mã Ngoài ra, tính Dreamweaver phiên cải tiến nhiều Dreamweaver công cụ thuộc Adobe Creative Suite, nên mặc định Dreamweaver làm việc với file tạo từ ứng dụng CS4 khác, chẳng hạn, cho phép chỉnh sửa hình ảnh tạo Adobe Photoshop CS4 trực tiếp Dreamweaver Giao diện người dùng Dreamweaver CS4 có giao diện giống với ứng dụng khác Creative Suite Điểm bật giao diện công cụ cấu hình không gian làm việc, cho phép người dùng dễ dàng xếp không gian làm việc thuận tiện cho Chọn không gian làm việc có sẵn phù hợp với công việc tự xây dựng không gian làm việc tùy chỉnh riêng Dreamweaver cung cấp sẵn số kiểu không gian làm việc thông dụng Tuy nhiên, muốn, người dùng tự xếp xây dựng không gian làm việc tùy chỉnh riêng Bên cạnh không gian làm việc, Dreamweaver CS4 cung cấp chế độ thu nhỏ cho bảng chương trình Điều cho phép người sử dụng tiết kiệm không gian làm việc hình cách thu nhỏ bảng vào cạnh phải hình mở rộng cần 10 Thiết kế web với Dreamweaver CS4 Live View Live View Thông thường, công cụ soạn thảo web trực quan không hiển thị xác trình duyệt web mà chúng cố gắng mô Việc tương tác sử dụng mã kịch ngày trở nên phổ biến khiến nhu cầu thiết kế trạng thái khác cho trang web (bao gồm menu, bảng thành phần giao diện) ngày trở nên quan trọng Việc hiển thị tĩnh chế độ xem Design Dreamweaver lúc không đáp ứng nhu cầu cao cấp người dùng Chế độ xem Live View (xem chạy thực) Dreamweaver, sử dụng động kết xuất WebKit (là tảng cho trình duyệt web Safari Adobe AIR), cho bạn nhìn xác giao diện trang web gần với việc hiển thị trình duyệt web Ngoài ra, bạn tương tác với trang web cách trực tiếp Dreamweaver, đồng thời xem tất trạng thái khác trang web Tương tác với trang web chế độ Live View Khi chế độ xem Live Code (xem mã nguồn) Live View kích hoạt đồng thời, lập tức, thay đổi trang ảnh hưởng đến đoạn mã đằng sau ngược lại Với chế độ này, bạn xem thử kết thêm vào loại bỏ mã JavaScript hay việc bổ sung nội dung động sử dụng Spry, vv Dreamweaver CS4 hỗ trợ khả xem thử trạng thái trang web cách nhấn vào nút Freeze JavaScript (đóng băng JavaScript) nhấn phím F6 để cố định trang web trạng thái cụ thể (chẳng hạn, giữ nguyên trang web trạng thái menu mở rê chuột lên menu) Bạn chỉnh sửa xem thử thành phần trang web Dreamweaver mà sử dụng tính Preview in Browser (hoặc nhấn phím F12) để chạy thử trình duyệt Bài 1, Làm quen với Dreamweaver CS4 11 Các file liên quan Các file liên quan Các dự án web ngày trở nên phức tạp so với trước trang web tạo nên nhiều thành phần khác Các thành phần Cascading StyleSheets (CSS), file JavaScript hay chí thành phần đính kèm vào mã kịch phía server Dreamweaver CS4 cải thiện tính thiết kế, quản lý site ứng dụng web sử dụng nhiều tài nguyên cách hiệu Thanh Related Files (các file liên quan) nằm cửa sổ tài liệu thẻ (tab) tài liệu Thanh liệt kê file tạo nên trang web hoàn chỉnh Bạn chuyển qua lại file Related Files mà giữ cửa sổ xem thử trang Chế độ xem Design (xem thiết kế) (hoặc Live View) hiển thị file trang bạn chỉnh sửa file liên quan khác mà giữ cửa sổ hiển thị trực quan trang web Thanh Related Files hiển thị file khác tạo nên trang web Code Navigator Công cụ Code Navigator (điều hướng mã nguồn) cải tiến để dễ dàng di chuyển đến tất file liên quan (được liệt kê danh sách định nghĩa CSS) tham gia vào việc tạo style cho đối tượng chọn Từ giờ, bạn không thiết phải mở tất file stylesheet để tìm định nghĩa CSS Trong phiên Dreamweaver CS4 mới, thông tin style đối tượng nằm menu ngữ cảnh Với công cụ Code Navigator, trỏ chuột vào định nghĩa CSS, chương trình hiển thị thuộc tính giá trị tương ứng Khi nhấn chuột vào định nghĩa CSS danh sách đoạn mã nguồn CSS liên quan mở Giống file liên quan khác, bạn sử dụng công cụ Code Navigator để mở file CSS khác tương tác với trang HTML Công cụ Code Navigator cho phép di chuyển đến file liên quan cách dễ dàng 12 Thiết kế web với Dreamweaver CS4 Cải tiến CSS Cải tiến CSS Công cụ Property Inspector (Bộ rà thuộc tính) thiết kế lại nhằm giảm thiểu sai sót xảy thêm đoạn mã HTML CSS vào trang web Ở phiên trước, tùy thuộc vào nút nhấn Property Inspector mà đoạn HTML CSS thêm vào trang web Việc thường tạo danh sách style khó hiểu Style1, Style2 Ở phiên Dreamweaver CS4, hai chức thêm style dạng HTML tạo kiểu CSS tách thành hai phần riêng biệt Property Inspector Property Inspector giúp cho việc chèn đoạn mã HTML CSS trở nên rõ ràng Tập liệu HTML Tính tập liệu HTML (HTML data set) Dreamweaver cho phép chuyển file HTML thành sở liệu nhỏ Ví dụ, với tính tập liệu HTML này, bạn nhập bảng HTML chứa liệu từ trang web sang trang web khác (sử dụng JavaScript Spry) Dữ liệu trình bày theo nhiều cách khác nhau, kiểu “Master/Detail” (Chính/Chi tiết) với danh sách tóm tắt liệu bảng Sau nhấn chuột vào mục danh sách này, nội dung chi tiết bảng Tính tập liệu HTML cho phép nhập vào hiển thị liệu theo nhiều cách khác Bài 1, Làm quen với Dreamweaver CS4 13 Các đối tượng Photoshop thông minh Các đối tượng Photoshop thông minh Trong phiên này, Dreamweaver hỗ trợ tính quan trọng chương trình Creative Suite, đối tượng thông minh - smart object Khả cho phép bạn kéo file PSD vào trang web Dreamweaver, chỉnh sửa hình ảnh cho phù hợp với trang web, chí, thay đổi kích thước hình ảnh Nếu có cập nhật với file PSD ban đầu, mũi tên màu đỏ xuất hình ảnh Dreamweaver thông báo 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) nút Original (gốc) Property Inspector Các đối tượng thông minh giúp việc cải tiến cập nhật hình ảnh Dreamweaver trở nên dễ dàng Các tính bổ sung Dreamweaver CS4 Hỗ trợ xây dựng ứng dụng Adobe AIR Adobe AIR hệ thống đa tảng cho phép nhà lập trình kết hợp công nghệ HTML, AJAX, Adobe Flash Flex để triển khai ứng dụng Rich Internet Applications (RIA) desktop Với việc hỗ trợ đầy đủ Adobe AIR, Dreamweaver cho phép nhà lập trình sử dụng công cụ quen thuộc để phát triển ứng dụng dễ dàng tạo cài đặt giúp ứng dụng chạy nhiều hệ điều hành khác Subversion Dreamweaver cung cấp Subversion - hệ thống quản lý phiên tương tự CVS Visual Sourcesafe (VSS) Subversion thường công ty sử dụng để xây dựng môi trường cộng tác nhóm dự án đòi hỏi ghi lại thay đổi quản lý phiên mã nguồn/sản phẩm dự án Trước đây, Dreamweaver, 14 Thiết kế web với Dreamweaver CS4 Tổng quan tính Dreamweaver CS4 muốn trì phiên website, bạn phải làm cách thủ công chép phiên thư mục khác Với Subversion, tất file lưu lên máy chủ Subversion Các thay đổi theo dõi để khôi phục dự án trạng thái thời điểm khứ Tổng quan tính Dreamweaver CS4 Cuốn sách nhằm mục tiêu giúp người học tìm hiểu sử dụng tính mà Dreamweaver cung cấp Phần sau tổng hợp tính quan trọng ứng dụng Ba chế độ hiển thị khác nhau: Khi soạn thảo trang web, Dreamweaver cung cấp ba chế độ xem: Design (xem thiết kế), Split (xem mã thiết kế) Code (xem mã nguồn) Một chế độ xem dễ sử dụng Dreamweaver Design, cho phép xây dựng trang web cách trực quan quan sát trang web hiển thị thực tế kiến tạo Các nhà thiết kế web lập trình viên có kinh nghiệm 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 hiển thị với màu sắc khác khiến việc đọc mã trở nên dễ dàng Trong trường hợp muốn hiển thị hai chế độ trên, Dreamweaver cung cấp thêm chế độ xem Split Với chế độ này, hình làm việc chia thành hai phần để người dùng quan sát lúc hai chế độ xem Design Code Để chuyển đổi chế độ hiển thị Dreamweaver, bạn cần nhấn chuột vào chế độ cần chuyển công cụ Document (tài liệu) Chế độ xem Split cho phép chỉnh sửa trang web cách trực quan xem phần mã phía sau thay đổi Hỗ trợ sẵn FTP: Dreamweaver hỗ trợ sẵn khả tải lên (upload) tải xuống (download) file từ máy chủ, cách sử dụng giao diện kéo thả bảng Files sử dụng nút Get/Put (Lấy về/Đẩy lên) thời điểm nào, để gửi trang web soạn thảo lên máy chủ, mà không cần phải cài đặt thêm phần mềm bổ sung khác Ngoài ra, Dreamweaver cung cấp chức Check In/Check Out tính đồng hóa để quản lý dễ dàng Bài 1, Làm quen với Dreamweaver CS4 15 Tổng quan tính Dreamweaver CS4 Chèn đối tượng mã vào trang web bảng Insert: Hầu hết đối tượng phổ biến trang web tìm thấy bảng Insert Các đối tượng tổ chức thành nhóm bảng Bạn cần nhấn chuột lần vào biểu tượng tương ứng bảng để thêm đối tượng vào trang web Ngoài ra, Dreamweaver cung cấp bảng bổ sung để điều chỉnh đối tượng mong muốn Các công cụ mặc định bảng Insert công cụ định dạng, xây dựng form bố cục trang web Bạn lựa chọn biểu tượng hay sử dụng xếp vào thẻ Favorites bảng Bảng Insert chia thành nhiều chủ đề tương ứng với 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í bảng công cụ để tiện thao tác trình làm việc Dreamweaver CS4 hỗ trợ việc lưu lại bố cục không gian làm việc riêng theo người dùng khác nhau, tạo không gian làm việc riêng cho 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 biểu tượng từ mục bảng Insert 16 Thiết kế web với Dreamweaver CS4 Định nghĩa thuộc tính trang Trường Background image cho phép bạn đặt hình cho trang Dreamweaver bắt chước kiểu xử lý trình duyệt cách lặp lại hay xếp lát hình để lấp kín cửa sổ Để chọn hình nền, nhấn nút Browse cạnh trường Background image Hộp thoại Select Image Source xuất Di chuyển tới thư mục museum_files dw02lessons chọn background.gif cho trang; sau nhấn OK (Windows) Choose (Mac OS) Giữ nguyên thiết lập Repeat mặc định, tự động xếp lát hình theo chiều ngang chiều dọc để lấp đầy trang Nhấn nút Apply để thấy hình trang Chọn hình cho trang (background.gif) Bạn nhập đường dẫn tới hình vào trường Background image Dreamweaver mặc định đặt văn hình ảnh gần cạnh cạnh trái trang Để tạo thêm không gian cạnh nội dung đó, sử dụng thiết lập Margin hộp thoại Page Properties Nhập giá trị 25 cho trường Left để đặt nội dung cách cạnh trái trang 25 pixel Nhập 25 vào trường Top để đặt nội dung cách cạnh trang 25 pixel Mục Appearance (HTML) hộp thoại Page Properties bao gồm nhiều thiết lập tương tự vừa định nghĩa Tuy nhiên, thiết lập thuộc tính trang mặc định với mã HTML không tự động tạo Cascading StyleSheet, thế, không linh hoạt việc sử dụng CSS Mục Links (CSS) cho phép bạn định nghĩa hình thức liên kết trang Để có thêm thông tin cách tạo liên kết, xem Bài 3, “Chèn văn hình ảnh” 52 Thiết kế web với Dreamweaver CS4 Định nghĩa thuộc tính trang 10 Chọn mục Links bên trái giữ nguyên giá trị mặc định thiết lập Link font Size (giống font chữ trang) Việc đảm bảo rằng, liên kết hiển thị với kiểu chữ kích cỡ giống phần văn lại trang 11 Thiết lập màu cho loại liên kết khác trường sau: Link Color: Nhập 843432 để đặt màu liên kết mặc định áp dụng cho liên kết trang Visited links: Nhập 666666 để đặt màu áp dụng cho liên kết sau người dùng nhấn chọn Rollover links: Nhập CC4300 để đặt màu áp dụng cho liên kết người dùng di chuột qua Active links: Nhập CC6500 để đặt màu áp dụng người dùng nhấn chọn liên kết 12 Vì sử dụng định dạng CSS, bạn định có gạch chân liên kết hay không (và/hoặc nào) Chú ý: Bạn làm việc với định dạng HTML Chọn thiết lập mặc định Always Underline mục Underline Style Chọn màu mặc định cho liên kết, liên kết ghé thăm liên kết bị nhấn Bạn chọn màu liên kết mong muốn từ bảng Swatches Mục Headings (CSS) cho phép bạn định nghĩa font chữ, style, kích cỡ màu sắc đề mục trang Bài 2, Tạo website 53 Định nghĩa thuộc tính trang 13 Giữ nguyên giá trị mặc định cho thiết lập mục Headings Bạn sử dụng CSS để tạo style cho đề mục phần sau sách Định nghĩa hình thức mặc định đề mục trang 14 Chọn mục Title/Encoding bên trái hộp thoại Page Properties để hiển thị thêm thiết lập: • Nhập Museum Home vào trường Title để đặt tiêu đề, tên xuất tiêu đề đa số cửa sổ trình duyệt Đó tiêu đề mặc định sử dụng người dùng bookmark (đánh dấu) trang web • Giữ nguyên giá trị XHTML 1.0 Transitional cho Document Type (DTD) để tài liệu HTML tương thích với XHTML • Chọn Unicode 4.0 (UTF-8) từ mục Encoding để rõ kiểu mã hóa ký tự sử dụng trang web • Hãy chắn mục Unicode Normalization Form có giá trị None mục Include Unicode Signature (BOM) không chọn Cả hai thiết lập không cần thiết cho học Mục Title/Encoding cho phép bạn đặt tiêu đề trang và/hoặc định kiểu mã hóa sử dụng 54 Thiết kế web với Dreamweaver CS4 Định nghĩa thuộc tính trang Nút Reload thay đổi trang thành kiểu mã hóa bạn chọn Tuy nhiên, không cần thiết phải nhấn nút 15 Chọn mục Tracing Image (ảnh thiết kế mẫu) bên trái hộp thoại Page Properties Ảnh thiết kế mẫu ảnh có định dạng JPEG, GIF PNG, tạo từ ứng dụng đồ họa độc lập, ví dụ Adobe Photoshop Fireworks Nó đặt trang để làm dẫn cho việc tạo lại thiết kế mong muốn ảnh 16 Nhấn nút Browse bên cạnh trường Tracing image Bạn trực tiếp nhập đường dẫn tới ảnh vào trường 17 Ở hộp thoại Select Image Source (chọn nguồn ảnh), di chuyển tới thư mục dw02lessons Trong thư mục museum_files, chọn file có tên tracing.gif, sau nhấn OK (Windows) Choose (Mac OS) 18 Đặt độ suốt Tracing image 50% cách kéo trượt Transparency sang trái Đặt ảnh thiết kế mẫu trang 19 Nhấn Apply để thấy kết 20 Khi kích hoạt, ảnh thiết kế mẫu thay tất hình và/hoặc màu mà người dùng chọn cửa sổ tài liệu Các ảnh thiết kế mẫu không xuất bạn hiển thị trang trình duyệt (chỉ xuất thiết kế) Bôi đen đường dẫn trường Tracing image nhấn phím Delete 21 Nhấn nút Apply để loại bỏ ảnh thiết kế mẫu hiển thị lại hình trang 22 Nhấn OK để đóng hộp thoại Page Properties 23 Chọn File > Save Sau hoàn tất việc thiết lập thuộc tính trang, bạn xem thử trang web ba chế độ hiển thị khác Dreamweaver Bài 2, Tạo website 55 Các chế độ hiển thị Các chế độ hiển thị Trong học sách này, bạn thực phần lớn công việc chế độ xem Design để tận dụng bố cục trực quan Dreamweaver Tuy nhiên, bạn dễ dàng truy cập mã HTML viết làm việc chế độ xem Design Bạn chuyển chế độ hiển thị công cụ Document Thanh công cụ Document Ở công cụ Document, nhấn nút Design ( ) chưa chọn sẵn Design phần trình bày trực quan, tương tự với người dùng thấy trình duyệt, cho phép sửa nội dung trang web cách trực tiếp Với chế độ xem Design, bạn thấy trang web giống người dùng thấy 56 Thiết kế web với Dreamweaver CS4 Các chế độ hiển thị 2 Nhấn nút Code ( ) để chuyển sang chế độ xem Code Lúc này, trang hiển thị môi trường viết mã, cho phép soạn thảo biên tập HTML loại mã khác, bao gồm JavaScript, PHP ColdFusion Chế độ xem Code thể mã HTML sinh để hiển thị trang web Bài 2, Tạo website 57 Xem bảng Files Nhấn nút Split ( ) để chia cửa sổ tài liệu thành hai phần Code Design Chế độ hiển thị công cụ học tập tốt, hiển thị bôi đen mã HTML sinh bạn thay đổi trực quan chế độ xem Design ngược lại Sử dụng chế độ xem Split để hiển thị trang hai chế độ lúc Hãy chuyển chế độ xem Design để tiếp tục học Xem bảng Files Một lợi làm việc với file cục lưu tập trung thư mục đĩa cứng bạn dễ dàng quản lý chúng Dreamweaver cung cấp bảng Files cho phép bạn quản lý file cách cục bộ, gửi nhận chúng với server từ xa Bảng Files trì cấu trúc song song site cục xa, chép xóa file cần thiết để đảm bảo tính đồng hai phía Không gian làm việc mặc định Dreamweaver hiển thị bảng Files nhóm bảng nằm bên phải cửa sổ tài liệu 58 Thiết kế web với Dreamweaver CS4 Xem bảng Files Khi bạn chọn sử dụng thư mục museum_site làm thư mục gốc cục phần trước học, Dreamweaver tạo kết nối tới file cục qua bảng Files Bạn thấy toàn nội dung thư mục bảng Files Nếu không, chọn Window > Workspace Layout > Designer để thiết lập lại không gian làm việc trạng thái mặc định Bạn có quyền truy cập tới toàn nội dung thư mục gốc cục bảng Files Hiển thị file cục Ta hiển thị file thư mục cục bảng Files, chúng có liên quan tới site Dreamweaver hay không Nhấn vào menu xổ xuống phía bên trái bảng Files, chọn Desktop (Windows) thư mục Computer > Desktop (Mac OS) để hiển thị nội dung thư mục Desktop Chọn Local Disk (C:) (Windows) Macintosh HD (Mac OS) từ menu để truy cập nội dung đĩa cứng Chọn CD Drive (D:) (Windows) từ menu để hiển thị nội dung đĩa CD ổ Trên máy Mac, biểu tượng tên CD xuất menu Chọn museum_site để hiển thị lại thư mục gốc cục Bài 2, Tạo website 59 Xem bảng Files Chọn chỉnh sửa file Bạn chọn, mở kéo thả trang HTML, hình ảnh, văn file khác liệt kê bảng Files vào cửa sổ tài liệu Nếu chưa mở sẵn, nhấn đúp chuột vào file index.html bảng Files Trang mở để soạn thảo Nhấn chuột kéo file hình ảnh space.jpg từ bảng Files vào cửa sổ tài liệu index html (Nhấn OK để đóng cửa sổ Image Tag Accessibility Attributes xuất hiện) Hình ảnh thêm vào trang mở Nếu cài đặt Fireworks máy tính, bạn nhấn đúp vào file hình ảnh space.jpg để mở Fireworks, nhằm chỉnh sửa tối ưu hóa Nhấn đúp chuột vào file exhibit_3.txt bảng Files để mở trực tiếp Dreamweaver Chọn Edit > Select All để chọn tất văn file Chọn Edit > Copy để chép văn vào clipboard Chọn thẻ index.html cửa sổ tài liệu để trở lại trang index Nhấn chuột vào bên phải ảnh để đặt trỏ chèn Chọn Edit > Paste Văn dán vào trang mở, bên hình ảnh Dán đoạn văn vào trang 60 Thiết kế web với Dreamweaver CS4 Xem bảng Files Các tùy chọn bảng Files Bảng Files đồng thời cung cấp thêm tính điều khiển để hiển thị truyền file Nhiều tính số đặt công cụ phía bảng Thanh công cụ bảng Files Nhấn nút Connect to remote host ( ) để kết nối tới site xa lúc Nếu chưa định server đích (server lưu website Internet), hộp thoại Site Definition xuất yêu cầu bạn làm việc Đóng cửa sổ để tiếp tục Sử dụng nút Connect to remote host công cụ bảng Files cách khác để mở hộp thoại Site Definition Nhấn nút Refresh ( ) để làm kết nối Dreamweaver tới thư mục gốc cục tất thư mục xa Bạn nên sử dụng nút định kỳ để chắn Dreamweaver nhận file thêm vào Nhấn nút Get File(s) ( ) để chép file chọn từ server xa thư mục gốc cục Vì ta chưa định nghĩa server xa, Dreamweaver yêu cầu bạn làm việc Nhấn No để tiếp tục Nhấn No để tạm thời bỏ qua việc định nghĩa server xa Bài 2, Tạo website 61 Xem bảng Files Nhấn nút Put Files ( ) để chép file chọn từ thư mục gốc cục tới server xa Vì ta chưa định nghĩa server xa, Dreamweaver yêu cầu bạn làm việc Nhấn No để tiếp tục Nhấn nút Check Out File ( ) để gửi file từ server xa thư mục gốc cục đánh dấu check out file server Tùy chọn có hiệu lực người dùng kích hoạt tùy chọn Check In Check Out hộp thoại Site Definition Nhấn nút Check In ( ) để gửi file thư mục gốc cục tới server xa để người khác chỉnh sửa Tùy chọn có hiệu lực bạn kích hoạt tùy chọn Check In Check Out hộp thoại Site Definition Tùy chọn phải chọn để gửi nhận file server Chú ý, nút Synchronize ( ) cho phép đồng hóa file site cục xa Tính có hiệu lực bạn định nghĩa có kết nối mạng tới server xa 62 Thiết kế web với Dreamweaver CS4 Xem bảng Files Thay đổi chế độ hiển thị bảng Files Khi làm việc với site Dreamweaver, bạn cấu hình lại bảng Files cách thay đổi nội dung xuất (ví dụ như, site cục xa), mở rộng hay thu hẹp bảng Các chế độ hiển thị site Bạn sử dụng mục Site View để thay đổi nội dung hiển thị bảng Files bị thu nhỏ Bảng Files trạng thái thu nhỏ Chọn Local View để hiển thị nội dung thư mục gốc cục Chọn Remote View để hiển thị nội dung thư mục server xa Chọn Testing Server để hiển thị nội dung server cục dùng để chạy thử trang trước tải lên Chọn Repository View để hiển thị nội dung kho SVN quản lý file trực tiếp qua Subversion Mở rộng thu nhỏ Bảng Files thu nhỏ cố định nhóm bảng theo mặc định Bạn mở rộng bảng Files để thấy rõ site cục xa Khi bảng Files mở rộng, nội dung thư mục gốc cục thể bên, nội dung server xa thử nghiệm nằm bên lại Bài 2, Tạo website 63 Xem bảng Files Nhấn nút Expand to show local and remote sites ( ) để mở rộng cấu hình lại bảng Files bị thu nhỏ Bảng Files trạng thái mở rộng Nếu mở rộng bảng Files cố định (chỉ Windows), bạn làm việc cửa sổ tài liệu bảng Files tràn toàn không gian Thu nhỏ bảng Files để khôi phục lại khả truy cập vào cửa sổ tài liệu Thanh công cụ phần bảng Files mở rộng bắt chước toolbar bảng thu nhỏ Các nút hiển thị công cụ cho phép ta chuyển chế độ hiển thị bên trái bảng Theo mặc định, nhấn nút Site Files ( ), danh sách nội dung site xa hiển thị bên trái bảng Nhấn nút Testing Server ( ) để chuyển chế độ sang chế độ hiển thị danh sách file server thử nghiệm bạn định nghĩa Chọn nút Repository Files ( ) để hiển thị nội dung kho SVN có sẵn quản lý file trực tiếp qua Subversion Tất nút khác công cụ đại diện cho tùy chọn điều khiển tương tự xuất bảng Files thu nhỏ Khi bảng Files mở rộng, nhấn nút Collapse ( ) để thu gọn bảng trạng thái mặc định Chọn File > Close Bạn hoàn thành học Như vậy, bạn nắm bước việc tạo website, thiết lập thuộc tính trang web quản lý file Bạn sử dụng kỹ Bài 3, “Chèn văn hình ảnh” 64 Thiết kế web với Dreamweaver CS4 Tự học Tự học Hãy sử dụng kiến thức học kỹ thuật tạo website Dreamweaver, thử thực vài nhiệm vụ sau để tích lũy kinh nghiệm: Chọn Site > New Site để mở hộp thoại Site Definition dùng để tạo site cục có tên Practice_Site Chọn thẻ Advanced dùng thiết lập Local Info để định nghĩa thư mục practice_files, đặt thư mục dw02lessons desktop làm thư mục gốc cục (Bài tập không yêu cầu truy cập server xa/thử nghiệm) Sau đó, tìm hiểu mục khác thẻ Advanced, ý cách sử dụng chúng để thay đổi định nghĩa website theo cách khác Dùng lệnh File > New để tạo trang mới, trắng lưu vào Practice_Site Sau đó, chọn Modify > Page Properties để truy cập hộp thoại Page Properties thử nghiệm với tùy chọn nền, liên kết, đặt lề tiêu đề Cuối cùng, chuyển sang chế độ xem Code Design cửa sổ tài liệu để hiển thị mã nguồn sinh Thu nhỏ, cố định bảng Files refresh (nạp lại) nội dung Chuyển chế độ xem Design kéo thả ảnh tubes.jpg từ bảng Files để thêm vào trang Sau đó, nhấn đúp chuột lên file văn sticky.txt để mở Dreamweaver Sao chép dán văn từ file vào cửa sổ tài liệu, bên cạnh hình ảnh Lưu trang web thành trang chủ website đóng cửa sổ tài liệu Ôn tập Câu hỏi Nên tránh sử dụng ký tự đặt tên website, sao? Thư mục gốc cục cần thiết việc tạo website nào? Vì nên tiến hành kiểm tra liên kết có phân biệt chữ hoa, chữ thường tạo website? Điều xảy người dùng chọn màu hình cho trang web? Bạn hiển thị, chọn, mở chép file thư mục gốc cục server xa và/hoặc server thử nghiệm đâu? Bài 2, Tạo website 65 Ôn tập Đáp án Tránh sử dụng dấu cách (thay vào đó, sử dụng dấu gạch dưới), dấu chấm, dấu xổ, hay ký tự đặc biệt khác tên website, làm khiến server dẫn sai file Việc lưu tài nguyên website thư mục gốc đĩa cứng quan trọng Nhờ vậy, liên kết thiết lập website bạn làm việc website tải lên server Đó tất thành phần website phải nằm vị trí tương đối web server giống đĩa cứng để liên kết làm việc bình thường Bạn nên sử dụng tính kiểm tra liên kết có phân biệt chữ hoa, chữ thường để đảm bảo liên kết làm việc server Unix, nơi liên kết có phân biệt chữ hoa, chữ thường Điều không quan trọng bạn sử dụng server Windows Mac, tuân thủ quy ước đặt tên liên kết chặt chẽ hệ thống Unix việc tốt, phòng trường hợp bạn muốn hay phải chuyển website sang server khác Nếu bạn chọn hình màu cho trang, màu xuất ảnh tải xuống, sau ảnh che lấp màu Nếu có vùng suốt hình nền, màu hiển thị xuyên qua Dreamweaver cung cấp bảng Files không giúp bạn quản lý file cục bộ, mà cho phép gửi nhận chúng với server xa Bạn hiển thị, chọn, mở chép file thư mục gốc cục server xa và/hoặc server thử nghiệm bảng 66 Thiết kế web với Dreamweaver CS4