网页制作基础教程

1、第一章 网页制作基础1、什么是网页一般浏览器中打开的都是网页，这些文档是通过超文本标记语言 HTML 表示出来的；主页：在网站中默认打开的页面称为主页，也叫首页，主页是进入网站的门户，网页中包括的内容：文本，图像，超级链接，表格，表单，多媒体及一些特殊的效果2、网站及运作原理网站是在互联网上一个固定的面向全世界发布消息的地方，它由网站地址和网站空间构成；网站开发者常常将网站称作为站点， 在网站的开发者来说， 网站就是在计算机上创建的一个 多级的文件夹，并在各文件夹中保存着相关网页文件。根据站点文件夹所在的位置分为：本地站点和远程站点；根据服务技术分：静态网站和动态网站3、了解 HTML 语言H

2、TML 是网上用于编写网页的主要语言，使用 HTML 语言编写的网页文件也是一个标准的 纯文本文件， 可以使用文本编辑器将它打开， 但是该纯文本文件如果使用浏览器打开就会看 到排版整齐的网页；4、HTML 语言标签HTML 标签用来标记网页元素，以形成文本布局，文字的格式及五彩缤纷的画面， HTML 的标签分单标签和成对标签两种基础标签： 5、常用动态建站技术ASP 是由微软开发的动态网页技术标准，其原理通过在 HTML 页面中加入 VB JAVA 代码， 服务器在返回网页之前首先执行这些代码，产生最终的结果。6、网站的制作流程及制作工具 初期规划：建站之前，要有明确目的，要明白建立网站的目的

3、，接受对象是哪些群体，要为 访问者提供怎样的服务，然后对整个网站进行策划，中期制作：搭建本地站点，建立文件夹，建立站点结构图，设置页面属性等； 后期工作：全面测试，上传后进行实地测试，完成本地测试后，再上传到服务器，以便进行 远程测试；7、网页设计工具Dreamweaver 8 是最常用的网页编辑工具之一， 使用该工具可以在其提供的三种视图中进行网页编辑与修改； 图像处理工具 Firework 8 主要用来对网页中用到的图像素材进行制作或处理， 它可以快速地 制作和处理网页中图像，动画制作工具：FLASH 8 主要用来制作一些精彩的小动画，可以使页面变得更加精美，该软件是目前最流行的，矢量的，

4、具有交互性的图形编辑软件；第二课 创建站点1、启动：开始程序 Macromedia dreamweaver 8 （双击桌面的图标）2、关闭：文件退出，关闭按钮3、窗口的组成：标题栏（软件名称，版本号，文件名，最小化，最大化，关闭按钮） 菜单栏：由文件，编辑，查看，插入，修改，文本，站点，窗口等主菜单组成； 插入栏：位于菜单栏下方，有网页制作时常用的元素及命令，如常用，布局等 开始页：打开软件时的页面，该页面位于屏幕中间的大部分区域； 属性面板：一般位于窗口的底部，显示文档，网页元素及相关工具的属性； 面板集：位于窗口右侧，可以快速展开或折叠一些功能面板，4、创建站点：站点新建站点站点名称否（不

5、用服务器）建立一个本地文 件夹如何连接远程服务器（无）完成；5、编辑站点，复制站点，删除站点，导出站点，导入站点，完成按钮；6、管理站点中的文件：站点的名称，远程文件管理器，站点文件结构弹出菜单视 图菜单8、文档的新建，保存，打开及属性设置9、设置页面属性： 修改页面属性（页面字体， 大小，文本颜色，背景颜色， 背景图像， 页边距，跟踪图像）第三课： 制作网页1、在网页中插入文本（直接输入文本即可） （换行： ENTER ， 按 SHIFT+ENTER 可得到较 小的行距；2、设置字体，大小，字形，颜色，对齐方式3、在网页中插入图像：插入图像（图像的大小，对齐方式，边距等设置）4、插入层（在层

6、中插入图像，可将图像到处拖动） 5、在网页中插入鼠标经过图像：插入图像对象鼠标经过图像（原始图像，鼠标经过时的图像）6、插入特殊的符号，版权，注册商标等；插入文本版权，注册商标，符号等7、插入多媒体文件；插入媒体FLASH （选择插入的文件）8、设置动画的大小及其边距（属性面板：宽，高，垂直，水平的间距）9、插入布局对象层（设置背景图像，大小，方向等设置）10向网页中插入链接：选择文本在图像中选择链接的文件；11创建外部链接：在文档中输入网名，选择名称：引用链接网址12创建锚记：先命名锚记然后再选择要引用锚记的文字，然后进行链接OK （引用时加#）13在网页中插入视频：插入媒体插件（选择视频文

