下载文档原格式
第10课 处理导航1、超链接基础知识：①超链接（或链接）是对Internet 上或者你自己的计算机内的可用资源的引用。
超链接创建通过HTML 或者你使用的程序设计语言指定的交互式行为，并通过浏览器或者其他应用程序启用。
HTML 超链接由锚记元素<a>及一个或多个属性组成如图示： ②内部超链接是把用户带到相同文档、相同文件夹或硬盘驱动器中存储的另一个文档的超链接，而外部超链接是把用户带到硬盘驱动器、Web 站点或Web 主机外面的文档资源。
都是通过<a>锚记元素嵌入在HTML 中，这个元素指定超链接的目的地的地址或目标，并且可以使用几个属性指定它的工作方式。
③相对超链接就是引用相对于当前文档存储的目标，往往包括资源名称，也许还包括存储它的文件夹比如logo.jpg 或images/logo.jpg 。
绝对超链接引用绝对路径的资源，常用于引用站点外面的资源，包括目标完整URL ，如/index.jspa ，它可以把用户指引到特定的文件或者只是站点内的某个文件夹。
相对链接书写起来更快、更容易，但是如果文档保存在Web 站点中的不同文件夹中或者不同位置，它们可能不会工作。
绝对链接则没有此限制，但文档或文件夹或重命名时则会失败。
那么，为站点内的资源使用相对链接，为站点外的资源使用绝对链接。
2、创建内部超链接：①在“链接”框中输入文档名进行链接：打开文档，选取要添加链接的文本如Home （如是从模板创建的文档，此文本不是可编辑区域而不能选取，则需要打开模板选取要添加链接的文本如Home 进行设置后更新）或图像，在“属性”检查器中选择HTML 选项卡的“链接”框中显示了一个超链接符“#”，将此符号换成“../index.html ”回车则可。
但是还没有主页；②在“链接”框后浏览窗中选择文档名进行链接：打开文档，选取要添加链接的文本如Home （如是从模板创建的文档，此文本不是可编辑区域而不能选取，则需要打开模板选取要添加链接的文本如Home 进行设置后更新）或图像，在“属性”检查器中选择HTML 选项卡的“链接”框中显示了一个超链接符“#”，点此框后的“浏览文件图标”，从站点根文件夹中选择文件，确保“相对于”框中设置为“文档”，确定则可，则“#”变成文件名了。
选择题要点1 网页三剑客和新网页三剑客旧：Flash用来生成矢量动画 Fireworks用来制作Wed图像Dreamweaver用来制作和发布网页新：Dreamweaver Flash Photoshop2 Dreamweaver CS6界面中视图有，哪个只能查看，哪些可以设计?实时视图查看设计拆分代码可以设计3 Dreamweaver CS6的新特性全新的管理站点对话框流体网络布局Csc过渡效果图像优化功能为单个元素应用多个类的csc样式4静态网页的扩展名（HTML）根据内容对交互的方式不同可以将网页分为静态网页和动态网页根据实现方式的不同网页分为客户端动态网页和服务器端动态网页5 HTML和XHTML的中英文全称HTML（Hyper Text Markup Language）超文本标记语言XHTML（Extensible Hyper Text Markup Language ）可扩展超文本标记语言6 对齐方式(align）属性包含哪些?Align（水平）left（←）right（→）center（居中）valign（垂直）顶对齐底对齐水平居中垂直居中两端对齐7 常用的哪些是单标记，哪些是双标记<br />单标记< /br >双标记8 网页最基本的元素是文字与图像9 网站设计的基本流程及各个阶段的任务10 Dreamweaver是什么软件用来制作和发布网页的软件11 Http的中英文全称Hyper Text Transfer Protocol 超文本传输协议12 常用标记的含义<hr/><html></html><head></head><title></title><body></bdy><table></ta ble><p></p>13 有序列表和无序列表的标记，及其符号类型有序列表无序列表<OL><UL><li>123</li> 显示文：123 <li>123</li> 显示文：123</OL></UL>有序符号类型：数字1 罗马大写I 罗马小写i字母小写a 字母大写A无序符号类型：实心圆点 disc 实心方框 square空心圆圈 circle14表格的属性有哪些<table>表 <tr>行 <td>列15 表格中的标记有哪些组成表格的基本单位表格是由行和列组成的，行和列又是由单元格组成的。
Adobe DreamweaverCS6课程笔记第一节、Dreamweaver CS6软件简介和安装1、DreamweaverCS6是由美国Adobe公司最新开发的一款网页设计、网站管理为一体的专业软件。
2、为了保让能够正常安装，在安装时，请断开网络。
第二节、DWCS6软件界面的简介一、软件界面组成1、菜单栏2、工作区3、属性栏4、浮动面板（文件、资源、CSS样式、行为等）二、界面的切换：为满足不同人群的需求。
三、界面的恢复：窗口——工作区——重置设计器四、插入面板的调用。
第三节、网页相关知识1、DreamweaverCS6是由美国Adobe公司最新开发的一款网页设计、网站管理为一体的专业软件。
2、什么是网页（网页的概念）在互联网上基于http协议传播信息的页面。
3、什么是网站反应同一主题的多个网页的集合。
4、网页内容的组成(网页元素)（1）文字（2）图片（jpg，gif，png）（3）动画（swf，gif）（4）多媒体（5）超链接（6）表单（7）网页特效（8）其它元素第四节、网页制作方法与站点建立1、网页的制作方法（1）代码法：html（2）软件制作：Dreamweaver 、frontpage（所见即所得）。
2、制作网站前准备工作：建立站点。
3、站点：用来存放网站中所有元素的文件夹，为了制作方便需要将这个文件夹和制作软件相链接。
4、站点的建立(链接)（1）站点——建立（2）文件面板（3）应用程序栏（窗口——应用程序栏）5、站点的分类（按照网站的位置）（1）本地站点（2）远程站点第五节、规划本地站点目录结构1、规划本地站点目录结构（1）images（图片）（2）swf（动画）（3）css（CSS样式）（4）script（存放网页特效）JS（5）other（其它）2、网站主页名称（1）index.htm（2）index.html（3）default.htm（4）default.html注：主页必须放在网站的根目录下面，同时名称也有特殊的要求。
第六、七节、网页中文字的输入1-21、网页的四个视图（1）设计视图（2）代码视图（3）拆分视图（4）实时视图2、网页中的文字（1）文字直接输入就可以了。
（2）回车表示换段。
（3）shift+回车：表示换行。
（4）输入空格时要在全角输入法状态下输入。
（5）特殊字符的插入：“插入——html——特殊字符”（6）文字也可以从网站中复制，但是在复制时需要将网页中文字的格式去掉。
（注：如何去除复制来的文字格式，只需要将文字粘贴到记事本中，然后从记事本中再复制文字就可以了。
）3、预览网页：文件——在浏览器中预览——IExplore（快捷键：F12）第八、九节、页面属性1-21、页面属性（1）修改——页面属性（2）或通过属性栏2、属性（1）左边距、右边距、上边距、下边距。
（2）文字字体、大小、颜色。
注：A、字体：选择常用字体。
如：宋体B、大小：正文文字一般设置为12-16px。
（3）页面背景。
（4）背景图片。
（默认情况自动填充、平铺）注：A、图片要放在站点内。
（有关网站中的所有元素都必须放在站点内）。
B、图片名称不能为中文。
注：如果同时设置背景颜色和背景图片，以背景图片为准。
第十节、Html网页基本代码格式1、网页基本代码<html><head><title></title></head><body></body></html>注：（1）head：开头部分（2）title：标题（3）body：正文部分2、常用代码（1）<p></p>：换段（2）<br>：换行注：多数html代码都有对称性的特点。
第十一节、图片的插入一、图片1、图片格式（1）JPG：图片质量较高，一般用于较大的图片。
如：人物、风景。
（不支持透明）（2）gif：用于制用按钮、动画、导航条等，图片较小，只有256种颜色。
（支持透明）（3）png：兼有两种格式的特点。
（支持透明）注：图片的大小一般尽量控制在200K以下。
2、链接（1）_blank：在新的网页打工。
（2）_self：在自身网页打开。
第十二节、图片热点1、热点（1）矩形热点（2）圆形热点（3）多边形热点注：编辑——首选参数——辅助功能——图像2、替换（1）用于图片的注释。
（2）当图片无法显示的时候用此内容代替。
3、宽度和高度的设置4、相关html代码（1）Img：图片。
（2）Src：位置。
（3）热点：<map>……</map>第十三节、图片的编辑一、裁剪、亮度对比度、锐化注：使用Dreamweaver编辑图像是个不好的习惯，如果要编辑图像，最好使用专门的图像编辑软件（如：Fireworks、photoshop），编辑好了以后，再重新插入进来。
二、插入——图像对象——鼠标经过图像三、水平线的插入插入——html——水平线四、背景颜色的代码：bgcolor第十四节、超链接一、超链接指的是通过点击一个对象可以链接打开另外一个对象（网页、图片、程序等）。
二、链接的代码（即链接的标签）<a href=”URL”>内容</a><a href=”URL” target=”_blank”>文字</a>三、超链接的状态（修改——页面属性——链接）（1）链接：链接默认颜色。
（2）变换图像：鼠标移上去时的颜色。
（3）已访问：访问以后链接的颜色。
（4）活动：鼠标点下去时的颜色。
第十五节、超链接打开方式一、链接页面打开的目标：_blank：新窗口打开网页New：新窗口打开网页_parent：父窗口（框架结构）_self：自身窗口、原窗口_top：顶窗口（框架结构）第十六、十七、十八、十九节、超链接对象一、超链接的对象（1）文字（2）图片（3）热点（4）空链接（#）（5）邮件链接：mailto：邮箱地址（可以利用菜单命令直接插入）（6）下载链接（浏览器打不开的内容即为下载链接）（7）锚点链接（链接到网页的具体位置）步骤：（1）创建锚点（2）制作链接（#锚记）隐藏锚点：编辑——首选参数——不可见元素注：锚点链接不但可以链接本页面中的锚点，也可以链接到其它页面中的锚点。
（8）脚本链接（实现特殊功能）Javascript:window.close()——关闭窗口Javascript:window.print()——打印文字第二十节、表格一、表格的作用1、制作表格2、定位布局二、表格的建立1、插入——表格2、常用面板三、表格的元素及代码1、<td>…..</td>：单元格2、<t r>…..</tr>：行3、<table>…..</table>：表格四、元素的选择1、单元格2、行3、表格第二十一节、表格属性一、表格参数1、行数和列数2、宽度单位：（1）象素表示绝对值（固定值）。
（2）用%表示相对值。
3、填充：单元格中的内容与边框的距离。
4、间距：表示单元格与单元格之间的距离。
5、边框：设置表格是否留有边线。
6、对齐7、清除行高和列宽8、将宽度转换为象素9、将宽度转换为百分比第二十二节、行和单元格属性1、水平：单元格内容水平对齐方式。
2、垂直：单元格内容垂直对齐方式。
3、宽：单元格宽度。
4、高：单元格高度。
5、背景颜色：单元格背景颜色。
6、拆分和合并单元格。
注：在利用表格排版时网页中各种元素都是放入单元格内进行排版的。
第二十三节、网页布局和大小一、网页布局分类（1）“同”字式（2）“厂”字式或反“厂”字式二、网页大小（宽度大小）（1）800*600分辨率宽度设为778象素（2）1024*768分辨率宽度设为950象素或1002象素注：滚动条一般占有22个象素第二十四、二十五、二十六节、实例——网页制作1一、制作网站时的步骤：1、设置页面边距（0，0，0，0）即上、下、左、右边距都为0。
2、先整体后局部：先插入一个大表格用来定位和决定网页宽度，然后再插入小表格来定位每一个部分。
注：（1）大表格尽量不拆分。
（即一行一列）（2）表格与表格之间可以嵌套。
3、插入表格（0，0，0）即填充、边框、间距为0。
4、表格大小和居中（1）800*600分辨率宽度设为778象素（2）1024*768分辨率宽度高为950象素或1002象素5、将单元格内光标定位到左上角（选单元格设置）6、将单元格的高度设置和图片高度一样（作为背景时）第二十七——三十一节、实例——网页制作1-81、图片可以直接插入到表格中、也可以作为背景插入。
注：什么时候直接插入到表格、什么时候作为背景插入呢？（1）当需要在单元格内添加文字时就必须使用背景插入。
（2）如果需要做超链接时就必须作为图片插入。
2、选择表格标签后插入表格可以将新插入的表格放在所选择表格的下面。
3、插入——图像对象——图像占位符注：插入图像占位符后就可以任意设置表格的宽度和高度。
第三十二、三十三节、实例——网页制作9-10一、添加行和列1、插入——插入表格对象2、布局标签3、Tab键（光标定位在最后一个单元格内按tab键）第三十四节、参数的优先级一、参数优先级：单元格>>行>>表格注：表格间距部分的颜色取决于表格背景颜色。
二、图像大于颜色且自动复制1、背景颜色：bgcolor2、背景图像：background第三十五节、表格中单元格大小的设置1、宽度要根据实际大小来进行设置。
2、在设置表格单元格宽度时，可以保留某一列单元格的宽度不设置。
第三十六——三十八节、细线边框表格的制作1-31、利用表格的间距属性来制作。
2、利用表格的填充属性来制作。
第三十九节、实例——简单导航条1、利用表格的间距属性来制作。
第四十节、实例——水平细线与标题栏1、插入图像占位符2、删除单元格中的空格占位符： 第四十一节、实例——圆角表格1第四十二节、实例——圆角表格21、height="100%"：表示高度为100%。
第四十三节、网页平面效果图1、网站在制作前首先要做网页效果平面图。
2、平面图做好以后再用photoshop、或Fireworks等软件中的切片工具做切片。
3、切片做好后并进行保存。
4、删除不要的部分，保留需要的部分并进行重命名。
第四十四节、滚动效果代码1、<marquee>内容</marquee>（1）direction：方向（2）scrollamount：速度（一般设为3）（3）on mouseover=“this.stop()”：鼠标移上去停止（4）on mouseout=”this.start()”：鼠标离开时开始。
