Dreamweaver CS6 网页制作魔法师 : 在学习网页制作前, 我们需要先对网页的基础知识进行了解, 掌握网页制作的原理, 这样在以后的学习过程中目标才更加明确小魔女 : 嗯, 我知道了! 那你可一定要给我讲讲啊! 魔法师 : 由于网络迅速发展, 网页制作从以前的纯文本形式逐步发展到图

Size: px

Start display at page:

Download "Dreamweaver CS6 网页制作魔法师 : 在学习网页制作前, 我们需要先对网页的基础知识进行了解, 掌握网页制作的原理, 这样在以后的学习过程中目标才更加明确小魔女 : 嗯, 我知道了! 那你可一定要给我讲讲啊! 魔法师 : 由于网络迅速发展, 网页制作从以前的纯文本形式逐步发展到图"

逻耿
5 years ago
Views:

1 Chapter 1 1 魔法师小魔女你在看什么呢看得这么津津有味 :,!!,!! 魔法师呵呵要想学制作网页也并不是什么难事嘛我可以教你啊 :?! 魔法师嗯不过在学习网页制作之前要先给你讲一些网页的基本知识学习要点 : 网页的基础知识了解 HTML 语言认识 CSS 制作网页的流程网页制作的原则和技巧

2 Dreamweaver CS6 网页制作魔法师 : 在学习网页制作前, 我们需要先对网页的基础知识进行了解, 掌握网页制作的原理, 这样在以后的学习过程中目标才更加明确小魔女 : 嗯, 我知道了! 那你可一定要给我讲讲啊! 魔法师 : 由于网络迅速发展, 网页制作从以前的纯文本形式逐步发展到图文声音视频和动画兼有的综合形式, 下面对网页的基础知识进行介绍网页标题超链接文本动画表单图像图 1-1 网页 2

3 第 1 章网页制作的基本知识 mid mp3 mid mp3 gif swf gif swf IP 1 URL URL sina.com.cn/index.html http HTTP FTP Gopher Gopher News IP /index.html / 2 FTP 3

4 Dreamweaver CS6 网页制作 3 Internet Internet W indows Microsoft Internet Explorer IE IE Micros oft 1-3 图 1-2 IE 浏览器图 1-3 傲游浏览器 Tencent Traveler TT Firefox 1-5 图 1-4 TT 浏览器图 1-5 火狐浏览器 4

5 第 1 章网页制作的基本知识 4 WWW 3W Internet 5 IP IP IP IP Enter cn www sina com cn com. com cn c n 7 Internet 文字超链接图片超链接图 1-6 文字超链接图 1-7 图片超链接 5

6 Dreamweaver CS6 网页制作图 1-8 导航条 10 QQ Dreamweaver FrontPage.htm.html.shtml ASP PHP JSP ASP.NET 1-10 静态网页动态网页图 1-9 静态网页图 1-10 动态网页 6

魔法师 : 呵呵, 别心急, 下面我将对 HTML 语言的含义标签和属性以及 HTML 中常用的标签等进行介绍 HTML HTML.html.

7 第 1 章网页制作的基本知识魔法师 : 小魔女, 你知道吗, 无论网络中的网页是什么结构, 它都遵循一种标准, 并以一定的结构形式存在, 同时按照特定的方式相互关联, 它们所遵循的这种标准就是 HTML 语言规范小魔女 : 原来网页是按 HTML 语言规范来制作的呀! 那你快给我讲讲吧! 魔法师 : 呵呵, 别心急, 下面我将对 HTML 语言的含义标签和属性以及 HTML 中常用的标签等进行介绍 HTML HTML.html.htm Web Web HTML HTML HTML 图 1-11 HTML 工作示意图 HTML Hypertext Markup Language 1 HTML 开始标签 < > 结束标签 < > 1-12 HTML 图 1-12 标签 HTML <html> <meta> <head> <title> <body> HTML HTML <head> <title> 7

Dreamweaver CS6 网页制作魔法档案闭合标签的含义 HTML </ > / HTML

BODY 1 标题标签 font 标签其他文字格式化标签图 1-13 文字格式化标签 HTML

8 Dreamweaver CS6 网页制作魔法档案闭合标签的含义 HTML </ > / HTML <title> </title> <title> </title> 2 < > <img src="images/ jpg" width="94" height="109"> src width height img BODY 1 标题标签 font 标签其他文字格式化标签图 1-13 文字格式化标签 HTML <h1> <h6> <hn> </hn> <font> <font> font <font " "> </font> <font color="#ff6600" size="6" > </font> 8

第 1 章网页制作的基本知识 <b> <strong> <em> <i> <u> <sub> <sup> < > </ > 1-13 2 1-14 P 标签图 1-14 段落格式化标签 <p> <p> <br/> HTML <br/> <br/> <br/>

9 第 1 章网页制作的基本知识 <b> <strong> <em> <i> <u> <sub> <sup> < > </ > P 标签图 1-14 段落格式化标签 <p> <p> <br/> HTML <br/> <br/> <br/> <marquee> <marquee> <marquee> <marquee ' '> </marquee> 3 <ol> <ul> <li> 4 br 标签 marquee 标签 HTML HTML <img> HTML 3 GIF JPG JPEG PNG JPG JPEG PNG GIF 9

