网站建设与网页制作基础教程.docx

网站建设与网页制作基础教程.docx

《网站建设与网页制作基础教程.docx》由会员分享，可在线阅读，更多相关《网站建设与网页制作基础教程.docx（23页珍藏版）》请在冰点文库上搜索。

网站建设与网页制作基础教程

网站建设与网页制作

步骤：

1.规划阶段（网站策划）2.设计阶段（页面美工）3.实施阶段（网页制作）

详细流程：

1.站点策划2.构思草图3.美工设计4.图形制作5.脚本编程6.图形页面整合7.测试发布

1．创建站点

创建新站点、添加已完成站点（文件面板→管理站点→新建→命名→定义路径（前者为自定义后者为文件存储路径））

规划站点结构的原则（分类保存、合理的文件名称（全英文名）、首页名称（index）、本地与远程结构要相同）

建站点文档（添加文件和文件夹（通过鼠标右键新建）、文件的管理）

二．页面制作

1.HTML代码的基本结构（头部（head）包含字符集（meta语句）、标题，主体（body））

Meta语句，标题

......

2.设定meta内容（通用头元素的设置、添加meta元素、设置关键字和描述文字、刷新网页设置）

插入→HTML→文件头标签→meta→设定meta值不会在浏览器前端显示

插入→HTML→文件头标签→关键字→设定关键字→方便用户搜索到自己的网站

插入→HTML→文件头标签→说明→设定说明语句→对网站的描述，方便用户搜索到自己的网站

插入→HTML→文件头标签→刷新→设定刷新语句→对于网页的更新的操作（尤其网页更新比较快的情况）（刷新当前页面，刷新跳转到其他页面）

3.设定页面属性（标题、背景图像、背景色、文本颜色、边距）

空白处右键页面属性

添加文本（插入特殊字符、设定文本属性、改变字体和尺寸）

插入特殊字符：

插入→文本→插入特殊字符......

设定文本属性：

插入→文本→属性插入→属性设置

4.插入图像（浏览器支持的影像格式：

GIF、JPEG、JPG、PNG）

插入→常用→图像（替换文本（鼠标在图片上方悬停时显示的文字））

图像属性设置：

选中图片右键属性，图片大小设置好后重新取样；左右对齐，边距设置；

图像编辑（选中图像点击属性在属性面板中编辑图像属性必要时可调用PS软件、Fireworks软件等（调用方法选中图片→右键→编辑以））

5.图文混排（资源面板包含有站点下所有图像，音频，视频文件等）

插入日期（插入→常用→日期）

插入水平线（插入→HTML→水平线）（分割线，颜色默认灰色，设置水平线颜色：

属性面板→快速颜色编辑器）

注释（插入→常用→注释（不会显示））

6.插入Flash动画（Flash动画、Flash按钮与文字、Flash图片播放器、FlashPaper文件）

插入→常用→flash

Flash设置：

属性面板里设置

Flash源代码

ID序列号，插件下载地址，宽度和高度

flash影片路径显示品质（高或低品质）......

动画嵌入浏览器

插入flash按钮：

插入→常用→按钮

（选择样式，编辑文本，字体，大小，（链接），（目标），背景色，另存为（站点media文件夹下）时注意扩展名后缀为.swf）效果鼠标指上按键时变色...

插入flash文本：

插入→常用→flash文本

（字体，大小，颜色，转滚颜色，文本，（链接），（目标），（背景色），另存为（站点media文件夹下）时注意扩展名后缀为.swf）效果鼠标指上文字变色的动态文字...

Flash图片播放器：

将要播放图片拷贝到站点image文件夹下插入→flash元素→保存后缀.swf→flash元素面板中设置（重新定义imageUVL浏览选择站点目录下要播放的图片，删除imageLink（图片链接），删除imagelinkTarget（图片链接目标），编辑标题，是否自动播放，播放是否循环等等。

存盘预览快捷键：

F12）

插入FlashPaper文件（安装flashpaper软件条件下，microoffice可以将word，ppt文档转换为flashpaper文件。

方法：

在Word或者PPT中找到并点击flashpaper按钮，选择路径，保存便可以将当前打开的文件转换为flashpaper格式文件）插入→常用→flashpaper

7.插入Java（Java主要用于互联网，用于做小的特效比如水中倒影的动画效果，网上可以找到很多Java程序）

