网页设计已经成为了一个热门的行业。Dreamweaver作为一款专业的网页设计软件,凭借其强大的功能和易用性,深受广大设计师的喜爱。本文将从Dreamweaver的起源、特点、应用等方面进行探讨,以期为网页设计爱好者提供一些有益的参考。
一、Dreamweaver的起源与发展
1. Dreamweaver的起源
Dreamweaver最早由Macromedia公司于1997年推出,是一款基于Windows和Mac操作系统的网页设计软件。随后,Adobe公司于2005年收购了Macromedia,将Dreamweaver纳入旗下产品线。
2. Dreamweaver的发展
自Dreamweaver诞生以来,其功能不断完善,版本不断更新。从最初的DW1.0版本,到如今的DWCC(Creative Cloud)版本,Dreamweaver始终保持着行业的领先地位。
二、Dreamweaver的特点
1. 易用性
Dreamweaver采用直观的界面设计,用户可以轻松上手。无论是初学者还是资深设计师,都能在短时间内掌握其基本操作。
2. 功能强大
Dreamweaver集网页设计、开发、测试于一体,支持HTML、CSS、JavaScript等多种编程语言,满足设计师在不同阶段的创作需求。
3. 高效协作
Dreamweaver支持多人协作,便于团队成员共同完成项目。Dreamweaver还提供了多种版本控制工具,确保项目进度和质量。
4. 丰富的模板资源
Dreamweaver内置了大量的模板资源,用户可以根据实际需求选择合适的模板进行快速搭建,提高工作效率。
5. 跨平台兼容性
Dreamweaver支持Windows和Mac操作系统,且在两种操作系统上均能保持良好的兼容性。
三、Dreamweaver在网页设计领域的应用
1. 前端开发
Dreamweaver支持HTML、CSS、JavaScript等多种前端开发技术,使设计师能够快速构建美观、实用的网页。
2. 后端开发
Dreamweaver内置了PHP、MySQL等后端开发工具,帮助设计师实现动态网站的开发。
3. 移动端设计
Dreamweaver支持响应式设计,使网页能够适应不同分辨率的移动设备,满足用户在不同场景下的需求。
4. 教育培训
Dreamweaver是国内外众多高校的网页设计课程所采用的软件,有助于培养新一代的网页设计人才。
Dreamweaver作为一款专业的网页设计软件,凭借其易用性、功能强大、高效协作等特点,在网页设计领域具有广泛的应用。随着互联网技术的不断发展,Dreamweaver将继续引领网页设计潮流,为设计师们提供更多精彩的作品。
1. 主题自定,但是主题范围不要定得太大;
2. 具有多个页面(5页以上),可以充分体现网站的超链接特性;
3. 有一定独特创意,特点鲜明,形式可以多样化,能表现出一定风格,可以吸引访问者;
4. 整体结构清楚,内容围绕主题,比较丰富;
5. 简洁美观,色彩搭配和谐(可以考虑使用一些现有模板)。
6、 所有的相关文件(网页、图片等)都放在该文件夹底下(可以有子文件夹)。
7、 首页的文件名一般为index.htm
8、 网站内部链接需要使用相对路径进行链接
最好看上去比较简单的啊,像新手做的
dreamweaver网页制作步骤如下:
一、定义站点
1、 在任意一个根目录下创建好一个文件夹(我们这里假设为E盘),如取名为MyWeb。
备注:网站中所用的文件都要用英文名。
2、打开Dreamweaver,选择“站点—新建站点”,打开对话框。在站点名称中输入网站的名称(可用中文),在本地根文件夹中选择刚才创建的文件夹(E:web)。然后确定即可。
备注:再次打开Dreamweaver,会自动找到刚才设立的站点。如果有多个站点,可以在菜单“站点—打开站点”中去选择。
二、创建页面
1、在本地文件夹E:\MyWeb下面的空白处,按右键选“新建文件”,这样就建好了一个页面,默认的文件名为untitled.htm。htm就表示这个网页文件是一个静态的HTML文件。给它改名为index.htm。
网站第一页的名字通常是index.htm或index.html。其它页面的名字可以自己取。
2、双击index.htm进入该页面的编辑状态。在标题空格里输入网页名称,按右键选页面属性,打开“页面属性”窗口。在这里可以设置网站的标题、背景颜色或背影图像,超级链接的颜色(一般默认即可),其他都保持默认即可。
3.此时光标位于左上角,可输入一句话,如“欢迎来到我的主页”。选取文字,用菜单“窗口/属性”打开属性面板,选取文字大小为6,再使文字居中,然后在文字前用几个回车使其位于页面中间。
4.如要选取字体,则选择字体中的最后一项:编辑字体列表。然后在对话框中选+号,接着在“可用字体”栏中选择需要加入到字体列表中的一种字体,点击中间的按钮就可以加入了。
在网页上最常用的是宋体字。不要将特殊的字体加到列表中使用,因为别人电脑上未装就看不到。如果需要用的话,要做成图片后再使用。
在网页上打入空格的办法是:把输入法调为全角。
在网页上换行的办法是:shift+Enter。只按Enter则为换段。
三、为页面添加图片
1、在本地文件夹E:\MyWeb下面的空白处,按右键选“新建文件夹”,这样建立了一个文件夹,用它来放图片,可以改名为tu或pic或images都可以。
2、用菜单“窗口/对象”打开对象面板,点击“插入图像”,在对话框里选要插入的图片。如果会出现对话框:“你愿意将该文件**到根文件夹中吗?”,必须选“是”,然后将它保存到刚建好的文件夹里。
3、选中该图片,打开属性面板,可以在上面为图片取名,重新设置图片的高、宽,拖住图片角上的点可以变大小。按住shift键,再拖动角上的点,可以使图片保持宽高比例拉伸。如要恢复这原始大小,则单击右下角的“重设大小”按钮。
4、 “链接”可以直接在这里输入地址。“替代”是图片的说明,即鼠标指向图片所显示的文字;“边框”是图片边框宽度,“对齐”是对齐方式。
四、添加超级链接
1、为文字添加链接。
比如,在页面上输入“我的文章”,然后将其选中,打开属性面板,在“链接”一格中,选择它所要链接到的页面即可。后面一格“目标”我们一般常用的是self即打开的新窗口代替了现开的窗口;或是选择blank即打开新窗口。
2、为图片添加链接
与上面文字的链接同理,插入图片,然后在属性面板中的链接一格中选择即可。
图片可以创建不同的多个链接。方法如下:
在属性面板中的“地图”一项下面有一些图形,比如点击方形,光标变成十字,在图片上画一个蓝色矩形的热区,此时在属性面板上可以为这个热区设置链接地址,鼠标指向会显示。同样,再用圆形设置一个热区,就可以再为该图片设置其他链接了。
3、添加E-mail链接
选中需要添加E-mail链接的文字或图片,打开属性面板,在“链接”一格中输入填写邮件地址。格式如下:mailto:邮件地址。注意中间不空格。
4、如果链接到浏览器无法打开的文件,例如exe、Zip等文件,那么浏览者在点击这个链接的时候,就会实现文件下载、或是****的功能。
五、表格的使用
1、点击插入/表格,打开表格面板进行设置。行数、列数、宽度、边框等,“单元格填充”为单元格内侧与内容的距离;“单元格间距”为单元格之间的距离,单位均为像素。
2、插入表格后,在表格的边框上点击一下,可以全选整个表格。然后在下面的属性面板里可以进行各种设置。
3、把光标移到其中一个单元格,此时看到的属性面板,就是单元格的属性面板。也可以进行各种关于单元格的操作。如背景色、背景图、边框、合并、拆分等。
六、关于表格的其他操作
一制作细线表格 原理:
1、选中整个表格,设置其背景为黑色(该颜色即表格线的颜色)。
2、选中所有单元格,设置其背景为白色。
二自动格式化表格
1、先制作好一张表格,然后选中。
2、选菜单中的命令/格式化表格。即可以其中选择预设好的一些表格样式。
三一像素分割条
1、插入一个1行1列,宽为200像素,边框边距均为0的表格。
2、选中表格,设置表格高为1像素,并设置一个背景色(即所要的线条颜色)。
3、切换到代码和设计窗口,将代码<td> 删除。
七、用表格构建完整的页面
一网页顶部(一般包括图标、广告、导航菜单)
1、创建一个1行2列,宽为760像素,边框及边距均为0的表格。
2、选中表格,设置排列方式为居中对齐,背景色为#3366CC。
3、将光标置于左边单元格中,设置其水平排列为左对齐,垂直排列为顶端对齐,然后插入一张图像,一般在此插入的是网站的图标,即logo。
4、将光标置于右边单元格中,设置其宽度为500,水平排列为居中对齐,垂直排列为中间,然后插入图像,一般是网页广告,即banner。
5、将光标置于刚完成的表格之后,插入/表格,创建一个1行1列,宽为760像素,边框及边距均为0的表格。
6、选中刚创建的表格,设置排列方式为居中对齐,背景色为#005173。
7、在该表格中依次插入多个图像,作为导航条菜单。
二网页中部(左边栏目列表、中间网站新闻、右边栏目列表)
1、 在导航条表格后面,插入/表格,创建一个1行3列,宽为760像素,边框及边距均为0的表格。并设置排列方式为居中对齐,背景色为#FFFFFFF。
2、 将光标置于左边单元格中,设置其宽度为18%,水平排列为居中对齐,垂直排列为顶端对齐,然后插入一张图像,插入一个导航条。
3、 将光标置于刚插入的图片后,插入/表格,插入一个12行1列,宽为90%的表格。设置其单元格间距为1,背景色为#CCCCCC。
4、 将光标放在表格第一个单元中,设置其高为20,背景色为#FFFFFF。插入/图像,插入一个导航文字前面的小点。同样设置其他11个单元格,这样左边的栏目分类列表就完成了。
5、 将光标置于主体表格的中间单元格中,设置其宽度为66%,水平排列为居中对齐,垂直排列为顶端对齐,然后插入/图像,插入一个导航条。
6、 将光标置于图像后,插入/表格,插入一个4行1列,宽为95%的表格。设置其单元格间距为1,背景色为#CCCCCC。
7、 将光标置于表格的第一个单元格中,拖动鼠标,将4个单元格都选中,设置高为60,背景色为#FFFFFF。
8、 将光标置于主体表格右边的单元格中,设置其宽度为16%,水平排列为居中对齐,垂直排列为顶端对齐,插入/图像,插入一个导航条。
9、 将光标置于图像后,插入/表格,插入一个7行一列,宽为90%的表格。设置其间距为1,背景色为#CCCCCC。
10、按住Ctrl键,用鼠标点击刚插入的表格的第1、3、5、7单元格,然后设置它们的高为55,背景色为#FFFFFF。
11、选中第2、4、6单元格,设置其高为6,背景色为#FFFFFF。
12、切换到源代码窗口,将第2、4、6单元格中的空格符号“ ”删除。
三网页底部(一般包括版权信息及其他相关内容)
1、 将光标置于主体表格后,插入/表格,创建一个2行2列,宽为760像素,边框及边距均为0的表格。
2、 选中表格,设置排列方式为居中对齐,背景色为#3366CC。
3、 将光标置于表格第1行的左边单元格中,设置其宽度为50%,水平排列为默认,垂直排列为基线,背景色为#FFFFFF,然后输入版权信息,内容颜色随便。
4、 将光标置于表格第1行右边单元格中,插入/图像,插入一个圆角图像,在它后面输入Email字样,设置其大小和颜色为1和#FFFFFF。
5、 插入/表单对象/文本域,插入一个文本域,宽度可以随意。
6、 插入/图像,插入一个GO的图像。
7、 设置页属性。点击菜单修改/页面属性,在标题一栏中输入标题,并选择背景图像,将顶部边界设为0。
***将整个网页分部分放到不同的表格中组合而成,还可以加快浏览器读取页面的时间。;因为浏览器是读完整个表格后才显示内容的,所以最好不要框在整个一个表格中。
八、用布局表格构建完整的页面
1、 单击插入/布局,里面的布局视图按钮,就切换到布局视图状态(默认为标准视图)。也可以用菜单里的查看/表格视图/布局视图来进入。
2、 先单击绘制布局表格按钮,然后在页面中像绘图一样创建出布局表格。
3、 就像上一个例子一样,先绘制好网页的顶部,再中部,再底部的大表格。
4、 再单击绘制布局单元格按钮,然后在已经绘制好的布局表格中,再绘制布局单元格。
5、 返回到标准视图,在已经划分好的表格里,再插入嵌套的小的表格,把页面再细化,就可以完成整个页面的设计了。
注意把整个页面都放在一个大的布局表格中,因为这样的网页浏览速度会很慢。应该按照页面的版面和内容划分出几个布局表格,然后在其中分别插入布局单元格。
九、层的使用
1、点击插入/层。也可以点击图标,然后拖动鼠标创建出一个层。
3、选中创建的层,看属性面板。“层编号”和“标签”都使用默认即可。“层编号”是编程时需要用的,我们现在一般不用。“上”即距页面上边界的距离;“左”是距左边界的距离。“z轴”是层的顺序,数字大的叠加在数字小的上面。
如不设置颜色时,层是透明的。
4、点中层左上角的小方框可以随意拖动层,大小也可以调节。
5、“溢出”一栏中,当文字多于层的大小时,visible(超出的部分照样显示)、hidden(超出部分隐藏)、scroll(不管有否超出,都显示滚动条)、auto(有超出时才出现滚动条)。
6、点击菜单窗口/其他/层,此时将出现层管理窗口。可以在其中修改层的名称和Z轴值,也可以点击眼睛图标使层可见或不可见。还有一个防止重叠的选项。
7、层的对齐。按住shift键,同时选中几个层。然后用修改/对齐,用这里的选项。
8、嵌套层。⑴首先在文档中插入一个层。⑵将光标置于该层内,然后继续插入一个层,就得到了嵌套层。⑶里面的叫子层,外面的父层。它们的Z轴顺序是一样的。拖动父层时,子层也会相对移动。移动子层时,父层不会随之移动。
十、了解时间轴
1、点击菜单中的插入/层,插入一个层。
2、在层中插入图片,如一张飞机的图片。(这里的图片也可以是一张小动画的.gif图像)
3、点击菜单中的窗口/其他/时间轴,打开时间轴窗口。
4、选中页面上创建的层,用鼠标按住层左上角的小方框图标,将层拖放到时间轴的第1帧中。这时自动创建了一个长度为15帧的时间轴。
5、选中时间轴上的第1帧,将页面中的层拖放到页左上角,即动画开始时的位置。
6、选中时间轴上第15帧,可以拖动该帧至任意长度,如30帧。
7、选中第30帧,将层拖放到页面的右下方,此时窗口中显示出层从第1帧到第30帧的运动轨迹。(此时运动为直线)
8、可以点中第15帧,右键选“增加关键帧”,在选中第15帧的状态下,拖动层到页面中下方。
9、勾选“自动播放”项。
十一、制作滚动公告牌
1、在页面上插入一个层,然后为层设置一个背景,作为公告版的框架。
2、然后在创建的层中插入嵌套层,将嵌套层移动到父层的下方。
3、在嵌套层中输入文本,并将其居中排列。
4、打开时间轴面板,将子层作为对象添加到面板中。
5、为子层创建一个向上移动的路径,将其移动到父层的上方。
6、拖动最后一关键帧,增长动画时间,然后勾选“自动播放”和“循环”两项。
7、选定父层,在其属性面板中将“溢出”属性设置为“hidden”。
总结:
dreamweaver是一款很强大的网页制作软件,还有很多功能和制作方法要自己不断地摸索,这样做出来的网页才会更加好
一、 单项选择题
1. Internet上的WWW使用的主要协议是( )
A. NetBeui B. HTTP C. **TP D. Telnet
2. 浏览网页,是属于Internet所提供的( )服务。
A. FTP B. E-mail C. Telnet D. WWW
3. 将网页上传到Web服务器的过程中,使用Internet所提供的( )服务。
A. FTP B. HTTP C. **TP D. Telnet
4. 以下扩展名中不表示网页文件的是( )
A. .htm B. .html C. .asp D. .txt
5. 构成Web站点的最基本单位是( )。
A. 网站 B. 主页 C. 网页 D. 文字
6. 网页最基本的元素是 ( )
A. 文字与图像 B. 声音 C. 超链接 D. 动画
7. 以下不属于网站的建设过程阶段的是( )
A. 规划和准备 B. 网页制作 C. 网站运营 D. 后期维护
8. 下面不可以用来处理图形的软件是( )
A. Fireworks B. Flash C. FrontPage D. Photoshop
9. 网页中自动播放声音文件的方法是在页面文件中加入( )标记。
A. <bgsound> B. <sound> C. <img> D. <music>
10. 以下说法中,正确的是( )
A. p标记符与br标记符的作用一样 B. 多个p标记符可以产生多个空行
C. 多个br标记符可以产生多个空行 D. p标记符的结束标记符通常不可以省略
11. HTML文件中,下面那一个标记中包含了网页的全部内容( )
A. <center>…</center> B. <pre>…</pre>
C. <body>…</body> C. <br>…</br>
12. HTML网页可以用以下( )工具制作。
A. Word B. 记事本 C. Dreamweaver D. 以上均可
13. 在表单中需要把用户的数据以密码的形式接受,应该定义的表单元素是( )
A. <input type=text> B. <input type=password>
C. <input type=checkbox> D. <input type=radio>
14. HTML语言中,设置背景颜色的代码是( )
A. <body bgcolor=?> B. <body text=?> C. <body link=?> D. <body vlink=?>
15. 在Dreamweaver中,下面关于嵌套层的说**确的是( )
A. 子层可以超出母层 B. 子层可以完全在母层之外
C. 子层不可以超出母层 D. 以上说法都不对
16. 在Dreamweaver中,创建E-mail链接,在链接栏中使用的语句格式是( )
A. to:ljw@sina.com B. link:ljw@sina.com
C. mail:ljw@sina.com D. mailto:ljw@sina.com
17. 在Dreamweaver中,下面对象可以添加热点的是 ( )
A. 帧 B. 文字 C. 图像 D. 任何对象
18. CSS表示的是 ( )
A. 层 B. 行为 C. 样式表 D. 时间线
19. 在Dreamweaver中,设置文本在图像的右侧自动换行,应选择的对齐方式是( )
A. 左对齐 B. 底部 C. 绝对中间 D. 右对齐
20. 在Dreamweaver中,默认情况下按住下面( )键可以建立一个嵌套层。
A. Alt B. Shift C. Ctrl D. Ctrl+Alt
21. 利用( )对象可以存储特定的客户端信息。
A. response B. request C. session D. server
22. 下列( )是ADO组件的更新语句。
A. Insert B. update C. delete D. open
23. 利用ADO组件建立数据库连接时,连接字符串中DSN的值表示( )
A. 数据源的名称 B. 服务器域名解析 C. 数据库的名称 D. 数据表名称
24. 利用Connection对象的Open()方法打开一个连接后,需要用( )的方法关闭连接。
A. Lock() B. Close() C. Shut() D. Execute
25. Session对象的默认有效期为( )min
A. 10 B. 15 C. 20 D. 30
26. 下面关于Active Server Pages所使用的主要脚本语言的说**确的一项是( )
A. Active Server Pages使用的主要脚本语言是PHP语言
B. Active Server Pages使用的主要脚本语言是JavaScript和VBScript
C. Active Server Pages只能使用一种脚本语言—JavaScript
D. Active Server Pages只能使用一种脚本语言—VBScript
27. 在ASP内建对象中,必须要有Lock和Unlock方法以确保多个用户无法同时改变某一属性的对象是( )
A. Response B. Session C. Request D. Application
28. VBScript调用过程时使用的关键字是( )
A. Parameter B.Call C.Dim D. Public
29. 在表单的相关标记中,表示提供给用户一个可以复选的选项的标记为( )
A. INPUT TYPE=CHECKBOX B. INPUT TYPE=SUBMIT
C. INPUT TYPE=RESET D. INPUT TYPE=RADIO
30. 可以在HTML文档中加上阅读者看不见的注释,句法是( )
A. 以“<!――”标记开始注释,以“->”标记结束
B. 以“{”标记开始注释,以“}”标记结束
C. 以“<*”标记开始注释,以“*>”标记结束
D. 以“/*”标记开始注释,以“*/”标记结束
二、多项选择题
在每小题列出的五个备选项中至少有两个是符合题目要求的,请将其代码填写在题后的括号内。错选、多选、少选或未选均无分。
1. 基本的HTML表格标记有( )
A.<TR> </TR> B.<TD> </TD>
C.<P> </P> D.<TABLE> </TABLE> E.<TH> </TH>
2. 为了在单元中对齐表格元素,可以使用的属性有( )
A.VALIGN B.TABLE C.TITLE D.ALIGN E.BODY
3. 在BODY的属性中,和颜色有关的属性包括( )
A. ALINK B. BGCOLOR C. LINK D. TEXT E. VLINK
4. 属于比较运算符的是( )
A.== B.= C.!= D.<= E.>
5. “事件”是指一系列对页面进行的动作,下列属于事件的有( )
A. onfocus B.onload
C. onmouseover D. onstay E. onsubmit
三、填空
1. 在ASP内建对象中,用来访问使用HTTP请求传递的信息的对象是 。
2. WWW采用 的工作模式。
3. 网站的建设过程可以分为三个阶段: 、 和后期维护阶段。
4. 在制作网站的具体页面之前,首先需要创建一个本地 。
5. 在Dreamweaver中,时间轴只能对 起作用。
6. <hr width=50%>表示创建一条 的水平线。
7. 在Dreamweaver中,能够设置为密码域的表单控件是 。
8. 若要验证HTML表单数据,表单中至少包含一个 及一个 按钮。
9. 在Dreamweaver8中,定义的CSS样式类型有3种: 、标签和高级。
四、论述题
1. 简述WWW的工作原理。
2.简述网站建设的基本思路。
上机内容(网页设计大作业)
用FrontPage 2003 制作一个链接层数不少于2层、网页数不少于6页的个人网站,大小一般不超过5MB.网站的主题内容自定。制作完成后将以自己的“学号-姓名”为名的网站文件夹压缩后上交到中自己班级文件夹内相应的作业项内。用户名和密码均为zwcs。
具体要求:
艺术性:美观、大方、有吸引力。
技术性:在不影响整体效果的前提下,尽可能多的使用本软件的技术。
实用性:使用方便,有一定的知识性、趣味性。
制作思路
一.确定主题:(自定)
比如《我的空间我作证》、《我的风采》、《我的故乡》、《甬城交通》。
二.绘制页面草图:
参照几种常见的构图布局(左右对称结构、“同”字型结构、“回”字型结构、“匡”字型结构、自由式结构等)画出页面草图。
三.素材收集与整理:
图片、背景音乐、文字(将Word文档、Excel文档、PowerPoint文档另存为Web文档)、按钮等。
四.网页制作:(以空白站点起建)
1.创建存放个人网站的文件夹(本例为 学号-姓名 如:2009010001-张三
2.新建网站:空白网页,原来做过一次网页的用打开网站
3.制作主页:主页必须取名为index.htm,并且有可以链接到下面页的每一个超链接
4.制作其它网页(需保存后方可在文件夹列表中显示)
5.建立网页之间的链接,原先做好的个人自我介绍请作为其中一个网页给予连接。
五.预览调试:
1.浏览网页最终效果,保存后按f12。
2.发布到Internet:可在网易网站上申请个人空间,上传到他的服务器上,供“网民”浏览。
文章已关闭评论!
2025-05-09 23:05:13
2025-05-09 22:45:22
2025-05-09 22:33:25
2025-05-09 22:22:51
2025-05-09 22:01:11
2025-05-09 21:15:02
2025-05-09 21:02:22
2025-05-09 20:43:13