WEB网页制作教程 (2).ppt

《WEB网页制作教程 (2).ppt》由会员分享，可在线阅读，更多相关《WEB网页制作教程 (2).ppt（102页珍藏版）》请在三一办公上搜索。

1、前 言,课程说明,课程目的：使参加学习的人员掌握基本的网页制作维护技能，自主运用相关软件进行网页维护。学习建议：学习前提：熟练进行基本的文件操作，熟练使用Office和简单常用的工具软件参阅：网上有相关教程、任何一本Dreamweaver学习书籍,学习内容,网页制作初步：运用DreamweaverMX，学习文字录入编辑，段落编排，表格运用，图片插入编辑，超级链接，多媒体素材插入编辑，框架构成；简单了解Html图形处理初步：学会运用Photoshop对图片做简单的处理学习使用相关工具软件：CuteFtp,Acdsee,et al了解动态网页维护的基本知识了解中、高级网页技术：Flash,Css,

2、JavaScript 特效等,网页设计技术的意义,网络时代的技术需要网站是广告的拓展领域，是知识信息的储蓄平台，任何单位都将网络平台做为业务信息的重要窗口加以利用与他人交流的窗口个人主页对比公网上的个人blog:能进行更充分的个人定制，个性化实用的网络技术和个人技能 为将来可能的另条个人出路进行技术积累。一些人对网页设计的错误认识MS office master VS.homepage master Homepage worker VS.web designer,对Web Designer的简单要求,熟练运用相关软件，掌握编写主页的主流软件用法。了解HTML语言，学习使用CSS，JavaScr

3、ipt乃至XML动态主页语言;了解CGI技术和网络数据库技术，学习使用PHP，ASP等主流动态网页制作工具和语言;掌握图文编排技术，熟练运用一种以上的图象处理软件；具有相当的文字功底和文稿编辑能力；具有超凡的想象力和创造力；最后要付出大量的努力。涉及软件：DreamWeaver MX,Photoshop,Macromedia Flash MX,CuteFtp,相关网络知识,域名大医域名：学校内主页服务器有:www,home,inner主页浏览与主页服务器之间的关系经过服务器发布的网站才能是真正意义上的供人浏览的网站。主页发布原理服务器安装了默认的主页发布程序，网站用户事先将制作完成的网站上传到

4、服务器指定目录下。服务器正常工作时，当接收到某客户端主页浏览请求时，按目录关系和相关设定，将某目录下的相关文件数据返回给客户端浏览器，被浏览器解读后加以显示，即完成了主页浏览。,普通静态网页的特点和工作原理,主机IP地址：IP地址是Internet上主机的数字式标识符。给某个用户分配一个固定的IP地址,他每次连入Internet都从这个地址进入，这种静态IP地址的优点是能使别的用户访问他,所以可以在自己的计算机上建立服务器。协议：通信的双方在通信时所使用的约定叫做通信协议。Internet中最重要的两个通信协议是网际协议IP和传输控制协议TCP。,相关网络术语,初级部分一网站建设,网站编辑的大

5、概步骤,网站构划收集素材勾画草案网页制作调试修改发布维护更新,问题：您将如何安排时间和计划？,重要原则：尽量体现内容形式的完美整合,明确建站目的，确定原则，确定规模，确定形式和风格。原则：内容和形式统一。高校主页提倡风格：宜静雅，忌花哨。内容第一，功能第二，形式第三。分析网站的浏览者群体重要原则：从技术上兼顾最多可能的受众。确定站点结构建立目录确定文件安排素材风格一致性,网站构划步骤,二Dreamweaver初探,DW MX安装和界面介绍,软件校内下载现代教育技术部主页网络资源软件下载网络工具网页编辑软件安装操作界面窗口组成：Welcome窗口（首次弹出）插入栏文件窗口属性检查器面板组,站点建

