Home >Development Tools >dreamweaver >Detailed steps for setting up a website with Dreamweaver
The content of this article is about the detailed steps of setting up a website with Dreamweaver. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
1. Define the site
1. Create it in any root directory A folder (we assume it is drive E here), for example, named MyWeb.
***Note: All files used in the website must have English names.
2. Open Dreamweaver, select "Site - New Site" to open the dialog box. Enter the name of the website in Site Name (Chinese is available), and select the folder you just created (E:web) in the local root folder. Then confirm.
***Note: When you open Dreamweaver again, you will automatically find the site you just created. If there are multiple sites, you can select them in the menu "Site - Open Site".
2. Create the page
1. In the blank space under the local folder E:\MyWeb, right-click and select "New File", and it is created. A page, the default file name is untitled.htm. htm means that this web page file is a static HTML file. Rename it index.htm.
***The name of the first page of the website is usually index.htm or index.html. You can choose the names of other pages yourself.
2. Double-click index.htm to enter the editing state of the page. Enter the name of the web page in the title box, right-click and select Page Properties to open the "Page Properties" window. Here you can set the title, background color or back image of the website, and the color of the hyperlink (usually the default is enough), and keep everything else as default.
3. At this time, the cursor is in the upper left corner and you can enter a sentence, such as "Welcome to my homepage". Select the text, use the menu "Window/Properties" to open the properties panel, select the text size as 6, then center the text, and then use a few carriage returns in front of the text to position it in the middle of the page.
4. To select a font, select the last item in Font: Edit Font List. Then select the number in the dialog box, then select a font that needs to be added to the font list in the "Available Fonts" column, and click the button in the middle to add it.
***The most commonly used Chinese characters on web pages are Song fonts. Do not add special fonts to the list for use, because others will not be able to see them if they are not installed on their computers. If you need to use it, make it into a picture before using it.
***The way to enter spaces on a web page is to adjust the input method to full-width.
***The way to wrap lines on a web page is: shift Enter. Just press Enter to change paragraphs.
3. Add pictures to the page
1. In the blank space under the local folder E:\MyWeb, right-click and select "New Folder" to create Create a folder and use it to store pictures. You can rename it tu, pic, or images.
2. Use the menu "Window/Object" to open the object panel, click "Insert Image", and select the picture to be inserted in the dialog box. If a dialog box appears: "Would you like to copy this file to the root folder?", you must select "Yes" and then save it to the folder you just created.
3. Select the picture, open the properties panel, where you can name the picture, reset the height and width of the picture, and drag the dots on the corners of the picture to change the size. Hold down the shift key and drag the corner points to stretch the image while maintaining the aspect ratio. To restore the original size, click the "Resize" button in the lower right corner.
4. "Link" can directly enter the address here. "Replacement" is the description of the picture, that is, the text displayed when the mouse points to the picture; "Border" is the width of the picture border, and "Alignment" is the alignment method.
4. Add hyperlink
1. Add a link to the text.
For example, enter "My Article" on the page, then select it, open the properties panel, and in the "Link" box, select the page it wants to link to. In the next "target" box, we usually use self to open a new window instead of the currently open window; or select blank to open a new window.
2. Add a link to the picture
Same as the link to the text above, insert the picture, and then select it in the link box in the properties panel.
****Pictures can create multiple different links. The method is as follows:
There are some graphics under the "Map" item in the property panel. For example, click on the square, the cursor changes to a cross, and draw a blue rectangular hot zone on the picture. At this time, you can do it on the property panel. This hotspot sets the link address and will be displayed when the mouse points to it. Similarly, by setting up a hot spot using a circle, you can set other links for the image.
3. Add E-mail link
Select the text or picture that you want to add an E-mail link to, open the properties panel, and enter the email address in the "Link" box. The format is as follows: mailto: email address. Note that there are no spaces in between.
4. If the link is to a file that cannot be opened by the browser, such as exe, Zip, etc., then when the viewer clicks on the link, the file download or online playback function will be realized.
5. Use of tables
1. Click Insert/Table to open the table panel for settings. The number of rows, columns, width, borders, etc., "cell filling" is the distance between the inside of the cell and the content; "cell spacing" is the distance between cells, and the unit is pixels.
2. After inserting the table, click on the border of the table to select the entire table. Then you can make various settings in the properties panel below.
3. Move the cursor to one of the cells, and the property panel you see now is the property panel of the cell. You can also perform various operations on cells. Such as background color, background image, border, merge, split, etc.
6. Other operations on tables
1 Principle of making thin-line tables:
1. Select the entire table and set its background to black (this color is table line color).
2. Select all cells and set their background to white.
2 Automatically format the table
1. First make a table and then select it.
2. Select Command/Format Table in the menu. That is, you can choose some preset table styles.
三一pixel dividing bar
1. Insert a table with 1 row and 1 column, a width of 200 pixels, and a border and margin of 0.
2. Select the table, set the table height to 1 pixel, and set a background color (that is, the desired line color).
3. Switch to the code and design window and delete the code
7. Use tables to build a complete page
The top of a web page (generally including icons, advertisements, navigation menus)
1. Create a 1 row and 2 columns , a table with a width of 760 pixels and a border and margin of 0.
2. Select the table, set the arrangement to center alignment, and the background color to #3366CC.
3. Place the cursor in the left cell, set its horizontal arrangement to left alignment, and its vertical arrangement to top alignment, and then insert an image. Generally, the website icon, that is, the logo is inserted here.
4. Place the cursor in the cell on the right, set its width to 500, align it horizontally to the center, and arrange it vertically to the middle, and then insert an image, usually a webpage advertisement, that is, a banner.
5. Place the cursor after the table you just completed, insert /table, and create a table with 1 row and 1 column, a width of 760 pixels, and a border and margin of 0.
6. Select the table you just created, set the arrangement to center alignment, and the background color to #005173.
7. Insert multiple images in the table as navigation bar menus.
The middle part of the second web page (column list on the left, website news in the middle, column list on the right)
1. After the navigation bar table, insert /table and create a 1 row and 3 columns with a width of 760 pixels and a border and a table with margins both 0. And set the arrangement mode to center alignment and the background color to #FFFFFFFF.
2. Place the cursor in the left cell, set its width to 18%, align it horizontally to the center, and align it vertically to the top, then insert an image and a navigation bar.
3. Place the cursor after the picture you just inserted, click Insert/Table, and insert a table with 12 rows and 1 column and a width of 90%. Set its cell spacing to 1 and its background color to #CCCCCC.
4. Place the cursor in the first cell of the table, set its height to 20, and its background color to #FFFFFF. Insert/Image, inserts a small dot in front of the navigation text. Set the other 11 cells similarly, so that the column classification list on the left is completed.
5. Place the cursor in the middle cell of the main table, set its width to 66%, align it horizontally to the center, and align it vertically to the top, then insert /image and insert a navigation bar.
6. Place the cursor after the image, insert/table, and insert a table with 4 rows and 1 column and a width of 95%. Set its cell spacing to 1 and its background color to #CCCCCC.
7. Place the cursor in the first cell of the table, drag the mouse to select all 4 cells, set the height to 60, and the background color to #FFFFFF.
8. Place the cursor in the cell on the right side of the main table, set its width to 16%, align it horizontally to the center, align it vertically to the top, use Insert/Image, and insert a navigation bar.
9. Place the cursor after the image, click Insert/Table, and insert a table with 7 rows and 1 column and a width of 90%. Set its spacing to 1 and its background color to #CCCCCC.
10. Hold down the Ctrl key, use the mouse to click on cells 1, 3, 5, and 7 of the table you just inserted, and then set their height to 55 and their background color to #FFFFFF.
11. Select cells 2, 4, and 6, set their height to 6, and their background color to #FFFFFF.
12. Switch to the source code window and delete the space symbols " " in cells 2, 4, and 6.
The bottom of the third web page (generally including copyright information and other related content)
1. Place the cursor after the main table, insert /table, and create a 2 rows and 2 columns, 760 pixels wide, with both borders and margins. A table of 0.
2. Select the table, set the arrangement to center alignment, and the background color to #3366CC.
3. Place the cursor in the left cell of row 1 of the table, set its width to 50%, horizontal arrangement as default, vertical arrangement as baseline, background color as #FFFFFF, and then enter copyright information. The content color can be whatever you want. .
4. Place the cursor in the right cell of row 1 of the table, insert /image, insert a rounded image, enter the word Email after it, and set its size and color to 1 and #FFFFFF.
5. Insert/Form Object/Text Field, insert a text field, the width can be arbitrary.
6. Insert/Image, insert a GO image.
7. Set page properties. Click the menu Edit/Page Properties, enter a title in the Title column, select the background image, and set the top border to 0.
*** Putting the entire web page into different parts and combining them into different tables can also speed up the time it takes for the browser to read the page. ; Because the browser displays the content after reading the entire table, it is best not to frame the entire table.
8. Use the layout table to build a complete page
1. Click Insert/Layout, and the layout view button inside will switch to the layout view state (default is standard view). You can also use View/Table View/Layout View in the menu to enter.
2. First click the Draw Layout Table button, and then create a layout table on the page like drawing.
3. Just like the previous example, first draw the large table at the top, then the middle, and then the bottom of the web page.
4. Click the Draw Layout Cell button again, and then draw the layout cell in the already drawn layout table.
5. Return to the standard view, insert small nested tables into the divided tables, refine the page, and complete the design of the entire page.
****Be careful to put the entire page in a large layout table, because the browsing speed of such a web page will be very slow. Several layout tables should be divided according to the layout and content of the page, and then layout cells should be inserted into them.
9. Use of layers
1. Click Insert/Layer. You can also click on the icon and drag the mouse to create a layer.
3. Select the created layer and look at the properties panel. Just use the default "Layer Number" and "Label". The "layer number" is needed for programming, but we generally don't use it now. "Top" is the distance from the top border of the page; "Left" is the distance from the left border. The "z-axis" is the order of the layers, with larger numbers stacked on top of smaller numbers.
****If no color is set, the layer is transparent.
4. Click the small box in the upper left corner of the middle layer to drag the layer at will, and the size can also be adjusted.
5. In the "overflow" column, when the text exceeds the size of the layer, visible (the excess part is still displayed), hidden (the excess part is hidden), scroll (the scroll bar is displayed regardless of whether it is exceeded), auto (scroll bar appears only when exceeded).
6. Click the menu Window/Others/Layer, and the layer management window will appear. There you can modify the layer's name and Z-axis value, or click the eye icon to make the layer visible or invisible. There is also an option to prevent overlapping.
7. Alignment of layers. Hold down the shift key and select several layers at the same time. Then use Modify/Align, using the options here.
8. Nested layer. ⑴First insert a layer in the document. ⑵ Place the cursor within the layer, and then continue to insert a layer to get a nested layer. ⑶The inside is called the child layer, and the outside is the parent layer. Their Z-axis order is the same. When you drag the parent layer, the child layers will also move relative to each other. When you move a child layer, the parent layer does not move with it.
10. Understand the timeline
1. Click Insert/Layer in the menu to insert a layer.
2. Insert a picture into the layer, such as a picture of an airplane. (The picture here can also be a small animated .gif image)
3. Click Window/Others/Timeline in the menu to open the Timeline window.
4. Select the layer created on the page, press and hold the small square icon in the upper left corner of the layer with the mouse, and drag the layer to the first frame of the timeline. At this time, a timeline with a length of 15 frames is automatically created.
5. Select the first frame on the timeline, drag the layer in the page to the upper left corner of the page, which is the position when the animation starts.
6. Select frame 15 on the timeline and drag the frame to any length, such as 30 frames.
7. Select the 30th frame and drag the layer to the lower right of the page. At this time, the window displays the movement trajectory of the layer from the 1st frame to the 30th frame. (The motion is a straight line at this time)
8. You can click on the 15th frame, right-click and select "Add Keyframe". With the 15th frame selected, drag the layer to the middle and lower part of the page.
9. Check the "Autoplay" item.
11. Making a rolling bulletin board
1. Insert a layer on the page, and then set a background for the layer as the frame of the bulletin board.
2. Then insert a nested layer into the created layer and move the nested layer below the parent layer.
3. Enter text in the nested layer and center it.
4. Open the Timeline panel and add the sublayer as an object to the panel.
5. Create an upward movement path for the child layer and move it above the parent layer.
6. Drag the last keyframe to increase the animation time, and then check "Autoplay" and "Loop".
7. Select the parent layer and set the "overflow" property to "hidden" in its properties panel.
12. Use flash animation in the page
1. Click the Flash button in the insert to insert an animation into the page. You can also select the menu Insert/Media/Flash to complete this step.
2. Select the inserted animation and look at the properties panel. Here you can set its width and height, or change the size by dragging.
3. You can click "Play" here to preview the animation.
13. Make the inserted flash animation transparent
1. When there is already a background on the web page, or you want to insert a flash animation on a picture , and the flash animation itself also has a background color, so it will affect the appearance. At this time, we need to make it a transparent animation.
2. For example, insert an image on the page.
3. Insert a layer on the image and insert the required flash animation in the layer.
4. Select the flash animation and click the "Parameters" button in the properties panel.
5. Enter "wmode" in the left box of "Parameters". Enter "transparent" in the "Value" box on the right.
14. Play sound on the page
1. After completing the entire page, if you want to add background music to the page, please note that the background music is usually *. midi files, such sound files are very small and easy to download quickly. Other formats are not suitable for background music.
2. In addition to all tables on the page, (note that only the item
15. Pop-up window
1. First make a page (such as a.htm) to be displayed in a small window. Because of this The pop-up window cannot be too large, so the content should be less.
2. Open a created page, move the cursor outside all my tables on the page, click the " " button on the behavior window, and select " " from the pop-up menu Open the browser window" item.
3. Enter the corresponding settings in the dialog box. The URL to be displayed is a.htm. The width and height of the window are set by yourself, in pixels. The parameters in the properties need to be Tick.
4. After setting, click "OK". At this time, the behavior of opening the browsing window will be displayed in the behavior window. The trigger condition is Onload. If you don't want this, just set it yourself.
5. This behavior can also be set on pictures and text links.
6. You can use this method to express welcome to the visitor when opening, website announcement, farewell when leaving, etc.
16. Control status bar information
1. Open the page and select a picture.
2. Click the " " button on the behavior window and select Set Text/Set Status text.
3. In the "Message" column of the dialog box, enter the words that need to be displayed, such as an introduction to this picture.
4. You can set the trigger condition of the behavior to OnMouseOver (move the mouse over object), so that when the mouse passes over this picture, relevant information will appear in the status bar.
5. If you need this information to disappear after the mouse is moved away, then use this behavior again, in the "Message" Write nothing in the column, and then change the trigger condition to OnMouseOut (mouse moves away).
6. You can also set this behavior on a piece of text. Or you can set it on the entire page.
17. Pop-up information
1. Open a created page and click the
is displayed in the lower left corner, which is a paragraph.
5. Then do the same and enter statements such as copyright in the message. Just set the trigger condition to OnBeforeCopy (triggered when the right button is pressed), or OnCopy (triggered when the right button is pressed to copy).
18. Dynamic Picture Button
1. Prepare two pictures of the same size. The common method is to use one as a grayscale photo and one as a color photo. photo. Or one with concave buttons and one with raised buttons.
2. Example: Insert a table with 3 rows and 1 column, and set the width to 180 pixels.
3. Place the cursor on the first line and insert a grayscale picture.
4. Enter the address to be linked in the "Link" column in the properties panel, and add a name to the image, such as tu1.
5. Click the " " button on the behavior window and select from the pop-up menu "Swap images".
6. At this time, the image to be exchanged is displayed in the "Image" column, and then select the exchanged image in the "Temple original file is" column.
7. There are two parameters below, "Preload image" and "Restore image when mouse slides away", both of which must be selected.
8. Create two other dynamic buttons in the same way.
19. Use frames to lay out pages
A framework consists of two main parts - a frameset and a single frame.
1. Click on the inserted frame to display the 13 defined frame styles. Let’s take the upper-middle-lower structure as an example.
2. Click the icon of the "Top-Middle-Bottom" frame structure. At this time, two frames, upper and lower, are inserted on the page, dividing the entire page into three parts. We enter "upper" on top, "middle" in the middle, and "lower" below.
3. Save it first. Click File/Save All in the menu. At this time, first save the frameset file, and you can modify the name yourself, such as kuangjia.htm. The other pages in the frameset will then be saved separately. When saving the corresponding page, this part will be framed with a dotted line, so that the above part can be saved as shang.htm. The lower part is saved as xia.htm. The middle part is saved as zhong.htm.
4. So far, we have saved four pages, namely the frameset and the upper, middle and lower pages that make up the frameset. Therefore, in fact, this frame is composed of four pages, so using the frame will slow down the user's browsing speed.
5. Click Window/Others/Frame to open the frame panel. Click on a frame here to select it. When a frame is selected, a dotted line appears on the corresponding frame in the editing window.
6. For example: select the topframe above, and the properties of the above frame are displayed on the property panel. Also select the middle frame and the lower frame, and you can also set their properties separately.
7. In the editing window, place the mouse on the border between the two frames. The cursor will change into an up and down arrow shape. Click on the border at this time to select the entire frame set.
8. At this time, the properties of the entire frame group appear on the property panel. Here you can set whether the frame set has borders, width and color, etc. But the most important thing is that you can set the size of each frame in the frame set here.
9. Select the above frame on the right icon of the properties panel, set its behavior to 80 pixels, and its border to 0.
10. Select the frame below, set the line height to 30 pixels and the border to 0.
11. Select the middle frame, set the row height to 1, and the unit to relative. (Relative means: the proportion of the current row relative to other rows. Setting it to 1 means occupying all the remaining space of the browsing window except the top and bottom.
12. Example: Place the cursor on the top frame topFrame , right-click and select Page Properties, set the background color to #FF6600. Then insert/table, insert a table with 1 row and 2 columns, and a border margin of 0. Set the width of the first cell to 116 pixels, and then insert a Picture. Set the horizontal alignment of the second cell to the center and the vertical alignment to the bottom, and then enter the words "Leo", "Capricorn", and "Gemini" in sequence.
13. Place the cursor in the middle In the frame mainFrame, right-click and select Page Properties, set the background color to #FFFFCC. Then insert a large image.
14. Place the cursor in the lower frame bottomFrame, right-click and select Page Properties, and set a background image.
15 , and make three additional pages as the pages to be linked to "Leo", "Capricorn", and "Gemini".
16. Select "Leo", set the page to be linked to in the properties, and then Select "mainframe" in "Target", that is, the content will be displayed in the middle frame.
17. Also set the links for "Capricorn" and "Gemini".
Twenty , Jump menu
1. Click Insert/Form Object/Jump Menu in the main menu, or you can use the jump menu icon in Insert/Form to bring up the jump menu settings. Window.
2. First, enter the words "Please select the relevant website" in the "Text" column. Then click the " " button on the window. At this time, there is an additional option in the menu. This option has no link and is only used as a link. The description text of the jump menu.
3. Enter the desired website in the text column, such as "Sina", and then enter the website link address in the "When selecting, go to URL" column http:// www.sina.com.cn, at this time, there is another option in the menu item column, this option corresponds to the link address of a network.
4. Use the same method to add other options to the menu and the corresponding links. You can also use the "up" and "down" buttons to adjust their order.
5. In the settings window, do not select the "Insert Go Button After Menu" item. Select "Change URL and then select First item" item, so that after using the jump menu to go to a certain page, if you return to the jump menu page, the jump menu in the page will still display the first item by default.
6 , click "OK" after setting up.
****Because the jump menu is a form, the form (red dotted area) is actually inserted first, and then the drop-down menu is inserted into the form.
7. If you want to modify the options, you can select the drop-down menu on the page. At this time, click "List Value" in the properties panel to modify various contents.
8. When the jump menu is selected, the behavior also appears in the behavior window. Double-click the behavior to enter the settings window and reset it.
9. If the first item in the "Menu Item" is a link instead of a prompt as mentioned above, then you need to select "Insert Go Button after Menu" in "Options". Add a "Go" button.
21. Using plug-ins (Dreamweaver function extension)
1. First download the required plug-ins. The example here is Animate Browser Window. This is a plug-in that dynamically changes the size of the window. Open the Dreamweaver Extension Manager and install the downloaded plug-in.
2. Start Dreamweaver. On the created page, right-click the lower left corner
22. Rolling subtitles
1. Place the cursor insertion point where you want to insert rolling subtitles.
2. Click the "Tag Selector" in the insertion panel.
3. Select the marquee tag and click the "Insert" button. Then close the Tag Selector.
4. Switch to code view. Place the cursor insertion point between the two marquee tags.
5. Select "Window"/"Tag Inspector". Various uses of tags can be set in the Tag Inspector.
6. Click the drop-down arrow on the right side of the behavior setting item and select the movement method for scrolling subtitle content. The meanings of the three options are: Alternate: the content rolls in opposite directions. Scroll: Content scrolls in the same direction. Slide: The content stops scrolling when it touches the subtitle border.
7. The direction attribute sets the scrolling direction of the subtitle content. The four options mean: down: downward movement. Left: Move left. Right: Move to the right. Up: upward movement.
8. The scrollamount attribute sets the speed of subtitle scrolling. Generally set to 1.
9. The scrolldelay attribute sets the pause time when the subtitle content is scrolling, in milliseconds. If you want scrolling to look smooth, the value should be as small as possible. In the example, it is set to 1 millisecond.
10. The width attribute sets the width of the rolling subtitles. This is arbitrary, for example set to 300.
11. The onMouseOver event sets the action when the mouse moves to the scrolling subtitles. It is often set to stop scrolling. The onMouseOut event sets the action when the mouse leaves the scrolling subtitles, and is often set to start scrolling. These two items cannot be selected and can only be entered manually. Enter "this.stop();" after onMouseOver. Enter "this.start();" after onMouseOut.
12. The style attribute sets the style of the subtitle content. In the example, to set the subtitle text size, you also need to manually enter "font:12px;".
13. The loop attribute sets the number of times the subtitle content is scrolled. The default value is unlimited. "-1" is also infinite.
14. All codes:
23. Create CSS style sheet
1. Enter some text on the web page.
2. Open the "CSS Style" panel, or you can use "Window/CSS Style" to open it.
3. There are four buttons at the bottom of the panel, namely Add Style, New Style, Edit Style, and Delete Style.
4. Click "New Style" to open the dialog box. Enter a name and note that there is a period before the name. For example, name it .zi (Chinese names are not acceptable). Type: Create a custom style, defined in: For this document only.
5. At this time, open another dialog box, select "Type" in the category on the left, and then set the font to Song Dynasty on the right, the size to 14 pixels, and the color to any color. Then OK.
6. Select the text on the page, and then click Style.zi in the window. At this time, the CSS style is applied to this text.
7. If you want to modify the CSS style just defined, you can click on it and then click the Edit Style button below.
24. Create a dynamic link style sheet
1. Click the "New CSS Style" dialog box, select "Only for this document" in the "Defined in" column, and select "Use CSS Selector" in the "Type" column.
2. When the style sheet type selects "Use CSS Selector", the name of the drop-down menu changes to "Selector", indicating that the input content is a CSS selector. Click the drop-down button and you can see the dynamic link 4 a state.
a:link——The normal state of the hyperlink; a:visited——The visited hyperlink status.
a:hover——The state when the cursor moves to the hyperlink; a:active——The state when the hyperlink is selected.
3. Next, set these states separately. First, select a:link from the drop-down menu. Click the "OK" button to pop up the style sheet setting window. Set the style to have no underline and the color to #FF6600 ( orange color).
4. Use the same method to set a:visited, set it to no underline, and set the color to #FFFF00 (yellow).
5. Next, set a:hover, set it to be underlined, and set the color to #FF6600 (orange).
6. There is no need to set a:active, it will automatically depend on a:hover.
7. Enter a sentence on the web page and set its link to "#" in the properties panel. That’s it.
****Note: It must be set in the order of a:link, a:visited, a:hover, a:active, otherwise the expected effect will not occur.
If we need two or more link effects on a page, we can use the following methods:
1. Click the New Style button, select "Use CSS Selector" for the style type, and click "Select" In the "Device" column, directly enter a.link2:link, and then set a.link2:link to red without underline.
2. Continue to define the following two styles. Enter the names directly and set them to a.link2:visited, with no underline in purple. a.link2:hover, blue and underlined.
3. At this time, there is a custom style named link2 under the "CSS Style" option.
4. Enter a paragraph in the page, add a # link to it, select the link, and then click style link2 in the style sheet window to apply this style to the link.
5. The same method can be used to create different link formats on the same page.
****In order to maintain a certain style, it is not advisable to create too many link styles on the same page.
25. External style sheet
***Apply the same style sheet in different pages.
1. Create a new style sheet, give it a name, then select "Create Custom Style" for type, and select "New Style Sheet File" for definition.
2. After confirmation, open the window to save the external style sheet. Then just save it to your local site.
3. At this time, you can see that a new style sheet file has been added in the style sheet window. The suffix of the file is css
4. If an internal style sheet in the current page is to be exported as an external style sheet file , so that it can be used by other pages, you can click the gray icon in the upper right corner of the style sheet window and select "Export Style Sheet". At this time, you can name the style and save it as an external file.
5. When other pages need to use external style sheets, you can click the first button "Attach Style Sheet" in the style sheet window to open the window, then select the external style sheet file, and select "Link" in Add As. , OK.
26. Other CSS
****The background in CSS is to set text background, table background image, etc.
****Blocks in CSS refer to setting the text spacing, alignment, subscript, superscript, arrangement, etc. of the text.
****The box in CSS refers to setting the blank distance between images and text content, and the method of mixing images and text.
****The border in CSS refers to beautifying the text area of the table, buttons, etc.
****List in CSS refers to setting the style of list items. That is, an outline-like paragraph.
****Positioning in CSS refers to setting the relative and absolute positioning of images on the page.
****Extension in CSS, the cursor can be set to the cursor style, which can be set to hand (hand type), crosshair (cross type), text ("I" type), wait (waiting type) , default (default type), help (help type), and arrow types in various directions.
****The extension in CSS and the filter in it can be used to create CSS filter effects, that is, to process the transparency, glow, etc. of the image. However, the effect is not very obvious. It is better to use software that specializes in image processing.
Twenty-seven. Create an online photo album
1. First, install the FireworksMX software.
2. Process the photos you need to put on the Internet, process them into the same size, and put them in a folder.
3. Click Command/Create Website Album in the menu to open the settings window.
4. Enter the album title, subtitle information, and other information (you can also modify it later). "Source image folder", select the folder where you just saved the photo.
5. "Destination Folder", click the "Browse" button to select the current site directory. (That is, save all the photos to the site)
6. "Thumbnail size" can be selected as needed, and "Show file name" can be selected to display the file name of each picture in the generated album. .
7. The "Column" grid is the number of pictures displayed in each row. The default is 5, which can be changed by yourself.
8. Generally choose "higher quality" for the following two "formats".
9. Select the option "Create a navigation page for each picture". OK.
28. Customized web page transition function
*****Web page transition refers to the different refreshes of the page when the viewer enters or leaves the web page. Effects such as scrolling, blinds, etc. The web page will look more dynamic, but you should also pay attention to it in moderation, otherwise too fancy changes may easily arouse the disgust of viewers. Steps:
1. Open a page, click Insert/File Header Tag/Meta in the menu, and the Meta dialog box will pop up.
2. Select the HTTP-equivalent option in the drop-down list of the property options in the dialog box, and type Page-Enter in the value box to indicate that there will be a web page transition effect when entering the web page.
3. Type Revealtrans(Duration=4,Transition=2) in the content box. Duration=4 means that the duration of the webpage transition effect is 4 seconds. Transition means the transition effect mode. When the value is 2, it means circular shrinkage. .
4. After inputting, click OK to save. In this way, when we click a hyperlink to enter this page, we can see the effect.
5. There are more than twenty effects for you to choose from. Just change the value of Transition to the code name of the corresponding effect. The specific effects and settings are as shown in the table below
EffectTransition EffectTransition
Box Shrink 0 Dissolve 12
Box Expand 1 Shrink left and right to the middle 13
Circular Shrink 2 Expand the middle to the left and right 14
Circular Expand 3 Shrink up and down toward the middle 15
Rub upward Divide 4 Expand the middle up and down 16
Erase down 5 Expand in a staircase to the left and down 17
Erase to the left 6 Expand in a staircase to the upper left 18
Erase to the right 7 Expand in a staircase to the lower and right 19
Vertical blinds 8 Step-like expansion to the upper right 20
Horizontal blinds 9 Random horizontal lines 21
Horizontal checkerboard style 10 Random vertical lines 22
Vertical checkerboard style 11 Random 23
29. Library Application
****Some content in the website needs to be used repeatedly, such as a website icon made by yourself, etc. At this time, this component is saved in the library and can be used at any time. transfer.
1. Open a page and select the component that needs to be saved, such as an icon.
2. Click the menu window/resources to open the resource window. Then select the button of the bottom book sample to open the library panel.
3. Click the New button below to save the icon just selected to the library. You can also give it a name at this time.
4. When you want to apply the contents of the library on a new page, open the library panel, select the icon you want to use, and then click "Insert" below.
30. Use templates to quickly complete the site (home page or an internal page)
1. First, plan the website you want to make, and make it The content of each link is well designed. For example, my website:
The links on the homepage are: web version, animation version, please leave a message, about me, contact me, wishing bottle
The links on the web version are: Webmaster Profile¦ ¦Teaching and Research Paper¦¦ Seeking Truth in Classroom¦ ¦Original Courseware¦ ¦Pictures from the Heart¦ ¦Leaving a Picture of Life¦ ¦Letter to Me¦ ¦The Wild Goose Leaving a Voice¦
The links on the animated version are the same as those on the web version.
The following links to various articles or courseware pages. For example, "Searching for Truth in Classroom" links to a page full of lesson plan titles, and then from each lesson plan title, it links to the page where the lesson plan is placed. The same applies to others.
2. Download a web page template that is more suitable for your own planning and favorite. (A good template website is: http://www.mbsky.com) Generally, it includes two files. : One is index.htm, and the other is usually a folder named images, which is what we call the place where pictures are placed.
3. Define the site, and then copy these two files (folders) to the site folder.
4. Double-click the index.htm file to enter the editing state of the home page. You can then modify the page to suit your needs. This completes the homepage.
31. Save existing web pages as templates
**** is used when there are a large number of recurring pages in a website. (Be sure to define the site before creating and using a template)
1. Select a page and click File/Save as Template to save the current page as a template. The "Save Template" window opens, give the template a name, and then save it.
2. At this point, you can find that a folder named Templates is automatically created in the site, and the templates we saved are stored in this directory. Its extension is .dwt
3. This template cannot be modified when it is currently used. So you need to set the editable area of the template.
4. For example, in the current template page, you need to make the middle part of the page editable, so that you can add content to it when using the template. Select the table cell in the middle of the page (hold down the CTRL key and click in the cell), and click Insert/Template Object/Editable Area in the main menu. A dialog box opens, where you can give the template a name and click OK.
5. The editable area defined at this time is framed by a light blue line, and there is the name of the area in the upper left corner. Save and close the template file.
6. Click File/New in the main menu, and click the "Template" option above in the new page window.
7. At this time, the currently defined sites are listed in the "Template for" column. Select a site and the template files owned by the site are displayed in the middle column of the window. Select a template and you can preview it in the "Preview" column. Then click the "Create" button to create a new page.
8. In the new page that appears, except for the editable area, other parts cannot be modified.
32. Upload your own website
1. Apply for website space, and then upload it to the Internet. Currently, there is basically no free space. Free space also requires placing advertisements, or applying for a paid space. It will provide a trial period of about ten days, which can be used as a website test.
2. After clicking Apply, a form requesting registration will appear, which generally includes username, password, email, contact number, province, name of the homepage, category of the homepage, introduction to the homepage, etc.
3. After filling in all, you will get the following items: ① Username (just filled in) ② Password (just filled in) ③ FTP upload address ④ Home page address (sometimes the above items are sent to the filled in email address)
4. Download and install the FTP upload software, you can use CuteFtp (Kunshan Windows/software can be downloaded, free)
5. Open the CuteFtp software and click File/Site Manager in the main menu.
6. Fill in the FTP upload address, FTP site user name, and FTP site password in the opened dialog box, and then click Connect to connect to the site server. (It will connect automatically the second time you open it, no need to fill it in again)
7. After the connection is completed, a frame will appear on the page. The left side is the file on the local computer and the right side is the remote computer. Just change the file on the left (i.e. do Good website files) are dragged to the right one by one, and the upload is completed.
33. Promote your own website
How to let others know the website address, there are two methods:
1. Use special software to The website is logged into major search engines.
2. Manual login. For example, if you open Baidu (www.baidu.com), there is a link "Website Login" below. After clicking, you will be asked to fill in the website address, name, content, etc., and then you will be logged in. Include it in Baidu's search engine so that others can search for your website. Login to other websites is the same.
The above is the detailed content of Detailed steps for setting up a website with Dreamweaver. For more information, please follow other related articles on the PHP Chinese website!