Dreamweaver8中文实例教程

第1章网页设计基础1.1认识网页1.2网页设计的基本原则1.3Dreamweaver8简介1.4Dreamweaver8的参数设置【知识要点】1．认识网页。2．网页设计的基本原则。3．Dreamweaver8简介。4．Dreamweaver8的参数设置。【技能目标】1．了解网页的基础知识。2．了解网页设计的基本原则。3．认识Dreamweaver8的主界面。4．了解首选参数的设置。1.1认识网页网页一般分为静态网页和动态网页。静态网页是标准的HTML文件，扩展名为.html或.htm。动态网页在许多方面与静态网页是一致的。根据采用Web应用技术的不同，动态网页文件的扩展名也不同。在文件中使用ASP（ActiveServerPages）技术时，扩展名是.asp，使用JSP（JavaServerPages）技术时，文件扩展名为.jsp。1.1.1什么是网页搜狐网页中国银行静态首页中国农业银行动态首页1.1.2网页与网站的关系一个完整的网站是由多个网页构成的，这些网页是分别独立的，这些独立的网页通过超链接联系起来。网站可以看做是许多网页的家，浏览者可以通过浏览器访问网站的地址后，读取这个网站内的网页。网页是网站的基本信息单位，一个网站通常由众多的网页有机地组织起来，用来为网站用户提供各种各样的信息和服务，好比一栋大楼里的一个个房间。1.1.3常用的网页制作工具网页的设计制作一般分为三个阶段：一是设计，二是布局，三是动画的添加，复杂的还涉及脚本程序。从设计角度来说，常用的应用软件有Photoshop、Fireworks等专业的图形图像设计软件。1.1.4网络基本术语1．域名2．HTTP协议3．FTP协议4．超级链接5．站点1.1.5认识HTMLHTML全名是HyperTextMarkupLanguage，即超文本标记语言，是用来描述Internet服务器上超文本文件的语言。HTML不是一种编程语言，而是一种页面描述性标记语言。它通过各种标记描述不同的内容，说明段落、标题、图像、字体等在浏览器中的显示效果。浏览器打开HTML文件时，将根据HTML标记来显示内容。HTML标记的一般使用格式为标记符内容/标记符1.1.6HTML基本语法HTML语言的功能是通过各种标记来实现的，其中有些标记是HTML文件不可缺少的，一个最基本的网页HTML代码格式如下：htmlheadtitle网页标题/title/headbody网页设计从这里起步/body/html1．基本标记（1）html…/html（2）head…/head（3）title…/title（4）body…/body（5）hn…/hn（6）br（7）p…/p（8）hrbody…/body部分htmlheadtitle标题示例/title/headbody这是普通文字ph1一级标题/h1h2二级标题/h2h3三级标题/h3h4四级标题/h4h5五级标题/h5h6六级标题/h6/body/htmlhtmlheadtitle使用换行示例/title/headbody如梦令br昨夜雨疏风骤，浓睡不消残酒。br试问卷帘人，却道海棠依旧。br知否？知否？应是绿肥红瘦。/body/htmlhtmlheadtitle段落标签/title/headbodypalign=center虞美人palign=left春花秋月何时了，palign=right往事知多少。palign=left小楼昨夜又东风，palign=right故国不堪回首月明中。/p/body/html2．文本标记（1）size属性设置字号大小htmlheadtitle设置字号的font标签/title/headbodyfontsize=7这是size=7的字体/fontpfontsize=6这是size=6的字体/fontpfontsize=5这是size=5的字体/fontpfontsize=4这是size=4的字体/fontpfontsize=3这是size=3的字体/fontpfontsize=2这是size=2的字体/fontpfontsize=1这是size=1的字体/fontpfontsize=-1这是size=-1的字体/fontp/body/html（2）face属性设置文字的字体htmlheadtitle设置字体/title/headbodycenterfontface=楷体_GB2312欢迎光临/fontpfontface=宋体欢迎光临/fontpfontface=仿宋_GB2312欢迎光临/fontpfontface=黑体欢迎光临/fontpfontface=ArialWelcometomyhomepage./fontpfontface=gautamiWelcometomyhomepage./fontp/center/body/html（3）color属性设置字体的颜色htmlheadtitle字体的颜色/title/headbodycenterfontcolor=Black各种颜色的字体/fontbrfontcolor=Red各种颜色的字体/fontbrfontcolor=#00FFFF各种颜色的字体/fontbrfontcolor=#FFFF00各种颜色的字体/fontbrfontcolor=#800000各种颜色的字体/fontbrfontcolor=#00FF00各种颜色的字体/fontbrfontcolor=#C0C0C0各种颜色的字体/fontbr/center/body/html（4）其他设置文本的标签htmlheadtitle字体样式/title/headbodyb黑体字/bpi斜体字/ipu加下划线/upbig大型字体/bigpsmall小型字体/smallpblink闪烁效果/blinkpemWelcome/empstrongWelcome/strongpciteWelcome/cite/p/body/html3．表格标记（1）表格的基本结构htmlheadtitle简单的表格/title/headbodytableborder=1trth姓名/thth性别/thth年龄/thtrtd大毛/tdtd男/tdtd19/td/table/body/html（2）表格的标题表格标题的位置，可由align属性来设置，其位置分别是表格上方和表格下方。设置标题位于表格上方：captionalign=top…/caption设置标题位于表格下方：captionalign=bottom…/caption（3）表格的尺寸设置一般情况下，表格的总长度和总宽度是根据各行和各列的总和自动调整的，如果要直接固定表格的大小，可以使用下列方式：tablewidth=n1height=n2（4）表格的边框尺寸设置htmlheadtitle表格的边框尺寸/title/headbodytableborder=10width=250caption入库单/captiontrth大米/thth面粉/thth食用油/thtrtd500公斤/tdtd400公斤/tdtd200公斤/td/table/body/html（5）表格的间距调整tablecellspacing=nn表示要取用的像素值（6）表格内容与格线之间宽度的设置tablecellpadding=nn表示要取用的像素值（7）表格内数据的布局对齐表格中数据的排列方式有两种，分别是左右排列和上下排列。左右排列由align属性来设置，而上下排列则由valign属性来设置。（8）表格的颜色设置htmlheadtitle表格的颜色设置/title/headbodytableborder=2bgcolor=Greentrthbgcolor=#FF00FF网页设计/ththbgcolor=#000099Flash动画/thth多媒体制作/thtrbgcolor=yellowtdA/tdtdB/td/table/body/html4．链接标记超链接使用a标记，其基本格式是：ahref=资源地址链接文字或图像/a（1）本地链接以绝对路径表示：ahref=file://D:/html/index.htm文件的链接/a以相对路径表示：ahref=index.htm文件的链接/a链接上一目录中的文件：ahref=../../Internet/IP地址IP地址/a（2）URL链接URL链接的形式是：“协议名：//主机.域名／路径／文件名”在HTML文件中，链接其他主机上的文件时，格式如下：ahref=URL地址文件的链接/a（3）锚链接aname=链接位置名称/a在调用此链接部分的文件，定义链接格式为：ahref=文件名#链接位置名称链接文字/a1.2网页设计的基本原则1．明确建立网站的目标和用户需求2．总体设计方案主题鲜明3．网站的版式设计4．网页形式与内容相统一5．三维空间的构成6．多媒体功能的使用7．网站测试和改进8．合理运用新技术1.3Dreamweaver8简介1.3.1Dreamweaver8的运行环境在Windows系统中运行Dreamweaver8的配置要求如下：InterPentiumⅢ600MHz或更快的处理器。Windows98/2000/XP或WindowsServer2003。至少128MB的可用内存（RAM）。至少275MB可用磁盘空间。能达到1024×768像素分辨率的16位或更高分辨率的显示器。在AppleMacintosh系统中运行Dreamweaver8的配置要求如下：500MHz或更快的PowerMacintoshG3或更新型号的处理器。MacOSX10.2.6。至少128MB的可用内存（RAM）。至少275MB可用磁盘空间。达到1024×768像素分辨率的16位或更高分辨率的显示器。1.3.2Dreamweaver8的启动与退出1．启动Dreamweaver82．退出Dreamweaver8（1）单击Dreamweaver8程序窗口右上角的关闭按钮。（2）执行“文件→退出”命令。（3）双击Dreamweaver8程序窗口左上角的Dreamweaver8图标。（4）按下“Alt+F4”快捷键。1.3.3选择Dreamweaver8的工作界面1．“设计器”工作区模式2．“编码器”工作区模式1.3.4Dreamweaver8的窗口组成标题栏快捷插入面板菜单栏工具栏文档窗口属性面板面板组1．标题栏和菜单栏标题栏菜单栏（1）文件。用于管理页面文件。（2）编辑。用于对文件常规编辑。（3）查看。此菜单中包含了文档的各种视图，通过它可以显示或隐藏不同类型的页面元素以及其他的辅助工具。（4）插入。快捷插入面板的替