6、立,新建站点通过资源管理器先在硬盘建立站点根目录利用文件面板的管理站点窗口建立一个站点可采用基本模式，利用向导完成设定；也可以用高级模式。具体：需要设定站点名称、本地根文件夹。其他项可暂时采用默认设定。Ftp设定（也可以使用专门的ftp工具进行将来的ftp文件上传管理，推荐软件如cuteftp等）编辑站点删除编辑站点列表,简单设定,“编辑”菜单的“首选参数”选项的设定：“常规”编辑选项：使用CSS而不是Html代码不选中（因为会整体运用CSS设定）其他会偶尔改动默认设定的选项：“字体”编辑选项、在浏览器中预览、不可见元素、验证程序等隐藏表格宽度显示方便操作,三 操作与应用基础操作篇,新建文件,

7、新建文件第一种方法：通过 文件 新建命令，然后再保存，这种方法可新建出各种类型文件常用：基本页(html),框架,模版,CSS文件,动态页(ASP,PHP,JSP)第二种方法：通过文件面板新建.htm文件更常用的静态网页的编辑方式，即静态主页更新维护增加新页面的方式：对已有文件进行复制、粘贴，然后对新文件更名，再修改其内容。特点：保留原有文件的图片，整体框架格局等，只改变文字和链接,文件的命名原则和层次管理,主页文件（夹）名称约定不能用中文和不合文件名规范的名称；首页必须为index.htm或者default.htm等默认首页文件名文件层次管理文件命名经验：对不同内容的文件名称的起名方法:多利

8、用下划线，原则是便于记忆维护。book_admin.htm,update_030612.htm文件层次管理：不同栏目设立不同文件夹；利用文件名区分；图片和文件一般要分开，单独设立图片目录images,打开文件及特殊文本处理,通过文件 打开命令在文件面板站点文件夹中里找到相应文件，双击打开复制word文件的内容到网页：要注意祛除word本身所带的各种控制符项，一般情况下，可直接复制、粘帖。特殊情况下，可通过二次粘贴先经过记事本，再粘贴至网页文件或者通过DW的选择性粘帖功能进行,页面属性的设定,网页标题除了frame页面，不要使任何一个页面标题为:untitled documents背景图片（介绍

9、图片的平铺方式）链接颜色网页文字颜色设定页边空白距离设定其他 e.g.编码方式等,四 操作与应用文字处理,文档编辑,基本字块操作：文字的复制、粘贴、剪切，查找、替换、删除；字的属性设定：字号颜色字形对齐方式字体高级问题：能否随意设定主页文字的字体，象在word里那样？能否随意设定文字的颜色？,Attention!,字体设定重要原则：再次体现兼顾受众的原则。安全中文字体：宋体、仿宋体、黑体、楷体特殊字体的处理方法：图片一些特殊符号输入的处理方法：小图片繁体字、生僻字应用全拼等输入法，采用GBK字库，如喆(！上标下标有专门的html标记:sub,sup)颜色知识：介绍网页安全色216色（兼顾pc和

10、Macintosh）特殊颜色需要承担风险！,其他,特殊字符插入特殊格式：项目编号水平线文字对齐方式及段落格式的设定回车和空格问题段内换行，段落换行 全角空格,五 操作与应用插入图片和Flash,预备知识：图片种类和特点,图像分类像素点阵类图像，如BMP，TIFF等特点：图像包含色彩越多，尺寸越大，则文件大小也越大；图像增大，则图像精度降低矢量图像，如WMF等特点：文件大小与图形复杂程度有关，与具体图形大小无关，图像外观增大也不影响精度；压缩格式:JPEG,GIF,PNGjpeg保留图像色彩，损失图像精度；gif保留图像精度，损失颜色人物、风景等高色彩图片宜保存为jpeg，卡通等图片宜保存为gi

11、f特殊介绍：gif 87a,89a-透明图、交错图、动画PNG功能全面，但尺寸很大Swf文件特点：动画更灵活，有交互功能，支持网络流式传输，优势明显,预备知识：图片种类和特点,介绍色彩学简单知识颜色深度：位；加强色16位；网络安全色：216色（兼顾PC和Mac机，体现兼顾受众的原则）使用图象重要原则：减少尺寸，限制颜色，保持低分辨率，使用重复图象在保持图像满意精度内，尽可能保持图象小,插入图片实际应用问题,属性设定问题单纯改变图片外观大小，不影响图片文件实际大小尺寸设定外框宽度对齐方式替代图替代文字（考虑受众的人性化属性）缩略图（可用相关工具软件自己制作，如PS,ACDsee;缩略图大小可以自

