您好,欢迎访问三七文档
当前位置:首页 > 商业/管理/HR > 咨询培训 > officeword培训教程
swjtu网页设计与制作信息科学与技术学院喻琇瑛©2010TietoCorporation第1章网页制作基础Web和浏览器Web的特点和结构Web最大的特点是使用了超文本(Hypertext)(客户机/服务器)工作模式在浏览器和服务器之间应用HTTP(HyperTextTransferProtocol,超文本传输协议)作为网络应用层通信协议©2010TietoCorporationURLInternet上所有的资源都有一个唯一的URL地址,一般将URL地址称为网址。URL的完整格式如下:协议://主机名(或IP地址):端口号/路径名/文件名©2010TietoCorporation4【例】几个URL的例子.(1),用http协议和缺省端口号(80)访问微软公司服务器。这里没有指定路径和文件名,所以访问的结果是把一个缺省主页送给浏览器。(2),用FTP协议访问北京大学FTP服务器上路径名为pub/ms-windows、文件名为winvn926.zip的文件。©2010TietoCorporation5(3),从运行在端口号8001的gnacademy.org服务器上访问index.html主页。(4),访问目录下的5-BNF.html网页文件中锚点标识为httpaddress的地方。©2010TietoCorporation浏览器概述分类InternetExplorerNetscapeNavigatorMosaic等专业浏览器以及一些以上述浏览器为内核的专用浏览器。其中使用最广泛的是Microsoft出品的InternetExplorer6.0(简称IE6)。©2010TietoCorporationIE6的界面标题栏工具栏菜单栏地址栏状态栏浏览窗口©2010TietoCorporation认识网站门户网站个人网站专业网站职能网站©2010TietoCorporation门户网站这类网站是一种综合性网站,涉及领域非常广泛,包含文学、音乐、影视、体育、新闻和娱乐等方方面面的内容,具有论坛、搜索和短信等功能。现在国内较著名的门户网站有搜狐()网易()等。©2010TietoCorporation个人网站个人网站具有较强个性化,是以个人名义开发创建的网站,其内容、样式、风格等都是非常有个性的。©2010TietoCorporation专业网站这类网站具有很强的专业性,通常只涉及某一个领域,内容专业。如榕树下网站()即是一个专业文学网站。©2010TietoCorporation职能网站职能网站具有专门的功能,如政府职能网站等。目前逐渐兴起的电子商务网站也属于这类网站,较有名的电子商务网站有淘宝()、卓越网()和当当网上书店()等。©2010TietoCorporation13认识网页Flash动画导航栏GIF动画文字表单图片超级链接©2010TietoCorporation网页中的元素1.文字2.图像3.表单4.Flash动画5.表格6.超级链接7.视频、音频8.POP窗口9.标题栏和状态栏文字©2010TietoCorporation网页制作的相关知识HTML语言概述是一种超文本标记语言,作为一种网页编辑语言,易学易懂。©2010TietoCorporation1)HTML网页HTML网页通常是由三部分内容组成的:版本信息、网页标题(HEAD)和文档主体(BODY)。下面就是网页结构的总体框架:!HTML网页版本信息说明HTMLHEAD!标题标记、属性及其内容/HEADBODY!主体标记、属性及其内容/BODY/HTML©2010TietoCorporation(1)版本信息版本信息位于HTML网页文件的第一行(2)HTML文件标记大部分网页文件都是以HTML标记开始的,在文件的结尾处又以/HTML结束(3)头部信息HEAD标记之间是HTML文档的头部,用来标明当前文档的有关信息在HEAD标记之间,使用频率最高的标记就是TITLE,它用于定义显示在浏览器标题栏的文档标题。©2010TietoCorporation【例】给网页设置“励志学社”的文档标题,可在头部输入以下代码:TITLE励志学社/TITLE©2010TietoCorporation(4)主体标记网页的主体是“BODY……/BODY”标记对作用的范围BODY标记用于定义HTML文档主体的开始,它能够设置网页的背景图像、背景颜色、链接颜色和网页边距等属性,其基本用法如下所示:BODYBackground=URLBgclolr=ColorBgpropeties=FixedLeftmargin=nLink=ColorAlink=ColorText=ColorTopmargin=nVlink=ColorBgcolor为背景颜色。关于颜色的值后面会详细介绍。Text为不包含超级链接的文字颜色。Link为超级链接文字的颜色。Alink为正被点击的超级链接文字的颜色。©2010TietoCorporationLeftmargin、Topmargin用于设置网页的左边距和上边框,它们是以像素为单位【例1】将网页的上边距和左边距分别设置为40和30个像素的宽度,使用黑色文本、白色背景,未访问的链接源采用蓝色,已访问的链接源标记为暗红色。BODYBackground=moom.gifBgcolor=WhiteBgproperties=FixedLeftmargin=30Link=BlueText=BlackTopmargin=40Vlink=MaroonVlink为已经点击过的超级链接文字的颜色。Background设置,如果设置了背景图片,图片会覆盖已经设置的颜色。©2010TietoCorporation2)XML语言XML(eXtensibleMarkupLanguage)被称作是下一代的网页标记语言,也是采用各种标记来形成网页的源代码。XML中包括可扩展格式语言XSL(ExtensibleStyleLanguage)和可扩展链接语言XLL(ExtensibleLinkingLanguage)。©2010TietoCorporation3)静态网页和动态网页静态网页指基本上全部使用HTML语言制作的网页,页面的内容是固定不变的。动态网页(DynamicHTML,DHTML)利用JavaScript,CSS(层叠样式表)及其它类似的语言如VBScript等与HTML进行有机的结合来使静态的HTML网页变成动态。©2010TietoCorporation4)Web服务器端程序专业的网站都是建立在使用数据库的基础上的,要将这些数据库变成可以通过浏览器显示和操作的Web页面,就要编写服务器端的程序。用户向服务器传送提交的表单(个人信息、选择等)需要在服务器端进行记录、筛选等处理。大量的数据库查询、修改处理也需要服务器端程序的支持。目前常用的服务器端编程技术主要有CGI、ASP、PHP、JSP等,不同的技术需要不同的系统环境支持。©2010TietoCorporation网页制作的基本方法制作网页的基本步骤常用的网页制作工具有Frontpage、Dreamweaver等。1、确定网页的内容2、设计网页的组织结构3、资料的收集与整理4、选择网页的设计方法©2010TietoCorporation网页制作的原则站点要有创意整体规划动画不能过多导航要明朗制作通用网页主题鲜明优化图象定时更新©2010TietoCorporation制作网页时要注意的问题1、网页的标题要简洁,明确。2、在文本中要使用水平线,以分割不同部分。3、对重点段落要强调显示。4、网页中插入的图片要尽量的小。5、图形要附加文字说明,以便关闭图像时查看。6、网页中引用的资料及商标(或图标),不能侵犯版权。©2010TietoCorporation开始网页制作构建页面框架创建导航条填充内容创建返回主页连接©2010TietoCorporationMacromediaStudioMX2004MacromediaStudioMX2004是目前应用广泛的网页制作工具组件,使用方便、功能齐全,Dreamweaver、Flash、Fireworks被称作“网页三剑客”。在Dreamweaver里用丰富的层叠样式表制作耐看,专业的网站。Fireworks通过自动变形,用动的效果,图片编辑工具和拖拽工具能传送较精彩的Fireworks图片。©2010TietoCorporation•Dreamweave8的菜单共有10个,即文件、编辑、视图、插入、修改、文本、命令、站点、窗口和帮助。其中,编辑菜单里提供了对Dreamweaver菜单中[首选参数]的访问。文件:用来管理文件。例如新建,打开,保存,另存为,导入,输出打印等。编辑:用来编辑文本。例如剪切,复制,粘贴,查找,替换和参数设置等。查看:用来切换视图模式以及显示、隐藏标尺、网格线等辅助视图功能。©2010TietoCorporation插入:用来插入各种元素,例如图片、多媒体组件,表格、框架及超级链接等。修改:具有对页面元素修改的功能,例如在表格中插入表格,拆分、合并单元格,对其对象等。文本:用来对文本操作,例如设置文本格式等。命令:所有的附加命令项站点:用来创建和管理站点窗口:用来显示和隐藏控制面板以及切换文档窗口帮助:联机帮助功能。例如按下F1键,就会打开电子帮助文本©2010TietoCorporation思考题1.1什么是?什么是网页?1.2一个完整的URL由哪几部分组成?举出几个URL的例子。1.3如何设置IE的主页?如何用IE收藏一个网页?1.4网页中一般都使用了哪些技术?1.5MacromediaStudioMX2004有哪几部分组成?©2010TietoCorporation1站点设置站点的概念规划站点结构创建站点©2010TietoCorporation站点的概念•多个网页文档通过各种链接关联起来就构成了站点,站点可以小到一个网页,也可以大到整个网站。•DreamweaverMX2004提供了3类站点:本地站点、远程站点和测试站点。用户可通过本地站点和远程站点在本地磁盘和Web服务器之间传输文件,测试站点可用于对动态站点的测试。•本地站点•远程站点•测试站点©2010TietoCorporation规划站点结构•设计站点的必要前提是规划站点结构。规划站点结构是指利用不同的文件夹将不同的网页内容分门别类地保存,合理地组织站点结构,可提高工作效率,加快对站点的设计。•在制作站点时通常先在本地磁盘上创建一个文件夹,将所有在制作过程中创建和编辑的网页内容都保存在该文件夹中。在发布站点时,直接将这些文件夹上传到Web服务器上即可。如果站点内容较多或站点较大,则还需建立子文件夹以存放不同类型的网页内容。©2010TietoCorporation•在站点规划过程中,需使用合理的文件名称、文件夹名称。通常在命名时,可以采用与其内容相同的英文或拼音进行命名,应避免使用长文件名和中文。•制作网页所需的图片或动画等文件的存放位置也是规划站点结构时应考虑的。若是大型站点,可分别创建相应的文件夹在各个类别的文件夹下,如在站点根目录下创建一个名称为picture的文件夹用以存放
本文标题:officeword培训教程
链接地址:https://www.777doc.com/doc-959572 .html