《WEB网页制作教程》由会员分享，可在线阅读，更多相关《WEB网页制作教程（102页珍藏版）》请在金锄头文库上搜索。
1、前前 言言课程说明 课程目的：使参加学习的人员掌握基本的网页制作维护技 能，自主运用相关软件进行网页维护。 学习建议：学习前提：熟练进行基本的文件操作，熟练使 用Office和简单常用的工具软件参阅：网上有相关教程、任何一本Dreamweaver 学习书籍学习内容网页制作初步： 运用DreamweaverMX，学习文字录入编辑，段落编排，表格运用 ，图片插入编辑，超级链接，多媒体素材插入编辑，框架构成；简 单了解Html图形处理初步： 学会运用Photoshop对图片做简单的处理学习使用相关工具软件： CuteFtp, Acdsee, et al了解动态网页维护的基本知识了解中、高级网页技术：
2、 Flash, Css, JavaScript 特效等网页设计技术的意义 网络时代的技术需要 网站是广告的拓展领域，是知识信息的储蓄平台，任何单位都将网 络平台做为业务信息的重要窗口加以利用 与他人交流的窗口 个人主页对比公网上的个人blog: 能进行更充分的个人定制，个性 化 实用的网络技术和个人技能 为将来可能的另条个人出路进行技术积累。 一些人对网页设计的错误认识 MS office master VS. homepage master Homepage worker VS. web designer对Web Designer的简单要求熟练运用相关软件，掌握编写主页的主流软件用法。 了解
3、HTML语言，学习使用CSS，JavaScript乃至XML动态主页语 言; 了解CGI技术和网络数据库技术，学习使用PHP，ASP等主流动态 网页制作工具和语言; 掌握图文编排技术，熟练运用一种以上的图象处理软件； 具有相当的文字功底和文稿编辑能力； 具有超凡的想象力和创造力； 最后要付出大量的努力。 涉及软件：DreamWeaver MX, Photoshop, Macromedia Flash MX, CuteFtp相关网络知识 域名 大医域名： 学校内主页服务器有:www,home,inner 主页浏览与主页服务器之间的关系 经过服务器发布的网站才能是真正意义上的供人浏览的网站。 主页
4、发布原理 服务器安装了默认的主页发布程序，网站用户事先将制 作完成的网站上传到服务器指定目录下。服务器正常工 作时，当接收到某客户端主页浏览请求时，按目录关系 和相关设定，将某目录下的相关文件数据返回给客户端 浏览器，被浏览器解读后加以显示，即完成了主页浏览 。普通静态网页的特点和工作原理 主机IP地址： IP地址是Internet上主机的数字式标识符。给某个用户分 配一个固定的IP地址,他每次连入Internet都从这个地址 进入，这种静态IP地址的优点是能使别的用户访问他,所 以可以在自己的计算机上建立服务器。 VS 210.47.244.10 协议： 通信的双方在通信时所使用的约定叫做
5、通信协议。 Internet中最重要的两个通信协议是网际协议IP和传输控 制协议TCP。相关网络术语相关网络术语初级部分初级部分一一 网站建设网站建设网站编辑的大概步骤网站构划 收集素材 勾画草案 网页制作 调试修改 发布 维护更新问题： 您将如何安排时间和计划？重要原则： 尽量体现内容形式的完美整合 明确建站目的，确定原则，确定规模，确定形式和风 格。原则：内容和形式统一。 高校主页提倡风格：宜静雅，忌花哨。 内容第一，功能第二，形式第三。 分析网站的浏览者群体 重要原则：从技术上兼顾最多可能的受众。 确定站点结构 建立目录 确定文件 安排素材 风格一致性网站构划步骤二二Dreamweave
6、rDreamweaver初探初探DW MX安装和界面介绍 软件校内下载 现代教育技术部主页网络资源软件下载网络工具网页编辑 http:/ 软件安装 操作界面窗口组成： Welcome窗口（首次弹出） 插入栏 文件窗口 属性检查器 面板组站点建立 新建站点 通过资源管理器先在硬盘建立站点根目录 利用文件面板的管理站点窗口建立一个站点 可采用基本模式，利用向导完成设定；也可以用高级 模式。具体：需要设定站点名称、本地根文件夹。其 他项可暂时采用默认设定。 Ftp设定（也可以使用专门的ftp工具进行将来的 ftp文件上传管理，推荐软件如cuteftp等） 编辑站点 删除编辑站点列表简单设定 “编辑”
7、菜单的“首选参数”选项的设定： “常规” 编辑选项：使用CSS而不是Html代码不 选中（因为会整体运用CSS设定） 其他会偶尔改动默认设定的选项： “字体” 编辑选项、在浏览器中预览、不可见元素、验 证程序等 隐藏表格宽度显示 方便操作三三 操作与应用操作与应用 基础操作篇基础操作篇新建文件 新建文件 第一种方法：通过 文件 新建命令，然后再保 存，这种方法可新建出各种类型文件 常用：基本页(html),框架,模版,CSS文件,动态页 (ASP,PHP,JSP) 第二种方法：通过文件面板新建.htm文件 更常用的静态网页的编辑方式，即静态主页更新维护增 加新页面的方式：对已有文件进行复制、粘
8、贴，然后对 新文件更名，再修改其内容。特点：保留原有文件的图 片，整体框架格局等，只改变文字和链接文件的命名原则和层次管理 主页文件（夹）名称约定 不能用中文和不合文件名规范的名称； 首页必须为index.htm或者default.htm等默认首 页文件名 文件层次管理 文件命名经验：对不同内容的文件名称的起名 方法: 多利用下划线，原则是便于记忆维护。 book_admin.htm, update_030612.htm 文件层次管理：不同栏目设立不同文件夹；利 用文件名区分；图片和文件一般要分开，单独设立图 片目录images打开文件及特殊文本处理 通过文件 打开命令 在文件面板站点文件夹中
9、里找到相应文件，双 击打开 复制word文件的内容到网页： 要注意祛除word本身所带的各种控制符项，一 般情况下，可直接复制、粘帖。特殊情况下， 可通过二次粘贴先经过记事本，再粘贴至 网页文件或者通过DW的选择性粘帖功能进行页面属性的设定 网页标题 除了frame页面，不要使任何一个页面标题为: untitled documents 背景图片（介绍图片的平铺方式） 链接颜色 网页文字颜色设定 页边空白距离设定 其他 e.g. 编码方式等四四 操作与应用操作与应用 文字处理文字处理文档编辑 基本字块操作：文字的复制、粘贴、剪切，查找、替换 、删除； 字的属性设定： 字号 颜色 字形 对齐方式
10、字体 高级问题：能否随意设定主页文字的字体，象在word里 那样？能否随意设定文字的颜色？Attention! 字体设定重要原则： 再次体现兼顾受众的原则。 安全中文字体：宋体、仿宋体、黑体、楷体 特殊字体的处理方法：图片 一些特殊符号输入的处理方法：小图片 繁体字、生僻字应用全拼等输入法，采用GBK字库，如 喆 (！上标下标有专门的html标记: sub, sup) 颜色知识：介绍网页安全色216色（兼顾pc和Macintosh ）特殊颜色需要承担风险！其他 特殊字符插入 特殊格式：项目编号 水平线 文字对齐方式及段落格式的设定 回车和空格问题 段内换行，段落换行 全角空格五五 操作与应用操
11、作与应用 插入图片和插入图片和FlashFlash预备知识：图片种类和特点图像分类 像素点阵类图像，如BMP，TIFF等 特点：图像包含色彩越多，尺寸越大，则文件大小也越大；图 像增大，则图像精度降低 矢量图像，如WMF等 特点：文件大小与图形复杂程度有关，与具体图形大小无关， 图像外观增大也不影响精度； 压缩格式: JPEG, GIF, PNG jpeg保留图像色彩，损失图像精度；gif保留图像精度， 损失颜色 人物、风景等高色彩图片宜保存为jpeg，卡通等图片宜 保存为gif 特殊介绍：gif 87a, 89a 透明图、交错图、动画 PNG功能全面，但尺寸很大 Swf文件特点： 动画更灵活
12、，有交互功能，支持网络流式传输，优势明显预备知识：图片种类和特点 介绍色彩学简单知识 颜色深度：位；加强色16位； 网络安全色：216色（兼顾PC和Mac机，体现 兼顾受众的原则） 使用图象重要原则： 减少尺寸，限制颜色，保持低分辨率，使用重复图象 在保持图像满意精度内，尽可能保持图象小插入图片实际应用问题 属性设定问题 单纯改变图片外观大小，不影响图片文件实际 大小尺寸 设定外框宽度 对齐方式 替代图替代文字（考虑受众的人性化属性） 缩略图（可用相关工具软件自己制作，如PS, ACDsee; 缩略图大小可以自定一个统一的规格，如 125*94） 图文间距； 图片注意保存到网页目录下插入图片实
13、际应用问题 插入图像占位符 为将来插入图像做准备 影像地图链接 详见链接章节六六 操作与应用操作与应用 超链接的运用超链接的运用链接类型 普通链接 外部链接：不同网站内指向链接 内部链接：同一网站内不同网页间链接 锚点链接：链接到同一网页内某位置 电子邮件超链接 创建影像地图 翻屏原则 纵向翻屏不应该超过3-5页；尽量避免水平向滚动翻屏 当网页文本容量超过2个滚屏时，应该考虑运用超链接 或者进行重新的网页拆分和规划链接路径 URL（Uniform Ralative Location)统一资源定位符 每个网页都有的唯一的地址 绝对路径：完整的URL e.g. http:/ 做外部链接时使用 相对
14、路径：省略两个文档相同的URL部分 注意同文件夹、子（父）文件夹文件链接时的写法 e.g. ./index.htm; image/logo.jpg 根相对路径：e.g. /image/newpic.htm 同一网站内部链接注意使用相对路径和根相对路径，不 要使用绝对路径链接操作进行链接的对象 文字，图像 普通链接，注意设定打开目标页Target _blank, _top, _parent, _self(默认） 锚点链接 方法一：鼠标操作， shift+锚点； 方法二：#+链接锚点名称 影像地图 鼠标拖动创建热区，可建立多个热区 选择热区创建链接 注意热区的替代文字设定alt 注意每个地图起唯一
15、一个名称链接原则 重要原则 好的网站要有完善、发达的导航系统，且要明 确； 所有链接必须测试可用，准确； “能进能出，能上能下” 管理超级链接：更新主要工作之一 检查可能出错的地方如：不存在的文件，特别是外部站 点不存在的文件链接导航栏：特殊的链接体 导航对网站意义： 明示网站结构、方便访客浏览 导航栏相对于普通链接的特别之处： 同一位置，外观效果一致 导航栏的制作：表格+文字+图形七七 页面布局页面布局 表格的运用表格的运用表格作用 最强大的主页布局工具，既完美解决所有静态主页图文 布局，同时也符合低端设计的原则（对比layer） 表格中可导入的元素多种多样： 任何一种主页元素，也包含表格本身，即可以实现表格 的嵌套 表格的主要功能： 表格化数据、设计页面分栏、定位文本和图像等 重新理解表格： 不仅仅是表格化数据的载体，表现方式多样化 对比word里面的表格 不具有统计计算功能；支持嵌套；插入元素更多样认识表格 行，列，单元格 HTML标识符 table, tr, td （没有列的概念） 行（ Row ） 列（Column