12、定一个统一的规格，如125*94）图文间距；图片注意保存到网页目录下,插入图片实际应用问题,插入图像占位符为将来插入图像做准备影像地图链接详见链接章节,六 操作与应用超链接的运用,链接类型,普通链接外部链接：不同网站内指向链接内部链接：同一网站内不同网页间链接锚点链接：链接到同一网页内某位置电子邮件超链接创建影像地图翻屏原则纵向翻屏不应该超过3-5页；尽量避免水平向滚动翻屏当网页文本容量超过2个滚屏时，应该考虑运用超链接或者进行重新的网页拆分和规划,链接路径,URL（Uniform Ralative Location)统一资源定位符每个网页都有的唯一的地址绝对路径：完整的URLe.g.http

13、:/./index.htm;image/logo.jpg根相对路径：e.g./image/newpic.htm同一网站内部链接注意使用相对路径和根相对路径，不要使用绝对路径,链接操作,进行链接的对象文字，图像普通链接，注意设定打开目标页Target_blank,_top,_parent,_self(默认）锚点链接方法一：鼠标操作，shift+锚点；方法二：#+链接锚点名称影像地图鼠标拖动创建热区，可建立多个热区选择热区创建链接注意热区的替代文字设定alt注意每个地图起唯一一个名称,链接原则,重要原则好的网站要有完善、发达的导航系统，且要明确；所有链接必须测试可用，准确；“能进能出，能上能下”管

14、理超级链接：更新主要工作之一检查可能出错的地方如：不存在的文件，特别是外部站点不存在的文件链接,导航栏：特殊的链接体,导航对网站意义：明示网站结构、方便访客浏览导航栏相对于普通链接的特别之处：同一位置，外观效果一致导航栏的制作：表格+文字+图形,七 页面布局表格的运用,表格作用,最强大的主页布局工具，既完美解决所有静态主页图文布局，同时也符合低端设计的原则（对比layer）表格中可导入的元素多种多样：任何一种主页元素，也包含表格本身，即可以实现表格的嵌套表格的主要功能：表格化数据、设计页面分栏、定位文本和图像等重新理解表格：不仅仅是表格化数据的载体，表现方式多样化对比word里面的表格不具有统

15、计计算功能；支持嵌套；插入元素更多样,认识表格,行，列，单元格HTML标识符 table,tr,td（没有列的概念）行（Row）列（Columns）单元格填充（Cell padding）单元格内容与边线的距离单元格间距（Cell spacing）单元格之间的距离表格宽度（width)可用像素数和百分比两种方法表示表格边框（border）表格线的像素宽度，为三维显示效果,表格属性设定,Table ID：表格ID的命名Align：表格与其他元素的对齐方式Clear column width/row heights删除表格的行高列宽值Convert talbe width/heights to pi

16、xels将表格由百分变为当前宽度/高度Convert table widths/heights to percent将表格由像素变为百分表示Bg color：表格背景色Brdr color：表格边框颜色Bg Image：设置表格背景图案,单元格属性设定,水平：单元格内元素水平对齐方式垂直：单元格内元素垂直对齐方式不换行：改变默认的单元格内字绕排标题：设为表头，样式：粗体，居中对齐合并、拆分单元格单元格的高度、宽度单元格的背景图片和颜色设定，边框线设定,调整表格,调整大小调整表格行宽、列高推荐使用属性设定，精确设定清除表格行列值修改不满意的设定；创建大小自适应表格复制表格单元选中表格或者行、列、

