Tùy chọn đồ họa

Danh sách thư mục và danh sách tệp thả xuống sẽ cho phép chúng tôi chọn thư mục và tệp mong muốn.
Trong trường đầu vào Tên tập tin Tên của tệp đã chọn sẽ xuất hiện (hoặc chúng ta có thể tự nhập vào đó). Một danh sách thả xuống Loại tệp sẽ cho phép chúng tôi chọn loại tệp chúng tôi cần tìm. Tất cả điều này đều quen thuộc với chúng ta từ hộp thoại mở và lưu tệp tiêu chuẩn của Windows. Sự khác biệt duy nhất là có một bảng xem trước ở bên phải. Và nếu chúng ta muốn bỏ nó đi thì hãy tắt hộp kiểm Xem trước hình ảnh. Như vậy chúng ta đã chọn được file . Tất cả những gì còn lại là nhấp vào OK. Nhưng Dreamweaver sẽ hỏi chúng tôi thêm một số thông tin bằng cách hiển thị “ Thuộc tính khả năng truy cập thẻ hình ảnh(Thuộc tính khả năng truy cập thẻ hình ảnh)” .

Danh sách kết hợp “ Văn bản thay thế(Văn bản thay thế)” của cửa sổ này được sử dụng để đặt cái gọi là văn bản thay thế.Điều này được phát minh cho người dùng các kênh liên lạc chậm. Sau khi trình duyệt Web tải tệp HTML chứa trang Web, nó sẽ hiển thị một khung trống có kích thước phù hợp thay vì hình ảnh được đặt trên đó. Khi người dùng đặt con trỏ chuột lên một khung ảnh trống, trình duyệt Web sẽ hiển thị một chú giải công cụ nhỏ chứa cùng văn bản thay thế này. Vì vậy, nên luôn sử dụng tùy chọn này.

Thực ra trong danh sách Văn bản thay thếđược giới thiệu văn bản thay thế ngắn. Giới hạn của nó không quá 50 ký tự. Nếu cần hiển thị văn bản thay thế chi tiết hơn, chúng ta có thể lưu nó vào một tệp riêng trên trang Web, sau đó nhập địa chỉ Internet của nó vào trường nhập Mô tả dài. Bạn cũng có thể nhấp vào nút thư mục nằm ở bên phải trường này và chọn tệp mong muốn trong hộp thoại Chọn tập tin. Khi bạn nhập xong dữ liệu, hãy nhấp vào OK. Dreamweaver đặt đồ họa ở vị trí hiện tại của con trỏ văn bản.

Tùy chọn đồ họa

Bây giờ hãy lưu trang kết quả, chọn hình ảnh nếu nó không được chọn và xem trình chỉnh sửa thuộc tính. Những gì chúng ta sẽ thấy ở đó Trường đầu vào W Và N cho phép chúng tôi đặt kích thước của hình ảnh bằng cách nhập thủ công chiều rộng và chiều cao tương ứng. Điều này có thể hữu ích nếu hình ảnh được đánh dấu là một phần của thiết kế trang web; trong các trường hợp khác, sẽ thuận tiện hơn khi đặt kích thước hình ảnh bằng cách kéo các điểm đánh dấu thay đổi kích thước bằng chuột.

Trên thực tế, khi Dreamweaver đặt một đồ họa lên một trang Web, nó sẽ tự động đặt chiều rộng và chiều cao ban đầu của nó vào các trường nhập này. Như chúng ta đã biết, trình duyệt Web ngay sau khi tải trang
hiển thị hình ảnh chưa được tải dưới dạng khung trống. Nếu kích thước hình ảnh đã được đặt rõ ràng, chúng sẽ được áp dụng ngay cho các khung và thiết kế trang sẽ không bị gián đoạn. Nếu không, trình duyệt Web sẽ hiển thị các khung có kích thước mặc định nhất định và khi hình ảnh được tải sau đó, kích thước của chúng sẽ thay đổi, khiến chính trang đó phải được vẽ lại. Và điều này rất khó chịu.

Trường đầu vào Không gian V Và Không gian Nđặt tương ứng khoảng cách theo chiều dọc và chiều ngang từ mép của hình ảnh đến văn bản chạy xung quanh nó. Theo mặc định, cả hai đều bằng không.

Trường nhập Src chỉ định địa chỉ Internet của tệp nơi lưu trữ hình ảnh đồ họa. Bên phải của nó là hai nút. Bằng cách nhấp vào bên phải (có hình ảnh thư mục), chúng ta sẽ mở hộp thoại Chọn nguồn hình ảnh.

