How to Begin a Webpage Using Dreamweaver
Designing and programming the correct code for your own website can be a daunting task. There are numerous variations of different types of codes and algorithms that are used to build webpages, but they take time and energy to learn. Using the program Dreamweaver, even the most amateur designer can simplify these complex codes and design their own webpage. It only takes a few basic webpages to create an accessible website.
Other People Are Reading
Instructions
-
-
1
Sketch a draft of what you would like your webpage to look like with paper and a writing utensil. Search online for sites you like and take some notes on why you like them. According to the Smart Webby website, it's important to give your site a "clean consistent layout and navigation."
-
2
Open Dreamweaver on your computer. If you don't already have Dreamweaver, download a free trial from Adobe which will last you 30 days. Click "File" --> "New" --> "HTML" --> "Create." A blank page should appear.
-
-
3
Click "View" --> "Design." Click "Insert" --> "Layout Objects" --> "Ap Div." A blue box will appear, which can be dragged and manipulated by clicking it once and pulling one of its eight handles (the tiny blue boxes on the corners and middle). Position it where you would like it. You can write directly in this box or create another Ap Div inside it.
-
4
Locate the "Properties Panel" at the bottom of the screen. If it is not there, click "Window" --> "Properties." Make sure your Ap Div is highlighted by clicking it once. Locate the text field in the properties panel at the top left that reads "apDiv1". Name your Ap Div by typing a short name, such as "Title," into the text field.
-
5
Locate the label "<body>" at the bottom of the workspace above the properties panel. You will see "<div#Title>" next to it. (You will not see a "<div#Title>" button if the division is not selected).Click "Window" --> "CSS Styles." A dialog box should appear on the far right of your screen named "CSS styles."
-
6
Expand the CSS styles panel by clicking the black arrow next to it. Make sure your "<div#Title>" button is selected. At the base of the CSS styles panel, you should see four tiny icons: a link, a sheet with a plus on the side, a pencil and a wastebasket. Click the sheet with the plus on the side to add a new CSS style. A dialog should appear. Make sure in the selector box, it reads: "#Title."
-
7
Click okay and a new dialog should appear. Click "background" and then locate "background color." By clicking the box to the right of this you can select a color from the color selector. Click "apply", and behind the box you will see that your title division changed colors. From this dialog box you can manipulate text, links, images and more. Make changes until you are happy with what you have created.
-
8
Select more Ap Divs and use them to construct the rest of your webpage. Notice that you can place Ap Divs inside other Ap Divs. (Remember to name them all). Manipulate these to your liking.
-
9
Refer to your sketch from Step 1 and continue to work. To view your webpage, click F12, which will preview it in the browser. (Please note that your page may look different from browser to browser. Google Chrome and Internet Explorer, for example, may show your page in a slightly different way).
-
10
Save your work often, and upload it to your server when you are ready.
-
1
Tips & Warnings
If you add an image to your page, be sure it is not copyrighted.
