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）在“文件”面板中，选中“站点-站点文件夹名”，单击右键选择新建文
件夹命令，创建一个“p_w_picpaths”文件夹，用来存放网页中的图片。

另外：

本地站点：必须为每个网站定义一个本地站点

本地站点是指，存储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的缩写

转载于:https://blog.51cto.com/rzmars/804107

ACCP学习旅程之----- 使用Dreamweaver制作网页相关推荐

dw用html表格做网页,用Dreamweaver制作网页的技巧
用Dreamweaver制作网页的技巧导语:Dreamweaver是制作网页最常用的一个工具,下面就由小编为大家介绍一下用Dreamweaver制作网页的技巧,欢迎大家阅读! 1.灵活运用样式熟悉 ...
使用Dreamweaver制作网页的20个技巧。
转载自品略图书馆 http://www.pinlue.com/article/2019/06/2401/089234111856.html 使用Dreamweaver制作网页的20个技巧.希望对您有所 ...
如何使用Dreamweaver制作网页的技巧分享
转自:微点阅读 https://www.weidianyuedu.com 使用Dreamweaver制作网页的20个技巧.希望对您有所帮助. 1)怎样将 Dreamweaver 集成到 IE 浏览器 ...
做网页是用dw还是html,教你如何用Dreamweaver制作网页以及保存网页的方法--系统之家...
如何用Dreamweaver(DW)制作网页并保存网页呢?我就在这里教给大家最基础的创建网页和保存网页的方法教程,希望能帮到有需要的朋友. 启动软件后,在左上角点击[文件],在下拉菜单中点击[新建]. ...
分享Dreamweaver制作网页13种技巧
zoomla!逐浪CMS与您分享Dreamweaver制作网页13种技巧 1.活用Format Table命令在复杂的网页设计中,表格的应用是最多的,因为利用表格可以自由地控制文本和图象在网页上出现 ...
dw网页制作服务器可浏览,Dreamweaver制作网页发布网站
Dreamweaver制作网页发布网站我们为大家收集整理了关于Dreamweaver制作网页发布网站,以方便大家参考.在发布网站之前先使用Dreamweaver MX 2004 站点管理器对你的网站 ...
用DW和MySQL制作网页_怎样用dreamweaver制作网页
展开全部一.定义站点 1. 在任意一个根目32313133353236313431303231363533e58685e5aeb931333365646263录下创建好一个文件夹(我们这里假设为E盘 ...
ACCP学习旅程之----- 使用HTML语言开发商业站点(第一章 HTML的基本标签)
在这里记录HTML中的所有单标签:<META> <P>-</P>可选 ...
Dreamweaver制作网页常出现的问题/DW技巧
这里是DW使用中常出现的问题.确切的说应该算是DW中的一些小技巧.通过对问题的解说.我们就能更好的运用DW来制作个性的网页来 1> 在DW中,如何输入一个空格呢? 输入空格的问题,在DW似 ...
ACCP学习旅程之----- SQL Server(第五章数据查询（二）)
特别注意:主外健关系中,名字可以不同,类型和长度必须相同. 1￥模糊查询模糊查询提取的数据不一定是确切的,查询者对查询条件也是模糊的.大概的.不特别明确的. 1$ 使用Like进行模糊查询 ...

ACCP学习旅程之----- 使用Dreamweaver制作网页

ACCP学习旅程之----- 使用Dreamweaver制作网页相关推荐

最新文章

热门文章