Dreamweaver: HTML and CSS
Today we had a go at using Dreamweaver to write some HTML and CSS code to create a website.
Our first task was to add some photos and text and to change some colours and fonts.
 |
| HTML code The first thinbg we had to do was find an image to use and save it in the folder we would be using for the task (As a jpeg/png). We then set up dreamweaver so that the screen was splint vertically for the code and preview. After this we located the 'Body' tags '<body> </body>' and typed something in the middle of the tags. Eg. '<body> Hello </body>' - this would show 'Hello' in the preview. We could then try using different tags like: <h1> Main Heading </h1>, <h2> Sub Heading </h2>, <p> Paragraph </p>, <button> Button </button> etc. Next we added the image, there are two ways to do this either to type the code out or to insert the image using the insert button in the top menu. The code for the image is <img src="folder/name of image.jpg" width="400" height="600" alt="Text that shows when the image doesn't load"/> Once we added the image, we could then add a link to where we found it. We then made the link into a button. The code for this was <button> <a href="https://website.com/"> Text for link </a> </button>. After this we changed the colours for the background and text. To do this we went to PageProperties>Appearance(CSS) Here we could change the colours and fonts, and once we were done it would be added to our code.  |
We could then create the <div>s in the source code (Between the body tags) and edit their style in the style1.css. To be able to do this we had to give the <div>'s class names eg. <div class="Header"> </div>. After creating these we could edit their style, however to make them easier to see and distiguish I gave them an outline by adding outline:auto; under the '.Header {' .
For some of the div boxes we made their positioning absolute meaning they won't really change size? and then for the boxes inside these we used relative positioning since the sizing would rely on the box they are in. At the end of the task we changed the main boxes from absolute to inherit so that they would fit the page, this meant we had to alter the margins a bit too.
Other things we added to the page were buttons, text , images in the <div> containers, backgrounds for the buttons, an image that changes when you hover over it with the mouse (Rollover Image) and links which could go to other pages/homepage.
 |
| style1.css ^ |
Overall, I think I learnt a lot today.
Comments
Post a Comment