Chúng ta cũng có thể đổi tên file ảnh bằng cách nhấn chuột phải vào ảnh rồi chọn Tệp nguồn trong menu ngữ cảnh hoặc đơn giản bằng cách nhấp đúp vào hình ảnh. Sau đó trên màn hình sẽ xuất hiện hộp thoại Chọn Nguồn hình ảnh.

Trường nhập Src thấp tương tự như trường Src, ngoại trừ việc nó chỉ định tên của tệp nơi cái gọi là hình ảnh "bản nháp". Theo quy luật, hình ảnh "nháp" có kích thước nhỏ hơn do chất lượng thấp hơn và một lần nữa được phát minh ra dành cho chủ sở hữu các kênh liên lạc tốc độ thấp. Trình duyệt Web sẽ tải xuống "bản nháp" trước vì nó có kích thước nhỏ hơn nhiều và hiển thị nó trên trang. Và chỉ sau đó, trong khi người dùng đang xem trang hoàn chỉnh, hình ảnh chính mới được tải dần dần và thay thế "bản nháp".

Bạn chỉ nên tạo "bản nháp" khi ảnh gốc quá lớn để tải nhanh. Đặc biệt, điều này sẽ phù hợp nếu chúng ta định làm một trang web có đồ họa nghệ thuật.

Trường nhập Ranh giới cho phép bạn đặt độ dày của đường viền hiển thị xung quanh hình ảnh, tính bằng pixel. Theo mặc định, nó bằng 0, tức là không có khung.

Danh sách kết hợp thay thế chỉ định văn bản thay thế ngắn đã quen thuộc với chúng tôi.

Bây giờ chúng ta hãy nhìn vào danh sách thả xuống Căn chỉnh. Nó cho phép chúng ta chỉ định căn chỉnh của hình ảnh, về cơ bản là vị trí tương đối của nó và văn bản chứa trong đó.
Danh sách Căn chỉnh chứa các mục sau:

• Mặc định- vị trí mặc định, thường giống với mục Đường cơ sở;
• Đường cơ sở- phần dưới của hình ảnh khớp văn bản cơ sở(một dòng tưởng tượng chứa một dòng văn bản) dòng chứa nó;
• Thần sấm- phần trên cùng của hình ảnh trùng với phần trên cùng của văn bản trong dòng chứa nó;
• Ở giữa- phần giữa của hình ảnh trùng với đường cơ sở của văn bản;
• Đáy- phần dưới cùng của hình ảnh khớp với phần dưới cùng của văn bản (thường không giống với Đường cơ sở);
• văn bản hàng đầu- phần trên cùng của hình ảnh khớp với phần trên cùng của ký tự văn bản cao nhất (thường không giống với Thần sấm);
• Giữa tuyệt đối- phần giữa của hình ảnh trùng khớp chính xác với dòng giữa của văn bản(đường thẳng đi qua tâm);
• Đáy tuyệt đối- phần dưới của hình ảnh trùng với phần dưới của ký tự văn bản thấp nhất;
• Bên trái- hình ảnh được “ép” vào cạnh trái của trang và văn bản “chảy xung quanh” nó ở bên phải;
• Phải- hình ảnh được “ép” vào cạnh phải của trang và văn bản “chảy” xung quanh nó sang bên trái.

Trong hai trường hợp cuối cùng, hình ảnh trở thành nổi. trình duyệt web sang trái hoặc phải và văn bản được chèn vào sẽ bao quanh nó. Và tại thời điểm hình ảnh nổi được chèn vào, Dreamweaver hiển thị một giao diện đặc biệt điểm đánh dấu hình ảnh nổi. Điểm đánh dấu này chỉ được hiển thị để thuận tiện cho người thiết kế Web và chỉ trong Dreamweaver; Trình duyệt web hoàn toàn không hiển thị nó.

Vì vậy, chúng tôi đã tìm ra trình soạn thảo thuộc tính. Bây giờ hãy thiết lập các thuộc tính cho hình ảnh của chúng ta. Khoảng cách từ văn bản sẽ là 5 pixel theo chiều ngang và chiều dọc, căn chỉnh sẽ để lại, văn bản “thay thế” sẽ là “chú thích bật lên”. Và lưu trang.

Để trả về kích thước ban đầu của hình ảnh, chúng ta có thể sử dụng nút hủy) nằm giữa trường nhập W và H của trình chỉnh sửa thuộc tính và ở bên phải của chúng, cũng như mục menu ngữ cảnh Đặt lại kích thước.Điều này rất hữu ích nếu chúng ta đã bóp méo chúng một cách nghiêm trọng và muốn bắt đầu lại.

