WEB_网页制作教程_

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