网页设计LOGO目录页CONTENTSPAGE04软件安装系统要求01什么是DW02软件工作界面介绍03软件功能介绍05软件的基本使用3No.1什么是Dreamweaver1.什么是Dreamweaver?AdobeDreamweaver,简称“DW”,中文名称“梦想编织者”,是一款集网页制作和管理网站于一身的所见即所得网页编辑器,DW是第一套针对专业网页设计师特别发展的视觉化网页开发工具,利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。左侧是“DW”软件图标您记住这款软件了吗?1)大家都很困惑,DW是什么AdobeDreamweaver4No.1什么是Dreamweaver1.什么是Dreamweaver?2)DW有哪些版本?右侧为DW软件的历史版本,此软件分为Macromedia时代、Adobe时代以及现在的CC版本时代。每一个时代的软件都有其特色,每一个新版本的发布都比上一个版本有了更大的进步。5No.2界面介绍2.DW软件界面介绍1)启动版面安装后,每一次打开打开软件,它会自动跳出此版面。在该版面可以打开软件最近使用的文件类目或者新建不同类型的网页编辑窗口,也可以打开软件预设网页编辑模板。6No.2界面介绍2.DW软件界面介绍2)属性面板介绍属性面板会随着编辑的内容而变化,属性面板包含编辑的文字的所有内容,包括字体,颜色,大小等。单击向下拉菜单属性面板,。展开后,用户只要选择要编辑的对象,就可以对其属性进行编辑。用户对所有由启动面板弹出来的浮动面板在被打开后可以重新组合右侧图二为页面属性单击后的界面,可编辑5个类目图一图二7No.2文化知识概述2.DW软件界面介绍3)编辑窗口界面介绍浮动编辑栏目分为代码栏、设计栏,实时代码栏可以预览代码效果。点击拆分可以将视口分为代码预览和网页预览。网页预览快捷键为F12,网页预览是默认的windows浏览器。各个版本的浏览器网页预览情况不一样。建议软件外选择IE浏览器预览。浮动窗口上为工具栏菜单,用户可以根据需求进行工具栏的拖拽,方便用户使用。8No.2界面介绍2.DW软件界面介绍4)参数设置界面介绍工作环境参数设置利用“首选参数”对话框可以修改Dreamweaver的系统参数。选择菜单栏中的“编辑”“首选参数”菜单或按快捷键【Ctrl+U】可打开该对话框,如图所示可对多个界面参数进行设置,css样式也可以直接在界面设置相应内容。设置完后直接单击确定即可。9No.3功能介绍3.DW软件功能介绍1)自适应网格自适应网格版面,来创建跨平台和跨浏览器的兼容网页设计。直观地创建复杂网页设计和页面版面,无需忙于编写代码。2)改善FTP性能利用重新改良的多线程FTP传输工具节省上传大型文件的时间。更快速高效地上传网站文件,缩短制作时间。3)更新的实时视图使用更新的“实时视图”功能在发布前测试页面。“实时视图”现已使用最新版的WebKit转换引擎,能够提供绝佳的HTML5支持。4)每一个版本都有对应功能的更新与优化10No.4安装要求4.DW软件安装系统要求软件安装对电脑系统及硬件都有一定要求以DreamweaverCC为例Windows①Intel或AMD处理器②Windows7、Windows8、Windows10③512MB内存④1GB可用硬盘空间用于安装;安装过程中需要额外的可用空间(无法安装在可移动闪存设备上)⑤1024x768屏幕,16位显卡⑥DVD-ROM驱动器MacOS①Intel多核处理器②MacOSX10.5.8或10.6版③512MB内存④1.8GB可用硬盘空间用于安装;安装过程中需要额外的可用空间(无法安装在使用区分大小写的文件系统的卷或可移动闪存设备上)⑤1280x800屏幕,16位显卡DVD-ROM驱动器11No.5软件的基本使用5.DW的基本使用1)新建网页文件新建文件点击菜单栏的文件--新建,会出来一个新建文件窗口,选择新建文件的类型,系统默认是HTML文档,最后点击创建,就会出来一个HTML文档根据用户需求创建相应类型的网页文件,还可以对新建的网页文件进行格式限定,如左右侧栏目的改改变,标题固定。12No.5软件的基本使用5.DW基本使用2)站点文件的保存保存、重命名创建一个html标准格式的文件页面,默认的文件名是untitled1.html,点击文件--另存为,会弹出一个保存位置的窗口,文件名改为test.html,保存类型为AllDocuments(*.html;*.html;*.shtm;*)类型。点击保存按钮即可站点文件的命名不建议用中文,中文名字在使用ftp软件上传在网上容易出错。站点文件夹不建议存在桌面。13No.5软件的基本使用5.DW的基本使用3)网页内容的编写点击代码栏,在Body与Body之间为网页内容,Title与Title之间为网页标题.设计界面为网页预览界面。divh1Thisisaheading/h1h2Thisisaheading/h2h3Thisisaheading/h3/div输出的内容就为:Thisisaheading/h1/h2/h3均为控制字体大小的双标记具体文字大小可在页面属性及CSS格式中调整。14No.5软件的基本使用5.DW的基本使用4)网页内容的预览按F12键进行网站内容预览,也可以点击预览按钮进行预览浏览器的选择。在预览时尽量选择IE浏览器进行预览。不同浏览器的兼容视图不一样,不同电脑的预览情况也不一样。IE浏览器标准可以避免此类问题。由此根据网页的实际预览情况进行对网页美化加工,达到预期效果。谢谢观赏.请多指正*永善县电子商务公共服务中心*