网页制作.docx - 冰豆网

资源描述

网页制作.docx

《网页制作.docx》由会员分享，可在线阅读，更多相关《网页制作.docx（8页珍藏版）》请在冰豆网上搜索。

网页制作.docx

网页制作

DREAMWEAVER操作界面：

菜单区，工具区，起始页，右侧面板及底部面板

面板的使用：

1、掌握面板的折叠/展开

2、面板的移动：

拖动面板左侧的“虚线”

3、面板的显示/隐藏：

通过“窗口”菜单可以控制所有面板显示/隐藏

4、如何自定义操作界面：

将自己所调整好的操作界面保存在DW中

通过“窗口”菜单中的“工作区布局”---保存当前命令实现DW操作界面方案的保存

工具区的使用:

工具区有两种界面显示效果

1、以菜单方式显示工具

2、以制表符（列表）方式显示工具

工具区中“收藏夹”的使用:

将其它各个列表中经常用到的工具放至收藏夹中以方便用户日后使用

起始页:

可以通过起始页快速地完成新建与打开页面的操作

网页：

网页是一种文件格式其文件类型属于HTML

HTML---超级文本标签语言，是一种编程语言

HTML文件与IE浏览器之间的关系：

HTML文件中是由各种标签语言制作的网页源代码

IE浏览器内部嵌入了标签语言翻译系统可以将HTML中源代码翻译为用户最终所看到的效果

标签格式：

<标签名>…………内容…………

代表开始标签所作用的内容代表结束

每一种标签就代表了一种具体的效果

HTML语言书写规范：

代表网页开始

定义页面之外的一些信息

其下包含有若干标签如

页面标题内容

代表HEAD结束

页面内容开始

其下包含有更多的标签用于修饰页面内容

页面内容结束

网页结束

新建HTML页面后页面编辑窗口界面：

由“页面工具栏”和“页面编辑窗口”组成

1、页面工具栏使用：

可使用户在代码与设计模式下编辑页面

通过“标题”可以用户在勿需使用代码的情况下快速设计页面标题内容。

用户在使用DW创建网页前必须要完成的工作:

1、先进入“编辑”---“首选参数”将DW的工作状态设置好，只需要一次

勾选“允许多个连续的空格”

CSS标签与HTML标签的区别：

CSS标签是目前网页制作中最先进的一种语言

CSS有三大优点：

1、用CSS所制作的网页效果用户无法更改

而HTML所制作的网页效果用户可以更改

2、用CSS所制作的网页效果代码非常简练

可以大大节省网页的代码量，而HTML则

会产生大量的冗余代码

IE浏览器其实是翻译器，代码量的多少直接影响页面的打开速度

3、用CSS所制作的网页效果能够帮助用户编辑与修改时节约大量的时间，而HTML则工作效率严重低下

“新建文档”中用户可以设置在DW新建网页的文件类型，并将“默认文档类型”设置为“无”

“在浏览器中预览”项中用户可以选择添加使用哪种浏览器来测试自己所制作的页面

勾选“使用临时文件预览”项

未选时预览，DW会要求用户先保存页面再预览

选中时预览，DW会将页面内容拷到一个临时文件中直接预览

2、定义站点：

使用“站点”---“新建站点”选项设置自己所创建网站中的所有资源存储的位置

网站：

由图片，音乐，动画，网页各类资源组成的站点

站点中的所有资源必须统一的位于某个具体的存储位置中绝对不能分散存储

3、新建页面

4、设置页面标题

5、打开“修改”---“页面属性”设置页面内容的基本显示效果

6、编辑页面

如何通过DW去研究其它网页的制作方法？

设置页面属性：

链接分类设置

注意：

链接文本与普通文本是有区别的

在外面分类中所设置的效果是针对普通文本

链接分类中的链接文本的四种状态：

1、链接颜色：

指链接文本在用户未点击时的初始状态

2、变换图像链接颜色：

当用户将鼠标移至链接文本上方尚未点击时链接文本的颜色

3、活动链接：

当用户点击链接文本时的颜色

4、已访问链接颜色：

