当前位置:网站首页 > 编程语言 > 正文

网页制作代码模板免费版(做一个网页代码模板)



Adobe DreamweaverCS6课程笔记

第一节、Dreamweaver CS6软件简介和安装

一、DreamweaverCS6是由美国Adobe公司最新开发的一款网页设计、网站管理为一体的专业软件。

二、为了保让能够正常安装,在安装时,请断开网络。

第二节、DWCS6软件界面的简介

一、软件界面组成

1、菜单栏

2、工作区

3、属性栏

4、浮动面板(文件、资源、CSS样式、行为等)

二、界面的切换:为满足不同人群的需求。

三、界面的恢复:窗口——工作区——重置设计器

四、插入面板的调用。

第三节、网页相关知识

一、DreamweaverCS6是由美国Adobe公司最新开发的一款网页设计、网站管理为一体的专业软件。

二、什么是网页(网页的概念):在互联网上基于http协议传播信息的页面。

三、什么是网站:反应同一主题的多个网页的集合。

四、网页内容的组成(网页元素)

1、文字

2、图片(jpg,gif,png)

3、动画(swf,gif)

4、多媒体

5、超链接

6、表单

7、网页特效

8、其它元素

第四节、网页制作方法与站点建立

一、网页的制作方法

1、代码法:html

2、软件制作:Dreamweaver、frontpage(所见即所得)。

二、制作网站前准备工作:建立站点。

三、站点:用来存放网站中所有元素的文件夹,为了制作方便需要将这个文件夹和制作软件相链接。

四、站点的建立(链接)

1、站点——建立

2、文件面板

3、应用程序栏(窗口——应用程序栏)

五、站点的分类(按照网站的位置)

1、本地站点

2、远程站点

第五节、规划本地站点目录结构

一、规划本地站点目录结构

1、images(图片)

2、swf(动画)

3、css(CSS样式)

4、script(存放网页特效)JS

5、other(其它)

二、网站主页名称

1、index.htm

2、index.html

3、default.htm

4、default.html

注:主页必须放在网站的根目录下面,同时名称也有特殊的要求。

第六、七节、网页中文字的输入1-2

一、网页的四个视图

1、设计视图

2、代码视图

3、拆分视图

4、实时视图

二、网页中的文字

1、文字直接输入就可以了。

2、回车表示换段。

3、shift+回车:表示换行。

4、输入空格时要在全角输入法状态下输入。

5、特殊字符的插入:“插入——html——特殊字符”

6、文字也可以从网站中复制,但是在复制时需要将网页中文字的格式去掉。

(注:如何去除复制来的文字格式,只需要将文字粘贴到记事本中,然后从记事本中再复制文字就可以了。)

三、预览网页:文件——在浏览器中预览——IExplore(快捷键:F12)

第八、九节、页面属性1-2

一、页面属性

1、修改——页面属性

2、或通过属性栏

二、属性

1、左边距、右边距、上边距、下边距。

2、文字字体、大小、颜色。

(注:A、字体:选择常用字体。如:宋体

B、大小:正文文字一般设置为12-16px。)

3、页面背景。

4、背景图片。(默认情况自动填充、平铺)

(注:A、图片要放在站点内。(有关网站中的所有元素都必须放在站点内)。

B、图片名称不能为中文。)

(注:如果同时设置背景颜色和背景图片,以背景图片为准。)

第十节、Html网页基本代码格式

一、网页基本代码

(注:1、head:开头部分

2、title:标题

3、body:正文部分)

二、常用代码

1、

:换段

注:多数html代码都有对称性的特点。

第十一节、图片的插入

一、图片

1、图片格式

(1)JPG:图片质量较高,一般用于较大的图片。如:人物、风景。(不支持透明)(2)gif:用于制用按钮、动画、导航条等,图片较小,只有256种颜色。(支持透明)(3)png:兼有两种格式的特点。(支持透明)注:图片的大小一般尽量控制在200K以下。

2、链接

(1)_blank:在新的网页打工。

(2)_self:在自身网页打开。

第十二节、图片热点

一、热点

1、矩形热点

2、圆形热点

3、多边形热点

注:编辑——首选参数——辅助功能——图像

二、替换

1、用于图片的注释。

2、当图片无法显示的时候用此内容代替。

三、宽度和高度的设置

四、相关html代码

1、Img:图片。

2、Src:位置。

3、热点:……

第十三节、图片的编辑

一、裁剪、亮度对比度、锐化

注:使用Dreamweaver编辑图像是个不好的习惯,如果要编辑图像,最好使用专门的图像编辑软件(如:Fireworks、photoshop),编辑好了以后,再重新插入进来。

二、插入——图像对象——鼠标经过图像

三、水平线的插入

插入——html——水平线

四、背景颜色的代码:bgcolor

第十四节、超链接

一、超链接指的是通过点击一个对象可以链接打开另外一个对象(网页、图片、程序等)。

二、链接的代码(即链接的标签)

内容

文字

三、超链接的状态(修改——页面属性——链接)

1、链接:链接默认颜色。

2、变换图像:鼠标移上去时的颜色。

3、已访问:访问以后链接的颜色。

4、活动:鼠标点下去时的颜色。

第十五节、超链接打开方式

一、链接页面打开的目标:

_blank:新窗口打开网页

New:新窗口打开网页

_parent:父窗口(框架结构)

_self:自身窗口、原窗口

_top:顶窗口(框架结构)

第十六、十七、十八、十九节、超链接对象

一、超链接的对象

1、文字

2、图片

3、热点

4、空链接(#)

5、邮件链接:mailto:邮箱地址(可以利用菜单命令直接插入)

6、下载链接(浏览器打不开的内容即为下载链接)

7、锚点链接(链接到网页的具体位置)

步骤:(1)创建锚点(2)制作链接(#锚记)

隐藏锚点:编辑——首选参数——不可见元素

到此这篇网页制作代码模板免费版(做一个网页代码模板)的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章,希望大家都能在编程的领域有一番成就!

版权声明


相关文章:

  • 换国内ip地址(怎么换国内ip)2025-08-05 15:45:09
  • xd是什么英文缩写(xd是什么简称)2025-08-05 15:45:09
  • bt1120协议详解 422(bt1200dqt-2e)2025-08-05 15:45:09
  • 本机设置安装(安装设置怎么弄)2025-08-05 15:45:09
  • 二级域名解析网站原码(二级域名解析网站原码是多少)2025-08-05 15:45:09
  • ppppppppppppppp啥意思ppppppppp(pppp是什么意思啊)2025-08-05 15:45:09
  • 反编译exe文件工具(反编译 exe)2025-08-05 15:45:09
  • mhaal00b是多大内存(mha-al00c00b233是什么版本)2025-08-05 15:45:09
  • 双系统卸载win10系统(双系统如何卸载)2025-08-05 15:45:09
  • 打印控件未安装是什么意思(打印机显示打印控件未安装)2025-08-05 15:45:09
  • 全屏图片