Dịch vụ sửa máy tính pc laptop máy in - Nạp mực máy in Trường Tín Tphcm
Dịch vụ sửa máy tính pc laptop máy in - Nạp mực máy in Trường Tín Tphcm

Hướng dẫn tạo website bằng Dreamweaver CC phần 7

--
Web Tin Học Trường Tín có bài: Hướng dẫn tạo website bằng Dreamweaver CC phần 7 Trong phần thứ 7 của loạt bài này, hãy tìm hiểu cách sử dụng các CSS media query để thay đổi bố cục từ hai cột thành một cột khi xem trên trình duyệt điện thoại và máy tính bảng.

Trong phần thứ 7 của loạt bài này, hãy tìm hiểu cách sử dụng các CSS media query để thay đổi bố cục từ hai cột thành một cột khi xem trên trình duyệt điện thoại và máy tính bảng.

Lưu ý : Các phần tải xuống kể cả bộ Creative Cloud Libraries và các file dự án cho loạt bài hướng dẫn này. Bạn cũng đều có thể tiếp tục xây dựng trên file bắt đầu của mình trong phần 1 hoặc điều phối đến thư mục có liên quan để sử dụng file bắt đầu cho từng phần.

  • Hướng dẫn tạo website bằng Dreamweaver CC phần 1
  • Hướng dẫn tạo website bằng Dreamweaver CC phần 2
  • Hướng dẫn tạo website bằng Dreamweaver CC phần 3
  • Hướng dẫn tạo website bằng Dreamweaver CC phần 4
  • Hướng dẫn tạo website bằng Dreamweaver CC phần 5
  • Hướng dẫn tạo website bằng Dreamweaver CC phần 6

Chào mừng bạn đến với phần 7 của loạt bài hướng dẫn cách xây dựng một trang web đơn giản và mang tính đáp ứng với Dreamweaver CC 2015. Hiện giờ bạn đang tiến đến những bước cuối cùng. Tất cả các gì còn lại là hoàn thành trang thứ hai, và sau đó điều tiết bố cục một cột của trang web Bayside Beat thành thiết kế hai cột thích hợp cho máy tính bảng và máy tính để bàn.

Hướng dẫn tạo website bằng Dreamweaver CC phần 7

Bạn cũng có thể có thể phân phối một bố cục khác cho các màn hình lớn hơn, bằng cách sử dụng các CSS media query. Kiểm tra media query cung cấp các quy tắc định kiểu không trùng lặp cho trình duyệt, tùy thuộc vào những tiêu chí nhất định, chẳng hạn như chiều rộng tối thiểu hoặc nhiều nhất của chế độ xem. Để giúp mọi thứ dễ dàng hơn, bạn sẽ chỉ tạo hai media query, một để hiển thị trang dưới dạng bố cục hai cột khi màn hình rộng tối thiểu 700px cùng một để thêm văn bản bao quanh một số hình ảnh khi màn hình rộng tối thiểu 900px. Đến cuối phần này, trang chủ sẽ trông giống như hình sau.

Hướng dẫn tạo website bằng Dreamweaver CC phần 7

Trong phần này, bạn sẽ học cách tránh những vấn đề với định vị tuyệt đối. Nhưng trước hết, bạn cần thi hành một số công việc với trang thứ hai, hiện không được định kiểu.

Tạo website bằng Dreamweaver CC phần 7 – Hoàn thành trang thứ hai, tạo kiểu trang web cho phù hợp với máy tính bảng và máy tính bàn

  • Định kiểu cho trang thứ hai
  • Sửa phông chữ trong liên kết kích hoạt
  • Chèn hình ảnh từ một nguồn cục bộ
  • Thêm media query để định kiểu trang web cho máy tính bảng và máy tính bàn
  • Định kiểu cho menu điều phối cho bố cục hai cột
  • Sử dụng tính năng định vị tuyệt đối để đặt văn bản trên một hình ảnh
  • Float một cột kế bên cột khác
  • Di chuyển văn bản xung quanh hình ảnh
  • Đặt thẻ meta viewport

Định kiểu cho trang thứ 2

Điều tuyệt hảo khi sử dụng style sheet bên phía ngoài là các kiểu được áp dụng ngay lập tức cho mọi trang liên kết với nó. Sau khi liên kết style sheet với sights.html, bạn phải cập nhật menu điều hướng trong trang thứ hai.

1. Mở sights.html trong cửa sổ Document bằng phương pháp bấm đúp vào bảng điều khiển Files.

2. Chuyển sang CSS Designer, nhấp vào nút cộng (+) ở góc trên bên trái của Sources và chọn Attach Existing CSS File .

Hướng dẫn tạo website bằng Dreamweaver CC phần 7

3. Nhấp vào nút Browse trong hộp thoại mở ra và điều hướng đến responsive.css trong thư mục Styles. Bấm OK (Windows) hoặc Open (Mac), rồi bấm OK để đóng hộp thoại đầu tiên.