7、件14创建邮件链接：选择图像链接邮箱地址15创建下载链接：选择文本或图像链接文件（ZIP RAR EXE ）等文件第四课 页面布局1、插入表格（行数，列数）2表格的宽度，3边框粗细；4单元格边距；5单元格间距；6合并所选单元格，拆分单元格，背景，背景颜色，边框；7表格布局；插入表格（在单元格内插入表格（做嵌套表格）8改变列宽，行高9网页的布局：插入布局对象层（可以创建多个层，如同文本框的设置） 10设置层的属性：宽度，高度，单击插入图像的层选择手柄，在属性面板中 11布局网页框架：创建布局表格，创建布局单元格，做嵌套布局表格； 12将布局转换成表格：修改转换表格到层（防止层重叠，显示层面板，显

8、示靠齐 到网格）13框架布局与样式定义：插入框架（选择框架布局形式）14制作背景固定网页：定义样式第五课 CSS 样式与行为1光晕效果的应用CSS面板一一添加滤镱设置（名称， （GLOW （color=?,strength=?）设置 （color=red,strength=3）2、添加行为：行为面板（添加行为，删除行为，执行顺序）3设置触发行为的事件：事件，动作4记录移动路径5、添加时间轴行为：6、制作表单元素；第六课，表单与模板、1、制作注册页面2、创建网站模板；3、将网页保存为模板：文件另存为模板4、创建可编辑区域：插入模板对象可编辑区域；5、网页模板的应用，打开后修改然后另存为其它网页文

9、件；6、分离模板：修改模板套用模板到页（修改模板从模板中分离）第七课： FLASH 的操作1、启动：双击桌面图标，2、退出：关闭按钮；3、窗口的组成：标题栏，菜单栏，编辑栏，工具箱，面板集，舞台，属性面板； 4、标题栏：它位于整个窗口的最上方，最小化，最大化，关闭按钮等；5、菜单栏：由文件，编辑，视图，插入，修改，文本，命令等6、工具栏：位于整个软件的左侧，分为，工具，查看，颜色和选项四个选项； 绘制卡通房子的练习；第二课 工具的使用1、直线工具；按 SHIFT 水平或垂直直线， 粗细，端点（尖角，圆角，斜角）2、钢笔工具：是通过路径来绘制笔触图形的，按CTRL 或双击曲线外时，可结束绘图；3

10、、任意变形：旋转，倾斜，缩放，扭曲，封套模式等；4、输入文本：文本类型，字体，字号，字体样式，对齐方式；5、添加滤镜效果：选择对象或文本属性栏中找到滤镜类型；（删除滤镜）6、美化图形设置颜色7。改变图像的填充颜色（单色，渐变，透明度，8。导入位图：文件导入导入到库9。填充位图：拖动中心控制点，倾斜控制点，旋转控制点，大小控制点；10。导入图像和声音素材：文件导入导入到舞台（可选择图片或声音）11。填充变形：填充变形工具可以对渐变色彩进行变形调整，第三课：制作动画1、导入视频：文件导入导入视频2、绘制边框：绘制矩形，然后将直线加粗，3、创建图形元件：修改转换元件 4、创建影片元件：修改转换成元件

11、（按钮动画，影片剪切）5。创建按钮元件：6。将视频文件转换成 FLV 格式文件， 文件导出7。制作基本动画：小船划动效果8、创建引导线动画；9、制作遮罩动画与多层动画；第四课：使用 FLASH 脚本1、动作面板：窗口动作（ F9）2、脚本工具箱： 存放着所有的脚本工具， 单击各类型的脚本名称即可展开相应的控制语句；3、脚本导航器：中显示当前正在添加脚本的对象，及文档中已经添加脚本控制语句的所有 对象，4、脚本助手，在脚本助手中总是显示当前选中脚本的脚本功能描述及参数输入提示，脚本 助手为具有标准语法结构脚本的输入带来了极大的方便；5、脚本编辑区：在脚本助手启用的模式下，不能在该区中直接修改脚本的参数，也不能直 接向其中输入脚本，只能通过脚本工具箱添加脚本。练习待