插入JavaApplet元素拷贝文件LINK.CLASS（Java类文件）和GIAL.JPG到diary目录

插入→常用→applet属性面板中设置applet属性（参数，值）

源代码：

code（表示要嵌入的Java文件），宽，高

参数值标记

8.插入交互图像（翻转图片，导航条）交互图像如：

鼠标悬停在图片上时图片发生变化

图像交互：

插入→常用→插入图像→鼠标经过图像（状态图，鼠标经过图像。

选择预载鼠标经过图像表示页面刚打开时就将两张图都下载下来，这样做的好处是保证浏览时的流畅度）

导航条：

插入→常用→插入图像→导航条（可以添加多张交互图片：

状态图，鼠标经过图像，按下图片，按下时鼠标经过图像）

源代码：

9.插入音视频（音频，视频）

插入音频：

插入→常用→插件（视频文件也是通过插件）

源代码：

宽高

...

嵌入浏览器

10.插入滚动文字（滚动文字，控制滚动文字）

插入滚动文字

将光标定位在想要产生滚动效果的文字最前面，将视图拆分找到对应源代码的光标位置输入在将光标定位到想要产生滚动效果的文字最后面同样找到拆分视图中对应光标的位置输入。

语句的格式如下：

想要滚动的文字

设置文字滚动方向

将光标定位在第一个marquee的后面敲一个空格然后输入（或选择）direction在选择liftorright...

语句的格式如下：

想要滚动的文字向右（默认是向左的）

设置文字滚动速度

接着上步设置方向的语句末尾再输入一个空格然后选择scrollamount然后在””中输入速度值，比如3代表中速。

语句的格式如下：

想要滚动的文字注：

scrollamount表示连续滚动

另一种语句的格式如下：

想要滚动的文字注：

scrolladelay表示间歇滚动，即滚动一会，停一会。

此时数字越大会越慢。

设置文字滚动状态-控制滚动状态

脚本交互鼠标经过时滚动停止，鼠标离开时继续滚动。

语句的格式如下：

想要滚动的文字

11.网页链接（（绝对路径，相对路径，根路径）内部链接，外部链接，锚链接，Email链接，链接的目标窗口，图像的超级链接，热点）

绝对路径如：

完整的路径有协议，网址等等

相对路径：

（不需要完整的写出路径的内容如协议，网址等等）当前文件和链接文件之间的路径关系如：

一个目录里有a和b两个页面，要从a页面链接到b页面那么相对路径为b.htm

根路径：

（不建议使用）某网页想要链接到根目录下的某个页面a就用根路径\a.htm。

这种根路径都是由服务器端解释的，如果在本地使用根路径去打开的时候这个路径是无效的，也容易出错。

内部链接（同一网站内部页面之间的链接——相对路径）

包括图片，文字等都可以创建链接点击小图时在新窗口产生一张大图源代码中blank代表新打开浏览器在图片的属性面板中目标选项中选择。

源代码：

外部链接（不同网站页面之间或外部页面之间的链接——绝对路径）

邮件链接

在链接输入框输入：

“mailto：

”+“实际的邮件地址”

定义通过链接发送邮件的主题

mailto：

2576668974@？

Subject=读者来信（或者网站的意见和建议等）

这样访客通过点击链接发给自己的邮件都有一个共同的主题以便自己管理邮件。

定义通过链接发送邮件的抄送（功能：

将发送到链接所指定邮箱的邮件复制一份发送到给出的抄送邮箱）

mailto：

25***74@？

Subject=读者来信（或者网站的意见和建议等）

&cc=13***87@

锚点链接

同一个页面当中不同位置的链接（如：

返回顶部等）

将光标定位到页首某处，点击插入→常用工具栏→命名锚记（命名如顶部）→确定

源代码：

图像映射链接（图像映射，热点）

选中图像，图像属性面板左下角地图，热点区域：

圆形，矩形椭圆形选中其中一种在图片上画出热点区域，然后在热点属性面板上设置参数。

功能：

给图片的部分区域创建链接即点击图片上定义好的某片热点区域而访问其他网页。

源代码：

<图像的源代码+usemap=”#map”>

//www.***.com”target”_blank”alte”新版网站”>

脚本链接（关闭弹出窗口）

再选中文字的属性面板中的链接选项中输入：

Javascript：

window.closs（）

效果：

看完网页后点击网页末尾的关闭窗口的链接会弹出窗口询问是否关闭窗口。

