《网页制作》PPT课件.ppt

《《网页制作》PPT课件.ppt》由会员分享，可在线阅读，更多相关《《网页制作》PPT课件.ppt（33页珍藏版）》请在三一办公上搜索。

1、,网 页 制 作,-Dreamweaver,昝玉成,网站、网页、主页,网站*网站是由一系列相互链接的网页文件组成的有机集合。网页*静态网页*动态网页主页（index.htm或index.html）,网页布局,网页标题网站标识（Logo）页眉（导航条）网页内容页脚（联系方式、版权信息等）,网页基本元素,文本图片（jpeg,png,gif）超级链接*内部链接*外部链接音频（mp3,midi,wav）视频（real或media）动画*gif动画*flash动画表单,设计网站,网站定位（题材和内容、网站域名、网站名称）网站风格（版面布局、浏览方式、文字等）网站形象*标识logo（网站特色、内涵集中表现

2、）*色彩*字体*标语网站栏目网站目录链接结构,网站开发流程,定义站点建立网站结构设计和制作主页制作其他页面网站测试网站发布和维护,网站开发工具,FrontPageDreamweaver,Dreamweaver简介,Dreamweaver 8是美国Macromedia公司出品的一款网页编辑工具，它集网页制作和网站管理于一身，是专门为网页设计者开发的可视化网页编辑工具。利用它设计的网页可以跨越平台和浏览器限制，使得它也成为目前最受欢迎的工具软件之一。,Dreamweaver工作区布局,创建站点,（1）执行【站点】-【新建站点】命令，再选择“基本”选项卡，如图下图所示，把“您打算为您的站点起什么名字

3、？”项的“未命名站点 1”改为所需要的名字，中文英文均可，比如本例中输入“myweb”作为网站名字，实际上只起个标签的作用，完全不影响网页显示的内容。,创建站点,（2）单击“下一步”按钮，会显示如下图所示的对话框“您是否打算使用服务器技术，如ColdFusion、asp、jsp 或php?”本书主要讲解静态网页设计技术，所以选择第一项“否，我不想使用服务器技术。”项，如果读者以后学习服务器端编程语言，那就要选择第二项了。,创建站点,（3）单击“下一步”按钮，会显示如下图所示的对话框“在开发过程中，您打算如何使用您的文件？”按默认选项，即选择“编辑我的计算机上的本地副本，完成后再上传到服务器（推

4、荐）”。单击“您将把文件存储在计算机上的什么位置？”右侧的文件夹按钮，设置本地站点。,创建站点,（4）在打开的“选择站点 myweb 的本地文件夹”项中，选择本地文件夹位置，比如E:myweb，选择“myweb”文件夹，单击“打开”按钮，如下图所示。,创建站点,（5）单击“下一步”按钮，会显示如下图所示的对话框“您如何连接到远程服务器？”选择“无”项。,创建站点,（6）单击“下一步”按钮，出现站点定义的总结信息，包括本地信息、远程信息、测试服务器信息等，如下图所示。,创建站点,（7）单击“完成”按钮，这样站点定义就完成了。在Dreamweaver屏幕右侧的文件面板中可以看到刚刚创建的本地站点，

5、如左图所示。执行【站点】-【管理站点】命令，打开“管理站点”对话框，可以看到如右图所示的“myweb”标签，它就是刚刚创建的本地站点，可以单击“编辑”按钮对它的一些选项进行更改。,文档的创建和保存,启动Dreamweaver，选择【创建新项目】-【HTML】项，如下图所示。执行【文件】-【保存】命令，然后输入要保存的文件名如：index（扩展名“.html”可以不加，保存时系统会自动加上的），然后单击“保存”按钮。系统会自动保存到上一节创建的站点文件夹下。,预览网页,按F12键进行网页预览，预览前提要保存。或按下图进行预览。,网页布局,框架 在“插入”栏的“布局”类别中单击“框架”按钮上的箭头

6、选择框架。,网页布局,表格 Dreamweaver中表格除了做一般表格使用外，表格最主要的作用就是对网页进行布局。,网页布局,插入表格 执行【插入】-【表格】命令或在“插入”栏的的“常用”类别中，单击“表格”按钮。显示“表格”对话框，如下图所示。,网页布局,格式化表格 选中插入的表格，在属性面板中进行设置。,在文档中输入文本,在Dreamweaver中输入文字可不象Word那样随心所欲，输入文本需要注意以下问题：*换行：按快捷键【Shift+回车】*分段：直接按快捷键【回车】*输入空格：第一种方法按快捷键【Ctrl+Shirt+Space】第二种方法输入法处于“全角”模式时输入空格。,插入字符

7、,执行【插入】-【HTML】-【特殊字符】命令，来插入所需的字符，如下图所示。最快捷的方法是：在“插入”栏的“文本”类别中单击“字符”按钮上的箭头，然后选择所需的字符。插入的字符可以为：不换行空格，货币符号，版权信息等。当然也可以插入其他字符，或者执行【插入】-【HTML】-【特殊字符】-【其他字符】命令来打开“插入其他字符”对话框。,创建项目列表和编号列表,列表可以使网页要显示的结构和内容更加清晰。在Dreamweaver中创建列表非常简单，直接选中文字或在文字前面定位，单击属性面板中的“项目列表”或“编号列表”按钮即可。但是注意一点：列表项都必须为段落文本格式，不是的话必须进行转换（多数初

8、学者容易在这里出错!），正确方法是直接在“文本”这一行后面定位光标，然后按回车键就可以实现分段了。,格式化文本,使用文本属性面板或“文本”菜单或“文本”工具栏，可以方便地进行文本的格式设置。文本属性面板显示文档中被选中文本的格式属性。可以在文本属性面板中更改格式。Dreamweaver默认的属性面板即是文本属性面板，如下图所示。如果没有显示属性面板，可以通过执行【窗口】-【属性】命令打开它。,添加字体,如果是第一次安装Dreamweaver，会发现中文字体非常少，选择字体下拉列表框中的“编辑字体列表”项，这时弹出“编辑字体列表”对话框，如左图所示。在“可用字体”选项中选择一种字体比如“黑体”，

9、单击 按钮，然后单击“确定”按钮，就可以把“黑体”字体加入字体列表中了，如右图所示。,创建图像目录,在站点目录下建立一个图像目录，比如“images”，方法是：在文件面板中选中站点“eshop”（“商城”为站点标签），单击鼠标右键，执行【新文件夹】命令，。然后把文件夹名称“untitled”改为“images”即可，如下图所示。,插入图像,执行【插入】-【图像】命令，或者在“插入”栏的“常用”类别中单击图像图标。打开“选择图像源文件”对话框，如下图所示。找到所需的图像后，单击“确定”按钮。,修改图像,图像插入到网页中后，不一定完全符合要求，还需要对它进行修改加工。选中所要修改的图像，用图像属性面板进行编辑，如下图所示。,超级链接,制作内部链接*选择要链接的文本或图像*在“属性面板”的“链接”项输入“网页名称”或选择网页文件制作外部链接*选择要链接的文本或图像*在“属性面板”的“链接”项输入“网址”例如：制作邮件链接*选择要链接的文本*在“属性面板”的“链接”项输入“mailto：邮箱地址”例如：,请各位批评和指正!,谢谢大家!,