Trang Chủ-Các chương trình-Tổng quan về những tính năng mới trong phiên bản Dreamweaver CC mới nhất. Chèn nền tiêu đề đồ họa

Tổng quan về những tính năng mới trong phiên bản Dreamweaver CC mới nhất. Chèn nền tiêu đề đồ họa



Đây là khóa đào tạo chính thức cho Adobe Dreamweaver CC, một phần của loạt bài "Lớp học trong một cuốn sách" được hoan nghênh. Cuốn sách đủ màu này dành cho cả người mới bắt đầu và người dùng nâng cao muốn tận dụng tối đa Adobe Dreamweaver. Một loạt các hướng dẫn từng bước đơn giản, được chọn lọc kỹ lưỡng cho phép bạn thực hành mọi thứ Công cụ Adobe Dreamweaver CC.
Đĩa chứa các tệp cho các bài học. Với sự giúp đỡ của họ, bạn sẽ nhanh chóng và dễ dàng trở thành một bậc thầy thực sự khi làm việc với Adobe Dreamweaver CC.
Đĩa "Giáo dục chính thức Khóa học Adobe Dreamweaver CC ”bao gồm các tệp bài học mà bạn cần để hoàn thành các bài tập trong sách này và các thông tin khác giúp bạn học tốt hơn Chương trình Adobe reamweaver CC và sử dụng nó hiệu quả hơn

CƠ BẢN HTML

Bạn thấy điều đó văn bản mới không được hiển thị mặc dù bạn đã lưu các thay đổi của mình. Điều này là do để xem các trang web trong trình duyệt, trước tiên bạn phải tải xuống và lưu chúng trên máy tính của mình, hoặc bộ nhớ đệm, trên ổ cứng của bạn. Trình duyệt thực sự hiển thị trang web đã được tải ban đầu. Để xem phiên bản mới nhất của trang web với tất cả các thay đổi, bạn cần tải lại hoặc cập nhật nó, điều này rất quan trọng cần nhớ. Mọi người thường bỏ lỡ những thay đổi được thực hiện đối với một trang web vì họ đang xem các trang được lưu trong bộ nhớ cache hơn là các phiên bản mới nhất của chúng. (Nếu trang web của bạn được cập nhật thường xuyên, bạn có thể chèn đoạn mã Mã JavaScriptđiều này sẽ tự động tải lại trang web mỗi khi trình duyệt truy cập nó.)

Làm mới cửa sổ để tải trang đã sửa đổi. Như bạn có thể thấy, trình duyệt hiển thị văn bản mới, nhưng bỏ qua đoạn giữa hai dòng và khoảng trắng thừa. Trên thực tế, bạn có thể thêm hàng trăm đoạn văn giữa các dòng và rất nhiều khoảng cách sau mỗi từ và hiển thị trong trình duyệt sẽ không thay đổi theo bất kỳ cách nào. Điều này là do trình duyệt được lập trình để bỏ qua khoảng trắng thừa và chỉ xem xét các phần tử HTML. Bằng cách chèn thẻ, bạn có thể dễ dàng thay đổi cách hiển thị của văn bản.

LÀM VIỆC VỚI BẢNG CASCADE PHONG CÁCH

Làm việc với bảng điều khiển Trình thiết kế CSS

Trong Bài học 4, bạn đã sử dụng một trong các bố cục CSS do Dreamweaver cung cấp làm điểm bắt đầu để tạo mẫu dự án của mình. Các bố cục này chứa cấu trúc nội tuyến và một tập hợp các quy tắc CSS được xác định trước để xác định thiết kế cơ bản và định dạng các thành phần và nội dung của trang. Trong bài tập bài học này bạn sẽ sửa đổi các quy tắc này và thêm các quy tắc mới để hoàn thành thiết kế cơ bản của mẫu trang web. Nhưng trước khi tiếp tục, bạn cần hiểu cấu trúc và định dạng hiện có của trang web để hoàn thành tốt các bài tập được giao. Lần này, bạn sẽ cần dành một vài phút để nghiên cứu các quy tắc và hiểu chúng đóng vai trò gì trong tài liệu này.

