dreamweaver html设计,Dreamweaver

Dreamweaver怎么使用框架结构快速制作网页?Dreamweaver制作网页的时候,表格布局已经不能实现网页的功能了,比如同一页面下有多个子页面时,就要使用框架结构来布局,下面我们就来看看Dreamweaver使用框架结构快速制作网页的详细教程,希望能帮到有需要的朋友。

1、打开Dreamweaver软件,设置好站点,建立新文件,类型为HTML,选择“新建”下的“更多”

15e5113eae1439020536956018ff02da.png

71140c377dcec51a61048e86d5438aee.png

2、选择示例中的页-框架页

e1673609f69c91f5b63300469e256f18.png

12a5a27b38da54d954515ba81a5707f4.png

3、选择自己所需要的框架结构,点击“创建”(此以上下结构为例)

b8e4b9efc7e2d7414d2613f99a26dcf4.png

efba777fc994c6829e0b711c46b3a0d0.png

4、新建好后,将编辑视图切换为“设计”,点击窗口-框架 ,打开框架操作面板

a767173a680afb1086d8a6baf7aadccd.png

4699c2a43f68837943789ebe6487ba62.png

5、选中框架操作面板中相应框架区域,可为此框架命名

cf0d8241a7871cb4f2a84e5fa0559969.png

51568dc1e1b219940e70f45d2279ae40.png

6、点击框架分界线

ab5110cc852663a900bf81ccdcda1f59.png

13f21b647e3dd2b88102e1ab6f96964c.png

7、点击文件-框架集另存为保存框架

44dda1e73aba135bbed56f19cfefb1ac.png

0bf1751e950491589d9c7690f32a8a40.png

8、在框架操作面板中选中相应框架,点击属性面板中“源文件”右侧的“浏览文件”指令,插入页面

98a73a107a4acb60c3fe4090d6b7a681.png

e2ef2b23646a41c3d40faa94f42192b2.png

9、用此方法完成所有框架页面的插入。完成操作后保存文件,按键在浏览器中预览文件

01e2dad29d44b188fed5e1db6ec4f71e.png

a2df558d13bc2ba2c923bf30413e5f43.png

以上就是Dreamweaver使用框架结构快速制作网页的详细教程,希望大家喜欢,请继续系统天地。

1、设计的目的 做个网站以纪念港珠澳大桥彰显大国基建魅力,为中国工程师点赞喝彩。港珠澳大桥此刻的美丽,以及无限的未来向往正是中国工匠人的工匠精神延续。 2、设计布局 主页设计布局是在网站的左上角是网站标题名称为港珠澳大桥、首页、项目简介、设计理念、设计特点、大桥影响、桥见美景共六大模块,点击相应的导航栏目页面跳转到相应位置。首页采用div+js+css来实现四张港珠澳大桥背景图的引入和隔一定时间实现循环自动来回切换背景图,通过js设置切换间隔,每张图的停留时间。网站中央是内容,分别包含五大板块,每个版块由不同的div块组成,右上角是主题,下面是详情的文字介绍,右边配上相应的图片,增加网站的观赏性,吸引性。港珠澳大桥美的恰恰是其在不同场景下的景色图。网站底部分别是网站版权介绍信息,采用居中透明显示,文字大小和样式用css来控制,美观大方。 3、网站具体设计过程 首先选定 本网页制作工具是端开发利器: WebStorm,创建端项目工程,并创建相应的文件夹,存放各个css、js,还有网页中用到的各种图片,以及除了主页面index.html之外的二级页面,其存放在html文件夹下,在各个二级页面与主页跳转的网页链接上采用相对路径而不是绝对路径,创建好的项目工程目录结构如下所示: 站点结构图: 首先设计网站主页也就是核心内容index.html。页面总体采用 CSS+DIV 布局,最外层DIV为框架。导航栏主要采用a标签以及span标签,并在a标签里面用锚点链接到其对应的模块位置,点击即可跳转到指定位置,使得网站更加人性化,方便展示内容
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值