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