17、单元格表格复制需注意：不能对不成矩形的表格元素内容进行复制粘贴，必须保证目标单元格和源单元格的格式完全一致,布局表格介绍,和普通表格视图模式比较：表格标签提示更方便明显；可对布局表格和单元格实现方便移动，并且自动生成辅助表格以完成布局，方便了表格布局操作是MX方便表格排版所设定的新的主页编辑功能应用时机：最初表格布局设定时选用中高级编辑者：可以不用因为仍然有少量多余代码；或者可以在应用后，简单调整为精简,表格设定难点分析,表格宽度巧设定两种模式：固定像素值；百分比宽度。在具体操作时，往往是两种设定混用。如：布局用的最外端的多列表格往往需要总宽度、n-1列宽度设定为具体像素值。而其内部嵌套用布局

18、表格则往往运用百分比宽度，方便进行自适应。表格嵌套是进行复杂排版所必须的表格布局至关重要，需要经过精心设计甚至周密计算。,表格排版实例分析,普通800*600模式下的页面宽度的设定：考虑到导航条的宽度，窗口默认原始的非最大化的尺寸，最终设定为777。一个理想的主页应该是兼容640*480以上所有显示模式理想的排版应该是通过表格图片实现举例：第2版大医主页首页Space图片实际上是通过高度为1，宽度为适应单元格宽度的一个透明gif，来实现了主页排版功能，同时保证了最小的额外图片大小,八 了解：页面布局框架,框架简介,特点：把浏览器窗口分成若干部分，每部分都是真正独立的页面构成：由框架集和单个框架

19、页组成；框架集定义了一页网页显示的框架数、大小、载入框架的网页源文件等,框架优缺点,优点：导航页面不需要重新刷新，加快浏览速度；框架下拉条方便了浏览者的操作实现最少的代码重建，实现整个网站减肥不足：设计麻烦、网站结构变动时无法重新调整页面布局，不够灵活；破坏网页整体性和结构性，不方便内容的整体保存使用时机：适合网站结构变化不大，内容繁多且结构一致的网站,建立框架,首先设定框架边框可见:选中”查看-可视化助理-框架边框”创建框架方式:修改菜单-框架页:可拆分框架鼠标操作:垂直或者水平分割文档/框架插入预定义框架集使用插入栏中的预定义框架集结构新建文件,选择框架页创建嵌套框架集操作同上,选定框架,

20、在框架面板中选定打开框架面板Shift+F2；在面板中选定框架（集）在操作窗口中选定在文档操作窗口选择一个框架，Alt+单击在文档操作窗口选择一个框架集，单击边框,设定框架属性,框架名：超链接和脚本引用框架生成时有自动默认的名称框架页的超链接一定要有打开框架的设定源文件：指定当前框架中打开的文件滚动设定：yes|no|auto自定义改变框架大小边框显示设定边框颜色边界高度/宽度,设定框架集属性,框架边框显示设定：yes|no|auto框架边框宽度边框颜色框架大小设定：数值（像素单位）；百分比；相对注意运用时机：数值+相对；百分比+百分比考虑受众屏幕分辨率的问题,保存框架,逐个保存单独框架页面保

21、存框架集注意编辑无框架页面内容注意框架集要设定网页名称,中级部分九HTML语言简介,什么是HTML,标准通常标注语言(Standard Generalized Markup Language,SGML),是一种用来定久标注记号的语言.HTML就是SGML的 一种“应 用”.HTML全称为Hyper-Text Markup Language,本身是一种标识语言。在HTTP协议支持下，用这种标识语言编辑的超文本文件可以被各种浏览器识别并加以解读执行，从而实现网页文件的浏览下载，亦即WWW网页服务。,HTML文件基本结构,html文件由元素(element)组成，组成html文件的元素有许多种，用于

22、组织文件的内容和指导文件的输出格式。绝大多数元素是“容器”，即它有起始标记和结尾标记。例子:This is my first html file.说明：元素开始标识符；元素结尾标识符；两者之间的部分如第二行是该元素的元素体；一个元素的元素体中可以有另外的元素。个别元素标识符可以没有结尾标示符。body 元素名称；background 属性名；属性名,属性值合起来构成一个完整的属性，一个元素可以有多个属性，各个属性用空格分开；,HTML页面完整结构,html文件仅由一个html元素组成，即文件以开始，以结尾，文件其部分都是 html的元素体。html元素的元素体由两大部分，即头元素.和体元素和一

