第6章网页设计基础_第1页
第6章网页设计基础_第2页
第6章网页设计基础_第3页
第6章网页设计基础_第4页
第6章网页设计基础_第5页
已阅读5页，还剩100页未读， 继续免费阅读

下载本文档

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

文档简介

计算机应用基础网址：00主讲人:

ComputerBaseSeriesCourse第6章网页设计基础第6章网页设计基础

本章的主要内容：6.1网页设计的基本概念6.2Dreamweaver工具的使用6.3站点的发布与管理6.1网页设计的基本概念6.1.1网页与HTML网站（WebSite）是各种各样网页的集合有的网站内容众多，如新浪、搜狐等门户网站；有个网站只有几个页面，如个人网站。在构成网站的众多网页中，有一个页面比较特殊，称为首页（HomePage）。例如，当浏览者输入搜狐网站地址“”后出现在第一个页面，即sohu网站的首页。浏览者可以根据首页的导航进入其他页面，了解更多内容。网页（WebPage）实际上是一个文件网页经由网址（URL）来识别与存取。当浏览者输入一个网址或单击某个链接，在浏览器中显示出来的就是一个网页。网页中主要组成元素1.网页与网页文件网页是WWW网站提供服务的主要形式，是通过浏览器在WWW上所看到的每一个画面。HTML（HypertextMarkupLanguage）是一种超文本标记语言，用来描述万维网上的超文本文件。所谓“超文本”，是指页面内可以包含图像、链接、多媒体对象、程序等非文本元素。所谓“标记”，是指它不是程序语言，而是由文字和标签组合而成。HTML文件是纯文本文件，可以由任意文本编辑器编写，文件的扩展名为“html”。一个网页就是一个HTML文件。（1）HTML的结构与常用标签HTML文件主要分为文档头和文档体两部分，一般使用三对标签：<HTML>

<HEAD>头部信息

</HEAD>

<BODY>文档主体，正文部分

</BODY></HTML><HTML>

</HTML>在最外层，表示是HTML文档<HEAD>

</HEAD>之间包括文档的头部信息，如<title></title>文档总标题等<BODY>

</BODY>标记正文内容的开始应注意标签的配对使用HTML文档中标签的用法<HTML><HEAD>

<TITLE>一个HTML的例子</TITLE></HEAD><BODY><H1>HTML很容易掌握</H1><P>这是第一个段落。虽然很短，但它仍是一个段落。</P><P>这是第二个段落。</P></BODY></HTML>HTML文档开始HTML文档中标签的用法<HTML><HEAD>

<TITLE>一个HTML的例子</TITLE></HEAD><BODY><H1>HTML很容易掌握</H1><P>这是第一个段落。虽然很短，但它仍是一个段落。</P><P>这是第二个段落。</P></BODY></HTML>首部开始HTML文档中标签的用法

<HTML><HEAD>

<TITLE>一个HTML的例子</TITLE></HEAD><BODY><H1>HTML很容易掌握</H1><P>这是第一个段落。虽然很短，但它仍是一个段落。</P><P>这是第二个段落。</P></BODY></HTML>标题HTML文档中标签的用法

<HTML><HEAD>

<TITLE>一个HTML的例子</TITLE></HEAD><BODY><H1>HTML很容易掌握</H1><P>这是第一个段落。虽然很短，但它仍是一个段落。</P><P>这是第二个段落。</P></BODY></HTML>首部结束HTML文档中标签的用法

<HTML><HEAD>

<TITLE>一个HTML的例子</TITLE></HEAD><BODY><H1>HTML很容易掌握</H1><P>这是第一个段落。虽然很短，但它仍是一个段落。</P><P>这是第二个段落。</P></BODY></HTML>主体开始HTML文档中标签的用法

<HTML><HEAD>

<TITLE>一个HTML的例子</TITLE></HEAD><BODY><H1>HTML很容易掌握</H1><P>这是第一个段落。虽然很短，但它仍是一个段落。</P><P>这是第二个段落。</P></BODY></HTML>1