Hình ảnh đặc biệt

HTML và Dreamweaver cho phép bạn tạo không chỉ những hình ảnh thông thường mà còn cả những hình ảnh có thuộc tính đặc biệt. Cái này hình ảnh siêu liên kết, hình ảnh hoạt động Và bản đồ hình ảnh. Chúng thường được sử dụng trên các trang Web, vì vậy chúng ta sẽ cần xem xét chúng.

Bất kỳ hình ảnh nào cũng có thể được sử dụng làm siêu liên kết; để thực hiện việc này, chỉ cần nhập địa chỉ Internet vào trường " liên kết"tấm" Của cải".
Hơn nữa, bạn có thể cung cấp liên kết đến địa chỉ email hoặc tới một trang web khác. Trong trường hợp thứ hai, bạn sẽ có quyền truy cập vào danh sách " Mục tiêu"

Hình ảnh có thể được kích hoạt bằng cách di con trỏ chuột lên trên nó - Chuyển khoản. Để làm điều này, bạn sẽ cần phải tích trữ hai hình ảnh sẽ thay thế nhau và trên " Chung" nhấn nút thích hợp.
Trong cửa sổ mở ra, bạn sẽ cần điền vào các trường bắt buộc

Trong lĩnh vực Tên Hình ảnh- cho biết tên ban đầu của hình ảnh đang hoạt động và tên chỉ có thể chứa các chữ cái Latinh (mọi hình ảnh đang hoạt động phải bắt đầu bằng một chữ cái) và số (chắc chắn là tiếng Ả Rập!-:)
Trong lĩnh vực Ảnh gốc- nhập đường dẫn đến hình ảnh chính, hình ảnh sẽ được tải đầu tiên trên trang.

Trong lĩnh vực Hình ảnh cuộn qua- nhập đường dẫn đến "hình ảnh - hiệu ứng", - hình ảnh này sẽ chỉ xuất hiện khi bạn di chuột qua hình ảnh đang hoạt động của mình.
Kiểm tra hộp Tải trước Rollover- trong trường hợp này, cả hai hình ảnh sẽ được trình duyệt tải cùng một lúc và hiệu ứng sẽ bắt đầu ngay lập tức khi di chuột. Ngược lại (nếu hộp kiểm bị tắt), khi bạn di chuột qua hình ảnh đó, trình duyệt sẽ bắt đầu tải hình ảnh thứ hai... và sẽ dẫn đến một số loại hiệu ứng chậm.
Trong lĩnh vực văn bản thay thế- nhập nhận xét văn bản sẽ bật lên khi bạn di chuột qua hình ảnh.
Vâng, trong trường Go To URL - địa chỉ Internet.

Bản đồ hình ảnh

Bản đồ là một hình ảnh rắn có đánh dấu “các khu vực nóng” và mỗi khu vực như vậy là một siêu liên kết và có địa chỉ Internet riêng.

Để bắt đầu, hãy đặt bản vẽ lên trang, chọn nó bằng cách nhấp chuột trái vào nó và vào tab " Của cải"Sử dụng các hình dạng màu ngọc lam (ở góc dưới bên trái có một nhóm thành phần Bản đồ), chọn một trong các phương pháp chọn “vùng nóng”. Vì trong ví dụ này, tôi muốn đặt biểu tượng màu xanh lam làm “vùng nóng”, gần nhất Điều này là một hình chữ nhật Nhưng bạn có thể chọn cả hình tròn và hình dạng không đều. Nhấp vào hình tứ giác và chọn vùng quan tâm.

Hình dạng bạn chọn sẽ trông như thế này:

Tất cả những gì bạn phải làm là nhập địa chỉ Internet vào “trường” liên kết” (các liên kết có thể đến các trang khác trên trang web của bạn hoặc đến các trang web khác hoặc đến địa chỉ bưu điện), chọn một trong các mục trong trường Mục tiêu và nhập văn bản thay thế vào trường Alt.

Sau khi chọn, bạn có thể di chuyển vùng đã chọn bằng cách nhấp vào nút mũi tên ở góc dưới bên trái.
Và để chọn các hình có hình dạng không đều, chỉ cần nhấp chuột trái dọc theo chu vi của khu vực cần chọn. Cuối cùng, đặt tên gốc cho bản đồ của bạn trong trường nhập Bản đồ và thế là xong.

Những cái bàn

Để tạo bảng mới, hãy chuyển đến tab " chung"tấm" Chèn" và nhấn nút.

