IntroductionWelcome| 00:04 | Hello, my name is Paul Trani, and welcome to
Creating a First Web Site with Dreamweaver CS6.
| | 00:09 | I'm really excited to take you through how
to create a website, but not just any website.
| | 00:14 | So this isn't a template or anything
like that. You have full control to be
| | 00:18 | able to create what you want,
implement the content that you want, have it
| | 00:22 | stylized using CSS any way you want, even using
the latest in CSS and even the latest in HTML5.
| | 00:31 | Really exciting, and not only is it the
latest, but you know what? It's really easy.
| | 00:36 | In fact, we're going to be implementing
lots of imagery, as well as a gallery to
| | 00:40 | include your portfolio if you wanted
to, and even a contact form, enabling
| | 00:45 | people to--of course--contact you
and tell you how great your site is.
| | 00:48 | So I'm really excited to take you through this.
| | 00:51 | So let's go ahead and get started with creating
your First Web Site in Dreamweaver CS6.
| | Collapse this transcript |
| What you should know before watching this course| 00:00 | Before I dive into the content of
this course, there's a few things you
| | 00:04 | should know and some things that I'm going to
assume that you know as I get into this content.
| | 00:09 | Now I'm going to assume you know what a
JPEG is, what some of the images are that
| | 00:13 | can be posted on the web.
| | 00:15 | Maybe you're familiar
with Twitter, that's great!
| | 00:17 | Since this Adobe Dreamweaver CS6 is an
Adobe program, it will be great if you're
| | 00:23 | familiar with some of the other Adobe programs.
| | 00:25 | I'm going to the using Photoshop as
well, and as I'm mentioning Photoshop, to
| | 00:29 | be honest, this is perfect for any designer
that uses Photoshop or any of those Adobe tools
| | 00:35 | because this is all about creative
expression, being able to create what you
| | 00:39 | want--in this case a website--
and really showing it to the world.
| | 00:43 | So I'm going to assume that knowledge,
basic understanding of the Internet,
| | 00:48 | graphics, and a limited
understanding of Adobe Tools.
| | Collapse this transcript |
| Using the exercise files| 00:00 | If you're a Premium Member of the
lynda.com online training library, or if
| | 00:04 | you're watching this tutorial on DVD-ROM,
you have access to all the exercise
| | 00:08 | files used throughout this title.
In fact, here they are on my Desktop.
| | 00:12 | I'll open this up, and you can see
right in here there is an Assets folder that
| | 00:16 | contains all the assets.
| | 00:17 | There is Chapter folders as well,
so you can always jump in here.
| | 00:21 | Start with these Begin files, but
really, here's this Final folder for each
| | 00:25 | one, you can also take those and use them,
and there's even a FinalWebsite folder as well.
| | 00:31 | So feel free to jump in here, you can
change all the graphics, call it your own,
| | 00:35 | do whatever you want if you have access to them.
| | 00:37 | Now, if you are a monthly member or an
annual member of lynda.com, you don't
| | 00:41 | have access to these exercise files,
but can easily follow along from scratch
| | 00:46 | with your own assets, which is really going to be
what you are going to want in the end anyways.
| | 00:51 | So let's go ahead and jump right in to creating
our very first website in Dreamweaver CS6.
| | Collapse this transcript |
|
|
1. Understanding Web Site DesignUnderstanding the Internet and web sites| 00:00 | I'd like to start off by giving you a
good foundation of what the Internet is,
| | 00:04 | what web pages are, websites, mobile
sites, how it all works together as well.
| | 00:09 | Starting with the Internet, it really
is a global system of computers linked
| | 00:13 | together by a vast network.
| | 00:15 | Oftentimes these computers are called
servers, because not only are they linked
| | 00:20 | together, but they serve up and carry
data, most notably in the form of web
| | 00:25 | pages, websites, emails, things like that.
| | 00:30 | But you take a web page,
well, what is a web page?
| | 00:33 | It's basically a document with
formatting instructions known as HTML, or
| | 00:38 | Hypertext Markup Language.
| | 00:39 | So you can see there are some plain text here as
well as these tags that make up this HTML page.
| | 00:46 | Luckily, browsers render that out, and
I get a different experience as a user.
| | 00:50 | Nonetheless we have that web page
and these web pages are then linked
| | 00:54 | together to form a website.
All linked together, there's our website.
| | 01:00 | Going beyond that, when I go to that
website, the computer would see that HTML,
| | 01:05 | and it would render it out
appropriately, and give me the right experience.
| | 01:10 | So this is what I would want to
see as user, as opposed to the HTML.
| | 01:15 | So that's how all of that works.
| | 01:16 | Even going beyond to that for mobile
devices, it renders up that same HTML, we
| | 01:22 | just need to do some different
formatting for that smaller size.
| | 01:26 | Luckily, we have something like
Dreamweaver, which really makes it possible for
| | 01:30 | us to easily create these websites.
| | 01:33 | So we don't have to type in all of that
HTML, Dreamweaver does a lot of it for us.
| | 01:39 | We can easily insert the images and
create something beautiful without having to
| | 01:44 | deal with the hassle of all of that
HTML and writing it by hand, even though
| | 01:49 | Dreamweaver will
actually let me do that as well.
| | 01:52 | Going beyond that, once the site is
created, you can go ahead and publish it or
| | 01:56 | upload it to a web server, which then
can be viewed by the rest of the world.
| | 02:02 | So that's where it will live on a web
server, and that website that lives on
| | 02:06 | that web server will be accessed
through a web browser, such as Google, you
| | 02:12 | use some web address or search engine, it
will go out get the site and return it to you.
| | 02:18 | Now that's the basics for how
websites work, including the Internet.
| | 02:23 | Now what you can do is take that
information and start to develop your own
| | 02:26 | websites, start to plan it out.
| | Collapse this transcript |
| Planning and designing a web site| 00:00 | Before you dive right into designing and
developing your site, you need to start
| | 00:04 | to plan it out, and in order to plan it
out, you need to know what the business
| | 00:08 | requirements are, technical
requirements, set up the user requirements, and
| | 00:12 | design requirements.
| | 00:14 | So lot of requirements here,
but they all make a lot of sense.
| | 00:17 | Starting with the business requirements,
we need to ask ourselves what's the
| | 00:21 | goal of the website? And really, all
decisions concerning the design should be
| | 00:27 | made based on the goal of the website.
| | 00:29 | Are you trying to inform, persuade
somebody to maybe buy something, are they
| | 00:33 | trying to do something?
| | 00:35 | Answer all those questions and really the
result will be the content for the website.
| | 00:42 | So going on from that, what are the
technical requirements, what are the
| | 00:46 | technical specs if you will?
| | 00:48 | Well, we need to make sure the content
downloads fast, we need to make sure this
| | 00:53 | website is compatible across all
browsers, and even across different devices,
| | 00:58 | from tablets to mobile device, and we
need to make sure it's optimized for
| | 01:03 | search engines. And the result of that
would, again, just be a document that we
| | 01:08 | just need to keep in check as we start
to develop, as well as test our website.
| | 01:14 | We also have user requirements, so even
the user as they come to your site has
| | 01:18 | certain goals in mind, and you
need to make it easy for them.
| | 01:22 | So you want to make sure that
it's easily viewable and accessible.
| | 01:26 | So you need to make sure site is
uploaded, and you can see all the content, you
| | 01:31 | need to make sure it's easy to use, your
navigation is easy to click on, and you
| | 01:36 | need to make sure that your
content is appropriate for the audience.
| | 01:39 | So depending on your business
objectives, you'll be able to determine your
| | 01:43 | audience and then your audience
starts to drive the design as well.
| | 01:49 | So I'm going to get into that now, our design.
So we have design requirements.
| | 01:54 | We need to make sure the design
is appropriate for the content.
| | 01:58 | So this happens to be a designer's site,
so it's going to be the elegant and
| | 02:02 | slick and should work really well.
| | 02:05 | We need to make sure it fits on the user's
screen, again, part of those user requirements.
| | 02:09 | We need to make sure it's the correct
size, that the important contents "above
| | 02:14 | the fold" if you will, so they don't
have to scroll down for important content.
| | 02:19 | Navigation should be really straightforward.
| | 02:21 | We should be able to differentiate
what's a link and what's just text.
| | 02:25 | We need to make sure you
keep that text legible as well.
| | 02:28 | So again, taking this example into
consideration, we have the site, and we can
| | 02:34 | see that we really want to set it up
for about 1024 pixels wide by 768 pixels
| | 02:40 | high, so this is sort of the
minimum for a Desktop experience.
| | 02:45 | We can go higher than that, but as of
right now, roughly the percentage is about
| | 02:51 | 12% to 14% to 16% of user's
monitors are actually this size.
| | 02:58 | So we're keeping that in mind, so if I
was in Photoshop I'd make my document
| | 03:02 | that size, from there I'd start to
establish navigation, make sure it's nice and clear.
| | 03:07 | So up in that navigation bar, I am used
to that as a user, and even beyond that,
| | 03:13 | the copy is legible, easy to read,
clear hierarchy, I can see that word create
| | 03:18 | is the header there and some
additional content below, the links are also
| | 03:22 | different from the body copy as well.
| | 03:24 | So that's how I had wanted
to set it up for a Desktop.
| | 03:27 | Going beyond that, we also have the URL
for them to easily get to the website.
| | 03:33 | So again, we're taking our business
objectives with our technical requirements,
| | 03:38 | our user requirements, our design
requirements, really that enables us to create
| | 03:42 | this design that would be uploaded, and
this is for our Desktop user experience.
| | 03:48 | And we just can't forget about mobile.
| | 03:50 | Because we need to see how this
works on mobile, as mobile gets to become
| | 03:54 | more and more popular.
| | 03:56 | So this has the same criteria, we
need to check the size, about 480x800 is
| | 04:01 | roughly the smallest size of a mobile
device, but still the navigation should be
| | 04:05 | clear and clickable by a finger, quite frankly.
| | 04:09 | We need to make sure that copy is
legible as well on a mobile device,
| | 04:14 | considering there's going to be glare
and different things, as the person is
| | 04:17 | using their device maybe outside,
whatever the case may be, but still
| | 04:22 | accessible from a URL.
| | 04:24 | So those are all the things that we
need to keep in mind as we start to design
| | 04:28 | our site, to ultimately make it a
great experience for the end user.
| | Collapse this transcript |
| Creating graphics for web sites| 00:00 | The first step in creating a website
is to create the design and the graphics
| | 00:04 | for the site, and that's why I'm starting off
here in Photoshop, Photoshop CS6 to be exact.
| | 00:10 | Now you, of course, can use a graphic
program of your choice, whether it's
| | 00:14 | Illustrator or Fireworks.
| | 00:16 | As long as it can export out graphics
in a web format, such as JPEG, PNG, or
| | 00:21 | GIF, which is what I'm going to be doing,
but first I want to start off with the
| | 00:25 | design of this site.
| | 00:26 | So if we take a look, let's take a look
at the Image Size, you can see that the
| | 00:33 | size of this is 1366 wide by about 1000
high, and that's a pretty good size,
| | 00:40 | actually that's a good
median size for most monitors.
| | 00:44 | You can go as low as 1024x768, know
that all your critical information should
| | 00:54 | probably fit within this area.
| | 00:56 | I am picking the median size, as I
showed a second ago, this is at 72 dpi, then
| | 01:02 | I can begin designing.
| | 01:03 | Now remember the height is 1000 pixels
high, but really, the cut-off point with
| | 01:08 | the most monitors is 768, so let's
just cancel out of that, and if I show you
| | 01:16 | really fast just my guides, I have this
guide right here, and this is actually
| | 01:23 | 768 pixels down I have all my
critical information above that, and this is
| | 01:29 | technically above the fold,
I have contents spill below.
| | 01:32 | It's perfectly fine, and
that's how this is all set up.
| | 01:37 | So my Homepage looks pretty good,
consistent nav, everything looks great!
| | 01:41 | I can click on my About folder to turn
that on and here's my About content, as
| | 01:47 | you can see right here.
| | 01:49 | I can take a look at my portfolio, so I
turn on my portfolio content, and even
| | 01:54 | the Contact page looks like this.
| | 01:58 | So everything is designed in
Photoshop in these handy little folders.
| | 02:03 | But what I need to do is I need to
start exporting out these graphics, so
| | 02:07 | exporting out the different backgrounds
for each section, as well as this logo.
| | 02:14 | Those are the main elements, because the
other things I can actually do in Dreamweaver.
| | 02:18 | So I'm going to export out the background.
| | 02:21 | So I'll turn off the Navigation,
because again, I can make that in Dreamweaver.
| | 02:25 | I'll turn off to this Content folder,
and this is what I want to export out.
| | 02:32 | Now all I need to do is
go to File > Save for Web.
| | 02:35 | If you're using Illustrator, you have
that same functionality, and now I can go
| | 02:40 | ahead and optimize this
and save it appropriately.
| | 02:44 | So notice right up here, the top, the upper
right gives me all the different web file formats.
| | 02:49 | This is going to be a JPEG, which is
great for photos, there are some additional
| | 02:53 | options, but I'm going to select JPEG
and the Quality sliders, which you want to
| | 02:58 | deal with the most. You just click and
drag on that to bring it down, and it's a
| | 03:02 | fine art of making it look good while
still keeping the file size small as you
| | 03:08 | can see in the lower left.
| | 03:10 | So it's still to looking good, let's take
the Quality down some more, go down to
| | 03:15 | about 30, about 30%.
| | 03:19 | It's breaking up a little bit,
but I like the file size.
| | 03:23 | So I'm going to leave it at this quality,
and I'm going to Save out this JPEG.
| | 03:31 | I'm going to save it in my images
folder, 03 Final, images folder, and really
| | 03:38 | you just need to save it wherever
you want just be aware of where you're
| | 03:40 | saving these files.
| | 03:42 | And in this case, I'm going call this
file bkgdHome.jpg, no spaces, nothing like
| | 03:50 | that, saving out that graphic.
Next up, my About page, looking good.
| | 03:56 | Let's turn off that Content layer,
this is the image, I want to export.
| | 04:01 | Same process, I'm going to File > Save
for Web, and now I can go ahead and save
| | 04:07 | out this image, but I might want to
adjust the quality, maybe increase it a
| | 04:11 | little bit, because she's
getting kind of broken up a lot.
| | 04:13 | But now as I increase the quality, this
portion of the image appears much more
| | 04:18 | smooth and the file size is pretty reasonable.
| | 04:20 | Selecting Save, I'll save this as
bkgdAbout.jpg, saving out that JPEG.
| | 04:28 | Next up, the portfolio section, turning off
that Content folder and going to Save for web.
| | 04:38 | Now from here, I'd say the
quality looks really good.
| | 04:41 | In fact, let me drop that down
because I don't like the file size.
| | 04:45 | I want to keep this under 100K,
which is a good place to be.
| | 04:49 | Still looks really good.
Selecting Save, bkgdPort.jpg, saving that.
| | 04:58 | And the last one I'm going
to do is the Contact page.
| | 05:01 | Turning off what I don't want to
export and going to Save for web.
| | 05:07 | Now in this case, I really like this one.
| | 05:09 | I like the file size, so I'm
just going to select Save and typing
| | 05:14 | in bkgdContact.jpg. All right!
| | 05:17 | This is my final of all my backgrounds,
so I have four different backgrounds in
| | 05:21 | there to using those different sections.
| | 05:24 | Those are all saved out, and now I need
to go ahead and take a look at this page.
| | 05:33 | And I realize that sure most of this
content can be in HTML, but this graphic
| | 05:40 | right here, this logo
needs to be saved out as well.
| | 05:43 | Well, I've isolated that logo, happens
to be this logo.psd, and again, both of
| | 05:49 | these files are in your Assets folder,
in your images folder, if you have
| | 05:54 | access to the assets.
| | 05:55 | If you don't, you can obviously use
your own PSD files, but in this case
| | 05:59 | for this PSD file, I want to turn off that
background, that's just to show the design.
| | 06:05 | And I am going to turn it off, because I want
to export out these graphics with transparency.
| | 06:10 | So when I do that, I can now the File >
Save for Web, here I am, I can go ahead
| | 06:16 | and save this out, but look,
there is a white back there.
| | 06:19 | It's not transparent, that's because
JPEGs don't allow for transparency.
| | 06:23 | Especially, varying levels of
transparency that this has with the drop shadow.
| | 06:28 | So what I can do is I can change it to PNG-24.
| | 06:31 | That's a 24-bit image, that's going
to give me those varying levels of
| | 06:36 | Transparency, exactly what I want.
| | 06:40 | So now I can go ahead and save that out
as logo.png just like that, saving that.
| | 06:47 | So that's all you need to do is really
just reference your design, determine
| | 06:52 | what you need to export out as graphics,
and from there I can start to implement
| | 06:57 | these graphics on my
first web page in Dreamweaver.
| | Collapse this transcript |
|
|
2. Creating a Web PageCreating your first web page| 00:00 | Now it's time to dive into Dreamweaver
by creating your very first web page and
| | 00:05 | getting familiar with the
workspace in Dreamweaver.
| | 00:08 | So, obviously I have Dreamweaver open
and what I'm going to do is I'm going to
| | 00:13 | go to File, and I'm going to create a New file.
| | 00:16 | Selecting that I'm going to create a
new Blank Page, the Type is going to be
| | 00:21 | HTML, and I'm just going to select
nothing for the Layout, but know that there
| | 00:25 | are some pre-built layouts in here
that you're welcome to check out and even
| | 00:30 | review some of the code behind it.
| | 00:32 | But in this case, I'm going to start
from scratch if you will, selecting
| | 00:36 | none, and I'm going to change the DocType,
because I want this to be an HTML5 web page.
| | 00:44 | So selecting HTML5, I can then click
Create. All right, here I am in Dreamweaver.
| | 00:52 | You can actually see my different
panels, this happens to be my web page.
| | 00:58 | But now I want to customize the
workspace, which is actually set up for
| | 01:02 | Designer, and it's pretty good.
| | 01:04 | But I want to simplify it even more,
because really there are just three panels
| | 01:10 | that I want over here, and so it's
helpful to just remove as I am clicking and
| | 01:15 | dragging off the various panels you
don't need, so I'm removing the Adobe
| | 01:20 | BrowserLab panel, even this AP Elements,
if I select that and pull that off, I
| | 01:27 | can isolate that and close it.
| | 01:30 | Business Catalyst, well, I am not
going to worry about using that now, so I
| | 01:35 | can close that and the Insert CSS
Styles and the Files panel are the three
| | 01:40 | panels that I want.
| | 01:42 | But I want them all nested into one,
so I'm just going to click and drag that
| | 01:47 | panel into this one as it highlights,
I can add that one, this Files panel,
| | 01:53 | click and drag that up there, as it
highlights I can release. And lastly,
| | 01:57 | this Assets panel, I do not need,
so I can pull that off and close it.
| | 02:02 | And now I can go ahead and
check out these different tabs.
| | 02:07 | I'm just going to keep this on the
Insert panel with having that selected, and
| | 02:12 | if at any time you've closed something
that you want reopen, you can always go
| | 02:16 | to your Window menu and open it up.
| | 02:19 | But these are your three most
important panels being able to Inserts items,
| | 02:24 | being able to customize them with
Styles, and knowing where those Files exist,
| | 02:29 | as well as customizing the items that you have
selected using your Properties panel down here.
| | 02:35 | All right, with this set out, let's
go ahead and take a look at our web page.
| | 02:40 | It's called Untitled-1, you can
see it right here, even for the Title
| | 02:45 | of this document, it is called Untitled
Document, I can change this to say Eva Jones Design.
| | 02:53 | This is the name that will appear in your
browser window, okay, so I have changed that.
| | 02:57 | Well, what just happened, what happened
behind the scenes? I hear this talk of
| | 03:01 | HTML, let's take a look at it.
| | 03:03 | Because if I select the Code view,
you can see my html right in here.
| | 03:10 | In fact, you can see that I've
changed the title right here.
| | 03:15 | So this is great, from Code view, I
can change things, even if I remove
| | 03:20 | Design, and I go to say the Design view, you
can see that it's changed it to Eva Jones, okay.
| | 03:28 | Going back to Code view, I can always
add it back in, and again, going back to
| | 03:33 | the Design view, so even right in here,
for the content of this page, the body
| | 03:37 | if you will, I can say Hello World!
| | 03:41 | Just like that and selecting Code
view, you can see it right in here.
| | 03:46 | But the best way to learn how HTML
works and just an effective way to work is
| | 03:51 | using this Split view.
| | 03:53 | So this allows me to view the Code view
and the Design view at once, so in here
| | 03:58 | I can type in even in the Code
view, right in here, How are you?
| | 04:04 | Selecting in here you can see
that it updates right there.
| | 04:08 | All right, so everything looks good,
I'm able to use this Split view to see the
| | 04:12 | code that's being generated even as I
start to work more in the Design view.
| | 04:17 | Inserting items, customizing them,
being aware of what I have selected down
| | 04:21 | here, everything is set up just fine.
| | 04:24 | Now all I need to do is just
go ahead and save this page.
| | 04:27 | I'm going to a File, and I'm going to
Save it, and in this case, I am going to
| | 04:32 | save it to the 01 Begin folder in the
Chapter 2 folder. You can save it wherever
| | 04:37 | you want just be mindful where you saved it to.
| | 04:40 | But in here I'm saving this as index.html,
because the first web page for any
| | 04:48 | website is going to be known as this
index.html, that's what URL is going to
| | 04:53 | look for is this specific page.
So I'm going to click Save, and that's set up.
| | 04:57 | So really my next step, obviously is
going to be to add more content here and
| | 05:02 | also customize that content.
| | Collapse this transcript |
| Adding content| 00:00 | Now that I have an HTML page created
in Dreamweaver, I can start adding some
| | 00:04 | content to it and then start
customizing that content as well.
| | 00:09 | Now you could just start typing in more
text in here, but more often than not,
| | 00:15 | you're probably can be pulling the
content from an external source, so it might
| | 00:19 | be an email you get, a Word document,
maybe even a text file. And that's what
| | 00:24 | I'm going to do, I'm going to
actually open up a text file. And if you have
| | 00:29 | access to the Assets, basically all the
content for this course, you can open up
| | 00:35 | this Content.txt file, but this
content could come from anywhere.
| | 00:39 | So again, I am just going to take some
content from here, this TXT file, opening
| | 00:44 | it up in Dreamweaver, you can start to
see my content for the various pages as I
| | 00:51 | start to scroll down.
| | 00:53 | Home, About, I also have
Portfolio, and then my Contact page.
| | 00:57 | So I am going to select all of this
content, I'm going to Copy it, I'll close
| | 01:03 | that TXT file, and I'm going to go to
Design view, and in place of that text,
| | 01:09 | I'll just delete it and
Paste this text into place.
| | 01:14 | All right, here's all my text, everything
is going looking good so far, but it's
| | 01:20 | not really, because I actually need to
start customizing the look of this, and
| | 01:24 | the easiest way to do that is
to use your Properties panel.
| | 01:28 | So I'm going to launch this Page
Properties and here I can start to
| | 01:32 | customize the Appearance.
| | 01:35 | So I'm going to change the page font
for instance from that boring, it looks
| | 01:40 | like a Time New Roman, to Arial, okay.
| | 01:43 | It's going to be easier to
read, a little more legible.
| | 01:46 | I can make it 12 point, clicking
Apply you can see that change take effect.
| | 01:52 | I can change the Text color to white
and then the Background color to black,
| | 01:58 | okay, so it's going to could be the
inverse of what it was a second ago.
| | 02:03 | But really I have a background
image that I made earlier, okay?
| | 02:07 | So this gets to be really important.
I actually want to implement that now.
| | 02:11 | So I'm going to select Browse, and I'm
going to browse to that specific images folder.
| | 02:17 | Now keep in mind that this is my index.html,
and I'm in this Chapter 02/02 Begin
| | 02:25 | folder, in there you'll find that index.html
that I'm working on now, because I
| | 02:31 | want to point to this bkgdHome.jpg.
| | 02:36 | It's going to be relative to where this
file is, okay. So as I expand this out,
| | 02:42 | so as I select it, look at the path,
simple, that's what I want to see.
| | 02:47 | You don't want to be locating an image
that exists on your hard drive somewhere.
| | 02:51 | So with that in place I'll click Open,
there's my path, it's looking good, I'll
| | 02:56 | click Apply, yes, that's what I'm talking about.
Now everything is looking really nice now.
| | 03:01 | All right, I'm going to select OK,
because for this content I need to start
| | 03:06 | establishing some hierarchy.
| | 03:08 | So I'm going to remove that Home page
word right there, this first line right
| | 03:13 | here, I want this to be the heading,
so this is going to have a Heading 1 tag
| | 03:18 | that I need to associate with it.
| | 03:19 | So selecting that I'm going to go
change the Format from Paragraph to Heading
| | 03:25 | 1, selecting that, there we are default to
this very large look, and it works out great!
| | 03:32 | Let's just take a peek at the code, as I
go to Split view, you can see that it's
| | 03:37 | changed it from paragraph to
this h1, which is my Heading 1.
| | 03:42 | All right, so going back to Design view,
I can go on down the line, do the same
| | 03:48 | thing for this marketing word,
changing that to Heading 2.
| | 03:51 | You would do this for the obvious
visual reasons, but also search engines
| | 03:56 | pick up on this as well.
| | 03:57 | Search engines can tell what has an h1
tag and what's a secondary information
| | 04:02 | and then also what the body copy is.
| | 04:04 | So you want to start using these h1s,
these h2s, these h3s, like I'm doing here,
| | 04:09 | selecting that word, changing that to h2.
| | 04:13 | Scrolling down a little bit for this About
page, I'm going to select Heading 2, okay.
| | 04:19 | For this Starz Entertainment,
selecting that, I'm going to change this to
| | 04:24 | Heading 2 as well, and the role that
this person did there, I'm going to
| | 04:28 | change that to Heading 3. So you can start to
establish that hierarchy, like I'm doing here.
| | 04:33 | All right, and in fact, since I'm
formatting this content, I have these two list
| | 04:40 | items, and I can select this line item
here, and I can add formatting to it as
| | 04:47 | in an Unordered List, okay, so give
it bullet points or give it numbers.
| | 04:53 | So selecting that, there's my
unordered list, same thing for this item.
| | 04:57 | In fact, if I just put my cursor at the
beginning and just hit Delete and then
| | 05:01 | Return, you can see how it adds that
to the unordered list, as I look at the
| | 05:06 | code right in here,
unordered list and my list item.
| | 05:09 | All right, moving on along I'm
formatting this content and what I will do is
| | 05:16 | I'll select this Heading 2 for the
company and then the role that person did
| | 05:21 | there, right there, scrolling down,
Heading 2 and then Heading 3 for the role.
| | 05:30 | All right, a couple more things to do here,
Graphic Design for the portfolio page.
| | 05:36 | I am going to change that to Heading
2 and change even Motion Graphics to
| | 05:41 | Heading 2 just like that, and lastly,
let's connect for the Contact page,
| | 05:48 | changing that to Heading 2.
| | 05:49 | So I have established this hierarchy
amongst all my content right in here, and
| | 05:54 | it looks pretty good, but know that I
can even customize that further as well.
| | 05:59 | So going into Page Properties again, I'm
going to go down to the Headings, so in
| | 06:07 | here I can change my Heading 1, I can
change the font size, go up to maybe 36
| | 06:14 | pixels and then even
change the color to red, okay.
| | 06:18 | So this mimics the design I'm going
for and then even change my Heading 2 to
| | 06:24 | about 18 pixels and just leaving that
as is. But you can customize all your
| | 06:29 | heading tags right in here, clicking
Apply, you can see that really stands out,
| | 06:34 | and I'll be formatting this more later
on as well, but you can see how I have my
| | 06:40 | basic content in here already styled.
| | 06:42 | And really my next step for this web
page is to start to add more of a layout to
| | 06:47 | this content, but before I do that I
want to go ahead and add some links to this
| | 06:52 | page, as well as customize those links.
| | Collapse this transcript |
| Adding and stylizing links| 00:00 | The great thing about the web is that
it contains a lot of information that
| | 00:04 | actually can be shared and all linked
together, and that's what I want to do
| | 00:09 | with this page is just start to link
it through some other content, as well
| | 00:12 | stylize those links.
| | 00:14 | So for this page as I scroll down, I can
take any text in here or even any image
| | 00:19 | for that matter, and I can
link it to external content.
| | 00:23 | Let's take this for instance, you know
it's great to have an address, but it's
| | 00:26 | even better to have this address linked
to a map of that address. So I can take
| | 00:32 | this content here, and I'm just going to
copy it, because I'm going to use a web
| | 00:39 | browser to find the specific
URL to this place on a map.
| | 00:44 | Now with that information I'm just going
to paste it into my search box and what
| | 00:51 | I want is I want this link to this
Google map's page right here, so this makes
| | 00:56 | it much more useful having
this text linked to this page.
| | 01:01 | So all I need to do is select the
entire link by doing a Select All, Copying
| | 01:08 | that specific link, and using it now.
| | 01:11 | So I'll minimize my browser, I'll go
back into Dreamweaver, and again, for any
| | 01:16 | text I can easily select it, and in my
Properties panel making sure the HTML tab
| | 01:22 | is selected, right down here for a Link,
putting my cursor in there and then
| | 01:27 | Pasting in that URL.
| | 01:30 | You can see it's pretty long, I can hit
Enter, and you can see that it turns it
| | 01:35 | actually blue, might become tough to
see there, but I'll customize that in the
| | 01:40 | second, but it basically has pasted in that URL.
| | 01:44 | Know that I can link to a specific
URL like I'm doing here, I can point to
| | 01:49 | additional files that might exist,
which I'm going to do that later, but know
| | 01:53 | that I can link to any page on the web.
| | 01:56 | In fact, I can also target it, so when
they do click on this link, I might want
| | 02:02 | it to maybe open up in a new blank
window, so I still want them to stay on my
| | 02:08 | side, but just open up in a blank window so
that's why I'm selecting blank right there.
| | 02:13 | All right, if I take a look at the code,
so I'll go to Split view, you can see
| | 02:19 | look at that long URL, could be simple,
could be long, you can see that href,
| | 02:23 | referencing that link just like that.
| | 02:26 | All right, so I've linked to web page, pretty
straightforward, but what about an email address?
| | 02:32 | Well, I can do that as well, you'll
notice right here, here's some text.
| | 02:36 | This is interesting, I actually want
to link this text to that email address.
| | 02:42 | Notice how it says evajonesdesignatgmdotcom
spelled out the word at and dot, and
| | 02:47 | that just prevents any spam from going
to this email address, so it helps to
| | 02:52 | kind of type it out like this, so
it doesn't get picked up by spam bots.
| | 02:56 | Nonetheless, I can take that text and
for that link, instead of just pasting it
| | 03:01 | in there, I want do a mailto, all one
word mailto colon, and then I can type in
| | 03:07 | evajonesdesign, using the @ sign, gmail.com,
using an actual period right in there, just like that,
| | 03:17 | hitting Enter just like that.
| | 03:19 | So now I'm actually going to
link to an email address, very cool!
| | 03:25 | In fact, what I want to do now is I
want to go ahead and test this out in a
| | 03:29 | browser. So I'm going to go to File >
Preview in Browser, I'll preview it in
| | 03:34 | Safari, might ask you to save the
changes of your index.html, you want to
| | 03:40 | make sure your latest are there, here
is my page, I'll scroll down, you can see
| | 03:44 | my content right here, and I would like
to point out that I've actually already
| | 03:49 | selected this. So this is actually a
text that's already been visited, this link
| | 03:54 | has already been visited. And I'll show
you how you can customize your visited,
| | 03:58 | as well as a link color,
even these selected color.
| | 04:03 | So if I select this, you'll see it
turned red, well, I can customize all of that.
| | 04:08 | But again, I'll select that, opens up
in a new blank window, goes directly to
| | 04:13 | that map, and everything looks great!
| | 04:16 | Closing that, let's take a look at this
email address, selecting that, when I
| | 04:20 | select it, it's actually going to
open up in your default email client,
| | 04:24 | whichever one you have setup.
| | 04:25 | In this case it's just mail on Mac, you
can see it puts that email address right
| | 04:30 | in there, and you can type in whatever
message you want and send that message.
| | 04:36 | So that how you can start to link to
additional content, an email address, a URL
| | 04:41 | to a web page, but it doesn't look good,
in fact, it's hard to see, there is a
| | 04:44 | lot going on here that needs to be worked on.
| | 04:47 | Well, luckily, if I close that down,
go back into Dreamweaver, I can use my
| | 04:51 | Page Properties. And from there I can
select this Links category, and I can
| | 04:57 | change the link color.
| | 04:58 | Instead of being that blue which I
can't even see, let's change it to red,
| | 05:03 | selecting Apply, you can see it pops off now.
| | 05:06 | The rollover color, so from here I
might want it to turn white, so go from
| | 05:13 | that red to white, and in fact, visited,
after you've visited that link just
| | 05:21 | like we saw the purple before, I
might want to change that to a darker red
| | 05:25 | just toning it down some.
| | 05:27 | And then your active link color can be
something that even has a little bit of
| | 05:31 | pop like a yellow just like that.
| | 05:35 | Last thing I want to do is
change the Underline style.
| | 05:38 | Instead of always underlining it, let's go
ahead and Show the underline only on rollover.
| | 05:43 | I just think it adds a nice visual
appeal to this, in fact, I'll select OK, and
| | 05:48 | you can see how it changed it immediately.
| | 05:51 | Now I'm going to show you something
really cool that you can do in Dreamweaver,
| | 05:55 | because you don't always need to preview in
browser, you don't need to always do that.
| | 06:00 | What you can do is right up here, in
fact, if I Save this page first I can
| | 06:06 | select Live view. So that means I've basically
activated a web browser inside of Dreamweaver.
| | 06:14 | So now if I scroll down, you can see
my red text as I rollover it, it turns
| | 06:19 | white with the underline and then even
as I select this, you can see it turns
| | 06:25 | yellow, and if I go to that link,
it'll actually launch that, but if I
| | 06:30 | right-click, I can select Follow Link.
| | 06:34 | So again, this is specific to the Live
view, I can follow that specific link,
| | 06:40 | and it will actually open that up
just as you can see right here in
| | 06:45 | Dreamweaver, because you have a web
browser actually running right here in
| | 06:49 | Dreamweaver, which is great!
| | 06:51 | Closing that down, you can see how
you can easily add links to maybe pages
| | 06:55 | on your site, external content, even specific
email addresses, all done in Dreamweaver.
| | Collapse this transcript |
| Positioning elements| 00:00 | Currently you can see how my web page is set up.
| | 00:03 | I do have some basic formatting, all
of my text is in here, and I have a
| | 00:08 | nice background, but still it's a
far cry from my actual design that I
| | 00:12 | created in Photoshop.
So let's go ahead and take a look at that.
| | 00:15 | Here I am in Photoshop, and you can see
that I need to insert a logo, and I need
| | 00:21 | to start creating some items in here,
so I need to basically create a box to
| | 00:28 | position in my navigation.
| | 00:30 | I need this header text to be right
there, and I need to create a content box
| | 00:35 | right here, where all my content will exist.
| | 00:38 | So I need to start creating those
various divisions for my web page. So I'm
| | 00:43 | going to do that by going back into
Dreamweaver and right in here in
| | 00:49 | Dreamweaver I'm going to place my cursor at
the top, and I'm going to insert an image.
| | 00:55 | The image I'm going to insert
happens to be in my Chapter 02, my 04 Begin
| | 01:02 | folder, keep in mind this is
where my index.html file exists.
| | 01:07 | So relative to that if I go in that
images folder, that's where I have my PNG file.
| | 01:13 | So I want to make sure the link to my
graphic, that URL is relative, okay so
| | 01:18 | that's what that should like.
| | 01:20 | Selecting Open, I want to add some
Alternate text, Eva Jones Design, search
| | 01:29 | engines will pick up on this so that's why I
want to add that Alternate text, there it is.
| | 01:35 | Now I'm going to start positioning
some of these items, and again, I want to
| | 01:40 | start dividing up this content,
so I'm going to use some divs.
| | 01:43 | Luckily, if I go to my Insert panel,
and I change to Layout--and I have these
| | 01:49 | different layout options--and really
what I want to do is start to absolute
| | 01:55 | position some divisions, some divs, so
this gives me the ability to Draw an AP div.
| | 02:00 | So selecting that I can just click and
drag to make a box for my logo, with that
| | 02:07 | drawn, I can select my logo, Cut it,
place my cursor inside of that AP div, and
| | 02:16 | then Paste it just like that.
| | 02:18 | Now if I select that yellow border, you
can see that down here in my Properties
| | 02:25 | panel I can start to adjust this accordingly.
| | 02:28 | In fact, I want it to be about 100
pixels from the left side, and the top looks
| | 02:33 | perfect, because I want it to be
right up at the top edge just like that.
| | 02:37 | It looks pretty good--the Z-index I'll
get into later--but that's the depth that
| | 02:41 | it's at, and usually any time I start
creating these divs, I just start getting
| | 02:46 | the habit of just saving my files so
that's what I'm doing, I'll save my file.
| | 02:51 | My next objective here is going to be
to create navigation bar, so I'm just
| | 02:56 | going to place my cursor up here and
just hit Return a couple times to give me a
| | 02:59 | little bit of space, but I want to
draw an AP div for the navigation.
| | 03:04 | So selecting that, drawing my bar just
like that, you can see I've drawn this
| | 03:09 | AP div just like that.
| | 03:12 | In fact, right down here, remember it
was black, in my Photoshop design I can
| | 03:17 | change the background to black just like that.
| | 03:21 | So I've created that, again, I'm just
going to get in a habit of saving, I've
| | 03:25 | saved this specific CSS element, but
now what I want to do is inside of here if
| | 03:31 | I click in here I can start typing in some text.
| | 03:34 | So I need to have home, about,
portfolio, and contact as those various links, so
| | 03:43 | I'm just typing in some text.
Now I want this text to be flush right.
| | 03:50 | So, what I can do is I can go to my
Properties panel, CSS tabs selected, and
| | 03:58 | just make sure your page is saved, so
I'm going to save this page and right over
| | 04:02 | here, and I can go ahead and align right,
selecting that, it will align its to
| | 04:07 | the right-hand side.
| | 04:09 | So far so good, I'm going to insert a couple
more, Draw AP div for this header right here.
| | 04:15 | Just beneath the logo I can draw
that just like that, taking that line,
| | 04:20 | Selecting it, Cutting it, placing my cursor
in there, Pasting it in there just like that.
| | 04:30 | You'll notice this did change, because
it didn't actually take the Heading 1
| | 04:34 | style, and this will happen, if that
does just select it and just like you did
| | 04:39 | before for a HTML tab, you need to make
sure you change that to Heading 1, and
| | 04:45 | there's your particular style.
All right, that looks good.
| | 04:49 | I can even shorten this up
a little bit if I want to.
| | 04:52 | Next up is all of this text
right here, as I scroll down.
| | 04:56 | Well, same thing, drawing an AP div,
how about halfway right here, I'll draw
| | 05:02 | that AP div just like that.
| | 05:05 | I'll change the background color to
black, and now I can take this text,
| | 05:12 | Selecting it All, and then Cutting it and
then placing my cursor in here and Pasting it.
| | 05:21 | You can see all of that text, I'll
scroll up. But look at my box, look, that
| | 05:27 | black only goes so far down.
| | 05:29 | Well, if I select that AP div, you can
see right in here, oh, look the Height
| | 05:33 | 236 pixels, well, that's not going to
work, I can select that, delete it, hit
| | 05:39 | Enter or Return, and you can see
it fills it up all the way down.
| | 05:42 | All right, so far so good.
| | 05:45 | I think that's working out pretty well,
in fact, I'm going to select Live view
| | 05:50 | just to experience this a little bit
more closely to what the end user will see,
| | 05:55 | and you can tell, look what I have going on?
| | 05:57 | This logo is actually behind this bar
when really I need to change the depth
| | 06:01 | of these items so that's what I'm going to
do next, I'm going to turn off Live view.
| | 06:07 | I'm going to select this AP div.
| | 06:09 | the first one that I drew, the Z-index is
at 1, so it's like closest to the background.
| | 06:16 | Well, I just need to make it higher
than this nav, which happens to be at 2, so
| | 06:21 | if select this one, I can select it, and
you know what? Let's type in 200, okay?
| | 06:26 | Because you can go much higher than say
single digits, and now that always going
| | 06:30 | to be on top, even when I start to draw
more in there just like I plan on doing.
| | 06:36 | So, selecting Live view you can
see all of my content is positioned
| | 06:39 | appropriately, and now I can move on to
the next step, and the next up will be
| | 06:44 | actually customizing the look of this even more.
| | Collapse this transcript |
|
|
3. Stylizing ContentCreating an HTML5 layout| 00:00 | Before diving into all of the HTML code, quite
frankly, Dreamweaver writes most of it for us.
| | 00:06 | We need to understand what's being
written sort of behind-the-scenes and enable
| | 00:10 | us to write some of it if we want to as well.
| | 00:13 | Well, it's all written with HTML, which
happens to be a language for describing
| | 00:17 | web pages, luckily, it's consists of
really just plain text, and that text is
| | 00:22 | surrounded by markup tags in angle
brackets, as you can see here, the title of
| | 00:28 | the page is called My web Page.
| | 00:30 | Luckily, there are plenty of different
HTML tags available, going beyond title
| | 00:36 | we have section headings that
we can implement one through six.
| | 00:40 | We have paragraph text, so any time
you've a lot of content, often times
| | 00:44 | its paragraph text.
| | 00:47 | Even within that paragraph text, you
might have some text that has a link, and
| | 00:51 | that's your h and a ref,
which will link to something.
| | 00:55 | You also have your image source in case
you wanted to insert an image, so these
| | 00:59 | are just common tags you
may or may not be aware of.
| | 01:02 | Going on from that we also have HTML5 tags.
| | 01:06 | HTML5 tags are great, I love them
because they're just a lot more descriptive.
| | 01:10 | And instead of having some generic
divs with some IDs associated with them,
| | 01:17 | you can actually just have some tags that say
header, nav, section, footer, video, audio.
| | 01:22 | Well, hey, I know what most
that means and so do browsers.
| | 01:25 | So it makes it really efficient, easy
for me to develop HTML pages and the
| | 01:31 | browsers can read them fine as well.
| | 01:34 | All of those HTML tags are usually
on an HTML document that's really just
| | 01:38 | structured into three parts, you
have up at the top the HTML version the
| | 01:43 | document conforms to, so if it
just says HTML, it means HTML5.
| | 01:48 | Then there is the head tag and between
those two head tags exist all of the,
| | 01:54 | mostly non-visual contents, you might
have some JavaScript in there, some links
| | 01:58 | to some CSS pages, which are
cascading style sheet pages, things like that.
| | 02:03 | But really most of the content you
are going to be working with is going to
| | 02:07 | be between the two body tags, the
visual content, anything visual will be
| | 02:12 | between those two tags.
| | 02:14 | And all of those tags can be styled
using cascading style sheets, which consist
| | 02:20 | of selectors and declarations.
| | 02:23 | So here we have that paragraph tag,
here's the CSS associated with
| | 02:28 | that paragraph tag.
| | 02:29 | Notice how it does contain a selector
and declarations as well, so it might
| | 02:34 | initially look something like this, but
with the CSS applied, it will actually
| | 02:40 | make the text red and the
font Arial in this case.
| | 02:44 | So that's the foundation for
programming in HTML, as well as a little CSS.
| | 02:49 | Now let's dive into Dreamweaver and
start applying some of this knowledge.
| | 02:53 | Here I am in Dreamweaver, notice I've
the index.html page open, and I have these
| | 02:58 | various divs created, absolute
positioned divs with certain IDs, okay.
| | 03:04 | So you have this apDiv 4, okay, you
have this you know Div2, and really they
| | 03:10 | don't have a lot of meaning.
| | 03:11 | What people would do is they start to
define meaning to these various AP Divs or
| | 03:16 | divs in general, they'd give them a
specific ID name, like I can do here.
| | 03:21 | And watch as I go into Split view I can
just rename this to logo, for instance,
| | 03:28 | hitting Enter, it changes it right here, div id.
| | 03:32 | The id = logo, and it
changes that appropriately.
| | 03:37 | Not only does it change that id
to logo, it changes the selector.
| | 03:43 | So let me go into CSS Styles, selecting
All of the CSS Styles, you can see them
| | 03:50 | all right here, and change that to logo, okay.
| | 03:55 | But what people are actually doing is
they are actually starting to name all of
| | 03:58 | these divs with nav, with section,
with header, pretty common stuff, so those
| | 04:04 | have been standardized with HTML5.
| | 04:07 | So what we can do now is say for
instance, for this one right here, this long
| | 04:12 | bar right here, which is actually known
as apDiv2, I can actually change that to
| | 04:17 | an HTML5 tag known as nav, because
that's what it is it's nav, okay.
| | 04:22 | So let's make it even more descriptive.
| | 04:24 | I can type that in here, but check
this out, I can have that selected, going
| | 04:31 | down here, right-clicking on this tag, I
can use the Quick Tag Editor to edit that.
| | 04:39 | So right in here, deleting what I
have there, type in--oh, look. I have
| | 04:44 | code hinting for HTML5. Right there, I
can select nav, do that less than sign
| | 04:51 | and watch what happens.
| | 04:52 | It's going to change the div id as
well the closing tag right there, hitting
| | 04:57 | Enter or Return, nav, nav, it's all
good to go, but let's take a look.
| | 05:04 | What happened in the styling?
| | 05:05 | Well, the styling is in apDiv2, and
that's not what this is referencing, this is
| | 05:11 | referencing nav, so I just
changed that name to nav just like that.
| | 05:15 | Much more meaning, really
straightforward, and again, a standard works great!
| | 05:21 | Coming down to this next one, as I
select it, this is the apDiv3, again,
| | 05:25 | changing it the same way by right-clicking,
changing that div id and calling
| | 05:31 | this header, why not, H-E-A-D-E--oh there
it is header--selecting that, less than
| | 05:38 | sign, hitting Enter, reapplying that
style, changing this to header as well,
| | 05:44 | that now has lot more meaning,
it's just, much more helpful.
| | 05:48 | Lastly I can select this section of
all this text, selecting that there,
| | 05:54 | right-clicking, editing that,
using the Quick Tag Editor.
| | 05:58 | Again, I can just type it in there if
I want to, but I like how this Quick
| | 06:02 | Tag Editor edits not only the open tag,
but also the closing tag like I did
| | 06:07 | for header, header.
| | 06:09 | So again, section--oh, look it
highlights it--selecting that, less then sign,
| | 06:15 | Enter or the Return key, and you can
see right over here I need to change
| | 06:22 | this to section as well.
| | 06:25 | That is much better, as I go back
into Design view, everything looks just
| | 06:29 | great, not only that, when I'm
working with the code, the CSS, the tags,
| | 06:35 | everything makes sense.
| | 06:37 | And that's also going to
make sense to the browsers.
| | 06:39 | Okay, browser is going to be able to
know how to render these different items,
| | 06:43 | but here it's just going to make it much
more easier for me to work in, now that
| | 06:47 | I've added some HTML5 tags.
| | Collapse this transcript |
| Customizing the style| 00:00 | As you start to add content to your
HTML page, you're going to want to start
| | 00:04 | controlling all the visual aspects of it, and
luckily you can do that with cascading style sheets.
| | 00:09 | Well, what are those?
| | 00:11 | Well, they're a style sheet language used
to describe the design of an HTML document.
| | 00:16 | Also just called CSS, and with this CSS
you can control all these visual aspects
| | 00:22 | of the content, and you can actually
have it separate, because the CSS can
| | 00:27 | separate the content from the design.
| | 00:29 | Take for instance an HTML page, you
might have the content at the bottom and
| | 00:34 | all the CSS will exist at the top, and that will
control all the visual aspects of that HTML page.
| | 00:40 | But know you can also have those CSS
styles external from the HTML page, so you
| | 00:47 | have the external page that you can
work on, and it will affect that HTML page
| | 00:52 | that is linking to it.
| | 00:54 | Taking that a step further, you can
have that one CSS page, and it could
| | 00:59 | actually affect many different HTML pages,
so you can have one CSS file that all
| | 01:05 | the HTML pages are pointing to
that affects the entire site.
| | 01:10 | That's great, because I only have to
update my CSS in one place, so it's going
| | 01:15 | to be more consistent as well, as well
as smaller in file size, because I only
| | 01:20 | have that one reference to the design.
Well, what does this CSS look like?
| | 01:24 | Well, it basically consists of a
selector and declarations, so these are
| | 01:29 | your CSS rules as they're known,
because you have your selector, known as
| | 01:32 | the paragraph tag, in this case the
P element, and the declarations, which
| | 01:38 | are basically a property and value combo. So
you have your selector and then your declarations.
| | 01:44 | Now whenever these selectors are used,
those declarations will be applied.
| | 01:49 | So, in the context of an HTML page, you
might have the paragraph, tags, and when
| | 01:55 | those CSS rules are applied, those
properties are applied to that text wherever
| | 02:01 | the paragraph tags are being used.
| | 02:05 | Luckily, Dreamweaver makes styling CSS
and using CSS and modifying CSS really easy.
| | 02:11 | In fact, they don't to worry
about necessarily dealing with the CSS code,
| | 02:16 | because there are also handy panels
that will do a lot of this for me, enabling
| | 02:21 | me to just pick a color if I want to pick a
color. Dreamweaver makes this really easy.
| | 02:25 | So let's go ahead and dive into Dreamweaver now.
| | 02:28 | Here I am in Dreamweaver, I have my web
page open, and it's looking pretty good
| | 02:32 | so far, but I really want to
tighten this up, and I want more control.
| | 02:37 | And you actually have
that control with CSS.
| | 02:40 | In fact, as I take a look, check this out,
I don't like how that text runs clear
| | 02:46 | up to the edge of that box. Another
thing I like to take a look at doing is
| | 02:51 | maybe making that black semi-transparent.
Or what about rounding the corners?
| | 02:56 | Again, a popular thing to do these days.
| | 02:58 | Also what about adding say a drop
shadow to this text, can I do that?
| | 03:03 | And will it require a graphic? Well, no.
You can do all of this with CSS.
| | 03:07 | And that's what you'll do, you'll
select this, and you'll start to look in the
| | 03:11 | Properties panel and realize that you
don't see any of those options down here, okay?
| | 03:17 | So we need to go beyond this Properties panel.
| | 03:20 | In fact, if we go into the CSS Styles panel,
select All, this happens to be my section.
| | 03:27 | Okay, this is my section selector,
my selector tag, and as I take a look
| | 03:33 | right down here, well, here is all the
properties that I currently have added,
| | 03:37 | which are also shown here, but if I
just double-click on it--or you can always
| | 03:41 | hit this button right down here for
editing that rule, just double-click on it--
| | 03:45 | now you get the CSS Rule
definition for this section.
| | 03:49 | This is great. I can jump in here to the
background, maybe to the box. Okay, this is good.
| | 03:55 | I'm looking in here for this box. That's
exactly what it is. I can add padding to it.
| | 04:02 | So, let's add padding of 5 pixels all the way
around. Clicking Apply, it adds that padding.
| | 04:09 | Nice, I like that. I can take a look
at adding a border, maybe changing the
| | 04:15 | position, all sorts of things, but
another thing I mentioned was changing the
| | 04:21 | background to be semi-transparent.
| | 04:24 | So, you might look in here and take a
look at all these various colors that you
| | 04:29 | can select, and really what I want to
do is I want to go beyond these colors by
| | 04:35 | selecting the flyout menu here, changing
the Color Format from the Six-digit Hex
| | 04:42 | colors to red, green, blue, Alpha.
Ooh! Alpha is going to be transparency. So will HSLA.
| | 04:49 | So, selecting that RGBA, now look when
I select any one of these colors, I get
| | 04:55 | that RGBA, that last number, that
number 1, I can change to .5 to make it 50%.
| | 05:04 | So again, that's that last digit right
here, doing it .5, that's going to make
| | 05:09 | that 50%. I'll click Apply.
You can see that it made it 50%.
| | 05:14 | All right so that's a little too transparent.
I am going to change that to about
| | 05:18 | .8, which is 80%, clicking Apply, and
there we have that, that looks good.
| | 05:24 | All right, so far so good. I'm going
to save this page. In fact, I can select
| | 05:30 | the Live view, and you can see it in
action. It's looking a lot better, but again, I
| | 05:34 | want to round these corners now.
Sounds like a great idea.
| | 05:37 | All right, so, going into that
particular item, I can take a look if I
| | 05:43 | double-click on that, I can start to
look for it in here, and really there are
| | 05:47 | so many CSS, especially CSS3 properties
available these days, it's just
| | 05:52 | going to fill up all of this entire panel.
| | 05:55 | So, what you can do is if I hit Cancel,
I can add a property down here.
| | 06:02 | So check this out, adding a property, clicking,
oh, look at all of these CSS properties.
| | 06:08 | Now it's just a few of them, not that
many, but you can see this long list, okay.
| | 06:14 | What I want to do is I want to change the border
radius. So coming in here, I can select border-radius.
| | 06:21 | Now watch what happens
when I select border-radius.
| | 06:26 | Rather than having to type in some numeric
values, I get this widget, so I can click Edit.
| | 06:34 | Well, look at this corner radius,
I can change that to say 20, okay.
| | 06:41 | And in fact, if I go to Live view,
you can see it already implements that.
| | 06:47 | So again, border-radius was what I was
dealing with. Going back in there, I have
| | 06:51 | Live view selected, I can start to not
only change it from 20 each side, what
| | 06:56 | if I wanted to do 30, I can see as I type
that in, it will actually change it to 30.
| | 07:04 | Let's turn off Same for all and
manipulate the Top Left and Bottom Right to be
| | 07:12 | right angles, hitting Enter, and I
really like the shape, sharp point there,
| | 07:17 | and then it's going to be kind of hard to see,
but down here there is a sharp point there as well.
| | 07:22 | I love this sort of control, doesn't
require graphics, I'm doing it all with CSS.
| | 07:27 | The last thing I want to do is
add a text shadow to this element.
| | 07:34 | Now remember this is my h1, okay,
so it's turning off that Live view.
| | 07:39 | This happens to be my h1. So for that h1, I
can add that property for that text shadow.
| | 07:48 | Again, this panel is going to give you
the most robust control, so text-shadow
| | 07:53 | is what I want to select, text-shadow
and what I want to do from there is again,
| | 08:02 | use that widget to define the offset of
about 5, X and Y, Blur-radius about 5,
| | 08:11 | and let's make that Color, I can
change that to black just like that.
| | 08:16 | Now you don't see it, well, turn on
Live view, and you can see there it is.
| | 08:21 | Pops off just fine, and I can
even manipulate that some more.
| | 08:26 | Just keep in mind this is the h1, so
coming in here I can always change that
| | 08:30 | any way I want, and not only can I
change the color, but I can even make it
| | 08:36 | semi-transparent, say .5, hit Enter, and
you can see that made it a lot softer.
| | 08:41 | It really makes that kind of pop
off the page, which I really like that.
| | 08:45 | So, feel free to play with those numbers,
I'll change the Blur-radius to about 10.
| | 08:49 | I'm liking that more, and in fact,
that's what I think I'll leave it at.
| | 08:54 | All in all, the text is going to be more on
this side, but I'd say that looks great.
| | 08:57 | Really, with a lot of control I'm
able to control the visual elements of
| | 09:02 | this page, everything from the box
elements, any of these tags, I can either do
| | 09:08 | that by editing the properties, by
clicking on them this way, or even adding the
| | 09:13 | property down here, all with CSS and
specific CSS3 properties available.
| | Collapse this transcript |
| Adding rich typography| 00:00 | CSS3 and HTML5 really give you a lot of control
over a lot of your content, including type.
| | 00:07 | And that's what I want to do, I want
to add even more custom control over--n
| | 00:11 | in fact, this line right here.
| | 00:12 | I've already added a nice drop shadow
to it which I like, but really I want to
| | 00:16 | go beyond this, maybe I want to get rid
of the red, and really I want to add a
| | 00:21 | custom font right here, okay, for this
Intellectually elegant, because quite
| | 00:24 | frankly, you can't say
Intellectually elegant and not have a fancy font.
| | 00:28 | Well, in the past that used to have to
be an image, but now I can use a web font
| | 00:34 | for those two words. All right!
| | 00:37 | So, the first thing I'm
going to do is change the color.
| | 00:40 | So, it happens to be my h1.
I can change that maybe to white. Here we go!
| | 00:46 | And now for these words, I
want to create a new style.
| | 00:53 | So, using the CSS Styles panel, I'll go
down, clear it on here into the bottom,
| | 00:58 | and I create a new CSS Rule.
| | 01:02 | And if I take the various selector types,
notice how there's like an ID.
| | 01:07 | There happens to be an ID called logo,
so I've created that earlier.
| | 01:10 | There happens to be tags as well which
include the h1, but really what I want is
| | 01:16 | I want a class, and a class can apply
to any HTML element. Just like a lot of
| | 01:22 | people can belong to a class, well, you
can have many elements on a page that
| | 01:26 | have this class, can have this
fancy font that I'm going to implement.
| | 01:30 | In fact, let's give it a
name of fancy. All right!
| | 01:35 | With that added, that name, I can
select OK, and now I can create a CSS rule
| | 01:42 | definition for fancy. All right!
| | 01:45 | In fact, I can take a look at that
font family, and before I do that, notice
| | 01:49 | that it created that right
over here, here's my class.
| | 01:52 | But let's take a look at the fonts, pretty
standard fonts right here. I'm not impressed.
| | 01:59 | As a designer, I'd want more control.
Well, right down here, I can edit the font list.
| | 02:04 | That sounds like a good idea.
| | 02:06 | I can add these fonts which are
available on my system, but they are not going
| | 02:11 | to be available on other people's systems.
So, I'm not going to worry about those.
| | 02:15 | I need to add a web font, okay?
Web font is going to be available to everybody.
| | 02:20 | So, I'm selecting web fonts, and here I
don't have any added yet, but I'm going
| | 02:27 | to add one now by selecting Add Font.
| | 02:29 | And here, since there are different web
browsers, I actually need different types.
| | 02:35 | So, I need to add a web font.
| | 02:37 | In fact, I need to add multiple web
fonts for various different browsers.
| | 02:43 | Well, more often than not, you're going
to have a TrueType font on your machine,
| | 02:48 | and there are actually services
available that will take your TrueType font and
| | 02:52 | will make these other different versions.
| | 02:55 | You can go to fontsquirrel.com. There
happens to be a font-face generator that
| | 02:59 | will make these additional file
types, which is what I've done.
| | 03:04 | Now if you do have access to the files
for this course, what you can do is you
| | 03:10 | can go into your Assets
folder, into your Fonts folder.
| | 03:15 | You'll notice this Monsieur La Doulaise--
I hope I'm pronouncing that correctly.
| | 03:20 | But there's that font, including the
other fonts that I've used Font Squirrel to
| | 03:24 | convert them to these different types.
| | 03:26 | So selecting the EOT font, selecting Open, it
recognizes the other fonts, we're good to go.
| | 03:33 | In fact, I just need to make sure I've
properly licensed the above font for website use.
| | 03:40 | Another service is actually
Google's web fonts as well.
| | 03:43 | But this is where this font came from.
| | 03:46 | So, selecting OK, selecting Done,
selecting OK, yes, we have to go through all
| | 03:54 | those steps, but now I can
select that particular font.
| | 03:57 | Right down here is where it's listed,
selecting it right there, and I could
| | 04:02 | click Apply, but I don't have
this defined as my fancy class.
| | 04:07 | So, I'm going to select OK.
| | 04:11 | Now, for this text right here, I'll
turn off Live View, but with it selected,
| | 04:20 | I can go to my CSS.
| | 04:24 | And for that CSS, I can apply a new class.
Right down here is where it's listed.
| | 04:31 | Okay, so for that part, I can select fancy. Oh!
| | 04:35 | It looks like it changed, but
it's not quite the right font.
| | 04:40 | Well, it actually is.
| | 04:42 | I'll just save my page, and I'll click
on Live View, and you can see that it is
| | 04:48 | using that particular font. It looks great!
Notice how it added this style sheet CSS.
| | 04:56 | I'm not going to worry about that,
but right down here, here's my fancy
| | 05:00 | class, and there it is.
| | 05:02 | It looks pretty good but could be larger.
| | 05:04 | So, my next step is just double-
clicking on it and then changing the font size.
| | 05:10 | So, changing the font size to let's try 36.
It could actually be larger.
| | 05:15 | Let's go to about 48, clicking Apply,
and you can see how that looks.
| | 05:21 | Looks pretty good, now we'll go a
touch larger to 52 just like that.
| | 05:26 | So that looks pretty good.
| | 05:29 | The last thing I'm going to do in
this case is go back to my Design View,
| | 05:33 | turning off Live View,
and then just moving it up.
| | 05:37 | So, the position from the top, well, I
can take that to say 120 just to see how
| | 05:42 | that looks, clicking on
Live View. Looks pretty good!
| | 05:46 | One last tweak for that item.
Let's take that to 100. All right!
| | 05:52 | Clicking on Live View, that looks good!
So, that's how you can implement a web font.
| | 05:59 | If you do want to see all your web fonts,
you can go to Modify > Web Fonts, and
| | 06:04 | that's where you can add your
various web fonts and make them available.
| | 06:09 | It will appear in that dropdown list.
| | 06:12 | So, that's adding web fonts,
customizing your content, especially your Type
| | 06:17 | content, making it much more flexible
and honestly a lot more fun as a designer.
| | 06:21 | So, take advantage of using web
fonts in your various designs.
| | Collapse this transcript |
|
|
4. Creating a Flexible LayoutCreating a layout that fits all browsers| 00:00 | A recent movement that's going on in the
web today's what is called a responsive
| | 00:04 | design, and that's having your content
respond based on the browser window size
| | 00:10 | as well as even the device
you view your content on.
| | 00:13 | So say for instance, if I scaled down
this browser window, you can see that
| | 00:17 | everything is static.
| | 00:18 | So if you're viewing this on a smaller
monitor, the user would actually have to
| | 00:23 | scroll, so that's not very usable.
| | 00:25 | What if they're on an iPad that's more
like this? Well, again, you have the same
| | 00:29 | issue where they're going to have to
scroll, and it gets even worse as we go down
| | 00:33 | to even a mobile device.
| | 00:35 | So we need to make sure our content
is flexible and responds based on the
| | 00:39 | browser window size.
So that's what I'm going to do.
| | 00:43 | I'm going to start off first with this
Nav bar. With that Nav bar selected, notice
| | 00:49 | right down here, all of these
sizes and positions are fixed.
| | 00:53 | So they're fixed sizes and positions.
| | 00:56 | And what I can do is I can say, hey, you
know what? From the left side, let's make
| | 01:00 | it 5% of that total width will be 5%.
What about the width of the bar entirely?
| | 01:07 | Well, let's make that 90%.
| | 01:10 | So now we have 5%, 90%
and then another 5% there.
| | 01:16 | So I just made it more flexible.
| | 01:19 | In fact, if I save this and even view it
in a browser and resize this window, you
| | 01:24 | can see how that reacts.
That's exactly what I want.
| | 01:28 | In fact, going from there I want this
section to move accordingly. Maybe I
| | 01:35 | wanted to always be 60% of the width
of the browser window and still give it
| | 01:41 | that 5% padding on the side.
| | 01:43 | To keep in mind it's actually
floating on the right side so this will be a
| | 01:47 | little bit different. Going in here
to this item right here, I can select.
| | 01:53 | It happens to be this div and what I
can do for this tag, I can change this say
| | 02:01 | for instance, from the left-hand side.
Well, I don't want it to be fixed at 425.
| | 02:06 | So I'm just going to delete
at entirely, just like that.
| | 02:09 | Well, that doesn't seem
quite right, but we'll get there.
| | 02:13 | The width, well, we can
make it 60% just like that.
| | 02:16 | Well, okay that's good.
| | 02:18 | But how do I make it
float on the right-hand side?
| | 02:23 | Well, I need to go beyond this Properties panel.
Again, it's for this section tag.
| | 02:28 | I can double-click on it to edit the
CSS Rule definition, and I can go down in
| | 02:33 | here to the Box category, and I can say,
hey, you know what? Go ahead and float
| | 02:38 | to the right-hand side.
Float it on the right.
| | 02:42 | In fact, for the Positioning, don't make
the Position absolute, make it relative.
| | 02:48 | That's going to be the Position.
Clicking Apply, it floats it over there.
| | 02:54 | Also, right down here from the right-
hand side, let's give it that 5% padding.
| | 03:00 | Clicking Apply, we can move
that in. That will line up.
| | 03:05 | With all of that in place I can
save this and preview it in a browser.
| | 03:10 | There is my section, and it expands and
contracts accordingly. So far so good.
| | 03:20 | I'm going to do two more things
really fast, and that's these elements.
| | 03:24 | I always want these
elements to be flush with this nav.
| | 03:27 | So closing that I will come in
here for this particular item.
| | 03:32 | Again from the left side don't
make that fixed, make it always 5%.
| | 03:37 | For this element it happens to be the header.
Don't make it 100 pixels from the side.
| | 03:44 | Make that 5% as well of the total
browser width, saving that, previewing it in
| | 03:51 | browser, and now we have that nice and flexible.
It's all locked down, and now we can go from large to small.
| | 04:00 | But what's also happening here--and
this is really the last thing I'm going to
| | 04:04 | visually--is I don't want this
background to get cut out. I really like it.
| | 04:09 | I want the background to scale down.
| | 04:11 | I wanted to still cover, but I want it to
make sure it fills that browser window.
| | 04:17 | So I'm going to have the
background scale, closing that.
| | 04:23 | Now I got to find my background first.
| | 04:25 | So right in here as I select this body
tag, you're going to see it right down
| | 04:30 | here, and I can double-click on it,
and I can go in to the Background right
| | 04:35 | here, and you will start to look in here,
and you'll notice, well, there is this
| | 04:39 | Background-repeat, Background-attachment.
Well, I can change that to fixed.
| | 04:44 | So it's always going to stay in a fixed
position so the content will scroll.
| | 04:48 | So I like that, but that
background cover is not in here.
| | 04:53 | So I'll just click OK.
| | 04:55 | What I can do is I can Add a Property,
because there is actually even more
| | 04:59 | properties available in here.
| | 05:01 | In fact, to look at all these various CSS
properties I can add to this element. So I'll scroll up.
| | 05:08 | I want to locate the background.
| | 05:12 | Quite a few in here, quite a few properties,
and background size is what I want to select.
| | 05:20 | So selecting that.
| | 05:22 | I am going to check out my
options for it to make it automatic.
| | 05:27 | Contain which means it will always be contained.
| | 05:30 | You will see the entire image that I
wanted to cover, regardless of the size or
| | 05:35 | aspect ratio of the browser.
So selecting cover.
| | 05:39 | I think that will do it,
and I will save this page.
| | 05:44 | Here's the fun part.
It's previewing it in a browser.
| | 05:47 | I see that nice full image.
| | 05:49 | Well, what if you're a on a small browser window,
or on a small monitor? That's looks good. It scales.
| | 05:55 | So this is what I mean
when I say responsive design.
| | 05:59 | Having this flexible layout, you can
see how wonderful this works and how
| | 06:05 | beneficial this will be for your end user,
making sure they can see all of the content.
| | Collapse this transcript |
| Making CSS more flexible| 00:00 | Just like you want your web page to
be flexible and fit different screens,
| | 00:05 | different sizes, you also need your CSS, or your
cascading style sheets, to be as flexible as possible.
| | 00:12 | And luckily, CSS does just that
because it enables the separation of the
| | 00:16 | content from the design.
| | 00:18 | And the CSS styles can be
internal or external, so this is great.
| | 00:22 | You can have that separation be, say, at
the top of an HTML page--still internal
| | 00:27 | to that HTML page--or it can actually be a separate
page entirely and they're just linked together.
| | 00:34 | So, this is obviously great because
you can have multiple pages that use that
| | 00:38 | one style sheet, and that CSS
will affect all of those pages.
| | 00:42 | Makes it easy to update, everything
will be consistent, the file size will be
| | 00:47 | smaller since you're just
referring to that one file.
| | 00:50 | So, let's take a look at how we do that,
even moving some CSS from one web page
| | 00:56 | out of it to a separate CSS file.
| | 01:00 | Here I am in Dreamweaver, and I want my
CSS and quite frankly all of my code to
| | 01:05 | be as flexible as the layout.
| | 01:07 | And currently, if I take a look at my CSS,
well, I'm wondering where does this CSS live?
| | 01:13 | How is it set up?
| | 01:15 | Well, if I right-click and go to code, I can
see the CSS right in here. Well, where is it?
| | 01:22 | It's actually inside of my
HTML page. It's all embedded.
| | 01:28 | So, if I happen to need to make
multiple pages, they're all going to have those
| | 01:34 | same CSS styles in each and every HTML page.
| | 01:38 | When really what I need to do is take
all the CSS and put it in an external
| | 01:42 | style sheet, and that happens to be
what's going on here is there's an external
| | 01:47 | style sheet from when I used a web font.
| | 01:50 | So, that's what this is right here,
that stylesheet.css is this style sheet.
| | 01:56 | So what I can do is I can take all of
these CSS styles just Shift-select them,
| | 02:03 | do a right-click, and I can move the CSS Rules.
| | 02:09 | When I do that, note that it's
automatically selected that CSS style sheet right
| | 02:15 | here, and note if you didn't import any
sort of web font, you can create a new
| | 02:21 | style sheet from scratch.
| | 02:22 | But in this case, since I already have
one, I'll just point to it and select OK.
| | 02:27 | Oh! What just happened? Oh!
It indented everything. Says, hey!
| | 02:31 | You know, I am part of this CSS now.
So I can open that up.
| | 02:36 | In fact, if I take a look at my code, I can
see it's all moved. It's no longer in my HTML.
| | 02:44 | In fact, it's inside of this CSS.
And check this out, it's linkable right here.
| | 02:50 | So, I can click on
stylesheet.css. This is nice!
| | 02:55 | As I go into Code View, I can see all
of my code nice and neat just like that.
| | 03:03 | So, that looks pretty good.
| | 03:04 | I'm going to save this document, and
that's one thing you'll have to be aware
| | 03:10 | of is you're going to want to start
saving all your related files, because as
| | 03:15 | you make changes in here, you want to make
sure that it reflected in the source code.
| | 03:20 | But one thing I've noticed in here is,
well, to be honest with you, I'm not crazy
| | 03:27 | about where this stylesheet exists.
| | 03:30 | It's within this Font folder.
That's where the stylesheet.css is.
| | 03:34 | And a good practice is to
have it in a separate CSS folder.
| | 03:40 | So, if I take a look at this specific
folder, I can go ahead and move it, in
| | 03:43 | fact, rename that folder.
So, let me do that now.
| | 03:46 | Here I am, here is my Font folder, and I'm
going to just rename this to CSS just like that.
| | 03:56 | It doesn't bother me that
there are some web fonts in here.
| | 03:59 | It's perfectly fine.
| | 04:00 | I just want to be really clear that
these are my CSS files--will all exist
| | 04:05 | right in the CSS folder.
So I've changed it there.
| | 04:08 | Well, what's going to happen if I go
back into Dreamweaver and go to Design View?
| | 04:13 | If I take a look at it, turn off this
Live View, even turn it back on, you
| | 04:19 | can see that I don't see it initially,
and that's because I need to change
| | 04:26 | this to CSS just like that. All right!
There we have it.
| | 04:31 | I'm going to save all, or I
can save all related files.
| | 04:35 | But I'm saving everything.
My style sheet is now in a CSS folder.
| | 04:41 | If I go to Design View, everything
looks good in Design View, and everything
| | 04:45 | looks good in Live View.
| | 04:48 | Another thing I want to point out
as I take a peek at this CSS is that
| | 04:53 | Dreamweaver was aware of the fact
that there were images that were linked.
| | 04:58 | So, when I moved all these styles
into the style sheet, it knew to change
| | 05:04 | the path to that JPEG.
| | 05:07 | So it actually has to go out a folder
and then back into that Images folder.
| | 05:11 | Let me show you what that looks like.
| | 05:13 | It will go out a folder--so that's what
those two dots are--go out a folder and
| | 05:18 | then go into that Images folder
to find that Background Home, okay?
| | 05:24 | So that's how that works.
| | 05:25 | I like how Dreamweaver is intelligent
on knowing where items are, we can see
| | 05:29 | that everything looks seamless and
works seamless, and now what I can do is I
| | 05:33 | can reuse this CSS across multiple pages.
| | Collapse this transcript |
| Creating a mobile layout| 00:00 | It's becoming increasingly important
to make sure your content looks great
| | 00:05 | across screens, everything from your
desktop to a tablet to a mobile device, and
| | 00:10 | it's only going to get more important.
So how does this look across different screens?
| | 00:16 | Well, I can view this in a web browser
how I've been doing, but another thing I
| | 00:19 | can do, with the Live View on, I can go
ahead and just resize this index.html,
| | 00:27 | and look what's happening. This is the
window size right here. I can see what
| | 00:31 | it looks like. That gives me the exact
positioning of everything and the exact
| | 00:34 | size of that window.
| | 00:36 | So I can scale it down that way to
see how that looks, or I can click these
| | 00:41 | options right here to see the Desktop
size, to see a Tablet size, so 768x1024,
| | 00:48 | and that looks pretty good, and even down
to a Mobile size. So that's the 480x800.
| | 00:56 | So it's a great way to quickly see what your
content will look like across different devices.
| | 01:01 | I'll turn off that one, and know that
right in here for this Window size, you can
| | 01:07 | pick different sizes as well or even edit them.
| | 01:10 | But in this case, everything looks
pretty good except for when I get down to
| | 01:15 | this smaller size. Look what's happening.
| | 01:18 | On a mobile device, look at this, this
text is being cut off. In fact, I think I
| | 01:23 | can scroll over to see it.
| | 01:24 | This content isn't using
efficient use of the space.
| | 01:29 | So I need to start modifying this
appropriately for these different screens.
| | 01:34 | And how I'm going to do that is I am
going to use media queries, specifically
| | 01:39 | one media query that will query the
device even the browser, and it's able to
| | 01:44 | determine the size of that browser
window, and then it will use the appropriate
| | 01:50 | CSS depending on that screen size.
| | 01:54 | And in order to that, we can go
to Modify, down to Media Queries.
| | 02:00 | Media Queries is what I'm picking.
| | 02:02 | And I am just going to write a media
query to this document. That's where the
| | 02:07 | media query is going to exist, make
sure that's checked to force the device to
| | 02:12 | report the actual width, and right
down here this is where I can add as many
| | 02:16 | media queries as I want to.
I'm only going to add one.
| | 02:19 | So I am going to click this plus
sign, it's going to add one.
| | 02:23 | Right down here I can say hey, you know
what? Let's make this for mobile. I can
| | 02:27 | say whenever the Maximum Width is about
800 pixels because this is for mobile.
| | 02:34 | I can use an existing
file, but I don't have one.
| | 02:37 | So I need to create a new
one, clicking that folder.
| | 02:41 | Now remember this stylesheet.css exists,
it's actually in my CSS folder, so that
| | 02:49 | right here that's where that exists so
that's where I actually want to put my
| | 02:53 | mobile.css as well, my new mobile.css.
That initially is not going to contain anything.
| | 03:00 | So that's what I've implemented that
media query that will query the device.
| | 03:04 | If it's the Maximum Width is 800 pixels,
then it will show the CSS in this file,
| | 03:10 | so I am selecting OK. All right!
That's implemented.
| | 03:13 | You can see my original style
sheet and then my mobile.css.
| | 03:17 | But let's take a look as I go to this
Split view. Right in here, here's the media
| | 03:25 | query that's implemented, it says hey,
you know what? We are going to use this
| | 03:30 | CSS file whenever the Max Width is 800 pixels.
| | 03:32 | So that's what it implements, and then I
can take a look at this CSS. All right!
| | 03:36 | Now it's not going to do any good. I
need to pick out the elements that I want
| | 03:41 | to change for my mobile.css.
| | 03:45 | So I am going to be taking items from my
stylesheet.css which initially gets applied.
| | 03:51 | So let's take a look at this.
| | 03:52 | Here's my stylesheet.css. All of these
styles will get applied, and then I can
| | 03:58 | overwrite them by whatever
styles I put in this mobile.css.
| | 04:02 | So let's take a look. As I start to
resize this down, the first thing I am going
| | 04:08 | to do is this section, I actually
want it to expand all the way over.
| | 04:13 | So I want it to be 90% instead of 60%.
So that's what I want to do.
| | 04:19 | And I also probably want to fix this
text, so it wraps to the next line.
| | 04:27 | Those are just couple of the things I
am going to do, and in fact, as I take a
| | 04:31 | look at this, I can go into my Source
Code, it might be easier to check out the
| | 04:37 | different CSS as I can see
right in here, the selectors.
| | 04:41 | This section is what I need, so an easy
way to do that is right-click and just
| | 04:46 | say hey, go to that code.
| | 04:49 | It'll go to that stylesheet.css and
right here here's that section.css.
| | 04:55 | Well, this is what I want, so I can easily
select all of this code right here and copy it.
| | 05:04 | Then I can go to my mobile.css and hit
Return and then right-click and paste it in.
| | 05:11 | From there, in fact if I click Refresh,
notice how mobile.css has that section in it.
| | 05:19 | Now I can manipulate this,
a couple of different ways.
| | 05:22 | Quite frankly, I can double-click on
it and change the Rule definition in
| | 05:26 | here, if I want to.
| | 05:29 | So I can change the Box Width to 90% just like
that, or I can actually type it in right here.
| | 05:39 | In fact, I am going to change the Width to 90%.
I don't want it to float to the right.
| | 05:44 | Okay, so I am going to select None.
| | 05:47 | In fact, if I take a look even at the
Positioning, I can see the Placement,
| | 05:52 | it's going to be 5% from the right side, and I
probably want it to be 5% from the left side.
| | 05:59 | So I am doing everything in this panel.
| | 06:01 | As I click OK, you can see it applied those
changes and implemented it right over here.
| | 06:08 | So I can just as easily start to
manipulate any of these properties in here as well.
| | 06:14 | Say for instance even as I scroll on a
mobile device, I want as much contrast as
| | 06:20 | possible so this text is easy to read.
So I want to get rid of that transparency.
| | 06:25 | So right in here, for the background-
color, this .8 is your 80%. I can change
| | 06:30 | that to 1 just like that, clicking there.
| | 06:33 | And yes, that is very legible. And again,
if you are on a mobile device, and you
| | 06:39 | get some sun glare, it's still going to
be pretty easy to read that text, okay?
| | 06:43 | So that's what I have done,
that looks pretty good.
| | 06:45 | I like how I've implemented this and
overwritten anything that was applied from
| | 06:49 | the style sheet,
basically customized for mobile.
| | 06:52 | Now it looks good, so I will save that.
| | 06:55 | The next thing I need to tackle is this
text right here, okay, because as I size
| | 07:01 | that down, that text gets cut off.
So I need to wrap it to the next line.
| | 07:07 | So if I take a look at that in the
stylesheet.css right in here, that's
| | 07:12 | actually my header that I'm dealing with.
| | 07:15 | So I can Go to Code which will take me
to that stylesheet.css, I can copy that,
| | 07:21 | go to the mobile.css just below that,
hitting Return a couple of times, clicking
| | 07:29 | Paste, pasting that in.
And now I can change mainly the Width.
| | 07:34 | So the Width, I want to the say hey,
you know what? As I scale it down, when
| | 07:39 | it hits about the size right here--see how
it overlaps, kind of gets cut off right there?
| | 07:45 | Well, that's about 680 pixels wide.
| | 07:48 | So maybe at that point,
that's when I want that to change.
| | 07:52 | But really what I want to happen is
kind of, you know, I want this style sheet to
| | 07:59 | be implemented when it gets about that
size, but really I want it to wrap to the
| | 08:05 | next line about 480 pixels. So that's
the size of the box is like this size.
| | 08:12 | So I am going to change this from 680
to 480, like that, click again here, and
| | 08:18 | it wraps to that next line.
| | 08:20 | So let's scale it, it goes from there,
hits that 800 mark, which will implement
| | 08:26 | the mobile.css, and then
it wraps to the next line.
| | 08:29 | So a couple of tweaks I need to do here.
| | 08:32 | The first thing I notice is
this panel needs to move down more.
| | 08:36 | Well, how would I do that?
| | 08:39 | Well, that's the section here, if I
take a look. Well, moving it down from the
| | 08:44 | top right here, I can go ahead and
change that to 260, refreshing, and you can
| | 08:51 | see it's moved it down,
this has plenty of space.
| | 08:54 | Another thing I noticed--and really this
is the last change I want to make here--
| | 09:00 | is this text gets hard to read and
really backgrounds in general might not be
| | 09:05 | the best thing to do on a mobile device,
because you want to just focus on the
| | 09:10 | content and focus on these quick 2-minute
tasks that people are doing while
| | 09:13 | they're waiting in line or in a plane
with their phone during a commercial.
| | 09:17 | So I actually want to not have
that content scale back there.
| | 09:22 | So I still want that nice gradient, a
nice background, but I don't want it to
| | 09:26 | scale and thus make this text illegible.
So I need to take a look at that background.
| | 09:33 | If I take a look over here for the body, right
down here the background-size is set to cover.
| | 09:39 | So let's go right-click, Go to Code,
here's my body right here. I can take this,
| | 09:47 | copy it, go to my mobile.css,
paste to that in just like that.
| | 09:54 | And I am going to change the
background-size from cover to something else.
| | 10:01 | And there is a couple ways of doing
this. I can come over here and select it
| | 10:04 | right in here. In fact, I can change that Auto.
| | 10:07 | Another way to do it is you have code
hinting right in here, so I can just go
| | 10:11 | with that colon, and you can see how
that pops up, auto, so I can select it that
| | 10:15 | way, hit Enter, and there's my semicolon.
So as I click in here, you can see
| | 10:21 | that it changes, and it
doesn't scale down that background.
| | 10:24 | So much easier to read, so much more appropriate
for a mobile device as I scroll up and down.
| | 10:32 | Now keep in mind, technically since I'm
not changing these other elements, I can
| | 10:37 | always get rid of them.
| | 10:39 | And it's often a good idea to do so
because it just means more lines of code
| | 10:43 | that you don't need so I can jump in
here, start getting rid of that, getting
| | 10:48 | rid of this line and
anything else that I didn't change.
| | 10:52 | So for the section just like that, the floating,
the padding, I didn't change any of that.
| | 10:59 | You can really start to slim it up and
eliminate a couple more lines right in
| | 11:05 | here, in fact, these three. And look, this is all
I've done. I have just manipulated these properties.
| | 11:13 | Now keep in mind, this is a separate
CSS file, has that little asterisk, says
| | 11:19 | hey, you know what? I haven't been saved yet.
| | 11:22 | So always just save all related files
just like that, and you could always hit
| | 11:27 | the Refresh button which you can
easily see how that's implemented.
| | 11:31 | But let's take a look because I actually
did eliminate something that I actually
| | 11:35 | should've kept in here, and it's
actually has to do with the section.
| | 11:39 | So if I go down in here to the
section, and the thing that I actually need to
| | 11:45 | fix is the float, okay. So that's something
I actually eliminated that I didn't mean to.
| | 11:50 | So I am going to change this to
None just like that. All right!
| | 11:56 | There we are, it's nice and
centered, everything looks good.
| | 11:59 | I can save all my related files, I can
view it right in here if I want to, watch
| | 12:03 | that scale up and down, I can even view
it from Desktop to tablet, clear down to
| | 12:11 | mobile device. You can see
how everything is laid out.
| | 12:15 | So that's how you can easily take your
current content and actually restyle it
| | 12:20 | so it fits appropriately. Regardless
of the screen size, you can implement as
| | 12:25 | many media queries as you want.
| | Collapse this transcript |
|
|
5. Adding Navigation and PagesAdding a menu bar| 00:00 | No website would really be complete
without having some form of navigation,
| | 00:05 | and that's what I want to implement now is
basically a menu right up here at the top.
| | 00:09 | You can see I have some text here.
And what I can do is I can select, say, for
| | 00:13 | instance the about word. I can go to
my Properties panel and with the HTML
| | 00:18 | selected, I can type in some URL or
some link to a page, like about.html, and I
| | 00:24 | can link it up that way if I want to.
| | 00:26 | And I'll pick up the link
colors that we'll do. But that's
| | 00:30 | pretty straightforward.
I want to go beyond that.
| | 00:32 | I want to create something custom
and something that's very flexible.
| | 00:36 | In order to do that, what I'm going to
do is I'm going to the Insert panel and
| | 00:41 | I'm going to change that to Spry.
| | 00:44 | I'm going to the Spry elements,
all of these widgets that I can implement.
| | 00:49 | What Spry is is it's just a series
of related web technologies such as
| | 00:53 | JavaScript, CSS, graphics, all the
stuff that I didn't have to create that I
| | 00:58 | could immediately take advantage of.
| | 01:00 | So I'm going to use the Menu Bar, but I
encourage you to check out some of these
| | 01:05 | additional items as well.
| | 01:06 | So keeping in mind where my cursor
is, right in here in this nav bar, I'm
| | 01:11 | selecting Spry menu bar.
| | 01:15 | You can see, right off the bat, I can
already customize whether I want it to be
| | 01:19 | vertical or horizontal.
| | 01:20 | Going with horizontal, click OK. There it is.
| | 01:23 | It already creates. It adds it as well so.
| | 01:29 | What I'm going to do first off is save
this page now, because what happens is
| | 01:34 | it adds all of these various files that I
didn't have to write or create or anything.
| | 01:39 | So I can go ahead and just add those.
And notice you'll start to see this Spry
| | 01:43 | menu different places.
| | 01:45 | I don't really need to worry about
these files too much, because it's really
| | 01:49 | easy to customize by just selecting it.
| | 01:52 | Selecting the Spry menu bar, and the
first thing I'm going to do is start to
| | 01:57 | customize some of the text.
| | 01:58 | So if I go to a Live View, you can see
that it's just sort of basic names, and in
| | 02:04 | fact there's some colors
that I need to customize.
| | 02:07 | But you can see I have Item 4.
I can roll over this Item 3.
| | 02:10 | It has a submenu as well as additional submenus.
| | 02:14 | So how do you customize this?
| | 02:15 | Well, I'm going to turn off the Live
view, selecting that Spry menu bar, in my
| | 02:20 | Properties panel, here we have it.
| | 02:22 | For instance, Item 4, like I just
highlighted. I can select it. I can change
| | 02:28 | the text for that item
to contact, just like that.
| | 02:32 | So I'm just mimicking this text over here.
| | 02:36 | Let's go up one to Item 3, which is
this third item, and that's where
| | 02:40 | those submenus exist. Look at that!
| | 02:43 | I can select to that last item.
I can customize it and link it to a
| | 02:46 | different page if I want this submenu,
or I can just get rid of it altogether by
| | 02:53 | clicking that minus sign.
| | 02:55 | There's that tertiary menu as well which
you can add, and again I can just remove
| | 02:59 | those, remove that one.
| | 03:01 | Just remove or even add, whatever you need to.
| | 03:04 | Item 3 is actually going to be the
portfolio, like that, hitting enter.
| | 03:09 | And again, I can customize the link
so this says portfolio.html, and we'll
| | 03:15 | actually link to that page if I want to.
| | 03:18 | But I'm not going to worry about that right now.
| | 03:19 | I think when I add those pages
I'll make sure I type in the name.
| | 03:23 | Item 2, this will be my About page,
adding that in Item 1, again removing those
| | 03:30 | submenu items and calling
that home. There we are.
| | 03:36 | In fact, if I click Live View, you can
see my menu right there, and I can also
| | 03:42 | see those rollovers as well.
| | 03:44 | So, pretty slick, as I turn off Live View.
You can customize this all you want
| | 03:49 | regardless of what it currently says.
| | 03:51 | You can change that, add you
know, different menus as well.
| | 03:56 | In fact, all I need is get rid of
that right now and save my page.
| | 04:02 | So selecting Live View, my next goal is
to really just jump in here and start to
| | 04:06 | customize the look of this as well.
| | Collapse this transcript |
| Customizing the menu bar| 00:00 | Anytime you start working with maybe
a template or any added widgets, you
| | 00:04 | immediately not only want to start
customizing the content, but also how it looks.
| | 00:09 | And what I've done is I've
inserted this Spry menu bar right up here.
| | 00:13 | It's my navigation.
| | 00:14 | As I take a look in my Insert panel,
that's where it's come from. And it's
| | 00:19 | added that menu, and as I select it,
you can see I was able to customize the
| | 00:25 | text, but I want to go beyond of this,
because if I select Live View, you can
| | 00:29 | see how that looks.
| | 00:31 | In fact, as I roll over these
different buttons, or these links, you can see
| | 00:36 | what that looks like.
| | 00:38 | So what I need to do is I actually
need to move this whole menu bar over to
| | 00:42 | the right-hand side.
| | 00:43 | I want to change the rollover color
to give it that red pop. I want to
| | 00:47 | center the text, and I also want to make sure
this expands the entire height of this nav bar.
| | 00:54 | So those are the changes I need to make.
So I need to start changing the style of this.
| | 01:00 | How I do that, you guessed it. I would
go to the CSS Styles. Right down here,
| | 01:05 | oh, look SpryMenuBarHorizontal.css
stylesheet that was added. This is great.
| | 01:11 | So I could jump in here and start
checking out these different items.
| | 01:15 | In fact, I can start to see even
maybe where that blue is coming from.
| | 01:22 | So I encourage you to kind of
click through these and see where
| | 01:26 | things are coming from.
| | 01:27 | I want to change the whole horizontal
bar and move it to the right-hand side.
| | 01:32 | I can modify the properties here or I
can just double-click on the selector.
| | 01:37 | Double-clicking on it opens up
this rule definition, and I can start
| | 01:41 | modifying it from here.
| | 01:43 | In fact, if I go down to Box category,
I want to float it off to the right-hand side.
| | 01:50 | Well, let's go to Float, and let's
float it to the right. So I hit Apply.
| | 01:55 | It moves it over there.
| | 01:57 | With that done, I'm going
to go ahead and click OK,
| | 02:00 | because I want to start modifying
each one of these links. That's right.
| | 02:04 | These are actually links.
| | 02:05 | So I want to come down here. What is that A?
| | 02:08 | So that A means it's a link, the A link,
and as I select it, I'm able to see, oh,
| | 02:14 | that's where that
background color is coming from.
| | 02:17 | That's where the color of
the text is coming from.
| | 02:20 | So I can double-click on that selector
if I want to, or I can change it right in
| | 02:24 | here, changing that background color or
even maybe turning it off, if I want to,
| | 02:29 | entirely, just like that, and
changing the color of that text to red.
| | 02:33 | Well, that's looking better.
| | 02:36 | I like how that's coming
along, looking very nice.
| | 02:39 | Now if I go ahead and roll over any one
of these links, you can see I actually
| | 02:44 | need to center that text to make
sure it fills this entire nav bar.
| | 02:48 | Those options actually aren't right in here,
| | 02:50 | so I do need to double-click on it.
| | 02:52 | This selector, if I double-
click on it, I can edit it now.
| | 02:56 | So going into the Block
category, I can align the text.
| | 03:03 | So here I'm going to center the text,
clicking Apply. It will move it over.
| | 03:09 | So now it is centered, and that looks
good, at least horizontally, but now I need
| | 03:13 | to center it vertically as well.
| | 03:15 | So in order to do that, I'm going to go
to the Box category. And right in here for
| | 03:20 | the Height, I happen to know the height
is about 31 pixels. I can click Apply.
| | 03:27 | So I've just made the height 31 pixels.
| | 03:29 | Let's take a look at that, by
the way. I'm going to click OK.
| | 03:32 | It did make that height 31 pixels, but
what's going on here? Where did you
| | 03:36 | get that 31 pixels?
| | 03:37 | Well, if I go into my
stylesheet.css, I can check my nav bar. You can
| | 03:41 | see that it's 31 pixels high.
| | 03:44 | But still, I have that same issue
where really this isn't working.
| | 03:48 | It's not the right size.
| | 03:50 | So I'm going to double-click on it and
just to make things easier, I'm going to
| | 03:53 | change that background color, maybe to
white, just so I can see the size of that
| | 03:59 | box, because that's what I
was manipulating is this box.
| | 04:03 | But as I take a look in here,
look, there's padding around it as well.
| | 04:08 | So I might want to just check Same for
all and maybe just clear this out entirely.
| | 04:12 | So let's see what happens. Click
Apply. That's much better. That's good.
| | 04:16 | It actually fits that height.
But my text is up too high.
| | 04:21 | So what I can do now is to turn off
Same for all, and right in here I can space
| | 04:26 | it down from the top, let's say about 10 pixels.
| | 04:30 | Clicking Apply. Let's change this
to pixels, by the way, clicking Apply.
| | 04:35 | And it's centered it
| | 04:37 | so that looks a lot better, but they're
still adding that 10 pixels to that 31.
| | 04:43 | So it's actually 41 pixels high.
| | 04:45 | So all I need to do in here is change
the height to 21, because 21 plus 10
| | 04:50 | equals 31, and there we have it.
| | 04:53 | I'd say that looks pretty good.
I like how this is coming along.
| | 04:57 | In fact, I can go back in here to the
background and remove that background
| | 05:01 | color just by clicking the
Delete and Apply. I like that.
| | 05:06 | Clicking OK. Everything is
looking pretty good so far.
| | 05:10 | A couple more things I need to do.
| | 05:12 | I'm noticing this rollover color.
| | 05:14 | It's not bad, but I might
want to change that to red.
| | 05:17 | So it's just a matter of finding that color.
| | 05:21 | So that's where it is,
this a hover is what it is.
| | 05:25 | Changing that blue to red. In fact,
any submenu items that have that same
| | 05:31 | highlight I'll change to red, and
really it's just a matter of finding any of
| | 05:36 | that blue color and changing it accordingly.
| | 05:39 | With that done--and keep in
mind that I do have Live view on.
| | 05:42 | That's what enables me to see it,
and everything is looking good.
| | 05:46 | Now keep in mind this page is responsive
| | 05:49 | so I need to see how it looks maybe even
as it responds to different screen sizes.
| | 05:55 | I will even go down to this Mobile size.
| | 05:57 | So I'm checking it. I'm realizing, you
know what, this bar is still just too wide.
| | 06:03 | So I need to condense this menu.
| | 06:06 | And that's really how I had the original design.
| | 06:08 | So turning off the mobile size, I need to
get rid of all of this padding at least.
| | 06:13 | So I don't have as much of it. And what I'm
going to do is I'm going to go in here to,
| | 06:18 | well, it's not my menu bar horizontal,
because it actually covers the entire area.
| | 06:24 | This happens to be list items,
so that's what these are, list items.
| | 06:31 | And in here this is where I need to start to
take a look at, you guessed it, the width.
| | 06:37 | So I was able to discover the width
right in here for these list items, and from
| | 06:42 | here I can change this to 8 ems to,
let's drop this down to about 5 ems.
| | 06:50 | Hitting Return, and it's moved it
over to the side. And that's much better.
| | 06:55 | That's how I like it.
| | 06:56 | Let's go down to my mobile version, and you
can see how everything fits in nice and neat.
| | 07:02 | So really, it's just a matter of once
you've added any sort of widget, to be able
| | 07:07 | to customize it based on the CSS.
And really, it's just a study and figuring out
| | 07:12 | where some of those elements are
and understanding how to modify them.
| | 07:17 | It's pretty easy, either using this
Properties panel or double-clicking on the
| | 07:21 | item right there. But with the set up
I'd say my page is looking pretty good,
| | 07:24 | and I can move on to even
starting to link up these various pages.
| | Collapse this transcript |
| Creating and linking multiple pages| 00:00 | Once you have one page for your site
created and looking good, you can then
| | 00:05 | start to create the other various pages.
| | 00:07 | In this case, I have the homepage
created known as index.html, and now I need to
| | 00:12 | create the about, portfolio, and contact pages.
| | 00:16 | Notice even as I click on them, they're not
going anywhere, so I need to hook up this menu too.
| | 00:21 | So that's my goal: hook up the
menu and make those various pages.
| | 00:24 | So I'm going to go into Dreamweaver.
| | 00:27 | Here I am, in Dreamweaver.
| | 00:28 | I can select this Spry Menu Bar, and I
want to link up these different items as
| | 00:33 | I select the home item
right here, that specific button.
| | 00:38 | The link just has a pound sign
in there, so it says you know what,
| | 00:42 | I know I am a link, but I don't really
go anywhere. Well, I can change that.
| | 00:46 | In fact, if I click that Browse button,
| | 00:48 | notice that I can go ahead and
select any file that I have in here.
| | 00:52 | And if you have access to the
Exercise Files/Chapter 05/03 Begin, that's
| | 00:55 | what I'm referring to.
| | 00:56 | Selecting that file, selecting Open,
and it just puts it right in there.
| | 01:01 | Moving on to the about page, well, you
know what, an about page it doesn't exist yet.
| | 01:05 | Well, that's easy enough. I can just
type in here "about.html" and just keep in
| | 01:10 | mind that's what I called it.
| | 01:12 | Going to the portfolio, doing the same
thing, portfolio.html, contact. You got
| | 01:21 | it, contact.html, just like that.
| | 01:23 | All right, my menu is hooked up, and I
need to start making those pages now.
| | 01:28 | So I'm going to save everything,
is what I like to do. And with this design
| | 01:33 | set up and everything looking good, I can now
go to File > Save As and save an about page.
| | 01:42 | There's my about.html. Here we
have it: index and about.html.
| | 01:48 | So for my about.html page I can
start to customize some of this text.
| | 01:52 | Right down here you can see for
this About page, you know what? I can
| | 01:57 | eliminate that text there.
| | 01:59 | And you can see for the About page
has a resume and additional content.
| | 02:03 | I can remove that text as well.
| | 02:05 | All right, that's my About page.
In fact, I want to change some of this text.
| | 02:11 | In fact, I do actually want to call
this Eva Jones. And this will be about,
| | 02:20 | okay, just like that.
| | 02:22 | So it says about Eva Jones. So let's
click on Live view. That looks good.
| | 02:27 | It looks like a great about page,
and then I can save that.
| | 02:30 | All right, going back to my index.html
page, because this also has content for my
| | 02:37 | portfolio page, so I can save this as
my portfolio page, same folder,
| | 02:42 | just like that. And right in here I can start to
just make sure this contains the
| | 02:51 | items, as I scroll down, Graphic Design
and Motion Graphics. That's what I need it
| | 02:57 | to say, removing that content.
| | 02:59 | In fact, right in here and in this case
again Eva Jones, and in this case what I
| | 03:08 | want to do, portfolio.
| | 03:11 | I want to move this, taking this, I'm
going to cut it, paste it on that side.
| | 03:17 | That looks good, and I can
insert more content in there.
| | 03:20 | But overall, that looks great.
I'm going to save this page, going back to my
| | 03:24 | index.html. I'm going to save my
final page, which is going to be my contact
| | 03:30 | page, doing a Save As. It saves it to
the same folder, clicking Save, right in
| | 03:35 | here. Scrolling down, getting rid of
all of that other content except for that
| | 03:42 | Let's connect contact page information.
So in this case I can say, contact Eva Jones.
| | 03:54 | All right, clicking in Live view. It looks great.
I can add more in here if I want to as well.
| | 04:02 | Saving this page, actually saving
everything and from there, what I can do is even
| | 04:10 | test it in a web browser.
| | 04:13 | So here I'm testing the contact page.
Well, let's click on the homepage. Yup, works great.
| | 04:19 | Clicking the About page, clicking the
portfolio page, and the contact page.
| | 04:24 | But I want to customize this even more.
I want to customize the style. In fact,
| | 04:30 | I want the style to be consistent across
all the pages, but I want to change the
| | 04:35 | background for each page.
| | 04:38 | So what I want to do there is starting
with this contact page, I can add a style.
| | 04:44 | Okay, so it's actually referring to
these various style sheets which are all
| | 04:48 | external, but in this case if I want to
customize any of the look specific to a
| | 04:54 | specific page, I can add a new style
just by clicking here, New CSS Rule.
| | 05:01 | And I can add a new
selector and even selector name.
| | 05:06 | So in this case I want to change the
background. That's going to be B for body.
| | 05:13 | Selecting OK and from there I
can create a new background.
| | 05:18 | In this case, I'm going to reference a
new background image that's going to
| | 05:23 | overwrite this current one.
| | 05:24 | So I'm going to select Browse,
and I'm going to go to my images folder.
| | 05:31 | And if you do have access to these files, I'm
going to go into the 03 Begin images folder.
| | 05:36 | Notice right in here, since I'm dealing
with the contact page, I can select that
| | 05:40 | background contact that I've
exported earlier from Photoshop.
| | 05:44 | So selecting Open, I can
click Apply. Oh, and there it is.
| | 05:48 | Looking good. I'll click
OK. That looks great.
| | 05:52 | But what happened? Well, let's take a look.
| | 05:55 | As I look at my CSS Styles panel, I can
see that body. This is what it's added.
| | 06:02 | This body is actually, if I go to the
code just by right-clicking, this is
| | 06:08 | actually just internal to this HTML page.
| | 06:12 | So it's just specific to this HTML page.
| | 06:15 | So this is basically saying, hey you
know what, all that other style, just go
| | 06:19 | ahead and apply it as you usually
would, and anything I want to overwrite or
| | 06:23 | apply specifically to this page I would
just add internal to this page like I just did.
| | 06:30 | So that's how that's set up.
It cascades, as it's known as a Cascading Style
| | 06:34 | Sheet, cascades down applies this CSS
and then overwrite that original image
| | 06:40 | with this one, okay.
So it works out great.
| | 06:42 | I like that. I can save that. I get
that nice customization. In fact, let's move
| | 06:48 | on to the portfolio page, right in here,
with that selected, adding that new tag
| | 06:56 | known as the body, and I
can type in body if I want to.
| | 07:00 | Selecting OK, going to the background,
then browsing to that background for that
| | 07:09 | portfolio page, which is
right here, background port.
| | 07:14 | Selecting OK. And you can see it's
changed; it has these feathers which
| | 07:18 | are pretty cool.
| | 07:20 | Saving this page, going into this
About page, and now what I can do is again,
| | 07:27 | just be mindful of what you have
selected, because if I have this selected, it's
| | 07:31 | going to actually add it to a CSS page.
So just that style is selected.
| | 07:37 | I'm adding a new CSS rule.
| | 07:40 | It's going to be a tag known as body,
and again you can type it in there or
| | 07:45 | select it from the dropdown.
| | 07:48 | Selecting OK. Going into the Background category,
this is my last one. There's my about image.
| | 07:58 | Appropriate, since its Eva Jones.
| | 08:01 | All right, everything looks good.
| | 08:03 | Since I start to deal with these
multiple pages, I get in the habit of
| | 08:07 | just saving everything.
| | 08:08 | Okay, so I just save all. We can preview
this in a browser. Here it is. You can
| | 08:15 | see that image. It takes on all those
characteristics of that stylesheet.css, so
| | 08:21 | it expands and contracts accordingly.
| | 08:24 | And then as I click on, say, the Home link,
you can see it changes that background.
| | 08:30 | All right, let's do some more, going
to the portfolio page. I love this.
| | 08:34 | So the style is consistent. The user is
used to the nav and where all the content
| | 08:39 | is being positioned, but each
page has its own unique look.
| | 08:44 | So that's how you can easily create
multiple pages, link them together, and even
| | 08:49 | customize them for a unique style per page.
| | Collapse this transcript |
|
|
6. Adding a PortfolioAdding a gallery widget| 00:00 | Dreamweaver gives you the ability to
add HTML, JavaScript, CSS to pretty much
| | 00:06 | create whatever you want. But you don't
need to create everything from scratch;
| | 00:10 | you can use the Insert panel,
has a bunch of Spry widgets.
| | 00:15 | As I've used here, this happens to
be the Spry Menu Bar widget, as you can
| | 00:20 | see right down here.
| | 00:21 | So I encourage you to check all of
these out. There is some really good stuff.
| | 00:25 | But I can go beyond this Spry Insert
panel, and I can add additional widgets,
| | 00:31 | because what I want to do is I want to
add a gallery under these words Graphic
| | 00:36 | Design, so that's what I'm going to do.
| | 00:39 | Notice I have Live View turned on.
I'm going to turn that off, and right in
| | 00:43 | here, as I hit Enter, it's going to create a space
there because that's where I want to insert it.
| | 00:48 | Well, where is it going to come from?
| | 00:50 | If I go to the Insert menu,
go down to Widget, right in here.
| | 00:55 | I currently don't have any widgets
available, but I can easily solve that by
| | 01:00 | going to this Widget Browser,
selecting that. That will launch the Widget
| | 01:05 | Browser, as you can see here.
| | 01:07 | And know that you might have to
accept some terms and conditions, but
| | 01:12 | nonetheless, once you do, you can start to
scroll through all of these various widgets.
| | 01:19 | You can even search, so if you
want a gallery, you type in gallery.
| | 01:23 | If you want a Lightbox, as they're
also known, you can type in Lightbox.
| | 01:27 | And as I do that what I want is
this Clearbox Lightbox. Fairly new.
| | 01:34 | If I select it, it's going to ask me to
sign in, so just sign in with your Adobe
| | 01:39 | ID, which is what I'm doing now.
| | 01:41 | So sign in. Know that you can also
create an Adobe account as well. It is free.
| | 01:49 | And once you do that, you click Sign In and
then you'll have access to all those widgets.
| | 01:54 | All right, here it is, my Clearbox
Lightbox. It's great because I can add images,
| | 02:02 | video, audio, Flash content,
all as part of my portfolio.
| | 02:08 | I'll scroll down. I love seeing this
under the Compatible Browsers, the word
| | 02:12 | ALL across all these different browsers.
| | 02:15 | So it's going to work out great
It's going to work cross browsers.
| | 02:18 | Sounds good to me. I'm going
to click Add to My Widgets.
| | 02:21 | Also I like seeing the word Free,
so it's totally free to use.
| | 02:25 | I'll click Accept, and now that it's
been added, I can select Go to My Widgets.
| | 02:31 | So I was on Adobe Exchange. Now in My
Widgets, and I can select it. And now you
| | 02:36 | can see a live view of the actual widget.
| | 02:41 | So I can see how it works, and I can
select an image. I can select any of this
| | 02:45 | content, and as I do, this new window pops up.
| | 02:48 | I can hit Refresh if I want, but really,
I want to use this button here, Drag and
| | 02:54 | Drop in Dreamweaver.
| | 02:56 | So moving that down, I can select Drag
and Drop, just click and drag right over
| | 03:03 | here, release. As I do
that, it adds it. I love this.
| | 03:10 | Since I've added that widget, I want to
save my file, and when I do that, what
| | 03:15 | happens is it shows all these various
files that are going to get copied over,
| | 03:19 | all the stuff that I didn't have to
create, these various examples, all sorts of
| | 03:23 | good stuff that I didn't have to create.
| | 03:25 | So I'm selecting OK. Now let's
preview it in a browser, just to see how
| | 03:30 | everything works within the context of
my page. And you can see it right in here.
| | 03:34 | So there is that image, clicking on it.
I love that transition. I get the image.
| | 03:41 | In fact, I can click to the next image and
for all this content I can see right in here,
| | 03:48 | I get a title and then a comment down below.
| | 03:51 | In fact, as I roll over this, you can
see that filmstrip that pops up as well,
| | 03:55 | allowing me to navigate to a different image.
| | 03:58 | So you can see this is pretty robust, very
powerful, how I can add all of this content.
| | 04:03 | All right! I love this.
| | 04:06 | I'm glad I actually have implemented
it. And it's really that easy. You can
| | 04:11 | see it right there.
| | 04:12 | And anytime I want to insert it,
I can go to Insert > Widget, and now it
| | 04:17 | actually appears in my list right here.
| | 04:20 | So really, my next step with this is
start to replace these example images
| | 04:26 | with my own images.
| | Collapse this transcript |
| Changing the content| 00:00 | Anytime you use a widget you probably want to
go in and customize it with your own content.
| | 00:06 | In fact, that's what I want to do.
I happen to use this Lightbox widget right
| | 00:10 | here, which gives me a great portfolio.
| | 00:13 | And how I've inserted it is I went to
Insert > Widget and I've added it by
| | 00:18 | going to the Widget Browser.
| | 00:20 | So that's how I've inserted it, and
now I need to customize it, because these
| | 00:24 | are actually example files.
| | 00:25 | In fact, as I select it, you can see
right down here, in my Properties panel, that
| | 00:32 | it gives me this example/thumbs.
| | 00:34 | Well, I need to replace
that with my own content.
| | 00:38 | So I'm going to click Browse for File
to replace that thumbnail. You can see
| | 00:42 | this example folder is actually what's
been added since I added that Lightbox
| | 00:47 | gallery. So I'm going to go out to my
02 Begin folder. And really, what you want
| | 00:51 | to do is use your own files for this,
but if you do have access to the example
| | 00:56 | files, you can go into images. You can go
into thumbs and right in here, here is port1.
| | 01:01 | I'll just hit the spacebar, and you
can see that small image happens to be
| | 01:05 | 72x72 pixels. It's just small and appropriate
for my gallery. Selecting Open and there it is.
| | 01:13 | Now it's still linking to that Dancer
image, that example image, so I need
| | 01:18 | to replace where it links to, by
going back out to my 02 Begin folder and
| | 01:25 | going into my images folder and pointing to,
inside of the slides folder, that port1.jpg.
| | 01:34 | Hitting the spacebar, you can
see what will be displayed.
| | 01:36 | So this is what I want, something that
I've created, something I've shot. It looks
| | 01:40 | great and again, selecting Open.
| | 01:44 | So I've changed those two references,
In fact, this Alt text says Dancers in
| | 01:49 | Red. Well, that's not going to work for me.
| | 01:52 | It's Venice, Italy, adding that
Alt text or changing that Alt text.
| | 01:57 | Now let's take a look at this. As I
save the page, I'm going to preview it in a
| | 02:02 | browser, just to see how that one image looks.
| | 02:05 | Rolling over it. Now it says Dancers.
| | 02:08 | Where does that come from?
| | 02:09 | We're going to take a look.
| | 02:11 | As I select that image, you can see
that get larger. That says Dancers
| | 02:15 | and Dancers in Red.
| | 02:17 | So there are still a couple
more things that I need to change.
| | 02:20 | So I did want to show you sort of
some of those areas that still need to be
| | 02:24 | changed, because they are
actually not available down here.
| | 02:27 | So you do reach this point where
you need to go in and change some of the
| | 02:32 | code, so that's exactly what I'm
going to do. With this image selected,
| | 02:36 | I'm going to go to the Code view.
| | 02:39 | All right, here I am, in the Code view.
I'll scroll down, and it's this div right
| | 02:45 | here. This is that image.
| | 02:48 | So you can see this is what
I've changed, the path to the slide.
| | 02:53 | I also change the path to the thumbnail
but you can see that comment. Oh, that's
| | 02:58 | where that comes from.
| | 02:59 | I can change Dancers in Red to Venice,
Italy, 2012, just when that was taken.
| | 03:07 | And the title right here,
I can change that to Venice, okay.
| | 03:11 | And lastly, this Alt text, that's
Venice, Italy as well. All right!
| | 03:16 | So that's what I've done. I was able
to change those additional items--the
| | 03:21 | comment, the title, the Alt text.
Everything should be pretty good now.
| | 03:26 | I'll click the Design view, and I'm
going to save this page and just preview it
| | 03:31 | in a browser one more time.
| | 03:33 | As I roll over, ah, there
we go, Venice, more like it.
| | 03:38 | As I select it, right down
here, Venice, Venice Italy.
| | 03:42 | Well, that's only one that I've done.
| | 03:45 | Now I would have to go in and do the
same thing for these additional images.
| | 03:50 | There's a couple of ways we can do that.
| | 03:52 | I can select this image here, and I
can change it the way I always have.
| | 03:56 | So Browse for File, going to my 02
Begin folder. Inside of that images folder,
| | 04:03 | inside of that thumbs folder, that's my port2.
| | 04:07 | Hit that spacebar. That's what it
looks like, and changing it that way.
| | 04:13 | So I'm changing that source and
then changing it, what it links to.
| | 04:17 | So 02 Begin/Images/Slides as well.
| | 04:22 | All right, but I have
quite a few images in here.
| | 04:26 | Click Open. And I've done two so far, and
I still have to go into Code view, okay.
| | 04:32 | I can go into Code view to start to change this.
| | 04:36 | And that's what I'm going to do.
I'm going to change the comment to Lost in
| | 04:40 | Flight book cover, title is Lost in
Flight, and I'll just copy this and paste
| | 04:53 | it for the Alt text. All right!
| | 04:56 | So I don't need to keep going to the
Properties panel; in fact, what I can do is
| | 05:00 | I can just take this and I can just
copy it and paste it below and just change
| | 05:06 | the numbers and the additional content.
| | 05:08 | In fact, that's what I'm going to do.
| | 05:09 | I'm going to copy this, and instead of
having all of these various items as I
| | 05:18 | scroll down, I don't need most of it.
| | 05:21 | So you can see clear down here this final div.
| | 05:24 | I can select all this code. Or another
way to do it is going into Design view.
| | 05:30 | See how I've selected it?
It already actually highlights it.
| | 05:34 | Well, again selecting all of that code,
all of those images and clicking Delete.
| | 05:43 | Going back into Code view, I've deleted
all that content, hitting Return after
| | 05:52 | that last div there, and pasting in
that exact div that you see above.
| | 05:58 | And then I can start swapping out this content.
| | 06:00 | This is the fast way to do things, to
start to changing some of these items the
| | 06:05 | way you would, making reference to
the appropriate images, changing the
| | 06:08 | appropriate comments, titles, Alt
text, to really build out your portfolio.
| | 06:14 | All right, now that I've added all the
images, I can go ahead and take a look at them.
| | 06:19 | Everything is customized.
And let's preview this in a browser.
| | 06:26 | You can see right in here, here's all
those various thumbnails. I can select them,
| | 06:32 | whichever one I want. Not only that,
it gives me the title as well as the
| | 06:36 | comment right down here.
| | 06:37 | I can click to the next image.
You can see how that looks
| | 06:40 | customized, customized.
| | 06:42 | Even as I roll over, I can click on the next one,
just like that. Everything looks good.
| | 06:50 | So again, I was just able to copy and paste
a div and then just customize it accordingly.
| | 06:57 | You can see everything is looking great.
| | 07:00 | The last thing I'm going to do is just
move this down to the next line, but overall,
| | 07:04 | I'd say that looks pretty good,
even as I scale it down some.
| | 07:09 | All right, so right down here, as I go
into Design view, I can just hit Return.
| | 07:15 | Okay, so with all of the content
customized, you can then start to work more on
| | 07:19 | the style, just to make sure it
works well with your website.
| | Collapse this transcript |
| Customizing the style| 00:00 | When you add a widget, one of the
first things you'll do is you'll start to
| | 00:03 | customize the content, just like I've done here.
| | 00:06 | I have actually added a Lightbox
Gallery widget to my website, and I've
| | 00:12 | customized the content to show my images.
So I can click through there and see
| | 00:17 | the images as well as some of the text.
| | 00:19 | But now what I need to do is I want to
jump in and make sure everything works
| | 00:23 | appropriately with my current website.
| | 00:26 | For instance, I might need to stylize
some of these boxes a little more. And even
| | 00:31 | when I scale it down, well, it looks
pretty good, but then oh, look what happens.
| | 00:38 | This sort of pops out of this box.
And in fact, this is always at a fixed width,
| | 00:43 | so I want to customize and stylize the
look, as well as how it functions.
| | 00:51 | And I'm going to do that by going into
this portfolio HTML and then just
| | 00:57 | referencing the style sheet.
| | 01:00 | So right in here, when I added it,
it added this style tag right here, and
| | 01:05 | you can see some of the different selectors
right here that I can select, and the content below.
| | 01:12 | So I can take a look at this container.
And with it selected, what I can do is I
| | 01:16 | can look at the properties for this
container. Down here I can see oh, that's
| | 01:20 | where the width is fixed to 500 pixels.
| | 01:23 | I usually don't like things with fixed
widths, because it just is going to
| | 01:28 | lock it down a little too closely, and I
need it just to be a lot more flexible.
| | 01:32 | So I changed that to 100%. Now this will
be flexible regardless of the page size.
| | 01:37 | So I can click Live view, and you can
see it here. In fact, even as I minimize
| | 01:44 | this panel, you can see how it
stretches across. And then let's take a look at
| | 01:51 | it on a tablet size. That's what the
tablet size looks like and even the mobile size.
| | 01:56 | Everything fits in nice and neat,
because--let's turn that off--I was able to
| | 02:03 | change the width to 100%. All right!
| | 02:07 | Going back in here, I can customize this
some more. In fact, as I take a look at
| | 02:11 | this, I have this item a image, which are
all of these images, and I like it, but
| | 02:17 | I want to do something a little bit different.
| | 02:19 | I think the white is a little too stark,
and in fact, I have a lot of black going
| | 02:25 | on. So I want them to start out nice
and dim with a black border and then when
| | 02:30 | you roll over on them, or hover over them,
I want them to turn red. Basically, the
| | 02:35 | border will turn red. And then I
think this looks pretty good as is.
| | 02:40 | So coming in here, I can select
this item a image, and I can see that
| | 02:44 | background color comes from right
here, and actually from a couple different
| | 02:48 | places, but it's really just a matter of
changing what you see down in here.
| | 02:52 | And I change that from white to black.
| | 02:55 | And since I have Live view on,
it changes it immediately.
| | 02:59 | I like how that looks. I think that
looks sharp. Even that thin line kind of
| | 03:03 | echoes this font that I'm using.
| | 03:06 | So I can go with that, but that extra
white is actually just coming from the border.
| | 03:11 | Now I notice that as I roll over them
they get dimmer, and to be honest with
| | 03:15 | you, I think they should start out dim and then
brighten as in, hey, you know what, select me.
| | 03:20 | So if I take a look right in here, I can
see, oh, down here, opacity is set to 1,
| | 03:26 | and 1 is 100%. But I can
change that to 0.7 and make it 70%.
| | 03:34 | Now it starts out at 70% and
will actually brighten, okay.
| | 03:39 | So let me even make that more like 60%,
so we can see an even bigger change.
| | 03:45 | But it's going from 60% to, what else?
| | 03:48 | Well, what's happing on the hover?
| | 03:49 | I'll take a look at the hover right here.
| | 03:52 | Oh, there it is, opacity. I can change
that, instead of 80%, change that to 1.
| | 03:59 | And now there it is, and as
I roll over them, they pop.
| | 04:02 | Okay, so that's really working out pretty well.
| | 04:05 | In fact, the last thing I want to do here is
just make sure that border turns to red as well.
| | 04:12 | So as I select it, you can see my
one-pixel-solid border gives me that hex color.
| | 04:19 | And I can guess at what this is, but
if you were get kind of stuck on what's
| | 04:25 | what, what you can always do is say,
hey you know what? This is the border.
| | 04:29 | I'm so used to the Properties panel
that I'm given, when I double-click on it,
| | 04:33 | so I'll double-click and
okay, that's what border is.
| | 04:38 | Okay, that's what each one of these
things are. In fact, this last one I want
| | 04:41 | to change that to red.
| | 04:44 | So that's an easy way to change that, to
figure out what color that is. It's now
| | 04:49 | FF0000, and when I roll over
it, you can see that looks good.
| | 04:55 | It matches the design,
exactly what I'm going for.
| | 04:58 | As I Preview this in a browser, it's
going to ask me to save all the files
| | 05:03 | that I've modified.
| | 05:04 | You can see my gallery
right here. It's flexible.
| | 05:07 | With that at 100%, I can roll over
these images. It looks good, even clear down
| | 05:12 | to the mobile version. Very sharp.
| | 05:15 | So again, adding widgets is easy.
| | 05:17 | Customizing the content is pretty
straightforward. And then you can start to
| | 05:21 | have some fun by customizing the CSS
that gets added when you add a widget.
| | Collapse this transcript |
|
|
7. Using Content from Other SourcesAdding a Twitter feed| 00:00 | It's great that Dreamweaver gives me
all of this control with my web content,
| | 00:05 | but I still don't want to create all my
content from scratch. I can use widgets
| | 00:09 | in Dreamweaver. I can use Spry widgets,
everything from the Widget Browser to
| | 00:13 | Spry Widgets, and there are
even other content available.
| | 00:17 | And quite frankly, I need to make sure
that my site is going to be optimized for
| | 00:24 | social media. That's why right here on
this homepage, it says Twitter Feed here.
| | 00:30 | Now I can write that if I want to, but
what I want to do is embed a Twitter feed.
| | 00:35 | I'm thinking, okay, you know what,
there has to be something out there that
| | 00:38 | somebody has already made.
| | 00:39 | In fact, that's what I can do;
I can search for embed a twitter feed
| | 00:48 | into website, okay.
| | 00:51 | That what I'm searching for.
That will take you to this link
| | 00:55 | twitter.com/about/resources/widgets
because Twitter has made a widget,
| | 01:00 | making this easy for me.
| | 01:02 | So, if you think that maybe somebody
has already made something, feel free
| | 01:05 | to search of course online, just like we have
this Twitter widget available as I select that.
| | 01:10 | I want to make a widget for my website,
selecting that. And I want to display a
| | 01:16 | profile widget which will display all
the tweets and all the Twitter updates.
| | 01:21 | So going in there, I can add a name.
This happens to be mine, Paul Trani, so you
| | 01:27 | can follow me on Twitter. But this is
for evajonesdesign, so adding that in.
| | 01:33 | You can see, it pulls in her Twitter
feed just like that, and I can go to
| | 01:37 | Preferences. It displays the number of
Tweets, so I can have that. I can include a
| | 01:43 | scrollbar, which is what I'm going to do.
| | 01:46 | Change the Appearance, so in
here I can change the widget colors.
| | 01:51 | Most importantly, I want to change
the link color to make sure it matches
| | 01:55 | Eva Jones's design for her website. And I
even like that dark gray. I'd say that
| | 02:02 | looks pretty good as well.
| | 02:03 | Lastly are the Dimensions. So here, I
can use the dimensions that they give me
| | 02:09 | here, or make sure the width is
automatically sized. And in this case I can even
| | 02:13 | change the size here of the height to about 250.
| | 02:18 | I'd say that looks good.
| | 02:19 | I'll scroll down. I can test the settings here.
| | 02:22 | You can see, it's kind of tall, but
let's go ahead and finish and grab this
| | 02:26 | code. So, clicking in there, I can
copy and paste that code, so that's what
| | 02:31 | I'm doing, Edit > Copy.
| | 02:34 | Now I can hide Safari, go into
Dreamweaver, and turn off Live view. And as I take
| | 02:44 | a look, Twitter feed here, well,
I want to get rid of that now.
| | 02:48 | In fact, I need to get rid of all of
this content down here, just deleting that.
| | 02:53 | And that's where I want to insert the
code, but I don't want to insert the code
| | 02:57 | in Design view; what I need to do is go
to my Code view, and right in here, this
| | 03:04 | is where I can paste that in, okay.
| | 03:08 | So in this case, on line 35, Edit >
Paste, and this is all the code that it's
| | 03:14 | pasted in this entire script.
| | 03:16 | It has my custom colors that I've already
defined. If I scroll up, you can see
| | 03:22 | even reference to this widget.js, so
you just have to be aware that it's
| | 03:29 | pointing to that file.
| | 03:29 | All right, I'll save this page. And I
want to go ahead and preview this in a
| | 03:34 | browser. There you have it,
EvaJonesDesign. Scrolling down, you can see those.
| | 03:42 | Currently, she only has tweeted four times,
that as I scale this, you can see how that moves.
| | 03:50 | So really, this works out well,
being able to embed not only a Twitter feed, but
| | 03:54 | have this social media aspect for this website.
| | 03:58 | So think, hey you know what, somebody
else might have created this. Just do a
| | 04:02 | quick search, especially in the case
of Twitter, highly functional, highly
| | 04:06 | usable widget that you can go
ahead and implement on your site.
| | Collapse this transcript |
| Adding video content| 00:00 | Now there's a couple different ways to
implement video into your website, and to
| | 00:04 | be honest with you, I want to show you
the easiest way that's really going to
| | 00:08 | give you the most reach, and
that's going to be using YouTube.
| | 00:11 | So with YouTube, you can go ahead and
upload any video that you want. It'll
| | 00:14 | automatically make that available to
the entire YouTube network, everybody who
| | 00:18 | uses in the YouTube. And what you can do
is in turn use YouTube as well by going
| | 00:23 | to the video, going down to the Share
button. You can share a link, but here you
| | 00:28 | can embed the video as well.
| | 00:31 | So as I scroll down, you can see the
code right here. You can customize it a
| | 00:35 | little bit in here, like the size, but really
I'm just going to take this code and copy it.
| | 00:41 | And I'm going to go into Dreamweaver.
Right under her, under Motion Graphics,
| | 00:45 | that's where I want to paste it. But I
don't want to paste it here; I want to
| | 00:49 | go to Code view, and I want to paste it
right here underneath Motion Graphics.
| | 00:53 | In fact, I'll get rid of that paragraph
breaks right there, a couple of returns,
| | 00:59 | and just hit Paste.
| | 01:00 | All right, so I've pasted it in.
It shows me the width, the height, Everything
| | 01:05 | looks pretty good, so I'm just going to save
this, and I'm going to preview it in a browser.
| | 01:12 | And you can see it right down
here. And boy is that video big, okay.
| | 01:16 | So it has a couple of issues.
Obviously, it's too large, and it doesn't scale,
| | 01:21 | okay. And my entire site scales.
It's flexible, it's responsive, and that's
| | 01:26 | the way I want to make my video.
| | 01:28 | So what I can do is I can come in here
and I can change the width from 852 to
| | 01:33 | 100%, and I can make the
height like, say, 400 pixels.
| | 01:38 | Let's just take a look at that. If I
make it 100% then this is going to scale it
| | 01:42 | too large, but let's see how this looks.
| | 01:44 | So saving the page, I can
preview it in a browser, in Safari.
| | 01:50 | And now you can see that video fits the
width, and then it's about 400 pixels high.
| | 01:55 | So this takes some playing around with
a bit, but YouTube automatically scales
| | 01:59 | the video. See how it looks good.
| | 02:01 | Okay even as we go into this, as I scale it
down further, oh, it snaps into my mobile view.
| | 02:08 | Remember, this is my mobile CSS that's
being applied now. Scale it down some more
| | 02:15 | and you can see how that looks.
| | 02:17 | So, excellent. That works out great.
Just by changing that to 100%, I have a video that
| | 02:23 | looks great, has that reach, and not
only that; I get these extra controls like
| | 02:28 | full screen all of that good stuff,
| | 02:30 | all using YouTube. Just copy and paste
that embed code and you're good to go
| | 02:34 | with implementing video onto a website.
| | Collapse this transcript |
|
|
8. Creating a Contact FormAdding input fields| 00:00 | Now the web is great because it allows
me to communicate to the world, to get my
| | 00:04 | message out there, but what
if people need to contact me?
| | 00:07 | Well, it is a two-way medium.
Yhat's why I have the contact page open, because
| | 00:11 | what I need to do here is go beyond
just a link. So this actually will link out
| | 00:16 | to this email address, but it launches
the default email client, whatever they
| | 00:20 | have on their machine. But what I
want to implement is a form field--in fact,
| | 00:25 | basically the ability to fill
out a form and send me a message.
| | 00:29 | Name, email, and the message,
as well the Submit button.
| | 00:32 | So I'm going to close Safari, I'm going
to go into my contact page, and then I'm
| | 00:37 | going to delete those lines, just like
that. And I'm going to go to the Insert
| | 00:42 | panel, and I'm going to
change that to Forms, okay.
| | 00:46 | So that's what I have up. And I need
to implement a Name field. That's going
| | 00:53 | to be a text field.
| | 00:54 | Well, there is actually a couple in here.
| | 00:56 | And notice right up here near the top
there's this Text Field, but as I scroll
| | 01:01 | down I want to use this Spry Validation
Text Field because this has additional
| | 01:05 | functionality I could take advantage of.
| | 01:08 | So with my cursor right there, I can
select Spry Validation Text Field, and I can
| | 01:14 | go ahead and give it an ID.
| | 01:16 | And in this case, it's going
to be, you guessed it, Name.
| | 01:19 | I'm going to leave everything else as is.
| | 01:22 | Okay, you don't need to worry about
any of that. You don't even need to
| | 01:24 | worry about the label because I'm going to show you
what you can do with the label.
| | 01:28 | So, selecting OK, this is a message you'll get.
| | 01:31 | It says, hey, do you want to add a form
tag? And a form tag is just a tag that
| | 01:37 | will encompass all of the different
form fields and allow you to submit all of
| | 01:42 | that information to
wherever you want to send it.
| | 01:44 | So you do want to say yes here.
| | 01:47 | And that form field is actually
this red line. But this is my Spry Text
| | 01:52 | Field that I've added.
| | 01:53 | So I can select it. Now, the first
thing I'm going to do is change the name of
| | 01:58 | it. It says Spry Text Field over here.
I'm going to get rid of that one, and I'm just
| | 02:00 | going to call this--in fact I'm going to name
this the nameTextField, okay, just like that.
| | 02:11 | With that selected, I can take a look
at all these different options I have
| | 02:15 | because it's a Spry Validation Text Field.
| | 02:18 | So again, right down here I can add
a hint, and this will be your name.
| | 02:23 | As I enter that in, that's actually
what will appear right in here. And I can
| | 02:27 | always check that by clicking Live view.
| | 02:30 | So there you can see that's
exactly what I want, nice and efficient.
| | 02:35 | I can have a minimum number of
characters, a maximum number of characters, if I
| | 02:40 | want to as well, but this is what I like.
| | 02:42 | This Preview states is going to be
required information. In fact, on Blur, so when
| | 02:50 | you deselect it, I want it to say, hey you
know what, a value is required, because
| | 02:54 | you have to enter in your name if
you want to be contacted back.
| | 02:58 | That's the whole idea, allow them to
enter in their name and make it required,
| | 03:02 | and that's what we need to do.
| | 03:04 | I'm going to place my cursor over here
and just hit Enter, because for my next
| | 03:08 | field I'm going to add a Spry Validation Text
Field. And in this case it's going to be email.
| | 03:16 | That's the ID. I'm going to leave
everything else alone. Nice and easy.
| | 03:20 | Selecting that, changing this to
emailTextField, like that. And as I select it
| | 03:28 | I can give it a hint, Your Email--not
your friend's email but your email.
| | 03:33 | And required on Blur,
this is a required item as well.
| | 03:40 | In this case, in the case of an email,
I want to make sure they submit a valid
| | 03:44 | email, so I'm going to change
the Type to Email Address, okay.
| | 03:49 | So that's going to recognize whether
they have @ symbol and a period. Next
| | 03:53 | up, hitting Return after I put my
cursor on the end here, and now I need to
| | 03:58 | implement a text area, okay.
So selecting that, the ID is going to be message,
| | 04:05 | selecting OK. Scrolling down, you can see it
right here, and I want this to be a messageTextArea.
| | 04:12 | All right, so selecting that, I can
take a look, and I can say hey you know
| | 04:21 | what, minimum number of characters is one,
maximum number of characters maybe like 500.
| | 04:26 | Okay, not too many, but about 500.
| | 04:29 | I don't need to get a long book
delivered through this emailTextField.
| | 04:33 | Nonetheless what I can do is I can
include a counter, which I really like.
| | 04:38 | I can say since I'm requiring a minimum
of one but really a maximum of 500, I can
| | 04:43 | say you know, what counts
the characters remaining.
| | 04:46 | So I'll show you what that looks like.
| | 04:49 | As far as validation, I want to
validate it on Blur, just like I've been doing.
| | 04:54 | I'd say that looks good.
Even the hint might be Your Message.
| | 04:58 | With all of that in place, in fact, I'm
going to save this page now, and look
| | 05:04 | what gets added, all these dependent files
for text fields, text areas. That's good.
| | 05:09 | Clicking Live view, you can see
as I scroll down how this is set up.
| | 05:14 | So I can type in your name, so right
there. Well, let's click off to Your Email,
| | 05:20 | so I'm actually going to come mess this up.
| | 05:23 | I'm going to do the @ sign but I'm not
going to put a period, and as I defocus
| | 05:27 | it, or blur it, it says hey you
know what, this is an invalid format.
| | 05:31 | So I'll type in the correct one and blur it,
which means you know defocus that, and
| | 05:37 | you can see that they're green, green means go.
| | 05:39 | Right in here, I love your site,
a couple of exclamation points.
| | 05:44 | As I do that, you can see that character
count right down here, change. Hey, why not
| | 05:49 | add a couple extra exclamation points.
| | 05:51 | I can click off of that as well.
| | 05:54 | This looks good. The last thing I'm going to do is
I'm going to go ahead and add a Submit button.
| | 05:59 | So I'm going to turn off Live view and
just after that last element of that text
| | 06:05 | area, I'm going to add a button.
| | 06:07 | So right here I'm going to insert a button.
| | 06:10 | ID again is going to be Submit. Select that,
type that in. There is my Submit button.
| | 06:18 | I can see, overall, everything looks pretty good.
| | 06:22 | I like how this looks. It's actually
going to work pretty well. And really, the
| | 06:27 | next step with this form is to go ahead
and actually implement the functionality,
| | 06:34 | when you hit Submit, have it submit
the data and even go to a Thank You page.
| | Collapse this transcript |
| Sending contact form content| 00:00 | Adding forms to your website is
done pretty easily using Dreamweaver.
| | 00:04 | As you can see here on the contact
page, I've added a couple of text fields
| | 00:10 | right here, and even a text area
component and a Submit button, ultimately
| | 00:15 | making up this contact form.
| | 00:17 | So you can add these components using
Dreamweaver, but what happens when you
| | 00:22 | hit that Submit button?
| | 00:23 | Well, it needs to send
that data to an email address,
| | 00:26 | as it needs to send that data to a
middleware page that does the processing.
| | 00:31 | Usually it's a PHP page or a Perl script,
and that middleware page is usually
| | 00:36 | provided by your hosting company.
| | 00:38 | So I'm going to go to my hosting
company. It happens to be godaddy.com, not that
| | 00:42 | I'm promoting them. I just want to
point out what they have available to you.
| | 00:46 | Under Tools, there is this Form Mail.
| | 00:49 | So any form that is created on your
site will send that data to this email
| | 00:58 | address using GoDaddy. So that they make
it really easy; just enter in your email,
| | 01:02 | and that's good to go there.
| | 01:05 | So, check with your hosting company,
see if they have some sort of form script
| | 01:09 | available to you, and if they don't,
I have actually provided a page for you, so
| | 01:13 | you can also see what it looks like.
So I'm going to go into Dreamweaver.
| | 01:17 | Here, I'm in Dreamweaver. Here's
my form. Everything is looking good.
| | 01:21 | But I want to open up that page that I
have provided in case you have access to
| | 01:26 | the source files, formmail.php.
I'm going to open up this page.
| | 01:30 | Notice how you don't see anything
because you need to click over to Code view,
| | 01:35 | and you can see all of the code.
| | 01:37 | So in this case, this just provides a
couple different options in here that will
| | 01:43 | work out great for processing.
| | 01:45 | Notice that as I scroll down, you have
these three different lines that will
| | 01:49 | send the name, email, and message to
this email address--again the same one that
| | 01:55 | was part of my GoDaddy site.
| | 01:57 | Here's the subject line and then
the header. We'll include the name and
| | 02:01 | email, and then the body of the message will be
the name, email, and comments being submitted.
| | 02:08 | So that's how that works. Also, there's
a thank you page that it will return to.
| | 02:12 | So, that's what I want to go ahead and
implement are this form ultimately, but I
| | 02:16 | need to point to it first.
| | 02:18 | So I'm going to go to contact.html.
| | 02:21 | Remember, this is an entire form,
and that form is encapsulated right here by
| | 02:26 | this red line. It shows me that form, and
right down in here, I need to point to
| | 02:32 | that specific page, evajonesdesign.com,
and that is known as formmail.php.
| | 02:43 | Now keep in mind, this page, this
formmail.php page, is already uploaded.
| | 02:49 | With that in place, what's going to
happen is--in fact, as I save this page, I can
| | 02:57 | preview it in a browser, and we can
test this out. My name, email address,
| | 03:06 | hitting the Tab key, Love your site!
clicking the Submit button. Let's see
| | 03:12 | what's going to happen. Clicking on that.
| | 03:15 | Oh, it takes me to this thank you
page. I am like, wait a minute. I don't
| | 03:18 | have a thank you page. Well, you are
right, because this is basically their 404
| | 03:23 | Error page that GoDaddy has.
| | 03:25 | So I need to create a thankyou page.
| | 03:28 | But let's click over to the
evajonesdesigner email account and see if we've
| | 03:34 | received that email.
| | 03:36 | So clicking over into this Gmail
account. And here I am in evajonesdesigner
| | 03:45 | email. Right in here, I can click
right here from EvaJonesDesign. Here's the
| | 03:50 | message, Love your site! is really what I sent.
| | 03:53 | So hopefully, that's pretty straightforward.
| | 03:55 | There are really only three fields
in here: your Name, Email and Comments.
| | 03:59 | You can see what it says. I can reply as Eva
Jones if I want to. But that's how that works.
| | 04:04 | Going back into Dreamweaver, what I need
to do is I need to create that thank you
| | 04:08 | page after you hit the Submit button.
| | 04:11 | Because if I take a look at that
formmail.php, you can see, right
| | 04:16 | up here on line 5, it says hey, you
know what, the refresh takes you to
| | 04:20 | that thankyou.html.
| | 04:21 | So I'm going to make that right now.
Starting with the contact page, I'm going
| | 04:26 | to do a Save As, and I'm going to save
this as, you guessed it, thankyou, right
| | 04:31 | there. And I need to delete this form
as well as this other content, say right
| | 04:41 | here instead of Let's connect, Thank you
for contacting me, just a simple message
| | 04:49 | just like that, eliminating that line too.
| | 04:52 | Now with that in place, I can save this page.
| | 04:55 | So this page would need to be uploaded as well.
| | 04:58 | Once this page is uploaded, I can go
to my contact form. In fact, let's just
| | 05:03 | preview this in a browser and try this one
more time: your name, email address, message.
| | 05:13 | When I click Submit, it's going to go to that
thankyou.html page that is already uploaded.
| | 05:22 | So the uploading will actually happen
in another step, but nonetheless, as you
| | 05:27 | get into hosting, that's where
I'll talk about that. But with that page
| | 05:31 | uploaded, if I click Submit, it
actually goes to that thank you page and sends
| | 05:36 | that message as well.
| | 05:38 | So that's how you deal with the
processing of any form data and ultimately
| | 05:43 | sending it to an email, either using
what your hosting company provides or using
| | 05:48 | that formmail.php, modifying it
accordingly, and then uploading that to your site,
| | 05:54 | as well as uploading a thank you page.
| | Collapse this transcript |
|
|
9. Testing and UploadingTesting the web site| 00:00 | Once you have your site completed,
you can start to test it out to make sure
| | 00:03 | it looks good across different
browsers as well as browser versions and
| | 00:08 | different screen sizes.
| | 00:10 | So what I can do here in Dreamweaver
is I can turn on that Live View button,
| | 00:15 | which is what I've been doing all
along as I develop, is to render out the
| | 00:19 | page just to make sure
everything is looking good, and it is.
| | 00:24 | I can view this on a desktop size, a
tablet size, to see how the content adjusts,
| | 00:31 | and even a mobile device size,
just to see how everything looks.
| | 00:36 | And everything looks pretty good that way.
| | 00:38 | I am going to turn off that mobile size
because I want to go beyond what I can
| | 00:42 | do here in Dreamweaver, at least right
here with the Live View button, because I
| | 00:46 | can actually view it in an actual browser.
| | 00:50 | So File > Preview in Browser will
enable me to preview it in Safari, Chrome,
| | 00:54 | because those are the
browsers that I have installed.
| | 00:57 | Whichever ones you have installed will
be listed there. And I can see what it
| | 01:01 | looks like in those browsers and as
well as how the screen adjusts as well for
| | 01:08 | Safari in this case.
| | 01:10 | But do be honest with you, I don't have
all the browsers installed. You know there
| | 01:14 | is too many different versions as well,
so how do I tackle that problem to make
| | 01:18 | sure it looks great across
different browsers and browser versions?
| | 01:21 | Well, what I can do is, in Dreamweaver, I
am going to turn off that Live View button.
| | 01:27 | I have right over here, oh, look I have this
Check browser compatibility button. Perfect.
| | 01:33 | Selecting that, and I can
check browser compatibility.
| | 01:39 | As I do that, it runs and checks all
of the code and shows me in this Browser
| | 01:47 | compatibility panel, any
issues that it might have.
| | 01:50 | So you can line 17 has an Expanding Box Problem.
| | 01:54 | What does that mean?
| | 01:55 | As I look over here, it says hey, you
know what, you probably have content that
| | 01:59 | doesn't fit a fixed width or height
that the box is, causing the box to expand.
| | 02:05 | So fix it. Notice that it
affects Internet Explorer 6.0.
| | 02:10 | So before I dive into solving this
problem, I want to show you that Internet
| | 02:13 | Explorer 6.0 is being tested against
because as I select this Play button, I can
| | 02:19 | go to Settings, and you can see right
in here all the different browsers I am
| | 02:25 | testing against, Internet Explorer 6.0.
| | 02:27 | So if that's an objective, make sure that's
checked, and that's where that comes from.
| | 02:30 | All right, so for this issue let's
take a look at line 17. With that
| | 02:35 | selected, even as a double-click it,
you can see highlights that box. That's
| | 02:39 | really the offending box.
| | 02:40 | I can go to Split view, and I can
see oh, that PNG file, that image, is 220
| | 02:46 | pixels wide by 103 high.
| | 02:49 | But the box, this logo, that's the issue.
| | 02:52 | So I am going to go into my
stylesheet.css, going down to that logo selector.
| | 02:59 | This is the box that's having the issue.
| | 03:01 | And you see the height looks pretty
good because the height is 113 and the
| | 03:05 | height there is 103. It's really the width
| | 03:07 | is smaller than the width of the image.
| | 03:10 | So I need to change that to a minimum
of 220 in this case. Hitting enter.
| | 03:16 | With that done, I can go back over
here and check browser compatibility.
| | 03:20 | Notice how it clears out that
problem, and everything is good.
| | 03:25 | Going to Design view, I can say you
know what, I don't have any more issues so
| | 03:30 | therefore I can save all pages, save
everything, and I can move on to testing
| | 03:34 | some of the other pages as well.
| | 03:35 | So I am going to open up the about
page, and again, this is in Chapter 09/01
| | 03:41 | Begin, if you have access to the exercise files.
| | 03:44 | I am going to just test out this about
page by doing the same thing, which is
| | 03:48 | going to be check browser
compatibility just like that.
| | 03:52 | Oh good, I like that, no issues. Let's move on.
| | 03:55 | I am going to open up the portfolio page.
| | 03:59 | Again, this is a little more complex.
I have this portfolio down in here of
| | 04:04 | images and even a video,
so let's see what happens in here.
| | 04:07 | Check Browser Compatibility, oh the
same issue: Expanding Box Problem.
| | 04:13 | Double-clicking it, I can see that box.
That's the offending box right there.
| | 04:18 | And if I go to Properties,
I can see it's that container.
| | 04:22 | Okay, so that's the issue.
So let's take a look at that container.
| | 04:26 | As I close those other CSS
style sheets, I can see my container right there.
| | 04:32 | So that's the issue.
| | 04:34 | So I can take a look at it, but know
you can also view these solutions for
| | 04:40 | this issue on adobe.com.
| | 04:43 | So you can always select that and that
will actually jump out to that page and
| | 04:48 | potentially offer up some solutions.
| | 04:52 | In this case, it's saying to use word
wrap. That's one way of doing things.
| | 04:56 | Well, they're not really words; they
are actually images going on in here.
| | 05:02 | So let's take a look right over here.
I am going to show you just a nice
| | 05:06 | technique. I can take a look at--
well may it's the height because it looks
| | 05:10 | like this guy is actually goes clear down here,
and he's probably getting cut off right there.
| | 05:14 | So I can change the height to maybe 100%.
| | 05:17 | Let's try that. Let's run this.
| | 05:20 | Okay that's not the issue. So the Width
looks good, because that's 100% as well.
| | 05:25 | And this is interesting because it
actually is wrapping the image, so there
| | 05:31 | really isn't an issue that we are going to have.
| | 05:34 | But in order to clear out this
problem, did you know that I can turn on or
| | 05:40 | off certain properties?
| | 05:42 | So I can disable any one of these
properties to see what the offending code is.
| | 05:47 | So I can click here to disable that CSS
property for the width, and then I can
| | 05:53 | run it, oh, and it clears out that issue.
| | 05:57 | So it turns out that this is going to be
fine and actually is not needed in this case.
| | 06:03 | And it gets rid of that issue and in
fact, if I just double-check my page, just by
| | 06:09 | saving all my pages, clicking on
Live view, you can see how this looks.
| | 06:16 | But I do have this
wrapping issue that I'm noticing.
| | 06:18 | This motion graphics, even as I change
the screen size--oh, there it looks good,
| | 06:24 | but obviously I have kind of an
issue with that word Motion Graphics.
| | 06:28 | So I actually need to make sure it
actually clears out everything on both sides
| | 06:34 | of it. I want to make sure it's on its own line.
| | 06:37 | So let's take a look at that particular
item, because since I fixed that problem,
| | 06:41 | I need to make sure this is on its own line.
| | 06:44 | So if I take a look at that object,
this here, if I turn off Live view and scroll
| | 06:50 | down, I can see this is an h2 rule.
| | 06:55 | So I can go into my CSS styles and take a
look at h2. And here it says that it's 18 pixels.
| | 07:01 | That's fine. I'll double-click on that
h2 because I need to clear it out on both
| | 07:06 | sides. Make sure nothing
is on either side of it.
| | 07:10 | So what I am going to do is I am going
to go into Box. Again, that was the issue.
| | 07:14 | And I'm going to Clear both, clear out
everything on both sides of it. So, don't
| | 07:18 | put anything next to it is what I am saying.
| | 07:21 | Clicking Apply, clicking OK, let's go
to Live view. Scrolling down, you can see
| | 07:28 | now it's on its own line.
| | 07:30 | Even as I go to the tablet size and
even the mobile size, everything looks
| | 07:34 | good. Turning that off.
| | 07:36 | All right, that's great. Portfolio
looks great. It doesn't have any more issues.
| | 07:41 | I can save all those pages. I can open up the
final two pages, which would be in my contact page.
| | 07:49 | Opening that up, running Check Browser
Compatibility. No issues there. I love seeing that.
| | 07:56 | Opening up that last page,
that thank you HTML. This one is
| | 08:00 | really straightforward.
| | 08:01 | So checking browser
compatibility for that one. Everything looks good.
| | 08:05 | All right, I like this. In fact, I can
save all my pages, and this is great.
| | 08:11 | With my site tested and looking great,
| | 08:14 | I can then go into the next step,
which would be uploading this website.
| | Collapse this transcript |
| Uploading the web site| 00:00 | Now we get to my favorite part of
creating any website, which is going to be the
| | 00:05 | upload, basically the publishing of
your site so the world can see it.
| | 00:09 | So this is great. Dreamweaver can do
all of that for you, provided you give it
| | 00:14 | the necessary information.
| | 00:16 | In fact, you can see my beautiful page
here. I do have a Live view on, but all
| | 00:21 | of these pages I need to upload, so I am
going to go ahead and create new site.
| | 00:27 | Yes, I already have one created,
but I am going to create a new site.
| | 00:31 | So here it says you are going to
set up a local folder and a name for
| | 00:36 | you Dreamweaver site.
| | 00:37 | So Eva Jones is what we'll call list,
And we'll point to that local folder where
| | 00:44 | I've been building this site.
| | 00:46 | So that's what I am going to do.
Going to my Desktop, if you have access to the
| | 00:51 | exercise files, it's exactly what I'm
doing. I am going into Chapter 09/02
| | 00:55 | Begin. There is my website, and there's my
index.html, which is actually already open.
| | 01:01 | So I am choosing a local root folder is
what I've just done there, so that looks good.
| | 01:08 | I can click Servers, and here's where
you'll select the server that will host
| | 01:12 | your pages on the web. Okay,
that sounds like a good idea.
| | 01:16 | You can have multiple servers, but
really we just need one, so I am going to add
| | 01:21 | a new server. Right in here I can
give it a server name. This is actually
| | 01:25 | hosted on GoDaddy servers.
| | 01:29 | And then from GoDaddy what I need is I need
the FTP address, the username, and the password.
| | 01:35 | So whoever your hosting company is,
they will provide you these three blanks.
| | 01:40 | So that's what I'm going to go to
get now from godaddy.com in this case.
| | 01:45 | So here I am, on godaddy.com. I've
logged in. I'm in my account. And really, this
| | 01:51 | would be your hosting company, but I
am going to select website hosting.
| | 01:55 | Scrolling down I can see Eva Jones
design as being hosted, so I can click launch
| | 02:00 | to see all of the details for the site.
| | 02:02 | And as I take a look, I can see DOMAINS, FTP
ACCOUNTS, DATABASES, all sorts of good stuff.
| | 02:11 | Well, to be honest with you, it's
ftp.evajones.com. That's the URL I want.
| | 02:18 | I can see there's FTP ACCOUNTS
as well. That's already added.
| | 02:22 | So I can Edit FTP User.
| | 02:24 | Here's where I have already selected
a name and given it a password as well.
| | 02:32 | So whatever I enter in there, that will
be my username and password. So that's
| | 02:36 | provided by you to the hosting company.
| | 02:39 | evajones, and I happen to know the password.
| | 02:42 | All right, so we know it's
ftp.evenjones.com. You can also use the IP address
| | 02:48 | instead of the ftp.evajones.com. And as
I scroll down, a lot of hosting companies
| | 02:53 | will provide an FTP file manager.
| | 02:57 | So you can use their file
manager to upload those files.
| | 02:59 | But hey, Dreamweaver makes it easy.
And based on this information from my hosting
| | 03:04 | company, now I can go back in
the Dreamweaver and hook this up.
| | 03:09 | So I'm minimizing these pages.
| | 03:13 | Going back into Dreamweaver.
FTP is going to be ftp.evajonesdesign.com.
| | 03:21 | IP address would also work there,
Eva Jones is the username, and then the
| | 03:28 | password that I've defined,
and then we can click Test.
| | 03:34 | And it says it's connected to the web
server successfully. That's wonderful.
| | 03:39 | If it doesn't then it means you have
one of these three fields incorrect.
| | 03:43 | It also gives me the web URL,
so the web URL can actually be www.
| | 03:49 | Saving that, I can see that GoDaddy
servers, because I have a lot of servers
| | 03:53 | that your content is being hosted on.
| | 03:55 | This is my remote server. You can
also set up a testing server too.
| | 03:59 | But that's all I need to do.
You don't have to worry about any of other
| | 04:02 | controls. Just click save.
| | 04:03 | You might get this pop up. It says
Keychain Not Found. This is if you're on a
| | 04:08 | Mac. Just hit Cancel.
| | 04:09 | And look what happens. It opens up your
Files panel and actually shows you the
| | 04:15 | website, so check that out,
as I expand it a little more.
| | 04:21 | I can see the path where this content exists,
| | 04:25 | all those folders, all those files,
including this index.html, and this is
| | 04:30 | great. This is my local
site. I really love this.
| | 04:34 | In fact, I can view the remote server or
the local view, so I can toggle between those.
| | 04:41 | In fact, as I select Remote server, it's
going to connect to godaddy.com in this
| | 04:46 | case, to my server, and
show me all of those files.
| | 04:50 | Here's what's on my server.
| | 04:52 | Now, yours might not look like this,
but there are basically some files that
| | 04:56 | the hosting company has provided to
you, usually that they feel might be
| | 05:00 | helpful to you, like a 404 page. That's what that
missing.html page is, and some additional things.
| | 05:07 | But nonetheless, I can even click on
this Expand to show local and remote sites.
| | 05:11 | I like this view because this
helps me understand what's going on.
| | 05:15 | So in here I have my local
files and then my remote files.
| | 05:19 | And you can see that my local
files are not on the remote server yet.
| | 05:22 | So what do I need to do?
Well, I need to upload them.
| | 05:25 | So taking the index.html for instance, as I
select it, I can select Put, so that is uploading.
| | 05:34 | It says hey, do you want to include the
dependent files, because there happens to
| | 05:38 | be images and various things that are
in these images folders and CSS. Do you
| | 05:42 | want to put that stuff up there as
well? I'll say yes. Sure, why not?
| | 05:46 | And it will upload all of those files.
You can see the index is there on my
| | 05:50 | remote server, CSS, images. It looks like
we have some SpryAssets. I don't have to
| | 06:01 | worry about making sure I upload those
individual files; it does it all for me.
| | 06:06 | All right, there it is. My index.html is
actually now out on this remote server.
| | 06:12 | So, that being said, I can even now go check it.
| | 06:16 | So, that's what I am going to do
right now. I'll close this panel, and I'll
| | 06:22 | launch a browser and go to that URL,
typing in evajonesdesign.com. And here it is.
| | 06:30 | You can see that page load in.
| | 06:34 | Everything looks great. I love it. I can
go to the about page. What's going to happen?
| | 06:38 | Oh, here is that missing HTML page that shows up.
| | 06:42 | Okay, it's because I
haven't uploaded the about page.
| | 06:45 | So really, that is my goal right now,
is to upload the rest of the content.
| | 06:49 | Now you don't need to always expand
the view. What you can do is you can just
| | 06:53 | select all of these files, okay.
| | 06:55 | So keep in mind I am going to have this
Local view selected, and I am going to
| | 06:59 | just Shift+Select all of those files
and select Put to put all of those files,
| | 07:04 | including the dependent files,
everything, up on that Remote server, so I have
| | 07:09 | the complete site uploaded.
| | 07:10 | All right, with that done, all of my
files are uploaded. I can go ahead and test
| | 07:16 | it out in a browser, and
this is just really fun to do.
| | 07:19 | Launching a browser window, remember
this page was not there. In fact, I can just
| | 07:23 | hit Return. There's my about page.
| | 07:26 | In fact, as I click the homepage,
about, scrolling down, it looks great.
| | 07:34 | Portfolio, you can see my portfolio in
here. Scrolling down, selecting any one
| | 07:40 | of these, clicking through each
one of those images, you can see that
| | 07:47 | everything looks great.
| | 07:48 | All right, closing that. Lastly, you
have the contact page. I can go ahead and
| | 07:54 | say, "I love your site!"
| | 08:04 | Testing out this form.
There you are, your thank you page.
| | 08:10 | So congratulations. If you did do
this video, you now should have a site
| | 08:13 | available out there on the world
wide web for other people the see.
| | 08:17 | And quite frankly, all I need to do is
send them this URL and they'll be able to
| | 08:22 | access it. Very cool, Dreamweaver
making it easy and just really efficient for
| | 08:27 | you to publish your own website.
| | Collapse this transcript |
| Refining the site for search engines| 00:00 | Once you have your site uploaded,
you might realize it might not be coming up in
| | 00:04 | certain search engines,
| | 00:06 | and that's because you need to add
additional information to tell search engines
| | 00:09 | what your content is all about.
| | 00:11 | Now, keep in mind, search
engines can check your page.
| | 00:14 | In this case, as I turn off Live view,
know that everything is organized
| | 00:18 | appropriately. I have you know, these h1
tags h2 tags. Everything looks good.
| | 00:24 | I'm not trying to tricking search
engines in any way, but it can actually
| | 00:28 | read the content of my page and serve up
this content if the user is searching for it.
| | 00:35 | But there is additional
information I can add, meta information.
| | 00:40 | In fact, for this index page, I can go
to Insert > HTML and in the Head Tags, I
| | 00:47 | can insert a description of this page,
and that will give search engines a
| | 00:52 | description of what this page is
all about, as well as show users in, say,
| | 00:56 | google.com, a description of the page as well.
| | 00:59 | So Description, write in here you guessed it.
| | 01:03 | Typing in your description, adding
that, clicking OK. Well, what happens?
| | 01:07 | If I go to Code view and I take a look
in here, this is the meta tag that's added.
| | 01:13 | So here's my description that's added.
| | 01:16 | That's great. I can go beyond the
description and Insert > HTML in the Head Tags,
| | 01:23 | because that's where these are being put.
| | 01:26 | In the Head Tags, I'm going to add some keywords.
| | 01:28 | At this point I want to insert some
keywords that people might search on.
| | 01:32 | So they might search on graphic design,
web designer, denver designer, photoshop,
| | 01:42 | you know dreamweaver.
| | 01:45 | You want to get pretty specific.
This is somewhat generic, but overall--
| | 01:50 | Colorado--I can add some
keywords just like that.
| | 01:54 | Adding that in, notice
I've not gotten too robust.
| | 01:58 | In fact, if you add a ton of keywords,
certain search engines will know that
| | 02:03 | you're really trying extra hard to be
served up higher in these search engine requests.
| | 02:09 | So you do want to keep
this to about 150 characters.
| | 02:13 | So that's what I've added are these keywords.
| | 02:16 | As I hit return, keywords and description.
So, I can start to customize that per page.
| | 02:21 | So I can copy these lines, go to my
about page, and right down in here, still
| | 02:30 | within the Head Tag, you can put this
wherever you want. Oftentimes that will
| | 02:35 | go near the top, just under the title, because
search engines actually look at the title as while.
| | 02:40 | Pasting that in like that. In fact, for
a description of this page, I can say Eva
| | 02:46 | Jones portfolio as a graphic and web designer.
| | 02:52 | With that done, I can save that page.
In fact, this is the about page.
| | 02:59 | We'll change that to is a graphic designer.
| | 03:01 | But nonetheless, you're changing the
content, go into the portfolio section. Same
| | 03:06 | thing. Hitting Return, pasting in those
two meta tags and Eva Jones portfolio.
| | 03:14 | I already have that and then contact,
| | 03:20 | pasting that in. Now it exists on
every single page, Contact Eva Jones.
| | 03:32 | Now that I have the meta tags, both
for description and keywords for all my
| | 03:38 | pages--and I can customize these
further if I want to, Contact Eva Jones.
| | 03:45 | Just don't get to robust. Overall, it
should be about 155 characters long.
| | 03:50 | All right, with that done, I can save
all the pages. Now, all these pages are
| | 03:55 | optimized with the correct content,
enabling them to be served up with any sort
| | 04:00 | of a search engine that
might want to search this page.
| | 04:04 | So that's all you need to do. Don't
forget to upload your content, and just it
| | 04:07 | out on various search
engines to see how well it does.
| | Collapse this transcript |
|
|
ConclusionGoodbye| 00:00 | Thank you so much for watching
Creating a First Web Site in Dreamweaver CS6.
| | 00:05 | I hope you really enjoyed watching this
as much as I have presenting it. It's been
| | 00:08 | a lot of fun for me.
| | 00:10 | But more importantly I hope you've
learned a lot, and you're able to apply that,
| | 00:13 | because I'd love to see
from you is what you create.
| | 00:16 | So, by all means, based on what
you've learned, go ahead and let me know.
| | 00:20 | In fact, you can follow me on Twitter,
paultrani, all one word. Follow me that
| | 00:25 | way. Send me what you've
created because I'd love to see it.
| | 00:30 | So again, I hope to hear from you soon.
| | Collapse this transcript |
|
|