23、些注释组成。头元素和体元素的元素体又由其它的元素和文本及注释组成。html文件开始 文件头开始文件头 文件头结束 文件体开始文件体 文件体结束 html文件结束,元素出现的位置：部分只能出现在头元素中，绝大多数元素只能出现在体元素中。在头元素中的元素表示的是该html文件的一般信息出现在体元素中的元素按次序对html文件的标识文本进行输出html的元素有下列三种表示方法：1)文本或超文本2)文本或超文本3),应该了解的Html元素,文件头部分标题/网页标题/环境设定/关键字文件体部分段落；段内回车项目编号超级链接 表格 具体实例,first second a sample for table

24、the end,了解Html对主页制作的意义,Dreamweaver相对于FrontPae 本身就是更贴近Html编辑的一个主页制作工具。每一个对象的属性设定实际上都是工具化了的Html代码编辑。了解了具体的Html代码中元素的各种属性和功能，就能更好的对主页对象进行合理合适的编辑。应用更方便，比如利用Html标签可以方便而准确的对一些主页元素进行选择。适合中高级主页编辑者对主页源代码进行最经济和最准确的精简，最大程度避免代码冗余。中高级网页设计所必须。如CSS,JavaScript等的插入编辑，ASP,PHP等动态网页的编辑。主页维护必须。一些未知因素导致的页面设计上的失误往往需要通过Htm

25、l编码直接查错修正才可能解决问题。,十 CSS层叠样式表,Cascading Style Sheet,CSS是控制网页显示效果的一个格式规则的集合，它允许设计者在HTML文档中加入样式（字体类型、颜色、大小等）CSS应用例子：去掉链接文字的下划线改变浏览器字体大小情况下文字的变化需要掌握的CSS：字体大小、颜色、外形、段落行距的设定伪类的设定表格边框的设定图片等元素的定位设定,将样式与HTML结合,在文档中定义,例子:This is a green,italic,Arial H3 header.在行内定义CSSThis is a green,italic,Arial H3 header.外挂C

26、SS定义,Font-family:Arial 等效font-style:italic 等效color:green 等效,样式控制优先次序,编辑窗口里对具体对象的最后属性设定；CSS类没做任何设定时候下浏览器的默认值,CSS定义结构解析,定义样式：H3 font-family:Arial选择符，属性，属性值；多重属性用分号分隔；用Class和ID作为选择符.pink color:#ff00cc#bright font-weight:bolder;color:#00ff00pink dream come truethis is the bright word简化编码办法选择符编组table,tr,

27、td,p font-size:9pt简化编码em font:9pt/12pt bolder等价于font-size:9pt;line-height:14pt;font-weight:bolder,在DW MX下如何运用CSS,在DW MX下 CSS使用三种方式：链接、导入、嵌入；前两者可用于多个页面共用一个.css样式表文件嵌入式CSS在DW MX下编辑包括：Custom CSS，类（class）类的应用代码是 class=“class name“CSS selector，定义伪类，主要是对链接的设定a:link;a:visited;a:hover;a:activeRedefine HTML

28、Tag对HTMl标识符进行设定New style Sheet File的建立和CSS样式表的导出自定义CSS的应用外部CSS样式表的应用,运用CSS时机,普通的页面编辑无法实现的主页特效和显示效果如：改变链接的默认显示样式等；同一页面共同需要的格式，使用CSS可以最大程度减少代码冗余；同一网站不同页面共同需要的格式，使用CSS可以保证文件尺寸最大的精简，同时.css文件共享还实现了主页格式的方便移植。,十一 页面布局层,层的特点,以像素为单位精确定位页面元素；移动方便、放置随意；层有前后显示顺序；内置元素包括所有网页元素（文本、图像、表格、层嵌套）容器层属性多样：隐藏、背景配合JavaScri