Đính kèm style sheet ngay lập tức biến hóa giao diện của trang. Dreamweaver cũng phát hiện ra rằng các kiểu này sử dụng Adobe Edge Web Font và chèn code để tải xuống.

4. Menu điều phối vẫn trông giống như một danh sách không có thứ tự. Trong bảng điều khiển DOM, chọn danh sách không có thứ tự (lồng bên trong số thành phần header nav ). Chỉnh sửa thành phần ul bằng cách nhấp đúp và nhập #navlinks.displayed trong trường bên phải. Gợi ý code sẽ xuất hiện cho tất cả ID và lớp.

Hướng dẫn tạo website bằng Dreamweaver CC phần 7

Menu điều hướng được thiết kế lại và xác định tuyệt đối trên heading đầu tiên và các đoạn tiếp theo. Nếu Live View rộng hơn 1000px, đừng lo lắng về phần background bán trong suốt tràn rời khỏi wrapper phía bên phải. Nó sẽ không xuất hiện trong bố cục hai cột.

5. Mở rộng thành phần ul trong bảng điều khiển DOM, sau đó mở rộng phần tử li thứ 2 và chọn phần tử được lồng bên trong. Bạn cũng đều có thể kiểm tra xem bạn đã chọn đúng phần tử chưa, vì liên kết SIGHTS cũng được chọn trong Live View.

Bấm đúp vào một thành phần trong bảng điều khiển DOM và gán lớp . thispage cho nó.

Hướng dẫn tạo website bằng Dreamweaver CC phần 7

Khi bạn nhấn Enter / Return để xác nhận chỉnh sửa, lớp cũng được hiển thị trong Element Display và liên kết thứ hai thay đổi màu sắc.

Hướng dẫn tạo website bằng Dreamweaver CC phần 7

6. Để hoàn thành menu điều hướng, bạn phải thêm liên kết kích hoạt và file JavaScript. Có một số phương pháp để làm điều này, nhưng vì bạn đang hoạt động trong bảng điều khiển DOM, hãy tiếp tục làm như vậy.

Tạo index.html trang hoạt động trong cửa sổ Document, nhấn chuột phải vào h2 #menulink trong bảng điều khiển DOM và chọn Copy từ menu ngữ cảnh.

Hướng dẫn tạo website bằng Dreamweaver CC phần 7

7. Quay trở lại sights.html, chọn phần tử nav trong bảng điều khiển DOM, click chuột phải và chọn Paste as Child .

Thận trọng : Nếu bạn bấm Paste thay vì Paste as Child , liên kết kích hoạt sẽ có chèn dưới dạng sibling (phần tử anh em) của thành phần nav (nói cách khác, ở cùng cấp độ phân cấp HTML), do đó, nó sẽ nằm dưới ul trong bảng điều khiển DOM. Tuy nhiên, nó sẽ xuất hiện ở vị trí chuẩn xác trong Live View vì danh sách không có thứ tự được định vị tuyệt đối và đã được xóa bỏ luồng tài liệu thông thường.

Kiểm tra bảng điều khiển DOM để đáp ứng rằng h2 #menulink được lồng chuẩn xác bên trong thành phần nav ở trên danh sách không có thứ tự như trong hình bên dưới.

Hướng dẫn tạo website bằng Dreamweaver CC phần 7

Nếu h2 #menulink nằm dưới bản kê không có thứ tự, hãy hoàn tác bằng cách nhấn Ctrl + Z (Windows) hoặc Cmd + Z (Mac). Sau đó, chọn lại thành phần nav, click chuột phải và chọn Paste as Child .

8. Quay trở lại index.html, click chuột phải vào phần tử script ở cuối bảng điều khiển DOM và chọn Copy từ menu ngữ cảnh.

9. Quay trở lại sights.html, click chuột phải vào phần tử footer trong bảng điều khiển DOM và chọn Paste từ menu ngữ cảnh.

Lần này, bạn phải chọn Paste, thay vì Paste as Child . Script nên nằm sau phần footer và không được lồng bên trong.

Khi script được đính kèm, menu điều phối được ẩn theo cùng một cách như trong index.html. Nếu cửa sổ Document rộng hơn 1000px, việc đính kèm script có thể khiến wrapper dịch chuyển sang trái trong Live View. Nếu điều đó xảy ra, chỉ cần nhấn F5 để refresh trang.

10. Lưu sights.html.

Thay vì sao chép phiên bản chưa kết thúc của menu điều phối trong phần 3 và cập nhật nó ở đây, sẽ tốt hơn nếu hoàn thành nó trước. Trong thực tế, việc phát triển web ít khi diễn ra suôn sẻ. Bạn hoặc khách hàng của bạn có thể có những ý tưởng hoặc đòi hỏi mới, vì thế điều quan trọng là phải biết phương pháp sao chép các nhân tố sang những trang khác. Đây cũng chính là một thử thách trong việc đáp ứng các yếu tố được lồng ghép chính xác. Trang này sẽ tiếp tục hoạt động ngay khi với script được lồng trong footer, nhưng code được lồng không chuẩn xác thường sẽ gây nên sự cố. Việc khắc phục sự cố sẽ đơn giản hơn nhiều nếu phần code được tổ chức tốt.