当用户点击链接文本后的颜色

链接文本这四种状态的标签：

链接颜色：

Link

变换图像链接：

Hover

活动链接：

Active

已访问链接颜色：

Visited

注意：

在多数网页中，不会同时对链接文本使用这四种状态，一般只用两种状态，较常见的组合：

1和2，1和3

注意：

页面属性设置定义的是页面内容的整体显示效果不可能实现页面内容的多样性，当然也无法实现链接文本的多样性

通过“CSS”可以实现页面内容的多样性

如何使用CSS定义链接文本的多样性?

打开“窗口”菜单选择“CSS样式”

CSS面板的使用:

1、新建CSS样式:

选择“高级”,“新建样式表文件”可以使用户所新建的CSS效果以文件的形式保存下来并可以对站点中的任何一个页面中的内容使用该样式，“仅对该文档”则用户所新建的CSS效果以代码的形式保存的用户所编辑的页面中，只能对该页面中的内容使用该样式

2、在“选择器”中输入CSS样式名称（注意：

样式名称有严格的命名规范）

链接的标签名:

关于链接文本的CSS样式名称命名规范:

a类名:

链接状态

什么叫类：

类就是一种页面内容效果

类名的规范：

.以字母命名的名称

3、如何将CSS样式应用于页面内容:

选中页面内容,打开属性面板，选择其中的“样式”或“类”

创建页面链接：

先选中链接的页面对象,打开属性面板，设置“链接”项

链接方式有两种：

1、外部链接：

打开其它站点中的页面

设置外部链接时必须输入前缀http:

//网址

2、内部链接：

打开本站点中的其它页面,选择“浏览文件”按钮可以查找需要链接的本地站点中的页面

注意：

如果链接的目标是HTML之外的其它文件,会出现“文件下载”对话框

站点中的任何资源，不论是文件夹还是文件其名称必须是英文

链接对象的打开方式：

1、_blank：

在一个新的IE窗口中打开所链接的页面

2、_parent：

在原IE窗口中打开链接页面

如何创建空白链接？

在链接栏输入#号。

创建邮箱链接：

mailto:

邮箱地址

创建锚实现页面内部链接:

1、先在跳转位置插入锚，并命名

2、为链接文本创建锚链接：

#锚名

锚属于不可见元素

不可见元素定义：

页面中的不可见元素在页面浏览时并不显示出来，其作用控制一些页面效果

不可见元素在DW编辑模式下，如果仍然处于隐藏状态，会使用户无法设置不可见元素，用户可以通过“首选参数”将相关的不可见元素对象设置为“显示”

注意：

不可见元素在DW编辑模式下的显示会严重地干扰用户正常的页面内容排版，所以在不可见元素未使用或使用过之后可再将其隐藏起来

打开“查看”---“可视化助理”----“不可见元素”可以实现不可见元素的显示/隐藏

站点内部资源链接有两种链接地址格式：

1、相对于站点根目录2、相对于文档

推荐使用第1种地址格式

用户可以在定义站点时指定所要使用的地址格式即可

相对于站点根目录链接：

任何资源链接地址均以/开始（/代表站点根目录）

相对于文档链接：

任何资源链接地址均以其所在的页面所在地址为起始地址

插入图片：

选择“插入”工具“常用”类中的“图像”

在插入站点外部图片时，DW会要求用户将其复制到站点内，并询问用户放置在站点内的具体位置。

用户可以通过站点设置，指定一个站点内存放图片的默认文件夹，这样以后在插入站点外部图片时，DW会自动将该图片复制到站点内的该文件夹中

图片的属性设置：

打开“属性”面板，可以设置图片的相关属性

图片的垂直/水平边距：

设置图片上下/左右两侧与页面中其它内容间的距离

替换：

当用户将鼠标放至图片上方时，弹出文字信息

边框：

为图片四周添加边框，数值越大，边框越粗，边框的颜色来自于页面属性中关于普通文本颜色和链接文本颜色设置

对齐：

图片相邻文字相对于图片的位置

图像占位符：

将图像占位符的宽或高设为1，可以实现边距效果

