ACCP学习旅程之----- 使用Dreamweaver制作网页
1￥ 如何使用基本标签
1）新建一个HTML页面
1$ 选择“文件”-“新建”命令（Ctrl+N），弹出“新建文档对话框。
2$ 从类别列表框中选择“基本页”，然后从右侧的列表中选择“HTML”
选项
3$ 单击“创建”按钮
2）设置页面标题和背景
1$ 设定标题
可以在“文档”工具栏的“标题”文本框中输入标题
或者，从菜单镇南关选择“修改”-“页面属性”命令，在标题/编码中修改。
2$ 设置页面背景
可在“属性”面板中选择“页面属性”-“背景颜色”命令修改
3）在页面中插入图片
1。将插入点放置在“文档”窗口要显示图像的位置
2。选择“插入”-“图像”命令，弹出“选择图像源文件”对话框
3。选择要插入的图像，然后单击确定。
4）插入FLASH
无论FLASH文件还是广告条、按钮，还是交互式动画，都可以转换成.swf格式。
这种格式比标准的GIF动画有更多功能。
“插入”-“媒体”-“FLASH”命令
插入后的FLASH文件，显示为灰色矩形，矩形中间是FLASH徽标。
在“属性”面板中可以调整设置FLASH的宽度和高度。
5）创建超链接
1$ 使用Dreamweaver链接到其他文档（略）
1。在“文档”窗口中选择文本或图像作为超链接
2。打开“属性”检查器（选择“窗口”-“属性”命令）
3。单击“链接”字段右边的文件夹图标（“浏览文件”）进行选择
4。选择好的目标文件，到链接文档的路径显示在“链接”字段后
面的文本框中
5。在“属性”检查器中，从“目标”下拉列表中选择要打开文件
的位置。（_blank _self _parent _top）
2$ 使用Dreamweaver链接到同一文档的其他位置
1．创建命名锚记
1。在“文档”窗口的“设计”视图中，将插入点放在需要命
名锚记的地方。
2。执行下列操作之一：
选择菜单“插入”-“命名锚记”命令
按下Ctrl+Alt+A组合键
在工具栏的“常用”类别中，单击“命名锚记”按钮
3。在命名对话框中为锚记命名，此时，被锚记的文档处出现
锚记标记。
2．链接到命名好的锚记
1。在“文档”窗口中的“设计”视图中，选择要作为链接的
文档或图像。
2。在“属性”检查器的“链接”文本框中输入“#”和锚记名称
特别注意：
锚记名称区分大小写，必须完全一致
6）换行、换段
回车等效于新建段落，Shift+回车等效于换行
7）格式化文本（可在属性面板中设置字体样式、颜色、对齐等）
8）插入特殊字符
“插入”-“HTML”-“特殊字符”-选择其中的项目插入
9）创建列表（略）
2￥ 表格（略）
3￥ 表单（略）
4￥ 框架（略）
5￥ 样式表（略）
第六章 网站设计和页面布局技术（一）（粗略，待完善）
1￥ 网站的开发流程
1）需求分析
1$ 了解客户需求
1。业务背景
2。设计风格
3。网站内容
2$ 确认客户需求
1。设计一个用户可以直接感知的静态网站样板（感知用户界面）
2）网站制作
1。创建站点
2。制作首页
3。制作模板
4。制作样式
3）测试网页
1。页面效果是否美观
2。页面中的链接是否完好（“检查链接”命令）
3。是否兼容不同的浏览器
4）发布网站
1。本地发布（通过本地计算机完成）
在Windows操作系统中，一般通过IIS来构建本地Web发布平台，这种发布方式只能让局域网中的用户访问站点。
2．远程发布
即登录到Internet上，然后利用Internet服务商提供的个人网络空间来真实地发布自己的网站。
这种发布方式首先要申请一个域名和虚拟主机，申请成功后Internet服务商会分配一个IP地址、用户名和密码，使用此IP地址、用户名、密码就可以把网站上传到Internet上。
只有这样，才能让Internet上的用户访问到您的站点。
2￥ 创建静态站点
1）在本地硬盘上创建一个站点文件夹，用于存放站点，可空也可非空。
2）选择“站点”-“管理站点”命令，在弹出的“站点管理”对话框中选
择“新建”-“站点”命令。
此时，将弹出“站点定义”对话框
3）在“站点”定义对话框中，输入站点名称，单击“下一步”
该站点名称仅供参考，不会显示在Web上。
4）在出现的“站点定义为”对话框中，选择“否，我不想使用服务器技
术”（静态站点需求），单击“下一步”。
5）选择“编辑我的计算机上的本地副本，完成后再上传到服务器（推荐）”
单选按钮。
6）在“您将把文件存储在计算机上的什么位置”文本框中选择存储路径
一般选择创建好的站点文件夹。 单击“下一步”。
7）在“您如何连接到远程服务器”选项中，从下拉列表中选择“无”（静
态站点需求），单击“下一步”-“完成”。
8）在“文件”面板中，选中“站点-站点文件夹名”，单击右键选择新建文
件夹命令，创建一个“images”文件夹，用来存放网页中的图片。
另外：
本地站点：必须为每个网站定义一个本地站点
本地站点是指，存储Web文件和文档的文件夹。
本地站点包含网站的文件，这些文件存储在本地磁盘上。更新网站的文件时，可以编辑本地站点中的文件，然后上传到远程服务器。
？？？？wwwroot文件夹/Web的作用？？？？？？
远程站点：
远程站点就是常说的网站（Web）服务器
在建立远程站点之前，必须先创建一个本地站点
（该本地站点将与远程站点关联）
建立远程站点后，即可根据需要上传文件和将文件下载到本地站点中
根文件夹（即站点文件夹）
3￥ 制作网站首页
1）一般的首页页面内容
1。导航部分
2。广告部分
3。商品分类部分
4。版权声明部分
2）首页的页面布局
目前比较流行的布局有三种： 框架布局
表格布局
DIV层布局
1．框架布局
缺点：不同浏览器兼容性差，应用范围有限
保存框架集比较麻烦，不仅要保存框架集本身页面，还要
保存每个框架窗口中的HTML文档。
优点：能在框架窗口中支持滚动条，显示更多的内容
能有效地实现页面导航功能，方便浏览
相同的内容只需下载一次，减少下载时间
应用：小型商业网站、各种网页学习形式的教程、
网站后台管理页面等。
2．表格布局
缺点：用了过多的表格，会产生过多的垃圾代码
从而影响页面的下载时间
当页面需要布局调整时，往往需要重新制作表格
因此，表格布局的灵活性不大，难于修改。
优点：能很方便的排列有规律、结构均匀的内容和数据
在定位图片和文本上比起CSS类样式更加方便
应用：几乎所有的网页都会不同程度的用到表格布局
3．DIV层布局
1$ DIV层布局离不开CSS的配合，DIV+CSS已经成为设计标准
2$ CSS是英语层叠样式表单（Cascading Style Sheets）的缩写
3$ DIV元素是用来为HTML文档内的大块内容提供结构和背景
的元素，就象一个容器，可大可小，可长可短。
4$ 使用Dreamweaver绘制层布局
1．打开Dreamweaver，新建一个空白文档
2．在工具栏的“布局”类别中选择“绘制层”按钮
3．在“文档”窗口的“设计”视图中，执行下列操作之一：
按下鼠标左键，拖动以绘制一个层；
通过按住Ctrl键并按下鼠标左键进行拖动来连续绘制多
个层（只要不松开Ctrl键，就可以继续绘制新层）
4．绘制好层后，可以在属性面板中设置层的背景图像或背
景颜色。
5$ DIV层布局相关的代码知识
1．绘制层的同时将在<HEAD>中的<STYLE>标签中增加ID
选择器
格式： #ID名 {样式规则；样式规则；。。。}
如：
<HEAD>
<STYLE type=”text/css”>
#Layer1 { //（默认ID选择器名）
position:absolute; //创建位置为绝对位置
left:9px; //距浏览器左边界9
top:12px; //距浏览器右边界12
width:418px; //层宽418
height:58px; //层高58
z-index:1; //层编号1
//默认按照创建顺序自
//动编号
background-color:#ff0000
//背景色
}
</STYLE>
</HEAD>
2．在文档中使用<BODY>标签中的<DIV>….</DIV>可以给
层指定层增加各种HTML文档元素。
<DIV>….</DIV>是层标签，其之间的所有内容都是用来构成整个层布局块的，其中包含元素的特性有DIV标签的属性来控制，或者通过使用样式表格式化这个块控制。
某个标签希望采用某ID选择器中定义的样式规则，语法
格式如下：
如： <P ID=”ID选择器名”> </P>
//在<P>标签中使用ID选择器中规定的样式规则
又如： <DIV id=”Layer1”></DIV>
//在该层中使用名为Layer1的ID选择器规定的样
式表格式化整个块
3．层样式#LAYER写在HEAD和STYLE中，
DIV写在BODY中，
DIV中的ID与#LAYER名对应
3）最佳布局为 DIV布局+表格布局
第七章 网站设计和页面布局技术（二）
1￥ 制作模板并应用到其他页面
要使用模板必须先有站点！！！！！！
模板的功能就是将版式和内容设计分离，先设计版式布局并存为模板
1） 制作模板
Dreamweaver使用标准的HTML注释来确定使用了那个模板和模板中的
那些区域可以编辑。
制作好的模板将自动保存在本地站点文件夹中的“Templates”文件夹中
不能将模板从”Templates”文件夹中移出，也不能将非模板文件放在
Templates文件夹中
也不能将Templates文件夹从站点的本地跟文件夹中移出
在应用模板时，未应用模板的HTML一定是空白文档，不要添加内容
1$ 将现有HTML文档保存为模板
1。选择“文件”-“打开”命令
2。在“打开”对话框中，选择要创建保存为模板的现有文档
3。单击“确定”按钮，该文档将出现在“文档”窗口中
4。选择“文件”-“另存为模板”命令，将出现“另存为模板”
对话框
5。在“另存为模板”对话框中，从“站点”下拉菜单中选择要保
存该模板文件的站点。
可在“另存为”文本框中输入新的模板文件名称
6。单击“保存”按钮 （模板文件名扩展名为。dwt）
2$ 新建空白模板
1。选择“窗口”-“资源”命令或按F11键，出现“资源”面板
2。单击“资源”面板上的“模板”图标，出现“模板”面板
3。单击“模板”面板右下角的“新建模板”图标
4。在“名称”字段中输入新模板名称，然后回车
5。单击“模板”面板右下角的“编辑”图标
在HTML文档窗口中将打开空白模板的编辑页面，可在其中添加
DIV块区域、表格、文本、图像等等其他页面元素。
2） 定义可编辑区域
1$ 添加基本可编辑区域
1。在“模板”HTML文档中选择要设置为可编辑的区域
通常为某个层、某部布局表格的某行等
2。执行以下步骤之一：
在工具栏的“常用”选项卡中，单击“模板”图标，在弹出的下
拉菜单中选择“可编辑区域”命令。
选择“插入”-“模板对象”-“可编缉区域”命令
在所选区域中单击右键，选择“模板”-“新建可编缉区域”命令
按Ctrl+Alt+V组合键
3。此时，将出现“新建可编缉区域”对话框。可在“名称”文本框
中为该可编缉区域起名。 单击“确定”按钮。
4。定义好的可编缉区域将高亮度显示在一个矩形内，可以向其中添
加内容了。（通常在此矩形内空几行，将其扩大，表示此区域可
编缉）
这样，当用户打开模板时，将只有可编缉的区域可以添加内容；
而模板中的非可编缉区域，将不能够做任何改动。
2$ 删除可编辑区域（略）
3）应用模板
模板定义好后，在网站页面中应用模板时，必须确保所有相关的页面都使用该模板，以便在更新模板时，这些页面会随之更新
应用步骤：
1。新建要应用模板的空白文档
2。在“资源”面板中单击模板图标，找到相应的要应用的模板
3。将模板从面板拖到空白“文档”窗口中
4。在可编辑区域添加或编辑数据。
2￥ 制作样式表并和其他页面绑定（即用鼠标创建样式表，功能同代码，略）
3￥ 设置页面间的链接（略）
4￥ 测试并发布网站
1）测试内容
1$ 页面效果是否美观
2$ 链接是否完好
1．检查单个页面链接
1。。打开站点，并打开站点中的要检查的文档
2。。选择“文件”-“检查页”-“检查链接”命令
系统将自动打开“结果”面板显示“链接检查器”面板
其中的“显示”下拉菜单中包含三种类型的链接报告：
“断掉的链接”： 显示含有断裂超链接的网页名称
“外部链接选项”：显示包含的外部链接的网页名称
“孤立文件”选项：显示网站中没有被使用到的或未被链
接到的文件
注意：孤立文件选项只有进行全站链接检查时才有效
2．检查整个站点中的链接
1。。从“文件”面板中选择一个要检查的站点
2。。单击“链接检查器”面板中左上角的“检查链接”按钮
3。。从弹出的菜单中选择“检查整个当前本地站点的链接”
命令
4。。在“链接检查器”面板中的列表框中显示链接报告
3$ 测试不同浏览器的兼容性
1． 设置希望检查的浏览器及其版本
在“文档”工具栏中的“目标浏览器检查”菜单中选择“设
置”命令，出现“目标浏览器”对话框。
2． 检查单个页面或整个站点的兼容性
在“文件”面板的“本地”视图中，选择单个页面或包含整个
站点的文件夹
选择“文件”-“检查页”-“检查目标浏览器”命令
检查结果将显示在“结果”面板中
在“结果”面板中选择某项，单击右键选择“在浏览器中打开
结果”命令，可以在打开的页面中看到不兼容的原因。
2）发布站点
1$ 安装IIS（略）
IIS是一个专门的Internet信息服务器系统，不但可以提供Web服务，还可以提供文件传输、新闻和邮件等服务
安装（详见 P185-P186 略）
2$ 上传网站
把做好的网站上传到IIS中的Web服务器上
1．选择“站点”-“管理站点”命令
在弹出的对话框中的列表中选择要上传的站点名称
单击“编辑”按钮，弹出“站点定义”对话框
2．在“分类”列表框中选择“远程信息”选项
在“访问”下拉列表中选择“本地/网络”选项
在“访问”下俩列表框下面就会出现相关设置
3．在“远端文件夹”文本框中，制定网站发布的目录为“C:\Inetput\wwwroot\”（即上传到本地服务器，本地IIS中的Web服务器默认目录）
4．在“文件”面板中，单击“上传文件”图标。
在弹出的“是否上传整个站点”对话框中单击确定。
就可以把站点上传到“C:\Inetput\wwwroot\”目录下
完成网站上传后，即可通过网址访问网站。
3$ 访问网站
由于网站是上传到本地Web服务器上的，所以有两种访问方式：
1．在浏览器地址栏中输入http://本地服务器IP地址
/index.html即可访问站点
这种访问方式在同一局域网中不同的计算机上都可以访问
2．在浏览器地址栏中输入http://127.0.0.1/index.html也可以
访问，但仅限于本机访问
另外：
1． 标签中的ID属性的作用等同于class
<TH>标签的作用
HTML th 标签什么作用 （默认居中加粗显示，其他跟TD一样）
th 标签 -- 代表HTML表格中的表头
· th标签是成对出现的,以<th>开始,</th>结束
· 属性
· Common -- 一般属性
· abbr -- 代表表头的简写
· axis -- 对单元格在概念上分类
· colspan -- 一行跨越多列
· headers -- 连接表格的数据与表头
· rowspan -- 一列跨越多行
· scope -- 定义行或列的表头
· align -- 代表水平对齐方式(left(左对齐) | center(居中对齐) | right(右对齐) | justify)(此属性应该使用CSS实现)
· valign -- 代表垂直对齐方式(top(顶部对齐) | middle(中部对齐) | bottom(下部对齐) | baseline(基线对齐))(此属性应该使用CSS实现)
th是table header cell的缩写