Sửa phông chữ trong liên kết kích hoạt

Trong phần trước, bạn đã chuyển đổi qua lại giữa index.html sights.html nhiều lần. Nếu tinh mắt, bạn sẽ nhận thấy sự khác biệt giữa liên kết kích hoạt trong hai trang. Chữ MENU trong index.html mảnh hơn so với sights.html.

Hướng dẫn tạo website bằng Dreamweaver CC phần 7

Hướng dẫn tạo website bằng Dreamweaver CC phần 7

Điều này đã xảy ra vì phông chữ cho phần body được khai báo là source-sans-pro với font-weight là 400 (normal) . Khi bạn tạo quy tắc định kiểu này trong phần 4, ban đầu Dreamweaver đặt font-weight là 200 (light) . Do đó, script load Adobe Edge Web Font trong index.html tải xuống cả hai trọng số. Nhưng khi bạn đính kèm style sheet vào sights.html, Dreamweaver chỉ thấy source-sans-pro với font-weight bình thường. Để khắc phục điều này, bạn phải thực hiện điều tiết các kiểu sử dụng trọng số khác nhau.

1. Với sights.html là trang hoạt động trong cửa sổ Document, chọn #menulink a trong Selectors của CSS Designer.

2. Nếu cần, bỏ chọn Show Set trong Properties, nhấn vào biểu tượng Hướng dẫn tạo website bằng Dreamweaver CC phần 7 để bỏ lỡ các tính chất văn bản và đặt họ phông chữ thành source-sans-pro. Điều này cập nhật script trong phần , nhận trách nhiệm tải xuống Edge Web Fonts.

3. Chuyển sang index.html và chọn quy tắc định kiểu cho #hero p trong Selectors của CSS Designer. Điều này cho biết font-weight là 600. Vì nó nặng hơn font-weight bình thường, các trình duyệt (bao gồm Live View) tổng hợp phông chữ là semi-bold, nhưng đây không phải là điều bạn đích thực muốn. Đặt họ phông chữ cho quy tắc này thành source-sans-pro . Các văn bản trong đoạn văn lúc này sắc nét hơn nhiều.

4. Bạn đã thực hiện các thay đổi đối với một số file, vì vậy hãy chọn File > Save All .

5. Dreamweaver sẽ hỏi bạn có muốn cập nhật Web Fonts trong sights.html không.

Hướng dẫn tạo website bằng Dreamweaver CC phần 7

6. Bấm Update, sau đó nhấp vào Close để bỏ qua hộp thoại báo cáo cập nhật đã được thực hiện. Dreamweaver tự động lưu (các) file mà nó đã cập nhật.

Thông thường, lần duy nhất bạn phải chỉ định họ phông chữ theo quy tắc định kiểu khác với phần body là lúc bạn muốn sử dụng một phông chữ khác. Tuy nhiên, trong tình huống này, bạn đang sử dụng Edge Web Font phải được tải xuống từ những máy chủ Adobe. Để giữ kích cỡ tải xuống ở mức tối thiểu, Dreamweaver chỉ tìm nạp những trọng số đang được sử dụng. Mặc dù semi-bold (600) chỉ được dùng trong index.html, font-weight bổ sung sẽ có lưu giữ trong cache của trình duyệt khi truy cập sights.html, do đó không có khả năng gây nên thêm gánh nặng. Tuy nhiên, nếu bạn đang sử dụng nhiều phông chữ web (việc này không phải là một ý tưởng hay), bạn nên suy nghĩ kỹ hơn về việc có nên tải xuống các phông chữ sẽ không được sử dụng không.

Chèn hình ảnh từ một nguồn cục bộ

Trong phần 5, bạn đã chèn hình ảnh vào các phần tử trực tiếp từ Bayside CC Library. Tuy nhiên, điều ấy không đều đặn diễn ra. Bạn sẽ làm việc với các hình ảnh được lưu trữ cục bộ nhiều hơn. Trong phần này, bạn sẽ thêm hai hình ảnh vào sights.html bằng các phương pháp khác nhau. Quá trình này rất giống với phần 5, vì thế các hướng dẫn được giữ ở mức tối thiểu.

1. Trong bảng điều khiển CC Libraries, nhấp chuột phải vào hình ảnh có nhãn alcatraz và chọn Download Unlinked từ menu ngữ cảnh.

2. Trong hộp thoại xuất hiện, thay đổi định hình hình ảnh thành JPEG và lấy mẫu lại hình ảnh thành 400 x 266 .