图像翻转图：

当鼠标移至图像上方时，图像由初始图转换为另外一张图片的效果

当初始图与翻转图片尺寸不同时，在翻转时，会将翻转图片大小调至与初始图相同的尺寸显示

通过属性面板修改图片宽高后,会出现“返回”按钮,点击后可以使图片大小还原至初始状态

热点地图：

可以给一张图片创建多个不同的链接

热点地图绘制工具

指针工具：

可以对绘制好的热点区域进行缩放，移动，选择

椭圆热点绘制工具：

可以在图片上画出椭圆热点区域

矩形热点绘制工具：

可以在图片上画出矩形热点区域

多边形热点绘制工具：

可以在图片上画出任何不规则热点区域

<标签名属性1=属性值属性2=属性值……>内容

在页面中特殊符号的输入：

“插入”工具----文本

选择其中的最后一组工具即可输入各种特殊符号

SHIFT+回车：

可以实现换行,其标签为

水平线的插入：

“插入”工具----HTML---水平线

注意：

在设计模式下无法设计水平线的颜色，只能进入代码设置，而且设置过颜色的水平线只有在浏览时才能看到颜色

网页编辑技巧：

1、使用设计窗口下状态栏中的“标签选择器”可以快速准确地选择页面中的对象

通过选择“标签选择器”中的标签可以快速选择页面中的所有内容并进行快速删除

右击“标签选择器”中的标签可以对所选中的标签进行删除，“快速标签编辑”,以及设置类（应用CSS）

2、页面对象高度和宽度的两种单位:

1、相对单位：

%（百分比）

2、绝对单位：

像素（推荐）

相对单位：

以IE浏览器当前的窗口宽度为参照

3、在制作页面前务必要确定以何种分辨率模式来创建页面

推荐使用:

800X600分辨率制作页面,但注意一定要让页面内容居中,这样可以保证页面在高分辨率的显示器上欣赏时仍然居中显示。

将首选参数--代码格式类中选择“居中”效果所使用的标签为“Center”

在编辑页面内容之前，打开“属性”面板，选择其中的“居中对齐”这样将在标签后面紧跟

,在前面紧跟,可以确保整个页面内容总是以居中方式出现在页面中央

表格:

可以实现页面内容之间的精确排版定位，通常情况下表格在页面浏览时并不显示

创建表格：

打开“插入”工具栏，选择“常用”类中的“表格”,弹出定义表格属性对话框

定义表格属性：

创建表格时，宽度可以选择100%，在创建后，可以打开属性面板，选择“将百分比转换为像素”换钮，再将其宽度由DW自动换算成像素

表格边框宽度：

如果表格只是用于页面内容排版，宽度设为0，但在编辑状态下，表格边框仍然会以一个虚线框显示，以方便用户对表格进行调整

单元格间距：

指表格中单元格之间的距离以及单元格与表格边框之间的距离

单元格边距（填充距离）：

指单元格中的内容距离该单元格四个边的距离

如果表格只是用于页面内容排版,那么能常是将

表格宽度、单元格间距、单元格边距均设为0

创建表格之后，选择表格会出现“表格宽度”提示

用户可以通过“查看”菜单中的“不可见元素”将“表格宽度”选项勾掉，即可隐藏表格宽度的显示

表格所属的标签组：

代表表格、代表表格中的行、

代表表格中的单元格

用户在对表格属性进行设置时，务必注意要同时兼顾其与表格行与单元格的属性之间不矛盾不冲突

1、表格的属性设置:

更改表格的行列值、边距、边框大小、单元格间距、设置表格的对齐方式（不要用默认值），表格背景颜色、添加表格背景图片、表格边框颜色以及表格的宽和高

注意：

通常不需要设置表格的高度，因为表格具体的高度是由行高决定的，但行高也不用设置，因为行高是由单元格高度决定，但单元格高度也不用设，因为单元格高度是由内容决定的。

所以在整个表格，表格行以及单元格高度设置时通常并不设其高度！

创建滚动字幕以及图片的标签文字或图片

marquee标签内具有很多控制滚动效果的属性