网页制作-“江南联赛”一等奖_第1页
网页制作-“江南联赛”一等奖_第2页
网页制作-“江南联赛”一等奖_第3页
网页制作-“江南联赛”一等奖_第4页
网页制作-“江南联赛”一等奖_第5页
已阅读5页,还剩28页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

《大学计算机基础》第8章网页制作了解网页制作的基本流程了解常用网页制作工具理解客户服务器模式及WWW工作原理掌握HTML文档基本结构及常用标记掌握DreamweaverCS5制作网页的基本方法理解网页测试发布的作用及方法本章学习目标8.1网页制作流程8.2WWW概述8.3网页制作工具介绍8.4HTML概述8.5Dreamweaver基本操作8.6网页测试及发布第8章网页制作8.1.1规划阶段8.1.2设计阶段8.1.3发布阶段8.1.4维护阶段8.1网页制作流程网页制作是一个循环往复的过程。8.1网页制作流程8.1.1规划阶段1.网站定位要精准2.网站栏目规划要清晰3.网站要有自己的特色4.注重细节和用户体验8.1网页制作流程8.1.2设计阶段1.决定网页的内容、导航结构和其他制作要素。2.根据内容设计网页的外观。8.1网页制作流程<<<8.1.3发布阶段将网页发布到和因特网相连的服务器上去,让更多的人能够访问。8.1网页制作流程8.1.4维护阶段不断地更新网页中的内容,展示出最新信息。8.1网页制作流程8.2.1客户服务器模式8.2.2WWW工作原理8.2WWW概述<<<8.2.1客户服务器模式服务器(Server):指的是能在网络上提供服务的一台计算机。服务器能接收请求,产生响应,并将结果返回给客户端。客户端(Client):指的是能向服务器发出请求并能处理接收服务器返回的信息。8.2WWW概述8.2.2WWW工作原理WWW的工作原理有三要素:WWW服务器、WWW浏览器及两者之间的协议规范。8.2WWW概述8.3.1SharePointDesigner2010简介8.3.2DreamweaverCS5简介8.3网页制作工具介绍<<<8.4.1HTML简介8.4.2HTML文档的基本结构8.4.3HTML标记及属性8.4HTML概述<<<8.4.1HTML简介HTML(HyperTextMark-upLanguage)即超文本标记语言或超文本链接标示语言,是目前万维网(WWW)网络上应用最为广泛的语言,也是构成网页文档的主要语言。8.4HTML概述1.HTML通过标记及属性对超文本的语义进行描述。2.HTML文件的扩展名为.htm或.html。3.HTML编辑器:用于生成和保存HTML文档的应用程序。4.Web浏览器:用来打开Web网页文件,提供查看Web资源的客户端软件。8.4HTML概述8.4.2HTML文档的基本结构1.HTML的语法简单,其基本框架结构是相同的。2.<html></html>在文档的最外层,它表示该文档是用超文本标记语言HTML编写的。3.<head></head>是HTML文档的头部标记。<title></title>是嵌套在<head>头部标记中的,标记之间的文本是文档标题。4.<body></body>标记之间的文本是正文,是在浏览器中要显示的页面内容。8.4HTML概述8.4.3HTML标记及属性标记及属性的语法格式为:

<标记名字属性1="属性值1"属性2="属性值2">内容</标记名字>。字体:超文本中最重要的元素是文字。语法格式为:

<fontface="字体名称"size="字号大小"color="字体颜色">文本</font>标题:<hn>标记用于设置文档体中出现的标题文字,

语法格式为:<hn>标题内容</hn>8.4HTML概述表格:在HTML文档中,表格通过<table>,<th>,<tr>,<td>标记设置的。图像:<imgsrc="URL图像路径"width="宽度"height="高度"alt="替代文字"border="边框的粗度">超链接:<ahref="目标资源地址"

target="窗口名称"title="指向链接显示的文字">超链接名称</a>表单:<formaction="应用程序的URL"method="get|post"name="名称"target="目标窗口">...</form>8.4HTML概述8.5.1DreamweaverCS5的窗口界面8.5.2DreamweaverCS5创建站点8.5.3DreamweaverCS5创建文件夹及网页8.5.4DreamweaverCS5网页文本编辑8.5.5DreamweaverCS5网页图像编辑8.5.6DreamweaverCS5创建超链接8.5.7DreamweaverCS5创建表格8.5.8DreamweaverCS5添加背景音乐8.5Dreamweaver基本操作<<<8.5.1DreamweaverCS5窗口界面1.DreamweaverCS5的启动与退出2.DreamweaverCS5的窗口组成8.5Dreamweaver基本操作8.5.2DreamweaverCS5创建站点DreamweaverCS5站点是Web站点中所有文件和资源的集合。制作网页首先需创建站点,为站点内的所有文件建立联系,实现对创建的站点进行修改、删除和复制等操作。(操作演示)8.5Dreamweaver基本操作8.5.3创建站点文件夹及网页1.创建站点文件夹

创建站点文件夹以形成完整的网站目录结构。2.创建网页文件

网页(webpage),是网站中的一“页”,通常是HTML格式(文件扩展名为.htm或.html)。3.操作演示8.5Dreamweaver基本操作8.5.4Dreamweaver网页文本编辑1.添加文本2.设置段落格式3.更改文本颜色4.对齐文本5.缩进文本6.应用字体样式7.水平线8.5Dreamweaver基本操作8.5.5网页图像编辑图像是网页最主要的元素之一。网页中通常使用的只有三种,即GIF、JPEG和PNG。GIF和JPEG文件格式的支持情况最好,大多数浏览器都可以查看它们。8.5Dreamweaver基本操作8.5.5网页图像编辑1.插入图像图像已经在当前站点中,这种可直接引用。如图像位于站点之外,插入图像时将提示用户将图像复制到当前站点中。2.设置图像属性插入到网页中的图像可以通过“属性”面板设置其属性,如改变图像大小、设置对齐方式、建立超链接等。(操作演示)8.5Dreamweaver基本操作8.5.5网页图像编辑3.设置网页背景⑴颜色背景通过<body>标签指定页面的颜色背景.⑵图像背景使用图像背景会达到更美观的效果。(操作演示)8.5Dreamweaver基本操作8.5.6创建超链接超级链接是网页之间联系的桥梁,浏览者通过它可以跳转到其他页面。每个Web页面都有一个唯一地址,称作统一资源定位器(URL)。链接路径有如下3种类型:⑴绝对地址⑵根路径⑶相对路径8.5Dreamweaver基本操作8.5.6创建超链接1.创建文本或图片链接⑴用属性面板创建超链接⑵用插入方式创建超链接(操作演示)当网页包含超链接时,网页中的外观形式为彩色且带下画线的文字或图片;鼠标指针指向超链接的显示文本或图片时,将变成手形。8.5Dreamweaver基本操作8.5.7创建表格表格是用于在HTML页上显示表格式数据以及对文本和图形进行布局的强有力的工具。表格可以实现两方面功能:⑴用来展示文字或图像等内容,可以把相互关联的信息集中定位,排列更有序;⑵用来实现版面布局,便网页更规范、更美观。8.5Dreamweaver基本操作8.5.7创建表格表格基本操作:⑴创建表格;⑵表格的选取;⑶拆分合并表格;⑷用表格规划页面结构。(操作演示)

8.5Dreamweaver基本操作8.5.8添加背景音乐<bgsound>标签在网页中添加背景音乐。共有五个属性:Balance:是设置音乐的左右均衡;Delay:是进行播放延时的设置;Loop:

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论