3. Lặp lại hai bước trước để tải xuống hình ảnh có nhãn cable_car2. Vì bạn đã định vị Images là thư mục hình ảnh mặc định trong phần 1, cả 2 hình ảnh đều được trích xuất từ CC Library và đã được tải xuống thư mục Images trong trang web Bayside Responsive.

4. Trong sights.html, chọn đoạn đầu tiên (bắt đầu bằng “The precipitous hills…” ) trong Live View.

5. Trong phần HTML của bảng điều khiển Insert, chọn Figure để chèn thành phần vào

.
Chọn After từ Position Assist Dialog .

6. Với phần tử vẫn được chọn, sử dụng một trong các phương pháp sau để chèn cable_car2.jpg:

Bấm vào Image trong phần HTML của bảng điều khiển Insert.

Chọn Insert > Image .

Sử dụng phím tắt Ctrl + Alt + I (Windows) hoặc Cmd + Opt + I (Mac).

7. Chọn Nest từ Position Assist Dialog và chọn cable_car2.jpg từ hộp thoại mở ra.

8. Sử dụng Quick Property Inspector để xóa bề rộng và chiều cao khỏi hình ảnh. Xóa văn bản đặt chỗ cho phần tử và thay thế văn bản giữ chỗ cho phần chú giải bằng “The front seat of a cable car affords a great view of the city” .

9. Chèn phần tử với giữa đoạn thứ ba và đoạn thứ tư.

10. Mặc dù bạn không thể kéo và thả hình ảnh cục bộ từ bảng điều khiển Files, tuy nhiên trong bảng điều khiển Assets thì có. Bảng điều khiển Assets được gắn với DOM theo mặc định trong không gian làm việc Design.

Mở bảng điều khiển bằng phương pháp bấm vào tab của nó và đảm bảo biểu trưng Images được chọn ở phía trên bên trái.

Hướng dẫn tạo website bằng Dreamweaver CC phần 7

Nếu cần, hãy reresh nội dung bảng bằng cách nhấp vào mũi tên tròn ở góc dưới bên phải. Bạn cũng cũng đều có thể tăng kích thước của khung xem trước bằng cách kéo cạnh dưới của nó xuống.

11. Chọn alcatraz.jpg trong danh sách tên file hoặc trong khung xem trước và kéo nó vào Live View. Giống như cách bạn đã làm trong phần 5, kéo hình ảnh cho đến khi bạn thấy một đường màu lục ngay phía trên thành phần

,

tạm dừng và di chuyển con trỏ chuột cho đến khi tượng trưng xuất hiện. Sau đó tiếp tục kéo trong bảng điều khiển DOM nổi và nhả chuột khi con trỏ chuột ở trên phần tử figure. Điều này lồng hình ảnh bên trong những phần tử.

Hướng dẫn tạo website bằng Dreamweaver CC phần 7

12. Sử dụng Quick Property Inspector để xóa bề rộng và chiều cao của hình ảnh. Xóa văn bản đặt chỗ cho phần tử và thay thế chú thích với nội dung “Alcatraz—former exclusive residence for notorious criminals” .

13. Chọn hình ảnh Methraz và sử dụng Element Display để áp dụng lớp thang độ xám cho nó (đừng quên dấu chấm ban đầu cho biết bạn đã chỉ định một lớp).

14. Lưu sights.html.

Thêm media query để định kiểu trang web cho máy tính bảng và máy tính để bàn

Media query là một tính năng tương đối mới trong CSS, nhưng chúng được hỗ trợ bởi mọi thứ các trình duyệt hiện đại. Các ngoại lệ đáng chú ý duy nhất là Internet Explorer 8 trở về trước, nhưng chúng không còn được Microsoft hỗ trợ chính thức nữa, vì vậy số người dùng các trình duyệt cũ như vậy đang giảm đi nhanh chóng. Ưu điểm lớn của media query là chúng cho phép bạn phục vụ các bộ CSS không trùng lặp cho nhiều trình duyệt, tùy thuộc vào một số tính năng nhất định, chẳng hạn như bề rộng của màn hình, hướng, mật độ pixel, v.v… Để đơn giản, bạn sẽ chỉ tạo hai media query, cả 2 đều dựa trên bề rộng ít nhất của màn hình.

1. Bạn chẳng cần bảng điều khiển CC Libraries nữa, vì vậy hãy kéo tab của nó sang cạnh bên bảng Snippets trong nhóm bảng ở bên phải. Di chuyển nó về phía trên cùng của tập thể nhóm bảng điều khiển cho đến khi một dòng màu xanh xuất hiện. Sau đó nhả chuột để gắn nó với các bảng điều khiển khác.

Hướng dẫn tạo website bằng Dreamweaver CC phần 7

2. Kéo nút trượt của Live View cho đến khi cửa sổ Document rộng khoảng 700px. Kích thước chính xác, hoặc index.html hay sights.html là tư liệu đang hoạt động, đều không quan trọng.