级标题<HTML><HEAD>

<TITLE>一个HTML的例子</TITLE></HEAD><BODY><H1>HTML很容易掌握</H1><P>这是第一个段落。虽然很短，但它仍是一个段落。</P><P>这是第二个段落。</P></BODY></HTML>HTML文档中标签的用法

第一个段落<HTML><HEAD>

<TITLE>一个HTML的例子</TITLE></HEAD><BODY><H1>HTML很容易掌握</H1><P>这是第一个段落。虽然很短，但它仍是一个段落。</P><P>这是第二个段落。</P></BODY></HTML>HTML文档中标签的用法

第二个段落HTML文档中标签的用法

<HTML><HEAD>

<TITLE>一个HTML的例子</TITLE></HEAD><BODY><H1>HTML很容易掌握</H1><P>这是第一个段落。虽然很短，但它仍是一个段落。</P><P>这是第二个段落。</P></BODY></HTML>主体结束HTML文档中标签的用法

<HTML><HEAD>

<TITLE>一个HTML的例子</TITLE></HEAD><BODY><H1>HTML很容易掌握</H1><P>这是第一个段落。虽然很短，但它仍是一个段落。</P><P>这是第二个段落。</P></BODY></HTML>HTML文档结束(2)HTML文件的编写与保存记事本文件的扩展名改为“.html”或“.htm”网页制作工具的代码视图3.

网页制作工具Dreamweaver:可视化网页制作工具FrontPage:表单式网页制作工具AdobePagemile:框架、表单和ImageMap图像的网页制作工具ClarisHomePage:动态网页快速制作工具还有：简单的文档编辑工具：Windows下的记事本、DOS下的Editor编辑器IBMWebsphere集成开发环境中的Web应用工具……6.1.2网页设计的流程1.前期策划2.创建站点3.创建主页和其他网页4.网页设计的版面布局5.添加网页基本元素(1)文本(2)特殊字符(3)图像(4)动画、音视频……6.创建网页超级链接7.利用表单增加交互布局草图21网页布局实例1

“厂”字型结构的特点是内容清晰，一目了然。网页最顶端是徽标和图片（广告）栏，下半部分的左边是导航链接，右边是信息发布区。这种结构非常常见。22网页布局实例2

“同”字型结构的特点是超链接多、信息量大。网站的顶端是徽标和图片（广告）栏，下部分分为三列，或者更多。两边的两列区域比较小，一般是导航超链接和小型图片广告等，中间是网站的主要内容，最下面是网站的版权信息等。23网页布局实例3

标题正文型结构的顶端是网站标识和标题，下面是网页正文。内容非常简单。24网页布局实例4

分栏型结构，这种结构一般分为左右（或上下）两栏，也有的分为多栏。一般将导航链接与正文放在不同的栏中。这样打开新的网页，导航链接栏的内容不会发生变化。25网页布局实例5

Flash型结构采用Flash技术来完成，其视觉效果和听觉效果与传统网页不同，往往能够给浏览者以极大的冲击。这种网页逐渐被年轻人所喜爱。26网页布局实例6

封面型结构，往往首先看到的是一幅图片或动画，在图片或动画的下面有一个进入下一级网页的超链接提示文字。其中图片或动画可以用Flash来制作，与Flash型不同，这种结构并不是在Flash中完成的，而是在网页制作软件中完成的。网页设计原则(1)网页布局的原则：主次分明、中心突出大小搭配、相互呼应图文并茂、相得益彰(2)网页布局的技术表格布局框架布局层叠样式表让各种元素和谐、美观地呈现要考虑到用户下载的时间遵循对比、统一、平衡、节奏的原则6.2Dreamweaver工具的使用DreamweaverCS4AdobeDreamweaverCS4是一种可视化网页制作工具（“所见即所得”），它也是目前最常用的网页制作工具之一。Dreamweaver对于DHTML(动态网页)的支持非常好，可以制作出许多精彩的互动页面特效。新网页三剑客是指Dreamweaver、Flash和Photoshop。6.2.1Dreamweaver的界面

