标记福州网站制作

第1章网页制作基础知识1.
1Dreamweaver简介在互联网技术和信息技术飞速发展的今天,人们获取信息的方式已经从桌面端转向移动端,人们可以更加有效地利用互联网资源学习和拓展知识.
目前,信息呈现的载体仍然以网站为主,它为受众提供各个领域的资讯和信息服务,同学们了解和掌握能用、够用和实用的一些Internet(互联网)基本知识和网页制作方法,对于充分利用互联网信息具有实用价值.
本章将介绍Internet的基本知识和DreamweaverCS6的功能与操作.
1.
1.
1基本概念1.
网站网站英文名为Website,是指在Internet上,使用通用语言制作的向外部发布特定内容的文件集合,其中网页是网站的主要组成部分,网站的第一个网页通常被称为主页或者首页.
网页英文名为Webpage,是一种文件,一般以.
htm和.
html为后缀.
网页上呈现的信息元素十分丰富,具体包括文本、图形、图像、声音、视频、动画和超链接等.
网页一般要通过浏览器进行阅读.
目前主流的浏览器有:IE、Chrome、Firefox等.
网站通常分为静态网站和动态网站.
静态网站是指将网页文件直接从服务器端传输到浏览器端,在此过程中浏览器端与服务器不发生交互,而不是指网页内容处于静止状态.
可以在静态网站中创建动态效果,比如GIF格式的动图、Flash动画、JavaScript脚本等.
静态网站通常用在网络带宽小、访问量比较大时使用.
动态网站是指网页文件在传输到浏览器端的过程中,需要与服务器端交互,通常是Web服务器与数据库之间相互访问并处理相关数据.
动态网站的特点是网站支持后台管理和维护,网站支持的功能比较多,如用户注册、管理用户、信息发布和数据审核功能等.
2.
HTMLHTML(HypertextMarkupLanguage,超文本标记语言)是网络中常用的一种用于制作超文本文档的标记语言.
当用户浏览具有HTML标记的网页时,浏览器会自动将标记解析成所规定的内容,将其呈现在屏幕上.
HTML语言有特定的语法规则,后面的内容将会做详细的讲解.
3.
HTTPHTTP(HypertextTransferProtocol,超文本传输协议)是负责浏览器端和服务器端之间建立相互沟通的渠道.
当在网络中传输一些超文本的信息时需要使用该协议,比如访问Internet上的网站时.
在浏览器中输入网址时,必须以"http://"开头,但是通常情况下,在浏览器中输入网址时,只输入域名也可以访问,那是因为浏览器有自动补全的功能.
4.
URLURL(UniformResourceLocator,统一资源定位器)是为查找Internet中的资源而提供的一种资源定位系统.
URL通常被称为网址,网址的格式由协议名、主机名、路径和文件名四部分组成,其格式为"协议名://主机名/路径和文件名",例如,http://www.
baidu.
com/5.
CSSCSS(CascadingStyleSheets,层叠样式表)是负责网页外观的一套格式规则,该规则可以实现网页结构与网页美化完全分离,这样可以使得网页内容相同,但网页外观完全不同,从而使网站轻松地实现更换皮肤的功能.
CSS文件还可以单独存放到一个位置,为整个网站提供调用和共享,从而提高网站设计与制作的效率.
6.
域名域名英文名为DomainName,通俗地讲,域名就是网站的门牌号,使其在网络中很容易被找到.
个人、企业、政府和非政府组织都可以在域名注册商处进行注册.
域名的命名有一定的规范,通常由字母a~z(不区分大小写)、数字0~9以及"-"".
"所构成的符号串和域名后缀所组成,域名按照级别通常可以分为顶级域名和二级域名两种.
顶级域名又称一级域名,它是由一个合法字符串+域名后缀组成,如"baidu.
com""163.
com"和"sina.
com",其中,"baidu""163"和"sina"都是合法字符串,而".
com"是域名后缀,这三个都是一级域名.
顶级域名按照性质可以分为:".
com"表示商业机构,".
net"表示网络服务商,".
org"表示非营利性组织,".
gov"表示政府部门,".
edu"表示教育机构.
也可以注册国家顶级域名,例如".
cn"表示中国域名,".
ca"表示加拿大域名等.
二级域名是在一级域名之下的域名,如"mp3.
baidu.
com""image.
163.
com"和"news.
sina.
com"都属于二级域名.
7.
云空间云空间英文名为CloudHosting,是指利用网络技术使多数台服务器协同工作,为用户提供大容量、高效率、多处理的收费网络服务.
1.
1.
2网页制作的相关软件1.
Flash网页动画制作软件Flash是目前网页矢量动画设计最流行的软件之一,有"网页三剑客"之一的美名.
Flash制作的动画占用存储空间较小,有利于在网络中传输.
从功能上讲,Flash工具是将图形、图像、声音和视频结为一体的矢量动画.
从兼容方法讲,利用Flash制作的动画文件可以直接嵌入到网页中进行播放.
所以Flash工具受到众多动画制作者和网页设计者们的热爱.
2.
Photoshop图形图像处理软件Photoshop是图形图像处理软件,它除了具有编辑图形图像的功能外,还可以制作GIF格式的动态效果的图像.
通过Photoshop工具,可以便捷和快速地设计出网页效果,还可以将设计好的效果图导出生成HTML文件.
Photoshop工具的应用领域较广,它是网页设计者们首选的图形图像处理软件.
3.
Dreamweaver网页制作软件Dreamweaver是目前较为流行的一款静态网站开发软件,它集成了较为全面的网站制作功能.
包括集成、灵活、高效的开发环境,在开发环境中还提供"设计""代码""拆分"和"实时视图"4种视图为一体.
还包括CSS语言的可视化编辑功能,以及集成了较多的Javascript功能,不需要编写太多代码,也可以实现相同效果,从而提高了开发人员的开发效率,节约了开发时间.
本书将以DreamweaverCS6为主要演示工具,详细介绍使用该工具制作网页的步骤和技巧.
1.
1.
3DreamweaverCS6介绍启动DreamweaverCS6时,软件会打开【欢迎界面】窗口,在该窗口中有三个区域,分别是"打开最近的项目""新建"和"主要功能",如图1-1-1所示.
当需要新建一个空白网页时,可以点击"新建"区域的"HTML"项.
图1-1-1【欢迎界面】窗口进入DreamweaverCS6操作界面,该操作界面主要由标题栏、菜单栏、文档窗口、插入栏和浮动面板组所组成,如图1-1-2所示.
图1-1-2DreamweaverCS6操作界面下面将对这5个主要组成部分的功能和使用方法进行详细介绍.
1.
标题栏标题栏主要显示正在编辑的网页文档信息,包括网页文件的存放路径和网页名称.
如果对当前网页做了更改但并未保存,则文件名会追加一个星号在后面.
2.
菜单栏菜单栏将DreamweaverCS6的所有常用功能划分为文件、编辑、插入等10项菜单.
其中每项菜单都有对应的快捷菜单,快捷菜单中又有对应的若干命令,如图1-1-3所示.
3.
插入栏通过插入栏可以方便并快捷地在网页中插入(表格、超链接、图像等)网页元素,用鼠标点击左边类别按钮进行切换,如图1-1-4所示.
图1-1-3【查看】菜单和快捷菜单图1-1-4【插入栏】切换类别4.
文档窗口文档窗口是编辑网页的主要窗口,在文档窗口中有4个视图,即"代码"视图、"设计"视图、"拆分"视图和"实时视图".
在"代码"视图中可以编辑HTML代码.
"设计"视图中的显示效果与浏览器预览的效果相似.
"拆分"视图可以同时查看"代码"视图和"设计"视图,如图1-1-5所示.
图1-1-54种视图工具栏5.
浮动面板组面板组是DreamweaverCS6中按照不同的分类将许多功能集中到窗口的选项卡集合.
每个选项卡可以展开和折叠,并且与其他选项卡组合和取消组合,所以被称为浮动面板.
在实际的网页制作过程中,使用DreamweaverCS6的浮动面板,可以将常用的面板显示在界面上,以便提高工作效率,如图1-1-6所示.
下面介绍DreamweaverCS6中常用的5个面板.
1)【CSS】面板【CSS】面板中包含"CSS样式"和"AP元素层"两个选项卡.
"CSS样式"选项卡用于定义网页文档中元素的特定样式规则的列表集.
"层"选项卡用于设置网页中层元素的格式化工具,如图1-1-7所示.
图1-1-6常用【面板组】图1-1-7【CSS】面板2)【应用程序】面板【应用程序】面板中包含"数据库""绑定""服务器行为"和"组件"4个选项卡,主要用于动态网页的设计与数据库管理,如图1-1-8所示.
3)【标签检查器】面板【标签检查器】面板中包括"属性"和"行为"两个选项卡,主要用于对选定的标签进行属性和行为的设置工作,如图1-1-9所示.
4)【文件】面板【文件】面板中包括"文件""资源"和"代码片断"3个选项卡.
"文件"和"资源"选项卡主要提供站点资源的管理功能,"代码片断"选项卡提供快速插入集成好的代码片断到网页中,代码片断支持JavaScript、META.
导航和文本等,如图1-1-10和图1-1-11所示.
5)【属性】面板【属性】面板是针对当前选定的网页元素的属性设置窗口.
选定不同的网页元素,【属性】面板中的内容可能有所不同,如图1-1-12所示为段落的【属性】面板,图1-1-13所示为表格的【属性】面板.
图1-1-8【应用程序】面板图1-1-9【标签检查器】面板图1-1-10【文件】选项卡图1-1-11【代码片断】选项卡图1-1-12段落的【属性】面板图1-1-13表格的【属性】面板1.
2创建和管理站点从管理角度,站点是一种管理网站中所有内容的工具.
通过站点可以实现文件的创建、编辑和删除等操作,还有共享文件等功能.
从文件的角度,站点是一个用于存放网站所有相关内容的文件夹,同样可以在文件夹中创建和修改文件目录.
(1)了解站点规划的相关知识;(2)掌握在DreamweaverCS6中创建和管理站点.
在创建站点之前,应该对站点结构进行规划.
规划站点结构是指利用不同的文件夹来存放不同的文件分类,使站点结构一目了然.
在规划站点组织结构时有两点建议:(1)文件夹名称在站点规划中有很重要的作用,好的名称是不需要具体地查看文件中的内容,只需要通过名称就能知道该文件表达的大致内容.
例如,要创建一个图片文件夹,通常命名为"images".
(2)文件和文件夹的名称建议不使用中文命名,因为有时Dreamweaver软件会将中文名字解析为乱码,当预览网页时,有可能因为编码的不一致导致不能正常显示.
合理地规划站点结构,有助于设计者非常清晰地把握站点的整体设计和网站的组织结构,以便减少一些由于文件路径和链接导致的问题,从而节省时间、提高工作效率.
计算机操作系统Windows7/8/10、DreamweaverCS6软件,Chrome/360/IE浏览器.
1.
2.
1创建本地站点步骤1启动DreamweaverCS6后,点击【站点】菜单中的【管理站点】命令.
步骤2在弹出的【管理站点】对话框中单击【新建站点】按钮,选择弹出快捷菜单中的【站点】命令,如图1-2-1所示.
步骤3在弹出的【站点设置对象】对话框中的"站点"栏目中的"站点名称"文本框中输入"MyWebsite",点击"本地站点文件夹"文本框右方的"文件夹浏览"图标,选择网站保存的本地路径为"D:\mywebsite\",单击【保存】按钮,如图1-2-2所示.
视频01图1-2-1新建站点图1-2-2设置站点名称步骤4在弹出的【管理站点】对话框中,可以查看到已经创建的站点名称列表项,单击【完成】按钮,站点创建成功,如图1-2-3所示.
图1-2-3完成站点创建1.
2.
2编辑和删除站点1.
编辑站点步骤1接1.
2.
1节中所创建的站点.
点击【站点】菜单中的【管理站点】命令,在弹出的【管理站点】对话框中选择列表中的"MyWebsite"项(需要编辑的站点),单击【编辑】按钮.
步骤2重复"1.
2.
1节"的操作,在每个弹出的对话框中对站点进行编辑,操作方法与创建基本相同,只需要按照提示进行选择即可.
2.
删除站点步骤1点击【站点】菜单中的【管理站点】命令,在弹出的【管理站点】对话框中选择列表中的"MyWebsite"项(需要删除的站点),单击【删除】按钮.
步骤2在弹出的对话框中单击【是】按钮删除所选站点.
步骤3点击【完成】按钮,删除站点返回【管理站点】对话框.
1.
2.
3导入和导出站点1.
导入站点步骤1点击【站点】菜单中的【管理站点】命令.
步骤2在弹出的【管理站点】对话框中单击【导入站点】按钮,弹出【导入站点】对话框,如图1-2-4所示.
图1-2-4【导入站点】对话框视频02视频03步骤3在弹出的【导入站点】对话框中,选择文件后缀为".
ste"的站点文件(可以按住Ctrl键选取多个站点同时导入).
步骤4单击【打开】按钮后,刚刚导入的站点将显示在【管理站点】对话框中.
2.
导出站点步骤1点击【站点】菜单中的【管理站点】命令.
步骤2在弹出的【管理站点】对话框中选中"MyWebsite"项,然后单击【导出站点】按钮,弹出【导出站点】对话框,如图1-2-5所示.
图1-2-5【导出站点】对话框步骤3在弹出的【导出站点】对话框中,将文件后缀为".
ste"的站点文件保存到相应的位置.
步骤4单击【保存】按钮后,导出站点完成.
从本节开始,我们将介绍网站创建的操作过程,请读者按照本节介绍的方法创建一个属于个人的网站,具体练习如下:(1)创建一个名为"MyWeb"的站点.
(2)对"MyWeb"站点的位置进行设置和管理.
1.
3HTML基本语法(1)了解HTML的基本概念;(2)掌握HTML常用的标记语法和用法;(3)掌握HTML标记属性的语法和用法.
1.
HTML基本概念HTML(HypertextMarkupLanguage,超文本标记语言)是一种描述性的标记语言,是网页制作最基本的语言.
通过HTML语言编写的超文本文档,浏览器可以解析文档中标记所描述的内容,并将其"翻译"在Web网页上,所以HTML语言编写的网页是跨平台的,只需要浏览器即可.
可以将其拆分为"超文本""标记"和"语言"3个词语来理解HTML语言.
1)超文本超文本有两层含义:从网络链接的角度,是指使用超链接的方式将网络上不同空间的信息有效地连接起来;从展示文件类型的角度,是指超越传统文本的表现形式,支持文本、图形、图像、声音、视频、动画等多媒体的元素展示.
2)标记标记是指使用特定语法规则解释网页元素的一种描述.
3)语言语言是指HTML是一种简单的描述性语言.
HTML是一种文件,它的文件扩展名通常有".
htm"或".
html",可以使用记事本、写字板、Dreamweaver等工具来编写.
HTML的核心概念是HTML标记和标记的属性.
HTML标记的基本格式为内容.
其中""表示标记格式的开始,""表示某标记的结束,"内容"通常放在标记的开始和结束之间.
标记属性是帮助HTML标记进一步控制HTML文件内容,标记属性由属性名和属性值构成,格式:.
一个标记可能具有多个属性,不同属性之间用空格隔开.
2.
HTML基本语法(1)HTML标记通常分为单标记和成对标记,绝大部分标记是成对标记.
单标记:标记只需要一个即可完成表示的功能,如、.
成对标记:两个标记共同作用完成表示的功能,如和、和.
(2)标记可以看作是对象,是对象就会有属性,如:,其中bgcolor是body标记的一个属性,该代码的功能是设置网页背景颜色为红色.
(3)标记不区分大小写.
3.
HTML文档结构HTML文档中有4大标记"管家",它们分别是和、和、和.
在这4个标记中每个标记都有自己的含义和管辖的范围:一个HTML文档以标记开始,以标记结束,所以它管辖的范围最大;其次是和,分别管理网页的头部区域和网页的主体内容区域;最后是标记,它应该放在标记之间,是标记的管辖区域.
构成最简单的HTML文档结构的标记如下:1)标记标记是HTML文档的开头标记,确定网页文档内容的起点,主要起着文档范围的作用.
2)标记标记被称为头标记,必须放在标记内,通常用于设置HTML文件的相关信息,如定义CSS样式、关键字搜索等.
3)标记标记被称为标题标记,必须放在标记内,主要用于设置网页标题.
可以在浏览器的标题栏中查看到相关内容.
4)标记标记被称为主体标记,必须放在标记内,通常用于将网页中显示的主体内容放到该标记内,可以在浏览器的主体区域查看到相关内容.
4大标记之间的关系如图1-3-1所示.
图1-3-1构成最简单的HTML文档结构的标记下面通过具体的操作来学习HTML中常用标记的使用方法和技巧.
计算机操作系统Windows7/8/10、DreamweaverCS6软件,Chrome/360/IE浏览器.
1.
3.
1标记实现网页自动跳转本节将以实现自动跳转的网页为例,介绍标记的基本语法和使用方法.
视频04步骤1使用鼠标点击【文件】菜单中的【新建】命令.
步骤2在弹出的【新建文档】对话框中,选择【空白页】中【HTML】,选择右侧【文档类型】列表项中的【HTML5】,点击【创建】按钮,如图1-3-2所示.
图1-3-2【新建文档】对话框步骤3用鼠标点击【文档】面板中的【代码视图】按钮,在网页文档中添加如下代码,如图1-3-3所示.
图1-3-3插入代码提示说明:需要注意的是,标记必须写在、标记之间.
步骤4点击【文件】菜单的【保存】命令,然后再点击【文档】面板的图标,使网页在浏览器中预览,网页3s后自动跳转到网址为"http://lm.
scujcc.
com.
cn"的网站.
1.
3.
2标记创建滚动字幕本节以制作文字滚动效果的网页为例,向同学们介绍标记的基本语法和使用方法.
步骤1使用鼠标点击【文件】菜单中的【新建】命令.
步骤2在弹出的【新建文档】对话框中,选择【基本页】中【HTML】,选择右侧【文档类型】列表项中的【HTML5】,点击【创建】按钮.
步骤3用鼠标点击【文档】面板中的【代码视图】按钮,在网页文档的、标记之间添加代码欢迎访问文学与传媒学院网站!
,如图1-3-4所示.
图1-3-4插入标记步骤4点击【文件】菜单的【保存】命令,然后再点击【文档】面板的图标,使网页在浏览器中预览,文字默认会从右向左滚动.
本节介绍了HTML语言的基本语法,读者可以使用HTML语言对网页进行简单的编辑,具体练习如下:(1)使用、成对标记来设置网页文件的头信息.
(2)使用、成对标记来设置网页的标题名称.
(3)使用、成对标记来编写网页的字体内容.
(4)使用、成对标记来实现网页内容的滚动效果.
视频05