Trong hộp thoại xuất hiện, hãy điền vào các trường bắt buộc.
Hàng- số hàng trong bảng
Cột- số cột trong bảng
Chiều rộng của cái bàn- chiều rộng của bảng và trong menu thả xuống, bạn cần chỉ định đơn vị đo - tỷ lệ phần trăm hoặc pixel.
Độ dày viền- độ dày của khung bảng tính bằng pixel và nếu bạn đặt giá trị thành 0, bản thân bảng sẽ không hiển thị trên trang.
Đệm di động- khoảng cách thụt lề bên trong các ô của bảng
Khoảng cách ô- khoảng cách giữa các viền ô của bảng
Bộ công tắc tiêu đề(Tiêu đề) sẽ cho phép chúng ta tạo "tiêu đề" và đánh dấu cột đầu tiên của bảng. Bộ này bao gồm các công tắc sau: Không (không có tiêu đề hoặc cột đầu tiên được chọn), Bên trái (cột đầu tiên được chọn), Trên cùng (tiêu đề) và Cả hai (cả tiêu đề và cột đầu tiên được chọn).
Các ô tạo nên tiêu đề và cột được đánh dấu sẽ được tạo kiểu làm ô tiêu đề và văn bản chúng ta nhập vào chúng sẽ tự động được căn giữa và in đậm.
Trong trường đầu vào Đầu đề(Tiêu đề) Nhập tên bảng. Tên này sẽ nằm phía trên bảng đã tạo.
Danh sách thả xuống Căn chỉnh chú thích(Căn chỉnh) sẽ cho phép chúng tôi đặt vị trí và căn chỉnh của tiêu đề (tất nhiên nếu chúng tôi đã nhập một tiêu đề). Các mục sau đây có sẵn ở đây:
mặc định (theo mặc định) - việc căn chỉnh được thực hiện bởi chính trình duyệt Web, thông thường trong trường hợp này tiêu đề nằm phía trên bảng và căn chỉnh ở giữa;
top - tiêu đề nằm phía trên bảng và căn chỉnh ở giữa;
dưới cùng - tiêu đề nằm bên dưới bảng và được căn giữa;
left - tiêu đề nằm phía trên bảng và căn chỉnh sang trái;
right - tiêu đề nằm phía trên bảng và được căn chỉnh về bên phải.

Trong khu vực chỉnh sửa Bản tóm tắt(Tổng cộng) ghi chú bảng được nhập. Ghi chú này không được hiển thị trên màn hình bởi các trình duyệt Web nhưng có thể được sử dụng cho một số mục đích khác (ví dụ: nó có thể được xử lý bởi các chương trình đọc văn bản trên màn hình). Không cần thiết phải thiết lập nó.

Khi bảng được tạo, bạn có thể thay đổi kích thước của bảng bằng cách kéo các đường viền bằng chuột. Di con trỏ lên một trong ba ô vuông trong phần đánh dấu bảng.
Bây giờ hãy đặt con trỏ văn bản vào bất kỳ ô nào của bảng và nhập một số văn bản. Hãy lặp lại tương tự với các ô còn lại của bảng.
Một ô trong bảng phải có ít nhất một số nội dung, nếu không trình duyệt Web có thể hiển thị không chính xác. Nếu ô vẫn cần trống, hãy chèn một khoảng trắng không ngắt vào ô đó (mã HTML của nó là -), giống như chính Dreamweaver đã làm trong những trường hợp như vậy.
Để xác định các thuộc tính của bảng - Chọn nó bằng cách nhấp chuột trái vào đường viền của bảng. Sau đó, trên tab "Thuộc tính".

Bạn có thể thay đổi các thuộc tính của bảng và tùy chỉnh hình thức của nó.
Cánh đồng Mã bảng- chỉ định tên bảng (thuộc tính là tùy chọn)
Lĩnh vực Hàng Và Cols- số hàng và số cột trong bảng.
Lĩnh vực V. Và H- chiều rộng và chiều cao của bảng tính bằng pixel hoặc phần trăm.
Cánh đồng Căn chỉnh- căn chỉnh bảng trái, giữa hoặc phải
Cánh đồng di động- khoảng cách bên trong ô (giữa nội dung và viền ô)
Cánh đồng không gian di động- khoảng cách giữa các ô của bảng
Cánh đồng Táo bạo hơn- chiều rộng đường viền bảng
Màu BG- màu nền bảng
Màu Brdr- màu đường viền cho toàn bộ bảng.
Hình ảnh Bg- cài đặt hình nền cho bảng.

Ngoài ra còn có sáu nút bổ sung ở đó.

