WEB_网页制作教程_

前 言

课程说明 课程目的：–使参加学习的人员掌握基本的网页制作维护技能，自 主运用相关软件进行网页维护。

学习建议：–学习前提：熟练进行基本的文件操作，熟练使用 Office和简单常用的工具软件 –参阅：网上有相关教程、任何一本Dreamweaver学习书 籍

学习内容 网页制作初步： 运用DreamweaverMX,学习文字录入编辑，段落编排，表格运用， 图片插入编辑，超级链接，多媒体素材插入编辑，框架构成；简单了 解Html 图形处理初步： 学会运用Photoshop对图片做简单的处理 学习使用相关工具软件： CuteFtp, Acdsee, et al

了解动态网页维护的基本知识 了解中、高级网页技术： Flash, Css, JavaScript 特效等

网页设计技术的意义 网络时代的技术需要网站是广告的拓展领域，是知识信息的储蓄平台，任何单位都将网络 平台做为业务信息的重要窗口加以利用

与他人交流的窗口个人主页对比公网上的个人blog: 能进行更充分的个人定制，个性化

实用的网络技术和个人技能为将来可能的另条个人出路进行技术积累。

一些人对网页设计的错误认识MS office master VS. homepage master Homepage worker VS. web designer

对Web Designer的简单要求 熟练运用相关软件，掌握编写主页的主流软件用法。 了解HTML语言，学习使用CSS,JavaScript乃至XML动态主页语言; 了解CGI技术和网络数据库技术，学习使用PHP,ASP等主流动态网 页制作工具和语言; 掌握图文编排技术，熟练运用一种以上的图象处理软件； 具有相当的文字功底和文稿编辑能力； 具有超凡的想象力和创造力； 最后要付出大量的努力。 涉及软件：DreamWeaver MX, Photoshop, Macromedia Flash MX, CuteFtp

相关网络知识 域名大医域名： 学校内主页服务器有:www,home,inner

主页浏览与主页服务器之间的关系经过服务器发布的网站才能是真正意义上的供人浏览的网站。

主页发布原理服务器安装了默认的主页发布程序，网站用户事先将制作 完成的网站上传到服务器指定目录下。服务器正常工作时， 当接收到某客户端主页浏览请求时，按目录关系和相关设 定，将某目录下的相关文件数据返回给客户端浏览器，被 浏览器解读后加以显示，即完成了主页浏览。

普通静态网页的特点和工作原理

1、用户向服务器提交网页浏览的请求

3、浏览器将收到的HTML 文件显示到屏幕上

2、服务器将网页文件传送给浏览器

相关网络术语 主机IP地址：IP地址是Internet上主机的数字式标识符。给某个用户分 配一个固定的IP地址,他每次连入Internet都从这个地址进 入，这种静态IP地址

的优点是能使别的用户访问他,所以可 以在自己的计算机上建立服务器。– VS 210.47.244.10

协议：通信的双方在通信时所使用的约定叫做通信协议。 Internet中最重要的两个通信协议是网际协议IP和传输控 制协议TCP。

初级部分

一 网站建设

网站编辑的大概步骤网站构划 收集素材 勾画草案 网页制作 调试修改 发布 维护更新

问题： 您将如何安排时间和计划？ 重要原则： 尽量体现内容形式的完美整合

网站构划步骤1. 明确建站目的，确定原则，确定规模，确定形式和风 格。原则：内容和形式统一。 高校主页提倡风格：宜静雅，忌花哨。 内容第一，功能第二，形式第三。 分析网站的浏览者群体 重要原则：从技术上兼顾最多可能的受众。 确定站点结构 建立目录 确定文件 安排素材 风格一致性

2.

3.

二

Dreamweaver初探

DW MX安装和界面介绍 软件校内下载现代教育技术部主页>网络资源>软件下载>网络工具>网页编辑 /test/upload/show.asp?no=15

软件安装 操作界面窗口组成： – Welcome窗口(首次弹出) – 插入栏 – 文件窗口 – 属性检查器 – 面板组

站点建立 新建站点 – 通过资源管理器先在硬盘建立站点根目录 – 利用文件面板的管理站点窗口建立一个站点 可采用基本模式，利用向导完成设定；也可以用高级 模式。具体：需要设定站点名称、本地根文件夹。其 他项可暂时采用默认设定。 – Ftp设定(也可以使用专门的ftp工具进行将来的ftp文件 上传管理，推荐软件如cuteftp等) 编辑站点 删除编辑站点列表

简单设定 ―编辑”菜单的“首选参数”选项的设定： – “常规” 编辑选项：使用CSS而不是Html代码不选中 (因为会整体运用CSS设定) – 其他会偶尔改动默认设定的选项： “字体” 编辑选项、在浏览器中预览、不可见元素、 验证程序等 隐藏表格宽度显示 方便操作

三

操作与应用 —基础操作篇

新建文件 新建文件 – 第一种方法：通过 文件> 新建命令，然后再保存，这 种方法可新建出各种类型文件 常用：基本页(html),框架,模版,CSS文件,动态页 (ASP,PHP,JSP) – 第二种方法：通过文件面板新建.htm文件 更常用的静态网页的编辑方式，即静态主页更新维护增加 新页面的方式：对已有文件进行复制、粘贴，然后对新文 件更名，再修改其内容。特点：保留原有文件的图片，整 体框架格局等，只改变文字和链接

文件的命名原则和层次管理 主页文件(夹)名称约定 – 不能用中文和不合文件名规范的名称； – 首页必须为index.htm或者default.htm等默认首页文件 名

文件层次管理 – 文件命名经验：对不同内容的文件名称的起名方法: 多 利用下划线，原则是便于记忆维护。 book_admin.htm, update_030612.htm – 文件层次管理：不同栏目设立不同文件夹；利用文件 名区分；图片和文件一般要分开，单独设立图片目录 images

打开文件及特殊文本处理 通过文件 > 打开命令在文件面板站点文件夹中里找到相应文件，双击 打开

复制word文件的内容到网页：要注意祛除word本身所带的各种控制符项，一般 情况下，可直接复制、粘帖。特殊情况下，可通 过二次粘贴——先经过记事本，再粘贴至网页文 件或者通过DW的选择性粘帖功能进行

页面属性的设定 网页标题 除了frame页面，不要使任何一个页面标题为: untitled documents 背景图片(介绍图片的平铺方式) 链接颜色 网页文字颜色设定 页边空白距离设定 其他 e.g. 编码方式等

四

操作与应用 —文字处理