10 Dreamweaver CS6 网页制作 <img> 5 HTML HTML 1-15 table 标签 tr 标签 td 标签图 1-15 表格标签 HTML 4 <table> <tr> <td> <th <table> <tr> <td> <td></td> <th> <td> 6 <input> type <input type="text" > <textarea> </textarea> <input type="button" > <input type="radio" > <input type="select" > <input type="checkbox" > 魔法师 : 小魔女,HTML 是学习网页的基础, 熟练掌握它能使我们在后面的学习中事半功倍, 所以刚才讲解的内容你一定要牢牢记住小魔女 : 嗯, 我知道了! 现在可是都装在我的脑袋里了, 你还是说说我们接下来需要学习的知识吧, 我可是非常期待的! 魔法师 : 一般情况下, 当用户编辑网页文档时, 为了使网页效果更加美观, 可通过 CSS 样式对网页文档的格式进行定义, 使网页文档中相应元素的格式自动和定义格式相匹配下面就来学习 CSS 的基础知识吧! 10

$font-sytle1"></div> ID ID CSS ID HTML id ID box <Div> <div id="box"></div> HTML img { } background-color: #F93; background-image: url(file:///f /furniture/images/templatemo_bg.$

11 第 1 章网页制作的基本知识 CSS Cascading Style Sheets CSS CSS CSS CSS 1-16 图 1-16 应用 CSS 层叠样式表前后的效果 CSS <head> </head> ID 4 HTML class font-style1 CSS Div <div id="balk" class=".font-sytle1"></div> ID ID CSS ID HTML id ID box <Div> <div id="box"></div> HTML img { } background-color: #F93; background-image: url(file:///f /furniture/images/templatemo_bg.jpg); background-repeat: repeat; ID CSS div a:link <Div> a:link a:link <Div> 11

12 Dreamweaver CS6 网页制作 div a:link { } font-size: 12px; color: #F00; text-decoration: underline; CSS CSS CSS { CSS HTML property style attribute CSS <head> </head> <style> </sty CSS <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title> </title> <style type="text/css"> body { } font-family: "Lucida Console", Monaco, monospace; font-size: 12px; color: #666; background-color: #CC6;.pagefont { } font-family: "Comic Sans MS", cursive; font-size: 14px; color: #F00; white-space: pre; </style> } </head> <body > 12

第 1 章网页制作的基本知识 <div class="pagefont" > </div> </body>

规划站点和制作网页, 当制作好网站后还需要对站点进行测试发布更新和维护等 http:// www.dabaoku.

13 第 1 章网页制作的基本知识 <div class="pagefont" > </div> </body> </html> CSS CSS 魔法师 : 小魔女, 下面我将给你讲制作网页的一般流程, 如果前面讲解的知识没有听懂可要提出来喔! 小魔女 : 嗯, 没问题, 我都明白了! 你还是快讲讲网页的制作流程吧! 魔法师 : 为了能制作出界面美观内容丰富的网站, 在正式制作网站之前必须做好一系列的准备工作, 如收集资料素材规划站点和制作网页, 当制作好网站后还需要对站点进行测试发布更新和维护等 silversand.net 5D 13

14 Dreamweaver CS6 网页制作魔法档案网页布局的技术 Dreamweaver CSS CSS Div+CSS 1-17 图 1-17 页面风格和色调合理搭配的网页 14

15 第 1 章网页制作的基本知识魔法档案合理搭配颜色 Photoshop Fireworks Dreamweaver Dreamweaver 15

16 Dreamweaver CS6 网页制作 Internet Internet FTP Dreamweaver FTP 小魔女 : 我得回味一下制作网页的流程, 牢牢掌握这些知识! 魔法师 : 是的, 为了让你记忆更加深刻, 下面我再给你讲讲网页制作的原则网页元素的设计标准和配色技巧等, 让你能更好地掌握制作网页的方法小魔女 : 那可真是太好了, 我可正愁不知道该如何下手呢! 魔法师 : 那你可要仔细学习! 这可能帮你解决在制作网页过程中遇到的难题 16

17 第 1 章网页制作的基本知识 KB Logo banner 1 6 JS DHTML 17

88 31 120 60 2 120 90 1 125 125 468 60 88 31 banner 468 60 banner 15KB 22KB 88 31

18 Dreamweaver CS6 网页制作 2 Logo Logo Logo Logo Logo Logo Logo 图 1-18 Logo 3 banner banner banner banner banner banner banner banner banner 15KB 22KB banner 5KB 7KB banner 图 1-19 全尺寸的 banner 图 1-20 按钮 5 3:1 5:1 6 18

19 第 1 章网页制作的基本知识 H S B 魔法师 : 小魔女, 学习了这些知识后, 你有什么感想吗? 小魔女 : 嗯, 我原本以为制作网页是很简单的, 没想到还需要这么多的准备工作, 看来要制作出漂亮的网页可不是件容易的事啊! 魔法师 : 小魔女, 可不要灰心呀! 我们现在才刚开始学习, 后面可还有更精彩的内容呢! 小魔女 : 嗯, 我只是感慨一下嘛! 对于制作网页我还是很有信心的哟! 魔法师 : 哈哈, 这才对嘛! 看你这么有信心, 我就再给你讲一些制作网页时还能用到的知识与技巧 19

20 Dreamweaver CS6 网页制作第 1 招 :Dreamweaver 与其他软件的配合 Dreamweaver 3D Xtra 3D Crystrl Button Dreamweaver 第 2 招 : 网页元素的用色技巧 Logo 第 3 招 : 新手学网页的方法与技巧 Flash Fireworks Access DHTML JavaScript ASP

5-1 nav css 5-2

5 HTML CSS HTML CSS Ê Ê Ê Ê 5-1 nav css 5-2 5-1 5 5-1-1 5-01 css images 01 index.html 02 5-3 style.css css 03 CH5/5-01/images 04 images index.html style.css 05