《网络广告设计》第七章 网站页面宣传广告设计与制作.pptx

;;;在Dreamweaver中，表格的操作非常灵活，对于初学者来说，有一些典型问题需要注意：;;使用CSS样式的优势在于：;;超链接按源端点分;超链接按目标端点分;为了更清晰地表示超链接，特别是文本超链接以及它们的链接状态，在网页中可以使用不同的颜色对超链接及它们的不同状态进行显示。;;;（三）统一性原则;;;;;网页设计的对象不是一个个孤零零的页面，因为页面内所使用的图片、声音、视频等都是链接进去的，不会被直接保存在页面文件自身内，而且页面和页面之间还存在着超链接的关系，因而它们之间是一个完整的整体。

在视觉设计中，国内制作网页使用最广泛的软件是AdobeDreamweaver，下面就用这个软件完成“视觉中国”网站首页的设计与制作。;;（4）选择左侧【高级设置】选项卡，默认进入【本地信息】子选项卡，在【默认图像文件夹】项内选择或键入“E:\adweb\images\”，【链接相对于】设置为【文档】，如图所示。;（5）选择左侧的【服务器】选项卡，单击下方的“+”按钮新增一个服务器设置，在弹出的子选项卡中（默认为【基本】选项卡）设置【服务器名称】为任意名，【连接方法】为【本地/网络】，【服务器文件夹】为“E:\adweb_remote\”，【WebURL】为“http://localhost/”，其他使用默认值，如图所示。;选择【基本】选项卡旁边的【高级】选项卡，设置【服务器模型】为“ASP.NETVB”（该项选择需要向合作的程序员咨询，站点的数据库或编程使用哪种语言则选择相对应的服务器模型，本例不涉及数据库，因而随意选择了一个主流语言），其他保持默认设置。其他选项卡同样保持默认设置即可。;;（1）打开Dreamweaver软件，确认站点已经设置完成（默认进入上次编辑的站点）。执行【文件】→【新建】命令，创建一个空白的HTML页面。执行【文件】→【另存为】命令，将文件命名为“layout01.html”，并将其保存在根目录下。

（2）执行【窗口】→【工作区布局】→【经典】命令，切换好软件界面的工作区布局（目的是保证能够与教程的界面布局一致）。

（3）执行【修改】→【页面属性】命令，在弹出的对话框中设置左、右、上、下边距均为“0”（默认为空）。默??值留有边距，不利于排版。其他选项保持默认设置，单击【确定】按钮关闭对话框。;（4）执行【插入】→【表格】命令，在弹出的【表格】对话框中设置【行数】为“4”，【列】为“3”，【表格宽度】为“1?500像素”，【边框粗细】【单元格边距】和【单元格间距】均为“0”（默认为空），其他选项保持默认设置。单击【确定】按钮关闭对话框，工作区的设计视图中会显示出插入的表格。单击表格的外边框线选中这个表格，在界面底部的【属性】控制面板中将【对齐】设为【居中对齐】。;;;（2）单击该表格的第二行第一列，执行【插入】→【图像】命令，在弹出的对话框中找到图片“logo-v-china.jpg”，单击【确定】按钮关闭对话框。;（4）单击该表格的第一行第三列，在【属性】控制面板中（左下角）设置单元格对齐方式为【右对齐】。执行【插入】→【表格】命令，在弹出的对话框中设置【行数】为“1”，【列】为“3”，【表格宽度】为“200像素”，【边框粗细】【单元格边距】和【单元格间距】均为“0”。（这一般为嵌套表格。）

（5）单击这个嵌套表格的第二列，执行【插入】→【图像】命令，在弹出的对话框中单击展开“images”文件夹找到图片“line-01.png”，单击【确定】按钮关闭对话框。然后单击这张图片，在【属性】控制面板中设置图片【高】为“20”。把光标放在该表格内部的第一根栏线上，单击并向右拖动，将图片充满第二个单元格。;（6）单击这个表格的第一个单元格，在【属性】控制面板中设置单元格对齐方式为【右对齐】。然后输入文字“中文”。继续把光标放在第三个单元格，输入文字“English”，设置单元格对齐方式为【左对齐】。;（2）在新窗口中将文件位置保存在站点根目录下的CSS文件夹中（如果没有，可以新建），将文件命名为“layoutcs”，【相对于】设置为【文档】。单击【保存】按钮进入下一级窗口。;（4）在该窗口中重新单击【Font-family】的下拉按钮展开其下拉列表，在列表的底部可以看到新增加的字体【微软雅黑】，单击完成字体设置。继续在【类型】项下设置【Font-size】为“12px”，【Font-style】为【normal】，【Color】为色彩“#999”；【Text-decoration】为【none】，单击【确定】按钮关闭对话框（注意不是【应用】按钮）。;（5）回到工作区重新全选第一行第一列单元格里的文字，然后在【属性】控制面板（底部左侧）中单击【CSS】标签（默认为【HTML】标签），单击展开【目标规