网页设计基础-文本格式与超链接

合集下载

《网页设计基础》PPT课件

1.4 建立网站的基本流程
图1-2所示的是一个网站的完整制作流程.
确定主题策划与准备来自收集资料与素材规划网站结构
图
-
1
设计网页版式
2
确定网站结构
网
站
制作阶段
制作网页元素
的
制
插入元件与排版
作流
上传网站
程
后期工作
维护与更新
1.4.1 确定主题
网站的主题也就是网站的题材, 是网站设计首先遇到的问题.
〔2〕利用Fireworks修改图像非常方便.
〔3〕Fireworks无需借助其他工具就可以完成将一个图像转化为网页元素的全过程.
〔4〕Fireworks具有文件导出功能.
1.3.2 Flash
Flash是Macromedia公司开发的用于矢量图形编辑和动画创作的专业软件,它是一种交互式动画设计工具,用它可以将音乐、声效、动画以及富有新意的界面融合在一起,以制作出高品质的网页动态效果.
网站的定位要小,内容要精.
网站的题材最好选自己擅长或者喜爱的内容.
网站名称,是网站设计的一部分,而且是一个关键的要素,和现实生活中一样,网站名称是否正气、
1.4.2 搜集资料 1.4.3 网站的整体规划
进行网站的整体规划也就是组织网站的内容并设计其结构. 1.4.4 网页设计与制作
1．静态网页的设计与制作
Dreamweaver是 Macromedia公司推出的一款大众化的网页制作软件,它具有可视化编辑界面,用户不必编写复杂的HTML源代码就可以生成跨平台、跨浏览器的网页,不仅适合于专业网页编辑人员的需要, 同时也容易被业余网页制作人员所掌握.
1.2.3 FrontPage

网页设计超链接三个知识点

A、超链接<a>标签<a></a>是对标签，里面必须有属性<a href=“…”></a>，href的全称是h yptertext ref erence（超文本索引），其值可以是网页文件（.html）、图片（.jpeg, .gif, .png）、多媒体（.mp3, .mp4）、可携带文档格式（.pdf）以及一些其他类型的文档（.doc, .ppt, .xls, .rar, .zip等），前面网页文件、图片、多媒体与可携带文档都可以在浏览器中直接打开，后面的其他文档则会通过下载文件的形式下载下来。

B、用<a>标签来做“锚记链接”的步骤：1、首先你需要有一个“导航”，导航我们一般用列表标签来做，对里面的列表添加a标签，不同的是这个a标签的href里是#和一个名字，#是当前页面的意思，也就是定位到当前页面的某个位置，比如说：<ul><a href=“#1”><li>…</li></a><li>…</li><li>…</li></ul>2、定义一个超链接的位置，作为空位置可以用p标签或者其他常用标签来代替，该超链接需要添加一个name属性，比如说：（这里不需要#咯）<a name=“1> 这样就实现了按ul中的a标签，页面自动定义到网页中某个位置的作用。

C、音频与视频标签这两个都是对标签，音频audio，视频video，常用属性有src（source来源）, autoplay（自动播放）, controls（控件）, loop（循环播放），一般写作：<audio src=“…”controls=“controls”autoplay=“autoplay”loop=“loop”></audio>这里只有src是必须的，其他都可以去掉，根据自己需要来写，例如不要显示控件就把controls=“controls”去掉。

网页制作基础知识

4．制作工具的选择
可使用FrontPage、DreamWeaver等网页制作软件。在本案例中，将使用 DreamWeaver MX进行“网页制作学习园地”网站的创建。
1.2 理论知识
1.2.1 HTML语言
在Web的发展历史中，HTML技术是优秀而核心的Web技术之一。目前计算机上包含互联网在内的大部分应用程序在交互操作上的核心原理都来自于HTML的链接设计思想。
<h#>...</h#> ... ... ... ... ... <tt>...</tt> <cite>...</cite>
...
<address>...</address> ... <pre>...</pre>



设置文字的颜色
2 . 文本样式标记
文本样式标记用于设置网页中文字格式化为特殊的形式，如加粗、倾斜等。
文本样式标记如下表：
标记说明
定义标题级别，黑体字显示。"#"=1～6。<h1>显示的字号最大、<h6>最小。设置粗体字设置斜体字设置下划线设置文本为上标格式设置文本为下标格式设置打字机风格字体的文本以引用或参考的形式格式化文本，通常显示为斜体。

网页设计基础-1

