Tip:
Highlight text to annotate it
X
This week
you're going to focus on creating a home page for your entire EdTech website.
You are actually going to save this file at the root level as default.html
We describe this as the "default project" or creating your default page.
So this project does not require you to develop a learning activity. Instead
you will use a CSS template
to create an attractive home page for your EdTech website. This is not a teacher homepage for your classroom
Instead, it's a splash page that introduces your
EdTech website. It provides a statement of purpose
and links to projects you are creating throughout the program.
So what exactly is the default page?
A default page or
a home page for a website typically is either named as default.html (or default.htm) or index.html (or index.htm).
And what that does is, the server
(depending on how it is setup) will recognize that (name).
And so it doesn't actually require a user
to type that into a web browser.
So this URL is actually pointing to a file called "default.html"
They are actually the exact same.
It is because this page we're looking at his name default dot html
and there's that
if i do eight cm that doesn't work
when this case if i did index
at a seminar it doesn't work
so what's nice is it allows a user shortcuts is greater website concede
this class picture
so you get the care of if you're going to
cnn.com rather than have to admit i can't see him in dot com slash
default dot html
it just goes right to build a dramatic to here's another example if you go to
bed take-two
website
you'll see that
there's action
file called that says four students enough i was called default dot htm
this year's in this case here's noel
so by typed out there it won't work
so that's how this page was set up
and the servers record set up to actually recognized any of these
variations
said the same way if we go to mind you know is that there's actually no
fire there
and so in this case i would have to actually create my found so in this
example and then actually discrete what
so they say this is index study shimon and then i'm gonna upload and we'll
check it out
too now that i have my index a smell finest refresh erica's so that's
actually the same as index dot html
so that's the basic idea of of the fall pager in index page is it's just a way
to make it easier for users to come your website
and usually that despise page is going to give an overview of whatever the
website is it helps the usual no
what the files what they can expect on that site and sell this is the example
here
answer the second part of this what we want you to understand what the default
or index pages
we also want you to get experience using
templates
templates can speed up tick
a lot of your web development
with that said some templates are easier to use and others usages google free csf
simplex in you'll find all kinds now with these in this is something to be
aware of is a lot of them seem to be
tristen setup for a mp logging sites
to develop all tied to code
that you have to decipher and work with your way through so
you know carefully cake
a template that make sense to you and that's useful
you might find that the first one or two download or ones you want actually used
you can also use on the templates that are in dreamweaver and so in this
example of this was
created using one of the templates in dreamweaver
ten dreamweaver when you get a farm bill
you notice that
there's all these stempel it's and if you start work your way down this is one
column fix center
and fix means as a fix layout where these liquid mean they're gonna uh...
adjust based on the screen
nancy to calm left barks ever
and so this example here
that we're showing you was actually created
with the two column liquid left sidebar header and footer
he also knows that there are couple of a small five months
these temperature gonna find our common doubt and nazi s_s_ code and they're
probably going to be a lot easier to use
than some of the templates you find online at the websites
but the ones online organized um... a bit more flair and style to them
well spent some time experimenting with both
and so the other thing to notice is that you're gonna find a lot of the templates
are created with xhtml so there's not
is many e smell five loans out there
sell one e smell five site that i did find is this one
and
it looks like there are a number of different ones here and it's nice that
these
is their are responsive to science of again a
you can see what it would look like on a tablet you said it would look like on a
smartphone
answered this website uh... looks like it has some promising complex as well
but are less than a minute and show you how to create bust a full page select
the example
a rather than use xhtml
like in that example i'm gonna do it using one of a small five months down
below
and so
the first thing i'm gonna do is go to file noon and i when it's used they seem
a five to call and fix no it's not the suburbs in the right we're going to
change that move it to the left
for some reason they don't give you is many options here
and so i'm going to go with that annemun eight create
you missed the first thing it does is it prompts me
to saved the c_s_x_ fire
and one of the rings that's hard with working with templates is understand
even naming conventions
that whoever created a template use
so this obviously makes sense to the people created dreamweaver but this is
just kind of a mouthful springer clovis default
and amanda
say that my styles for
so you know is that when it comes up that it gives the basic color scheme
so lookit example here you'll see that there's
the basic header
but the name som a side bar on the left
and then content on the right
and so the first and then it is only a click on this concert logo and delete
that
nixon going to do is unlimited end here
and that you notice if you read take the time to read it explains all the stuff
for you
nick click on this
they can see that's an outside but i don't need it
and delete that
and so here what i have as i have my side bar one
and then with in it by half
these basically it's a home
to look over here you can see it's an unordered list
vasant stopped at the time in a click on this and i'm going to go over here to
the pencil
and eunice outs float right i'm just gonna go float left and that apply and
just like that i've changed it to the layout that i will to me say this but
instead of saving my five return for government actually save it at the root
level
of my attempt to cite first and then do now it is title it
so it's something
the reason to forget known connected to the body tag
i'm gonna see the background-color ver here in london at the pencil
and
kingdom background and i know the background i want to use going ahead
apply
domenico to header
they had to cancel
background-color
apply and you can see that the way this is setup diamond head cancel actually
is that you can see is this is applying it to all of these things that i don't
want to do that so i'm gonna
every year and just delete that and instead i'm gonna go to split u
click on
this and uh... this all the comments and these are wonderful
and so
spent some time looking through this in this will help make sense
you won't find a right in mike's print you won't find his helpful
comments
and a lot of the ones that you're going to download secures the header tag this
was one time s before and that's why
it's very helpful working and split the app
spend metaphor container and can ah...
teams up from white you know they're back to this
and when changes rather from nine sixty
india seven ninety four detector name pulp
to each one
right to take a look at that and you can see that skewing all these properties
so whether then mess with that i'm gonna
and right now i'm just taking the seine anywhere you want to keep your code
organized
answered by the end you're gonna want to go through and probably cleanup that
code
she misses you just make changes to route like when i have changed the
container with this change so
system at orf
playing without them
adjusting and as you see
as needed as you go
mangan worked on
my medication that links
right here in just cleaning
deleting these cassie's if things they don't need
you just have to spend some time look in the code
sightings data source code
to find out what always happens in this case
just when to return this
letter in that sentence is a placeholder
and disconnect hoppy n
my tax
so you actually need eager to type in the links that you want a link to
you'll see some specifics
and move a lot
be sure to look it over prick a swell to find out what's expected
communiclique and sidebar
and the with look scared the timing looks good
mina actually
and font-size
stupid that looks like
and what i can do it safely
he could use to lead to space
brings closer
stanley's emptiness that there's this
for victims across about something that you can create a class for
and so i can always click over here
and i wanna critic class
menu bar call it
have to make sure you put it in a starchy
near synthesis it saying it's a standard ishmaol tag
someone saying no
name-calling that heading
and quicker pace with a single fathers number new tags that um... i'd know
myself i'm not aware of sorts
something that it's just important to trapped
name classes things are gonna conflict
and salmonella
who have applied have kang
dominic over here
links
their and i'm going to down to class
interested in your part
do the same thing here at my external links
strike and
so you know said the contrast is pretty poor said have to do a few more things
at that
so i'm just gonna jump down
twisty assess
and
galina type in a few things here
so specifically let's strike this you can see it better
but wanted to add a font-weight
i want to make a bold uppercase
and i wanted to use
this color
so there you can
siblings ample actually don't have a different background color so
managed elite
that
let's try that once more
you can always even just apply the same one boom
something over here a minute humare cities are sections
and you could have
there's lots of different ones
for different bits a content when actually just
use one that looks good
here and we get rid of this tax
unanswered in image
in this case a render the image i want and i really haven't saved in my images
folder
matured and you know humid delete this tax
lot of that at least
switch here for my each to because you know see you speech one appear
to spit
plus
lingo
the specific make sure it's a much fault
that's color on the ues
being used for
focus on
having my margin at the bottom b zero
uh... so thats
it's looking good
salinas's all this stuff done here
soon this case and i cannot
need all this
nai
click on section
so one actually
font-size
incident six olympics
sports like that
looks particularly
man
men have the next are heading
i'm eager to end here which is heading three
and i'm gonna christoph for that
with a specific
picture it's in the fall
winter with
bronco orange color and let's do it that looks like
in a minute knows of a fall that always gives that
spacing after politically corrupt in williamson carter
proximity someone actually
picture of a zero for my bottom margin
few what's up some space you can sometimes is that a couple pixels and it
will
accomplish what you want couple lessons i'm gonna do is i'm gonna focus upon
but container adding a border
and i i know what i want harris i wanted to be one pixel solid in that color
it's done
moving on down
and focus on my father
i can't see this is properties for all these i don't want that instant them
last time
supply
mats
say this
and preview
so this is what i've done so far this is the example yunus there's some
differences
little things mainly with font-size that you've
given that i could tinker with uh...
he has some spacing for sure decade b uh... improved upon
need to make sure that that's
definitely
white font at the bottom
so let's jump back will make a few final tweaks were not trying to make this
exact right now
so for each one
we would do
padding
warranty is it
top
to ten pixels
parade zero the bottom
ten pixels and
the left syrup
that's a look in that they defy wanna add some more to the left cuz i want
that strong alignment
children scroll down
when the quake
and my footer
an ad uh... font color
both white
but wanted to look at linked to font size smaller
and said this is where you're going to put your copyright information
and then below this is where you would put your validation ten let's preview
this
and so far this time so is good uh... try different browsers
tense of this is what it looks like and this is a system of fire
and this is what their ritual when using xhtml
so font-size the few things are a little different for sure that you can go ahead
and tweak but hopefully you'll get the basic idea of how to you could use a
similar five template in dreamweaver to create a full page
be sure to look at the room burkina class immature you meet the requirements
the final steps here would be too
complete all the tax to spell check it
to validate the code
and then dot uh... upload a final default page
into your tech to server space but not in the fiber to folder
and to test it