网页设计快速入门.ppt

网页设计快速入门,Tianjin University of Science&TechnologyComputer Center2004.01,知识点,网页设计的概念网页设计软件网页制作过程建立网站的过程HTML初步,网页设计的概念,网页与网站网站是由网页集合而成信息资源以网页的形式存储在WWW服务器中；用户通过浏览器向WWW服务器发出请求，服务器根据客户请求内容，将保存在WWW服务器中的某个页面发送给客户；用户可以通过页面中的链接，方便地访问位于其他WWW服务器中的页面，或其他类型的网络信息资源；主页（home page）是一种特殊的Web页面，是指包含个人或机构基本信息的页面，用于对个人或机构进行综合性介绍，是访问个人或机构详细信息的入口点。,网页设计的概念,主页包含的基本元素：文本（text）：最基本的元素，就是通常所说的文字；图像（image）：WWW浏览器一般只识别GIF与JPG两种图像格式；表格（table）：类似于Word中的表格，表格单元内容一般为字符类型；超链接（hyperlink）：用于将HTML与其他主页相连。,网页设计的概念,IP地址IP地址是Internet地址的一种表示形式；一台Internet主机至少有一个IP地址，而且这个IP地址是全网唯一的。IP地址长度为32位，采用的格式来表示，每个x为8位。例如，202.113.29.119，每个x的值为0255。这种格式的地址被称为点分十进制地址；根据不同的取值范围，IP地址可以分为五类。IP地址中前5位用于标识IP地址的类别，A类地址的第一位为“0”，B类地址的前两位为“10”，C类地址的前三位为“110”，D类地址的前四位为“1110”，E类地址的前五位为“11110”。其中，A类、B类与C类地址为基本的IP地址。,网页设计的概念,IP地址,网页设计的概念,域名机制如果WWW服务器地址 IP地址用点分十进制表示，例如为202.113.19.122，那么用户很难记住；如果告诉用户WWW服务器地址用字符表示为，每个字符都有一定的意义，并且书写有一定的规律，这样地址用户就容易理解，又容易记忆，因此提出了域名的概念；Internet的域名结构是由TCP/IP协议集的域名系统（DNS）定义的；域名系统也与IP地址的结构一样，采用的是典型的层次结构；,网页设计的概念,域名机制域名系统将整个Internet划分为多个顶级域，并为每个顶级域规定了通用的顶级域名；,网页设计的概念,我国的域名机制中国互联网信息中心（CNNIC）负责管理我国的顶级域，它将cn域划分为多个二级域；Internet主机域名的格式为：四级域名.三级域名.二级域名.顶级域名。例如，主机域名 代表中国南开大学计算机系的主机。,网页设计的概念,我国的域名机制,网页设计的概念,URLURL（Uniform Resource Locator），即统一资源定位符URL是对能从Internet上得到的资源的位置和访问方法的一种简洁的表示；标准的URL由3部分组成：服务器类型、主机名和路径及文件名 http：/index.html 协议类型 主机名 路径及地址,网页设计的概念,FTP（文件传输协议）FTP的访问方式命令方式浏览器专用软件HTML（Hypertext Markup Language）即超文本标记语言HTML编辑器记事本、FrontPage等服务器HTTP,网页设计的概念,网页设计软件FrontPageDreamweaverFlashFireworks其他技术VBScript、JavaScriptASP、JSP、PHPCGI（通用网关接口，如Delphi、C+等）、IDC（网络数据库接口）、ADO（ActiveX Data Object）XML（可扩展标记语言）VRML（虚拟现实模型语言）,网页设计的概念,网页制作过程分析阶段设计阶段实现阶段测试阶段维护阶段,网页设计的概念,企业建立网站的过程明确建立网站的目标和用户需求总体设计方案主题鲜明网站的版式设计色彩在网页设计中的作用网页设计与内容相统一三维空间的构成和虚拟现实多媒体功能 的利用结构清晣并且便于使用导向清晣内容更新与沟通,在Internet上安个家,制作一个简单的网页申请个人主页空间（或http:/）上传网页浏览网页,第一节 FrantPage的基础知识,一、FrantPage 98与FrantPage 2000二、关于FrantPage 2000的文件三、常用的概念和术语四、启动FrantPage,FrantPage 98与2000,1、它们是创建和管理Web站点及创建和编辑网页的常用软件2、FrantPage 98由两部分组成：（1）FrantPage Explorer(浏览器)：主要用于创建、编辑管理Web站点（2）FrantPage Editor(编辑器）：主要用于创建、编辑、管理网页3、FrantPage 2000将二者合二为一,关于FrantPage 2000的文件,1、创建的文件类型：主要是HTML页面文件，扩展名为HTM/HTML；特点：包含超链接和多媒体信息2、FrantPage 2000所支持的文档类型：（九类）HTML文件；预处理的HTML文件（*.HTX,*.ASP);Rich Text Format文件(*.RTF);纯文本文件（*.TXT）；超文本模板文件（*.HTT）;Word文档（*.DOC）；Microsoft Word 3.0 4.0文件（*.WPS)；Excel工作簿（*.XLS,*.XLW）;WordPerfect 6.x(*.WPD)3、FrantPage 2000所支持的标准图形文件类型：GIF、JPG、BMP、TIF、WMF、ras、PCX、TGA、EPS等4、所支持的多媒体文件：AVI；WAV,第二节 创建和管理Web站点（网站）,一、设计Web站点的一般步骤二、创建一个新的站点三、Web站点的管理,设计Web站点的一般步骤,1、作出具体规划：确定目的、确定类型、确定总体结构2、准备素材：文本、图像等3、创建站点并制作网页：创建站点、制作网页、组织管理4、测试Web站点：检查文本、图形、链接是否到位，精确调整和修改5、发布Web站点：上传到Intranet或Internet上6、维护和更新,启动FrantPage 2000,1、启动2、窗口组成：标题栏、菜单栏、工具栏（常用、格式、动态效果、导航、图片、定位、报表、样式、表格）、视图栏3、六种视图方式：网页视图：为站点中的网页提供一个编辑环境 文件夹视图：类似于Windows的资源管理器 报表视图：为站点设计提供一个总览站点的有效手段 导航视图：显示站点的导航结构 超链接视图：显示站点中各网页的跳转关系 任务视图：用于站点设计中的任务管理,创建一个新的站点,1、选“文件”/“新建”/“站点”2、“新建”对话框中的8个图标：“创建只有一个网页的站点”、“公司展示向导”、“导入站点向导”、“讨论站点向导”、“客户支持站点模板”、“空站点模板”、“个人站点模板”、“项目站点模板”3、8个图标包含了创建站点的四类方法：从零开始法、导入法、向导法和模板法4、对话框右边的“选项”栏目下的“指定站点的位置”框内的下位列表是为创建新站点命名和指定存放位置的。5、创建网站的四类方法,创建网站的四类方法,1、从零开始法：选择“创建只有一个网页”的图标，创建的站点只有一个名为“Index.htm”主页；若选择“格式”菜单中的“共享边框”命令，在网页中自动添加导航按钮；用户可添加新的网页。2、导入法：选择“导入站点法”图标；若选择从本地硬盘导入，则必须选定“从本地计算机或网络上的文件源目录”单选项；然后在“位置”框中指定路径并选定一个文件；若从WWW上的某一个站点导入文件，则必须选定“从全球文域网站点”单选项，并在“位置”框中输入要导入站点的URL。3、向导法：使用“公司展示”向导：为小公司生成一个完整而复杂的站点。使用“讨论站点向导”：创建一个讨论组站点，允许用户为自己的站点添加一个完整而标准的讨论场所。4：模板法：模板创建新网站的外壳；四种模板（个人站点、客房支持站点、项目站点、空站点）使用“个人站点”创建：生成五个网页文件：主页（index.htm）、喜好站点（favorite.htm）、兴趣（interest.htm）相册（photo.htm）；还有两个文件夹：_private(存放系统文件)、images(存放图片文件)使用“客户支持站点”：创建向用户提供服务的站点，如文件下载、用户填写的表格等。使用“项目站点”：创建一个项目管理站点（项目成员、进展情况、工作计划等）使用“空站点”：创建几个空文件夹，再由用户添加新网页,选择要创建的新网站的类型,只有一页的网站（One Page Only）导入一个已存在的网站（Import an Existing Web）:从已有的网站或本地硬盘导入文件，启动导入向导从精灵或范本来建立（从向导和模板建立）单击“更改”接钮改变网站名称和网址,打开已有的网站,1、在FrantPage浏览器中选“文件”/“开启FrantPage网站”；或在“开始”对话框中的已有网站列表中选择一个网站2、若为“开启FrantPage网站”对话框，在“选择一个服务器或磁盘位置”框中输入或选择要打开的网站名称3、单击“列出网站”接钮，选择一个网站，单击“确定”，或直接双击要打开的网站名。,Web站点的管理,1、在网站中增加新网页；2、在网站中删除网页；3、调整网站的结构层次；4、Web站点的删除：打开要删除的网站，选“文件”/“删除FrantPage网站“选定，按del4、关闭网站：选“文件”/“关闭”,七种视方式,“文件夹”视图：同资源管理器，用于创建、移动、复制、删除文件夹等“所有文件”视图：列出所有网站中的所有文件“组织图”视图：观察层次结构；修改网页名称（“文件”/“重命名”）；改变层次关系（拖放）；添加新网页（单击“添加”按钮）“超链接”视图：显示跳转关系“超链接状态”视图：列出所有超链接（内部和外部）；左侧的小圆圈（绿：完好；黄：不确定；红：断开）“主题”视图：为网站选择一个主题“任务”视图：创建网站的计划；创建任务（切换到其他视图，在某文件上单击右键）；查看任务（“查看”/“任务历史”）,第三节 网页制作,一、网页的创建二、网页的编辑三、网页的格式设置与修饰四、在网页中插入活动元素五、表单的使用六、超级链接,网页的创建,1、一般网页的创建2、框架网页的创建,一般网页的创建,1、选“文件”/“新建”/“网页”2、在模板和向导列表中选择创建网页的类型或方法3、用说明框右上方的两个图标切换列表的显示方式4、在选项栏目下，若选择“当前框架中打开”；若选中“仅添加站点的任务”，新创建的页面将加到“任务”视图中,框架网页的创建,框架也称为帧，它将Web浏览器窗口划分几个区域，每个区域是一个独立的可滚动的页面或图像，一组框架结构的网页称为框架网页。在“新建”对话框中单击“框架网页”标签，在框架模板（10个）列表中选择所需的框架每一个框架中都有两个按钮：“设置初始页”和“新建网页”框架页面下的五种视图方式：,启动FrantPage编辑器,1、启动：“开始”/“程序”/“FrantPage”/单击工具栏上的“显示FrantPage编辑器”；资源管理器中选“c:Program FileMicrosoft FrantPageFrantPage Editor选“开始”/“程序”/“Internet Explorer”“FrantPage Editor”2、窗口组成3、三种视图方式:Normal（普通）HTML（HTML代码）Preview（预览：必须安装了IE）,创建新网页,1、选“File”中的“New”2、在“New”对话框中选中“Page”标签若选“Normal Page”，则创建一个普通网页若在模板列表中选择一种模板，单击“确定”，则可使用模板创建网页3、若选中“Frame(框架)”标签，可从框架页面模板中选择一个以创建框架网页,使用模板创建新网页,1、模板与向导的区别模板（Templete）和向导（Wizard）都是创建站点和页面的快捷方式模板是新网页的外壳向导则是提供一个或几个屏幕，允许用户回答或选择信息，然后产生一个自定义的文档作为结果2、使用模板3、使用向导：选“开始”/“程序”/“Internet Explorer”“FrantPage Express”选“File”菜单中的“New”:普通网页、表单向导、调查表单、个人主页向导、确认表单,网页的编辑,1、文本编辑2、使用表格3、使用框架4、插入图像5、网页的保存、关闭与打开,文本编辑,1、输入文本2、删除、插入文本3、剪切、复制、粘贴文本4、使用Office文档中的资料：选“插入”中的“文件”使用复制、粘贴命令鼠标拖放,使用表格,1、创建表格“表格”/“插入表格”“表格”/“画表”单击常用工具栏上的“插入表格”按钮2、表格编辑：插入行列、插入标题、表中插入表、文表转换3、表格属性：布局、边框、背景4、单元格属性：布局、边框、背景,使用框架,1、框架的作用2、创建框架页面（五种视图方式）3、定义和调整框架页面：改变框架大小、增加新框架、删除框架4、设置框架页面的属性：单击右键或选“框架”中的“框架属性”5、保存框架,插入图像,1、图像格式：使用最多的是GIF和JPEG。GIF是与设备无关的图像格式；JPEG支持多达16M种颜色，压缩比为4：1，是以损失质量为代价的压缩方式2、插入图像：“插入”/“图像”；单击“插入图像”按钮。（从当前网站、从本地硬盘、从WWW）3、使用图像工具栏：“查看”/“工具栏”,网页的保存、关闭与打开,1、保存：“文件”/“保存”/“另存为”/“全部保存”2、打开：（四种方法）3、关闭：“文件”/“关闭”,网页的格式设置与修饰,1、设置字体：“格式”/“字体”；格式工具栏2、设置动态效果：“格式”/“动态效果”3、设置段落格式：插入换行符（Shift+回车）；设置段落样式（“格式”/“段落”）；设置对齐方式；设置缩进4、设置项目符号和编号：“格式”/“项目符号和编号”；按钮5、设置网页背景：“格式”/“背景”6、插入水平线：“插入”/“水平线”；单击右键设置属性7、使用主题：“格式”/“主题”,在网页中插入活动元素,选“插入”中的“组件”活动按钮横幅广告管理器（广告图片、切换顺序、时间）字幕搜索表单计数器：记录访问该网站的人次附加组件,表单的使用,1、基本概念2、创建表单3、插入表单域:(6种)“插入”/“表单”,表单的基本概念,1、功能：收集客户信息，实现与客户的交互2、组成：表单域和说明性文字3、6种表单域：文本框、滚动文本框、复选框、单选框、下拉菜单及普通按钮4、插入表单：“插入”/“表单域”；“查看”/“表单域”，显示表单工具栏,创建表单,1、创建调查表单：“文件”/“新建”/“调查表单”模板(Feed Back Form)2、“用户注册表单”模板:“文件”/“新建”/“User Registration”3、表单向导:“文件”/“新建”/“Form Page Wizard”,超级链接,1、超级链接的两个要素2、创建链接3、编辑超级链接,超级链接的两个要素,1、超链源（超级链接源）：可以是：字符、英文单词、一个短语、一个按钮、一个图像等；2、超链目标（超级链接目标）：可以是同一页中的其他内容、站点中的其他页面、Internet中的一站点二者的关系：超链源链接到超链目标，且不可逆转,创建链接,1、创建链接的类型：内部、外部、书签2、创建各种链接3、在文本中创建超链接4、创建导航栏：“插入”/“导航栏5、建立图片超链接6、建立书签超链接,创建各种链接,1、选“插入”/“超链接”或单击“超链接”按钮2、建立外部链接的四个按钮：与WWW上的对象链接、与本地硬盘上的对象链接、与电子邮件地址链接、链接到一个新页面3、创建各种链接创建当前Web站点中某个页面的链接创建与其他站点中某个页面的链接创建与WWW上某个页面的链接创建与一个E-Mail地址的链接创建与本地计算机中某个文件的链接,建立图片超链接,（1）一般链接（同前）（2）热区：长方形热区、圆形热区、多边形热区（3）创建图片上的文本热区：单击“文本”按钮（4）选定热区和突出显示热区：单击图片工具栏上的“突出显示热点”,建立书签超链接,（1）创建书签：“插入”/“书签”（2）建立与书签的超链接：单击“超链接”按钮，在“书签”框内输入书签名（3）删除书签：“插入”/“书签”/“清除”（4）访问书签：本网页中的书签，不用建超链也能访问；不在本网页中需建超链接才能访问,编辑超级链接,1、改变超链接源的文本内容，不影响超链接目标2、更改超链接目标：选定超链接源，单击“创建或编辑超链接”按钮，重新选择超链接目标3、更改超链接的文字背景：“格式”/“背景”4、删除超链接：“编辑”/“取消链接”,条四节 Web网页的发布,一、网页发布的有关知识二、使用FrantPage上载网页三、申请免费主页空间发布主页的方法,网页发布的有关知识,1、“Web网页发布”的定义2、发布网页的几种情况3、关于FrantPage服务器扩展4、选择ISP,“Web网页发布”的定义,所谓“Web网页发布”，就是把自己制作的网页文件传送到每时每刻都与Internet相连的Web服务器上。也就是把自己计算机上的所有网页文件复制到Intermet/Intranet上指定的一台计算机的过程。这台计算机将会随时保存我们上载的网页文件，并把它传送到访问者的浏览器上。,发布网页的几种情况,1、将网页发布到单位内部的Web服务器上，供Intranet客户浏览；2、通过专线连接，将网页发布到Internet上，供全球客户浏览；3、通过拨号连接，将Web页先发布到ISP的Web服务器。这必须选择一个ISP，获得账号和密码，并获得Web服务器上一定的存储空间，且确保有读写的权限,关于FrantPage服务器扩展,1、FrantPage服务器扩展（FrantPage Sever Extensions,FSE)是上种功能强大的标准软件，它可运行在任何HTTP服务器平台。2、功能：Web站点的管理与制作：当用户修改Web站点时，FSE替用户完成管理器一方的工作，如文件夹的移动、新文件夹的生成、更新超级链接等Web站点的权限管理：控制哪些人能修改、哪些人能浏览、哪些人能管理、哪些人能创建新站点并删除已存在的站点服务器一侧的激活和Web页的改善,选择ISP,选择ISP：账号、提供适当的硬盘空间、密码、URL价格、FSE是否安装,发布前的准备,1、安装有“Web发布向导”2、在本地计算机的PWS（Personal Web Sever）服务器上测试自己的网页，保证成功3、IIS,PhotoImpact简介,Ulead公司 Ulead PhotoImpact软件免费下载地址：不但提供专业水平的设计能力；提供功能强大的“部件设计器”部件设计器：有设计向导；可以完成：图标、按钮、分隔符等各式常用Web图像,