网页三剑客文字版.docx
- 文档编号:9683621
- 上传时间:2023-02-05
- 格式:DOCX
- 页数:27
- 大小:2.42MB
网页三剑客文字版.docx
《网页三剑客文字版.docx》由会员分享,可在线阅读,更多相关《网页三剑客文字版.docx(27页珍藏版)》请在冰豆网上搜索。
网页三剑客文字版
网页三剑客
1-1
1.服务器:
服务器是一种高性能计算机。
主要用来存储、处理网络上的数据和信息。
实际上是由客户机向服务器发出一个请求,服务器在收到后将所需内容发送给客户机。
2.在建设网站前要了解网站建设的流程、网页元素的组成、色彩搭配和版式设计及制作网页所需要的工具。
(1)建站流程:
申请域名------申请网站空间-----网站设计与制作-----网站测试与上传-----网站推广
比如:
<新浪网的域名:
(域名具有唯一性)>
a.注册域名:
登录到一个域名注册代理网站申请
b.申请网站空间:
登录到任何一家提供相关服务的网站即可申请自己的空间
c.网站设计和制作:
最好在纸上画个草图(网站结构草图)
d.网站测试与上传:
测试----在常用的浏览器上及不同的分辨率下能够正常显示。
上传----测试结束后即可上传制作的网站
e.网站推广:
最好的方法是在Google、XX等搜索引擎上注册(通常收费)
联系相关网站并建立友情链接
在论坛上发帖等
(2)网页元素组成:
文字、图片、动画、视频、声音等元素
(图片格式:
JPG、GIF声音格式:
MIDI、WAV、MP3和Real、Audio)
(3)色彩搭配:
蓝色、灰色------工业高科技企业
粉色---------女性
红色---------商业、零售
(4)版式设计:
将文字、图片、动画等网页元素根据一定的需要组织安排在一定的界面中(要点:
使网站看起来完整统一,网页和谐而有序)
3.网页三剑客
由Dreamweaver,Fireworks,Flash三个软件组成
Dreamweaver:
可视化网站的开发工具,制作网页和管理网站
Fireworks:
制作网页图像、标志、导航栏、图像按钮
Flash:
动画制作
Dreamwever
1-2
1.dreamweaver组成
控制面板:
主要用于辅助页面设计和管理站点
属性面板:
更改属性
1-3
建立本地站点
1.本地站点:
计算机硬盘上的一个目录
2.建立本地站点:
站点----管理站点----新建----管理站点-----本地根文件夹、默认图像文件夹
3.给新建立的站点建立新文档:
a.借助文件面板建立网页或者文件夹
(首页一般命名为:
index.htm,images文件夹:
存放所需的各种图片<文件夹名称应该避免使用汉字或者是大小写字母>)
b.在文档中自行建立
1-4
设计网页布局
1.网页布局使用:
表格,布局表格,层等(表格布局常使用)
2.选中整个表格:
将光标置于整个表格外侧,当出现红色边框时单击
选中一行或一列表格:
将表格置于表格边缘,当光标显示为水平/垂直箭头时单击即可
选择不相邻的表格:
按住ctrl键且按住鼠标点击选中的单元格即可
删除选中单元格:
用光标点击该单元格即可
单元格:
可进行合并和拆分
删除单元格内的内容:
选中单元格,按Del键
2.插入布局:
标准、扩展、布局
布局表格:
在布局表格内不能插入文字、图片。
所以需要在布局单元格内画一些布局单元格
布局单元格:
必须在布局表格内
选中布局单元格:
ctrl+单击
(还可以为布局表格、布局单元格设置属性)
1-5
编辑网页
(比如设置页面标题、插入文字、图片、导航栏等)
1.设置标题(在插入布局中):
【标题】:
xxxx
2.导航条:
在插入导航条之前,应该在本地站点根文件夹下的images文件夹中存放好准备好的不同导航条
插入导航条:
【插入】---【导航条】---【图像状态】和【按下图像】一般为一个图像,【鼠标经过图像】和【按下鼠标经过图像】一般为一个图像---单击加好按钮添加以后几个【项目】---【确定】
3.预览网页
4.水平线:
主要用于分隔文本和对象
特殊符号
【版权】
空格:
【不换行符】
5.插入动画,插入图片
页面制作好要要按ctrl+s保存,然后可进行预览
1-6
从一个页面转跳到另一个页面
(涉及超链接的知识)
链接:
链接是网页的灵魂,它能把很多页面通过超链接,组成一个整体。
利用超链接可以链接到其他网页,还可以链接到其他图像文件、多媒体文件及下载程序等
1.绝对路径:
该路径提供了链接文档的完整地址。
(例如:
当创建一个网站的网页到另一个网站的网页时必须使用绝对路径
2.相对路径:
web站点中用于内部链接,也就是要链接的文件和正在编辑的网页在同一个文件夹内(例如:
dreamweaver/contents.htm相对路径:
/support/index.htm在同一个文件夹下)
3.链接:
常用的链接:
内部链接、常用链接、外部链接、E-mail链接、下载链接和转跳菜单
(1)内部链接:
网站内部各网页之间的链接,可使其中的一页转跳到另一页
在属性面板上【链接】即可选择要链接的xx(以相对路径形式出现)
(2)外部链接:
【链接】:
如:
(3)E-mail:
在要插入的位置点击【插入】---【电子邮件链接】
(4)下载链接:
和内部链接方式一样
(5)跳转菜单:
【插入】---【表单】---【跳转菜单】
跳转菜单的修改:
单击选中跳转菜单,在【列表值】中进行修改
4.给图片的某些部分创建链接:
利用热点创建链接:
给图片的某些区域利用矩形,正方形等创建链接(选中要整个图片,然后见属性面板利用图形工具选中要创建链接的部分图片,然后【链接】)
1-7
层与行为(一般层和行为是相互存在的)
层:
是一种网页元素定位技术,使用层可以以像素为单位精确定位页面元素。
在层内可以放置文本、图片等对象,还可以实现下拉菜单、图片、文本的各种运动效果。
层与表格之间还可以相互转化,利用这一功能还可以用层进行页面布局。
行为:
制作出交互效果
1.
(1)创建层:
页面切换到【布局】【标准】1表示描绘层按钮(可以修改层的属性)
(2)层控制面板:
可以进行层的隐藏:
眼睛图标
2.
(1)行为:
对行为的操作都是对行为面板的操作实现的
(2)行为的功能:
a.给页面中的某个对象添加行为
单击行为面板中的加号按钮---【显示隐藏层】---自行选择
onMouseOut:
表示当光标移出相应对象时
onMouseOver:
表示当光标移到相应对象时
b.弹出信息框:
在载入网页时自动弹出信息框
单击【body】选中整个页面,单击行为面板中的加号按钮---在下拉列表中选中【弹出信息】,在该对话框中输入要弹出的信息。
c.在打开网页时弹出窗口似的广告或者通知:
利用行为
单击【body】选中整个页面,单击行为面板中的加号按钮---在下拉列表中选中【打开浏览器窗口】,……
d.弹出式下拉菜单:
利用行为
选中要创建弹出式菜单的图片或者是文字,单击行为面板中的加号按钮---【显示弹出式菜单】
e.给状态栏设置文本
单击【body】选中整个页面,单击行为面板中的加号按钮---【设置文本】---【设置状态栏文本】(在状态栏文本中输入发生事件)---【确定】保存
1-8
Css样式表
Css样式表:
(常称风格样式表)是用来进行网页风格设计的,可以有效的控制网页中文本的字体、颜色、大小、间距,使页面更整洁,网站风格更统一。
注意其功能1.附加样式表2.新建CSS规则4.删除样式
1.css分类:
类(可用于任何标签)
标签(重新定义特定标签的外观)
高级(ID、伪类选择器等)
如果想使网页中大部分文字样式一致,使用标签样式
如果想使网页中部分文字样式一致,使用类样式
高级样式主要对网页中链接过的文字进行修饰
(1)类样式
创建:
【名称】:
必须以句点开头,必须是字母数字
选择器类型:
类
定义在:
仅对该文档
(字体大小一般为12)
创建结束后进行样式应用:
选中要创建样式的文字,在属性面板中【样式】
(2)标签样式
网页中表格内文字都应用标签样式
创建:
【标签】:
td,table
选择器类型:
标签
定义在:
仅对该文档/新建样式表文件-----最后【类型】
(3)高级样式
link:
对应默认链接状态
visited:
对应访问过后的链接状态
hover:
对应鼠标经过时的链接状态
active:
一般不用设置
定义在:
仅对该文档
一般link和visited相同,hover不同
2.外部样式表
要给其他页面创建相同的样式
创建:
保存:
一般都把CSS样式保存在文件根目录下
应用:
打开一个要应用CSS样式表的网页
点击【链接外部样式表】---【浏览】:
选中刚刚创建的css样式【添加为】:
链接
1-9
模板和库
模板和库的操作主要是在【资源面板】中实现的
模板:
如果在同一个站点中有好几个网页想要同一风格来。
锁定区域+可编辑区域
1.模板
1)创建模板
可以把新建的网页直接保存成模板,也可以把网页编辑好之后再保存为模板
步骤:
(1)a.【文件】---【另存为模板】---【另存为】:
输入名称
模板文件的扩展名为:
dwt
b.给模板设置可编辑区域
具有可编辑区域的模板才有意义
将光标停留在要设置的可编辑区域---选中td标签---【插入】【模板对象】---【可编辑区域】---……---ctrl+s保存
(2)删除可编辑区域
点击创建的可编辑区域---【修改】---【模板】---【删除模板标记】
(3)应用模板
打开要应用模板的页面---资源内的【模板】图标---单击【应用】
在可编辑区域可以插入任何元素
2)用模板更新页面
将模板中的某个对象(文字、图片等)---ctrl+s---会弹出【更新模板文件】对话框---【更新】
3)编辑模板的锁定区域
【修改】---【模板】---【从模板中分离】
2.库
(1)创建库
在一个页面内插入要应用的图片(稍后想将其设置为库)
单击资源面板中的库按钮
在文档窗口中选择要创建库的图片将其拖拽到资源面板中---输入库项目名称
可看见
lbi文件夹
(2)应用创建好的库
打开要应用库的文件夹页面---将资源面板中的库图片拖拽到页面中的合适位置
(3)修改库
在资源面板中双击要修改的库项目的图片---在打开的文档中可进行修改---编辑结束后按ctrl+s保存
Fireworks
图形处理软件
2-1
矢量图:
是用基本的绘图工具绘制出的各种图形,优点:
占用空间小,放大后不会失真。
位图:
优点:
画面细腻,文件比较大。
扩展名一般为jpg、tif。
用于网页的图像:
GIF和JPG格式的图像文件
分辨率:
如果图像只需要在屏幕上显示,分辨率一般为72
1.【原始】用于图形编辑
其他选项卡用于观察图像,优化输出时的效果
2.1画布大小分辨率2画布显示比例
2-2
工具栏特点
1.工具栏:
主要工具栏+辅助工具栏
主要工具栏
辅助工具栏
2.工具面板
橡皮擦:
一张图片周围的部分可以用橡皮擦擦除,使之透明。
2-3
控制面板
比较常见的控制面板:
层面板、帧面板、历史记录面板、样式面板、混色器面板、库面板
1.层
(1)使用层面板
1展开或者合并图层2眼睛:
显示或者隐藏图层3锁定图层
(2)新建和删除层
(3)复制:
选中要复制的层,直接拖拽到【新建/重置层】按钮
删除:
将图层拖拽到【删除】按钮
重命名:
双击图层名称,还可以进行重命名
调整图层位置:
单击选中图层,上下拖动
2.帧面板
Firework中的动画就是有帧组成的,帧面板就是对动画中的帧进行编辑的
(1)1帧名称2帧延时
(2)(3)和层的操作相同
3.历史记录面板主要用于撤销或者是恢复原来的操作
撤销或者是恢复标记
4.形状面板
【窗口】---【自动形状】
5.样式面板
6.混色器面板
主要用于描边和填充颜色
7.库面板
8.将实例转换成元件:
用光标选中实例,按F8键
2-4
网站logo:
网站标志(在网站的左上角出现)
2-5
Banner:
横幅banner广告即网络广告
制作广告条
注意:
(1)画面要生动,能引起人们的主要,起到宣传作用,并且能给人留下深刻的印象。
(2)大小不超过20kb,尺寸一般采用468x60像素、120x60像素
2-6
导航条
Firework中的导航条实际上是一组互斥的按钮。
快速制作导航条:
最好方法是先创建一个按钮元件,然后将库中的按钮元件多次拖到编辑区并对其进行简单的编辑即可。
1.步骤:
(1)单击工具栏中的【新建】按钮
新建文档各数值一般如下:
(2)进入按钮元件编辑页面:
【编辑】---【插入】---【新建按钮元件】
进行导航条的绘制---结束后单击【划过】、【复制弹起时的图形】进行相应修改---
【按下】---……
在库中出现刚刚创建的按钮,可依次拖到文档中
给按钮添加行为:
选中要添加行为的导航条,单击鼠标右键
(3)在网页中插入由fireworks制作的导航条
在dreamweaver中制作网页时,首先将光标定位在要插入导航条的单元格内,选择插入【图像对象】---【fireworkHTML】
2-7
Firework可以用于制作网页,还可以用切片工具把页面划分,直接导出成网页.htm文件
个人网站制作
1.网站的主题、风格和结构
2.工作流程:
(1)在firework里设计版面样稿并进行裁切导出
(2)在dreamweaver中定义站点并对导出的文件进行进一步加工、修饰
(3)为制作好的各个页面设置链接
网站结构比如
Firework
5-2
主页面
1.【选取框工具】进行取
2.Alt复制
3.文字:
大小,颜色,粗细
ComicSanMS不规则大写英语字母、数字
Arial加粗,大小为10以下的英文字母
MonotypeCorsiva连笔大写英文字母(最好外面为白边,内空心)
样式面板也可以对文字进行修饰
不透明度(若是设置一般为30%)
4.魔术棒和套手工具对图片进行处理
套手:
按shift键+套手工具结合使用
若对图片内容进行反选:
【选择】---【反选】
图片羽化:
【选择】---【羽化】羽化半径一般2-10
5.使文字或者是图片方向改变
6.页面做好后对页面样稿进行裁切
切片工具
裁切后:
【文件】---【导出预览】---【格式】:
GIF,【调色板】:
接近网页最合适,
【失真】:
0---【导出】---……
子页面
7.为保证整个网站风格的一致性,只需要在主页的基本上进行修改即可成为子页
设置结束后将子页导出,【文件名】自己随便命名,其余同主页导出过程同子页一样
Dreamweaver
修饰主页面(更换背景,在背景中插入表格<在表格内才可进行添加文字、图片>)
1.建立本地站点
站点名称:
为前面在firework中命名的网站名称
2.对页面进行修饰
整个表格边框:
【对齐】:
居中对齐
【修改】【页面属性】:
外观,标题/编码
3.将要编辑的区域删除,单击属性面板中【背景】后面的小文件夹图标,在文件夹中选择刚刚删除的图片作为背景---插入表格(在表格内可输入文字、图片等编辑)
4.新建CSS样式
选择器类型:
标签
标签:
table
定义在:
新建样式表文件
将样式表存储在网站名称的根目录下
弹出css样式表对话框---对【类型】进行设置
创建子页面
首先要创建一个模板
1.打开要创建模板的文件页面
2.整个表格边框:
【对齐】:
居中对齐
【修改】【页面属性】:
外观,标题/编码
【文件】---【另存为模板】--
-
5.将要编辑的区域删除,单击属性面板中【背景】后面的小文件夹图标,在文件夹中选择刚刚删除的图片作为背景
6.插入表格
7.选中刚刚插入的表格,【插入】--【模板对象】--【可编辑区域】
Ctrl+s保存
创建页面
用模板创建页面
1.创建一个新文档
【文件】---【新建】---【创建】
2.保存:
ctrl+s并输入文件名
3.插入表格进行编辑
4.文字创建链接
各个页面之间创建链接
首页中各导航栏目的链接用到了层和JavaScript脚本
为主页创建链接
1.打开首页文档index.htm
2.设置链接
选择要设置链接的文字或者是数字等,为其设置层编号。
【链接】:
链接到要链接的页面【目标】:
-blank
---【行为面板】中设置
onMouseOut:
表示当光标移出相应对象时
onMouseOver:
表示当光标移到相应对象时
为子页创建链接
打开模板文件(.dwt)
1.选中要创建链接的图片或者文字
【链接】:
选择要链接到的文字
Ctrl+s保存文件---弹出【更新模板文件】---弹出【更新页码】---点击【关闭】
1.Dreamweaver:
设置表格时将表格设置为778像素,对齐方式:
居中对齐
2.将Dreamweaver中的不可编辑区域转变成可编辑区域:
【修改】---【模板】---【从模板中分离】
3.如何上传网站
4.免费域名和空间申请
免费域名:
域客士
免费域名和空间:
中国8u(在申请免费空间的同时自带三极域名)
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 剑客 文字