Using golive to realize one of Css+div

Source: Internet
Author: User
Tags window dreamweaver
Css

In the Visual CSS Editor, GoLive has been formed in version 6, and its design has even become an object that many professional CSS editors mimic, such as the well-known TopStyle. Recently, with the release of the Chinese version of the golive, triggered the industry web page production software controversy. Faced with this new face that appears almost overnight in the country, many people are beginning to pay attention.
I have published comments about GoLive will replace Dreamweaver in Web page production, which is expected to transform into a database development component. This is because Dreamweaver is very good at database, but has lagged behind in the visual editing of Web pages (it should be said not to lead). Only by virtue of the cultural advantages of the occupation of the domestic market.

In the css+div way gradually become the mainstream web structure today, a functional perfect use of simple CSS editor is very necessary, and should be integrated into the Web page software, in this regard, golive leading peer software for at least two years. Only before because developers do not pay attention to the Chinese market has been unknown. Today we'll take a rough look at how to use the CSS Editor in GoLive.

1:CSS File Management

GoLive default is based on the site software, the creation of a new site will automatically generate a CSS directory and a basic.css file. The following figure. If more than one CSS file exists, the bold file is the default CSS file. Right-click the CSS file to default in the list.
Set up a video tutorial for the site:http://www.99ut.com/tutorial/golive/video/glv002.html (the site with the video source file can be internally pointed)

The new Web page file will also use this external CSS file as a link by default, as you can see in the source code view. The following figure.

For pages that have been edited, you can choose to change the external CSS file link by pressing the CSS editing icon at the red arrow at the right end of the edit window. The following figure.

You can also click the header area of the red arrow at the edit window, then select the external CSS indicator icon at the green arrow (remove the icon to detach from the external CSS file), and then drag the location line down the blue arrow in the Inspector 〖ctrl_1〗 to navigate to the CSS file name of the site window.

Even if the paging file is not open, you can select the file in the Site window (optional), and then change the external CSS file link through the CSS palette, which is the process of increasing the NEW1.CSS external style sheet for photo.html and story.html. You can also click on the red arrow button to increase.
To break out of an external CSS style file, select the bin icon on the right side of the red arrow in the CSS palette.

2: Apply styles to the page

The main use of CSS palette 〖ctrl_shift_9〗 to complete the page Content style designation. You can also use the shortcut key 〖ctrl_b〗 to open a floating CSS palette, and the floating palette will disappear after each operation.
As shown in the following illustration, the specified type is divided into four types: inline style (mouse selection), block style (the text block where the cursor is positioned), p (the paragraph where the cursor is positioned), body (full page). If the cursor is over a link, a (link style) will appear, and table (table) and TD (cells in the table) will also appear after you select tables or cells.

Although the edit window will display the effect in real time after the completion of the assignment, GoLive still provides the specified preview feature, and the mouse hovers over the style name with a floating preview window (in the red box below), and the preview includes the application effect and style source code. The effects in the preview window are different depending on the specified type. As shown in the following illustration, when the golive CS2 text is selected, the mouse hovers over the inline style, and the preview window displays the selected text content. If the mouse hovers over the block style, the preview window text will appear as GoLive CS2 Chinese.

3:CSS Editor

You can open the Style editor by double-clicking the CSS file in the Site window. Click the CSS Edit button in the upper right corner (shown in the 3rd picture) on the open page to open the editor. The difference is that the former is editing an external style file, and the latter is editing its own HTML style sheet.

Now let's take a look at the GoLive style editor, which is divided into visual editing and two large views that provide the source code (Red Arrows) used by the madman. and provides a style finder (green arrows), this seemingly simple search is actually very comprehensive, click on the magnifying glass to choose the search options.

CSS content can be roughly divided into element styles and custom styles, and element styles are essentially global in scope, such as TD will apply to all cells in the page. A custom style, that is, a class style, can be applied selectively to part of a page. On the left side of the edit window is a list of styles with element styles and class styles, click the orange arrow to create a new element, and click the purple arrow to create a new class.

Click the two buttons at the blue arrow to split the edit window into source code or text preview. In addition, a text preview appears in the Inspector Palette 〖ctrl_1〗 while editing. For additional settings on the style editor, refer to the video tutorial:http://www.99ut.com/tutorial/golive/video/glv023.html

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.