Website Construction: Dexterity with DREAMWEAVER MX

Website Construction: Dexterity with DREAMWEAVER MX
You are having trouble with Dreamweaver MX 1 Come here! 01. Automatically down the line Dreamweaver MX có một vài chế độ mặc định không mấy hấp dẫn khi làm cho các đoạn mã của bạn trở nên lộn xộn hơn. Một trong những "kẻ gây rối" là Tự động xuống dòng (Automatic Wrapping) nằm trong menu Edit > Preferences > Code Format. When this mode is selected, the code snippets will automatically split the line, which is equivalent to the appearance of line spacing in HTML text. Although this does not affect the results displayed in the web browser, this makes it difficult to track and edit the code. So, it's a good idea to turn it off automatically. 02. Use design display mode and code Dreamweaver users often switch between two display modes, Design View and Code View. If your screen is large enough, choose Design and Code view. This option makes it easy to immediately see the changes made in the Code display when you edit in the Design mode (and also if you are the one who wants to quickly learn more about writing tricks. code). Set up a Properties window It must be said that Dreamweaver MX has great improvements in enabling users to design web pages with existing technologies. However, in the default mode, this application only helps you generate the standard code. The Properties toolbar is a demonstration, which provides you with the properties of an input field. Click 'A' in the right hand corner of the Format field to change the entire tool window, then you can use the CSS format. 04. Add CSS classes Unlike many other applications, Dreamweaver allows you to do the same job with many different methods. You can add CSS styles and CSS classes to the page elements. The formats can be "dragged and dropped" from CSS Style windows. You can also click on a component of the page in Design view and select the appropriate format from the CSS Style window or from the menu. Window Styles in the Properties window or by right-clicking on the appropriate component from the path under Design. 05. Take advantage of common code snippets If you have to write code for many web pages, you will realize the importance of using repeated code. The Snippets window in Dreamweaver MX can help you and allows you to keep the same code snippets, including CSS, XHTML and JavaScript, then add pages by dragging and dropping. In addition, this utility can also be easily organized into useful folders. 06. Exploit code snippets available Dreamweaver MX contains many useful JavaScript snippets as presets. However, in the default mode, you will not be able to use them when opening the Behavious number by Dreamweaver MX 'lock' these applications. In the menu, go to Show Events For, select Netscape 6.0 or IE 6.0. However, be sure to check the results on both browsers. 07. Create a template file in Dreamweaver In this section you will learn how to create basic template files in Dreamweaver MX Bước 1. Tạo một trang web như bạn vẫn thường làm. Khi kết thúc công việc, chọn menu File > Save as Template and name the template file of your choice (do not use spaces). Remember that you can change everything later and Dreamweaver MX can automatically update every web page using this template. Bước 2. Đinh nghĩa các vùng có thể chỉnh sửa. Chọn các vùng của trang và kích vào menu Insert > Template Objects > Editable Regions. Gán tên cho vùng chọn (không sử dụng dấu cách). Lưu trang web của bạn và chọn menu File > New > Templates to create a web page based on that template. Step 3. Top Content. To add content to a site header, such as a description of the page, type the text after the paragraph <!- InstanceBeginEditable name="head" -> (this is automatically added by Dreamweaver) at the top of the page. 08. Use nested template files Web-based templates are very useful, but sometimes they become cluttered, especially when your site is complex or has many special parts. Dreamweaver MX fixes this problem by supporting you to use nested templates. Generic template files can specify unified characteristics of an entire website, such as a logo and texture, while nested template files can be formatted for individual sections, such as the title. 09. Add a title Mặc định, các trang web được tạo ra bởi Dreamweaver không có tiêu đề. Nếu không để ý thay đổi, trang web của bạn sẽ hiển thị trên trình duyệt với tiêu đề "Untitled Document" và làm cho nó trở nên thiếu chuyên nghiệp và nực cười. Để thêm tiêu đề trang, vào menu View > Toolbars > Document. Please note that sites created from template files will display titles that may be different from "Untitled Document." Take advantage of @import When using Dreamweaver template files and outputting formatting samples with the @import command, you will notice that in Design mode, the page will not display in CSS. In a sense, this is a utility - you'll see the site in the way that older browsers display without having to spend hours opening Netscape 4 to check the results. However, if you want to check the Design view, copy the CSS file to the Template folder. 11. Use the site window The Site Panel of Dreamweaver MX makes it easy to access website design controls. Assuming you want to change the page title, Dreamweaver MX automatically updates to all other pages of your site. Similarly, directory and connection properties will also be updated. Please note that open files will not be updated until you save the file. Also, in the Macintosh version of Dreamweaver MX, this window is a standalone window. 12. Check the wrong links Trong nhiều trường hợp, các đường kết nối trong tệp HTML của bạn không hoạt động. Bạn có thể đã gõ sai địa chỉ kết nối do đó Dreamweaver đưa ra một chức năng cài sẵn để khắc phục là công cụ Kiểm tra kết nối (Link Checker). Tới menu File > Check Links (hoặc Site > Check Links Sidewide for Mac) and the program will give you a detailed report of wrong links or single connection files (ie, files that are not connected to any other files). 13. Use external tools You can install Dreamweaver MX but that does not mean it is the only software in your computer. In fact, many people start their design work with other software or write commands from the word processing software. Upon completion, they tested and fixed the bug and then included Dreamweaver, an excellent design tool, to complement the content. It is possible that other people only use Dreamweaver. It is their right to choose the method that best suits you. 14. Enhanced code display mode Try to make the most of the code view. To do this, select View Options from the Document toolbar and select Word Wrap, Line Numbers, Highlight Invalid HTML, Syntax Coloring, and Auto Indent. Then you will feel much easier. 15. Rearrange windows If you are not satisfied with Dreamweaver MX's default tool window, changing the display mode is pretty straightforward. Go to the window menu in the top right corner of the tool window you want to change, point to Group [window name] and select another group window. You can also use this menu to rename, magnify, or close the toolbars window. Finally, you try using shortcuts to switch between windows tools. Then, your work will go smoothly and much simpler.