• Cái nút Thông thoángCộtChiều rộng- xóa giá trị chiều rộng cột
• Cái nút Thông thoángHàng ngangĐộ cao- giá trị chiều cao dòng rõ ràng
• nút Chuyển thànhChiều rộngĐẾNĐiểm ảnh Và Chuyển thànhChiều rộngĐẾNPhần trăm- chuyển đổi chiều rộng ô thành pixel và chuyển đổi chiều rộng ô thành tỷ lệ phần trăm
• nút Chuyển thànhĐộ caoĐẾNĐiểm ảnh Và Chuyển thànhĐộ caoĐẾNPhần trăm- chuyển đổi chiều cao ô thành pixel và chuyển đổi chiều cao ô thành phần trăm

Ngoài việc thiết lập các thuộc tính của bảng, còn có việc thiết lập các thuộc tính của một ô hoặc một nhóm ô. Để đặt thuộc tính của một ô, hãy nhấp chuột trái vào ô đó. Nếu bạn muốn đặt thuộc tính cho một nhóm ô, thì sau khi nhấp vào trường của ô đầu tiên mà không nhả nút chuột trái, hãy chọn các ô cần thiết (bạn có thể chọn ít nhất toàn bộ bảng theo cách này). Khi được chọn, đường viền của tất cả các ô được thêm sẽ được sơn bằng màu khác.
Sau khi chọn xong các ô, bạn lại chú ý đến “panel” Của cải"

Horz- căn chỉnh theo chiều ngang của nội dung ô (trái, giữa hoặc phải)
Vert- căn chỉnh theo chiều dọc của nội dung ô (trên, giữa, dưới hoặc đường cơ sở)
Trong các lĩnh vực W Và H- chỉ định chiều rộng và chiều cao của các ô đã chọn; nếu bạn cần chỉ định các giá trị dưới dạng phần trăm, hãy thêm ký hiệu % sau giá trị số.
Bg Và Brdr- thiết lập nền của ô và thiết lập màu của viền ô. Và bằng cách sử dụng Bg lề trên, bạn có thể đặt hình nền cho các ô.
Hộp kiểm KHÔNGBọc- cấm ngắt dòng
Hộp kiểm tiêu đề- để định dạng các ô đã chọn làm tiêu đề bảng.
Bây giờ hãy nhấp chuột trái vào bất kỳ ô nào và nhấn nút.
Sử dụng hộp thoại này, bạn có thể chia ô đã chọn thành nhiều phần. Công tắc Hàng Và Cột- chia thành hàng và cột tương ứng. Number of... - ô đã chọn sẽ được chia thành bao nhiêu hàng hoặc cột.

Bây giờ chọn hai ô và nhấp vào nút.
Hai ô bạn chọn đã hợp nhất thành một và bạn có thể chia lại ô mới hợp nhất này hoặc ngược lại, kết hợp nó với các ô khác giống như ô tiêu chuẩn.
Bạn có thể nhanh chóng áp dụng định dạng cho bất kỳ bảng nào. Để thực hiện việc này, hãy chọn bảng và trong menu “ Lệnh” chọn mục “ Định dạngBàn(Bảng định dạng)".
Và trong hộp thoại mở ra, bạn có thể tùy chỉnh thiết kế bảng của mình

Sau khi chọn một trong các mẫu cài sẵn, bạn có thể thay đổi tất cả các thuộc tính của nó theo sở thích của mình.
Bạn có thể cắt, dán hoặc sao chép các ô của bảng.
Để cắt một ô (hoặc một số ô), bạn cần chọn ô đó và đưa ra lệnh Chỉnh sửa - Cắt. Ô (hoặc một số) sẽ bị xóa khỏi bảng.
Để sao chép một ô (hoặc một số ô), bạn cần chọn ô đó và đưa ra lệnh Chỉnh sửa - Sao chép. Ô (hoặc một số) sẽ được sao chép.
Để dán các ô đã sao chép hoặc cắt, hãy sử dụng lệnh Chỉnh sửa – Dán.
Trước khi tiếp tục, hãy thử tạo các bảng đơn giản.

Thiết kế bàn

Giả sử chúng ta đang tạo một cửa hàng trực tuyến. Chúng ta cần đưa tên, mô tả, giá cả và hình ảnh của sản phẩm lên trang. Với bảng, điều đó dễ dàng hơn bao giờ hết.

Với sự trợ giúp của một bảng được định dạng đặc biệt, chúng ta có thể đặt một số đoạn văn bản và hình ảnh đồ họa theo cách chúng ta cần. Và nếu chúng ta không thích điều gì đó, chúng ta có thể thay đổi bảng này một chút và nhận được một kết quả hoàn toàn khác.