菜单栏面板组文档窗口文档工具栏标签选择器属性面板“应用程序”工具栏

“插入”工具栏共有8个选项卡，在网页编辑的过程中，可通过单击面板上的按钮来为网页添加相应的元素。

“插入”工具栏有两个显示模式，即工具栏模式和面板模式。(1)插入工具栏面板模式（2）“文档”工具栏代码视图（html、JavaScript手工编码）设计视图（所见即所得）拆分视图布局、扩展和站点等网页制作中常用命令（3）“应用程序”工具栏3.文档编辑区主要工作区域4.“属性”面板编辑查看各对象的属性5.面板组快速完成相关命令6.2.2

站点的新建与管理

在Dreamweaver中，“站点”是一个文件夹，用于存放网站的所有图像、多媒体、网页等文件。站点的结构本地文件夹远程文件夹测试服务器文件夹2.站点的建立-方式1

在Dreamweaver工作窗口中，执行“站点”/“新建站点”菜单命令，打开“未命名站点1的站点定义为”对话框，选用“高级”标签。1.输入新站点的名称2.本地根文件夹单击“浏览”按钮，选择站点位置（或：直接输入路径，注意路径的正确表达方式）3.选择“启用缓存”4.按“确定”按钮5.在“文件”面板中看到该站点的文件（绿色）2.站点的建立-方式1利用文件面板1.选择“管理站点”2.选择“新建”2.站点的建立-方式23.站点的管理（1）

打开“管理站点”对话框（2）

切换站点选择站点(3)编辑站点定义站点修改站点信息(4)复制站点(5)删除站点仅删除定义的站点，该文件夹依然存在硬盘(6)导入或导出站点站点定义文件，.ste(7)站点的查看方式6.2.3网页元素的添加与处理在网站中添加网页选择“文件”/“新建”命令，打开“新建文档”对话框选择“空白页”/“HTML”，单击“创建”，就建立了一个名为“untitled-1.htm”的网页（可直接给网页重命名）。用同样的方法可以建立多个网页。网页的若干问题网页中内容的导入文件\导入（在打开的网页中直接导入word或excel等文档，可省略复制的动作）站点中素材的复制（“导入”——不恰当的提法）“文件”面板的编辑快捷菜单利用Windows的资源管理器网页的打开和保存（网站的保存？）打开：文件”/“打开”命令直接在“文件”面板中选择相应文件保存：“文件”/“保存”或“另存为”命令Dreamweaver保存网页文件的扩展名默认为html注意：一般而言，网页应保存在网站中，不能随意保存在任何位置或独个保存在桌面上。网站中的路径、文件名不能使用中文，否则影响发布。网页文件名与网页标题具有不同的含义网页的若干问题1.网页页面属性的设置“属性”\“页面属性”，可对网页的标题、背景图像、背景颜色、文本颜色、链接颜色、页边距等外观进行整体控制。（1）输入文本和空格空格半角状态，只能输入一个空格编辑\首选参数\常规，允许多个连续的空格按<Ctrl>+<Shift>+<SpaceBar>组合键，可多个连续的空格全角状态，可连续输入空格换行回车（硬回车）新段落，行距大Shift+enter（软回车）本段落，行距小2.文本操作p323（3）文本属性设置文本的格式、粗体、斜体、项目列表、编号列表、文本缩进、文本超链接等设置。添加中文字体：注意：Dreamweaver提供的默认字体中没有中文字体，所以在设置字体之前，应该先将中文字体添加到“属性面板”字体下拉列表框中。2.文本操作1.“属性面板”\“字体”\“编辑字体列表”

,

2.选择“可用字体”栏中的中文字体，“选定”；字体出现在“选择的字体”栏中，“确定”，字体被加入。