网页设计中的ppi设置
基础篇Biblioteka 1.2.2 浏览器浏览器是指可以显示网页服务器或文件系统的HMTL内容，并让用户与这些文件交互的一种软件。常用的浏览器有Chrome,IE，Safari，火狐，UC等。用户可以根据自己的喜好及浏览器特性来选择使用。
从左至右分别是Chrome,IE，Safari，火狐，UC浏览器
IE浏览器比Chrome展示的内容略少，信息显示的更大；然后，细节上IE 浏览器下的字体较大且颜色为黑色、蓝色，广告区域的文字信息置于图片之下，菜单栏高度较高；再然后，IE浏览器头部的高度略要低于 Chrome浏览器，这样会导致在浏览器容器内看到的一屏信息的高度会
更高。
不同浏览器的头部高度不一
基础篇
基础篇
3.增值服务收费增值服务收费模式是指基础服务功能免费，高级服务功能收费。这种模式常见于一些社交网站的会员制度及游戏网站中的道具。如在QQ本身免费，但是你要想享受更多服务就得付费升级会员。
基础篇
4.直销模式直销模式是利用互联网平台本身来卖自营商品，这种模式实际上就是减少中间环节，把商品直接销售到用户手中。典型方式如当当网的自
基础篇
1.1.1 网站的基本概念
网页是以提供人机交流便利为目的的中间媒体。它是超文本标记的语言格式（.html或.htm）,是一种可以在WWW（World Wide Web的缩写）网上传输，经由网址（URL）被浏览器识别并
翻译成页面显示出来的文件。
网站是由多个网页用超链接的方式组成的有机整体。网站被储存在指定的网站空间（服务器或虚拟主机），通过域名（网址）进行访问。一个网站至少包含一个网页，上不封顶。
聚美优品网，专注于女性化妆品正品折扣网店，具有强烈的产品特色和专业性。在设计电子商务类网站时，要充分考虑到网站有高质量且丰富的内容，更新及时，网站

第5章超链接

5.2.3 外部链接
外部链接指跳转到当前网站外部，与其它网站中页面或其它元素之间的链接关系。外部链接的URL地址一般要用绝对路径。
<a href=“http://网址”>
5.2.3 外部链接
表5-2 常用的URL格式
服务 URL格式
ftp://192.168.0.1 news:// mailto:abc@
5.2.1 设置超链接路径
3.根路径
是指从站点的根文件夹到文档的路径。站点根目录相对路径以一个正斜杠开始，该正斜杠表示站点根文件夹。用于网站的内部链接，不建议使用。
当一个站点放置在几个服务器上或一个服务器上放置了几个站点时，可以使用根路径。
5.2.1 设置超链接路径
链接本地机器上的文件时，应该使用相对路径还是绝对路径？在绝大多数情况下使用相对路径比较好，例如，用绝对路径定义了链接，当把文件夹改名或者移动之后，那么所有的链接都要失败，这样就必须对你的所有html文件的链接进行重新编排，而一旦将此文件夹移到网络服务器上时，需要重新改动的地方就更多了，那是一件很麻烦的事情。而使用相对路径，不仅在本地机器环境下适合，就是上传到网络或其他系统下也不需要进行多少更改就能准确链接。
5.2.1 设置超链接路径
所需要的所有信息。绝对路径是指链接文件的完整路径，包括完整的协议名称、主机名称、文件夹名称和文件名称。
用于网站的外部链接。
如果要链接站点外远程服务器上的网页或图像等文件，必须使用绝对路径进行链接，即使站点移动至其他位置也不会出现断链现象。
带下划线的蓝色文本
5.2.1 设置超链接路径
每一个文件都有自己的存放位置和路径，理解一个文件到要链接的那个文件之间的路径关系是创建链接的根本。

HTML（超文本标记语言）是制作网页的基础HTML标记是HTML...

第1章HTML基础HTML(超文本标记语言)是制作网页的基础。

HTML标记是HTML的核心与基础，用于修饰、设置HTML文件的内容及格式。

一个HTML文件中包含了所有将显示在网页上的文字信息。

其中也包括对浏览器的一些指示，如文字应放置在何处，显示模式如何等。

如果还有一些图片、动画、声音或是任何其他形式的资源，HTML文件也会告诉浏览器到哪里去查找它们，以及它们将放置在网页中的什么位置。

教学目标通过对本章的学习，读者应了解和掌握HTML的各种标记和语法，并能够使用HTML 设计简单的静态网页。

教学重点与难点●使用HTML设计静态网页●编辑网页文本格式●创建超链接●使用表格●使用列表1.1 网页基础知识Internet是从Interconnected Networks延伸而来的，是跨国界的网络。

Internet把世界各地数以千万计的计算机和传输线路连接在一起构成一个网络。

通过它可以交换信息、共享资源，并以此为基础实现各种计算机通信应用项目。

在Internet中，网页是它的重要组成部分，本节首先介绍一些与网页相关的名词和概念。

1.1.1 万维网——WWWWWW(World Wide Web)即环球信息网，也可以称为Web，中文名字为“万维网”。

用户在使用浏览器来访问Web的过程中，无须关心一些技术性的细节即可得到丰富的信息资料。