Các nhà thiết kế web đã thành thạo các bảng từ lâu. Và cũng như cách đây rất lâu, một ý tưởng đơn giản, giống như mọi thứ khéo léo, đã lơ lửng trong không trung. Điều gì sẽ xảy ra nếu bạn đặt TẤT CẢ văn bản của một trang Web vào một bảng lớn, có định dạng phức tạp, “kéo dài” nó ra toàn bộ cửa sổ trình duyệt Web? Rốt cuộc, chúng ta sẽ có được những khả năng thực tế không giới hạn, gần giống như những khả năng của các máy in đồng nghiệp của chúng ta. Chúng tôi sẽ có thể tạo ghi chú, chú thích cuối trang, thanh bên và nhiều “luồng” văn bản sẽ bắt đầu và dừng ở nơi chúng tôi cần.

Bây giờ chúng ta đã tiến gần đến thiết kế dạng bảng, tức là phương pháp xây dựng các trang Web bằng bảng.
Nguyên tắc cơ bản của thiết kế dạng bảng đã được đưa ra. Tất cả văn bản và đồ họa đều nằm gọn trong các ô của bảng, cho phép bạn làm bất cứ điều gì bạn muốn với chúng. Thông thường, các bảng như vậy (hãy gọi chúng là bảng bố cục) có đường viền vô hình và thước kẻ được tạo bằng cách sử dụng các ô rất mỏng có phần đệm nền. Các bảng đánh dấu rất phức tạp, sử dụng nhiều định dạng khác nhau và việc hợp nhất nhiều ô và hầu như luôn sử dụng các bảng lồng nhau.
Tạo các bảng đánh dấu phức tạp theo cách thủ công là đỉnh cao của thiết kế Web. Không phải tất cả mọi người, ngay cả một nhà thiết kế Web có kinh nghiệm, sẽ đảm nhận việc tạo các trang phức tạp dựa trên các bảng. Và tất cả điều này là do độ phức tạp đáng kinh ngạc của mã HTML kết quả. Do đó, rất thường xuyên xảy ra lỗi trong mã của các trang Web được xây dựng trên cơ sở bảng biểu, đó là lý do tại sao trình duyệt Web không phải lúc nào cũng hiển thị chúng. Trên thực tế, trong tất cả vô số ô được hợp nhất này và ở định dạng phức tạp nhất, bạn có thể bị nhầm lẫn.

Vật mẫu- đây là một loại mẫu, “bộ khung” của một trang Web, chứa các thành phần chung cho tất cả các trang: tiêu đề trang, một tập hợp các siêu liên kết, thông tin bản quyền, có thể là bảng đánh dấu, v.v. Các thành phần này không thay đổi trên tất cả các trang được tạo dựa trên mẫu này, đó là lý do tại sao chúng được gọi là các phần tử bất biến. Có, nhưng nội dung chính phù hợp như thế nào trên trang?
Rất đơn giản. Đặc biệt cho mục đích này, mẫu tạo ra khu vực có thể thay đổi . Chúng dành cho nội dung độc đáo của trang sẽ được tạo dựa trên mẫu này.

Thật đơn giản: chúng tôi tạo một trang dựa trên mẫu và nhập nội dung chính của nó vào các vùng có thể chỉnh sửa. Trong trường hợp này, Dreamweaver không cho phép chúng tôi chỉnh sửa các phần tử bất biến, và đúng như vậy - xét cho cùng thì chúng là bất biến. Nhưng điều đó không thành vấn đề - chúng ta luôn có thể tự thay đổi mẫu.

Ví dụ: chúng ta cần sửa tiêu đề trang web. Vì nó là một phần của mẫu nên chúng tôi mở mẫu, sửa và lưu nó. Dreamweaver ngay lập tức nhắc chúng tôi chuyển những thay đổi được thực hiện đối với mẫu tới tất cả các trang được tạo dựa trên nó. Và nó chuyển nó cẩn thận đến mức không ảnh hưởng đến nội dung của các khu vực có thể thay đổi! Trên thực tế, nó sửa tất cả các thành phần trùng lặp trên tất cả các trang Web của trang web cho chúng tôi. Mẫu được lưu trong các tệp đặc biệt có phần mở rộng dwt, trong thư mục Mẫu, mà Dreamweaver tự tạo trong thư mục gốc của bản sao cục bộ của trang web. Số lượng mẫu được sử dụng trong trang web không bị giới hạn, vì vậy chúng tôi có thể tạo một số trang trên trang dựa trên một mẫu và các trang khác dựa trên mẫu khác. Hoặc nói chung, chúng ta có thể giới hạn bản thân trong một khuôn mẫu duy nhất, vì trên thực tế, điều này thường xảy ra nhất.