THÊM HÌNH ẢNH VÀ VIDEO VÀO TRANG WEB

Giới thiệu về hoạt ảnh và video trên World Wide Web

World Wide Web có khả năng cung cấp rất nhiều loại hình giải trí cho người dùng bình thường. Bạn tải xuống và đọc một cuốn tiểu thuyết bán chạy nhất, nghe đài phát thanh hoặc ban nhạc yêu thích của mình, xem truyền hình trực tiếp hoặc phim truyện. Trong quá khứ, trước đây Công nghệ flashĐăng nội dung video và hoạt ảnh trên các trang web là một nhiệm vụ khó khăn. Điều này là do HTML được phát triển vào thời điểm World wide web rất khó để sử dụng ngay cả hình ảnh tĩnh... Nội dung video là một giấc mơ xa vời.

Nội dung video và hoạt ảnh cuối cùng đã được trình bày những cách khác sử dụng hỗn hợp các ứng dụng, plugin và codec có khả năng truyền dữ liệu qua Internet đến máy tính và trình duyệt, thường gặp rất nhiều khó khăn và các vấn đề tương thích. Thông thường, một định dạng hoạt động trong một trình duyệt này không tương thích với một trình duyệt khác. Các ứng dụng chạy trên Windows không hoạt động trên máy Mac. Nhiều định dạng yêu cầu trình phát hoặc plugin của riêng chúng.

Trong một thời gian, công nghệ Flash đã mang lại trật tự cho sự hỗn loạn này. Nó cung cấp một nền tảng thống nhất để tạo nội dung hoạt hình và video. Dự án Flash ban đầu được hình thành là chương trình hoạt hình, đã thay đổi vĩnh viễn World Wide Web. Cách đây vài năm, công nghệ này đã tạo ra một cuộc cách mạng trong ngành bằng cách giúp việc thêm nội dung video vào các trang web trở nên dễ dàng hơn. Bằng cách chèn nội dung video vào Flash và lưu tệp ở định dạng SWF hoặc FLV, các nhà thiết kế và phát triển web có thể tận dụng lợi thế của Flash Player gần như phổ biến, với hơn 90% tất cả người dùng đã cài đặt máy tính để bàn... Không còn lo lắng về các định dạng và codec - Ứng dụng flash Người chơi đã chăm sóc tất cả những điều này.

Với sự phát minh và phổ biến của điện thoại thông minh và máy tính bảng trong vài năm qua, Flash đã rơi vào thời kỳ khó khăn. Đối với hầu hết các nhà sản xuất, hỗ trợ Flash trên các thiết bị là quá nhiều nhiệm vụ đầy thử thách và đã phải bị bỏ rơi. Tuy nhiên, công nghệ này vẫn còn tồn tại. Nó vẫn là vô song về chức năng đa phương tiện. Nhưng ngày nay, tương lai của nội dung hoạt hình và video là không thể đoán trước. Các kỹ thuật để tạo phương tiện web đang được phát minh lại. Như bạn có thể đoán, xu hướng này nói về một kỷ nguyên hỗn loạn mới trên World Wide Web. Khoảng một chục codec tuyên bố sẽ trở thành định dạng chính để phân phối và phát lại nội dung video trên World Wide Web.

Điều an ủi duy nhất là HTML5 cung cấp hỗ trợ cho cả nội dung hoạt hình và video. Đã có những tiến bộ đáng kể trong việc thay thế hầu hết các khả năng hoạt ảnh của Flash bằng chức năng HTML5 và CSS3 gốc. Nó không rõ ràng với nội dung video. Vẫn chưa có một tiêu chuẩn duy nhất nào được phát triển, điều đó có nghĩa là bạn sẽ phải tạo nhiều tệp video để hỗ trợ tất cả các trình duyệt phổ biến trên máy tính để bàn và thiết bị di động. các định dạng khác nhau... Trong hướng dẫn này, bạn sẽ học cách đặt các loại khác nhau hoạt ảnh web và nội dung video cho trang web của bạn.

Hãy bắt đầu với những điều tốt đẹp, điều đầu tiên vội vàng là thiết kế mới và bây giờ DW không giống như hầu hết các trình soạn thảo hoàn hảo.