3.回到“属性面板”选择已添加的字体。（4）添加特殊字符执行“插入/HTML/特殊字符”菜单命令2.文本操作(5)添加日期和水平线p324插入\日期（格式）插入水平线插入\HTML\水平线“HTML”插入工具栏的“水平线”按钮利用“属性”面板和“标签”面板“属性”选项卡设置水平线的有关属性标签检查器/属性/浏览器特定的，在浏览器才能观看水平线的颜色效果2.文本操作（6）设置列表编号列表：项目列表：

2.文本操作用属性面板中对应的按钮编号列表项目列表列表属性设置：单击“属性”面板中的“列表项目”或者执行“格式/列表/属性”菜单命令，打开“列表属性”对话框进行设置。列表项目不相邻的段落如何添加编号列表？段落的格式应用菜单或HTML属性面板来设置：缩进突出段落格式：标题1、标题2……对齐列表2.文本操作字体的格式选择文本，CSS属性面板，默认字体，加粗，倾斜若选择其他字体，则要新建CSS样式2.文本操作3.图像操作新建一个CSS规则编辑字体列表定义CSS规则类型背景区块方框边框列表定位扩展3.图像操作

因特网上应用最广泛的图片格式有两种：GIF文件和JPEG文件。JPG/JPEGGIF色彩真彩色16色、256色特殊功能无透明背景、动画压缩是否有损失有损压缩无损压缩适合情景颜色丰富，有连续的色调，一般表现真实的事物颜色有限，主要以漫画图案或线条为主。一般表现建筑结构图或手绘图。方法1：光标定位插入图像的位置，选择“插入/图像”命令，打开“选择图像源文件”对话框。方法2：使用“文件”面板，选择图像文件，直接拖曳到网页中。（1）插入图像输入替换文本（2）图像的属性设置选择插入的图像，在“属性”面板中进行设置。可设置图像的超链接热点工具沿图像的边添加边距设置图像边框的宽度（3）插入鼠标经过图像“鼠标经过图像”是指在浏览器中，当鼠标指针移动到图像上时，图像随即变成另外一幅图像，当鼠标指针移开时，又恢复到第一幅图像。执行“插入/图像对象/鼠标经过图像”菜单命令。可直接输入超链接地址4.CSS样式p327CSS（CascadingStyleSheet）称为“层叠样式表”，简称样式表。CSS是一组格式设置规则，用于控制页面元素的外观。对于设计者来说它是一个非常灵活的工具，不必再把繁杂的格式定义编写在文档结构中，可以将所有关于文档的格式和内容分离，减少工作量。CSS在当前的网页设计中已经成为不可缺少的技术。例：建立CSS规则“.a1”单击文本属性面板上的按钮，在“目标规则”下拉列表中选择“<新CSS规则>”，单击按钮，出现“新建CSS规则”对话框CSS的定义：p328名称以“.”开头单击“确定”新CSS样式选择器类型选择器名称规则定义定义文本为宋体、大小18、加粗、颜色#F00、下划线进入“.a1的CSS规则定义”对话框CSS的应用：CSS规则定义后，可以应用到网页的任何文本内容。方法如下：选择需要应用的文本，单击属性面板上的按钮，在“类”的下拉列表中选择“.a1”规则，此时可以看到所选文字采用了“.a1”定义的格式。CSS的编辑、删除和应用编辑选择CSS面板，选择某一样式，即对该样式编辑删除（不应用）选择文本，“删除类”（样式依然存在，仅该文本不引用此样式）应用选择HTML面板选择文本，选择类中的样式名使用格式菜单，对Css样式的灵活运用新建或编辑不选择任何文本，运用“格式”菜单的“css样式”，新建或编辑样式应用选择文本，运用“格式”菜单的“css样式”中的某一样式，即应用样式删除（不应用）选择文本，运用“格式”菜单的“css样式”中的“无”，即删除样式5.多媒体操作（1）插入Flash动画执行“插入/媒体/SWF”菜单命令，打开“选择文件”对话框swf文件是Flash预先制作好的。Flash属性背景透明背景颜色循环播放……5.多媒体操作（2）添加音频执行“插入/媒体/插件”菜单命令，在“选择文件”对话框中选择声音文件。插入后，在文档窗口显示如下图1；在浏览网页时（允许阻止的内容），可看到如下图2所示的播放按钮。图1图2打开图1的快捷菜单，选择“编辑标签”命令，在打开的“标签编辑器”中设置音频的属性。音频的属性利用插件,可控制播放背景音乐，则隐藏插件插件的属性循环播放、隐藏与显示、……标签检查器音频的属性5.多媒体操作（3）添加视频执行“插入/媒体/FLV…”菜单命令，屏幕显示“插入FLV”对话框，可单击“浏览”按钮选择“FLV”文件。文档中显示如下，在浏览器中可以预览视频的播放效果。6.2.4网页中的超链接

