Hi there, my name is Dan. And in this video series we’re going to make this Responsive Portfolio Website using Dreamweaver. Now we’re going to go through this course step by step learning everything we need to know to make a website. Hi, so what adobe dreamweaver cc hamburger menu free download we going to be making in this course and what are the resources?

We’re going to be taking a design that we’ve made in a previous completely different class. You don’t have to have done that course, it’s quite handy if you do want to do the Design process as well as the Build.

So you can go do that. Hi there, in this video we’re going to set up our Work Space so that we can design amazing websites. Now this particular course is going to focus mainly on the Live view, or the kind of more design visual side of using Dreamweaver. You can totally do this course in the Code side if you prefer, but if you want to follow along exactly, we are going to do this in the Visual view.

Hey there, in this video we are going to create our Site Definition. We need to do this for every single brand new site we’re going to make in Dreamweaver. It’s super easy. You can see out over here, I’ve got a folder, and inside, it’s got an Images folder. It’s all we need to do. Let’s go and do that now. In this tutorial we’re going to create a brand new page. We’re going to call it Index. We’re going to bring in a Logo. We’re going to link it to our Home Page.

We’re going to add some Alt Text. All the good stuff to start any good website. Hey there, we’re at super extreme close-up version. So I can show you how to best preview your website using Dreamweaver and real time browser preview. Let’s go check it out. You can see in there. We’re actually going to Style our Header. Don’t worry, it’s not adobe dreamweaver cc hamburger menu free download to always stay this awful green.

And we’re going to add some Padding and some awesome css-ness. So get ready to make your very first css sheet. Hey, awesome people. In this video we’re going to transform this ugly green box and edit our css into this lovely gray box. So now we’re going to go and adjust our css sheet. Hey, in this video we’re going to take adobe dreamweaver cc hamburger menu free download website, which currently stretches on to infinity, we are going to do this to it, where it’s now all centered in and only has a maximum width of about pixels.

And when I re-size it, it’s always in the center. So let’s go and do that now using Adobe Dreamweaver. Hey there, in this tutorial we’re going to look at adjusting our site for the different tablet sizes, and mobile phone sizes. They’re called Media Queries, you can kind of seem them up the top here. So our website’s a desktop, the Header there is gray. And if I get down to Tablet size, hey presto, it’s red, and I get down again to Mobile, and it’s green.

I know those are ugly colors, they’re just there as place holders to test our Media Queries. Let’s go and do that now in Dreamweaver. Hi there, in this tutorial we’re going to look at previewing our website from Dreamweaver directly on to our mobile phone. And it’s going to appear here. See that green background, and then watch this.

It’s red background. The nice thing about it is we don’t have to host it on a website, and we can just make adjustments on Dreamweaver directly, and it automatically updates on a mobile phone, it’s really cool. In this video we’re going to create an ugly looking desktop menu which we’ll Style in the next video, but when it gets down to Tablet, and Adobe dreamweaver cc hamburger menu free download, it turns into a Nav Sandwich.

So let’s go and do that now in Dreamweaver. Hi there, in this video we’re going to look at adding some Ссылка на продолжение to take this ugly looking Desktop Menu, and when it switches to Mobile, then you clicked them all adobe dreamweaver cc hamburger menu free download, it shows you the ugly Desktop version.

This little toggle adobe dreamweaver cc hamburger menu free download on and off. I realize the styling’s not great and there’s a нажмите чтобы перейти little problems with layout. We’ll do that in the video after this one. What you really need to do adobe dreamweaver cc hamburger menu free download pay attention to the magic, clicking, showing thing.

We’re going to do it in JavaScript. So let’s go and do that now. Hello, lovely Dreamweaver people. In this tutorial we’re going to transform these ugly bullet point navigation buttons into these good looking red and green ones. Ignore the font, the fonts were ugly. We’ll do that in the following video.

But let’s do the buttons now. And we’re also going to have to change the spelling of this. I’ve just noticed that. You’ve probably been in this whole course, going, “Wow, change it. So let’s go and add fonts как сообщается здесь Dreamweaver. So the first thing we’re going to do is a Desktop, it looks kind of fine. At Tablet, needs some work, but it has some real problems down here at Mobile.