WWW 是Internet上发展最快和目前使用最广泛的一种服务。

ASP动态网站开发教程• 2 •简单的说，WWW是漫游Internet网的工具，它把Internet上不同地点的相关信息聚集起来，通过WWW浏览器(比如IE，Internet Explorer)检索，无论用户所需的信息在什么地方，只要浏览器为用户检索到之后，就可以将这些信息(文字、图片、动画、声音等)“提取”到用户的计算机屏幕上。

1.1.2 超文本传输协议——HTTPHTTP(HyperText Transfer Protocol)即超文本传输协议，它是WWW服务器上使用的最主要协议。

网页-实验目录2

实训一站点的资源管理【实训目标】1、掌握站点的创建方法2、掌握站点的上传方法3、掌握空间站点的管理方法【实训内容】1、站点的创建、2、申请网上个人主页空间3、上传、下载站点4、个人空间管理实训二HTML基础与文本格式【实训目标】1、了解HTML的作用及其写法和规则2、掌握常见的HTML语句3、会在代码窗口编写简单的html语句，并输出生成页面【实训内容】用记事本或者是通过Dreamweaver代码窗口编写代码完成以下实训：1．用HTML编写一个简单的基本页面2．创建一个使用图像作为背景图案的网页3．创建一个页面，对文本进行设置4. 插入背景音乐实验三表格与超链接【实训目标】1、会利用表格对网页进行布局2、理解和掌握超链接的含义3、掌握几种超链接的创建方法4、掌握热区的创建和使用方法【实训内容】运用表格的嵌套等技术对所给的图片和文字进行定位。

创建网页文本链接；创建网页图片链接；创建电子邮件链接；创建脚本链接；创建锚点链接；给链接添加提示及管理链接。

实训四表单【实训目标】1、掌握表单项目的创建方法【实训内容】1、制作一个用户注册页面实训五框架【实训目标】会利用框架网页进行布局掌握框架网页的创建方法；掌握保存方法；掌握框架网页的编辑方法。

【实训内容】1、制作一个框架集网页，要求整个框架集包含3个页面2、制作一个能在页面内指定位置打开网页的页面实训六层与行为【实训目标】1、掌握插入层与绘制层的方法3、掌握层与行为特效的使用方法【实训内容】1、绘制层2、利用行为特效控制层的显示与隐藏效果实训七Fireworks 实例制作【实训目标】1、熟练认识与掌握fireworks矢量工具的使用2、掌握矢量图形与位图的区别3、理解和掌握路径与填充的特点4、掌握路径组合的特点和方式【实训内容】1、十字梅花按钮效果2、文字曲线动画3、Loading实例制作4、冬之韵逐字动画《网页设计》综合作业一、实训目的1.了解各类网站的制作方法。

网页设计实用教程第4章超链接.

(6) 一个图像热区链接创建完成，单击【保存】按钮，按 F12按钮预览网页。
4.2.5
创建锚链接
超链接除了可以链接到文件外，还可以链接到本页中的任意位置，这种链接方式称为“锚链接”。当一个网页的主题或文字较多时，为了方便用户浏览，可以在网页内的某些分项内容上建立多个标记点，将超链接指定到这些标记点上，使用户能快速找到要阅读的内容。我们将这些标记点称为锚点（Anchor）
图4-3 电子邮件链接对话框
4.2.3
创建E-mail链接
(3) 对话框中“文本”指在网页上显示的文本， “ E-mail”指需要链接到的邮箱地址，这里输入 “wysj@” ，单击【确定】按钮完成Email链接的设置。也可以在属性面板的“链接”文本框中输入 “mailto:”和邮箱地址，这里是“mailto: wysj@”。 (4) 一个E-mail链接创建完成，单击【保存】按钮，按 F12按钮预览网页。
4.2典例剖析—信息导航列表
本节将通过建立一个信息导航网页的实例来讲解超链接的使用。本节操作任务：（1）在“Mystuhome”下建立文件夹“超链接”，在 “超链接”文件夹下建立网页“index.html”和文件夹“image” （2）在网页中创建链接。（3）在网页中创建E-mail链接。（4）在网页中制作图像映射，设置图像热点的超链接。
4.4
习题
三、上机实践 1. 在超链接文件夹下创建“名站收藏..html”网页文档，在网页中列举自己经常访问的网站名称，为他们建立到网站网址的超链接。 2. 在超链接文件夹下创建“相册..html”网页文档，在网页中插入图片，在图片上建立热区图像链接。 3. 为网页“相册.html”建立到底端和到顶端的锚链接。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

第2章文本格式与超链接
（1）段落格式
本章目标
•掌握段落标记符p、断行标记符br、标题标记符h1~h6、水平线标记符hr的用法。

•理解物理字符样式和逻辑字符样式。

