Dreamweaver CS3网页设计与制作教程 第2版 教学课件 作者申莉莉教案第2章本地站点的规划和创建.ppt

《Dreamweaver CS3网页设计与制作教程 第2版 教学课件 作者申莉莉教案第2章本地站点的规划和创建.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第2章本地站点的规划和创建本章内容2.1规划站点----个人网站规划2.2创建本地站点2.3管理站点内容2.4制作个人网站首页2.5测试与发布2.6文件的上传和下载2.7习题第2页2.1规划站点----个人网站规划2.1.1规划站点结构2.1.2构建站点的整体风格2.1.3主页和其他页面的设计第3页2.1.1规划站点结构规划目录结构一般使用文件夹构建文挡的结构。首先创建一个根文件夹（根目录），然后创建多个文件夹，再将文档分门别类存储到相应的文件夹下。其次要按栏目内容建立子目次，对每个栏目都相应建立一个文件夹。目录名和

2、文件名，尽量使用英文或汉语拼音。第4页2.1.1规划站点结构2.规划链接结构网站的链接结构:内部链接和外部链接。第5页2.1.1规划站点结构3.规划模板和库的使用设计时使用模板功能取得一致效果。同时，使用模板和库，可以在不同的文档中重用页面布局和页面元素，给网页的维护带来很大的方便。对于经常使用的对象，应该先设计好该元素，并把它存入到库中。第6页2.1.2构建站点的整体风格1．网站的标志（LOGO）标志是网站的特色和内涵的集中体现，标志的设计和创意应当来自网站的名称和内容。常用方式是用网站的英文名称作标志，采用不同的

3、字体、字母的变形及图像组合而成。第7页2.1.2构建站点的整体风格2．设计网站色彩“标准色彩”是指能体现网站形象和延伸内涵的色彩，应用于网站的背景，主菜单和主色块。给人以整体统一的感觉。一般来说，一个网站的标准色彩不超过3种，其它色彩只是作为点缀和衬托。第8页2.1.2构建站点的整体风格3．设计网站字体标准字体是指用于标志，标题，主菜单的字体。一般网页默认的字体是宋体。为了体现站点的风格及网站所表达的内涵，可以选择其他更贴切的字体。第9页2.1.2构建站点的整体风格4．设计网站广告语网站广告语是网站的精神、主题与中心

4、，用一句话或者一个词进行高度概括。富有气势的广告语，进行对外宣传，可以收到比较好的结果。第10页2.1.3主页和其他页面的设计1.T型布局T结构指页面顶部为横条网站标志或广告条，下方左面为主菜单，右下方显示具体的网页内容。因为菜单栏背景较深，整体效果类似英文字母T，所以称之为T结构布局。第11页T型布局：第12页2.1.3主页和其他页面的设计2.口型布局口型布局常见的形式是页面上下各有一个广告条，左面是主菜单，右面是友情连接等，中间是主要内容，形状像一个“口”字。第13页口型布局第14页2.1.3主页和其他页面的设计

5、3.三型布局这种布局特点是将页面整体分割为三部分，页面上横向采用两条色块，色块中有时放置广告条。第15页三型布局第16页2.1.3主页和其他页面的设计4.对称对比布局此布局结构采取左右或者上下对称的布局，一半深色，一半浅色，一般用于设计型站点。第17页对称对比布局第18页2.1.3主页和其他页面的设计5.POP布局POP引自广告术语，是指页面布局像一张宣传海报，以一张精美图像作为页面的设计中心。常用于时尚类站点。第19页POP布局第20页2.2创建本地站点2.2.1利用建站向导创建站点2.2.2利用增强方式创建站点第

6、21页2.2.1利用建站向导创建站点（1）打开Dreamweaver，在网页编辑窗口中选择“站点”→“新建站点”命令。（2）选择是否需要使用服务器。（3）输入文件存储位置。（4）选择想要连接的远程服务器类型（5）选择是否允许合作伙伴能够同时编辑文件。（6）查看所创建站点的基本信息。（7）选择“站点”→“管理站点”命令可见建立的站点。第22页2.2.2利用增强方式创建站点（1）选择“站点”→“新建站点”命令，系统弹出定义站点的对话框。（2）单击【高级】选项卡，设置本地信息。（3）单击“完成”按钮。选择“站点”→“管理站

7、点”命令可见建立的站点。第23页2.3管理站点内容2.3.1编辑站点属性2.3.2操作站点文件第24页2.3.1编辑站点属性选择“站点”→“管理站点”命令，系统弹出“管理站点”面板，选择要进行编辑的站点名称。第25页2.3.2操作站点文件选择“窗口”→“文件”命令，弹出站点窗口。单击选择“本地视图”中所创建的站点，单击右键弹出快捷菜单。第26页2.4制作个人网站首页2.4.1页面属性2.4.2表格设计2.4.3内容填写2.4.4添加链接和交互第27页2.4.1页面属性单击鼠标右键，从弹出的菜单中选择“页面属性”。第2

8、8页2.4.2表格设计选择“插入记录”→“表格”命令。第29页2.4.3内容填写选择“插入记录”→“图像”命令，插入图像，并输入文本。在插入文本时可以适当地运用CSS，这样不仅可以减少网页的代码，也比较容易更新。第30页2.4.4添加链接和交互1．添加文本链接选中相关的文字，在属性面板的链接文本框中输入文件名。2．添加电子邮件链接选择“插入记录