The biggest one is that, you can see, there’s not enough physical room to fit. Kind of okay at thebut you can see, when it gets close to here, ended up just trying to occupy the same space. So what I’m going to do is try and shrink this Logo. Hi there, in this video we’re going to talk about Templates. So we’re not going to actually design the Template in this particular video, we’re going to do it a little bit later on, but it’s about this time that we really need to consider what is going to be part of the Template, and what is not.

In this video, we’re going to add this background image. And it gets all stretchy, and has a specific height, and then gets a bit smaller when it gets down to Mobile.

All right, let’s go and do that in this video. Hi there, in this tutorial we’re going to add this main HTML5 tag here. It’s where most of the copy goes for adobe dreamweaver cc hamburger menu free download website. We’re going to make it nice and big, we’re going to give it a minimum height, and we’re going to make adobe dreamweaver cc hamburger menu free download green, just so that you can see it.

I don’t like that green, it’s not going to stay around. All right, let’s get on and make it. Hi there, in this tutorial we’re going to add our Footer. There’s our Top, there’s our nice little Footer. It’s going to have two little Divs inside of it, to float. Our Social Icons to this side, we’re going to get the Copyright to go to the right hand side. We’re also going to add Links to all of these. And this one’s going to be kind of cool.

When you click it, it’s going to open up your email account and send us an email. So let’s go do that now in Dreamweaver. Hello, lovely Dreamweaver people, it’s time to make a Template. In this video we’re going to make this thing here. It looks exactly the same as the last video but now it’s called a ‘. Hi there, in this video we’re going to start our Responsive Hero Box.

That’s inside of our Template. You might be looking, and going, “I can only see two things. And we’re going to create some re-usable floating Classes. All sorts of other awesomeness. So, let’s go and do that now. Hi there, this video is here to save the day. Now you’ve got a website where you’ve used Float, and it’s applied to something and now the object underneath is trying to sneak underneath it, and generally just behave badly.

Adobe dreamweaver cc hamburger menu free download –

Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.

Necessary Necessary. Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information. Functional Functional. Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features. This cookie is used for social media sharing tracking service.

Performance Performance. Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors. YSC session This cookies is set by Youtube and is used to track the views of embedded videos. Analytics Analytics.

Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc. This cookie is used to track how many times users see a particular advert which helps in measuring the success of the campaign and calculate the revenue generated by the campaign. These cookies can only be read from the domain that it is set on so it will not track any data while browsing through another sites.

The cookie is used to calculate visitor, session, campaign data and keep track of site usage for the site’s analytics report. The cookies store information anonymously and assign a randomly generated number to identify unique visitors. The cookie is used to store information of how visitors use a website and helps in creating an analytics report of how the wbsite is doing. The data collected including the number visitors, the source where they have come from, and the pages viisted in an anonymous form.

Advertisement Advertisement. Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads. The cookie is used for targeting and advertising purposes. The cookie is used to collect information about the usage behavior for targeted advertising.

DSID 1 hour This cookie is setup by doubleclick. This cookie is used by Google to make advertising more engaging to users and are stored under doubleclick. It contains an encrypted unique ID. IDE 1 year 24 days Used by Google DoubleClick and stores information about how the user uses the website and any other advertisement before visiting the website.

This is used to present users with ads that are relevant to them according to the user profile. The purpose of the cookie is to determine if the user’s browser supports cookies.

Used to track the information of the embedded YouTube videos on a website. Others Others. Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet. The domain of this cookie is related with a company called Bombora in USA. Funciona con. This cookie is set by the provider Addthis. This cookie tracks anonymous information on how visitors use the website. This cookies is set by Youtube and is used to track the views of embedded videos.

This cookie is set by Google and stored under the name dounleclick. This cookie is installed by Google Analytics. This domain of this cookie is owned by agkn. The cookie is set by CasaleMedia. So I’ve got a Div tag, and it has my images inside. Let’s put in the Desktop version. So inside this guy I click on him, there he is there, a red Div tag. I’m going to put in something called an Unordered List.

