Microsoft Expression Web - Trang Web trống
Vì chúng tôi đã tạo trang web của mình, bây giờ chúng tôi sẽ cần tạo Trang chủ của mình. Trong chương trước, chúng tôi đã tạo một trang web một trang và Trang chủ của chúng tôi được tạo tự động vào thời điểm đó bởi Expression Web. Vì vậy, nếu bạn đã tạo một trang web trống, thì bạn sẽ cần tạo Trang chủ cho trang web của mình.
Microsoft Expression Web có thể tạo các loại trang sau:
- HTML
- ASPX
- ASP
- PHP
- CSS
- Trang chính
- Mẫu web động
- JavaScript
- XML
- Tệp văn bản
Trong chương này, chúng ta sẽ tạo một trang HTML và biểu định kiểu tương ứng của nó.
Tạo một trang trống
Để tạo một trang trống, bạn chỉ cần vào menu Tệp và chọn New → Page… menu tùy chọn.
Từ hộp thoại mới, bạn có thể tạo các loại trang trống khác nhau như trang HTML, trang ASPX, trang CSS, v.v. và nhấp vào OK.
Như bạn có thể thấy ở đây, mã mặc định đã được Microsoft Expression Web thêm vào.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta content = "text/html; charset = utf-8" http-equiv = "Content-Type" />
<title>Untitled 1</title>
</head>
<body>
<h1>
This is a blank web page
</h1>
</body>
</html>Như bạn thấy, trang mới tạo của bạn có tên tệp Untitled_1.html hoặc là Untitled_1.htm. Bạn sẽ cần lưu trang bằng cách nhấn Ctrl + S và chỉ định tên.
Vì trang web của chúng tôi đã chứa một index.html, chúng tôi không cần một trang khác. Tuy nhiên, nếu bạn đã tạo một trang web trống, thì hãy đặt tên cho trang nàyindex.html.
Để xem web của bạn trong trình duyệt, hãy chuyển đến menu Tệp và chọn Preview in Browser → Any browser, giả sử Internet Explorer.
Tạo một trang CSS
Chúng tôi sẽ hướng dẫn bạn từng bước tạo một trang CSS.
Step 1 - Để tạo một trang CSS, hãy chuyển đến menu Tệp và chọn New → Page… menu tùy chọn.
Step 2 - Chọn General → CSS và bấm OK.
Step 3 - Lưu trang và nhập tên cho style-sheet.
Step 4 - Nhấp vào Save cái nút.
Step 5 - Bây giờ, hãy vào trang index.html.
Step 6 - Trong Manage Styles Panel, nhấp chuột Attach Style Sheet.
Step 7 - Duyệt đến bảng định kiểu của bạn và chọn trang Hiện tại từ “Đính kèm vào” và Liên kết từ “Đính kèm dưới dạng” và nhấp vào OK.
Step 8 - Bây giờ, bạn sẽ thấy rằng một dòng mới được thêm tự động vào trang index.html.
<link href = "sample.css" rel = "stylesheet" type = "text/css" />Step 9 - Sự bodyphần tử xác định phần thân của tài liệu. Để tạo kiểu<body>, chúng ta cần tạo một kiểu mới. Đầu tiên, chọn thẻ body trong Design View, sau đó nhấp vào New Style… trong bảng Apply Styles hoặc Manage Styles, sẽ mở hộp thoại New Style.
Tại đây, bạn có thể xác định các tùy chọn khác nhau cho phong cách của mình. Bước đầu tiên là chọn phần nội dung từ danh sách Bộ chọn thả xuống và sau đó chọn Trang kiểu hiện có từ danh sách thả xuống “Xác định trong”.
Step 10 - Từ URL, chọn sample.csstập tin. Ở phía bên trái, có danh sách Danh mục như phông chữ, nền, v.v. và hiện tại Phông chữ được đánh dấu. Đặt thông tin liên quan đến Phông chữ theo yêu cầu của bạn như được hiển thị trong ảnh chụp màn hình ở trên và nhấp vào Ok.
Step 11- Bây giờ bạn có thể thấy trong giao diện thiết kế rằng màu nền và phông chữ đã thay đổi theo những gì chúng ta đã chọn. Bây giờ, nếu bạn mở tệp sample.css, bạn sẽ thấy rằng tất cả thông tin được tự động lưu trữ trong tệp CSS.
Hãy xem trước trang web của chúng tôi trong trình duyệt. Bạn sẽ thấy rằng kiểu được áp dụng từ tệp CSS.