Không giống như phiên bản cũ chỉ có một phiên bản giao diện và nói một cách nhẹ nhàng, nó không quá nóng, trong phiên bản mới, chúng tôi được mời chọn một trong 4 cách phối màu giao diện được thiết lập sẵn. Lựa chọn phối màu được cung cấp khi bạn khởi chạy phiên bản mới lần đầu tiên, trong màn hình "Có gì mới". Sau đó, bảng màu có thể được thay đổi trong cài đặt chương trình

Chỉnh sửa> Tùy chọn> Giao diện

Ngoài ra, có hai "chủ đề mã" để bạn lựa chọn, nếu nói một cách dễ hiểu thì đó là điểm nhấn mã và nền. Và rồi sự lộn xộn hoàn toàn bắt đầu. Thứ nhất, chỉ có hai trong số họ, không giống như DW 2015, và thứ hai, cả hai đều khủng khiếp. Và vấn đề không phải là màu gì được sử dụng, mà là không phải tất cả các phần tử được tô sáng đều bị giảm ít nhất 5 lần. Kết quả là, mã nói riêng của php bây giờ trông giống như một bức tường văn bản.

Nhưng cũng có điểm tích cực, và nếu chúng ta không thể làm gì với số lượng các yếu tố được đánh dấu, thì việc chúc phúc với những bông hoa có thể chiến đấu tốt hơn bây giờ so với trước đây.

Không giống như các phiên bản cũ của ulе, màu sắc được lưu trữ trong color.xml, trong phiên bản mới, chúng được đưa vào các chủ đề. Bạn không thể tạo chủ đề mới, nhưng thay đổi chủ đề cũ rất dễ dàng. Bản thân chủ đề bao gồm hai tệp.

Các chủ đề nằm trong
Tệp chương trình \ Adobe \ Adobe Dreamweaver CC 2017 \ www \ extensions \ default \ DarkTheme \
và
Tệp chương trình \ Adobe \ Adobe Dreamweaver CC 2017 \ www \ extensions \ default \ LightTheme \ nếu thích hợp.

Vì vậy, một trong những điều ngạc nhiên thú vị là các chủ đề từ Brackets phù hợp với DW 2017. Vì vậy việc bơm hơi cho bản thân và lựa chọn những chiếc phù hợp hơn sẽ không khó. Ví dụ từ trang web này

Lưu ý: nếu mẫu không có tệp main.less, thì đây không phải là byad, bạn có thể lấy tệp .css (thường là tên của theme.css) và lưu nó vào dạng less với tên main ( main.less)

Ngoài việc thay đổi giao diện, DW 2017 có những tầm nhìn mới khác. Ví dụ: bây giờ chúng ta có hai phương thức nhập

Một trong số chúng ghi đè văn bản, cái còn lại thêm vào. Phần dưới chịu trách nhiệm về việc gì, viết cũng vô ích vì mỗi lần theo những cách khác nhau.