This is how we describe Lists. And Navigation is just a list of options you can go to on a page. An Ordered List is a numbered list, and an Unordered List is a bullet pointed list. So you can see, bullet points. We’re going to remove those from the Styling a little bit later on. So, what I want to do is change this text. I want to say, this one is going to be the ‘About Us’. I’ve used capitals, you don’t have to. I mean, ‘Me’, ‘Contact Me’. So I’m going to click out, you can see I got two bullet points.

Let’s have a look at how these are constructed, there’s the Div tag, and inside of that is my Unordered List. There you see, the beginning and ending. And inside this Unordered List are the List Items. So these are the different bullet points. That’s just how it’s constructed. It’s going to be important for when we later on go and start styling. What I’d like to do while we’re here is to give them Hyperlinks. So I’m going to double click ‘About Me’, and click on this one here, see, it goes orange, click on the ‘Hyperlink”.

And where is this going to go? It’s going to go to hash ‘ ‘. Hash is just– I don’t know yet what that icon means, or that pound ‘ ‘ sign. You could put ‘About Us’. But I don’t really know what it’s going to be called, so if you don’t know, just put in hash ‘ ‘.

And that allows it to be a link, but it doesn’t cause an error. You can change this later on. Same with ‘Contact Me’, both of them are going to hash ‘ ‘ at the moment. Next thing I’d like to do is turn them on and off at different views because at the moment, you can see them all the way through. Mobile, Tablet, Desktop. So, what I’m going to do is do the Mobile one first. I double click this, there we go. I want you to turn off, when you’re in Desktop view.

I want to say– I’m going to create a new Selector, this one’s going to be ‘. So this is going to be a Class, mobile view.

And what I’d like to do is, when it’s in Mobile view – so this is that thing, it’s going to control this. None, just means, we can’t see. So nothing happens, because what I need to do is find the Div tag.

It’s wrapping around the outside of this image, and apply it. Where do I do it? I can do it down here. So I have my Image selected, now I’ve got my Div tag selected. And Div means, the.

He’s gone. Cool, huh? So, this Div tag now is called Mobile view Div tag. And what we’re saying is, when it’s in Global, which is Desktop, I would like you to display ‘none’. And the problem is, it displays ‘none’ all the time. That’s why they call it Global, and not specifically Desktop. Because what it means is, it means everything. Global means everything unless Tablet view says, do something different. But at the moment, if I go to my css, I look at my Tablet view.

My Tablet view doesn’t save anything. So it doesn’t override Mobile view. It’s a cascading Style Sheet, so it flows down and flows over all of these unless they say something different. And they don’t, they say, Mobile view, we don’t say anything. So that’s what we’re going to do, we’re going to say under ‘styles.

Hit ‘return’ again, it’s gone. Instead of saying ‘none’ now, we’re going to say, apply ‘block’. Block is a weird one, it sounds like ‘none’.

I think block of wood, block of concrete, something solid, I can see it now. Works for me anyway. So, I can see it. So let’s go and check it in a browser, Live view is not great, remember. So, my Mobile menu in Desktop view can’t be seen, it’s ‘none’. Now when it gets down to Tablet view it’s blocked, it’s a block of wood.

And when it gets down to Mobile view, it disappears again. So what we need to say is, styles. I’d like to say, display ‘block’ as well, so I can see both of them. It’s not lined up, that’s okay, we’ll do the styling later on. It’s mechanics here at the moment. So, you can’t see him, you can see him, you can see him, awesome.

So what I want to do now is create a new Class called Desktop view, and I want to apply it to these buttons here, and I want to turn it on and off, depending on the view. So, let’s create a new Styles.

I don’t want to make it Global, I could, I could say, I’d like you to be ‘block’. But it’s audience block, we can only see it at Desktop view. So I don’t need to restate that, what I need to say is, Tablet, turn off.

So I’m going to go to my ‘Tablet’ view, I’m going to click ‘Selector’.