超链接允许我们从自己的页面出发，直接指向因特网上存在的任何一个对象。可以是另一个网页，可以是同一网页的不同位置，还可以是一幅图像、一个文件。

按照链接的范围，超链接可以分为内部超链接、外部超链接、锚点超链接和路径链接。内部超链接是指打开的超链接对象在本网站中；外部超链接是指打开的超链接对象在其它网站中；锚记超链接可以链接到同一网页中的不同位置，也就是书签；外部超链接可链接到本地或网络上的文件夹或文件名。按照建立超链接的对象不同，可以分为文本超链接和图像超链接、Email超链接等。1.文本链接

我们在浏览网页的时候，常常会看到一些蓝色带下划线的文字，将鼠标指针移动到这些文字上时，鼠标指针变成手形，单击鼠标会打开另一个网页。这个链接就是一个文本超链接。

方法一：选取建立超链接的文本，执行“插入/超链级接”菜单命令，显示如下“超级链接”对话框单击“浏览”按钮选择连接目标选择网页打开的目标窗口＿Blank：在一个新的浏览器窗口中打开＿parent：在父框架中打开＿self:在网页所在的窗口或框架中打开，此为默认选项＿top：在浏览器窗口打开方法二：也可以利用“属性”面板建立文本超级连接

选取建立超链接的文本，单击“属性”面板中的“浏览文件”按钮，打开“选择文件”对话框，在“选择文件”对话框中，选择网页文件，单击“确认”，完成操作。方法三：选取建立超链接的文本，使用“指向文件”按钮，拖曳鼠标到“文件”面板中的链接文件也可以方便地建立超链接。选择目标窗口指向文件“浏览文件”按钮2.图像和图像热区链接利用热点区域的设置，完成同一张图像中不同部位链接到不同的对象。可以在图像上指定某个区域建立超级连接。方法是先绘制热点区域，再为该区域建立链接。

利用图像的“属性”面板进行“热点”的设置。（1）图像链接

创建图像超级链接的方法与建立文本超链接相似，即先选中图片，然后进行超级链接设置。（2）图像热区链接热点工具热点区域选择一个热点工具绘制热点区域提供链接文件3.锚记（书签）链接网页内容长度超过屏幕可容纳的范围时,如果不使用滚动条，只能看到其中的一部分，可以在适当位置插入一个“锚记”，利用锚记链接功能，可创建跳转到页面指定位置的链接。（1）定义锚记鼠标定位在需要插入锚记的位置，执行“插入/命名锚记”菜单命令，在“命名锚记”对话框中输入锚记的名称，单击“确定”，在该位置上显示一个标记。选取要创建链接的对象，在“属性面板”的“链接”框中输入锚记名，这就完成了一个锚记超链接。预览网页时，点击该超级连接会跳转到标记所在的位置。（2）建立锚记链接输入：“#锚记名”4.

Email链接

建立Email超链接后，浏览者只需单击该超链接，就可以打开电子邮件编写软件，并且自动输入电子邮件地址，非常方便。

选取要创建链接的文本，执行“插入/电子邮件链接”菜单命令，打开“电子邮件链接”对话框，在E-mail框中输入电子邮件地址，单击“确定”按钮。（1）利用菜单命令建立Email链接选取要创建链接的文本后，直接在“属性面板”的“链接”框中输入：“mailto:电子邮件地址

