One page website Digital Communication

Once I had the idea of what I wanted to base my website on I started to create it in Dreamweaver, the reason I used Dreamweaver is because it's the software that I was taught how to use and I found it easy to use. As I said in my previous blog, I changed my website about when I started creating it in Dreamweaver.

As you can see here, I used the same layout as the design in Photoshop but changed things around slightly E.G. instead of top 10 videos this week, I just have a top video this week, it looks a lot cleaner and it's so much easier to do. I tried to use as little images as possible considering I already have a video in there which will take time to load itself. The images are just copied and pasted from Photoshop, I bet your wondering how to put a video into your own website, well I will show you. First of all you need to choose a video from YouTube which you want to use, that's simple enough. Next to the "like" and "dislike" buttons you will see another button called "Share" click this, then click "Embed" then copy the text that comes up.

As you can see, it's easy enough to do once you know what you are doing. Now we need to get this on Dreamweaver so that it will come up on your website. Again I will show you how this is done. You already have the code copied so make sure you don't copy anything else. Go into Dreamweaver and open up your website. At the top left hand side of the page click "Split".

Once you have clicked this you will see a load of coding, this is what makes up the website. You need to chose where you want the video to go, as you can see by looking at my image, the big gray patch is where I placed my video. When you copy the code from YouTube, it will have it's own width and height, you can change this so that it suits your website. to do this I recommend that you click on the gray patch and it will automatically highlight the video code that way you can see what you want to change. A quick note, don't worry when your video doesn't show up on Dreamweaver, just click preview and it will be there. 

Now you will want a text style for your website because lets be honest nobody wants to see a plain, boring website with boring "Ariel" font style. To start off you need to download a font you think is good from  www.dafont.com. Just because you have downloaded the font doesn't mean that it will work on your website, what you must do now is go to another website called www.fontsquirrel.com. When you are at that website you must click on @font-face generator and then add the font you downloaded from dafont. We still aren't done yet what must be done now is critical. once you have downloaded the kit from font squirrel you will open it and it will be named (font name.css) when you open it, change it to how you want it to look on your website E.G. the sizes of the text and the colour. When you have changed that you save it to your area/folder and it must be saved as .css it can be called anything you want to call it but after that it must be .css E.G. stylesheet.css. Once that has been done, you need to attach the style sheet to your website and that is very simple to do, you click on the text you wish to apply the style sheet to and then at the bottom of the page you click on class then attach from the drop down menu. 

Again this won't show up on your Dreamweaver page but like the video, if you preview the website it will show up. When you finally save your work make sure that it is saved as index.HTML and make sure that the I is in low case.