12.插入表格（专业化制作页面必备知识）

应用：

web照片画廊

命令→创建网站相册→设置属性（标题，副标题，其他信息，图片地址选择，画廊存储地址，缩略图大小（是否显示名称）拍几列图片格式，百分比（缩放））

创建网站相册必须安装fireworks。

表格的应用（新增表格，表格的属性设定，设定整体表格属性，设定行列单元格属性）

要求：

学会使用Dreamweaver的表格调整方法，以及插入FireworksHTML

的方法，设置表格属性，制作首页页面。

目的：

通过对图像切片，插入FireworksHTML，调整表格的操作（将图片）制作成一个完整的页面。

图像切片（学会切片并利用切片后的排版学习表格内容）

利用Fireworks软件打开图像，软件界面左边侧边栏里Web一栏里选择工具对图像进行切片处理。

（关键：

图像版面划分，对于相同部分的切割（按照图形相似原则选择性切下尽量小的部分来代替大图），对于空白部分的切割（整体切割）需要创建链接的部位的切割等等）切割好以后→窗口→优化→优化处理；

然后文件→导出→选择保存路径→命名→导出类型选择“HTML和图像”→将图像放入子文件夹→导出（此时会在你指定的文件夹里存放有每一个切片图还会生成一个网页文件网页内容为切片后的图形（分割图））

制作页面

插入→图像对象→FireworksHTML选择制作图像切片时导出的网页文件打开开始编辑。

（全白切片可以直接删除（网页背景为白色时可以将白色切片直接删除），而标准字体可以直接输入，相似的切片可由小替大好处就是减小网页的大小为传输方便）

源代码：

<...>

1行开始

.单元格1..

.单元格2..

.单元格3..

...

1行结束

2行开始

.单元格1..

.单元格2..

.单元格3..

...

2行结束

...

制作简单的内页页面（目标学会使用Dreamweaver的表格排版方法）

常用工具栏→插入表格→设置表格属性→插入图片→细节处理

设置表格上凸效果要通过源代码来设置：

亮边框给暗色，暗边框给亮色。

做离上边边框边缘较近的水平细线的插入，利用插入表格的方式插入一个一行一列的表格再对这个表格设置属性是看起来是一条细线。

但是注意软件默认的单元格高度会比细线粗得多，只能借助源代码来设置。

源代码：

 :

 :

表示空格由于有这一语句所以表格无法再调细，所以需要删除，删除后就会有细线效果。

排版的原则：

先做整体，再做局部，表格嵌套。

命令→格式化表格→选择库中表格样式

大表格用像素来设置参数，嵌套的小表格用百分比来设置像素。

用表格来制作复杂的网页页面

不要将所有内容编辑到一个大表格内，要善于将整个页面划分为多个部分，建立多个表格来分配内容。

好处就是在浏览下载时按表格内容一个表格一个表格的下载时速度最快的。

搜索功能实现：

插入表单；插入对话文本框；插入提交（可改为搜索）按钮。

当单元格的高度没法调到合适的更小的高度时可以做一张透明的图片插入到单元格光标的位置在进行单元格的拖拽使之变小。

13.绘制表格（绘制表格，绘制单元格）

插入→布局→创建表格

当制作图像作为首页的页面时建议用切片的方法插入FireworksHTML来制作首页（较简单，只限于页面内容以图像为主的设计类型的首页上不适合做商业网站内页）；制作个人主页或者商业性网站页面时都可以采用插入表格的方法，以插入表格来排版；更随意的方法是以绘制表格的形式做页面，这种方法更偏向于制作者。

14.制作小型商业网站（切片—准备图像，表格—页面排版，链接—制作网站）

（1）理清脉络，先做什么后做什么，要清楚

（2）对网页进行分块，分出几个大块，要有全局观，先整体后部分。

（3）根据最终要求的页面效果从最基础的地方做起。

（一个网页包含一张大图不可能对整张大图进行排版，必须要对图片做一定的处理利用切片的方法使图片更精致，更小。

再利用Fireworks切图时先要将这张大图分块，然后进行切片）

创建链接

15.制作表单（客户端填写表单→提交，反馈→服务器端处理表单；加入空白表单；设定表单属性）

插入→表单→得到空白表单→设置属性（名称，动作（可以邮件的方式提交则此处应是：

mailto：