”，也可以达到同样的效果。（2）利用属性面板建立Email链接输入“mailto:Email地址”

除了可以将主页上的对象与网站中的网页链接起来以外，还可以与网站外的文件相连，甚至可以是因特网上的网站。选取建立超链接的文本或者图像，在“属性”面板的“链接”框中直接输入外部链接地址即可，如：5.外部链接输入:http://www.…………外部链接地址6.2.5网页的布局

网页的布局是决定网站美观与否的一个重要方面，通过合理的、有创意的布局，可以把文字、图像等内容完美地展现在浏览者面前。网页布局有很多方法，最基本的方法是利用表格和利用框架。1.利用表格布局网页表格在网页布局中的使用比较多，可以说表格是网页制作中重要的一个技巧，表格的引入使网页变得整齐和美观。用表格布局的网页（1）表格的创建

在网页中确定光标的位置，执行“插入/表格”菜单命令，显示“表格”对话框。表格宽度单位可以是像素或百分比。按像素定义的表格大小是固定的，而按百分比定义的表格，显示的宽度是浏览器宽度的百分比。边框粗细指表格线的宽度，当浏览器不显示出表格线时，将边框粗细设置为0。单元格边距（填充）指单元格内容与单元格边框线的距离。单元格间距确定相邻的单元格之间的距离。2.表格的基本操作（2）表格的属性设置创建表格后，可以在“属性”面板中对表格进行属性设置，可以改变创建时的参数。设置表格的对齐方式（3）表格的编辑选择“修改/表格”菜单命令，可以对表格的行、列、单元格等进行编辑。例如：插入行插入列合并单元格拆分单元格……（4）单元格的属性设置单元格是表格的最基本单位，单元格的属性在“属性”面板中进行设置。单元格内容的对齐方式单元格中的内容粗体并居中防止换行单元格的宽度和高度3.框架的创建及使用如果将一个页面拓展为多个页面，则可以利用框架和框架集来实现。框架集把浏览器窗口划分为若干个区域，每个区域定义为一个框架，在此框架中可以显示不同的网页，从而实现在同一页面中显示多个网页文档的内容。用框架布局的网页（1）创建和保存框架执行“插入/HTML/框架”菜单命令，选择一种框架集。例如：选择框架“对齐上缘”后，建立了一个框架集。光标置于某一框架，选择菜单“文件/在框架中打开”命令，则把事先制作好的网页指定到该对应的框架中。

选择框架集外框，执行“文件/保存框架页”菜单命令，完成框架集的保存。上框架TopFeame框架分割线主框架MainFeame（2）设置超级连接（3）框架面板选择菜单“窗口/框架”命令，可以打开框架面板。利用框架面板可以灵活地选取某个框架，从而对该框架进行属性设置。框架网页中超级连接的设置同普通网页超级连接的设置方法类似。在保存文件时，执行“文件/保存全部”菜单命令。（4）框架与框架集属性设置框架的属性分框架属性和框架集属性两部分。框架属性框架集属性6.2.6表单的使用p340

一个网站不仅需要各种供浏览者浏览的内容，而且还需要与浏览者进行交互的表单，例如：留言簿、会员申请表、问卷调查表等，都是通过表单来实现的。浏览者在表单对象中输入或选择相关的信息，然后提交到站点服务器，而服务器通过相应程序来进行处理，最后服务器作出回应并将信息发送回浏览者，从而达到了人站交流的目的。1.表单及表单属性（1）表单

在网页中添加表单对象，必须先创建表单（或称表单域），可通过单击“插入”面板的“表单”选项卡来插入。

单击“表单”标签，可以发现在网页中出现一个红色的虚线框，框中的区域称为表单域。此后所有的表单元素（例如：文本字段、文本区域、文件域等等）都要插入到这个红色虚线框中，这样所有的信息将一起得到处理。表单中需提交的内容都必须在同

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

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

最新文档

评论

0/150

提交评论