•掌握使用ol/ul 和 li 标记符创建列表。

•掌握使用 a 标记符创建页面链接和锚点链接。

段落格式
•段落格式是指针对 HTML 文档中的段落所设置的格式，例如段落的对齐方式。

•还有哪些段落格式？
•首行缩进是不是段落格式？段间距呢？
分段标记符
•分段标记符用于将文档划分为段落，标记为。

•换行标记符用于在文档中强制断行，标记为一个单独的 。

标题样式
•hn 标记符 = 各级标题
•n 是1至6的数字；h1表示最大的标题，h6表示最小的标题。

•注意：使用标题时应按照其逻辑含义，而不是按照其显示效果！
添加水平线
•添加水平线的标记符为hr，它包括以下属性：–size （粗细）
–width （长度）
–noshade （实线）
align 属性
•align 属性用于设置段落的对齐格式，取值：right（右对齐）、left（左对齐）、center（居中对齐）和 justify（两端对齐）。

•align 属性可应用于多种标记符，例如p、hn（标题标记符）、hr 等。

•注意：在学习了CSS技术之后应避免使用align属性。

第2章文本格式与超链接（2）字体格式与列表
字体格式
•字体格式/字符格式是指针对段落中的部分文字所设置的格式，通常包括：字体样式、字号、文字颜色等。

•注意：字体格式属于显示效果的设置，因此应主要使用CSS技术来实现。

物理字符样式
•物理字符样式是指标记符本身说明了所修饰的效果。

•常用物理字符样式标记符有：–黑体标记
–斜体标记
–下划线标记
逻辑字符样式
•逻辑字符样式是指标记符本身说明了所修饰效果的逻辑含义，例如address标记符。

•常用逻辑字符样式：
–
–
–<code></code>
•有序列表是一种在表的各项前显示有数字或字母的缩排列表，表示一种顺序的关系。

•定义有序列表的语法如下：
<ol type=”1|A|a|I|i”>
<li>List item 1</li>
<li>List item 2</li>
</ol>
•属性type用来设置数字序列样式，取值为：1、A、a、I、i。

•无序列表是一种在表的各项前显示有特殊项目符号的缩排列表，表示并列关系。

•定义无序列表的语法如下：
<ul type=”disc|circle|square”>
<li>List item 1</li>
<li>List item 2</li>
</ul>
文本元素总结
块元素
•h#
•p
•pre •address •blockquote 行内元素•em •strong •sub
•sup
换行
•br 通用元素•div •span
列表•ul
•ol
•li
展示元素•b
•i
•u •small •hr
核心文档结构元素
•h1~h3
•p
•ul, ol, li
谢谢！
第2章文本格式与超链接
（3）超链接
超链接基础
• URL（Universal Resources Locator）用于定位Web上的文档信息。

•一个 URL 包括 3 部分：协议、计算机地址、文件路径。

•协议：//计算机/文件路径
超链接基础——绝对URL
•绝对URL是指资源的完整地址，包括所有3个部分，即：•协议：//计算机/文档名
•相对URL是指Internet上资源相对于当前页面的地址，它包含从当前页面指向目标页面位置的路径。

•使用相对URL的好处：易于维护
•使用相对URL时，经常使用两个与DOS类似的符号：–句点（.）表示当前目录
–双重句点（..）表示当前目录的上一级目录
•根据超链接的目标文件不同，分为：–网页之间的超链接
–页面内的超链接
–文件下载超链接
–Email超链接
–空超链接
•根据超链接源对象的不同，分为：–文本超链接
–图像超链接（包括图像映射）
–对象超链接（例如Flash、Java小程序）•根据超链接实现方式的不同，分为：–HTML超链接
–JavaScript超链接
–对象超链接
创建超链接
• a 标记符用于创建超链接，href 属性用于指定超链接的目标文件。

•内部网页超链接：<a href=wow.htm> 关于魔兽世界</a>
•外部网页超链接：
•使用页面内的超链接，首先需要定义锚点，然后在超链接中指向该锚点。

定义锚点应使用<a name=xxx></a>•指向锚点的超链接为：<a href=#锚点名称>link</a>
•指向其他页面内锚点的超链接：<a href = 页面的URL#该文件中的锚点>link</a>
•<a href= # >blank link</a>
•<a href="图2-5.htm#yyjb">夜雨寄北</a>
创建超链接——文件下载
•当超链接目标为浏览器不能识别的文件格式时，那么就自动生成了文件下载链接。

•<a href=xxx.zip>下载</a>
创建超链接——Email链接
•<a href=mailto:i@>Email</a>•控制命令：
–?subject= 设置信件主题
–?cc= 设置抄送人
–?bcc= 设置密件抄送人
–& 组合多个控制命令
谢谢！
第2章文本格式与超链接
（4）综合实例
站点目录设计
谢谢！。