Ngoài ra, chúng tôi đã sửa các gợi ý trên mã, bây giờ, cuối cùng, các trạm xăng hoạt động khá chính xác trong php. Cũng xuất hiện hai tùy chọn cho thẻ tự động đóng, một tùy chọn tại thời điểm koula bạn nhập xong thẻ mở (sau khi nhập ">"), tùy chọn còn lại, như trước đây, khi bắt đầu nhập thẻ đóng (sau khi nhập "

Chỉnh sửa> Tùy chọn> Gợi ý mã

Nhân tiện, một thay đổi thú vị khác là bản sửa lỗi cho tính năng "Áp dụng định dạng nguồn", một trong những tính năng yêu thích của tôi. Điểm cộng chính là bây giờ nó hoạt động khi chỉnh sửa các tệp js và php. Nhưng ngay cả ở đây mà không có jambs.

Đầu tiên là định dạng. Ví dụ, đối với tôi định dạng này vì chức năng php rất, rất lạ

Class hello (public static function getWolrd () (return true;))

Thứ hai, bản thân chức năng "Áp dụng định dạng gốc" đang kéo sai hướng. Một số loại Antiformatting thu được.

Đây chỉ là một số thay đổi, danh sách đầy đủ các đổi mới, chẳng hạn như Emmet hoặc các con trỏ bổ sung, và nhiều thông tin khác bạn có thể đọc.

Kết quả là, bản cập nhật hóa ra là điểm C. Trên một số diễn đàn và hội đồng, họ đã viết rằng rất nhiều điểm không hoàn hảo và ẩm ướt của phiên bản mới là do quá vội vàng để trưng bày phiên bản mới của các dự án tại một cuộc triển lãm ở San Diego. Nhưng đối với tôi, việc phát hành một phiên bản thô như vậy cho một sản phẩm rẻ tiền và không có nghĩa là không thể chấp nhận được.

Nếu bạn không thể chịu đựng tất cả những khiếm khuyết và lỗi này và muốn quay trở lại phiên bản cũ, thì điều này có thể được thực hiện theo cách sau.

Đó là tất cả những gì tôi muốn viết về bản cập nhật Dreamweaver 2017. Chúc bạn may mắn với mã hóa của mình.

Bạn tạo và chạy các trang web và cần công cụ đắc lựcđể tự động hóa hành động của bạn? Trình chỉnh sửa HTML trực quan Adobe Dreamweaver có thể giúp bạn giải quyết những vấn đề này và đưa kết quả theo tiêu chuẩn ngành.

Sản phẩm của Adobe được tích hợp chặt chẽ với các giải pháp khác của công ty. Các yếu tố được phát triển trong chúng sau đó được kết hợp dễ dàng vào dự án. Đây là một môi trường thuận tiện để viết mã trang, thiết kế bố cục, thử nghiệm các trang web. Các công nghệ phổ biến được hỗ trợ - Java Script, ASP, PHP, ColdFusion, Ajax. Có thể điều chỉnh và kiểm tra các tài nguyên đã tạo cho thiết bị di động.

Các tính năng và khả năng của Adobe Dreamweaver

Chức năng chính của sản phẩm nhằm mục đích Tạo HTML và CSS và làm việc với các tệp trang web.

  • Nhờ vào giao diện trực quan bạn có thể thấy kết quả của việc thực thi mã ngay lập tức trên bố cục trang.
  • Hàm tạo đơn giản hóa các hoạt động thường ngày như tạo bảng. Nó tạo mã tuân theo tiêu chuẩn web cho phép bạn làm việc với CSS.
  • Hệ thống gợi ý sẽ giúp ích cho một lập trình viên web mới vào nghề.
  • Đánh dấu cú pháp được hỗ trợ cho nhiều ngôn ngữ: C #, Java, JavaScript, VB, HTML, XML, PHP, ColdFusion và các ngôn ngữ khác. Việc sử dụng chúng giúp bạn có thể phát triển các trang động.
  • Làm việc với các mẫu bố cục cho phép bạn nhanh chóng tạo các trang web tương tác.
  • Bắt đầu từ phiên bản CS5, dịch vụ BrowserLab đã được triển khai trong sản phẩm để kiểm tra sự hiển thị của trang web trong tất cả các trình duyệt và HTML5 được hỗ trợ.

Chương trình hoạt động theo mặc định với các tệp đánh dấu siêu văn bản HTM, HTML, XHTML. Dự án và các phần tử của chúng được lưu ở các định dạng riêng CSN, DWT, TTY, DWS, EDM. Trình chỉnh sửa cũng hoạt động với các định dạng phổ biến khác đảm bảo hoạt động của các trang web: Asp, Aspx, Css, Java, Jsp, Mht, Php, Rss, Sql, Vbs, Xml, Xsl, Hta, Php và các định dạng khác.

Có nhiều Trình chỉnh sửa HTML... Có lợi cho Adobe Dreamweaver, hỗ trợ cho hầu hết các công nghệ web chính. Webstorm không thể xử lý RSS và biên tập viên trực quan cung cấp một mã không chính xác. Và sẽ dễ dàng hơn cho người mới bắt đầu hiểu sản phẩm Adobe một cách trực quan. Nó thua kém anh ấy về độ dễ dàng của giao diện và NetBeans IDE. Phần mềm nàyít đòi hỏi tài nguyên hơn và làm việc với FTP dễ hiểu hơn trong đó. Một đối thủ khác, Microsoft Expression Web, không thể chạy trên Mac OS.

Tải xuống phiên bản Adobe Dreamweaver nào?

Mặc dù phiên bản đầu tiên của sản phẩm được phát hành cho Mac OS vào năm 1997, hỗ trợ cho Windows đã sớm xuất hiện. Kể từ đó, chương trình đã chạy trên cả hai hệ điều hành. Đối với chủ sở hữu máy tính cũ hơn, chúng tôi khuyên bạn nên cài đặt phiên bản CS6. Đối với công việc của nó, 512 MB sẽ là đủ bộ nhớ truy cập tạm thời và bộ xử lý Pentium IV. Nó có thể hoạt động trên XP và Mac OS 10.6. Các bản phát hành sản phẩm mới nhất có nhiều yêu cầu khắt khe hơn. Họ đã cần 2 GB RAM và hệ điều hành Windows 7/8/10 hoặc phiên bản Mac OS cũ hơn 10.10. Chúng tôi cung cấp Adobe Dreamweaver để tải xuống ở phiên bản di động, giúp bạn có thể khởi chạy sản phẩm ngay lập tức mà không cần cài đặt.

Adobe Dreamweaver CC 2015

Với bản cập nhật này, trình chỉnh sửa có khả năng kiểm tra các trang đã hoàn thành đồng thời trên nhiều thiết bị và với các hệ số dạng khác nhau. Để phát triển các trang web động, chúng tôi đã tích hợp với nền tảng Bootstrap.

  • chỉnh sửa bảng ở chế độ xem trực tiếp;
  • Bảng điều khiển DOM cho xem lướt qua phần tử và thuộc tính điều hướng;
  • cải tiến trong hàm tạo CSS;
  • hỗ trợ cho cửa hàng Adobe Stock.

Adobe Dreamweaver CC 2017

Trong bản phát hành tháng 11 năm 2017, một trình soạn thảo mã mới được đánh dấu. Môi trường làm việc đã được cải thiện hiệu suất và tối ưu hóa giao diện của nó. Giờ đây, sản phẩm đã học cách làm việc với các bộ xử lý CSS chính: Less, SCSS và SASS. Xem trước trình duyệt được thực hiện trong thời gian thực. Giao diện tối ưu hóa mới đã nhận được bốn chủ đề tương phản, một thanh công cụ có thể tùy chỉnh. Quyền truy cập vào Thị trường Typekit hiện đã có sẵn.

Adobe Dreamweaver CC 2018

Trên trang web của chúng tôi, bạn đã có thể tải xuống Adobe Dreamweaver CC 2018 torrent. Nó triển khai khả năng làm việc với màn hình HiDPI trong Môi trường Windows... Ngoài ra, chương trình đã hỗ trợ nhiều màn hình, thay đổi tỷ lệ của tài liệu phù hợp với màn hình đang hoạt động. Có sự hỗ trợ cải thiện cho Git với việc kiểm tra kết nối với kho lưu trữ, lưu thông tin đăng nhập và tìm các tệp mong muốn.

Adobe Dreamweaver CC 2019

Trình chỉnh sửa mới được thiết kế để đơn giản hóa và tăng tốc độ phát triển của các ứng dụng và trang web. Tiện lợi không gian làm việc với tính năng làm nổi bật mã và các phần tử được sử dụng thường xuyên được tích hợp sẵn giúp lập trình viên thực hiện nhiệm vụ dễ dàng hơn. Trên trang web, bạn có thể tải xuống Dreamweaver chính nó phiên bản mới nhất.

Phiên bản mới đã có một số cải tiến:

  • tích hợp với Khung nhúng Chromium - hỗ trợ cho khung CEF, tạo trình xử lý giao thức, trình bao bọc cho các chức năng gốc trong không gian, sự kiện điều hướng, v.v. Tính năng này giải phóng bàn tay của các nhà phát triển trong việc phát triển trang web HTML5 và cho phép họ hiển thị các phần tử flexbox;
  • Tái cấu trúc JavaScript - cải thiện mã của bạn bằng cách cấu trúc lại và đổi tên các chức năng và hệ thống tự động hóa thông minh sẽ ghi nhớ các hành động;
  • làm việc với EcmaScript 6 - sự ra đời của một ngôn ngữ lập trình mới cho phép bạn thêm, phân tích các lớp, phương thức và chức năng của mã nguồn;
  • Hỗ trợ Bootstrap 4 - các dấu hiệu trực quan khi sử dụng framework.

Bạn có thể tải xuống Dreamweaver ở đâu?

Trên trang web của chúng tôi, bạn có thể tải xuống Adobe Dreamweaver torrent miễn phí, không cần đăng ký, gửi SMS và giới hạn tốc độ. Chúng tôi cung cấp tất cả các phiên bản mới nhất của sản phẩm, bao gồm cả các sản phẩm lắp ráp di động làm sẵn. Tất cả các cài đặt đều được kiểm tra vi-rút. Các chương trình hoạt động mà không bị đóng băng và có kèm theo tài liệu cài đặt.

Cần một phiên bản nhỏ hơn và có thể chạy từ bất kỳ phương tiện nào?

Cầm tay Phiên bản Adobe Dreamweaver không yêu cầu cài đặt, bạn có thể sử dụng nó trên mọi thiết bị, khởi chạy dự án trực tiếp từ ổ đĩa flash, ổ cứng ngoài hoặc các phương tiện khác. Giao diện tiếng Nga giúp bạn nhanh chóng làm quen với chương trình.



Phiên bản: 2012
Nền tảng: CÁC CỬA SỔ
Ngôn ngữ giao diện: TIẾNG NGA

Bài 1. Bắt đầu với Adobe Dreamweaver CS4

Mục tiêu : Làm quen với Dreamweaver khi tạo trang web, cũng như không gian làm việc của chương trình.

Nhiệm vụ:

  • Khám phá khu vực làm việc.
  • Tìm hiểu cách tạo một trang mới bằng nội dung CSS.
  • Tìm hiểu cách lưu tài liệu.
  • Tìm hiểu cách thay đổi tiêu đề trang và tiêu đề văn bản.
  • Tìm hiểu cách dán văn bản từ một tài liệu bên ngoài.
  • Tìm hiểu cách thêm hình ảnh vào nền trước và làm hình nền.
  • Tìm hiểu cách tạo, thay đổi và lựa chọn Kiểu CSS.
  • Học cách làm việc với các chế độ hiển thị Mã và Mã và Thiết kế.

Trước khi bắt đầu học,.

Trong quá trình hoàn thành tất cả các công việc trong phòng thí nghiệm, bạn sẽ tạo một trang web chính thức cho công ty du lịch.

Cấu trúc của các trang web được thể hiện trong Hình 1.

Hình 1 - Cấu trúc của trang web cuối cùng

Kết quả của phòng thí nghiệm này, bạn sẽ có trang web sau (Hình 1.1):

Hình 1.1 - Xem trước trang web

Sử dụng màn hình Chào mừng

Màn hình Chào mừng cung cấp quyền truy cập nhanh vào các trang bạn đã làm việc gần đây, giúp bạn dễ dàng tạo các loại trang khác nhau và cung cấp quyền truy cập trực tiếp vào một số chủ đề chính nơi bạn có thể tìm thấy câu trả lời cho câu hỏi của mình. Màn hình chào mừng xuất hiện khi bạn bắt đầu chương trình lần đầu tiên hoặc nếu không có tài liệu nào khác đang mở.

Hãy sử dụng màn hình Chào mừng để khám phá các cách mở tài liệu.

1. Để mở một trang trống mới, hãy nhấp vào tùy chọn Html trong cột Tạo mới(Tạo) (Hình 1.2).

Hình 1.2 - Màn hình chào mừng

2. Một cái mới sẽ mở ra trước mặt bạn. Html tài liệu (Hình 1.3).

Hình 1.3 - Cửa sổ HTML mới

Chọn bố cục CSS

Có 32 tệp trong Adobe Dreamweaver CS4 Bố cục CSS, mỗi thiết kế là khác nhau. Trong tác vụ này, chúng tôi sẽ chọn một tệp và sửa đổi nó.

  1. Hành hình Tệp => Mới(Tệp => Mới) .
  2. Chọn một cột Trống Trang (Trang trống) trong hộp thoại Mới Tài liệu(Tạo tài liệu) .
  3. Xin hãy lựa chọn Html trong cột Trang Loại(Loại trang) .
  4. Xin hãy lựa chọn 2 cột cố định, bên trái thanh bên, tiêu đề và chân trang(2 cột có chiều rộng cố định, lề bên trái, đầu trang và chân trang) trong một cột Bố trí(Bố trí) .
  5. Không thay đổi cài đặt mặc định của các tùy chọn khác và nhấp vào nút. Tạo ra(Tạo ra).
  6. Xin hãy lựa chọn Tệp => Lưu(Tệp => Lưu).
  7. Lưu thành(Lưu dưới dạng) vào thư mục lab1... Nhập "Umbria.html" và nhấp vào nút Cứu.

Chọn chế độ hiển thị tài liệu

Hầu hết các thao tác thiết kế web chúng ta sẽ thực hiện trong cửa sổ Thiết kế nhưng hãy nhớ điều đó bên cửa sổ Tài liệu Có bốn chế độ hiển thị (Hình 1.4):

  • Thiết kế(Thiết kế) - trình bày trang trong bối cảnh giống như trình duyệt;
  • Mã số(Mã) - hiển thị mã nguồn của trang;
  • Mã số và Thiết kế(Mã & Thiết kế) - Chế độ kết hợp và hiển thị Thiết kế và chế độ hiển thị Mã số... Nhấn nút Tách ra(tách) để hiển thị chế độ hiển thị này.
  • Trực tiếp(Live View) - Trình bày trang trong trình duyệt trực tiếp.

Hình 1.4 - Các chế độ hiển thị

Các chế độ hiển thị có liên quan đến nhau. Bất kỳ thay đổi nào được thực hiện ở một trong số chúng có thể được nhìn thấy ngay lập tức ở những thay đổi khác.

Thay đổi tiêu đề trang

Tiêu đề trang được hiển thị trên thanh tiêu đề của trình duyệt. Tiêu đề trang là một trong những yếu tố chính được sử dụng công cụ tìm kiếmđể lập chỉ mục các trang web.

  1. Chọn chỗ dành sẵn cho văn bản "Tài liệu không có tiêu đề" trong Chức vụ(chức vụ) thanh công cụ Tài liệu(Hình 1.5).
  2. Nhập "Umbria Hill Town Tours" ở đó và nhấp vào Đi vào.

Hình 1.5 - Thanh công cụ tài liệu

Thay đổi tiêu đề

Trình giữ chỗ tiêu đề trong Dreamweaver rất dễ thay đổi.

1. Nhấp đúp vào văn bản giữ chỗ Chức vụđể chọn nó. Sau đó nhập "Travel Umbria with us" (Hình 1.6).

Hình 1.6 - Thay đổi trình giữ chỗ tiêu đề

2. Đặt con trỏ của bạn ở đầu văn bản giữ chỗ Chủ yếuNội dung(Nội dung chính) và chọn toàn bộ cụm từ.
3. Với văn bản được đánh dấu, hãy nhập “Bạn đang rất vui. Chúng tôi đang làm việc." (Hình 1.7)

Hình 1.7 - Thay đổi trình giữ chỗ nội dung

4. Chọn Tệp => Lưu(Tệp => Lưu).

Chèn văn bản

Văn bản thuần túy có thể được thay đổi dễ dàng như các tiêu đề.

1. Đặt con trỏ của bạn trước văn bản trình giữ chỗ thuần túy và chọn tất cả các cách để chọn trình giữ chỗ đầu đề thứ hai và tất cả các đoạn văn.
2. Bấm phím Xóa bỏđể xóa những gì bạn đã chọn.
3. Duyệt đến tệp Chữ. txt nằm trong thư mục Bài học / lab1 / Text.txt.

4. Sao chép văn bản vào khay nhớ tạm.
5. Dán văn bản đã sao chép dưới tiêu đề “Bạn đang vui vẻ. Chúng tôi đang làm việc." (Hình 1.8).

Hình 1.8 - Chèn văn bản

Văn bản sẽ tự động được định dạng thành đoạn văn.

6. Theo cách tương tự, nhập "Umbria Hill Town Tours" vào trường Chân trang.
 7. Tạo phần cuối của dòng bằng cách nhấp vào Sự thay đổi+ đi vào, sau đó nhập "Danh bạ của chúng tôi".

Chèn hình ảnh

1. Chọn tất cả nội dung trong thanh bên, bao gồm cả tiêu đề trình giữ chỗ Nội dung thanh bên1 và hai đoạn tiếp theo.
2. Nhấp vào Xóa bỏ.
3. Nhấp vào

và hãy nhấn Xóa bỏ trong công cụ chọn thẻ nằm ở cuối cửa sổ Tài liệu để xóa thẻ

(Hình 1.9).

Hình 1.9 - Bộ chọn thẻ

4. Nếu bảng điều khiển Chèn(Chèn) là ẩn, làm cho nó hiển thị bằng cách chọn Cửa sổ => Chèn(Cửa sổ => Chèn). Hành hình Chèn => Chung => Hình ảnh(Chèn => Chung => Hình ảnh) (Hình 1.10).

Hình 1.10 - Chèn bảng điều khiển

5. Chuyển đến các tệp trong thư mục Bài học / lab1 / và lựa chọn vườn điêu khắc.jpg và nhấp vào OK (Hình 1.11).

Hình 1.11 - Chèn hình ảnh điêu khắc-garden.jpg

6. Đặt con trỏ của bạn ở đầu đoạn văn chính bắt đầu bằng từ “Hãy đến và tận hưởng” và chọn Hình ảnh trên bảng điều khiển Chèn.
7. Chọn một hình ảnh italian-hill-town.jpg và hãy nhấn VÂNG.
8. Nhập "italian-hill-town" làm văn bản bên. Bấm vào VÂNG(Hình 1.12).
9. Nếu bảng Thuộc tính không hiển thị, hãy chọn Window => Thuộc tính.
10. Sau khi chọn hình ảnh bạn vừa chèn, hãy kích hoạt áo quần trong menu bật lên Lớp học bảng điều khiển Tính chất.

Lớp fltrt là viết tắt của float right, tương ứng fltlft là float left.

11. Chọn Tệp => Lưu.

Hình 1.12 - Chèn hình ảnh italian-hill-town.jpg

Lựa chọn và thay đổi phong cách CSS

Các trang web hiện đại sử dụng bảng xếp tầng Kiểu (CSS) để tạo kiểu và bố cục. Một trang web thường được so sánh với một chiếc ghế có ba chân, HTML, CSS và JavaScript là các thành phần cấu trúc của nó. HTML là nội dung, thứ mà bạn nhập vào chế độ hiển thị Thiết kế. CSS là tất cả về hình thức và bố cục với một số yếu tố, hoa và nền. JavaScript thêm một tính năng tương tác. Trong bài tập này, bạn sẽ thay đổi màu nền. trang hiện có, thêm đồ họa vào nền và thiết lập một vài thuộc tính văn bản. Tất cả các hành động này được thực hiện bằng bảng điều khiển CSSPhong cách(Kiểu CSS).

CSS có thể được sử dụng để thay đổi các thuộc tính kiểu của bất kỳ Thẻ HTML, ví dụ thẻ .

1. Chọn Cửa sổ => Kiểu CSS. Bảng điều khiển sẽ mở ra Kiểu CSS.
2. Nếu cần, hãy nhấp vào nút Tất cả trên bảng điều khiển Kiểu CSS, để thay đổi chế độ hiện hành Hiện tại.

Tất cả chế độ hiển thị tất cả các kiểu CSS được liên kết với trang hiện tại. Bạn phải mở một tài liệu trong trình xem tài liệu để xem bất kỳ kiểu nào trong bảng điều khiển Kiểu CSS.

3. Mở mục nhập