3. Nhấn vào biểu tượng Hướng dẫn tạo website bằng Dreamweaver CC phần 7 trong công cụ thước kẻ ở đầu cửa sổ Document để mở bảng điều khiển pop-up nơi bạn đặt media query.

Hướng dẫn tạo website bằng Dreamweaver CC phần 7

4. Thay đổi menu drop-down trên cùng thành bề rộng tối thiểu, đặt giá trị của trường phạm vi ít nhất thành 700px và chọn responsive.css từ menu drop-down cuối cùng. Kiểm tra xem những cài đặt của bạn có giống như trong hình bên dưới không và nhấn OK.

Hướng dẫn tạo website bằng Dreamweaver CC phần 7

5. Thanh Visual Media Queries ở đầu cửa sổ Document hiện có màu tím. Nhấp vào thanh này để làm cho cửa sổ Document rộng chính xác 700px.

6. Trong CSS Designer, đảm bảo nút All được chọn phía trên cùng. Chọn responsive.css trong Sources và mở rộng ngăn @Media. Các media query hiện được liệt kê ở đây. Khi bạn chọn nó, khung Selector trống.

Hướng dẫn tạo website bằng Dreamweaver CC phần 7

7. Nhấp vào GLOBAL trong khung @Media. Tất cả các bộ chọn mà bạn đã tạo trong phần 4 đến phần 6 được liệt kê ở đây. Những kiểu này sẽ có áp dụng bởi tất cả các trình duyệt, bất cứ chiều rộng màn hình là bao nhiêu. Bạn sử dụng media query để chỉ thay đổi những giá trị mà bạn mong muốn ghi đè khi màn hình rộng ít nhất 700px.

8. Lưu mọi thay thể bằng cách chọn File > Save All Related Files .