Trước khi tạo mẫu, hãy tạo một trang web. Đăng ký nó trong Dreamweaver.
Bây giờ hãy tạo một tài liệu và đánh dấu.

• Tạo bảng có chiều rộng 100%, 2 hàng và 1 cột, viền 0.
• Ở dòng đầu tiên, chúng ta sẽ tạo nền (fon.gif) và chiều cao 100 pixel.
• Tiếp theo, viết tiêu đề My Site vào tiêu đề trang và ở dòng đầu tiên. Đặt kích thước văn bản thành +7 và màu thành màu vàng.
• Ở dòng thứ hai, đặt căn chỉnh dọc thành Top.
• Chèn một bảng khác có chiều rộng 100%, 1 hàng và 3 cột, viền 0.
• Đặt căn chỉnh theo chiều dọc của mỗi ô thành Top.
• Chiều rộng của cột đầu tiên là 20%, cột thứ hai là 60%, cột thứ ba là 20%.
• Ở mỗi cột chúng ta sẽ chèn thêm một bảng khác gồm 2 hàng x 1 cột, chiều rộng 95%, căn giữa bảng. Và cũng căn chỉnh theo chiều dọc ở mỗi ô là Top.
• Tiếp theo, điền văn bản vào các dòng như trong ví dụ của tôi.
• Trong cột điều hướng, đặt lần lượt màu của các ô thành màu xanh lục.

Bố cục trang của chúng tôi đã sẵn sàng. Chúng tôi sẽ không làm bất cứ điều gì phức tạp. Điều này sẽ đủ cho mục đích của bài giảng này.
Bây giờ là lúc tạo mẫu và các vùng có thể chỉnh sửa.

Có hai cách để tạo mẫu Dreamweaver. Đầu tiên, nó có thể được tạo từ đầu và sau đó chứa đầy nội dung, giống như một trang Web thông thường.
Thứ hai, một trang hiện có có thể được lưu dưới dạng mẫu và sau đó được chỉnh sửa để xóa nội dung hữu ích và chỉ để lại các thành phần chung. Cả hai đều dễ thực hiện như nhau.
Để tạo một mẫu mới “từ đầu” menu “ Tài liệu – Mới“

Việc tạo mẫu mới từ trang Web hiện có thậm chí còn dễ dàng hơn. Để thực hiện việc này, hãy mở trang Web mong muốn, chọn “ Tài liệu" đoạn văn " Lưu dưới dạng mẫu“ (Lưu dưới dạng mẫu). Bạn cũng có thể nhấp vào nút Tạo mẫu(Tạo mẫu) Bảng đối tượng. Một hộp thoại sẽ xuất hiện trên màn hình Lưu dưới dạng mẫu ”.

Trong danh sách thả xuống Địa điểm chọn trang nơi mẫu được lưu. (Hãy nhớ rằng các mẫu là một thuộc tính không thể thiếu của trang web) Theo mặc định, trang hiện tại được chọn ở đó.

Tên mẫu được nhập vào trường đầu vào Lưu thành. Hãy gọi mẫu mới của chúng tôi chủ yếu(“chính”) vì đây là mẫu chính mà chúng tôi sẽ xây dựng trang web của mình dựa trên đó.
Sau khi nhập đầy đủ thông tin cần thiết, nhấn nút Cứu(Save) để lưu mẫu.
Sau khi chúng ta tạo mẫu mới, mẫu mới nhất sẽ xuất hiện trong danh sách mẫu. Và bởi vì chúng tôi đã tạo mẫu mới này dựa trên một trang Web hiện có, nghĩa là nó có nội dung nên chúng tôi có thể xem trước nó trong khung xem trước. Tuy nhiên, bảng này rất nhỏ và để biết được nội dung của mẫu, chúng ta sẽ phải mở nó trong cửa sổ tài liệu.

Chỉnh sửa mẫu

