购买

¥ 30.0

加入VIP
  • 专属下载特权
  • 现金文档折扣购买
  • VIP免费专区
  • 千万文档免费下载

上传资料

关闭

关闭

关闭

封号提示

内容

首页 网站开发(第1章)web设计基础

网站开发(第1章)web设计基础.ppt

网站开发(第1章)web设计基础

烟雨梦兮
2018-10-14 0人阅读 举报 0 0 暂无简介

简介:本文档为《网站开发(第1章)web设计基础ppt》,可适用于IT/计算机领域

第章Web设计基础学时教学要求、了解Internet应用有关的名词术语、了解网页及网站基本概念及网页的基本要素、掌握HTML语言基本用法、掌握解Dreamweaver操作方法、掌握Dreamweaver站点的管理第章Web设计基础网页与网站概述网页设计与制作初识Dreamweaver网页基本操作Dreamweaver站点管理网页与网站概述一、什么是WWWWWW是WorldWideWeb的英文缩写翻译成中文的意思:“全球网络信息查询系统”或直译成“万维网”或“全球网”它是一种以网页(webpage)为基本单位构筑的网状结构。其目的是为了把遍布在Internet上数以万计的网页链接起来形成一个庞大的资源信息网。网页与网站概述WWW将Internet上的所有资源(包括文字、图片、声音、视频等)采用统一资源定位方式连接起来而在客户端访问者只需用浏览器输入网页的URL便可轻松地访问Internet上的所有资源。构成WWW的基本元素是网页(webpage)。网页与网站概述二、什么是网页◆不同的角度定义:、从网页组成的角度来说网页是由文字、图片、动画、声音、超级链接等组成的用浏览器显示的页面。、从语言的角度定义网页网页是指一个用HTML语言编写的文件。它通常以HTM或HTML作为文件的扩展名。◆综合:网页是WWW上的基本文档它是用HTML(超文本标记语言)描述的文档它包括文本、图像、表格等内容(这些称为网页的元素)。这些内容必需用浏览器来显示。二、什么是网页◆网页文档的说明:、网页是含有HTML标记的基本文档。、该网页文档的格式是“htm”或“html”。、网页文档是文本文档可以用任何可以对文本进行编辑的软件进行编辑。二、什么是网页◆网页的分类、按所处位置分类按网页在网站中所处的位置可将网页分为主页和子页两类。二、什么是网页、按表现形式分类按网页的表现形式可将网页分为静态网页和动态网页。静态网页动态网页网页与网站概述三、超级文本(HyperText)超级文本是一种带有HTML标记的文本。(实际上指的就是网页)。WWW是基于超级文本的信息查询工具。提示:超级文本是一种更复杂、更高级的文本显示方式通过对有关词汇进行索引链接使得这些带链接的词汇指向文本中其它的有关段落、或其它文本。这是超级文本的重要特性链接。网页与网站概述四、超级链接超级链接是网页中最常用的元素之一网页就是通过无数的超级链接才能组成一个网站。超级链接可以链接到网站内部页面、对象也可以链接到其他网站大大方便了用户在各个页面对象之间实现跳转。网页与网站概述五、IP地址IP地址用来标识连接到Internet上的计算机每一个IP地址对应一台计算机这与用电话号码标识电话网络中的电话类似。计算机识别的IP地址由位二进制数值组成电计算机上以十进制数值来显示一组数值分为部分每一部分均不能大于中间用“”分隔如:。网页与网站概述六、域名域名就是常说的网址如百度的网址wwwbaiducom、网易的网址wwwcom等就是一个域名域名由汉语拼音或英文字符加上数字表示在访问网络时域名将通过域名服务器转换成IP地址这种转换是在后台完成的。网页与网站概述七、浏览器浏览器是指安装在客户端用来查看WWW中的超级文本的一种工具。说明:每一个WWW的用户都要在自己的计算机上安装浏览器才能“阅读”网页中的信息这也是使用WWW的最基本的条件。◆浏览器的种类:、InternetExplorer(IE)、NetscapeNavigator(NE)网页与网站概述八、统一资源定位器(URL)URL(UniformResourceLocator)主要是用来指定协议(如HTTP或FTP)以及对象、文档、万维网网页或其他目标在Internet的位置和存取方式。URL由以下四部分组成:、通信协议、主机名、网页路径、网页名称如:http:xscnotesnotehtm网页与网站概述九、网站(站点)◆定义:简单地说就是一些链接在一起的网页的集合称之为网站。◆说明:网站是WWW(万维网)中最基本的组成部分也就是说在万维网中有许许多多的网站组成这些网站可能是政府的、可能是企业的、也可能是个人的而牵涉的面也是非常广泛只要是需要各行各业都可以建立自己的网站这项工作已经成为了社会的需要。Web结构Web结构也称为浏览器服务器(BS)结构使用超文本传输协议(HypertextTransportProcotocolHTTP)传输数据相比较客户端服务器(CS)结构有很多不同。本章将详细剖析一下Web应用程序的内部结构。HTTP简介在我们访问网站的时候通常都会在浏览器的地址栏里输入网站地址这个地址就是URL(UniformResourceLocator统一资源定位符)。当确定要访问这个网址的时候浏览器就会通过HTTP从Web服务器上获取提取的网页代码最终翻译成用户易读的页面文字、图片和多媒体等信息。例如Microsoft官方的网址http:wwwMicrosoftcom其各个组成部分的含义如下所示。http::代表超文本传输协议通知Microsoftcom服务器显示Web页通常不用输入。www:代表一个Web(万维网)服务器。Microsoftcom:这是装有网页的服务器的域名或站点服务器的名称。Internet的基本协议是TCPIPHTTP是用于从WWW服务器传输超文本到本地浏览器的传输协议。BS结构简介BS结构(BrowserServer结构)即浏览器服务器结构。在这种结构下用户工作界面通过WWW浏览器来实现极少部分事务逻辑在前端(Browser)实现但是主要事务逻辑在服务器端(Server)实现形成所谓三层结构。BS结构最大的优点就是可以在任何地方进行操作而不用安装任何专门的软件。CS结构简介CS结构(ClientServer结构即客户服务器)结构。其中服务器通常采用高性能的PC、工作站或小型机并采用大型数据库系统(如Oracle、Sybase、Informix或SQLServer)客户端需要安装专用的客户端软件。CS结构的优点是能充分发挥客户端PC的处理能力很多工作可以在客户端处理后再提交给服务器。对应的优点就是客户端响应速度快。缺点主要有以下几个。()只适用于局域网。()客户端需要安装专用的客户端软件。() 对客户端的操作系统一般也会有限制。BS结构与CS结构比较.数据安全性比较.数据一致性比较.数据实时性比较.数据溯源性比较.服务响应及时性比较.网络应用限制比较Web系统的三层结构()数据访问层:实现对数据的访问功能如增加、删除、修改、查询数据。()业务逻辑层:实现业务的具体逻辑功能如学生入学、退学、成绩管理等。()页面显示层:将业务功能在浏览器上显示出来如分页显示学生信息等。图Web系统的三层结构图网页设计与制作初步一、什么是HTMLHTML是HyperTextMarkupLanguage的英文缩写翻译为“超文本标记语言”。它是一种用来制作超文本文档的简单标记语言是WWW上描述网页内容和外观的标准。HTML是一种标记语言由一些标记、属性及属性值组成对网页的行为作出说明允许Web浏览器解释它们以便于理解。一、什么是HTMLHTML使用标记来标识每个标记一般包含了一对开始和结束标记在标记中有属性和值。标记描述了网页上的元素例如文本段落、表格、图像等。标记的格式:<标记属性=“值”……>内容<标记>标记内的内容称为元素元素代表了标记的意义。一、什么是HTML◆关于编写HTML文档的说明:、HTML标记包含在<>中以区别于在页面上显示的文本。、大多数HTML标记都成对出现只有极少数单独出现例如<br>、<img>、<hr>等标记。、HTML标记不区分大小写。、HTML文档的扩展名为htm也可以为html。、HTML文档是一个纯文本的文档可以使用任何文本编辑器来编辑它例如记事本。、因为浏览器的差异一些扩充的HTML标记在不同的浏览器上可能显示的结果并不相同。HTML基础一、HTML的概念什么是HTML?超文本标记语言(HTMLHyperTextMarkupLanguage)是用于设计网页源文件(网页文档)的语言。每一个页面的代码保存为一个网页源文件(htm文件)。八十年代初HTML由万维网联盟(WC:WorldWideWebConsortium)制订。HTML包括一些定义页面内容和格式的符号称为标记。它能够将文本、图像、声音和动画结合在一个网页文档中。这些文档可以通过Web浏览器显示还可以通过超链接以访问其它的信息资源。后来进一步推出了XML(扩展标记语言)该语言可以由程序员自己定义标记。。HTML基础什么是标记?标记是网页文档中的一些有特定意义的符号。这些符号指明如何显示文档中的内容。标记总是放在三角括号中大多数标记都成对出现(有开始标记和结束标记)。结束标记和开始标记所用的字符相同只是前面加一个斜杠。例如:<p>…<p>用于标记一个自然段。标记可以具有相应属性即各种参数如size、color、text、width和noshade等。例如:<p><fontsize=""color="red"><font><p>HTML基础什么是超文本、超媒体和超链接?超文本是网页上具有链接功能的文字。例如娱乐新闻电影。超媒体是网页上具有链接功能的多媒体。超链接是网页上连接其它网页或网页上指定位置的超文本和超媒体。超链接分为文字和图像(包括动画)两种网页中的一段文字、一副图像或图像的某一个部分等都可以定义为超链接。HTML基础二、如何编写和浏览HTML网页文档启动IE然后使用“查看”菜单中的“源文件”菜单项进入记事本就可以输入网页源文件了。在输入完之后另存为htm文件。或者直接进入记事本输入网页源文件。在输入完之后另存为htm文件(选择保存类型为“所有文件”)。在浏览器中输入该文件名就能浏览HTML源文件的网页效果。HTML基础例如:<HTML><HEAD><TITLE>学生选课系统<TITLE><HEAD><BODY>网页制作练习<BODY><HTML>HTML基础三、HTML的常用标记HTML文档的结构标记用来指明一个HTML文档的基本结构。()文件标记:<HTML>…<HTML>整个HTML文档内容均在<HTML>…<HTML>标记之中。()头部标记:<HEAD>…<HEAD>整个HTML文档分头部和主体部分。头部使用<HEAD>…<HEAD>标记标识凡是在此标记之内的内容例如标题等均属于头部信息。头部信息不显示在Web页中。HTML基础()头部标题标记:<TITLE>…<TITLE>在此标记之间的内容将作为标题显示在浏览器的标题栏。注意:<TITLE>…<TITLE>标记只能放在<HEAD>…<HEAD>标记之间。()主体标记:<BODY>…<BODY>主体是Web页的主要部分用<BODY>…<BODY>标记定义的信息将显示在Web页中。HTML基础<html><head><title>结构标记示例<title><head><bodytext="blue"><p><i>斜体字文本<i><p><body><html>HTML基础格式标记()<p>…<p>(段落标记)<p>…<p>标记用来创建一个段落在此标记之间的文本将按照段落的格式显示。()<br>(换行标记)<br>是一个很简单的标记它没有结束标记用来创建一个换行。下面一一介绍在<body>…<body>标记之间常用的各种标记。HTML基础()<dl><dl><dt><dt><dd><dd>(列表标记)①<dl><dl>用来创建一个列表②<dt><dt>用来创建列表中的上层项目③<dd><dd>用来创建列表中最下层项目<dt><dt>和<dd><dd>都必须放在<dl><dl>标记之间。HTML基础<html><head><title>一个普通列表<title><head><bodytext="blue"><dl><dt>中国城市<dt><dd>北京<dd><dd>上海<dd><dd>广州<dd><dt>美国城市<dt><dd>华盛顿<dd><dd>芝加哥<dd><dd>纽约<dd><dl><body><html>HTML基础()<ol><ol><ul><ul><li><li>(标有数字或圆点的列表标记)①<ol><ol>标记用来创建一个标有数字的列表②<ul><ul>标记用来创建一个标有圆点的列表③<li><li>标记只能在<ol><ol>或<ul><ul>标记之间使用此标记对用来创建一个列表项。若<li><li>放在<ol><ol>之间,则每个列表项加上一个数字若在<ul><ul>之间,则每个列表项加上一个圆点。HTML基础<html><head><title>标有数字与圆点的列表<title><head><bodytext="blue"><ol><p>中国城市<p><li>北京<li><li>上海<li><li>广州<li><ol><ul><p>美国城市<p><li>华盛顿<li><li>芝加哥<li><li>纽约<li><ul><body><html>HTML基础()<div><div>(块标记)①<div><div>标记对用来排版大块HTML段落也用于格式化表此标记的用法与<p><p>标记非常相似同样有align对齐方式属性。②align属性它用来说明对齐方式语法是:<divalign=""><div>。③align可以是Left(左对齐)、Center(居中)和Right(右对齐)三个值中的任何一个。例如:<palign=“Center”><p>表示标记中的文本居中显示。HTML基础文本标记<h><h>……<h><h>(六级标题标记)<h><h>是最大的标题<h><h>则是最小的标题。如果要在HTML文档中输出标题那麽可以使用六对标题标记的任何一对。HTML基础()<b><b><i><i><u><u>(字体标记)①<b><b>之间的文本以黑体字的形式输出②<i><i>之间的文本以斜体字的形式输出③<u><u>之间的文本以下加一划线的形式输出。()<em><em><strong><strong>(强调加重标记)①<em><em>用来输出需要强调的文本(通常是斜体加黑体)②<strong><strong>则用来输出加重文本(通常也是斜体加黑体)。HTML基础()<font><font>(字体的大小颜色标记)①<font><font>可以指定输出文本的字体大小、颜色它主要两个属性size和color。②size属性用来指定字体的大小可以取值:、和③color属性用来指定文本的颜色颜色的取值是十六进制RGB颜色码或HTML语言给定的颜色名称。例如"#ff"引号内的rrggbb是用六位十六进制数字表示的RGB(即红、绿、蓝三色的组合)颜色#ff对应的是红色。HTML基础④Html语言所给定的颜色名称有:Black、White、Green、Maroon、Olive、Navy、Purple、Gray、Yellow、Lime、Agua、Fuchsia、Silver、Red、Blue和Teal。或用#六位十六进制表示例如:<p><fontsize=""color="red">size取值“”、color取值“red”时的文本<font><p>表示<p><p>标记之间的文本按大小为颜色为红色显示。HTML基础例文本标记的综合示例HTML基础<html><head><title>文本标记的综合示例<title><head><bodytext="blue"><h>最大的标题<h><h>使用h的标题<h><h>最大的标题<h><p><b>黑体字文本<b><p><p><i>斜体字文本<i><p><p><u>下加一划线文本<u><p><p><em>强调的文本<em><p><p><strong>加重的文本<strong><p><p><fontsize=“”color=“red”>size取值“”、color取值“red”时的文本<font><p><body><html>HTML基础链接标记()<ahref=“地址">…<a>(超链接标记)①在标记对之间可指定作为超链接的文本或图像使用<imgsrc=“图像文件名”>标记指定图像。例如指定超链接及其文本“大理学院网站”:<ahref="http:wwwdalieducn">大理学院<a>或者指定超链接及其图像“d:picgif”:<ahref="http:wwwdalieducn"><imgsrc="picgif"><a>在上例中href的值是大理学院的网址。(href缩写:httpreference含义为http引用。)HTML基础②href的值也可以是mailto:形式即发送EMail形式。语法为:<ahref="mailto:EMAIL"><a>这就创建了一个自动发送电子邮件的链接mailto:后边紧跟想要自动发送的电子邮件的地址(即EMail地址)。例如链接到我的电子信箱abcnet:<ahref="mailto:abcnet">这是我的电子信箱(EMail信箱)<a>HTML基础③<ahref=“”><a>还具有target属性此属性用来指明显示的目标窗口。如果不使用target属性当浏览者点击了链接之后将在原来的浏览器窗口中显示HTML文档若target的值等于“blank”点击链接后将会打开一个新的浏览器窗口显示HTML文档。例如进入ccwhueducn并且在新窗口中显示网页:<ahref=“http:wwwdalieducn”target="blank">在新窗口中显示<a>HTML基础()<aname="标签名"><a>(标签标记)①标签标记<aname=“”><a>需要结合<ahref=“”><a>标记使用。name属性不可缺少。②<aname=“标签名”><a>标记用来在同一网页中创建一个标签(即做一个记号),即在同一网页中创建链接以便转到同一网页中有标签的地方并显示。例如在页顶创建一个标签<aname="Top">此处创建了一个标签<a>③要找到标签所在地就必须使用<ahref=“#标签名"><a>标记。例如:<ahref=“#Top”>点击此处将转到标签“Top”的地方显示<a>HTML基础例链接标记的综合示例<html><head><title>链接标记的综合示例<title><head><body><palign="center"style="fontsize:ptcolor:yellowbackground:black"><br><aname="Top"><fontcolor="red">创建标签处<font><a><br><br><br><br><br><br><br><br><br><br><br>欢迎想要学习网页制作的同学访问网站<br><ahref="http:wwwwhueducn"><fontcolor="lime">武汉大学网站<font><a><br><br>HTML基础<ahref=http:wwwwhueducn><imgsrc="d:Inetpubwwwrootwebgif"><a><br><br><br><br><br>本网站的主要内容<br><br><ahref="http:ccwhueducn"target="blank">在新窗口中显示<a><br>欢迎给我来信我的EMail是:<ahref="mailto:abcnet"><fontcolor="lime">abcnet<font><a><br><br><ahref=“#Top”><fontcolor=“lime”>点击此处回到标签处<font><a><br><br><p><body><html>图像标记和多媒体标记()图像标记:<imgsrc=“图像文件名”>将图形文件嵌入到网页文档中的当前位置。例如网页文档与图形文件logogif在同一个目录下则可以将代码写成<imgsrc="logogif">。假如图形文件放在网页文档所在目录的一个子目录(images)下则代码应为:<imgsrc="imageslogogif">。此外<img>标记还有alt(文字代替)、align(对齐)、border(边框)、width(宽度)和height(高度)属性。HTML基础假如图形文件放在网页文档所在目录的上层目录(如home)下则相对路径就必须是准网址即用“”表示网站后边紧跟文件在网站中的路径。例如home是网站下的一个目录则代码应为:<imgsrc="homelogogif">。例如home是网站下的目录king下边的一个子目录则代码应为:<imgsrc="kinghomelogogif">。HTML基础例图像标记举例<html><head><title>图像标记示例<title><head><body><palign=“center”><imgsrc=“logogif”alt=“网页制作”width=""height=""><p><body><html>HTML基础若事先在网站根目录中存放一幅图像logogif则可以在网页中显示它。alt="网页制作"属性表示在网页中可以用文字"网页制作"代替该图像先行显示出来。表格标记(用于制作表格或网页结构)()<table><table>(创建一个表格)()<tr><tr>和<td><td>(创建表格中的每一行和每一格)()<th><th>(创建表格头)。例用表格标记创建下列表格。HTML基础<html><head><title>表格标记示例<title><head><body><tableborder=""width=""bgcolor="#EEE“cellpadding=""bordercolor="#FF“bordercolorlight="#DDFF"bordercolordark="#A"><tr><thwidth=""colspan=""valign="bottom">意大利<th><thwidth=""colspan=""valign="bottom">英格兰<th><thwidth=""colspan=""valign="bottom">西班牙<th><tr>HTML基础cellpadding设置格子边框与其内容之间的大小valign是垂直对齐方式colspan设置一个格子跨占的列数rowspan设置一个格子跨占的行数。<tr><tdwidth=""align="center">AC米兰<td><tdwidth=""align="center">佛罗伦萨<td><tdwidth=""align="center">曼联<td><tdwidth=""align="center">纽卡斯尔<td><tdwidth=""align="center">巴塞罗那<td><tdwidth=""align="center">皇家社会<td><tr>HTML基础<tr><tdwidth=""align="center">尤文图斯<td><tdwidth=""align="center">桑普多利亚<td><tdwidth=""align="center">利物浦<td><tdwidth=""align="center">阿申纳<td><tdwidth=""align="center">皇家马德里<td><tdwidth=""align="center">……<td><tr>HTML基础<tr><tdwidth=""align="center">拉齐奥<td><tdwidth=""align="center">国际米兰<td><tdwidth=""align="center">切尔西<td><tdwidth=""align="center">米德尔斯堡<td><tdwidth=""align="center">马德里竞技<td><tdwidth=""align="center">……<td><tr><table><body><html>HTML基础()水平线标记<hr><hr>标记是在HTML文档中加入一条水平线它可以直接使用具有size、color、width和noshade属性。size是设置水平线的厚度而width是设定水平线的宽度默认单位是像素。noshade属性用来加入一条没有阴影的水平线。例如:<hrwidth=""size=""color="#FF">。HTML基础HTML基础滚动的文本标签<marquee>一般格式:<marqueedirection=方向behavior=方式loop=循环次数scrollamount=速度scrolldelay=延时Width="n"onMouseOver=thisstop()onMouseOut=thisstart()>文本<marquee>例如:<marqueebehavior=scrollloop=scrollamount=scrolldelay=Width="">啦啦啦一圈一圈绕着走!<marquee>二、网页制作的常用工具◆网页设计软件、FrontPage、DreamweaverDreamweaver是目前使用最多的网页设计软件。◆图像处理软件、Fireworks、Photoshop。◆动画制作软件:Flash年月,美国Macromedia公司推出了DreamweaverDreamweaver是目前主流的网页设计工具不仅具有强大的页面设计功能而且具有完善的站点管理能力使用Dreamweaver设计网页将是一个便捷、高效的工作流程Dreamweaver结合了Dreamweaver的可视化排版功能融合了DreamweaverUltraDev的动态数据库页面开发功能和HomeSite的强大的代码编辑支持Dreamweaver概述缩放工具和辅助线利用XML数据进行可视化创作新的“CSS样式”面板CSS布局的可视化代码折叠编码工具栏后台文件传输“插入Flash视频”命令一、Dreamweaver的新功能二、Dreamweaver的编辑环境编辑视窗功能菜单文档工具栏属性设置插入面板辅助工具编辑视窗面板控制单击右键面版名称修改功能菜单按键组合功能菜单文档工具栏文档工具栏显示代码视图显示代码视图和设计视图显示设计视图服务器调试文档标题没有游览器检查错误验证标记文件管理在浏览器中预览调试刷新设计视图视图选项可视化助理属性设置属性设置文本属性面板图像属性面板表格属性面板布局结构视图选择命令“查看”→“表格模式”→“布局模式”切换到布局结构视图属性设置表单属性面板层属性面板框架属性面板Flash影片属性面板插入面板插入面板单击所要插入元素类型的图标即可插入§网页基本操作一、新建、打开和保存网页方法一:启动了Dreamweaver单击“文件”菜单中的“新建”命令打开一个新页面在该页面中也可以进行网页的设计编辑。网页设计编辑完毕后保存网页文件:保存的位置在站点目录下。§网页的基本操作新建网页§网页的基本操作保存网页§网页的基本操作方法二:使用“文件”面板建立网页文件。在“文件”面板中双击网页文件打开网页文件进入编辑网页文件窗口。§网页的基本操作二、设置页面属性编辑网页之前还需要对页面进行一些简单的属性设置以方便以后的工作。页面的属性包括页面的标题、背景图像、背景颜色等。操作方法:单击“修改”菜单中的“页面设置”命令打开“页面设置”的对话框进行设置。§网页的基本操作§DreamWeaver站点管理在使用Dreamwear制作网页之前必须首先创建网站或打开网站此时Dreamwear会自动将所有网站资源(HTML文档、图片、动画、声音、程序等)都保存到网站文件夹中从而保证网站发布后网页上的所有元素可以正常浏览。站点相关概念、本地计算机:你正在使用的一台计算机同时也是用来存放上传到服务器之前所有的网页及站点的内容则这台计算机称为本地计算机。、本地站点:指的是本地计算机创建的站点。实质上它是指网站中所有的网页文件在本地计算机的存放位置。站点相关概念、远程计算机:除了本地计算机外还应该有一台计算机来发布主页供Internet用户浏览这台计算机就叫做远程计算机。实际上就是Internet服务器。、远程站点:在本地站点设计完毕后可以利用各种FTP程序将本地站点上传到Internet服务器上形成远程站点。一、规划网站在建立网站与制作网页之前首先要规划站点:、规划站点结构:合理的站点结构可以加快对站点的设计提高工作效率。◆用文件夹保存文档:首先建一个根文件夹然后在其中建若干子文件夹分类存放网站全部文档。◆使用合理的文件名:文件夹名称与文件名称用容易理解网页内容的英文名(或拼音)最好不要使用大写或中文。◆合理分配文档资源:不同的对象放在不同的文件夹中。不要将与网页制作无关的文件放置在该文件夹中。一、规划网站、规划站点导航机制:提供清晰易懂的浏览方法采用统一的网页组织形式引导用户轻松访问网站。◆建立返回主页链接:在每个页面上设置避免迷失方向。◆显示网站专题目录:每一页面都应提供网站简明目录结构引导用户快速进入。◆显示当前位置:在显著位置上标出当前页在网站中的位置。◆搜索索引反馈:数据网站应设搜索功能。◆反馈:设置管理员email信箱、意见反馈表单等功能。导航机制一、规划网站、构建整体的站点风格:网站中网页风格应该统一使网站特点鲜明突出主题。◆风格统一:在多个网页上重复出现标识网站特征的某些对象。◆使用模板和库:快速批量创建相同风格的网页。§创建和管理站点二、创建本地站点 、首先必须先在本地计算机的磁盘上建立一个文件夹。(作为本地站点的根文件夹)提示:为了方便以后管理站点上的文件可先在本地文件夹中创建几个目录:如images、files、others等分别存放网页设计中用到的资源及网页文件。二、创建本地站点、建立本地站点使用主菜单中的“站点→管理站点”命令。“站点管理站点”命令。给站点命名询问是否要使用服务器技术选择“否”选项(表示目前该站点是一个静态站点没有动态页即不使用Web应用程序:如ASP、JSP等)指定本地机磁盘上的一个文件夹储存站点文件(包括网页文件及设计网页用到的其它资源)在弹出的对话框中设置如何连接到远程服务器单击下拉菜单选择“无”。二、创建本地站点、编辑修改站点选择“高级”选项卡在“分类”区域中选择“本地信息”。、编辑修改站点说明:◆在“站点名称”文本框中输入站点的名称。◆在“本地根文件夹”文本框中指定本地计算机的磁盘上用于存放所有站点文件的文件夹。(如果本地根文件夹尚不存在应先创建好的文件夹)。◆在“自动刷新本地文本列表”选项中指定每次文件复制到本地站点时Dreamweaver是否自动刷新本地文件列表。◆在“默认图象文件夹”文本框中指定此站点的默认图像文件夹的路径。、编辑修改站点◆在“http地址”文本框中输入已完成的Web站点将使用的URL。◆对于“启用缓存”选项指定是否创建本地缓存以提高链接和站点管理任务的速度这是Dreamweaver提供的很好的资源要选中。◆在本地计算机上设计网页本地站点的信息设置已经足够了远程站点的信息以后设置。二、创建本地站点、管理站点文件使用“文件”面板、管理站点文件)创建文件或文件夹)重命名文件或文件夹)移动和复制文件或文件夹)删除文件或文件夹三、发布站点.打开文件面板并单击面板上的展开折叠按钮打开扩展的文件面板如图所示。.单击工具栏上的链接到远端主机按钮链接远程站点如图所示。发布站点当按钮上的指示灯变成绿色时表示已经链接到远程站点可以上传本地文件了。再次单击该按钮则会断开和远程站点的链接。成功连接到远程站点发布站点.单击在窗口右侧按住Ctrl或Shift键选中要发布的文件如果要上传整个站点内容则在本地文件列表中按下CtrlA键全选站点文件然后单击工具栏上的上传文件按钮上传。发布站点.单击单击上传文件按钮后出现如图所示的对话框选择“是”即可。发布站点.当整个站点上传完毕左边窗口显示远程站点文件列表。远程站点文件列表管理超链接.检查超链接站点管理器窗口→“站点”→“检查站点范围的链接”选择检查超链接的类型管理超链接.更新超链接站点管理器窗口→“站点”→“改变站点范围的链接”指定要修改的超链接文件指定修改后的超链接文件打开“更新文件”对话框检查目标浏览器按住Ctrl或Shift键一次选择多个浏览器单击“确定”按钮“检查整个当前本地站点的目标浏览器”保存检查报告检查目标浏览器

VIP尊享8折文档

用户评价(0)

关闭

新课改视野下建构高中语文教学实验成果报告(32KB)

抱歉,积分不足下载失败,请稍后再试!

提示

试读已结束,如需要继续阅读或者下载,敬请购买!

文档小程序码

使用微信“扫一扫”扫码寻找文档

1

打开微信

2

扫描小程序码

3

发布寻找信息

4

等待寻找结果

我知道了
评分:

/117

网站开发(第1章)web设计基础

¥30.0

会员价¥24.0

VIP

在线
客服

免费
邮箱

爱问共享资料服务号

扫描关注领取更多福利