29、pt可以实现多种特效，如菜单不足：不能相对定位；不能被嵌入其他容器，如表格；浏览器要求IE4.0以上,DW MX设定层,F2 高级布局栏里可设定层；编辑-参数一项里，可以设定插入的默认层的情况；设定层的属性：LayerID：层名称；左、顶边距；层宽、层高；Z-index：层的堆叠顺序号；显示初始值：默认（可见）、inherit继承、可见、隐藏层的背景颜色、背景图片；层边距,创建层,菜单操作插入默认层用插入栏里层工具在编辑区拖曳画出创建嵌套层方法：用插入栏里层工具拖曳到编辑区已有的层中创建对两个并列的层，在层面板里通过ctrl+鼠标操作实现,层的操作,层中加入对象选择层（方法繁多，如shirt+

30、层内单击）多层同时选中，用shift移动层多个层的操作：“修改-对齐”可设定对齐方式改变：左右上下对齐；可设定大小为高度相同或者宽度相同图层吸附到网格改变层的叠放次序：改变z-index值改变层的可见性层和表格的相互转化（又一傻瓜型排版工具）,十二 动起来的主页DM Timeline,认识Timeline,播放头时间轴弹出菜单动画栏：显示动画的持续时间动画频道：显示层和动画的动画栏关键帧：给动画指定了属性的帧行为频道：特定帧执行某些行为的频道帧数播放循环自动播放,构建简单时间轴动画,动画对象必须是层步骤：创建层，确定起始位置将层放到动画栏的第一个频道内单击动画栏最后关键帧标记，注意播放头也移动

31、到该处页面上将该层移动到动画结束处，可见起始位置和结束位置之间有线（运动轨迹）选中autoplay,保存预览。,动画调整及其他,可在中间加入关键帧，在页面上改动运动轨迹可通过拖动路径创建动画可改变各种动画元素达到调整效果：动画栏长度、关键帧位置、动画起始时间、动画路径位置、添加删除帧动画加入的实际是插入了一段相对复杂的代码,十三主页特效初步,应用DM MX的JavaScript行为,JavaScript简介,JavaScript是Netscape公司产品;（Java语言是SUN Microsystems产品）程序语言本身类似Java，C；嵌入代码，通过浏览器识别执行后，达到改变页面属性，控制浏

32、览进程能实现交互功能；完成大量主页特效如：鼠标敲击移动事件等等,JavaScript行为,行为是被用来动态响应用户操作、改变当前页面效果或者是执行特定任务的一种方法行为=事件+动作事件为大多数浏览器理解的通用代码，可以由用户激发如：onMouseOver等；一个事件可以触发多个动作举例：轮转图片（鼠标移动到图片上方，图片发生变化的主页特效）DW MX里提供的“行为”功能，是一套封装好的JavaScript函数库；包含20多种行为动作,使用DW行为功能,例子：单击图片，关闭当前窗口步骤：调出“行为”面板（shift+F3）选中插入图片，添加行为call JavaScript对话框中编写代码为“w

33、indow.close()”选择触发事件为onclick,动作使用方法例解（1）,Call JavaScript 调用JavaScriptChange Properties 改变属性例子：层改变背景颜色Check Browser 检查浏览器可根据客户端浏览器的不同选择不同页面；注意这个行为的工作流程Check plugin 检查插件可设定flash网页和非flash网页,动作使用方法例解（2）,Control Shockware/flash 控制flashDrag layer 层移动设定分基础、高级Go to URL 跳转链接在框架页中打开注意先设定好框架名称Open browse windo

34、w 定制打开窗口Play sound支持音乐文件类型：midi,mp3,wav,动作使用方法例解（3）,Popup message 提示信息框Preload image 预下载图象对不会立即出现的图象载入到浏览器缓存，如使用时间轴、timeline、交互图象Set text动态改变层、框架、状态栏等的文字Show-hide layers改变层的显示状态：显示|隐藏Swap image 跳转图象注意两张图片大小要一致扩展使用：set nav bar imageTimelineValidate form自动检测表单内容合法性,应用主页特效软件,推荐软件,任何一款网上常用的特效软件如：主页特效王，g