Giá trị thực của thanh Visual Media Queries trở nên rõ rệt khi bạn làm việc với nhiều media query. Hàng trên cùng hiển thị các truy vấn có chiều rộng tối đa dưới dạng những thanh màu xanh lục, hàng giữa hiển thị các truy vấn có cả mức tối thiểu và tối đa dưới dạng những thanh có màu lục lam (aqua), hàng dưới cùng hiển thị các truy vấn có bề rộng ít nhất dưới dạng những thanh màu tím. Nhấp vào thanh phù hợp sẽ thay đổi kích thước cửa sổ Document, cấp phép bạn xem hiệu ứng của các quy tắc định kiểu khác nhau. Kiểm tra tư liệu trực tuyến để hiểu thêm chi tiết về thanh Visual Media Queries (link tham khảo: https://helpx.adobe.com/ca/dreamweaver/using/visual-media-queries.html#main-pars_header_5).

Định kiểu cho menu điều hướng cho bố cục hai cột

Menu điều hướng sẽ có hiển thị mọi lúc trong bố cục hai cột. Bây giờ, bài viết giả định rằng bạn biết cách tạo selector và quy tắc định kiểu, do đó những hướng dẫn này sẽ tương đối ngắn gọn.

1. Đảm bảo cửa sổ Document rộng tối thiểu 700px. Việc index.html hay sights.html là file đang làm việc không quan trọng. Nhấp vào bất kể nơi nào trong liên kết kích hoạt điều hướng trong Live View để chọn nó.

2. Trong CSS Designer, đảm bảo nút All được chọn, chọn responsive.css trong ngăn Sources (min-width: 700px) trong ngăn @Media. Khung Selector phải trống.

3. Nhấp vào nút cộng (+) trong ngăn Selectors và tạo selector cho #menulink. Trong phần bố cục của ngăn Properties, đặt tính chất display thành none. Các liên kết kích hoạt menu sẽ biến mất.

4. Kéo nút trượt của Live View sang trái để làm cho trang hẹp hơn 700px. Liên kết kích hoạt xuất hiện trở lại. Kéo theo phía ngược lại, liên kết được ẩn ngay cả trang rộng 700px.

5. Đảm bảo media query vẫn được chọn trong ngăn @Media (điều này cũng áp dụng cho tất cả các thay đổi tiếp theo), tạo selector cho #navlinks, đặt các tính chất và giá trị sau:

   max-width: 1000px position: static background-color: transparent   

Thay đổi thuộc tính position thành static có nghĩa là bản kê các liên kết điều hướng chưa bố trí không còn được xác định tuyệt đối và được hiển thị ở địa thế bình thường trong trang, buộc phần còn lại của nội dung trang phải drop-down. Bạn không thể nhìn thấy các liên kết vì lớp thu gọn đã được JavaScript áp dụng một cách linh hoạt trong menu.js.

6. tạo selector cho #navlinks.collapsed (không có khoảng trắng xung quanh dấu chấm) và đặt thuộc tính opacity thành 1 . Menu xuất hiện lại, nhưng chỉ hiển thị liên kết trang này vì màu background được đặt trong suốt ở bước trước. Không thể nhìn thấy liên kết có màu trắng trên nền trắng!

7. Khắc phục các liên kết bằng phương pháp tạo selector cho #navlinks a , đặt các tính chất và giá trị sau:

   width: 20% margin-bottom: 20px padding-top: 15px padding-bottom: 15px float: left (Đây là icon trước mắt cho tính chất này) color: #1E1E1E   

Hướng dẫn tạo website bằng Dreamweaver CC phần 7

Menu điều phối bây giờ trông giống như hình bên trên.

Có 5 liên kết trong menu điều hướng, do đó, đặt độ rộng của mỗi một liên kết thành 20% và float đều chúng sang bên trái trên trang. Việc đặt thuộc tính max-width thành 1000px trong bước 5 sẽ ngăn không cho chúng tràn rời khỏi wrapper .

Thuộc tính float hiện là cách đáng tin cậy nhất để bố trí các phần tử mức độ khối theo chiều ngang. Mặc dù các liên kết thường không ở cấp bậc khối, nhưng tính chất display được đặt thành block theo các kiểu được tạo trong số phần 4.

Sử dụng tính năng xác định tuyệt đối để đặt văn bản trên một hình ảnh

Trong phần 5, bạn đã tạo kiểu cho đoạn văn dưới hình ảnh Cầu Cổng Vàng với phông chữ semi-bold màu hồng với đường viền dưới cùng. Đối với bố cục hai cột, bạn sẽ sử dụng tính năng định vị tuyệt đối để đặt chúng lên hình ảnh và định kiểu nó theo một màu khác với đường viền ở mọi thứ các phía. Bạn cũng sẽ học cách tránh một lỗi phổ biến với tính năng định vị tuyệt đối.

1. Nếu cần, hãy chuyển sang index.html và nhấp vào thanh màu tím trong thanh Visual Media Queries để đặt bề rộng của cửa sổ Document thành 700px.

Nếu công cụ thước ở trang đầu hình như được đặt không chính xác, hãy đóng index.html và mở lại. JavaScript điều khiển menu điều hướng trên màn hình rộng dưới 700px đôi khi làm thay đổi thước đo.

2. Trong Live View, chọn đoạn dưới hình ảnh Cầu Cổng Vàng. Đảm nói rằng responsive.css và media query vẫn được chọn trong CSS Designer, tạo selector cho #hero p, đặt các tính chất và giá trị sau:

   width: 36% padding-top: 20px padding-left: 25px padding-right: 25px position: absolute   

Khi bạn đặt tính chất position thành absolute, heading “Riding the Cable Cars” và văn bản theo sau sẽ di chuyển lên phía đằng sau đoạn văn mà bạn đang tạo kiểu. Định vị tuyệt đối sẽ loại bỏ một phần tử khỏi luồng tư liệu thông thường và đặt chúng trên một lớp trước các thành phần khác.

3. Sử dụng công cụ trực giác ngay bên dưới thuộc tính position để di chuyển đoạn văn vào địa thế trên hình ảnh Cầu Cổng Vàng bằng phương pháp đặt offset trên cùng và bên phải.

Đây là một cơ hội tốt để sử dụng kỹ thuật scrubbing được miêu tả trong phần 5. Sau khi chọn px làm đơn vị đo lường, đặt con trỏ chuột lên hoặc ngay dưới giá trị cho tới khi con trỏ biến thành mũi tên hai đầu, và sau đó kéo sang phải đặt tăng giá trị hoặc sang trái để khuyến mãi trị.

Hướng dẫn tạo website bằng Dreamweaver CC phần 7

4. Đặt thuộc tính color thành white và đặt đường viền ở mọi thứ các cạnh có bề rộng 5px solid. Hình bên dưới cho thấy đoạn văn bây giờ sẽ được xác định như ra sao trên Cầu Cổng Vàng.

Hướng dẫn tạo website bằng Dreamweaver CC phần 7

5. Nhấp đúp vào vùng màu xám ở bên cạnh Live View để làm cho nó lấp đầy toàn bộ chiều rộng của cửa sổ Document . Tùy thuộc vào độ lớn của màn hình, kết quả sẽ thay đổi từ xấu đến rất xấu.

Hướng dẫn tạo website bằng Dreamweaver CC phần 7

Hầu hết phản ứng mới đầu của mọi người là cho là thành phần được định vị tuyệt đối của họ đã di chuyển. Nhưng không, các giá trị offset ở trên cùng và bên phải vẫn hoàn toàn giống nhau. Vấn đề là offset được xem từ containing block của phần tử định vị. Nó được lồng bên trong hero . Nhưng có chắc đó là containing block của nó không?

Đó là một giả thiết tự nhiên, nhưng chỉ dẫn kỹ thuật của CSS nói rằng containing block của 1 phần tử định vị cũng phải được định vị. Khi không có thành phần nào như vậy, trang sẽ trở thành containing block. Do đó, bề rộng 36% có liên quan đến trang chứ chẳng cần là hero và offset được xem từ đầu và bên phải của trang.

6. Khắc phục vấn đề này rất dễ dàng. tạo selector mới cho #hero và đặt thuộc tính position thành relative. Điều này làm cho cha, containing block cho đoạn được xác định tuyệt đối và các offset, không còn được tính từ đầu và bên phải của trang nữa.

7. Điều chỉnh địa thế của đoạn văn bằng phương pháp chọn bộ chọn #hero p và đặt lại tính chất top thành approximately 90px . Ở chiều rộng đầy đủ, hình ảnh hero sẽ trông giống như sau:

Hướng dẫn tạo website bằng Dreamweaver CC phần 7

8. Lưu mọi thay đổi bằng phương pháp chọn File > Save All Related Files .

Đặt tính chất position của thành phần thành relative cấp phép nó được bù so với vị trí bình thường trong trang mà không ảnh hưởng đến các phần tử xung quanh. Trong tình huống này, không có offset nào được chỉ định cho hero , do đó, nó không di chuyển. Tuy nhiên, vì hero là một phần tử được định vị, nên nó hoạt động như một containing block cho đoạn được định vị tuyệt đối. Điều này có vẻ lạ, nhưng đó là cách mà tính năng xác định tuyệt đối hoạt động.

Sử dụng định vị tuyệt đối phối phù hợp với định vị tương đối rất có ích cho những tác vụ riêng lẻ, chẳng hạn như xác định văn bản trên một hình ảnh như thế này, nhưng nó ít khi là một lựa chọn khôn ngoan để bố trí một trang web hoàn chỉnh. Cần phải linh hoạt trong vấn đề này.

Float một cột bên cạnh cột khác

Trước đó, bạn đã sử dụng thuộc tính float để căn chỉnh các liên kết điều phối theo chiều ngang. Sử dụng và một thuộc tính hiện là cách đáng tin cậy nhất để tạo bố cục hai cột. Khi phần nào tử được float sang trái hoặc phải, nó sẽ di chuyển sang phía đó và cấp phép các phần tử sau di chuyển lên cùng theo với không gian trống. Để các phần tử float, chúng phải có chiều rộng được ghi rõ hoặc bề rộng tối đa.

1. Với responsive.css và media query được chọn trong CSS Designer, tạo selector cho main và đặt thuộc tính width của nó thành 60%.

2. Tạo một bộ chọn cho aside và đặt thuộc tính width của nó thành 28%. Đồng thời đặt lề trái thành 0px. Điều này là cần có để ghi đè lên mức 4% mà nó được thừa hưởng từ những kiểu trước đó.

Phần tử kế thừa tỷ lệ lề 4% ở cả hai phía và phần tử vẫn có tỷ suất 4% ở bên phải. Vì vậy, chiều rộng kết hợp của hai nhân tố và lề ngang của chúng tăng thêm chính xác 100%.

3. Tạo một bộ chọn nhóm cho main, aside . Đặt các thuộc tính và giá trị sau:

   margin-top: 30px margin-bottom: 30px float: left font-size: 0.875em   

Ngay khi bạn đặt tính chất float, mọi thứ trông sẽ rất kinh khủng vì phần lớn nền chuyển qua màu đen.

Hướng dẫn tạo website bằng Dreamweaver CC phần 7

Điều đây là tận gốc bình thường. Các phần tử float được loại bỏ khỏi luồng chính của tư liệu theo cách tựa như với những thành phần được định vị tuyệt đối. Phần tử cũng đã di chuyển lên cùng theo với phần tử và nền của nó đã được lấp đầy trong khoảng không gian bị bỏ trống bởi các phần tử float. Việc khắc phục rất dễ dàng.

tạo selector cho footer và đặt thuộc tính clear thành left. Mọi thứ sẽ trở lại đúng vị trí.

Có một kỹ thuật khác xem là flexbox có thể được sử dụng cho bố cục hai cột. Flexbox được hỗ trợ bởi mọi thứ các trình duyệt hiện đại. Thật không may, nhiều trình duyệt vẫn đang sử dụng những phiên bản cũ của các tính chất flexbox, khiến việc triển khai chéo đáng tin cậy giữa các trình duyệt trở nên khó khăn.

Di chuyển văn bản bao quanh hình ảnh

Mục đích ban đầu của tính chất float là để di chuyển văn bản xung quanh hình ảnh. Vì vậy, hãy hoàn thành thiết kế bằng phương pháp tạo một media query thứ hai và di chuyển văn bản bao quanh các hình ảnh trong sights.html, khi chế độ xem của trình duyệt lớn hơn 900px.

1. Chuyển sang sights.html và sử dụng nút trượt của Live View để thay đổi kích thước Live View thành khoảng 900px.

2. Nhấn vào tượng trưng Hướng dẫn tạo website bằng Dreamweaver CC phần 7 trong công cụ thước kẻ và tạo một media query cho min-width: 900px trong responsive.css.

Hướng dẫn tạo website bằng Dreamweaver CC phần 7

3. Nhấp vào bên phải 900px trong thanh Visual Media Queries để đặt lại phạm vi của Live View thành 900px.

4. Chọn hình ảnh cáp treo ở sights.html và nhấn mũi tên lên một lần để chọn phần tử cha của nó. Nhấp vào nút cộng (+) trong Element Display. Nhập .floatright vào trường có thể chỉnh sửa và nhấn Tab hoặc Enter / Return để gán lớp. Trong bảng điều khiển pop-up, đáp ứng rằng responsive.css đã được chọn, sau đó chọn media query min-width: 900px từ menu drop-down thứ hai.

Hướng dẫn tạo website bằng Dreamweaver CC phần 7

5. Trong CSS Designer, chọn media query min-width: 900px trong ngăn @Media, sau đó chọn .floatright trong ngăn Selectors. Đặt các tính chất và giá trị sau cho lớp:

   float: right margin-right: 0px margin-left: 10px   

Điều này di chuyển văn bản trong khúc văn sau xung quanh phần bên trái của hình ảnh và chú thích.

Hướng dẫn tạo website bằng Dreamweaver CC phần 7

Nếu hình ảnh không di chuyển sang bên phải, điều này cũng có thể là bạn đã áp dụng lớp cho chính hình ảnh đó chứ không phải là phần tử cha của nó.

6. Lặp lại các bước 4 và 5 với hình ảnh Alcatraz, lần này tạo ra một lớp có tên là .floatleft với những giá trị sau:

   float: left margin-right: 10px margin-left: 0px   

7. Lưu lại mọi thay bằng phương pháp chọn File > Save All Related Files .

Đặt thẻ meta viewport

Thiết kế đáp ứng của bạn đã hoàn tất. Chỉ còn một bước cuối cùng trước khi mặt hàng bạn tạo cũng có thể có thể được hiển thị một cách chính xác trên thiết bị di động.

Trong danh mục HTML của bảng điều khiển Insert, chọn Viewport.

Hướng dẫn tạo website bằng Dreamweaver CC phần 7

Bạn luôn cần làm điều này trong cả sights.html index.html (hay bất kỳ trang mang tính đảm bảo nào khác). Điều này là do điện thoại di động tự động chia tỷ suất các trang và bỏ qua các media query mà không có nó.

Bạn đã tốn biết bao nỗ lực để đạt được điều này, nhưng trong quá trình đó, bạn cũng học được nhiều điều, không chỉ về phong thái sử dụng Dreamweaver CC 2015, mà còn về tình trạng thiết kế web hiện tại. Nếu bạn thấy một số kỹ thuật quá khó, hãy quay về những phần trước một lần nữa. Không khó để học những điều cơ bản về HTML và CSS, nhưng thiết kế web ngày càng trở nên tinh vi. Đừng kỳ vọng sẽ trở thành một chuyên gia ngay lập tức. Xây dựng một trang web là thiết kế, nhưng là bằng code. Dreamweaver viết đa số các code cho bạn, nhưng bạn cần phải biết các thuộc tính và giá trị CSS nào bạn cần để đạt được hữu hiệu mong muốn.

Nếu bạn cần trợ giúp về các vấn đề liên quan đến bố cục và thiết kế, hãy upload trang vấn đề của bạn lên một website và gửi câu hỏi trong Diễn đàn hỗ trợ Dreamweaver chính (link tham khảo: https://forums.adobe.com/community/dreamweaver). Hãy kể cả URL và mô tả ngắn gọn về vấn đề trong bài viết của bạn. Bạn có thể thấy một số người sẽ giúp đỡ bạn.

Bạn sẽ học được cách upload các trang web và nhiều asset khác của mình lên một máy server web trực diện trong phần cuối cùng của loạt bài chỉ dẫn này, phần 8: Xuất bản trang web.

  • Cách dùng Google Sites tạo website miễn phí
  • Cách dùng Weebly tạo website trên điện thoại
  • Cách lưu giữ trang web miễn phí với GitHub Pages
  • 7 công cụ thành lập website bằng cách kéo và thả tốt nhất 2022

Dreamweaver CC,tạo website,tạo website bằng Dreamweaver CC,hướng dẫn tạo website bằng Dreamweaver CC

Nội dung Hướng dẫn tạo website bằng Dreamweaver CC phần 7 được tổng hợp sưu tầm biên tập bởi: Tin Học Trường Tín. Mọi ý kiến vui lòng gửi Liên Hệ cho truongtin.top để điều chỉnh. truongtin.top tks.

Bài Viết Liên Quan


Xếp Hạng post

Bài Viết Khác

--