Mẫu trống cần được lấp đầy nội dung. Mẫu được tạo trên cơ sở một trang Web phải được chỉnh sửa: xóa nội dung duy nhất của trang này, chỉ để lại các phần tử chung cho tất cả các trang của trang web. Để thực hiện việc này, chúng ta sẽ cần mở mẫu trong cửa sổ tài liệu, giống như một trang Web thông thường.
Một cửa sổ tài liệu sẽ xuất hiện trên màn hình trong đó mẫu chúng ta đã chọn sẽ được mở. Nhìn bề ngoài, nó sẽ không khác gì một trang Web thông thường.
Chúng ta có thể làm gì với mẫu này? Bất cứ điều gì. Bạn có thể coi nó như một trang Web thông thường với một số tính năng đặc biệt. (Chúng tôi sẽ mô tả thêm về các tính năng này.) Chúng tôi có thể nhập văn bản, định dạng văn bản, đặt hình ảnh, bảng biểu, siêu liên kết, chuyển sang chế độ bố cục trang và tạo bảng cũng như ô bố cục, tạo bộ khung, “dọn dẹp” mã HTML, v.v.
Tuy nhiên, mẫu này không phải là một trang Web và có một số tính năng. Vì vậy, chúng ta sẽ cần đặt các vùng có thể thay đổi trên đó, vùng này sau đó sẽ chứa nội dung chính của các trang. (Hơn nữa, chúng ta chắc chắn sẽ cần phải làm điều này, nếu không thì tại sao chúng ta lại cần mẫu này.) Chúng ta sẽ học cách thực hiện điều này sau.
Hãy mở mẫu chính mà chúng tôi đã tạo dựa trên trang default.htm (nếu nó chưa được mở).

Bây giờ chúng ta cần đặt các vùng có thể thay đổi vào mẫu. Hiện tại, sẽ chỉ có một khu vực có thể thay đổi - nội dung chính của trang. Và nó sẽ nằm trong ô lớn nhất của bảng đánh dấu của chúng tôi. Bây giờ chúng tôi sẽ để yên cột tin tức và thanh điều hướng.

Tạo vùng có thể chỉnh sửa

Giống như bản thân mẫu, chúng ta có thể tạo các vùng có thể thay đổi theo hai cách. Đầu tiên, tạo một vùng trống có thể chỉnh sửa trong vùng trống của trang. Thứ hai, chuyển đổi một phần nội dung hiện tại của trang thành vùng có thể chỉnh sửa.

Phương pháp đầu tiên là tốt nhất nếu chúng ta tạo mẫu từ đầu và phương pháp thứ hai là tốt nhất nếu chúng ta chuyển đổi trang hiện có thành mẫu.

Tạo một vùng trống có thể chỉnh sửa trong mẫu rất dễ dàng. Để thực hiện việc này, trước tiên hãy đặt con trỏ văn bản vào vị trí mà chúng tôi muốn tạo vùng trống có thể chỉnh sửa và quyết định sử dụng nội dung nào:

• bộ công cụ đối tượng bằng cách nhấp vào nút Mẫu trên tab Chung và chọn mục trong menu xuất hiện Vùng có thể chỉnh sửa;

• menu ngữ cảnh bằng cách chọn từ menu con của nó Bản mẫuđoạn văn Vùng có thể chỉnh sửa mới;
• menu hệ thống bằng cách chọn trong menu phụ Đối tượng mẫu thực đơn Chènđoạn văn Vùng có thể chỉnh sửa;
• bàn phím nhanh nhất - chỉ cần nhấn ++.

Sau đó trên màn hình sẽ xuất hiện hộp thoại Vùng có thể chỉnh sửa mới.
Trong trường nhập duy nhất Tên nằm trong cửa sổ này, nhập tên duy nhất của vùng có thể chỉnh sửa mới được tạo. Mỗi vùng có thể chỉnh sửa mà chúng ta tạo trong mẫu phải có một tên duy nhất. Tên này có thể chứa bất kỳ ký tự nào ngoại trừ các chữ cái trong bảng chữ cái tiếng Nga, dấu ngoặc kép, dấu nháy đơn và dấu hiệu "<", ">" và "&". Sau khi nhập tên, nhấp OK để tạo vùng có thể chỉnh sửa hoặc Hủy bỏđể từ chối điều này.

Nếu chúng ta vô tình đặt một khu vực có thể thay đổi vào sai vị trí mà chúng ta mong muốn thì nó có thể được sửa chữa. Chúng tôi chọn khu vực có thể thay đổi bằng cách nhấp vào tiêu đề của nó, dùng chuột “lấy” nó theo nội dung của nó và kéo nó đến vị trí mong muốn.

Dreamweaver tự động tạo một vùng tiêu đề tài liệu nhỏ có thể chỉnh sửa khi bạn tạo bất kỳ mẫu nào. (Đây là lý do tại sao chúng tôi không thể đặt tên doctitie cho khu vực có thể thay đổi - một khu vực có thể thay đổi có tên đó đã tồn tại). Khu vực có thể chỉnh sửa này bao gồm nội dung của thẻ