35、reentea等按特效软件提示向导，填入必需的设定项目，将自动生成的JavaScript代码copy到网页文件代码中JavaScript的两种调用方式.js文件可以被网页进行外部调用以Script脚本语句直接嵌入到页面任何位置,图片特效软件推荐,Anfy 2.0特点：以applet（外挂）生成的眩目的主页特效，效果丰富出众应用时按向导完成设定，注意将支持特效的.js文件一起copy到网页目录下,参考书目,贾春红.网迷新宝典-DreamweaverMX网页制作M.人民邮电出版社,2002黄斯伟.网页样式设计-CSS.人民邮电出版社.2000Steven Holzner.JavaScript使用详

36、解.机械工业出版社.1999Lee Anne Phillips.巧学活用HTML4.机械工业出版社.1998,常用软件用法,CuteFtp,认识界面：本地窗口,站点窗口,服务器窗口,工具栏,信息窗口新建站点（设定内容）：站点标签，服务器名称，用户名，密码，端口设定连接过程：打开建立好的标签，填写密码，连接本地和服务器；选中本地窗口的文件，用文件上传按钮传送至服务器；选中服务器上的文件，用文件下载按钮传送至本地。在服务器端可做的操作和设定：新建文件夹，文件（文件夹）权限的设定等,ACDsee,两种界面：浏览界面，文件夹界面（可以进行图片文件的管理）除了图片浏览，还可以利用的附加功能：图片的简单处

37、理大小变化，旋转，格式转换缩略图及网页的建立,PhotoShop,新建图像设定图像宽度，高度（单位：像素）设定分辨率，网络图像分辨率可设定为72或100图层概念及操作文本和中间所有图形层次都是有前后次序的层保存文件保留所有操作层次的原始文件为.psd格式；网络图像可用压缩格式jpeg和gif设定输出常用工具选择工具，裁切工具等常用操作对比度亮度设定，层的复制删除操作，文本操作等,基本概念和基本操作,图像大小和分辨率的调节一般数码相机默认设定下所拍摄的照片，分辨率都在1024*768以上，不适合直接插入网络，需要经过大小和分辨率的调节，进行插入。理想图像大小单个网络图像大小原则上不超过100K；

38、过大的图形可以分割为多个小的图像，加快图像的网络传输速度具体操作改变图像大小和分辨率，调节亮度对比度，压缩保存,应用（1）数码照片的处理,设定一个默认的统一规格的缩略图大小笔者一般以125*94作为统一规格，这是800*600等标准分辨率的等比大小以125*94为一个基本比例，在图形中通过新建，等比扩大，载入选区，确定一个合适的缩略图范围然后进行图形裁剪；将图形大小设定为一个640*480标准图形比例，调节亮度对比度，输出成压缩格式的原始图形将图形大小设定为125*94，描边后，输出成压缩格式的缩略图,应用（2）缩略图的制作,实战网页维护,素材分类对已有素材按照栏目进行分类素材整理对已有的wo

39、rd文件等文本素材进行规整，最终整理成文本文件；对数码图片，扫描图片，抓屏图片，excel内嵌表格图片等进行分类和处理，尽量保证每张图片大小100k；按需要对图片做缩略图处理。新文件建立对以前文件做简单的复制粘贴后改名，最大程度保留所有以往网页文件的格局。,静态网页维护步骤-1,新文件基本信息处理对网页标题，关键词，更新日期，期刊号等信息做更改和更新新文本建立在主要文本位置删除旧文本信息，粘贴新的文本并简单排版图片和表格的插入按需要插入图片，设定图文排版方式；直接从word中插入数据表格，并对插入的表格做简单格式化处理,静态网页维护步骤-2,上传服务器利用FTP软件，将更新内容上传到主页服务器上调试上传前要做本地的预览；上传后要到实际的地址做测试，确保更新无误做更新日记良好的工作习惯，便于日后查询和多人合作更新主页,静态网页维护步骤-3,栏目增减考虑到导航条的问题，需要对所有已存在的网页文件做更新处理，比较麻烦。所以原则上，在网站建立最开始就要确定栏目，一般不要做调整。特殊栏目可以只在首页加链接即可。主页特效利用相应的主页特效软件可实现简单的主页特效。如：弹出信息窗口等等,特殊情况处理,