+邮箱），方法（设置以哪一种方式发送到服务器：

GET（默认）→表单数据附加到ual地址当中发送；POST→嵌入到http的请求当中去发送）一般选POST较安全）

加入表单元素：

（1）插入文本域单行如：

用户名插入→表单→文本字段

邮箱插入→表单→文本字段

网址插入→表单→文本字段

多行如：

留言插入→表单→文本区域（换行：

虚拟，外观上的换行，提交到服务器认为一整串字符；关，不换行；实际，外观上以及上传到服务器都换行）

密码插入→表单→文本字段（属性里调密码）

（2）插入单选按钮比如：

性别插入→表单→单选按钮

插入单选按钮组比如：

工资插入→表单→单选按钮组（用于提供多个选择）

（3）插入复选框（可做多项选择）比如：

爱好插入→表单→复选框

表单源代码:

+邮箱”method=”post”name=”invest”id=”invest”>

......

单行文本框标记：

不需要结束

多行文本域标记：

密码标记：

单选按钮标记：

男注：

checked表示默认选中

女

复选框标记：

红色字体不能更改

（4）插入列表（从列表中选择一项或多项，列表中的选项一一列出）比如城市的选择插入→表单→列表/菜单→设置列表属性（类型，高度，列表值（选项），可以设置多选（多选时需要按下Ctrl键），也可在初始化选定中设置默认选项（点上某个选项即可））

（5）插入下拉菜单（从下拉菜单中选择一项（只能选择一项），菜单中各项隐藏）比如：

年龄插入→表单→列表/菜单→设置菜单属性（列表值）

（6）插入文件域（基本功能：

让用户在域的内部填写自己硬盘当中的文件路径然后通过表单进行上传。

访问者可以通过网页表单中的文本域上传文件。

组成：

文本框，浏览按钮）比如：

上传照片插入→表单→文件域→文件域设置

（7）插入按钮（有关表格的提交属性）比如：

提交（提交填写完成的表格）

插入→表单→按钮→设置属性（默认为→值：

提交；动作：

提交。

可以修改）

比如：

重置（重置填写完成的表格）

插入→表单→按钮→设置属性（设置为→值：

重置；动作：

重置。

）

（8）插入图像域（按钮）插入→表单→图像域→选择图像→设置属性

（9）插入隐藏域（隐藏域会在表单当中储存一些信息，外观上不会显示，用于后台程序判断信息）插入→表单→隐藏域→设置属性（隐藏区域；值）

（10）创建跳转菜单（功能：

是菜单，但可以实现页面当中的链接跳转，浏览者在菜单中选择某一项就可以去到目标页面，与下拉菜单的区别是：

下拉菜单只是一个选择工具，而跳转菜单则既是选择工具也是跳转工具。

此项功能与表单的实现是有区别的）比如：

友情链接

插入→表单→跳转菜单→设置属性

源代码：

列表的标记：

注：

size高度，multiple多选

注：

value值，selected被选中的

注：

value值，selected被选中的

...

菜单的标记：

⁢18

18-30

30-50

50-70

>70

文件域的标记：

默认标准提交按钮的标记：

重置按钮的标记：

图像提交按钮的标记：

注：

alt鼠标提示文字

隐藏域的标记：

跳转菜单的标记：

搜狐

新浪

163

注：

onChange当鼠标改变其中一个选项时，跳转功能由MM_justMenu（‘parent’,this,0）（为JavaScript脚本）实现。

其中的脚本定义源代码：

（在头部定义的）

functionMM_justMenu（...）

...

插入跳转菜单（深入）：

插入→表单→跳转菜单→设置属性（选项→菜单之后插入前往按钮与上面的区别是选择选项之后单击前往按钮之后再访问目标页面，而前面跳转菜单中是选择选项之后直接跳转。

这里就增加了一个用户自定义跳转的功能，由用户决定是否跳转.但是要实现这一功能必须做必要的调整：

源代码：

搜狐

新浪

163

应该删除onChange=”MM_justMenu（‘parent’,this,0）”才能实现单击按钮后跳转，否则和前一种情况效果一样）

解决表单的缝隙问题（插入表单后在浏览器端显示表单与其下方项目之间出现空行影响美观的问题，这不是错误的，在制作表单，表格时也都正确，为了显示美观要对源代码进行小小的改进，算是一个小技巧。

）

源代码（调整前）：

（注：

行开