what makes a website?
DESCRIPTION
What makes a website?. Comprised of interlinked Web pages Typically begins with a home page Titled sitename / index.html Contained under a home directory Built using XHTML & CSS - PowerPoint PPT PresentationTRANSCRIPT
What makes a website?
• Comprised of interlinked Web pages
• Typically begins with a home page– Titled sitename/index.html
• Contained under a home directory
• Built using XHTML & CSS– Extensive Hypertext Markup Language – tells the browser
(Firefox, etc.) what content to display and its hierarchy– Cascading Style Sheets – manages the appearance of the
site (colors, fonts, sizes, etc.)
Under the hood
Rule #1: ALL TAGS MUST HAVE AN OPENING AND A CLOSING!
Rule #1: ALL TAGS MUST HAVE AN OPENING AND A CLOSING!
Appears in the browser tab
Appears in the browser tab
Links to the CSS to control the page layout
Links to the CSS to control the page layout
Controls the tabsControls the tabs
Controls headlinesControls headlines
Paragraph textParagraph text
Controls linksControls links
Notes – not visible to userNotes – not
visible to user
Defines background color, font, size, and font color for body
Defines background color, font, size, and font color for body
Defines all attributes for all text in h1 tagsDefines all attributes for all text in h1 tags
Why dreamweaver?
• Ease & efficiency– Don’t have to know all the code– Can view your work as a Web page as you go– Lots of shortcuts
• Consistency– Create pages from templates you have already used– Create pages from suggested templates
• Easy management– Groups files– Easier to update/change
Cons to dreamweaver
• Cost
• Can be confusing
• Difficult to understand all tools without some knowledge of coding
Basic web page elements
• Text– Any words, sentences, paragraphs used on your site
• Images– Photos– Graphics– Multimedia– Widgets
• Hyperlinks– Links to other pages– Internal links– Navigation menu
Step one: defining your website
• You are setting up your ROOT DIRECTORY– The main directory that houses all files for your website
• Lets Dreamweaver know what pages, images, documents, and CSS files are attached to your website
• You must define a new website for every different project you work on
• In class, you will work on a practice website; outside of class, you will create your own
Step one: defining your website• Open Dreamweaver
• A prompt with options should pop up
• Select “new site” or “Dreamweaver site”
• Enter 335 Practice Site as the name of the site
• Click the folder icon & save to your personal server (P: drive)
Step two: creating the home page
• Go to File New
• Select Blank Page HTML <none>
• Save the file to your root folder
• Title it index (no capitalization or spaces)
Step 3: entering text• Three views for your site:– Code – Split (code & design)– Design
• Enter site title “CMAT 335” between <title> tags
• Type in between <body> tags
• Refresh & view in design tab
Adding text
• Always first type your text in Word document – Checks for spelling– Allows you another storage space
• Copy & paste from document into site
• Paste special allows you to keep some formatting– Text with structure plus full formatting
Your website
• An online portfolio
• Should have: – Index page (homepage) with photo & brief
introduction– About me page (brief bio & photo)– Work experience page– Interests page